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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–1

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.

1.2. De opbouw van een HTML tag Figuur 7 geeft weer hoe een HTML tag is opgebouwd. Open Tag Attribute Waarde

Sluit Tag

Dit is een rode zin. 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 open- en 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: Deze zin is vetgedrukt. 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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–2

Dit is een rode zin. Code Snippit 2

1.3. De basisstructuur van een HTML pagina HTML pagina's hebben een basisstructuur die voor alle pagina's hetzelfde is. Deze basisstructuur bestaat uit de tags en de tags. Deze tags zijn noodzakelijk als we een HTML pagina willen maken. De tags vertellen de browser dat het bestand dat we openen een HTML pagina is, en omvatten de overige HTML code in het bestand. De 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 ( ). 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 tags zijn: <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. : Bevat in de attributen een verwijzing naar een andere HTML pagina, een pagina met scripts, een pagina met opmaak informatie, een XML bestand, … !!! 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> : Bevat client sided script code zoals JavaScript of VBScript. <STYLE> : Bevat informatie gebruikt door cascading style sheets. <meta> <script language="JavaScript"> ... <style> ... Code Snippit 4

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–3

1.4. Enkele voorbeelden 1.4.1. 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.

1.4.2. Voorbeeld 2 [cd-rom]:\Examples\Module III – HTML\2.1 Algemeen\Example 02\example02.htm An example showing the use of the most basic HTML tags. Code Snippit 6

Figuur 9: Code Snippit 6 bekeken in Internet Explorer.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–4

2. De meest voorkomend tags 2.1. Algemeen 2.1.1. 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

tags. Op de plaats waar we een zacht regeleinde willen, plaatsen we de
tag. [cd-rom]:\Examples\Module III – HTML\2.1 Algemeen\Example 03\example03.htm

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

Code Snippit 7

Figuur 10: Code Snippit 7 bekeken in Internet Explorer.

2.1.2. Vet, Cursief en Onderlijnen Tekst vet, cursief weergeven of onderlijnen kunnen we door de tags voor vet ( ), cursief ( ) of onderlijnen ( ) 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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–5

[cd-rom]:\Examples\Module III – HTML\2.1 Algemeen\Example 04\example04.htm

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

Code Snippit 8

Figuur 11: Code Snippit 8 bekeken in Internet Explorer.

2.1.3. Lettertype, tekstgrootte en –kleur De eigenschappen van het lettertype zoals het type, de grootte en de kleur kunnen we aanpassen met behulp van de tags. De 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. Sample text 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 tags meerdere lettertypes gescheiden door een komma (,) meegeven, zoals in Code Snippit 10. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–6

Sample text 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

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

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 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.

Sample text

Code Snippit 12

Sample text

Code Snippit 13

Sample text

Code Snippit 14

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–7

De grootte van de tekst kan gewijzigd worden met behulp van het SIZE attribuut van de tag. Code Snippit 15 is hier een voorbeeld van. [cd-rom]:\Examples\Module III – HTML\2.1 Algemeen\Example 06\example06.htm

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

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 CSS1, 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.

Sample text

Code Snippit 16

Sample text

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

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–8

[cd-rom]:\Examples\Module III – HTML\2.1 Algemeen\Example 07\example07.htm

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

Code Snippit 18

Figuur 14: Code Snippit 18 bekeken in Internet Explorer.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–9

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 tag te gebruiken om de grootte van het lettertype aan te passen en deze te combineren met de tag om de tekst vet te maken. De

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: …).

Setting up an Internet Client: The Web Browser

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 (

tot

). Waar

het hoogste niveau (dus de grootste titel) aangeeft en

het laagste niveau. Wanneer we de herschreven broncode gaan bekijken (zie Code Snippit 20) dan merken we op dat de

tag volstaat om

volledig te vervangen. [cd-rom]:\Examples\Module III – HTML\2.2 Headers\Example 01\example01.htm

Setting up an Internet Client: The Web Browser

What is a Web Browser?

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.

