Primer lesson: hypertext opmaaktaal

Hypertext Markup Language ( HTML )

HTML staat voor Hypertext Markup Language. Het is de standaard opmaaktaal voor documenten die ontworpen zijn om in een webbrowser te worden weergegeven. HTML kan worden ondersteund door technologieën zoals Cascading Style Sheets ( CSS ) en scripttalen zoals JavaScript.

Stichting van het web

In essentie is het internet een enorm netwerk van computers die wereldwijd met elkaar verbonden zijn. De belangrijkste manier waarop we met dit netwerk communiceren is via het World Wide Web ( WWW ), een systeem van onderling verbonden hypertextdocumenten die via internet toegankelijk zijn. De kern van het WWW wordt gevormd door webpagina's, documenten geschreven in HTML . HTML vormt de basisstructuur van websites, die vervolgens wordt verbeterd en aangepast door andere technologieën zoals CSS en JavaScript.

Structuur van HTML -documenten

Een HTML-document is gestructureerd volgens een set geneste tags, elementen tussen punthaken. Deze tags vertellen de webbrowser hoe de inhoud moet worden weergegeven. Een voorbeeld van een eenvoudige HTML documentstructuur is:

 <!DOCTYPE html>
<html>
    <hoofd>
        <title>Paginatitel</title>
    </hoofd>
    <lichaam>
        <h1>Dit is een kop</h1>
        <p>Dit is een alinea.</p>
    </body>
</html>

Deze code definieert een basiswebpagina met een titel, een kop en een alinea tekst.

HTML -elementen en tags

HTML-documenten bestaan uit HTML-elementen. Elk element wordt weergegeven door een starttag, wat inhoud en een eindtag. De start- en eindtags van een element zijn identiek, behalve dat de eindtag een slash vóór de elementnaam bevat.

De <code><p></code>-tag omsluit bijvoorbeeld een alinea met tekst en is als volgt gestructureerd:

 <p>Dit is een voorbeeldalinea.</p>

Verschillende elementen dienen verschillende doelen. Bijvoorbeeld:

De tags <code><h1>...</h1></code> tot en met <code><h6>...</h6></code> worden gebruikt voor koppen.
De <code><a></code>-tag definieert een hyperlink.
Met de tag <code><img></code> wordt een afbeelding in het document ingesloten.

Attributen

HTML elementen kunnen attributen hebben die extra informatie over de elementen geven. Attributen worden in de begintag van een element geplaatst en worden vaak gegeven in naam/waarde-paren, zoals <code>name="value"</code>.

Om bijvoorbeeld een afbeelding in te sluiten, gebruiken we de <code><img></code>-tag met het kenmerk <code>src</code> (bron) om de URL van de afbeelding op te geven:

 <img src="url naar afbeelding.jpg" alt="Beschrijving van de afbeelding">

Met het kenmerk <code>alt</code> kunt u alternatieve tekst voor de afbeelding opgeven als deze niet kan worden weergegeven.

Links en navigatie

Het gebruik van de <code><a></code>-tag creëert hyperlinks, die essentieel zijn voor de onderlinge verbondenheid van het web. Een hyperlink kan verwijzen naar een andere webpagina, een andere sectie op dezelfde pagina of zelfs een downloadbaar bestand. Bijvoorbeeld:

 <a href="https://example.com">Bezoek Example.com</a>

Hiermee wordt een link naar <code>https://example.com</code> gemaakt.

Lijsten

HTML biedt elementen voor het maken van lijsten. Er zijn twee hoofdtypen lijsten:

Ongeordende lijsten (<code><ul></code>), waarbij de volgorde van de items niet van belang is. De items in een ongeordende lijst worden gemarkeerd met opsommingstekens.
Geordende lijsten (<code><ol></code>), waarbij de volgorde van de items van belang is. De items in een geordende lijst zijn genummerd.

Elk item in de lijst wordt omgeven door de <code><li></code> (lijstitem)-tag.

HTML5

HTML5 is de nieuwste evolutie van de standaard en introduceert veel nieuwe functies die aansluiten bij de moderne behoeften aan multimedia en interactieve documenten. Deze omvatten nieuwe structuurelementen (<code><header></code>, <code><footer></code>, <code><article></code>, <code><section></code>), grafische elementen (<code><canvas></code> voor tekenen, <code><svg></code> voor schaalbare vectorafbeeldingen) en media-elementen (<code><audio></code> en <code><video></code>).

Semantische HTML

Semantische HTML verwijst naar het gebruik van HTML -opmaak om de semantiek, oftewel de betekenis, van de informatie op webpagina's te versterken. In plaats van alleen te definiëren hoe elementen eruitzien of zich gedragen (dat is een taak voor CSS en JavaScript), beschrijft semantische HTML nauwkeurig de structuur en het type content. Een <code><article></code>-tag geeft bijvoorbeeld aan dat de content een artikel is, terwijl een <code><nav></code>-tag een navigatiemenu aangeeft.

Door semantische HTML te gebruiken worden de toegankelijkheid en doorzoekbaarheid van webinhoud verbeterd, waardoor deze beter bruikbaar en vindbaar wordt.

Conclusie

HTML is een hoeksteentechnologie van het World Wide Web en biedt de basisstructuur voor webpagina's. Door gebruik te maken van tags, attributen en elementen maakt HTML het mogelijk om gestructureerde documenten te creëren. Door HTML te begrijpen en te gebruiken, kan een breed scala aan content worden gecreëerd die toegankelijk is op het web, van eenvoudige tekstdocumenten tot complexe interactieve multimedia-ervaringen. Als basis voor webontwikkeling is beheersing van HTML essentieel voor iedereen die wil ontwerpen of ontwikkelen voor het web.

hypertext opmaaktaal