In het voorbeeld hierboven betekenen de codes het volgende:

(1)

STC - GROUP INFORMATICA

ONDERWERP: HTML-TAGS DATUM: 12-11-2021 AUTEUR: BAKKER

Inhoudsopgave

<HTML-tags>... 2

Informatie over de <head> en <body> tags (header)...2

<html>...</html>...2

<head>...</head>...2

<title>...</title>...2

<body>...</body>...2

Tekstopmaak... 3

<font>...</font>...3

<div align="left">...</div>...3

<b>...</b>... 3

<u>...</u>... 3

<i>...</i>... 3

<strike>...</strike>...3

<p>...</p>... 4

<br>... 4

<H>...</H>...4

<marquee>...</marquee>...4

Informatie over de <a> tag (hyperlinks)...5

<a href="xxx">...</a>...5

<a href="mailto:jouw@email.adres">...</a>...5

<a name>...</a>...5

<a name="doel">...</a>...5

<table>...</table>...6

<table width="250">...</table> of <tr width="50%">...</tr>...6

<table style="font-family=tahoma; font-size=10pt">...</table>...6

<tr align="left">...</tr> of <tr valign="top">...</tr>...6

<td bgcolor="#FF0000">...</td>...6

<td colspan="2">...</td> of <tr rowspan="3">...</tr>...6

Informatie over de <img> tag (afbeeldingen), <div> en <iframe>...8

<Symbolen>... 9

<Kleuren>... 10

</HTML-tags>...10

(2)

<HTML-TAGS>

INFORMATIE OVER DE <HEAD> EN <BODY> TAGS (HEADER)

<html>...</html>

Geeft aan dat alles tussen de tags in HTML geschreven is.

<head>...</head>

Tussen deze tags plaats je achtergrondinformatie die niet in de pagina zichtbaar is, zoals:

Plaats steekwoorden voor je website in deze tag en zet 'm tussen de

<head> tags. Zoekmachines indexeren op deze steekwoorden.

Plaats een korte beschrijving van je website in deze tag en zet 'm tussen de <head> tags. Zoekmachines indexeren op deze korte beschrijving.

<title>...</title>

Geef je pagina een titel. Deze titel wordt weergegeven in de titelbalk van de browser. Plaats deze tag tussen de <head> tags.

<body>...</body>

Tussen deze tags plaats je de informatie die zichtbaar in het scherm verschijnt.

De <body> tag kan als volgt worden uitgebreid:

Vul achter de # de HTML kleurcode in, voor de kleur die je wilt gebruiken, of gebruik

"black", "red", "green" enzovoort.

In het voorbeeld hierboven betekenen de codes het volgende:

"bgcolor

" achtergrondkleur

"text" Tekstkleur

"link" tekstkleur van een link

"vlink" tekstkleur van een bezochte link

"alink" tekstkleur van een actieve link

K.Bakker 12-11-2021 2 - 13

tempfile_3106.doc

(3)

TEKSTOPMAAK

<font>...</font>

Gebruik deze tags om het lettertype aan te geven. Voor "tahoma" in grootte 3 (12pt.) gebruik je de tag:

Om een lettertype te gebruiken voer je de naam ervan in achter "font face", bijvoorbeeld:

"tahoma"

"arial"

"times new roman"

"verdana"

"comic sans ms"

De standaard tekstgrootte varieert van 1 (8pt) tot 7 (20pt):

Dit is tekstgrootte 1

Dit is tekstgrootte 2

Dit is tekstgrootte 3 Dit is tekstgrootte 4

Dit is tekstgrootte 5

Dit is tekstgrootte 6

Dit is tekstgrootte 7

<div align="left">...</div>

Gebruik deze tag om links uit te lijnen

Gebruik deze tag om te centreren

<b>...</b>

Gebruik deze tag voor vetgedrukte tekst

<u>...</u>

Gebruik deze tag voor onderstreepte tekst

<i>...</i>

Gebruik deze tag voor cursieve tekst

<strike>...</strike>

Gebruik deze tag voor doorgestreepte tekst

(4)

<p>...</p>

Maak alinea's aan in je teksten. Dat komt de overzichtelijkheid van je pagina's ten goede. Doe dat door de tekst tussen de <p>...</p> te plaatsen.

<br>

Een harde enter (naar de volgende regel). Met <br><br> maak je dus een witregel.

<H>...</H>

Met de <H> tag maak je headers. H1 is de grootste en H5 de kleinste.

<H2>Header 2</H2>