Popular Browsers

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

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–10

browser based on units in use.

Installing a Browser

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.

View Pages

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.

Default Page

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.

Code Snippit 20

Figuur 16: Code Snippit 20 bekeken in Internet Explorer.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–11

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 tags (anchor) en daarom wordt een link soms ook een anchor genoemd. De tekst tussen de en 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 e-mail 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.

2.3.1. Externe Links Externe links verwijzen naar een andere website, een specifieke pagina binnen een andere website of een e-mail adres (zie ). [cd-rom]:\Examples\Module III – HTML\2.3 Links\Example 01\example01.htm

Computervirus Sasser infects computers over the world

A new version of the internetvirus Sasser is bugging computers all over the world.
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.

Code Snippit 21

Figuur 17: Het klikbare gedeelte van een link.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–12

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.

2.3.2. 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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–13

[cd-rom]:\Examples\Module III – HTML\2.3 Links\Example 02\intro.htm

CompuSupplies

Enter Main Site

Code Snippit 22

Figuur 20: Het klikbare gedeelte van een link. [cd-rom]:\Examples\Module III – HTML\2.3 Links\Example 02\main.htm

Welcome

... to our website.

This is an example website for teaching purposes only.

Code Snippit 23

Figuur 21: Het klikbare gedeelte van een link.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–14

2.3.3. 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 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 tags plaatsen zoals in Code Snippit 24.

Setting up an Internet Client: The Web Browser

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. Setting up an Internet Client: The Web Browser 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 Setting up an Internet Client: The Web Browser
What is a Web Browser?
Popular Browsers
Installing a Browser
View Pages
Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–15

Default Page

Setting up an Internet Client: The Web Browser

What is a Web Browser?

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.

Popular Browsers

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.

Installing a Browser

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.

View Pages

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.

Default Page

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.

Code Snippit 26

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–16

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 Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–17

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 Setting up an Internet Client: The Web Browser
What is a Web Browser?
Popular Browsers
Installing a Browser
View Pages
Default Page

Setting up an Internet Client: The Web Browser

What is a Web Browser?

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.

Goto Top

Popular Browsers

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.

Goto Top

Installing a Browser

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.

Goto Top

View Pages

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 Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–18

browser) and the browser will display it.

Goto Top

Default Page

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.

Goto Top
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:

2.3.4. 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. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–19

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

Internet - Intranet

Beste student,

Op deze website kun je steeds de laatste versie van de cursus terugvinden.
In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus Internet - Intranet.

Vriendelijke Groeten

Stefan Flipkens

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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–20

2.3.5. Linken naar een e-mail adres. We kunnen ook een link leggen naar een e-mail adres. Om dit te doen plaatsen we de waarde MAILTO: gevolgd door het e-mail adres waarnaar we de link willen leggen in het HREF attribuut. Wil ik ervoor zorgen dat mensen mij gemakkelijk een e-mailtje 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

Internet - Intranet

Beste student,

Op deze website kun je steeds de laatste versie van de cursus terugvinden.
In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus Internet - Intranet.

Vriendelijke Groeten

Stefan Flipkens

Code Snippit 29

Figuur 30:

Na het klikken op de link naar het e-mail adres wordt een nieuw e-mail bericht geopend in het e-mail programma dat als standaard e-mail programma gedefinieerd is (zie Figuur 31).

Figuur 31: Een nieuw e-mail bericht na het klikken op een e-mail link.

Bij een link naar een e-mail adres hebben we ook nog de mogelijkheid om het standaard onderwerp mee te geven. Zodat standaard het onderwerp van het e-mail bericht al ingevuld is. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–21

Hiervoor moeten we na het e-mail 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 e-mail 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

Internet - Intranet

Beste student,

Op deze website kun je steeds de laatste versie van de cursus terugvinden.
In de toekomst wordt deze pagina nog bijgewerkt zodat ze ook een aantal links bevat naar nuttige informatie in verband met de cursus Internet - Intranet.

Vriendelijke Groeten

