LES 2 – INDERDAAD, JE MOET DE WEBBROWSER AANWIJZINGEN GEVEN, MAAR DAN WEL VOLGENS DE AFGESPROKEN REGELS In les 1 hebben we op een webpagina aan een gedicht de beoogde vorm gegeven. We deden dit met het html-code-element <br>, de code voor het afbreken van een regel, beginnen van een nieuwe regel. We boden het gedicht aldus aan de browser aan: Wonderlijk<br>oprecht<br>gedicht<br><br>verlicht<br>sticht <br><br>steunt<br>sterkt -<br><br>wonderlijk<br>oprecht<br>gedicht De browser herkende <br> waarschijnlijk als een html code element en zette het geheel daarna volgens de html-afspraak 'hoe te handelen met code element <br>' op het beeldscherm. We kunnen er evenwel niet op vertrouwen dat we ver komen met de aanpak uit Les 1. We gaan daarom vanaf Les 2 de afgesproken regels volgen. Maar eerst, waar slaan de letters 'HTML' op? De HT van HTML staat voor Hypertext, voor het wonder via tekstverwijzingen, links, de wereld rond kunnen surfen. De M staat voor Markup; dat is markeren, dat wil zeggen de tekst door markeertekens een vorm, structuur geven; markeertekens? ja, <br> bijvoorbeeld, of noem markeertekens technischer code-element, tag. In Les 1 werd tekst met <br> vorm gegeven, gestructureerd tot een gedichtvorm. De laatste, de L van Language, het Engels voor taal. HTML is computertechnisch gezien een betrekkelijk eenvoudige markeertaal waarmee we tekst, inhoud, vorm geven, structureren tot webpagina die we kunnen linken aan ontelbare hoeveelheden webpagina's op servers over de gehele wereld. Een volgende opmerking vooraf. Een regel afbreken, een nieuwe regel beginnen, gebeurt door <br> op de plek in de tekst te schrijven. Stel u wil iets in uw tekst benadrukken door het 'vet' weer te geven. Dat kan met het tweedelig code element <strong>...</strong>. Als u met <strong> in de tekst doorgeeft dat de browser vanaf die bepaalde plek enige tekst 'vet' moet weergegeven, moet u ook doorgeven waar de browser moet ophouden de tekst vet weer te geven. Dat gebeurt door het code element te herhalen met een / er in: </strong>. Andere voorbeelden zijn <html>..</html>, <head>..</head>, <title>...</title>, <body>..</body>. We komen ze in deze les nog tegen, vergezeld van enige toelichting. Zelf aan de slag Genoeg voorlopig. Het is een practicum. Typ onderstaande html passage over in kladblok. Maak op uw pc een nieuwe map aan, met de naam practicum of wat voor naam ook, en sla het typwerk op als html bestand, met bijvoorbeeld de naam: model.html <!DOCTYPE html> <html lang=nl> <head> <title>Titel van de webpagina</title> <meta charset=utf-8> <meta name=description content=“een beschrijving van de inhoud van de webpagina”> <meta name=keywords content=”met kernwoorden de inhoud duiden”> </head> <body> Hier de inhoud van de webpagina. </body> </html> Hieronder herhalen we model.html, en voorzien elke html regel van enige toelichting. De toelichting is geplaatst tussen <!-- -->. Wat tussen <!-- --> staat, slaat de browser over, zet de browser niet op het scherm. (Het is wel door iedereen op Internet te lezen, als men de bron van de webpagina oproept.) <!DOCTYPE html> <!-- Doctype is een verkorte aanduiding van 'document type declaration'. Met doctype geef je aan met welke versie van html, de browser rekening moet houden. De simpele aanduiding html betekent dat het HTML5 betreft. Deze nieuwe versie is nog niet geheel af, Maar kan gewoon gebruikt. Eerdere versies werden met meer uitgebreide omschrijvingen getypeerd. --> <html lang=nl> <!-- Lang is de verkorting van het Engelse woord language ofwel taal; en met nl erbij betreft het de Nederlandse taal. De taal van de html-code tussen < > mag dan wel Engels zijn; met die Engelstalige code <html lang=nl> wordt de browser aldus vast meegedeeld dat de webpagina in het Nederlands staat geschreven. Dat is trouwens ook in de richting van zoekmachines en computer-voorlees-programma's attent. --> <head> <title>Titel van de webpagina</title> <!-- Belangrijk de titel van een webpagina. De titel – of een deel van de titel – verschijnt in het bovenste randje van de browser. Nog belangrijker is om aan elke webpagina een eigen titel meegeven. Zoekmachines raken dan minder snel van streek. En als ook in de inhoudelijke bijdragen van de website zelf de termen uit de titel hier en daar opduiken, zijn zoekmachines helemaal gelukkig. Zo heet de website van De Ridder Dichters, Poëzie. Dat is wel erg algemeen, maar... het is Poëzie gekoppeld aan De Ridder Dichters, Gedicht van de week, etc. Neemt de omvang van de website toe, dan wordt het bewaken van de toegankelijkheid een serieus punt. Maar dit terzijde. --> <meta charset=utf-8> <!-- Dat is een keuze uit computercoderingen. Char is een verkorting van character, in de betekenis van teken. Utf-8 is dan een bepaalde verzameling van tekens. Je zou kunnen veronderstellen dat de ene of andere tekenset mogelijk beter of minder goed past bij Chinees, Japans of West-Europees. Misschien volgt hier in de toekomst ook nog een vereenvoudiging. --> <meta name=description content=“Beschrijving van de webpagina”> <!-- Probeer in een niet te lange zin een treffende beschrijving te geven van de inhoud van de webpagina. Dat is ook het beste. 'Bestudeer' in dit verband eens de tekst van zoekresultaten van bijvoorbeeld zoekmachine Google. --> <meta name=keywords content=”Kernwoorden”> <!-- Nog eens de kern van de inhoud beschrijven, nu in trefwoorden. Van elkaar gescheiden door een komma. Het belang van trefwoorden is afgenomen, door het misbruik (belangrijker willen zijn door ten onrechte allerlei trefwoorden vermelden waarover niets te vinden is in de webpagina's.) Beheerders van zoekmachines worden niet graag voor de gek gehouden. Desondanks kun je het wel blijven gebruiken. Je weet maar nooit. Beperk het, geef een handvol trefwoorden. --> </head> <body> <!-- Wordt in de <head>..</head> sectie voornamelijk 'technische' informatie voor de browser, zoekmachines, e.d. Vermeld. In de <body>..</body> sectie komt de inhoud van webpagina, dus de inhoud die bezoekers van de webpagina zien. Dat is volgens de html-afspraken dus ook de plaats voor de gedichtregel met <br> uit Les 1. Hieronder wordt het er in gezet. --> Wonderlijk<br>oprecht<br>gedicht<br><br>verlicht<br>sticht <br><br>steunt<br>sterkt -<br><br>wonderlijk<br>oprecht<br>gedicht </body> </html> Nog een oefening 1. Open in kladblok het bestand model.html 2. Verwijder in het onderdeel <body>..</body> de tekst: Hier de inhoud van de webpagina. 3. Kopieer de dichtregel: Wonderlijk<br>oprecht<br>gedicht<br><br>verlicht<br>sticht <br><br>steunt<br>sterkt -<br><br>wonderlijk<br>oprecht<br>gedicht. 4. Plak het gekopieerde in het onderdeel <body>..</body>. 5. Sla het – LET OP – onder een ANDERE naam op in de map die u aangemaakt hebt. Wij noemden de map: Practicum, en het bestand slaan we op onder de naam: les-html-gedicht.html 6. Open het opgeslagen bestand in de browser. <!DOCTYPE html> <html lang=nl> <head> <title>Titel van de webpagina</title> <meta charset=utf-8> <meta name=description content=“Beschrijving van de website”> <meta name=keywords content=”Kernwoorden”> </head> <body> Wonderlijk<br>oprecht<br>gedicht<br><br>verlicht<br>sticht <br><br>steunt<br>sterkt -<br><br>wonderlijk<br>oprecht<br>gedicht </body> </html> 7. De browser laat in het beeldscherm precies hetzelfde op dezelfde plek zien als in Les 1. Klopt. Het verschil is dat de browsers, zoekmachines en computer-voorlees-programma's ons wel aardiger gaan vinden om met samen te werken, nu we de afgesproken regels toepassen. En het verschil is dat we nu een – okay, een kleine – hele webpagina hebben gemaakt. Tot zover even de eerste, voorzichtige kennismaking met html. In Les 3 gaan we kennis maken met css. Faas van Rietschoten 2014
© Copyright 2024 ExpyDoc
