qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty

Transcriptie

1 qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmqwer Basiscursus HTML5 en CSS tyuiopasdfghjklzxcvbnmqwerty Applicatie Ontwikkelaar leerjaar 1 uiopasdfghjklzxcvbnmqwertyui opasdfghjklzxcvbnmqwertyuiop asdfghjklzxcvbnmqwertyuiopas dfghjklzxcvbnmqwertyuiopasdf ghjklzxcvbnmqwertyuiopasdfgh jklzxcvbnmqwertyuiopasdfghjkl zxcvbnmqwertyuiopasdfghjklzx cvbnmqwertyuiopasdfghjklzxcv bnmqwertyuiopasdfghjklzxcvbn mqwertyuiopasdfghjklzxcvbnm qwertyuiopasdfghjklzxcvbnmq wertyuiopasdfghjklzxcvbnmqw ertyuiopasdfghjklzxcvbnmrtyui opasdfghjklzxcvbnmqwertyuiop Arnold Dubbelman

2 HTML5 en CSS Inhoud 1 Indeling HTML document a Plaatjes b Audio en video Links Commentaar Styles Extern Stijlblad Embedded style sheet Inline stylen Lettertype en lettergrootte Fonts (lettertypes) Lettergrootte Schuin: kleinkapitaal: vet: regelafstand letterspacing en wordspacing paragraaf inspringen Hoofdletters/kleine letters Kleuren Boxmodel Linkjes opmaken met CSS Tabellen Lijstjes Een pagina maken Pagina 1 van 90

3 1 Indeling HTML document De tijd van het gefröbel is over. We gaan nu op een professionele manier te werk. Het resultaat is niet meer heilig. We gaan via een standaard werken: - We gaan via de nieuwe HTML 5 standaard werken - We gaan inhoud scheiden van opmaak. Inhoud: HTML, opmaak: CSS. Maak een mappenstructuur. Noem de hoofdmap iets van website en maak onder de map website twee mappen: images en styles. Start Notepad++ op maak een nieuwe pagina via Bestand nieuw. Kopieer de onderstaande regels in de pagina: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>type hier de titel van de pagina</title> </head> <body> </body> </html> Kies nu in Notepad++ voor Bestand Opslaan als: Pagina 2 van 90

4 Kies voor bestandsnaam: pagina1.html gebruik geen spaties in de naam of rare tekens. Kies voor opslaan als: Hyper Tekst Markup Language file Sla de pagina op in het mapje webtest die je hebt aangemaakt in de vorige opdracht. Als het goed is krijgt de pagina nu ook kleurtjes zoals hierboven in de afbeelding te zien is. Zo niet dan heb je waarschijnlijk niet opgeslagen als Hyper Tekst Markup Language file Uitleg van de eerste regel: <!DOCTYPE HTML> Betekent: we houden ons aan de HTML5 standaard. Dit is de nieuwste standaard die nog volop in ontwikkeling is. De browser weet nu dat hij zich aan deze nieuwe regels moet houden. Uitleg tweede regel: <meta http-equiv="content-type" content="text/html; charset=utf-8"> betekent dat het een tekstbestand is en dat dit tekstbestand alleen maar tekens mag bevatten uit de utf-8 standaard. Uiteraard ga ik de utf-8 standaard niet helemaal doornemen. Onthoud: dat zo n beetje alle letters en Pagina 3 van 90

5 cijfers en tekens die op je toetsenbord voorkomen zoals < >? # $ ; : en allemaal wel mogen. De letters die je samenstelt mogen niet dus: ë é â mogen bijvoorbeeld niet en speciale tekens al dan niet uit een ander alfabet ook niet. Α β π. Je kunt deze tekens wel samenstellen uit UTF-8 tekens. Meestal Google ik op HTML Special Characters en ik vind genoeg sites met de juiste codes, Zo is de code voor ë ë en voor het euro teken: (die punt komma moet er echt achter) Tip: Zonder deze regels doet je webbrowser het ook. Het probleem is: je browser hoeft zich niet aan de regels te houden. Dus iedere browser doet maar wat. In internetexplorer ziet het er anders uit dan in firefox of chrome. Op het tablet ziet er weer anders uit dan op de i-phone. Hier heb je echt geen zin in! Voeg in je document de volgende regel toe: Uiteraard vervang je Vakantie naar Egypte door een beschrijving van je eigen onderwerp. Let op de regel moet tussen <head> en </head> staan! Uitleg regel: <meta name="description" content="beschrijving van de webpagina" /> Geef op deze regel een beschrijving van je pagina. Sommige zoekmachines laten deze regel zien en zoeken voornamelijk in deze beschrijving. Voeg nog een regel toe: Pagina 4 van 90

6 Uiteraard zet je tussen de achter content= de trefwoorden die op jouw site van toepassing zijn gescheiden door komma s. Uitleg regel: <meta name="keywords" content="trefwoorden, gescheiden, door, komma's" /> Geef hier zoektermen op voor zoekmachines. Mocht iemand zoeken in google in bovenstaand voorbeeld op beeftravel, Egypte en vakantie grote kans dat hij me vindt! Tenslotte: Verander de regel: <title>type hier de titel van de pagina</title> Zet tussen <title> en </title> een titel die van toepassing is op jouw site! Deze zie je in de titelbalk van je browser of in een tabje, als je browser tabbladen ondersteunt. Kortom: Binnen het <head> en </head> moeten we dus in iedere pagina drie dingen aanpassen: de titel, de beschrijving van de pagina en sleutelwoorden. Doe dit ook voor iedere pagina. De zoekmachines maken hier gebruik van en zorgen ook dat je hoger in de zoek resultaten tevoorschijn komt. Wat tijdens het bouwen van een website een hele handige meta tag is <meta http-equiv="refresh" content="5" /> Dit betekent dat de browser om de 5 seconden automatisch ververst. Je hoeft dus niet op het ververs knopje te klikken om de wijzigingen zichtbaar de maken. Om te testen ideaal! Sloop deze regel er wel uit als je site in productie gaat. Als deze op een server staat dan haalt een gebruiker om de 5 seconden opnieuw de pagina van de server. Dit vreet je bandbreedte en de snelheid op! En de gebruiker moet om de 5 seconden wachten tot de pagina opnieuw is opgebouwd. Mega irritant dus. Kies zelf of je deze regel erin zet of niet. Let op: straks bij de video gaat hij om de 5 seconden de video opnieuw afspelen! Je gaat een website maken over iets wat je zelf verzint. Dit mag van alles zijn films, games, vakanties enz. Je gaat een pagina maken met meerdere alinea s. Alinea s geef je op in <p> en </p> Alle alinea s staan tussen de body tags. Je vult ook de titel, de beschrijving van de pagina en sleutelwoorden. Let op: ik wil nog geen plaatjes, achtergronden of kleurtjes zien!! Maak minstens 3 alinea s per pagina. Pagina 5 van 90

7 Voorbeeld: Pagina 6 van 90

8 Koppen en subkoppen (in het engels: Headers) Je maakt kopjes. Je begint met de titel die zet je tussen <h1> en </h1> boven iedere alinea maak je een kopje: Hiervoor gebruik je <h2> en </h2> of <h3> t/m <h6>. Let op: ik wil nog steeds geen plaatjes, achtergronden of kleurtjes zien!! Voorbeeld: Tip: maak het overzichtelijk door af en toe wat wit regels toe te voegen en de <p> en </p> onder elkaar te zetten zoals hierboven. De browser doet niets met witregels. In onderstaand voorbeeld staat precies hetzelfde maar niet overzichtelijk opgebouwd. Het is niet fout maar als jij het nog snapt mag je het mij uitleggen!!!??? Pagina 7 van 90

9 Test je webpagina, kies voor uitvoeren Launch in Firefox (of ie, chrome, Opera of safari) het ziet er nog niet uit. Denk erom dat je geen opmaak elementen gebruikt! Je blijft met je tengels van de opmaak af. Dat gaan we straks apart regelen. Als er woorden zijn die je wilt benadrukken. Gebruik je <em> en </em> voor benadrukking of <strong> en </strong> voor sterke benadrukking. Benadruk een aantal woorden die belangrijk zijn in je tekst: Voorbeeld: Bekijk het resultaat: <strong></strong> geeft vette letters en <em></em> geeft schuine letters. In CSS kunnen we dit straks aanpassen. Niet nu! Check of je pagina aan de HTML5 standaard voldoet ga naar Je kunt makkelijk je bestand uploaden. Hij ziet aan je header dat het om HTML5 gaat en welke karakterset je gebruikt in ons geval UTF-8. Waarschijnlijk krijg je wel wat meldingen dat HTML5 nog in ontwikkeling is. Pagina 8 van 90

