Les1 - HTML101

HTML
1 / 25
volgende
Slide 1: Tekstslide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

In deze les zitten 25 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

HTML

Slide 1 - Tekstslide

Hoe staan we ervoor vandaag?
😒🙁😐🙂😃

Slide 2 - Poll

Leerdoel
Vertrouwd raken met de fundamentele principes van HTML

Slide 3 - Tekstslide

Inhoud
Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening

Slide 4 - Tekstslide

Werkwijze
  • Map/Directory Html aanmaken
  • Brackets/Notepad
  • Documentatie: www.w3schools.com/
  • Charset: عربيّة, Ελληνικά, abcdefg
  • Bestandsnamen
- gebruik extensie: .html
- geen hoofdletters
- index.html
- geen spaties
- over_ons.html 

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Tools of the trade
Integrated Development Environment (eigen keuze)
Brackets, Notepad++ (gratis)
Code validator :  http://validator.w3.org

Slide 7 - Tekstslide

Code Along!

Slide 8 - Tekstslide

Tags!
De basis van elke website!
Tags: code om de tekst te structureren of vorm te geven
1. Open tags: <br /> of <hr />
2. Container tags: <p>paragraaf</p>     <h1>titeltje</h1>

Open
Open
Sluiten
Sluiten

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Structuur
Typische opbouw van een pagina

Slide 11 - Tekstslide

Code geldig maken
Pagina die je hebt gemaakt valideren op:

Slide 12 - Tekstslide

Pagina is niet geldig!

Slide 13 - Tekstslide

Attributen
  • Alle HTML tags kunnen ze bevatten
  • Alle attributen moeten in de openingstag
  • Attributen bestaan voornamelijk uit naam en waarde combinaties
  • Naam van attribute in klein letters
  • Waarde tussen aanhalingstekens " hoi "

Slide 14 - Tekstslide

Encoding
Om een Html pagina correct te kunnen weergeven,
 moet je aangeven welke character set gebruikt moet worden

Met de <meta> tag kan je de character set aangeven
(Character sets)
HTML5 gebruikt UTF-8
<meta charset="UTF-8">

Slide 15 - Tekstslide

HTML <!DOCTYPE> Declaration
De browser moet weten wat voor document het aan het lezen is.
Alle html documenten beginnen met:

Dit is geen html tag!
<!DOCTYPE html>

Slide 16 - Tekstslide

Welke is een container tag?
A
<h1/>
B
(h1) (h1)
C
{h1/ h2/}
D
<h1> </h1>

Slide 17 - Quizvraag

Welke tag(s) kunnen Attributen bevatten?
A
Alleen Open Tags
B
Alle tags
C
Alleen 1 tag per structuur
D
Geen enkele tags

Slide 18 - Quizvraag

Welke Encoding gebruikt HTML5
UTF-8
UTF-5
ITF-8

Slide 19 - Poll

Link tags
-Absolute koppeling(verwijzen naar een vast adres)
<a href=“https://www.youtube.com”>Let's watch some clips!</a>


-Relatieve koppeling (Geeft de bestandnaam en de mapverwijzing)
<a href=“profiel.html”>naar mijn profiel</a>
Attribute
Waarde

Slide 20 - Tekstslide

Interne koppeling
Ankers
<p id="goingUp"> this side up </p>

<a href="#goingUp "> Back to top </a>

Slide 21 - Tekstslide

Afbeelding
Tag: <img/>
<img src="images/spiderman_cover.jpg"/>
Attribute: source (waar de file te vinden is)

Slide 22 - Tekstslide

Opdracht: Maak een 2 pagina website
  • Maak een Mappen structuur aan
  • Maak een index.html bestand
  • Let op de structuur van je code
  • Maak gebruik van de verschillende koppelingen
  • Maak gebruik van een image 
  • Nog meer info en tags op : www.w3schools.com/
  • Valideer je pagina! ( http://validator.w3.org/)

Slide 23 - Tekstslide

Recap
-Werkwijze
-Tools
-Tags
-Structuur

Slide 24 - Tekstslide

Bronnen
Webdesign P58: Opdracht1
w3schools.com/html/html_intro.asp
w3schools.com/html/html_basic.asp
w3schools.com/html/html_elements.asp
w3schools.com/html/html_attributes.asp

Slide 25 - Tekstslide