<H3>Header 3</H3>

<H4>Header 4</H4>

<marquee>...</marquee>

Met deze tag laat je tekst of een object bewegen over je scherm.

Gebruik eventueel de volgende toevoegingen:

scroll: doorlopend van rechts naar links

alternate: doorlopend heen en weer

slide: eenmalig van rechts naar links

Verder kun je met een aantal aanvullingen de richting (direction), aantal herhalingen (loops), afmetingen, uitlijning (align), achtergrondkleur en snelheid (scrollamount) instellen indien gewenst:

<marquee behavior="scroll" direction="up" loop="0" width="150"

height="100" align="center" bgcolor="#046380"

scrollamount="2">...</marquee>

K.Bakker 12-11-2021 4 - 13

tempfile_3106.doc

(5)

INFORMATIE OVER DE <A> TAG (HYPERLINKS)

<a href="xxx">...</a>

Deze tag wordt gebruikt voor het maken van links naar een andere

locatie, bijvoorbeeld een andere webpagina. Vul op de plaats van "xxx" de url in waar je naar wilt linken, bijvoorbeeld <a

href="http://www.webhtml.nl"> (Vergeet de http:// prefix niet). Natuurlijk kun je ook linken naar een pagina binnen je eigen site (bv. "index.html") of naar ieder willekeurig bestand om te downloaden (bv.

"/movies/film.mpeg"). Zodra iemand klikt op de tekst of afbeelding die je op de plaats van de puntjes invult, wordt hij of zij naar je link gestuurd.

Standaard opent de nieuwe pagina in hetzelfde venster van de browser. Gebruik de tag

<a href="http://www.webhtml.nl" target=_blank> om de pagina te laten openen in een nieuw venster.

<a href="mailto:jouw@email.adres">...</a>

Dit is een tag voor een zogenaamde email-link. Als men op de link klikt wordt het emailprogramma van de bezoeker geactiveerd en wordt een nieuw emailbericht opgesteld. Met de volgende tag kun je alvast een onderwerp en een stuk tekst zelf invullen:

Met deze tag verstuur je een mail naar jouw@email.adres met als onderwerp "mailtje" en de tekst "Ik wil je het volgende vertellen."

mail

Let wel: deze email-link werkt alleen als iemand ook daadwerkelijk een emailprogramma gebruikt (bv. Microsoft Outlook).

<a name>...</a>

Deze tag kun je gebruiken om targets (doelen) in je pagina te plaatsen.

Dat kan handig zijn als je een lange lap tekst op een pagina plaatst. Je kunt dan verwijzen naar targets in de tekst. Dat doe je met de volgende tag:

Bij "pagina" vul je de naam van de huidige pagina in (of een andere pagina waar de tekst staat) en bij "doel" de naam van het doel. Vervolgens plaats je bij het doel de volgende tag:

<a name="doel">...</a>

Zo weet de browser op welke pagina en waar op die pagina hij moet zijn als iemand op de link klikt.

Een pop-up kun je ook met een <a href> tag maken. Hierbij definieer je de

afmetingen van je pop-up (en geef je aan of die vast zijn of variabel) en geef je aan of

de pop-up moet beschikken over een scrollbar, taakbalk, statusbalk, menubalk en

locatiebalk. De tag ziet er zo uit:

(6)

<a href="popup.html" onclick="window.open('popup.html', 'popup', 'width=500,height=365,scrollbars=no,toolbar=no,status=no,

menubar=no,location=no,resizable=no'); return false">...</a>

Dit geeft het volgende resultaat: pop-up.

K.Bakker 12-11-2021 6 - 13

tempfile_3106.doc

(7)

Deze tag kun je gebruiken om tabellen weer te geven.

Gebruik de tags <tr>...</tr> en <td>...</td> om respectievelijk rijen en kolommen aan te geven. Maak de randen al dan niet zichtbaar met de toevoeging <table border="2">

waarbij in dit geval 2 de dikte van randen weergeeft. Gebruik waarde "0" om geen randen weer te geven.

De tag:

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

< /table>

...ziet er dan zo uit:

AAA BB

B

CCC DD

D

EEE FF

F

Je kunt de tabel als geheel, of een rij (<tr>) of kolom (<td>) eigenschappen geven, bijvoorbeeld een afmeting:

<table width="250">...</table> of <tr width="50%">...</tr>

Wil je een bepaald lettertype gebruiken in je tabel, gebruik dan de style-tag. Voor type Tahoma en grootte 2 (=10pt) ziet dat er zo uit:

