Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.

Les 2

Vandaag

• Vragen over voorgaande stof• Plaatjes• Tabellen• Links• Huiswerk

<cursus html>

Les 2

Vragen over stof tot nu toe

<cursus html>

Les 2<cursus html>

Even opfrissenEen website bestaat uit een verzameling bestandjes (.htm of .html) welke naar elkaar doorverwijzen met links.Meestal begint een website met index.html of default.htmEen html-document maak je in een text-editor zoals bijv. Windows Kladblok.

Het moet ten minste bevatten:<html>

<head><title></title>

</head>

<body></body>

</html>

De inhoud van de pagina komt tussen de <body> tags.Wanneer je in Internet Explorer je website opent, kun je middels de rechter muisknop de bron bekijken. Je kunt deze aanpassen en daarna OP JE EIGEN PC opslaan. Vervolgens kun je dit bestandje via FTP naar een webserver sturen.Met FTP kopieer je het bestandje dus feitelijk van je eigen pc naar de webserver.

Les 2<cursus html>

Iedere tag moet je na openen ook sluiten <b></b>

Sommigen kun je direct sluiten zoals:<br /> <frame /> <hr /><img /><meta /><link />

De tags <html><head><title><body> mogen maar één keer voorkomen in een html-document.

Wanneer je <frameset> gebruikt mag er geen <body> in de pagina staan.

Les 2<cursus html>

De Tag <img />

src="" url/locatie [relatief, dus vanuit huidige map]

width="" breedte

height="" hoogte

alt=“[tekst]" omschrijving

border=“[1-2-3-4-5-6-etc.]" rand dikte

align="[center-justify-left-right]" uitlijning [midden-uitvullen-links-rechts]

Les 2<cursus html>

<html>

<head><title>Tabellen</title>

</head>

<body>

<img src=“images/plaatje1.jpg” width=“250” height=“150” border=“0” alt=“plaatje” />

</body>

</html>

Les 2

Vragen over stof tot nu toe

<cursus html>

Les 2

Tabellen

<cursus html>

Les 2<cursus html>

Een tabel bestaat uit tenminste 3 elementen:

<table></table> = start/einde tabel<tr></tr> = start/einde tabelrij<td></td> = start/einde tabelcel

Wanneer er geen ‘data’ in je <td> staat, krijg je niets te zien!

LET OP! ‘Tel’ goed of het aantal cellen in een rij klopt.Zeker wanneer je rowspan of colspan gebruikt!Een tabel met 4 cellen maak je als volgt:

Les 2<cursus html>

De Tag <table>

background="" achtergrondplaatje

bgcolor="#" achtergrondkleur

border="" randdikte

bordercolor="" randkleur

width="" breedte

height="" hoogte

align="" uitlijning [midden-uitvullen-links-rechts]

Les 2<cursus html>

<table border="1"><tr>

<td>1</td><td>2</td>

</tr>

<tr><td>3</td><td>4</td>

</tr></table>

1 2

3 4

Les 2<cursus html>

Inhoud van een tabel uitlijnen doe je als volgt: <table border="1">

<tr><td align=”right”>1</td><td valign=”top”>2</td>

</tr>

<tr><td align=”center”>3</td><td align=”right” valign=”bottom”>4</td>

</tr></table>

1

2

3

4

Les 2<cursus html><html>

<head><title>Tabellen</title>

</head>

<body>

<table border="1"><tr>

<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>

</tr><tr>


</tr><tr>


</tr></table>

</body>

</html>


<head><title>Tabellen 2</title>

</head>

<body>

<table width="100%" height="100%" border="1"><tr>

<td width="20%" align="left">1</td><td width="20%" align="left">2</td><td width="20%" align="left">3</td><td width="20%" align="left">4</td><td width="20%" align="left">5</td>

</tr><tr>

<td align="center">6</td><td align="center">7</td><td align="center">8</td><td align="center">9</td><td align="center">10</td>

</tr><tr>

<td align="right">11</td><td align="right">12</td><td align="right">13</td><td align="right">14</td><td align="right">15</td>

</tr></table>

</body>

</html>

Les 2<cursus html>

Let goed op de verdeling van de tabel op de pagina en de uitlijning in de cellen!


<head><title>Opdracht 2 - Tabellen</title>

</head>

<body>

<table width="100%" height="100%" border="1"><tr>

<td width="20%" align="center" rowspan="3" bgcolor="#bfbfff">1</td><td width="20%" align="center">2</td><td width="20%" align="center">3</td><td width="20%" align="center">4</td><td width="20%" align="center">5</td>

</tr><tr>

<td align="center">6</td><td align="center" colspan="3" bgcolor="#bfbfff">7</td>

</tr><tr>

<td align="center">8</td><td align="center">9</td><td align="center">10</td><td align="center">11</td>

</tr></table>

</body>

</html>

Les 2<cursus html>

De locatie van de foto is: http://www.heesch.nl/images/raadhuis.jpg

Les 2

Aan de slag!

<cursus html>

Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.

Documents

Transcript of Les 2 Vandaag •Vragen over voorgaande stof •Plaatjes •Tabellen •Links •Huiswerk.