Les1 - HTML101

HTML

1 / 25

Slide 1: Diapositive

Applicatie- en mediaontwikkelaarMBOStudiejaar 1

Cette leçon contient 25 diapositives, avec quiz interactifs et diapositives de texte.

Éléments de cette leçon

HTML

Slide 1 - Diapositive

Hoe staan we ervoor vandaag?

😒🙁😐🙂😃

Slide 2 - Sondage

Leerdoel

Vertrouwd raken met de fundamentele principes van HTML

Slide 3 - Diapositive

Inhoud

Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening

Slide 4 - Diapositive

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 - Diapositive

Slide 6 - Diapositive

Tools of the trade

Integrated Development Environment (eigen keuze)

Brackets, Notepad++ (gratis)

Code validator : http://validator.w3.org

Slide 7 - Diapositive

Code Along!

Slide 8 - Diapositive

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

Sluiten

Slide 9 - Diapositive

Slide 10 - Diapositive

Structuur

Typische opbouw van een pagina

Slide 11 - Diapositive

Code geldig maken

Pagina die je hebt gemaakt valideren op:

http://validator.w3.org/

Slide 12 - Diapositive

Pagina is niet geldig!

Slide 13 - Diapositive

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 - Diapositive

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

Slide 15 - Diapositive

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 - Diapositive

Welke is een container tag?

<h1/>

(h1) (h1)

{h1/ h2/}

Slide 17 - Quiz

Welke tag(s) kunnen Attributen bevatten?

Alleen Open Tags

Alle tags

Alleen 1 tag per structuur

Geen enkele tags

Slide 18 - Quiz

Welke Encoding gebruikt HTML5

UTF-8

UTF-5

ITF-8

Slide 19 - Sondage

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 - Diapositive

Interne koppeling

Ankers

Slide 21 - Diapositive

Afbeelding

Tag: <img/>

Attribute: source (waar de file te vinden is)

Slide 22 - Diapositive

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 - Diapositive

Recap

-Werkwijze
-Tools
-Tags
-Structuur

Slide 24 - Diapositive

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 - Diapositive