Stefan Flipkens

Code Snippit 30

Figuur 32:

Na het klikken op de link ziet het gemaakte e-mail bericht eruit zoals in Figuur 33, het onderwerp is al ingevuld.

Figuur 33: Het onderwerp van het bericht is al ingevuld. Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–22

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

2.4.1. 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

en

tags. De

tag dient om aan te geven dat het gaat om een unordered list en de items binnen deze lijst worden omgeven door de

tags. [cd-rom]:\Examples\Module III – HTML\2.4 Lijsten\Example 01\example01.htm

Boekenlijst: Katzenbach, John

• De Schaduwman
• Heilstaat
• Strafkamp

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.

...

Code Snippit 32

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–23

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

Boekenlijst: Katzenbach, John

• De Schaduwman
• Heilstaat
• Strafkamp

Code Snippit 33

Figuur 35: De lijst met SQUARE als opsommingsteken. [cd-rom]:\Examples\Module III – HTML\2.4 Lijsten\Example 03\example03.htm

Boekenlijst: Katzenbach, John

• De Schaduwman
• Heilstaat
• Strafkamp

Code Snippit 34

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–24

Figuur 36: De lijst met CIRCLE als opsommingsteken.

2.4.2. 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

tags. De verschillende items in de lijst plaatsen we net zoals bij de unordered lists tussen de

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

Eindklassement: Jupiler League (2004)

1. Anderlecht (AND)
2. Club Brugge (BRU)
3. Standard (STA)
4. Racing Genk (GNK)
5. Moeskroen (MOE)
6. Westerlo (WES)
7. G. Beerschot (GBA)
8. La Louviere (LAL)
9. AA Gent (GNT)
10. Lokeren (LOK)
11. Lierse (LIE)
12. Beveren (BEV)
13. Sint-Truiden (STV)
14. Cercle Brugge (CER)
15. Charleroi (CHA)
16. Bergen (MON)
17. Heusde-Zolder
18. Antwerp (ANT)

Code Snippit 35

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–25

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).

...

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

Processoren door de jaren heen

1. 80286
2. 80386
3. 80486
4. Pentium
5. Pentium MMX
6. Pentium II
7. Pentium III
8. Pentium IV

Code Snippit 37

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–26

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

tag. [cd-rom]:\Examples\Module III – HTML\2.4 Lijsten\Example 06\example06.htm

De 5 Laatsten uit het Eindklassement: Jupiler League (2004)

14. Cercle Brugge (CER)
15. Charleroi (CHA)
16. Bergen (MON)
17. Heusden-Zolder
18. Antwerp (ANT)
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.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–27

[cd-rom]:\Examples\Module III – HTML\2.4 Lijsten\Example 07\example07.htm

De 5 Laatsten uit het Eindklassement: Jupiler League (2004)

14. Cercle Brugge (CER)
15. Charleroi (CHA)
16. Bergen (MON)
17. Heusden-Zolder
18. Antwerp (ANT)
Code Snippit 39

Figuur 40: De genummerde lijst met een startnummer ingesteld.

2.4.3. Definition Lists Definition lists (
) zijn verschillend van Unordered en Ordered Lists. Ieder item in een definition list bestaat uit één of meer Definition Terms (
) gevolgd door één of meer Definition Descriptions (
). 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

Afkortingenlijst

CSS

Cascading Style Sheet

HTML

Hyper Text Markup Language

XML

Extensible Markup Language

Code Snippit 40 Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–28

Figuur 41: Een Definition List.

2.4.4. 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
3. Setting up an Internet Client: The Web Browser
   1. What is a Web Browser?
      • Popular Browsers
      • Installing a Browser
      • View Pages
      • Default Page
Code Snippit 41

