Artikelen
HTML - Les 3, Tekst opmaken
Auteur: Admin
In deze les zal je leren hoe je een tekst in een html pagina op kan maken.
Artikel:
Open allereerst het html bestand uit les 2 in kladblok of een andere tekst editor. Plaats vervolgens een tekst tussen de body tags. In dit voorbeeld neem ik hiervoor even een recept.
Voorbeeld
Alinea's
Aangezien het zo wel erg onoverzichtelijk is gaan we er alinea's/paragrafen van maken.
Een alinea maak je met behulp van de <p> en de </p> tag. Bij het begin van de alinea plaats je de <p> en bij het einde de </p>.
Voorbeeld
Koppen
HTML kent zes verschillende headings (koppen), genummerd van 1 tot 6, waarbij 1 de grootste is. Hiervoor gebruik je de <h1> en de </h1> tag
Tussen deze 2 tags komt het woord of de zin die als kop weergegeven moet worden.
Voorbeeld
Enter / Break
Zoals je misschien al wel gemerkt hebt werken enter in html niet. Dit doe je met behulp van <br />. Deze <br /> plaats je op de plaats waar je normaal op enter zou drukken.
Voorbeeld
Lijsten
Nu zal je je misschien afvragen waarom ik achter de benodigdheden in dit recept geen enter heb geplaatst. Wel dit ga ik oplossen met behulp van een lijst. Er zijn genummerde en ongenummerde lijsten. Een genummerde lijst maak je met behulp van <ol> en </ol>. In dit geval zal ik echter gebruik maken van een ongenummerde lijst, deze maak je met <ul> en </ul>.
Vervolgens zal je nog om elk object in je lijst <li> en </li> moeten zetten. Zodat het duidelijk is wanneer er een nieuw item begint. Dit lijkt misschien allemaal wat ingewikkeld maar het is best simpel, kijk maar eens in het voorbeeld hieronder.
Voorbeeld
Opslaan en bekijken
Tijd om weer eens te kijken wat we ervan gebrouwen hebben. Sla eerst het door jou gemaakte bestand op als "les3.html" (Dus geen .txt). Open je browser en ga naar "Bestand" -> "Bestand openen". Open nu het bestand dat je hebt opgeslagen.
Terug naar de categorie pagina
Terug naar de artikel pagina
Auteur: Admin
In deze les zal je leren hoe je een tekst in een html pagina op kan maken.
Artikel:
Open allereerst het html bestand uit les 2 in kladblok of een andere tekst editor. Plaats vervolgens een tekst tussen de body tags. In dit voorbeeld neem ik hiervoor even een recept.
<html>
<head>
<title>Mijn eerste kookles</title>
</head>
<body>
Marsepein
Benodigdheden:
300 gram poedersuiker
4 eetlepels bloem
100 gram boter
4 druppels amandelextract
verschillende kleuren bakkleurstof
Bereiding:
Kneed alles goed door elkaar tot een bal. De marsepein kun je kleuren door er wat druppels bakkleurstof aan toe te voegen. Wanneer je geen kleurstof kan vinden of het niet mag eten dan kan je ook bietensap gebruiken voor rode marsepein, of reine-claudesiroop voor groene marsepein of wortelsap voor oranje marsepein.
Je kan er nu leuke dingen van maken zoals poppetjes, diertjes, vruchten e.d
</body>
</html>
Voorbeeld
Alinea's
Aangezien het zo wel erg onoverzichtelijk is gaan we er alinea's/paragrafen van maken.
Een alinea maak je met behulp van de <p> en de </p> tag. Bij het begin van de alinea plaats je de <p> en bij het einde de </p>.
<html>
<head>
<title>Mijn eerste kookles</title>
</head>
<body>
<p>Marsepein</p>
<p>Benodigdheden:
300 gram poedersuiker
4 eetlepels bloem
100 gram boter
4 druppels amandelextract
verschillende kleuren bakkleurstof
</p>
<p>Bereiding:
Kneed alles goed door elkaar tot een bal. De marsepein kun je kleuren door er wat druppels bakkleurstof aan toe te voegen. Wanneer je geen kleurstof kan vinden of het niet mag eten dan kan je ook bietensap gebruiken voor rode marsepein, of reine-claudesiroop voor groene marsepein of wortelsap voor oranje marsepein.
Je kan er nu leuke dingen van maken zoals poppetjes, diertjes, vruchten e.d
</p>
</body>
</html>
Voorbeeld
Koppen
HTML kent zes verschillende headings (koppen), genummerd van 1 tot 6, waarbij 1 de grootste is. Hiervoor gebruik je de <h1> en de </h1> tag
Tussen deze 2 tags komt het woord of de zin die als kop weergegeven moet worden.
<html>
<head>
<title>Mijn eerste kookles</title>
</head>
<body>
<p><h1>Marsepein</h1></p>
<p><h2>Benodigdheden:</h2>
300 gram poedersuiker
4 eetlepels bloem
100 gram boter
4 druppels amandelextract
verschillende kleuren bakkleurstof
</p>
<p><h2>Bereiding:</h2>
Kneed alles goed door elkaar tot een bal. De marsepein kun je kleuren door er wat druppels bakkleurstof aan toe te voegen. Wanneer je geen kleurstof kan vinden of het niet mag eten dan kan je ook bietensap gebruiken voor rode marsepein, of reine-claudesiroop voor groene marsepein of wortelsap voor oranje marsepein.
Je kan er nu leuke dingen van maken zoals poppetjes, diertjes, vruchten e.d
</p>
</body>
</html>
Voorbeeld
Enter / Break
Zoals je misschien al wel gemerkt hebt werken enter in html niet. Dit doe je met behulp van <br />. Deze <br /> plaats je op de plaats waar je normaal op enter zou drukken.
<html>
<head>
<title>Mijn eerste kookles</title>
</head>
<body>
<p><h1>Marsepein</h1></p>
<p><h2>Benodigdheden:</h2>
300 gram poedersuiker
4 eetlepels bloem
100 gram boter
4 druppels amandelextract
verschillende kleuren bakkleurstof
</p>
<p><h2>Bereiding:</h2>
Kneed alles goed door elkaar tot een bal. De marsepein kun je kleuren door er wat druppels bakkleurstof aan toe te voegen. Wanneer je geen kleurstof kan vinden of het niet mag eten dan kan je ook bietensap gebruiken voor rode marsepein, of reine-claudesiroop voor groene marsepein of wortelsap voor oranje marsepein.<br />
Je kan er nu leuke dingen van maken zoals poppetjes, diertjes, vruchten e.d
</p>
</body>
</html>
Voorbeeld
Lijsten
Nu zal je je misschien afvragen waarom ik achter de benodigdheden in dit recept geen enter heb geplaatst. Wel dit ga ik oplossen met behulp van een lijst. Er zijn genummerde en ongenummerde lijsten. Een genummerde lijst maak je met behulp van <ol> en </ol>. In dit geval zal ik echter gebruik maken van een ongenummerde lijst, deze maak je met <ul> en </ul>.
Vervolgens zal je nog om elk object in je lijst <li> en </li> moeten zetten. Zodat het duidelijk is wanneer er een nieuw item begint. Dit lijkt misschien allemaal wat ingewikkeld maar het is best simpel, kijk maar eens in het voorbeeld hieronder.
<html>
<head>
<title>Mijn eerste kookles</title>
</head>
<body>
<p><h1>Marsepein</h1></p>
<p><h2>Benodigdheden:</h2>
<ul>
<li>300 gram poedersuiker</li>
<li>4 eetlepels bloem</li>
<li>100 gram boter</li>
<li>4 druppels amandelextract</li>
<li>verschillende kleuren bakkleurstof</li>
</ul>
</p>
<p><h2>Bereiding:</h2>
Kneed alles goed door elkaar tot een bal. De marsepein kun je kleuren door er wat druppels bakkleurstof aan toe te voegen. Wanneer je geen kleurstof kan vinden of het niet mag eten dan kan je ook bietensap gebruiken voor rode marsepein, of reine-claudesiroop voor groene marsepein of wortelsap voor oranje marsepein.<br />
Je kan er nu leuke dingen van maken zoals poppetjes, diertjes, vruchten e.d
</p>
</body>
</html>
Voorbeeld
Opslaan en bekijken
Tijd om weer eens te kijken wat we ervan gebrouwen hebben. Sla eerst het door jou gemaakte bestand op als "les3.html" (Dus geen .txt). Open je browser en ga naar "Bestand" -> "Bestand openen". Open nu het bestand dat je hebt opgeslagen.
Terug naar de categorie pagina
Terug naar de artikel pagina