Crashcursus HTML en CSS 2013

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 • HyperTextMarkupLanguage • 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 Afbeelding Footer Afbeelding

De onderdelen van de pagina 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

CSS, de essentie (1) • CSS is de afkorting van CascadingStyle 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

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

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!

Er is een CSS-regel gemaakt voor de <body>-tag om het tahoma lettertype te gebruiken Het lettertype is veranderd (vergelijk vorige dia)

De div die header heet, heeft een breedte en een achtergrondkleur gekregen De H1 heeft dezelfde achtergrondkleur als de div “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 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

Alledivs 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 CascadingStyle 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 solidnavy; 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 alleelementen 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 identifiermag 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 #subnavigatieaan toegewezen is. De tweede regel alleen voor een div waar #footeraan 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#footerheeft.

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 rulevoor 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!

Crashcursus HTML en CSS 2013