5. Inhoud, structuur en opmaak met HTML en CSS Het oorspronkelijke doel van HTML was tekstinformatie via het "internet" uitwisselbaar maken onafhankelijk van het computersysteem of het besturingssysteem. HTMLmarkeringen moesten het mogelijk maken om informatie zo te structureren dat een PARSER annex BROWSER die informatie zou kunnen weergeven. Al snel zag ook de bedrijfswereld en de hobby'ist de mogelijkheden van HTML in om zichzelf via het internet (lees: www) voor te stellen. Daarom ontstond al snel de vraag om naast structuurmarkeringen ook stijl- en opmaakmarkeringen aan HTML toe te voegen en werd het oorspronkelijke doel van HTML wat over het hoofd gezien. Met de volgende HTML-code kon u bijvoorbeeld de grootte en de kleur van een bepaald tekstdeel instellen: <font size= 10 color= blue >een stuk tekst</font> Hierdoor ging het oorspronkelijke doel van HTML een beetje verloren. In XHTML ( de nieuwste versie van HTML) mag u om die reden enkel HTML-markeringen gebruiken die iets te maken hebben met de structuur van de pagina. HTML dient voor structuur een inhoud Lijst van alle markup in XHTML 1.1 Markering (tag) beschrijving <!--...--> Een commentaarregel van de webmaster <!DOCTYPE> <a> <abbr> <acronym> <address> <area> <b> <base> <bdo> <big> <blockquote> Het documenttype anker (link) samenvatting acroniem adres Definieert een bepaalde aanklikbare zone in een image map Vetgedrukte tekst Definieert een basis-url voor alle links in de pagina. Definieert de schrijfrichting van de tekst. grote tekst Een lang citaat. Het body-element van de webpagina. Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 39
<br> <button> <caption> <cite> <code> <col> <colgroup> <dd> <del> <div> <dfn> <dl> <dt> <em> <fieldset> <form> <frame> <frameset> line break, lijneinde drukknop table caption citaat weergave van computercode Definieert attributen van tabelkolommen Een groep tabelkolommen. Omschrijving van een definitie Verwijderde tekst Een onderdeel van een document Een begrip uit een definitie Een definitielijst Een definitieterm Beklemtoonde tekst Een verzameling formulierelementen (meestal weergeven als een lijn rond een formulier) Formulier. Een onderliggend venster: HTML kan diverse pagina's in één venster weergeven. Een verzameling van frames <h1> to <h6> Titels van niveau 1 tot 6 <head> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <meta> De HEAD-sectie van een webpagina een regel of lijn HTML-document schuingedrukte tekst Een frame in een ander frame Een afbeelding Een invoerelement in een formulier. Ingevoerde tekst Toetsenbordtekst Een label voor een formulierelement De titel van een frameset. Een onderdeel of element van een lijst. Het 'adres' van een bronbestand (css, javascript...) Een image map Meta-informatie over de pagina Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 40
<noframes> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <samp> <script> <select> <small> <span> <strong> <style> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <title> <tr> <tt> <ul> <var> Een noframes-onderdeel voor webbrowsers die frames niet kunnen weergeven. Een noscript-gedeelte voor webbrowsers die geen scriptingtalen ondersteunen. Een ingesloten object (vb. een Flashbestand) Een genummerde lijst Een groep opties in een formulier. Een optie uit een vervolgkeuzelijst. Een alinea Een parameter voor een object. Vooraf opgemaakte tekst. Een kort citaat. Een voorbeeld van computercode. Een ingevoegd (uitvoerbaar) script. Een vervolgkeuzelijst. Smalle tekst Een bepaald onderdeel in een tekst. Vette tekst Een stijldefinitie (CSS) Kleine tekst onder de regel. Kleine tekst boven de regel (zoals bij vierkante meter) een tabel het 'body'-element van de tabel. Een tabelcel Een groot invoerveld voor tekst in een formulier. De voet van een tabel. De kop van een tabel De kop van een tabel Titel van het HTML-document. Een tabelrij teletype text Niet-genummerde lijst Een variabele Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 41
Tabellen voor opmaak? Dan zit u grondig fout... De bedoeling van een (HTML-)tabel is elementen met elkaar vergelijken. Appelen Peren kleur groen groen vorm rond met kleine inzakking bovenaan boom appelaar perelaar rond met langwerpige afgeronde uitstulping bovenaan Webdesigners gingen al snel tabellen gebruiken als een middel om afbeeldingen exact te positioneren op een pagina. Programma's als Adobe Photoshop maken het zelfs mogelijk om een ontwerp van een afbeelding in stukken te snijden: onderdelen zoals knoppen, banners enz. komen op die manier in verschillende tabelcellen te staan. In heel wat websites (en vaak niet op de minste) worden tabellen gebruikt voor de vormgeving van de webpagina. Het is immers de makkelijkste manier om snel een layout van een webpagina te maken. Ook in Dreamweaver zitten een massa kant-en-klare sjablonen voor webpagina's waarbij wordt uitgegaan van tabellen. Het gaat inderdaad snel om op die manier een layout te bouwen... Maar bij elke aanpassing van de stijl of vormgeving in de toekomst, moet u van nul af aan opnieuw beginnen. De inhouden zitten immers in tabellen en moeten opnieuw worden ingegeven. Tabellen maken het ook behoorlijk moeilijk om webpagina's on-the-fly weer te geven op andere andere platformen (zoals gsm's enz.). Inhoud, structuur en opmaak gescheiden houden We moeten trachten zoveel mogelijk inhoud, structuur en opmaak te scheiden. Tekstverwerkers zoals Microsoft Word gooien alles op een hoopje: een gebruiker tikt een tekst in zonder dat hij hoeft na te denken over enige vorm van structuur en kan meteen ook de tekst opmaken met lettertypes, kleuren enz. Het (correcte) aanmaken van een webpagina kan je best vergelijken met het opstellen van een krantenartikel. De redacteur bepaalt de structuur van alle artikels 1. een kop of titel 2. een korte inleiding of beschrijving 3. een tekst onderverdeeld in alinea's 4. de naam van de auteur 5. een quote Een journalist schrijft een artikel en houdt daarbij rekening met de opgegeven structuur Redacteurs, marketeers en layoutmensen leggen een stijl en opmaak voor de gehele krant vast. Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 42
De layoutafdeling geeft alle structurele elementen een vooraf bepaalde opmaak of stijl. De krant wordt gepubliceerd. Webdesigners nemen al deze taken vaak in hun ééntje voor hun rekening waardoor het gevaar bestaat de verschillende stappen op een hoopje te gooien. Probeer echter steeds rekening te houden met de verschillende fasen in het ontwerp: 1. structuur 2. inhoud 3. opmaak 4. publicatie Ruwweg kunnen we het als volgt stellen: De inhoud van uw webpagina bestaat uit platte tekst zonder opmaak waarbij u echter een structuur vooropstelt. U legt de structuur vast met behulp van HTML 1. een kop of titel: H1, H2... 2. een korte inleiding of beschrijving: metagegevens in de head (description), een p-markering... 3. een tekst onderverdeeld in alinea's: een tekst gemarkeerd door diverse p- tags 4. de naam van de auteur: een label-markering 5. een quote: een blockquote-markering De layout voor de verschillende HTML-elementen (h1, h2, p, label, blockquote...) legt u vast met CSS. Tekstonderdelen insluiten in HTML-markeringen Stop elke tekstonderdeel van uw webpagina in een structurele markering. Schrijf tekst dus steeds in een alinea, quote of titel. Plak tekst nooit los in de body zonder de tekst tussen een markering te plaatsen. Het onderstaande voorbeeld leidt tot een verkeerd gebruik van HTML: </body> Dit is mijn tekst. Correct gebruik: <p> </body> Dit is mijn tekst. Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 43
U kan uiteraard net zoals in een geschreven of gedrukte tekst meerdere alinea's aan een webpagina toevoegen: <p> <p> </body> Dit is een alinea. Dit is nog een alinea. In de BODY-sectie van de webpagina plaatst u dus alle tekstonderdelen tussen "structuur"markeringen. Uw browser parst de structuur-markeringen en geeft ze in de weergave een standaardopmaak: <h>-markeringen staan op afzonderlijke regels en worden groter weergegeven <p>-markeringen starten op een nieuwe regel <ul>- en <li>-markeringen worden als een lijst met "bullets" weergegeven... CSS zorgt voor opmaak en stijl (Cascading Style Sheets) Inhoud en structuur van opmaak scheiden U kan ook markeringen opnemen om de tekst meteen vorm te geven. Zoals hogerop reeds gezegd, is dit een verouderde en achterhaalde techniek van webdesign. Wilt u toekomstgericht denken en werken en vooral tijd besparen op langere termijn, neemt u voor de opmaak uw toevlucht tot CSS of Cascading Style Sheets. HTML-markeringen structureren de diverse onderdelen van de tekstuele inhoud, CSS zorgt voor de opmaak van de diverse onderdelen. De vorm van CSS CSS bepaalt de opmaak of de stijl van de diverse tekstonderdelen: u past een sjabloon toe! U kan dit sjabloon op 2 manieren toekennen: Een sjabloon zorgt voor een eenduidige vorm en layout! In de head tussen <style> en </style> Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 44
In een gekoppeld extern bestand: <link href="stijl.css" rel="stylesheet" type="text/css"> U kan op heel eenvoudige wijze een stijl toekennen aan elke structuurmatige HTMLmarkering: HTML-markering{ eigenschap:waarde; andere eigenschap:waarde; De op die manier door CSS geselecteerde HTML-markering heten we een SELECTOR. Bijvoorbeeld: p{ text-align:center; width:300px; background-color:#cccccc; color:red; Het bovenstaande voorbeeld maakt alle alinea's op dezelfde manier op: tekst van de alinea's wordt gecentreerd de alinea's krijgen een breedte van 300 pixels de alinea's krijgen een lichtgrijze achtergrondkleur tekstkleur van de alinea's is rood Stijlen groeperen Als u voor diverse elementen dezelfde eigenschappen wil instellen, kan u eenvoudig stijlen groeperen. Bijvoorbeeld: aan alle soorten koppen dezelfde kleur toekennen: <html> </html> <head> </head> </body> <style> h1,h2,h3{color:red; </style> <h1>kop 1</h1> <h2>kop 2</h2> <h3>kop 3</h3> Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 45
U kan daarnaast voor elk element afzonderlijk nog aparte eigenschappen vormgeven: <html> <head> <style> h1,h2,h3{ color:red; padding:10px; h1 { border:3px solid black; h2 { border:2px solid blue; h3 { border:1px solid yellow; </style> </head> <h1>kop 1</h1> <h2>kop 2</h2> <h3>kop 3</h3> </body> </html> Stijlklassen: een verschillende opmaak voor dezelfde elementen In het bovenstaande voorbeeld worden alle door CSS geselecteerde HTML-elementen op dezelfde manier opgemaakt. In de praktijk betekent dit dat alle <p>-markeringen, alle <h1>-markeringen enz. op dezelfde manier worden weergegeven. Alhoevel dit voor eenvormigheid in stijl zorgt, is dit ook niet altijd wat u wenst. Een inleiding van een tekst wordt bijvoorbeeld anders weergegeven dan de rest van de alinea's. We nemen een krantenartikel als voorbeeld. De tekst van het artikel bestaat uit een schuingedrukte inleiding. De rest van de tekst wordt normaal weergegeven. Toch staat zowel de inleiding als de rest van de tekst gemarkeerd tussen <p>-tags. In het onderstaande voorbeeld worden alle alinea's inclusief de inleiding uitgevuld en van een blauwe tekst voorzien. <html> <head> <style> p{ text-align:justify; color: blue; Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 46
</head> </style> <h1>schrijven op een foton</h1> <p>amerikaanse natuurkundigen hebben het logo van hun universiteit op één enkel lichtdeeltje getekend. Hoogleraar John Howell van de universiteit van Rochester publiceerde het resultaat van zijn team in de gerenommeerde Physical Review Letters. <p>het klinkt onmogelijk, maar we slaan geen nullen en énen op, maar het hele plaatje, in lichtvorm, aldus project John Howell. Inderdaad onmogelijk, want we geloven er dan ook geen barst van. <p>het sprookje gaat zo: er werd precies één foton door een raster gestuurd waarin een patroon was gemaakt, in dit geval de letters UR. Door de ingewikkelde kwantumeigenschappen van licht, immers deeltje én golf tegelijkertijd, nam het foton het patroon over. Mooi. <p>vervolgens werd het foton afgeremd in een magisch doosje vol cesiumgas van 100 graden celsius, waarin de lichtdeeltjes blijkbaar gecomprimeerd en bewaard kunnen worden. Later kan de foton weer tevoorschijn worden getoverd, en uit de foton het letterpatroon worden gedistilleerd. </html> </body> We willen de inleiding echter schuingedrukt weergeven: de inleiding hoort tot een aparte klasse (een geval apart ;-)). Aan de betrokken alinea kennen we een class-attribuut toe met de naam "inleiding". <p class="inleiding"> vervolgens maken we de klasse aan in het stijlsjabloon: p.inleiding{ font-style: italic; Een klasse moet zelfs niet toegekend worden aan een welbepaald HTML-element. U kan ook een losstaande klasse definiëren en die aan meerdere HTML-elementen toekennen. Het voorbeeld p.inleiding{ font-style:italic; maakt alle <p>-tags met de klasse "inleiding" schuingedrukt. Het voorbeeld.inleiding{ font-style:italic; Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 47
maakt ALLE elementen (dus niet alleen de <p>-tags) met de klasse "inleiding" schuingedrukt. Stijlen en klassen combineren U kan meerdere klassen definieren en ze aan een en hetzelfde element toekennen. Bijvoorbeeld:.inleiding{.opmerking{ font-style:italic; border:1px solid red; Alle elementen met de klasse "inleiding" worden schuingedrukt. Alle elementen met de klasse "opmerking" krijgen een rode rand van 1 pixel. U kan de beide klassen nu aan een element toekennen door de benamingen voor de klassen in het attribuut CLASS op te nemen, gescheiden door een spatie. <p class="opmerking inleiding">tekst De volgorde waarin u de klassen opneemt, speelt geen rol voor de weergave. U mag dus even goed <p class="inleiding opmerking">tekst schrijven. Ook in het stijlschema kan u klassen combineren. Bijvoorbeeld:.inleiding{ background-color:#cccccc;.opmerking{ color:red;.opmerking.inleiding{ border:1px solid black; Het bovenstaande stijlsjabloon heeft het volgende resultaat: Alle elementen met de klasse "inleiding" krijgen een grijze achtergrondkleur. In alle elementen met de klasse "opmerking" wordt de tekst rood weergegeven. Alle elementen met beide klassen krijgen een zwarte boord van 1 pixel. Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 48
ID-selectoren: doelgericht stijlen toekennen Het gebruik van klassen wordt momenteel ondersteund in HTML en XML-gebaseerde formaten als SVG en MathML, maar niet zo goed in XML zelf. U kan echter doelgericht een welbepaald element selecteren door aan het element waaraan u een bepaalde stijl wil toekennen, een ID toe te kennen. Bijvoorbeeld: <p id="inleiding">tekst In het stijlsjabloon gebruikt u in dit geval niet meer de puntnotatie (.inleiding), maar de #- notatie (#inleiding). p#inleiding{font-style:italic; of #inleiding{font-style:italic; Hou er rekening mee dat CSS hoofdlettergevoelig (case-sensitive) is. Als u voor de benamingen van uw selectoren in het stijlschema hoofdletters gebruikt, moet u die hoofdletters ook in de attribuutwaarden gebruiken. Bijvoorbeeld: De CSS-notatie: #Inleiding{ De HTML-notatie: <p id="inleiding">tekst Fout zou zijn: <p id="inleiding">tekst zou tot een foutieve weergave leiden. Een klasse gebruikt u dus best als u aan meerdere elementen dezelfde stijl wil toekennen. ID-selectoren gebruikt u in het geval u aan een welbepaald element een stijl wil toekennen. Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 49
Attribuutselectoren: een krachtig instrument U kan ook alle elementen die een bepaald attribuut bevatten, van een specifieke stijl voorzien. Bijvoorbeeld: Alle afbeeldingen met een TITLE-attribuut een groene boord geven. De HTML-code: <img src="afbeelding.jpg" title="mijn foto"> <img src="afbeelding.jpg"> De CSS-notatie: img[title]{ border:1px solid green; Alle afbeeldingen met het attribuut TITLE krijgen een groene boord, alle afbeeldingen zonder het attribuut TITLE krijgen geen boord. Niet alleen kan u stijlen toekennen aan HTML-elementen met een welbepaald attribuut, u kan zelfs stijlen toekennen aan elementen met een bepaalde attribuutwaarde. Praktische voorbeelden: 1. Links naar welbepaalde websites een andere kleur geven 2. JPG-afbeeldingen een groene rand geven, PNG-afbeeldingen een blauwe rand geven Kris Merckx Webontwikkeling www.computerkit.be 2008 Copyright: Creative Commons License 50