MANUAL INTERNETSTANDAARDEN. HvA - CMD Blok v1.0

Maat: px
Weergave met pagina beginnen:

Download "MANUAL INTERNETSTANDAARDEN. HvA - CMD Blok 1 2013-14 v1.0"

Transcriptie

1 MANUAL INTERNETSTANDAARDEN HvA - CMD Blok v1.0

2 INHOUD Weekoverzicht... 4 Vakomschrijving... 5 Diagnostische toets (Voor gevorderden)... 8 Blokweek Lees- en werkroutes... 9 Software installeren... 9 Oefeningen HTML Artikel opmaken in HTML Studievragen blokweek Blokweek Lees- en werkroutes Factsheet HTML Oefeningen HTML Content website verzamelen / maken Studievragen blokweek Blokweek Lees- en werkroutes Oefeningen CSS HTML-template voor eigen website maken Nieuwe mogelijkheden HTML5 onderzoeken (gevorderden) min presentatie studentensymposium (expert) Studievragen blokweek Blokweek Lees- en werkroutes Oefeningen CSS jquery (gevorderden) Nieuwe mogelijkheden CSS3 onderzoeken (gevorderden) Studievragen blokweek Blokweek Lees- en werkroutes Maak eindopdracht zoveel mogelijk af Manual Internetstandaarden / 37

3 Studievragen blokweek Blokweek Lees- en werkroutes Maak eindopdracht af en zet online Studievragen blokweek Boeken, Software en Websites Manual Internetstandaarden / 37

4 WEEKOVERZICHT Manual Internetstandaarden / 37

5 VAKOMSCHRIJVING HTML en CSS begrijpen helpt iedereen die wel eens met het web werkt. Als ontwerper kun je mooiere en meer bruikbare websites ontwerpen, als beheerder kun je betere inhoud maken, als marketeer kun je effectiever communiceren en als ontwikkelaar kun je beter doorzoekbare en netter opgebouwde websites ontwikkelen. In het vak Internetstandaarden krijg je, naast een theoretische basis, ruimte om actief met HTML en CSS te stoeien om de fundamenten van het wereldwijde web te ontdekken. LEERDOELEN De student kent de basis van HTML en CSS en kan deze kennis toepassen bij het maken van een eenvoudige website, met inachtneming van de standaarden van het W3C. De student kent de principes van toegankelijk en gebruiksvriendelijk webdesign en kan keuzes met betrekking tot de toepassing hiervan onderbouwen. De student is in staat gebruik te maken van de internet services HTTP en (S)FTP om een site online te zetten en te bekijken. De student kan leesbare, efficiënte en overdraagbare code schrijven BEROEPEN Kernvak, relevant voor alle CMD-beroepsrollen CMD COMPETENTIES Ontwerpen 1.4 Gebruikt basiskennis over interactie-, informatie- en visueel ontwerp. Maken 3.5 Maakt een eenvoudige website die voldoet aan webstandaarden. INHOUD Internetstandaarden gaat over het maken van websites met behulp van HTML, CSS en Javascript. Hierbij staan de standaarden van het W3C centraal. De onderwerpen die worden behandeld zijn: Syntax van HTML en CSS Semantiek, het structureren van de inhoud Scheiding van vormgeving, inhoud en gedrag Standaardisering Navigatiepatronen CSS cascading en overerving Nesten en het Document Object Model en hoe selecteer je met CSS elementen uit je DOM PLAATS IN HET CURRICULUM Internetstandaarden bijt het spits af voor de technieklijn in de propedeuse. De student krijgt een introductie in het maken van (interactieve) websites. Gedurende het jaar kunnen de geleerde Manual Internetstandaarden / 37

6 technieken worden ingezet in de projecten, bij het maken van het digitaal portfolio (SLC) en mogelijkerwijs in andere vakken. WERKWIJZE Internetstandaarden bestaat wekelijks uit een hoorcollege en een werkcollege. In het werkcollege brengen de studenten de in het hoorcollege behandelde theorie in praktijk. De studenten krijgen aan de hand van oefenopdrachten de benodigde technieken voor de eindopdracht onder de knie. De hoorcollegereeks wordt afgesloten met een schriftelijk tentamen. In de werkgroepen werk je aan eindopdracht. CRITERIA Bij het tentamen moeten studenten minstens 55 punten halen van in totaal 100 voor een voldoende. De practicumopdracht moet aan een aantal criteria voldoen, voordat hij in aanmerking komt voor een beoordeling (AVV: Aan Voorwaarden Voldaan) De website bestaat uit tenminste vier pagina s. De website bevat relevante inhoud in correct Nederlands. De website is verzorgd en leesbaar opgemaakt. Wanneer de content niet zelf is geproduceerd, wordt de bron vermeld volgens de MLA standaard. De website staat op de in de les aangegeven server en is zonder technische problemen te bereiken. De minimale criteria voor de practicumopdracht (benodigd voor het behalen van maximaal een 6) zijn: De HTML-code is semantisch correct, de inhoud is goed gestructureerd. De HTML-code is syntactisch correct, levert geen fouten op bij de validator. De website heeft een menu gebaseerd op unordered lists. De CSS-code is syntactisch correct. De code voldoet aan de in de les aangereikte codingstandaarden. De vormgeving is consistent doorgevoerd. HTML is enkel gebruikt voor content, CSS enkel voor opmaak ( Javascript enkel voor gedrag) en is fysiek gescheiden. Ophoging van dit cijfer kan behaald worden door, bijvoorbeeld: Javascript / jquery te gebruiken voor DOM-manipulatie. Veel aandacht te besteden aan vormgeving. Je website oogt professioneel. Elegant te coderen, bijvoorbeeld met behulp van een CSS-strategie. Cross-browser verschillen op te lossen met behulp van CSS Een technisch complexe lay-out te hanteren. Een responsive design te realiseren. Manual Internetstandaarden / 37

7 TOETSING EN FEEDBACK De toetsing geschiedt in twee delen. Om het vak succesvol af te ronden, dienen beide delen voldoende beoordeeld te zijn. Delen die onvoldoende beoordeeld worden kunnen worden aangevuld of herkanst. De twee onderdelen van toetsing zijn: Een tentamen met kennis- en inzichtvragen. Een practicumopdracht bestaande uit het maken van een eigen website van minimaal 4 pagina's. Tijdens de laatste werkgroep beoordelen studenten elkaars opdracht en geven hiermee een adviesbeoordeling aan de docent. Aanwezigheid bij deze werkgroep is verplicht. De adviesbeoordeling wordt door de docent meegewogen in de definitieve beoordeling. LITERATUUR Verplicht: Engelse versie Duckett, Jon, HTML & CSS: Design and Build Webpages, Indianapolis: Wiley, 2011 (te koop op bookdepository.co.uk) of Nederlandse versie Duckett, Jon, HTML & CSS: Websites ontwerpen en bouwen, Pearson Benelux, Manual Internetstandaarden / 37

8 DIAGNOSTISCHE TOETS (VOOR GEVORDERDEN) Datum: wo avond 18 september Inschrijven: vóór vrijdag 13 september bij je eigen docent Tijdstip en lokatie: TTH02A12 18:40 uur Ieder jaar zijn er een aantal eerstejaarsstudenten die al zoveel ervaring hebben bij het maken van websites, dat ons vak te weinig uitdaging biedt. Voor deze mensen bieden we de mogelijkheid om een alternatief traject te volgen, waardoor je toch nog nieuwe dingen leert. Bij het maken van websites met HTML, CSS en Javascript is momenteel zo veel aan het veranderen dat er genoeg te leren valt. Je moet natuurlijk wel kunnen bewijzen dat je aan de eindcriteria van ons vak voldoet. Daarom bieden we aan het begin van blok 1 een diagnostische toets aan. Let op dat je toch wel behoorlijk wat kennis en ervaring nodig hebt om deze toets te kunnen halen, anders is het verloren moeite. De diagnostische toets bestaat uit tien vragen over de kernprincipes van ons vak. Jouw antwoorden bespreken we aansluitend tijdens een mondeling en daar laat je ook een of meerdere websites zien die je zelf gemaakt hebt. Om je voor te bereiden, lees je het eerste deel van deze manual met de vak omschrijving heel goed door. Hier staan de leerdoelen, de lesstof en de beoordelingscriteria. Verder kun je het boek dat bij dit vak hoort doorscannen om te zien of er dingen in staan die je nog niet weet. Daarnaast kies je een of meerdere websites uit die je zelf hebt gemaakt en die voldoen aan de criteria van ons vak. Als je geen websites hebt die aan de criteria voldoen, kun je overwegen om er eentje te maken. Als je de diagnostische toets haalt, mag je jezelf gevorderde noemen. Je krijgt dan meer een rol van student-assistent. Tijdens het practicum en werkgroepen help je je medestudenten, niet door hun code te gaan schrijven, maar door uitleg te geven. Je mag meedoen aan masterclasses die gegeven worden. Je krijgt vrijstelling voor het huiswerk, maar je maakt nog wel de practicumopdracht en het tentamen. Als je bij de diagnostische toets hoger dan een 8 haalt, mag je jezelf expert noemen. In dat geval krijg je vrijstelling van de practicumopdracht en het tentamen, onder voorbehoud dat je als studentassistent helpt bij de lessen en een presentatie van 10 minuten aan je klas geeft over een geavanceerd onderwerp. Denk aan onderwerpen als: responsive webdesign, geolocatie, de mogelijkheden van het canvas element, 3D, interactieve elementen met ajax etc. Als je inspiratie nodig hebt, kijk dan bijvoorbeeld op Overleg met je docent welk onderwerp je wilt doen en in welke lesweek je de presentatie gaat houden. De beste expert studenten mogen hun presentatie geven aan alle propedeusestudenten tijdens het laatste college van Internetstandaarden. Je cijfer voor dit vak wordt het gemiddelde tussen je cijfer voor de diagnostische toets en een cijfer dat je krijgt voor de presentatie aan de klas. Beide onderdelen moeten wel voldoende zijn. Manual Internetstandaarden / 37

