Stap 9 – scheidingslijnen

Wanneer je grote stukken tekst gaat verwerken in HTML, is het voor bezoekers wat makkelijker om hun weg te vinden, wanneer de tekst onderbroken wordt. Dit kan bijvoorbeeld d.m.v. een scheidingslijn.

Een <HR>-tag toevoegen

In mijn index.html, ga ik deze regel gebruiken als indicatie dat er geen tekst volgt:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<H2>Een korte introductie</H2>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van haar
<I>webdesign-diensten</I>.</P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<HR>
</FONT>
</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 niet duidelijk te zien zijn wanneer de Horizontal Rule op standaard is ingesteld. Dit is vanwege de grootte.

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. Dit doe je als volgt:

<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"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<H2>Een korte introductie</H2>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van haar
<I>webdesign-diensten</I>.</P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media.</P>
<P><FONT SIZE=4>Kijk snel op haar website voor meer informatie.</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<HR WIDTH=50% COLOR="#000000" NOSHADE SIZE=2>
</FONT>
</BODY>
</HTML>

In mijn index.html document, heb ik gekozen voor een scheidingslijn van 2 pixels hoog (SIZE=2), deze moet gevuld worden (NOSHADE) en alles moet zwart weergegeven worden (COLOR=#000000). Daarnaast kies ik ervoor om de breedte van de lijn niet over de gehele breedte van het scherm te laten lopen, maar over de helft (WIDTH=50%). De breedte kun je ook definiëren met een vast formaat pixels, bijv. WIDTH=400.

HR heeft standaard witruimte om zich heen. Als dit niet voldoende is, kun je gebruik maken van Forced Line Breaks en de Paragraph-tag (zie stap 4) om meer witruimte te creëren.

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

Naar de volgende stap

Bookmark the permalink.

Comments are closed