HTML De basis-elementen
Wat is HTML? Opmaaktaal voor website’s HyperText: techniek voor verbindingen (links) te leggen Markup: gebruik van code (tags) Language
Vaste opbouw <HTML> <HEAD> <TITLE>Het simpelste HTML-document </TITLE> </HEAD> <BODY> Hier komt de eigenlijke tekst </BODY> </HTML>
Oefening Maak een HTML-document met als titel “Mijn eerste site” en open dit bestand in een browser.
Opmaak van HTML-bestand Horizontale lijnen: <HR> Koppen: <Hx>…</Hx> Enter: <BR> Paragraaf: <P>…</P> Spatie:
Horizontale lijnen: <HR> De tag <HR> voegt een horizontale lijn toe Mogelijke attributen: WIDTH=“…%” => breedte in procenten WIDTH=“…” => breedte in pixels SIZE=“…” => dikte van de lijn NOSHADE => geen schaduw ALIGN=“…” => left, right of center Geen sluit-tag
Oefening Geef eens <HR width=”50%” size=”5” align=”center” noshade> in (in de body) en bekijk het resultaat.
Koppen: <Hx>…</Hx> Titels of koppen maken Verschillende groottes (van 1 tot 6) <H1>Titel met een grote kop</H1> Titel met een grote kop <H6>Titel met een kleine kop</H6> Mogelijke attribuut: ALIGN=“…” Left, right of center
Oefening Probeer de verschillende koppen uit en ook het ALIGN attribuut erbij
Enter: <BR> Is het zelfde effect als de [ENTER] <BR><BR><BR> levert witregels op Geen sluit-tag
Paragraaf: <P>…</P> De tag <P>…</P> maakt een alinea of paragraaf Er wordt dan automatisch een lege regel onder de paragraaf gevoegd
Spatie: = non-breaking space Speciaal teken om een spatie toe te voegen   levert spaties achtereen op
Oefening Probeer de geziene tags nu zelf uit <P>…</P> <BR> <HR> <Hx>…</Hx>
Opmaak van tekst <B>vet</B> <I>cursief</I> <S>doorstreept</S> <STRIKE>ook doorstreept</STRIKE> <U>onderstreept</U> <SUB>subscript</SUB> <SUP>superscript</SUP> <TT>vaste letterafstand</TT>
Nesten van tags Logische volgorde aanhouden Voorbeeld: <B><I>Vet en cursief</I></B>
Oefening Schrijf het volgende uit: Ik ben onderstreept en cursief, maar niet vet.
Lettertype Gebruik van de tag <FONT>…</FONT> Mogelijke attributen: SIZE=“…” => grootte COLOR=“…” => kleur FACE=“…” => lettertype
Lettertype <FONT SIZE=“…”>eigenlijke tekst</FONT> Standaard is grootte 3 Getallen van 1 tot 7 mogelijk Voorbeeld: <FONT SIZE=“1”>kleine tekst</FONT> => kleine tekst
Lettertype <FONT FACE=“…”>eigenlijke tekst</FONT> Het gebruikte lettertype o.a. Times New Roman, Courier of Verdana Voorbeeld: <FONT FACE=“Courier”>eigenlijke tekst</FONT> => eigenlijke tekst
Lettertype <FONT COLOR=“...”>eigenlijke tekst</FONT> De kleur van de tekst De kleurcode (= hexadecimaal) of de naam Voorbeeld <FONT COLOR=“red”>rode tekst</FONT> of <FONT COLOR=“#FF0000”>rode tekst</FONT> => rode tekst
Oefening Probeer de verschillende attributen van de FONT uit om als resultaat het volgende te bekomen: Ik ben helemaal blauw, grootte 1 en in Verdana geschreven… Allemaal letters met verschillende kleur, grootte en lettertype!!
Tekst uitlijnen Door de tag <DIV ALIGN=“…”>tekst</DIV> Center, left of right Centreren door <CENTER>tekst</CENTER> Door een attribuut bij de paragraaf <P ALIGN=“…”>tekst</P>
Oefening Probeer de verschillende mogelijkheden om de tekst uit te lijnen uit.
Lijsten Ongesorteerde lijst Gesorteerde lijst
Lijsten: ongesorteerd <UL> <LI>eerste item</LI> <LI>tweede item</LI> … </UL>
Oefening Geef deze lijst in en bekijk het resultaat
Lijsten: ongesorteerd Mogelijke attribuut TYPE voor andere symbolen (bij de tag <UL>) Square, circle of disc <UL TYPE=“…”> <LI>…</LI> … </UL> Ook bij de <LI TYPE=“…”>…</LI> mogelijk
Oefening Bekom de volgende lijst, met verschillende symbolen: De markering van dit item zou een vierkant blokje moeten zijn De markering van dit item zou een open rondje moeten zijn De markering van dit item zou een gesloten rondje moeten zijn
Lijsten: gesorteerd <OL> <LI>Resevoir Dogs (1992) </LI> <LI>True Romance (1993) </LI> <LI>Pulp Fiction (1994) </LI> <LI>Jacky Brown (1997) </LI> </OL>
Oefening Geef deze lijst in en bekijk het resultaat
Lijsten: gesorteerd Standaard nummering: 1, 2, 3… Mogelijke attribuut TYPE=“…” voor andere symbolen (enkel bij de tag <OL>) <OL TYPE=“A”>…</OL> => A, B, C,… <OL TYPE=“a”>…</OL> => a, b, c,… <OL TYPE=“I”>…</OL> => I, II, III,… <OL TYPE=“i”>…</OL> => i, ii, iii,…
Oefening Maak een gesorteerd lijst met kleine letters