9 BLOKWEEK 2 Laten we van start gaan! Het zal misschien even wennen zijn aan het tempo van HBO, maar als je netjes elke week je werk doet, is het goed te doen. Geen zorgen als je nog geen ervaring hebt, want we bieden je veel oefeningen en demonstraties aan. Sommige van jullie hebben wellicht al meer of zelfs veel ervaring in het maken van websites. Daarom proberen we het vak voor alle niveaus interessant te maken. Lees het stuk over de diagnostische toets op pagina 8 om te zien of je daaraan mee wilt doen. Uiteindelijk moet iedereen voldoen aan dezelfde eindcriteria, maar je kunt veel meer uit het vak halen als je dat wilt. LEES- EN WERKROUTES Lezen hoofdstuk 1,2,3 en 18 van het boek. Deadline: voor HC op 17 september Software installeren. Zie pag. 9 Deadline: voor werkgroep in blokweek 3 Oefeningen HTML. Zie pag. 10. Deadline: voor werkgroep in blokweek 3 Artikel opmaken in HTML. Zie pag. 17 Deadline: voor werkgroep in blokweek 3 (Optioneel) Inschrijven voor diagnostische toets bij je docent. Deadline: uiterlijk vrijdag 13 september. (Optioneel) Boek doorscannen ter voorbereiding op diagnostische toets. Deadline: woensdag 18 september BEGINNELING GEVORDERDE EXPERT SOFTWARE INSTALLEREN Als je websites gaat maken heb je in ieder geval een drietal programma s nodig: 1. Een browser om je website in te bekijken. We willen dat iedereen bij dit vak Google Chrome gebruikt, omdat hierin een aantal handige tools zitten en deze browser werkt goed met HTML5 en CSS3. In de tabel hieronder staat een link naar de downloadsite voor Chrome. Ook staan er een tweetal extensies die handig zijn en die we vooral aanbevelen aan beginnelingen. 2. Een code-editor om je code in te typen. We raden bij dit vak Sublime aan, omdat het een goede gratis editor is die zowel voor Mac als Windows beschikbaar is. Als je zelf voorkeur hebt voor een andere editor, mag dat ook. 3. Een ftp-programma om je website online te publiceren. We raden Filezilla aan, maar andere ftp-programma s zijn ook mogelijk. Manual Internetstandaarden / 37

10 SOFTWARE EN PLUGINS https://www.google.com/intl/en/chro me/browser/ https://chrome.google.com/webstor e/detail/webdeveloper/bfbameneiokkgbdmiekhj nmfkcnldhhm Verplicht. Installeer Chrome als je die nog niet op je computer hebt staan. Deze browser ondersteunt de meeste html5 en css3 eigenschappen en gebruik je bij het nakijken van je website. Aanbevolen. Deze code editor voor zowel Mac als Windows heeft onze voorkeur bij dit vak. Je mag ook een andere code editor gebruiken als dat je voorkeur heeft, maar we raden deze vooral aan als je nieuweling bent. Aanbevolen. Filezilla is een een ftp-programma voor zowel Mac als Windows, waarmee je je website online kunt zetten. Je mag ook een ander ftp-programma gebruiken als dat je voorkeur heeft. Aanbevolen. Chrome extensie met allerlei handige hulpmiddelen voor het maken van websites. X X X X X X X X X X X X OEFENINGEN HTML OEFENING 1 EEN EERSTE WEBPAGINA 1. Open Sublime en neem onderstaande code over in een leeg bestand. <!DOCTYPE html> <html> <head> <title>dit komt in de titelbalk van een tab</title> </head> <body> <h1>hallo wereld!</h1> </body> </html> 2. Maak een map / folder aan op je computer waar je de bestanden van deze oefeningen opslaat, bijvoorbeeld IS-wg1. Sla het bestand wat je zojuist hebt gemaakt in deze map op met de naam 'index.html'. 3. Open het bestand nu met Chrome door hem vanuit Verkenner / Finder naar Chrome toe te slepen. Als het goed is zie je nu de tekst 'Hallo wereld!' staan. 4. Zoek de tekst 'Dit komt in de titelbalk van een tab' in het Chrome venster. Manual Internetstandaarden / 37

11 HTML-TAGS De stukjes code met <> worden html-tags genoemd. De meeste tags hebben een begintag tussen <...> en een eindtag met </...>. Er zijn een aantal uitzonderingen, maar daar komen we later op terug. OPBOUW HTML DOCUMENT In bovenstaand voorbeeld zijn vijf tags gebruikt: <html>, <head>, <title>, <body> en <h1>. Een html bestand bestaat altijd uit twee delen: de head en de body. In de head (tussen <head> en </head>) kan je allerlei algemene informatie over het bestand kwijt, zoals de titel. In de body (tussen <body> en </body>) komt de inhoud van de pagina zelf, hetgeen dat zichtbaar wordt voor de gebruiker. 5. Ga terug naar je Sublime en vervang de code tussen <body> en </body> door: Hallo Wereld! De regeleindes en een browser bekijk. spaties verdwijnen als ik het in 6. Sla het bestand op. Ga naar Chrome en klik op 'reload this page'. PARAGRAFEN Je ziet dat regeleindes en spaties verdwijnen als je het in een browser bekijkt. Als je een bestand wilt opmaken ga je daar html-tags voor gebruiken. Eén van de tags is <p> die gebruikt wordt voor paragrafen. Om een paragraaf te maken zet je vooraan de tag <p> en om de paragraaf af te sluiten gebruik je </p>. 7. Hieronder staat de code nogmaals, maar er zijn paragraaf tags toegevoegd. Neem de <h1>, </h1>, <p> en </p> tags over in je eigen code. <h1>hallo Wereld!</h1> <p>de regeleindes en een browser bekijk.</p> spaties verdwijnen als ik het in 8. Sla het bestand op. Ga naar Chrome en klik op reload this page. 9. Voeg zelf onderaan een nieuwe paragraaf toe met tekst erin die je zelf verzint. 10. Sla het bestand op. Ga naar Chrome en klik op reload this page. Manual Internetstandaarden / 37

12 11. Voeg onderstaande regel toe binnen de body. <p>dit is een nieuwe paragraaf. En dit <br /> is een regeleinde middenin een paragraaf.</p> 12. Sla het bestand op. Ga naar Chrome en klik op reload this page. REGELEINDEN Je kunt een regeleinde toevoegen met de tag <br />. De meeste tags hebben een begintag <...> en een eindtag </...>, maar <br /> is een van de uitzonderingen. Vaak wil je van een stuk tekst de opmaak bepalen. Zoals bij een paragraaf geef je met <p> aan dat daar een paragraaf begint en met </p> dat de paragraaf daar eindigt. Met een regeleinde is het anders. Je combineert de begintag <br> en eindtag </br> samen in één tag <br />. OEFENING 2 HTML-SPIEKBRIEF MAKEN Als je net begonnen bent met het leren van HTML zul je alle verschillende tags moeilijk kunnen onthouden. Daarom maken we een HTML-spiekbrief met de meest gebruikte tags. Met deze tags kunnen we pagina's iets spannender maken dan onze eerste pagina. Toch zal het pas echt mooi worden als je stylesheets (CSS) gaat gebruiken. Met een stylesheet gaan we lettertypen, kleuren, randen, afmetingen en lay-out aanpassen. Dat gaan we vanaf de derde week pas gaan leren. 1. Ga naar https://gist.github.com/ Hier staat het basisrecept van een lege pagina. Zet deze pagina bij je favorieten / bookmarks. Kopieer de HTML-code naar een nieuw leeg bestand in Sublime. 2. Sla het bestand op als 'spiekbrief.html' in dezelfde map op als de vorige oefening ( IS-wg1 ). 3. Verander wat in de <title> tag staat naar HTML spiekbrief. 4. Alle code die vanaf nu wordt toegevoegd, zal in de body komen te staan, dus in plaats van de tekst Dit is de body. Allereerst gaan we verschillende niveaus koppen toevoegen. De belangrijkste kop op een pagina wordt aangegeven met <h1>. Daarna zijn er nog 5 andere niveaus: <h2> t/m <h6>. De letter 'h' komt van de Engelse term voor kop, namelijk 'header'. Voeg onderstaande code toe aan de spiekbrief binnen de body. <h1>kop niveau 1</h1> <h2>kop niveau 2</h2> <h3>kop niveau 3</h3> <h4>kop niveau 4</h4> <h5>kop niveau 5</h5> <h6>kop niveau 6</h6> 5. Sla het bestand op en open het bestand in Chrome. Manual Internetstandaarden / 37

