Stap 9 – Scheidingslijnen

Laatste update: 2 maart 2019

Wanneer je grote stukken tekst gaat verwerken in HTML, kan het gebruikersvriendelijker worden voor bezoekers, wanneer de tekst onderbroken wordt. Dit kan bijvoorbeeld d.m.v. een scheidingslijn.

Een <HR>-tag toevoegen

In index.html, ga ik de scheidingslijn toevoegen:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<h2>Een korte introductie</h2>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
<hr>
</body>
</html>

HR staat voor Horizontal Rule. Zoals de tag (<HR>) hierboven gebruikt wordt, zal de browser een standaard scheidingslijn neerzetten. Dit is een open lijn met een diepte effect (schaduw). Het diepte effect zal echter niet duidelijk te zien zijn, wanneer de Horizontal Rule op standaard is ingesteld. Dit is vanwege de grootte, maar die kun je aanpassen.

Grootte aanpassen

De grootte kun je aanpassen door een SIZE toe te voegen. Bijvoorbeeld:

<hr size="5">

Dan krijg je een dikke open lijn van 5 pixels hoog. Niet alleen de dikte van de lijn is aan te passen.

De scheidingslijn invullen

Je kan de lijn ook compleet vullen:

<hr noshade>

Breedte en kleur aanpassen

Ook de kleur en breedte is aan te passen van de Horizontal Rule:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<h2>Een korte introductie</h2>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Bekijk haar website voor meer informatie.<br /><b><font size="4">Of neem contact
op</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</body>
</html>

Ik heb gekozen voor een scheidingslijn van 2 pixels hoog (SIZE=”2″). Deze moet gevuld worden (NOSHADE) en de lijn heb ik zwart gemaakt (COLOR=”#000000″). Daarnaast kies ik ervoor om de breedte van de lijn niet over de hele breedte van het scherm te laten lopen, maar over de helft (WIDTH=”50%”). De breedte kun je ook instellen met een vast formaat pixels, bijv. WIDTH=”400″.

HR heeft standaard witruimte om zich heen.

Alignment aanpassen

Naast alle bovenstaande mogelijkheden met de Horizontal Rule, kun je ook nog een locatie aangeven voor de scheidingslijn. Je hebt de keuze tussen gecentreerd, links of rechts, en je geeft het als volgt aan:

<HR ALIGN=CENTER> voor gecentreerd
<HR ALIGN=LEFT> voor links
<HR ALIGN=RIGHT> voor rechts

Dit is een tag die je bijna nooit gebruikt, of juist heel veel. Het is vooral handig voor websites met commentaar functies, zoals reviews. Dan kun je de berichten splitsen met deze scheidingslijn.

Naar de volgende stap

Bookmark the permalink.

Comments are closed.