10 Eindopdracht (lever deze 3 pagina s in ): Maak drie pagina s. Dit mag van alles zijn films, games, vakanties enz.. In mijn geval heb ik een reis naar Egypte Griekenland en Turkije beschreven. De eerste pagina heb je waarschijnlijk al af. Eisen: Check of alle pagina s aan de HTML 5 standaard voldoen. Gebruik alinea s <p> en </p> Gebruik overal kopjes <h1> en </h1> en <h2> en </h2> enz. Benadruk een aantal woorden in de tekst met <strong></strong> en <em></em> voorbeeld van een resultaat: Pagina 9 van 90

11 2a Plaatjes Je mag op het internet maar 3 soorten plaatjes gebruiken te weten: JPEG (.jpg) Heel geschikt voor foto s omdat ze veel kleuren ondersteunen. GIF (.gif) Geschikt voor tekeningen en animaties. Ondersteunt maar 256 kleuren dus niet zo geschikt voor foto s. Voor animaties gebruik ik overigens liever flash. PNG (.png) Is relatief nieuw, is heel goed, je kan je plaatje voor een deel transparant maken. Ondersteunt ook veel kleuren. Mocht je al de photoshop module hebben gehad en je wilt plaatjes die je hebt gemaakt op je site gebruiken, dan moet je de plaatjes via Photoshop opslaan in een van deze drie formaten. Gebruik bij foto s JPEG en bij logo s, tekeningen of bij transparantie PNG. Gebruik eigenlijk nooit GIF s. Die worden vaak lelijker omdat ze maar 256 kleuren ondersteunen. Als je eerdere cursussen HTML hebt gehad heb je op de volgende manier een plaatje toegevoegd: <img src= images/plaatje.jpg > Je hoefde alleen maar het src attribuut te gebruiken. Hierbij is images de map waar je al je plaatjes neerzet en plaatje.jpg de bestandsnaam van je plaatje. In HTML5 komt er een eis bij: - Het alt attribute is vereist in HTML5. Hierin staat een beschrijving van het plaatje voor textreaders of voor blinden. Als het plaatje puur is voor decoratie dan zet je maar neer alt =. Maar het alt attribuut moet aanwezig zijn. Een goed voorbeeld1: Merk op dat ik er voor heb gekozen om een plaatje in een alinea te zetten. Dit is niet verplicht maar wel netjes. Vaak staat bij plaatjes ook wat tekst of hoort een plaatje in een alinea. In voorbeeld2 staat onderaan het plaatje ook nog een beschrijving: van het plaatje. Pagina 10 van 90

12 Merk op dat ik de <br> engels: Break tag heb gebruikt om naar een nieuwe regel te gaan. De tekst komt dan onder het plaatje te staan. In het laatst voorbeeld 3 staat het plaatje zonnetje.jpg gewoon in een alinea in de tekst : In het laatste voorbeeld wordt het plaatje van het zonnetje gebruikt als opsommingsteken. Dus geen beschrijving toegevoegd in alt. Maar ik moet alt gebruiken dus vandaar alt= Wat niet verplicht is dat je de afmetingen van het plaatje meegeeft in width= aantal pixels en height= aantal pixels. Voorbeeld: De fout die veel leerlingen maken is dat ze grote plaatjes gebruiken en deze klein weergeven met de width en height optie. Dit is zonde van de brandbreedte van je site. Je browser moet een groot plaatje downloaden dus dat kost veel tijd en bandbreedte en geeft dit klein weer. Maak het plaatje dan eerst klein in Photoshop. Je site wordt dan veel sneller omdat het kleinere plaatje minder tijd kost om te downloaden. Pagina 11 van 90

13 Voeg op alledrie je pagina s een plaatje toe onder aan de pagina met een beschrijving, jat de plaatjes maar van internet 1, of maak ze met Photoshop: Zoek op google een klein plaatje (afbeeldingen kleine afbeelding) en begin iedere alinea met dat plaatje: Voorbeeld: 1 Noot van Erik Seldenthuis: Eh, nee! Jat maar van internet is NIET de juiste manier van doen, zeker niet als je een zakelijke website maakt. Er gelden regels voor legaal gebruik van op het internet gepubliceerd materiaal. Zie link: voor meer informatie. Pagina 12 van 90

