De meeste
informatie die je op het Web ziet wordt weergegeven met een relatief
klein aantal tags + attributen. Hieronder volgt een overzicht
(1).
HTML is een taal die gebruikt wordt om webdocumenten
te maken. Het definieert de syntax en de plaatsing van speciale instructies
(tags) die je niet ziet op het beeldscherm, maar die de browser
vertellen hoe de inhoud van het document op het scherm moet worden
gezet. Het wordt ook gebruikt om links ofwel verbindingen naar
andere documenten of webpaginas te leggen (hetzij locaal, hetzij over
een netwerk zoals het internet).
Een webpagina of HTML-document bevat dus tekst, geluid, video, animaties
of plaatjes (de inhoud van een webpagina) met ingebedde tags die instructies
bevatten voor de structuur, de verschijning en de functie van de inhoud.
Een webpagina is opgebouwd uit twee belangrijke delen:
- HEAD
Bevat informatie over de pagina, zoals de titel van de pagina
en vaak ook informatie voor zoekmachines
- BODY
Bevat de werkelijke inhoud van de pagina, dwz dat gedeelte dat
wordt weergegeven in de browser.
De standaard skeletstructuur
van een webpagina ziet er als volgt uit:
<HTML>
<HEAD>
<TITLE>
webpagina
titel
</TITLE>
</HEAD>
<BODY>
Inhoud
van de webpagina
</BODY>
</HTML>
Zoals gezegd: HTML-instructies bestaan uit tags. Elke tag bestaat
uit een naam van de tag en een optionele lijst van attributen
ofwel eigenschappen. De meeste HTML-tags zijn zogenaamde containers,
dwz ze hebben een begin- en een eindtag. De tekst die tussen
de begin- en eindtag staat is onderhevig aan de acties van deze tag.
Bijvoorbeeld:
<B></B>
In deze zin wordt <B>deze tekst</B> vet afgedrukt
In deze zin wordt deze tekst vet afgedrukt
Een eindtag heeft dus dezelfde naam als de begintag, maar wordt voorafgegaan
door een slash (/). Eindtags bevatten bovendien nooit geen
attributen. Een aantal tags hebben geen eindtag.
Attributen worden binnen een tag geplaats om de acties van
een tag uit te breiden of aan te passen. Attributen komen na een tagnaam
te staan met een spatie ertussen. De meeste attributen krijgen een
waarde die volgt op een is-gelijk (=) teken na de naam van het attribuut.
Deze waarde zet je meestal tussen aanhalingstekens (“). Bijvoorbeeld:
<font color=”red”> </font>
In deze zin wordt <font color=”red”> dit stuk tekst </font>
rood
In deze zin wordt dit stuk tekst rood
Gebruik tijdens het schrijven van HTML de volgende conventies
- Schrijf tags
en attributen in hoofdletters
- Gebruik tabs
voor de leesbaarheid van de code
- Noem je bestanden/webpagina’s
volgens de richtlijnen (zie college I)
Je kunt de kleur van bepaalde pagina elementen specificeren
dmv HTML-tags. Gebruik hiervoor websafe kleuren. De meest gebruikelijke
manier om een kleur te specificeren in HTML is dmv z’n numerieke RGB-waarden
(Rood Groen en Blauw). Deze waarden worden in HTML geschreven volgens
de volgende syntax: “#RRGGBB”. Bijvoorbeeld:
<font color=”#OOCCOO”></FONT>
In deze zin is <font color=”#00CC00”>deze tekst</FONT>
groen
In deze zin is deze tekst
groen
Links naar websafe kleurencodes vind je op de website
Het specificeren van speciale tekens
Speciale tekens
moeten worden gespecificeerd in HTML dmv zogenaamde character
entiteiten. Je kunt sommige van deze tekens wel op het toetsenbord
vinden en dus intikken, maar een HTML document zal dit teken niet
laten zien als de pagina wordt weergegeven in een browser. Daarom
moet je character entiteiten gebruiken. Deze hebben de volgende
vorm: &naamcharacter;
Bijvoorbeeld:
spatie
©
copyright teken
é é
ë
ë
Andere talen
Je kunt ook
webpagina’s in andere talen maken. Er kunnen zich dan twee problemen
voordoen:
- De taal
gebruikt een andere character-set
- De taal schrijft
niet van links naar rechts, maar net andersom.
De keuze van de
characterset kan je opgeven in bv de HTML tag. Maar kan in elk willekeurige
tag om de taal van de tekst die de tag omvat te beschrijven. Bv <HTML
LANG=”fr”>. Het opnemen van de taalcode heeft een aantal voordelen:
- Helpt zoekmachines
bij het bepalen van de taal
- Helpt browsers
bij het bepalen van afbrekingen in een webpagina (bij elke taal
anders)
- Helpt bij
de spellingscontrole
<HTML></HTML>
Tussen deze
tags gaat je hele webpagina
<HEAD></HEAD>
Deze tag bevat
de <TITLE></TITLE> tag
en vaak ook meta tags (kom ik later op terug, heeft te maken met
zoekmachines etc)
<TITLE></TITLE>
De tag bevat
de titel van de webpagina (dus niet de bestandsnaam) en moet een
duidelijke omschrijving van de inhoud van de webpagina zijn
<BODY></BODY>
Hier tussen
komt de inhoud te staan die door de browser op het scherm zal worden
getoond. De body tag kan een aantal attributen bevatten,
waaronder:
- TEXT=”#RRGGBB”
bepaalt de standaardkleur van tekst in de webpagina
- BGCOLOR=”#RRGGBB”
bepaalt de achtergrondkleur, standaard is dit meestal grijs
- BACKGROUND="naamplaatje.gif"
zorgt ervoor dat er een plaatje (hetzij in gif hetzij in jpeg
formaat) op de achtergrond wordt gezet. Zorg er wel voor dat de
tekst op de voorgrond leesbaar blijft (kom ik later bij page design
nog op terug)
Deze
pagina gebruikt een <BODY TEXT="#ffff33" BACKGROUND="logo.gif">
tag.
Deze pagina gebruikt TEXT en BGCOLOR attributen, wat een blauwe
achtergrond en rode tekst oplevert:<BODY
TEXT=#cc0033 BGCOLOR=#003333>
<P>
Je kunt met deze tag je tekst opdelen in paragrafen. Het voegt een
lege regel toe na zichzelf. Geen eindtag nodig.
<BR>
Hiermee kun je een regel beeindigen. Geen eindtag nodig. Bekijk
de sourcecode van deze webpagina maar eens, er worden heel veel<BR>
gebruikt.
<CENTER></CENTER>
Hiermee kun je tekst centreren
<BLOCKQUOTE></BLOCKQUOTE>
Hiermee kun je tekst aan beide kanten, dus aan beide margins laten
inspringen, zoals dat vaak in gedrukte media gebeurt met citaten.
Dit
is een voorbeeld van een tekst die opgemaakt is met de blockquote-tag.
Zoals je ziet wordt aan beide kanten van de tekst ingesprongen.
Fonts
<font></font>
deze tag gebruik je om de stijl (kleur, lettertype en lettergrootte)
van de tekst te beinvloeden
Font grootte
De twee meest gebruikte manieren om de grootte van een font te veranderen
is dmv zgn. heading tags en de SIZE attibuut van de
FONT tag:
1. De tags <H1></H1> tot en met <H6></H6>
geven tekst in steeds kleinere groottes weer
Deze tekst
staat tussen <H1>
Deze tekst
staat tussen <H2>
Deze tekst
staat tussen <H3>
Deze tekst
staat tussen <H4>
Deze tekst
staat tussen <H5>
Deze tekst
staat tussen <H6>
2. Het SIZE attribuut van de FONT tag kan gebruikt worden
om de grootte van de tekst te bepalen. Niet elke browser ondersteunt
dit, maar de meest populaire (Netscape en MicroSoft Explorer). De
syntax is:
<FONT SIZE=+N>
of <FONT SIZE=-N> of <FONT SIZE=N>
waarbij N een
klein getal is, meestal 1, 2, of 3. De “+” en “-“ tekens duiden
op een relatieve verhouding ten opzicht van de basisfont.
Deze tekst staat tussen <FONT SIZE=+1>
Deze tekst staat tussen <FONT
SIZE=+2 COLOR=#9933CC>
Deze tekst staat tussen <FONT SIZE=+3>
Deze tekst staat tussen <FONT SIZE=-1>
Deze tekst staat tussen <FONT SIZE=-2>
Font Kleur
Ook gebruik je de FONT-tag om (een deel van) je tekst een kleur
te geven door het attribuut COLOR toe te voegen. Bijvoorbeeld:
<font color=”#OOCCOO”></FONT>
In deze zin is <font color=”#00CC00”>deze tekst</FONT>
groen
In deze zin is deze tekst groen
Font Lettertype
Door het attribuut FACE te gebruiken kun je het lettertype
veranderen. Het is meestal gebruikelijk om meerdere lettertypen
op te geven, omdat verschillende besturingsystemen verschillende
lettertypen kennen (Voor Windows wordt meestal Arial gebruikt, voor
Unix en de Mac Helvetica ). Als het lettertype niet op de machine
van de browser aanwezig is, wordt meestal een standaardlettertype
door de browser gekozen. Dit kan effect hebben op hoe je webpagina
wordt weergegeven in de browser. Tijdens Page Design/Content Design
kom ik hier nog op terug. Bijvoorbeeld:
FONT FACE="Arial">Tekst in Arial font</FONT>
Tekst in Arial font
Je kunt natuurlijk alle attributen bij de FONT tag gebruiken: bv
Deze tekst is gemaakt door <FONT
FACE="Arial,Helvetica" SIZE=-1 COLOR=#9933cc> te gebruiken.
Naar Boven
<B></B> Hiermee kun je tekst
vet maken
<I></I> Hiermee kun je tekst
cursief maken
<U></U> Hiermee kun je tekst onderlijnen
<SUB></SUB> Hiermee kun
je tekst als subscript weergeven
<SUP></SUP> Hiermee kun
je tekst als superscript weergeven
Bewaren van bestaande opmaak <PRE></PRE>
tekst die tussen deze tags staan, worden op exact dezelfde manier
weergegeven als ze waren ingetikt, dus inclusief meerdere spaties
en regeleinden (die normaal genegeerd worden). Het nadeel is dat het
wordt weergegeven in een standaardfont zoals COURIER wordt weergegeven.
Maar soms kan de opmaak dmv HTML anders veel tijd kosten of gewoon
te moeilijk zijn.
Commentaar
Tekst wat tussen <!-- en --> staat, wordt door
de browser genegeerd. Het is een goed gebruik om (zeker bij websites
die uit veel pagina’s bestaan) je webpagina’s van commentaar te voorzien.
Zeker als iemand anders het werk later over zal nemen of als je met
anderen tegelijk aan een website werkt.
Lijnen
Met de <HR> tag kun je horizontale lijnen op het scherm
afbeelden. <HR> kent geen eindtag. Je kan daarbij gebruik maken
van de volgende optionele attributen:
NOSHADE (lijn zonder
3D-effect)
SIZE=NN (waarbij NN
de hoogte van de lijn in pixels is)
WIDTH=NN (waarbij
NN de breedte van de lijn in pixels is)
WIDTH=NN% (waarbij
NN% een percentage van het totale beeldscherm is) ALIGN=left|right|center
(de plaats van de lijn op het scherm, standaard is in het midden,
center)
Hier zijn een paar voorbeelden:
Alleen <HR>
<HR NOSHADE>
<HR SIZE=10>
<HR WIDTH=50>
<HR WIDTH=50
align=left%>
Naar Boven
Lijsten (opsommingen)
Er zijn tags
voor drie typen lijsten:
- De ongeordende
lijst
- De geordendende
lijst
- De definitie
lijst
Een ongeordende
lijst:
<UL>
<LI>stip met tekst</LI>
<LI>stip met tekst2</LI>
</UL>
Begint met <UL> en eindigt met </UL>.Elk onderdeel van
de lijst tussen <LI> en </LI> en wordt op het scherm
voorafgegaan door een bullet (of stip). Bijvoorbeeld:
- stip met
tekst
- stip met
tekst2
Een geordende
lijst:
<OL>
<LI>1. met tekst</LI>
<LI>2. met tekst2</LI>
</OL>
Begint met <OL> en eindigt met </OL>. Elk onderdeel
van de lijst tussen <LI> en </LI> en wordt op het scherm
genummerd afgebeeld. Bijvoorbeeld:
- 1. met tekst
- 2. met tekst2
De definitie
lijst
Definitie lijsten bestaan uit termen en definities. <DL>
<DT>
Hier komt de term
</DT>
<DD>
En hier komt de definitie van de term
</DD>
</DL>
De definitie lijst begint dus met <DL> en eindigt met </DL>.
Vervolgens komt tussen <DT> en </DT> de term te staan,
gevolgd door <DD> en </DD> waar de definitie van de
term komt. Bijvoorbeeld:
- Hier komt
de term
- En hier
komt de definitie van de term
Je
kunt ook geneste lijsten hebben (dus lijsten in lijsten). Hier is
een voorbeeld
<OL>
<LI>1. met tekst</LI>
<UL>
<LI>stip met tekst</LI>
<LI>stip met tekst2</LI>
</UL>
<LI>2. met tekst2</LI>
<UL>
<LI>stip met tekst</LI>
<LI>stip met tekst2</LI>
</UL>
</OL>
Dit geeft:
- 1. met tekst
- stip met
tekst
- stip met
tekst2
- 2. met tekst2
- stip met
tekst
- stip met
tekst2
Volgende week meer.
|
