Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 

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

  1. Cultuur en Maatschappij
  2. Economie en Maatschappij
  3. Natuur en Gezondheid
  4. 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

  1. Cultuur en Maatschappij
    1. Economie 1
    2. CKV
    3. Geschiedenis
    4. Wiskunde A1
  2. 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. &radic; maar ook d.m.v. de volgende HTML-code: &#8730;

teken    HTML     teken    HTML     teken     HTML     teken    HTML     teken    HTML    
spatie&nbsp; ü&uuml; &le; α&alpha; Λ&Lambda;
á&aacute; ý&yacute; &ge; β&beta; Ξ&Xi;
â&acirc; ÿ&yuml; &radic; γ&gamma; Π&Pi;
æ&aelig; ß&szlig; &asymp; δ&delta; Σ&Sigma;
à&agrave; µ&micro; &ne; ε&epsilon; Φ&Phi;
å&aring; ½&frac12; °&deg; ζ&zeta; Ψ&Psi;
ã&atilde; ¼&frac14; ÷&divide; η&eta; Ω&Omega;
ä&auml; ¾&frac34; ×&times; θ&theta; ƒ&fnof;
ç&ccedil; &euro; &permil; ι&iota; &∫
é&eacute; £&pound; &cong; κ&kappa; £&pound;
ê&ecirc; «&laquo; &equiv; λ&lambda; ¦&brvbar;
è&egrave; »&raquo; &darr; μ&mu; ¯&macr;
ë&euml; ·&middot; &uarr; ν&nu; &mdash;
í&iacute; &bull; &rarr; ξ&xi; &dagger;
î&icirc; §&sect; &larr; ο&omicron; &spades;
ì&igrave; ²&sup2; &harr; π&pi; &loz;
ï&iuml; ³&sup3; ¬&not; ρ&rho; &clubs;
ñ&ntilde; &#8211; &para; σ&sigma; &hearts;
ó&oacute; &#8212; &cap; τ&tau; &diams;
ô&ocirc; ®&reg; &cup; υ&upsilon; &infin;
ò&ograve; ©&copy; ±&plusmn φ&phi; &hellip;
ø&oslash; "&quot; Δ&Delta; χ&chi; &cap;
õ&otilde; &&amp; Å&Aring; ψ&psi; &cup;
ö&ouml; <&lt; Æ&#AElig; ω&#omega; ù&ugrave;
ú&uacute; >&gt; Ç&Ccedil; Γ&Gamma; û&ucirc;
&perp; &sub; &empty; &ang; &sup;
&crarr; &dArr; &uArr; &rArr; &lArr;

Er zijn nog veel meer tekens mogelijk.
Als je &#8745; 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.

&#0128; &#8224; &#8240; &#163; £ &#167; § &#169; © &#176; ° &#177; ± &#178; ² &#179; ³
&#181; µ &#188; ¼ &#189; ½ &#190; ¾ &#945; α &#946; β &#947; γ &#948; δ &#949; ε &#950; ζ
&#951; η &#952; θ &#953; ι &#954; κ &#955; λ &#956; μ &#957; ν &#958; ξ &#959; ο &#960; π
&#961; ρ &#962; ς &#963; σ &#964; τ &#965; υ &#966; φ &#967; χ &#968; ψ &#969; ω &#913; Α
&#914; Β &#915; Γ &#916; Δ &#917; Ε &#918; Ζ &#919; Η &#920; Θ &#921; Ι &#922; Κ &#923; Λ
&#924; Μ &#925; Ν &#926; Ξ &#927; Ο &#928; Π &#929; Ρ &#930; ΢ &#931; Σ &#932; Τ &#933; Υ
&#934; Φ &#935; Χ &#936; Ψ &#937; Ω &#224; à &#225; á &#226; â &#227; ã &#228; ä &#229; å
&#230; æ &#231; ç &#232; è &#233; é &#234; ê &#235; ë &#236; ì &#237; í &#238; î &#239; ï
&#8710; &#8721; &#8730; &#8734; &#8735; &#8745; &#8747; &#8776; &#8800; &#8801;
&#8804; &#8805; &#8976; &#9472; &#9474; &#9484; &#9488; &#9492; &#9496; &#9500;
&#9508; &#9516; &#9524; &#9532; &#9553; &#9554; &#9555; &#9556; &#9557; &#9558;
&#9559; &#9560; &#9561; &#9562; &#9563; &#9564; &#9565; &#9566; &#9567; &#9568;
&#9569; &#9570; &#9571; &#9572; &#9573; &#9574; &#9575; &#9576; &#9577; &#9578;


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.