Download de presentatie
De presentatie wordt gedownload. Even geduld aub
1
HTML De basis-elementen
2
Wat is HTML? Opmaaktaal voor website’s
HyperText: techniek voor verbindingen (links) te leggen Markup: gebruik van code (tags) Language
3
Vaste opbouw <HTML> <HEAD>
<TITLE>Het simpelste HTML-document </TITLE> </HEAD> <BODY> Hier komt de eigenlijke tekst </BODY> </HTML>
4
Oefening Maak een HTML-document met als titel “Mijn
eerste site” en open dit bestand in een browser.
5
Opmaak van HTML-bestand
Horizontale lijnen: <HR> Koppen: <Hx>…</Hx> Enter: <BR> Paragraaf: <P>…</P> Spatie:
6
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
7
Oefening Geef eens <HR width=”50%” size=”5”
align=”center” noshade> in (in de body) en bekijk het resultaat.
8
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
9
Oefening Probeer de verschillende koppen uit en ook het
ALIGN attribuut erbij
10
Enter: <BR> Is het zelfde effect als de [ENTER]
<BR><BR><BR> levert witregels op Geen sluit-tag
![Enter: <BR> Is het zelfde effect als de [ENTER]](http://slideplayer.nl/slide/3088570/11/images/10/Enter%3A+%3CBR%3E+Is+het+zelfde+effect+als+de+%5BENTER%5D.jpg "<BR><BR><BR> levert witregels op. Geen sluit-tag.")
11
Paragraaf: <P>…</P>
De tag <P>…</P> maakt een alinea of paragraaf Er wordt dan automatisch een lege regel onder de paragraaf gevoegd
12
Spatie: = non-breaking space
Speciaal teken om een spatie toe te voegen   levert spaties achtereen op
13
Oefening Probeer de geziene tags nu zelf uit <P>…</P>
<BR> <HR> <Hx>…</Hx>
14
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>
15
Nesten van tags Logische volgorde aanhouden Voorbeeld:
<B><I>Vet en cursief</I></B>
16
Oefening Schrijf het volgende uit:
Ik ben onderstreept en cursief, maar niet vet.
17
Lettertype Gebruik van de tag <FONT>…</FONT>
Mogelijke attributen: SIZE=“…” => grootte COLOR=“…” => kleur FACE=“…” => lettertype
18
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
19
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
20
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
21
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!!
22
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>
23
Oefening Probeer de verschillende mogelijkheden om de
tekst uit te lijnen uit.
24
Lijsten Ongesorteerde lijst Gesorteerde lijst
25
Lijsten: ongesorteerd
<UL> <LI>eerste item</LI> <LI>tweede item</LI> … </UL>
26
Oefening Geef deze lijst in en bekijk het resultaat
27
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
28
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
29
Lijsten: gesorteerd <OL>
<LI>Resevoir Dogs (1992) </LI> <LI>True Romance (1993) </LI> <LI>Pulp Fiction (1994) </LI> <LI>Jacky Brown (1997) </LI> </OL>
30
Oefening Geef deze lijst in en bekijk het resultaat
31
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,…
32
Oefening Maak een gesorteerd lijst met kleine letters
Verwante presentaties
