qwertyuiopasdfghjklzxcvbnmq ertyuiopasdfghjklzxcvbnmqwer tyuiopasdfghjklzxcvbnmqwerty

Maat: px
Weergave met pagina beginnen:

Download "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

Internet Standaarden HC4

Internet Standaarden HC4 Internet Standaarden HC4 Hogeschool van Amsterdam - Instituut voor Interactieve Media 1 Invloed van Games Laatste ontwikkelingen Gebruik van Games 11 oktober 2007 Hogeschool van Amsterdam - Instituut voor

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

Extra: Hoe u uw website met HTML kunt verbeteren

Extra: Hoe u uw website met HTML kunt verbeteren Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel

Nadere informatie

Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011

Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 Versie: 1.0 Gemaakt door: Whisper380 Eigenaar: Whisper380-computerhulp Datum: 23-1-2011 1 Inhoudsopgave Wat gaan we doen?... 4 Eerst wat uitleg:... 4 Wat is HTML:... 4 Wat is CSS:... 4 Wat is het resultaat

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans

Les W-01: HTML. Een website bouwen in HTML. 2006, David Lans Les W-01: HTML 1.0 HTML Websites zijn opgebouwd uit afzonderlijke webpagina s. Deze webpagina s zijn geschreven in een aparte taal, HTML. De afkorting HTML staat voor Hyper Text Markup Language. Vrij vertaald

Nadere informatie

Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?

Agenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand? HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

BIJLAGEN Begrippenlijst HTML

BIJLAGEN Begrippenlijst HTML BIJLAGEN Begrippenlijst HTML In dit overzicht staan alle elementen, attributen en andere begrippen van xhtml versie 1.0 strict die in dit boek zijn behandeld, alfabetisch gerangschikt. BIJLAGEN Begrippenlijst

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

HTML richtlijnen e-mail marketing. part of the valley e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van

Nadere informatie

HTML krijgt een standaard opmaak van de browser

HTML krijgt een standaard opmaak van de browser 1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te

Nadere informatie

LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting.

LES 8: CSS. Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting. LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Internet_html.doc 1/6

Internet_html.doc 1/6 Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).

Nadere informatie

Welkom bij mijn website tutorial (Deel 2)

Welkom bij mijn website tutorial (Deel 2) Welkom bij mijn website tutorial (Deel 2) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

programmeren in HTML (5) CSS (3) JavaScript

programmeren in HTML (5) CSS (3) JavaScript programmeren in HTML (5) CSS (3) JavaScript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie remie.woudt@gmail.com Woudt Inhoudsopgave 1 HTML...1 1.1 Wat heb je nodig?...1

Nadere informatie

Hoe moet je een prachtige presentatie maken?

Hoe moet je een prachtige presentatie maken? Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven

Nadere informatie

2. KENNISMAKEN MET DE PROGRAMMA'S

2. KENNISMAKEN MET DE PROGRAMMA'S Deze cursus is geschreven ter vervanging van de eerste twee les-stencils over HTML die we sinds 1997 op de PCW gebruikten. 'HTML voor beginners' helpt je een eind op weg met het maken van je eigen website.

Nadere informatie

Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012

Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 Hand-out Web Technologies, werkcollege 4 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Id s en klassen (id- en class-attributen) id-attribuut: Elk HTML-element kan gespecificeerd worden door middel van een

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders.

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. Stappenplan Website de Palster Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. 1 Inhoudsopgave: Titel bladzijde Aanmelden op de website 3 Foto s in het fotoboek

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen

Nadere informatie

Portfolio s in Google Sites

Portfolio s in Google Sites Portfolio s in Google Sites Vanaf het schooljaar 2012-2013 biedt de NHL de optie om portfolio s aan te maken met Google Sites. De NHL-accounts bij Google zijn afgeschermd voor mensen die niet bij de NHL

Nadere informatie

XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters

XHTML en CSS. Deel 3. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters XHTML en CSS Deel 3 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Het opmaken van hyperlinks... 1 1.1.2. Kleur... 1 1.1.3. Het gebruik van kleuren bij het

Nadere informatie

Websitecursus deel 2 CSS