<table style="font-family=tahoma; font-size=10pt">...</table>

Ook kun je de uitlijning bepalen. Met "align" geven we de horizontale uitlijning weer en met "valign" de verticale:

<tr align="left">...</tr> of <tr valign="top">...</tr>

Je kunt de cel van een tabel ook een kleurtje meegeven. Gebruik daarvoor deze tag:

<td bgcolor="#FF0000">...</td>

Soms wil je twee kolommen of drie rijen samenvoegen:

(8)

<td colspan="2">...</td> of <tr rowspan="3">...</tr>

K.Bakker 12-11-2021 8 - 13

tempfile_3106.doc

(9)

De tabeltag:

</tr>

</tr>

</tr>

< /table>

heeft de volgende tabel als resultaat:

AAA BBB

CCC DDD

EEE

(10)

INFORMATIE OVER DE <IMG> TAG (AFBEELDINGEN), <DIV> EN

Gebruik de volgende tag voor het invoegen van een afbeelding:

Vul bij "src" de filenaam in.

Bij "width" de breedte van de afbeelding.

Bij "height" de hoogte.

Bij "border" de dikte van de rand om de afbeelding.

Bij "alt" de eventuele tekst behorende bij de afbeelding, voor het geval de foto niet geladen kan worden in de browser.

Bij "title" de eventuele naam of toelichting bij een foto, die zichtbaar wordt zodra de muis erover beweegt.

Met de <div style> tags kun je op je pagina vakken aanbrengen met een achtergrondkleurtje, zoals in dit geval een blauwe achtergrondkleur

