Module III - HTML. Stefan Flipkens - Cursus: Internet - Intranet ( )

Transcriptie

1 Module III - HTML HTML een wijdverspreide standaard voor het beschikbaar stellen van informatie. In deze module vind u meer informatie over de opbouw van een HTML tag, de basisstructuur van een HTML pagina en uitleg over het gebruik van de meest gebruikte HTML tags. III 1

2 1. Inleiding 1.1. Wat is HTML? De afkorting HTML staat voor Hyper-Text Markup Language. HTML is een set van logische codes, ook wel tags genoemd die het uitzicht van de gegevens in een webpagina beschrijven. Deze tags worden omsloten door het kleiner dan (<) en groter dan (<) teken, ze worden ook elementen genoemd De opbouw van een HTML tag Figuur 7 geeft weer hoe een HTML tag is opgebouwd. Open Tag Attribute Waarde Sluit Tag <font color="red">dit is een rode zin.</font> De tekst waarop de tag van toepassing is. Figuur 7: De opbouw van een HTML tag Het eerste woord na het kleiner dan teken is de naam van de tag. Deze naam vertelt de browser al wat er moet gebeuren met de tekst na de tag, of tussen de openen sluit tags. De meeste HTML tags hebben een open en een sluit tag. Het verschil tussen de open en de sluit tags is de slash (/) na het kleiner dan teken van de sluit tag. De tags die zowel een open als sluit tag hebben zijn van toepassing op de tekst die ertussen staat. vb. De HTML tag om een tekst vet te maken is B. Willen we de zin Deze zin is vetgedrukt. in het vet plaatsen, dan doen we dit op de volgende manier: <b>deze zin is vetgedrukt.</b> Code Snippit 1 De woorden die volgen na de tag en die zich nog voor het groter dan (>) teken bevinden worden de attributen (eigenschappen) genoemd. Attributen worden niet meer herhaald in de sluittag. Verwarrend? Attributen zijn een andere manier om de eigenschappen van een tag te beschrijven. Voorbeeld: Een lettertype (font) kan verschillende attributen (eigenschappen) hebben zoals: o De naam van het lettertype (face) o de grootte van het lettertype (size) o de kleur van het lettertype (color) o Attributen worden rechts van de tag geplaatst, gescheiden door een spatie en gevolgd door een gelijk aan (=) teken. De waarde van het attribuut die volgt na het gelijk aan teken wordt tussen dubbele quotes (") geplaatst. De HTML code in Code Snippit 2 zorgt ervoor dat de tekst Dit is een rode zin. in het rood gezet wordt met als lettertype Tahoma. III 2

3 <font face="tahoma" color="red">dit is een rode zin.</font> Code Snippit De basisstructuur van een HTML pagina HTML pagina's hebben een basisstructuur die voor alle pagina's hetzelfde is. Deze basisstructuur bestaat uit de <HTML> </HTML> tags en de <BODY> </BODY> tags. Deze tags zijn noodzakelijk als we een HTML pagina willen maken. De <HTML> </HTML> tags vertellen de browser dat het bestand dat we openen een HTML pagina is, en omvatten de overige HTML code in het bestand. De <BODY> </BODY> tags bevatten de informatie die zichtbaar is in de web browser en de HTML tags die deze informatie een zekere lay-out geven.... Code Snippit 3 Een ander belangrijke tag is de HEAD tag (<HEAD> </HEAD>). Deze tag bevat geen informatie die getoond wordt in de web browser, maar bevat andere tags die meer informatie verschaffen aan browsers of zoekmachines. De tags die kunnen voorkomen tussen de <HEAD> </HEAD> tags zijn: <TITLE> </TITLE>: Bevat de titel van de HTML pagina, deze wordt meestal in de titelbalk van een browser getoond. Deze titel wordt ook gebruikt wanneer je een webpagina toevoegt aan je favorieten. <LINK>: Bevat in de attributen een verwijzing naar een andere HTML pagina, een pagina met scripts, een pagina met opmaak informatie, een XML bestand,!!! <LINK> heeft geen sluit tag! <META>: Bevat informatie zoals sleutelwoorden en zoektermen die voorkomen in de HTTP headers gebruikt door zoekmachines, informatie over de toepassing waarin de webpagina gemaakt werd,!!! <META> heeft geen sluit tag! <SCRIPT> </SCRIPT>: Bevat client sided script code zoals JavaScript of VBScript. <STYLE> </STYLE>: Bevat informatie gebruikt door cascading style sheets. <title>de basisstructuur</title> <link> <meta> <script language="javascript">... </script> <style> </style>... Code Snippit 4 III 3

4 1.4. Enkele voorbeelden Voorbeeld 1 [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 01\example01.htm The source code of this page contains the HTML tags that are necessary to create an HTML page. Code Snippit 5 Figuur 8: Code Snippit 5 bekeken in Internet Explorer Voorbeeld 2 [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 02\example02.htm <title>module III HTML: Example 2</title> An example showing the use of the most basic HTML tags. Code Snippit 6 Figuur 9: Code Snippit 6 bekeken in Internet Explorer. III 4

5 2. De meest voorkomend tags 2.1. Algemeen Harde en Zachte regeleinden In tekstverwerkers zoals Microsoft Word, Corel WordPerfect of OpenOffice kunnen we zowel Harde als Zachte regeleindes plaatsen. Na hard regeleinde wordt de alinea gestopt en een nieuwe alinea begonnen. Door het plaatsen van een zacht regeleinde geven we aan dat we een nieuwe regel winnen beginnen binnen de alinea. Bij het schrijven van HTML code voor webpagina's beschikken we ook over de mogelijkheid om zowel harde als zachte regeleindes te plaatsen. De tekst die behoort tot één alinea plaatsen we tussen de <P> </P> tags. Op de plaats waar we een zacht regeleinde willen, plaatsen we de <BR> tag. [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 03\example03.htm <title>module III - HTML: General: Example 3</title> <p>computervirus Sasser infects computers over the world</p> <p>a new version of the internetvirus Sasser is bugging computers all over the world.<br> Microsoft, an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system Microsoft Windows.</p> Code Snippit 7 Figuur 10: Code Snippit 7 bekeken in Internet Explorer Vet, Cursief en Onderlijnen Tekst vet, cursief weergeven of onderlijnen kunnen we door de tags voor vet (<B> </B>), cursief (<I> </I>) of onderlijnen (<U> </U>) te plaatsen rond de tekst waarop we de opmaak willen toepassen. De HTML code in Code Snippit 8 geeft het gebruik van deze tags aan. III 5

6 [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 04\example04.htm <title>module III - HTML: General: Example 4</title> <p><u>computervirus Sasser infects computers over the world</u></p> <p>a new version of the internetvirus <b>sasser</b> is bugging computers all over the world.<br> <i>microsoft</i>, an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system <i>microsoft Windows</i>.</p> Code Snippit 8 Figuur 11: Code Snippit 8 bekeken in Internet Explorer Lettertype, tekstgrootte en kleur De eigenschappen van het lettertype zoals het type, de grootte en de kleur kunnen we aanpassen met behulp van de <FONT> </FONT> tags. De <FONT> </FONT> tags laten toe om meerdere eigenschappen van het lettertype aan te passen, dus deze heeft een aantal attributen. FACE: om het lettertype te definiëren dat we willen gebruiken. SIZE: om aan te geven hoe groot de tekst moet zijn. COLOR: om de kleur van de tekst te bepalen. <font face="tahoma">sample text</font> Code Snippit 9 Code Snippit 9 laat zien hoe we het lettertype van de tekst Sample text wijzigen naar Tahoma. Opmerking: Het gekozen lettertype moet wel aanwezig zijn op de client computer, de computer van de persoon die onze webpagina bekijkt. Als het opgegeven lettertype niet aanwezig is, dan wordt door veel web browser standaard het lettertype Times New Roman gebruikt. Wanneer we voor onze webpagina, dus andere lettertypes gebruiken dan alom verspreide lettertypes zoals Arial, Courier, dan kan het zijn dat bij sommige clients onze webpagina er heel anders uitziet dan we gehoopt hadden. Om hieraan tegemoet te komen kunnen we in het FACE attribuut van de <FONT> </FONT> tags meerdere lettertypes gescheiden door een komma (,) meegeven, zoals in Code Snippit 10. III 6

7 <font face="arial, Tahoma, Courier New">Sample text</font> Code Snippit 10 De web browser zal eerst proberen om de tekst weer te geven in het lettertype dat het eerst voorkomt (Arial in ons voorbeeld). Is dit lettertype niet aanwezig op de client computer, dan probeert de web browser het volgende lettertype en zo verder. [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 05\example05.htm <title>module III - HTML: General: Example 5</title> <font face="tahoma, Arial"> <p><u>computervirus Sasser infects computers over the world</u></p> <p>a new version of the internetvirus <b>sasser</b> is bugging computers all over the world.<br> <i>microsoft</i>, an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system <i>microsoft Windows</i>.</p> </font> Code Snippit 11 Figuur 12: Code Snippit 11 bekeken in Internet Explorer. De broncode (Code Snippit 11) van ons document begint al complexer te worden door al de tags die we tot nu toe gebruikt hebben. De <FONT> </FONT> omvatten alle tekst, waardoor het gekozen lettertype ook van toepassing is op de gehele webpagina. Opmerking: Wanneer we verschillende tags door elkaar gebruiken moeten we erop letten dat ze elkaar niet overlappen. Code Snippit 12 en Code Snippit 13 zijn voorbeelden van hoe het moet, en Code Snippit 14 is een voorbeeld van situaties die we best kunnen vermijden omdat ze problemen opleveren in sommige browsers. <font face="arial"><p>sample text</p></font> Code Snippit 12 <p><font face="arial">sample text</font></p> Code Snippit 13 <font face="arial"><p>sample text</font></p> Code Snippit 14 III 7

8 De grootte van de tekst kan gewijzigd worden met behulp van het SIZE attribuut van de <FONT> </FONT> tag. Code Snippit 15 is hier een voorbeeld van. [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 06\example06.htm <title>module III - HTML: General: Example 6</title> <font face="tahoma, Arial"> <p><u><font size="5">computervirus Sasser infects computers over the world</font></u></p> <p>a new version of the internetvirus <b>sasser</b> is bugging computers all over the world.<br> <i>microsoft</i>, an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system <i>microsoft Windows</i>.</p> </font> Code Snippit 15 Figuur 13: Code Snippit 15 bekeken in Internet Explorer. Het SIZE attribuut kan een waarde hebben van 1 tot en met 7 en wordt dus niet uitgedrukt in punten zoals bij een tekstverwerker. 1 is hierbij de kleinste grootte en 7 de grootste. Willen we de grootte van de tekst toch opgeven in punten, dan moeten we gebruik maken van CSS 1, hierover vind je meer verder in deze cursus. Met het COLOR attribuut kunnen we de kleur van de tekst aanpassen. Dit kunnen we doen op twee manieren. Ofwel gebruiken we een kleurcode die overeenkomt met de naam van de kleur zoals in Code Snippit 16, ofwel geven we een hexadecimale code mee die de RGB waarde (zie Code Snippit 17) van de gekozen kleur voorstelt. <font color="blue"><p>sample text</p></font> Code Snippit 16 <p><font color="#0000ff">sample text</font></p> Code Snippit 17 Een lijst van de kleurcodes die we kunnen gebruiken vind je in 1. Kleur Codes van Bijlage B. We kunnen dan ons voorbeeld afwerken zoals in Code Snippit 18. Met de Hexadecimale RGB waarde kunnen we natuurlijk meer verschillende kleurwaardes gebruiken, dan met de kleurcodes die overeenkomen met de naam van een kleur. 1 CSS: Cascading Style Sheets III 8

9 [cd-rom]:\examples\module III HTML\2.1 Algemeen\Example 07\example07.htm <title>module III - HTML: General: Example 6</title> <font face="tahoma, Arial"> <p><u><font size="5">computervirus Sasser infects computers over the world</font></u></p> <p>a new version of the internetvirus <b>sasser</b> is bugging computers all over the world.<br> <i>microsoft</i>, an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system <i>microsoft Windows</i>.</p> </font> Code Snippit 18 Figuur 14: Code Snippit 18 bekeken in Internet Explorer. III 9

10 2.2. Headers De webpagina uit Figuur 1 kunnen we perfect namaken met de tags die tot nu toe beschreven staan in deze cursus. Het volstaat om de <FONT> </FONT> tag te gebruiken om de grootte van het lettertype aan te passen en deze te combineren met de <B> </B> tag om de tekst vet te maken. De <P> </P> tag kan dan gebruikt worden voor het maken van de paragrafen. Figuur 15: toont hoe we deze tags kunnen gebruiken voor de opmaak van de eerste titel (Setting up an Internet Client: ). <p><font size="7"><b>setting up an Internet Client: The Web Browser</b></font></p> Code Snippit 19 In HTML is echter een beter oplossing voorzien. Voor de opmaak van titels kunnen we gebruik maken van één van de zes header tags (<H1> </H1> tot <H6> </H6>). Waar <H1> </H1> het hoogste niveau (dus de grootste titel) aangeeft en <H6> </H6> het laagste niveau. Wanneer we de herschreven broncode gaan bekijken (zie Code Snippit 20) dan merken we op dat de <H1> </H1> tag volstaat om <P><FONT SIZE="7"><B> </B></FONT></P> volledig te vervangen. [cd-rom]:\examples\module III HTML\2.2 Headers\Example 01\example01.htm <title>module III - HTML: Headers: Example 01</title> <h1>setting up an Internet Client: The Web Browser</h1> <h2>what is a Web Browser?</h2> <p>simply started, a web browser is a piece of client software that interprets Hyper-Text-Markup Language (HTML) and displays or renders the code to the screen. Browsers not only display HTML but also allow the user to navigate a single page, a whole site, or the entirety of the World Wide Web. The user can also use a browser to download files and, if they have the proper plug-in, view interactive content.</p> <h3>popular Browsers</h3> <p>there are a number of different browsers available but, at the moment, only two of them are in widespread use; Microsoft's Internet Explorer and AOL's Netscape Navigator. Both are currently at version 6 and the differences between them are much less marked than would have been the case in versions past. Internet Explorer is currently the most popular III 10

11 browser based on units in use.</p> <h3>installing a Browser</h3> <p>a browser is installed much like any other piece of software. An executable Setup file, commonly called a Setup.exe, is run, the user is prompted to input a location on their hard drive in which to install the browser, and the software is installed. The user could have installed it from a CD ROM, an executable that they copied to their hard drive, or, if they already have a previous version of the browser installed, an automated installation from a browser update site. In the case of Internet Explorer the browser could be installed during an Operating System installation. In this case the user could have installed the browser and not even be aware of it.</p> <h3>view Pages</h3> <p>browsers can view files without being connected to the internet. Select File/Open (for IE) or File/Open Page (for Navigator) and navigate your way to any file on the hard drive that contains the file extension.htm,.html,.asp,.gif,.jpg (or any other file extension recognized by the browser) and the browser will display it.</p> <h3>default Page</h3> <p>all browsers are configured to display a Default Page upon initialization. Internet Explorer, for example, will take the user to Microsoft s MSN home page by default if you are connected to the Internet. The user can change this by going into their respective browser s preferences and changing the address that appears in the Home Page or Default Page field. We will discuss the particulars of addresses later in the manual.</p> Code Snippit 20 Figuur 16: Code Snippit 20 bekeken in Internet Explorer. III 11

12 2.3. Links Zoals eerder in deze cursus vermeld is een webpagina een hyper media en kunnen we zelf bepalen in welke volgorde we de verschillende pagina's met informatie gaan bekijken. Met dit gegeven komen we tot waarschijnlijk één van de bekendste eigenschappen van HTML, het gebruik van links. We maken een link met behulp van de <A> </A> tags (anchor) en daarom wordt een link soms ook een anchor genoemd. De tekst tussen de <A> en </A> tag is het gedeelte dat getoond wordt in een browser en waarop we kunnen klikken (zie Figuur 17). Het doel waarnaar de link verwijst wordt meegegeven met behulp van het HREF attribuut. We kunnen links onderverdelen in drie grote soorten: Externe links: De waarschijnlijk bekendste en meest gebruikte soort. Dit zijn links die verwijzen naar een andere website of adres. Local links: Dit zijn links die verwijzen naar een andere pagina binnen de website. Interne links: Zijn links die verwijzen naar een positie binnen een pagina Externe Links Externe links verwijzen naar een andere website, een specifieke pagina binnen een andere website of een adres (zie ). [cd-rom]:\examples\module III HTML\2.3 Links\Example 01\example01.htm <title>module III - HTML: Links: Example 1</title> <font face="tahoma, Arial"> <p><u><font size="5" color="blue">computervirus Sasser infects computers over the world</font></u></p> <p>a new version of the internetvirus <b>sasser</b> is bugging computers all over the world.<br> <i><a href=" an American software company allready warned two weeks ago for the new virus, which spreads via a vurnability in the operating system <i>microsoft Windows</i>.</p> </font> Code Snippit 21 Figuur 17: Het klikbare gedeelte van een link. III 12

13 Een link wordt standaard in het blauw en onderlijnd weergegeven. Wanneer we onze muiscursor erover bewegen, dan verandert deze in een handje (zie Figuur 17). Na het klikken op het woord Microsoft in ons voorbeeld wordt de website van Microsoft geladen. Figuur 18: De website van Microsoft wordt getoond na een klik op Microsoft in het artikel. Wanneer we onze pagina nu opnieuw gaan bekijken, merken we op dat het woord Microsoft in het donkerblauw wordt weergegeven (zie Figuur 19). De licht blauwe kleur geeft aan dat het gaat om een link die we nog niet bezocht hebben en de donkerblauwe kleur geeft aan dat het gaat om een link die we reeds bezocht hebben. Figuur 19: Een link die reeds bezocht is. De kleuren van een nieuwe link, een bezochte link, een actieve link en een link waarover bewogen wordt met de muiscursor kunnen we aanpassen. Dit wordt iets verder in de cursus uitgelegd Local Links Local links verwijzen naar een pagina binnen een website. Een goed voorbeeld hiervan zijn de intropagina's die bij veel websites worden gebruikt. Bij het laden van de website wordt eerst een intropagina getoond met een foto of een flash animatie. De bezoeker kan meestal wanneer hij de intropagina niet wil bekijken op een link klikken die hem omleid naar de hoofdpagina van de website. Op veel webpagina's wordt de beschikbare informatie opgedeeld in menupuntjes. Ieder menu item geeft dan toegang tot een bepaalde pagina van de website. Dit is een tweede voorbeeld van het gebruik van local links. Kort samengevat kunnen we iedere link binnen onze website die een verwijzing is naar een andere pagina, bestand of andere informatie binnen onze webpagina beschouwen als een local link. III 13

14 [cd-rom]:\examples\module III HTML\2.3 Links\Example 02\intro.htm <title>module III - HTML: Links: Example 2 - Intro</title> <font face="tahoma, Arial"> <h1>compusupplies</h1> <p><a href="main.htm">enter Main Site</a></p> </font> Code Snippit 22 Figuur 20: Het klikbare gedeelte van een link. [cd-rom]:\examples\module III HTML\2.3 Links\Example 02\main.htm <title>module III - HTML: Links: Example 2 - Main</title> <font face="tahoma, Arial"> <h2>welcome</h2> <p>... to our website.</p> <p>this is an example website for teaching purposes only.</p> </font> Code Snippit 23 Figuur 21: Het klikbare gedeelte van een link. III 14

15 Interne Links Interne links zijn veerwijzigingen naar een positie binnen dezelfde pagina. Het maken van een interne link is iets complexer dan het maken van externe of local links. We moeten hier immers niet alleen de link zelf definiëren, maar ook de locatie waarnaar de link verwijst. Het definiëren van deze locatie gebeurt ook met behulp van de <A> </A> tag, maar in plaats van het HREF attribuut gebruiken we het NAME attribuut. Interne links worden dikwijls gebruikt voor het maken van inhoudsopgaven. Figuur 22: Willen we vooraan in de webpagina die we gemaakt hebben als voorbeeld voor headers (zie Figuur 22) nog een inhoudsopgave voorzien met links naar de verschillende titels, dan kunnen we rond de eerste titel nog <A> </A> tags plaatsen zoals in Code Snippit 24. <a name="ch3"><h1>setting up an Internet Client: The Web Browser</h1></a> Code Snippit 24 Opmerking: De waarde ch3 van het NAME attribuut in Code Snippit 24 is een zelf gekozen naam waarnaar de link zal verwijzen. De link definiëren is vergelijkbaar met het definiëren van een externe of lokale link. Alleen verwijzen we zoals reeds vermeld in voorgaande opmerking naar de zelf gekozen naam in de waarde van het NAME attribuut. In het HREF attribuut van de link moet voor de zelfgekozen naam wel een cross (#) teken (zie Code Snippit 25) geplaatst worden. <a href="#ch3">setting up an Internet Client: The Web Browser</a> Code Snippit 25 Wanneer we dit nu toepassen op de broncode uit de oefening met de headers (zie Code Snippit 20) en we maken interne links aan voor al onze titels binnen de pagina, dan ziet de broncode eruit zoals in Code Snippit 26. [cd-rom]:\examples\module III HTML\2.3 Links\Example 03\example03.htm <title>module III - HTML: Links: Example 3</title> <a href="#ch3">setting up an Internet Client: The Web Browser</a><br> <a href="#ch3p1">what is a Web Browser?</a><br> <a href="#ch3p1sp1">popular Browsers</a><br> <a href="#ch3p1sp2">installing a Browser</a><br> <a href="#ch3p1sp3">view Pages</a><br> III 15

16 <a href="#ch3p1sp4">default Page</a><br> <a name="ch3"><h1>setting up an Internet Client: The Web Browser</h1></a> <a name="ch3p1"><h2>what is a Web Browser?</h2></a> <p>simply started, a web browser is a piece of client software that interprets Hyper-Text-Markup Language (HTML) and displays or renders the code to the screen. Browsers not only display HTML but also allow the user to navigate a single page, a whole site, or the entirety of the World Wide Web. The user can also use a browser to download files and, if they have the proper plug-in, view interactive content.</p> <a name="ch3p1sp1"><h3>popular Browsers</h3></a> <p>there are a number of different browsers available but, at the moment, only two of them are in widespread use; Microsoft's Internet Explorer and AOL's Netscape Navigator. Both are currently at version 6 and the differences between them are much less marked than would have been the case in versions past. Internet Explorer is currently the most popular browser based on units in use.</p> <a name="ch3p1sp2"><h3>installing a Browser</h3></a> <p>a browser is installed much like any other piece of software. An executable Setup file, commonly called a Setup.exe, is run, the user is prompted to input a location on their hard drive in which to install the browser, and the software is installed. The user could have installed it from a CD ROM, an executable that they copied to their hard drive, or, if they already have a previous version of the browser installed, an automated installation from a browser update site. In the case of Internet Explorer the browser could be installed during an Operating System installation. In this case the user could have installed the browser and not even be aware of it.</p> <a name="ch3p1sp3"><h3>view Pages</h3></a> <p>browsers can view files without being connected to the internet. Select File/Open (for IE) or File/Open Page (for Navigator) and navigate your way to any file on the hard drive that contains the file extension.htm,.html,.asp,.gif,.jpg (or any other file extension recognized by the browser) and the browser will display it.</p> <a name="ch3p1sp4"><h3>default Page</h3></a> <p>all browsers are configured to display a Default Page upon initialization. Internet Explorer, for example, will take the user to Microsoft s MSN home page by default if you are connected to the Internet. The user can change this by going into their respective browser s preferences and changing the address that appears in the Home Page or Default Page field. We will discuss the particulars of addresses later in the manual.</p> Code Snippit 26 III 16

17 Figuur 23: Het klikbare gedeelte van een link. Na het klikken op één van de titels (links) in onze inhoudsopgave springt de browser naar de gekozen titel. Figuur 24 geeft weer hoe het de pagina eruit ziet na het klikken op de titel Popular Browsers. Figuur 24: Na het klikken op Popular Browsers ziet de pagina er zo uit. Opmerking: Als de tekst volledig in het browservenster en men dus niet verticaal moet scrollen om het overige stuk tekst te lezen, dan heeft het klikken op een interne link geen effect. Als de resterende tekst na een interne link niet genoeg is om de browser te vullen, dan zal de browser enkel scrollen tot het eind van de tekst, bijvoorbeeld na het klikken op de link Default Page in ons voorbeeld (zie ) Figuur 25: Na het klikken op Default Page ziet de pagina er zo uit. Als we een heel lange tekst maken, is zo'n inhoudsopgave heel gemakkelijk om naar het gewenste deel van de tekst te springen. Maar indien we dan iedere keer terug naar boven zouden moeten scrollen om in de inhoudsopgave het volgende gewenste onderdeel te springen, dan wordt het nogal omslachtig. Om tegemoet te komen aan dit probleem voorzien web ontwikkelaars dikwijls na iedere III 17

18 paragraaf, of onderdeel nog een bijkomende interne link (zie Figuur 26), die het de gebruiker toelaat om gemakkelijk terug naar het begin van de tekst te springen. Deze kan op dezelfde manier gemaakt worden als de andere interne links. [cd-rom]:\examples\module III HTML\2.3 Links\Example 04\example04.htm <title>module III - HTML: Links: Example 4</title> <a name="top"><a href="#ch3">setting up an Internet Client: The Web Browser</a></a><br> <a href="#ch3p1">what is a Web Browser?</a><br> <a href="#ch3p1sp1">popular Browsers</a><br> <a href="#ch3p1sp2">installing a Browser</a><br> <a href="#ch3p1sp3">view Pages</a><br> <a href="#ch3p1sp4">default Page</a><br> <a name="ch3"><h1>setting up an Internet Client: The Web Browser</h1></a> <a name="ch3p1"><h2>what is a Web Browser?</h2></a> <p>simply started, a web browser is a piece of client software that interprets Hyper-Text-Markup Language (HTML) and displays or renders the code to the screen. Browsers not only display HTML but also allow the user to navigate a single page, a whole site, or the entirety of the World Wide Web. The user can also use a browser to download files and, if they have the proper plug-in, view interactive content.</p> <a href="#top">goto Top</a><br> <a name="ch3p1sp1"><h3>popular Browsers</h3></a> <p>there are a number of different browsers available but, at the moment, only two of them are in widespread use; Microsoft's Internet Explorer and AOL's Netscape Navigator. Both are currently at version 6 and the differences between them are much less marked than would have been the case in versions past. Internet Explorer is currently the most popular browser based on units in use.</p> <a href="#top">goto Top</a><br> <a name="ch3p1sp2"><h3>installing a Browser</h3></a> <p>a browser is installed much like any other piece of software. An executable Setup file, commonly called a Setup.exe, is run, the user is prompted to input a location on their hard drive in which to install the browser, and the software is installed. The user could have installed it from a CD ROM, an executable that they copied to their hard drive, or, if they already have a previous version of the browser installed, an automated installation from a browser update site. In the case of Internet Explorer the browser could be installed during an Operating System installation. In this case the user could have installed the browser and not even be aware of it.</p> <a href="#top">goto Top</a><br> <a name="ch3p1sp3"><h3>view Pages</h3></a> <p>browsers can view files without being connected to the internet. Select File/Open (for IE) or File/Open Page (for Navigator) and navigate your way to any file on the hard drive that contains the file extension.htm,.html,.asp,.gif,.jpg (or any other file extension recognized by the III 18

19 browser) and the browser will display it.</p> <a href="#top">goto Top</a><br> <a name="ch3p1sp4"><h3>default Page</h3></a> <p>all browsers are configured to display a Default Page upon initialization. Internet Explorer, for example, will take the user to Microsoft s MSN home page by default if you are connected to the Internet. The user can change this by going into their respective browser s preferences and changing the address that appears in the Home Page or Default Page field. We will discuss the particulars of addresses later in the manual.</p> <a href="#top">goto Top</a><br> Code Snippit 27 Figuur 26: De extra link om naar het begin van de webpagina te gaan. Opmerking: We merken op dat de links geplaatst na ieder onderdeel steeds de waarde #top in het HREF attribuut hebben staan. Men moet dus niet voor iedere interne link een nieuwe naam kiezen. Na het klikken op Goto Top springt de webpagina terug naar het begin (zie Figuur 27). Figuur 27: Linken naar een bestand Wanneer we onze klanten de mogelijkheid willen geven dat ze de laatste updates van onze software kunnen downloaden van onze webpagina, dan kunnen we op onze webpagina ook een link voorzien naar een bestand. Een link leggen naar een bestand komt overeen met het leggen van een local link. III 19

20 Een voorbeeld hiervan is de pagina waarvan u deze cursus en de voorbeeldbestanden kunt downloaden. [cd-rom]:\examples\module III HTML\2.3 Links\Example 05\example05.htm <title>module III - HTML: Links: Example 5</title> <font face="tahoma"> <h2>internet - Intranet</h2> <font size="2"> <p>beste student,</p> <p>op deze website kun je steeds de laatste versie van de <a href="cursus.exe">cursus</a> terugvinden.<br> In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus <i>internet - Intranet</i>.</p> <p>vriendelijke Groeten</p> <p>stefan Flipkens</p> </font> </font> Code Snippit 28 Figuur 28: Na het klikken op één van de links verschijnt een venster zoals in Figuur 29. Het venster laat ons toe om het bestand op te slaan op onze schijf. Figuur 29: Het venster dat getoond wordt na het klikken op een link naar een bestand. Opmerking: Het venster uit Figuur 29 kan verschillen naar gelang de geïnstalleerde versie van Microsoft Windows. Figuur 29 is een screenshot van hoe het Bestand Downloaden venster eruit ziet op een systeem waarop Microsoft Windows XP Professional met Service Pack 2 geïnstalleerd is. III 20

21 Linken naar een adres. We kunnen ook een link leggen naar een adres. Om dit te doen plaatsen we de waarde MAILTO: gevolgd door het adres waarnaar we de link willen leggen in het HREF attribuut. Wil ik ervoor zorgen dat mensen mij gemakkelijk een tje kunnen sturen door te klikken op mijn naam (Figuur 28), dan kan ik dit doen door de code aan te passen zoals in Code Snippit 29. [cd-rom]:\examples\module III HTML\2.3 Links\Example 06\example06.htm <title>module III - HTML: Links: Example 5</title> <font face="tahoma"> <h2>internet - Intranet</h2> <font size="2"> <p>beste student,</p> <p>op deze website kun je steeds de laatste versie van de <a href="cursus.exe">cursus</a> terugvinden.<br> In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus <i>internet - Intranet</i>.</p> <p>vriendelijke Groeten</p> <p><a href="mailto:sfweb@tiscali.be">stefan Flipkens</a></p> </font> </font> Code Snippit 29 Figuur 30: Na het klikken op de link naar het adres wordt een nieuw bericht geopend in het programma dat als standaard programma gedefinieerd is (zie Figuur 31). Figuur 31: Een nieuw bericht na het klikken op een link. Bij een link naar een adres hebben we ook nog de mogelijkheid om het standaard onderwerp mee te geven. Zodat standaard het onderwerp van het bericht al ingevuld is. III 21

22 Hiervoor moeten we na het adres ook nog de parameter?subject= gevolgd door het gekozen onderwerp meegeven in het HREF attribuut van de link. Voorbeeld: Wanneer ik wil dat in het onderwerp van het bericht in mijn pagina standaard het onderwerp Opmerkingen Cursus komt, dan kan ik Code Snippit 29 aanpassen zoals in Code Snippit 30. [cd-rom]:\examples\module III HTML\2.3 Links\Example 07\example07.htm <title>module III - HTML: Links: Example 7</title> <font face="tahoma"> <h2>internet - Intranet</h2> <font size="2"> <p>beste student,</p> <p>op deze website kun je steeds de laatste versie van de <a href="cursus.exe">cursus</a> terugvinden.<br> In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus <i>internet - Intranet</i>.</p> <p>vriendelijke Groeten</p> <p><a href="mailto:sfweb@tiscali.be?subject=opmerkingen Cursus">Stefan Flipkens</a></p> </font> </font> Code Snippit 30 Figuur 32: Na het klikken op de link ziet het gemaakte bericht eruit zoals in Figuur 33, het onderwerp is al ingevuld. Figuur 33: Het onderwerp van het bericht is al ingevuld. III 22

23 2.4. Lijsten Lijsten zijn een opsomming van items zoals ze ook in gewone tekstverwerkers gebruikt worden. Eerder in deze cursus zijn ze al gebruikt voor het opsommen van de verschillende soorten netten en het opsommen van de verschillende browsers. In HTML pagina's kunnen we de volgende soorten lijsten toepassen: Unordered List Ordered List Definition List Unordered List Een unordered list of ongeordende lijst is een lijst waarbij de items niet genummerd zijn, maar een symbool hebben als markering. Een unordered list wordt gemaakt met de <UL> </UL> en <LI> </LI> tags. De <UL> </UL> tag dient om aan te geven dat het gaat om een unordered list en de items binnen deze lijst worden omgeven door de <LI> </LI> tags. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 01\example01.htm <title>module III - HTML: Lijsten: Example 1</title> <h2>boekenlijst: Katzenbach, John</h2> <ul> <li>de Schaduwman</li> <li>heilstaat</li> <li>strafkamp</li> </ul> Code Snippit 31 Figuur 34: De lijst met het standaard opsommingsteken. De disc ( ) is het standaard symbool dat gebruikt wordt voor een unordered list. Naast de het standaard symbool hebben we ook nog de circle (zie Figuur 35) en de square (zie Figuur 36). Het opsommingsteken dat we willgen gebruiken kunnen we instellen met behulp van het TYPE attribuut. <ul type="circle">... </ul> Code Snippit 32 III 23

24 Opmerking: Geven we als type DISC mee dan heeft dit hetzelfde resultaat als in Figuur 34 omdat dit het standaard opsommingsteken is. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 02\example02.htm <title>module III - HTML: Lijsten: Example 2</title> <h2>boekenlijst: Katzenbach, John</h2> <ul type="square"> <li>de Schaduwman</li> <li>heilstaat</li> <li>strafkamp</li> </ul> Code Snippit 33 Figuur 35: De lijst met SQUARE als opsommingsteken. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 03\example03.htm <title>module III - HTML: Lijsten: Example 3</title> <h2>boekenlijst: Katzenbach, John</h2> <ul type="circle"> <li>de Schaduwman</li> <li>heilstaat</li> <li>strafkamp</li> </ul> Code Snippit 34 III 24

25 Figuur 36: De lijst met CIRCLE als opsommingsteken Ordered Lists Ordered lists worden ook genummerde lijsten genoemd. Bij deze lijsten is er geen opsommingsteken, maar een numerieke waarde die ieder item in de lijst voorafgaat. Om een ordered list te maken, gebruiken we de <OL> </OL> tags. De verschillende items in de lijst plaatsen we net zoals bij de unordered lists tussen de <LI> </LI> tags. Standaard begint een ordered list te tellen vanaf 1 en wordt het Arabisch Stelsel gebruikt (1, 2, 3, ) gebruikt om de items te nummeren. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 04\example04.htm <title>module III - HTML: Lijsten: Example 4</title> <h2>eindklassement: Jupiler League (2004)</h2> <ol> <li>anderlecht (AND)</li> <li>club Brugge (BRU)</li> <li>standard (STA)</li> <li>racing Genk (GNK)</li> <li>moeskroen (MOE)</li> <li>westerlo (WES)</li> <li>g. Beerschot (GBA)</li> <li>la Louviere (LAL)</li> <li>aa Gent (GNT)</li> <li>lokeren (LOK)</li> <li>lierse (LIE)</li> <li>beveren (BEV)</li> <li>sint-truiden (STV)</li> <li>cercle Brugge (CER)</li> <li>charleroi (CHA)</li> <li>bergen (MON)</li> <li>heusde-zolder</li> <li>antwerp (ANT)</li> </ol> Code Snippit 35 III 25

26 Figuur 37: De genummerde lijst met de standaard numering. Net zoals bij de Unorderd Lists kunnen we het type lijst aanpassen met behulp van het TYPE attribuut (zie Code Snippit 36). <ol type="a">... </ol> Code Snippit 36 De onderstaande tabel geeft de soorten nummeringen weer met een voorbeeld: Type Soort Nummering Voorbeeld 1 Arabisch 1, 2, 3, a Klein alfabet a, b, c, A Groot Alfabet A, B, C, i Kleine Romeinse cijfers i, ii, iii, iv, v, I Grote Romeinse cijfers I, II, III, IV, V, Tabel 1: De soorten nummeringen bij een Ordered List Code Snippit 37 is een voorbeeld van een genummerde lijst met als nummering het klein alfabet. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 05\example05.htm <title>module III - HTML: Lijsten: Example 5</title> <h2>processoren door de jaren heen</h2> <ol type="a"> <li>80286</li> <li>80386</li> <li>80486</li> <li>pentium</li> <li>pentium MMX</li> <li>pentium II</li> <li>pentium III</li> <li>pentium IV</li> </ol> Code Snippit 37 III 26

27 Figuur 38: De genummerde lijst met klein alfabet als nummering. Voor de Ordered Lists kunnen we ook een startnummer toewijzen door het START attribuut (zie Code Snippit 38) op te nemen in de <OL> tag. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 06\example06.htm <title>module III - HTML: Lijsten: Example 6</title> <h2>de 5 Laatsten uit het Eindklassement: Jupiler League (2004)</h2> <ol start="14"> <li>cercle Brugge (CER)</li> <li>charleroi (CHA)</li> <li>bergen (MON)</li> <li>heusden-zolder</li> <li>antwerp (ANT)</li> </ol> Code Snippit 38 Figuur 39: De genummerde lijst met een startnummer ingesteld. Opmerking: De waarde van het START attribuut is altijd en getal uit het Arabisch stelsel, ook al wordt de lijst in een ander type zoals het Romeins (zie Code Snippit 39) weergegeven. De omzetting naar het juiste stelsel gebeurt vanzelf. III 27

28 [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 07\example07.htm <title>module III - HTML: Lijsten: Example 7</title> <h2>de 5 Laatsten uit het Eindklassement: Jupiler League (2004)</h2> <ol type="i" start="14"> <li>cercle Brugge (CER)</li> <li>charleroi (CHA)</li> <li>bergen (MON)</li> <li>heusden-zolder</li> <li>antwerp (ANT)</li> </ol> Code Snippit 39 Figuur 40: De genummerde lijst met een startnummer ingesteld Definition Lists Definition lists (<DL> </DL>) zijn verschillend van Unordered en Ordered Lists. Ieder item in een definition list bestaat uit één of meer Definition Terms (<DT> </DT>) gevolgd door één of meer Definition Descriptions (<DD> </DD>). De definition description wordt automatisch ingesprongen op de volgende regel om de relatie met de definition term te benadrukken. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 06\example06.htm <title>module III - HTML: Lijsten: Example 8</title> <h2>afkortingenlijst</h2> <dl> <dt>css</dt> <dd>cascading Style Sheet</dd> <dt>html</dt> <dd>hyper Text Markup Language</dd> <dt>xml</dt> <dd>extensible Markup Language</dd> </dl> Code Snippit 40 III 28

29 Figuur 41: Een Definition List Geneste Lijsten We kunnen de verschillende soorten lijsten door elkaar gaan gebruiken in één grote lijst. In dat geval spreken we van geneste lijsten. Code Snippit 41 is hier een goed voorbeeld van. [cd-rom]:\examples\module III HTML\2.4 Lijsten\Example 06\example06.htm <title>module III - HTML: Lijsten: Example 9</title> <ol start="3"> <li>setting up an Internet Client: The Web Browser <ol type="i"> <li>what is a Web Browser? <ul> <li>popular Browsers</li> <li>installing a Browser</li> <li>view Pages</li> <li>default Page</li> </ul> </li> </ol> </li> </ol> Code Snippit 41 Figuur 42: Een geneste lijst. III 29

30 2.5. Tabellen Tabellen worden gedefinieerd door rijen en kolommen, wanneer ze elkaar kruisen vormen ze cellen. Zo heeft een tabel met 4 rijen en 3 kolommen 15 cellen. Als we een tabel maken in HTML, dan definieren we wel de rijen en de cellen, maar niet de kolommen. Het aantal kolommen dat er in een tabel zit komt overeen met het grootste aantal cellen dat voorkomt in één van de rijen. Om in HTML een tabel te maken gebruiken we de <TABLE> </TABLE> voor het definiëren van de tabel zelf, de <TR> </TR> (Table Row) voor het definiëren van de rijen en de <TD> </TD> (Table Data) tags voor het definiëren van de cellen binnen een rij. [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 01\example01.htm <title>module III - HTML: Tables: Example 1</title> <h2>de Top 5 uit het Eindklassement: Jupiler League (2004)</h2> <table> <tr><td>1</td><td>anderlecht (AND)</td><td>81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>59</td></tr> </table> Code Snippit 42 Figuur 43: Een tabel. In Code Snippit 42 valt op dat we vijf sets hebben van <TR> </TR> tags, iedere set stelt één rij voor. Binnen iedere rij (tussen de <TR> en de </TR> tag) vinden we drie sets van <TD> </TD> tags, die elk een cell creëren. De <TD> </TD> tags hebben een min of meer dubbele functie, op tabel niveau bekeken bepalen ze het aantal kolommen in de tabel, maar binnen de rij dienen ze om het aantal cellen binnen de rij te definiëren. Opmerking: Tabellen worden niet alleen gebruikt om gegevens in tabelvorm weer te geven maar ze worden ook heel vaak gebruikt om de onderdelen van een pagina beter te schikken. Binnen een cell (tussen de <TD> en de </TD> tag kunnen alle standaard HTML tags voorkomen die we kunnen gebruiken binnen de <BODY> </BODY> tags zoals <FONT> </FONT>, <BR>,. Dus ook de <TABLE> </TABLE> tags om een tabel in een tabel te maken. III 30

31 [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 02\example02.htm <title>module III - HTML: Tables: Example 2</title> <h2>voorbeelden van Tags binnen een cell.</h2> <table> <tr><td><font face="arial">deze tekst is Arial</font></td><td><h3>Een header in een cell</h3></td></tr> <tr><td>eerste regel<br>tweede Regel</td><td><p>Eerste paragraaf</p><p>tweede paragraaf</p></td></tr> </table> Code Snippit 43 Figuur 44: Voorbeelden van gewone HTML tags binnen de <TD> en </TD> tag De tabelrand en de dikte ervan In Figuur 43 en Figuur 44 valt het op dat de rand van de tabellen niet zichtbaar is. Met behulp van het BORDER attribuut kunnen we bepalen hoe dik de tabelrand is en of we hem willen weergeven of niet. Standaard heeft dit attribuut de waarde 0. BORDER is de lijn die de grens vormt van iedere cel wanneer we onze pagina bekijken in een browser. Als waarde voor het BORDER attribuut geven we het aantal pixels mee dat de tabelrand breed moet zijn. [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 03\example03.htm <title>module III - HTML: Tables: Example 3</title> <h2>de Top 5 uit het Eindklassement: Jupiler League (2004)</h2> <table border="1"> <tr><td>1</td><td>anderlecht (AND)</td><td>81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>59</td></tr> </table> Code Snippit 44 III 31

32 Figuur 45: Voorbeelden van gewone HTML tags binnen de <TD> en </TD> tag. Opmerking: Bij tabellen die gebruikt worden voor het schikken van de verschillende onderdelen van een pagina wordt het BORDER attribuut op 0 gezet. Opmerking: Sommige browsers tekenen geen randen rond lege cellen. Het volstaat om in deze cellen een non-breaking space ( ) te plaatsen om de browser te commanderen de randen wel te tekenen en de cel leeg te doen verschijnen. We kunnen best in iedere lege cel een plaatsen De breedte en hoogte van cellen aanpassen De breedte en de hoogte van de cellen in een tabel kunnen we aanpassen door de HEIGHT en WIDTH attributen van de <TD> </TD> tag te gebruiken. De waarde van deze attributen kan op twee manieren uitgedrukt worden: Een waarde in pixels (zie Code Snippit 45) Een percentage van de grootte van de tabel (zie Code Snippit 46) <td height="50">... </td> <td width="10%">... </td> Code Snippit 45 Code Snippit 46 [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 04\example04.htm <title>module III - HTML: Tables: Example 4</title> <h2>de Top 5 uit het Eindklassement: Jupiler League (2004)</h2> <table border="1"> <tr><td width="50">1</td><td width="150">anderlecht (AND)</td><td width="50">81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>59</td></tr> </table> Code Snippit 47 III 32

33 Figuur 46: Voorbeelden van gewone HTML tags binnen de <TD> en </TD> tag. Opmerking: Wanneer we de breedte van een cell instellen op 10 pixels, en de tekst die in de cell staat is breder dan de opgegeven 10 pixels, dan wordt de cell automatisch groter zodat de tekst erin past Cellinhoud centreren Tekst centreren in een cell kunnen we op drie manieren: Door gebruik te maken van de <CENTER> </CENTER> tag (zie Code Snippit 48) Door gebruik te maken van de <P> </P> tag en het ALIGN attribuut van deze tag. (zie Code Snippit 49) Door gebruik te maken van het ALIGN attribuut van de <TD> </TD> tag (zie Code Snippit 50). <td><center>deze tekst is gecentreerd</center></td> Code Snippit 48 <td><p align="center">deze tekst is gecentreerd</p></td> Code Snippit 49 <td align="center">deze tekst is gecentreerd</td> Code Snippit 50 Dit kunnen we gebruiken om een rij met kolomtitels toe te voegen. [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 05\example05.htm <title>module III - HTML: Tables: Example 5</title> <h2>de Top 5 uit het Eindklassement: Jupiler League (2004)</h2> <table border="1"> <tr><td align="center" width="50"><b>nr</b></td><td align="center" width="150"><b>ploeg</b></td><td align="center" width="50"><b>punten</b></td></tr> <tr><td>1</td><td>anderlecht (AND)</td><td>81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>59</td></tr> </table> Code Snippit 51 III 33

34 Figuur 47: Het centreren van cellen Tabeltitels gebruiken Er is echter een betere manier om de eerste rij met titels te maken dan de manier zoals we in Code Snippit 51 gedaan hebben. In Code Snippit 51 hebben we het centreren van cellen gebruikt in combinatie met de <B> </B> tag om de tekst vet te krijgen. We kunnen dit éénvoudiger doen, door de <TD> </TD> tag te vervangen door de <TH> </TH> (Table Header) tag. Door deze éne tag te gebruiken worden de waarden in de cel automatisch in het vet en gecentreerd weergegeven. [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 06\example06.htm <title>module III - HTML: Tables: Example 6</title> <h2>de Top 5 uit het Eindklassement: Jupiler League (2004)</h2> <table border="1"> <tr><th width="50">nr</th><th width="150">ploeg</th><th width="50">punten</th></tr> <tr><td>1</td><td>anderlecht (AND)</td><td>81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>59</td></tr> </table> Code Snippit 52 Figuur 48: Table Headers. III 34

35 Cellen samenvoegen In de meeste spreadsheets, of zelfs wanneer we met tabellen werken in courante tekstverwerkers als Microsoft Word of Corel WordPerfect, dan hebben we de mogelijkheid om cellen zowel horizontaal als verticaal samen te voegen. Dit is in HTML ook mogelijk met behulp van de COLSPAN en ROWSPAN attributen van de <TD> </TD> tag. Als waarde voor deze attributen geven we mee hoeveel cellen we willen samenvoegen. Voor het verticaal samenvoegen (over de rijen heen) gebruiken we het ROWSPAN attribuut en voor het horizontaal samenvoegen (over de kolommen heen) gebruiken we het COLSPAN attribuut. [cd-rom]:\examples\module III HTML\2.5 Tabellen\Example 07\example07.htm <title>module III - HTML: Tables: Example 7</title> <h2>eindklassement: Jupiler League (2004)</h2> <table border="1"> <tr><th rowspan="2">nr</th><th rowspan="2">ploeg</th> <th colspan="4">wedstrijden</th> <th colspan="3">doelpunten</th> <th rowspan="2">punten</th></tr> <tr><th>gespeeld</th><th>winst</th><th>verlies</th> <th>gelijk</th><th>voor</th><th>tegen</th><th>saldo</th></tr> <tr><td>1</td><td>anderlecht (AND)</td><td>34</td> <td>25</td><td>3</td><td>6</td> <td>77</td><td>27</td><td>50</td> <td>81</td></tr> <tr><td>2</td><td>club Brugge (BRU)</td><td>34</td> <td>22</td><td>6</td><td>6</td> <td>77</td><td>31</td><td>46</td> <td>72</td></tr> <tr><td>3</td><td>standard (STA)</td><td>34</td> <td>18</td><td>5</td><td>11</td> <td>68</td><td>31</td><td>37</td> <td>65</td></tr> <tr><td>4</td><td>racing Genk (GNK)</td><td>34</td> <td>17</td><td>9</td><td>8</td> <td>58</td><td>40</td><td>18</td> <td>59</td></tr> <tr><td>5</td><td>moeskroen (MOE)</td><td>34</td> <td>15</td><td>5</td><td>14</td> <td>64</td><td>42</td><td>22</td> <td>59</td></tr> <tr><td>6</td><td>westerlo (WES)</td><td>34</td> <td>14</td><td>10</td><td>10</td> <td>51</td><td>45</td><td>6</td> <td>52</td></tr> <tr><td>7</td><td>g. Beerschot (GBA)</td><td>34</td> <td>11</td><td>12</td><td>11</td> <td>34</td><td>40</td><td>-6</td> <td>44</td></tr> <tr><td>8</td><td>la Louviere (LAL)</td><td>34</td> <td>10</td><td>10</td><td>14</td> <td>45</td><td>46</td><td>-1</td> <td>44</td></tr> <tr><td>9</td><td>aa Gent (GNT)</td><td>34</td> <td>8</td><td>10</td><td>16</td> <td>33</td><td>34</td><td>-1</td> <td>40</td></tr> <tr><td>10</td><td>lokeren (LOK)</td><td>34</td> III 35

Nog meer weergeven