Websitecursus deel 2 CSS Websitecursus deel 2 CSS A Eskwadraat WebCie www@a-eskwadraat.nl 5 oktober 2015 Introductie Vorige week HTML Deze week CSS Volgende week Javascript CSS CSS (Cascading Style Sheets) bepalen hoe een website

Nadere informatie

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: dit is scheve tekst

Voorbeeld: In een tekstverwerker staat: Dit is scheve tekst Om in HTML hetzelfde effect te krijgen moet er staan: <i>dit is scheve tekst</i> Wat is HTML? HTML staat voor HyperText Markup Language. Een HTML tekst bestaat uit zogenaamde platte tekst (ook wel de eerste 128 tekens van ASCII genoemd). In tegenstelling tot bijvoorbeeld tekstverwerker

Nadere informatie

Editie 2010. Handleiding Tiny MCE. Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 E info@sanmax.

Editie 2010. Handleiding Tiny MCE. Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 E info@sanmax. Editie 2010 Handleiding Tiny Tiny Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 E info@sanmax.be Sanmax Tiny handleiding Inhoudsopgave Deel 1: Inleiding... 3 Deel 2: icoontjes

Nadere informatie

De Kleine WordPress Handleiding

De Kleine WordPress Handleiding Introductie Dit is geen uitgebreide handleiding om een WordPress website of blog mee te bouwen. Het is ook geen overzicht van alle aspecten die een WordPress website zo bijzonder maken en geen verhandeling

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

Frontpage 2003. Een web aanmaken in Frontpage doe je zo: 1 Start Frontpage op. Het openingsvenster van Frontpage verschijnt.

Frontpage 2003. Een web aanmaken in Frontpage doe je zo: 1 Start Frontpage op. Het openingsvenster van Frontpage verschijnt. opmerking In deze instructie wordt een web gemaakt met frames. Het voorbeeld behandelt een digitaal portfolio, maar natuurlijk kun je de instructies gebruiken voor elk web met frames, ongeacht het onderwerp.

Nadere informatie

Toen stylesheets nog niet bestonden, moesten webdesigners met

Toen stylesheets nog niet bestonden, moesten webdesigners met Hoofdstuk 11 Creatief met kleuren en lettertypen In dit hoofdstuk: `` Tekstopmaak definiëren met CSS `` Werken met paginakleuren en achtergronden `` Lettertypeweergave veranderen `` Tekstbehandelingen

Nadere informatie

Bsc5 bk5100 - TOI. Proces- en presentatieportfolio Inleiding websites maken met Macromedia Dreamweaver. Technisch Ontwerp en Informatica

Bsc5 bk5100 - TOI. Proces- en presentatieportfolio Inleiding websites maken met Macromedia Dreamweaver. Technisch Ontwerp en Informatica Proces- en presentatieportfolio Technisch Ontwerp en Informatica http://toi.bk.tudelft.nl/bsc5 toi@bk.tudelft.nl Procesportfolio [week 2 t/m 17] voortgang en verloop van het ontwerpproces GEEN productpresentatie

Nadere informatie

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen

Markup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)

Nadere informatie

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/ Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden

Nadere informatie

Handleiding Deelnemers Food Guerrilla

Handleiding Deelnemers Food Guerrilla LOREM IPSUM I Handleiding Deelnemers Food Guerrilla WordPress post-invulling info@bureaubold.nl Marjet Wullink 06-42242614 ii BureauBold Tips & tricks voor SEO 0 Inhoudsopgave 1. INLOGGEN...................

Nadere informatie

Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net

Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net Workshop XIMPEL TV Winoe Bhikharie Vrije Universiteit Amsterdam www.ximpel.net / info@ximpel.net In deze workshop maak je kennis met XIMPEL TV en interactieve video. Bij interactieve video kun je de video

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress V 1.0 Door Inhoud Inloggen op de website... 3 Het Dashboard... 4 Berichten... 5 Berichten aanmaken... 5 Berichten bewerken... 6 Pagina's... 7 Pagina's aanmaken... 7 Pagina's bewerken...

Nadere informatie

4. Plak de gekopieerde tekst op de plaats van de cursor als pure tekst. 5. Plak de gekopieerde tekst op de plaats van de cursor vanuit Word

