HTML Hans Roeyen V 3.0

HTML 4.01

© Hans Roeyen

V 3.0

29 januari 2015

HTML

1.

Inleiding.............................................................................................................. 3 1.1. Een HTML bestand aanmaken. ............................................................... 3 1.2. Een verklaring van de gebruikte elementen ............................................. 4 1.3. HTML Tags .............................................................................................. 5 1.3.1. Tag attributen ........................................................................................... 5 1.4. Basis HTML Tags .................................................................................... 6 1.4.1. Hoofdingen .............................................................................................. 6 1.4.2. Alinea’s .................................................................................................... 6 1.4.3. Regel eindes ............................................................................................ 7 1.4.4. Tekstuitlijning ........................................................................................... 7 1.4.4.1. Scheidingstags voor paginaopmaak ........................................................ 7 1.4.5. Commentaar in HTML.............................................................................. 8 1.5. Samenvatting basis HTML tags ............................................................. 11 1.5.1. Formatteren van tekst ............................................................................ 11 1.5.2. Computer output tags ............................................................................ 12 1.5.3. Tags voor citaten, quotaties en definities ............................................... 12 1.6. Oefeningen HTML Basis ........................................................................ 13 1.7. Speciale tekens en symbolen ................................................................ 16 1.8. Uniform Resource Locater ..................................................................... 17

Hans Roeyen

Index

2-17

HTML

1. Inleiding Om een webpagina te maken moeten wij noodzakelijkerwijze een begrip hebben van HTML. HTML is wat men een “markup” taal noemt en plaatst bepaalde codes (tages) in onze webpagina die dan door de browser geïnterpreteerd kunnen worden. Een webbrowser of gewoon browser is een programma dat HTML commando’s kan interpreteren om zo de verschillende onderdelen van een webpagina te verzamelen, te rangschikken en te tonen op het scherm van de computer. HTML staat voor HyperText Markup Language. Een HTML-bestand is in feite niets meer dan een tekstbestand waarin “markup tags” voorkomen. Deze tags vertellen dan de browser hoe hij de pagina moet afbeelden. Het bestand moet .htm of .html als extensie krijgen.

1.1.

Een HTML bestand aanmaken.

Enkele voorbeelden van de veschillende mogelijkheden: 1. Door het gebruik van een volle tekst (ASCII) editor: dit is de beste manier om het coderen te leren, we moeten immers alle codes zelf manueel ingeven. Wij gaan dat doen met Kladblok in Windows. Opmerking: Het gebruik van Wordpad is af te raden omdat dit programma altijd enige tekstopmaak hanteert. Als je Wordpad gebruikt moet je de HTML pagina’s opslaan als een “tekstdocument”! 2. Door het gebruik van een HTML editor: handig in gebruik wanneer u de codering kent want deze programma’s beschikken over allerlei handige tools waardoor het coderen sneller en gemakkelijker gaat. Allaire HomeSite (voor Windows), Pagespinner (voor Macintosh) en Arachnophilia zijn enkele voorbeelden. 3. Door gebruik van WYSIWYG software: dit zijn grafische programma’s die ons zullen toelaten om snel webpagina’s in elkaar te steken zonder dat we al teveel kennis hoeven te hebben van HTML codering. Voorbeelden hiervan zijn Microsoft Frontpage, Adobe PageMill, Claris HomePage, DreamWeaver en NetObjects Fusion.

Helaas... zoals sommigen misschien hadden gehoopt, gaat deze cursus niet over het gebruik van de wysywig programma’s waarmee men in een paar minuten een webpagina in elkaar steekt. Ik zou het gebruik van dergelijke programma’s momenteel zelfs eerder willen afraden! Toch zeker zolang we in de beginschoenen staan van het aanleren van de HTML codering. Met dergelijke programma’s leren we de code zelf niet. Later zal u dat duidelijker worden waarom het grondig kennen van de code zo belangrijk is...!

Hans Roeyen

HTML Basis

3-17

HTML  Start Kladblok en geef de onderstaande tekst in:

Hier komt de titel van de pagina Dit is mijn eerste webpaginaDeze tekst staat in het vet

1.2.

Een verklaring van de gebruikte elementen

