HTML Cursus tekst opmaken

Bij het bouwen van een website is het belangrijk dat je een bepaalde structuur in je website toont. Op deze manier kan een bezoeker namelijk makkelijk zijn of haar weg door je website vinden. Om deze structuur op te bouwen ondersteund HTML een groot aanbod aan tags welke je kunt toepassen op je code.

We beginnen met de heading tags. Bij het gebruik van HTML kun je kiezen van H1 tot en met H6. Hierbij moet je weten dat een H1 tag een belangrijkere waarde heeft dan de H2. De H2 tag heeft weer een belangrijkere waarde dan de H3 etc. In de H1 tag plaatsen webmasters vaak de titel van hun website. Zie het voorbeeld hieronder.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>

<h1>Hello World</h1>
Dit is mijn eerste website

</body>
</html>

Bij het opmaken van de van de tekst kun je gebruik maken van de tag <strong> om een woord dikgedrukt te tonen. Wil je een woord schuingedrukt tonen dan doe je dat met de tag <em>. Daarnaast kun je de content van de website tonen in paragraven. Dit doe je met <p> en wil je alleen dat een woord op een nieuwe regel begint, dan gebruik je de tag <br />.

In onderstaand voorbeeld zie je hoe je deze tags toepast in je HTML code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello World</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>

<h1>Hello World</h1>

<p>Dit is mijn eerste website</p>
<p>
<strong>Deze tekst is dikgedrukt</strong><br />
<em>Deze tekst is schuingedrukt, en staat tevens op een nieuwe regel.</em>
</p>

</body>
</html>

In de afbeelding hieronder zie je het resultaat van de HTML code die we hierboven hebben aangemaakt.

HTML cursus

Nu weet je deze tags natuurlijk nog niet direct uit je hoofd, daarom raden we je aan om eerst eens een beetje te oefenen met het programmeren in HTML alvorens je verder gaat met het volgende hoofdstuk.

De volgende hoofdstukken worden z.s.m. toegevoegd!

Auteur: Pim vd Molen

Deel dit met andere
Facebook Twitter Stumble Email More