## Tekst toevoegen aan website

Leerdoelen:

Na deze uitleg:

- Weet je wat headings, paragraphs, breaks en horizontal lines zijn en kun je deze in een HTML-bestand toepassen;
- Kun je tekst opmaken: vet, cursief, onderstreept, gemarkeerd, superscript, subscript.

Headings, paragraphs, breaks en horizontal lines

Wanneer je tekst op je webpagina wilt zetten, doe je dit door gebruik te maken van headings en paragraphs. Met headings kun je koppen maken en met paragraphs kun je ‘normale’ stukken tekst maken. Binnen HTML zijn er 6 verschillende soorten headings, die alleen verschillen in grootte van de letters. De belangrijkste heading kun je aanmaken met h1 en de minst belangrijke heading met h6. Een heading plaats je tussen een openings- en sluitelement, bijvoorbeeld <h2> en </h2>. Voor paragraphs is er geen keuze; deze teksten worden altijd op dezelfde wijze weergegeven. Een paragraph plaats je ook tussen een openings- en sluitelement, <p> en </p>. Een voorbeeld van het gebruik van headings en paragraphs is weergegeven in figuur 4 en 5. In figuur 4 zie je de HTML-code en in figuur 5 hoe deze code wordt weergegeven in een webbrowser.

Figuur 4: HTML-code met headings en paragraphs

Figuur 5: Weergave van de HTML-code uit figuur 4 in een webbrowser

Als je goed naar figuur 4 en figuur 5 kijkt, zie je dat het geen verschil maakt of je wel of geen witregel gebruikt in de HTML code. Bij de laatste heading en paragraph wordt geen witregel gebruikt, terwijl het resultaat in de webbrowser hetzelfde is. Je ziet ook dat als je gebruik maakt van headings en paragraphs er automatisch voldoende ruimte om de tekst heen wordt gecreëerd.

Soms wil je ergens op je website een extra witregel toevoegen, bijvoorbeeld om meer ruimte te creëren tussen twee blokken tekst. Daarvoor kun je gebruik maken van het element break. Dit element heeft alleen een openingselement, <br>. Je gebruikt <br> ook om naar een volgende regel te gaan. Je kunt <br> vergelijken met enter in een tekstverwerkingsprogramma.

Om bepaalde onderdelen op je webpagina van elkaar te onderscheiden zou je ook gebruik kunnen maken van een horizontal line. Hiervoor gebruik je het element <hr>. Ook hierbij gebruik je alleen maar een openingselement. In figuur 6 en figuur 7 zie je voorbeelden van het gebruik van een break en een horizontal line.

Figuur 6: Gebruik van <br> en <hr> in HTML-code

Figuur 7: Weergave van de HTML-code uit figuur 6 in een webbrowser

Opdracht 5:

Je gaat nu de eerste inhoud voor je webpagina maken. Je weet nog dat jouw homepage opgeslagen is als index.html. Deze moet je nu eerst openen in repl.it, de IDE (weet je nog wat dat is?) die we in deze module gebruiken.

1. Ga naar de website repl.it.
2. Log in met je eigen gegevens en open je project (in team IT College - Noordik).
3. Als de file index.html nog niet geopend is, kun je deze openen door de file aan de linkerkant aan te klikken.

Zoals je eerde geleerd hebt, moet je alles wat je wilt laten zien op je webpagina in je HTML-file plaatsen in de body, dus tussen <body> en </body>.

1. Maak in je index.html file een heading aan en schrijf hierin een kop. Je mag zelf kiezen welke heading je gebruikt. De grootste heading is h1 en de kleinste heading is h6.
2. Maak onder je eerste heading nu een paragraph aan en schrijf hierin een stukje tekst.

Je kunt je webpagina nu bekijken door deze te openen in een nieuw tabblad van je webbrowser.

1. Open een nieuw tabblad in je webbrowser.
2. Typ in de adresbalk het www-adres van jouw website.

Opmaken van tekst

Door het gebruik van headings en paragraphs kun je tekst al een beetje opmaken. Met HTML kun je tekst op nog meer manieren opmaken, ook binnen headings en paragraphs. In figuur 8 en figuur 9 zie je op welke manieren je tekst nog meer kunt opmaken. Voor alle elementen die je hierbij gebruikt, geldt dat je deze moet openen en sluiten.

Figuur 8: Diverse mogelijkheden om met HTML tekst op te maken

Figuur 9: Weergave van de HTML-code uit figuur 8 in een webbrowser

Opdracht 6:

Je gaat nu de eerste versie van jouw webpagina maken. Bedenk dat je jouw webpagina later altijd weer aan kunt passen.

1. Vul je webpagina met de tekst die hoort bij jouw onderwerp. Maak hierbij gebruik van headings en paragraphs. Maak waar nodig en mogelijk ook gebruik van breaks en horizontal lines, en maak waar nodig de tekst op. Let er wel op dat jouw webpagina functioneel blijft. Spectaculaire opmaak-elementen moeten de aandacht voor de tekst niet te veel afleiden.