De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

De basis-elementen Deel 2

Verwante presentaties


Presentatie over: "De basis-elementen Deel 2"— Transcript van de presentatie:

1 De basis-elementen Deel 2
HTML De basis-elementen Deel 2

2 Korte herhaling <HTML> <HEAD>
<TITLE>Het simpelste HTML-document </TITLE> </HEAD> <BODY> Hier komt de eigenlijke tekst </BODY> </HTML>

3 Korte herhaling <TAG attribuut1 attribuut2>…</TAG>

4 Korte herhaling Horizontale lijnen:
<HR width=“…” size=“…” align=“…” noshade> Koppen: <Hx align=“…”>…</Hx> Enter: <BR> Paragraaf: <P align=“…”>…</P> Spatie:  

5 Korte herhaling <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>

6 Korte herhaling Lettertype: Tekst uitlijnen:
<FONT size=“…” color=“…” face=“…”>…</FONT> Tekst uitlijnen: <DIV align=“…”>…</DIV> <CENTER>…</CENTER> <P align=“…”>…</P>

7 Korte herhaling Ongeordende lijst Gesorteerde lijst
<UL TYPE=“…”> <LI TYPE=“…”>eerste item</LI> </UL> Gesorteerde lijst <OL TYPE=“…”> <LI>eerste item</LI> </OL>

8 Oefening Maak de herhalingsoefening op pagina 2

9 Tabellen <TABLE BORDER="1"> <TR> <TD>a1</TD>
<TD>b1</TD> <TD>b2</TD> </TABLE>

10 Tabellen <TABLE BORDER="1"> <TR>
<TH>Titel 1</TH> <TH>Titel 2</TH> <TH>Titel 3</TH> </TR> <TD>a1</TD> <TD>a2</TD> <TD>a3</TD> </TABLE>

11 Tabellen Mogelijke attribuut WIDTH=“…” (bij TABLE)
Voorbeeld: <TABLE WIDTH=“120”>…</TABLE> Mogelijke attribuut WIDTH en HEIGHT (bij TD of TH) Voorbeeld: <TD WIDTH=“50“ HEIGHT="60"> …</TD>

12 Oefening Maak de drie oefeningen in de cursus, p 4-5

13 Tabellen: uitlijnen <TABLE BORDER="1" ALIGN="center"> <TR> <TD WIDTH="120" HEIGHT="60">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE>

14 Oefening Geef deze tabel in en bekijk het resultaat.
Vervang nu ook eens de ALIGN-waarde door ‘right’ of ‘left’ en wat geeft dit als resultaat?

15 Tabellen: uitlijnen Zwevende tabellen: de tekst komt naast de tabel
Zwevende tabel voorkomen <DIV align=“…”> <TABLE>…</TABLE> </DIV>

16 Tabellen: uitlijnen celinhoud
De cellen uitlijnen: <TD align=“…” valign=“…”>…</TD> De hele rij uitlijnen: <TR align=“…” valign=“…”>…</TR> VALIGN: “top”, “middle” of “bottom”

17 Oefening Maak de 2 oefeningen op p 6

18 Tabellen Cellpadding: de afstand tussen de rand van een cel en de inhoud <TABLE CELLPADDING="…">…</TABLE> Cellspacing: de ruimte tussen de cellen en de ruimte tussen de buitenste cellen en de tabelrand <TABLE CELLSPACING="…">…</TABLE>

19 Oefening Maak de 2 oefeningen op p 7

20 Tabellen: achtergrond
Attribuut BGCOLOR bij TABLE, TR, TD en TH: verandert de achtergrond-kleur ervan <TABLE BORDER="1" BGCOLOR="#FFFFCC"> <TR> <TD WIDTH="120" HEIGHT="40">a1</TD> <TD WIDTH="80">a2</TD> </TR> <TR> <TD HEIGHT="40">b1</TD> <TD>b2</TD> </TR> </TABLE>

21 Oefening Maak de oefening op p 8
Bekijk het voorbeeld erna waar verschillende kleuren tegelijkertijd gebruikt worden op verschillende tags.

22 Tabellen: samenvoegen van cellen
Attribuut ROWSPAN voor de rijen: <TD ROWSPAN=“…”>…</TD> Attribuut COLSPAN voor de overeenkomende cellen: Bekijk de voorbeelden op p 9-10

23 Oefening Maak de oefening op p 11
Bekijk het voorbeeld van het nesten van tabellen Maak de oefening op p 12

24 Links Linken naar een ander HTML-bestand
<A HREF="pictures.htm">klik hier</a> Linken naar een pagina op een andere website <A HREF="http://www.google.be">klink hier</A> Linken naar een adres <A HREF="mailto: me een !</A>

25 Afbeeldingen <IMG SRC="naam.jpg"> Attributen ALIGN=“…” WIDTH=“…”
Top, middle, bottom, right, left of center WIDTH=“…” HEIGHT=“…”

26 Oefening Voeg een afbeelding toe aan je HTML-bestand.
Probeer de verschillende attributen uit.

27 Afbeeldingen: als achtergrond
Een afbeelding <BODY BACKGROUND="beeld.gif">…</BODY> Een kleur <BODY BGCOLOR ="#00FF00">…</BODY>

28 Uploaden? Uw html-bestanden: o.a. index.html FTP-programma
Ruimte op een server: gegevens van de server: servernaam, loginnaam en paswoord Uw bestanden naar de server kopiëren en klaar is kees!!!

29 Meer info?


Download ppt "De basis-elementen Deel 2"

Verwante presentaties


Ads door Google