Samenvatting WT boek HTML & CSS
Hoofdstuk 1 - Structure
HTML code is gemaakt van elementen → 2 tags; een opening <> en sluitende </> tag.
< .. > hetgene tussen de haakjes geeft aan wat het doel is van de tag.
Attributen
Geeft aanvullende informatie over de inhoud van een element.
Staan in de openende tag.
Bestaat uit 2 delen: een attribuut naam en een attribuut waarde.
<p lang=’’en-us’’>Paragraph in Englisch</p>
Naam: zegt wat voor extra informatie je toevoegt aan de inhoud van het element.
Waarde: de informatie voor het attribuut.
<body>
Alles in dit element is te zien op het hoofd browser venster.
<head>
Extra informatie voor de browser.
Je zult de <title> element vinden in de <head> element.
<title>
De inhoud van dit element wordt weergegeven in de top van de browser boven waar
je de URL typt of de pagina die je wilt bezoeken, of op de tab voor de pagina.
HTML = HyperText Markup Language.
HyperText → voor het feit dat je links maakt waarmee bezoekers snel van de
ene naar de andere pagina kunnen gaan
Markup Language → laat je aantekeningen maken, wat meer betekenis geeft
aan de inhoud van je document.
Markup → zijn de tags
,Hoofdstuk 2 – Tekst
Titels
HTML heeft 6 ‘’levels’’ van titels:
<h1> → hoofdkop
<h2> → subkopjes
<h3>
<h4>
<h5>
<h6>
Ze hebben verschillende groottes
Paragrafen
Om een paragraaf te maken doe je voor de woorden van je paragraaf een openende
<p> tag en achter de woorden een sluitende </p> tag.
Vet en cursief
<b> en </b> om een woord dikgedrukt te maken
<i> en </i> om een woord schuingedrukt te maken
Superscript en Subscript
<sup> en </sup> voor als je iets rechtsboven het woord wilt hebben (bv: 4de)
<sub> en </sub> voor als je iets rechtsonder het woord wilt hebben (bv: CO2)
White space
Soms voegen ze extra ruimtes toe of starten elementen op een nieuwe regel.
White space collapsing
Line breaks & Horizontal rules
<br /> als je wilt dat de tekst erna op een volgende regel komt
<hr /> als je een horizontale lijn wilt
,→ empty elements :
• geen woorden tussen een openende en sluitende tag
• maar 1 tag
• een spatie voor de slash
Visual editors & their code views
Visual editors: → lijkt op word
• titels worden gemaakt door de tekst te selecteren en voor een soort titel te
kiezen
• dikgedrukt en cursief krijg je door de tekst te selecteren en op b of i te klikken
• nieuwe paragrafen worden gemaakt door op return of enter te klikken
• line breaks worden gemaakt door de shift toets en return toets tegelijk in te
drukken
• horizontale lijnen worden gemaakt door een knop in te drukken met een
rechte lijn erop
Code views → laat de code zien die is gemaakt door de visual editor
Krijg je door op HTML te klikken
Semantic markup
→ het doel hiervan is om de inhoud van je webpagina nauwkeuriger te omschrijven
en dus niet om het uiterlijk van de tekst te veranderen
→ dit kan handig zijn voor bv. een stem van een schermlezer, een zoekmotor etc.
Strong & emphasis
<strong> en </strong> voor als de inhoud van het element heel belangrijk is
→ wordt dikgedrukt laten zien
<em> en </em> zodat er nadruk op wordt gelegd, die de betekenis van een zin
subtiel wijzigt
→ wordt schuingedrukt laten zien
Quotations
<blockquote cite=*site URL*> en </blockquote> voor lange citaten die een hele
paragraaf in beslag nemen
<q> en </q> voor kleinere citaten die passen in een paragraaf
→ nog steeds <p> en </p> blijven gebruiken
, Abbreviations & acronyms
<abbr title =’’volledige term’’> en </abbr> voor afkortingen. Een titel attribuut in de
openende tag is gebruikt om de volledige term te vermelden
In HTML 4 was er <acronym> om de volledige term te vermelden (in een soort apart
vak)
In HTML 5 wordt <abbr> voor beide gebruikt
Citaten en definities
<cite> en </cite> voor verwijzing naar een boek, film, onderzoekskrant etc.
→ wordt schuingedrukt laten zien
<dfn> en </dfn> om een omschrijving met voorbeelden van een nieuwe term aan te
geven
→ Sommige browsers laten het schuingedrukt zien, Safari en Chrome doen dat niet
Author details
<address> en </adress> bevat contact informatie voor de auteur van de pagina
Het kan een echt adress zijn, maar ook een email of telefoonnummer
→ het wordt schuingedrukt laten zien
Changes to content
<ins> en </ins> laat zien wat is toegevoegd → wordt onderstreept laten zien
<del> en </del> laat zien wat is verwijderd → wordt doorstreept laten zien
<s> en </s> wat niet langer exact of relevant is (maar het moet niet verwijderd
worden)
→ wordt doorstreept laten zien
Hoofdstuk 1 - Structure
HTML code is gemaakt van elementen → 2 tags; een opening <> en sluitende </> tag.
< .. > hetgene tussen de haakjes geeft aan wat het doel is van de tag.
Attributen
Geeft aanvullende informatie over de inhoud van een element.
Staan in de openende tag.
Bestaat uit 2 delen: een attribuut naam en een attribuut waarde.
<p lang=’’en-us’’>Paragraph in Englisch</p>
Naam: zegt wat voor extra informatie je toevoegt aan de inhoud van het element.
Waarde: de informatie voor het attribuut.
<body>
Alles in dit element is te zien op het hoofd browser venster.
<head>
Extra informatie voor de browser.
Je zult de <title> element vinden in de <head> element.
<title>
De inhoud van dit element wordt weergegeven in de top van de browser boven waar
je de URL typt of de pagina die je wilt bezoeken, of op de tab voor de pagina.
HTML = HyperText Markup Language.
HyperText → voor het feit dat je links maakt waarmee bezoekers snel van de
ene naar de andere pagina kunnen gaan
Markup Language → laat je aantekeningen maken, wat meer betekenis geeft
aan de inhoud van je document.
Markup → zijn de tags
,Hoofdstuk 2 – Tekst
Titels
HTML heeft 6 ‘’levels’’ van titels:
<h1> → hoofdkop
<h2> → subkopjes
<h3>
<h4>
<h5>
<h6>
Ze hebben verschillende groottes
Paragrafen
Om een paragraaf te maken doe je voor de woorden van je paragraaf een openende
<p> tag en achter de woorden een sluitende </p> tag.
Vet en cursief
<b> en </b> om een woord dikgedrukt te maken
<i> en </i> om een woord schuingedrukt te maken
Superscript en Subscript
<sup> en </sup> voor als je iets rechtsboven het woord wilt hebben (bv: 4de)
<sub> en </sub> voor als je iets rechtsonder het woord wilt hebben (bv: CO2)
White space
Soms voegen ze extra ruimtes toe of starten elementen op een nieuwe regel.
White space collapsing
Line breaks & Horizontal rules
<br /> als je wilt dat de tekst erna op een volgende regel komt
<hr /> als je een horizontale lijn wilt
,→ empty elements :
• geen woorden tussen een openende en sluitende tag
• maar 1 tag
• een spatie voor de slash
Visual editors & their code views
Visual editors: → lijkt op word
• titels worden gemaakt door de tekst te selecteren en voor een soort titel te
kiezen
• dikgedrukt en cursief krijg je door de tekst te selecteren en op b of i te klikken
• nieuwe paragrafen worden gemaakt door op return of enter te klikken
• line breaks worden gemaakt door de shift toets en return toets tegelijk in te
drukken
• horizontale lijnen worden gemaakt door een knop in te drukken met een
rechte lijn erop
Code views → laat de code zien die is gemaakt door de visual editor
Krijg je door op HTML te klikken
Semantic markup
→ het doel hiervan is om de inhoud van je webpagina nauwkeuriger te omschrijven
en dus niet om het uiterlijk van de tekst te veranderen
→ dit kan handig zijn voor bv. een stem van een schermlezer, een zoekmotor etc.
Strong & emphasis
<strong> en </strong> voor als de inhoud van het element heel belangrijk is
→ wordt dikgedrukt laten zien
<em> en </em> zodat er nadruk op wordt gelegd, die de betekenis van een zin
subtiel wijzigt
→ wordt schuingedrukt laten zien
Quotations
<blockquote cite=*site URL*> en </blockquote> voor lange citaten die een hele
paragraaf in beslag nemen
<q> en </q> voor kleinere citaten die passen in een paragraaf
→ nog steeds <p> en </p> blijven gebruiken
, Abbreviations & acronyms
<abbr title =’’volledige term’’> en </abbr> voor afkortingen. Een titel attribuut in de
openende tag is gebruikt om de volledige term te vermelden
In HTML 4 was er <acronym> om de volledige term te vermelden (in een soort apart
vak)
In HTML 5 wordt <abbr> voor beide gebruikt
Citaten en definities
<cite> en </cite> voor verwijzing naar een boek, film, onderzoekskrant etc.
→ wordt schuingedrukt laten zien
<dfn> en </dfn> om een omschrijving met voorbeelden van een nieuwe term aan te
geven
→ Sommige browsers laten het schuingedrukt zien, Safari en Chrome doen dat niet
Author details
<address> en </adress> bevat contact informatie voor de auteur van de pagina
Het kan een echt adress zijn, maar ook een email of telefoonnummer
→ het wordt schuingedrukt laten zien
Changes to content
<ins> en </ins> laat zien wat is toegevoegd → wordt onderstreept laten zien
<del> en </del> laat zien wat is verwijderd → wordt doorstreept laten zien
<s> en </s> wat niet langer exact of relevant is (maar het moet niet verwijderd
worden)
→ wordt doorstreept laten zien