(#046380), een witte vaste (solid) rand (#FFFFFF) van 2 px dik en zwarte gecentreerde tekst (#000000).

In bovenstaand voorbeeld is de volgende tag gebruikt:

<div style="background-color:#046380; width:500px; border-width:2;

border-style: solid; border-color:#FFFFFF; color:#000000; text- align:center">...</div>

De notatie voor de eigenschappen van deze <div> tag hebben al de opmaak van een

CSS. Je kunt er uiteraard voor kiezen deze eigenschappen in een afzonderlijk CSS-

document te plaatsen. Dat is handig als je zo'n tekst(vak) op meerdere webpagina's laat terugkomen. Je hoeft dan slechts eenmaal deze eigenschappen te definiëren en de opmaak een naam te geven. Je geeft die naam vervolgens aan elke <div> tag

waarvoor die opmaak geldt middels een zogenaamde id: <div id="naam">

Je kunt in je eigen pagina een frame plaatsen waarin je een andere webpagina oproept.

Dat doen we met behulp van de <iframe> tag:

height="250">...</iframe>

Gebruik de volgende tag voor het invoegen van een afbeelding:

Vul bij "src" de filenaam in.

Bij "width" de breedte van de afbeelding.

Bij "height" de hoogte.

Bij "border" de dikte van de rand om de afbeelding.

Bij "alt" de eventuele tekst behorende bij de afbeelding, voor het geval de foto niet geladen kan worden in de browser.

Bij "title" de eventuele naam of toelichting bij een foto, die zichtbaar wordt zodra de muis erover beweegt.

Met de <div style> tags kun je op je pagina vakken aanbrengen met een achtergrondkleurtje, zoals in dit geval een blauwe achtergrondkleur

K.Bakker 12-11-2021 10 - 13

tempfile_3106.doc

(11)

(#046380), een witte vaste (solid) rand (#FFFFFF) van 2 px dik en zwarte gecentreerde tekst (#000000).

In bovenstaand voorbeeld is de volgende tag gebruikt:

<div style="background-color:#046380; width:500px; border-width:2;

border-style: solid; border-color:#FFFFFF; color:#000000; text- align:center">...</div>

De notatie voor de eigenschappen van deze <div> tag hebben al de opmaak van een

CSS. Je kunt er uiteraard voor kiezen deze eigenschappen in een afzonderlijk CSS-

document te plaatsen. Dat is handig als je zo'n tekst(vak) op meerdere webpagina's laat terugkomen. Je hoeft dan slechts eenmaal deze eigenschappen te definiëren en de opmaak een naam te geven. Je geeft die naam vervolgens aan elke <div> tag

waarvoor die opmaak geldt middels een zogenaamde id: <div id="naam">

Je kunt in je eigen pagina een frame plaatsen waarin je een andere webpagina oproept.

Dat doen we met behulp van de <iframe> tag:

height="250">...</iframe>

Het resultaat ziet er dan zo uit:

(12)

Met HTML is het mogelijk bijzondere karakters weer te geven.

Hieronder vind je de HTML-codes voor diverse symbolen en speciale tekens.

Als het een symbool betreft voor een bepaalde letter

(bijvoorbeeld een ä), kun je iedere willekeurige klinker in de code plaatsen:

ä = ä

& euml; = ë

& ouml; = ö enz.

À &Agrav e;

à &agrav e;

Á &Aacut e;

á &aacut e;

Â Â

â â

Ã &Atilde

;

ã ã

Ä Ä

ä ä

Å Å

å å

Æ Æ

æ æ

ß ß

< <

> >

& &

§ §

® ®

© ©

™ ™

€ &#836 4;

¥ ¥

£ &pound

;

¢ ¢

Ç &Ccedil

;

ç &ccedil

;

Ð Ð

ð ð

Ø &Oslash

;

ø &oslash

;

Þ &THOR N;

þ þ

¶ ¶

¼ &frac14

;

½ &frac12

;

¾ &frac34

;

¿ &iquest

;

¡ ¡

¹ ¹

² ²

³ ³

± &plusm n;

÷ ÷

° °

µ µ

· &middo t;

« «

» »

ª ª

¦ &brvba r;

¤ &curre n;

¯ ¯

¸ ¸

´ ´

¬ ¬

" "

“ &#822 0;

” &#822 1;

</Symbolen>

K.Bakker 12-11-2021 12 - 13

tempfile_3106.doc

(13)

Kleurengenerator

Kleuren worden in HTML weergegeven met de zogenaamde hexadecimale code. Zwart is #000000 en wit is #FFFFFF.

Elke kleur is opgebouwd uit de kleuren rood, groen en blauw in een bepaalde verhouding. Gebruik onderstaande tabel om je eigen kleur samen te stellen en de HTML-code af te lezen (of andersom).

Maak met de - of + knoppen je gewenste kleur.

De kleurwaarden moeten tussen 0 en 255 liggen.

[ -5 0 ]

[ - 1 0 ]

[ - 1 ]

roo

d: [ ]

[ + 1

] [ + 1 0

] [ + 5 0

]

[ -5 0 ]

[ - 1 0 ]

[ - 1 ]

gro

en: [ ]

[ + 1

] [ + 1 0

] [ + 5 0

]

[ -5 0 ]

[ - 1 0 ]

[ - 1 ]

bla uw :

[ ]

[ + 1

] [ + 1 0

] [ + 5 0

]

Dit is je HTML kleurencode: [ ]

reset

</Kleuren>

</ HTML-TAGS>

In het voorbeeld hierboven betekenen de codes het volgende:

Inhoudsopgave

De <body> tag kan als volgt worden uitgebreid:

Vul achter de # de HTML kleurcode in, voor de kleur die je wilt gebruiken, of gebruik

"black", "red", "green" enzovoort.

In het voorbeeld hierboven betekenen de codes het volgende:

Om een lettertype te gebruiken voer je de naam ervan in achter "font face", bijvoorbeeld:

"tahoma"

"arial"

"times new roman"

"verdana"

"comic sans ms"

De standaard tekstgrootte varieert van 1 (8pt) tot 7 (20pt):

Dit is tekstgrootte 3 Dit is tekstgrootte 4

Dit is tekstgrootte 5

Dit is tekstgrootte 6

Dit is tekstgrootte 7

Gebruik eventueel de volgende toevoegingen:

Verder kun je met een aantal aanvullingen de richting (direction), aantal herhalingen (loops), afmetingen, uitlijning (align), achtergrondkleur en snelheid (scrollamount) instellen indien gewenst:

Standaard opent de nieuwe pagina in hetzelfde venster van de browser. Gebruik de tag

<a href="http://www.webhtml.nl" target=_blank> om de pagina te laten openen in een nieuw venster.

Let wel: deze email-link werkt alleen als iemand ook daadwerkelijk een emailprogramma gebruikt (bv. Microsoft Outlook).

Bij "pagina" vul je de naam van de huidige pagina in (of een andere pagina waar de tekst staat) en bij "doel" de naam van het doel. Vervolgens plaats je bij het doel de volgende tag:

Zo weet de browser op welke pagina en waar op die pagina hij moet zijn als iemand op de link klikt.

Een pop-up kun je ook met een <a href> tag maken. Hierbij definieer je de

afmetingen van je pop-up (en geef je aan of die vast zijn of variabel) en geef je aan of

de pop-up moet beschikken over een scrollbar, taakbalk, statusbalk, menubalk en

locatiebalk. De tag ziet er zo uit:

Dit geeft het volgende resultaat: pop-up.

Deze tag kun je gebruiken om tabellen weer te geven.

Gebruik de tags <tr>...</tr> en <td>...</td> om respectievelijk rijen en kolommen aan te geven. Maak de randen al dan niet zichtbaar met de toevoeging <table border="2">

waarbij in dit geval 2 de dikte van randen weergeeft. Gebruik waarde "0" om geen randen weer te geven.

De tag:

...ziet er dan zo uit:

Je kunt de tabel als geheel, of een rij (<tr>) of kolom (<td>) eigenschappen geven, bijvoorbeeld een afmeting:

Wil je een bepaald lettertype gebruiken in je tabel, gebruik dan de style-tag. Voor type Tahoma en grootte 2 (=10pt) ziet dat er zo uit:

Ook kun je de uitlijning bepalen. Met "align" geven we de horizontale uitlijning weer en met "valign" de verticale:

Je kunt de cel van een tabel ook een kleurtje meegeven. Gebruik daarvoor deze tag:

Soms wil je twee kolommen of drie rijen samenvoegen:

De tabeltag:

heeft de volgende tabel als resultaat:

Vul bij "src" de filenaam in.

Bij "width" de breedte van de afbeelding.

Bij "height" de hoogte.

Bij "border" de dikte van de rand om de afbeelding.

Bij "alt" de eventuele tekst behorende bij de afbeelding, voor het geval de foto niet geladen kan worden in de browser.

Bij "title" de eventuele naam of toelichting bij een foto, die zichtbaar wordt zodra de muis erover beweegt.

In bovenstaand voorbeeld is de volgende tag gebruikt:

De notatie voor de eigenschappen van deze <div> tag hebben al de opmaak van een

document te plaatsen. Dat is handig als je zo'n tekst(vak) op meerdere webpagina's laat terugkomen. Je hoeft dan slechts eenmaal deze eigenschappen te definiëren en de opmaak een naam te geven. Je geeft die naam vervolgens aan elke <div> tag

waarvoor die opmaak geldt middels een zogenaamde id: <div id="naam">

Je kunt in je eigen pagina een frame plaatsen waarin je een andere webpagina oproept.

Dat doen we met behulp van de <iframe> tag:

Gebruik de volgende tag voor het invoegen van een afbeelding:

Vul bij "src" de filenaam in.

Bij "width" de breedte van de afbeelding.

Bij "height" de hoogte.

Bij "border" de dikte van de rand om de afbeelding.

Bij "alt" de eventuele tekst behorende bij de afbeelding, voor het geval de foto niet geladen kan worden in de browser.

Bij "title" de eventuele naam of toelichting bij een foto, die zichtbaar wordt zodra de muis erover beweegt.

In bovenstaand voorbeeld is de volgende tag gebruikt:

De notatie voor de eigenschappen van deze <div> tag hebben al de opmaak van een

document te plaatsen. Dat is handig als je zo'n tekst(vak) op meerdere webpagina's laat terugkomen. Je hoeft dan slechts eenmaal deze eigenschappen te definiëren en de opmaak een naam te geven. Je geeft die naam vervolgens aan elke <div> tag

waarvoor die opmaak geldt middels een zogenaamde id: <div id="naam">

Je kunt in je eigen pagina een frame plaatsen waarin je een andere webpagina oproept.

Dat doen we met behulp van de <iframe> tag:

Het resultaat ziet er dan zo uit:

Met HTML is het mogelijk bijzondere karakters weer te geven.

Hieronder vind je de HTML-codes voor diverse symbolen en speciale tekens.

Als het een symbool betreft voor een bepaalde letter

(bijvoorbeeld een ä), kun je iedere willekeurige klinker in de code plaatsen:

&auml; = ä

& euml; = ë

& ouml; = ö enz.

Kleuren worden in HTML weergegeven met de zogenaamde hexadecimale code. Zwart is #000000 en wit is #FFFFFF.

Elke kleur is opgebouwd uit de kleuren rood, groen en blauw in een bepaalde verhouding. Gebruik onderstaande tabel om je eigen kleur samen te stellen en de HTML-code af te lezen (of andersom).

Maak met de - of + knoppen je gewenste kleur.

De kleurwaarden moeten tussen 0 en 255 liggen.

ä = ä