Figuur 42: Een geneste lijst.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–29

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 voor het definiëren van de tabel zelf, de (Table Row) voor het definiëren van de rijen en de (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

De Top 5 uit het Eindklassement: Jupiler League (2004)

1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 42

Figuur 43: Een tabel.

In Code Snippit 42 valt op dat we vijf sets hebben van tags, iedere set stelt één rij voor. Binnen iedere rij (tussen de en de tag) vinden we drie sets van tags, die elk een cell creëren. De 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 en de tag kunnen alle standaard HTML tags voorkomen die we kunnen gebruiken binnen de tags zoals ,
, …. Dus ook de tags om een tabel in een tabel te maken.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–30

[cd-rom]:\Examples\Module III – HTML\2.5 Tabellen\Example 02\example02.htm

Voorbeelden van Tags binnen een cell.

Deze tekst is Arial	Een header in een cell
Eerste regel Tweede Regel	Eerste paragraaf Tweede paragraaf

Code Snippit 43

Figuur 44: Voorbeelden van gewone HTML tags binnen de en tag.

2.5.1. 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

De Top 5 uit het Eindklassement: Jupiler League (2004)

1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 44

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–31

Figuur 45: Voorbeelden van gewone HTML tags binnen de en 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.

2.5.2. 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 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) ... Code Snippit 45 ... Code Snippit 46

[cd-rom]:\Examples\Module III – HTML\2.5 Tabellen\Example 04\example04.htm

De Top 5 uit het Eindklassement: Jupiler League (2004)

1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 47 Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–32

Figuur 46: Voorbeelden van gewone HTML tags binnen de en 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.

2.5.3. Cellinhoud centreren Tekst centreren in een cell kunnen we op drie manieren: Door gebruik te maken van de tag (zie Code Snippit 48) Door gebruik te maken van de
tag en het ALIGN attribuut van deze tag. (zie Code Snippit 49) Door gebruik te maken van het ALIGN attribuut van de tag (zie Code Snippit 50). Deze tekst is gecentreerd Code Snippit 48

Deze tekst is gecentreerd

Code Snippit 49 Deze tekst is gecentreerd 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

De Top 5 uit het Eindklassement: Jupiler League (2004)

Nr	Ploeg	Punten
1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 51 Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–33

Figuur 47: Het centreren van cellen.

