Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Save this PDF as:
 WORD  PNG  TXT  JPG

Maat: px
Weergave met pagina beginnen:

Download "Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale."

Transcriptie

1 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 (zoals bij een klassiek blad papier)? Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Wil je een pagina met een vaste breedte (fixed)? VOORDELEN NADELEN De webpagina ziet er in alle browsers en in alle schermresoluties hetzelfde uit. De webpagina is soms te groot of te klein bij andere schermresoluties. De verhoudingen tussen de tekst en de afbeeldingen blijft steeds dezelfde. Tekst en afbeeldingen zien er te groot of te klein uit bij andere resoluties.... Je kan een pixelafbeelding met een vaste grootte gebruiken in de 'banner'... Wil je een pagina met een flexibele breedte (fluid)? VOORDELEN De webpagina schaalt mee met de grootte van de schermresolutie. NADELEN De verhoudingen tussen de tekst en de afbeeldingen zien er anders uit bij andere resoluties. Je kan moeilijk een pixelafbeelding met een vaste grootte gebruiken in de banner. Wanneer je op internet rondsurft, zal u merken dat heel wat professionele websites kiezen voor een verticale layout met een vaste breedte. Door de opkomst van de mobiele browsers kan hier verandering in komen. 51

2 Een voorbeeld van fixed layout Een voorbeeld van fixed layout 52

3 Een voorbeeld van een fixed-layout waarbij gebruikgemaakt wordt van een afbeelding. Die afbeelding heeft een vaste pixelgrootte en zal niet meeschalen bij hogere schermresoluties. Fixed layout 53

4 Een voorbeeld van een 'fluid' ontwerp. De pagina rekt mee met de shermresolutie. De balk met links aan de linkerkant behoudt een vaste breedte. Bovenaan in de banner is eveneens een pixelafbeelding geplaatst. De afbeelding blijft links staan. De banner is even hoog als de afbeelding. Ook al zal de banner mee rekken in de breedte, hij zal nooit mee rekken in de hoogte. M.a.w. de banner heeft een 'fixed' hoogte, maar een 'fluid' breedte. Een voorbeeld van een horizontaal 'fluid' ontwerp. De breedte van de website bedraagt steeds 100%. De hoogte van de banner, de knoppenbalk en de footer heeft een vaste (pixel)waarde. Het gedeelte waar de inhouden staan, kan afhankelijk van de schermresolutie mee schalen. Bij kleinere resoluties verschijnt er automatisch een schuifbalk (scrollbar). 54

