Stap 5 – Accentueren van tekst

Laatste update: 1 maart 2019

Natuurlijk wil je dat stukjes tekst eruit gaan springen. Daarvoor heb je verschillende mogelijkheden ter beschikking: onderstrepen, vet drukken of schuin drukken, ofwel underline, bold en italic.

In HTML geef je deze als volgt aan: <U>, <B> en <I>. Je kunt vast raden welke tag voor welk resultaat gaat zorgen. Ik zei toch dat HTML best simpel is!

Accenten leggen in de tekst – bold, underline, italic

Laten we dit in onze tekst gebruiken:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i>Nora Tol Virtual Publishing</i>. En nu weer, met haar tweede bedrijf,
i>ElNorado
Productions</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>Of neem contact op</b>.</p>
</body>
</html>

Zoals je ziet, worden deze tags altijd afgesloten. De tekst tussen de tekst word of vetgedrukt <b>, schuingedruk <i> of onderstreept <u> weergegeven. Bijvoorbeeld, de tekst tussen <B> en </B> wordt vet weergegeven op de homepage.

<U> = Underline (onderstrepen)
<B> = Bold (vet)
<I> = Italic (schuin)

Vetgedrukte tekst bereik je overigens ook met de STRONG-tag in HTML. Teksten tussen <strong> en </strong> worden ook vetgedrukt weergegeven.
En de EM-tag (staat voor ’emphasis’ – ergens de nadruk op leggen) zal ook schuingedrukt weergegeven worden (bijvoorbeeld: <em>tekst</em>).

Indien je het nodig hebt om teksten duidelijk te schrappen, dan kun je ze ook doorgestreept weergeven. De STRIKE-tag komt hier goed van pas. Heel handig als je iets moet <strike>corigeren</strike>, uhm, corrigeren.

Stap 5b – tekst laten bewegen

Inmiddels gebruiken we eigenlijk CSS in combinatie met Javascript om teksten te laten bewegen. Het voordeel daarvan is dat het dan in meerdere browsers werkt.

Horizontaal scrollen

De MARQUEE-tag zorgt ervoor dat tekst, foto’s of andere content, heen en weer kan scrollen. Deze tag werkt niet in alle browsers, maar ziet er als volgt uit.

<marquee>Deze tekst zal horizontaal scrollen</marquee>

Standaard zal de tekst van rechts naar links scrollen over de hele breedte van het scherm. Echter, kun je met wat attributes verschillende dingen aanpassen:

<marquee bgcolor="#ff0000" width="50%">Deze tekst zal horizontaal scrollen</marquee>

Nu zal de tekst scrollen over een rode achtergrond en de MARQUEE zelf zal niet meer de hele breedte van het scherm pakken, maar de helft. Je kunt ook de richting van de scrollende tekst bepalen:

<marquee direction="right">Deze tekst zal horizontaal scrollen</marquee>

Met DIRECTION=RIGHT zal de tekst niet meer naar links scrollen, maar naar rechts. Echter zal het nog altijd door de randen van de marquee heen verdwijnen van het scherm. Daar kun je ook nog wat mee doen. Je kunt de tekst binnen de MARQUEE heen en weer laten scrollen, alsof het tegen de kanten aanbotst. De code hiervoor is:

<marquee behavior="alternate">Deze tekst zal horizontaal scrollen</marquee>

Tevens kun je de snelheid van het scrollen aanpassen en hoevaak de tekst moet scrollen:

<marquee loop="2" scrolldelay="200">Deze tekst zal horizontaal scrollen</marquee>

Met LOOP=2 zorg je ervoor dat de tekst maar 2 keer zal scrollen.
Met SCROLLDELAY=200 zal de tekst minder snel scrollen. Des te hoger het getal, des te langzamer het scrollen zal gaan. Het stelt namelijk de snelheid van de vertraging in, in milliseconden. Met lagere waarden gaat de tekst langzamer scrollen.

Knipperen

Inmiddels gebruiken we ook hiervoor CSS, in combinatie met Javascript. Het voordeel daarvan is dat het dan in meerdere browsers werkt.

Een andere tag is de BLINK-tag, waarmee je tekst kan laten knipperen.

<blink>Deze tekst zal knipperen</blink>

De BLINK en MARQUEE tags worden ook vaak gecombineerd, om te zorgen dat elke browser toch wat met de tekst doet.

Ok, weer terug naar het serieuze werk. Op naar stap 6; lettertypes instellen.

Bookmark the permalink.

Comments are closed.