Leerdoelen:
Na deze uitleg:
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.
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>.
Je kunt je webpagina nu bekijken door deze te openen in een nieuw tabblad van je webbrowser.
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.