Informaticasite van het Sondervick College te Veldhoven © L.J.M van Haperen (bron : R.J. van der Beek)

Menu
HTML H1
HTML H2
H3
H4
H5
H6
H7
H8
H9
H10
Javascript

Hoofdstuk 4: Lijsten, accenten, andere tekens; een teller

Je hebt drie soorten lijsten (en het lijstje hier onder is een voorbeeld van een ongesorteerde lijst):

gesorteerde lijsten
ongesorteerde lijsten
definitie lijsten

4.1 Een gesorteerde lijst

Gesorteerde lijsten zijn opsommingen, die genummerd zijn.
Om een genummerde lijst te maken heb je de tags <ol> en </ol> nodig.
<ol> staat voor 'ordered list'.
Om de opsomming weer te geven, wordt binnen de tag <ol> de tag <li> gebruikt en de bijbehorende eindtag is </li>
Deze tag zet je voor ieder onderwerp binnen de lijst.
De browser vervangt de tag <li> door een cijfer.

Voorbeeld :

<h3>Profielen tweede fase<h3>
<ol>
<li>Cultuur en Maatschappij</li>
<li>Economie en Maatschappij </li>
<li>Natuur en Gezondheid </li>
<li>Natuur en Techniek </li>
</ol>

En dat ziet er zo uit:

Profielen tweede fase

Cultuur en Maatschappij
Economie en Maatschappij
Natuur en Gezondheid
Natuur en Techniek

4.2 Nummeringstekens

Normaal krijg je bij een gesorteerde lijst nummers: 1, 2, 3 enz.
Met behulp van attribuut type kun je dat veranderen:
Je kunt ook het nummer waarmee gestart wordt veranderen, m.b.v. het attribuut start
<ol type="A" > Opsomming met hoofdletters (A, B, C etc.)
<ol type="a" start="4" > Opsomming met kleine letters, en er wordt begonnen met de vierde letter (d, e, f etc in dit geval),
<ol type="I" > Opsomming in Romeinse cijfers (I, II, III etc.)
<ol type="i" > Opsomming in kleine Romeinse cijfers (i, ii, iii etc.)

Je kunt ook een lijst binnen een lijst maken. Kijk maar naar het voorbeeld hieronder:

<h3>Profielvakken</h3>
<ol>
<li>Cultuur en Maatschappij
<ol type="A">
<li>Economie 1</li>
<li>CKV</li>
<li>Geschiedenis</li>
<li>Wiskunde A1</li>
</li> </ol>
<li>Natuur en Gezondheid
<ol type="A"></li>
<li>Biologie</li>
<li>Natuurkunde 1</li>
<li>Scheikunde</li>
<li>Wiskunde B1</li>
</li> </ol>

En dat ziet er als volgt uit:

Profielvakken

Cultuur en Maatschappij
1. Economie 1
2. CKV
3. Geschiedenis
4. Wiskunde A1
Natuur en Gezondheid
1. Biologie
2. Natuurkunde 1
3. Scheikunde
4. Wiskunde B1

Oefening:

Maak m.b.v. Kladblok, of een andere rekstverwerker, een html-document. Maak daarin een gesorteerde lijst binnen een lijst met een opsomming in hoofdletters.

Sla het bestand op, en bekijk het met een browser.

4.3 Een ongeordende lijst

Ongeordende lijsten zijn lijsten waarbij er geen nummers voor de onderwerpen staan, maar bijv. punten of blokjes.
De tags om een ongeordende lijst te maken zijn <ul> en </ul>. <ul> staat voor 'unordered list'.
Voor elk onderwerp in de lijst wordt net zoals bij gesorteerde lijsten de <li>-tag gebruikt.

Voorbeeld:

<h3>Profiel EM (economie en maatschappij)<h3>
<ul>
<li>Economie 1 en 2</li>
<li>Aardrijkskunde</li>
<li>Geschiedenis</li>
<li>Wiskunde-A 1 en 2</li>
</ul>

