Powerpoint Htmlcss

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

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

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

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)

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 hosting
Voorbereidende fase
 Informatie architectuur: sitemap, trefwoordena, navigatie,
inhoudstypes
 Wireframes
 Interactie design

PPrroojjeecctt ssttaappppeenn
Ontwikkelingsfase
 Grafsch ontwerp (photoshop)
 Xhtml/css prototype
 Programmatie CMS systeem
Testfase: bugfxes, usability
Lanceringsfase
Onderhoudsfase: backups & updates

Erkend door de
Vlaamse regering
Met de steun van
Domeinnaam

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

DDoommeeiinnnnaaaamm bbeesscchhiikkbbaaaarr??
www.dns.be Voor .be domeinen
Voor .com, .net, .org
domeinnamen
http://whois.doma
intools.com/

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

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
 Gratis website bij ISP: Telenet, Belgacom
(geen php/mysql)
 Shared hosting
 VPS: Virtual Private Server
 Dedicated Server: eigen webserver
 Cloud Hosting

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)

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

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

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.

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?

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</title>
Allerlei onzichtbare zaken zoals meta-tags, css en scripts
</head>
<body>
De zichtbare inhoud van de webpagina
</body>
</html>

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

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: afdrukbaar met behoud
van layout en opmaak.
 Taal? Meertalige website?

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 rood, volledig groen, geen blauw

CCssss bbooddyy
body {
background-color: #404040;
font-family: Verdana, Helvetica, sans-serif;
font-size:12px;
line-height:180%;
color:#ffffff;
margin: 0;
padding: 0;
}

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

Erkend door de
Vlaamse regering
Met de steun van
Werkomgeving

WWeerrkkoommggeevviinngg
Html Editors
 Dreamweaver
 Sublime text
Firefox en plugins
 https://getfrebug.com
 https://addons.mozilla.org/en-US/frefox/addon/web-deve
loper/

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
 Bijvoorbeeld : <a href=“test.htm”> Klik
hier</a>
(=interne hyperlink)
 Bijvoorbeeld : <a
href="http://www.google.be">deze
site</a>
(=externe hyperlink)

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

CCssss LLiinnkkss
a:link, a:visited {
text-decoration: none;
color: #039;
}
a:hover {
text-decoration: underline;
background-color: #e4F4e3;
color: #333;
}

Erkend door de
Vlaamse regering
Met de steun van
Afbeeldingen

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)

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

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.

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

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>

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

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)

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)

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 */
}

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

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

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

Erkend door de
Vlaamse regering
Met de steun van
Bestandsstructuur

BBeessttaannddssssttrruuccttuuuurr wweebbssiittee
Mappen
 Css
 Javascript
 Images
Bestanden
 Index.htm
 404.htm & .htaccess
 Robots.txt
 Cgi-bin

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 widescreen
◦ Oudere pc’s 800x600, nieuwere 1152x…
◦ Verschillen mac/pc
◦ Verschillen IE en Firefox
Eventueel oplossen met styleswitcher

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.

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>

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

TTaabbeelllleenn
<table width="93">
<tr>
<td width="85">eerste rij</td>
</tr>
<tr>
<td width="85">tweede rij</td>
</tr>
</table>

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.

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

SSttrruuccttuuuurr:: LLaaggeenn mmaakkeenn
<div id=“container”>
<div id=“head”>
</div>
<div id=“content”>
</div>
<div id=“nav”>
</div>
</div>

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:relative;
left:50%;
margin-left:-360px;
}

22 KKoolloommmmeenn –– ffxxeedd –– xxhhttmmll
<div id=“container">
<div id=“header”>
</div>
<div id=“content”> 
</div>
<div id=“navigatie”>
</div>
<div id=“footer”>
</div>
</div>

22 KKoolloommmmeenn –– ffxxeedd –– ccssss
#content {
width:720px;
foat:right;
}
#navigatie {
width:180px;
foat:left;
}
#footer {
clear:both;
}

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”>
</div>
</div>

33 KKoolloommmmeenn ffxxeedd –– ccssss
#hoofdcontent {
width: 320px;
foat: left;
}
#contentblok {
width:180px;
foat: right;
}