4. Plak de gekopieerde tekst op de plaats van de cursor als pure tekst. 5. Plak de gekopieerde tekst op de plaats van de cursor vanuit Word 1. Code. Toon HTML code van de tekst 2. Verwijder de opmaak van de geselecteerde tekst. 3. Plak de gekopieerde tekst op de plaats van de cursor 4. Plak de gekopieerde tekst op de plaats van de cursor als

Nadere informatie

Les 1. Digitale Media - DTP 1

Les 1. Digitale Media - DTP 1 Intro InDesign werkt met objecten, dit zijn alle elementen die je op een pagina kunt plaatsen. Bijvoorbeeld hulplijnen, om aan te geven waar de marges van de pagina s komen, maar ook tekstkaders, illustratiekaders,

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Websitecursus deel 1 HTML

Websitecursus deel 1 HTML Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014

Nadere informatie

Whitepaper. E-mail design best practices

Whitepaper. E-mail design best practices Whitepaper E-mail design best practices 14 tips voor het design van je e-mail Versterk de boodschap van je uiting Best practices voor je e-mail design Het design speelt een grote rol in de eerste indruk

Nadere informatie

Handleiding NarrowCasting

Handleiding NarrowCasting Handleiding NarrowCasting http://portal.vebe-narrowcasting.nl september 2013 1 Inhoud Inloggen 3 Dia overzicht 4 Nieuwe dia toevoegen 5 Dia bewerken 9 Dia exporteren naar toonbankkaart 11 Presentatie exporteren

Nadere informatie

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl Frontpage 2003 Jouw vak op het leerlingenweb E.M. van Nieuwaal Copyright 2008 http://cursus.anguillanova.nl Inleiding... 3 1. Ontwerp een sitemap... 4 2. Index.htm... 4 3. Nieuwe pagina s maken... 7 4.

Nadere informatie

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3 Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm

Nadere informatie

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0 Schoolwebsite.nu Snel aan de slag met uw website Versie 4.0 Inhoudsopgave Inhoudsopgave... 2 1 Inleiding... 3 2 Voor dat u begint... 4 3 Teksten op de website... 6 4 Groepspagina s... 8 5 De groepspagina...

Nadere informatie

Uw TEKSTEDITOR - alle iconen op een rij

Uw TEKSTEDITOR - alle iconen op een rij Uw TEKSTEDITOR - alle iconen op een rij Hieronder ziet u alle functionaliteiten van uw teksteditor onder elkaar ( op alfabetische volgorde). Afbeelding (zie foto) Bestanden (zie link) Broncode Citaat Documenten

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

Handleiding om uw website/webshop aan te passen

Handleiding om uw website/webshop aan te passen Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een

Nadere informatie

Min-height en min-width

Min-height en min-width Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint

Nadere informatie

Stap 3 Wat kunnen we met de inhoud?

Stap 3 Wat kunnen we met de inhoud? Stap 3 Wat kunnen we met de inhoud? We gaan in deze stap eens bestuderen wat we zoal voor mogelijkheden hebben om tekst op te maken en links in te voegen. Kompozer heeft voor de meest voorkomende zaken

Nadere informatie

Tutorial HTML CSS met Adobe Dreamweaver CSx

Tutorial HTML CSS met Adobe Dreamweaver CSx Tutorial HTML CSS met Adobe Dreamweaver CSx Johan Smits, Saxion, Minor Internetmarketing, WCM1, week 4 Introductie Bij het werken met content op een website is het van groot belang om tekst en vormgeving

Nadere informatie

3 Website opbouwen: vervolg

3 Website opbouwen: vervolg 3 Website opbouwen: vervolg 3.1 Elementen 3.1.1 Bestand Op je website kan je een bestand plaatsen (doc, pdf, ) dat door je bezoekers gedownload kan worden 3.1.2 Links. Zowel bij het typen van tekst (2.1.1)

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

I Het maken van een nieuwsbrief

I Het maken van een nieuwsbrief I Het maken van een nieuwsbrief Wat leer je? Veel bedrijven publiceren een korte nieuwsbrief waar zij hun personeel op de hoogte houden van belangrijke ontwikkelingen binnen het bedrijf. Hier meldt men

Nadere informatie

MARKETING & COMMUNICATIE - DIGITALE VORMGEVING

