Je HTLM-pagina uitbreiden

h-tag; koppen

Met de h-tag kunnen we een kop maken. We hebben verschillende groottes hiervan. Op mijn site zie je er op dit moment drie; "Je HTLM-pagina uitbreiden", "Opmaakelementen" en "h-tag". We gaan dus een paar keer de h-tag toevoegen.
Je mag nu boven

1:

<p>Dit is een paragraaf</p>

een nieuwe regel gaan schrijven. Dit wordt een grote kop. Hiervoor gebruiken we de tag

1:

<h1>

Typ hier

1:

<h1>Dit is een h1 kop</h1>

Onder de paragraaf gaan we dan een kop maken die wat kleiner is; de h2. Zet hier dus

1:

<h2>Dit is een h2 kop</h2>

neer. Daaronder mag je weer een paragraaf neerzetten, dus

1:

<p>Dit is een paragraaf</p>

Vervolgens weer een kop, de h3. Dit doen we zo tot de h6 en we zetten als laatste een paragraaf neer. We hebben dus de volgende code in de body staan:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

<h1>Dit is een h1 kop</h1>
<p>Dit is een paragraaf</p>
<h2>Dit is een h2 kop</h2>
<p>Dit is een paragraaf</p>
<h3>Dit is een h3 kop</h3>
<p>Dit is een paragraaf</p>
<h4>Dit is een h4 kop</h4>
<p>Dit is een paragraaf</p>
<h5>Dit is een h5 kop</h5>
<p>Dit is een paragraaf</p>
<h6>Dit is een h6 kop</h6>
<p>Dit is een paragraaf</p>

Controleer nu of je resultaat hetzelfde is als dat van mij.

a-tag; links

Je wilt ongetwijfeld ook een link op je site plaatsen. Je hebt verschillende soorten links:

  • Een link naar een andere website
  • Een link naar een pagina binnen je eigen site
  • Een link naar een plaats op de huidige pagina van je pagina
  • Een link naar een emailadres

Al deze soorten zijn wel op dezelfde manier opgebouwd. Ze beginnen allemaal met

1:

<a

waarna de locatie volgt.

1:

<a href="">

is de opbouw van het eerst deel. De locatie staat dan tussen de twee aanhalingstekens. Hierna volgt de beschrijving, dit is de tekst die zichtbaar is. Daarna sluit je hem weer af. De uiteindelijke opbouw is dus

1:

<a href="">Hier je tekst</a>


Link naar een andere website

Als je een link naar een andere website plaatst, moet je bij de locatie de gehele link invoeren, dus met http:// Een goed voorbeeld is

1:

<a href="http://www.google.nl">Google</a>

wat Google als resultaat geeft.

Link naar een pagina binnen je eigen site

Bij een link naar een pagina op je eigen site hoef je niet de hele url op te geven. Hier is het genoeg om alleen de bestandsnaam op te geven, vergeet hierbij niet de extensie. Dus bijvoorbeeld

1:

<a href="index.php">Home</a>

geeft Home. Let er wel op dat de bestanden in dezelfde map staan. Als het bestand waarnaar je linkt in een submap staat, moet je ook de mapnaam opgeven. Dus mapnaam/bestandsnaam. Als het bestand waarnaar je linkt in een map erboven staat, moet je eerst nog zorgen dat je uit de huidige map komt, dat doe je door ../ in te voeren. Als je twee mappen omhoog moet, is het dus ../../je_bestandsnaam_hier.extensie.

Link naar een plaats op de huidige pagina van je pagina

Het is ook mogelijk om een link te plaatsen die linkt naar een bepaald stukje op je pagina. De link die we dan krijgen is

1:

<a href="#hier_je_link_tekst">link</a>

Natuurlijk moet het document wel weten waar het naar verwijst, daarvoor gebruik je

1:

<a name="hier_je_link_tekst">link</a>


Link naar een emailadres

Een link plaatsen naar een emailadres kan erg handig zijn. Zo hoeven mensen niet de link te kopiëren, maar opent automatisch hun mailprogramma. De opbouw hiervan is

1:

<a href="mailto:_hier_je_emailadres_">Stuur een mail</a>

Deze wijkt dus wat af van de andere links. De mailto: maakt duidelijk dat het om een link van een email gaat, zodat het mailprogramma opent. En zoals vanzelfsprekend volgt daarna je emailadres.

Je mag het nu zelf gaan uittesten met het eerste voorbeeld. Verwijder in je bestand nu alles behalve één paragraaf en de h1-titel. In deze paragraaf gaan we namelijk onze link erbij zetten. Zet

1:

<a href="http://www.anjoonline.nl">Anjo Online</a>

neer in de paragraaf die je hebt overgelaten. Je resultaat moet zijn zoals dit.

Een enter neerzetten.

Je ziet dat het niet echt mooi is dat de link direct achter de tekst komt te staan. Dit kun je voorkomen door er een enter tussen te zetten. De tag hiervoor is

1:

<br />

Zet deze tag neer, en bekijk of je resultaat is zoals het behoort te zijn.

Tekst opmaken

Het is ook mogelijk om tekst dikgedrukt te laten zijn, schuingedrukt of beide. Voor dikgedrukt gebruik je de tag

1:

<b>

voor schuingedrukt gebruik je

1:

<i>

Het is ook mogelijk om je tekst onderlijnd te hebben, maar met XHTML Strict is daarvoor CSS nodig. We gaan nu drie regels onder elkaar zetten, de bovenste dikgedrukt, die daaronder schuingedrukt en de onderste beide. De tekst die we hiervoor opgeven is respectievelijk "Deze tekst is dikgedrukt", "Deze tekst is schuingedrukt" en "Deze tekst is dik- en schuingedrukt". Dan mag je weer kijken of er bij jou hetzelfde uit komt als bij mij en vergeet ook nu niet om mijn broncode ook te bekijken.

<< Je eerste HTML-document
>> Nog meer opmaakelementen