Stap 10 – centreren

Het centreren van teksten en andere onderdelen van jouw ontwerp is vaak snel gedaan. In HTML is het maar met 1 tag gedaan.

CENTER-tag toevoegen

Als ik alles van mijn index.html gecentreerd wil hebben, doe ik dit als volgt:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<CENTER>
<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>
</CENTER>
</BODY>
</HTML>

Zoals je ziet, open ik, voordat mijn tekst begint, de CENTER-tag en eindig ik deze pas na de HR-tag. Alles dat tussen <CENTER> en </CENTER> staat, wordt nu gecentreerd weergegeven in de browser. Dat ik de CENTER-tag open voor de FONT-tag is niet verplicht. Je kunt de CENTER-tag ook voor de H2-tag openen en eindigen vlak na de HR-tag. Dit mag je zelf bepalen.

Alleen een deel centreren

Stel, dat je alleen een gedeelte gecentreerd wilt hebben. Dat kan. In zo’n geval gebruik je de CENTER-tag alleen waar je hem wilt inzetten:

<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>
<CENTER>
<H2>Een korte introductie</H2>
</CENTER>
<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>
<CENTER>
<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML> 

Hierboven heb ik ervoor gekozen om alleen de kop en de tekst, die groter weergegeven wordt te centreren.

Naar stap 11

Bookmark the permalink.

Comments are closed