MARKETING & COMMUNICATIE - DIGITALE VORMGEVING MARKETING & COMMUNICATIE - DIGITALE VORMGEVING 1 WordPress.com Een site/blog aanmaken Ga naar www.wordpress.com. Bovenaan kun je de pagina vertalen in het Nederlands Account Maak een account aan. Vul in:

Nadere informatie

HTML. Media. Hans Roeyen V 3.0

HTML. Media. Hans Roeyen V 3.0 Media Hans Roeyen V 3.0 12 maart 2015 Inhoud 1. (Multi)Media op websites... 3 2. Flash en Websites... 4 3. Video op je website... 4 3.1. YouTube insluiten op de pagina... 4 3.2. Video zonder YouTube...

Nadere informatie

Hoe maak ik in groep 6 een werkstuk?

Hoe maak ik in groep 6 een werkstuk? Hoe maak ik in groep 6 een werkstuk? Je gaat de komende weken thuis een werkstuk maken. Een werkstuk is een lange weettekst. Het wordt geschreven om iemand iets te leren of te laten weten. Net als in een

Nadere informatie

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.

Nadere informatie

HANDLEIDING. WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING

HANDLEIDING. WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING HANDLEIDING WordPress LAATSTE VERSIE: 29-12-2011 RODER!CKVS WEBDESIGN & WEBHOSTING Inhoudsopgave Inloggen... 3 Een nieuw bericht plaatsen... 5 Aan een nieuw bericht beginnen... 5 Je bericht bewaren, een

Nadere informatie

Handleiding Deelnemers Food Guerrilla

Handleiding Deelnemers Food Guerrilla Lorem Ipsum i Handleiding Deelnemers Food Guerrilla WordPress post-invulling info@bureaubold.nl Marjet Wullink 06-42242614 ii BureauBold Tips & tricks voor SEO 0 Inhoudsopgave 1. INLOGGEN....................

Nadere informatie

Website De Contrabas Gebruiksaanwijzing voor het beheren van de groepspagina s

Website De Contrabas Gebruiksaanwijzing voor het beheren van de groepspagina s Website De Contrabas Gebruiksaanwijzing voor het beheren van de groepspagina s De groepspagina s zijn bedoeld om iets te vertellen en te laten zien van wat er in de groep gebeurd. Foto s zijn daar heel

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

PLAKKEN Nadat u een gedeelte heeft geknipt of gekopieerd kunt u met dit icoon de selectie weer in het veld plakken.

PLAKKEN Nadat u een gedeelte heeft geknipt of gekopieerd kunt u met dit icoon de selectie weer in het veld plakken. KNIPPEN Als u na de selectie van een gedeelte van een tekst of een afbeelding op dit icoon klikt, knipt u de selectie uit het veld. Op deze manier kunt u het geselecteerde verwijderen, maar het ook juist

Nadere informatie

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11

Introductie 2. Inloggen 3. Dashboard 4. Pagina aanmaken / bewerken 5. Bericht toevoegen / bewerken 6. Afbeelding toevoegen 7. De tekstbewerker 11 I n h o u d s o p g ave Introductie 2 Inloggen 3 Dashboard 4 Pagina aanmaken / bewerken 5 Bericht toevoegen / bewerken 6 Afbeelding toevoegen 7 De tekstbewerker 11 Menu toevoegen / aanpassen 12 I n t ro

Nadere informatie

Handleiding Vedor-editor

Handleiding Vedor-editor Handleiding Vedor-editor Oktober 2008 Versie 1.1 Inhoudsopgave 1 Inleiding... 3 2 Aanmelden... 4 3 De werkbalk... 5 4 Het contextmenu... 7 5 Navigeren binnen je website... 8 6 Tekst toevoegen en bewerken...

Nadere informatie

PDF XCHANGE EDITOR Waarom PDF XHCANGE Editor?

PDF XCHANGE EDITOR Waarom PDF XHCANGE Editor? PDF XCHANGE EDITOR PDF XHCANGE editor is een programma om PDF bestanden te lezen en te bewerken. Deze handleiding is geschreven voor versie 5.5 van PDF XCHANGE editor. Als je een andere versie gebruikt

Nadere informatie

Handleiding CrisisConnect app beheersysteem

