De basis-elementen Deel 2 HTML De basis-elementen Deel 2
Korte herhaling <HTML> <HEAD> <TITLE>Het simpelste HTML-document </TITLE> </HEAD> <BODY> Hier komt de eigenlijke tekst </BODY> </HTML>
Korte herhaling <TAG attribuut1 attribuut2>…</TAG>
Korte herhaling Horizontale lijnen: <HR width=“…” size=“…” align=“…” noshade> Koppen: <Hx align=“…”>…</Hx> Enter: <BR> Paragraaf: <P align=“…”>…</P> Spatie:
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>
Korte herhaling Lettertype: Tekst uitlijnen: <FONT size=“…” color=“…” face=“…”>…</FONT> Tekst uitlijnen: <DIV align=“…”>…</DIV> <CENTER>…</CENTER> <P align=“…”>…</P>
Korte herhaling Ongeordende lijst Gesorteerde lijst <UL TYPE=“…”> <LI TYPE=“…”>eerste item</LI> … </UL> Gesorteerde lijst <OL TYPE=“…”> <LI>eerste item</LI> </OL>
Oefening Maak de herhalingsoefening op pagina 2
Tabellen <TABLE BORDER="1"> <TR> <TD>a1</TD> <TD>b1</TD> <TD>b2</TD> </TABLE>
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>
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>
Oefening Maak de drie oefeningen in de cursus, p 4-5
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>
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?
Tabellen: uitlijnen Zwevende tabellen: de tekst komt naast de tabel Zwevende tabel voorkomen <DIV align=“…”> <TABLE>…</TABLE> </DIV>
Tabellen: uitlijnen celinhoud De cellen uitlijnen: <TD align=“…” valign=“…”>…</TD> De hele rij uitlijnen: <TR align=“…” valign=“…”>…</TR> VALIGN: “top”, “middle” of “bottom”
Oefening Maak de 2 oefeningen op p 6
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>
Oefening Maak de 2 oefeningen op p 7
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>
Oefening Maak de oefening op p 8 Bekijk het voorbeeld erna waar verschillende kleuren tegelijkertijd gebruikt worden op verschillende tags.
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
Oefening Maak de oefening op p 11 Bekijk het voorbeeld van het nesten van tabellen Maak de oefening op p 12
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 emailadres <A HREF="mailto: myself@hotmail.com">Schrijf me een email!</A>
Afbeeldingen <IMG SRC="naam.jpg"> Attributen ALIGN=“…” WIDTH=“…” Top, middle, bottom, right, left of center WIDTH=“…” HEIGHT=“…”
Oefening Voeg een afbeelding toe aan je HTML-bestand. Probeer de verschillende attributen uit.
Afbeeldingen: als achtergrond Een afbeelding <BODY BACKGROUND="beeld.gif">…</BODY> Een kleur <BODY BGCOLOR ="#00FF00">…</BODY>
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!!!
Meer info? www.handleidinghtml.nl