33 KKoolloommmmeenn ffxxeedd –– ppaaddddiinngg
#contentblok h1, #contentblok h2, #contentblok p {
padding-left: 20px; // box model bug IE5
padding-right: 20px; // box model bug IE5
}

33 KKoolloommmmeenn lliiqquuiidd –– ccssss
#container {
width: 85%;
margin: 0 auto;
}
#navigatie {
width: 23%;
foat: left;
}
#content {
width: 75%;
foat: right;
}

33 KKoolloommmmeenn eellaassttiisscchh –– ccssss
Default font-size = 16px
10px = 62.5% van 16px
body {
font-size: 62.5%
}

#container {
width: 72em;
margin: 0 auto;
}
#navigatie {
width: 18em;
foat: left;
}
#content {
width: 52em;
foat: right;
}

#hoofdcontent {
width: 32em;
foat: left;
}
#contentblok {
width: 18em;
foat: right;
}

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

HHyybbrriidd lliiqquuiidd--eellaassttiisscchh –– ccssss
#hoofdcontent {
width: 32em;
max-width: 66%;
foat: left;
}
#contentblok {
width: 18em;
max-width: 31%;
foat: right;
}

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)

HHeeaaddeerr aaffbbeeeellddiinngg aalltteerrnnaattiieeff
#header {
width: 100%
overfow: hidden;
}
<div id=”header”>
<img src=”images/hoofding.png” width=”1600” height=”171” />
</div>

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

Erkend door de
Vlaamse regering
Met de steun van
Positioning

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

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

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

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

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

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

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

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

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

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.gif) no-repeat 0 50%;
padding-left:30px;
}

Erkend door de
Vlaamse regering
Met de steun van
Navigatie

OOppsstteelllleenn iinnhhoouuddssttaaffeell eenn mmeennuu
 Usability: snel informatie vinden
 Accessibility
◦ Slechtzienden
◦ Mobiel internet
◦ Zoekmachines
 Menu positie: boven, links, rechts, elders
 Inhoudstafel opstellen

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)

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>

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: inline: /* :hack: Removes large gaps in IE/Win */
}
a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom;
text-indent: 50px;
text-transform: uppercase;
}

VVeerrttiikkaallee nnaavviiggaattiiee ccssss
a:hover, .selected a {
background-color: #369;
background-position: right bottom;
color: #fff;
}
.frst a {
height: 40px;
line-height: 40px;
}

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>

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

HHoorriizzoonnttaallee nnaavviiggaattiiee ccssss
ul a {
padding: 0 2em;
line-height: 2.1em;
background: url(images/mainNavBorder.gif) repeat-y left top;
color: #fff;
foat: left;
display: block;
}
ul a:hover {
color: #333;
}
ul .frst a {
background: none;
}

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

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
 <script language="JavaScript" src="../javascript/scripts.js"
type="text/javascript"></script>

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

<<hheeaadd>> zzooeekkmmaacchhiinneess
<title>titel</title>
<meta name="keywords"
content="keywords,keyword,other keyword" />
<meta name="description" content="description" />

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

<<hheeaadd>> nnuutttteelloozzee mmeettaa ttaaggss
 : 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“
/>

RRoobboottss.ttxxtt
 User-agent: *
 Disallow: /cgi-bin/
 Disallow: /javascript/
 Disallow: /Templates/
 Disallow: /css/
Bemerk
• Gehoorzaamheid?
• Gevaar hele site niet geïndexeerd

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

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

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/

CCoonnddiittiioonnaall ccoommmmeennttss vvoooorr IIEE



Voor IE vanaf versie 5:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

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</td>
</tr>
</table>

TTaabbeelllleenn hhttmmll ((vveerrvvoollgg))
 th ipv td
 Width
 Colspan, rowspan
 Align, valign
 Cellpadding, cellspacing
 Centreren tabel
 <caption>Dit is het bijschrift</caption>

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

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>

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;
}
th, td {
padding: 0.1em 1em;
}
Maar voor IE6: cellspacing=”0”

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;
border-bottom: 1px solid #a5a5a5;
}
th {
font-weight: normal;
text-align: left;
}