5 Een sjabloon tekenen 1. Neem een blad papier of gebruik een tekenprogramma om het sjabloon van uw website uit te tekenen. 2. Voor het voorbeeld hieronder hebben we een schermafbeelding gemaakt van een browser en die als afbeelding in een tekenprogramma geplakt. 3. Bovenop de schermafbeelding die een browser op 100% schermbreedte moet voorstellen, hebben we een gekleurde rechthoek getekend. Die rechthoek heeft hier een breedte van ongeveer 80%. Binnen die container zullen alle onderdelen van onze webpagina geplaatst worden. 4. In HTML kan u het als volgt vertalen: <html> <head> <style type= text/css > body{ padding:0; margin:0; #container{ width:80%; background:#669b67; </style> </head> <body> <div id= container > </body> </html> 55

6 Let echter op: Wanneer je het voorbeeld in een webbrowser zou uitproberen, zal de 'container' niet de ganse hoogte van het browservenster vullen, maar enkel een smalle strook. De container zal mee rekken wanneer je inhoud in de container plaatst. 5. We verdelen de container nu in diverse onderdelen. Wanneer we het in een 'stamboom' zouden onderbrengen zou de paginabeschrijving er zo uitzien: body div: container banner knoppenbalk links rechts inhoud footer Zoals u hierboven reeds zal gemerkt hebben gebruiken we in de HTML-opmaakcodes de markering (tag) DIV om onderverdelingen aan te brengen in de webpagina. We plaatsen meerder DIV's (divisions) in elkaar om tot het gewenste sjabloon te komen. 56

7 In HTML ziet het er zo uit: <body> <div id= container > <div id= banner > <div id= knoppenbalk > <div id= links > <div id= rechts > <div id= inhoud > <div id= footer > </body> 6. Wanneer je het bovenstaande voorbeeld in de browser bekijkt, zal je merken dat de onderdelen zonder meer onder elkaar worden geplaatst. Meer nog: vermoedelijk krijgt u enkel een witte pagina te zien. We moeten immers nog bepalen hoe elk onderdeel moet geplaatst en opgemaakt worden. Daarvoor gebruiken we CSS. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <style type="text/css"> html, body{ text-align:center; /*Hierdoor cnetreert IE alle inhoud van de pagina*/ padding:0; /*geen marges*/ margin:0; /*geen marges*/ height:100%; /*inhoud krijgt 100% hoogte*/ font-family:arial, helvetica; #container{ 80%*/ width:80%; /*In de pagina plaatsen we een container-div met een breedte van margin: 0 auto; /*bovenaan is de marge gelijk aan 0, de andere marges kiest hij automatisch*/ position: relative; /*de positie is relatief tov de pagina*/ background:#cccccc; /*Achtergrondkleur*/ text-align:left; /*Alle tekst en inhouden worden links uitgelijnd*/ #banner{ height:120px; /*de div met id "header" is 120 pixels hoog*/ clear:both; staan*/ /*Links en rechts van de banner mogen geen inhouden of div's background:#303c58; #knoppenbalk{ height:20px; 57

8 margin:0px; padding:0px; background:#303c58; color:white; #links{ float:left; staan*/ width:30%; /*de DIV met id "links" gaat hierdoor links in de container /*de div krijgt een breedte van 30%*/ padding:0; margin:0; #rechts{ float:right; /*de div met id "rechts" gaat rechts staan*/ width:70%; /*de div krijgt een breedte van 70%*/ margin:0; padding:0; background:#3c485e; #inhoud{ margin:2%; /*in de div "rechts" zit de div "inhoud". Hierin komen alle inhouden te staan. Ze staan 2% van de kant af*/ text-align:justify; #footer{ clear:both; width:100%; margin:0; padding:0; height:10%; position:relative; bottom: 0; /* heel belangrijk */ background:yellow; </style> </head> <body> <div id="container"> <div id="banner">welkom <div id="knoppenbalk">link - link - link - link <div id="links"> <ul> <li>link</li> <li>link</li> </ul> <div id="rechts"> <div id="inhoud"> 58

9 Hier komt mijn tekst <div id="footer">copyright Kris Merckx </body> </html> Het bovenstaande voorbeeld moet er in de browser als volgt uitzien: HTML en CSS in aparte bestanden Wanneer uw HTML-sjabloon en CSS-stijl klaar is slaat u het document best op onder de naam sjabloon.html. Toch is het zeer belangrijk dat u het HTML-sjabloon en de CSScode van elkaar scheidt en in aparte documenten opslaat. sjabloon.html stijl.css 1. Knip alles wat zich tussen <style type= text/css > en </style> in bevindt en plak het in een apart document. Sla dit nieuwe document op onder de naam stijl.css Let op: Wanneer we zeggen knippen en plakken, dan bedoelen we dat u de code moet knippen: in Dreamweaver moet u het knippen in het codevenster en vervolgens een leeg CSSbestand aanmaken 59

10 U kan het ook knippen en plakken in een teksteditor zoals Microsoft Kladblok, Scite of Smultron (Mac OS X) 2. Vervolgens moet u de stijl aan het html-sjabloon linken. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <style "stijl.css"; </style> </head> <body> <div id="container"> <div id="banner">welkom <div id="knoppenbalk">link - link - link - link <div id="links"> <ul> <li>link</li> <li>link</li> </ul> <div id="rechts"> <div id="inhoud"> Hier komt mijn tekst <div id="footer">copyright Kris Merckx </body> </html> Zorg er voor dat de beide bestanden zich in dezelfde map bevinden. 60

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

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

6. De sitemap of stamboom van uw website

6. De sitemap of stamboom van uw website 6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen,

Nadere informatie

Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.

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

Nadere informatie

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

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

Nadere informatie

Inhalen les 7 (versie B)

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

Nadere informatie

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

HTML&CSS OEFENBOEKJE. van:

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

Nadere informatie

Min-height en min-width

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

Nadere informatie

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

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

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

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 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.

Nadere informatie

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.

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

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

Welkom bij mijn website tutorial (Deel 2)

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

Nadere informatie

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

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

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

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

Nadere informatie

Leer CSS Positioneren in Negen Stappen

Leer CSS Positioneren in Negen Stappen Leer CSS Positioneren in Negen Stappen Deze tutorial (vertaald uit het engels, origineel hier te vinden: http://www.barelyfitz.com/screencast/html-training/css/positioning/ ) laat zien hoe je met CSS verschillende

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

Eindopdracht webdesign

Eindopdracht webdesign Eindopdracht webdesign Opdracht 1: html Maak html-pagina jouwnaam-formulier.html met een webformulier volgens het voorbeeld: Geef in de form tag attribuut action de waarde../cgi-bin/formmail.pl en geef

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

Op heel brede monitoren kan een dergelijke site er snel ongemakkelijk worden doordat de tekst op heel lange regels komt te staan.

Op heel brede monitoren kan een dergelijke site er snel ongemakkelijk worden doordat de tekst op heel lange regels komt te staan. Layout met CSS Naast het opmaken van tekst, navigatie menu s en foto s komt de echte kracht van CSS tot uiting voor de layout van de webpagina. Het is geen eenvoudig onderwerp, daarom eerst een beetje

Nadere informatie

Publicatie formulieren en surveys

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

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

Natuurlijk moet je niet element invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat p voor alinea en h1 voor een grote kop.

Natuurlijk moet je niet element invoeren, maar de afgesproken benamingen, meestal afkortingen: zo staat p voor alinea en h1 voor een grote kop. HTML-elementen Met de markeertaal HTML bouw je webpagina's en kan je ze eveneens aan elkaar koppelen (linken). Een webpagina bouw je niet met een tekstverwerker. Je schrijft hem best in code. Een browser

Nadere informatie

Eindopdracht HTML/CSS: hovenier

Eindopdracht HTML/CSS: hovenier Eindopdracht HTML/CSS: hovenier De eindopdracht is verplicht voor wie de opleiding Applicatie Ontwikkelaar wil gaan doen. Het is de bedoeling dat je zo veel mogelijk individueel werkt. Als je samenwerkt

Nadere informatie

1. De basis 2. De basis uitbreiden

1. De basis 2. De basis uitbreiden Wordpress Theme Hoe moet je deze reader gebruiken? Deze reader is digitaal, zodat je makkelijk stukjes code kunt kopieren en plakken. 1. De basis 2. De basis uitbreiden Hier aan de linkerkant vind je een

Nadere informatie

MODULE 4 : WEBSITEX5(11)

MODULE 4 : WEBSITEX5(11) MODULE 4 : WEBSITEX5(11) In deze benadering maken we een site met een startpagina en 3 kleine pagina s. We doen dit met een tool op de PC: WebSiteX(Versie 9 is volledig gratis, maar beperkter dan versie

Nadere informatie

Hand-out Web Technologies, werkcollege 5 Alex Reuneker 2012

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

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

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

Nadere informatie

HTML richtlijnen e-mail marketing. part of the valley

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

Nadere informatie

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

Hoe maak je een nieuwbrief template met MailChimp? In dit document leg ik je stap voor stap uit hoe je met het drag and drop systeem van MailChimp jouw eigen layout bij elkaar sleept. Je geeft jouw template

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

HTML en CSS gevorderd

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

Nadere informatie

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.2. Documentatie Onsweb Club plugin voor NHV verenigingen. Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor NHV verenigingen Versie 0.2 Laatste wijziging: 10 mei 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Descendant selectors toepassen

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

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

Wat is een child-theme?

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

Nadere informatie

Van Dreamweaver CS4 naar CS5

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

Nadere informatie

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.6. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.6 Laatste wijziging: 13 augustus 2013 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

Websitecursus deel 1 HTML

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

Nadere informatie

Template maken voor Webshops van FreeWebShop

Template maken voor Webshops van FreeWebShop Template maken voor Webshops van FreeWebShop Versie 1 Peter Jan van Tuil Maart 2011 info@van-tuil.info De uitdaging. Een kennis die een site wil hebben, een webshop. Het grafisch ontwerp is er al. Voor

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

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

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

Na het inloggen met de gegevens die je hebt gekregen, verschijnt het overzichtsscherm zoals hieronder:

Na het inloggen met de gegevens die je hebt gekregen, verschijnt het overzichtsscherm zoals hieronder: Inhoud van de website invoeren met de ContentPublisher De inhoud van websites kan worden ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS). De websites van Muismedia

Nadere informatie

Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp

Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp DOORLOPENDE OPDRACHT KINEPOLIS Beste studenten, Deze opdracht vraagt uitbreiding van jullie doorheen de lessen. We gaan zelf een ontwerp maken/ code schrijven voor de Kinepolis website. Wat hoort er thuis

Nadere informatie

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

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

Nadere informatie

Een ASP.NET applicatie opzetten. Beginsituatie:

Een ASP.NET applicatie opzetten. Beginsituatie: Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.

Nadere informatie

De frameset uit de afbeelding wordt op de volgende manier gedefinieerd:

De frameset uit de afbeelding wordt op de volgende manier gedefinieerd: FRAMES GEBRUIKEN Met frames kan het venster van een browser zo worden ingedeeld, dat er meerdere webpagina's tegelijk getoond kunnen worden. In de afbeelding hieronder staat een webpagina met frames. We

Nadere informatie

Zonnepanelen Hoe krijg je de data op je website?

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

Nadere informatie

Internet_html.doc 1/6

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

Nadere informatie

IAI: Les 2 Vakjes maken. Rick Hazebroek r.hazebroek@cibap.nl

IAI: Les 2 Vakjes maken. Rick Hazebroek r.hazebroek@cibap.nl IAI: Les 2 Vakjes maken Rick Hazebroek r.hazebroek@cibap.nl 1 2 Les 2 Bekijk de powerpoint van deze les Opdracht 1: Vakjes maken Bekijk de tekening op de vorige pagina. Je ziet hier verschillende onderdelen:

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

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

Handleiding Macromedia Contribute

Handleiding Macromedia Contribute Handleiding Macromedia Contribute Marcel Lemmen en Frank Coenders maart 2008 Handleiding Macromedia Contribute 1 Contribute in vogelvlucht Contribute werkt simpel en intuïtief. Het bewerken van een website

Nadere informatie

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

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

Nadere informatie

Handleiding Woonz.nl iframe

Handleiding Woonz.nl iframe Handleiding Woonz.nl iframe Woonz.nl biedt de mogelijkheid om uw actuele woningaanbod op Woonz.nl op uw website te tonen. Hiervoor dient u eerst een API-key te ontvangen van Woonz.nl, dit is een sleutel

Nadere informatie

Safira CMS Handleiding

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

Nadere informatie

Gebruik template. Pagina opbouw. Datum : 15 10 2001 Auteur : ZappWerk

Gebruik template. Pagina opbouw. Datum : 15 10 2001 Auteur : ZappWerk Gebruik template Datum : 15 10 2001 Auteur : ZappWerk In dit document wordt het gebruik van de site template toegelicht. Beschreven wordt hoe de verschillende onderdelen in de in de pagina te plaatsen.

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

Handleiding internet Het maken van pagina s

Handleiding internet Het maken van pagina s Handleiding internet Het maken van pagina s Hoofdstuk IV Vullen van pagina s met tekst en beeld Het vullen van een pagina met tekst en beeld In dit hoofdstuk gaan we een van de pagina s vullen met tekst

Nadere informatie

HTML. Tabellen. Hans Roeyen V 3.0

HTML. Tabellen. Hans Roeyen V 3.0 Tabellen Hans Roeyen V 3.0 12 februari 2015 Inhoud 1. Tabellen... 3 1.1. De Tabel tags... 3 1.1.1. Het border attribuut... 4 1.2. De Tabel cellen... 4 1.3. Alignering en spanning... 8 1.1.2. De align attributen...

Nadere informatie

Kris Merckx - 16/10/ Agnes.js - creative commons license

Kris Merckx - 16/10/ Agnes.js - creative commons license Agnes.js - alpha 2.5 => www.ardeco.be/agnes (testsite) Fase 1: Opzetten van de frameworkbasis (afgerond) TOETSTYPES: - meerkeuze (één of meerdere correcte antwoorden) - invuloefening - ja-neen-vragen -

Nadere informatie

Websitecursus deel 2 CSS

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

Nadere informatie

WYSIWYG editor. De knoppen worden besproken beginnend bovenaan van links naar rechts.

WYSIWYG editor. De knoppen worden besproken beginnend bovenaan van links naar rechts. WYSIWYG editor Handleiding Mimar CMS Website De knoppenbalk van de editor lijkt in grote mate op die van Microsoft Word en zal er dus vertrouwd uitzien. De functies van de knoppen kunnen enigszins afwijken

Nadere informatie

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

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

Nadere informatie

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

e-maildesign guidelines

e-maildesign guidelines e-maildesign guidelines e-maildesign guidelines Amsterdam, 9 december 2009 Veritate de entree 230 1101 ee amsterdam t +31 20 451 51 51 f +31 20 363 06 30 Copyright Alle rechten voorbehouden. De inhoud

Nadere informatie

Webdesign. cursusjaar 2009-2010. Practicumoefeningen met. (X)HTML en CSS

Webdesign. cursusjaar 2009-2010. Practicumoefeningen met. (X)HTML en CSS Webdesign cursusjaar 2009-2010 Practicumoefeningen met (X)HTML en CSS Departement Informatica Bacheloropeliding Informatiekunde Hans Voorbij (2010) Inhoud 1. Basisoefeningen met HTML...........................................

Nadere informatie

12.1 Frames als structuur voor je website

12.1 Frames als structuur voor je website BOUWSTEEN 12 Het gebruik van frames 12.1 Frames als structuur voor je website Naast gebruik van inline frames kan je de structuur van je website helemaal via frames opzetten i.p.v. via tabellen. Bij tabellen

Nadere informatie

XHTML en CSS. Ruud Koortens Frans Peeters

XHTML en CSS. Ruud Koortens Frans Peeters XHTML en CSS Ruud Koortens Frans Peeters januari 2008 Inhoudsopgave Inleiding... i 1. XHTML 1.0... 1 1.1. XML Declaratie... 1 1.2. Het juiste DOCTYPE in hoofdletters... 2 1.3. De XML-namespace... 2 1.4.

Nadere informatie

Whitepaper. E-mail design best practices

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

Nadere informatie

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

Quick and Dirty HTML/CSS in epub - handleiding voor beginners

Quick and Dirty HTML/CSS in epub - handleiding voor beginners Quick and Dirty HTML/CSS in epub - handleiding voor beginners Introductie Deze handleiding is voor zowel de beginnende als de gevorderde gebruikers. Je hoeft niets te weten van HTML, CSS of zelfs epub

Nadere informatie

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

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 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.

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

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

5. Inhoud, structuur en opmaak met HTML en CSS

5. Inhoud, structuur en opmaak met HTML en CSS 5. Inhoud, structuur en opmaak met HTML en CSS Het oorspronkelijke doel van HTML was tekstinformatie via het "internet" uitwisselbaar maken onafhankelijk van het computersysteem of het besturingssysteem.

Nadere informatie

HTML Graphics. Hans Roeyen V 3.0

HTML Graphics. Hans Roeyen V 3.0 HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.

Nadere informatie

1 Start Dreamweaver op. De workspace verschijnt. De Dreamweaver MX Workspace. 2 Klik op Dreamweaver Site in de kolom Create New.

1 Start Dreamweaver op. De workspace verschijnt. De Dreamweaver MX Workspace. 2 Klik op Dreamweaver Site in de kolom Create New. In deze instructie wordt een web gemaakt met frames. Het voorbeeld behandelt een digitaal portfolio, maar natuurlijk kun je de instructies gebruiken voor elk web met frames, ongeacht het onderwerp. Deze

Nadere informatie

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop). FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online

Nadere informatie

WebHare en Microsoft Word

WebHare en Microsoft Word WebHare en Microsoft Word Optimaliseer uw Word documenten voor gebruik met WebHare Werken met alinea s Opmaakprofielen Afbeeldingen Datum: Maart 2010 Aantal pagina's: 26 Versie: 2.6 Doelgroep: Content

Nadere informatie

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

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

Nadere informatie

Module IV - Cascading Style Sheets (CSS)

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,

Nadere informatie

ONTWERPEN VAN INTERACTIEVE PRODUCTEN

ONTWERPEN VAN INTERACTIEVE PRODUCTEN ONTWERPEN VAN INTERACTIEVE PRODUCTEN WORKSHOP INTERACTIEF PROTOTYPE BOUWEN F. van Slooten WORKSHOP INTERACTIEF PROTOTYPE BOUWEN Ontwerp Keuze tool/techniek Maken layout 2 dagen: dinsdag 23 september Ochtend:

Nadere informatie

Groepsleden: Pieter Luts HTML 5 Arno Neyens 12/03/2015 Joachim Geerts

Groepsleden: Pieter Luts HTML 5 Arno Neyens 12/03/2015 Joachim Geerts Groepsleden: Pieter Luts HTML 5 Arno Neyens 12/03/2015 Joachim Geerts Vince Vandormael Project Bootstrap Project Bootstrap 1 AANDACHTSPUNTEN JUMBOTRON 1.1 WAT IS JUMBOTRON Een jumbotron fungeert als een

Nadere informatie

Titel: flashvars.html

Titel: flashvars.html Data uitwisselen met Flash: the easiest way Kris Merckx www.ardeco.be Macromedia Flash-bestanden kunnen opgenomen worden in HTML. Een Flashfilm (*.swf) kan tekst, afbeeldingen, film, geluid en vectorbeelden

Nadere informatie

Er is nog heel wat voor nodig om van alle losse HTML-code

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

Nadere informatie

Les 8 (Drupalversie: 7) Display Suite

Les 8 (Drupalversie: 7) Display Suite Les 8 (Drupalversie: 7) Display Suite Display Suite (DS) is de tegenhanger van Panels. Eigenlijk is dat een verkeerde uitspraak want in deze les gaan we beiden combineren. Step 1: Voorbereiding Download

Nadere informatie

Google Maps op uw site

Google Maps op uw site Google Maps op uw site 1. Ga naar maps.google.com en voer het gezochte adres in. 2. Klik op de knop Zoeken in Maps. 3. U kan naar de gewenste positie zoomen en kiezen voor de satellietweergave of de gewone

Nadere informatie

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

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

Nadere informatie

Hosting. Bestelformulier en domeinnaamcontrole. Januari, 2013. WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland. w: www.wefact.nl e: helpdesk@wefact.

Hosting. Bestelformulier en domeinnaamcontrole. Januari, 2013. WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland. w: www.wefact.nl e: helpdesk@wefact. Hosting Januari, 2013 Bestelformulier en domeinnaamcontrole WeFact B.V. Kuiper 7a 5521 DG Eersel Nederland w: www.wefact.nl e: helpdesk@wefact.nl Introductie Algemeen In deze handleiding wordt uitgelegd

Nadere informatie

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

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

Nadere informatie

Studio Visual Steps Een website omzetten van WEB! Pro naar Web Easy

Studio Visual Steps Een website omzetten van WEB! Pro naar Web Easy Studio Visual Steps Een website omzetten van WEB! Pro naar Web Easy Aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy Een website omzetten van WEB! Pro naar Web Easy 2 Een website omzetten

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

Software Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License

Software Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld

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