Wouter heeft een paar lessen over HTML gemaakt. Klik op de les die je wil:
HTML is een afkorting voor Hyper Text Marking Language. Het is de "taal" waar een webpage mee gemaakt wordt. Dit zijn de basis "tags", een tag is een deel dat aangeeft wat de computer moet doen. Het staat altijd tussen de < > tekens. Een tag wordt altijd gesloten met dezelfde begin tag, alleen dan staat er na de < een slash (/). Als je dit invult in een gewone tekst editor en je slaat het op als bijv. index.html, dan komt het er anders uit.
| <HTML> </HTML> | Tussen deze 2 tags komt alles te staan. Dit zijn de begin en de eind tag van een HTML document. | |
| <HEAD> </HEAD> | Wat hiertussen komt te staan staat bovenaan de pagina. Het is de titel van een pagina. | |
| <TITLE> </TITLE> | Dit is de tekst die in het blauwe venstertje bovenaan in het beeld komt te staan. | |
| <BODY> </BODY> | Hiertussen komt de rest van de pagina. Het is het gedeelte onder de HEAD | Je kan bij de <BODY> ook nog een van deze dingen invullen: text, link, vlink, alink, bgcolor, background |
| Dit gebeurt er dan: | text="kleur naam / HEX code" link="kleur naam / HEX code" vlink="kleur naam / HEX code" alink="kleur naam / HEX code" bgcolor="kleur naam / HEX code" background="koppeling plaatje" (bijv. C:\hond.gif) |
En dan heb je ook nog deze tags:
| <P></P> | Tussen deze tags komt alles van een alinea. Er kunnen meerdere alinea's op een pagina staan. Eigenlijk moet elk stukje tekst in de BODY tussen de <p></p> tags staan |
| <BR> | Volgende regel. |
Je kan natuurlijk veel meer doen. De tekst kun je groot, klein, dik maken. Er zijn heel veel verschillende dingen die je met je tekst kan doen om je site mooier te maken. Hier staan er weer wat:
| De tag: | In plaats van ? | Wordt uitgedrukt in: | Effect: |
| <font ?></font> | color=" ", size=" ", face=" ", | kleur naam / HEX code, in pixels (px) of punten (pt), lettertype | De tekst krijgt die kleur De tekst krijgt die grote De tekst krijgt dat lettertype |
| <H?></H?> | 1 als grootst, 6 als kleinst | -- | De tekst krijgt die grote |
| <B></B> <I></I> <U></U> | -- -- -- | -- -- -- | De tekst wordt dik De tekst staat schuin De tekst wordt onderstreept |
| <SUB></SUB> | -- | -- | Tekst wordt subschrift |
| <SUP></SUP> | -- | -- | Tekst wordt superschrift |
| <DIV ?></DIV> <SPAN ?></SPAN> | align=" " | center / right / left | tekst wordt bijv rechts uitgelijnd |
Met HTML kun je ook plaatjes op je website zetten. Dan moet je in het HTML document <img src="koppeling naar plaatje (bijv. C:\WINDOWS\cool.jpg)"> zetten. Als de afbeelding in dezelfde map als het html document zit hoef je alleen maar de naam in te vullen, hier dus cool.jpg. Hier is weer een lijstje wat je allemaal erbij kan voegen:
| Invoegen: | Wordt uitgedrukt in: | Effect: |
| alt=" " | tekst | De tekst die komt als je even op het plaatje blijft staan. |
| border=" " | een cijfer | Hoe dik de rand om het plaatje is. |
| bordercolor=" " | kleur naam / HEX code | De kleur van de rand om het plaatje |
| height=" " | pixels (px) / | Hoe hoog de afbeelding is. Dit niet invullen om gewone hoogte te krijgen |
| widht=" " | pixels (px) | Hoe breed de afbeelding is. Dit niet invullen om gewone breedte te krijgen |
| hspace=" " | cijfer | Aantal punten dat wordt vrijgelaten links en rechts tussen afbeelding en tekst |
| vspace=" " | cijfer | Aantal punten dat wordt vrijgelaten onder en boven tussen afbeelding en tekst |
| align=" " | center / right / left | Waar het plaatje staat, links, midden of rechts. |
Een hyper link is een stukje tekst waar je op kan klikken en dat je dan naar een andere pagina of een ander deel van de pagina gaat. Je moet dan <a href="de website">de link tekst<a>. Als de webpage in dezelfde map zit als de hoofdpagina hoef je alleen maar webpagenaam.html in te vullen. Je kan ook hier weer nog wat dingen invullen:
| Invoegen: | Wordt uitgedrukt in: | Effect: |
| title=" " | tekst | de tekst die komt als je er even op blijft staan. |
| target=" " | _top _self | nieuw venster hetzelfde venster |
Je kan ook in plaats van tekst een plaatje als hyper link laten dienen. Dan moet je in plaats van de tekst de tag van een afbeelding invullen.
Een link hoeft niet altijd naar een andere pagina te gaan. Het kan ook naar een ander gedeelte op dezelfde pagina zijn. Dan moet je bij het gedeelte waar je de link naartoe wil laten gaan, <a name="trefwoord"> invullen, en in de link zelf moet je dan <a href="#trefwoord">tekst</a> invullen. En als het om een gedeelte gaat op een andere pagina dan moet je voor #trefwoord ook nog de url van de pagina invullen, bijv. test.html#trefwoord.
Een tabel is handig als je een lijst wil maken, of je site overzichterlijker te maken. Dit kun je doen door de <table> </table> tags in te voeren. In deze tag kun je ook weer wat meer dingen invullen om het uiterlijk van de tabel te veranderen.
| Invoegen: | Wordt uitgedrukt in: | Effect: |
| border=" " | cijfer | Hoe dik de rand om 1 kolom is. |
| bordercolor=" " | kleur naam / HEX code | De kleur van de rand |
| cellspacing=" " | cijfer | Het aantal punten tussen 2 cellen |
| cellpadding=" " | cijfer | Het aantal punten tussen tekst en rand in een cel |
| height=" " | cijfer procent | De hoogte in punten De hoogte in procenten ten opzichte van beschikbare ruimte |
| widht=" " | cijfer procent | De breedte in punten De breedte in procenten ten opzichte van beschikbare ruimte |
| align=" " | left / center / right | De tabel komt links, recht of in het midden van beeld. |
<table border="2" bordercolor="yellow" align="center">
<tr><td>rij 1, cell 1</td> <td>rij 1, cell 2</td></tr>
<tr><td>rij 2, cell 1</td> <td>rij 2, cell 2</td></tr>
</table>
En dat wordt:
| rij 1, cell1 | rij 1, cell 2 |
| rij 2, cell1 | rij 2, cell 2 |