![[<--]](terug.gif){kind=small}
Back to Wafelke's HTML Help (Inhoud)
![[HTML of hoe schrijf ik een pagina?]](hoe.gif){kind=small}
![[knop]](knop.gif){kind=small}
Basis-html Alles over FRAMES Alles over Image Maps![[NEW]](new.gif){kind=small}
Haal de fouten uit je HTML-code. Alfabetische lijst met Tags Tips en trucjes. (UPDATED) Lees nu alles over HTML 4.0 ! !
<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> <HTML>
|
Tag-lijst |
<TITLE>Wafelke's HTML Help</TITLE>
dit zorgt er voor dat de topic gelijk is aan:
bijv. voor nestcape-gebruikers onder windows:
Nescape-[Wafelke's HTML Help]
|
|
Tag-lijst |
Behalve waar anders vermeld zullen al de tags tussen de BODY-tags geplaatst worden. Een eerste uitzondering hierop is de topic, tussen de TITEL-tags, die zoals gezien bij de structuur tussen de HEAD-tags komt. Attributen daarentegen plaatst men binnen de haakjes ( < en >) van de eerste tag van een koppel tags.
Oke, bepaalde attributen plaats je in de body-tag, zij bepalen het globaal uitzicht van je pagina, zoals kleur van je tekst, links, achtergrond.
voorbeeldje: <BODY BACKGROUND="chalk.jpg" BGCOLOR="#7F7F7F" LINK="#111FFF" VLINK="#111111">
BACKGROUND="chalk.jpg" bepaalt de achtergrond. BGCOLOR="#7F7F7F" bepaalt de achtergrondkleur. LINK="#111FFF" bepaalt de kleur van een link. VLINK="#111111" bepaalt de kleur van een bezochte link. A LINK="red" bepaalt de kleur van een link waar men op klikt. TEXT="green" bepaalt de kleur van de tekst.
opm: een kleur in html language wordt aangeduid aan de hand van # gevolgd door een RGB-kleur.
(red green blue), voor elke basiskleur 2 hexa-decimale cijfers.
(0 1 2 3 4 5 6 7 8 9 A B C D E of F). De kleur kan ook bepaald worden door
een van de volgende attributen:
red,
green,
blue,
...enz.
Hier vind je nog een handige kaart met al de RGB-waarden op.
Ik gaf je vroeger al een link voor die codes, volgende pagina is ook verdraaid handig, al zeg ik het zelf : )
|
|
Tag-lijst |
<H1>Hoofdstuk 1</H1> wordt in de browser:Hoofdstuk 1
<H2>Hoofdstuk 2</H1> wordt in de browser:Hoofdstuk 2
<H3>Hoofdstuk 3</H1> wordt in de browser:Hoofdstuk 3
<H4>Hoofdstuk 4</H1> wordt in de browser:Hoofdstuk 4
<H5>Hoofdstuk 5</H1> wordt in de browser:Hoofdstuk 5
<H6>Hoofdstuk 6</H1> wordt in de browser:Hoofdstuk 6
|
|
Tag-lijst |
"Unordered List"
<UL> <LI>bananen <LI>peren <LI>appels </UL>geeft:
"Ordered List"
<OL> <LI>bananen <LI>peren <LI>appels </OL>geeft:
<OL TYPE=A> TYPE A <OL TYPE=a> TYPE a <OL TYPE=I> TYPE I <OL TYPE=i> TYPE i <OL TYPE=1> TYPE 1 <UL TYPE=disc> TYPE disc <UL TYPE=circle> TYPE circle <UL TYPE=square> TYPE square
dan krijgen we respectievelijk:
![[More...]](more.gif){kind=small}
|
|
Tag-lijst |
Logical Styles: duidt het gebruik van de tekst aan
codePsychical Styles: duidt aan hoe de tekst er exact uitziet
de FONT-tag
opm: een kleur in html language wordt aangeduid aan de hand van # gevolgd door een RGB-kleur. (red green blue), voor elke basiskleur 2 hexa-decimale cijfers. (0 1 2 3 4 5 6 7 8 9 A B C D E of F). De kleur kan ook bepaald worden door een van de volgende attributen: red, green, blue, ...enz.
opm: deze laatste tag geeft de grootte relatief tov van de basisgrootte die standaard op 3 staat, om zelf een basisgrootte in te stellen gebruik je de tag: <BASEFONT SIZE="5"> bijvoorbeeld.
de FONT FACE-tag
opm: je kunt tussen de haakjes (" ") meerdere fonts plaatsen, in volgorde van prioriteit.
opm: Het gebruik van deze tag heeft z'n nadelen. Niet elke browser ondersteunt deze tag. Hoe kun je nu weten welke fonts je kunt gebruiken, wel da's een ander probleem. Je kunt gelijk welke font van je eigen systeem bekijken, het zal effekt hebben als je het bekijkt met een browser die, ten eerste op jouw systeem draait, en ten tweede die de tag ondersteunt. Problemen zijn dan, dat iemand die jou pagina leest een browser kan hebben die de tag niet ondersteunt, ofwel de font op zijn systeem heeft onder een andere naam of helemaal niet. U bent gewaarschuwd !
|
|
Tag-lijst |
<PRE>
. . . .
. . .
. {~._.~} .
. ( Y ) .
. ()~*~() .
. (_)-(_) .
. .
.
</PRE> geeft:
. . . .
. . .
. {~._.~} .
. ( Y ) .
. ()~*~() .
. (_)-(_) .
. .
.
|
|
Tag-lijst |
enkele voorbeelden: <HR> geeft :
<HR SIZE=2> geeft :
<HR SIZE=4> geeft :
<HR SIZE=8> geeft :
<HR SIZE=16> geeft :
<HR WIDTH=100%> geeft :
<HR WIDTH=75%> geeft :
<HR WIDTH=50%> geeft :
<HR WIDTH=25%> geeft :
<HR WIDTH=10%> geeft :
<HR WIDTH=50> geeft :
<HR NOSHADE> geeft :
voorbeeldje: een gebroken be<BR>en geeft :
een gebroken be
en
voorbeeldje: je bent zo<SPACER TYPE=horizontal SIZE="200">ver geeft :
je bent zo ver
je bent zo<SPACER TYPE=vertical SIZE="50">ver geeft :
je bent zo ver
|
|
Tag-lijst |
In wat volgt ziet u hoe bepaalde stukken tekst een extra tintje geeft
voorbeelden:Elk stukje tekst wordt normaal gezien tussen de paragraaf-tags geplaatst.
(met behulp van <ADDRESS> en </ADDRESS>)
De blockquote-tag zorgt ervoor dat de tekst een beetje naar binnen
|
|
Tag-lijst |
Positie van de titels
<H4 ALIGN=LEFT>align=left Hoofdstuk 4</H4> geeft:
<H4 ALIGN=RIGHT>align=right Hoofdstuk 4</H4> geeft:
<H4 ALIGN=CENTER>align=right Hoofdstuk 4</H4> geeft:
Positie een stuk tekst
<DIV ALIGN=LEFT>align=left stuk tekst</DIV> geeft:
<DIV ALIGN=RIGHT>align=right stuk tekst</DIV> geeft:
<DIV ALIGN=CENTER>align=right stuk tekst</DIV> geeft:
Centreren
<CENTER></H4>center<H4></CENTER> geeft:
Tag-lijst<A HREF="http://www.dma.be/p/bewoner/Wafelke/ref.htm">referentie-pagina</A> geeft: referentie-pagina
dus kan m'n http://www.dma.be/p/bewoner/Wafelke/ref.htm in ons voorbeeld vervangen door bijvoorbeeld:
http://www.dma.beopm: de tekst die naar de link verwijst kan ook een tekening zijn, verder meer.
Oke, dit wordt moeilijker om uit te leggen, wel, stel je hebt een lange tekst, een lange pagina zoals deze pagina, en je wilt verwijzingingen(lees: links) aanbrengen naar plaatsen in je document. Zoals de links op deze pagina(html2.htm) naar de tag-list. Wel dit werkt met anchor-names. Een voorbeeld:
Je wil nu wanneer je over je hobbies praat verwijzen naar de plaats in je pagina waar je iets meer vertelt over irc. Dit doe je door een anchor te plaatsen rond de tekst waar die plaats mee begint.(hier NAME=IRC)En van de tekst "IRC'en" bij hobbies maak je dan een link naar die plaats(anchor-name). Als volgt:
<A NAME="IRC">Meer over irc</A>
<A HREF="html2.htm#IRC">IRC'en</A> geeft:
|
|
Tag-lijst |
De attributen HSPACE(horizontal space) en VSPACE(vertical space) laten toe een zekere ruimte tussen de tekening en de tekst te voorzien zoals hier getoond. De code :
|
|
Tag-lijst |
<TABLE> <TR> <TH>lengte</TH> <TH>breedte</TH> </TR> <TR> <TD> 20m </TD> <TD> 30m </TD> </TR> </TABLE> geeft:
| lengte | breedte |
|---|---|
| 20m | 30m |
Merk op: alle cellen van 1 regel plaatsen we tussen de <TR>-tag van die regel.Tabellen bestaan uit tabel-regels, tabel-regels dan weer uit tabel-cellen, al dan niet een hoofding.
| lengte | breedte |
|---|---|
| 20m | 30m |
| lengte | breedte | |
|---|---|---|
| model 1 | 20m | 30m |
| lengte | breedte | |
|---|---|---|
| model 1 | 20m | 30m |
achtergrondkleur a.h.v. BGCOLOR: te gebruiken op gelijk welk niveau, hetzij cel, rij of volledige cel.
de breedte van een cel a.h.v. WIDTH: totale breedte vermelden in de table-tag en de breedte van iedere cel opnieuw definieren.
voorbeeld: het creëren van een verticale bar
de code:
<TABLE WIDTH="320">
<TR>
<TD BGCOLOR=#408080 WIDTH="40"><BR></TD>
<TD WIDTH="20"><BR></TD>
<TD WIDTH="260"><TT>Mijn homepage<BR><BR>
Ik ben ......... <BR>
................ <BR>
................ <BR>
<BR>
hobbies: <A HREF="html2.htm#VB2">IRC'en</A>,<BR>
................ <BR>
................ <BR>
................ <BR>
<BR>
<A NAME="VB2">Meer </A> over irc ..<BR>
................ <BR>
................ <BR>
................ <BR>
................ <BR> </TT></TD>
</tr >
</table > geeft:
| Mijn homepage Ik ben ......... ................ ................ hobbies: IRC'en, ................ ................ ................ Meer over irc .. ................ ................ ................ ................ |
|
|
Tag-lijst |
|
|
Tag-lijst |
lportier@vub.ac.be.
Back to Wafelke's HTML Help (Inhoud)