Crashcursus HTML en CSS 2013
Websites en je browser Als je in je browser een website opvraagt in je adresbalk, krijg je één webpagina te zien. Die webpagina kan op allerlei manieren gemaakt zijn, bijv: Met een speciaal programma Met alleen kladblok Met een CMS als WordPress Met een CMS van tienduizenden euro’s of meer Uiteindelijk zie je één webpagina in je browser
Een webpagina Ongeacht hoe de pagina gemaakt is, of hoe die heet, het resultaat dat je browser geleverd krijgt, is altijd een HTML-pagina Een HTML-pagina is altijd een puur tekstbestand, met de extensie .htm of .html, Het is een voor mensen leesbaar bestand! In elke browser kun je altijd dat tekstbestand zichtbaar maken door de broncode op te vragen (rechtsklikken op de pagina) Voorbeeld: webcursus.pc-coach.nl
HTML-pagina Een HTML pagina is geschreven in HTML HyperText Markup Language Het gaat om een taal die hypertext mogelijk maakt, d.w.z. dat er via links naar andere pagina’s (op het WWW) gesprongen kan worden Het gaat om een taal die markup gebruikt om de structuur van de pagina weer te geven: de elementen van de pagina staan tussen ‘labels’, tags in HTML genaamd.
De onderdelen en de structuur van de echte flaptekst van dit boek: Koptekst Header Afbeelding Onderschrift Paragraaf (alinea) met twee zachte returns Sidebar (zijkolom) Paragraaf (alinea) (Ongeordende) lijst met 4 lijstitems Content (Hoofdinhoud) Paragraaf (alinea) Afbeelding Footer Afbeelding Afbeelding
De onderdelen van de pagina Header Kop tekst Sidebar Plaatje Afbeelding Onderschrift Content Alinea Zachte return Lijst Lijstitem Footer De gekleurde blokken zijn de 22 html-onderdelen van de pagina
De essentie van HTML (1) Pagina-elementen staan tussen tags Bijv. <h1>Dit is een kop</h1> De tags zijn instructies voor de browser Je hebt begin- en eindtags (<img> en <br> niet) De <div> tag is bedoeld om elementen samen te ‘bundelen’ Tags kunnen een ‘id’ of een ‘class’ hebben, d.w.z. een naam die aan een CSS stijl gekoppeld is.
De HTML-onderdelen van de pagina <body> <div id = “header”> <h1> <div id = “sidebar”> <figure> <img> <figcaption <div id = “content”> <p> <br> <ul> <li> <div id = “footer”>
CSS, de essentie (1) CSS is de afkorting van Cascading Style Sheets CSS is de taal waarmee HTML-elementen kunnen worden vormgegeven Dat gaat door vormgevingsregels (rules) te maken. Elke rule bestaat uit een Selector, gevolgd door { } En binnen die 2 accoladehaken : één of meer declaraties, elk eindigend op een ; (puntkomma) Elke declaratie bestaat uit een property : value paar
Een simpele CSS regel Deze regel maakt elke tekst tussen <p> en <p> rood en geeft de alinea een linkermarge van 20 pixels p { color : red; margin-left : 20px; } Twee DECLARATIES PROPERTIES (Eigenschappen) VALUES (Waarden) SELECTOR (een paragraaf in dit geval)
De pagina in HTML gemaakt en met CSS (lelijk) opgemaakt:
De werkwijze in een webeditor bekijken Webuilder 2014 Een ‘echte’ code-editor (voor meerdere web-talen) De demonstratie van de opbouw van de webpagina bekijken Demonstratie Webuilder (de demonstratie is (niet-dynamisch) te zien in de volgende dia’s)
Hier zie je het minimale basis stramien van elke HTML(5) pagina Het voorbeeldscherm is uiteraard nog leeg
Het eerste element wordt toegevoegd: Een <div> met de id “header” Het voorbeeldscherm is nog steeds leeg: er is nog geen inhoud!
De overige elementen worden toegevoegd: Nog drie div’s met hun eigen id. Het voorbeeldscherm is nog steeds leeg: er is nog geen inhoud!
Een H1 kop in de div “header” De browser toont de kop
Losse tekst in de div “content” Er is nog geen structuur: alle regeleinden en eventuele onnodige spaties worden niet weergegeven
De tekst gestructureerd in 2x <p> In de eerste p zijn 2x <br> Een bolletjeslijst is toegevoegd De browser geeft ruimte tussen <p>’s aan, en nieuwe regels na een <br>. En de lijst wordt goed weergegeven
De derde alinea is toegevoegd De derde alinea wordt weergegeven
De div “sidebar” is gevuld met <figure> en die weer met <img> (afbeelding) en <figcaption> (onderschrift) Hier is niets veranderd: de afbeelding is er nog niet en het bijschrift ook nog niet
De afbeelding wordt getoond. Het <img> element heeft inhoud gekregen, de source van de afbeelding is ingevuld De afbeelding wordt getoond.
De <figcaption> is gevuld Het onderschrift wordt weergegeven
De “footer’’ heeft 3 afbeeldingen (<img> gekregen De footer is gevuld
De standaard opmaak (1) De structuur en inhoud is nu klaar, we hebben een HTML-pagina. Die ziet er netjes uit en heeft standaard al een beetje opmaak, zoals: De kop is groot en vet Er is witruimte tussen alinea’s De bolletjes zijn rondjes E.d. Dat beetje opmaak wordt geregeld door je browser.
De standaard opmaak (2) Browsers verschillen onderling vaak een klein beetje in hun standaard opmaak. Het is een goede gewoonte om de stijlregels van de browser eerst te ‘resetten’ en dan je eigen stijlen toe te gaan passen. Het gaat te ver dat bij deze site ook te doen, maar de pagina zou er dan als volgt uitzien:
Een ‘stijlloze’ pagina
Dat heeft nog geen consequenties, want… In de <head> sectie is een linkregel aangemaakt naar een (nog leeg) stylesheet-bestand. Dat heeft nog geen consequenties, want…
Het CSS-bestand is nog geheel leeg Dus nog geen opmaak!
Het lettertype is veranderd (vergelijk vorige dia) Er is een CSS-regel gemaakt voor de <body>-tag om het tahoma lettertype te gebruiken Het lettertype is veranderd (vergelijk vorige dia)
De H1 heeft dezelfde achtergrondkleur als de div “header” De div die header heet, heeft een breedte en een achtergrondkleur gekregen De H1 heeft dezelfde achtergrondkleur als de div “header”
De footer is even breed als de header: De div die footer heet, heeft een breedte en een rode achtergrondkleur gekregen en wat extra ruimte (padding) rondom De footer is even breed als de header: 2x 10px voor de padding en een breedte van 630px = 650px
De content breedte (400px) + de marge (200px) is precies 650px De div die content heet, heeft een breedte en een achtergrondkleur gekregen en een linker marge De content breedte (400px) + de marge (200px) is precies 650px
Alle divs hebben een gestippelde zwarte rand gekregen, met 5px grote stippen om de divs tijdelijk goed zichtbaar te maken Hier zijn de divs
De div “sidebar” heeft een breedte van 170px gekregen, een paarse achtergrond en de ‘float’ eigenschap, die hem links van de content neerzet. Floating is complex, wordt heel veel gebruikt in CSS om elementen die normaal onder elkaar staan, naast elkaar te zetten
De h1 in de header is aangepast en de stippellijnen voor alle div’s zijn weg- ‘gecommentarieerd’.
Er is een link (koppeling) aangebracht om naar de site van Peter Doolaard te kunnen gaan
De gelinkte pagina http://www.peterdoolaard.nl
De essentie van HTML (2) Een HTML pagina bestaat uit een specifieke indeling: Een DOCTYPE (de HTML-versie) Een HTML sectie met daarin het <head> gedeelte met daarin administratieve gegevens, met in ieder geval de titel het <body> gedeelte waarin de zichtbare inhoud van de pagina staat. Een pagina kan gekoppeld zijn aan een of meer CSS-bestanden (via de <link>tag)
HTML (3) Enkele belangrijke tags: <h1> t/m <h6> Headings (= koppen) <p> Paragrafen (= alinea) <br> Break (= zachte return) <ul> Unordered list (= meestal bolletjes) <ol> Ordered list (= meestal nummers e.d) <li> List Item (lijst item in een <ul> of <ol>) <a> Anchor (Anker = link) <div> Division (= divisie) <img> Image (= verwijzing naar afbeelding)
CSS, de essentie (Herhaling) CSS is de afkorting van Cascading Style Sheets CSS is de taal waarmee HTML-elementen kunnen worden vormgegeven Dat gaat door regels (rules) te schrijven die gekoppeld worden aan relevante HTML-elementen Elke rule bestaat uit een Selector Een of meer declaraties tussen { } (accoladehaken) Een declaratie bestaat uit een property:value paar
Een simpele CSS regel (Herhaling) Deze regel maakt elke tekst tussen <p> en <p> rood en geeft de alinea een linkermarge van 20 pixels p { color : red; margin-left : 20px; } Twee DECLARATIES PROPERTIES VALUES SELECTOR (een paragraaf in dit geval)
Veel voorkomende CSS properties Letters: font-family, font-size, font-style, font-weight Kleuren: color, backgroud-color Alinea’s: line-height, text-align, Algemeen: height, width, margin (top ,left, right, bottom), padding (top ,left, right, bottom), border, background-image Layout: float (left, right)
Veel voorkomende values Grootte (dikte, breedte, hoogte): px, %, em Positie: left, right, center, top, bottom Letterstijl: italic, normal Lettergewicht: bold, normal Lettertype: arial, tahoma, verdana, helvetica etc. Kleuren: kleurnaam, RGB, hexadecmaal (#F345D2)
De selector De selector in een CSS-regel kan een van de volgende vier mogelijkheden zijn: Een HTML-element Een Class Een Identifier Een combinatie van het bovenstaande
CSS-regels met een HTML-element als selector (1) p { color: red; margin-top: 20px; } h2 { font-size: 24px; font-style: italic; Regel 1 geldt voor alle alinea’s. Regel 2 geldt voor alle koppen 2.
CSS-regels met een (zelfgemaakte) ‘class’ als selector (2) .kader { border: 2px solid navy; padding: 4px; } h2.speciaal { font-size: 32px; color: silver; Classes beginnen met een punt! H2 blijft italic op grond van de regel voor de h2 op de vorige dia! Regel 1 geldt voor alle elementen waar .kader aan toegewezen is. Regel 2 geldt alleen voor koppen 2 waar .speciaal aan toegewezen is. Je kunt .speciaal niet aan andere elementen toewijzen!
CSS-regels met een (zelfgemaakte) ‘identifier’ als selector (3) Identifiers beginnen met een hekje! Een specifieke identifier mag maar 1x per pagina voorkomen! Identifiers worden meestal gebruikt voor <div>’s Verder zijn ze hetzelfde als classes: Het zijn stijlnamen voor een html-tag #subnavigatie { color: white; background-color: black; } div#footer{ font-size: 10px; font-family: verdana; De eerste regel geldt voor elk HTML-element waar #subnavigatie aan toegewezen is. De tweede regel alleen voor een div waar #footer aan toegewezen is.
Een CSS-regel met een complexe gecombineerde selector (4) div#footer h2.speciaal{ color:red; } Lees dit soort regels van rechts naar links! Het kan (voor specialisten) overigens nog veel ingewikkelder worden… De regel geldt alleen voor een H2 die de class .speciaal heeft, mits deze zich bevindt in een div die de identifier #footer heeft.
Hoe wijs je een class/id toe? Twee mogelijkheden: Je hebt een rule met als selector een HTML- element geschreven: Dat werkt dan automatisch voor dat HTML-element Je hebt een rule voor een class of een identifier geschreven. Hoe koppel je die dan aan een specifiek HTML-element op je pagina? Zie de volgende dia’s
Een class koppelen aan een HTML element <h1 class=“kader”>Kop met een kader</h1> <h2 class = “speciaal”>Zilveren kop 2, 32px groot</h2> <h3 class=“speciaal”>Standaard H3 kop</h3> Wijs de class toe binnen de haken van de begintag. (en gebruik geen punt bij de naam!) De regel geldt niet voor een H3 die de class .speciaal heeft, want de class hebben we in dia 46 aan H2 verbonden!
Een identifier koppelen aan een HTML element <div id =“subnavigatie”> <p>Witte letters, zwarte achtergrond</p> </div> Wijs de identifier toe binnen de haken van de begintag. (en gebruik geen hekje bij de naam!) Een div waarin de <p> witte letters op een zwarte achtergrond krijgt, want die regel hebben we voor de omsluitende div in dia 47 eerder gemaakt.
Maar er is meer… CSS-regels kun je schrijven op drie plekken: In een apart bestand, zoals bv ‘style.css’ In een <style> </style> blok in de HEAD van de pagina. In de HTML tag zelf.
CSS regels in een apart bestand Het bestand moet dan - in de pagina’s van de website - in de HEAD-sectie gelinkt zijn: <link rel = "stylesheet" type = "text/css" href = "style.css"> Dit is de meest gebruikelijke methode. Er kan in de HEAD-sectie meer dan één stylesheet gekoppeld zijn!
CSS regels in een style blok Je kunt een style-blok maken in de HEAD-sectie van een pagina. De regels daarin gelden alleen voor die ene pagina! <style> body{ background-color; yellow; } </style> Deze regel overruled eventuele regels in het aparte stylesheet!. DEZE pagina krijgt een gele achtergond, onfhankelijk welke achtergond de andere pagina’s standaard krijgen.
CSS regels in een HTML-element Je zet als volgt een styleregel IN de begintag van een HTML- element: <p style=“font-family: arial;”>tekst</p> Dit is geen aanbevolen methode, het is quick en dirty, en dus onoverzichtelijk Deze regel overruled eventuele regels in het aparte stylesheet EN eventuele regels in het Style-blok!
CSS moet, maar kan zeer complex worden In WordPress zul je het zeker willen gebruiken als je jouw site qua uiterlijk een beetje wilt aanpassen. Dat gaan we dus wel een beetje oefenen!
Tot slot: Het werkt nauw HTML en CSS werken nauw: De meest wonderlijke dingen gebeuren of gebeuren juist niet als: Je een < > ( ) of { } vergeet Je een ; vergeet Je een “ vergeet, of een “ ipv een ‘ gebruikt, of andersom Je een verkeerde spatie zet (20 px ipv 20px) Je een = gebruikt als je een : moet gebruiken of andersom Je een - vergeet Dat leer je alleen door ervaring…
Einde crashcursus Overigens, als je je er echt in wilt verdiepen, dan is dit een uitstekend boek, dat wel wat volharding vereist.