En dat ziet er zo uit:

Profiel EM (economie en maatschappij)

Economie 1 en 2
Aardrijkskunde
Geschiedenis
Wiskunde-A 1 en 2

4.4 Opsommingstekens

Je ziet dat er voor de opsomming zwarte punten (bullets)staan.
Wil je iets anders, gebruik dan het attribuut type.
Je kunt kiezen uit type=square (vierkantje) of type=circle (open rondje) of type=disc (gevuld rondje).

<h3>Profiel EM (economie en maatschappij)</h3>
<ul type=circle>
<li>Economie 1 en 2</li>
<li>Aardrijkskunde</li>
<li>Geschiedenis</li>
<li>Wiskunde-A 1 en 2</li>
</ul>

En dat ziet er als volgt uit:

Profiel EM (economie en maatschappij)

Economie 1 en 2
Aardrijkskunde
Geschiedenis
Wiskunde-A 1 en 2

Oefening:

Maak m.b.v. Kladblok, of een andere rekstverwerker, een html-document. Maak in dat document een ongeordende lijst met een opsomming in vierkantjes.

Sla het bestand op, en bekijk het met een browser.

4.5 Definitielijst

De hoofdtags van een definitielijst zijn <dl> en </dl>. <dl> staat voor 'definition list'.
Binnen deze hoofdtags wordt de <dt>-tag gebruikt om de definitie weer te geven.
Voor de uitleg zelf wordt de <dd>-tag gebruikt.

Voorbeeld:

<dl>
<dt>EC12 Economie 1 en 2
<dd>Economie 1 en 2
<dt>AK
<dd>Aardrijkskunde
<dt>GS
<dd>Geschiedenis
</dl>

En dat ziet er als volgt uit:

EC12: Economie 1 en 2
AK: Aardrijkskunde
GS: Geschiedenis

Oefening:

Maak m.b.v. Kladblok, of een andere rekstverwerker, een html-document. Maak in dat document een definitielijst.

Sla het bestand op, en bekijk het met een browser.

4.6 Accenten en andere tekens in HTML

Op de vorige pagina's heb je gezien hoe je met behulp van HTML tekst kunt bewerken. Er is een moeilijkheid als je speciale tekens wilt gebruiken.

vette tekst
Jij weet natuurlijk dat er om de woorden vette tekst hierboven de tags <b> en </b> zijn gebruikt. Maar ze zijn niet te zien!
Dat komt doordat de browser, als hij de tag <b> tegenkomt, in de gaten heeft dat hij die tag niet af moet drukken, maar dat het gedeelte dat er achter staat vet moet afdrukken.

Maar wat te doen als je toch wilt dat <b> wordt afgedrukt?
Er zijn trouwens nog veel meer van dat soort tekens, die normaal niet worden afgedrukt maar een ander effect hebben.

Als je wilt dat zo'n teken toch wordt afgedrukt dan kun je daar een speciale code voor gebruiken, in HTML bestaan code's die bepaalde tekens vervangen.

Hier een code-opsomming van veel voorkomende tekens:

Sommige tekens kun je op twee manieren krijgen, bijv. het wortel-teken √ kun je krijgen door m.b.v. √ maar ook d.m.v. de volgende HTML-code: √

