0
Erkend door de 
Vlaamse regering 
Met de steun van 
HTML & CSS 
hansrossel@koba.be 
www.koba.be
Erkend door de 
Vlaamse regering 
Met de steun van 
Geschiedenis
PPrree--HHiissttoorriiee 
 1960 IBM ontwierp GML (interne publicaties) 
◦ Generalized Markup Language 
 1986 SGML wordt ...
HHiissttoorriiee 
 1993: img tag voorgesteld: 
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html 
 Netscape...
RReecceennttee ggeesscchhiieeddeenniiss 
 2004: Web Standards: 
http://www.webstandards.org en 
http://www.csszengarden.c...
TTee oonntthhoouuddeenn 
 HTML : (Hyper Text Markup Language) 
bepaalt de structuur van een webpagina 
 CSS : (Cascading...
Erkend door de 
Vlaamse regering 
Met de steun van 
Planning 
website project
PPrroojjeecctt ssttaappppeenn 
Analyse fase 
 Doelen, doelgroep (user personas), planning, team 
 Keuze domeinnaam en ho...
PPrroojjeecctt ssttaappppeenn 
Ontwikkelingsfase 
 Grafsch ontwerp (photoshop) 
 Xhtml/css prototype 
 Programmatie CMS...
Erkend door de 
Vlaamse regering 
Met de steun van 
Domeinnaam
DDoommeeiinnnnaaaamm kkiieezzeenn 
 Naam kiezen: 
◦ Origineel en kort 
◦ Sleutelwoorden ivm SEO 
◦ Beschrijvend of uniek:...
DDoommeeiinnnnaaaamm bbeesscchhiikkbbaaaarr?? 
www.dns.be Voor .be domeinen 
Voor .com, .net, .org 
domeinnamen 
http://wh...
DDoommeeiinn aaaannvvrraaggeenn && iinnsstteelllleenn 
 Bij één van de vele agentschappen 
 Uiteenlopende prijs, service...
Erkend door de 
Vlaamse regering 
Met de steun van 
Hosting - Webruimte
k Waar koommeenn ddee ppaaggiinnaa’’ss tteerreecchhtt?? 
Mogelijkheden : 
 Gratis webruimte vb 
http://www.hostinger.nl 
...
BBeellaannggrriijjkkee eelleemmeenntteenn 
 Geografsche locatie server? 
 Bandbreedte? 
 Php/mysql? 
 Opslagruimte? 
...
CCoonnttrroolleeppaanneeeell 
 Cpanel 
 Plesk 
Webmin 
 Open Shift 
 Eigen controlepaneel van het 
hostingbedrijf
Erkend door de 
Vlaamse regering 
Met de steun van 
HTML & CSS 
De taal van webpagina’s
WWaatt iiss HHTTMMLL?? 
 HTML : Hyper Text Markup Language 
 Hypertext : klikbare verwijzingen binnen de 
pagina’s die v...
HHttmmll ppaaggiinnaa
EElleemmeenntteenn ((TTaaggss)) 
 Tags : meestal in paren 
 Bijvoorbeeld : 
<h1>Welkom</h1> 
 <h1> duidt op het starten...
HHTTMMLL Attttrriibbuutteenn 
 Attributen bepalen de tags preciezer 
 Bijvoorbeeld : 
<h1 align=“center”>Deze tekst staa...
CCSSSS ttaagg ooppmmaaaakk vvoooorrbbeeeelldd 
 Voorbeeld : 
h1 {text-align: center; color:blue;} 
 h1 : Selector : de g...
HHttmmll ++ ccssss
Basis elementen webpagina 
Erkend door de 
Vlaamse regering 
Met de steun van
IInnddeexx.hhttmmll 
 De structuur van een webpagina : 
<!DOCTYPE html> 
<html lang="nl"> 
<head> 
<title>Interne titel</...
Erkend door de 
Vlaamse regering 
Met de steun van 
Doctype
DDOOCCTTYYPPEE 
1. Html 4.01 of xhtml 1.0 
◦ http://www.w3.org/tr/xhtml1/ 
◦ http://www.w3schools.com/xhtml/xhtml_html.asp...
Erkend door de 
Vlaamse regering 
Met de steun van 
Tekst invoegen
TTeekksstteenn 
 Niet opgemaakt 
◦ Via notepad opmaak verwijderen 
 Mooi opgemaakte teksten omzetten 
naar .pdf formaat:...
Erkend door de 
Vlaamse regering 
Met de steun van 
Body instellingen
KKlleeuurreenn 
 RGB – monitor : Red Green Blue 
 FF 00 00 : 
volledig rood, geen groen, geen blauw 
00 FF 00 : 
geen ro...
CCssss bbooddyy 
body { 
background-color: #404040; 
font-family: Verdana, Helvetica, sans-serif; 
font-size:12px; 
line-h...
CCssss hheeaaddeerrss 
h1 { 
color: #F2612A; 
/* color: #BC4819; */ 
font-size: 24px; 
font-family: Tahoma, Geneva, serif;...
Erkend door de 
Vlaamse regering 
Met de steun van 
Werkomgeving
WWeerrkkoommggeevviinngg 
Html Editors 
 Dreamweaver 
 Sublime text 
Firefox en plugins 
 https://getfrebug.com 
 http...
Erkend door de 
Vlaamse regering 
Met de steun van 
Links
HHyyppeerrlliinnkkss 
 HTML : Hyperlinks : klikbare delen van de 
pagina die naar andere pagina’s / 
onderdelen verwijzen...
LLiinnkkss 
 Structuur: <a href="http://www.handleidinghtml.nl">Handleiding 
HTML</a> 
 Absolute en relatieve links 
 A...
CCssss LLiinnkkss 
a:link, a:visited { 
text-decoration: none; 
color: #039; 
} 
a:hover { 
text-decoration: underline; 
b...
Erkend door de 
Vlaamse regering 
Met de steun van 
Afbeeldingen
GGrraaffsscchhee eelleemmeenntteenn :: eennkkeellee ttiippss 
 Resolutie : 72 dpi aanvaardbaar voor scherm 
 Grootte : 5...
GGrraaffsscchhee eelleemmeenntteenn 
 .jpg (Joint Photographics Expert Group) 
◦ Gecomprimeerd met verlies 
◦ Sterkte com...
FFoottoo''ss eenn llooggoo''ss 
 Foto's 
◦ Hoe groter formaat hoe beter 
◦ Verbeteren: contrast, niveaus, kleurdiepte 
◦ ...
Affbbeeeellddiinnggeenn 
 <img src=“logo.gif" width="105" height="125" 
border=“0” alt=“De post"> 
 img : Tag voor afbee...
CCoommbbiinnaattiiee hhyyppeerrlliinnkk aaffbbeeeellddiinngg 
 Afbeelding aanklikbaar maken : 
plaats de <img> tag tussen...
GGrraaffsscchhee eelleemmeenntteenn :: eeddiittoorrss 
 Foto's: Adobe Photoshop, Fireworks en vele 
andere bij digitale c...
Affbbeeeellddiinnggeenn vviinnddeenn 
• Professioneel: 
– http://www.istockphoto.com 
– http://www.shutterstock.com 
• Goo...
Affbbeeeellddiinnggeenn hhttmmll 
 <img src=“foto.jpg" width="140" 
height="100“ /> 
 Alt en title: accessibility 
 Lin...
CCssss aaffbbeeeellddiinnggeenn 
img { 
border: 0; 
/* lelijke blauwe linkrand weg */ 
margin: 0 0 10px 10px; 
/* marge st...
Verschillen html & xhtml stijl 
Erkend door de 
Vlaamse regering 
Met de steun van
VVeerrsscchhiilllleenn hhttmmll vvss xxhhttmmll 
In xhtml is DOCTYPE verplicht 
Alle elementen moeten gesloten worden 
◦ I...
HHttmmll vvss xxhhttmmll ((vveerrvvoollgg)) 
Attribuutwaarden moeten tussen aanhalingstekens 
◦ Incorrect: <td rowspan=3> ...
OOvveerrsscchhaakkeelleenn hhttmmll -->> xxhhttmmll 
 HTML Tidy 
◦ http://cgi.w3.org/cgi-bin/tidy: online 
◦ http://tidy....
Erkend door de 
Vlaamse regering 
Met de steun van 
Bestandsstructuur
BBeessttaannddssssttrruuccttuuuurr wweebbssiittee 
Mappen 
 Css 
 Javascript 
 Images 
Bestanden 
 Index.htm 
 404.ht...
Erkend door de 
Vlaamse regering 
Met de steun van 
Layout: 
Frames, Tabellen en CSS 
Een grove structuur 
voor de pagina
SScchheerrmmffoorrmmaatteenn 
 Standaard 1024x768 
◦ Favorieten open? 
◦ Bovenmenu aftrekken 
◦ Toolbar 
◦ Laptop widescr...
LLaayyoouutt mmeett FFrraammeess 
 Uitgevonden in 1996 door Netscape. 
 Het is sterk afgeraden frames te gebruiken 
◦ Fr...
HHttmmll ffrraammeess 
 <frameset cols="150,*"> 
 <frame name="links“ 
scrolling="no" noresize 
target="rboven" src="lin...
LLaayyoouutt mmeett TTaabbeelllleenn 
 Tabellen worden nog vaak gebruikt als 
basislayout voor webpagina's 
 Het W3C raa...
TTaabbeelllleenn 
<table width="93"> 
<tr> 
<td width="85">eerste rij</td> 
</tr> 
<tr> 
<td width="85">tweede rij</td> 
<...
LLaayyoouutt vviiaa ddiivv llaaggeenn 
 Cascading Style Sheets 
 Opmaak scheiden van inhoud 
 Precies positioneren van ...
VVaasstt--sstteelllliinnggeenn 
Hoe ziet de surfer mijn webpagina? 
 Grootte van het browserscherm 
◦ 800x600, 1024x768, ...
SSttrruuccttuuuurr:: LLaaggeenn mmaakkeenn 
<div id=“container”> 
<div id=“head”> 
</div> 
<div id=“content”> 
</div> 
<di...
CCeennttrreerreenn 11 kkoolloomm lliiqquuiidd 
Liquid layouts 
div#container{ 
margin-left: 10%; 
margin-right: 10%; 
}
11 KKoolloomm ggeecceennttrreeeerrdd 
CSS met auto margin: 
#container { 
width: 960px; 
margin: 0 auto; 
}
11 KKoolloomm ggeecceennttrreeeerrdd ((vveerrssiiee 22)) 
CSS met negatieve margin: 
#container { 
width:720px; 
position:...
22 KKoolloommmmeenn –– ffxxeedd –– xxhhttmmll 
<div id=“container"> 
<div id=“header”> 
</div> 
<div id=“content”> <!-- Vo...
22 KKoolloommmmeenn –– ffxxeedd –– ccssss 
#content { 
width:720px; 
foat:right; 
} 
#navigatie { 
width:180px; 
foat:left...
22 KKoolloommmmeenn ffxxeedd -- ppaaddddiinngg 
#navigatie { 
padding-top: 20px; 
padding-bottom: 20px; 
}
33 KKoolloommmmeenn ffxxeedd –– xxhhttmmll 
<div id=“content”> 
<div id=“hoofdcontent”> 
</div> 
<div id=“contentblok”> 
<...
33 KKoolloommmmeenn ffxxeedd –– ccssss 
#hoofdcontent { 
width: 320px; 
foat: left; 
} 
#contentblok { 
width:180px; 
foat...
33 KKoolloommmmeenn ffxxeedd –– ppaaddddiinngg 
#contentblok h1, #contentblok h2, #contentblok p { 
padding-left: 20px; //...
33 KKoolloommmmeenn lliiqquuiidd –– ccssss 
#container { 
width: 85%; 
margin: 0 auto; 
} 
#navigatie { 
width: 23%; 
foat...
33 KKoolloommmmeenn eellaassttiisscchh –– ccssss 
Default font-size = 16px 
10px = 62.5% van 16px 
body { 
font-size: 62.5...
33 KKoolloommmmeenn eellaassttiisscchh –– ccssss 
#container { 
width: 72em; 
margin: 0 auto; 
} 
#navigatie { 
width: 18e...
33 KKoolloommmmeenn eellaassttiisscchh –– ccssss 
#hoofdcontent { 
width: 32em; 
foat: left; 
} 
#contentblok { 
width: 18...
HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss 
#container { 
width: 72em; 
max-width: 100%; 
margin: 0 auto; 
} ...
HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss 
#hoofdcontent { 
width: 32em; 
max-width: 66%; 
foat: left; 
} 
#...
LLiiqquuiidd eenn eellaassttiisscchhee aaffbbeeeellddiinnggeenn 
#header { 
height: 171px; 
background: url(images/hoofdin...
HHeeaaddeerr aaffbbeeeellddiinngg aalltteerrnnaattiieeff 
#header { 
width: 100% 
overfow: hidden; 
} 
<div id=”header”> 
...
FFaauuxx CCoolluummnnss 
Het creëren van een kolom effect voor de navigatie. 
Gebaseerd op: 
http://alistapart.com/article...
Erkend door de 
Vlaamse regering 
Met de steun van 
Positioning
BBooxx mmooddeell
BBlloocckk lleevveell && IInnlliinnee eelleemmeennttss 
 Block-level elements: <p>, <h1>, <div> 
•Worden onder elkaar wee...
RReellaattiivvee ppoossiittiioonniinngg 
#box1 { 
position: relative; 
width:150px; 
height: 100px; 
background-color:red;...
RReellaattiivvee ppoossiittiioonniinngg 
Volgt normal fow van andere blokken en positie tov elkaar. 
Boxen staan gepositio...
Abbssoolluuttee ppoossiittiioonniinngg 
Element neemt geen plaats in. 
Andere elementen houden er geen rekening mee 
Zw...
FFiixxeedd ppoossiittiioonniinngg 
Gelijkaardig principe als absolute positioning 
Positie enkel tov venster zelf 
Usab...
FFllooaattiinngg 
Boxen kunnen links of rechts gefoat worden 
Als box waarin de 3 boxen vervat zit niet breed genoeg is ...
CClleeaarr 
Voorbeeld: Image met paragraaf ernaast en eronder. Vermijden van “wezen”. 
Clear: left, right, both, none: g...
PPrroobblleemmeenn mmeett ffooaatt 
Voorbeeld: Image met tekst rechts 
.news { 
background-color:gray; 
border:solid 1px ...
PPrroobblleemmeenn mmeett ffooaatt 
Oplossing 1: clear 
CSS: .clear { 
clear:both; 
} 
XHTML: <div class=”clear”></div> 
N...
Erkend door de 
Vlaamse regering 
Met de steun van 
Lijsten
SSttyylliinngg vvaann lliijjsstteenn 
ul { margin:0; 
padding:0; 
list-style-type:none; 
} 
li { background: url(bullet.gi...
Erkend door de 
Vlaamse regering 
Met de steun van 
Navigatie
OOppsstteelllleenn iinnhhoouuddssttaaffeell eenn mmeennuu 
 Usability: snel informatie vinden 
 Accessibility 
◦ Slechtz...
LLiissttaammaattiicc:: ccssss mmeennuu’’ss mmeett lliijjsstteenn 
Zie: 
http://css.maxdesign.com.au/listamatic/ 
Opmerking...
VVeerrttiikkaallee nnaavviiggaattiiee 
<ul> 
<li class="frst selected"><a href="home.htm">Home</a></li> 
<li><a href="abou...
CCSSSS SSpprriitteess 
http://www.alistapart.com/articles/sprites 
http://www.koba.be/lesimages/pixy-rollover.gif
VVeerrttiikkaallee nnaavviiggaattiiee ccssss 
ul { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
li { 
display: inl...
VVeerrttiikkaallee nnaavviiggaattiiee ccssss 
a:hover, .selected a { 
background-color: #369; 
background-position: right ...
HHoorriizzoonnttaallee nnaavviiggaattiiee hhttmmll 
<ul> 
<li class="frst"><a href="#">Home</a></li> 
<li><a href="#">Abou...
HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss 
ul { 
margin: 0; 
padding: 0; 
foat: left; 
width: 720px; 
background: #...
HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss 
ul a { 
padding: 0 2em; 
line-height: 2.1em; 
background: url(images/mai...
SSuucckkeerrffsshh ddrroopp ddoowwnn mmeennuu 
Zie: 
http://www.htmldog.com/articles/suckerfsh/dropdowns/ 
• Volledig css ...
Erkend door de 
Vlaamse regering 
Met de steun van 
<head>
<<hheeaadd>> 
Karakterset 
 <meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" /> 
Javascript 
 <s...
<<hheeaadd>> BBeevveeiilliiggiinngg 
<meta name="author" content="info@koba.be, www.koba.be" /> 
<meta http-equiv="imageto...
<<hheeaadd>> zzooeekkmmaacchhiinneess 
<title>titel</title> 
<meta name="keywords" 
content="keywords,keyword,other keywor...
<<hheeaadd>> mmeettaa ttaaggss 
<meta http-equiv=“refresh" 
content="4;url=http://www.domain.com/link.html” /> 
(of uur ve...
<<hheeaadd>> nnuutttteelloozzee mmeettaa ttaaggss 
<!-- HTML Comments (treated as HTML 
markup) --> : tenzij voor uitleg 
...
RRoobboottss.ttxxtt 
 User-agent: * 
 Disallow: /cgi-bin/ 
 Disallow: /javascript/ 
 Disallow: /Templates/ 
 Disallow...
<<hheeaadd>> ccssss 
<link href="../css/screen.css" rel="stylesheet" 
type="text/css" media="screen" /> 
<link href="../cs...
Erkend door de 
Vlaamse regering 
Met de steun van 
Verschillende 
Style sheets
VVoooorr pprriinntt eenn hhaannddhheelldd 
Invoegen externe style sheet: p127 
Printstyle: 
 zie cursus p209 
 Css discu...
SSttyylleesswwiittcchheerr 
http://www.alistapart.com/stories/alternate/ 
<script type="text/javascript" src="/scripts/sty...
CCoonnddiittiioonnaall ccoommmmeennttss vvoooorr IIEE 
<!--[if IE]> 
<link rel="stylesheet" type="text/css" href="iehacks....
Erkend door de 
Vlaamse regering 
Met de steun van 
Tabellen
TTaabbeelllleenn hhttmmll 
 <table> 
 <th>titel</th> 
<tr> 
<td>a1</td> 
<td>a2</td> 
</tr> 
<tr> 
<td>b1</td> 
<td>b2</...
TTaabbeelllleenn hhttmmll ((vveerrvvoollgg)) 
 th ipv td 
 Width 
 Colspan, rowspan 
 Align, valign 
 Cellpadding, ce...
TTaabbeelllleenn ccssss 
 table { border-collapse: collapse; border: 1px solid 
#C0C0C0; background-color: #FFFF99; width...
SSuummmmaarryy eenn ccaappttiioonn 
<table cellspacing="0" id="playlistTable" summary="Top 15 songs 
played. Top artitst ...
TThheeaadd 
<thead> 
<tr> 
<th></th> 
<th></th> 
</tr> 
</thead>
TTbbooddyy 
<tbody> 
<tr> 
<td></td> 
<td></td> 
</tr> 
</tbody>
OOdddd eenn eevveenn 
 <tr class=”odd”></tr> 
 <tr class=”even”></tr>
TTaabbllee ccssss 
table { 
border-collapse: collapse; (dus niet separate standaard) 
width: 50em; 
border: 1px solid #666...
CCaappttiioonn ccssss 
caption { 
font-size: 1.2em; 
font-weight: bold; 
margin: 1em 0; 
}
TThheeaadd ccssss 
thead { 
background: #ccc url(images/bar.gif) repeat-x left center; 
border-top: 1px solid #a5a5a5; 
bo...
Affwweerrkkiinngg 
.odd { 
background-color:#edf5ff; } 
tr:hover { 
background-color:#3d80df; 
color: #fff; } 
thead tr:ho...
Erkend door de 
Vlaamse regering 
Met de steun van 
Formulieren
EEeennvvoouuddiigg ffoorrmmuulliieerr 
<form id="comments_form" action="#" 
method="post"> 
</form>
FFiieellddsseett && LLeeggeenndd 
<feldset> 
<legend>Your Contact Details</legend> 
</feldset>
LLaabbeell eenn IInnppuutt 
<p> 
<label for="author">Name: <em class="required">(Required)</em></label> 
<input name="auth...
MMeessssaaggee ((tteexxttaarreeaa)) 
<feldset> 
<legend>Comments</legend> 
<p> 
<label for="text">Message: <em class="requ...
FFoorrmm ccssss 
form { 
font-size: 1.4em; 
width: 30em; } 
feldset { 
margin: 1em 0; /* space out the feldsets a little*/...
label { 
display: block; } 
label .required { 
font-size: 0.75em; 
color:#760000; } 
input { 
width: 200px; } 
input.radio...
/* style form elements on focus */ 
input:focus, textarea:focus { 
background: #ffc; } 
input.radio { 
foat: left; 
margin...
WWaatt zziijjnn ffoorrmmuulliieerreenn 
Gegevens verkrijgen van surfers
FFoorrmmuulliieerreenn aaaannmmaakkeenn 
<FORM name="enquete" method="post" 
action="mailto:hansrossel@koba.be"> 
<P>Famil...
IInnppuutt tteekksstt 
<form> 
Voornaam: <input type="text" 
name=“voornaam“ /> 
<br> 
Naam: <input type="text" 
name=“naa...
IInnppuutt rraaddiioo bbuuttttoonnss 
<form> 
<input type="radio" name=“geslacht" 
value=“man“ /> Man <br> 
<input type="r...
IInnppuutt cchheecckkbbooxx 
<form> 
<input type="checkbox" name=“fets“ /> 
Ik heb een fets <br> 
<input type="checkbox" n...
DDrroopp ddoowwnn mmeennuu 
<form> 
<select name=“autos"> 
<option value="volvo">Volvo</option> 
<option value="volvo">Vol...
FFoorrmmuulliieerreenn ccssss:: SSuubbmmiitt 
<style tyle=text/css> 
input.red { 
background-color: #cc0000; 
font-weight:...
FFoorrmmuulliieerreenn ccssss vveerrvvoollgg 
#submit{ 
background:#BC4819; 
color:#FFF; 
width:auto; 
padding: 2px 10px; ...
FFoorrmmuulliieerreenn ccssss:: IInnppuutt 
<style tyle=text/css> 
input.pink { 
background-color: #ffcccc; 
font-size: 10...
FFoorrmmuulliieerreenn ccssss:: TTeexxttaarreeaa 
<style tyle=text/css> 
textarea.violet { 
background-color: #ccccff;} 
<...
FFoorrmmuulliieerreenn ccssss 
input, textarea{ 
font-family: "Lucida Sans Unicode","Lucida Sans", 
"Trebuchet MS", Arial,...
CCSSSS cchheecckkbbooxx,, ddrroopp ddoowwnn 
<input class="red" type="radio" 
value="V1" checked name="R1"> 
<option class...
VVeerrwweerrkkiinngg vvaann ffoorrmmuulliieerreenn 
 Verstuurd via e-mail 
 Verwerking via CGI-scripts (nms) 
 Verwerki...
VVoolllleeddiigg ffoorrmmuulliieerr 
<form name="example" id="example" action="http://www.website.be/cgi-bin/berichtje.cgi...
CCoonnttrrôôllee ffoorrmmuulliieerr 
Kan server side of client side (of beide) 
Server side: 
nms 
Client side 
http://www...
NNMMSS FFoorrmmmmaaiill 
Zie: http://nms-cgi.sourceforge.net/scripts.shtml 
Basisinstellingen: 
• $max_recipients = 2; 
• ...
NNMMSS FFoorrmmmmaaiill 
 Beveiliging spambots: oa « berichtje », 
geen bevestigingsmail, recente versie 
gebruiken, … 
...
EEmmaaiill ffoorrmmuulliieerr aannttwwoooorrdd 
Hieronder is het formulier dat verstuurd werd door (s@s.nl) op dinsdag, no...
Erkend door de 
Vlaamse regering 
Met de steun van 
Media invoegen
<<eemmbbeedd>> eenn <<oobbjjeecctt>> 
http://www.handleidinghtml.nl/html/elementen/embed.html 
http://www.handleidinghtml....
GGrraaffsscchhee eelleemmeenntteenn :: 
bbeewweeggeennddee bbeeeellddeenn 
 Animated gif 
 .swf bestanden : vectorgebase...
MMuuzziieekk ttooeevvooeeggeenn aaaann ssiittee 
<object width="300" height="42"> 
<param name="src" value=“housefnch.mp3"...
QQuuiicckkttiimmee ffllmmppjjeess 
http://www.handleidinghtml.nl/html/objecten/objecten07.html 
http://developer.apple.com...
EEnnkkeell mmeett <<oobbjjeecctt>> 
http://alistapart.com/articles/byebyeembed 
Vermijden van de niet standaard <embed> 
t...
EEnnkkeell <<oobbjjeecctt>> QQuuiicckkttiimmee 
<object classid="clsid:02BF25D5-8C17-4B23-BC80- » 
D3488ABDDC6B" 
codebase...
VViiaa YYoouuttuubbee 
<object width="425" height="350"> 
<param name="movie" 
value="http://www.youtube.com/v/synxFmQJ_0A...
VViiaa GGooooggllee vviiddeeoo 
<embed style="width:400px; height:326px;" 
id="VideoPlayback" type="application/x-shockwav...
FFllaasshh ffllmmppjjeess 
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8- 
444553540000" WIDTH="128" HEIGHT="96" TYPE="ap...
MMiiccrroossoofftt ppaatteenntt pprroobblleeeemm 
 Voor Flash, Quicktime, …: « click to activate and 
use this control… »...
.ffvv vviiddeeooffoorrmmaaaatt 
 Ffmpeg: conversie op server naar .fv + 
compressie 
 Flash players 
◦ Jeroen Weijring 
...
IIffrraammee:: 
 Insluiten van andere html documenten 
<IFRAME SRC="iframes-vb.html" 
WIDTH="275" HEIGHT="100" 
FRAMEBORD...
CSS Frameworks & Grids 
CSS Frameworks & Grids 
CSS3 Voorstel 
Workflow & optimalisatie 
Erkend door de 
Vlaamse regering
HHeett bbeellaanngg vvaann ssnneellhheeiidd 
 Frameworks = Sneller werken 
 Compressie & optimalisatie = snellere pagina...
YYssllooww 
 80% van laadtijd is voor het laden van elementen vanuit 
html: css, js, videos. 
 14 regelsh: ttp://develop...
CCoommpprreessssiiee && ooppttiimmaalliissaattiiee 
 Eerst valideren! 
 Kleinere css = sneller laden 
 Automatisch: 
ht...
CCSSSS33 TTeemmppllaattee llaayyoouutt 
 Geavanceerd templating met css3 (draft): 
http://www.w3.org/TR/css3-layout 
 Jq...
GGrriidd ssyysstteemmeenn 
 974 grid: 2, 3, 4 kolommen met 14px margin 
 CSS Frameworks 
◦ http://en.wikipedia.org/wiki/...
VVoooorrddeelleenn 
 Vertrekken van vaste basiscode (wiel niet heruitvinden) 
 Browser compatibiliteit: Herbruikbaarheid...
NNaaddeelleenn 
 Jij en iedereen die aan de site werkt moet 
het framework kennen 
 Er is code die je niet gebruikt 
 B...
SSaammeennsstteelllliinngg 
 reset.css 
 typography.css 
 grid.css 
 ie.css 
 print.css 
 forms.css
RReesseett:: TTrriippoollii && ccoommpprreessssiiee 
* {margin:0; padding:0;}: traag 
Eric Meyer : 
http://meyerweb.com/er...
BBlluueepprriinntt 
 Framework: http://blueprintcss.org 
 Tools: 
◦ http://kematzy.com/blueprint-generator 
◦ http://cod...
996600.ggss 
 http://960.g s 
 Ook fuid h:ttp://www.designinfuences.com/fuid960gs 
 En elastic 
http://csswizardry.com/...
BBlluueettrriipp 
 http://bluetrip.o:r cgombinatie van blueprint 
en 960.gs
MMeeeerr iinnffoo 
 http://www.alistapart.com/articles/framewo 
rksfordesigners 
 http://www.smashingmagazine.com/2007/2...
Met __ __ de _____ 
steun 
___ 
JQUERY 
Erkend door de van 
Vlaamse regering
10/08/07 
JJqquueerryy 
● Voordelen 
● Unobtrusive 
● Klein en licht 
● Trekt goed op css, eenvoudig te leren 
● Browser c...
PPooppuullaaiirriitteeiitt jjqquueerryy ggrrooeeiitt 
B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-micr...
10/08/07 
JJqquueerryy ttooeevvooeeggeenn 
● http://www.learningjquery.com/2008/06/updated-jquery-bookmarkl 
et 
● scripts...
10/08/07 
VVoooorrbbeeeellddeenn
Met __ __ de _____ 
steun 
___ 
Core functionaliteit 
http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery...
10/08/07 
MMeeeerr jjqquueerryy 
● http://docs.jquery.co m 
● http://learningjquery.co m 
● http://ajaxian.com/archives/ha...
Erkend door de 
Vlaamse regering 
Met de steun van 
Speciale technieken
JJaavvaassccrriipptt 
 http://www.webappers.com 
 www.dynamicdrive.com 
 plugins.jquery.com
OOppaacciittyy 
http://www.mandarindesign.com/opacity.html 
Verschillende opacity technieken
Addvvaanncceedd sseelleeccttoorrss 
External links
Erkend door de 
Vlaamse regering 
Met de steun van 
CSS Hacks 
Met dank aan Internet Explorer
WWeebbssttaannddaaaarrddeenn 
 http://validator.w3.org En 
http://jigsaw.w3.org/css-validator 
 http://www.webstandards....
GGeekkeennddee bbuuggss 
 Star hack 
 Box model hack 
 3 pixel gap 
 Double foat bug 
 Has content
OOpplloossssiinngg vviiaa jjaavvaassccrriipptt 
 Ie7 en ie8.js 
◦ http://code.google.com/p/ie7-js
Erkend door de 
Vlaamse regering 
Met de steun van 
CSS Hacks
BBooxx mmooddeell 
Verschil tussen traditionele en W3C interpretatie van 
content/padding/margin bij een box. Oplossingen ...
TTaanntteekk ((bbooxx mmooddeell)) hhaacckk 
#box{ 
border: 10px solid black; 
width: 770px; /* IE5.x/win sees this.. */ 
...
EEssccaappee hhaacckk 
De escape hack is een nieuwere en 
eenvoudiger versie van de Tantek hack die 
juist hetzelfde doet:...
CCSSSS HHaacckkss eenn IIEE77 
Let op: Hacks moeten voorwaarts 
compatibel zijn! 
http://www.positioniseverything.net/arti...
Erkend door de 
Vlaamse regering 
Met de steun van 
Web 2.0
WWeebb 22.00
WWeebb 22.00 
http://en.wikipedia.org/wiki/Web_2 
Kenmerken 
• Interactieve inbreng van bezoekers 
• Pagina’s moeten niet ...
WWeebb 22.00 wweebbssiitteess 
• Gebruik van Ajax: 
http://www.adaptivepath.com/publications/e 
ssays/archives/000385.php ...
Ajjaaxx 
Gebaseerd op volgende technologieën: 
• Javascript: uitgebreid 
• CSS 
• DOM: objecten die de structuur vormen 
v...
Erkend door de 
Vlaamse regering 
Met de steun van 
Lanceren van de site
FFTTPP 
 Uploaden van de webpagina : 
◦ Wat is het ftp-adres? 
◦ Wat is uw gebruikersnaam? 
◦ Wat is uw wachtwoord? 
 FT...
CCuutteeffttpp 
 Een FTP-programma om bestanden te 
uploaden naar uw webruimte
PPaaggiinnaa’’ss tteesstteenn oonnlliinnee 
• www.browsershots.org 
• Webdeveloper toolbar: 
https://addons.mozilla.org/fr...
Lanceren van de site 
Promotie & Zoekmachines 
Erkend door de 
Vlaamse regering 
Met de steun van
SSiittee--bbeekkeennddhheeiidd 
 Onderschat traditionele reclame niet! 
 Briefwisseling – contactkaartjes – 
 Forums, n...
MM Meeetttaaat-tiaangfgossrmatie (informatie over 
informatie op de pagina) gedefnieerd in 
<HEAD> 
 Zoekmachine / Zoekd...
GGeevvoonnddeenn ddoooorr ddee zzooeekkmmaacchhiinnee 
 Inkomende links, linkopbouw, linktekst 
 Metatag “keywords” : ni...
SSppaamm--iinnddeexxiinngg 
 Herhaling van bepaalde trefwoorden in 
commentaartags, bv. 
<!– ferrari, ferrari, ferrari, f...
Powerpoint Htmlcss
Powerpoint Htmlcss
Powerpoint Htmlcss
Upcoming SlideShare
Loading in...5
×

Powerpoint Htmlcss

2,566

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,566
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Powerpoint Htmlcss"

  1. 1. Erkend door de Vlaamse regering Met de steun van HTML & CSS hansrossel@koba.be www.koba.be
  2. 2. Erkend door de Vlaamse regering Met de steun van Geschiedenis
  3. 3. PPrree--HHiissttoorriiee  1960 IBM ontwierp GML (interne publicaties) ◦ Generalized Markup Language  1986 SGML wordt ISO-standaard  1991 Tim Berners-Lee (CERN) ontwerpen tag-based taal HTML oorspronkelijk bedoeld om researchers toe te laten info uit te wisselen. HTML is dus een applicatie van SGML.  Samen met oa Robert Cailliau lanceert hij het WWW.
  4. 4. HHiissttoorriiee  1993: img tag voorgesteld: http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html  Netscape (1994) en Internet Explorer (1995) voeren de Browser Wars  Interactieve technologieën worden toegevoegd ◦ Scripts: Javascript ◦ Java-applets ◦ Plugins: Flash  1998: Netscape geeft Netscape Communicator 4.0 broncode vrij in Open Source Mozilla Project.  2004: Firefox wordt de Mozilla browser
  5. 5. RReecceennttee ggeesscchhiieeddeenniiss  2004: Web Standards: http://www.webstandards.org en http://www.csszengarden.com  2010: HTML5 (Living standard), CSS3 en Webfonts: http://www.whatwg.org/html  2011: Mobile en Responsive Design: http://alistapart.com/article/responsive-web-desi gn  8 april 2014: Einde van IE6: https://www.modern.ie/en-us/ie6countdown
  6. 6. TTee oonntthhoouuddeenn  HTML : (Hyper Text Markup Language) bepaalt de structuur van een webpagina  CSS : (Cascading Style Sheets) : bepaalt de presentatie (kleur/grootte/positie) van een webpagina  JavaScript: voor dynamische effecten in webpagina's (en tegenwoordig nog veel meer)
  7. 7. Erkend door de Vlaamse regering Met de steun van Planning website project
  8. 8. PPrroojjeecctt ssttaappppeenn Analyse fase  Doelen, doelgroep (user personas), planning, team  Keuze domeinnaam en hosting Voorbereidende fase  Informatie architectuur: sitemap, trefwoordena, navigatie, inhoudstypes  Wireframes  Interactie design
  9. 9. PPrroojjeecctt ssttaappppeenn Ontwikkelingsfase  Grafsch ontwerp (photoshop)  Xhtml/css prototype  Programmatie CMS systeem Testfase: bugfxes, usability Lanceringsfase Onderhoudsfase: backups & updates
  10. 10. Erkend door de Vlaamse regering Met de steun van Domeinnaam
  11. 11. DDoommeeiinnnnaaaamm kkiieezzeenn  Naam kiezen: ◦ Origineel en kort ◦ Sleutelwoorden ivm SEO ◦ Beschrijvend of uniek: www.google.com of www.search.com?  Extensie kiezen ◦ Landen: .be, .nl, .fr, .nu, .tm ◦ Europa – VS: .eu, .us ◦ Algemeen: .com, .org, .net, .info, .biz
  12. 12. DDoommeeiinnnnaaaamm bbeesscchhiikkbbaaaarr?? www.dns.be Voor .be domeinen Voor .com, .net, .org domeinnamen http://whois.doma intools.com/
  13. 13. DDoommeeiinn aaaannvvrraaggeenn && iinnsstteelllleenn  Bij één van de vele agentschappen  Uiteenlopende prijs, service en kwaliteit ◦ Mailbox, redirect inbegrepen?  Jaarlijks bedrag te betalen (auto renew?)  Doorsturen ◦ Naar hosting: Domain name servers instellen ◦ Domain forwarding - Frame forwarding – Redirects ◦ Parked domains - Addon domain
  14. 14. Erkend door de Vlaamse regering Met de steun van Hosting - Webruimte
  15. 15. k Waar koommeenn ddee ppaaggiinnaa’’ss tteerreecchhtt?? Mogelijkheden :  Gratis webruimte vb http://www.hostinger.nl  Gratis website bij ISP: Telenet, Belgacom (geen php/mysql)  Shared hosting  VPS: Virtual Private Server  Dedicated Server: eigen webserver  Cloud Hosting
  16. 16. BBeellaannggrriijjkkee eelleemmeenntteenn  Geografsche locatie server?  Bandbreedte?  Php/mysql?  Opslagruimte?  Snelheid: hangt af van •Processor server •RAM server •Aantal sites op server: whois.domaintools.com (soms >4000 vb bij one.com)  Betrouwbaarheid en service 365/7/24 (zie Twitter)
  17. 17. CCoonnttrroolleeppaanneeeell  Cpanel  Plesk Webmin  Open Shift  Eigen controlepaneel van het hostingbedrijf
  18. 18. Erkend door de Vlaamse regering Met de steun van HTML & CSS De taal van webpagina’s
  19. 19. WWaatt iiss HHTTMMLL??  HTML : Hyper Text Markup Language  Hypertext : klikbare verwijzingen binnen de pagina’s die verwijzen naar andere documenten, beelden, …  Markup : d.m.v. code worden de pagina’s opgebouwd  HTML beschrijft hoe de pagina moet weergegeven worden en bevat ook de inhoud van de pagina  Weergegeven in een browser die code verwerkt (Chrome - Internet Explorer – Firefox - Safari)  Voorbeeld : http://www.syntrawest.be
  20. 20. HHttmmll ppaaggiinnaa
  21. 21. EElleemmeenntteenn ((TTaaggss))  Tags : meestal in paren  Bijvoorbeeld : <h1>Welkom</h1>  <h1> duidt op het starten van het defniëren van de tekst als hoofdtitel 1  </h1> duidt op het afsluiten van deze opmaak  De tekst komt tussen de beide tags  In een teksteditor in te tikken  Pagina’s de extensie .htm meegeven, zodat ze verwerkt worden door de browser
  22. 22. HHTTMMLL Attttrriibbuutteenn  Attributen bepalen de tags preciezer  Bijvoorbeeld : <h1 align=“center”>Deze tekst staat in het midden</h1>  Het attribuut : align=“center” duidt aan hoe deze tekst met opmaak <h1> moet weergegeven worden. Opmerking: dergelijke attributen kunnen tegenwoordig beter in css worden gedaan vermits ze de presentatie doen van de tekst.
  23. 23. CCSSSS ttaagg ooppmmaaaakk vvoooorrbbeeeelldd  Voorbeeld : h1 {text-align: center; color:blue;}  h1 : Selector : de geselecteerde tag  Color : Eigenschap : welke eigenschap moet gewijzigd worden?  Blue : waarde : welke waarde krijgt de gekozen eigenschap?
  24. 24. HHttmmll ++ ccssss
  25. 25. Basis elementen webpagina Erkend door de Vlaamse regering Met de steun van
  26. 26. IInnddeexx.hhttmmll  De structuur van een webpagina : <!DOCTYPE html> <html lang="nl"> <head> <title>Interne titel</title> Allerlei onzichtbare zaken zoals meta-tags, css en scripts </head> <body> De zichtbare inhoud van de webpagina </body> </html>
  27. 27. Erkend door de Vlaamse regering Met de steun van Doctype
  28. 28. DDOOCCTTYYPPEE 1. Html 4.01 of xhtml 1.0 ◦ http://www.w3.org/tr/xhtml1/ ◦ http://www.w3schools.com/xhtml/xhtml_html.asp 2. Strict – transitional – frames  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd“>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd“>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd"> 3. Html5 <!DOCTYPE html>
  29. 29. Erkend door de Vlaamse regering Met de steun van Tekst invoegen
  30. 30. TTeekksstteenn  Niet opgemaakt ◦ Via notepad opmaak verwijderen  Mooi opgemaakte teksten omzetten naar .pdf formaat: afdrukbaar met behoud van layout en opmaak.  Taal? Meertalige website?
  31. 31. Erkend door de Vlaamse regering Met de steun van Body instellingen
  32. 32. KKlleeuurreenn  RGB – monitor : Red Green Blue  FF 00 00 : volledig rood, geen groen, geen blauw 00 FF 00 : geen rood, volledig groen, geen blauw
  33. 33. CCssss bbooddyy body { background-color: #404040; font-family: Verdana, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#ffffff; margin: 0; padding: 0; }
  34. 34. CCssss hheeaaddeerrss h1 { color: #F2612A; /* color: #BC4819; */ font-size: 24px; font-family: Tahoma, Geneva, serif; font-variant:small-caps; line-height:24px; text-align:left; font-weight:bold; display:block; margin-bottom:25px; border-bottom: 2px solid #f1f1f1; letter-spacing: 1px; } Idem voor h2, h3, …. h6
  35. 35. Erkend door de Vlaamse regering Met de steun van Werkomgeving
  36. 36. WWeerrkkoommggeevviinngg Html Editors  Dreamweaver  Sublime text Firefox en plugins  https://getfrebug.com  https://addons.mozilla.org/en-US/frefox/addon/web-deve loper/
  37. 37. Erkend door de Vlaamse regering Met de steun van Links
  38. 38. HHyyppeerrlliinnkkss  HTML : Hyperlinks : klikbare delen van de pagina die naar andere pagina’s / onderdelen verwijzen  Bijvoorbeeld : <a href=“test.htm”> Klik hier</a> (=interne hyperlink)  Bijvoorbeeld : <a href="http://www.google.be">deze site</a> (=externe hyperlink)
  39. 39. LLiinnkkss  Structuur: <a href="http://www.handleidinghtml.nl">Handleiding HTML</a>  Absolute en relatieve links  Ankers  Target  Base: voor 404 pagina  Title  mailto links: let op spam: encrypt of encode email adres via javascript vb http://automaticlabs.com/products/enkoderform  Accesskey
  40. 40. CCssss LLiinnkkss a:link, a:visited { text-decoration: none; color: #039; } a:hover { text-decoration: underline; background-color: #e4F4e3; color: #333; }
  41. 41. Erkend door de Vlaamse regering Met de steun van Afbeeldingen
  42. 42. GGrraaffsscchhee eelleemmeenntteenn :: eennkkeellee ttiippss  Resolutie : 72 dpi aanvaardbaar voor scherm  Grootte : 50 kb  Afbeeldingen in verschillende pagina’s gebruiken: caching  “Slicen” van afbeeldingen  “Clickable maps” (hotspots)
  43. 43. GGrraaffsscchhee eelleemmeenntteenn  .jpg (Joint Photographics Expert Group) ◦ Gecomprimeerd met verlies ◦ Sterkte compressie instelbaar ◦ 16.7 miljoen kleuren  .gif (Graphics Interchange Format) ◦ Gecomprimeerd zonder verlies ◦ 256 kleuren ◦ Transparantie mogelijk ◦ Geanimeerde .gif mogelijk  .png (Portable Network Graphics) ◦ Gecomprimeerd zonder verlies ◦ 16.7 miljoen kleuren ◦ Transparantie mogelijk ◦ Geanimeerde foto's niet mogelijk (wel via .MNG) ◦ IE6: png fx: http://homepage.ntlworld.com/bobosola/pnghowto.htm
  44. 44. FFoottoo''ss eenn llooggoo''ss  Foto's ◦ Hoe groter formaat hoe beter ◦ Verbeteren: contrast, niveaus, kleurdiepte ◦ Resizen: bicubic smoother/sharper ◦ Herknippen en verkleinen: .jpg 7  Logo's ◦ Liefst in vectoriële vorm (.eps): schaalbaar ◦ Voorkeur .gif en .png: formaat, transparantie, kleuren, browserbeperkingen.
  45. 45. Affbbeeeellddiinnggeenn  <img src=“logo.gif" width="105" height="125" border=“0” alt=“De post">  img : Tag voor afbeeldingen width : breedte height : hoogte border : rand rondom afbeelding alt : alternatieve tekst
  46. 46. CCoommbbiinnaattiiee hhyyppeerrlliinnkk aaffbbeeeellddiinngg  Afbeelding aanklikbaar maken : plaats de <img> tag tussen <a href> en </a> tags <a href=“http://www.website.be"> <img src=“logo.gif“ width="38" height="34“ border="0"></a>
  47. 47. GGrraaffsscchhee eelleemmeenntteenn :: eeddiittoorrss  Foto's: Adobe Photoshop, Fireworks en vele andere bij digitale camera's geleverde pakketten.  Grafsch: Adobe Illustrator  Open source: Paint.net (www.getpaint.net), Gimp (www.gimp.org), Picasa, ...
  48. 48. Affbbeeeellddiinnggeenn vviinnddeenn • Professioneel: – http://www.istockphoto.com – http://www.shutterstock.com • Google afbeeldingen zoeken: copyright! • Vrij van copyright – http://www.freeimages.com –Www.fickr.com (soms)
  49. 49. Affbbeeeellddiinnggeenn hhttmmll  <img src=“foto.jpg" width="140" height="100“ />  Alt en title: accessibility  Link  Align: top, left, right + <br clear="all“ />  Centreren: <div align=“center“></div>  Responsive design: width en height weglaten (wordt procentueel gedaan door de div errond)
  50. 50. CCssss aaffbbeeeellddiinnggeenn img { border: 0; /* lelijke blauwe linkrand weg */ margin: 0 0 10px 10px; /* marge start boven + wijzerszin */ /* voor een rechts uitgelijnde foto */ width: 200px; height: 200px; /* breedte en hoogte fxeren */ }
  51. 51. Verschillen html & xhtml stijl Erkend door de Vlaamse regering Met de steun van
  52. 52. VVeerrsscchhiilllleenn hhttmmll vvss xxhhttmmll In xhtml is DOCTYPE verplicht Alle elementen moeten gesloten worden ◦ Incorrect: <p>Dit is een paragraaf.<p>Dit is nog een paragraaf. ◦ Correct: <p>Dit is een paragraaf.</p><p>Dit is nog een paragraaf.</p> Ook lege elementen moeten gesloten worden ◦ Incorrect: <br>, <hr>, <img> ◦ Correct: <br />, <hr />, <img /> Elementen moeten correct genest worden ◦ Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong> ◦ Correct: <em><strong>Dit is tekst met nadruk.</strong></em>
  53. 53. HHttmmll vvss xxhhttmmll ((vveerrvvoollgg)) Attribuutwaarden moeten tussen aanhalingstekens ◦ Incorrect: <td rowspan=3> of <img src="plaatje.gif" width=100 height=50> ◦ Correct: <td rowspan="3"> of <img src="plaatje.gif" width="100" height="50” /> Alle elementen en attributen moeten klein geschreven worden ◦ Incorrect: <BODY><P ID="iets">Tekst</P></BODY> ◦ Correct: <body><p id="iets">Tekst</p></body> Attributen mogen niet geminimaliseerd worden ◦ Incorrect: <option selected>, <frame noresize>, <input checked> ◦ Correct: <option selected="selected">, <frame noresize="noresize">, <input checked="checked“>
  54. 54. OOvveerrsscchhaakkeelleenn hhttmmll -->> xxhhttmmll  HTML Tidy ◦ http://cgi.w3.org/cgi-bin/tidy: online ◦ http://tidy.sourceforge.net/: download • Dreamweaver plugins ◦ http://www.nypl.org/styleguide/xhtml/tips.ht ml#dreamweaver
  55. 55. Erkend door de Vlaamse regering Met de steun van Bestandsstructuur
  56. 56. BBeessttaannddssssttrruuccttuuuurr wweebbssiittee Mappen  Css  Javascript  Images Bestanden  Index.htm  404.htm & .htaccess  Robots.txt  Cgi-bin
  57. 57. Erkend door de Vlaamse regering Met de steun van Layout: Frames, Tabellen en CSS Een grove structuur voor de pagina
  58. 58. SScchheerrmmffoorrmmaatteenn  Standaard 1024x768 ◦ Favorieten open? ◦ Bovenmenu aftrekken ◦ Toolbar ◦ Laptop widescreen ◦ Oudere pc’s 800x600, nieuwere 1152x… ◦ Verschillen mac/pc ◦ Verschillen IE en Firefox Eventueel oplossen met styleswitcher
  59. 59. LLaayyoouutt mmeett FFrraammeess  Uitgevonden in 1996 door Netscape.  Het is sterk afgeraden frames te gebruiken ◦ Frames schaden het basisidee van het internet: 1 pagina = 1 url (daarom ook afgeraden door W3C) ◦ Zoekmachines, schermlezers voor slechtzienden, printers en pda's hebben allen problemen met frames. ◦ Frames zijn een makkelijke oplossing om een vast menu op elke webpagina te krijgen en worden daarom nog vaak gebruikt op amateursites.
  60. 60. HHttmmll ffrraammeess  <frameset cols="150,*">  <frame name="links“ scrolling="no" noresize target="rboven" src="links.htm">  <frameset rows="20%,*">  <frame name="rboven“ target="ronder" src="boven.htm">  <frame name="ronder“ src="rechtsonder.htm">  </frameset> </frameset>
  61. 61. LLaayyoouutt mmeett TTaabbeelllleenn  Tabellen worden nog vaak gebruikt als basislayout voor webpagina's  Het W3C raadt het gebruik van tabellen als basis van layout af. Tabellen dienen voor “tabular data”.  Voordelen van tabellen als layout ◦ Grafsch designers kunnen hun ontwerp slicen en als puzzel terug samenstellen ◦ Programmeurs kunnen resultaten van code makkelijk weergeven
  62. 62. TTaabbeelllleenn <table width="93"> <tr> <td width="85">eerste rij</td> </tr> <tr> <td width="85">tweede rij</td> </tr> </table>
  63. 63. LLaayyoouutt vviiaa ddiivv llaaggeenn  Cascading Style Sheets  Opmaak scheiden van inhoud  Precies positioneren van elementen (meer bekend als ‘layers’)  Geïmplementeerd in browsers vanaf de 4.0 versies, maar nog correcties nodig.  CSS is de beste en meest recente manier om webpagina’s op te stellen.
  64. 64. VVaasstt--sstteelllliinnggeenn Hoe ziet de surfer mijn webpagina?  Grootte van het browserscherm ◦ 800x600, 1024x768, smartphones, laptop wide, ...  Verschillen tussen browsers ◦ Internet Explorer ◦ Chrome,Firefox (open source opvolger van Netscape) ◦ Opera, Safari  Verschillen tussen versies  Verschillen tussen MAC, PC, Linux
  65. 65. SSttrruuccttuuuurr:: LLaaggeenn mmaakkeenn <div id=“container”> <div id=“head”> </div> <div id=“content”> </div> <div id=“nav”> </div> </div>
  66. 66. CCeennttrreerreenn 11 kkoolloomm lliiqquuiidd Liquid layouts div#container{ margin-left: 10%; margin-right: 10%; }
  67. 67. 11 KKoolloomm ggeecceennttrreeeerrdd CSS met auto margin: #container { width: 960px; margin: 0 auto; }
  68. 68. 11 KKoolloomm ggeecceennttrreeeerrdd ((vveerrssiiee 22)) CSS met negatieve margin: #container { width:720px; position:relative; left:50%; margin-left:-360px; }
  69. 69. 22 KKoolloommmmeenn –– ffxxeedd –– xxhhttmmll <div id=“container"> <div id=“header”> </div> <div id=“content”> <!-- Voor navigatie:screenreaders --> </div> <div id=“navigatie”> </div> <div id=“footer”> </div> </div>
  70. 70. 22 KKoolloommmmeenn –– ffxxeedd –– ccssss #content { width:720px; foat:right; } #navigatie { width:180px; foat:left; } #footer { clear:both; }
  71. 71. 22 KKoolloommmmeenn ffxxeedd -- ppaaddddiinngg #navigatie { padding-top: 20px; padding-bottom: 20px; }
  72. 72. 33 KKoolloommmmeenn ffxxeedd –– xxhhttmmll <div id=“content”> <div id=“hoofdcontent”> </div> <div id=“contentblok”> </div> </div>
  73. 73. 33 KKoolloommmmeenn ffxxeedd –– ccssss #hoofdcontent { width: 320px; foat: left; } #contentblok { width:180px; foat: right; }
  74. 74. 33 KKoolloommmmeenn ffxxeedd –– ppaaddddiinngg #contentblok h1, #contentblok h2, #contentblok p { padding-left: 20px; // box model bug IE5 padding-right: 20px; // box model bug IE5 }
  75. 75. 33 KKoolloommmmeenn lliiqquuiidd –– ccssss #container { width: 85%; margin: 0 auto; } #navigatie { width: 23%; foat: left; } #content { width: 75%; foat: right; }
  76. 76. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss Default font-size = 16px 10px = 62.5% van 16px body { font-size: 62.5% }
  77. 77. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss #container { width: 72em; margin: 0 auto; } #navigatie { width: 18em; foat: left; } #content { width: 52em; foat: right; }
  78. 78. 33 KKoolloommmmeenn eellaassttiisscchh –– ccssss #hoofdcontent { width: 32em; foat: left; } #contentblok { width: 18em; foat: right; }
  79. 79. HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss #container { width: 72em; max-width: 100%; margin: 0 auto; } #navigatie { width: 18em; max-width: 23%; foat: left; } #content { width: 52em; max-width: 75%; foat: right; }
  80. 80. HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss #hoofdcontent { width: 32em; max-width: 66%; foat: left; } #contentblok { width: 18em; max-width: 31%; foat: right; }
  81. 81. LLiiqquuiidd eenn eellaassttiisscchhee aaffbbeeeellddiinnggeenn #header { height: 171px; background: url(images/hoofding.png) no-repeat left top; } Voordelen:  Cache  Schalen van de afbeelding bij elastische of liquid layouts (afbeelding op maximale grote nemen die niet volledig getoond wordt bij kleiner resizen)
  82. 82. HHeeaaddeerr aaffbbeeeellddiinngg aalltteerrnnaattiieeff #header { width: 100% overfow: hidden; } <div id=”header”> <img src=”images/hoofding.png” width=”1600” height=”171” /> </div>
  83. 83. FFaauuxx CCoolluummnnss Het creëren van een kolom effect voor de navigatie. Gebaseerd op: http://alistapart.com/articles/fauxcolumns #container { background: #fff url(images/fauxcolumns.gif) repeat-y left top; }
  84. 84. Erkend door de Vlaamse regering Met de steun van Positioning
  85. 85. BBooxx mmooddeell
  86. 86. BBlloocckk lleevveell && IInnlliinnee eelleemmeennttss  Block-level elements: <p>, <h1>, <div> •Worden onder elkaar weergegeven •Inline via display:none;  Inline elements: <strong>, <span>, <a> •Worden naast elkaar weergegeven •block via display:block;  Positionering: •Normal fow •Float •Absolute positioning & fxed positioning
  87. 87. RReellaattiivvee ppoossiittiioonniinngg #box1 { position: relative; width:150px; height: 100px; background-color:red; } #box2 { position: relative; width:150px; height: 100px; background-color:green; } #box3 { position: relative; width:150px; height: 100px; background-color:blue; }
  88. 88. RReellaattiivvee ppoossiittiioonniinngg Volgt normal fow van andere blokken en positie tov elkaar. Boxen staan gepositioneerd relatie tov elkaar. #box2 { position: relative; width:150px; height: 100px; top:20px; left:20px; z-index:2; background-color:green; }
  89. 89. Abbssoolluuttee ppoossiittiioonniinngg Element neemt geen plaats in. Andere elementen houden er geen rekening mee Zwevend Positie enkel tov ancestor/parent element z-index #box2 { position: absolute; width:150px; height: 100px; top:20px; left:20px; z-index:2; background-color:green; }
  90. 90. FFiixxeedd ppoossiittiioonniinngg Gelijkaardig principe als absolute positioning Positie enkel tov venster zelf Usability: menu of invulformulier blijft steeds zichtbaar Niet ondersteund door IE6 #box2 { position: fxed; width:150px; height: 100px; top:20px; left:20px; z-index:2; background-color:green; }
  91. 91. FFllooaattiinngg Boxen kunnen links of rechts gefoat worden Als box waarin de 3 boxen vervat zit niet breed genoeg is valt de derde box eronder Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefoate box mag zijn. #box2 { foat:right; width:150px; height: 100px; background-color:green; }
  92. 92. CClleeaarr Voorbeeld: Image met paragraaf ernaast en eronder. Vermijden van “wezen”. Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefoate box mag zijn. img { foat:left; }
  93. 93. PPrroobblleemmeenn mmeett ffooaatt Voorbeeld: Image met tekst rechts .news { background-color:gray; border:solid 1px black; foat:left; } .news img { foat:left; } .news p { foat:right; }
  94. 94. PPrroobblleemmeenn mmeett ffooaatt Oplossing 1: clear CSS: .clear { clear:both; } XHTML: <div class=”clear”></div> Nadeel: extra markup Oplossing 2: box zelf foaten CSS: .news {foat:left;} Nadeel: volgend element is ook beïnvloed door foat => alles foaten en clearen in de footer Oplossing 3: •Html: <br clear="all" /> •Nadeel: oude techniek, extra markup en extra hoogte van br Meer oplossingen: http://www.positioniseverything.net/easyclearing.html
  95. 95. Erkend door de Vlaamse regering Met de steun van Lijsten
  96. 96. SSttyylliinngg vvaann lliijjsstteenn ul { margin:0; padding:0; list-style-type:none; } li { background: url(bullet.gif) no-repeat 0 50%; padding-left:30px; }
  97. 97. Erkend door de Vlaamse regering Met de steun van Navigatie
  98. 98. OOppsstteelllleenn iinnhhoouuddssttaaffeell eenn mmeennuu  Usability: snel informatie vinden  Accessibility ◦ Slechtzienden ◦ Mobiel internet ◦ Zoekmachines  Menu positie: boven, links, rechts, elders  Inhoudstafel opstellen
  99. 99. LLiissttaammaattiicc:: ccssss mmeennuu’’ss mmeett lliijjsstteenn Zie: http://css.maxdesign.com.au/listamatic/ Opmerkingen: • list-style-type • Achtergronden via background • Browser support chart • Horizontale lijsten: foat: left; of display: inline; (geen IE5)
  100. 100. VVeerrttiikkaallee nnaavviiggaattiiee <ul> <li class="frst selected"><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li> <li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li><a href="contact.htm">Contact</a></li> </ul>
  101. 101. CCSSSS SSpprriitteess http://www.alistapart.com/articles/sprites http://www.koba.be/lesimages/pixy-rollover.gif
  102. 102. VVeerrttiikkaallee nnaavviiggaattiiee ccssss ul { margin: 0; padding: 0; list-style-type: none; } li { display: inline: /* :hack: Removes large gaps in IE/Win */ } a { display: block; width: 200px; height: 39px; line-height: 39px; color: #000; text-decoration: none; background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom; text-indent: 50px; text-transform: uppercase; }
  103. 103. VVeerrttiikkaallee nnaavviiggaattiiee ccssss a:hover, .selected a { background-color: #369; background-position: right bottom; color: #fff; } .frst a { height: 40px; line-height: 40px; }
  104. 104. HHoorriizzoonnttaallee nnaavviiggaattiiee hhttmmll <ul> <li class="frst"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Case Studies</a></li> </ul>
  105. 105. HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss ul { margin: 0; padding: 0; foat: left; width: 720px; background: #FAA819 url(images/mainNavBg.gif) repeat-x; list-style: none; text-transform: uppercase; } ul li { foat: left; }
  106. 106. HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss ul a { padding: 0 2em; line-height: 2.1em; background: url(images/mainNavBorder.gif) repeat-y left top; text-decoration: none; color: #fff; foat: left; display: block; } ul a:hover { color: #333; } ul .frst a { background: none; }
  107. 107. SSuucckkeerrffsshh ddrroopp ddoowwnn mmeennuu Zie: http://www.htmldog.com/articles/suckerfsh/dropdowns/ • Volledig css gebaseerd (met javascript voor IE) • Volledig zichtbaar voor zoekmachines • Probleemloos uitbreidbaar naar verschillende niveaus • Diverse sons of suckerfsh
  108. 108. Erkend door de Vlaamse regering Met de steun van <head>
  109. 109. <<hheeaadd>> Karakterset  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> Javascript  <script language="JavaScript" src="../javascript/scripts.js" type="text/javascript"></script>
  110. 110. <<hheeaadd>> BBeevveeiilliiggiinngg <meta name="author" content="info@koba.be, www.koba.be" /> <meta http-equiv="imagetoolbar" content="no“ /> <meta http-equiv="Window-target" content="_top“ /> <meta name="MSSmartTagsPreventParsing" content="true“ /> Hotlink + index protection op server
  111. 111. <<hheeaadd>> zzooeekkmmaacchhiinneess <title>titel</title> <meta name="keywords" content="keywords,keyword,other keyword" /> <meta name="description" content="description" />
  112. 112. <<hheeaadd>> mmeettaa ttaaggss <meta http-equiv=“refresh" content="4;url=http://www.domain.com/link.html” /> (of uur verversen) <meta http-equiv="content-language" content=“nl“ /> <meta name="robots" content=“index, follow“ /> (of noindex, nofollow of noarchive)
  113. 113. <<hheeaadd>> nnuutttteelloozzee mmeettaa ttaaggss <!-- HTML Comments (treated as HTML markup) --> : tenzij voor uitleg <meta name="DC.title" lang="en" content="DC Dublin Core META Tags - DCMI Dublin Core Metadata Initiative“ /> <meta name="revisit-after" content="7 days“ />
  114. 114. RRoobboottss.ttxxtt  User-agent: *  Disallow: /cgi-bin/  Disallow: /javascript/  Disallow: /Templates/  Disallow: /css/ Bemerk • Gehoorzaamheid? • Gevaar hele site niet geïndexeerd
  115. 115. <<hheeaadd>> ccssss <link href="../css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link href="../css/print.css" rel="stylesheet" type="text/css" media="print" /> Belangrijk: volgorde, zie cursus p122
  116. 116. Erkend door de Vlaamse regering Met de steun van Verschillende Style sheets
  117. 117. VVoooorr pprriinntt eenn hhaannddhheelldd Invoegen externe style sheet: p127 Printstyle:  zie cursus p209  Css discuss: http://css-discuss.incutio.com/?page=PrintStylesheets  Eric Meyer: http://www.alistapart.com/articles/goingtoprint/  Zeldman: http://www.zeldman.com/essentials/print/ Handheld style: zie cursus p199
  118. 118. SSttyylleesswwiittcchheerr http://www.alistapart.com/stories/alternate/ <script type="text/javascript" src="/scripts/styleswitcher.js"></script> <a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a> <a href="#" onclick="setActiveStyleSheet('paul'); return false;">change style to paul</a> http://www.csszengarden.com Ofwel met php (indien geen javascript): http://www.gigadesign.be/2005/08/styleswitcher-opnieuw-met-php/
  119. 119. CCoonnddiittiioonnaall ccoommmmeennttss vvoooorr IIEE <!--[if IE]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> <!--[if IE 5]> <link rel="stylesheet" type="text/css" href="iehacks-5.css" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="iehacks.css" /> <![endif]--> Voor IE vanaf versie 5: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
  120. 120. Erkend door de Vlaamse regering Met de steun van Tabellen
  121. 121. TTaabbeelllleenn hhttmmll  <table>  <th>titel</th> <tr> <td>a1</td> <td>a2</td> </tr> <tr> <td>b1</td> <td>b2</td> </tr> </table>
  122. 122. TTaabbeelllleenn hhttmmll ((vveerrvvoollgg))  th ipv td  Width  Colspan, rowspan  Align, valign  Cellpadding, cellspacing  Centreren tabel  <caption>Dit is het bijschrift</caption>
  123. 123. TTaabbeelllleenn ccssss  table { border-collapse: collapse; border: 1px solid #C0C0C0; background-color: #FFFF99; width:300px; }  td { border: 1px solid #C0C0C0; text-align: center; color: #000000; background-color: #99FFCC; }  caption { caption-side: bottom; /* niet in IE */ text-align: left; } Achtergrondkleur  .kolomgrijs { background-color:#CCCCCC; }  <td class=« kolomgrijs »>
  124. 124. SSuummmmaarryy eenn ccaappttiioonn <table cellspacing="0" id="playlistTable" summary="Top 15 songs played. Top artitst include Coldplay, Yeah Yeah Yeahs, Snow Patrol, Deeper Water, Kings of Leon, Embrace, Oasis, Franz Ferdinand, Jet, The Bees, Blue States, Kaiser Chiefs and Athlete."> <caption>Top 15 Playlist</caption>
  125. 125. TThheeaadd <thead> <tr> <th></th> <th></th> </tr> </thead>
  126. 126. TTbbooddyy <tbody> <tr> <td></td> <td></td> </tr> </tbody>
  127. 127. OOdddd eenn eevveenn  <tr class=”odd”></tr>  <tr class=”even”></tr>
  128. 128. TTaabbllee ccssss table { border-collapse: collapse; (dus niet separate standaard) width: 50em; border: 1px solid #666; } th, td { padding: 0.1em 1em; } Maar voor IE6: cellspacing=”0”
  129. 129. CCaappttiioonn ccssss caption { font-size: 1.2em; font-weight: bold; margin: 1em 0; }
  130. 130. TThheeaadd ccssss thead { background: #ccc url(images/bar.gif) repeat-x left center; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; } th { font-weight: normal; text-align: left; }
  131. 131. Affwweerrkkiinngg .odd { background-color:#edf5ff; } tr:hover { background-color:#3d80df; color: #fff; } thead tr:hover { background-color: transparent; color: inherit; }
  132. 132. Erkend door de Vlaamse regering Met de steun van Formulieren
  133. 133. EEeennvvoouuddiigg ffoorrmmuulliieerr <form id="comments_form" action="#" method="post"> </form>
  134. 134. FFiieellddsseett && LLeeggeenndd <feldset> <legend>Your Contact Details</legend> </feldset>
  135. 135. LLaabbeell eenn IInnppuutt <p> <label for="author">Name: <em class="required">(Required)</em></label> <input name="author" id="author" type="text" /> </p> <p> <label for="email">Email Address:</label> <input name="email" id="email" type="text" /> </p> <p> <label for="url">Web Address:</label> <input name="url" id="url" type="text" /> </p>
  136. 136. MMeessssaaggee ((tteexxttaarreeaa)) <feldset> <legend>Comments</legend> <p> <label for="text">Message: <em class="required">(Required)</em></label> <textarea name="text" id="text" cols="20" rows="10"></textarea> </p> </feldset>
  137. 137. FFoorrmm ccssss form { font-size: 1.4em; width: 30em; } feldset { margin: 1em 0; /* space out the feldsets a little*/ padding: 1em; border : 1px solid #ccc; } legend { font-weight: bold; }
  138. 138. label { display: block; } label .required { font-size: 0.75em; color:#760000; } input { width: 200px; } input.radio, input.submit { width: auto;
  139. 139. /* style form elements on focus */ input:focus, textarea:focus { background: #ffc; } input.radio { foat: left; margin-right: 1em; } textarea { width: 300px; height: 100px; }
  140. 140. WWaatt zziijjnn ffoorrmmuulliieerreenn Gegevens verkrijgen van surfers
  141. 141. FFoorrmmuulliieerreenn aaaannmmaakkeenn <FORM name="enquete" method="post" action="mailto:hansrossel@koba.be"> <P>Familienaam <INPUT type="text" name="familienaam" size="50" maxlength="50“ /> </P> </FORM>
  142. 142. IInnppuutt tteekksstt <form> Voornaam: <input type="text" name=“voornaam“ /> <br> Naam: <input type="text" name=“naam“ /> <textarea name=“bericht" cols="40" rows="5“></textarea> </form>
  143. 143. IInnppuutt rraaddiioo bbuuttttoonnss <form> <input type="radio" name=“geslacht" value=“man“ /> Man <br> <input type="radio" name=“geslacht" value=“vrouw“ /> Vrouw </form>
  144. 144. IInnppuutt cchheecckkbbooxx <form> <input type="checkbox" name=“fets“ /> Ik heb een fets <br> <input type="checkbox" name=“auto“ /> Ik heb een auto </form>
  145. 145. DDrroopp ddoowwnn mmeennuu <form> <select name=“autos"> <option value="volvo">Volvo</option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form>
  146. 146. FFoorrmmuulliieerreenn ccssss:: SSuubbmmiitt <style tyle=text/css> input.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;} </style> <input class="red" type="submit" value=“Verzenden“ />
  147. 147. FFoorrmmuulliieerreenn ccssss vveerrvvoollgg #submit{ background:#BC4819; color:#FFF; width:auto; padding: 2px 10px; border:none; }
  148. 148. FFoorrmmuulliieerreenn ccssss:: IInnppuutt <style tyle=text/css> input.pink { background-color: #ffcccc; font-size: 10px;} </style> <input class="pink" type="text" name=“voornaam" size="20“ />
  149. 149. FFoorrmmuulliieerreenn ccssss:: TTeexxttaarreeaa <style tyle=text/css> textarea.violet { background-color: #ccccff;} </style> <textarea class="violet" rows="4" name=“uwvraag" cols="20">
  150. 150. FFoorrmmuulliieerreenn ccssss input, textarea{ font-family: "Lucida Sans Unicode","Lucida Sans", "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1em; border: 1px solid #CDC6B2; border-left-width: 3px; padding:2px 0; width: 240px; overfow:hidden; }
  151. 151. CCSSSS cchheecckkbbooxx,, ddrroopp ddoowwnn <input class="red" type="radio" value="V1" checked name="R1"> <option class="pink" value= “introhtml.htm">- Intro to HTML</option>
  152. 152. VVeerrwweerrkkiinngg vvaann ffoorrmmuulliieerreenn  Verstuurd via e-mail  Verwerking via CGI-scripts (nms)  Verwerking via Server Side scripttalen (ASP – PHP – ColdFusion - …)  Afhankelijk van wat de provider aanbiedt
  153. 153. VVoolllleeddiigg ffoorrmmuulliieerr <form name="example" id="example" action="http://www.website.be/cgi-bin/berichtje.cgi" method="post" /> <input type="hidden" name="subject" value="Vraag via contactpagina op website" /> <input type="hidden" name="recipient" value="1" /> <input type="hidden" name="redirect" value="http://www.website.be/bevestiging.htm" /> <input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT,HTTP_REFER ER" /> <p><label for="name">Naam</label> <input type="text" id="name" name="name" /></p> <p><label for="email">E-mailadres</label> <input type="text" id="email" name="email" /></p> <p><label for="tel">Telefoon</label> <input type="text" id="tel" name="tel" /></p> <p><label for="message">Bericht</label> <textarea id="message" name="message" cols="40" rows="5"></textarea><br /></p> <p><input type="submit" id="submit" name="submit" value="verzenden" style="margin-top:10px;" /></p> </form>
  154. 154. CCoonnttrrôôllee ffoorrmmuulliieerr Kan server side of client side (of beide) Server side: nms Client side http://www.quirksmode.org/dom/error.html
  155. 155. NNMMSS FFoorrmmmmaaiill Zie: http://nms-cgi.sourceforge.net/scripts.shtml Basisinstellingen: • $max_recipients = 2; • $mailprog = '/usr/sbin/sendmail -oi -t'; • $postmaster = 'hansrossel@yahoo.com'; • @referers = qw(wmw.be 216.193.202.92 localhost); • @allow_mail_to = qw(hansrossel@yahoo.com info@koba.be); • %recipient_alias = ('1' => 'hansrossel@yahoo.com', '2' => 'info@koba.be'); • $send_confrmation_mail = 0;
  156. 156. NNMMSS FFoorrmmmmaaiill  Beveiliging spambots: oa « berichtje », geen bevestigingsmail, recente versie gebruiken, …  Chmod: 755 ◦ aanvinken: owner: read, write, execute group: read, execute other: (world) read execute
  157. 157. EEmmaaiill ffoorrmmuulliieerr aannttwwoooorrdd Hieronder is het formulier dat verstuurd werd door (s@s.nl) op dinsdag, november 07, 2006 at 15:07:56 -------------------------------------------------------------------------- naam: vvvzv adres: azvrv email: avzvz 12 bericht: nopeikd$jc Submit: Verzenden ! --------------------------------------------------------------------------- REMOTE_ADDR: 81.246.76.162 HTTP_USER_AGENT: Mozilla/5.0 (Windows; U; Windows NT 5.1; nl; rv:1.8.1) Gecko/20061010 Firefox/2.0
  158. 158. Erkend door de Vlaamse regering Met de steun van Media invoegen
  159. 159. <<eemmbbeedd>> eenn <<oobbjjeecctt>> http://www.handleidinghtml.nl/html/elementen/embed.html http://www.handleidinghtml.nl/html/elementen/object.html Het EMBED element wordt gebruikt om multimedia objecten in te sluiten in een HTML-document. Het kan gaan om geluidsfragmenten met de extensie wav, au en mid, maar bijvoorbeeld ook om QuickTime filmpjes (mov), Shockwave Flash animaties (swf) en video clips (avi).
  160. 160. GGrraaffsscchhee eelleemmeenntteenn :: bbeewweeggeennddee bbeeeellddeenn  Animated gif  .swf bestanden : vectorgebaseerde animaties door middel van bv. Macromedia Flash : (www.macromedia.com(  .mpg / .avi / … : flmmateriaal, maar grotere bestanden
  161. 161. MMuuzziieekk ttooeevvooeeggeenn aaaann ssiittee <object width="300" height="42"> <param name="src" value=“housefnch.mp3"> <param name="autoplay" value="true"> <param name="controller" value="true"> <param name="bgcolor" value="#FF9900"> <embed src=“housefnch.mp3" autostart="true" loop="false" width="300" height="42" controller="true" bgcolor="#FF9900"> </embed> </object> http://digitalmedia.oreilly.com/2005/02/23/mp3_embed.html
  162. 162. QQuuiicckkttiimmee ffllmmppjjeess http://www.handleidinghtml.nl/html/objecten/objecten07.html http://developer.apple.com/quicktime/quicktimeintro/tools/embed2.html Voorbeeld  <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">  <PARAM NAME="src" VALUE="test.mov">  <PARAM NAME="autoplay" VALUE="false">  <PARAM NAME="volume" VALUE="25">  <EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime" PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="false" VOLUME="25"></EMBED>  </OBJECT>
  163. 163. EEnnkkeell mmeett <<oobbjjeecctt>> http://alistapart.com/articles/byebyeembed Vermijden van de niet standaard <embed> te gebruiken. Alternatieve oplossing voor de dubbele oplossing <object> én <embed>
  164. 164. EEnnkkeell <<oobbjjeecctt>> QQuuiicckkttiimmee <object classid="clsid:02BF25D5-8C17-4B23-BC80- » D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="260"> <param name="src“ value="http://www.sarahsnotecards.com/catalunyalive/ » diables.mov" /> <param name="controller" value="true" /> <param name="autoplay" value="false" /> <!--[if !IE]>--> <object type="video/quicktime“ data="http://www.sarahsnotecards.com/catalunyalive/” “diables.mov" width="320" height="260"> <param name="autoplay" value="false" /> <param name="controller" value="true" /> </object> <!--<![endif]--> </object>
  165. 165. VViiaa YYoouuttuubbee <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/synxFmQJ_0A"></pa ram> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/synxFmQJ_0A" type="application/x-shockwave-fash" wmode="transparent" width="425" height="350"></embed> </object>
  166. 166. VViiaa GGooooggllee vviiddeeoo <embed style="width:400px; height:326px;" id="VideoPlayback" type="application/x-shockwave- fash" src="http://video.google.com/googleplayer. swf? docId=3913745262811179417&amp;hl=en -CA"> </embed>
  167. 167. FFllaasshh ffllmmppjjeess <OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave- flash" CODEBASE="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0"> <PARAM NAME="movie" VALUE="test.swf"> <PARAM NAME="play" VALUE="true"> <PARAM NAME="loop" VALUE="true"> <PARAM NAME="quality" VALUE="high"> <EMBED SRC="test.swf" WIDTH="128" HEIGHT="96" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer" PLAY="true" LOOP="true" QUALITY="high"></EMBED> </OBJECT>
  168. 168. MMiiccrroossoofftt ppaatteenntt pprroobblleeeemm  Voor Flash, Quicktime, …: « click to activate and use this control… »  Adobe Flash Player, Authorware Player, Shockwave Player, Adobe Reader, Sun Java, Apple QuickTime, RealNetworks RealPlayer en andere ActiveX controls.  Oplossing via javascript: ◦ http://www.apple.com/quicktime/tutorials/em bed.html ◦ http://www.adobe.com/designcenter/popular_t opics/click_to_activate/
  169. 169. .ffvv vviiddeeooffoorrmmaaaatt  Ffmpeg: conversie op server naar .fv + compressie  Flash players ◦ Jeroen Weijring ◦ Flowplayer ◦ ...
  170. 170. IIffrraammee::  Insluiten van andere html documenten <IFRAME SRC="iframes-vb.html" WIDTH="275" HEIGHT="100" FRAMEBORDER="0" ALIGN="left" STYLE="margin-right: 20px;“> </IFRAME> http://www.handleidinghtml.nl/html/frames/ frames08.html
  171. 171. CSS Frameworks & Grids CSS Frameworks & Grids CSS3 Voorstel Workflow & optimalisatie Erkend door de Vlaamse regering
  172. 172. HHeett bbeellaanngg vvaann ssnneellhheeiidd  Frameworks = Sneller werken  Compressie & optimalisatie = snellere pagina's ◦ Amazon: 100 ms extra laadsnelheid geeft 1% minder verkoop (Bron: Greg Linden, Amazon) ◦ Google: 500 ms extra laadsnelheid geeft 20% minder zoekopdrachten. (Source: Marrissa Mayer, Google) ◦ Google: de pagina 30% kleiner maken geeft 30% meer kaart zoekopdrachten. (Bron: Marrissa Mayer, Google) ◦ Yahoo!: 400 ms extralaaddtijd geeft een verhoging van 5 tot 9% van het aantal personen dat op de Back knop klikt vooraleer de pagina volledig geladen is. (Bron: Nicole Sullivan, Yahoo!)
  173. 173. YYssllooww  80% van laadtijd is voor het laden van elementen vanuit html: css, js, videos.  14 regelsh: ttp://developer.yahoo.com/performance/rule s.html  Google tech & yslow http://www.youtube.com/watch?v=BTHvs3V8DBA  Yslow plugin voor frebhutgt: p://developer.yahoo.com/ys low
  174. 174. CCoommpprreessssiiee && ooppttiimmaalliissaattiiee  Eerst valideren!  Kleinere css = sneller laden  Automatisch: http://foele.fyspray.org/csstidy//css_optimise r.php : compressie & optimalisatie
  175. 175. CCSSSS33 TTeemmppllaattee llaayyoouutt  Geavanceerd templating met css3 (draft): http://www.w3.org/TR/css3-layout  Jquery implementatie? http://ejohn.org/blog/css3-template-la yout
  176. 176. GGrriidd ssyysstteemmeenn  974 grid: 2, 3, 4 kolommen met 14px margin  CSS Frameworks ◦ http://en.wikipedia.org/wiki/List_of_CSS_frameworks ◦ http://960.gs: 960px met 12 of 16 kolommen en 20px margin ◦ http://www.blueprintcss.org: 950px met 24 kolommen en 10px margin ◦ YAML: http://www.yaml.de/en ◦ YUI Grids: http://developer.yahoo.com/yui/grids
  177. 177. VVoooorrddeelleenn  Vertrekken van vaste basiscode (wiel niet heruitvinden)  Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs maar als zelfs msn.com die niet meer respecteert...)  Professionele grid structuur  Flexibele voorgedefnieerde classes voor basiselementen: lijsten, tabellen, forms  Sneller werken, rapid prototyping (ipv wireframing) opstellen van mock- Clean code  Klein <5kb  Iphone viewport is 960px
  178. 178. NNaaddeelleenn  Jij en iedereen die aan de site werkt moet het framework kennen  Er is code die je niet gebruikt  Beperkingen in design ◦ De xhtml layout zou moeten gebaseerd zijn het design, niet omgekeerd ◦ Fixed width vb 960px, voor 1280px schermen wil je soms 960px + extra niet belangrijke kolom (reclame)
  179. 179. SSaammeennsstteelllliinngg  reset.css  typography.css  grid.css  ie.css  print.css  forms.css
  180. 180. RReesseett:: TTrriippoollii && ccoommpprreessssiiee * {margin:0; padding:0;}: traag Eric Meyer : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded Tripoli: http://devkick.com/lab/tripoli/  Compatibel met Windows: IE5, IE5.5, IE6, IE7, IE8, Opera 8, Opera Safari, Firefox 2, Firefox 3, OS X: IE5, Firefox 2, Firefox 3, Safari 2, Safari 3, Camino
  181. 181. BBlluueepprriinntt  Framework: http://blueprintcss.org  Tools: ◦ http://kematzy.com/blueprint-generator ◦ http://code.google.com/p/blueprintcss/wiki/Tools  Plugins ◦ In core: Fancy Type, RTL (right-to-left text and column layout support), Buttons, Link Icons (bestandstypes, external, ...) ◦ Tabs:http://github.com/Montoya/blueprint-plugin---tabs/tree/master ◦ Liquid: http://github.com/Montoya/blueprint-plugin---liquidgrid/tree/master ◦ Silk icons: http://github.com/Montoya/blueprint-plugin---silksprite/tree/master Voorbeeld: http://nettuts.com/tutorials/html-css-techniques/a-closer-look-at-the-blueprint-css-framework/
  182. 182. 996600.ggss  http://960.g s  Ook fuid h:ttp://www.designinfuences.com/fuid960gs  En elastic http://csswizardry.com/typogridphy  Uitgewerkt voorbeeld: http://nettuts.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework
  183. 183. BBlluueettrriipp  http://bluetrip.o:r cgombinatie van blueprint en 960.gs
  184. 184. MMeeeerr iinnffoo  http://www.alistapart.com/articles/framewo rksfordesigners  http://www.smashingmagazine.com/2007/21/css-frameworks-css-reset-design-from-scratch
  185. 185. Met __ __ de _____ steun ___ JQUERY Erkend door de van Vlaamse regering
  186. 186. 10/08/07 JJqquueerryy ● Voordelen ● Unobtrusive ● Klein en licht ● Trekt goed op css, eenvoudig te leren ● Browser compatibiliteit ● Concurrenten ● MooTools, Prototype/Scriptaculous ● Let op: conficten en performance bij 2 frameworks
  187. 187. PPooppuullaaiirriitteeiitt jjqquueerryy ggrrooeeiitt B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx 10/08/07 Bron:
  188. 188. 10/08/07 JJqquueerryy ttooeevvooeeggeenn ● http://www.learningjquery.com/2008/06/updated-jquery-bookmarkl et ● scripts.js maken in theme map met $(document).ready( function() { $(‘p’).hide(‘slow’); }); ● In template.php ● drupal_add_js(path_to_theme().‘scripts.js’, ‘theme’, ‘header’); of via .info file toevoegen aan theme map ● Jquery wordt automatisch geladen bij drupal_add_js
  189. 189. 10/08/07 VVoooorrbbeeeellddeenn
  190. 190. Met __ __ de _____ steun ___ Core functionaliteit http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png Erkend door de van Vlaamse regering
  191. 191. 10/08/07 MMeeeerr jjqquueerryy ● http://docs.jquery.co m ● http://learningjquery.co m ● http://ajaxian.com/archives/hacking-digg-with-frebug-and-jquery ● http://plugins.jquery.com/ ●
  192. 192. Erkend door de Vlaamse regering Met de steun van Speciale technieken
  193. 193. JJaavvaassccrriipptt  http://www.webappers.com  www.dynamicdrive.com  plugins.jquery.com
  194. 194. OOppaacciittyy http://www.mandarindesign.com/opacity.html Verschillende opacity technieken
  195. 195. Addvvaanncceedd sseelleeccttoorrss External links
  196. 196. Erkend door de Vlaamse regering Met de steun van CSS Hacks Met dank aan Internet Explorer
  197. 197. WWeebbssttaannddaaaarrddeenn  http://validator.w3.org En http://jigsaw.w3.org/css-validator  http://www.webstandards.org  Acid 2 en 3 test ◦ Acid 2: http://www.webstandards.org/fles/acid2/test.html ◦ Acid 3: http://acid3.acidtests.org SVG test http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-flters-displace- 01-f.html
  198. 198. GGeekkeennddee bbuuggss  Star hack  Box model hack  3 pixel gap  Double foat bug  Has content
  199. 199. OOpplloossssiinngg vviiaa jjaavvaassccrriipptt  Ie7 en ie8.js ◦ http://code.google.com/p/ie7-js
  200. 200. Erkend door de Vlaamse regering Met de steun van CSS Hacks
  201. 201. BBooxx mmooddeell Verschil tussen traditionele en W3C interpretatie van content/padding/margin bij een box. Oplossingen 1. CSS3 en Mozilla specifcaties: http://www.quirksmode.org/css/box.html 2. Box model hack voor IE5 en 5.5: http://www.afterimage.nl/box-model-hack.htm
  202. 202. TTaanntteekk ((bbooxx mmooddeell)) hhaacckk #box{ border: 10px solid black; width: 770px; /* IE5.x/win sees this.. */ voice-family: ""}""; voice-family: inherit; width: 750px; /* ..but not this "standards" width value.. */ } html>body #box{ width: 750px; /* ..or this reinforcement of the standards width. */ }
  203. 203. EEssccaappee hhaacckk De escape hack is een nieuwere en eenvoudiger versie van de Tantek hack die juist hetzelfde doet: een andere breedte defniëren voor Internet Explorer 5 en 5.5 #box{ width: 770px; width: 750px; /* IE 5 en 5.5 zien dit niet*/ }
  204. 204. CCSSSS HHaacckkss eenn IIEE77 Let op: Hacks moeten voorwaarts compatibel zijn! http://www.positioniseverything.net/articles /ie7-dehacker.html
  205. 205. Erkend door de Vlaamse regering Met de steun van Web 2.0
  206. 206. WWeebb 22.00
  207. 207. WWeebb 22.00 http://en.wikipedia.org/wiki/Web_2 Kenmerken • Interactieve inbreng van bezoekers • Pagina’s moeten niet refreshen • Geen plugins nodig • User oriented • Databases combineren: • Mashups: http://www.programmableweb.com/mashups • api’s: http://code.google.com
  208. 208. WWeebb 22.00 wweebbssiitteess • Gebruik van Ajax: http://www.adaptivepath.com/publications/e ssays/archives/000385.php • Scriptaculous: http://script.aculo.us: web 2.0 javascript. Showpiece: http://www.gucci.com • Ruby on rails: ontwikkelingsplatform http://www.rubyonrails.org • Nieuwe ontwikkelingen volgen: • Blog: http://www.techcrunch.com
  209. 209. Ajjaaxx Gebaseerd op volgende technologieën: • Javascript: uitgebreid • CSS • DOM: objecten die de structuur vormen van webpagina’s • XMLHttpRequest-object: op achtergrond gegevens van de webserver ophalen in XML of tekst formaat.
  210. 210. Erkend door de Vlaamse regering Met de steun van Lanceren van de site
  211. 211. FFTTPP  Uploaden van de webpagina : ◦ Wat is het ftp-adres? ◦ Wat is uw gebruikersnaam? ◦ Wat is uw wachtwoord?  FTP-programma’s : bv. Filezilla (http://flezilla.sourceforge.net/ ), CuteFTP
  212. 212. CCuutteeffttpp  Een FTP-programma om bestanden te uploaden naar uw webruimte
  213. 213. PPaaggiinnaa’’ss tteesstteenn oonnlliinnee • www.browsershots.org • Webdeveloper toolbar: https://addons.mozilla.org/frefox/60/ • Broken links: http://home.snafu.de/tilman/xenulink.html • Validators • html http://validator.w3.org/ • css: http://jigsaw.w3.org/css-validator/
  214. 214. Lanceren van de site Promotie & Zoekmachines Erkend door de Vlaamse regering Met de steun van
  215. 215. SSiittee--bbeekkeennddhheeiidd  Onderschat traditionele reclame niet!  Briefwisseling – contactkaartjes –  Forums, nieuwsgroepen, blogs  Zoekmachines en linksites  Pay per Click: Google Adwords  Klantenservice – productondersteuning bieden via internet: handleidingen downloaden, ...
  216. 216. MM Meeetttaaat-tiaangfgossrmatie (informatie over informatie op de pagina) gedefnieerd in <HEAD>  Zoekmachine / Zoekdirectory gebruikt de info in Meta-tags Voorbeelden :  <META http-equiv=“refresh” content=“5;URL=www.youiware.be”>  <META name="description" content=“website over auto, velo, moto">
  217. 217. GGeevvoonnddeenn ddoooorr ddee zzooeekkmmaacchhiinnee  Inkomende links, linkopbouw, linktekst  Metatag “keywords” : niet gebruikt  Metatag “description” : beschrijving  Title tags gebruiken!  Bovenste gedeelte van de <BODY>!  Opgepast met grafsche onderdelen, javascript, Flash, frames, image maps  <ALT> tags gebruiken, <NOFRAMES> gebruiken  Sleutelworden en synoniemen consistent gebruiken in content en code.
  218. 218. SSppaamm--iinnddeexxiinngg  Herhaling van bepaalde trefwoorden in commentaartags, bv. <!– ferrari, ferrari, ferrari, ferrari --!>  Doorway pages  Tekst in het <BODY>-gedeelte van de tekst onzichtbaar maken d.m.v. kleur  Linkfarms  Google bombing – keyword spamming  Zie www.google.nl/webmasters/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×