13 6. Nu voeg je een stuk code toe dat we al eerder hebben gebruikt: <p>de regeleindes en spaties verdwijnen als ik het in een browser bekijk.</p> <p>dit is een nieuwe paragraaf. En dit <br /> is een regeleinde middenin een paragraaf.</p> 7. Sla het bestand op en klik op reload in Chrome. Vanaf nu herinner ik je er niet meer aan om het bestand op te slaan en op reload te klikken om het resultaat van je code te zien. 8. Als je een stukje tekst wilt benadrukken, kan je dat op twee manieren doen, met <strong> of met <em> (van emphasize). Je kunt <em> bijvoorbeeld gebruiken om aan te geven waar de klemtoon valt. Voeg onderstaande code toe en bekijk het resultaat: <p> CMD stelt <strong>ontwerpen</strong> centraal in de opleiding. Zij wil studenten leren te denken als een ontwerper en opleiden tot interactieve media ontwerpers met een goede aansluiting op de huidige én de toekomstige beroepspraktijk. CMD gelooft in het <em>human centered ontwerpproces. </em></p> De volgorde waarin je tags opent en sluit is niet zomaar willekeurig. In bovenstaand stukje code zie je dat binnen een paragraaf twee tags <strong> en <em> worden gebruikt. Je ziet dat </em> eerder dan </p> komt. Manual Internetstandaarden / 37

14 VOLGORDE OM TAGS TE OPENEN EN TE SLUITEN Je kunt tags binnen andere tags gebruiken. Je moet wel, want je hebt de tag <html> en </html>. Hiertussen staan de tags <head> </head> en <body> </body>. We zeggen dat de head en de body in de html tag staan, ofwel we nesten head en body in de html tag. <html> <head> </head> <body> </body> </html> GOED! Wanneer een tag wordt geopend binnen een andere tag, dan moet de tag afgesloten worden voordat de andere tag wordt afgesloten. Onderstaande voorbeelden zijn fout: <html> <head> <body> </head> </body> </html> FOUT! <html> <head> </head> <body> </html> </body> FOUT! 9. We gaan verder met nieuwe tags. Deze tags kun je gebruiken om lijsten te maken, namelijk genummerde lijsten met <ol> (ordered list) en ongenummerde lijsten met <ul> (unordered list). Voor elk item uit de lijst gebruik je een <li> (list item). Kopieer de code en bekijk het resultaat. <ol> <li>eerste item</li> <li>tweede item</li> <li>...</li> </ol> <ul> <li>bulleted item</li> <li>nog een item</li> <li>...</li> </ul> Manual Internetstandaarden / 37

15 10. We willen een afbeelding toevoegen. Binnen webpagina's kan je het beste afbeeldingen van type gif, jpg of png gebruiken. Het is goed gebruik om je afbeeldingen in een aparte map te zetten. Maak een map met de naam media binnen de map IS-wg1. Haal ergens een (niet te grote) afbeelding vandaan en zet hem in de zojuist gemaakte map media. Stel dat mijn afbeelding 'verjaardag.jpg' heet. Dan kan ik de afbeelding invoegen met de volgende tag: <p><img src="media/verjaardag.jpg" alt="verjaardag" /></p> Probeer dit voor je eigen afbeelding. AFBEELDINGEN Binnen websites worden voornamelijk afbeeldingen van type gif, jpg of png gebruikt. Voor afbeeldingen gebruik je de img tag. De img tag is een voorbeeld van een tag waarbij begintag en eindtag zijn samengevoegd, net als bij <br />. In een img tag moet je altijd twee dingen aangeven: src de locatie van het plaatje o als de afbeelding in dezelfde map staat als het html document, dan zet je hier de bestandsnaam, bijv: <img src="verjaardag.jpg" alt="verjaardag" /> o als de afbeelding in een andere map staat, bijvoorbeeld in een submap met de naam 'img', dan geef je het pad aan: <img src="img/verjaardag.jpg" alt="verjaardag" /> o Je kunt ook een url gebruiken als de afbeelding ergens online staat, bijv: <img src="http://www.mijnsite.nl/verjaardag.jpg" alt="verjaardag" /> alt een beschrijving in tekst van de afbeelding. Mocht de afbeelding niet zichtbaar zijn om een of andere reden, dan krijgt de bezoeker deze tekst te zien. 11. Een van de belangrijkste onderdelen van websites zijn links. Hieronder zie je drie voorbeelden van links. Kopieer ze in je code en probeer ze eens uit door erop te klikken. <p> Een link naar een andere site, bijvoorbeeld naar <a href="http://www.html5rocks.com/en/">html5 Rocks</a><br /> Een link naar een andere pagina in je eigen website, bijvoorbeeld naar <a href="index.html">mijn eerste webpagina</a><br /> Een link naar een adres, bijvoorbeeld naar <a </p> Manual Internetstandaarden / 37

16 LINKS Voor links gebruik je de a tag en kan je de volgende dingen aangeven: href de locatie waar de link naartoe gaat. o als je een lokale link wilt maken, dan zet je hier de bestandsnaam, of het pad naar de bestandsnaam, bijv: <a href="spiekbrief.html">spiekbrief</a> o als je een link naar een andere site wilt maken, dan zet je de complete url neer, bijv: <a href="http://www.w3.org/">w3c</a> o Je kunt ook een mailto link maken naar een adres, bijv: <a mij</a> target als je wilt aangeven dat de pagina in een nieuw venster geopend moet worden, doe je dat met de target als volgt: <a href="http://www.w3.org/" target="_blank">w3c</a> ATTRIBUTEN VAN TAGS Een tag kan attributen bevatten waarin je extra informatie zet. In de voorbeelden hieronder zie je de attributen src en alt in de img tag en het attribuut href in de a tag. Sommige attributen zijn verplicht en andere attributen zijn optioneel. Zo zijn bij een img de attributen src en alt beide verplicht. Bij de link staat een title attribuut en deze is optioneel. <img src="media/verjaardag.jpg" alt="verjaardag" /> <a href="spiekbrief.html" title="deze spiekbrief heb ik voor mezelf gemaakt">spiekbrief</a> Een attribuut wordt altijd gevolgd door een '=' teken en de informatie die erbij hoort komt tussen dubbele aanhalingstekens "". Je spiekbrief is nu klaar! Manual Internetstandaarden / 37

17 OEFENING 3 ALLES COMBINEREN 1. Maak een nieuw leeg bestand in je html-editor met de naam parkiet.html'. 2. Kopieer het basisrecept van een HTML-pagina erin, zoals je dat bij de vorige oefening ook hebt gedaan. Zie https://gist.github.com/ Probeer onderstaand voorbeeld te maken. De tekst en afbeelding kun je halen van De link in het woord exoot in de eerste paragraaf gaat naar " Verder zijn er woorden op verschillende manieren benadrukt en is er een geordende lijst gebruikt. ARTIKEL OPMAKEN IN HTML In de laatste oefening over de halsbandparkiet hoefde je niet zelf na te denken over hoe de inhoud van de pagina gestructureerd moest worden, omdat je het eindresultaat al wist. In deze oefening is het de bedoeling dat je zelf bedenkt welke tags je moet gebruiken. In de les heb je gehoord welke van de artikelen je gaat doen. Gebruik de links hieronder om de tekst te downloaden naar je eigen computer. Uit deze tekst is alle structuur weggehaald. Gebruik HTML om deze weer terug te zetten. Je kunt starten met het basisrecept dat je bij de oefeningen ook hebt gebruikt. 1. Artikel 1: https://gist.github.com/ Artikel 2: https://gist.github.com/ Artikel 3: https://gist.github.com/ Artikel 4: https://gist.github.com/ Manual Internetstandaarden / 37

18 STUDIEVRAGEN BLOKWEEK 2 Elke week staan er in deze manual een aantal studievragen opgesomd. Hiermee kun je inschatten of je de belangrijkste onderwerpen hebt begrepen. Probeer voor jezelf antwoord te geven op de vragen. Als je het antwoord niet weet, ga dan terug naar je aantekeningen van het hoorcollege of denk terug aan de werkgroep. 1. Waar is HTML voor bedoeld? 2. Wat betekent het als je een pagina semantisch opmaakt? 3. Hoe ziet de anatomie van een HTML-element eruit? 4. Hoe ziet de anatomie van een HTML-tag eruit? 5. Wat betekent het nesten van HTML-elementen? 6. Wat is de DOM? 7. Wat is het verschil tussen de <head> en de <body> van een pagina? Manual Internetstandaarden / 37

19 BLOKWEEK 3 Woensdagavond is de diagnostische toets voor mensen die dat willen doen. Het is alleen verstandig om mee te doen, als je al behoorlijk veel kennis over HTML en CSS hebt. Je had je bij je docent moeten opgeven om mee te doen aan deze toets. In de werkgroep gaan we verder met oefeningen over HTML. Dit is de laatste week dat je met HTML oefeningen doet, want volgende week gaan we alweer aan een nieuwe taal beginnen: CSS. Ook maak je deze week een begin met de eindopdracht van het practicum. LEES- EN WERKROUTES Lezen hoofdstuk 4,5,6 en 8 van het boek. Deadline: voor HC op 24 september Lezen Factsheet HTML5. Zie pag.20 Deadline: voor HC op 24 september Oefeningen HTML. Zie pag. 22 Deadline: voor werkgroep in blokweek 4 Content website verzamelen / maken. Zie pag. 27 Deadline: voor werkgroep in blokweek 4 (Optioneel) Boek doorscannen ter voorbereiding op diagnostische toets. Deadline: wo 18 september. BEGINNELING GEVORDERDE EXPERT Manual Internetstandaarden / 37

