Inleiding HTML#

HTML is de taal waarin webpagina’s beschreven worden. De browser zet HTML om in een weergave op het scherm, of op papier, in het geval van een afdruk.

De browser past de vorm (weergave) aan aan de eigenschappen van het scherm. Dezelfde inhoud ziet er op een computerscherm anders uit dan op het scherm van een smartphone. Je kunt een webpagina repsonsive maken, dit betekent dat deze er zowel op een smartphone als op een groter scherm goed uitziet.

In HTML beschrijf je de inhoud en de structuur; de opmaak beschrijf je apart, in CSS. Dit betekent dat je dezelfde inhoud op verschillende manieren kunt weergeven: niet alleen met een andere verdeling van de tekst en andere elementen, maar ook met heel andere kleuren, lettertypes, enzovoorts.

Dit betekent dat je de “huisstijl” van een website kunt veranderen, zonder de inhoud (de HTML-bestanden) aan te passen.

Direct aan de slag

Met Glitch kun je snel werken met HTML, CSS en JavaScript, om je eigen website te maken. Je kunt het voorbeeld remixen met je eigen smaak en je eigen uitbreidingen (zie de knop: “Remix your own”). Glitch beschrijft zichzelf als de vriendelijke plek waar iedereen met het web bouwt. Wij gebruiken het als online editor.

Tags#

Een HTML-element begint met een open-tag en eindigt met de bijbehorende sluit-tag. Een open-tag bestaat uit de tag-naam tussen < en >. De sluit-tag is dezelfde naam tussen met </ en >. Bijvoorbeeld: <h1> is de open-tag voor een kopje (header) op het hoogste niveau. De bijbehorende sluit-tag is dan </h1>.

In de code-cellen hieronder geeft %%HTML aan dat er HTML-tekst volgt. Dit is geen onderdeel van de HTML-code zelf.

%%HTML

<h1>Dit is een kopje</h1>

Dit is een kopje

%%HTML

<p>
    Dit is een paragraaf.
    Deze kan uit meerdere regels bestaan.
    In het resultaat wordt dat één aaneensluitende tekst.
</p>

Dit is een paragraaf. Deze kan uit meerdere regels bestaan. In het resultaat wordt dat één aaneensluitende tekst.

Je kunt ook tags hebben binnen een regel, bijvoorbeeld om aan te geven dat een woord met nadruk weergegeven moet worden. Hiervoor gebruik je de tag <em>. De browser maakt er dan meestal cursieve tekst van.

Met de tag <strong> geef je een sterke nadruk aan; de browser maakt daar meestal vette tekst (bold) van.

%%HTML

<p>
    Dit is een paragraaf.
    Deze kan uit <em>meerdere regels</em> bestaan.
    In het resultaat wordt dat <strong>één aaneensluitende tekst</strong>.
</p>

Dit is een paragraaf. Deze kan uit meerdere regels bestaan. In het resultaat wordt dat één aaneensluitende tekst.

Opdracht 1 (Maak je eigen tekst)

Je kunt de elementen die hierboven beschreven zijn combineren in je eigen tekst. Let er op dat elk open-tag afgesloten wordt met de bijbehorende sluit-tag.