HTML101

HTML
1 / 22
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 22 slides, with interactive quizzes and text slides.

Items in this lesson

HTML

Slide 1 - Slide

Inhoud
Werkwijze
Tools
Tags
Structuur
Link Tags
Oefening

Slide 2 - Slide

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 3 - Slide

Slide 4 - Slide

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

Slide 5 - Slide

Code Along!

Slide 6 - Slide

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

Slide 8 - Slide

Structuur
Typische opbouw van een pagina

Slide 9 - Slide

Code geldig maken
Pagina die je hebt gemaakt valideren op:

Slide 10 - Slide

Pagina is niet geldig!

Slide 11 - Slide

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 12 - Slide

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 13 - Slide

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

Dit is geen html tag!
<!DOCTYPE html>

Slide 14 - Slide

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

Slide 15 - Quiz

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

Slide 16 - Quiz

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

Slide 17 - 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 18 - Slide

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

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

Slide 19 - Slide

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

Slide 20 - Slide

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 21 - Slide

Recap
-Werkwijze
-Tools
-Tags
-Structuur

Slide 22 - Slide