20 FACTSHEET HTML5 HTML staat voor HyperText Markup Language. Deze taal wordt gebruikt om documenten op te maken voor het World Wide Web. Met andere woorden met HTML kan je websites opmaken die via het internet kunnen worden geraadpleegd. HTML5 is de nieuwste versie van HTML en is nog geen standaard volgens het W3C, maar kan al wel gebruikt worden in de meeste moderne browsers. Een van de belangrijkste verschillen van HTML5 met de voorgaande versie is dat er een aantal nieuwe semantische elementen zijn gespecificeerd. De belangrijkste nieuwe elementen worden hieronder beschreven. NIEUWE HTML5 ELEMENTEN <header> Het header element specificeert een header van een document of een section. <nav> Het nav element specificeert een navigatie sectie van een document. Het nav element bevat links naar andere documenten of naar andere elementen in het document. <section> Het sectie element beschrijft een sectie gerelateerde content. Een sectie heeft typisch een header. Secties kunnen bijvoorbeeld worden gebruikt voor de hoofdstukken in een boek of verhaal. <article> Het article element is een speciaal sectie element. Het specificeert een op zichzelf staand blok content in het document, dat als zodanig kan worden hergebruikt op een andere plek. Een voorbeeld van een article element is een forum-bericht of een nieuwsartikel. <aside> Het aside element is een sectie element dat (enigszins) gerelateerd is tot de naastliggende content. Het aside element kan bijvoorbeeld worden gebruikt worden om een sidebar op te maken. <footer> Het footer element is een sectie waarmee typisch metadata over de omliggende sectie wordt opgemaakt. VOORDELEN HTML5 Beter indexeerbaar Door de nieuwe semantische HTML5 elementen kunnen HTML documenten met meer betekenis worden opgemaakt en kunnen daarom beter worden geindexeerd door zoekmachines zoals Google. Rijkere content HTML5 maakt het mogelijk om rijke, interactieve content toe te voegen zonder dat daar plugins zoals Flash voor nodig zijn. Denk hierbij aan video, audio, animaties, grafieken, e.d. Manual Internetstandaarden / 37

21 Consistentere opmaak Door de nieuwe semantische elementen zullen html documenten consistenter worden opgemaakt en zal het voor ontwikkelaars en ontwerpers makkelijker worden om de structuur van een pagina te begrijpen. Handigere formulieren HTML5 biedt een aantal nieuwe functionaliteiten voor formulieren. Het is nu bijvoorbeeld mogelijk om zonder javascript formulieren te valideren. Offline applicatie cache Offline applicatie cache maakt het mogelijk om een webapplicatie (gedeeltelijk) op een apparaat op te slaan zodat de applicatie kan worden geraadpleegd als het apparaat offline is. Betere performance Lokale opslag van data kan de performance van webapplicaties drastisch verbeteren, doordat er minder netwerk verkeer noodzakelijk is. NADELEN HTML5 Browser support HTML5 wordt niet door alle browsers in dezelfde mate ondersteund. Het kan dus zijn dat bepaalde HTML5 toepassingen verschillend reageren in verschillende browsers. Met name oudere versies van Internet Explorer (voor IE9) ondersteunen nauwelijks HTML5. De javascript library Modernizr kan worden gebruikt om HTML5 ondersteuning voor oudere browsers te simuleren. Nog niet klaar De verwachting is dat de specificaties voor HTML5 pas rond 2020 klaar zullen zijn. Dat kan in principe betekenen dat alles wat nu bedacht is weer kan veranderen. Algemeen aangenomen wordt echter dat een groot gedeelte van HTML5 niet meer zal worden aangepast. Media licenties Door gesteggel met licenties worden bepaalde media formaten niet door alle browsers ondersteund. Dat kan betekenen dat je bijvoorbeeld verschillende audio bestanden nodig hebt om hetzelfde audio element op te maken. Manual Internetstandaarden / 37

22 OEFENINGEN HTML OEFENING 1 SYNTAX CONTROLEREN Je hebt vorige week een eerste webpagina gemaakt. Misschien zag het er nog niet zo spannend uit, maar je zal binnenkort al veel meer kunnen. Eerst krijg je een korte uitleg over HTML en W3C standaarden. HTML5 W3C is de internationale organisatie (www.w3.org) die richtlijnen en standaarden ontwikkelt voor het web. Als je je aan deze standaarden houdt is de kans het grootst dat je webpagina er in alle browsers goed uitziet en goed werkt. Verschillende browsers werken echter met verschillende rendering engines. Daarom moet je zelf altijd nog testen of je pagina ook in deze browser goed werkt. Op dit moment wordt gewerkt aan een nieuwe standaard HTML5. Deze is nog niet officieel ingevoerd en het is ook niet bekend wanneer dat precies gaat gebeuren. We gaan er bij dit vak wel alvast mee werken, omdat vrijwel alle browsers de taal al ondersteunen en er zijn duidelijke verbeteringen ten opzichte van huidige standaarden, HTML4.01 en XHTML1.0. Hoe kun je nu testen of je pagina aan onze standaard, HTML5, voldoet? W3C biedt een hulpmiddel om je code te controleren aan op De HTML5 standaard is echter niet erg strikt op sommige aspecten en we willen dat je bij dit vak echt nette code oplevert. Zo willen we bijvoorbeeld dat je alle tags die je opent ook netjes afsluit en dat je de waarden van attributen tussen "" zet. De validator van W3C controleert dit niet. Daarom willen we dat je je pagina s ook nog checkt met Tidy. Hiervoor kun je bijvoorbeeld tidyhtml package installeren in Sublime. De volgende oefeningen gaan over het valideren van je code. 1. Open de oefening van vorige week parkiet.html in Sublime én in Chrome. Je gaat zo een validator gebruiken om je syntax automatisch te laten controleren. Je kunt het vergelijken met de spellingchecker in Word bijvoorbeeld. Zoals je weet zijn er verschillende versies van HTML. Deze versies hanteren kleine verschillen in de syntax. Als je de syntax wilt laten controleren door een validator moet je zelf aangeven welke versie van HTML je gebruikt. Dat doe je in de eerste regel van je HTML bestand. Voor HTML5 moet de volgende regel bovenaan je code staan. <!DOCTYPE html> Als je hier iets anders hebt staan, verander het dan zodat het goed staat. Manual Internetstandaarden / 37

23 2. Open de volgende website en zet hem bij je favorieten. Kopieer de HTML code (alle code) van parkiet.html uit sublime naar deze website en klik op check. 3. In de nieuwe tab kun je zien of je code voldoet aan de HTML5 standaard. Je kunt bijvoorbeeld het volgende te zien krijgen: Blijkbaar zijn er 6 foutjes in de pagina en negen waarschuwingen. Het kan natuurlijk best zijn dat jij meer of minder fouten en waarschuwingen ziet. Uiteindelijk willen we alle fouten en waarschuwingen eruit halen zodat we het volgende te zien krijgen: Het is niet absoluut noodzakelijk om waarschuwingen eruit te halen, maar wel verstandig. Als je fouten hebt en je scrollt naar beneden, krijg je de details van een fout te zien: Hij geeft het regelnummer en de positie op de regel aan waar de fout zich ongeveer bevindt. LET OP: dit is een indicatie, de fout kan ergens anders bevinden. Kijk in je HTML-editor en controleer of je regelnummers kunt zien naast je code. Als dat niet zo is, zoek dan de optie waarmee je deze zichtbaar kunt maken. 4. Zorg dat je alle eventuele foutjes uit jouw bestand verbetert. 5. Aangezien we bij dit vak echt nette code van je verwachten, gebruiken we nog een andere validator die naar andere criteria kijkt. Bijvoorbeeld of je alle tags netjes sluit en of je je tags niet met hoofdletters schrijft. Als het goed is, heb je tijdens de les de package tidyhtml geïnstalleerd in Sublime. Als je op ctrl+alt+h (windows) of cmd+alt+h (mac) drukt in Sublime, dan krijgt je foutmeldingen en waarschuwingen over code die niet netjes is. OEFENING 2 SYNTAX FOUTEN OPSPOREN 1. Maak een nieuwe map aan op je computer met de naam IS-wg2. 2. Open in Sublime een nieuw bestand waarin je de code zet die staat op https://gist.github.com/ Sla het bestand op in de zojuist gemaakt map met de naam syntaxfouten.html 3. Valideer het bestand met de validator van W3C. De url staat in de vorige oefening. Deze zal twee fouten vinden. 4. Probeer de fouten beide te corrigeren. Een aantal tips: - Begin met de bovenste foutmelding en werk van boven naar beneden. Het kan goed zijn dat wanneer je een fout oplost er meerdere foutmeldingen daaronder wegvallen. Manual Internetstandaarden / 37

