Download de presentatie
De presentatie wordt gedownload. Even geduld aub
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=" 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?
Verwante presentaties
