De oefeningen - Koppen en Alinea's
Koppen
De vorige les heb je geleerd hoe je door middel van HTML een eenvoudige tekst in beeld krijgt. Die zag er eigenlijk nog heel saai uit. Toch?
Als je normaal een tekst voor een verslag typt maak je vaak ook gebruik van koppen en alinea’s. Dat doe je om de tekst mooi en overzichtelijk te verdelen.
De kop is dan vaak wat groter, zodat je gelijk ziet waar het begint en waar het over gaat. De gewone tekst heeft een normale lettergrootte.
Om een kop te maken gebruik je de tag:
<H..> Tekst van de kop < /H..>
Ook geef je aan hoe groot de kop moet worden. Dat doe je door in plaats van de puntjes een getal te typen. Dit getal kies je tussen 1 (groot) en 7 (klein).
Het ziet er dan bijvoorbeeld als volgt uit:
<H2> Tekst van de kop < /H2>
In de praktijk gebruik je vaak alleen de getallen 1, 2 en 3, omdat de andere vrij klein zijn voor een kop.
Waarom is het eigenlijk de letter H? Dat is zo omdat hij afkomstig is van het woord ‘header’, wat Engels voor tussenkop. (Die "H" staat voor "header", ofwel een tussenkop in een document)
In het voorbeeld hieronder kun je zien hoe de verschillende koppen eruit zien.
Voorbeelden:
De vorige les heb je geleerd hoe je door middel van HTML een eenvoudige tekst in beeld krijgt. Die zag er eigenlijk nog heel saai uit. Toch?
Als je normaal een tekst voor een verslag typt maak je vaak ook gebruik van koppen en alinea’s. Dat doe je om de tekst mooi en overzichtelijk te verdelen.
De kop is dan vaak wat groter, zodat je gelijk ziet waar het begint en waar het over gaat. De gewone tekst heeft een normale lettergrootte.
Om een kop te maken gebruik je de tag:
<H..> Tekst van de kop < /H..>
Ook geef je aan hoe groot de kop moet worden. Dat doe je door in plaats van de puntjes een getal te typen. Dit getal kies je tussen 1 (groot) en 7 (klein).
Het ziet er dan bijvoorbeeld als volgt uit:
<H2> Tekst van de kop < /H2>
In de praktijk gebruik je vaak alleen de getallen 1, 2 en 3, omdat de andere vrij klein zijn voor een kop.
Waarom is het eigenlijk de letter H? Dat is zo omdat hij afkomstig is van het woord ‘header’, wat Engels voor tussenkop. (Die "H" staat voor "header", ofwel een tussenkop in een document)
In het voorbeeld hieronder kun je zien hoe de verschillende koppen eruit zien.
Voorbeelden:
Opdracht4:
Je gaat nu zelf weer aan de slag met HTML. Als het goed is weet je nog waar je mee begint. Het enige wat nu nieuw is, is het toevoegen van een kop.
Start het kladblok op (via Bureau-accessoires).
Begin net als de vorige keer met de code. Zorg dat nu bovenin de titelbalk ‘Les 2’ komt te staan. Om je nog even te helpen, kun je het onderstaande stuk overtypen.
Nu ga je zelf een kop maken. Maak nu een kop met grootte 2, met de tekst ‘Kop’.
Onder de kop typ je de volgende tekst: ‘Hier komt een alinea’.
Sla het bestand op als ‘Les2.html’ en open hem vervolgens via de verkenner.
Sluit het kladblok-bestand niet af.
Is de kop groter dan de ‘normale’ tekst die eronder staat? Dan heb je het goed gedaan!
Alinea's
Als je een tekst leest is het fijn als die is onderverdeeld in stukjes, en niet dat de hele pagina uit één lap tekst bestaat. Daarvoor maken we gebruik van alinea’s. Er is een simpele tag om alinea’s te maken is:
<P>
De P staat voor ‘Paragraph’, wat Engels is voor alinea.
Als je een alinea maakt start je de alinea met de tag <P> en sluit je hem af met </P>.
<P> Dit is een alinea </P>
Ook is het soms fijn om een witregel toe te voegen. Dit doe je door de tag <BR> te gebruiken.
De tag <BR> staat voor ‘break’.
Als je meerdere witregels zou willen, typ je gewoon vaker <BR> achter elkaar:
<BR><BR><BR>
Voorbeeld:
Je gaat nu zelf weer aan de slag met HTML. Als het goed is weet je nog waar je mee begint. Het enige wat nu nieuw is, is het toevoegen van een kop.
Start het kladblok op (via Bureau-accessoires).
Begin net als de vorige keer met de code. Zorg dat nu bovenin de titelbalk ‘Les 2’ komt te staan. Om je nog even te helpen, kun je het onderstaande stuk overtypen.
Nu ga je zelf een kop maken. Maak nu een kop met grootte 2, met de tekst ‘Kop’.
Onder de kop typ je de volgende tekst: ‘Hier komt een alinea’.
Sla het bestand op als ‘Les2.html’ en open hem vervolgens via de verkenner.
Sluit het kladblok-bestand niet af.
Is de kop groter dan de ‘normale’ tekst die eronder staat? Dan heb je het goed gedaan!
Alinea's
Als je een tekst leest is het fijn als die is onderverdeeld in stukjes, en niet dat de hele pagina uit één lap tekst bestaat. Daarvoor maken we gebruik van alinea’s. Er is een simpele tag om alinea’s te maken is:
<P>
De P staat voor ‘Paragraph’, wat Engels is voor alinea.
Als je een alinea maakt start je de alinea met de tag <P> en sluit je hem af met </P>.
<P> Dit is een alinea </P>
Ook is het soms fijn om een witregel toe te voegen. Dit doe je door de tag <BR> te gebruiken.
De tag <BR> staat voor ‘break’.
Als je meerdere witregels zou willen, typ je gewoon vaker <BR> achter elkaar:
<BR><BR><BR>
Voorbeeld:
Opdracht 5:
Open het bestand dat jij zojuist gemaakt hebt: Les2.html. Als het goed is staat het nog aan.
Heb je het toch afgesloten? Open het dan via de ‘Verkenner’ met ‘Openen met > Kladblok’.
Je hebt zojuist alleen nog maar en kop gemaakt en een tekst waar de alinea zou komen. Nu gaan we daar een echte tekst van maken. Vorig jaar heb je geleerd over de uitvinder van de computer: Charles Babbage. Kende je zijn naam nog?
Zorg nu dat je in plaats van ‘Kop’ ‘Charles Babbage typt. Maak daar nu Kop-grootte ‘1’ van.
In de alinea ga je informatie plaatsen over Charles Babbage zelf.
Gebruik hiervoor de eerste alinea van de website Wikipedia over deze uitvinder.
(http://nl.wikipedia.org/wiki/Charles_Babbage )
Je kunt ook de onderstaande tekst overtypen:
Charles Babbage (26 december 1791 – 18 oktober 1871) was een Brits wiskundige, filosoof, uitvinder en werktuigbouwkundige die bekend werd als de ontwerper van de eerste geautomatiseerde, programmeerbare, mechanische rekenmachine, de voorloper van de elektronische computer.
Om er nu een echte tekst van te maken ga je nog een alinea toevoegen, waarin je vertelt wie Ada Lovelace was. Begin met het maken van een kop met de naam van deze vrouw, en gebruik ook weer de eerste twee zinnen van de tekst van Wikipedia.
Je kunt ook de onderstaande tekst overtypen:
“Ada Lovelace schreef voor de Analytical Engine van Babbage het eerste computerprogramma. Het feit dat een vrouw zich hiermee bezig hield was voor die tijd zeer bijzonder want vrouwen werden in het onderwijs buitengesloten.
Met de tag <BR> kun je nu nog een extra witregel toevoegen tussen de twee alinea’s in.
Sla je document weer op onder de naam Les2.html en bekijk het resultaat.
Als het goed is, ziet het resultaat er precies zo uit als op de onderstaande afbeelding.
Open het bestand dat jij zojuist gemaakt hebt: Les2.html. Als het goed is staat het nog aan.
Heb je het toch afgesloten? Open het dan via de ‘Verkenner’ met ‘Openen met > Kladblok’.
Je hebt zojuist alleen nog maar en kop gemaakt en een tekst waar de alinea zou komen. Nu gaan we daar een echte tekst van maken. Vorig jaar heb je geleerd over de uitvinder van de computer: Charles Babbage. Kende je zijn naam nog?
Zorg nu dat je in plaats van ‘Kop’ ‘Charles Babbage typt. Maak daar nu Kop-grootte ‘1’ van.
In de alinea ga je informatie plaatsen over Charles Babbage zelf.
Gebruik hiervoor de eerste alinea van de website Wikipedia over deze uitvinder.
(http://nl.wikipedia.org/wiki/Charles_Babbage )
Je kunt ook de onderstaande tekst overtypen:
Charles Babbage (26 december 1791 – 18 oktober 1871) was een Brits wiskundige, filosoof, uitvinder en werktuigbouwkundige die bekend werd als de ontwerper van de eerste geautomatiseerde, programmeerbare, mechanische rekenmachine, de voorloper van de elektronische computer.
Om er nu een echte tekst van te maken ga je nog een alinea toevoegen, waarin je vertelt wie Ada Lovelace was. Begin met het maken van een kop met de naam van deze vrouw, en gebruik ook weer de eerste twee zinnen van de tekst van Wikipedia.
Je kunt ook de onderstaande tekst overtypen:
“Ada Lovelace schreef voor de Analytical Engine van Babbage het eerste computerprogramma. Het feit dat een vrouw zich hiermee bezig hield was voor die tijd zeer bijzonder want vrouwen werden in het onderwijs buitengesloten.
Met de tag <BR> kun je nu nog een extra witregel toevoegen tussen de twee alinea’s in.
Sla je document weer op onder de naam Les2.html en bekijk het resultaat.
Als het goed is, ziet het resultaat er precies zo uit als op de onderstaande afbeelding.
Opdracht 6:
Bij opdracht 2 heb je een korte presentatie over jezelf geschreven. Dat ziet er nog heel simpel uit. Je hebt deze les al weer heel wat meer geleerd over alinea’s en koppen, waardoor je deze toe kunt passen. Pas dit document aan en verdeel je hobby’s en andere informatie in minstens 3 alinea’s. Sla dit bestand op als hobby.html.