Min-height en min-width

Save this PDF as:
 WORD  PNG  TXT  JPG

Maat: px
Weergave met pagina beginnen:

Download "Min-height en min-width"

Transcriptie

1 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 en vergroot Vast en flexibel Veel webpagina s zijn opgebouwd in twee kolommen. Links of rechts een smalle kolom voor de navigatie en daarnaast een brede kolom voor de inhoud van de website. In deze paragraaf bouwen we zo n lay-out op. Er zijn verschillende methoden om een ontwerp met twee kolommen te maken. We kiezen als voorbeeld een liquid design, waarbij de hele breedte van het browser-venster wordt gebruikt. Aan de linkerkant is een kolom met vaste breedte voor de navigatie. Bij het indelen van de html-pagina gebruiken we div-elementen om de inhoud van de kolommen te groeperen. Uitgangspunt is een html-opzet met twee div-elementen, een divisie voor de navigatie en een divisie voor wat we voor het gemak de inhoud van de webpagina zullen noemen: C <div id= navigatie > <ul>... </ul> </div> <!-- navigatie --> <div id= inhoud > <h1> Paul is dood </h1> <p>... </p> <p>... </p> </div> <!-- inhoud --> Op de plaats van de drie puntjes komt een invulling van de webpagina. Dit hoofdstuk concentreert zich op het maken van de lay-out. De pagina wordt niet compleet uitgewerkt; zo zijn er geen afbeeldingen en geen links Float Om de inhoud naast de navigatie te krijgen maken we de navigatie-div linkszwevend. De eigenschap float is hiervoor geschikt, zoals u in hoofdstuk 14 voor het eerst zag. U

2 HTML EN CSS de basis leerde daar ook dat niet alleen afbeeldingen kunnen zweven. Elk element kan dat en een div-element dus ook. De eerste opzet voor het stijlblad voor de pagina met twee kolommen is als volgt: C #navigatie { background : #aa26fe; /* paars */ float padding width : left; : 5px; : 175px; De navigatie-div geven we een paarse achtergrondkleur. Om twee kolommen te krijgen laten we de navigatie zweven (float: left), de andere div komt daar dan vanzelf naast omdat de navigatie-div plaats vrijmaakt. De padding zorgt ervoor dat de tekst niet tot aan de rand van de div loopt. De breedte zetten we vast op 175 pixels. Met de padding links en rechts erbij wordt de totale breedte dan 185 pixels. Afbeelding De eerste opzet voor een lay-out met twee kolommen is nog niet erg geslaagd. Afbeelding laat het resultaat zien van deze eerste opzet. Nog niet bepaald een lay-out van twee kolommen. Wat is er gebeurd? Een kenmerk van een div is dat hij zo groot is als nodig. Als de tekst van de div navigatie getoond is, dan is de div afgelopen. De rest van de tekst van de div inhoud loopt om de div navigatie heen, omdat navigatie linkszwevend is. Dat is de normale gang van zaken bij zwevende elementen (zie hoofdstuk 14), maar het is iets wat we nu niet willen. We willen dat er een linkerkolom ontstaat en dat de ruimte onder de div navigatie leeg blijft als de div is afgelopen.

3 Margin Een oplossing krijgen we als we de tweede div een grote marge toekennen aan de linkerkant, bijvoorbeeld 200 pixels: C #inhoud { margin : px; De div met de identificatie inhoud krijgt een marge van nul boven, rechts en onder, en een marge van 200 pixels aan de linkerkant. Een brede marge maakt de linkerkant vrij voor de navigatiekolom. Afbeelding laat het resultaat zien. De tweede kolom is nu een echte kolom en als het venster wordt vergroot of verkleind, dan schaalt de kolom mee met het venster, precies zoals het plan was. Afbeelding Door een grote linkermarge toe te kennen aan het tweede div-element ontstaat de bedoelde tekstkolom aan de rechterzijde. De linkerkolom met de navigatie kan nog wel beter. Het is nog niet echt een kolom. Als er meer tekst in de navigatie komt, dan wordt de rechthoek langer, maar wat we eigenlijk willen is een gekleurde kolom over het totale scherm. Het is altijd goed om buiten de hokjes te denken. Iemand heeft ooit bedacht dat het alleen maar hoeft te líjken alsof de navigatie-div de achtergrond verzorgt. In het echt kunnen we iets anders doen, namelijk een achtergrondplaatje aan het body-element toekennen en dat verticaal laten herhalen. We maken met een tekenprogramma een achtergrondverloopje van 200 pixels breed (afbeelding 15.14). De kleur loopt van paars, de kleur die de navigatie tot nu toe

