Een tag is een stukje tekst, meestal een naam tussen twee puntige haakjes (een haakje met het puntje naar links om te openen en eentje met het puntje naar rechts, achter de inhoud, om te sluiten).
Meestal wordt een gewoon stukje tekst omsloten door twee XHTML-tags, de eerst tag vóór de tekst is de openingstag, de tweede áchter de tekst is de sluittag (deze heeft exact dezelfde inhoud als de openingstag maar met een schuine streep (een slash) voor de inhoud van deze tag om aan te duiden dat dit een sluittag is. Dit noemt men gesloten tags.
Je hebt ook open tags. Bijvoorbeeld:
Deze tag opent en sluit in één tag, wanneer gebruik je open tags? Wanneer je deze tag niet op een bepaald gedeelte tekst wil toepassen maar wanneer je bijvoorbeeld gewoon een nieuw lijn wil beginnen.
Je hebt verschillende soorten tags en deze hebben allemaal verschillende functies en verschillende, vastgelegde namen.
Open een nieuwe pagina in Kladblok, dit programma staat tegenwoordig op bijna elke PC bij aankoop al geïnstalleerd, ook op Mac vind je een gelijkaardige eenvoudige teksteditor die gewone platte tekst zonder opmaak produceert (géén 'Word' dus!). Deze teksteditor gebruik je voor de volgende opdracht: typ de volgende tekst (mét tags) over van de afbeelding hieronder:
De 'html'-tags omsluiten de inhoud van je pagina en vertellen je browser dat het om HTML gaat, zo weet je browser (de software) hoe hij deze pagina moet 'interpreteren' (dit betekent omzetten naar een visueel aantrekkelijk én leesbaar beeld). De 'head'-tags omsluiten enkel de informatie voor je browser dit is om je pagina goed weer te geven, deze informatie wordt nooit getoond in het browser-venster. De 'body'-tags omsluiten de tekst, beelden en informatie die jij als gebruiker ziet in het browser-venster.
Bewaar dit bestandje als 'Alle bestanden (*.*)' , ! niet als tekstbestand !, met als extensie: .html (wat is een extensie? Een extensie zijn de drie of vier lettertjes die je achter het puntje op het einde van je bestandsnaam vind).
Een gratis teksteditor om XHTML en CSS te schrijven?:
http://www.youtube.com/watch?v=cqszz_OfAFQ
Hoe start ik?:
http://www.youtube.com/watch?v=k3dJKtQmyd0
Structuur in xhtml:
http://www.youtube.com/watch?v=JEacEPCxjl4
http://www.youtube.com/watch?v=3R3QXXnF7FM
Voorbeelden: typ deze tekst in kladblok, bewaar het bestandje als .html ('allerlei' geen tekst!) en bekijk het resultaat in je browser (hiervoor dubbelklik je op je bestandje en dit opent automatisch in je browser).
De theorie over het opmaken in XHTML vind je in het handboek: hoofdstuk 1.
<html> <body bgcolor="#0000ff" text="#ffffff"> </body> |
 |
|
<html> <head> <title>de titel</title> </head> <body> Tags worden gebruikt om de <blink>webpagina</blink> van de nodige <strong>opmaak</strong> en <em>structuur</em> te voorzien.<br /> </body> |
 |
|
<html> <head> <title>de titel</title> </head> <body> <hr /> HR is een open tag en plaatst een horizontale lijn op het scherm.<br /> </body> |
 |
<html> <body bgcolor="#00ff00" text="#000000"> <hr size="1"> <strong>deze tekst is vet</strong> <em>de tekst is schuin</em> <u>de ingesloten tekst wordt onderstreept weergegeven</u> <strike> de tekst is doorstreept</strike> <sub> de ingesloten tekst wordt verlaagd weergegeven</sub> en de zin die hierna volgt komt op een nieuwe lijn <br /> <sub> de ingesloten tekst wordt verlaagd weergegeven</sub><br /> <sup>de ingesloten tekst wordt verhoogd weergegeven</sup><br /> <big>de insgesloten tekst wordt vergroot weergegeven</big><br /> <p><small>de ingesloten tekst wordt verkleind weergegeven</small> en de andere tekst niet!</p> <font size=”20” face=”Arial” color=”#0000ff">tekst</font> <h2 align="center">align is een attribuut dat o.a. bij de tags voor titels gebruikt wordt</H2> </body> |
 |
<html>
<head>
<title>Een webpagina in kleur</title>
</head>
<body bgcolor=red text=blue>
Elke tag kan een aantal attributen (parameters) bevatten, die de werking van de tag beïnvloeden.<br />
Attributen plaats je enkel in de begintag en worden steeds gescheiden door spaties. Ze komen meestal in de vorm voor:<br />
Attribuutnaam="waarde". Attributen worden bijvoorbeeld gebruikt voor het uitlijnen van elementen en voor het instellen van kleuren en afmetingen, enz.
<br />
Zoals je hier voor de body-tag ziet de achtergrondkleur is op rood ingesteld en de tekst is op blauw ingesteld.
<br /><br />
Maakt nu voor jezelf deze pagina eens met een gele achtergrond en een groene tekst.<br />
Probeer daarna eens met een roze achtergrond een felgroene tekst.
</body>
</html>
|
<html> <body bgcolor="green"> Dan hebben we nog de blink-tag om <blink>tekst</blink> te laten <blink>knipperen</blink><br /><br /> <center><font color="red"><H1>deze tekst is rood</H1></font></center> </body> |
 |
Oefeningen: Maak onderstaande voorbeelden zo identiek mogelijk na in XHTML-code in kladblok en test ze in je browser...
Filmpje over tekst opmaken in xhtml:
http://www.youtube.com/watch?v=r7HHAdP44qM
theorie: zie boek, hoofdstuk 3, én onderstaande voorbeelden:
Tags:
<a> </a> De tekst die door deze 2 tags wordt omsloten fungeert als hyperlink.
Attributen van <a> :
href="url"
Wanneer de webpagina waarin de link zich bevindt en het bestand waarnaar wordt doorverwezen zich op verschillende servers bevinden, moet je de locatie van het bestand opgeven als een "url" (een absolute verwijzing). Bijvoorbeeld: <a href="http://www.Disney.com">klik hierop</a> .
href="pad/HTML-bestand"Wanneer de webpagina en het bestand zich op dezelfde server bevinden zal de locatie van het bestand meestal als een relatieve verwijzing worden opgegeven. De bestandslocatie wordt in dit geval relatief gedefinieerd ten opzichte van de map waarin de HTML-pagina zich bevindt. Wanneer het bestand zich in dezelfde map bevindt als de webpagina volstaat de bestandsnaam (zonder pad).
Naast het maken van koppelingen naar andere webpagina's kunnen hyperlinks ook gebruikt worden voor het navigeren binnen één (zeer lange) webpagina. In dit geval kan je door te klikken op hyperlinks snel naar bepaalde posities in een webpagina springen. Interne hyperlinks verwijzen niet naar url's maar naar (onzichtbare) ankers in dezelfde webpagina. Voor het creëeren van zowel de interne hyperlinks als de ankers wordt gebruik gemaakt van de tag <a>.
Tags
<a> </a> de tekst die door deze tags wordt omsloten fungeert als hyperlink.
Attributen van <a> :
name="ankernaam"
Met het attribuut "name" worden de ankers op de juiste plaats in de pagina aangeduid. De ankernaam kan vrij gekozen worden. Bijvoorbeeld: <a name="tip1"></a>
href="#ankernaam"
Door te klikken op de betreffende link wordt naar het opgegeven anker gesprongen. Het spoorwegteken (of hekje) "#" voor de ankernaam geeft aan dat het gaat om een link naar een anker in dezelfde pagina. Bijvoorbeeld: <a href="#tip1">Tip1: raadpleeg het aanbod</a> .
Tags:
<a> </a> de tekst die door deze 2 tags wordt omsloten fungeert als hyperlink
Attributen van <a> :
href="mailto:e-mailadres"
Via "href" wordt opgegeven naar welk e-mailadres het bericht moet worden verstuurd.
Bijvoorbeeld: <a href="mailto:de.juf@hotmail.com">klik hier</a>
voorbeeld:
Heb je vragen, stuur je mail dan naar: de juf
De attributen van :
href="url"
De pagina met de opgegeven "url" wordt geladen wanneer op de betreffende link wordt geklikt. Omdat in dit geval een volledig url wordt opgegeven en de hyperlink bijgevolg op een ondubbelzinnige manier verwijst naar een bepaalde webpagina ergens op het internet spreken we hier van een "absolute verwijzing".
href="pad/html-bestand"
href=".. /html-bestand"
Het opgegeven HTML-bestand (webpagina) dat zich op dezelfde server (maar niet noodzakelijk in dezelfde map) bevindt wordt geladen wanneer op de betreffende link wordt geklikt. De locatie van het bestand wordt relatief ten opzichte van de huidige map opgegeven. Het betreft hier dus een "relatieve verwijzing". Wanneer de doelpagina (waarnaar wordt verwezen) zich in dezelfde map bevindt als de webpagina waarin de hyperlink voorkomt, kan enkel een bestandsnaam (zonder pad) volstaan.
Deze link opent het html-bestand "index.htm" dat zich in dezelfde map als deze pagina bevindt (behalve als het bestand verplaatst is...)(en dit is nu het probleem met relatieve linken...). Code voorbeeld: <a href="index.htm">HOME</a>
Om het bestand "producten.htm" te openen klikt u hier. "producten.htm" bevindt zich in de map "website" dit is een andere map dan de map waarin de huidige pagina zich bevindt (dit is een relatieve link, die wanneer u het bestand is verplaatst, ook niet werkt). Code voorbeeld: <a href=".. /website/producten.htm">PRODUCTEN</a>
Voor de eerste link werd een absolute verwijzing gebruikt (http://www.cvoantwerpen.be). De twee andere hyperlinks maken gebruik van relatieve verwijzingen. De bovenstaande webpagina moet zich in de juiste map bevinden. Is dit niet het geval, dan zullen de bestanden niet worden gevonden en bijgevolg niet worden weergegeven in de browser wanneer op de betreffende links wordt geklikt.
Voorbeelden: kopieer deze codevoorbeelden in kladblok en test ze uit in je browser.
Download indien nodig de gewenste dierengeluiden van de volgende website: http://simplythebest.net/sounds/other_formats/Sun_Audio/sound_effects_AU/animals_au.html
En voeg indien nodig een pdf of beeld naar keuze toe... (plaats deze in dezelfde map als je bestand én voeg de naam toe in je code!)
<html>
<head>
<title>dit is een eerste voorbeeld van een bestand met links</title>
</head>
<body bgcolor="#9afe2e">
<blockquote>
<br />
<br />
Als de <a href="dog_1.au">hond</a> van huis is dansen de <a href="duck_1.au">eenden</a>
<br />
<br />
Er staat een <a href="donkey_1.au">ezel</a> in de gang<br />
<br />
<br />
Dit is de link naar een <a href="inleiding tot html.pdf">document</a> (relatieve link).<br />
<br />
<br />
<a href="http://simplythebest.net/sounds/other_formats/Sun_Audio/sound_effects_AU/animals_au.html">link naar een site met gratis dierengeluiden</a>
</blockquote>
</body>
</html>
<html>
<head>
<title>Voorbeeld van ankers in pagina's</title>
</head>
<body bgcolor="#AEB404">
<H1>Drie Tips</H1>
<strong><a href="#tip1">Tip1: raadpleeg het aanbod</a></strong><br />
<strong><a href="#tip2">Tip2: stel een actieplan op</a></strong><br />
<strong><a href="#tip3">Tip3: experimenteer</a></strong><br />
<p><strong><a name="tip1"></a>
Tip 1: raadpleeg het aanbod en oriënteer jezelf</strong><br /><br />
<blockquote>
<em>Voor je begint aan een module, stel jezelf de vraag wat wil ik hiermee kennen en kunnen.</em>
<br />
<br />
<IMG SRC="beeld.jpg" ALT="dit is een landschap" border="3">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet est nec nunc tempus pharetra.
Donec convallis tristique leo, nec aliquam nulla tempus a. Ut sodales arcu ut arcu convallis adipiscing.
Donec at nunc eget augue sagittis malesuada vel sit amet tortor. Maecenas tempor semper risus vitae imperdiet.
Sed faucibus, leo quis tempus fermentum, arcu diam blandit libero, ut congue augue lectus id ante.</p>
<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aliquam enim lacus, dapibus sit amet ullamcorper ut, varius nec urna. Sed interdum, dolor non blandit aliquam,
libero nibh tincidunt nibh, vel fermentum eros tellus ac enim. Nunc at nulla sapien. Mauris eu orci leo, quis fringilla orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam, massa tristique pretium sollicitudin,</p>
<p>purus diam sollicitudin quam, eget pretium est nisl eget nisl. Praesent eleifend ultrices turpis,
in ullamcorper odio tempor ac. Morbi sollicitudin molestie tellus sit amet tincidunt.
Aliquam vel tellus non turpis tincidunt aliquam non vitae arcu. Morbi leo metus, sagittis non tincidunt et,
malesuada sit amet lectus. Suspendisse potenti.</p>
<p>Nam sed imperdiet magna. Aenean blandit vestibulum luctus. Sed et sem vitae enim adipiscing consequat.
Maecenas est turpis, aliquam vitae blandit tempor, auctor in elit. Nulla at ligula libero. Curabitur luctus,
ligula eget auctor rhoncus, elit quam laoreet arcu, ac lacinia ligula sapien et ligula. Sed nulla ligula, accumsan
ut tempor ut, volutpat at sem. Cras mollis sem quis nulla tristique tempus tincidunt non lectus. Suspendisse potenti.
<p> Morbi lobortis varius dui nec dignissim. Mauris nec enim in odio tempus semper. Sed et pulvinar erat.
Vestibulum euismod lorem quis felis aliquam non vestibulum dui aliquet. In fringilla tempus aliquet.
Morbi ultricies lobortis ligula, at posuere orci mollis vel. Nulla gravida commodo odio, in bibendum tortor ullamcorper feugiat.
Ut sodales congue sollicitudin. Integer faucibus vulputate tortor ut volutpat. Aenean dapibus iaculis auctor.
Nullam volutpat tempus lorem quis rhoncus. Fusce cursus dolor quis risus cursus in scelerisque ante pulvinar.
Quisque augue enim, pulvinar luctus imperdiet a, ullamcorper sit amet erat. Phasellus ultricies, elit sit amet
cursus tincidunt, metus lectus vehicula leo, facilisis pellentesque diam nibh nec nibh. Mauris auctor est quis
sapien porttitor eu dapibus justo molestie. Duis eget tellus urna, at gravida odio. Morbi tortor est, ultricies
quis malesuada non, consequat vel ligula.
</p>
</blockquote>
<br />
<br />
<p>
<strong><a name="tip2"></a>
Tip 2: stel een actieplan op</strong><br />
<blockquote>
<em>Blablabla en dit en dat.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet est nec nunc tempus pharetra.
Donec convallis tristique leo, nec aliquam nulla tempus a. Ut sodales arcu ut arcu convallis adipiscing.
Donec at nunc eget augue sagittis malesuada vel sit amet tortor. Maecenas tempor semper risus vitae imperdiet.
Sed faucibus, leo quis tempus fermentum, arcu diam blandit libero, ut congue augue lectus id ante.</p>
<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aliquam enim lacus, dapibus sit amet ullamcorper ut, varius nec urna. Sed interdum, dolor non blandit aliquam,
libero nibh tincidunt nibh, vel fermentum eros tellus ac enim. Nunc at nulla sapien. Mauris eu orci leo, quis fringilla orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam, massa tristique pretium sollicitudin,</p>
<p>purus diam sollicitudin quam, eget pretium est nisl eget nisl. Praesent eleifend ultrices turpis,
in ullamcorper odio tempor ac. Morbi sollicitudin molestie tellus sit amet tincidunt.
Aliquam vel tellus non turpis tincidunt aliquam non vitae arcu. Morbi leo metus, sagittis non tincidunt et,
malesuada sit amet lectus. Suspendisse potenti.</p>
<p>Nam sed imperdiet magna. Aenean blandit vestibulum luctus. Sed et sem vitae enim adipiscing consequat.
Maecenas est turpis, aliquam vitae blandit tempor, auctor in elit. Nulla at ligula libero. Curabitur luctus,
ligula eget auctor rhoncus, elit quam laoreet arcu, ac lacinia ligula sapien et ligula. Sed nulla ligula, accumsan
ut tempor ut, volutpat at sem. Cras mollis sem quis nulla tristique tempus tincidunt non lectus. Suspendisse potenti.
<p> Morbi lobortis varius dui nec dignissim. Mauris nec enim in odio tempus semper. Sed et pulvinar erat.
Vestibulum euismod lorem quis felis aliquam non vestibulum dui aliquet. In fringilla tempus aliquet.
Morbi ultricies lobortis ligula, at posuere orci mollis vel. Nulla gravida commodo odio, in bibendum tortor ullamcorper feugiat.
Ut sodales congue sollicitudin. Integer faucibus vulputate tortor ut volutpat. Aenean dapibus iaculis auctor.
Nullam volutpat tempus lorem quis rhoncus. Fusce cursus dolor quis risus cursus in scelerisque ante pulvinar.
Quisque augue enim, pulvinar luctus imperdiet a, ullamcorper sit amet erat. Phasellus ultricies, elit sit amet
cursus tincidunt, metus lectus vehicula leo, facilisis pellentesque diam nibh nec nibh. Mauris auctor est quis
sapien porttitor eu dapibus justo molestie. Duis eget tellus urna, at gravida odio. Morbi tortor est, ultricies
quis malesuada non, consequat vel ligula.
</p>
</blockquote>
<br />
<br />
<p>
<strong><a name="tip3"></a>
Tip 3: experimenteer gerust eens!</strong><br />
<blockquote>
<em>Durf met de nieuwsgierigheid van een kind nieuwe dingen ontdekken.</em>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris imperdiet est nec nunc tempus pharetra.
Donec convallis tristique leo, nec aliquam nulla tempus a. Ut sodales arcu ut arcu convallis adipiscing.
Donec at nunc eget augue sagittis malesuada vel sit amet tortor. Maecenas tempor semper risus vitae imperdiet.
Sed faucibus, leo quis tempus fermentum, arcu diam blandit libero, ut congue augue lectus id ante.</p>
<p> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aliquam enim lacus, dapibus sit amet ullamcorper ut, varius nec urna. Sed interdum, dolor non blandit aliquam,
libero nibh tincidunt nibh, vel fermentum eros tellus ac enim. Nunc at nulla sapien. Mauris eu orci leo, quis fringilla orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquam, massa tristique pretium sollicitudin,</p>
<p>purus diam sollicitudin quam, eget pretium est nisl eget nisl. Praesent eleifend ultrices turpis,
in ullamcorper odio tempor ac. Morbi sollicitudin molestie tellus sit amet tincidunt.
Aliquam vel tellus non turpis tincidunt aliquam non vitae arcu. Morbi leo metus, sagittis non tincidunt et,
malesuada sit amet lectus. Suspendisse potenti.</p>
<p>Nam sed imperdiet magna. Aenean blandit vestibulum luctus. Sed et sem vitae enim adipiscing consequat.
Maecenas est turpis, aliquam vitae blandit tempor, auctor in elit. Nulla at ligula libero. Curabitur luctus,
ligula eget auctor rhoncus, elit quam laoreet arcu, ac lacinia ligula sapien et ligula. Sed nulla ligula, accumsan
ut tempor ut, volutpat at sem. Cras mollis sem quis nulla tristique tempus tincidunt non lectus. Suspendisse potenti.
<p> Morbi lobortis varius dui nec dignissim. Mauris nec enim in odio tempus semper. Sed et pulvinar erat.
Vestibulum euismod lorem quis felis aliquam non vestibulum dui aliquet. In fringilla tempus aliquet.
Morbi ultricies lobortis ligula, at posuere orci mollis vel. Nulla gravida commodo odio, in bibendum tortor ullamcorper feugiat.
Ut sodales congue sollicitudin. Integer faucibus vulputate tortor ut volutpat. Aenean dapibus iaculis auctor.
Nullam volutpat tempus lorem quis rhoncus. Fusce cursus dolor quis risus cursus in scelerisque ante pulvinar.
Quisque augue enim, pulvinar luctus imperdiet a, ullamcorper sit amet erat. Phasellus ultricies, elit sit amet
cursus tincidunt, metus lectus vehicula leo, facilisis pellentesque diam nibh nec nibh. Mauris auctor est quis
sapien porttitor eu dapibus justo molestie. Duis eget tellus urna, at gravida odio. Morbi tortor est, ultricies
quis malesuada non, consequat vel ligula.
</p>
</blockquote>
</body>
</html>
Links in XHTML:
http://www.youtube.com/watch?v=01rd3zmSm_Y
E-maillink in XHTML:
http://www.youtube.com/watch?v=t_L6GPushfw
Theorie: zie boek
van pagina 153 tot en met pagina 158
Een eerste voorbeeld: kopieer deze tekst in kladblok en test deze in je browser:
<html>
<head>
<title>
dit is een opsomming
</title>
</head>
<body>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>contact</li>
</ul>
<br />
<!-- zoals je ziet heb je hier twee opsommingen: één zonder linken (bovenaan) en één mét linken (onderaan) //-->
<br />
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about me</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
<ul>
<li><a href="#">dit is een onderverdeling onder contact</a></li>
<li><a href="#">om naar een subpagina te gaan</a></li>
<li><a href="#">op deze manier maak je eigenlijk een pagina-menu</a></li>
<li><a href="#">dit is een het submenu van "contact"</a></li>
</lu>
</lu>
<!-- de opdracht: maak nu van elke link een verwijzing naar een pagina, maak deze pagina en creëer zo je 'mini-site' //-->
</body>
</html>
Een filmpje over lijsten:
http://www.youtube.com/watch?v=QLXFwzHvxak
TABELLEN
Elke tabel heeft een begin- <table> en een eindtag </table>.
Tussen deze tags bevinden zich de tabelrijen (horizontaal) <tr> en </tr>.
Elke rij op zich bevat dan weer cellen: <td>inhoud</td>.
Als resultaat geeft dat de volgende code:
<table border="1" width="100%">
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
</table>
Met als resultaat in je browser: kleef de bovenstaande code even in een nieuwe pagina en test deze uit in je browser (vergeet de html-, header- en body-tags niet toe te voegen!)
Zowel de cellen als de tabel zelf kunnen attributen hebben zoals een kleur, een achtergrondbeeld etc. (zoek zelf nog wat extra attributen op op het web)
Zie: "tabel mét kleur én achtergrond" bij de voorbeelden.
Zoals je al snel zal merken, ben je beperkt tot het rasterpatroon van zo'n tabel.
Een manier om dit te doorbreken is gebruik maken van de attributen: 'colspan' en 'rowspan'.
Colspan overspant kolommen (dus horizontaal), zoveel kolommen als de waarde die je ingeeft achter het 'is-gelijk-aan'-teken,
<td colspan="2"> betekent dus dat er een cel wordt gecreëerd die twee kolommen overspant, <td colspan="3"> betekent dus dat er een cel wordt gecreëerd die drie kolommen overspant, en zo verder...
Rowspan werkt eigenlijk hetzelfde maar in de plaats van kolommen worden er rijen overspannen (dus verticaal).
Zie: "tabel met colspan en rowspan" bij de voorbeelden.
Bestudeer van deze voorbeelden de code grondig, test ze uit en experimenteer er even mee...
Bekijk eveneens (klik op de linken naar...) de bijgevoegde filmpjes op deze pagina.
Maak dan de opdrachten onder 'oefeningen voor de leerlingen'.
Codevoorbeelden: plak de code in Kladblok en zorg ervoor dat de benodigde beelden zich in dezelfde map bevinden als de bestanden met de code (zoek online eventueel een mooi achtergrondbeeld indien je dit nodig hebt).
<html>
<head>
<title>dit is een eerste tabel</title>
</head>
<body>
<table border="2">
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
<tr><td>inhoud</td><td>inhoud</td><td>inhoud</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>een tabel</title>
<!-- zoek nu zelf op het internet zelf zo veel mogelijk attributen voor de tag: "table", "tr" en "td" op en probeer ze uit! //-->
</head>
<body>
<table border="1" cellpadding="10" width="600" height="600" background="appel.gif">
<tr><td bgcolor="lime">Appelen</td><td>44%</td></tr>
<tr><td bgcolor="yellow" width="50">Bananen</td><td>23%</td></tr>
<tr><td bgcolor="red">Kersen</td><td>23%</td></tr>
<tr><td bgcolor="orange">Appelsienen</td><td>23%</td></tr>
</table>
</body>
</html>
<html>
<head>
<title>dit is een tabel met colspan en rowspan</title>
</head>
<body>
<table height="600" width="600" border="3">
<tr><td bgcolor="red">een</td><td bgcolor="green">een</td><td bgcolor="yellow">een</td><td>een</td></tr>
<tr><td colspan="2" bgcolor="red">een</td><td bgcolor="green">een</td><td bgcolor="yellow">een</td></tr>
<tr><td bgcolor="red">een</td><td bgcolor="yellow">een</td><td rowspan="2" bgcolor="green">een</td><td>een</td></tr>
<tr><td>een</td><td>een</td><td>een</td></tr>
</table>
</body>
</html>
Opdrachten voor de leerlingen: Maak de volgende voorbeelden zo exact mogelijk na:
Méér theorie over tabellen zie boek vanaf pagina 158 tot en met pagina 164.
Filmpjes over tabellen:
http://www.youtube.com/watch?v=bhcnHsrP42U
http://www.youtube.com/watch?v=08sa1JEc9-U
http://www.youtube.com/watch?v=rdFJmCVnDGQ
Filmpje over tabellen, meer specifiek: colspan
http://www.youtube.com/watch?v=Zv4nn8ikGoc
Oefeningen voor gevorderden: maak onderstaande voorbeelden exact na in XHTML, snij de foto's uit in Photoshop en hergebruik deze.
Maak de tekst op in XHTML, plaats de elementen in XHTML, werk het totaal netjes af in XHTML (code).
Het weergeven van speciale tekens kan in XHTML wel eens problemen opleveren. Bijvoorbeeld wanneer we een 'kleiner dan'-teken op het scherm willen laten verschijnen lukt dit niet omdat XHTML dit interpreteert als het begin van een tag. Om dit probleem te omzeilen werden een aantal speciale codes (de zogenaamde "karakterentiteiten") gedefiniëerd. Deze codes beginnen steeds met een ampersand (&) en eindigen met een kommapunt (;). Een aantal belangrijke entiteitsnamen vind je in de onderstaande opsomming: links staat het teken zoals je het in de browser ziet, rechts staat de tekens zoals je ze in de code intypt:
| > | is gelijk aan | > |
| < | is gelijk aan | < |
| & | is gelijk aan | & |
| " | is gelijk aan | " |
| © | is gelijk aan | © |
| ® | is gelijk aan | ® |
| ç | is gelijk aan | ç |
| ê | is gelijk aan | ê |
| ë | is gelijk aan | ë |
| é | is gelijk aan | é |
| è | is gelijk aan | è |
| ï | is gelijk aan | ï |
| î | is gelijk aan | î |
Een voorbeeld: "L'élève chante bien."
En dit is de code: L'élève chante bien.
Een link naar nog meer speciale tekens...
Voeg kleur toe aan je html-pagina...
Oefeningen: maak onderstaande voorbeelden zo exact mogelijk na in XHTML-code
De ideale én meest gebruikte beeldtypes voor het web zijn Jpeg, Gif en PNG.
Waarom? Omdat deze formaten erg licht zijn (qua grootte (Megabyte, Kilobyte,...)) en ontzettend snel laden (in een webpagina) op het web.
Jpeg is het ideale beeldformaat voor foto's die vele grijs- of fijne kleurschakeringen vertonen die je ook zo 'online' wil behouden.
Gif heeft beperktere kleurschakeringen en is ideaal voor gestileerde tekeningen met weinig kleuren zoals logo's.
Gif kan transparantie weergeven wat Jpeg absoluut niet kan, dus je kan je tekening gedeeltelijk doorschijnend publiceren op het web.
PNG-24 heeft zowel de voordelen van Jpeg als de voordelen van GIF.
PNG-24 kan dus zowel al die fijne grijs- of kleurschakeringen weergeven als transparantie aan (mét zachte randen!).
Maar heeft als nadeel dat het iets zwaarder (qua geheugen) is dan Jpeg en Gif (dus een PNG-24 bestand heeft een langere laadtijd of een betere (breedband) verbinding nodig dan Jpeg en Gif).
Hoe bewaar ik nu een beeld als Jpeg, Gif of PNG-24? Open je beeld in Photoshop, optimaliseer het en sla het op voor "Web and devices" (Opslaan voor web en apparaten) (in het hoofdmenu onder "Bestand" (File). In het communicatievenster dat zich nu opent kan je rechtsbovenaan in het uitklapmenuutje het bestandstype kiezen, de kwaliteit van het beeld instellen (hoog, normaal, laag,...) in relatie met de laadtijd/ het geheugen dat je beeld inneemt en dat zie je linksonder van het beeld in hetzelfde communicatievenster. Klik op 'Opslaan' en selecteer 'aangepaste instellingen' en je beeld is klaar voor 'online' gebruik.
Een webontwerp waar je verschillende beeldjes uit nodig hebt kan je in één keer 'slicen' in Photoshop.
Hoe? Zie de linken naar de filmpjes (tutorials) onderaan op deze pagina.
Theorie over afbeeldingen zie boek hoofdstuk 2
Beeldtypes voor het web
http://www.youtube.com/watch?v=VCrPUzXEVz8
Beelden veranderen van maat in xhtml
http://www.youtube.com/watch?v=bcO7-5zYY-4
Beelden opslaan voor het web in Photoshop (Gif, Jpeg en PNG-24)
http://www.youtube.com/watch?v=Ut_F7iGlze8
Beelden 'Slicen' in Photoshop
http://www.youtube.com/watch?v=PoNFOSmOgko
Formulieren worden voornamelijk gebruikt in combinatie met programmatie zoals PHP of dot.NET om interactieve, dynamische websites te maken. In combinatie met programmatie en databases dus.
Maar je kan in XHTML al vrij eenvoudig een invulformulier maken dat de ingevulde gegevens naar een e-mailadres zend zonder een streepje PHP of dot.NET code te gebruiken.
Een codevoorbeeld:
<html>
<head>
<title>invulformulier</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="mailto:jouw.naam@cvoantwerpen.be">
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Voornaam</td>
<td><input type="text" name="voornaam" id="voornaam" /></td>
</tr>
<tr>
<td>Naam</td>
<td><input type="text" name="naam" id="naam" /></td>
</tr>
<tr>
<td>Adres</td>
<td><input type="text" name="adres" id="adres" /></td>
</tr>
<tr>
<td>Postcode</td>
<td><input type="text" name="postcode" id="postcode" /></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Telefoon</td>
<td><input type="text" name="telefoon" id="telefoon" /></td>
</tr>
<tr>
<td>Geslacht</td>
<td><p>
<label>
<input type="radio" name="geslacht" value="vrouw" id="geslacht_0" />
Vrouw</label>
<br />
<label>
<input type="radio" name="geslacht" value="man" id="geslacht_1" />
Man</label>
<br />
</p></td>
</tr>
<tr>
<td>Land</td>
<td><select name="land" id="land">
<option value="belgie">België</option>
<option value="nederland">Nederland</option>
<option value="frankrijk">Frankrijk</option>
<option value="duitsland">Duitsland</option>
<option value="engelland">Engelland</option>
</select></td>
</tr>
<tr>
<td>Plaats hier je opmerkingen:</td>
<td><textarea name="commentaar" id="commentaar" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="Formulier verzenden" /> <input type="reset" name="reset" id="reset" value="Annuleren" /></td>
</tr>
</table>
</form>
</body>
</html>
Een formulier staat altijd tussen twee 'form'-tags, in de begin-tag plaats je bij het attribuut: 'action' 'mailto:' plus het juiste mailadres waarnaar je je formulier wil verzenden.
Tussen de twee form tags plaats je de tekst en invulvelden, eventueel keuzerondjes en uitklapmenuutjes best in een tabel, gewoon opdat deze elementen mooi zouden lijnen en het geheel ethetisch gezien geen rommeltje wordt (vandaar dus de tabel).
- Een invulveld wordt altijd zo gecodeerd:
<input type="text" name="naam" id="naam" />
Waarbij je de naam het id zelf vrij mag kiezen.
- Een tekstruimte, dus om meerdere lijnen tekst in te typen, ziet er als volgt uit in code:
<textarea name="commentaar" id="commentaar" cols="45" rows="5"></textarea>
Waarbij 'cols' de breedte aanduid van de 'textarea' en 'rows' de hoogte van het tekstveld.
- Selectierondjes zien er als het volgt uit in code:
<label><input type="radio" name="geslacht" value="vrouw" id="geslacht_0" />Vrouw</label><br />
<label><input type="radio" name="geslacht" value="man" id="geslacht_1" />Man</label>
Beide selectierondjes hebben dezelfde 'name' zodat je er maar één van de twee kan selecteren.
- Een uitklapmenuutje in code:
<select name="land" id="land">
<option value="belgie">België</option>
<option value="nederland">Nederland</option>
<option value="frankrijk">Frankrijk</option>
<option value="duitsland">Duitsland</option>
<option value="engelland">Engelland</option>
</select>
Waarbij elke 'option value' een selecteerbare waarde aangeeft in het uitklapmenu en 'select' het begin en het einde van het uitklapmenu aanduid.
- De verzendknop in code:
<input type="submit" name="submit" id="submit" value="Formulier verzenden" />
Let op! Dat het type op 'submit' staat (en de name best ook), anders zal je formulier niet verstuurt worden!
- De annuleerknop in code:
<input type="reset" name="reset" id="reset" value="Annuleren" />
Let op! Dat het type op 'reset' staat (en de name best ook), anders zullen de velden van je formulier niet leeggemaakt worden!
Theorie over formulieren vind je in het boek vanaf pagina 164 tot en met 171.
Filmpjes over formulieren (tutorials):
http://www.youtube.com/watch?v=guBd82TM8Vs
http://www.youtube.com/watch?v=JXlIRdIhMyI
http://www.youtube.com/watch?v=FjnjGwZnPOI
http://www.youtube.com/watch?v=v2HjsFllYk8
Filmpje over uitklaplijsten in een formulier (tutorial):
http://www.youtube.com/watch?v=lkAJGhpnPLw