1 Informatica 2 e graad 2 e jaar2 Inhoudstafel Inhoudstafel Wat is XHTML en hoe werkt het? Tags Wat zijn Tags? Basisstructuur van een webpagina Soorte...
Inhoudstafel ............................................................................................... 2 1. Wat is XHTML en hoe werkt het?............................................................ 3 2. Tags...................................................................................................... 6 2.1. Wat zijn Tags? ..................................................................... 6 2.2. Basisstructuur van een webpagina ............................................. 7 3. Soorten Tags....................................................................................... 10 3.1. De FONT tag.......................................................................11 3.2. Instellen van de lettergrootte..................................................12 Eerste manier: .........................................................................12 Tweede manier: .......................................................................12 3.3. Stijl tags ...........................................................................14 3.4. Plaatsing tags .....................................................................17 3.5. Kleuren tags.......................................................................22 3.5.1. Achtergrondkleur ...........................................................23 3.5.2. Tekstkleur....................................................................24 4. Koppelingen naar andere webpagina’s ................................................ 25 4.1. Plaatsing tags .....................................................................25 5. Foto’s plaatsen in een webpagina........................................................ 29 6. Tabellen .............................................................................................. 33 6.1. Tabelgrootte ......................................................................35 6.2. De opdrachten CELLSPACING en CELLPADDING..............................37 6.3. Kleuren gebruiken in een tabel ................................................38 6.4. De opdrachten ROWSPAN en COLSPAN.......................................39
De Mol Wim - Cursus XHTML 2e graad
Pagina 2/41
1. Wat is XHTML en hoe werkt het? Na deze les kan ik …. •
Een eenvoudige webpagina maken en deze tonen in Internet Explorer.
XHTML staat voor eXtensible HyperText Markup Language. Het is de taal die je browser begrijpt en ook gebruikt om aan te duiden hoe webpagina’s moeten worden weergegeven op het scherm van je computer. De manier waarop webpagina’s worden weergegeven gebeurt door gebruik te maken van XHTML tags. Wat XHTML tags juist zijn, lees je op de volgende bladzijden. Met XHTML kun je : Koppelingen maken naar andere webpagina’s. (= Hypertext) Tekst opmaken in webpagina’s. (= Markup) Dit doen we met behulp van zogenaamde markeringstekens, ook wel tags genoemd. Een tag of markeringsteken is dus eigenlijk een opdracht die door een browser (zoals bijvoorbeeld Internet Explorer) kan worden uitgevoerd. Tags staan altijd tussen < > tekens. XHTML tags worden normaal altijd volledig in kleine letters ingegeven.
De Mol Wim - Cursus XHTML 2e graad
Pagina 3/41
Om te laten zien hoe XHTML werkt gaan we eerst samen een eenvoudige webpagina maken en vervolgens deze pagina bekijken in een browser.
1
Open MS Kladblok. (START → alle programma’s → bureau-accessoires → kladblok)
2
Typ de volgende tekst in : Je Voornaam + Naam,
3
Ga naar Bestand en kies “Opslaan als”
4
Zet bij “Opslaan als” het type op Alle bestanden (*.*)
5
Sla het bestand op als C:\mijnwebpagina.htm
6
Open je browser (Internet Explorer)
7
Tik het volgende in op de adresbalk: C:/mijnwebpagina.htm en druk op de <ENTER> toets. (Opmerking: De adresbalk staat net onder de titelbalk)
bv Wim De Mol
Je eerste webpagina is klaar!
De Mol Wim - Cursus XHTML 2e graad
Pagina 4/41
Werking: We hebben in kladblok een tekst ingetikt en opgeslagen op de harde schijf als een .htm bestand. Onze browser leest de tekst én de tags in dit bestand, vertaalt deze en laat vervolgens het resultaat zien op ons computerscherm. Opgelet : We hebben het bestand bijgehouden met de uitbreiding .htm. Je kan hiervoor ook .html kiezen, dit heeft hetzelfde effect. De pagina die we gemaakt hebben staat nu nog lokaal op je PC, hij moet nog opgeladen worden naar een webserver om zichtbaar te worden voor de buitenwereld. Een webserver is een speciale computer die webpagina’s levert aan computers (Pc’s) die webpagina’s opvragen.
Wat moet ik onthouden ? • •
Een webpagina sla je op met de uitbreiding .htm Een webpagina open je vanuit je browser, bijvoorbeeld vanuit het programma Internet Explorer.
Browser Een programma om webpagina’s te bekijken, bv Internet Explorer (IE) van Microsoft of Mozilla Firefox. MS Kladblok In het Engels : "Notepad". Zit standaard bij Windows. Kijk via je Start-menu eens onder "Accessoires" of "Bureau-accesoires". Tags Zijn een soort opdrachten die je aan een browser kan geven, ook wel markeringstekens genoemd. Server Een centrale computer in een netwerk van computers. De server waar we het over hebben is een webserver. Hierop kun je je pagina zetten (uploaden) zodat deze voor iedereen zichtbaar zal zijn. Uploaden (opladen) Downloaden ken je vast wel. Een programma of bestand van de webserver naar je computer kopiëren. Uploaden is precies hetzelfde maar omgekeerd. Met “uploaden” bedoelen we het overbrengen van een bestand van de computer naar de webserver toe.
De Mol Wim - Cursus XHTML 2e graad
Pagina 5/41
2. Tags Na deze les kan ik …. • •
Een basisstructuur maken van een XHTML webpagina. Tekst vetjes weergeven in onze zelfgemaakte webpagina .
2.1. Wat zijn Tags? Tags zijn een soort opdrachten. Elke tag geeft de browser een andere opdracht. De opdracht slaat altijd op het deel dat tussen de opentag en de sluittag staat. Een opentag en een sluittag zien er altijd als volgt uit: ( = de opentag ) ( = de sluittag, met een / vooraan de opdracht ) Voorbeeld : als we een tekst vet willen weergeven gebruiken we onderstaande tag:
Deze tekst staat vetjes De bovenstaande tags en geven bijvoorbeeld aan dat alle tekst die tussen de opentag en de sluittag staat vetjes moet worden afgebeeld op ons computerscherm.
De Mol Wim - Cursus XHTML 2e graad
Pagina 6/41
2.2. Basisstructuur van een webpagina Alvorens we een echte webpagina kunnen maken moeten we allereerst onze pagina voorzien van een basisstructuur. Een basisstructuur is nodig om de browser toe te laten alle tags in onze webpagina gemakkelijk en zonder fouten uit te kunnen voeren. Dit betekent concreet dat we een aantal tags in de pagina zullen opnemen die altijd aanwezig moeten zijn, de zogenaamde standaardtags.
tag
Nut
Geeft aan dat het een html bestand betreft
tussen deze 2 tags komt het 'hoofd' van de pagina. Hierin staan wat gegevens vermeld over de pagina, zoals bijv. de titel. Op de titel na is de tekst binnen de tag niet zichtbaar.
tussen deze 2 tags komt de titel van de pagina te staan De titel zal zichtbaar zijn in de bovenste balk van de browser. Dus helemaal linksbovenin.
tussen deze 2 tags komt de inhoud van onze webpagina te staan.
sluit het html bestand af.
Standaardtags zijn tags die dus steeds aanwezig moeten zijn binnen elke webpagina.
Als we de bovenstaande standaardtags in mijnwebpagina.htm gaan verwerken gaat onze pagina er als volgt uitzien: Mijn eerste pagina Wim De Mol Voer de wijzigingen door in mijnwebpagina.htm en sla het bestand opnieuw op. Activeer nu het venster van je browser en klik op vernieuwen. (of F5 toets)
De Mol Wim - Cursus XHTML 2e graad
Pagina 7/41
Als alles goed is zie je nu in de bovenste balk van je browser de titel, "Mijn eerste pagina", staan. (Dus kijk NIET IN het venster maar naar de TITEL van het venster!!) Voor de rest is er niks veranderd! Dit komt doordat we verder alleen tags hebben toegevoegd, en tags zélf zijn niet zichtbaar in de browser. We gaan nu de tag doorvoeren voor Bold, zodanig dat onze tekst vetjes zal worden weergegeven. Zet de opentag net vóór je naam+voornaam en de sluittag net ná je naam+voornaam. Test.htm zal er dus als volgt uitzien:
Mijn eerste paginaWim De Mol
De Mol Wim - Cursus XHTML 2e graad
Pagina 8/41
Sla het bestand in mijnwebpagina.htm opnieuw op en klik op vernieuwen (F5) in je browser. Dit geeft je volgend resultaat:
Wat moet ik onthouden ? …. • •
Tags zelf zijn NIET zichtbaar in je browservenster. Elke webpagina heeft een basisstructuur die voor elke pagina hetzelfde is: …… ……………….
De Mol Wim - Cursus XHTML 2e graad
Pagina 9/41
3. Soorten Tags Na deze les kan ik …. • • •
Het lettertype wijzigen binnen mijn XHTML webpagina. De lettergrootte van een tekst aanpassen binnen mijn XHTML webpagina. De stijlen ‘vetjes’, ‘cursief’, ‘onderstreept’ of ‘typmachine’ toepassen binnen mijn webpagina.
Er bestaan uiteraard verschillende soorten tags. Tags kunnen onderverdeeld worden in de volgende categorieën: •
Lettertags
•
Stijltags
•
Plaatsingtags
•
Kleurentags
Opentag Code die wordt gebruikt om de tag te openen. Een opentag ziet er altijd als volgt uit : . Sluittag Code waarmee we de tag gaan sluiten. Een sluittag ziet er altijd als volgt uit :
Vernieuwen Deze knop gebruiken we om het browservenster te vernieuwen als we wijzigingen hebben aangebracht in onze webpagina. Vernieuwen van een webpagina kan je ook doen via de F5-toets.
De Mol Wim - Cursus XHTML 2e graad
Pagina 10/41
3.1. De FONT tag Je hebt waarschijnlijk al gezien dat momenteel de tekst in je browser steeds hetzelfde is. Omdat je namelijk geen lettertype of lettergrootte hebt aangegeven gebruikt de browser de standaardwaarden. Het lettertype in webpagina’s kan je wijzigen d.m.v. de tag. Plaats de tag vóór het tekstgedeelte waarvan je het lettertype wilt veranderen. Plaats in de tag de volgende woorden: face = "lettertype". Sluit vervolgens de tag af d.m.v. . Alle tekst binnen de tags zal in jouw lettertype verschijnen. Kopieer het onderstaande naar voorbeeld51.htm en bekijk het resultaat in je browser: voorbeeld51
Voorbeeld fonts Standaard ziet de tekst er zo uit. Arial is één van de meest voorkomende lettertypes. Ook Verdana komt wel eens voor.....
Zo zijn er honderden, waarschijnlijk wel duizenden, verschillende lettertypes. De namen van de lettertypes kun je gewoon uit het lettertype overzicht van Ms-Word overnemen. Let op ! Je doet er echter verstandig aan om meerdere lettertypes aan te geven in je tags, voor het geval dat een browser jouw lettertype niet herkent. Dan neemt de browser automatisch de tweede. Dit ziet er dan als volgt uit: Mijn tekst.
De Mol Wim - Cursus XHTML 2e graad
Pagina 11/41
3.2. Instellen van de lettergrootte De lettergrootte kunnen we op 2 manieren aangeven. Omdat we het over de tag al hebben gehad, beginnen we met deze tag.
Eerste manier: Door middel van size="grootte" in de tag te plaatsen verander je de puntgrootte. De size kan een waarde aannemen van -6 tot +6, waarbij 0 de standaardgrootte van het lettertype van de browser is. Het voorbeeld krijg je nadat de tweede manier is uitgelegd.
Tweede manier: Gebruik van de tag. Deze tag dient eigenlijk om de kopwaarde in te stellen (vergelijk met MS-Word !!) De wordt, zonder spatie, direct gevolgd door een waarde tussen 1 en 6 bv.
Kopieer het onderstaande voorbeeld naar voorbeeld52.htm om het resultaat te bekijken. Voorbeeld52 Voorbeeld lettergrootte Standaard ziet de tekst er zo uit. dit is size - 6 dit is size - 4 dit is size - 2 dit is size 2 dit is size 3 dit is size 6
h6
h3
h1
De Mol Wim - Cursus XHTML 2e graad
Pagina 12/41
Je kunt in een tag ook beide kenmerken, FACE en SIZE, tegelijk aangeven. Kopieer het onderstaande voorbeeld naar voorbeeld53.htm om het resultaat te bekijken. voorbeeld53 Voorbeeld fonts Zie je het resultaat?
Taak 1 XHTML: Ontwerp een html pagina naamklas.htm geef je pagina als titel Taak 1 HTML Op de eerste lijn komt een titel met kopgrootte 1 met de tekst “Mijn gegevens” Op de TWEEDE lijn komt links uitgelijnd je naam + voornaam in lettertype Verdana. De tekengrootte is +1. Als dit lettertype NIET gekend is door de browser moet de browser automatisch Arial als fonttype nemen. Op de derde lijn komt je klas gecentreerd in lettertype Arial met een tekengrootte van +2 sla het resultaat op als taak1.htm in de map “Mijn documenten” op je PC
lettertype Hieronder enkele standaard lettertypes: Arial
Times
Courier New
De Mol Wim - Cursus XHTML 2e graad
Georgia
Verdana
Pagina 13/41
3.3. Stijl tags Nu je weet hoe tags werken, een klein overzichtje met stijltags en hun betekenis. opentag
sluittag
betekenis
Bold
Vetgedrukt
Italic
Cursief
Underline
Onderstreept
TeleType
Typmachine
We gaan bovenstaande tags nu als volgt plaatsen in in mijnwebpagina.htm Mijn eerste pagina Dit is mijn eerste pagina en ik ben er trots op !! Sla het bestand in mijnwebpagina.htm op en vernieuw het browservenster.
De Mol Wim - Cursus XHTML 2e graad
Pagina 14/41
Let op ! Je ziet dus dat het mogelijk is meerdere tags achter elkaar te plaatsen en door elkaar te laten lopen. Als je een tekst bijvoorbeeld zowel vetgedrukt als cursief wil hebben, zou de tag er als volgt uitzien: Wim De Mol
Dit noemt men het zogenaamd “nesten” van tags. Let op ! Je ziet dat de tags overzichtelijk, dus in de juiste volgorde zijn afgesloten. Dit is zeer belangrijk. Als je later, als het wat ingewikkelder wordt namelijk een klein foutje maakt, moet je je fout wel gemakkelijk kunnen terugvinden. Sluit daarom je tags steeds af zoals hierboven.
De Mol Wim - Cursus XHTML 2e graad
Pagina 15/41
Taak 2 : XHTML Maak een webpagina : Schoolagenda De titel van de pagina zelf is: ‘Schoolagenda’ In de body plaats je als eerste regel dezelfde titel, onderlijnd en vet. De alinea eronder zet je de dag van vandaag in het vet (bv MAANDAG) De volgende lijnen daaronder komen jouw vakken, de opmaak is cursief met daarnaast (zonder opmaak) de geziene leerstof van dat vak. Doe hetzelfde voor DINSDAG en WOENSDAG De voorlaatste lijn van je pagina is een blanco lijn. De laatste lijn bestaat uit een horizontale lijn. Deze kan je bekomen door de tag te plaatsen in je pagina. Sla het geheel op in de map “Mijn Documenten” als taak2.htm Controleer dit alles in de browser.
Wat moet ik onthouden ? …. • •
Tags steeds in de juiste volgorde afsluiten opentag
sluittag
betekenis
Bold
Vetgedrukt
Italic
Cursief
Underline
Onderstreept
TeleType
Typmachine
stijl tags Tags die met de stijl, dus met de opmaak te maken hebben van de webpagina.
De Mol Wim - Cursus XHTML 2e graad
Pagina 16/41
3.4. Plaatsing tags Na deze les kan ik …. • •
Een tekst afbreken door een paragraaf of een ‘break’ toe te voegen in mijn webpagina. Extra spaties toevoegen aan tekst binnen mijn webpagina.
•
Achtergrondkleur en tekstkleur wijzigen binnen mijn webpagina
De
tag wordt gebruikt om tekst of afbeeldingen op je webpagina te centreren. Je kunt deze tag op dezelfde manier gebruiken als de stijltags uit de vorige bladzijden. Om de andere tags uit te leggen is het makkelijker dat je eerst de onderstaande tekst kopieert naar je kladblok, zodat je aan de hand daarvan het effect van de verschillende tags kunt zien. De voorbeelden staan op http://humaniora.be in het menu Informatica Voorbeeld41.htm Mijn eerste pagina De zin die je nu zit te lezen zal ik niet afbreken door middel van de tags. Het nut hiervan is dat je kunt zien dat zonder tags, alle tekst één hele lang zin
wordt. Zelfs al gebruik ik de enter toets; zie je wel dat
Het klopt wat ik zeg? Gezien ? dan gaan we verder door nu wél een break te plaatsen. Je ziet dat ik nu wel op een nieuwe regel begin. Of, door 2 breaks te plaatsen, 2 regels lager.
Dat kan ook sneller, door gebruik te maken van de paragraaf tag. Kijk maar.
Begin van nieuwe paragraaf. En meteen het einde van de paragraaf.
Nu nog even een paar woorden centreren:
Het Midden
De Mol Wim - Cursus XHTML 2e graad
Pagina 17/41
wordt dus gebruikt om zinnen te beëindigen en naar de volgende regel te gaan.
doet in principe hetzelfde, alleen voegt
nog een extra blanco regel toe. Let op ! Je ziet dat de "enters" in het kladblok geen effect hebben op de pagina, zoals deze in de browser te zien is. Je kan dus 7 keer op de enter toets duwen in kladblok, maar op de pagina in de browser zal je tekst niet omlaag gaan. Je hebt dus echt de of de
nodig om naar de volgende regel te gaan. Om uit te leggen waarom er voor de spatie een aparte code is kopieer je volgende tekst naar voorbeeld42.htm Voorbeeld42.htm
Mijn eerste pagina Het maakt niet uit hoeveel spaties ik gebruik, je zal er maar 1 te zien krijgen, kijk maar :
1 1 1 1 1 2 2 2 2 2 3 3 3 3 3 4
4
5
5
4
4 5
4 5
5
Dit kan als volgt worden opgelost :
6 6 6
6 6 6
Ok ?
De Mol Wim - Cursus XHTML 2e graad
Pagina 18/41
Let op ! Je ziet dus dat je slechts de eerste spatie die je in kladblok hebt gegeven terugziet op de pagina in de browser. 7 spaties na elkaar zullen er op de pagina in de browser dus net hetzelfde uitzien als 1 spatie. Om meerdere spaties achter elkaar te krijgen, die ook zichtbaar zijn in een browser, moet je voor elke spatie die je wilt typen. Om een scheidingslijn op je pagina te krijgen kun je gebruik maken van de tag. Door het onderstaande te kopieren naar bestand voorbeeld43.htm zul je zien wat voor lijnen je allemaal kunt maken met de tag. Voorbeeld43.htm Mijn eerste pagina
Een gewone lijn :
Een lijn die 100 pixels breed is :
Een lijn die 100 pixels hoog is :
Een lijn die 60 pixels breed en 60 pixels hoog is :
Je kunt de breedte van de lijn ook aangeven in procenten van de totale breedte van de pagina. Dat ziet er dan zo uit :
Een lijn heeft standaard een schaduw, wil je deze schaduw niet, dan kan dat als volgt :
Let op ! In het bovenstaande voorbeeld plaatsen we binnen in de tag wat extra opdrachten. Zoals SIZE, WIDTH en NOSHADE.
De Mol Wim - Cursus XHTML 2e graad
Pagina 19/41
Zo is het bijvoorbeeld ook mogelijk om in de
tag een uitlijning aan te geven. Dit doen we door in de
tag ALIGN="plaats" te zetten ( Zie het onderstaande voorbeeld) Voorbeeld44.htm
Mijn eerste pagina Ik zal nu laten zien hoe je door middel van uitlijning je tekst kan plaatsen.
Nu staat de tekst links. Tekst staat standaard links, dus echt veel heb je aan dit voorbeeld niet.
Nu staat de tekst in het centrum van de pagina. Hier heb je misschien al wat meer aan, hoewel je hiervoor ook gewoon de
center-tag kunt gebruiken.
Nu staat de tekst rechts. Zie je ? Het werkt dus....
Wat ook wel goed om te weten is, is dat de browser altijd standaard, zoals je bijvoorbeeld ook in MS-Word gewend bent, een marge aanhoudt. Wil je dat stukje wit weghebben of groter maken dan kun je dit aanpassen door de opdrachten LEFTMARGIN="grootte" en TOPMARGIN="grootte" in de tag te plaatsen, waarbij grootte staat voor een getal. Zet je de grootte op 0, dan sluit de tekst zich direct aan de browserwand aan. Probeer dit maar eens!
De Mol Wim - Cursus XHTML 2e graad
Pagina 20/41
Taak 3 XHTML: Maak een nieuw XHTML document en sla het op als taak3.htm in de map “Mijn documenten” Geef je pagina als titel Taak 3 Zorg ervoor dat op de 3de tekstregel van bovenaan te beginnen je naam+ voornaam en je klas gecentreerd zal worden. Zorg dat er tussen je naam + voornaam en je klas 2 spaties staan. Onder je naam en voornaam en klas komt een horizontale lijn over de ganse breedte van het scherm. Resultaat Taak 3:
opdrachten Dit zijn elementen die je in bepaalde tags kan plaatsen. Zo kun je in de body tag bijvoorbeeld de opdrachten : bgcolor, link, alink, margin, e.d. plaatsen en in de table tag de opdrachten border, bgcolor, width, cellpadding.
De Mol Wim - Cursus XHTML 2e graad
Pagina 21/41
3.5. Kleuren tags Allereerst iets over kleuren op het internet.
De browser herkent kleuren bij hun echte naam, dus rood, wit blauw. Wel in het Engels natuurlijk, dus RED, WHITE en BLUE. Maar daar blijft het niet bij! Als je namelijk gaat nadenken hoeveel kleuren je zou kunnen opnoemen kom je natuurlijk niet ver… Daarom zijn de zogenaamde HEX Codes uitgevonden, zodat je naast de standaard kleuren ook alle variaties op deze kleuren kunt gebruiken door middel van een code. Deze codes bestaan uit 6 cijfers of letters hex code
kleur
#FFFFFF
wit
#000000
zwart
#AEAEF9
licht blauw
#6161F3
iets donkerder blauw
#0D0DA6
nog donkerder blauw
visueel
Zo zijn er in totaal 16.777.215 kleurcodes. De kleurcodes kun je terugvinden in de grote tekenprogramma's van Adobe, Corel en Macromedia. Je kan deze codes uiteraard ook terugvinden op tal van websites bv.: http://www.jobonet.nl/webcolors/safecolors.html of door te zoeken met het sleutelwoord “webkleuren” in Google.
De Mol Wim - Cursus XHTML 2e graad
Pagina 22/41
3.5.1. Achtergrondkleur Om een achtergrondkleur aan je pagina te geven moet je in de tag bgcolor="kleur/code" plaatsen. Dit kan je zien in het voorbeeld hieronder. Voorbeeld61
Werken met kleuren Deze voorbeeldpagina heeft een rode achtergrondkleur.
Voorbeeld62 Werken met kleuren Deze voorbeeldpagina heeft een mooie roze achtergrondkleur.
De Mol Wim - Cursus XHTML 2e graad
Pagina 23/41
3.5.2. Tekstkleur Om de tekst een kleur te geven, volg je in principe dezelfde werkwijze als hierboven. Je kunt de tekst een kleur geven door color="kleur/code" in de tag te plaatsen. Voorbeeld63 Werken met kleuren
voorbeeldtekst in het geel en achtergrond blauw
Deze tekst staat in kleur wit
Hex codes zijn 6 cijfer / letter codes die een kleur voorstellen.
De Mol Wim - Cursus XHTML 2e graad
Pagina 24/41
4. Koppelingen naar andere webpagina’s Na deze les kan ik …. • •
Een koppeling maken van mijn webpagina naar een andere webpagina. De kleuren van een bestaande koppeling aanpassen.
4.1. Plaatsing tags Op bijna elke webpagina staat wel een link of koppeling waarop je kunt klikken, om zo naar een andere pagina te navigeren of simpelweg naar een andere locatie te navigeren binnen dezelfde webpagina. Hieronder zie je een voorbeeld hoe we een tag ingeven om een link of koppeling te maken. omschrijving Van bovenstaande tag zal alleen omschrijving zichtbaar worden. URI
:( Unified Resource Identifier) In ons geval staat hier het adres van de koppeling
DOEL : als hier _BLANK staat zal de koppeling geopend worden in een nieuw venster Probeer eens volgende pagina in te geven: voorbeeld71.htm
Test de oefening in de browser : waarvoor dient de opdracht TARGET = “_blank” ? (test het verschil door deze opdracht bijvoorbeeld eens weg te laten in je webpagina) …………………………………………………………………………………………………….
De Mol Wim - Cursus XHTML 2e graad
Pagina 26/41
Om koppelingen op te laten vallen kunnen we ze een andere kleur geven. Dit doen we door wat extra opdrachten in de tag te zetten.
• • •
LINK="kleur/code" - geeft de kleur van een koppeling aan ALINK="kleur/code" - geeft de kleur van een actieve koppeling aan VLINK="kleur/code" - geeft de kleur aan van de koppelingen die je al eens aangeklikt hebt.
Hieronder staat een voorbeeldje hoe je het bovenstaande in je pagina kunt verwerken.
Taak 4 XHTML Maak een webpagina taak4.htm met als titel “Zoekmachines” Zorg ervoor dat je webpagina een RODE achtergrond heeft. De titel moet eveneens bovenaan je pagina afgebeeld worden, gecentreerd en in KOP 1 formaat. De titel heeft een BLAUWE kleur en is in lettertype ARIAL BLACK Onder de titel plaats je drie koppelingen onder elkaar naar de volgende websites: • • •
Google België Lycos Nederland Altavista
Zoek zelf de adressen op van deze websites. De koppelingen die je toont hebben steeds een witte kleur (opdracht LINK, ALINK,VLINK = allemaal in het wit) en worden altijd in een nieuw venster getoond. Het lettertype van alle koppelingen is Verdana en de lettergrootte = +1 Resultaat :
Test je koppelingen uit door er op te klikken met je muis. URI : Unified Resource Identifier: In ons geval : Het internet adres. Het internetadres van Google is bv. De URI kan ook bijvoorbeeld het adres van een document zijn.
De Mol Wim - Cursus XHTML 2e graad
Pagina 28/41
5. Foto’s plaatsen in een webpagina Om foto’s zichtbaar te maken, moeten we gebruik maken van de volgende tag: Maak -vooraleer de oefeningen in te geven- eerst een map images aan in je home directory ( = op H: ) of wel in de map “Mijn Documenten” op je PC. Map “images” op H:
Download van het internet een foto (liefst een foto in JPG formaat) en plaats deze in de map images op de H: Wijzig de naam van het bestand, geef het de naam FOTO. Op de plaats van "locatie" moet je de locatie aangeven waar je foto zich bevindt. Als de foto op h:/images (of in “Mijn Documenten” ) staat dan is deze locatie: H:/images/FOTO.jpg
De Mol Wim - Cursus XHTML 2e graad
Pagina 29/41
Voorbeeld 81 Foto’s plaatsen in een webpagina
Let op ! Indien de te linken foto en het .htm bestand in dezelfde directory staan, dan is het voor je browser voldoende FOTO.JPG als locatie op te geven. Een JPEG bestand kun je zelf maken maar je kunt hem ook van een andere pagina downloaden. Dit doe je door met de rechtermuisknop op de foto te klikken en vervolgens "opslaan als..." te selecteren. Als je weet wat de afmetingen van je foto zijn kan je deze ook in de tag plaatsen. FOTO.JPG is bijvoorbeeld 540 pixels breed en 406 pixels hoog. Daarom passen we de tag als volgt aan: Je kan deze waarden uiteraard ook wijzigen zodat je foto groter of kleiner zal tonen in het browservenster. We kunnen een zogenaamde tooltip plaatsen op de foto met de ALT opdracht in de tag op te nemen:
De Mol Wim - Cursus XHTML 2e graad
Pagina 30/41
Het effect van deze 2 opdrachten kun je zien door het onderstaande te kopieren naar voorbeeld82.htm : Voorbeeld82
Foto’s plaatsen in een webpagina
Tenslotte kan je van een foto ook een link maken! Dit kan eigenlijk héél simpel door de foto als omschijving bij de linktag in te vullen. Dat gaat als volgt :
De Mol Wim - Cursus XHTML 2e graad
Pagina 31/41
Indien je een foto gebruikt als link, zal er meestal een dikke lijn om de foto te zien zijn. Dit kun je verhelpen door de opdracht border=0 in de tag op te nemen. voorbeeld83
Foto’s plaatsen<br />
<br />
in een webpagina
Bij aanklikken foto : nieuw werkvenster naar Google!
Tooltip : een tekstje dat verschijnt als de bezoeker de cursor boven een element op een webpagina laat rusten
De Mol Wim - Cursus XHTML 2e graad
Pagina 32/41
6. Tabellen De tag voor een tabel is
. De sluittag is uiteraard
. Verder moet je wel eerst het aantal rijen en het aantal kolommen aangeven. Dit doe je op de zelfde manier als je leest. Van links naar rechts, van boven naar beneden. We openen een rij met behulp van de
tag. Voor elke kolom in de rij openen en sluiten we de
tag. Vervolgens sluiten we de rij met
om aan de volgende rij te beginnen. Voorbeeld91:
Voorbeeld tabel
Eerste rij, eerste kolom.
Eerste rij, tweede kolom
Eerste rij, derde kolom
Tweede rij, eerste kolom
Tweede rij, tweede kolom
Tweede rij, derde kolom
De Mol Wim - Cursus XHTML 2e graad
Pagina 33/41
Als je voorgaande voorbeeld in je browser bekijkt, zie je normaal niet veel van de tabel zelf. Dit komt doordat men niet heeft aangegeven hoe dik de lijnen in de tabel moeten zijn. Wil je dat de lijnen wél te zien zijn, dan moet men de opdracht BORDER = insluiten in de
tag. Voorbeeld:
Voor lijndikte vul je vervolgens de dikte van de lijnen in. Bij dikte "0" zijn de lijnen onzichtbaar, hoe hoger het getal dat je invult, hoe dikker de lijnen worden.
De Mol Wim - Cursus XHTML 2e graad
Pagina 34/41
6.1. Tabelgrootte De grootte van de tabel en de cellen afzonderlijk kun je op 2 manieren aangeven ; 1. Je geeft enkel de grootte van de tabel aan. De cellen zullen zelf opgedeeld worden, en zullen allen even groot zijn. Dit kun je doen door de opdrachten WIDTH="tabelbreedte" en HEIGHT="tabelhoogte" in de
tag op te nemen. De
tag ziet er dan als volgt uit :
voorbeeld92 Voorbeeld tabel
1 - 1
1 - 2
2 - 1
2 - 2
De Mol Wim - Cursus XHTML 2e graad
Pagina 35/41
2. Je geeft alléén de afmetingen van de cellen aan. Dus geen afmetingen voor de tabel zelf. Dit kun je doen door in elke
tag de opdracht WIDTH en HEIGHT aan te geven. Hieronder een voorbeeld van een tabel van 2 bij 2. voorbeeld93 voorbeeld tabellen
1 - 1
1 - 2
2 - 1
2 - 2
De Mol Wim - Cursus XHTML 2e graad
Pagina 36/41
6.2. De opdrachten CELLSPACING en CELLPADDING Door de opdracht CELLSPACING="getal" aan de
tag toe te voegen, kun je de ruimte tussen de cellen onderling aan geven.
CELLSPACING
is
hier
0
CELLSPACING
is
hier
20
Door de opdracht CELLPADDING="getal" aan de
tag toe te voegen, kun je de ruimte tussen de tekst die in de cel staat en de celwand aan geven. CELLPADDING hier
is 0
CELLPADDING
is
hier
2
De Mol Wim - Cursus XHTML 2e graad
Pagina 37/41
6.3. Kleuren gebruiken in een tabel Wil je je tabel een kleur geven dan kan dat op 2 manieren. Je kunt namelijk de lijnen van de tabel, de borders, kleuren, maar ook de achtergrond van de cellen. De cellen een kleur geven Om alle cellen dezelfde achtergrondkleur te geven dien je dit te vermelden in je
tag. Je dient daar bgcolor="kleur" in te zetten. Laten we nu een eerder gebruikte
tag gaan gebruiken om dit te bewijzen.
Deze
tag geeft dus naast de borderdikte en verschillende afmetingen van de tabel, ook aan dat de tabel een achtergrondkleur moet krijgen. Probeer het maar. Om slechts één specifieke cel een kleurtje te geven, moet je de bgcolor="kleur" in de
tag van de cel zetten. De randen van de tabel een kleur geven De kleuren van de randen van de tabel worden gekenmerkt door een schaduw. De zon komt van linksboven. Dat wil zeggen dat de bovenste lijnen en de linkerlijnen lichte borders zijn. De rechterlijnen en de onderlijnen zijn donker door de schaduw. Dit viel je misschien al op toen je de randen dikker maakte. De lichte randen zijn standaard lichtgrijs, de donkere randen zijn standaard donkergrijs. Wil je nu alle randen van de hele tabel één kleur geven dan kan dat door het volgende in de
tag te zetten : BORDERCOLOR="kleur". De hierboven al gebruikte
tag gaat er dan bijvoorbeeld als volgt uitzien :
De Mol Wim - Cursus XHTML 2e graad
Pagina 38/41
6.4. De opdrachten ROWSPAN en COLSPAN Met de opdrachten ROWSPAN en COLSPAN kan men een aantal rijen of kolommen gaan samenvoegen. Deze opdrachten worden bij de
tag geplaatst. ROWSPAN voegt een aantal rijen samen en werkt dus vertikaal. COLSPAN voegt een aantal cellen samen en werkt dus horizontaal. voorbeeld94
voorbeeld rowspan en colspan opdracht
Tekst A
Tekst B
Tekst C
Tekst D
Tekst E
De Mol Wim - Cursus XHTML 2e graad
Pagina 39/41
Taak 5: XHTML Maak een webpagina waarin je een miniprijslijst van modelspoortreintjes toont in de browser. Geef de pagina als naam taak5.htm en sla deze op in de map “Mijn documenten” De webpagina heeft een donkergrijze achtergrond. Bovenaan links toon je het logo van de firma, dit is een foto : logo.jpg Onder het logo staat de titel “Prijslijst”. Deze titel staat in het Lucida handwriting lettertype, de tekengrootte = +3 Indien dit lettertype onbekend voor de browser toont men het Arial lettertype. De kleur van de titel is blauw (Blue) Maak een tabel met 3 rijen en 3 kolommen: De breedte en hoogte van de cellen is 400, ruimte tussen de tekst en de celwand = 10 In de linkerkolom toon je een korte omschrijving van de producten (Marklin en Fleischmann) Zorg ervoor dat deze productomschrijvingen koppelingen zijn naar de betreffende websites (http://www.marklin.be en http://www.fleischmann.de) Zorg dat aparte browservensters worden geopend bij het aanklikken. Toon ook tooltips “Website van Marklin” en “Website van Fleischmann” als men met de muiscursor over de betreffende koppelingen beweegt. In het middenkolom van de tabel plaats je een foto van je producten (trein1.jpg voor Marklin en trein2.jpg voor Fleischmann) De breedte en hoogte van beide foto’s is 250 en 100. In de derde kolom toon je de prijzen (respectievelijk 150 en 300€) in lettertype Verdana, kleur Zwart (Black) en de lettergrootte = +1 Indien dit lettertype onbekend voor de browser toont men het Arial lettertype. In de onderste rij in het midden (gecentreerd) toont men een koppeling naar de website van Google België, te openen in een apart browservenster bij aanklikken.