24 - Sla je HTML-bestand na een wijziging op en valideer steeds opnieuw. - Het regelnummer dat door de validator wordt genoemd, klopt niet altijd. Het kan zijn dat de fout al eerder is gemaakt. 5. De oplossing komt bij de oefeningen van volgende week. OEFENING 3 SEMANTISCHE FOUTEN OPSPOREN Semantische fouten worden over het algemeen niet door een validator gevonden. Die moet je zelf opsporen door kritisch naar je eigen code te kijken. SEMANTISCHE FOUTEN C Wanneer je HTML gebruikt, doe je dat om structuur te geven aan de inhoud van je pagina. Je geeft bijvoorbeeld aan wat de titels zijn, waar een paragraaf begint en eindigt, je groepeert meerdere elementen die bij elkaar horen. Wanneer je de tags toevoegt, zie je in je browser ook gelijk dat de vormgeving van je pagina enigszins verandert. Koppen worden groot en vet, een paragraaf krijgt afstand tot andere paragrafen, een link wordt onderstreept en krijgt kleur. Het is zeer waarschijnlijk dat je niet tevreden bent met de standaard vormgeving die de browser toevoegt. Het is soms erg verleidelijk om voor andere html-tags te kiezen om de reden dat je dat mooier vindt. Bijvoorbeeld, je hebt een kop gemaakt met <h1> en je vindt het lettertype veel te groot en kiest daarom voor een <h2> in plaats van een <h1>. Dit wordt een semantische fout genoemd. Met <h1> geef je aan wat de belangrijkste kop op je pagina is. Als je een pagina maakt waar bijvoorbeeld wel een <h2> op voorkomt maar geen <h1>, dan heb je waarschijnlijk daarvoor gekozen om je de <h2> mooier vindt, in plaats van dat je de structuur van je content wilt aangeven. Zodra je CSS hebt geleerd, kun je die taal gebruiken om de vormgeving aan te gaan passen. Een ander voorbeeld van een semantische fout is als je meerdere <br /> elementen achter elkaar gebruikt. Dit doe je waarschijnlijk omdat je wat extra ruimte tussen twee onderdelen wilt toevoegen. Dat heeft echter te maken met vormgeving en niet met de structuur van je content. Hanteer de volgende vuistregel: Gebruik HTML alleen om de structuur in je content aan te geven en CSS om de vormgeving te verzorgen. Bedenk wat de semantische waarde is van een tag als je die gebruikt. Gebruik bijvoorbeeld geen tabellen om de lay-out van je pagina te bepalen en gebruik een <dl> element alleen waar hij voor bedoeld is, namelijk om een lijst van definities te geven. Met CSS kun je op een later moment de exacte vormgeving nog gaan bepalen. Denk dan aan typografie, kleuren, achtergronden, compositie en dergelijke. Manual Internetstandaarden / 37

25 1. Open in Sublime een nieuw bestand waarin je de code zet die staat op https://gist.github.com/ Sla het bestand op in de zojuist gemaakte map met de naam semantischefouten.html 2. Bekijk eerst hoe het eruit ziet in Crome. 3. Probeer de semantische fouten te vinden en te corrigeren. 4. De oplossing komt bij de oefeningen van volgende week. OVERZICHT VAN VEELGEBRUIKTE HTML-ELEMENTEN De omschrijving die ernaast staat, geeft aan waar het element voor bedoeld is. <a> <address> <article> <aside> <blockquote> <br /> <cite> <em> <figure> <figcaption> <footer> <header> <h1> to <h6> <img /> <li> <nav> <ol> <p> <q> <section> <strong> <table> <td> <th> <tr> <ul> Link Contact informatie over de auteur van de pagina Artikel Sectie waarin content staat die gerelateerd is aan naastliggende content Een lange quote Een enkel regeleinde Referentie naar de titel van een boek, film, krant en dergelijke Benadrukt tekst zodat het de klemtoon krijgt Gebruik voor een figuur eigenlijk altijd in combinatie met de <figcaption> tag Het onderschrift bij een figuur Footer van een pagina of van een sectie Header van een pagina of van een sectie Koppen Plaatje Lijstelement Sectie voor navigatie Genummerde lijst Paragraaf Een korte quote Sectie Maakt een stuk tekst extra belangrijk Tabel Een cel in een tabel Een kolomkop van een tabel Een rij in een tabel Ongeordende lijst Manual Internetstandaarden / 37

26 OEFENING 4 EEN MENU MAKEN IN HTML EEN MENU MAKEN IN HTML De beste manier om een menu in HTML op te maken is door een ongeordende lijst, <ul>, met daarin lijstelementen, <li> en linkjes <a> te gebruiken. Dat is semantisch gezien de beste oplossing. Daarnaast is het gebruikelijk om je lijst met linkjes in een <nav> te zetten. Maak je geen zorgen over dat je straks een menu zonder bullets wilt, of dat de linkjes naast elkaar in plaats van onder elkaar komen te staan. Dat soort zaken kun je later met CSS helemaal gaan bepalen. Voorbeeld: <nav> <ul> <li><a href="pagina1.html">pagina 1</a></li> <li><a href="pagina2.html">pagina 2</a></li> <li><a href="pagina3.html">pagina 3</a></li> <li><a href="pagina4.html">pagina 4</a></li> </ul> </nav> 1. Maak drie hele simpele pagina s in HTML. Op elke pagina neem je een menu met links naar de andere pagina s. Ook zet je een kop neer waaraan je kan zien op welke pagina je je bevindt. Zie de afbeeldingen hieronder. 2. Controleer de syntax van elke pagina met de validators. Manual Internetstandaarden / 37

27 CONTENT WEBSITE VERZAMELEN / MAKEN Je start deze week met het maken van je website waarop je aan het eind van dit vak beoordeeld wordt. Het makkelijkste is als je de content van het vak Tekst in context ook gebruikt voor deze website, maar je mag ook een ander onderwerp kiezen. In je website moeten minstens vier pagina s komen. Bedenk welke pagina s je website gaat hebben. Schrijf de content of verzamel de content. LET OP: dat je je bron moet vermelden als je de content niet zelf schrijft. Maak een over mij pagina waarin je kort vertelt over jezelf en eventueel contactgegevens neerzet. Maak HTML-pagina s voor de content. Je hoeft nu nog niet na te denken over vormgeven, alleen nog maar het structureren van je content. Zet de website online op je Oege account. STUDIEVRAGEN BLOKWEEK 3 1. Wat doet een validator? 2. Wat is het verschil tussen syntactische fouten en semantische fouten in je HTML-code? 3. Hoe kan je een menu maken in HTML-code? 4. Wat zijn veelgebruikte HTML-tags? 5. Wat zijn nieuwe HTML5 elementen? 6. Wat is het verschil tussen block-level, inline en invisible elementen? Manual Internetstandaarden / 37

28 BLOKWEEK 4 Nu begint het leuke deel van internetstandaarden, namelijk het leren van CSS! Hiermee kan je je website gaan vormgeven. LEES- EN WERKROUTES Lezen hoofdstuk 10,11,12 van het boek. Deadline: voor HC op 2 oktober Oefeningen CSS. Zie hieronder Deadline: voor werkgroep in blokweek 5 HTML-template voor eigen website maken. Zie hieronder Deadline: voor werkgroep in blokweek 5 (Optioneel) Nieuwe mogelijkheden HTML5 onderzoeken. Zie pag. 29 (Optioneel) Voorbereiden 10-min presentatie voor studentensymposium. Zie pag. 29 BEGINNELING GEVORDERDE EXPERT OEFENINGEN CSS De CSS oefeningen staan niet in deze manual, want er staan goede oefeningen online. Ga naar Sla de HTML oefeningen over en ga gelijk van start met de zevende les CSS: an overview Doe ook de negende les CSS Selectors HTML-TEMPLATE VOOR EIGEN WEBSITE MAKEN Schets de layout van je eigen website Maak de HTML-template voor de pagina s in je website. Heeft elke pagina dezelfde layout, dan heb je een enkel template. Als je meerdere lay-outs hebt, maak je ook meerdere templates. Gebruik in je template in ieder geval de volgende elementen: o <div id="wrapper"> o <header> o <nav> o <div id="content"> o <footer> En eventueel: o <section> o <article> o <aside> Maak een begin met de stylesheet voor je website. Ga nu alleen nog aan de slag met typografie en kleuren (tekstkleur en achtergrondkleuren). Zet je stylesheet online Manual Internetstandaarden / 37

29 NIEUWE MOGELIJKHEDEN HTML5 ONDERZOEKEN (GEVORDERDEN) Vorige week heb je de factsheet van HTML5 gelezen. Dat klinkt allemaal nog niet zo heel spannend. Dat klopt ook wel, het wordt pas echt leuk als je HTML5 met CSS3 en Javascript gaat combineren. Het is soms wat verwarrend dat de term HTML5 zowel gebruikt wordt voor de nieuwe versie van HTML, als voor die combinatie van HTML5, CSS3 en Javascript. Deze week kun je je verdiepen in het pure HTML5 deel. Lees onderstaande bronnen en ga ermee experimenteren, bijvoorbeeld in de website voor dit vak. Je kunt je verder verdiepen in nieuwe HTML5 elementen, naast de elementen die we vorige week hebben behandeld, zoals <section>, <nav> en <article>. Er zijn bijvoorbeeld nieuwe formulierelementen die beschreven staan in hoofdstuk 7 van het boek. Er zijn ook meer mogelijkheden om animaties, video en audio in je website te integreren, zie hoofdstuk 9 van het boek. Helaas moet je ook rekening houden met het feit dat veel browsers nog geen ondersteuning bieden voor al dit nieuws. Overzicht van welke browsers en browserversies welke css3 en html5 eigenschappen ondersteunen. Modernizr is een javascript library om te zien welke html5 en css3 eigenschappen worden ondersteund door de browser van een gebruiker. Als je nog meer wilt weten, overweeg dan om de volgende twee goedkope en goede boekjes te kopen: HTML5 for Web Designers, Jeremy Keith, A Book Apart, CSS3 for Web Designers, Dan Cederholm, A Book Apart, Volgende week meer over CSS3 voor gevorderden. 10-MIN PRESENTATIE STUDENTENSYMPOSIUM (EXPERT) Als je de diagnostische toets met minstens een 8 hebt gehaald, kun je zeker wel wat extra uitdaging gebruiken. We willen graag dat studenten ook van elkaar leren. Daarom kun je een presentatie van maximaal 10 minuten aan je klasgenoten geven over een geavanceerd onderwerp. Denk aan onderwerpen als: responsive webdesign, geolocatie, de mogelijkheden van het canvas element, 3D, interactieve elementen met ajax etc. Als je inspiratie nodig hebt, kijk dan bijvoorbeeld op Overleg met je docent welk onderwerp je wilt doen en in welke lesweek je de presentatie gaat houden. De beste expert studenten mogen hun presentatie geven aan alle propedeusestudenten tijdens het laatste college van Internetstandaarden. Manual Internetstandaarden / 37

