les 2 vandaag •vragen over voorgaande stof •plaatjes •tabellen •links •huiswerk
TRANSCRIPT
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>
<td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr><tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
</tr></table>
</body>
</html>
Les 2<cursus html><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!
Les 2<cursus html><html>
<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>