HTML en CSS gevorderd
|
|
- Hugo van der Berg
- 8 jaren geleden
- Aantal bezoeken:
Transcriptie
1 HTML en CSS gevorderd
2 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 css-bestanden! 9 Cool URLʼs met htaccess!
3 Inleiding HTML en CSS gevorderd Deze reader / handleiding gaat in op allerlei praktische situaties die zich voor doen bij het bouwen van een website. De volgende punten komen onderander aanbod: - afwijken de css-bestanden kiezen op basis van het soort browser (ook met PHP) - import mogelijkheden css-bestanden (link - structurele opbouw van een website - menu s met puur een anker - menu s met isset (php) - div s inhoud bepalen door een menu-keuze - dynamische menu s met uitsluitend html en css (zonder javascripting) - cool urls /.htaccess Voorkennis Ervaring hebben met inzicht in het volgende moeten hebben: HTML-basis CSS-basis basis PHP-scripting bij enkele php uitwerkingen is de volgende voorkennis ook nodig: Gebruik en installatie van een webservers (bijv: Apache als web-server in: XAMPP of MAMP)
4 Opbouw webpage en css Hieronder wordt een basis-structuur weergegeven van een webpage waarin div s zijn gebruikt. Een koppeling met een css-bestand bepaald de opmaak van verschillende tags en positionering van de div s in de webpage. Er is gebruik gemaakt van php om de juiste contect-webpages te tonen in een daarvoor bestemde div met een ID content. Voorbeeld php-homepage: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//NL"> <html> <head>! <title>k64 applying knowledge</title>! <meta http-equiv="content-type" content="text/html; charset=utf-8" />! <META NAME="author"! LANG="nl" CONTENT="kerssies64.net">! <META NAME="copyright"! LANG="nl" CONTENT=" 2011 under GPL">! <META NAME="description"LANG="nl" CONTENT="!..:: kerssies64.net applying knowledge ::.. website beschrijving">!!! <META NAME="keywords" LANG="nl" CONTENT="zoekwoorden >! <link rel="stylesheet" href="sheet/sheet.css" type="text/css" media="screen" />! <LINK REL="shortcut icon" HREF="afb/favicon.ico"> </head> <body class="site"> <center>! <div ID="container">! <div ID="kop">!! <h1>kerssies64.net</h1>!! <!--<IMG ID="kopIMG" src="afb/head_img.png">-->!! <div ID="menu">!!! <a href="index.php?menu=0">home</a>!!! <a href="index.php?menu=1">menu1</a>!!! <a href="index.php?menu=2">menu2</a>!! </div>! </div>! <div ID="content">!! if ($_GET[menu] == "0" $_GET[menu] == "")!! {echo 'include "pages/home.html" }!!!! elseif ($_GET[menu] == "1" )!! {echo 'include "pages/content1.html" }!! elseif ($_GET[menu] == "2 )!! {echo 'include "pages/content1.html" }! </div>! <div ID="copy">!! 2001 by kerssies64.net! </div> </center> </div> </body> </html>
5 Voorbeeld css: body.site!! {!! margin: 0px;!! background-color: black; body! {!! margin: 0px;!! font-size:0.85em;!! font-family:helvetica;! } #container! {!! min-width: 900px;! max-width: 75%;!! height: 100%;!! margin: auto;!! font-family: "Bodoni MT";! background-image: url(../afb/container.jpg); #kop!! {!! margin: 0px;!! width: 100%;!! height: 120px;!! position: relative;!! top: 0px; left: 0px; /* Opmerking */ #menu!! {!! padding: 0px;!! width: 900px;! } #content!! {!! max-width: 90%;! min-width: 600px;!! min-height: 720px;! max-heigth: 95%;!! position: relative;!! top: 10px;!! left: 0px;! border: 0px;!! //background-color:#666666; vervolg op de volgende bladzijde
6 #content! {! overflow: auto;! max-width: 95%;! min-width: 780px;!! min-height: 630px;! max-height: 80%;! border:0px;! text-align: left;! background-color: #FFFFFF;! font-family: sans-serif, Helvetica;! } iframe {!! max-width: 95%;! min-width: 780px;!! min-height: 630px;!! max-height: 80%;! border:0px;! background-color:#cccccc;! } #logos!! {!! position: relative;!! top: -80px;!! left: 200px;!! width: 100px;!! height: 200px; #copy!! {!! margin-left:60%;! margin-bottom:10px;!! height: 20px;!! color: #62ADFF;!! font-family: "Impact";!! z-index: 1;!! h1!! {!! text-align: center;!! color: #62ADFF;!! font-family: "Impact";!! font-weight: bolder;! font-size: xx-large; h2, h3, h4 {! color: #008080;!! font-family: "Silom";! } table!! {!! margin: auto;
7 vervolg op de volgende bladzijde. a!! {!! text-decoration: none;!! color:#008080; a:visited!! {!! text-decoration: none;!! color:#008080; a:active!! {!! text-decoration: none;!! color:grey; a:hover!! {!! text-decoration: none;!! color:#008080;!! background-color:silver;.bg_cel! {!! background-color:#00ffcc; Door gebruik te maken van tab s en wit regels wordt een html- en css-document overzichtelijker en beter te lezen. Maak hiervan gebruik. Hieronder wordt de zelfde image-tag met attributen weergegeven. Door tab s en nieuwe regels per attribuut te gebruiken wordt het geheel overzichtelijker. <IMG SRC="afbeelding.jpg" ALT="afbeelding" WIDTH="120" HEIGHT="140" BORDER="1"> <IMG!! SRC!! ="afbeelding.jpg"!! ALT!! ="afbeelding"!! WIDTH! ="120"!! HEIGHT!="140"!! BORDER! ="1" >
8 DIVʼs of iframes? Om te kunnen kiezen tussen iframes of DIV s is het belangrijk om te weten wat het verschil is. Het verschil is dat een DIV een container voor inhoud is en een iframe is een window. Echter worden ze steeds minder iframes gebruikt. Dit omdat zoekmachines minder goed de content in hun index kunnen opslaan wanneer het in een iframe zit. Ook heb je al snel last van extra scrollbars. Een groot voordeel van DIV s ligt hem in de vele mogelijkheden in opmaak, door DIV s met CSS te combineren. Eigen icoon in de adresbalk van de browser Elke browser geeft een klein icoontje in de adresbalk van de browser waar een URL wordt ingetypt. Dit icoon is naar eigen ontwerp aan te passen. In de header komt de volgende regel te staan:! <LINK REL="shortcut icon" HREF="afb/favicon.ico"> Hest icoon-bestandje favoicon.ico kan onderandere gemaakt worden op: Web-editors Er zijn veel verschillende web-editors te krijgen. Buiten persoonlijke voorkeuren om volgen hieronder enkele aandachtspunten bij het kiezen van de juiste editor. regelnummers delen code zijn te verbergen op tag-basis (plus- en min-icoon) instelbare kleuren voor verschillende talen intellisence (automatisch aanvullen tag s en attributen tijdens het typen) text-based, geen drag-and-drop. (automatische gegenereerde code maakt document onoverzichtelijk) preview resultaat bibliotheken met code remote bewerken code project-beheer
9 Koppelen van css-bestanden Door de opmaak te scheiden van de indeling en inhoud wordt de code overzichtelijker en makkelijker te beheren. Het is dus wijs om alle inline opmaak in een apart css-bestand te zetten. Wel moet er in elk html-bestand, waarop deze opmaak van toepassing is, een koppeling gemaakt worden naar het css-bestand. Voorbeeld 1: De meest gebruikte manier om een css-bestand te koppelen staat hieronder weergegeven. <head>! <link href="stijl/common.css" rel="stylesheet" type="text/css" /> </head> Voorbeeld 2: Daarnaast kan het het ook met de onderstaande manier. Ook kan deze in een ander css-bestand gebruikt worden. <head> <STYLE TYPE="text/css">! url("stijl/common.css");! --> </STYLE> </head> Browser afhankelijke css-bestanden Bij het ontwikkelen van een website zou het vanzelfsprekend zijn een website-ontwerp in alle browers het zelfde resultaat geeft. Niets is minder waard. Herlaas worden niet alle css-mogelijkheden in alle browsers ondersteund of op dezelfde manier geïnterpreteerd. Grof gezegd zal een website die ontwikkeld is voor Mozilla FireFox ook op Chrome en Safari de zelfde look en feel hebben. MicroSoft heeft zo zijn eigen cssinterpretatie, waardoor de meeste sites minimaal twee css- bestanden heeft om de opmaak in alle grote browsers gelijk te trekken. Hieronder worden twee voorbeelden gegeven om automatisch afwijkende css- bestanden te kiezen op basis van browser die een eindgebruiker gebruikt
10 Voorbeeld 1: Een keuze css- bestand met uitzonderingen voor IE6 en IE7 kan worden gedaan in e header. <head> <link href="stijl/common.css"!rel="stylesheet" type="text/css" /> <!--[if lte IE 6]>! <link href="ie6.css"!! rel="stylesheet" type="text/css"> <!--[if lte IE 7]>! <link href="ie7.css"!! rel="stylesheet" type="text/css"> <![endif]--> </head> Voorbeeld 2: Een css-bestand kiezen kan ook op basis van de http-agent informatie. De selectie is hier gemaakt met php. <head> <STYLE TYPE="text/css">! <?php! /*! browser bepalen, IE krijt een ander css-bestand dan de rest */! if (substr_count($_server[http_user_agent],"msie") == 1)!! {!! echo url("stijl/site-msie.css"); -->';! else!! {!! echo url("stijl/site.css"); -->';!?> </STYLE> </head>
11 Cool URLʼs met htaccess URL s in de adresbalk van de browser zijn soms nog al lang en daarbij onlogisch. Ook geef je mappen-structuur van de website prijs aan de bezoekers. Wat er in feite gebeurt is dat een URL een label bevat die wordt weergegeven in de URL-balk, echter door een conversie weet de browser waar het label in werkelijkheid naar toe gelinkt is. In een webpage kan de volgende link voor komen: <a href="home">home kerssies64.net</a> In de root van de website staat een bestand met de naam.htaccess (punt htacces). Let op dit is een verborgenbestand. Het kan zijn dat het niet zichtbaar is na het aanmaken. Zorg ervoor dat de webserver verborgen (hidden) bestanden weergeeft, dit toch weergeven zal per operating-systeem verschillen. voorbeeld:.htaccess De bovenstaande URL zal bij aanklikken door de eerste RewriteRule worden omgezet naar index.php Er staan meerdere voorbeelden van herschrijf regels naar verschillende locaties. RewriteEngine On ### menu home RewriteRule ^/?home$ index.php?menu=0 ### menu1 RewriteRule ^/?kop1$ index.php?menu=1 RewriteRule ^/?kop1_1$ index.php?menu=2&iframe=folder/page.html RewriteRule ^/?kop1_2$ index.php?menu=2&iframe= RewriteRule ^/?kop1_3$ index.php?menu=2&iframe= RewriteRule ^/?kop1_4$ index.php?menu=2&iframe=map/folder/bestand.pdf ## menu2 RewriteRule ^/?kop2_1$ index.php?menu=2&iframe=folder/page.php RewriteRule ^/?kop2_2$ index.php?menu=2&iframe=folder/page2.php RewriteRule ^/?kop2_3$ index.php?menu=2&iframe= RewriteRule ^/?kop1_4$ index.php?menu=2&iframe=map/folder/bestand.pdf ## beheer link RewriteRule ^/?beheer$ index.php?menu=
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 informatie1. 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 informatieWEBSITE-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 informatieWebsitecursus 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 informatieBasis-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 informatieVersie: 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 informatieInhalen 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 informatieInternet 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 informatieVoor 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 informatieLES 6 HTML, STYLE SHEETS EN DE AFBOUW VAN DE WEBSITE
LES 6 HTML, STYLE SHEETS EN DE AFBOUW VAN DE WEBSITE Eerst wat theorie. Kijkt u eens naar de links. De link Bolnes eerst zonder lijntje onder, en dan met een lijntje boven. Dat resultaat is verkregen door
Nadere informatieTechnische werking whitelabel reviewmodule
Na integratie van de whitelabel reviewmodule van Kieskeurig.nl kunnen bezoekers via jouw website reviews op Kieskeurig.nl en je eigen website achterlaten. In dit document vind je meer informatie over de
Nadere informatieVoor 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 informatieInstellen en werken met Templates
Instellen en werken met Templates Pagina 2 van 8 Nationaal Golfpakket F Inhoudsopgave D Instellingen in het golfpakket...5 Aanmaken Templates... 5 Instellen van de templates in het golfpakket... 6 Links
Nadere informatieMin-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 informatieHTML. Dennis van Wakeren. CC Naamsvermelding 3.0 Nederland licentie. http://maken.wikiwijs.nl/68933
Auteur Laatst gewijzigd Licentie Webadres Dennis van Wakeren 14 December 2015 CC Naamsvermelding 3.0 Nederland licentie http://maken.wikiwijs.nl/68933 Dit lesmateriaal is gemaakt met Wikiwijsleermiddelenplein.
Nadere informatieZelf 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 informatieRESPONSIVE 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 informatieCascading 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
Nadere informatieVoorbeeld: 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 informatieVoor 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 informatieMet 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 informatieWat 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 informatieAgenda HTML. Wat is HTML? Hoe ziet een HTML-file eruit? Waarom HTML leren? Waarin maak je een HTML-bestand?
HTML HyperText Markup Language Aniel Bhulai E-mail: abhulai@cs.vu.nl Agenda HTML algemeen Aantal tags HTML met stijl (CSS, DHTML) Demo Vragen vrije Univers iteit amsterdam 1 2 Opmaaktaal Letter Kleur Plaatjes
Nadere informatiePro 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 informatieWelkom 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 informatieMarkup: CSS en HTML5. Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen
Markup: CSS en HTML5 Hoorcollege Webdesign 5 16 mei 2014 Christof van Nimwegen 1 CSS: Waarom ook alweer. HTML was bedoeld voor documentstructuur (text met verschillende levels in headings en body text)
Nadere informatieHandleiding - Styling van OFB Web 4.0
Handleiding - Styling van OFB Web 4.0 Versie: 1.0 Inleiding OFB Web is opgebouwd uit controls. De plaatsing en positionering van de controls wordt vastgelegd in de page.aspx. Dit bestand kan gezien worden
Nadere informatieprogrammeren in HTML (5) CSS (3) JavaScript
programmeren in HTML (5) CSS (3) JavaScript Op dit lesmateriaal is een Creative Commons licentie van toepassing. 2010 Remie remie.woudt@gmail.com Woudt Inhoudsopgave 1 HTML...1 1.1 Wat heb je nodig?...1
Nadere informatieLaatst bijgewerkt: 22-1-2016. Versie 1.0
Laatst bijgewerkt: 22-1-2016 Versie 1.0 INHOUD DEEL 1: VOORBEREIDING 1. Inleiding 2. What the f@*! is Bootstrap?! 3. Bootstrap importeren DEEL 2: PROGRAMMEREN! 4. Ontwerpen 5. De carousel, niet die van
Nadere informatieEen 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 informatieGebruikershandleiding 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
Nadere informatieAPEX Templates. OGH APEX dag 30 maart. Art Melssen. 31 maart 2010
APEX Templates OGH APEX dag 30 maart Art Melssen Introductie Over de spreker 4 jaar APEX ervaring / 7 jaar Oracle 10 jaar web technologie ervaring APEX trajecten o.a. bij Centraal Boekhuis en eboekhuis
Nadere informatieWerken 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 informatieHand-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 informatie3 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 informatieAutoTrack.nl. CSS Documentatie Voorraadlijst
AutoTrack.nl CSS Documentatie Voorraadlijst CSS Documentatie Voorraadlijst CSS documentatie Voorraadlijst Bij uw AutoTrack.nl voorraadlijst is het mogelijk om de standaardopmaak aan te passen naar uw wens,
Nadere informatieMARTINA. Wist je dat..? Truckjes en weetjes in Drupal 7. 6. Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer )
MARTINA Wist je dat..? Truckjes en weetjes in Drupal 7 Inhoud: 1. Inlogknop 2. Aangepast beheerdermenu 3. Actieve pagina in de broodkruimel 4. Afbeelding op zoekknop (en geen tekst) [CSS] 5. Logo met link
Nadere informatieHand-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 informatieHTML 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 informatieHand-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 informatieHTML & 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:
Nadere informatieAutoTrack.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 informatieGoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps GoogleMapsGoogleMapsGoogleMaps
Google Maps INHOUDSOPGAVE Inleiding.. 3 Een Google Map maken.. 4 Een eigen adres opgeven 7 Inzoomen op je eigenkaart. 8 Satellietbeeld op je eigenkaart. 10 Markers plaatsen. 13 Tekstballon plaatsen.. 15
Nadere informatiePro 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 informatieHTML 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 informatieCSS. CSS - Inleiding. Scheiding van inhoud en vorm
CSS opmaken met Cascading stylesheets inleiding style sheet declaratie stijl declaratie stijl eigenschappen commentaar
Nadere informatieJarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber. Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow?
Jarno Verhoogt 21 mei 2014 Stud. Nr. 500684953 Docent: Joost Faber Deeltoets 2: Hoe maak je met javascript een eenvoudige slideshow? Inleiding Dit is een eenvoudige handleiding om in javascript een simpele
Nadere informatieFrontend 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 informatiePublicatie 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 informatieHANDLEIDINGEN Tips en tricks ETZ Leerplein
HANDLEIDINGEN Tips en tricks ETZ Leerplein IMAGE SLIDER OVER DE IMAGE SLIDER De imageslider (lees: slider), zoals deze ontwikkelt is binnen de editor van Pulseweb maakt het mogelijk om meerdere afbeeldingen
Nadere informatieWebsites 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 informatieOplossingen overzicht PHP. Oplossing KPN opgave, zonder testen van POST
Oplossingen overzicht PHP Oplossing KPN opgave, zonder testen van POST internetminuten in welke categorie val ik?
Nadere informatieFFO 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
Nadere informatieCluster 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 informatieGegevens uit een database tonen
Gegevens uit een database tonen In een eerdere handleiding heb ik jullie laten zien hoe je met behulp van MySQL en phpmyadmin een database kunt opzetten. We hebben toen een database aangemaakt en gevuld
Nadere informatieOm 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 informatieAuteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5. Handleiding Beheer Standaard Website
Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5 Handleiding Beheer Standaard Versie Datum Opmerkingen 0.1.2 29-01-09 Note opgenomen op pagina 7 over subpagina's en weergave in menu structuur. 0.1.3 02-02-09
Nadere informatieDe 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 informatieContactformulier...74 Gebruikers...77 Login...78 Registratie...79 Gebruikersnaam vergeten en wachtwoord vergeten...81 Module stijlen bepalen en
Inhoud Inhoud...1 De Basis Template bestanden...3 Basis Template Joomla 3 bestanden...4 templatedetails.xml...6 index.php...8 ...11 Wat te wijzigen?...14 Melding maken voor IE6 en IE7...14 Lettertype,
Nadere informatieXHTML 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 informatieMODULE 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 informatieSoftware 1. Basis HTML. bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1
Software 1 Basis HTML bachelor grafische en digitale media cross-media ontwerp & grafimediatechnologie academiejaar 2009-2010 semester 1 Alain Simons alain.simons@artesis.be Basis HTML 1. Introductie 2.
Nadere informatieWebsite beoordeling larivieracasino.org
Website beoordeling larivieracasino.org Gegenereerd op Oktober 30 2018 02:00 AM De score is 37/100 SEO Content Title Riviera Casino : Casino La Riviera Online Lengte : 41 Perfect, uw title tag bevat tussen
Nadere informatieVersie 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 informatieDynamische websites met PHP (basis) Karel Nijs 2010/09
Dynamische websites met PHP (basis) Karel Nijs 2010/09 Leswijze Eerst wat theorie Begeleid met (korte) oefeningen Editor = UltraEdit Geen DreamWeaver Browser = Internet Explorer Vereiste voorkennis: (X)HTML
Nadere informatieTemplates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website Wat we gaan doen 1. Wie ben ik? 2. Voor- en nadelen bestaande templates en eigen templates 3. Eigen template op basis
Nadere informatieA 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 informatieA 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 informatieONTWERPEN 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 informatieEr 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 informatieSoftware 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 informatieWeb building gevorderden: CSS & JavaScript. Karel Nijs 2008/11
Web building gevorderden: CSS & JavaScript Karel Nijs 2008/11 Leswijze Eerst wat theorie Begeleid met (korte) oefeningen Editor = Geen DreamWeaver Browser = Internet Explorer Online hulp: http://htmlhelp.com/reference/html40/
Nadere informatieHandleiding 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 informatieLab Webdesign: Javascript 11 februari 2008
H2: BASISBEGRIPPEN In dit hoofdstuk zullen er enkele basisbegrippen worden behandelt PLAATSING VAN JAVASCRIPT-CODE DE SCRIPT-TAG De script-tag geeft aan dat er gebruik zal worden gemaakt van een scripttaal.
Nadere informatieGlobale kennismaking
Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina
Nadere informatieJoomla! vs Facebook (en andere Social Media)
Joomla! vs Facebook (en andere Social Media) Arnold Bergshoeff facebook.com/verfrissendmarketing twitter.com/verfrissendmkt Welke kant op koppelen? Website Content of Functionaliteit naar Facebook Content
Nadere informatieWebsitecursus 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 informatieWebsite beoordeling zonetelechargement.com
Website beoordeling zonetelechargement.com Gegenereerd op Juli 23 2015 10:12 AM De score is 47/100 SEO Content Title zone-telechargement.com 520: Web server is returning an unknown error Lengte : 71 Let
Nadere informatieJe website (nog beter) beveiligen met HTTP-Security Headers
Je website (nog beter) beveiligen met HTTP-Security Headers Wat is HTTP? Het HTTP (Hypertext Transfer Protocol) protocol is een vrij eenvoudig, tekst gebaseerd, protocol. Dit HTTP protocol regelt de communicatie
Nadere informatieWebsite rapport zazoutotaal.nl
Website rapport zazoutotaal.nl ZazouTotaal Full Service Mediabureau Webdesign ZazouTotaal Full Service Mediabureau. De Webdesigner met 10 jaar ervaring. Voor betaalbare websites en webwinkels. Voor alle
Nadere informatieWebsite beoordeling monitoringhardware.com.websiteoutlook.co
Website beoordeling monitoringhardware.com.websiteoutlook.co m Gegenereerd op Juli 19 2019 10:31 AM De score is 59/100 SEO Content Title Monitoring-hardware : HOMEPAGE Didactum knowledge base Website stats
Nadere informatie6. 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 informatieWebsite beoordeling windowsrepublic.com.au
Website beoordeling windowsrepublic.com.au Gegenereerd op Maart 28 2019 14:39 PM De score is 48/100 SEO Content Title Windows Republic - upvc windows manufacturer and supplier in Melbourne Lengte : 70
Nadere informatieAgenda. 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?
Nadere informatieInhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op
1 Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP.... 8 Joomla installeren op XAMPP... 15 Handige links... 16 2 Disclaimer Bij de samenstelling
Nadere informatieTemplate 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 informatieEen 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 informatieHighpotech 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 informatieLesbrief Les 2 Basis CSS
Lesbrief Les 2 Basis CSS Jullie hebben net de basis uitleg van CSS gehad. Om deze uitleg wat te laten bezinken gaan we aan de slag met de oefenopdracht voor deze week. Lees de opdracht goed door zodat
Nadere informatieWebsite beoordeling proplantdesign.com
Website beoordeling proplantdesign.com Gegenereerd op Januari 31 2019 04:42 AM De score is 62/100 SEO Content Title Process Plant Design Proplant Design Lengte : 38 Perfect, uw title tag bevat tussen de
Nadere informatieDe broncode van een Hot-Potatoes oefening. De belangrijkste wijzigingen en aanpassingen.
De broncode van een Hot-Potatoes oefening. De belangrijkste wijzigingen en aanpassingen. Alhoewel er complexe methodes zijn om een hot-potatoes oefening helemaal naar je hand te zetten (zie hacking in
Nadere informatieInteractief 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 informatieHandleiding Wordpress
Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde
Nadere informatieHandleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp
Handleiding: OpenEmm nieuwsbrief manager Diergaarde Blijdorp Algemeen Deze handleiding beschrijft de werking van OpenEmm gekoppeld aan WordPress. Ondanks het feit dat binnen OpenEmm nieuwsbrieven opgemaakt
Nadere informatieWebsite beoordeling megabikestuttgart.de
Website beoordeling megabikestuttgart.de Gegenereerd op August 03 2015 14:46 PM De score is 57/100 SEO Content Title MEGA bike Radsport Stuttgart Lengte : 28 Perfect, uw title tag bevat tussen de 10 en
Nadere informatieLES 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 informatieSEO advies plan. Tim Pieters M41T
SEO advies plan Tim Pieters M41T Inhoudsopgave -Inleiding -Stand van zaken -Optimalisatie -Resultaten -Toekomstige aanbevelingen Inleiding De website die zal worden behandeld in dit SEO plan is www.tp-media.design.
Nadere informatieToetsmatrijs 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 informatieEen 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