14 Eindopdracht. (lever deze in): Voeg op je drie pagina s een plaatje toe en een opsomming plaatje: Eisen: - Voldoe aan de HTML5 standaard (check dit op - Geef bij het eerste plaatje een beschrijving. Voorbeeld van een Resultaat: Pagina 13 van 90

15 2b Audio en video Het is in HTML5 heel makkelijk om audio en video bestanden te zetten. Eerder was daar altijd een externe plugin voor nodig. De meeste van jullie gebruikten Flash door gewoon in Youtube de insluit functie te gebruiken. Silverlight of Quicktime behoorde ook tot de mogelijkheden. In HTML5 gaan het heel makkelijk. Nu is er een groot probleem. Dat de browserfabrikanten nog ruzie maken over het formaat waarin de media moet worden aangeboden. Er zijn grofweg 2 kampen: 1 Microsoft(IE) en Apple(safari) willen gebruik maken van methoden waar dure licenties voor gelden. Zoals MP3 voor audio en mp4 voor video gemaakt met de H.264 codec. (extensie.mp3 of.mp4) 2 Firefox, chrome en Opera hebben nu juist weer voorkeur voor de open source (gratis) methoden zoals Ogg Theora voor audio en Ogg Vobis of WebM voor video. (extensie.ogg of.webm) Dit is balen want er is dus nog geen formaat die in alle browsers werkt. Er zit niets anders op dan het filmpje er twee keer in te zetten. Op het moment van schrijven heb ik het volgende overzicht gevonden van de w3 school welke de standaard HTML5 beschrijft. Pagina 14 van 90

16 Merk op dat internet explorer alleen maar kan omgaan met MPEG4 (H264 codec) en dat je ook nog eens de nieuwste versie 9.0 moet hebben deze staat niet overal geïnstalleerd. Zet een video in je mapje. Zorg eerst dat je de video in mp4 formaat krijgt (H264 codec ) en in webm (.webm) formaat en/of in Ogg Theora formaat. (.ogg) In bovenstaand voorbeeld heb ik de dezelfde video 3x opgeslagen. De laatste lmfho.webm is eigenlijk overbodig aangezien Firefox, Opera en Chrome het.ogg bestand ook kunnen afspelen. De code om een video in je pagina te zetten ziet er als volgt uit: Ik heb weer een video in een alinea gezet. Netjes maar niet verplicht. Het werkt als volgt: Pagina 15 van 90

17 Internet Explorer 9 en safari zullen de bovenste afspelen: lmfho.mp4 omdat deze browsers mp4 ondersteunen. Firefox, chrome en Opera zien de eerste regel ook. Deze browsers kunnen hier niets mee dus geven deze regel ook niet weer. De tweede regel met lmfho.ogg kunnen ze wel weergeven dus dat doen ze ook. Internet explorer 8 en lager kunnen zowel de eerste als de tweede regels niet weergeven. Wel de derde regel wat gewoon tekst is. In internet explorer 8 zul je dan de regel zien: De browser die je nu gebruikt ondersteunt nog geen video. Resultaat: In alle browsers die video ondersteunen: In alle browsers die geen video ondersteunen zoals internet Explorer 8: Tenslotte nog wat opties: Om een audio fragment af te spelen: Let op controls= controls betekent dat je de balk onderaan je audio of video krijgt met daaronder de besturingselementen. Eigenlijk wil je dit altijd. Zeker bij audio lijkt het me mega irritant als je een muziekje niet kunt uitzetten. Je kunt de controlbalk weghalen met controls= Nogmaals: doe dit niet. Pagina 16 van 90

18 Nog wat opties: Met de optie poster= images/plaatje.gif Laat de video een plaatje zien in plaats van het eerste frame van de video. Klik je op het plaatje dan speelt de video gewoon af. Met de optie autoplay= autoplay speelt de video meteen af als de pagina is geladen. Jullie vinden dit vaak leuk. Ik vind dit irritant. Standaard staat autoplay uit. Je kunt het ook uitzetten door autoplay="" in te vullen. Maar de optie weglaten is makkelijker Tenslotte nog het loop attribute: Met de optie loop= loop begint de video weer van voren af aan als deze is afgelopen. De video blijft oneindig doorspelen. Vooral handig voor leerlingen die steeds hetzelfde nummer willen horen. Als je dit niet wilt kun je de optie weglaten of autoplay= invullen. Opdracht die je moet inleveren: Zet een video in een van je pagina s. Pagina 17 van 90

19 3 Links Bij een link zijn maar twee dingen van belang: - Waar kan de gebruiker op klikken. (plaatje of stukje tekst) - Waar gaat de gebruiker naar toe als deze op de link klikt. Voor links gebruik je de <a> </a> tags. a is de afkorting van het Engelse woord anker. Voorbeeld1: In dit voorbeeld ziet de gebruiker een stuk tekst. Als de gebruiker op de tekst klikt gaat hij naar pagina2.html Voorbeeld2: In voorbeeld2 ziet de gebruiker een plaatje van 200 bij 200 pixels als hij op het plaatje klikt gaat hij eveneens naar pagina2.html Net als bij plaatjes is het netjes om linkjes niet te laten niet zweven. Met andere woorden: ook een link zet ik vaak tussen een <p> en een </p> dit is niet verplicht. Zet onder aan iedere pagina 2 tekst linkjes naar de andere pagina s. Check weer of je pagina aan de HTML5 regels voldoet met de validator. Het resultaat moet er als volgt uitzien: Pagina 18 van 90

20 Nogmaals het ziet er allemaal niet uit. Maar ook hier mag je niets aan de opmaak doen. Commentaar. In je HTML kan je ook commentaar regels toevoegen. Commentaar regels beginnen met <!- -en eindigen met - - >. Let op het is een streepje niet een underscore of laagstreepje. Goede voorbeelden: Of Commentaar zie je niet op je webpagina, maar is wel zichtbaar te maken in je webbrowser door te kiezen voor beeld paginabron of Ctlr + U (in firefox). Dus zet hier geen wachtwoorden of andere gevoelige informatie in. Voeg een commentaar regel toe. Check weer of je pagina aan de HTML5 regels voldoet met de validator. Pagina 19 van 90

21 4 Styles We laten nu HTML even schieten en gaan ons nu bezighouden met de opmaak. Hier gebruiken we CSS voor. Extern Stijlblad We maken nu een extern stijlblad. We zullen straks nog twee mogelijkheden zien om stijlen toe te voegen. Extern stijlblad is veruit het mooiste en verdient de voorkeur. Het stijlblad zetten we in de directory styles. De extensie van een stijlblad is.css Open Notepad++ kies voor Bestand Nieuw. Je ziet nu een nieuw bestand genaam new 2 ofzo. Kies direct voor Bestand Opslaan als. Ga naar het mapje styles in de webtest directory (zie bovenste rode kader in de afbeelding hieronder) Geef bij de bestandsnaam: eerstestijl.css en bij Opslaan als: Cascade Style Sheet File (*.css) (zie onderste rode kader in de afbeelding hierboven) We gaan het stijlblad nu linken aan onze HTML pagina s. Pagina 20 van 90

22 Open nu de htmlpagina (bijvoorbeeld pagina1.html) Zet na Alle meta-tags tussen de <head> en de </head> de volgende regel: Let op het is hoofdletter gevoelig: jouw mapje moet styles heten en je stijlblad moet eerstestijl.css heten. Uitleg: Link rel= stylesheet : rel komt van het engelse woord relation. Het betekent dat deze html pagina een relatie met een stylesheet legt. href="styles/eerstestijl.css" : het stijlblad staat in het mapje styles en heet eerstestijl.css. type"text/css" : het stijlblad is een tekstbestand met de extensie.css Als je de html pagina test in een browser zie je nog steeds niets. We hebben de pagina wel aan een stijlblad gekoppeld, maar er staat niets in het stijlblad. Zet in het stijlblad eerstestijl.css de volgende regel: Pagina 21 van 90

23 Save alle pagina s via Bestand Alles Opslaan. Open de html pagina in je browser en bekijk het resultaat. uitleg: h2 is de selector (alleen voor tekst tussen de h2 tags geldt deze eigenschap) text-align is de eigenschap of property (wat moet worden aangepast) center is de waarde of value. pas het styleblad verder aan: Open de html pagina in je browser en bekijk het resultaat. Voeg commentaar toe in je stijlblad. dit doe je door tekst tussen /* en */ te zetten. Anders dus dan in HTML want CSS is ook een ander taaltje. Voorbeeld: Pagina 22 van 90

24 Let op dat commentaar in html anders wordt genoteerd dan in css. Net als in HTML wordt commentaar niet gezien in je browser, maar kan je het wel tevoorschijn halen. Zet er dus geen gevoelige informatie in. Controleer je stylesheet ga naar Een aantal dingen in css komen heel nauw. Bijvoorbeeld eerste de h1 gevolgt door de { en } waar de eigenschap tussen moet staan. Vierkante of ronde haakjes werken niet. Na iedere regel moet een ; komen. Tussen de eigenschap en de waarde moet een :. Tip: Ik heb in bovenstaande voorbeelden alles netjes onder elkaar gezet voor de leesbaarheid. Witregels en spaties doet ook css niets mee. Ik zie dan snel de eventuele fouten of vergeten dubbele punten en puntkomma s. Dit is niet verplicht. In onderstaande afbeelding staat weer precies hetzelfde. Maar als je het nog begrijpt???!! Een handig hulpmiddeltje in Mozilla firefox in de addin: Firebug. Kan je gratis downloaden en installeren. Google even op firebug. Installeer de addin. Als het goed is heb je nu een knopje erbij. (zie afbeelding hieronder rode kader). Je kunt een tag aanklikken in het schermpje ernaast zie je dan op er stijls zijn gedefinieerd en waar ze vandaan komen. Pagina 23 van 90

25 In bovenstaand voorbeeld is de h1 aangeklikt. Rechts zie je dat h1 is gedefinieerd in een stijlblad eerstestijl.css op regel 3. Nu vind je het nog overdreven straks heb je tientallen stijlen die elkaar soms tegenspreken en vind je het handig. Embedded style sheet. Hoewel ik hier tegen ben is het mogelijk om het stijl op te nemen in de html pagina. Het nadeel is dat je het dan voor iedere pagina moet herhalen. Met andere woorden heb je honderd pagina s, moet je het honderd keer intikken of het honderd keer aanpassen als je iets wilt wijzigen. De stijlen staan bovenaan de pagina tussen de <head> en de </head>. Hier is een voorbeeld van een embedded style. Het geeft exact hetzelfde resultaat als de vorige opdracht. Pagina 24 van 90

26 Merk op dat regel naar de externe style sheet is verdwenen. Je kunt best beide hebben: een externe- en een ebedded style in een pagina. Maar ik zou knetter gek worden. In de embedded stijl staat links uitlijnen en in de externe stijl staat rechts uitlijnen. De browser kiest een van de twee. Snap jij dan nog wat er gebeurt? Ik in ieder geval niet. Misschien kan firebug je nog helpen maar handig is het niet. Inline stylen Je kan zelfs nog in de HTML tags styles meegeven. Ik vind dit helemaal een ramp want als je dit moet aanpassen kan je je hele pagina doorlopen. Iedere <h1>, <h2> of <p> moet je in de pagina aanpassen, en het wordt een onoverzichtelijk zooitje. voorbeeld: Hier is een voorbeeld van een inline style. Het geeft exact hetzelfde resultaat als de vorige opdracht. Pagina 25 van 90

27 Tip: Persoonlijk vind ik inline stylen verschrikkelijk onoverzichtelijk. Je moet ook nog alle <p>, <h1> en <h2> tags aanpassen. Dit is niet te onderhouden. Opmaak en inhoud loopt ook helemaal door elkaar. Het doel van Html5 was nu juist om dit te scheiden. We schieten ons doel hiermee helemaal voorbij. Niet of zo min mogelijk doen dus! Eindopdracht: deze moet je inleveren: Kopieer een HTML pagina1.html drie keer. noem deze extern.html, embedded.html en inline.html. Je doet 3 keer hetzelfde: - de <h1> elementen zet je in het midden - de <h2> elementen lijn je rechts uit. - de <p> elementen vul je netjes uit (justify). Pagina 26 van 90

28 1. In extern.html koppel je de pagina aan een extern stijlblad. 2. In embedded.html voeg je de stijlen aan de bovenkant van je html pagina toe. tussen de <head> en de </head>. 3. In inline.html zet je de stijlen in de html tags. We hebben slecht 1 rule gehad. Alles wat we hebben gehad zetten we even in een tabel. tussen de pijpsymbolen ( )staan de keuzemogelijkheden. Vaak spreken deze voor zich. Css rule text-align right center left justify uitleg Lijnt de tekst uit Default is links Rechts midden links uitvullen Pagina 27 van 90

29 5 Lettertype en lettergrootte. Tip: We maken vanaf nu alleen nog maar gebruik van een extern stijlblad (tenzij anders vermeld) dus koppel aan je pagina s weer een extern stijlblad zoals beschreven in de vorige les. En sloop alle embedded en inline styles er uit. In de html pagina staat dus alleen nog maar een verwijzing naar je stylesheet. Fonts (lettertypes) Voor het html5 tijdperk had je als website bouwer maar beperkt de macht over het lettertype en de lettergrootte omdat: - Als je fonts (lettertypes) gebruikte moeten deze fonts op de pc van de gebruiker zijn geïnstalleerd. Het is niet zo dat je fonts mee kon sturen. (dit kan in flash en photoshop wel!!). - Gebruikers konden instellen dat ze maling hebben aan de ingestelde font en hun eigen font gebruiken. Dit kan je in je browser instellen. In internet explorer zit het bijvoorbeeld onder extra internetopties toegankelijkheid Pagina 28 van 90

30 - Sommige lettertypes heten op een mac of een Linux machine anders dan op een windows pc. Zo heet op een mac een font bijvoorbeeld: helvetica terwijl die font op een windows pc verdana genoemd wordt. In html5 kun je tegenwoordig wel fonts meesturen met je pagina. Je definieert dan een lettertype en stuurt het in een css pagina mee via bijvoorbeeld methode. Geweldig zou je zeggen. Echter: hier zijn de browsermakers het ook niet over eens. Internetexplorer gebruikt weer andere fonts dan Firefox en Chrome. Daarnaast worden op mobiele apparaten zoals i-phones of tablets weer andere fonts gebruikt dan op computers. Dit maakt het omslachtig. Het meesturen van fonts voor verschillende browsers valt buiten het kader van deze basiscursus. Ben je geïnteresseerd dan stuur ik je door naar dit artikel: Nogmaals: voor deze cursus hoef je dit niet te kunnen. Op bovenstaande redenen gebruik ik in de praktijk maar een paar fonts: Font1: (voor letters met schreef, sierlijke letters, mooi als kopje of als header. Dit lettertype leest op papier het lekkerst, maar op het scherm kan je beter schreefloos gebruiken.) font-family: Georgia, "Times New Roman", Times, serif; Font2: (voor letters zonder schreef, strakke letters, lezen het lekkerste op het scherm. prima voor tekst) font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; Font3: (voor letters die allemaal even groot zijn, Een i neemt evenveel ruimte in Pagina 29 van 90

31 als een m, dit is wel eens handig als je wat wilt uitlijnen of benadrukken) font-family: "Courier New", Courier, monospace; Voorbeeld van schreef: Dit is schreef (Times New Roman) Voorbeeld van schreefloos: Dit is schreefloos (Verdana) Voorbeeld van monospace: Dit is monospace (Courier) Dit zijn de 3 fonts die ik altijd gebruik. Hier heb je ook mee afgedekt dat de fonts op verschillende systemen anders heten. Bijvoorbeeld: font-family: Verdana, Geneva, Arial, Helvetica, sans-serif Achter een windows machine vind je browser een Verdana font, achter een linux machine een Geneva font, achter een mac een Helvetica font. Mocht je een exotische machine gebruiken die niemand heeft, dan heeft hij altijd een standaard sans-serif font. We gaan nu alle headers een lettertype met schreef geven en de rest van de pagina, waaronder de alinea s, een schreefloos lettertype. mijneerstestyle.css Kijk of je bovenstaande begrijpt: De body geldt voor heel de pagina. Dus alle <p> <h1> en <h2> tags enz.. Ik stel dus voor heel de pagina een schreefloos lettertype Verdana, Geneva, Arial, Helvetica, sans-serif in. In zowel <h1> en <h2> heb ik een schreef lettertype ingesteld. Dit bijt met de body. Omdat <h1> en <h2> specifieker zijn dan de body overschrijven ze het font van de body. Voor <h1> en <h2> geldt nu dus een schreef lettertype: Georgia, "Times New Roman", Times, serif; Bij <p> heb ik helemaal geen lettertype ingesteld. Deze Pagina 30 van 90

32 kopieert dus de instellingen van de body die voor heel de pagina gelden. Met behulp van Firebug kun je dat ook zien. (zie afbeelding hierboven) Je ziet dat de <h1> tag erft van de body en is gedefinieerd in h1. H1 is specifieker dus het geërfde uit de body is doorgestreept. (zie afbeelding hierboven) In bovenstaande voorbeeld staat de p tag. Hier is de font-family niet gedefinieerd in de <p> tag. Dus <p> erft wel van de body. Hier is de font-family dan ook niet doorgestreept maar actief! <p> heeft dan ook een schreefloos lettertype (sans-serif). Lettergrootte. Er zijn verschillende mogelijkheden. Persoonlijk gebruik ik altijd relatieve groottes in plaats van absolute. Je kan kiezen voor procenten of voor de eenheid em. 1em komt overeen met de grootte van de letter M (hoofdletter M niet kleine letter m). Ik zet in de body altijd de lettergrootte op 1em of op 100% de headers maak ik daarna groter of kleiner door bijvoorbeeld 2em of 200% te gebruiken. Voorbeeld: Pagina 31 van 90

33 Zet de body op 100% of 1 em. Maak de H1 2.5x zo groot en de H2 1,8 keer zo groot. Het resultaat moet worden: Controleer je stylesheet ga naar Schuin: Voor een schuin lettertype gebruik je font-style deze kan schuin (italic) of niet schuin (normal) zijn. voorbeeld: kleinkapitaal: Je kan de tekst ook in hoofdletters zetten ter grootte van kleine letters. Dit noem je kleinkapitaal. Hier gebruik je font-variant voor. deze kan small-caps of normal zijn. voorbeeld: Pagina 32 van 90

34 vet: Voor vette letters gebruik je font-weight. Deze kan bold of normal zijn. voorbeeld: In de h1 zijn standaard de letters bold in bovenstaand voorbeeld heb ik deze nu juist op weer normal gezet. In <p> zijn ze standaard normal. Lekker verwarrend vind je niet. Style de pagina zo dat hij er als volgt uit komt te zien, let op ik wil de header h1 nu juist niet vet: Pagina 33 van 90

35 Controleer je stylesheet ga naar regelafstand Gebruik hier ook relatieve afstanden: procenten of em. ga niet klooien met absolute afstanden. voorbeeld: de regelafstand wordt 1,3 keer groter. Het wordt door designers aangeraden om een regelafstand tussen de 125% en 150% te kiezen. Persoonlijk kies ik altijd 130%. De tekst wordt dan prettiger leesbaar. letterspacing en wordspacing Hier kan je de hoeveelheid ruimte tussen letters en woorden mee veranderen. Hier kan je geen procenten gebruiken maar moet je werken met de eenheid em. Met een positieve waarde komen de woorden of letters verder uit elkaar te staan met een negatieve waarde komen de woorden dichter tegen elkaar de staan. Voorbeeld: de woorden komen iets dichter tegen elkaar aan en de letters staan iets verder uit elkaar. Tip: je werkt in CSS met punten tussen decimale getallen niet met komma s. Het is dus 0.1em en niet 0,1em! Pagina 34 van 90

36 paragraaf inspringen Gebruik hier ook relatieve afstanden: procenten of em. Voorbeeld: De ruimte die de letters MMM innemen is de ruimte die iedere paragraaf inspringt. Het resultaat ziet er zo uit als ik alleen maar tekst heb in mijn alinea s en geen plaatjes: Hoofdletters/kleine letters Hier heb je de optie text-transform voor. Die kan de waarde uppercase (hoofdletters), lowercase (kleineletters), capitalize (alleen de eerste letter van een woord in hoofdletters) of none (niets) bevatten. Merk op dat in dit geval: none is en niet normal wat alle andere opties hadden. Voorbeeld: om alles in kleine letters te zetten in de h1. Stijl je blad zo dat het resultaat er als volgt uitziet. Pagina 35 van 90

37 Controleer je stylesheet ga naar tabel met behandelde stijlen: Css rule text-align right center left justify font-family font-size 2 em 200 % font-style italic normal font-variant uitleg Lijnt de tekst uit Default is links Rechts midden links uitvullen Geef een lijst op met de te gebruiken fonts. lettergrootte. Gebruik procenten of de eenheid em. Letters schuin of normaal Letters in kleinskapitaal of normaal Pagina 36 van 90

38 small-caps normal font-weight bold normal line-height 150% 1.5em word-spacing -0.1em letter-spacing -0.1em text-indent 5% 3em text-transform uppercase lowercase capitalize none Letters vet of normaal Regelafstand. Gebruik procenten of de eenheid em. Spaties tussen de woorden. Gebruik de eenheid em. Positief getal worden de spaties groter, negatief worden de spaties kleiner Spaties tussen de letters. Gebruik de eenheid em. Positief getal worden de spaties groter, negatief worden de spaties kleiner Inspringen van een paragraaf. Gebruik procenten of de eenheid em. Zet de tekst om in : Hoofdletters kleine letters alleen eerste letter van woord hoofdletter niets Eindopdracht1 (lever deze in): Maak een stijlblad noem deze les5eind1.css en koppel deze aan je pagina1.html. Pagina moet er als volgt uitzien. Pagina 37 van 90

39 Controleer je stylesheet ga naar Eindopdracht2 (lever deze in): Maak een stijlblad noem deze les5eind2.css en koppel deze aan je pagina1.html. Pagina moet er als volgt uitzien. Pagina 38 van 90

40 Controleer je stylesheet ga naar Pagina 39 van 90

41 6 Kleuren Er zijn verschillende manieren om kleuren aan te geven. Bijna alle programma s gebruiken de rgb waarde: is de hoeveelheid rood, groen, blauw. Hieronder is een screendump van flash, ik had hem ook van photoshop kunnen maken. deze geven allen dezelfde kleur blauw rgb(0,51,153) rgb(0%,20%,60%) # #039 Sommige kleuren kan je ook bij de naam aanduiden, bv red, green, purple, lime, navy. Persoonlijk gebruik ik alleen de hexadecimale code: bv # Deze kan ik namelijk met een kopieer en plak actie uit photoshop of flash jatten en op internet staan genoeg sites met deze codes. Google maar op color codes. een goede site is: Maar nogmaals: er zijn honderden van dit soort sites. In html5 worden er nog meer methoden aangeboden om kleuren aan te duiden. Ik ben dik tevreden met dit aanbod. Ik denk jullie ook. Je kan voor ieder object <body> <p> <h1> en <h2> een achtergrondkleur (background) opgeven en een tekstkleur (color). maak een nieuw stijlblad. noem deze les6.css Koppel deze aan je html pagina. zet hierin: Pagina 40 van 90

42 Merk op dat ik h1 en h2 tegelijk opgeef dit doe ik door de komma. resultaat: gebruik groen: #99cc00, lichtgroen: #d9ffd9, wit: #ffffff en zwart: # om de volgende pagina de stijlen. Let op stel als achtergrond voor de body wit in. Ga er niet vanuit dat elke browser standaard een witte achtergrond heeft. resultaat: Pagina 41 van 90

43 Controleer je stylesheet ga naar Je kan ook een plaatje als achtergrond gebruiken. Ik heb twee plaatjes toegevoegd. (ook in teletop) donker.gif en licht.gif. Zet deze in de images map in je website. Opdracht pas het stijlblad les6.css aan. zet hierin: Het les6.css staat in de map styles. url(../images/donker.gif) valt als volgt te begrijpen: Pagina 42 van 90

44 1.. betekent: ga eerst een mapje lager (dus uit het mapje styles), 2 images ga daarna naar het mapje images. 3 Daar vind je een plaatje donker.gif of licht.gif. Nog maar een keer uitgelegd met plaatjes: Dus: url(../images/donker.gif) resultaat: Pagina 43 van 90

45 Controleer je stylesheet ga naar Dit wordt heel onoverzichtelijk. Met repeat x en repeat y en no-repeat kan je de plaatjes in de x of y richting herhalen of niet herhalen. Opdracht. Pas les6.css als volgt aan: resultaat: Controleer je stylesheet ga naar Pagina 44 van 90

46 horizontaal kan de plaats left, center of right zijn. Verticaal kan het top, center of bottom zijn. Je kan het op alle mogelijk manieren mixen: Linksboven top left Onderaan in het midden center bottom In het midden van een element center center aan de rechterkant in het midden right center Je kan zelfs nog met percentages gaan klooien. Het eerste percentage is de horizontale en het tweede de verticale plaats. 50% 50% is dan hetzelfde als center center. Opdracht. Pas het stijlblad aan zodat het resultaat er als volgt uitziet: Eindopdracht lever deze in: gebruik hiervoor: achtergrond1.jpg en achtergrond2.jpg gebruik groen: #99cc00, lichtgroen: #d9ffd9 en wit #ffffff. Pagina 45 van 90

47 Controleer je stylesheet ga naar Pagina 46 van 90

48 7 Boxmodel Alle blok elementen (block in het engels) op een webpagina kan worden voorgesteld als een doos met een bepaalde inhoud, we spreken van de box. In onderstaand voorbeeld is de inhoud tekst denk hierbij bijvoorbeeld aan een <p> element. Uiteraard hoeft de inhoud niet speciaal tekst te zijn, een plaatje behoort ook tot te mogelijkheden. Hieronder staat een afbeelding met een plaatje als inhoud. Het geldt ook voor tabellen en lijstjes. <p>, <h1>, <h2>, <h3> zijn allemaal blokelementen. Blockelementen hebben allemaal een eigen marge, border en padding en komen standaard onder elkaar op een pagina te staan. <em> en <strong> zijn geen block elementen maar inline elementen. Deze kun je midden in de tekst zetten. De tekst loopt dan vloeiend door. Inline elementen komen standaard naast elkaar te staan. In les 10 is dat bijvoorbeeld interessant als ik een horizontale of verticale knoppenbalk wil maken. We kijken voorlopig even naar blockelementen. In les 10 komen we hier op terug. Pagina 47 van 90

49 De box bevat van buiten naar binnen volgende onderdelen: 1 margin (ruimte tussen de rand en het parent element) 2 border (de rand Hier gaan we zo eerst naar kijken!) 3 padding (de ruimte tussen de inhoud en de rand Borders (randen) We kijken nu even alleen naar de rand (in de tekening aangegeven met rood). Om de rand te maken moet je drie dingen opgeven: - de dikte van de rand gebruik weer % of em als maat - de kleur van de rand gebruik weer de kleurcode. - het type (dotted, dashed, solid, double, groove, ridge, inset, outset, none) None betekent geen rand. - Wat nieuw is in html5 is dat je ook de hoekpunten van de rand een bocht kan geven. Gebogen randen was voor html5 moeilijk. Vaak zat je met plaatjes in photoshop te rommelen om dit voor elkaar te krijgen. Hier gaan we aan het eind van deze les naar kijken. Je gebruikt hiervoor de optie border. Voorbeeld: Pagina 48 van 90

50 Maak een nieuw stijlblad, noem deze les71.css Koppel deze aan je pagina1.html Pagina 49 van 90

51 resultaat: Als je niet aan alle kanten dezelfde rand wilt. Dan moet je de drie eigenschappen apart opgeven: border-width, boder-color, border-style. Iedere eigenschap heeft vier waarden. Je gaat met de klok mee: boven, rechts, onder, links. Voorbeeld: In dit voorbeeld heeft h1 boven en onder een dunne enkele rode rand en links en rechts een dikke groene dubbele rand. resultaat voor h1: Tip: onthoud goed de volgorde: boven, rechts, onder, links. (boven beginnen en met de klok mee dus) Pagina 50 van 90

52 Eindopdracht (lever deze in) Maak het volgende stijlblad noem hem les7eind1.css: Het is ook wel leuk om ronde hoeken te maken. Dit is wel een htm5 feature. Het werkt alleen in de nieuwste browsers. Je geeft dan de zogenaamde border-radius op. In onderstaande afbeelding is aangegeven wat dat is: In bovenstaande afbeelding is links bovenin en rechts onderin een boderdradius opgegeven van 20 px. Hoe groter de borderradius hoe bochtiger de hoek. Ook hier kun je weer 4 hoeken opgeven. Met de klok mee: linksboven, rechtsboven, rechtsonder, linksonder. In bovenstaand voorbeeld dus: border-radius : 20px 0px 20px 0px; Pagina 51 van 90

53 Op het moment van schrijven werd in mijn versie van Notepad++ deze optie nog niet herkend. Als ik deze optie invul bij bijvoorbeeld de h2 dan krijgt deze niet een kleur. Meestal duidt dit op een typefout. De werkelijkheid is dat deze optie gewoon nog niet is toegevoegd: Het werkt wel. Als ik hem test in een (recente) browser doet hij het wel. Mocht het niet werken test voordat je gefrustreerd raakt even in een andere browser. In internet explorer 8 werkt het bijvoorbeeld niet. Je moet internetexplorer 9 hebben. Op zich niet erg. Je ziet dan gewoon rechte hoeken in oudere browsers. Eindopdracht (lever deze in) Maak het volgende stijlblad noem hem les7eind2.css. Voor het gemak heb ik overal 20px gebruikt voor de border-radius. Margin (marges) Om marges aan te geven gebruik je het element margin. In het eerste plaatje is het aangegeven met grijs. Je kan de marges voor een element allemaal tegelijk opgeven. Voorbeeld: Pagina 52 van 90

54 Of je kan weer vier waarden opgeven voor boven rechts onder links. voorbeeld: Let op! Niet alle browsers hebben standaard geen marges. Ga er dus niet vanuit, als je geen marges opgeeft dat er dan ook geen marges zijn. Meestal geef ik als eerste regel op * {margin :0;} Met andere woorden * geldt voor alles dus er zijn nergens standaard marges. Maak een nieuw stijlblad, noem deze les72.css Koppel deze aan je pagina1.html Zet hierin de volgende gegevens: Links en rechts heb je 10% van de pagina marge. Onder en boven heb je een kleine marge van 0.5em. resultaat: Pagina 53 van 90

55 Je kan je marges ook automatisch maken. Dit moet je dan wel gebruiken in combinatie met de optie width. Een voorbeeld: de p lijnt nu altijd perfect in het midden uit. Hij gebruikt 65% van de breedte. Boven en onder geen marge. De linker en rechter marge stelt hij automatisch in. (35/2 = 17,5 %) resultaat: een ander voorbeeld: Pagina 54 van 90

56 De linker marge staat op 10% (vast) De paragraaf is 65% van het scherm breed. Boven en onder geen marge. De rechter marge is automatisch. is in dit geval (100% - 65% - 10% = 25% breed) Eindopdracht (lever deze in): Maak een stijlblad noem hem les7eind3.css die het volgende doet: Padding padding is de ruimte tussen de inhoud en de rand. In het eerste plaatje is het aangegeven met geel. Pagina 55 van 90

57 ook hier kan je weer de padding voor boven, rechts, onder,links apart opgegeven of alles in een keer tegelijk. Voorbeeld: of Links is de padding 20 % van de pagina breedte, boven onder en rechts is de padding vrij klein. Maak een nieuw stijlblad, noem deze les73.css Koppel deze aan je pagina1.html Zet hierin de volgende gegevens: resultaat: Pagina 56 van 90

58 Eindopdracht (lever deze in) Maak een stijlblad noem hem les7eind3.css die het volgende doet: Tip: Gebruik margin en padding samen geen borders. gebruik voor de achtergrond van body: #006600; /* donkergroen */ stel in body de margins en padding op 0. gebruik voor de achtergrond en de letters van h1 h2 en p #99cc00; /* groen */ #d9ffd9; /* lichtgroen */ tabel met behandelde stijlen: Css rule border 1em solid yellow border-width 1em 2% Uitleg Geeft een rand Geef een dikte een kleur en een type op Breedte van de rand. geef één getal voor alle vier de randen of geef vier getallen voor boven, rechts onder links Kleur van de rand. geef één Pagina 57 van 90

59 border-color #FF0000 border-style dotted dashed solid double groove ridge inset outset none border-radius 20px margin 1em 10 % auto Padding 1em 10 % getal voor alle vier de randen of geef vier getallen voor boven, rechts onder links Stijl van de rand. geef één getal voor alle vier de randen of geef vier getallen voor boven, rechts onder links ronding van de hoeken van de rand. geef één getal voor alle vier de hoeken of geef vier getallen voor linksboven, rechtsboven, rechtsonder linksonder. marges. geef één getal voor alle vier de marges of geef vier getallen voor boven, rechts onder links Ruimte tussen inhoud en rand. geef één getal voor alle vier de ruimtes of geef vier getallen voor boven, rechts onder links Pagina 58 van 90

60 8 Linkjes opmaken met CSS Een linkje is in html standaard onderstreept. Je hebt in html maar twee mogelijkheden: - een nog niet bezochte link (deze is blauw onderstreept) - een bezochte link (deze is paars onderstreept). Met CSS zijn er meerdere mogelijkheden te weten: a:link a:visited a:hover a:active (een nog niet bezochte link) (een bezochte link) (dit gebeurt op het moment dat je de muis over de link beweegt) (het korte moment van de muisklik op de link) De volgorde is wel belangrijk. Een ezelsbruggetje: LieVer HuisArts. De dubbele punt tussen a en link is ook belangrijk! a.link of a link of a;link werkt niet. Standaard is een link onderstreept. Dat kan je uitschakelen met de optie textdecoration. Deze kan de waarde: underline, overline, line-through, blink en none bevatten. Voorbeeld: EindOpdracht lever deze in: maak een stijlblad, noem deze les8links.css koppel hem aan pagina1.html. De linkjes moeten er als volgt uitzien: nog niet bezochte link: rood, vet, niet onderstreept. bezochte link: donker rood, vet, niet onderstreept. muis over de link: rood, vet, wel onderstreept, lichtgrijze achtergrond muis klik op de link: rood, vet, wel onderstreept, donkergrijze achtergrond tip:om het verschil tussen bezochte en niet bezochte links te testen, moet je af en toe de geschiedenis van je browser leeg maken: Internet Explorer : Extra browsergeschiedenis verwijderen Firefox: Extra privégegevens opruimen behandelde stijl Css rule text-decoration uitleg Versiert de tekst underline overline line-through Pagina 59 van 90

61 none classes en id s Gegeven het volgende HTML document Alleen het gedeelte tussen de body tags is afgebeeld: Maak een html pagina. noem deze vragen.html. Zorg dat de pagina volgens de html standaard is en Zet bovenstaande vragen hierin. Natuurlijk mag je ook zelf vragen verzinnen. De pagina moet minstens 3 vragen, 3 antwoorden en een uitleg bevatten. resultaat: Pagina 60 van 90

62 Het ziet er niet uit, we gaan de boel stijlen. maak een stylesheet noem deze vraagstijl.css koppel deze aan vragen.html Zorg dat het er als volgt uitziet: achtergrondkleur: #eeeeff ; /*lichtpaars*/ letterkleur: #660099; /*paars*/ Pagina 61 van 90

63 Maar nu hebben we een probleem: We hebben tussen <p> en </p> vragen staan, maar ook antwoorden en zelfs een stukje uitleg. We willen vragen duidelijk anders stijlen dan antwoorden. Dit kunnen we doen door een class op te geven: Pas je HTML document aan door als attribute de optie class= vraag of class= antwoord mee te geven. Check weer even of alles volgens de html5 standaard is. vragen.html: Nu komt het: we kunnen in onze stylesheet de classes als volgt benaderen: Pagina 62 van 90

64 p.vraag betekent: alle p-attibuten (paragraven) waarin de class vraag is aangegeven. Je kan het ook aan geven met gewoon: Dit werkt ook alleen het is iets slordiger. let wel op de punten!.vraag betekent: overal waar de class vraag is aangegeven. Dus niet alleen in de <p> </p> maar in alle elementen. Zoals <h1 class= vraag > of <a class= vraag > In ons voorbeeld hebben we alleen maar p s met een klasse vraag dus hier werkt alleen een punt prima. Stijl de vraag en antwoorden. Zorg dat het er als volgt uitziet: Pagina 63 van 90

65 tip: geef bij p.antwoord voor zowel de achtergrond als de tekstkleur geel op. Als we de muis over de gele balk schuiven moet het antwoord te voorschijn komen. Eigenlijk weet je het al net als bij de links. Je gebruikt de p.antwoord:hover optie. Voeg de volgende optie toe aan je stylesheet: Als het goed is moeten nu je antwoorden tevoorschijn komen als je er met je muis overeen gaat. De achtergrond blijft geel omdat als deze in de.antwoord:hover niet is gereset. Dus de gele kleur jat hij uit de.antwoord alleen de color wordt gereset. Naast class kan je ook in html het attribute id opgeven. Het verschil met class is dat je een id maar 1x per pagina mag gebruiken. Voor vraag en antwoord zou id dus geen optie zijn. We hebben immers drie vragen en drie antwoorden. Voor de uitleg is id wel een optie. We hebben maar 1x een uitleg. Pagina 64 van 90

66 Pas het vragen.html document aan voeg het volgende attribute toe: gedeelte van vragen.html: in het stijlblad kunnen we het id als volgt benaderen: ofwel Merk op dat je id s in een stijlblad altijd benadert met een hekje #. In dit geval maakt het niet uit of je p#uitleg of #uitleg gebruikt het id uitleg mag tenslotte maar 1x per pagina worden gebruikt. Ik gebruik bij id s altijd #uitleg Eindopdracht lever deze in: Maak een soort lijst. gebruik 1 header in het voorbeeld: List name. maak verschillende <p> </p> geef de een de class even en de andere de klas oneven. geef de rij verschillende kleuren. zet er ook een link in die van kleur verandert als je er met je muis overgaat. Je hele zooi, moet natuurlijk volgens de html5 standaard zijn. resultaat: Pagina 65 van 90

67 Span class. Een element dat heel veel wordt gebruikt in combinatie met een class is de <span> tag. Het is geen blockelement maar een inline element. Blok elementen worden steeds om een nieuwe regel onder elkaar zichtbaar en hebben een eigen marge, border en padding Inline elementen lopen gewoon door in de tekst. Meerdere inline elementen worden naast elkaar gezet en niet onder elkaar. Een voorbeeld: American Express en VISA is de tekst die tussen de <span> en de </span> staat en die ik een klasse reclametekst heb meegegeven. Ik kan dit als volgt stijlen in mijn stylesheet, voorbeeld: In bovenstaand voorbeeld heb ik deze klasse reclametekst donkerblauwe schuine, dikke, iets grotere letters gegeven. Let op de punt voor reclametekst dit slaat op de klasse! Het resultaat zal zoiets zijn: Span is dus ideaal in samenwerking met een klasse om een stuk tekst een afwijkende stijl mee te geven. Uiteraard hebben we ook al <strong> en <em> gehad maar deze gebruik je doorgaans voor nadruk. Pagina 66 van 90

68 Eindopdracht lever deze in: Gebruik een de span tag ergens in je html document en koppel deze aan een klasse. Verzin zelf een naam van je klasse. Pagina 67 van 90

69 9 Tabellen Vroeger werden er hele HTML pagina s via tabellen opgemaakt. Nu is dat met CSS een achterhaald systeem. Gebruik tabellen alleen nog maar om lijstjes in rijen en kolommen weer te geven. De volgende HTML tags gebruik je voor tabellen: <table> </table> <th> </th> tableheader. <tr> </tr> <td> </td> Begin en einde van je tabel Deze is niet verplicht, het is de kop van een tabel: een Hiermee geef je een rij aan in je tabel: tablerow hiermee geef je een cel aan in je tabel: tabledata Een tabel bevat een aantal rijen, een rij bevat een aantal cellen. Maak een HTML pagina noem hem tabel.html zet tussen de body tags een tabel. Zorg dat je pagina aan de html standaard voldoet. De tabel moet een header bevatten. Voorbeeld: resultaat: Pagina 68 van 90

70 Dit ziet er niet uit. Stijlen dus maar weer. Het ligt niet voor de hand om alle tabellen in heel je website hetzelfde op te maken. Vandaar dat we onze tabel een class meegeven genaamd: prijslijst. Pas in je HTML document tabel.html de volgende regel aan: Maak een stijlblad, noem hem tabelstijl.css en koppel heb aan de html pagina. In je stylesheet voeg je de volgende regel toe: Hoewel ik het slordiger vind mag het eventueel: Regel dat je tabel er als volgt uit komt te zien: Pagina 69 van 90

71 gebruik: #771617; /*bruin*/ en #ffcc66; /*oranje*/ Voor de buitenste rand heb ik gewoon de kleur: silver gebruikt. Tip: een tabel is gewoon een block element. We kunnen ons dus weer lekker uitleven met een marge, een border en met de padding. Ik vind dit nog steeds geen echte tabel, ik mis nog wat randen in de cellen. Je kan de cellen apart opmaken door: en de header door: let op de spatie tussen table.prijslijst en th. table.prijslijst td betekent: alleen de td elementen die zich binnen de tabel met de class prijslijst bevinden worden opgemaakt. (dus niet alle td elementen!) Pas je stylesheet aan zodat je tabel er als volgt uit komt te zien: tip: in de table.prijslijst td heb ik een border toegevoegd. in de table.prijslijst th heb ik de letterkleur en een achtergrond toegevoegd. Een leuke optie is border-collapse deze kan de waarde collapse of separate bevatten. De randen vallen samen of zijn gescheiden. border-collapse geldt alleen voor tabbellen. Voeg in table.prijslijst de volgende optie toe: Pagina 70 van 90

72 resultaat: Eindopdracht (lever deze in) maak een stijlblad les9eind1.css koppel het aan je tabel.html. Zorg dat je tabel er als volgt uitziet: Eindopdracht (lever deze in) maak een stijlblad les9eind2.css koppel het aan je tabel.html. Zorg dat je tabel er als volgt uitziet: Eindopdracht (lever deze in) maak een stijlblad les9eind3.css koppel het aan je tabel.html. Je mag maar één regel toevoegen of aanpassen aan je les9eind2.css stijlblad. Het resultaat moet er als volgt uitzien: Pagina 71 van 90

73 behandelde rule: Css rule border-collapse separate collapse uitleg Randen van tabellen Zijn gescheiden vallen samen Pagina 72 van 90

74 10 Lijstjes In HTML kan je een lijst toevoegen. Een genummerde lijst (in het engels ordered list) <ol> </ol> of een lijst met bolletjes ervoor (in het engels een unordered list) <ul> </ul>. Met CSS kan je de een in de ander omzetten. Vandaar dat ik altijd <ul> </ul> gebruik. Ieder item in de lijst zet je tussen <li> en </li>. Een lijst is net als een tabel een block element en bestaat uit blockelementen. De lijstitems komen dus netjes onder elkaar te staan. voorbeeld: Maak een HTML document noem deze lijst.html. Zet daarin een lijst zoals in bovenstaand voorbeeld. Zorg dat je document aan de html5 standaard voldoet. resultaat: Dit ziet er niet uit. Dus gaan we weer stijlen. Ik ga er vanuit dat je niet alle lijsten in je pagina s hetzelfde wilt opmaken. Vandaar dat we een class gaan toevoegen: voordelen pas de HTML code als volgt aan: In CSS kan je de lijst als volgt stijlen: Om de lijst te benaderen: Pagina 73 van 90

75 Om een item van de lijst te benaderen: Maak een stijlsheet noem deze stijllijst.css. Koppel de stylesheet aan de pagina lijst.html. Zorg dat het er als volgt uitziet: Even op weg helpen: Het is wat standaard werk: ul.voordelen heb ik een achtergrondkleur gegeven van: #eabfff; /*lichtpaars*/ en heb ik wat padding toegevoegd ul.voordelen li heb ik boven en onder een zwarte rand toegevoegd, heb ik de letters de kleur #47006b; /*donkerpaars*/ gegeven. en een iets andere achtergrondkleur: background: #d580ff; /*roze*/. Ook hier heb ik wat padding toegevoegd. Het enige nieuwe over lijsten is de volgende optie list-style: hier moet je drie dingen opgeven: - opsomming binnen of buiten het kader (outside of inside) - Type: rondje, vierkantje, hoofdletters (upper-alpha), kleineletters (loweralpha) enz - eventueel een eigen plaatje als opsommingsteken. Pagina 74 van 90

76 voorbeeld: Tip: list-style is een eigenschap van de lijst (ul) en niet van de lijst items. (li). Dit doe ik intuïtief steeds fout ik had verwacht dat het bij de items van de lijst zou horen Css rule list-style position: inside outside type disc circle square decimal upperroman lower-roman upper-alpha lower-alpha none image url(pad) none uitleg Geeft de stijl van de lijst je kan drie dingen opgeven: Positie: binnen of buiten het kader type schijf rondje vierkant getal romeinse cijfer (IV) romeinsecijfer (iv) hoofdletters kleine letters geen opsommingsteken plaatje geef de relatieve url naar het plaatje op vb url(../images/zonnetje.gif) Voeg de volgende rule toe in je stylsheet: stijllijst.css: resultaat: Pagina 75 van 90

77 Eindopdracht lever deze in: Maak een navigatie system door lijsten te gebruiken: Noem je pagina navigatie.html zet daarin een lijst met links: Stijl deze pagina zodat het resultaat zoiets wordt: Ik heb de achtergrond wit gemaakt als ik er met mijn muis overeen ga. (weten we het nog: hover) Nu wordt het leuk. Ik heb nu een verticale navigatiebalk. Stel ik wil een horizontale navigatiebalk. Dit kunnen we vrij simpel oplossen: een lijst is standaard een block element en ook de elementen in de lijst zijn standaard blockelementen (li) Met andere woorden de items komen onder elkaar te staan. We kunnen het block element omzetten in een inline element. Denk aan het voorbeeld van de span tag eerder in de cursus. Deze elementen komen dan netjes naast elkaar te staan. Je doet dit als volgt: Pagina 76 van 90

78 Je ziet dat de lijstitems nu van blockelementen in inline elementen worden omgezet. Het resultaat is dat de lijstelementen (die de gebruikers aanzien voor knoppen) naast elkaar komen. Tip: ik heb wel even de breedte van de lijst (ul) aangepast met de width optie. Als ik de knoppen onder elkaar zet dan hoef ik mijn lijst minder breed te maken dan naast elkaar. Klinkt logisch en is ook logisch. Pagina 77 van 90

79 11 Een pagina maken. We gaan eens een fatsoenlijke pagina maken in html5. Als ik naar een willekeurige goede website kijk, dan vind ik vaak dezelfde structuur. - Er is vaak een header. Dit is een kopregel welke vaak bovenaan een webpagina staat. Hier staat vaak de titel van de site en een logo in. - Er is vaak een footer. Vaak staat deze onderaan de pagina. Hier staat vaak in wie de site heeft gemaakt, met wat copyright informatie. - Er is vaak een navigatiebalk. Denk aan een knoppenbalk of een balk met linkjes. Je ziet ze vaak bovenaan de pagina of links op de pagina. Door op de knoppen of linkjes te klikken ga je naar andere pagina s - De inhoud van je pagina. Deze inhoud gaan we straks nog eens onderverdelen. Omdat bijna iedere site dit heeft. Zijn de html5 makers zo slim geweest om daar aparte blokelementen voor te maken. Vooral Google heeft hier een behoorlijke vinger in de pap gehad. De zoekmachine kan dan makkelijker de inhoud van de pagina vinden en dus ook sneller zoeken! Maak de volgende html pagina. Noem deze index.html. Check uiteraard via de validator of deze aan de html5 standaard voldoet. Neem in dit geval de tekst in de body over! Pagina 78 van 90

80 Tip: zet die tags netjes onder elkaar zoals hierboven, je hebt dan overzicht wie bij wie hoort en je vergeet niet zo gauw een tag af te sluiten. LET OP: ER IS EEN WERELD VERSCHIL TUSSEN DE <HEAD> EN DE <HEADER>. DE HEAD TAG MAG JE NOOIT IN DE BODY GEBRUIKEN. DE HEAD TAG MAG ALLEEN EEN TITEL EN META DATA BEVATTEN. DE <HEADER> IS ONDERDEEL VAN JE PAGINA EN STAAT IN DE BODY! We gaan even het resultaat van deze mega vette site bekijken Test de pagina in een webrowser. De elementen <header>, <footer>, <section> en <nav> zijn allemaal blokelementen. Deze blokken worden dan ook netjes onder elkaar gezet. Dat wist je al. We kijken nu even puur naar de inhoud van een pagina. In ons geval dus de <section> tag. Een section is bedoelt voor het opsplitsen van de inhoud. In ons geval hebben we maar 1 section. In het geval van een krant kun je best verschillende katernen hebben. Denk bij een krantensite aan economie, politiek, sport, buitenland, binnenland enz. Meerde sections per pagina zijn dus best mogelijk. Wij houden het nog even simpel bij 1 sectie. Een sectie bestaat uit verschillende artikelen. Denk bij een artikel net als in de krant als een zelfstandige eenheid. Een artikel kun je overnemen en op je blog of je hyves zetten of op een andere site. Pas de section tag aan, verwijder het woord inhoud en maak hierin ongeveer drie artikelen: Test het in je browser. Het ziet er nog steeds niet uit. Klopt ook, we hebben nog niets aan de style gedaan. Ook een article is een blockelement. Dus die worden netjes onder elkaar gezet. Pagina 79 van 90

81 Iedereen die de krant leest weet waar een artikel uit bestaat: een kopje en één of meerdere alinea s dus uit <h1> of <h2> enz en uit <p> Deze heb je al in les 1 gehad. Vul iedere alinea met een kopje (kies bijvoorbeeld <h2> dan kan je straks <h1> gebruiken voor je titel) en alinea s. Gebruik minstens 1 alinea, maar je mag ook meer alinea s gebruiken. Uiteraard mag je deze kopiëren uit eerdere pagina s en ga je dit niet opnieuw schrijven. In bovenstaande afbeelding staan twee artikelen afgebeeld. In het eerste artikel heb ik 1 kop met twee paragraven in het tweede artikel heb ik een kop met maar 1 paragraaf. Tip: doe jezelf en de docent een plezier en zet de <p> en </p> netjes onder elkaar. Je ziet dan of je vergeten bent af te sluiten. De headers zet ik wel op 1 regel. Het resultaat ziet er nog steeds niet uit, maar het begint in ieder geval wel op een webpagina te lijken: Pagina 80 van 90

82 Vergeet niet te checken of je pagina nog steeds aan de html5 standaard voldoet! We gaan maar eens stijlen. Koppel je pagina aan een stijlsheet. Maak eerst een nieuwe stijlsheet aan: ik noem de mijne mijnstijl.css zet deze weer in het mapje styles en koppel deze aan je html pagina. Dit hebben we al verschillende keren gedaan. De eerste rule die ik er altijd inzet is: alle standaard margin en padding eruit. Die gaan we straks zelf opgeven. Sommige browsers hebben standaard wel een margin en/of padding andere weer Pagina 81 van 90

83 niet. Hier hebben we geen zin in. * betekent alles. Dus zet als eerste rule in mijnstijl.css Voor de body (dat is de hele pagina) zet ik alvast een standaard lettertype erin. In mijn voorbeeld heb ik ook voor een achtergrond gekozen. Een klein plaatje laat ik van links naar rechts en van boven naar beneden herhalen: Ik heb dit plaatje gebruikt als achtergrond maar je bent natuurlijk vrij om je eigen pagina achtergrond te kiezen. Een kleur als achtergrond is ook prima. We gaan eens kijken naar de header. Ik heb een header plaatje gemaakt van 150pixels hoog en 960 pixels breed. Het logo heb ik verzonnen. Uiteraard doe ik dat met photoshop. Deze ga ik als achtergrond gebruiken voor mijn header. Ik ga mijn site ook nog een titel geven. Vervang de tekst tussen de <header> en </header> door een titel. Ik gebruik hiervoor de h1 In de stylesheet gaan we de header stylen. We gebruiken hiervoor de header en de header h1. Een voorbeeld staat hieronder. Je ziet dat ik expliciet de lengte en de hoogte opgeef met width en height. Pagina 82 van 90

84 De laatste optie text-shadow hebben we nog niet gehad. Deze is toch wel leuk, je kunt hiermee een schaduw bij je tekst krijgen. Eerste twee opties (beide 5px ) zijn het aantal pixels naar rechts en naar beneden van de schaduw. De derde optie (7px) is een maat voor hoe vaag of hoe scherp de schaduw moet worden. Hoe groter dit getal hoe vager de schaduw. De laatste optie is de kleur van de schaduw. (# = zwart). Ik speel gewoon wat met deze getallen. Resultaat: Het begint een beetje op een website te lijken. We gaan een navigatiebalk maken. Dit heb je in les 10 geleerd hoe je dit moet doen en hoe je de knoppen naast elkaar kunt krijgen. Uiteraard doen we dit door een lijst te maken met linkjes. Vervang de tekst tussen <nav> en </nav> door een lijstje met linkjes. In mijn voorbeeld laat ik de linkjes even naar een niet bestaande pagina verwijzen href= #. We hebben immers nog niet zoveel pagina s. Alleen de homepage index.html (zie onderstaande afbeelding) Pagina 83 van 90

85 We gaan maar weer stylen hieronder zie je een voorbeeld. Het is wat standaard kleurtjes en achtergrondjes werk. Er is één belangrijke optie: display : inline; (zie het rode kader) hierdoor staan de knoppen naast elkaar. Uiteraard hoef je de kleurtjes en de randen niet over te nemen. Leef je uit en maak je eigen knoppen! Resultaat: We gaan nu iets moois maken van de artikelen. Je hebt dit in les 6 al een beetje gehad. We kunnen de volgende rules gebruiken in de stylesheet: section, article, article h2 en article p In onderstaand voorbeeld heb ik alleen nog maar section en article gebruikt Pagina 84 van 90

86 Het resultaat is toch wel aardig: De tekst en de koppen gaan we ook nog opmaken. Dit mag je zelf uitzoeken. Hier zijn we tenslotte al vanaf les 4 mee bezig. Je hebt in ieder geval nodig: Tip: je had ook mogen gebruiken section article h2 en section article p Maar omdat ik maar 1 sectie had vond ik dat wat overdreven. De footer staat onderaan de pagina. We houden het even simpel: vervang alles tussen <footer> en </footer> door een copyright tekst. is het teken want het copyright teken hoorde niet bij de utf-8 tekenset (les 1). Ik heb hier een h3 gebuikt iets anders is ook goed. Pagina 85 van 90

87 Uiteraard heb je weer een footer en een footer h3 nodig om de boel te stijlen. Een voorbeeld zie je hieronder. Van de footer heb ik niet overdreven veel werk gemaakt. Resultaat: We zijn bijna klaar met onze pagina we hebben echter nog 1 ding wat niet zo netjes is. Het zou mooi zijn als de site netjes in het midden stond en was uitgelijnd. Nu is het rommelig. Hier zie je de site op een breedbeeld scherm. We gaan gebruik maken van een block element wat alleen maar wordt gebruikt om de opmaak mooier te maken. Het heeft dus geen structuur functie zoals article of nav. Hiervoor gebruiken we in html5 de <div> tag. Vroeger, ik bedoel voor html5, bestonden er geen article, nav, section en footer tags toen werd alles opgelost met de div tag. Je gaf toen een id mee in de div. Voorbeeld: <header> </header> was bijvoorbeeld <div id= header > </div> <footer> </footer> was bijvoorbeeld <div id= footer > </div> <nav> </nav> was bijvoorbeeld <div id= navigator > </div> Pagina 86 van 90

88 Internet explorer werkt alleen maar met de nieuwe tags zoals article, nav, section en footer vanaf internetexplorer 9. Versie 8 gaat al over zijn nek van deze nieuwe html5 tags. De div tag is er in html5 nog steeds. Alleen we gebruiken heb puur voor de opmaak. Niet meer voor de structuur. Een div is dus hetzelfde als <article>, <footer> of <section> behalve dan dat we hem puur voor de opmaak gebruiken! We gaan de hele pagina in een div tag zetten die we id= wrapper meegeven. Dus voeg direct na de body tag in: En onderaan de pagina net voordat de body tag sluit: Tip: als ik veel div tags gebruik, moet ik die allemaal afsluiten met </div> ik zet dan wat commentaar bij de </div> bij welke div deze hoorde. Ik vergeet dan niet zo snel een div af te sluiten. Nu gaan we de wrapper stijlen. Nogmaals ik wil met de wrapper alleen maar de pagina mooi in het midden zetten. Uiteraard wil ik alles net zo breed hebben als de header: deze was 960 pixels. Dus: Kijk even of je het snapt: de marges boven en onder zijn 0. Links en rechts zijn de marges automatisch. Met andere woorden de browsers maakt de pagina 960 pixels breed en zet hem netjes in het midden omdat de linker en rechtermarge automatisch worden berekend. Resultaat: Pagina 87 van 90

Nog meer weergeven