Affwweerrkkiinngg
.odd {
background-color:#edf5ff; }
tr:hover {
background-color:#3d80df;
color: #fff; }
thead tr:hover {
background-color: transparent;
color: inherit; }

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

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>

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

label {
display: block; }
label .required {
font-size: 0.75em;
color:#760000; }
input {
width: 200px; }
input.radio, input.submit {
width: auto;

/* style form elements on focus */
input:focus, textarea:focus {
background: #ffc; }
input.radio {
foat: left;
margin-right: 1em; }
textarea {
width: 300px;
height: 100px; }

WWaatt zziijjnn ffoorrmmuulliieerreenn
Gegevens verkrijgen van surfers

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>

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>

IInnppuutt rraaddiioo bbuuttttoonnss
<form>
<input type="radio" name=“geslacht"
value=“man“ /> Man <br>
<input type="radio" name=“geslacht"
value=“vrouw“ /> Vrouw
</form>

IInnppuutt cchheecckkbbooxx
<form>
<input type="checkbox" name=“fets“ />
Ik heb een fets <br>
<input type="checkbox" name=“auto“ />
Ik heb een auto
</form>

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>

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

FFoorrmmuulliieerreenn ccssss vveerrvvoollgg
#submit{
background:#BC4819;
color:#FFF;
width:auto;
padding: 2px 10px;
border:none;
}

FFoorrmmuulliieerreenn ccssss:: IInnppuutt
input.pink {
background-color: #ffcccc;
font-size: 10px;}
</style>
<input class="pink" type="text"
name=“voornaam" size="20“ />

FFoorrmmuulliieerreenn ccssss:: TTeexxttaarreeaa
textarea.violet {
background-color: #ccccff;}
</style>
<textarea class="violet" rows="4"
name=“uwvraag" cols="20">

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

CCSSSS cchheecckkbbooxx,, ddrroopp ddoowwnn
<input class="red" type="radio"
value="V1" checked name="R1">
<option class="pink" value=
“introhtml.htm">- Intro to
HTML</option>

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

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>

CCoonnttrrôôllee ffoorrmmuulliieerr
Kan server side of client side (of beide)
Server side:
nms
Client side
http://www.quirksmode.org/dom/error.html

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;

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

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

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

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

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

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>

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>

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

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

</object>

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>

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&hl=en
-CA">
</embed>

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>

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/

.ffvv vviiddeeooffoorrmmaaaatt
 Ffmpeg: conversie op server naar .fv +
compressie
 Flash players
◦ Jeroen Weijring
◦ Flowplayer
◦ ...

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

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'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!)

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

CCoommpprreessssiiee && ooppttiimmaalliissaattiiee
 Eerst valideren!
 Kleinere css = sneller laden
 Automatisch:
http://foele.fyspray.org/csstidy//css_optimise
r.php
: compressie & optimalisatie

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

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

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

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)

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

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/

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

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/21/css-frameworks-css-reset-design-from-scratch

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 compatibiliteit
● Concurrenten
● MooTools, Prototype/Scriptaculous
● Let op: conficten en performance bij 2 frameworks

PPooppuullaaiirriitteeiitt jjqquueerryy ggrrooeeiitt
B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx
10/08/07
Bron:

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

10/08/07
VVoooorrbbeeeellddeenn

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

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

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

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

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. */
}

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*/
}

CCSSSS HHaacckkss eenn IIEE77
Let op: Hacks moeten voorwaarts
compatibel zijn!
http://www.positioniseverything.net/articles
/ie7-dehacker.html

Erkend door de
Vlaamse regering
Met de steun van
Web 2.0

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

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

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.

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?
 FTP-programma’s :
bv. Filezilla (http://flezilla.sourceforge.net/
), CuteFTP

CCuutteeffttpp
 Een FTP-programma om bestanden te
uploaden naar uw webruimte

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/

Lanceren van de site
Promotie & Zoekmachines
Erkend door de
Vlaamse regering
Met de steun van

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

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

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.

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/

Powerpoint Htmlcss

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (6)

Similaire à Powerpoint Htmlcss

Similaire à Powerpoint Htmlcss (20)

Powerpoint Htmlcss