30 STUDIEVRAGEN BLOKWEEK 4 1. Wat wordt bedoeld met scheiding van vormgeving, inhoud en gedrag? 2. Wat zijn voordelen van het scheiden van vormgeving, inhoud en gedrag? 3. Wat is het verschil tussen inline, intern/embedded en externe CSS-code? 4. Hoe kan je je CSS code valideren? 5. Hoe ziet de anatomie van een CSS-regel eruit? 6. Welke verschillende soorten selectoren zijn er? 7. Wat wordt bedoeld met 'Cascading' in CSS? 8. Wat wordt bedoeld met 'overerven' binnen CSS? Manual Internetstandaarden / 37

31 BLOKWEEK 5 LEES- EN WERKROUTES BEGINNELING GEVORDERDE EXPERT Lezen hoofdstuk 13 en 15 van het boek. Deadline: voor HC op 8 oktober Oefeningen CSS. Zie pag. 31 Deadline: voor werkgroep in blokweek 6 jquery. Zie pag. 31 Deadline: voor werkgroep in blokweek 6 Werk verder aan de eindopdracht Deadline: eindopdracht grotendeels af in blokweek 7 (Optioneel) Nieuwe mogelijkheden CSS3 onderzoeken. Zie pag. 32 OEFENINGEN CSS We gaan weer verder met CSS oefeningen van Volg de elfde les CSS Positioning JQUERY (GEVORDERDEN) Als je al gevorderd bent, is het waarschijnlijk leuk om in je website te gaan werken met javascript/jquery. Kies zelf een tutorial die je aanspreekt: Manual Internetstandaarden / 37

32 NIEUWE MOGELIJKHEDEN CSS3 ONDERZOEKEN (GEVORDERDEN) Met de komst van CSS3 zijn veelvoorkomende vormgevingspraktijken nu een stuk makkelijker te realiseren dan voorheen. Denk aan zaken als ronde hoeken, transparantie, gradient, schaduwen etc. Nog leuker wordt het met transities en transformaties, want hiermee kan je simpele animaties maken, vaak zonder Javascript. Het is nog wel steeds een gedoe om het er in verschillende browsers en browserversies goed uit te laten zien. Aan dit soort zaken merk je dat CSS3 nog steeds geen standaard is en elke browser net anders werkt als de andere. Als je wilt experimenteren met de nieuwe CSS3 eigenschappen kun je in ons boek kijken. In de CSS hoofdstukken staat her en der vermeld wanneer het om een CSS3 eigenschap gaat. Je kunt ook bijvoorbeeld kijken op voor onder andere tutorials. Een heel handige site vind ik want hier staan de belangrijkste eigenschappen op één pagina vermeld en kun je simpel de code overnemen. Als je wilt zien wat anderen maken, kijk dan bijvoorbeeld naar dit artikel in Smashing magazine: STUDIEVRAGEN BLOKWEEK 5 1. Wat is het box-model? 2. Wat is het verschil tussen een fixed- en fluid-layout? 3. Hoe kun je meerdere kolommen maken met CSS? 4. Hoe kun je van een HTML-lijst met menu-items een mooi vormgegeven menu maken met CSS? Manual Internetstandaarden / 37

33 BLOKWEEK 6 LEES- EN WERKROUTES BEGINNELING GEVORDERDE EXPERT Lezen hoofdstuk 16 en 17 van het boek. Deadline: voor HC op 15 oktober Maak eindopdracht zoveel mogelijk af. Deadline: voor werkgroep in blokweek 7 MAAK EINDOPDRACHT ZOVEEL MOGELIJK AF Volgende werkgroep is de laatste werkgroep waarin je nog met vragen en problemen bij de docent terecht kunt. Zorg dus dat je de eindopdracht zover mogelijk afmaakt en ergens een lijstje met vragen en problemen vóór de volgende les opschrijft. STUDIEVRAGEN BLOKWEEK 6 1. Wanneer zet je een afbeelding in je HTML en wanneer in je CSS? 2. Wat is een sprite en wat kun je ermee? 3. Hoe kun je je website online zetten? 4. Wat zijn nieuwe CSS3 eigenschappen? 5. Wat zijn voor- en nadelen van CSS3 ten opzichte van CSS2? 6. Wat is javascript en wat kun je ermee? 7. Wat is jquery en wat kun je ermee? Manual Internetstandaarden / 37

34 BLOKWEEK 7 LEES- EN WERKROUTES BEGINNELING GEVORDERDE EXPERT Maak eindopdracht af en zet online Deadline: voor werkgroep in blokweek 9 MAAK EINDOPDRACHT AF EN ZET ONLINE In blokweek 8 zijn er geen lessen in verband met het herfstreces. In blokweek 9 vind de beoordeling van de websites plaats. Je website moet dus vóór aanvang van de werkgroep in blokweek 9 helemaal af zijn en online staan. STUDIEVRAGEN BLOKWEEK 7 1. Wat is de rendering engine van een browser? 2. Wat is DOM-manipulatie? 3. Hoe kun je een simpele DOM-manipulatie met jquery realiseren? Manual Internetstandaarden / 37

35 BOEKEN, SOFTWARE EN WEBSITES BOEKEN HTML & CSS design and build websites, Jon Ducket, Wiley, ISBN: , HTML5 for Web Designers, Jeremy Keith, A Book Apart, html5-for-web-designers CSS3 for Web Designers, Dan Cederholm, A Book Apart, css3-for-web-designers Responisive Web Design, Ethan Marcotte, A Book Apart, responsive-web-design SOFTWARE EN PLUGINS https://www.google.com/intl/en/chrom e/browser/ https://chrome.google.com/webstore/ detail/webdeveloper/bfbameneiokkgbdmiekhjn mfkcnldhhm https://chrome.google.com/webstore/ detail/w3c-html5-%26-css3- validato/kobpbiokkobnmnaefmpcode eficgbfkg TOELICHTING Verplicht. Het lesboek dat we gebruiken bij dit vak. Dit is een verplicht boek, want je gebruikt het om je voor te bereiden op het tentamen. Aanbevolen. Dit goedkope digitale boekje is handig als je al HTML kent en meer wilt weten over HTML5. Aanbevolen. Dit goedkope digitale boekje is handig als je al CSS kent en meer wilt weten over CSS3. Aanbevolen. Heb je al veel ervaring met websites maken, dan kun je hier meer leren over responsive web design. Verplicht. Installeer Chrome als je die nog niet op je computer hebt staan. Deze browser ondersteunt de meeste html5 en css3 eigenschappen en gebruik je bij het nakijken van je website. Aanbevolen. Deze code editor voor zowel Mac als Windows heeft onze voorkeur bij dit vak. Je mag ook een andere code editor gebruiken als dat je voorkeur heeft, maar we raden deze vooral aan als je nieuweling bent. Aanbevolen. Filezilla is een een ftp-programma voor zowel Mac als Windows, waarmee je je website online kunt zetten. Je mag ook een ander ftp-programma gebruiken als dat je voorkeur heeft. Aanbevolen. Chrome extensie met allerlei handige hulpmiddelen voor het maken van websites. Aanbevolen. W3C HTML5 & CSS3 Validator voor in Chrome Aanbevolen. Colorpicker om makkelijk kleuren te pakken NIEUWELING GEVORDERDE EXPERT X X X X X X X X X X X X X X X X X X X X X X X X X X Manual Internetstandaarden / 37

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

HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505

HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505 HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie https://maken.wikiwijs.nl/65505 Dit lesmateriaal is gemaakt met Wikiwijs

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

Toetsmatrijs Web Markup

Toetsmatrijs Web Markup Toetsmatrijs Web Markup Deze toetsmatrijs verstrekt de leerdoelen en toetscriteria voor het vak Web Markup competentienummers of C 1.1 Een eenvoudige webpagina bouwen, testen en publiceren op het web HTML,

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

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

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1

Een webpagina maken. Een website bouwen met HTML en CSS practicum 1 Een webpagina maken De komende periode wordt in 8 practica een aantal technieken behandeld, die je nodig hebt om een (eenvoudige) website te kunnen bouwen. Nadat je deze 8 practica hebt doorgewerkt, moet

Nadere informatie

HTML Editor: de eerste stappen

