•
Extra’s bij HTML en CSS, de basis - 2e editie
Andree Hollander – isbn 978 90 430 1655 1 XX Errata XX Extra tekst: superscript en subscript XX Extra tekst: entiteiten XX Vragen van lezers
html en Css de basis
Errata bij de eerste druk (januari 2009) blz. 14, punt 1, het juiste webadres is www.pearsoneducation.nl/debasis/html.html blz. 53, 54 en 55 De img-elementen moeten worden afgesloten met /> blz. 104, regel 8 van boven ‘geen geel’ moet zijn ‘geen groen’ blz 178 Bij de css-rule met de selector .altkleur ontbreekt de afsluitende accolade
Geen doctype In de meeste browsers kun je de html-code van een webpagina bekijken (zoek naar iets als Page Source of Toon bronversie in een menu dat bijvoorbeeld Weergave of View kan heten). Als u dat regelmatig doet, zult u zien dat er veel webpagina’s zijn zonder een document type declaration vooraf. Het wereldwijde web zou in een klap een flink stuk kleiner worden als browsers deze pagina’s niet meer zouden weergeven. Gelukkig (of helaas) zijn browsers zeer vergevingsgezind. Ze proberen er het beste van te maken en geven ook een incomplete webpagina weer. Sommige mensen vinden dat jammer omdat daardoor slordig werken niet wordt ontmoedigd. Pagina’s die voorzien zijn van een geldig doctype geeft een browser weer in ‘standard-mode’, volgens de norm die in de doctype is genoemd. Zonder geldig doctype schakelt een browser over naar de zogeheten ‘quirks-mode’, een eigenzinnige toestand waarin hij rekening houdt met fouten waarvan bekend is dat ze in oudere versies van browsers voorkwamen. Nadeel van deze toegeeflijke instelling is dat elke browser zijn eigen keuzes maakt. Als webbouwer kun je er dus niet van op aan hoe een pagina bij een websurfer zal worden weergegeven.
2
• Extra’s
Subscript en superscript In sporadische gevallen gebruiken we in een tekst subscript en superscript, bijvoorbeeld in een chemische formule of om vierkante meter aan te geven. In html bestaan daarvoor de elementen sub (voor subscript) en sup (voor superscript). Alles wat tussen <sub> en staat geeft de browser in een kleinere lettergrootte lager gepositioneerd weer. Wat tussen <sup> en staat Hier is een voorbeeld met subscript en een voorbeeld met superscript:
C
De formule voor ammoniak is NH<sub>4OH
Een vloer van 20 m<sup>2
Afbeelding x.1 Superscript en subscript in een tekst
Dit levert het resultaat op dat in afbeelding x-1 te zien is. Om de symbolen die boven en onder de regel staan goed tot hun recht te laten komen, is het meestal gewenst om de regelafstand (eigenschap line-height) voldoende groot te maken.
Nesten van elementen Misschien is het nuttig hier te herhalen dat het toegestaan is om verschillende markeringen tegelijk te gebruiken. In de volgende alinea komt zowel het element strong voor als het element sup:
C
Een vloer van <strong>20 m<sup>2-
In het weergegeven resultaat wordt de superscript 2 ook door het element strong versterkt omdat die zich binnen de twee strong-tags bevindt. Let er in dit soort gevallen op dat u eerst het binnenste element afsluit voordat u het buitenste afsluit. Elk element moet volledig binnen een ander element vallen.
3
html en Css de basis
Entiteiten Speciale tekens, zoals ç, © en é, hebben oorspronkelijk niet op alle computersystemen dezelfde code, waardoor gemakkelijk een ander teken op iemands scherm kan verschijnen dan was bedoeld. Bij het uitwisselen van teksten tussen verschillende typen computers is dit veelvuldig een probleem. De laatste jaren is de ondersteuning van Unicode op gang gekomen, waarmee een deel van de problemen kunnen worden opgelost. Xhtml is gekoppeld aan Unicode. In het boek hebben we vanaf het begin in het stramien UTF-8 opgegeven als tekenverzameling. UTF is een van de varianten van Unicode. Oudere browsers en besturingssystemen waren nog niet ingesteld op Unicode en daarbij kunnen de bijzondere tekens verkeerd weergegeven worden.
Tekenverzameling Een ‘text only’-bestand bevat geen informatie over de opmaak van de tekst. Uitsluitend de binaire codes voor letters, cijfers, leestekens en codes voor tekstelementen als ‘tab’ en ‘nieuwe regel’. Om de tekst te kunnen uitwisselen tussen verschillende computersystemen moet er een duidelijke afspraak bestaan over welke codering gebruikt wordt. Die coderingsafspraak noemt men de tekenverzameling (in het Engels: character set). In de tekenverzameling ligt vast welke tekens ermee kunnen worden aangegeven en welke volgorde wordt aangehouden. Binnen de computerwereld is het lang een rommeltje geweest met die tekenverzamelingen en eigenlijk is het dat nog steeds. Uiteindelijk is een internationale norm afgesproken (ISO-8859-1), maar Microsoft gebruikt een variant daarvan (Windows-1252) die net een beetje afwijkt. Een probleem vormen de niet-westerse alfabetten, zoals het Russisch, Grieks en Arabisch. Daarbij probeert men de tekens van de speciale alfabetten te koppelen aan het westerse alfabet (op de plaats van de a komt de Griekse alfa), maar dat is niet altijd een op een mogelijk. Nog gecompliceerder wordt het met talen die niet op een alfabet zijn gebaseerd, zoals het Chinees.
Unicode Met een theoretische capaciteit van meer dan een miljoen tekens moet Unicode de definitieve oplossing vormen. Unicode is een internationaal aanvaarde afspraak waarbij elk teken zijn eigen codenummer krijgt. Elk teken een getal en bij elk getal hoort nooit meer dan één teken. De kleine letter a heeft nummer 61, de alfa heeft nummer 945. De nummers kunnen op verschillende manieren genoteerd worden in een bestand, net zoals u het nummer 61 ook kan weergeven als 061 of als LXI zonder dat de waarde verandert. Over de verschillende manieren van noteren zijn ook weer afspraken over gemaakt. UTF-8 is een van de genormaliseerde notaties van Unicode. Het staat voor Unicode transformation format. De letters UTF komt u tegen in het stramien voor de webpagina’s van het boek HTML en CSS, de basis.
4
• Extra’s
Binnen html is het probleem met de codering van bijzondere tekens opgelost door niet de tekens zelf op te nemen in de html-tekst, maar een omschrijving van de tekens. Die omschrijvingen noemt men entiteiten. Een entiteit begint met een ampersand en eindigt met een puntkomma. Daartussen staat een afkorting van het symbool. Enkele voorbeelden: ç ç Ç Ç © © € € é é í í ë ë à à ñ ñ
c cedille C cedille copyrightsymbool euroteken e met accent aigu (Engels: accent acute) i met accent aigu (Engels: accent acute) e met trema (Engels: umlaut) a met accent grave n met tilde
De entiteiten zijn ‘case-sensitive’: hoofdletters en kleine letters zijn niet identiek. Kijk maar naar de eerste twee voorbeelden in het rijtje hiervoor. Die verschillen op de tweede letters, bij de een een kleine letters, bij de ander een hoofdletter. Men heeft geprobeerd de afkorting zodanig te maken dat ze relatief makkelijk te onthouden zijn. Als je in het rijtje ziet hoe de e met een trema wordt gemaakt, dan is het niet moeilijk te verzinnen wat de entiteit is voor de letter o met trema: ö Behalve als entiteit, kan een speciaal teken ook weergeven worden als een getal in het decimale of het hexadecimale talstelsel. In plaats van € mag je ook € of € schrijven (maar waarom zou je?). Een overzicht van entiteiten vindt u onder meer op www.w3schools.com/tags/ref_entities.asp.
Op het toetsenbord en toch speciaal Er zijn vier tekens die op de toetsen van het toetsenbord staan en dus eigenlijk niet thuishoren tussen de bijzondere tekens: < < > > & & “ " Ze staan bij de entiteiten omdat ze bij gewoon gebruik in html-code voor verwarring kunnen zorgen. Het kleiner-dan-teken en het groter-dan-teken worden gebruikt bij tags, het ampersandteken & is het begin van een entiteit en het aanhalingsteken wordt binnen tags gebruikt om de waarden van attributen te omsluiten. Om binnen die aanhalingstekens een aanhalingsteken gebruiken, is de entiteitvorm nodig.
5
html en Css de basis
Vaste spatie Er bestaan een paar entiteiten die geen bijbehorend symbool hebben, maar een andere functie vervullen. Het meest gebruikte voorbeeld daarvan is de ‘non-breaking space’ die een spatie laat zien, maar er tegelijk voor zorgt dat op dat punt niet naar een andere regel wordt gesprongen. Om bijvoorbeeld de woorden Van en Dale bij elkaar te houden op een regel, kunt u in html schrijven: Van Dale. Een regel wordt nu nooit afgebroken achter het woord Van. Een andere nuttige toepassing van de vaste spatie is het euroteken vast te laten zitten aan het bijbehorende bedrag. Door te schrijven € 19,99 komt er een spatie tussen het eurosymbool en 19,99, maar zal nooit het euroteken in zijn eentje aan het eind van een regel komen te staan.
Overzicht selectors
6
p, a {background: #eee; }
zowel p-elementen als a-elementen krijgen een lichtgrijze achtergrond
p a {background: #eee; }
alleen a-elementen die zich binnen een p-element bevinden krijgen een lichtgrijze achtergrond
p.a {background: #eee; }
alleen elementen met de klasse a die zich binnen een p-element bevinden krijgen een lichtgrijze achtergrond
.a {background: #eee; }
alle elementen met de klasse a krijgen een lichtgrijze achtergrond
p#a {background: #eee; }
alleen het element met de id a die zich binnen een p-element bevindt krijgt een lichtgrijze achtergrond
• Extra’s
Vragen van lezers Op individuele vragen van lezers kan ik niet ingaan. U krijgt dus geen antwoord op uw mailbericht. Maar als een vraag interessant genoeg lijkt om andere lezers te helpen, neem ik hem op in het pfd-document met Extra’s dat van de website van de uitgever te downloaden is.
Welke text-editor voor HTML? Henk: “Met plezier gebruik ik het boek ‘HTML en CSS, de basis’ over het (leren) maken van websites. Het boek is heel knap geschreven en uitermate geschikt voor zelfstudie. Maar het smaakt naar meer en het roept bij mij een paar vragen op. Wat is eigenlijk het beste te gebruiken? Ik ben zelf geneigd om te zeggen: html en css, omdat dit toch de bron is voor alle websites. WYSIWYG editors, zoals Dreamweaver, schijnen toch vervelende kleine veranderingen te kunnen genereren in de broncode, waardoor de website heel anders komt uit te zien. Heeft u suggesties voor goede text-editors voor HTML? Er is zo verschrikkelijk veel op de markt, zowel gratis als betaalde versies. WYSIWYG-editors genereren code waar moeilijk de weg in is te vinden, dus als u wilt begrijpen welke html en css is gebruikt, dan kunt u het beter zelf doen. U kunt daarbij gebruik maken van een gespecialiseerde editor. Er zijn, zoals u zegt, verschillende progamma’s beschikbaar. U zegt er niet bij of u op Windows of een Mac werkt. Voor beide platforms is er voldoende keuze. Maar u zult zelf moeten kiezen. Niet iedereen vindt elke functie even belangrijk en iedereen heeft andere wensen en een andere smaak. Veel programma’s kunt u voor een tijdje proberen.
HTML-pagina’s maken met WordPad? Sandra: “In het boek HTML en CSS wordt aangegeven dat Wordpad kan gebruikt worden om de oefeningen op te slaan. Dat lukt mij niet. Ik gebruikt Windows XP professional. U kan zich wel voorstellen dat dit een vervelende probleem is, want het boek is dardoor bijna zo goed als nutteloos.” Html- en css-pagina’s kunnen met elke tekstverwerker gemaakt worden, ook met WordPad. Er zijn echter twee vormeisen waaraan zulke pagina’s moeten voldoen. De bestandextensie moet juist zijn (.html of .css) en het moet beslist een tekstbestand (text only) zijn. Als ‘het niet lukt’ dan is het bestand waarschijnlijk niet op de juiste manier als text-only opgeslagen. Kijk naar afbeelding 1.4 op bladzijde 16 en de kadertekst op bladzijde 17 van het boek. Als u dubbelklikt op het symbool van een html-pagina, zal die pagina waarschijnlijk geopend worden in een webbrowser op uw computer. Wilt u de pagina openen in de tekstverwerker, dubbelklik dan niet, maar gebruik de Open-opdracht van het tekstverwerkingsprogramma. 7
html en Css de basis
Hoofdletters en kleine letters Hans: “Mijn site functioneerde offline goed, maar in eerste instantie online niet. Het bleek dat hoofdletters en kleine letters niet door elkaar gebruikt mogen worden in bestands namen.” Dit is een bekend probleem, vandaar dat ik er in het boek een aantal malen op wijs, bijvoorbeeld op bladzijde 18 en 41 en ook in het praktijkvoorbeeld over uploaden achter hoofdstuk 6..
Geen nieuw venster openen Riex: “Ik wil de links op mijn pagina’s openen in een nieuw venster. Ik vind daarover in het boek geen informatie.” In de strict-versies van HTML en XHTML zijn de opdrachten voor het openen van een nieuw venster niet geldig. En met een reden. Het openen van nieuwe vensters is onvriendelijk voor de gebruiker. Het staat hoog in de ergernis-top-10 van websurfers. Webbouwers zouden het niet moeten doen. Lees meer over dit onderwerp op de volgende websites:
www.martinet.nl/articles/20070124 www.microisv.com.ph/blog/stop-opening-links-in-a-new-window.html www.sitepoint.com/article/beware-opening-links-new-window/ http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/nieuwe-vensters/
Komt er een vervolg? Henk: “Komt er een vervolg op het basisboek? Zo nee, wat is volgens u een goed boek als vervolg op het basisboek?” Een vervolg is niet gepland. Het is moeilijk advies te geven voor wie meer wil lezen na HTML en CSS, de basis. Iedereen zoekt iets verschillends in een boek. Kijk op internet of in de boekhandel en zoek een boek dat u bevalt. Zelf vind ik More Eric Meyer on CSS een goed boek, maar dat hoeft niet voor u te gelden.
Afbeeldingen niet zichtbaar Hans: “Zowel bij een jpg- als gif-bestand krijg ik geen afbeelding in mijn webpagina. In Internet Explorer zie ik een rood kruis plus de alt-text; in Firefox komt alleen de alt-text! Wat te doen?”
8
• Extra’s
Herstel de fout die je hebt gemaakt. Als de html goed is, dan zijn er twee mogelijkheden: je hebt een fout gemaakt bij de naam van de afbeeldingen of de afbeeldingen staan niet in hetzelfde mapje als de htmlpagina. Hans: “Dit is nu juist mijn probleem. De namen van de afbeeldingen zijn juist en ook de map is juist! Alles keurig netjes in de map website. Ik sta voor een raadsel. Maar ik heb het volgende ontdekt, weet niet hoe ik het kan veranderen: als ik met mijn rechtermuisknop klik en op scannen kijk (virusscanner), dan geeft ie voor beide bestanden een dubbele naam: .jpg.jpg en .gif.gif. Dit is niet zo bij mijn andere afbeeldingen. Zou dit het probleem kunnen zijn?” Uiteraard is dat het probleem. Dan heb je immers een andere naam. Waarschijnlijk staat ergens ingesteld dat het besturingssysteem de extensies moet verbergen. Hans: “Configuratiescherm > Mapopties; even vinkje weghalen bij de optie extensies voor bekende bestandstype verbergen. Je moet het maar even weten...”
Code van title-attribuut Simon: “Een klein punt waar ik niet uit kom, is de code van het title-attribuut, afbeelding 2.10 op pagina 54. Kan het zijn dat er in die code iets ontbreekt? Wanneer ik hem uitvoer zoals die in het boek staat, verschijnt de tekst uit de code in het scherm van de html-pagina. Dat is niet aan de hand wanneer ik een < voor title zet, maar dan verschijnt er nog geen tooltip in het scherm. Graag hoor ik van je wat ik fout doe of wat er mist in de code.? Het voorbeeld van paragraaf 2.6 is correct. Het is jammer dat je niet je eigen code meestuurt, want nu moet ik gokken wat je verkeerd hebt gedaan. Ik vermoed dat je dit hebt geschreven:
C
Als dat zo is dan heb je de begintag van het h1-element te vroeg afgesloten. Het gaat bij de regel om drie onderdelen:
C The Sound of Music
Is het wat ik vermoed? Wat slordig van mij! Je hebt het helemaal goed. Ik had inderdaad geschreven. Voortaan moet ik dus nog beter opletten. Bedankt dat je zo snel reageerde, en sorry voor het lastig vallen. 9
html en Css de basis
Browserverschillen Chris: “Om te beginnen: Hartelijk dank voor het uitbrengen van het boek HTML en CSS de basis. Ik ben al een eind op weg erin en wil er zeker in doorgaan. Ik heb wel een vraag cq. commentaar: er wordt nergens uitgelegd (of een link naar de uitleg gegeven) om problemen in de coderingsverschillen op te lossen.Ik heb het over de weergave van pagina’s in Firefox en Internet Explorer. Voorbeeld: Een link naar een stylesheet-document wordt wel gevonden in IE, maar niet in FF. De uitslag van oefeningen 5.1 en 5.2 worden zoals uitgelegd in het boek weergegeven in IE, maar niet in FF. Ik ben naar de site van w3.org gegaan om te zoeken naar het probleem, maar heb er niks over kunnen vinden. Ook mijn beste vriend Google liet me in de kou. Daarom stel ik deze vraag aan de meester, wellicht dat die de vraag van de leerling kan beantwoorden.” De reden dat er in het boek niet over browserverschillen wordt gesproken, is dat die er niet zijn. Als je codeert zoals in het boek wordt uitgelegd, zal je webpagina in alle moderne browsers correct worden weergegeven. Als jouw webpagina het niet goed doet in Firefox, heb je een foutje gemaakt. Controleer alle regels nog eens heel nauwkeurig. Waarschijnlijk is het een heel klein dingetje dat je makkelijk over het hoofd ziet, zoals een vergeten aanhalingsteken-sluiten.
10