2.5.4. 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 tag om de tekst vet te krijgen. We kunnen dit éénvoudiger doen, door de tag te vervangen door de (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

De Top 5 uit het Eindklassement: Jupiler League (2004)

Nr	Ploeg	Punten
1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 52

Figuur 48: Table Headers.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–34

2.5.5. 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 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

Eindklassement: Jupiler League (2004)

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–35



Nr	Ploeg	Wedstrijden				Doelpunten			Punten
		Gespeeld	Winst	Verlies	Gelijk	Voor	Tegen	Saldo
1	Anderlecht (AND)	34	25	3	6	77	27	50	81
2	Club Brugge (BRU)	34	22	6	6	77	31	46	72
3	Standard (STA)	34	18	5	11	68	31	37	65
4	Racing Genk (GNK)	34	17	9	8	58	40	18	59
5	Moeskroen (MOE)	34	15	5	14	64	42	22	59
6	Westerlo (WES)	34	14	10	10	51	45	6	52
7	G. Beerschot (GBA)	34	11	12	11	34	40	-6	44
8	La Louviere (LAL)	34	10	10	14	45	46	-1	44
9	AA Gent (GNT)	34	8	10	16	33	34	-1	40
10	Lokeren (LOK)	34	10	15	9	45	54	-9	39
11	Lierse (LIE)	34	8	11	15	33	40	-7	39
12	Beveren (BEV)	34	11	18	5	45	58	-13	38
13	Sint-Truiden (STV)	34	9	14	11	36	50	-14	38
14	Cercle Brugge (CER)	34	7	13	14	28	52	-24	35
15	Charleroi (CHA)	34	8	17	9	35	47	-12	33
16	Bergen (MON)	34	7	15	12	29	52	-23	33
17	Heusden-Zolder (HZO)	34	7	20	7	36	68	-32	28
18	Antwerp (ANT)	34	7	21	6	30	67	-37	27

Code Snippit 53

Figuur 49: Cellen Samenvoegen.

2.5.6. Cellen verticaal uitlijnen In Figuur 49 zien we dat de titels Nr, Ploeg en Punten verticaal gecentreerd zijn. Het zou mooier zijn mochten deze verticaal van boven uitgelijnd zijn. De verticale uitlijning van een cell kunnen we aanpassen met het VALIGN attribuut van de . Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–36

[cd-rom]:\Examples\Module III – HTML\2.5 Tabellen\Example 06\example06.htm

Eindklassement: Jupiler League (2004)

...

Nr	Ploeg	Wedstrijden				Doelpunten			Punten
		Gespeeld	Winst	Verlies	Gelijk	Voor	Tegen	Saldo
1	Anderlecht (AND)	34	25	3	6	77	27	50	81
9	AA Gent (GNT)	34	8	10	16	33	34	-1	40
15	Charleroi (CHA)	34	8	17	9	35	47	-12	33
16	Bergen (MON)	34	7	15	12	29	52	-23	33
17	Heusden-Zolder (HZO)	34	7	20	7	36	68	-32	28
18	Antwerp (ANT)	34	7	21	6	30	67	-37	27

Code Snippit 54

Figuur 50: Verticale uitlijning van cellen.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–37

2.5.7. De ruimte tussen cellen De ruimte tussen de cellen kunnen we aanpassen met behulp van het CELLSPACING attribuut van de tag. Als waarde geven de het aantal pixels dat tussen de cellen moet liggen. [cd-rom]:\Examples\Module III – HTML\2.5 Tabellen\Example 09\example09.htm

De Top 5 uit het Eindklassement: Jupiler League (2004)

1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 55

Figuur 51: De ruimte tussen cellen.

2.5.8. De ruimte tussen celrand en tekst De ruimte tussen de celrand en de tekst in de cell kunnen we dan weer aanpassen met het CELLPADDING attribuut, dat ook een attribuut is van de tag. Ook hier geven we als waarde het aantal pixels dat tussen de celrand en de tekst in de cell moet liggen. [cd-rom]:\Examples\Module III – HTML\2.5 Tabellen\Example 10\example10.htm

De Top 5 uit het Eindklassement: Jupiler League (2004)

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–38



1	Anderlecht (AND)	81
2	Club Brugge (BRU)	72
3	Standard (STA)	65
4	Racing Genk (GNK)	59
5	Moeskroen (MOE)	59

Code Snippit 56

Figuur 52: De ruimte tussen celrand en tekst.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–39

2.6. Figuren De eigenlijke bedoeling van HTML was het verspreiden van informatie. In de websites van tegenwoordig wordt hierbij meer en meer gebruik gemaakt van figuren of foto's. Figuren en foto's kunnen we invoegen door gebruik te maken van de tag (zie Code Snippit 57). Code Snippit 57

Code Snippit 57 bevat de minimale code die nodig is om een figuur op te nemen in een webpagina. Opmerking: De tag is één van de weinige open tags binnen HTML. Open tags zijn tags die geen sluit tag hebben.

Wanneer we de tag gebruiken moeten we ook steeds het SRC attribuut meegeven om de bron van de figuur aan te geven. Als waarde voor het SRC attribuut geven we de bestandsnaam van de figuur die we willen invoegen. Opmerking: Sommige besturingssystemen zijn NIET en andere besturingssystemen zijn juist WEL hoofdlettergevoelig als het gaat om werken met bestanden. Daarom kunnen we best als we werken met bestandsnamen zoals bij links en het invoegen van figuren, dezelfde hoofdletters en kleine letters aanhouden die gebruikt zijn in de bestandsnaam.

is een veel gebruikt voorbeeld uit de praktijk, van hoe we figuren kunnen gebruiken in een webpagina. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 01\example01.htm


Sorry, for the inconvenience! But, this page is still under construction.

Code Snippit 58

Figuur 53: Under Construction een veel gebruikt praktijkvoorbeeld.

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–40

2.6.1. De breedte en hoogte van een figuur aanpassen Soms willen we een figuur groter of kleiner weergeven in onze webpagina, dan de werkelijke grootte van de figuur. Hiervoor maken we gebruik van de attributen HEIGHT en WIDTH van de tag. Net zoals bij de WIDTH en de HEIGHT attributen van een cell ( ) van een tabel kunnen we de waarde voor deze attributen bij figuren op twee manieren bepalen: Een waarde in pixels. Een percentage van de grootte van het browservenster of de frame. Code Snippit 59 Code Snippit 60

Wanneer we bij één van deze attributen een percentage opgeven, dan wordt de figuur automatisch verschaald naargelang de grootte van het browservenster of de frame waarin de figuur staat. Voorbeeld: De webpagina uit Figuur 53 wordt weergegeven op een resolutie van 640 bij 480. Wanneer we deze pagina nu willen weergeven op een resolutie van 1024 bij 768 (zie Figuur 54), dan merken we dat naargelang we het browser venster herschalen er meer blanco ruimte is. Om dit probleem op te lossen maken we onze tekening minstens 50% van de hoogte van het browser venster. De HTML code van de webpagina wordt dan zoals in Code Snippit 61.

Figuur 54: Onze webpagina weergegeven op 1024x768 pixels. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 02\example02.htm


Sorry, for the inconvenience! But, this page is still under construction.

Code Snippit 61

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–41

Figuur 55: Under Construction een veel gebruikt praktijkvoorbeeld.

Aan de hand van de HTML code in kunnen we afleiden dat we niet beide attributen moeten gebruiken. Het volstaat om slechts één van de attributen mee te geven, de waarde voor het andere attribuut wordt dan automatisch in verhouding berekend. Hierbij heeft het geen belang of we werken in pixels, of met een percentage van het huidige browservenster. Voorbeeld: We maken een webpagina met Animated Gifs. Als we Code Snippit 62 in onze browser bekijken, dan zien we (zie Figuur 56) dat de figuren niet allemaal even hoog zijn. Wanneer we de figuren nu allemaal even hoog maken zoals in Code Snippit 63, dan ziet het resultaat er in de browser al iets mooier uit (zie Figuur 57). [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 03\example03.htm

Animated Gifs

Animals

      

Computer & Parts

      
      

People

       Code Snippit 62

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–42

Figuur 56:

[cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 04\example04.htm

Animated Gifs

Animals

      

Computer & Parts

      
      

People

       Code Snippit 63

Figuur 57:

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–43

2.6.2. Figuren en de mappenstructuur Wanneer we een webpagina maken met verschillende pagina's en figuren, dan maken we wellicht gebruik van een mappenstructuur op onze harde schijf om de verschillende bestanden gemakkelijk te schikken. Tot nu toe hebben we de figuren geplaatst in dezelfde map waarin ook de webpagina stond en dan volstaat het om de bestandsnaam met de extensie van de figuur die we willen gebruiken te vermelden in het SRC attribuut. Willen we nu de figuren die we gebruiken binnen onze website plaatsen in de map images dan moeten we de naam opnemen van de map gevolgd door een slash (/) en daarna de naam van de figuur (zie Code Snippit 64). Opmerking: In tegenstelling tot het gebruik van mappen en bestanden in Microsoft Windows wordt, bij het gebruik van bestanden en mappen in een bestandspad een slash (/) gebruikt en geen backslash (\) als scheidingsteken. Code Snippit 64

Code Snippit 66 laat zien hoe we dit kunnen toepassen op onze pagina met Animated Gifs. Indien de map images nog een niveau lager zit dan de webpagina waar de tekening gebruikt wordt, dan geven we het hele pad mee zoals in Code Snippit 65. Code Snippit 65 [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 05\example05.htm

Animated Gifs

Animals

      

Computer & Parts

      
      

People

       Code Snippit 66

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–44

Figuur 58:

Indien de map images zich een niveau hoger bevindt, dan gaan we tewerk zoals in Code Snippit 67. We gaan eerst een niveau hoger (../) en daarna naar de map images. Code Snippit 67

Zoals uit Code Snippit 67 al blijkt kunnen we beide combineren. De webpagina van [cd-rom]:\Examples\Module III - HTML\2.6 Images\Example 06\example06.htm laat zien hoe we de figuren uit Example04.htm kunnen gebruiken. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 06\example06.htm

Animated Gifs

Animals

      

Computer & Parts

      
      

People

       Code Snippit 68

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–45

Figuur 59:

Om problemen met sommige besturingssystemen die en website hosten te vermijden kunnen we best ook nog de spaties in de namen van mappen en bestanden vervangen door de code %20. De broncode van onze Animated Gif pagina ziet er dan uit zoals in Code Snippit 69. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 07\example07.htm

Animated Gifs

Animals

      

Computer & Parts

      
      

People

       Code Snippit 69

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–46

Figuur 60: Opmerking: Vroeger werd voor het verwijzen naar een figuur voor een figuur of naar een bestand voor het maken van een link dikwijls het hele pad meegegeven zoals in Code Snippit 70. Dit is echter af te raden omdat we dan en hacker die onze website bekijkt al info geven over de mappenstructuur op onze schijf, zoals de schijf waar de bestanden staan en het pad naar de hoofdmap van onze website. Als we te werk gaan zoals in de andere voorbeelden, dan geven we juist genoeg informatie door aan de browser om de bestanden terug te vinden. Een hacker weet op deze manier ook wel ongeveer de structuur van onze website, maar niet op welke harde schijf ze staat en welk het pad is naar de hoofdmap ervan. Een voordeel van het niet gebruiken van het volledige pad is dat als we onze website verplaatsen we niet alle verwijzingen naar figuren en bestanden moeten aanpassen naar de nieuwe locatie. Code Snippit 70

2.6.3. Foto's Gebruiken Onder de term figuren verstaan we natuurlijk ook foto's. Foto's kunnen we op dezelfde manier gebruiken als andere figuren, dus met de tag. Bij het gebruik van foto's zullen we echter al snel op een aantal problemen stuiten, omdat de kwaliteit van foto's over het algemeen veel beter is dan gewone figuren zoals Animated Gifs. Juist omwille van die hoge kwaliteit zijn ze veel groter in omvang, het gevolg hiervan is dat ze ofwel en grotere bandbreedte vereisen, ofwel een langere wachttijd. De meeste problemen die voorkomen bij het gebruik van foto's zijn op te lossen door het in acht nemen van enkele regels. De verschillende problemen worden uitgelegd aan de hand van vergelijkende voorbeelden. Het A voorbeeld geeft steeds aan hoe het NIET moet en het B voorbeeld geeft aan hoe het dan WEL moet.

2.6.3.1. Vectors Of Bitmaps We kunnen twee belangrijke soorten van figuren onderscheiden. De bitmaps en de vectoren. Bitmap figuren zijn de meest voorkomende soort figuur die gebruikt worden buiten de wereld van het professioneel drukken. Bitmap tekeningen beschrijven een figuur pixel voor pixel, terwijl vector tekeningen de figuur in wiskundige wordt uitgedrukt. Het grote verschil tussen beide soorten is dat bitmap figuren een bepaalde resolutie hebben waardoor ze niet zonder gevolg uitvergroot kunnen worden. Naar gelang deze resolutie krijgen we te maken met kwaliteitsverlies (zie Figuur 62). Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–47

Vector figuren daarentegen kunnen wel zonder gevolgen uitvergroot worden (zie Figuur 61) en nemen doorgaans veel minder schijfruimte in beslag.

Figuur 61: Links de originele Vector tekening, Rechts de vergroting.

Figuur 62: De tekening vergroot als bitmap. Opmerking: De meeste browsers ondersteunen geen vector tekeningen en zullen deze intern omzetten naar een bitmap.

2.6.3.2. Het bestandsformaat van een figuur Een belangrijke factor die de bestandsgrootte van een figuur zal bepalen is het formaat waarin de figuur is opgeslagen. Bitmaps kunnen immers in verschillende bestandsformaten, met ieder hun eigen bestandsextensie opgeslagen worden zoals: BMP: Windows Bitmap File Format (.bmp) GIF: Graphic Interchange Format (.gif) JPEG: Joint Photographic Expert Group (.jpg) PNG: Portable Network Graphic (.png) TIFF: Tagged Image File Format (.tif) Ieder van deze formaten kan extra informatie over de figuur bevatten, zoals de auteur, de datum, copyright informatie, de methode van compresseren, … Wanneer we de bestanden van het A voorbeeld gaan bekijken, dan merken we op dat: het jpeg formaat en het gif formaat veel kleiner zijn dan de andere de bestanden van het B voorbeeld kleiner zijn dan de overeenkomende bestanden van het B voorbeeld. Wanneer we het resultaat van het A voorbeeld (zie Figuur 63) vergelijken met het resultaat van het B voorbeeld (zie Fout! Verwijzingsbron niet gevonden.)in een browser, dan merken we visueel bijna geen kwaliteitsverschil. Opmerking: In het A voorbeeld (zie Figuur 63) zien we dat de figuur in TIFF formaat niet weergegeven wordt. Dit formaat wordt door de meeste browsers niet ondersteund. Opmerking: Het BMP formaat en het TIFF lenen zich dus niet voor gebruik in webpagina's, we kunnen ze dus best vermijden. Ze worden wel gebruikt om foto's en dergelijke in de volledige kwaliteit aan te leveren aan webontwikkelaars of drukkerijen. Deze formaten zijn immers bijna Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–48

niet of zelfs helemaal niet gecompresseerd waardoorer niets van de kwaliteit verloren gaat. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 08a\example08a.htm

Wallpapers

Animals




Nature








Other

Code Snippit 71

Figuur 63:

GIF en JPEG zijn de meest gebruikte formaten op het internet. Voordat de snelle lijnen zoals ADSL of Kabelverbindingen hun opmars vonden, werd het Gif89 formaat veel gebruikt bij het ontwikkelen van webpagina's. Dit formaat is ongeveer hetzelfde als het GIF formaat alleen zorgde het formaat ervoor dat de tekening in drie keer werd opgebouwd in de browser. Bij de tragere internet verbindingen kreeg je dan toch vrij snel resultaat te zien en moest men niet meer wachten totdat de volledige tekening was ingeladen. [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 08b\example08b.htm

Wallpapers

Animals




Nature








Other

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–49

Code Snippit 72

Figuur 64:

2.6.3.3. Het aantal kleuren [cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 09a\example09a.htm

Wallpapers

Animals




Nature








Other

Code Snippit 73

Figuur 65:

[cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 09b\example09b.htm Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–50



Wallpapers

Animals




Nature








Other

Code Snippit 74

Figuur 66:

2.6.3.4. De resolutie

[cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 10a\example10a.htm

Foto's Bosbeek

        Code Snippit 75

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–51

Figuur 67:

[cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 10b\example10b.htm

Foto's Bosbeek

        Code Snippit 76

Figuur 68:

[cd-rom]:\Examples\Module III – HTML\2.6 Images\Example 11\example11.htm

Wallpapers

Animals

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005) III–52 alt="Fish">

Fish 640 x 480 800 x 600 1024 x 768

Landscapes

	Autumn 640 x 480 800 x 600 1024 x 768
	Desert 640 x 480 800 x 600 1024 x 768
	Ireland 640 x 480 800 x 600 1024 x 768
	Island 640 x 480 800 x 600 1024 x 768

Other

StoneHenge 640 x 480 800 x 600 1024 x 768

Code Snippit 77

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–53

Figuur 69:

Figuur 70:

SAVE FOR WEB

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–54

2.7. Frames

Stefan Flipkens - Cursus: Internet - Intranet (2004-2005)

III–55