teken	HTML	teken	HTML	teken	HTML	teken	HTML	teken	HTML
spatie		ü	ü	≤	≤	α	α	Λ	Λ
á	á	ý	ý	≥	≥	β	β	Ξ	Ξ
â	â	ÿ	ÿ	√	√	γ	γ	Π	Π
æ	æ	ß	ß	≈	≈	δ	δ	Σ	Σ
à	à	µ	µ	≠	≠	ε	ε	Φ	Φ
å	å	½	½	°	°	ζ	ζ	Ψ	Ψ
ã	ã	¼	¼	÷	÷	η	η	Ω	Ω
ä	ä	¾	¾	×	×	θ	θ	ƒ	&fnof;
ç	ç	€	€	‰	&permil;	ι	ι	∫	&∫
é	é	£	£	≅	&cong;	κ	κ	£	£
ê	ê	«	«	≡	&equiv;	λ	λ	¦	¦
è	è	»	»	↓	↓	μ	μ	¯	¯
ë	ë	·	·	↑	↑	ν	ν	—	—
í	í	•	•	→	→	ξ	ξ	†	&dagger;
î	î	§	§	←	←	ο	ο	♠	&spades;
ì	ì	²	²	↔	↔	π	π	◊	&loz;
ï	ï	³	³	¬	¬	ρ	ρ	♣	&clubs;
ñ	ñ	–	–	¶	¶	σ	σ	♥	&hearts;
ó	ó	—	—	∩	∩	τ	τ	♦	&diams;
ô	ô	®	®	∪	∪	υ	υ	∞	∞
ò	ò	©	©	±	&plusmn	φ	φ	…	…
ø	ø	"	"	Δ	Δ	χ	χ	∩	∩
õ	õ	&	&	Å	Å	ψ	ψ	∪	∪
ö	ö	<	<	Æ	&#AElig;	ω	&#omega;	ù	ù
ú	ú	>	>	Ç	Ç	Γ	Γ	û	û
⊥	&perp;	⊂	⊂	∅	∅	∠	&ang;	⊃	⊃
↵	&crarr;	⇓	&dArr;	⇑	&uArr;	⇒	⇒	⇐	⇐

Er zijn nog veel meer tekens mogelijk.
Als je ∩ in je HTML-code zet dan krijg je het teken ∩, dat is het teken waarvan de unicode 8745 is.
Als je dus de unicode van een teken weet, dan weet je ook de HTML-code om dat teken te krijgen.
Natuurlijk moet je computer dat teken wel kennen, anders verschijnt er een blokje.
Een aantal tekens, die je op deze manier kunt krijgen, volgen hieronder (een paar ervan zag je ook al in de tabel hierboven).
Alle griekse letters (kleine letters en hoofdletters) kun je bijvoorbeeld op die manier krijgen.

€

†

‰

∆

∑

√

∞

∟

∩

∫

≈

≠

≡

≤

≥

⌐

─

│

┌

┐

└

┘

├

┤

┬

┴

┼

║

╒

╓

╔

╕

╖

╗

╘

╙

╚

╛

╜

╝

╞

╟

╠

╡

╢

╣

╤

╥

╦

╧

╨

╩

╪

Oefening:

HTML-accenten enz.
Kijk eens:
á, & en >.
Veel succes!

Maak m.b.v. Kladblok, of een andere rekstverwerker, een html-document. Zorg er voor dat de rode tekst hierboven (te beginnen met Kijk eens, tot aan Veel succes!) in je document verschijnt.

Sla het bestand op, en bekijk het met een browser.

4.7 Een teller op je pagina

Als je benieuwd bent hoeveel bezoekers je pagina krijgt dan kun je een teller op je pagina zetten.
Veel providers leveren een teller als service, kijk daarvoor op de homepage van je provider.

Je kunt ook zelf een teller maken, bijvoorbeeld met behulp van PHP.

Er zijn ook tellers die veel meer informatie geven, bijvoorbeeld:

hoe vaak je pagina bezocht wordt
wanneer je pagina bezocht wordt
welke provider de bezoekers gebruiken
via welke pagina je pagina bezocht wordt
op welk moment van de dag je de meeste bezoekers hebt
wat voor besturingssysteem je bezoekers gebruiken
welke browser je bezoekers gebruiken

Een heel bekende teller is die van NedStat
Je moet dan een bepaalde code in je html-document opnemen. Die code krijg je per email aangeleverd, als je om een teller bij Nedstat vraagt. Op de plaats waar je die code opneemt verschijnt dan het volgende plaatje:

Wil je een teller zonder reclame op je site, dan kun je bijvoorbeeld voor de teller van www.counter160.com kiezen.