Web Technology
Markup
= gestandariseerde verzamling notaties om zo documenten te annoteren → inhoud
gestructureerd
- Tags
- Formattering
Instructies aan software → tekst visualiseren
Populaire Markup talen:
- HTML
- Markdown
- XML
- LaTeX
HTML
Wat is HTML?
= markup-taal om webpagina’s te structureren
Geen programmeertaal!
= verzameling van elementen die we kunnen gebruiken om onderdelen op een webpagina te
omsluiten zodat deze gevisualiseerd wordt op een welbepaalde manier
Tekst via HTML structureren als paragraaf ➔ <p></p>
HTML-elementen
! HTML-elementen = case-intensitive
- Geschreven in hoofdletters/kleine letters
- <article> of <ARTICLE> of <Article>
- Toch beter alle elementen met kleine letter
2-delige elementen: begintag + eindtag (opening tag + closing tag)
- Omsluiten inhoud
- Tekst + tags = element
Begintag: Eindtag
< kleiner dan teken < kleiner dan teken
de naam van het element / schuine streep naar voren
> groter dan teken de naam van het element
> groter dan teken
Niet allemaal begintag – inhoud – eindtag
Signle tag:
- Iets toevoegen
o <img>
- Aan-/insluiten
,Zelfsluitende tag = empty element / void element
XHTML versie = duidelijker, minder gebruikt ➔ <meta />
- Forward slash ( / ) als voorlaatste teken
NOOIT HTML en XHTML mengen!
Nesting
In elementen andere elementen plaatsen = innesten
Bv: nadruk op woord programmeren ➔ woord omsluiten met <strong>-element
<h1>Graduaat in het <strong>programmeren</strong>.</h1>
Block- en inline elementen
2 visuele categorieen:
Block-level elementen Inline elementen
= Fysiek visueel blok op pagina Meestal genest in blokelementen
Starten op nieuwe regel Geen nieuwe regel
Inhoud na elementen ook op nieuwe regel Binnen paragraaf van tekst
Invloed op structuur/outline pagina Bv:
<article>, <em>, <strong>, <img>, …
Blokelement genest in blokelementen
Blokelement niet genest in inline element
Inline:
div>The following span is an <span class="highlight">inline
element</span>;
its background has been colored to display both the beginning and end
of
the inline element's influence.</div>
In dit voorbeeld is het <div>-element = blocklevel deze bevat tekst
In die tekst is er een <span>-element = inline
Hierdoor wordt de paragraaf correct weergegeven als een enkele, ononderbroken
tekststroom, zoals deze:
‘The following span is an inline element; its background has been colored to
display both the beginning and end of the inline element's influence.’
Blocklevel:
Nu gaan we de <span> veranderen in een blocklevel element → <p>
<div>The following paragraph is a <p class="highlight">block-level
element;</p>
its background has been colored to display both the beginning and end
of
the block-level element's influence.</div>
,Als we het refreshen zal het er als volgt uitzien:
“The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of the
block-level element's influence.”
Het <p> element veranderd de volledige layout in 3 segmenten:
- De tekst voor <p>
- De tekst van <p>
- De tekst na <p>
Elementen levels gaan veranderen:
Visuele presentatie van element veranderen ➔ display (css)
Je kunt de browser laten weten dat het inline-element in een blok box moet
weergegeven worden en NIET als inline
- Door de waarde van display inline te veranderen naar block
Attributen
Met bepaalde waarde
= sleutel + waarde ➔ sleutel=”waarde”
Bevatten extra info over element zonder dat deze als waarde verschijnt
!opgelet:
Attributen enkel op begintag – NOOIT op eindtag
Spatie tussen naam element en naam attribuut
Dubbele aanhalingstekens rond waarde attribuut
<html lang="nl">
<!-- … -->
</html>
Taal van volledige HTML-document ingesteld op Nederlands
➔ lang=”waarde”
Leesrichting van taal:
➔ dir=”waarde”
Waarde Betekenis
ltr left to right
rtl right to left
<p dir="ltr" lang="nl">Deze tekst is in het Nederlands.</p>
, Boolean attributen
= attributen die geschreven worden zonder waarde en bevatten slechts 1 waarde =
naam van het attribuut
Niet aanwezig?
- Waarde = inverse van naam attribuut
True & false zijn GEEN toegelaten waarden
<button type="submit" disabled>This will be disabled</button>
<button type="submit" disabled="">This will be disabled</button>
<button type="submit" disabled="disabled">This will be disabled</button>
<button type="submit">This will be enabled</button>
Globale attributen
= toepasbaar op alle elementen (soms zonder effect)
Attribuut Betekenis
CSS-stijlklasse(s) die op het element van toepassing zijn.
class Zorgt ervoor dat CSS specifieke elementen kan selecteren via class
selectors
id Unieke identifier van het element.
lang Taal (Eng.: language) van de inhoud van het element.
style Inline-stijlen met CSS. Probeer dit zoveel mogelijk te vermijden!
Bevat additionele informatie, meestal advies, gerelateerd aan het
title
element waartoe het behoort.
Is een boolean attribuut om een indicatie te geven dat het element
hidden
nog niet of niet meer relevant is.
<p id="alinea-1" class="cursief vet" lang="nl">In Gent</p>
HTML-commentaar
Code verduidelijken
Enkel zichtbaar in broncode!
Tussen begintag ( <!-- en eindtag ( -->
<!-- Dit is commentaar. Alles, ook HTML-elementen, binnen deze twee tags wordt genegeerd door de
browser. -->
Verwijderen voor website op productieserver plaatsen
Code tijdelijk uitschakelen → HTML-tags binnen commentaar negeert door browser
<!--
Markup
= gestandariseerde verzamling notaties om zo documenten te annoteren → inhoud
gestructureerd
- Tags
- Formattering
Instructies aan software → tekst visualiseren
Populaire Markup talen:
- HTML
- Markdown
- XML
- LaTeX
HTML
Wat is HTML?
= markup-taal om webpagina’s te structureren
Geen programmeertaal!
= verzameling van elementen die we kunnen gebruiken om onderdelen op een webpagina te
omsluiten zodat deze gevisualiseerd wordt op een welbepaalde manier
Tekst via HTML structureren als paragraaf ➔ <p></p>
HTML-elementen
! HTML-elementen = case-intensitive
- Geschreven in hoofdletters/kleine letters
- <article> of <ARTICLE> of <Article>
- Toch beter alle elementen met kleine letter
2-delige elementen: begintag + eindtag (opening tag + closing tag)
- Omsluiten inhoud
- Tekst + tags = element
Begintag: Eindtag
< kleiner dan teken < kleiner dan teken
de naam van het element / schuine streep naar voren
> groter dan teken de naam van het element
> groter dan teken
Niet allemaal begintag – inhoud – eindtag
Signle tag:
- Iets toevoegen
o <img>
- Aan-/insluiten
,Zelfsluitende tag = empty element / void element
XHTML versie = duidelijker, minder gebruikt ➔ <meta />
- Forward slash ( / ) als voorlaatste teken
NOOIT HTML en XHTML mengen!
Nesting
In elementen andere elementen plaatsen = innesten
Bv: nadruk op woord programmeren ➔ woord omsluiten met <strong>-element
<h1>Graduaat in het <strong>programmeren</strong>.</h1>
Block- en inline elementen
2 visuele categorieen:
Block-level elementen Inline elementen
= Fysiek visueel blok op pagina Meestal genest in blokelementen
Starten op nieuwe regel Geen nieuwe regel
Inhoud na elementen ook op nieuwe regel Binnen paragraaf van tekst
Invloed op structuur/outline pagina Bv:
<article>, <em>, <strong>, <img>, …
Blokelement genest in blokelementen
Blokelement niet genest in inline element
Inline:
div>The following span is an <span class="highlight">inline
element</span>;
its background has been colored to display both the beginning and end
of
the inline element's influence.</div>
In dit voorbeeld is het <div>-element = blocklevel deze bevat tekst
In die tekst is er een <span>-element = inline
Hierdoor wordt de paragraaf correct weergegeven als een enkele, ononderbroken
tekststroom, zoals deze:
‘The following span is an inline element; its background has been colored to
display both the beginning and end of the inline element's influence.’
Blocklevel:
Nu gaan we de <span> veranderen in een blocklevel element → <p>
<div>The following paragraph is a <p class="highlight">block-level
element;</p>
its background has been colored to display both the beginning and end
of
the block-level element's influence.</div>
,Als we het refreshen zal het er als volgt uitzien:
“The following paragraph is a
block-level element;
its background has been colored to display both the beginning and end of the
block-level element's influence.”
Het <p> element veranderd de volledige layout in 3 segmenten:
- De tekst voor <p>
- De tekst van <p>
- De tekst na <p>
Elementen levels gaan veranderen:
Visuele presentatie van element veranderen ➔ display (css)
Je kunt de browser laten weten dat het inline-element in een blok box moet
weergegeven worden en NIET als inline
- Door de waarde van display inline te veranderen naar block
Attributen
Met bepaalde waarde
= sleutel + waarde ➔ sleutel=”waarde”
Bevatten extra info over element zonder dat deze als waarde verschijnt
!opgelet:
Attributen enkel op begintag – NOOIT op eindtag
Spatie tussen naam element en naam attribuut
Dubbele aanhalingstekens rond waarde attribuut
<html lang="nl">
<!-- … -->
</html>
Taal van volledige HTML-document ingesteld op Nederlands
➔ lang=”waarde”
Leesrichting van taal:
➔ dir=”waarde”
Waarde Betekenis
ltr left to right
rtl right to left
<p dir="ltr" lang="nl">Deze tekst is in het Nederlands.</p>
, Boolean attributen
= attributen die geschreven worden zonder waarde en bevatten slechts 1 waarde =
naam van het attribuut
Niet aanwezig?
- Waarde = inverse van naam attribuut
True & false zijn GEEN toegelaten waarden
<button type="submit" disabled>This will be disabled</button>
<button type="submit" disabled="">This will be disabled</button>
<button type="submit" disabled="disabled">This will be disabled</button>
<button type="submit">This will be enabled</button>
Globale attributen
= toepasbaar op alle elementen (soms zonder effect)
Attribuut Betekenis
CSS-stijlklasse(s) die op het element van toepassing zijn.
class Zorgt ervoor dat CSS specifieke elementen kan selecteren via class
selectors
id Unieke identifier van het element.
lang Taal (Eng.: language) van de inhoud van het element.
style Inline-stijlen met CSS. Probeer dit zoveel mogelijk te vermijden!
Bevat additionele informatie, meestal advies, gerelateerd aan het
title
element waartoe het behoort.
Is een boolean attribuut om een indicatie te geven dat het element
hidden
nog niet of niet meer relevant is.
<p id="alinea-1" class="cursief vet" lang="nl">In Gent</p>
HTML-commentaar
Code verduidelijken
Enkel zichtbaar in broncode!
Tussen begintag ( <!-- en eindtag ( -->
<!-- Dit is commentaar. Alles, ook HTML-elementen, binnen deze twee tags wordt genegeerd door de
browser. -->
Verwijderen voor website op productieserver plaatsen
Code tijdelijk uitschakelen → HTML-tags binnen commentaar negeert door browser
<!--
