Webdesign. cursusjaar Practicumoefeningen met. (X)HTML en CSS
|
|
|
- Esmée Cecilia Vedder
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Webdesign cursusjaar Practicumoefeningen met (X)HTML en CSS Departement Informatica Bacheloropeliding Informatiekunde Hans Voorbij (2010)
2 Inhoud 1. Basisoefeningen met HTML Oefeningen met CSS Valideren Voor de oefeningen met CSS heb je een PC nodig met een werkende internet-verbinding. 2
3 1. Basisoefeningen met HTML Basistechnieken Dit practicum reikt je basisinformatie aan over HTML (= HyperText Markup Language) en CSS (= Cascading Stylesheets). De fijne kneepjes moet je zelf uitvinden. We zullen in dit practicum oefenen met basistechnieken om een webpagina te coderen. Als je nog nooit zelf webpagina s met HTML hebt gemaakt, raden we je dringend aan de basisoefeningen in deze paragraaf met de hand te schrijven, d.w.z zonder een speciale HTML-editor. Gebruik gewoon Notepad (Kladblok), een ASCII-texteditor die onder START> PROGRAMS> ACCESSORIES op elke Windows machine te vinden is. Alleen zo leer je echt werken met de codes die achter webpagina s schuilgaan. Als je met de belangrijkste codes vertrouwd bent geraakt, kun je tot besluit van deze paragraaf met het programma Dreamweaver enkele oefeningen herhalen (Dreamweaver is beschikbaar op alle PC s in de practicumzalen, als onderdeel van Adobe CS4). Je zult dan beter begrijpen wat voor soort hulp een goede HTML- en CSS-editor je biedt en hoe je ermee werken kunt. Als je hulp nodig hebt bij Notepad of Dreamweaver, kun je een beroep doen op de student-assistenten. Vooral doen! Wie al wel zelf HTML-pagina s geschreven heeft, raden we aan met een HTML-editor te werken en onderstaande oefeningen daarmee te maken. Waar in de oefeningen naar Notepad verwezen wordt, kun je desgewenst Dreamweaver lezen. HTML (HyperText Markup Language) is de taal die gebruikt wordt om webdocumenten te maken. Het is een standaard documenttaal, uitgevonden door Tim Berners-Lee en verder ontwikkeld door het World Wide Web Consortium (W3C), dat veel webgerelateerde standaarden uitbrengt. Hypertext is electronische tekst voorzien van hyperlinks naar meer tekst-informatie (of andersoortige content) binnen datzelfde of een ander document. Markup staat voor symbolen of codes of tags die aan een bestand worden toegevoegd, zodat een browser weet wat er weergeven moet worden en hoe. Een browser is een computerprogramma waarmee je van link naar link (en terug) kunt gaan in een hypertext. Op het World Wide Web gebruiken we webbrowsers. De bekendste voorbeelden hiervan zijn momenteel Mozilla s Firefox en Microsoft s Internet Explorer (= IE). We laten het helemaal aan je smaak en voorkeur over welk van beide browsers je gebruikt beide zijn beschikbaar op de computers in de practicumzalen als je maar werkt met Firefox versie 2.0 of hoger, dan wel IE 6.0 of hoger. In de tekst hierna spreken we in principe alleen nog van browser. Bedenk wel dat alle oefeningen en opdrachten die je maakt, moeten werken in de browser. Maar wat in Firefox werkt, werkt niet per sé ook in IE, en omgekeerd...! Dit komt doordat de HTML-standaard niet op dezelfde wijze in beide browsers geïmplementeerd is. Het is een voortreffelijke gewoonte je uitwerkingen in beide browsers te testen en zo aan te passen dat ze in beide browsers werken. Documentstructuur Een HTML document bestaat uit twee belangrijke delen: de head en de body. Ze worden omgeven door de tags <html> </html>. De head bevat informatie over het document (meta-informatie), zoals de titel, de gebruikte html-versie, de gebruikte codering voor lettertekens en symbolen, e.d. De body bevat de inhoud, het gedeelte dat door de browser weergegeven wordt. In zijn meest complete vorm wordt het HTML-document voorafgegaan door een DOCTYPEaanduiding: een verwijzing naar een (extern) document waarin de syntax vastgelegd is die voor jouw document toegestaan is. De browser gebruikt deze informatie bij het weergeven van je document. Wij werken bij Webdesign met de DTD-versie xhtml 1.0 strict. Die is geschikt voor schone code, zonder speciale markup. Deze versie is ook heel geschikt om te gebruiken in combinatie met Cascading Stylesheets, die we later behandelen. 3
4 De documentstructuur wordt door elementen aangegeven (zie volgende sectie) en ziet er als volgt uit: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>documenttitel</title> </head> <body> </body> </html> (de document-titel komt in de titelbalk) (Documentinhoud: wat getoond wordt in de webpagina) In alle voorbeelden hieronder zullen we het gedeelte <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> niet meer voluit herhalen. We volstaan met de weergave <html > <head> In je eigen html-documenten moet je de volledige code wel aanbrengen! Elementen Elementen beginnen altijd met <..> en eindigen (bijna) altijd met </ >. Op de stippeltjes tussen de spitse haakjes staat informatie in de vorm van symbolen, codes of tekst. Die spitse haakjes plus de informatie noemt men tags, zij vormen samen de markup van een HTMLdocument. Met behulp van tags worden de elementen in een document aangeduid, gedeclareerd. Aan sommige begintags kunnen ook attributen met een waarde toegevoegd worden, om extra informatie over dat element mee te geven. Bijv.: <body bgcolor="#00ff00">: de achtergrond van de BODY is een kleur, de waarde #00FF00 levert op: groen). Nesting Elementen kunnen binnen andere elementen voorkomen, dit verschijnsel heet nesting. Je zet de begin- en eindtags van het binnenste element beide binnen het omvattende element, zoals in dit voorbeeld: <buitenste><binnenste>inhoud</binnenste></buitenste>. In een aantal gevallen is dat bij HTML zelfs verplicht, bijv. <html><head></head><body></body></html> Leer jezelf aan nesting altijd consequent toe te passen, om onaangename verrassingen (lees: incorrect werkende HTML-code) te voorkomen. 4
5 Opdracht 1 Een simpele HTML-pagina maken Open de tekst-editor Notepad, en type een tekst in naar het hiervolgende voorbeeld. De vette tekst is wat je moet intypen, de cursieve is uitleg over wat de code doet. Bij cursief en vet moet je de informatie intypen die er gesuggereerd wordt. <html > <head> <title>persoonsgegevens</title> </head> <body bgcolor="#ffff80"> (html-tekst begint, info over html-versie e.d.) (pagina-titel die in de browserbalk komt) (begin hoofd inhoud,attribuut bgcolor (achtergrondkleur) met als waarde #FFFF80, een kleur geel) <p>persoonsgegevens</p> (<p>: paragraaf begint & eindigt</p>) <br><br> (<br> : break, sla een regel over) <p>naam: Jouw naam</p> <p>woonplaats: Jouw Woonplaats</p> <p>studentnummer: Jouw Studentnummer</p> </body> (eind hoofdinhoud) </html> (einde html-tekst) - Sla dit bestand op als studentnummer-test.html. Let op dat je het bestand opslaat als text. Open het vervolgens in je browser om te zien of het goed gegaan is. Je ziet, alles wat er uiteindelijk wordt afgebeeld, is hetgeen er in de <body> tussen de verschillende tags <.> </ > staat. - Een paar nieuwe tags: Maak de layout van de tekst zo dat Persoonsgegevens weergegeven wordt met tag <h3> (header3) in plaats van <p>, en zorg dat de woorden Naam, Woonplaats en Studentnummer behalve als <p> ook nog vet afgebeeld worden, en de andere 3 woorden cursief. <h3> </h3> (geeft tekst weer in lettertype Header 3) <em> </em> (em= emphasized text ; hiermee wordt in onze browsers tekst cursief afgebeeld; <i> kan ook, maar werkt niet in alle browsers goed) <strong> </strong> (zo wordt tekst vet afgebeeld; <b> kan ook, maar werkt niet in alle browsers goed) Sla je bestand weer op en bekijk het in je browser. Dit was om een indruk te krijgen waar we het eigenlijk over hebben; een simpel plat tekstbestand met informatie over hoe iets afgebeeld moet worden, die vervolgens gelezen wordt door een browser. HTML pagina s kunnen natuurlijk ook met een HTML editor gemaakt worden, die je helpt, en ook nog volledig WYSIWYG (What You See Is What You Get) gemaakt worden, net zoals je tekst opmaakt in bijv. Word. We zullen hier evenwel voor het begrip van de materie met de hand blijven coderen. Opdracht 2 Een lijst maken Soms is het eleganter om gegevens in een lijstje te presenteren. HTML biedt hiervoor enkele eenvoudige mogelijkheden. Een lijst bestaat uit een of meer items. We proberen eerst de ongeordende lijst. De volgorde van de items in zo'n lijst is in principe willekeurig; de items worden voorafgegaan door een bullet. 5
6 <html > <head> <title>lijst Persoonsgegevens</title> </head> (html-tekst begint, info over html-versie e.d.) (pagina-titel die in de browserbalk komt) <body bgcolor="#ffff80"> (begin hoofd inhoud,attribuut bgcolor (achtergrondkleur) met als waarde #FFFF80, een kleur geel) <p>persoonsgegevens</p> (<p>: paragraaf begint & eindigt</p>) <ul> (<ul> : unordered list begint) <li>naam: Jouw naam</li> (<li>: list item begint & eindigt</li>) <li>woonplaats: Jouw Woonplaats</li> <li>studentnummer: Jouw Studentnummer</li> </ul> (</ul> : unordered list eindigt) </body> (eind hoofdinhoud) </html> (einde html-tekst) - Sla dit bestand op als studentnummer-lijst1.html. Bekijk het resultaat in je browser. Als de items in een lijst een strikte volgorde moeten hebben, maken we het beste gebruik van een geordende lijst, een ordered list, aangeduid met de tags <ol>...</ol>. De items in de lijst worden automatisch genummerd. Probeer dit uit: - Verander in studentnummer-lijst1.html de <ul> en </ul> tags door <ol>... /ol>. Sla het bestand op als studentnummer-lijst2.html. Bekijk dit bestand in je browser en vergelijk het resultaat met studentnummer-lijst1.html. Opdracht 3 Een tabel maken Het resultaat van opdracht 1 kan nog overzichtelijker dan in een lijst worden gepresenteerd. We zullen de zojuist gemaakte data in een tabel plaatsen. Maak een tabel van 3 rijen en 2 kolommen. De (basis) HTML-tags voor tabellen zijn als volgt. <table> <tr> <td> </td> </tr> </table> (tabel openen) (rij openen rij duidt horizontale cellen in een tabel aan) (kolom openen kolom slaat op de verticale cellen in een tabel) Merk op dat in HTML de inrichting van een tabel in principe van links naar rechts verloopt. Je maakt dus eerst een rij en daarna de kolommen binnen die rij. Sla je net gemaakte bestand op, maar nu onder de naam studentnummer-pers.html. Zet de 3 regels met jouw data (dus niet het woord Persoonsgegevens) in een tabel met rand dikte 1. De tabel moet 50% van het browserwindow beslaan. Hieronder is het begin voorgedaan, maak het zelf af, en sla je bestand weer op en bekijk het in je browser. <html > <head> <title>persoonsgegevens</title> </head> <body bgcolor="#ffff80"> <h3>persoonsgegevens</h3> <br><br> 6
7 <table width=50% border="1"> (open tabel, rand dikte 1, breedte tabel 50%=halve window) <tr> (openen tabel-rij) <td> (openen kolom) <p><b>naam:</b></p> (inhoud 1 e kolom 1 e rij oftewel de 1 e cel dus) </td> (sluiten 1 e cel) <td> (openen 2 e kolom) <p>jouw naam:</p> (inhoud 2 e cel) </td> (sluiten 2 e cel) </tr> (sluiten 1 e rij) <tr> (openen 2 e rij... <td> etc etc etc (maak de rest van de tabel zelf) </td> </tr> (sluiten laatste rij) </table> (sluiten tabel) </body> </html> Opdracht 4 Hyperlinks maken Denk je aan Internet, dan denk je aan hyperlinks: connecties naar andere documenten op het internet of naar andere plaatsen in het huidige document. Links kunnen voorkomen in de vorm van tekst of een afbeelding. We zullen nu kijken hoe we een link coderen, maar dan moet er natuurlijk wel iets zijn dat we kunnen linken. Daarom, neem de HTML-pagina van opdracht 3 en sla hem op onder de naam studentnummer-overig.html. Verander in dit nieuwe document het woord persoonsgegevens in: overig. Verander de woorden naam, woonplaats en studentnummer in: vooropleiding, studie, hobby s. Vul rechts ervan deze velden in (hobby s etc.), en sla de pagina weer op. We hebben nu dus 2 pagina s met een tabel, een keer met persoonsgegevens, en een keer met overig. Deze 2 pagina s gaan we aan elkaar linken. We gebruiken de volgende codes: De anchor -tag (<a>...</a>) wordt gebruikt om een hyperlink te maken. Met het attribuut href wordt de bestemming van de link aangegeven. De waarde ervan zal de naam van een ander document zijn, en/of de naam van een anchor in hetzelfde document met een hekje (#) ervoor. Zo zal de volgende code: <a href="bestemming.html">dit is een link</a> een link genereren die zal leiden naar het bestand bestemming.html. Let er op dat hier wordt verwezen naar bestemming.html in dezelfde directory (bestemming.html heeft geen pad informatie erbij). Dit noemen we een relatieve URL (Uniform Resource Locator). Je kunt ook absolute URLs als waarde meegeven, bijvoorbeeld naam/adres van een server gevolgd door het pad naar het bestand en eventueel de naam van het bestand. De volgende link is absoluut: <a href=" link</a> Open de pagina studentnummer-pers.html (persoonsgegevens). We gaan een link maken naar de pagina studentnummer-overig.html (overig). Verander het stukje: <h3>persoonsgegevens </h3> in: 7
8 <h3>persoonsgegevens <a href="studentnummer-overig.html">overig</a></h3> Sla op. Tussen de tags <h3> en </h3> stond al het woord Persoonsgegevens, nu ook het woord Overig. En we hebben een link (die wordt standaard blauw onderstreept) gemaakt van het woord Overig. Bekijk het in je browser, het moet er alsvolgt uitzien: Door op Overig te klikken word je naar de overig pagina gebracht (studentnummeroverig.html). Nu, als je op overig bent, is er nog geen manier om terug te keren naar persoonsgegevens, want er is nog geen link gemaakt in de overig pagina. Die ga je nu maken op dezelfde manier als boven beschreven, maar dan andersom. Sla de pagina weer op en bekijk de 2 pagina s in je browser. Als alles goed is heb je nu 2 pagina s waartussen je kunt springen d.m.v. de gemaakte links. Opdracht 5 Andere content dan text opnemen Natuurlijk zijn er ook andere zaken te presenteren in een HTML-pagina dan alleen tekst. Foto s, geluidsbestanden, animaties, of video om er maar een paar te noemen. Zoek online een jpg-afbeelding (bestandnaam*.jpg) of een afbeelding in gif- of png-formaat. Sla die op in dezelfde directory als je HTML-bestanden. Open weer je eerste pagina, studentnummer-test.html, en voeg in onder de tekst: <img src="afbeelding.jpg" alt="" border="0"> Breng in bovenstaande tag de naam aan van je afbeelding (uiteraard inclusief de juiste extensie:. jpg, gif of png) en kijk of het werkt. Geef bij alt= een beknopte beschrijving van de afbeelding. Van een afbeelding kun je ook een link maken.
9 2. Oefeningen met CSS HTML en CSS In HTML kunnen we onderscheid maken tussen fysieke elementen en attributen, en logische elementen en attributen. Fysieke elementen en attributen kunnen de manier waarop een bepaald element wordt weergegeven wijzigen. Te denken valt aan lettertype, kleur en positie. De overige elementen noemen we logisch, ze hebben te maken met de structuur van informatie (tabellen, paragrafen, body, headers etc.) of met links. Merk op dat bijvoorbeeld heading elementen (zoals we zagen bijv.: <h3>) geen fysieke elementen zijn, hoewel ze toch van invloed zijn op de weergave van dat tussenkopje. Dit komt omdat browsers zelf standaardregels hebben die de weergave van koppen en kopjes betreffen. Vaak wil men meer invloed hebben op het uiterlijk van webdocumenten, maar de fysieke elementen in HTML bieden slechts zeer beperkte mogelijkheden om een webdocument op te maken. Het statement Building Web pages with HTML is like painting a portrait with a paint roller is misschien wat vergezocht, maar geeft aan waar het probleem zit. Historisch gezien is dit goed te verklaren. HTML is ooit opgezet als een taal om een logische structuur te bieden aan wetenschappelijke artikelen en deze uit te wisselen via Internet. Maar de eerste versie van HTML beantwoordde onvoldoende aan de behoefte om informatie te visualiseren. Daarom werden in latere versies font tags met attributen als grootte en kleur in het leven geroepen. Desondanks biedt HTML te weinig mogelijkheden voor adequate representatie van informatie. Alleen door inhoud (logische elementen, content ) en opmaak (fysieke elementen, weergave-stijlen ) van elkaar te scheiden kan een adequate representatie worden bereikt. Met behulp van CSS (Cascading Style Sheets) kunnen we inhoud en opmaak van een document scheiden: inhoud in HTML, en opmaak in CSS. CSS is een techniek die veel controle biedt over de opmaak van webdocumenten en ook het onderhoud en de consistentie van opmaak vergemakkelijkt, zeker als je een website met veel pagina s hebt. CSS biedt een schat aan mogelijkheden om typografie, lay-out en positionering te declareren. Ook biedt het andere voordelen: werken met CSS impliceert bijvoorbeeld kleinere, overzichtelijke HTML documenten en makkelijker te onderhouden consistente vormgeving van een site. We zullen in dit stuk de basisprincipes van uiterlijk tot positionering behandelen m.b.v. stukken uit online tutorials. Het is erg wijs (zeker als je nog nooit hebt gewerkt met CSS) om deze tutorials te maken. Lezen van materiaal is een eerste, ermee omgaan een tweede! Zie deze syllabus als een leidraad en zoek voor details op de aangegeven websites. In plaats van deze syllabus te volgen is het natuurlijk ook mogelijk boeken te kopen over CSS. Een goed boek is Cascading Style Sheets: The Definitive Guide, Third Edition, door Eric Meyer (O Reilly). Ook handig als naslagwerk voor de rest van je studie! We zullen veel gebruik maken van tutorials van waarin voor vele talen tutorials worden aangeboden. Wil je een echte expert worden in CSS, is het aan te raden de gehele tutorial door te werken. Nog een opmerking vooraf: gebruik van een programma als Dreamweaver CS4 is ten zeerste aan te raden omdat d.m.v. kleuren in HTML en CSS-bestanden goed wordt aangegeven wat de verschillende elementen zijn en hoe hun verhouding tot elkaar is. 9
10 Het begin Een van de grootste krachten van Cascading Style Sheets is (de naam zegt het al) het concept cascading. De term is ontleend aan cascade, een waterval waarbij het water trapsgewijs van rots op rots valt en aldus een aaneengesloten geheel vormt. Bij cascading krijgt het hogere (meer specifieke) niveau prioriteit boven het lagere (algemenere) niveau. Stel dat je een bepaalde stylesheet toepast op een heleboel web pagina s. Nu kan het zijn dat je van duizend pagina s binnen slechts één enkele pagina alle koppen groen wilt maken. Dan kun je simpelweg ingeven in die ene pagina (ook al link je een andere stylesheet eraan) dat je alle headings groen wilt hebben; zoiets als: h1,h2,h3 {color:green}. Cascading zorgt er voor dat de gelinkte (algemene) regels overschreven worden. Dit is niet alleen handig voor web-designers. Ook lezers van webpagina s kunnen veel profijt hebben van CSS. Lezers kunnen een aangepast stylesheet, bv. voor een braille-regel, laten toepassen op alle websites die ze bezoeken, door dit in de browser mee te geven. Als je meer wilt lezen over de geschiedenis van CSS en de (tekstuele) principes klik dan op: Inline en linked Een stylesheet kan op verschillende manieren gekoppeld worden aan een HTML pagina; de style regels kunnen worden opgenomen in een html bestand of beschreven in een aparte (css-)file die gelinkt wordt aan de html file. Inline Inline bestaan er twee typen: 1. Een stijlblok in een HTML pagina kan er als volgt uitzien (zet het onderstaande tussen de <head> </head> tags): <style TYPE="TEXT/CSS"> (begin CSS) p (selector p) { (openen eigenschappen) font-family : Arial; (lettertype) font-size : 12px; (lettergrootte 12 px) letter-spacing : 10px; (ruimte tussen de letter 10 px) } (sluiten eigenschappen) </style> Nu worden deze style regels op het gehele lokale html bestand uitgevoerd. Zou je deze regels willen uitvoeren op meerdere html pagina s, dan zul je dus ook elke keer deze <style> tags met hun inhoud moeten kopiëren. NB. Als je meerdere attributen gebruikt, worden deze van elkaar gescheiden met een puntkomma (;) 2. Je kunt ook inline binnen het html bestand iets ter plekke veranderen voor die ene tag met behulp van het attribuut style. Dan ziet het er als volgt uit: <p style="letter-spacing:inherit">content content content</p> Extern (linked) Extern (in een apart bestand) linken van een stylesheet heeft grote voordelen. Je hoeft al je elementen maar éénmaal te definiëren/vorm te geven en kunt het stylesheet linken aan diverse html pagina s. Als er dan iets veranderd moet worden (bv. al jouw headings level 1 10
11 <h1> moeten rood gekleurd worden), dan hoeft dit maar eenmaal te worden veranderd, in de externe stylesheet, en wordt dit doorgevoerd in alle daaraan gelinkte HTML pagina s. Je zult je css-file (in Dreamweaver > new file > css file) moeten linken door in je html-file de volgende html code toe te voegen tussen de <head> tags: <link href="file.css" rel="stylesheet" type="text/css" /> Je linkt de file.css aan deze html file waarbij je aangeeft dat het van het type css is. Voor file.css vul je natuurlijk je eigen bestandsnaam in, bijv. studentnummer_externalstyle.css. Selectors en structuur Cascading style sheets bestaan uit een of meer regels die omschrijven hoe een HTML element weergegeven moet worden. De basisregel ziet er als volgt uit: Selector {eigenschap: waarde;} (Het deel tussen accolades noemen we declaratie ) Een selector kan op verschillende manieren worden aangesproken. De simpelste manier selecteert een element met behulp van zijn tag naam (p, h1, etc.,). Klik op onderstaande link om meer over CSS syntax te lezen: Voorbeeld Om dit geheel goed door te hebben (selectors, declaraties en grouping), bekijk onderstaand fragment en plak het als oefening op twee manieren binnen een html file, extern en intern (zoals boven in het vorige stuk beschreven staat, oftewel met een keer proberen met <link> (extern) en met <style> (intern). body {background: white; color: yellow} h1, h2, h3, h4, h5, h6 {font-family: Helvetica, sans-serif; color: white; background: black;} h1, h2, h3 {border: 2px solid gray; font-weight: bold;} h4, h5, h6 {border: 1px solid gray;} p, table {color: gray; font-family: Times, serif;} pre {margin: 1em; color: maroon;} Toelichting Een paar opmerkingen: h1 h6 worden gedefinieerd. Dit houdt in dat ALLE headings binnen het html document de gedefinieerde eigenschappen krijgen. Zou je een eigenschap (bv. Font-family: Courier) willen toekennen aan één bepaald element <p> binnen dat document, dan zou dat er als volgt kunnen uitzien met behulp van een html attribuut class: o In de CSS: p.courier {font-family: Courier} je kunt ook p weglaten waardoor deze klasse op ieder element kan worden toegepast. Dit zou er uit zien als.courier {font-family:courier} o In de HTML: <p class= courier >tekst</p> zou je de p weglaten uit de css-code, kun je dus de class ook aan andere tags meegeven, bv. aan een body: <body class= courier >content</body>. Je hebt hiermee al een klein stuk CSS geschreven. Als je CSS groter wordt, is het handig om commentaar te zetten waarin je kort beschrijft wat je precies wilt met elementen. Dit 11
12 kan worden gedaan door te beginnen met /*, dan de tekst van je commentaar, en af te sluiten met een */. o Bv. /* Dit is commentaar */ Per lespagina op vind je welke waarden een eigenschap/attribuut kan aannemen. Bekijk deze goed en probeer ze uit! Units en Values Units en values kunnen worden onderverdeeld in kleuren, lengte- en percentage- waarden. Kleur Je kunt kleuren op verschillende manieren benoemen: 1) met namen: h1 {color: maroon;} 2) met RGB waarden in percentage h1 {color: rgb(0%,0%,0%);} ---> dit geeft zwart 3) met RGB waarden in hun numerieke equivalent (0-255) h1 {color: rgb(255,0,0);} ---> dit geeft rood Voor verdere oriëntatie over RGB waarden, zie bv.: Lengte Deze waarden zijn onder te verdelen in absoluut en relatief. Absolute lengte-eenheden zijn: in (inches) cm (centimeter) mm (millimeter) pt (punt) pc (pica; 1 pica is gelijk aan 12 pt) px (pixel) Je kunt deze lengte-eenheden plakken achter een lengte-attribuut, bv p (font-size:12pt). NB. Het mooie van pixel eenheden is dat ze ook negatief kunnen zijn. Dit is erg handig voor positionering, zoals verderop duidelijk wordt. Relatieve lengte-eenheden: Alleen de meeste gebruikte lengte-eenheid wordt hier besproken: em. In CSS is een emwaarde de waarde van de grootte van een bepaald lettertype. Dit houdt in dat als je een grootte van 12 pt meegeeft aan een lettertype, dan is 1em gelijk aan 12 pt. Als je aangeeft dat de tekst 1em van de linkerkant in je browser moet beginnen (met het attribute marginleft:1em), dan neemt de em de waarde 12 (1 x 12) aan. Percentage Percentages werken hetzelfde als in HTML, waarbij je waarden relatief schaalt aan de hand van percentages. Bv. margin-left:10% geeft aan dat het element waar het van toepassing is 10% van de totale ruimte links moet beginnen. CSS2 kent nog veel meer waarden. Klik op onderstaande link om meer informatie te krijgen en om voorbeelden te zien. 12
13 Tekst eigenschappen Tekst kent vele eigenschappen en attributen. Volg hiervoor de voorbeelden die beschreven staan op de website w3c schools. Over tekst: Over eigenschappen van lettertypen: NB. Voorbeelden die worden gegeven kun je online met de editor veranderen en je kunt on the spot het resultaat bekijken. Bedenk goed dat het hier gaat om inline stylesheets (<style> tags). Hyperlinks Omdat hyperlinks binnen een homepage nogal veel gebruikt worden, zullen in deze paragraaf de belangrijkste link-attributen ( <a> ) apart met hun waarden worden behandeld. CSS kent 4 belangrijke klassen voor anchors (links). Deze klassen zijn een extensie op <a> en worden daarom pseudo-klassen genoemd. a:link a:visited a:hover a:active Beschrijft een link die nog niet gebruikt is en waar je nog niet met de muis over heen bent gegaan. (Default zijn deze links in een browser vaak blauw.) Beschrijft een link, die aangeklikt is (en dus bezocht). (Default vaak paars in een browser). Beschrijft hoe een link eruit gaat zien wanneer er met de muiscursor overheen wordt gegaan. Beschrijft hoe een link eruit gaat zien tijdens het proces van aanklikken (dit duurt dus maar heel kort). De links kennen aardig wat attributen waarbij color en text-decoration het meest worden toegepast. Color kent de waarden zoals hiervoor al beschreven. Text-decoration kent de volgende waarden: Blink Inherit Line-through None Overline Underline Beschrijft een knipperende tekst (is irritant, dus vermijden) Erft de waarde van een bovenliggend element in de hiërarchische boomstructuur van een html-document. Inherit is een waarde die op veel plaatsen gebruikt kan worden, niet alleen bij links. Bv. Je geeft aan de <body> een achtergrond kleur mee. Als je binnen <body> een <p> element beschrijft met p{background-color:inherit), erft dat element <p> zijn waarde van het hogere element <body>. Geeft een lijn door de tekst Geeft alleen de tekst Geeft een lijn boven de tekst Geeft een lijn onder de tekst Voor een aantal voorbeelden klik op onderstaande link: Randen en boxen Veel designers gebruiken tabellen binnen een pagina om positionering te bewerkstelligen of om bijvoorbeeld aan een document-onderdeel (bv. een paragraaf) wat eigenschappen toe te 13
14 kennen als achtergrond, kleur of een rand. CSS biedt interessante alternatieven voor tabellen. We beginnen nu eerst met randen. Randeigenschappen kun je in principe aan alle tags meegeven, maar je moet je wel afvragen of en wanneer dat zin heeft (bv. een paragraaf, of een hele body). Oefeningen met randeigenschappen kun je vinden op: Natuurlijk is het een optie (en niet per se een slechte) om tabellen 1 te gebruiken, maar het kan ook anders (met behulp van CSS). Het model waar je dan in CSS mee werkt, heet het CSS box model. Dat box model gaat o.a. uit van: - positionering van een document-onderdeel (blok) in een ruimte (canvas): de afstand van de rand van een blok tot aan de rand van het canvas wordt margin genoemd. - de positie van de content van een blok t.o.v. de rand van dat blok: de ruimte tussen de content en de rand van het blok wordt padding genoemd. Een simpel voorbeeld staat hier: Het hele boxmodel volgens het W3C, waarbij de belangrijkste attributen van margin en padding worden toegelicht, kun je vinden op: Nu je wat attributen hebt gezien, is het tijd om wat voorbeelden te bekijken via w3schools, je kunt ze in principe allemaal bekijken en uitproberen, want positionering zul je goed moeten oefenen wil je dit in de vingers krijgen: Voorbeelden van margins: Voorbeelden van paddings: <div> en <span> -tags Nu je iets over positionering hebt geleerd en over opmaak, kun je jezelf afvragen hoe je bv. een compleet lege box creëert. Daarmee wordt bedoeld dat als je positionering in de vorm van padding en margin toevoegt, dit hiervoor werd toegekend aan bv. een paragraaf, maar het grote nadeel is dat een paragraaf of andere bestaande html-elementen al default eigenschappen hebben. Wil je een box echt compleet leeg opgeleverd krijgen dan zijn daar twee andere tags voor: <div> en <span>. Dat deze tags in principe niets doen, kun je zien als je in een html pagina <div>tekst</div> toevoegt (ditzelfde geldt voor <span>) en dit bekijkt in een browser. In principe wordt een leeg schilderdoek aangeboden, wat helemaal door een web designer kan worden ingevuld. <div> heeft in principe betrekking op block level elements, in het bijzonder grote selecties, binnen een html document. <span> heeft in principe betrekking op inline elements. Voor een verdere toelichting, zie: Het zou dus heel handig zijn om blok elementen van een pagina (bv. een header, een navigatiebalk, een content window) met divs aan te geven. Natuurlijk is het mogelijk om 1 Zie voor een voorbeeld van tabellen gecombineerd met CSS: 14
15 daarbinnen weer <p> toe te passen. HTML blijft een boomstructuur, waarbinnen steeds elementen als child kunnen worden geplaatst. Belangrijke voorbeelden Er zijn een paar belangrijke voorbeelden die je moet bekijken en uitproberen voordat je verdergaat met echte positionering. Het gaat om een aantal attributen die veel worden gebruikt voor positionering en om een aantal goede voorbeelden van CSS-gebruik. Het attribuut float (staat hier automatisch op right; probeer eens andere waarden, te vinden m.b.v. Dreamweaver): Het verschil met het vorige voorbeeld is dat het plaatje nu in een <div> zit en dus in een block element: Hoe een simpele website in elkaar te zetten met een simpele header, block en footer (m.b.v. margin, padding en <div> gecombineerd): Positionering Positionering van blokken binnen html-pagina s kan een goed alternatief zijn voor het werken met tables of frames. Positionering kan op drie manieren gebeuren: Relatieve positionering o dit betekent dat een element relatief vanaf zijn originele positie binnen de html code naar een andere wordt verplaatst. Een simpel voorbeeld vind je op: Absolute positionering o met deze positionering kan een element overal op een pagina worden gezet. Een simpel voorbeeld vind je op: Volg nu eerst (alle) tutorials op over positionering op de volgende pagina: Fixed positionering Deze positionering geeft een soort frames effect (wordt niet door alle browsers ondersteund).. Afsluiting: enkele tips Je bent in principe klaargestoomd om je eerste website met CSS in elkaar te zetten en alle informatie te verwerken. Een paar tips ter afsluiting: Voordat je begint met coderen, schets eerst voor jezelf wat je nou daadwerkelijk wilt hebben als inhoud en hoe je de informatie (bv. als blokken) wilt plaatsen. Begin niet te ambitieus. Begin eerst met een paar (heel) simpele webpagina s en voeg dan langzaam kennis toe. Als je een paar professionele en volwaardige voorbeelden wilt zien, is het verstandig te kijken op waar professionele designers verschillende CSS files hebben gemaakt aan de hand van EEN ENKELE HTML-FILE. Dit laat goed zien hoe uiteenlopende webproducten je met CSS kunt maken. Raak niet ontmoedigd door de voorbeelden, want het vergt veel oefening om dit te kunnen en deze voorbeelden worden ook niet van je verwacht. Maar ze kunnen je wel inspireren! Nuttige informatie en goed uitgewerkte voorbeelden kun je verder bijv. vinden op: o 15
16 3. Valideren Tot slot een heel belangrijke verwijzing die je zeker moet hebben uitgeprobeerd voordat je aan de Gemeentewebsite-practicumopdracht gaat beginnen. Op de website van het W3C ( vind je rechts op de pagina HTML & CSS ( links naar een online CSS-validator en HTML-validator (Markup): parsers waarmee je kunt laten testen of je html- en css-bestanden valide zijn volgens de standaarden van het W3C. Probeer de werking van deze validators uit. Check jouw XHTML- en CSS-bestanden en verwerf het valid HTML / CSS -icon voor jouw bestanden. Leer jezelf aan om regelmatig met deze validators te werken wanneer je een website aan het maken bent. Ook Dreamweaver CS4 biedt goede validators voor XHTML en CSS. Maar verifieer altijd nog even of de code die door Dreamweaver valide is bevonden, ook door de W3C-validator als correct wordt aangemerkt! 16
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
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
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
Descendant selectors toepassen
HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een
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
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
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
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
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
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
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.
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
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.
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
Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.
Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving
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?
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
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,
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
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!
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
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
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
Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?
Agenda HTML algemeen Wat is HTML? Korte historie Opbouw HTML document Aantal tags + voorbeelden Vragen 2 3 Opmaaktaal Letter Kleur Plaatjes Tabellen Formulieren Links Wat is HTML? Waarin maak je een HTML-bestand?
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
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.
Web building basis: HTML. Karel Nijs 2008/09
Web building basis: HTML Karel Nijs 2008/09 Webbuilding basis vorige les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Webbuilding
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
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
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. , , ).
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
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.
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,
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
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
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
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
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.
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
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).
Doelen: Als je deze opdracht hebt uitgevoerd, heb je de volgende doelen bereikt: Je kunt een eenvoudige webpagina maken met behulp van HTML.
OPDRACHTKAART MM-05-04-01 HTML Voorkennis: Geen. Intro: De opmaaktaal voor het WWW heet HTML (Hyper Text Markup Language). Met HTML kan een webpagina worden gemaakt, inclusief hyperlinks. Tijdens deze
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
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
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
Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012
Hand-out Web Technologies, werkcollege 5 Alex Reuneker (a.reuneker@hhs.nl), 2012 1. Groeperen (div- en span-elementen) : Het HTML-element div is een block-level element (zie hand-out bij het
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)
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
Informatietechnologie 1. Inleiding tot CSS. Richtlijnen voor opmaak. Kristof Michiels
Informatietechnologie 1 Inleiding tot CSS Richtlijnen voor opmaak Kristof Michiels In deze presentatie Voordelen en kracht van CSS Hoe schrijf je CSS stijlregels? Toevoegen aan HTML documenten Basisconcepten:
<meta name="description" content= "de tekst die in zoekresultaten bij de link te lezen is" />
Author Description Favicon
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
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
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-
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
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
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.
Module IV - Cascading Style Sheets (CSS)
Module IV - Cascading Style Sheets (CSS) Cascading Style Sheets kunnen we het best vergelijken met opmaakprofielen binnen tekstverwerkers zoals Microsoft Word, Corel WordPerfect, OpenOffice Opmaakprofielen,
OPDRACHTKAART. Thema: Multimedia. Het internet 3. Het World Wide Web MM-05-03-01. Voorkennis: Geen.
OPDRACHTKAART MM-05-03-01 Het World Wide Web Voorkennis: Geen. Intro: Deze opdracht gaat over de belangrijkste mogelijkheid van het internet: het surfen op het World Wide Web. Deze opdracht beschrijft
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
HTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy
Programmeren met CodeAcademy HTML is de taal die gebruikt wordt om webpagina s te maken die jij elke dag bezoekt. Het is een logische manier om een website te structureren. Laten we kijken wat de term
Er is nog heel wat voor nodig om van alle losse HTML-code
Boxmodel, weergavemodel en positionering 9 Er is nog heel wat voor nodig om van alle losse HTML-code een toonbare pagina te maken, meer dan u misschien op het eerste gezicht denkt. Als de HTML-code is
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
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
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
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
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
Font betekent lettertype, de vele font eigenschappen wijzigen dan ook de opmaak van je lettertype. Hiermee bepaal je het lettertype.
Stijlregels I Nu je de verschillende soorten CSS kent kan je deze ook gaan toepassen. Onthoudt dat alle opmaak in xhtml met CSS gemaakt moet worden. Tegenwoordig zijn er meer dan 200 CSS properties, deze
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
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) 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.
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
HAND- OUT. https://www.uwdomein.com/qzadmin. password: statistieken https://qwikstats.suares.com/www.uwdomein.com. support http://help.suares.
HAND- OUT website: inloggen: login name: password: http://www.uwdomein.com https://www.uwdomein.com/qzadmin statistieken https://qwikstats.suares.com/www.uwdomein.com support http://help.suares.nl/ Kuki+Ko
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
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
Van Dreamweaver CS4 naar CS5
Danny Devriendt Van Dreamweaver CS4 naar CS5 Beknopte overstapgids www.wwwsoft.be Bijlage gratis te downloaden bij Basiscursus webdesign Dreamweaver CS4 WWW-Soft GCV 2010 www.wwwsoft.be CS5 Nieuw in Dreamweaver
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 6) 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.
HTML en CSS gevorderd
HTML en CSS gevorderd Inhoudsopgave Inleiding! 3 Opbouw webpage en css! 4 DIVʼs of iframes?! 8 Eigen icoon in de adresbalk van de browser! 8 Web-editors! 8 Koppelen van css-bestanden! 9 Browser afhankelijke
Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen
HTML-EDITOR GEBRUIKEN
HTML-EDITOR GEBRUIKEN Over TinyMCE TinyMCE is een kleine What-You-See-Is-What-You-Get (WYSIWYG) editor voor teksten. De bediening vindt plaats in de web browsers, zoals MSIE of Mozilla. Het werken met
Stelt de voorgrondkleur van de tekst van een element in. Stelt in hoe de achtergrondfiguur moet worden herhaald, standaard: repeat.
OVERZICHT CSS - EIGENSCHAPPEN Eigenschap Beschrijving Mogelijke waarden KLEUR EN ACHTERGROND color Stelt de voorgrondkleur van de tekst van een element in. background-color Stelt de achtergrondkleur van
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
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
HTML & CSS. Studievaardigheden 2013. Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden
HTML & CSS Studievaardigheden 2013 Frank Takes (ftakes@liacs.nl) LIACS, Universiteit Leiden Inleiding Voorkennis: geen Stof: www.w3schools.com en dit college: www.liacs.nl/~ftakes/pdf/htmlcss.pdf Opdracht:
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
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
Publicatie formulieren en surveys
Handleiding: Publicatie formulieren en surveys Deze handleiding is in te zetten voor MailPlus Marcom en MailPlus ecom. Inhoudsopgave Introductie... 1 1 Formulieren integreren... 2 1.1 Formulieren integereren
Handleiding Content Management Systeem
Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne
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...
Agenda (X)HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
(X)HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@few.vu.nl vrije Universiteit amsterdam Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) XHTML Vragen Demo 1 vrije Universiteit
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
Handleiding Vedor-editor
Handleiding Vedor-editor Mei 2007, versie 0.9 Inhoudsopgave Inleiding... 3 Aanmelden... 4 De werkbalk... 5 Het context menu... 6 Navigeren binnen je website... 7 Tekst toevoegen en bewerken... 8 Afbeeldingen
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.
Week 1 1/4. Week 1 2/4
Week 1 1/4 3. Beschrijf keuzes: Wij hebben gekozen voor Dreamweaver omdat een van ons dit al op zijn/haar laptop had staan. Ook weten we hoe we dit programma moeten gebruiken en kan bijvoorbeeld notepad++
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
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...
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.
Les 3: Het maken van pagina s, het menu en het schrijven van een blogpost Pagina s
Les 3: Het maken van pagina s, het menu en het schrijven van een blogpost Bij het maken van een blog is het belangrijk dat je er inhoud op plaatst. Dit noemen we content. Alles wat je openbaar op je blog
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript
Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login
Werken met de editor in het beheerpaneel
Werken met de editor in het beheerpaneel In het beheerpaneel van i-reserve wordt op een aantal schermen gewerkt met een editor. Bijvoorbeeld bij de e- mail en factuur templates, maar ook in het product-detailscherm.
HTML&CSS OEFENBOEKJE. van:
HTML&CSS OEFENBOEKJE van: HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen , en een tag om te sluiten . De letters die tussen de staan, geven aan wat voor
Zonnepanelen Hoe krijg je de data op je website?
Zonnepanelen Hoe krijg je de data op je website? Beste website-bezoeker, Omdat ik al heel wat vragen kreeg over het gedeelte zonne-energie op mijn website, heb ik besloten om de werkwijze die ik gevolgd