Handleiding CrisisConnect app beheersysteem Handleiding CrisisConnect app beheersysteem Inhoudsopgave 'Welkom bij de handleiding van de CrisisConnect app' 1. Start 1.1. Vereisten gebruik 1.2. Inloggen 1.3. Wachtwoord wijzigen 2. Vullen 2.1 Dossiers

Nadere informatie

Handleiding Word Press voor de bewoners Westerkaap 1

Handleiding Word Press voor de bewoners Westerkaap 1 1 Handleiding Word Press voor de bewoners Westerkaap 1 Inhoud: Inloggen Pagina 1 Algemeen Pagina 2 Berichten Pagina 2 Bericht bewerken, Linken Pagina 3-4 Plaatje toevoegen bericht Pagina 5-6 Bericht publiceren

Nadere informatie

HANDLEIDING DOIT BEHEER SYSTEEM

HANDLEIDING DOIT BEHEER SYSTEEM HANDLEIDING DOIT BEHEER SYSTEEM ALGEMENE INFORMATIE Het Doit beheer systeem is een modulair opgebouwd systeem waarin modules makkelijk kunnen worden toegevoegd of aangepast, niet iedere gebruiker zal dezelfde

Nadere informatie

Handleiding Tridion voor authors en editors

Handleiding Tridion voor authors en editors Handleiding Tridion voor authors en editors Wijzigen van items van vóór de herimplementatie (mei 2009) Telefoon helpdesk: 7500 E-mail: helpdesktridion@gmail.com. Juli 2009 Een bestaand item wijzigen Het

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

Inhalen les 7 (versie B)

Inhalen les 7 (versie B) Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.

Nadere informatie

Website met Wordpress

Website met Wordpress Website met Wordpress 5. Tabellen Onderwerpen van deze les: Editor Tiny MCE toevoegen Tabellen maken met TinyMCE WP-Table reloaded installeren en gebruiken Excel importeren in WP-Table reloaded Content

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

De tekst staat nu aan de linkerkant. De tekst staat nu aan de rechterkant. De tekst staat nu in het midden.

De tekst staat nu aan de linkerkant. De tekst staat nu aan de rechterkant. De tekst staat nu in het midden. 1. Uitlijnen Uitlijnen: De manier waarop een regel wordt getoond. Dit kan op vier verschillende manieren. We geven hieronder vier voorbeelden. A. Links uitlijnen De tekst staat nu aan de linkerkant. B.

Nadere informatie

Introductie. Wat is HTML?

Introductie. Wat is HTML? Introductie Wat is HTML? Hypertext Markup Language (HTML) is de taal van het World Wide Web. Elk document op het web is geschreven in HTML en alle onderdelen - zoals de opmaak van documenten, koppelingen,

Nadere informatie

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash

Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis

Nadere informatie

Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op.

Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op. Kathleenferrier.nl: het KF centrum online Handleiding voor de Blog & Nieuwssectie Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op. Het is de plek waarvandaan mensen

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

Kies [paginas]: Een lijst met alle paginas verschijnt. Muis-over en er verchijnen opties per pagina: Bewerken prullenbak bekijken

Kies [paginas]: Een lijst met alle paginas verschijnt. Muis-over en er verchijnen opties per pagina: Bewerken prullenbak bekijken Wordpress handleiding: Algemeen: -Hosting 200Mb webruimte en 2Gb verkeer per maand voor 3 euro per maand. Bij overschrijding volgt automatisch een verdubbeling naar de ruimte/verkeer naar 400Mb/4Gb/6 euro

Nadere informatie

Algemene basis instructies

Algemene basis instructies Inhoud: Algemene basis instructies... 2 Pictogrammen en knoppen... 2 Overzicht... 3 Navigeren (bladeren)... 3 Gegevens filteren... 4 Getoonde gegevens... 5 Archief... 5 Album... 5 Tabbladen en velden...

Nadere informatie

PvdA websites Quick Start voor het werken met het Hippo CMS

PvdA websites Quick Start voor het werken met het Hippo CMS PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3

Nadere informatie

Uw eigen tekst en foto s op uw site bijhouden

Uw eigen tekst en foto s op uw site bijhouden Uw eigen tekst en foto s op uw site bijhouden Voorbereiding U heeft een cd ontvangen met een aantal bestanden erop. O.a. de website, dreamweaver en 2 tekstbestanden genaamd s/n en inloggegevens. De website

Nadere informatie