De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

HTML De basis-elementen.

Verwante presentaties


Presentatie over: "HTML De basis-elementen."— Transcript van de presentatie:

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

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


Download ppt "HTML De basis-elementen."

Verwante presentaties


Ads door Google