4 HTML EN CSS de basis had (#aa26fe), naar oranje (#fdba79). Als we de body als achtergrondkleur datzelfde oranje geven, dan sluit het verloop mooi aan op de rest van de pagina. U kunt zelf uw fantasie gebruiken en andere kleuren gebruiken of een totaal andere afbeelding. Maak de afbeelding echter zo dat de onderkant naadloos op de bovenkant aansluit. Hoewel de afbeelding slechts 32 pixels hoog is, wordt hij verticaal herhaald zodat het idee van een kolom ontstaat. Afbeelding Verloop van paars naar oranje, 200 pixels breed en 32 pixels hoog. Om het verloop in de pagina te verwerken zijn twee aanpassingen nodig in het stijlblad. In het onderdeel navigatie verwijderen we de bestaande achtergrondkleur door de regel met background te verwijderen of door de background transparant te maken: C background : transparent; /* background via body */ We voegen kleur en achtergrond toe voor het body-element. De achtergrond wordt oranje en het verloop wordt in de linkerbovenhoek geplaatst en verticaal herhaald. C body { background color : #fdba79 url(verloop.gif) top left repeat-y; : black; We hebben nu twee kolommen met in de linkerkolom een achtergrondkleur die over het gehele venster van boven naar beneden loopt (afbeelding 15.15). Het doel is dus bereikt. Deze techniek wordt in het Engels faux column (nepkolom) genoemd. Afbeelding Twee kolommen gemaakt via de methode faux column.

5 Oefening 15.6 Twee kolommen Maak een webpagina met twee kolommen, waarbij de kolom met hyperlinks niet aan de linkerkant zit, maar rechts. De webpagina die in deze paragraaf is gemaakt, is inhoudelijk erg simpel. Er kan nog wel het een en ander worden verfraaid. Zo kan de navigatie mooier worden uitgevoerd, maar daarvan is in hoofdstuk 12 een voorbeeld gegeven. Aan de pagina kunnen kleuren, borders en afbeeldingen worden toegevoegd, maar in dit hoofdstuk doen we dat verder niet. We kijken alleen nog naar een kop- en een voetgedeelte Kop erbij In de voorgaande paragraaf hebben we met vallen en opstaan een lay-out gemaakt met twee kolommen. Soms is boven de twee kolommen een kop gewenst die over de hele breedte loopt. Als voorbeeld houden we het eenvoudig: een tekst op een groene achtergrond aan de bovenzijde van het scherm. Aan de html-pagina voegen we de volgende regels toe, vlak na de <body>-tag en voor de navigatie-div: C <div id= kop > beatlesgeruchtenmachine </div> <!-- kop --> Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id kop: C #kop { background : green; color : #fdba79; /* oranje */ font-size : 300%; font-variant : small-caps; text-align : center; De kop krijgt een groene achtergrond met grote oranje letters. De tekst komt in kleinkapitaal en wordt gecentreerd. In afbeelding ziet u hoe de pagina eruitziet met de kop erboven.

6 HTML EN CSS de basis Afbeelding Kop boven de kolommen. Oefening 15.7 Kop over de volle breedte Maak op de webpagina met twee kolommen uit oefening 15.6 een kop over beide kolommen. De kop moet tegen de rand van het venster aanzitten; er mag geen stukje van de achtergrond meer te zien zijn tussen de rand van het browservenster en de kop Voetgedeelte Op bijna dezelfde manier als een kop boven de twee kolommen is het mogelijk een voetgedeelte onder de kolommen te maken. Er is slechts een extra puntje waar we rekening mee moeten houden. Een van de twee kolommen is via een float geplaatst op de pagina en floats worden uit de normale opbouw van de pagina verwijderd. Daarom is het verstandig om bij een voetgedeelte de declaratie clear: both op te nemen. Zo komt het voetgedeelte altijd na het zwevende div-element. In dit geval is de linkerkolom, die zwevend is, korter dan de kolom met de tekst en gaat het ook zonder clear goed, maar u weet niet altijd zeker welke kolom het langst is en dan kunt u beter het zekere voor het onzekere nemen. Aan de html-pagina voegen we de volgende regels toe, vlak voor de sluittag </body>: C <div id= voet > Bron: </div> <!-- voet --> Aan het stijlblad voegen we de vormgeving toe van de nieuw toegevoegde div met de id voet:

7 C #voet { background : green; clear : both; /* altijd onder zwevende elementen */ color : #fdba79; /* oranje */ font-size : 90%; padding :.2em; De voet krijgt hetzelfde groen als de kop en een bronvermelding in kleine, oranje letters (zie afbeelding 15.17). Afbeelding Voetgedeelte onder de kolommen. Oefening 15.8 Voetgedeelte over de volle breedte Maak op de webpagina uit de vorige oefening een voetgedeelte over beide kolommen. DRIE KOLOMMEN Een webpagina met drie kolommen is een variatie op het voorbeeld van dit hoofdstuk, maar met een aantal extra uitdagingen. Als u inventief en creatief te werk gaat kunt u met de mogelijkheden die u in dit boek zijn aangeboden websites maken die er aantrekkelijk uitzien.

Inhalen les 7 (versie B)

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

Nadere informatie

WEBSITE-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

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

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

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

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

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

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

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

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

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

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

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

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

XHTML en CSS. Deel 2. januari 2008 4-9-2008. Lyceum Sancta Maria. Ruud Koortens Frans Peeters XHTML en CSS Deel 2 Ruud Koortens Frans Peeters januari 2008 4-9-2008 Lyceum Sancta Maria 1 2 Inhoudsopgave 1.1.1. Positionering, absoluut en relatief... 2 1.1.2. Float en clear... 3 1.1.3. Float en clear

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

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

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

Nadere informatie

Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.

Om het Elektronica thema te installeren gaat u naar Theme Store in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden. Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in

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

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

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

Extra: Hoe u uw website met HTML kunt verbeteren

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

Nadere informatie

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

I'VE GOT EM FRONTEND DEVELOPMENT LES 3

I'VE GOT EM FRONTEND DEVELOPMENT LES 3 I'VE GOT EM FRONTEND DEVELOPMENT LES 3 VORIGE WEEK CSS bling Selectors deel 1 Even heel kort samenvatten waar we het ook al weer over hebben gehad vorige week. Niet te lang bij stilstaan want er is heel

Nadere informatie

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013

Zelf een eenvoudige website opzetten. Jorrit Groenevelt & Arjan Kraak Juni 2013 Zelf een eenvoudige website opzetten Jorrit Groenevelt & Arjan Kraak Juni 2013 1 Inleiding/Doel Een onmisbaar onderdeel van het starten van een bedrijf is het opzetten van een website. Een onderneming

Nadere informatie

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

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

Nadere informatie

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

Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn

Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn Zelf aanpassingen maken in de overige lay-out die niet vanuit het programma OFB Webbeheer mogelijk zijn Versie: december 2009 De OFB Webshop / website kenmerkt zich door de eenvoudige en efficiënte opzet

Nadere informatie

Inhoud leereenheid 3 CSS. Introductie 65. Leerkern 66. Terugkoppeling 91. Uitwerking van de opgaven 91

Inhoud leereenheid 3 CSS. Introductie 65. Leerkern 66. Terugkoppeling 91. Uitwerking van de opgaven 91 Inhoud leereenheid 3 CSS Introductie 65 Leerkern 66 1 HTML zonder CSS 66 1.1 Default styling 66 1.2 Block, inline, table 66 1.3 Reset CSS 67 2 Planning op papier 68 2.1 Responsive design 68 2.1.1 Eenheden

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

AutoTrack.nl. Handleiding Implementatie Voorraadlijst

AutoTrack.nl. Handleiding Implementatie Voorraadlijst AutoTrack.nl Handleiding Implementatie Voorraadlijst Basis Implementatie De nieuwe AutoTrack.nl Voorraadlijst kunt u (of uw webbouwer) implementeren door op uw website de URL die u van AutoTrack.nl heeft

Nadere informatie

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA

RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA RESPONSIVE DRUPAL THEMING MET SASS, COMPASS, SUSY EN AURORA DRUPAL TECH TALK 25 APRIL 2013 MARC VAN GEND TRIQUANTA AGENDA Het Doel #responsivemobilefirsthtml5buzzwordcompliant CSS preprocessing SASS Werken

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

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

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

Nieuwsbrief. Een webpagina bouwen. Piet Mondriaan. Highpotech IT

Nieuwsbrief. Een webpagina bouwen. Piet Mondriaan. Highpotech IT September 2009 Highpotech IT Nieuwsbrief Een webpagina bouwen Indit nummer Maak een webpagina met Gebruik CSS om deze op te maken Volg een proefles en zie hoe het werkt. Een website wordt weergegeven op

Nadere informatie

BIJLAGEN Begrippenlijst HTML

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

Nadere informatie

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

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

Nadere informatie

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

Trippeltrap Content Management System

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

Nadere informatie

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

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

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

Handleiding Mijneigenweb.nl

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

Nadere informatie

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

3 Website opbouwen: vervolg

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

Nadere informatie

Proefles informatica op het Alberdingk Thijm College. Het maken van een website met de tekstverwerker Kladblok of TextWrangler

Proefles informatica op het Alberdingk Thijm College. Het maken van een website met de tekstverwerker Kladblok of TextWrangler Proefles informatica op het Alberdingk Thijm College Het maken van een website met de tekstverwerker Kladblok of TextWrangler 1 Start het programma kladblok: (Start à Programma s à Bureau-accessoires à

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

Handleiding Net-Book voor webdesigners. Iedereen kan het!

Handleiding Net-Book voor webdesigners. Iedereen kan het! Handleiding Net-Book voor webdesigners Iedereen kan het! Colofon Colofon Leverancier: Become-IT Herderlaan 8 3851 BD ERMELO Telefoon: 0341-470068 Internet: http://www.become-it.nl Ondersteuning: Per e-mail:

Nadere informatie

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

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

Nadere informatie

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

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders

Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders Responsive Design Werkwijze en aanlevering Responsive Design Mach3Builders Introductie Door de explosieve stijging van het aantal soorten devices waarop websites bekeken kan worden, is het ontwerpen van

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

Inhoud. Installatie. Functies

Inhoud. Installatie. Functies Inhoud Installatie Functies Instellingen Achtergrond Blokken, knoppen Korting Footer Header, left column Main navigation Modules Price categories, Producten Text Contact 3 4 5 5 6 7 8 9 10 11 12 13 14

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

Leerlingdossier & handelingsplannen

Leerlingdossier & handelingsplannen 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

Algemene basis instructies

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

Nadere informatie