Een aantal termen die gebruikt worden vragen een verduidelijking. De eerste term is “tag”: een tag is een gecodeerd commando dat gebruikt wordt om aan te geven hoe een bepaald gedeelte van de webpagina getoond moet worden op het scherm. Een HTML tag begint altijd met < en eindigt altijd op >. De meeste van deze tags (let wel: niet allemaal!) bestaan uit twee delen: een begin tag (<) om aan te geven waar een stuk tekst begint en een sluit tag (. Deze tag zegt de browser dat vanaf die plaats een HTML document begint. De laatste tag in het bestand is en duid het einde aan van het HTML document. De tekst tussen en is header informatie: deze informatie wordt niet getoond in het venster van de browser. De tekst tussen en is de titel van onze pagina en zal getoond worden in de titelbalk van de browser. De tekst tussen en is de tekst die zal getoond worden in het venster van de browser. De tekst tussen en zal in het vet getoond worden.

Hans Roeyen

HTML Basis

4-17

HTML Bewaar het bestand onder de naam: “mijnpagina.html” en ga nu als volgt te werk.    

Open Internet Explorer Kies bestand – openen – bladeren Ga naar de map waarin we je het bestand hebt bewaard Dubbelklik op “mijnpagina.html”

De browser toont onze eerste webpagina!

1.3.

HTML Tags

HTML tags zijn niet hoofdlettergevoelig, is dus hetzelfde als . We zouden zelf kunnen kiezen maar het World Wide Web Consortitium (W3C) schrijft het gebruik van lowercase tags voor vanaf de HTML 4 specificatie en XHTML vereist nu eenmaal lowercase tags. Het is dan ook beter om onmiddellijk op deze manier te leren werken.

1.3.1. Tag attributen Tags kunnen attributen hebben. Attributen voorzien in extra informatie betreffende de HTML elementen in onze pagina. Ze voegen informatie toe voor screen readers of tonen toolstips. Om een link op een HTML pagina te plaatsen heb je de achor (of ) tag. Het attribuut href krijgt als waarde de url voor de link mee. Voorbeeld: This is a link

Het link adres is gespecificeerd in het href attribuut van de anchor tag. Attributen komen in “naam/waarde” paren zoals name=”value”. Attributen worden altijd toegevoegd in de begin tag van een HTML element en worden niet herhaald in de sluit tag. In attributen mogen we dubbele of enkele aanhalingstekens gebruiken, ze mogen echter niet door elkaar gebruikt worden. Dit is goed: Dit is goed: Dit is fout:

Hans Roeyen

“http://www.w3schools.com” ‘http://www.w3schools.com’ “http://www.w3schools.com’

HTML Basis

5-17

HTML

1.4.

Basis HTML Tags

De basis-tags in HTML zijn de tags die hoofdingen, alinea’s en regeleindes definiëren.

1.4.1. Hoofdingen Hoofdingen worden gedefinieerd met de
tot
tags.
definieert de grootste hoofding,
de kleinste. Probeer dit eens in het bestand “mijnpagina.html”, bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. Hier komt de titel van de pagina Dit is mijn eerste webpagina Deze tekst staat in het vet
Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding
HTML voegt automatisch een extra witregel toe aan een hoofding.

1.4.2. Alinea’s Alinea’s worden gedefinieerd met de
tag. Werk verder met het bestand “mijnpagina.html” en voeg deze extra tags toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat.
Dit is een alinea

Dit is een alinea

Dit is een alinea
HTML voegt automatisch een extra witregel toe voor en na een alinea.

Hans Roeyen

HTML Basis

6-17

HTML

1.4.3. Regel eindes Wanneer we een regel willen beëindigen maar geen nieuwe alinea willen beginnen, gebruiken we de
tag. Werk verder met het bestand “mijnpagina.html” en voeg deze extra tags toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat.

Dit is
een ali
nea met regel
eindes

1.4.4. Tekstuitlijning Als je een alinea wilt uitlijnen op de rechtermarge, kan je align="right" instellen binnen de
tag. Alles tot de sluit tag
wordt dan rechts uitgelijnd. Hetzelfde kan je doen met align="center". Dit kan ook voor “left”, maar dat wordt niet veel gebruikt omdat dit de standaard uitlijning is en dus niet specifiek ingesteld dient te worden. Als je de uitlijning voor meer dan één alinea of kop tegelijk wilt instellen is het gebruik van een scheidingstag aangewezen.

1.4.4.1. Scheidingstags voor paginaopmaak Als je een opmaak voor een deel van de pagina wilt laten afwijken van de overige onderdelen, kan je gebruikmaken van de tags en
. Op zich doet
niets, maar als je de tag combineert met align="center" zal alles tot de sluittag
gecentreerd worden. Dit kunnen afbeeldingen, tekst, koppen en alle andere paginaonderdelen zijn. Er is ook nog de tag. Het verschil met
is dat deze een regeleinde forceert en doet dat niet. Daarom gebruik je voor een opmaak te specificeren die korter is dan een alinea. Ook hier is natuurlijk een sluittag verplicht. Deze tags tonen hun waarde vooral in combinatie met CSS om een opmaak aan een paginaonderdeel te koppelen. Voorbeeld DIV en SPAN

Spelen met opmaak
kan heel handig zijn...

Dit is vet en de tekst hierna is cursief.

Hans Roeyen

HTML Basis

7-17

HTML

Als je graag iets onderstreept kan dat ook.
Een vaste letterafstand is een andere opmaak!
En je kan ook iets heel groot weergeven

Werken met opmaak kan heel leuk zijn. Zo kunnen we een opmaak specificeren per onderdeel van de pagina.

1.4.5. Commentaar in HTML De commentaar tag wordt gebruikt om in de HTML broncode commentaar in te voegen. De tekst tussen de commentaar tags wordt niet getoond in het venster. Werk verder met het bestand “mijnpagina.html” en voeg deze extra tag toe. Bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. Enkele opmerkingen  Bij het schrijven van HTML tekst kunnen we nooit 100% zeker zijn hoe de tekst zal weergegeven worden in een andere browser. Er bestaan verschillende afmetingen van computerschermen, er worden verschillende resoluties gebruikt, enz….  HTML zal de spaties in onze tekst inkorten. Eender welk aantal spaties dat we plaatsen zal toch maar tellen als één spatie. In HTML telt een nieuwe lijn als een spatie.  Het gebruik van de
tag om lege regels in te voeren wordt afgeraden en is een slechte gewoonte. Gebruik hiervoor de
tag.  Sommigen hebben waarschijnlijk al gemerkt dat de
tag gebruikt kan worden zonder de sluit tag
. Dat klopt, maar de volgende versies van HTML zullen het algemeen toepassen van de sluit tag vereisen, vandaar dat we nu beter de goede gewoonte nemen om alle tags te sluiten (behalve momenteel de
tag).  HTML zal soms automatisch een witregel toevoegen voor en na bepaalde elementen, zoals voor en na een alinea en een hoofding.

Hans Roeyen

HTML Basis

8-17

HTML

Voor wie HTML echt volledig nieuw is, zullen de onderstaande voorbeelden de zaken die we tot nu toe hebben bekeken nog even herhalen. Gebruik Kladblok maar zorg ervoor dat je het voorbeeld exact ingeeft zoals hieronder weergegeven is. Bewaar elk bestand met een andere naam en ga telkens kijken naar het resultaat. Voorbeeld 1: bekijk even deze alinea’s Hier komt de titel van de pagina
Deze alinea bevat veel regels in de broncode, maar de browser zal ze negeren.
Deze alinea bevat heel wat spaties in de bron code maar de browser zal ze negeren.
Het aantal regels in een alinea hangt af van de grootte van het browservenster. Indien we het browservenster aanpassen, zal het aantal regels in deze alinea eveneens veranderen. Probeer maar eens....
Voorbeeld 2: een demonstratie van het gebruik van regeleindes Hier komt de titel van de pagina
Om naar
een volgende
regel te gaan
in een alinea
gebruiken we de br tag.
Voorbeeld 3: enkele problemen met HTML formatting Hier komt de titel van de pagina
dit is de eerste regel van deze alinea dit is de tweede regel van deze alinea dit is de derde regel van deze alinea dit is de vierde regel van deze alinea

merk op dat de browser onze formattering vierkant negeert!

Hans Roeyen

HTML Basis

9-17

HTML

Voorbeeld 4: gebruik van hoofdingen Hier komt de titel van de pagina
Dit is hoofding 1

Dit is hoofding 2

Dit is hoofding 3

Dit is hoofding 4

Dit is hoofding 5

Dit is hoofding 6

Gebruik de heading tags enkel voor hoofdingen. Gebruik ze niet om iets Gewoon in het vet te zetten….daar bestaan andere tags voor.
Voorbeeld 5: centreren van een hoofding Hier komt de titel van de pagina
Dit is de hoofding 1

De bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd. De bovenstaande hoofding is in het midden afgelijnd.
Voorbeeld 6: invoegen van een horizontale lijn Hier komt de titel van de pagina
De hr tag definieert een horizontale lijn:

This is a paragraph

This is a paragraph

This is a paragraph
Voorbeeld 7: gebruik van commentaar Hier komt de titel van de pagina
Dit is een gewone alinea

Hans Roeyen

HTML Basis

10-17

HTML

1.5.

Samenvatting basis HTML tags TAG
tot



Functie Definieert een HTML document Definieert het body van een document Definieert een hoofding 1 tot een hoofding 6 Definieert een alinea Definieert een regelovergang Definieert een horizontale lijn Definieert commentaar Definieert een scheidingstag Definieert een scheidingstag

1.5.1. Formatteren van tekst TAG <del> <strike> 

Hans Roeyen

Functie Definieert tekst in vet Definieert grote tekst Definieert beklemtoonde tekst Definieert schuine tekst (Italic) Definieert kleine tekst Definieert verwijderde tekst Afgeschaft, gebruik <del> Definieert tekst in het vet Definieert tekst in subscript Definieert tekst in superscript Definieert ingevoegde tekst Afgeschaft, gebruik stijlen

HTML Basis

11-17

HTML

1.5.2. Computer output tags TAG <samp> <pre> Functie Definieert computer code tekst Definieert toetsenbordtekst Definieert sample computer code Definieert teletype tekst Definieert een variable Definieert gepreformatteerde tekst 1.5.3. Tags voor citaten, quotaties en definities TAG Functie Definieert een afkorting Definieert een acroniem Definieert een adreselement Definieert de tekstrichting Definieert een lange quotatie Definieert een korte quotatie Definieert een citaat Definieert een definitie term Het volledige en actuele overzicht van de HTML tags is te bekijken via volgende link: URL: http://www.w3schools.com/tags/default.asp Je krijgt niet alleen het overzicht van de tags te zien. In het overzicht is gedocumenteerd welke nog tags nog geldig zijn voor HTML 5. Hans Roeyen HTML Basis 12-17 HTML Oefeningen HTML Basis Voorbeeld 1: formatteren van tekst Hier komt de titel van de pagina Deze tekst is in het vet Deze tekst is strong Deze tekst is groot Dit is beklemtoonde tekst Deze tekst staat in het schuin Dit is kleine tekst Deze tekst bevat subscript Deze tekst bevat superscript Voorbeeld 2: gepreformatteerde tekst Hier komt de titel van de pagina <pre> Dit is gepreformatteerde tekst. Dit zal zowel spaties als regeleindes respecteren zonder dat we daarvoor code moeten gebruiken De pre tag is ideaal voor het weergeven van computercode: <pre> for i = 1 tot 10 print i next i Voorbeeld 3: computer output tags Hier komt de titel van de pagina Computer code Toetsenbord input Teletype tekst <samp>Sample tekst Computer variable Nota:Deze tags worden vaak gebruikt om computercode/programmeercode weer te geven. Hans Roeyen HTML Basis 13-17 HTML Voorbeeld 4: een adres Hier komt de titel van de pagina Els Elsens Steenbakkersstraat 56 9000 Gent België Voorbeeld 5: afkortingen en acroniemen Hier komt de titel van de pagina UN WWW Het title attribuut wordt gebruikt om de volledige versie te tonen wanneer de muisaanwijzer over de afkorting of acroniem geplaatst wordt. Voorbeeld 6: richting waarin de tekst afgebeeld wordt Hier komt de titel van de pagina indien onze browser 'bi-directioneel override'(bdo) ondersteunt, zal de onderstaande tekst weergegeven worden van rechts naar links(rtl): Wat denkt u van deze tekst? Hans Roeyen HTML Basis 14-17 HTML Voorbeeld 7: gebruik van quotaties Hier komt de titel van de pagina Hier komt een lange quotatie: Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Dit is een lange quotatie. Nu volgt een korte quotatie: Dit is een korte quotatie Met het blockquote element zal de browser regeleindes en kantlijnen invoegen, maar het q element zal niet als iets speciaal weergegeven worden ! Voorbeeld 8: verwijderde en ingevoegde tekst Hier komt de titel van de pagina een dozijn is <del>twintigtwaalfdeeltjes de meeste oude browsers zullen de verwijderde tekst doorhalen en ingevoegde tekst onderlijnen. Bepaalde oude browsers zullen verwijderde en ingevoegde tekst afbeelden als volle tekst. Uiteraard is het ook een goed idee om tijdens het surfen eens te letten op bepaalde elementen die gebruikt werden om mooie lay-outs te maken. Indien we graag zouden willen weten hoe een dergelijke webpagina gecodeerd werd, kunnen we in onze browser steeds de broncode bekijken via het menubalk onderdeel Beeld – Bron (MSIE) of Vieuw – Page Source (Mozilla) Je kan het volledige overzicht van HTML altijd bekijken in de meest recente versie op de website van W3Schools: www.w3schools.com/html Hans Roeyen HTML Basis 15-17 HTML 1.6. Speciale tekens en symbolen Bepaalde tekens hebben in HTML een speciale betekenis, zoals <, en in bepaalde teksten zullen we gebruik moeten maken van accenten of speciale tekens. In andere talen worden dikwijls andere karakters gebruikt en sommige symbolen heb je al eens nodig, zoals het copyright © symbool. In HTML is dit geen probleem maar dan moeten we deze tekst wel invoegen met de juiste code. Zo zullen we het copyright © moeten coderen als © of als ©. Doen we dit niet dan zullen bepaalde browsers deze tekens niet correct kunnen afbeelden. De meest algemeen gebruikte speciale tekens Teken < > & “ ‘ Beschrijving Harde spatie Kleiner dan Groter dan Ampersand Aanhalingsteken Apostrof Numerische code < > & " ' Code naam < > & " ' Teken £    § € Beschrijving Pond Copyright Geregistreerd merk Plus min Sectie Euro Numerische code £ © ® ± § € Code naam £ © ® ± § € Opmerking: het gebruik van de naam geniet de voorkeur! Hans Roeyen HTML Basis 16-17 HTML 1.7. Uniform Resource Locater Een URL of Uniform Resource Locater wordt gebruikt om een document (of andere data) te kunnen adresseren op het World Wide Web. Een volledig webadres kan er bijvoorbeeld zo uitzien: http:// http://www.lethas.be/informatica_hbo Webadressen hebben de volgende syntax: Scheme://host.domein: poort/pad/bestandsnaam  Scheme definieert het type van Internetdienst, gewoonlijk is dit http.  Host definieert de domeinhost, indien weggelaten, dan is de standaard host voor http gelijk aan www  Domein definieert de Internet domeinnaam zoals lethas.be  Poort definieert het poortnummer op de host. Dit wordt gewoonlijk weggelaten. Het standaard poortnummer voor http is 80  Pad definieert het pad (een submap) op de webserver. Indien het pad niet meegegeven wordt dan moet het document voorkomen op de root van de website.  Bestandsnaam definieert de naam van het document De meest algemene scheme’s zijn: Scheme file ftp http news telnet Hans Roeyen Toegang tot Een bestand op de computer Een bestand op een FTP server Een bestand op een server in het WWW Een Usenet nieuwsgroep Een telnet verbinding HTML Basis 17-17

HTML Hans Roeyen V 3.0

Recommend Documents

tot

tags.

definieert de grootste hoofding,

de kleinste. Probeer dit eens in het bestand “mijnpagina.html”, bewaar het bestand (onder dezelfde naam) en ga kijken naar het resultaat. Hier komt de titel van de pagina Dit is mijn eerste webpagina Deze tekst staat in het vet

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Dit is een hoofding

Spelen met opmaak

Dit is hoofding 1

Dit is hoofding 2

Dit is hoofding 3

Dit is hoofding 4

Dit is hoofding 5

Dit is hoofding 6

Dit is de hoofding 1

tot