HTML Editor: de eerste stappen LES 18 HTML Editor: de eerste stappen In deze les leert u werken met HTML Editor. Daarbij geven we tevens een inleiding tot HTML. Hoewel op dit moment HTML versie 4.01 in gebruik is, maakt de HTML Editor

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

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

Interactief blok 2 code opdracht 6 - wireframe

Interactief blok 2 code opdracht 6 - wireframe Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).

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

Syllabus Zelf een website bouwen. Artheos

Syllabus Zelf een website bouwen. Artheos Syllabus Zelf een website bouwen Artheos Helma de Boer Artheos Webdiensten & Office Support www.artheos.nl 2012 Inhoud Syllabus Zelf een website bouwen H1 De techniek van een website... 3 1.1 Browser en

Nadere informatie

Web building basis: HTML. Karel Nijs 2008/09

Web building basis: HTML. Karel Nijs 2008/09 Web building basis: HTML Karel Nijs 2008/09 Web building basis eerste les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Web building

Nadere informatie

Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf.

Hier komt alle informatie over je webpagina, welke niet zichtbaar is op de webpagina zelf. Elke website begint met een basisstructuur. Deze basisstructuur is opgebouwd uit drie tags. Je gebruikt eerst de - tag welke aangeeft wat voor type document het is. Dan de - tag. Hier komt

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

HTML Editor: tabellen en hyperlinks

HTML Editor: tabellen en hyperlinks LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij

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

WordPress Handleiding

WordPress Handleiding Algemene Informatie Disclaimer: Bij het samenstellen van dit boek is de grootst mogelijke zorg besteed aan de juistheid van de opgenomen informatie. Wij kunnen echter niet verantwoordelijk gesteld worden

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

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

De WordPress 3.5 Beginners Handleiding

De WordPress 3.5 Beginners Handleiding De WordPress 3.5 Beginners Handleiding Internetbureau Elephant april 13 Inhoud Introductie... 2 Inloggen... 3 Het dashboard... 5 Berichten en pagina's... 6 Nieuw Bericht... 6 Nieuwe Pagina... 8 Afbeeldingen,

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

Digitale vormgeving 2014 2015. Wordpress deel 1

Digitale vormgeving 2014 2015. Wordpress deel 1 Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...

Nadere informatie

Inhoud. Introductie tot de cursus

Inhoud. Introductie tot de cursus Inhoud Introductie tot de cursus 1 De functie van de cursus 7 2 De inhoud van de cursus 7 2.1 Voorkennis 7 2.2 Leerdoelen van de cursus 8 2.3 Opbouw van de cursus 8 3 Leermiddelen en wijze van studeren

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

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

A Inloggen. B - Wachtwoord Veranderen

A Inloggen. B - Wachtwoord Veranderen A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen

Nadere informatie

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1

Schrijven voor het web. 1TIN Internettechonologie 2003-2004 les 02 1 Schrijven voor het web 1TIN Internettechonologie 2003-2004 les 02 1 Verschillen met gewone teksten niet noodzakelijk sequentieel lezen webpagina globaal lezen (geen details) beantwoorden aan doel van bezoek?

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

Op de Virtual Appliance is MySQL voorgeïnstalleerd. MySQL is momenteel de meest gebruikte database op het internet.

Op de Virtual Appliance is MySQL voorgeïnstalleerd. MySQL is momenteel de meest gebruikte database op het internet. Het installeren van WordPress Nu je een volledig werkende virtuele server hebt is het tijd om er een applicatie op te installeren. We beginnen met de blogtool WordPress. De database De eerste stap is het

Nadere informatie

Handleiding Lay-outs bewerken voor LogiVert 5

Handleiding Lay-outs bewerken voor LogiVert 5 Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.

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

1 BUSINESS INTERNET SUPPORT

1 BUSINESS INTERNET SUPPORT Versie 1 BUSINESS INTERNET SUPPORT Yoron Dot Net Stap voor stap Handleiding YORON DOT NET BEHEER V1.X Stap voor stap handleiding YORON Het Wielsem 10 s-hertogenbosch Inhoudsopgave Opstarten Yoron DotNet

Nadere informatie

APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010

APEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010 APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis

Nadere informatie

JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen

JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen 0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over

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

Onderdeel: Opdracht Uitleg + Opdracht

Onderdeel: Opdracht Uitleg + Opdracht Programma: HTML / Website Onderdeel: Opdracht Uitleg + Opdracht Inhoudsopgave Een website bouwen... pag. 2 Opdracht... pag. 2 Opslaan van het werk... pag. 2 Aan het werk.... pag. 3 Speciale knoppen...

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

WEBSITE USABILITY. white-paper

WEBSITE USABILITY. white-paper WEBSITE USABILITY white-paper Alle rechten voorbehouden Het is niet toegestaan deze white-paper aan derden te verstrekken of te verkopen. Het is niet toegestaan de inhoud van deze white-paper elders te

Nadere informatie

Algemene WordPress Handleiding uitleg basics Karin de Wit Design

Algemene WordPress Handleiding uitleg basics Karin de Wit Design Inhoudsopgave Inhoudsopgave... 2 Algemene informatie... 3 Introductie... 4 Inloggen bij WordPress... 5 Introductie in het dashboard... 6 Berichten en pagina's... 8 Bericht Categorieën... 8 Nieuw Bericht...

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

HTML5 & Webdesign. Ontwerp cover: Graficelly, Reeuwijk-Brug. N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2

HTML5 & Webdesign. Ontwerp cover: Graficelly, Reeuwijk-Brug. N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2 Ontwerp cover: Graficelly, Reeuwijk-Brug N. van Aken M. den Besten A.C. Gijssen ISBN 978-90-460-0740-2 Eerste druk 2016 Instruct, Postbus 38, 2410 AA Bodegraven Behoudens uitzondering door de wet gesteld

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren

Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren MIJN EERSTE WEBSITE Sushi EEN WEBPAGINA BEWERKEN Kaart 1 van 10 We gaan een nieuwe website bouwen! We gaan hem over boeken maken maar je kan hem ook zo maken zoals jij zelf wilt! Download de HTML code

Nadere informatie

Inhoudsopgave. 3. Werken met thema s 89 3.1 Het standaard thema bekijken... 90 3.2 Een thema zoeken... 91 3.3 Een thema installeren...

Inhoudsopgave. 3. Werken met thema s 89 3.1 Het standaard thema bekijken... 90 3.2 Een thema zoeken... 91 3.3 Een thema installeren... Inhoudsopgave Voorwoord... 5 Nieuwsbrief... 5 Introductie Visual Steps... 6 Wat heeft u nodig?... 6 De website bij het boek... 7 Hoe werkt u met dit boek?... 7 Uw voorkennis... 8 Toets uw kennis... 8 Voor

Nadere informatie

Algemene regels. Stappenplan webdesign

Algemene regels. Stappenplan webdesign Algemene regels Stappenplan webdesign Kleurengebruik Denk bij het maken van een website aan je kleurencombinaties. Gebruik niet meer dan 4 kleuren; Achtergrond; Heading/ Subheading; Platte tekst; Links.

Nadere informatie

Greet Verhelst 2011-2012. In het volgende scherm log je in met je gebruikersnaam of e-mailadres en paswoord.

Greet Verhelst 2011-2012. In het volgende scherm log je in met je gebruikersnaam of e-mailadres en paswoord. Greet Verhelst 2011-2012 1 Registreren Surf naar http://www.wikispaces.com Indien je reeds een wiki-member bent klik je op Sign In. In het volgende scherm log je in met je gebruikersnaam of e-mailadres

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

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files

NVU work shop. Kees Moerman http://www.keesmoerman.nl November 2006. 1. Overzicht van een web site. Wat is een web site HTML files NVU work shop Moerman http://www.keesmoerman.nl November 2006 1 1 Overzicht 1. Overzicht van een web site Wat is een web site HTML files 2. NVU: Een HTML editor Overzicht Een eerste pagina Configuratie

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

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

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

Handleiding bij het Content Management Systeem

Handleiding bij het Content Management Systeem Handleiding bij het Content Management Systeem 1. Content Managent System startvenster 2. Hoe voeg ik een nieuwe gebruiker toe? 3. Hoe maak ik een hoofdmenu-item aan? 4. Hoe koppel ik tekst aan een hoofdmenu-item?

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

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

WEBDESIGN. & WORDPRESS 2016 editie PRAKTISCH TOEGEPAST. 2016, Roy Sahupala

WEBDESIGN. & WORDPRESS 2016 editie PRAKTISCH TOEGEPAST. 2016, Roy Sahupala WEBDESIGN & WORDPRESS 2016 editie PRAKTISCH TOEGEPAST 2016, Roy Sahupala Belangrijke opmerking De methodes en programma s in deze handleiding zijn zonder inachtneming van enige patenten vermeld. Ze dienen

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

Programmeren in MyShop

Programmeren in MyShop Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je

Nadere informatie

NVU-Workshop. Websites bouwen met Nvu. Henk Stoop - Docent Website design - HkeyDesigns - HCC WG Website design - KBO WG ICT-Adviseur

NVU-Workshop. Websites bouwen met Nvu. Henk Stoop - Docent Website design - HkeyDesigns - HCC WG Website design - KBO WG ICT-Adviseur Websites bouwen met Nvu Voorbeeld websites Hkey-Designs Manders mondhygieniste Slaapadvies Sterrenburg Werkplan Henk Stoop - Docent Website design - - HCC WG Website design - KBO WG ICT-Adviseur Workshop:

Nadere informatie

ZÉLF JE WORDPRESS WEBSITE MAKEN?

ZÉLF JE WORDPRESS WEBSITE MAKEN? WordPress blog ZÉLF JE WORDPRESS WEBSITE MAKEN? WordPress Academy Nederland helpt je op weg met onze Basiscursus INHOUD P1 P2 P3 P4 P5 P6 P7 P8 P9 P 10 P 11 P 12 P 13 P 14 P 15 P 16 P 17 P 18 P 19 P 20

Nadere informatie

LES 2 INDERDAAD, JE MOET DE WEBBROWSER AANWIJZINGEN GEVEN, MAAR DAN WEL VOLGENS DE AFGESPROKEN REGELS

LES 2 INDERDAAD, JE MOET DE WEBBROWSER AANWIJZINGEN GEVEN, MAAR DAN WEL VOLGENS DE AFGESPROKEN REGELS LES 2 INDERDAAD, JE MOET DE WEBBROWSER AANWIJZINGEN GEVEN, MAAR DAN WEL VOLGENS DE AFGESPROKEN REGELS In les 1 hebben we op een webpagina aan een gedicht de beoogde vorm gegeven. We deden dit met het html-code-element

Nadere informatie

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1

Software 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.

Nadere informatie

Handleiding Website beheersysteem

Handleiding Website beheersysteem Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8

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

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

Gebruikershandleiding

Gebruikershandleiding Gebruikershandleiding Inleiding. Het bijhouden, wijzigen en aanpassen van de inhoud van de website met je standaard web browser. De website maakt gebruik van CMS (content managment system) Door in te loggen

Nadere informatie

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl

Websitecheck. Taak en Tekst voor websites die werken. www.jouwsite.nl Taak en Tekst voor websites die werken www.jouwsite.nl Websitecheck Taak en Tekst, www.taakentekst.nl Buijs Ballotstraat 27A, 2563 ZH Den Haag 06-13935470 1 Websitecheck Website: Eigenaar: Datum: www.jouwsite.nl

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

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 opmaken Wageningen UR Blog. Oktober 2015

Handleiding opmaken Wageningen UR Blog. Oktober 2015 Handleiding opmaken Wageningen UR Blog Oktober 2015 Voorwoord In deze handleiding is voor beheerders van het Wageningen UR blog template stap voor stap beschreven hoe zij hun blog kunnen inrichten. Bij

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

4. De homepagina maken

4. De homepagina maken 95 4. De homepagina maken Als u een thema heeft geïnstalleerd, is al een aantal onderdelen ingevuld als voorbeeld. Naast de header staan er ook voorbeeldteksten, afbeeldingen, hyperlinks en soms nog andere

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

Berichten maken en beheren

Berichten maken en beheren Berichten maken en beheren Berichten (of het Engels: posts) zijn de basis van WordPress. Als uw website een blog is, zijn de berichten het meest gebruikte onderdeel. Anderszins zijn berichten actualiteiten,

Nadere informatie

HTML. inhoud structuur semantiek. HTML5 & semantiek of betekenis. semantisch coderen. Semantisch coderen: waarom? 3/09/2016

HTML. inhoud structuur semantiek. HTML5 & semantiek of betekenis. semantisch coderen. Semantisch coderen: waarom? 3/09/2016 HTML 3/09/2016 STUDIEPUNTEN theoretisch luik SEMANTIEK en META-ELEMENTEN 1. Recap (Structuur) 2. Semantiek en semantisch coderen 3. Metadata 4. Attributen van HTML elementen 5. Optimaliseren basis HTML5

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

JavaLogo-programma s op het web plaatsen

JavaLogo-programma s op het web plaatsen Bijlage JavaLogo-programma s op het web plaatsen In deze bijlage laten we u zien hoe u JavaLogo-programma s op het web kunt plaatsen, met als voorbeeld het programma Cirkels uit opgave 2.16. We gaan er

Nadere informatie

- Plan Zo kun je een. website bouwen!

- Plan Zo kun je een. website bouwen! - Plan Zo kun je een website bouwen! BoekjeHoeKanJeEenWebsiteBouwen.i1 1 8-7-2008 17:23:14 BoekjeHoeKanJeEenWebsiteBouwen.i2 2 8-7-2008 17:23:15 In dit boekje staat de uitgebreide versie van hoe je een

Nadere informatie

Zorg dat je een onderwerp kiest, waarvan je echt meer wilt weten. Dat is interessanter, leuker en makkelijker om mee bezig te zijn.

Zorg dat je een onderwerp kiest, waarvan je echt meer wilt weten. Dat is interessanter, leuker en makkelijker om mee bezig te zijn. Werkstukwijzer Deze werkstukwijzer helpt je om een werkstuk in elkaar te zetten. Je vult eerst een formulier in. Op dit formulier komt te staan waar je werkstuk over gaat en hoe je het aanpakt. Met behulp

Nadere informatie

Handleiding opmaken Wageningen UR Blog. Maart 2016

Handleiding opmaken Wageningen UR Blog. Maart 2016 Handleiding opmaken Wageningen UR Blog Maart 2016 Voorwoord In deze handleiding is voor beheerders van het Wageningen UR blogs stap voor stap beschreven hoe zij hun blog kunnen inrichten. Bij de oplevering

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

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B

Inhoudsopgave. Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B Inhoudsopgave Stappen 1 Ervaringen 2 Wireframes 3 PIOTR TEKIEN HKU GAME ART GAR-1B PORTFOLIO 1 - STAPPEN Stappen INTRODUCTIE Voordat ik over mijn stappen vertel, wil ik kort toelichten dat ik eerder een

Nadere informatie

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland Handicom Symbol for Windows Image Manager (Versie 4) Handicom, 2011, Nederland Inhoud Inleiding... 2 1. Image Manager hoofdscherm...3 1.1 Onderdelen van het venster...3 1.2 Het scherm veranderen...3 1.2.1

Nadere informatie

Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 www.edubas.nl

Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 www.edubas.nl Meehelpen met de ontwikkeling van nieuwe of verbetering van bestaande spellen. Pag. 1 Versie 1.0 februari 2015 Start-versie Over dit document In dit document probeer is duidelijk te maken hoe de spellen

Nadere informatie

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

Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 Hand-out Web Technologies, werkcollege 6 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Positie en flow Boxes, block-level en inline elements: Ieder HTML-element wordt, als het ware, als een omkaderd block-

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke

Nadere informatie

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding HetSchoolvoorbeeld 2.1 Websites Social media Mediawijsheid Grafisch ontwerp Handleiding HetSchoolvoorbeeld 2.1 Pagina 1 Inhoud 1 Opbouw van

Nadere informatie

11. Website controleren

11. Website controleren 11. Website controleren 11.1 Website controleren op verschillende browsers Het blijkt nog altijd nodig te zijn een website te controleren. De website zoals deze er in Kompozer uit ziet, ziet er op internet

Nadere informatie

HANDLEIDING CMS Versie 2.4 januari 2013

HANDLEIDING CMS Versie 2.4 januari 2013 Het CMS dat bij deze site geleverd wordt heeft hoofdzakelijk tot doel om goed door Google gevonden te worden. De hiërarchie van het CMS geeft aan hoe google per pagina naar uw website kijkt. De mate van

Nadere informatie

Inhoud. Endnote X7 Handleiding Mediacentrum maart 2015 Page 2

Inhoud. Endnote X7 Handleiding Mediacentrum maart 2015 Page 2 Inhoud Over Endnote... 3 Endnote installeren... 4 Een library aanmaken... 5 Voordat je begint!... 6 Tussenvoegsels in namen... 6 Referenties invoegen in een Worddocument/Cite while you write... 7 Handmatig

Nadere informatie

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid

Cluster 1 Realiseert. 4 Beschrijving van de beroepssituatie behorende bij deze leereenheid LEEREENHEID HTML/CSS Dit document bestaat uit twee onderdelen - Onderdeel Leereenheid - Onderdeel Onderwijsproduct 1 Naam leereenheid In deze tabel staat de naam en het type van de leereenheid Leereenheid

Nadere informatie

INFORMATIE VAN HET INTERNET VERWERKEN

INFORMATIE VAN HET INTERNET VERWERKEN INFORMATIE VAN HET INTERNET VERWERKEN Naam Nr Klas Datum 1. WEBPAGINA'S OPSLAAN Open Windows Verkenner en maak in je persoonlijke werkmap op de server een nieuwe map aan met de naam Lichaamstaal. Open

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

Theorie Toets 1 voor Klas 3

Theorie Toets 1 voor Klas 3 Theorie Toets 1 voor Klas 3 - Pagina 1 Theorie Toets 1 voor Klas 3 Theorie Schrijven voor Print & Web Een goede tekst maken is moeilijk. Tekst-schrijver is daarom ook een beroep. Tekst-schrijvers schrijven

Nadere informatie

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: 1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina

Nadere informatie

Werkschrift : Hoe werk ik op WikiKids?

Werkschrift : Hoe werk ik op WikiKids? Werkschrift : Hoe werk ik op WikiKids? WERKBOEK WIKIKIDS Welkom bij het werkboek van WikiKids. In dit werkboek staan opdrachten waarmee je stap voor stap leert werken met WikiKids. Er staan 15 opdrachten

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie