test

1,851 views

Published on

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,851
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

test

  1. 1. Met de steun van HTML & CSS <ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>www.koba.be </li></ul></ul>
  2. 2. Met de steun van Geschiedenis <ul><ul><li>Documenten vorm geven </li></ul></ul><ul><ul><li>op een gestandaardiseerde manier </li></ul></ul>
  3. 3. Historie <ul><li>1960 IBM ontwierp GML (interne publicaties)‏ </li></ul><ul><ul><li>Generalized Markup Language </li></ul></ul><ul><li>IBM ontwierp SGML (formattering van legale documenten </li></ul><ul><ul><li>Standard Generalized Markup Language </li></ul></ul><ul><li>1986 SGML wordt ISO-standaard </li></ul><ul><li>1991 Tim Berners-Lee & Anders Berglund (CERN) ontwerpen tag-based taal HTML </li></ul><ul><li>HTML is dus een applicatie van SGML ! </li></ul>
  4. 4. Historie <ul><li>HTML bedoeld voor statische informatie </li></ul><ul><li>Interactieve technologieën worden toegevoegd </li></ul><ul><ul><li>Scripts: Javascript </li></ul></ul><ul><ul><li>java-applets </li></ul></ul><ul><ul><li>Plugins: Flash </li></ul></ul><ul><li>1996 W3C (World Wide Web Consortium)‏ </li></ul><ul><ul><li>HTML ontbreekt: </li></ul></ul><ul><ul><ul><li>Uitbreidbaarheid </li></ul></ul></ul><ul><ul><ul><li>structuur </li></ul></ul></ul><ul><ul><ul><li>validatie </li></ul></ul></ul><ul><li>1998 (feb) XML 1.0 specificaties (W3C)‏ </li></ul>
  5. 5. CSS Document style semantics and specification language Document Type Definition Standard Generalized Markup Language HyperMedia Time Based structuring HyperText Markup Language Cascading Style Sheet SGML DTD DSSSL HTML CSS
  6. 6. XML ? <ul><li>XML eXtensible Markup Language </li></ul><ul><ul><li>standaard tekst formaat </li></ul></ul><ul><ul><li>voor gestructureerde informatie op het web </li></ul></ul><ul><li>10% van de SGML-specificaties </li></ul><ul><li>XML is een metataal </li></ul><ul><ul><li>metadata = informatie over informatie </li></ul></ul>
  7. 7. Kortom <ul><li>Applicaties </li></ul><ul><ul><li>HTML (SGML)‏ </li></ul></ul><ul><ul><li>XHTML (XML)‏ </li></ul></ul><ul><li>XML alleen inhoud - </li></ul><ul><ul><li>voor display: </li></ul></ul><ul><ul><ul><li>CSS Cascading Style Sheets </li></ul></ul></ul><ul><ul><ul><li>XSL eXtensible Stylesheet Language </li></ul></ul></ul>
  8. 8. Te onthouden <ul><li>HTML : (Hyper Text Markup Language) is afgeleid van SGML (Standard Generalized Markup Language)‏ </li></ul><ul><li>DTD : ingebouwd in browser, ter herkenning van de opdrachten </li></ul><ul><li>CSS : Cascading Style Sheets : bedoeling inhoud en opmaak te splitsen </li></ul>
  9. 9. Met de steun van Planning website project
  10. 10. Project stappen <ul><li>Analyse fase </li></ul><ul><li>Doelen, doelgroep, planning, team </li></ul><ul><li>Keuze domeinnaam en hosting </li></ul><ul><li>Voorbereidende fase </li></ul><ul><li>Informatie architectuur: sitemap, taxonomie, metadata, navigatie, content types </li></ul><ul><li>Wireframes </li></ul><ul><li>Interactie design </li></ul>
  11. 11. Project stappen <ul><li>Ontwikkelingsfase </li></ul><ul><li>Grafisch ontwerp (photoshop)‏ </li></ul><ul><li>Xhtml/css prototype </li></ul><ul><li>Programmatie CMS systeem </li></ul><ul><li>Testfase: bugfixes, usability </li></ul><ul><li>Lanceringsfase </li></ul><ul><li>Onderhoudsfase: backups & updates </li></ul>
  12. 12. Met de steun van Domeinnaam
  13. 13. Domeinnaam kiezen <ul><li>Naam kiezen: </li></ul><ul><ul><li>Origineel en kort </li></ul></ul><ul><ul><li>Sleutelwoorden ivm SEO </li></ul></ul><ul><ul><li>Beschrijvend of uniek: www.google.com of www.search.com ? </li></ul></ul><ul><li>Extensie kiezen </li></ul><ul><ul><li>Landen: .be, .nl, .fr, .nu, .tm </li></ul></ul><ul><ul><li>Europa – VS: .eu, .us </li></ul></ul><ul><ul><li>Algemeen: .com, .org, .net, .info, .biz </li></ul></ul>
  14. 14. Domeinnaam beschikbaar? Voor .com, .net, .org domeinnamen www.whois.net Voor .be domeinen www.dns.be
  15. 15. Domein aanvragen & instellen <ul><li>Bij één van de vele agentschappen </li></ul><ul><li>Uiteenlopende prijs, service en kwaliteit </li></ul><ul><ul><li>Mailbox, redirect inbegrepen? </li></ul></ul><ul><li>Jaarlijks bedrag te betalen (auto renew?)‏ </li></ul><ul><li>Doorsturen </li></ul><ul><ul><li>Naar hosting: Domain name servers instellen </li></ul></ul><ul><ul><li>Domain forwarding - Frame forwarding – Redirects </li></ul></ul><ul><ul><li>Parked domains - Addon domain </li></ul></ul>
  16. 16. Met de steun van Hosting - Webruimte
  17. 17. Waar komen de pagina’s terecht? <ul><li>Mogelijkheden : </li></ul><ul><li>Gratis webruimte </li></ul><ul><li>Website bij ISP </li></ul><ul><li>Subdomeinen bij ISP </li></ul><ul><li>VPS: Virtuele webservers: shared </li></ul><ul><li>Eigen webserver: dedicated </li></ul>
  18. 18. Belangrijke elementen <ul><li>Geografische locatie server? </li></ul><ul><li>Bandbreedte? </li></ul><ul><li>Beschikbare scripts? (formulierverwerking, counters, scripts, gastenboeken, …)‏ </li></ul><ul><li>Opslagruimte? </li></ul><ul><li>Snelheid </li></ul><ul><li>Databases koppelen? </li></ul><ul><li>Betrouwbaarheid en service 365/7/24 </li></ul>
  19. 19. Controlepaneel <ul><li>Cpanel cfr. wmw </li></ul><ul><li>Plesk </li></ul><ul><li>Eigen controlepaneel </li></ul>
  20. 20. Met de steun van HTML & CSS <ul><ul><li>De taal van webpagina’s </li></ul></ul>
  21. 21. Wat is HTML? <ul><li>HTML : Hyper Text Markup Language </li></ul><ul><li>Hypertext : klikbare verwijzingen binnen de pagina’s die verwijzen naar andere documenten, beelden, … </li></ul><ul><li>Markup : d.m.v. code worden de pagina’s opgebouwd </li></ul><ul><li>HTML beschrijft hoe de pagina moet weergegeven worden en bevat ook de inhoud van de pagina </li></ul><ul><li>Weergegeven in een browser die code verwerkt (Internet Explorer – Firefox - Safari)‏ </li></ul><ul><li>Voorbeeld : http://www.syntrawest.be </li></ul>
  22. 22. Html pagina
  23. 23. Elementen (Tags)‏ <ul><li>Tags : meestal in paren </li></ul><ul><li>Bijvoorbeeld : <H1>Welkom</H1> </li></ul><ul><li><H1> duidt op het starten van het definiëren van de tekst als hoofdtitel 1 </li></ul><ul><li></H1> duidt op het afsluiten van deze opmaak </li></ul><ul><li>De tekst komt tussen de beide tags </li></ul><ul><li>In een teksteditor in te tikken </li></ul><ul><li>Pagina’s de extensie .htm meegeven, zodat ze verwerkt worden door de browser </li></ul>
  24. 24. HTML Attributen <ul><li>Attributen bepalen de tags preciezer </li></ul><ul><li>Bijvoorbeeld : <H1 align=“center”>Deze tekst staat in het midden</H1> </li></ul><ul><li>Het attribuut : align=“center” duidt aan hoe deze tekst met opmaak <H1> moet weergegeven worden </li></ul>
  25. 25. CSS tag opmaak voorbeeld <ul><li>Voorbeeld : </li></ul><ul><li>H1 {color:blue} </li></ul><ul><li>H1 : Selector : de geselecteerde tag </li></ul><ul><li>Color : Eigenschap : welke eigenschap moet gewijzigd worden? </li></ul><ul><li>Blue : waarde : welke waarde krijgt de gekozen eigenschap? </li></ul>
  26. 26. Html + css
  27. 27. Met de steun van Basis elementen webpagina
  28. 28. Opbouw van een webpagina <ul><li>De structuur van een webpagina : </li></ul><DOCTYPE> <HTML> <HEAD> <TITLE>Hier komt de titel</TITLE> </HEAD> <BODY>   </BODY> </HTML>
  29. 29. Index.htm <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=“nl&quot; lang=“nl&quot;> <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /> <title>Untitled Document</title> </head> <body> </body> </html>
  30. 30. Met de steun van Doctype
  31. 31. DOCTYPE <ul><ul><li>1. Html 4.01 of xhtml 1.0 </li></ul></ul><ul><ul><li>http://www.w3.org/tr/xhtml1/ </li></ul></ul><ul><ul><li>http://www.w3schools.com/xhtml/xhtml_html.asp </li></ul></ul><ul><ul><li>2. Strict – transitional – frames </li></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-strict.dtd“ > </li></ul></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd“ > </li></ul></ul></ul><ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/tr/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul></ul></ul><ul><ul><ul><li>3. Met of zonder link </li></ul></ul></ul>
  32. 32. Met de steun van Tekst invoegen
  33. 33. Teksten <ul><li>Niet opgemaakt </li></ul><ul><ul><li>Via notepad opmaak verwijderen </li></ul></ul><ul><li>Mooi opgemaakte teksten omzetten naar .pdf formaat: afdrukbaar met behoud van layout en opmaak. </li></ul><ul><li>Taal? Meertalige website? </li></ul>
  34. 34. Lettertype en layout <ul><li>Kleurgebruik </li></ul><ul><ul><li>www.colorschemer.com </li></ul></ul><ul><ul><li>216 “websafe” kleuren: voorbijgestreefd </li></ul></ul><ul><li>Huislettertype: </li></ul><ul><ul><li>Serif of sans serif </li></ul></ul><ul><ul><li>Windows/MAC lettertypen </li></ul></ul><ul><ul><li>Speciale lettertypen in gif of Flash </li></ul></ul><ul><ul><li>Vectorieel: anti-alias en transparantie </li></ul></ul>
  35. 35. HTML tekst tags : enkele voorbeelden Nieuwe paragraaf <P> Tekst springt in <BLOCKQUOTE> Beeld invoegen <IMG> Unordered List List Item <UL> <LI> Font (lettertype): Let op: afgeraden tag, vervangen door <span> en style <span styl=&quot;Verdana, Arial, Helvetica, sans-serif&quot;> Ordered List List Item <OL> <LI> Tekst wordt letterlijk weergegeven <PRE> Header 1 … Header 6 … <H1> … <H6> Line Break <BR>
  36. 36. HTML tekst tags : enkele voorbeelden Laag - blok <DIV> Vet <StrONG> of <B> Tabel <table> Emphasis <EM> Programmacode <CODE> Teletype <TT> Ingave gegevens <INPUT> Onderlijn <U> Italic <I>
  37. 37. Met de steun van Body instellingen
  38. 38. <BODY> <ul><li>Attributen kunnen meegegeven worden aan de <BODY> tag : bepalen gehele uitzicht van de pagina </li></ul><ul><li>Bijvoorbeeld : <BODY BGCOLOR=&quot;#FFFFFF&quot; TEXT=&quot;#000000&quot; LINK=&quot;#0000FF&quot; VLINK=&quot;#FF0000&quot; ALINK=&quot;#FF0000&quot;> </BODY> </li></ul><ul><li>BGCOLOR : achtergrondkleur TEXT : tekstkleur LINK : hyperlinkkleur VLINK : visited link ALINK : active link </li></ul>
  39. 39. Kleuren <ul><li>RGB – monitor : Red Green Blue </li></ul><ul><li>FF 00 00 : volledig rood, geen groen, geen blauw 00 FF 00 : geen rood, volledig groen, geen blauw </li></ul><ul><li>216 “Websafe” kleuren : voorbijgestreefd </li></ul>
  40. 40. Css body body { background-color: #404040; background-repeat: no-repeat; font-family: Verdana, Helvetica, sans-serif; font-size:12px; line-height:180%; color:#FFFFFF; margin: 0; padding: 0; }
  41. 41. Css headers 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
  42. 42. Met de steun van Werkomgeving
  43. 43. Werkomgeving <ul><li>Html Editors </li></ul><ul><li>Dreamweaver </li></ul><ul><li>Nvu </li></ul><ul><li>http://www.chami.com/html-kit/download/ </li></ul><ul><li>http://www.aptana.com/download_all.php </li></ul><ul><li>Firefox en plugins </li></ul><ul><li>http://www.mozilla-europe.org/en/products/firefox/ </li></ul><ul><li>http://chrispederick.com/work/web-developer/ </li></ul><ul><li>http://www.getfirebug.com/ </li></ul>
  44. 44. Met de steun van Links
  45. 45. Hyperlinks <ul><li>HTML : Hyperlinks : klikbare delen van de pagina die naar andere pagina’s / onderdelen verwijzen </li></ul><ul><li>Bijvoorbeeld : <a href=“test.htm”> Klik hier</a> (=interne hyperlink) </li></ul><ul><li>Bijvoorbeeld : <a href=&quot;http://www.google.be&quot;>deze site</a> (=externe hyperlink)‏ </li></ul>
  46. 46. Links <ul><li>Structuur: <a href=&quot;http://www.handleidinghtml.nl&quot;>Handleiding HTML</a> </li></ul><ul><li>Absolute en relatieve links </li></ul><ul><li>Ankers </li></ul><ul><li>Target </li></ul><ul><li>Base: voor 404 pagina </li></ul><ul><li>Title </li></ul><ul><li>mailto links: let op spam: encrypt of encode email adres via javascript vb http://automaticlabs.com/products/enkoderform </li></ul><ul><li>Accesskey </li></ul>
  47. 47. Css Links a:link, a:visited { text-decoration: none; color: #039; } a:hover {text-decoration: underline; background-color: #e4F4e3; color: #333; }
  48. 48. Met de steun van Afbeeldingen
  49. 49. Grafische elementen : enkele tips <ul><li>Resolutie : 72 dpi aanvaardbaar voor scherm </li></ul><ul><li>Grootte : 50 kb </li></ul><ul><li>Afbeeldingen in verschillende pagina’s gebruiken: caching </li></ul><ul><li>“ Slicen” van afbeeldingen </li></ul><ul><li>“ Clickable maps” (hotspots)‏ </li></ul>
  50. 50. Grafische elementen <ul><li>.jpg (Joint Photographics Expert Group)‏ </li></ul><ul><ul><li>Gecomprimeerd met verlies </li></ul></ul><ul><ul><li>Sterkte compressie instelbaar </li></ul></ul><ul><ul><li>16.7 miljoen kleuren </li></ul></ul><ul><li>. gif (Graphics Interchange Format)‏ </li></ul><ul><ul><li>Gecomprimeerd zonder verlies </li></ul></ul><ul><ul><li>256 kleuren </li></ul></ul><ul><ul><li>Transparantie mogelijk </li></ul></ul><ul><ul><li>Geanimeerde .gif mogelijk </li></ul></ul><ul><li>.png (Portable Network Graphics)‏ </li></ul><ul><ul><li>Gecomprimeerd zonder verlies </li></ul></ul><ul><ul><li>16.7 miljoen kleuren </li></ul></ul><ul><ul><li>Transparantie mogelijk </li></ul></ul><ul><ul><li>Geanimeerde foto's niet mogelijk (wel via .MNG)‏ </li></ul></ul><ul><ul><li>IE6: png fix: http://homepage.ntlworld.com/bobosola/pnghowto.htm </li></ul></ul>
  51. 51. Foto's en logo's <ul><li>Foto's </li></ul><ul><ul><li>Hoe groter formaat hoe beter </li></ul></ul><ul><ul><li>Verbeteren: contrast, niveaus, kleurdiepte </li></ul></ul><ul><ul><li>Resizen: bicubic smoother/sharper </li></ul></ul><ul><ul><li>Herknippen en verkleinen: .jpg 7 </li></ul></ul><ul><li>Logo's </li></ul><ul><ul><li>Liefst in vectoriële vorm (.eps): schaalbaar </li></ul></ul><ul><ul><li>Voorkeur .gif en .png: formaat, transparantie, kleuren, browserbeperkingen. </li></ul></ul>
  52. 52. Afbeeldingen <ul><li><img src=“logo.gif&quot; width=&quot;105&quot; height=&quot;125&quot; border=“0” alt=“De post&quot;> </li></ul><ul><li>img : Tag voor afbeeldingen width : breedte height : hoogte border : rand rondom afbeelding alt : alternatieve tekst </li></ul>
  53. 53. Combinatie hyperlink afbeelding <ul><li>Afbeelding aanklikbaar maken : plaats de <IMG> tag tussen <A HREF> en </A> tags </li></ul><ul><li><a href=“http://www.unizo.be&quot;> <img src=“logo-unizo.gif“ width=&quot;38&quot; height=&quot;34“ border=&quot;0&quot;></a> </li></ul>
  54. 54. Grafische elementen : editors <ul><li>Foto's: Adobe Photoshop, Fireworks en vele andere bij digitale camera's geleverde pakketten. </li></ul><ul><li>Grafisch: Adobe Illustrator, Corel Draw </li></ul><ul><li>Open source: Paint.net ( www.getpaint.net ), Gimp ( www.gimp.org ), Picasa, ... </li></ul>
  55. 55. Afbeeldingen vinden <ul><li>Professioneel: Corbis, Getty </li></ul><ul><li>Google afbeeldingen zoeken: copyright! </li></ul><ul><li>Vrij van copyright </li></ul><ul><ul><li>www.sxc.hu </li></ul></ul><ul><ul><li>http://www.masternewmedia.org/news/2005/04/01/where_to_find_free_images.htm </li></ul></ul><ul><ul><li>www.yotophoto.com : zoeken op kleur! </li></ul></ul>
  56. 56. Afbeeldingen html <ul><li><img src=“foto.jpg&quot; width=&quot;140&quot; height=&quot;100“ /> </li></ul><ul><li>Alt en title: accessibility </li></ul><ul><li>Link </li></ul><ul><li>Align: top, left, right + <br clear=&quot;all“ /> </li></ul><ul><li>Centreren: <div align =“center“></div> </li></ul><ul><li>Spacer vb min-width </li></ul>
  57. 57. Css afbeeldingen 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 fixeren */ }
  58. 58. Fotoalbums <ul><li>http://jalbum.net/ </li></ul><ul><li>http://www.stegmann.dk/mikkel/porta/ </li></ul><ul><li>http://www.bananalbum.com/ </li></ul><ul><li>http://www.airtightinteractive.com/simpleviewer/ : Flash </li></ul><ul><li>Indien je Photoshop cs2 hebt: de webalbums die je daarmee kunt maken en oa de extra Flash fotoalbums op http://www.adobe.com/support/downloads/detail.jsp?ftpID=2961   </li></ul>
  59. 59. Met de steun van Verschillen html & xhtml
  60. 60. Verschillen html vs xhtml <ul><li>IIn xhtml is DOCTYPE verplicht </li></ul><ul><li>AAlle elementen moeten gesloten worden </li></ul><ul><ul><li>Incorrect: <p>Dit is een paragraaf.<p>Dit is nog een paragraaf. </li></ul></ul><ul><ul><li>Correct: <p>Dit is een paragraaf.</p><p>Dit is nog een paragraaf.</p> </li></ul></ul><ul><li>OOok lege elementen moeten gesloten worden </li></ul><ul><ul><li>Incorrect: <br>, <hr>, <img> </li></ul></ul><ul><ul><li>Correct: <br />, <hr />, <img /> </li></ul></ul><ul><li>EElementen moeten correct genest worden </li></ul><ul><ul><li>Incorrect: <em><strong>Dit is tekst met nadruk.</em></strong> </li></ul></ul><ul><ul><li>Correct: <em><strong>Dit is tekst met nadruk.</strong></em> </li></ul></ul>
  61. 61. Html vs xhtml (vervolg)‏ <ul><li>AAttribuutwaarden moeten tussen aanhalingstekens </li></ul><ul><ul><li>Incorrect: <td rowspan=3> of <img src=&quot;plaatje.gif&quot; width=100 height=50> </li></ul></ul><ul><ul><li>Correct: <td rowspan=&quot;3&quot;> of <img src=&quot;plaatje.gif&quot; width=&quot;100&quot; height=&quot;50” /> </li></ul></ul><ul><li>AAlle elementen en attributen moeten klein geschreven worden </li></ul><ul><ul><li>Incorrect: <BODY><P ID=&quot;iets&quot;>Tekst</P></BODY> </li></ul></ul><ul><ul><li>Correct: <body><p id=&quot;iets&quot;>Tekst</p></body> </li></ul></ul><ul><li>AAttributen mogen niet geminimaliseerd worden </li></ul><ul><ul><li>Incorrect: <option selected>, <frame noresize>, <input checked> </li></ul></ul><ul><ul><li>Correct: <option selected=&quot;selected&quot;>, <frame noresize=&quot;noresize&quot;>, <input checked=&quot;checked“> </li></ul></ul>
  62. 62. Overschakelen html -> xhtml <ul><li>HTML Tidy </li></ul><ul><ul><li>http://cgi.w3.org/cgi-bin/tidy : online </li></ul></ul><ul><ul><li>http://tidy.sourceforge.net/ : download </li></ul></ul><ul><ul><li>Dreamweaver plugins </li></ul></ul><ul><ul><li>http://www.nypl.org/styleguide/xhtml/tips.html#dreamweaver </li></ul></ul>
  63. 63. Met de steun van Bestandsstructuur
  64. 64. Bestandsstructuur website <ul><li>Mappen </li></ul><ul><li>Css </li></ul><ul><li>Javascript </li></ul><ul><li>Images </li></ul><ul><li>Bestanden </li></ul><ul><li>Index.htm </li></ul><ul><li>404.htm & .htaccess </li></ul><ul><li>Robots.txt </li></ul><ul><li>Cgi-bin </li></ul>
  65. 65. Met de steun van <head>
  66. 66. <head> <ul><li>Karakterset </li></ul><ul><li><meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /> </li></ul><ul><li>Javascript </li></ul><ul><li><script language=&quot;JavaScript&quot; src=&quot;../javascript/scripts.js&quot; type=&quot;text/javascript&quot;></script> </li></ul>
  67. 67. <head> Beveiliging <ul><li><meta name=&quot;author&quot; content=&quot;info@koba.be, www.koba.be&quot; /> </li></ul><ul><li><meta http-equiv=&quot;imagetoolbar&quot; content=&quot;no“ /> </li></ul><ul><li><meta http-equiv=&quot;Window-target&quot; content=&quot;_top“ /> </li></ul><ul><li><meta name=&quot;MSSmartTagsPreventParsing&quot; content=&quot;true“ /> </li></ul><ul><li>Hotlink + index protection op server </li></ul>
  68. 68. <head> zoekmachines <ul><li><title>titel</title> </li></ul><ul><li><meta name=&quot;Keywords&quot; content=&quot;keywords&quot; /> </li></ul><ul><li><meta name=&quot;Description&quot; content=&quot;description&quot; /> </li></ul>
  69. 69. <head> css <ul><li><link href=&quot;../css/screen.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /> </li></ul><ul><li><link href=&quot;../css/print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /> </li></ul><ul><li>Belangrijk: volgorde </li></ul>
  70. 70. <head> meta tags <ul><li><meta http-equiv=“refresh&quot; content=&quot;4;url=http://www.domain.com/link.html” /> (of uur verversen)‏ </li></ul><ul><li><meta http-equiv=&quot;content-language&quot; content=“nl“ /> </li></ul><ul><li><meta name=&quot;robots&quot; content=“index, follow“ /> (of noindex, nofollow)‏ </li></ul>
  71. 71. <head> nutteloze meta tags <ul><li><!-- HTML Comments (treated as HTML markup) --> : tenzij voor uitleg </li></ul><ul><li><meta name=&quot;DC.title&quot; lang=&quot;en&quot; content=&quot;DC Dublin Core META Tags - DCMI Dublin Core Metadata Initiative“ /> </li></ul><ul><li><meta name=&quot;revisit-after&quot; content=&quot; 7 days “ /> </li></ul>
  72. 72. Robots.txt <ul><li>User-agent: * </li></ul><ul><li>Disallow: /cgi-bin/ </li></ul><ul><li>Disallow: /javascript/ </li></ul><ul><li>Disallow: /Templates/ </li></ul><ul><li>Disallow: /css/ </li></ul><ul><li>Bemerk </li></ul><ul><li>Gehoorzaamheid ? </li></ul><ul><li>Gevaar hele site niet geïndexeerd </li></ul>
  73. 73. CSS voor opmaakelementen <ul><li>3 manieren om css code toe te voegen </li></ul><ul><ul><li>Head </li></ul></ul><ul><ul><li>In code </li></ul></ul><ul><ul><li>Apart bestand </li></ul></ul><ul><li>Belang van volgorde </li></ul>
  74. 74. Met de steun van Tabellen
  75. 75. Tabellen html <ul><li><table> </li></ul><ul><li><th>titel</th> <tr> </li></ul><ul><li> <td>a1</td> </li></ul><ul><li> <td>a2</td> </li></ul><ul><li></tr> <tr> </li></ul><ul><li> <td>b1</td> </li></ul><ul><li> <td>b2</td> </li></ul><ul><li></tr> </table> </li></ul>
  76. 76. Tabellen html (vervolg)‏ <ul><li>th ipv td </li></ul><ul><li>Width </li></ul><ul><li>Colspan, rowspan </li></ul><ul><li>Align, valign </li></ul><ul><li>Cellpadding, cellspacing </li></ul><ul><li>Centreren tabel </li></ul><ul><li><caption>Dit is het bijschrift</caption> </li></ul>
  77. 77. Tabellen css <ul><li>table { border-collapse: collapse; border: 1px solid #C0C0C0; background-color: #FFFF99; width:300px; } </li></ul><ul><li>td { border: 1px solid #C0C0C0; text-align: center; color: #000000; background-color: #99FFCC; } </li></ul><ul><li>caption { caption-side: bottom; /* niet in IE */ </li></ul><ul><li> text-align: left; } </li></ul><ul><li>Achtergrondkleur </li></ul><ul><li>.kolomgrijs { background-color:#CCCCCC; } </li></ul><ul><li><td class=« kolomgrijs »> </li></ul>
  78. 78. Met de steun van Layout: Frames, Tabellen en CSS <ul><ul><li>Een grove structuur voor de pagina </li></ul></ul>
  79. 79. Layout met Frames <ul><li>Uitgevonden in 1996 door Netscape. </li></ul><ul><li>Het is sterk afgeraden frames te gebruiken </li></ul><ul><ul><li>Frames schaden het basisidee van het internet: 1 pagina = 1 url (daarom ook afgeraden door W3C)‏ </li></ul></ul><ul><ul><li>Zoekmachines, schermlezers voor slechtzienden, printers en pda's hebben allen problemen met frames. </li></ul></ul><ul><ul><li>Frames zijn een makkelijke oplossing om een vast menu op elke webpagina te krijgen en worden daarom nog vaak gebruikt op amateursites. </li></ul></ul>
  80. 80. Html frames <ul><li><frameset cols=&quot;150,*&quot;> </li></ul><ul><li><frame name=&quot;links“ scrolling=&quot;no&quot; noresize target=&quot;rboven&quot; src=&quot;links.htm&quot;> </li></ul><ul><li><frameset rows=&quot;20%,*&quot;> </li></ul><ul><li><frame name=&quot;rboven“ target=&quot;ronder&quot; src=&quot;boven.htm&quot;> </li></ul><ul><li><frame name=&quot;ronder“ src=&quot;rechtsonder.htm&quot;> </li></ul><ul><li></frameset> </frameset> </li></ul>
  81. 81. Layout met Tabellen <ul><li>Tabellen worden nog vaak gebruikt als basislayout voor webpagina's </li></ul><ul><li>Het W3C raadt het gebruik van tabellen als basis van layout af. Tabellen dienen voor “tabular data”. </li></ul><ul><li>Voordelen van tabellen als layout </li></ul><ul><ul><li>Grafisch designers kunnen hun ontwerp slicen en als puzzel terug samenstellen </li></ul></ul><ul><ul><li>Programmeurs kunnen resultaten van code makkelijk weergeven </li></ul></ul>
  82. 82. Tabellen <table width=&quot;93&quot;> <tr> <td width=&quot;85&quot;>eerste rij</td> </tr> <tr> <td width=&quot;85&quot;>tweede rij</td> </tr> </table>
  83. 83. Layout via div layers <ul><li>Cascading Style Sheets </li></ul><ul><li>Opmaak scheiden van inhoud </li></ul><ul><li>Precies positioneren van elementen (meer bekend als ‘layers’)‏ </li></ul><ul><li>Geïmplementeerd in browsers vanaf de 4.0 versies, maar nog correcties nodig. </li></ul><ul><li>CSS is de beste en meest recente manier om webpagina’s op te stellen. </li></ul>
  84. 84. Vast-stellingen <ul><li>Hoe ziet de surfer mijn webpagina? </li></ul><ul><li>Grootte van het browserscherm </li></ul><ul><ul><li>800x600, 1024x768, pda's, laptop wide, ... </li></ul></ul><ul><li>Verschillen tussen browsers </li></ul><ul><ul><li>Internet Explorer </li></ul></ul><ul><ul><li>Firefox (open source opvolger van Netscape)‏ </li></ul></ul><ul><ul><li>Opera, Safari </li></ul></ul><ul><li>Verschillen tussen versies </li></ul><ul><li>Verschillen tussen MAC en PC </li></ul>
  85. 85. Structuur: Lagen maken <div id=“container”> <div id=“head”> </div> <div id=“content”> </div> <div id=“nav”> </div> </div>
  86. 86. Centreren 1 kolom liquid Liquid layouts div#container{ margin-left: 10%; margin-right: 10%; }
  87. 87. 1 Kolom gecentreerd CSS met auto margin: #container { width:720px; margin: 0 auto; }
  88. 88. 1 Kolom gecentreerd + hacks CSS met auto margin: body { text-align:center; // IE 5/6 quirks mode hack min-width:760px; // Netscape 6 bug: body > wrapper } #container { width:720px; margin: 0 auto; text-align:left; // IE 5/6 quirks mode hack compensatie }
  89. 89. 1 Kolom gecentreerd (versie 2)‏ CSS met negatieve margin: #container { width:720px; position:relative; left:50%; margin-left:-360px; }
  90. 90. 2 Kolommen – fixed – xhtml <div id=“container&quot;> <div id=“header”> </div> <div id=“content”> <!-- Voor navigatie:screenreaders --> </div> <div id=“navigatie”> </div> <div id=“footer”> </div> </div>
  91. 91. 2 Kolommen – fixed – css #content { width:520px; float:right; } #navigatie { width:180px; float:left; } #footer { clear:both; }
  92. 92. 2 Kolommen fixed - padding #navigatie { padding-top: 20px; padding-bottom: 20px; } #navigatie li { padding-left: 20px; // box model bug IE5 padding-left: 20px; // box model bug IE5 } #content h1, #content h2, #content p { padding-right: 20px; // box model bug IE5 }
  93. 93. 3 Kolommen fixed – xhtml <div id=“content”> <div id=“hoofdcontent”> </div> <div id=“contentblok”> </div> </div>
  94. 94. 3 Kolommen fixed – css #hoofdcontent { width: 320px; float: left; } #contentblok { width:180px; float: right; }
  95. 95. 3 Kolommen fixed – padding #contentblok h1, #contentblok h2, #contentblok p { padding-left: 20px; // box model bug IE5 padding-right: 20px; // box model bug IE5 }
  96. 96. 3 Kolommen liquid – css #container { width: 85%; margin: 0 auto; } #navigatie { width: 23%; float: left; } #content { width: 75%; float: right; }
  97. 97. 3 Kolommen elastisch – css Default font-size = 16px 10px = 62.5% van 16px body { font-size: 62.5% }
  98. 98. 3 Kolommen elastisch – css #container { width: 72em; margin: 0 auto; } #navigatie { width: 18em; float: left; } #content { width: 52em; float: right; }
  99. 99. 3 Kolommen elastisch – css #hoofdcontent { width: 32em; float: left; } #contentblok { width: 18em; float: right; }
  100. 100. Hybrid liquid-elastisch – css #container { width: 72em; max-width: 100%; margin: 0 auto; } #navigatie { width: 18em; max-width: 23%; float: left; } #content { width: 52em; max-width: 75%; float: right; }
  101. 101. Hybrid liquid-elastisch – css #hoofdcontent { width: 32em; max-width: 66%; float: left; } #contentblok { width: 18em; max-width: 31%; float: right; }
  102. 102. Liquid en elastische afbeeldingen <ul><li>#header { </li></ul><ul><li>height: 171px; </li></ul><ul><li>background: url(images/hoofding.png) no-repeat left top; </li></ul><ul><li>} </li></ul><ul><li>Voordelen: </li></ul><ul><li>Cache </li></ul><ul><li>Schalen van de afbeelding bij elastische of liquid layouts (afbeelding op maximale grote nemen die niet volledig getoond wordt bij kleiner resizen)‏ </li></ul>
  103. 103. Header afbeelding alternatief #header { width: 100% overflow: hidden; } <div id=”header”> <img src=”images/hoofding.png” width=”1600” height=”171” /> </div>
  104. 104. Faux Columns 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; }
  105. 105. Met de steun van Positioning
  106. 106. Box model
  107. 107. Block level & Inline elements <ul><li>Block-level elements: <p>, <h1>, <div> </li></ul><ul><ul><li>Worden onder elkaar weergegeven </li></ul></ul><ul><ul><li>Inline via display:none; </li></ul></ul><ul><li>Inline elements: <strong>, <span>, <a> </li></ul><ul><ul><li>Worden naast elkaar weergegeven </li></ul></ul><ul><ul><li>block via display:block; </li></ul></ul><ul><li>Positionering: </li></ul><ul><ul><li>Normal flow </li></ul></ul><ul><ul><li>Float </li></ul></ul><ul><ul><li>Absolute positioning & fixed positioning </li></ul></ul>
  108. 108. Relative positioning <ul><ul><li>#box1 { </li></ul></ul><ul><ul><li>position: relative; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>background-color:red; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>#box2 { </li></ul></ul><ul><ul><li>position: relative; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>background-color:green; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>#box3 { </li></ul></ul><ul><ul><li>position: relative; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>background-color:blue; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  109. 109. Relative positioning <ul><ul><li>Volgt normal flow van andere blokken en positie tov elkaar. </li></ul></ul><ul><ul><li>Boxen staan gepositioneerd relatie tov elkaar. </li></ul></ul><ul><ul><li>#box2 { </li></ul></ul><ul><ul><li>position: relative; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>top:20px; </li></ul></ul><ul><ul><ul><ul><ul><li>left:20px; </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>z-index:2; </li></ul></ul></ul></ul></ul><ul><ul><li>background-color:green; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  110. 110. Absolute positioning <ul><ul><li>Element neemt geen plaats in. </li></ul></ul><ul><ul><li>Andere elementen houden er geen rekening mee </li></ul></ul><ul><ul><li>Zwevend </li></ul></ul><ul><ul><li>Positie enkel tov ancestor/parent element </li></ul></ul><ul><ul><li>z-index </li></ul></ul><ul><ul><li>#box2 { </li></ul></ul><ul><ul><li>position: absolute; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>top:20px; </li></ul></ul><ul><ul><li>left:20px; </li></ul></ul><ul><ul><li>z-index:2; </li></ul></ul><ul><ul><li>background-color:green; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  111. 111. Fixed positioning <ul><ul><li>Gelijkaardig principe als absolute positioning </li></ul></ul><ul><ul><li>Positie enkel tov venster zelf </li></ul></ul><ul><ul><li>Usability: menu of invulformulier blijft steeds zichtbaar </li></ul></ul><ul><ul><li>Niet ondersteund door IE6 </li></ul></ul><ul><ul><li>#box2 { </li></ul></ul><ul><ul><li>position: fixed; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>top:20px; </li></ul></ul><ul><ul><li>left:20px; </li></ul></ul><ul><ul><li>z-index:2; </li></ul></ul><ul><ul><li>background-color:green; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  112. 112. Floating <ul><ul><li>Boxen kunnen links of rechts gefloat worden </li></ul></ul><ul><ul><li>Als box waarin de 3 boxen vervat zit niet breed genoeg is valt de derde box eronder </li></ul></ul><ul><ul><li>Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefloate box mag zijn. </li></ul></ul><ul><ul><li>#box2 { </li></ul></ul><ul><ul><li>float:right; </li></ul></ul><ul><ul><li>width:150px; </li></ul></ul><ul><ul><li>height: 100px; </li></ul></ul><ul><ul><li>background-color:green; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  113. 113. Clear <ul><ul><li>Voorbeeld: Image met paragraaf ernaast en eronder. Vermijden van “wezen”. </li></ul></ul><ul><ul><li>Clear: left, right, both, none: geeft aan welke kant van een box niet naast een gefloate box mag zijn. </li></ul></ul><ul><ul><li>img { </li></ul></ul><ul><ul><li>float:left; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  114. 114. Problemen met float <ul><ul><li>Voorbeeld: Image met tekst rechts </li></ul></ul><ul><ul><li>.news { </li></ul></ul><ul><ul><li>background-color:gray; </li></ul></ul><ul><ul><li>border:solid 1px black; </li></ul></ul><ul><ul><li>float:left; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.news img { </li></ul></ul><ul><ul><li>float:left; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.news p { </li></ul></ul><ul><ul><li>float:right; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  115. 115. Problemen met float <ul><ul><li>Oplossing 1: clear </li></ul></ul><ul><ul><ul><li>CSS: .clear { </li></ul></ul></ul><ul><ul><ul><li>clear:both; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>XHTML: <div class=”clear”></div> </li></ul></ul></ul><ul><ul><ul><li>Nadeel: extra markup </li></ul></ul></ul><ul><ul><li>Oplossing 2: box zelf floaten </li></ul></ul><ul><ul><li>CSS: .news {float:left;} </li></ul></ul><ul><ul><li>Nadeel: volgend element is ook beïnvloed door float => alles floaten en clearen in de footer </li></ul></ul><ul><ul><li>Oplossing 3: </li></ul></ul><ul><ul><ul><li>Html: <br clear=&quot;all&quot; /> </li></ul></ul></ul><ul><ul><ul><li>Nadeel: oude techniek, extra markup en extra hoogte van br </li></ul></ul></ul><ul><ul><li>Meer oplossingen: http://www.positioniseverything.net/easyclearing.html </li></ul></ul>
  116. 116. Met de steun van Lijsten
  117. 117. Styling van lijsten <ul><ul><li>ul { margin:0; </li></ul></ul><ul><ul><li>padding:0; </li></ul></ul><ul><ul><li>list-style-type:none; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>li { background: url(bullet.gif) no-repeat 0 50%; </li></ul></ul><ul><ul><li>padding-left:30px; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  118. 118. Met de steun van Navigatie
  119. 119. Opstellen inhoudstafel en menu <ul><li>Usability: snel informatie vinden </li></ul><ul><li>Accessibility </li></ul><ul><ul><li>Slechtzienden </li></ul></ul><ul><ul><li>Mobiel internet </li></ul></ul><ul><ul><li>Zoekmachines </li></ul></ul><ul><li>Menu positie: boven, links, rechts, elders </li></ul><ul><li>Inhoudstafel opstellen </li></ul>
  120. 120. Listamatic: css menu’s met lijsten <ul><li>Zie: </li></ul><ul><li>http://css.maxdesign.com.au/listamatic/ </li></ul><ul><li>Opmerkingen: </li></ul><ul><li>list-style-type </li></ul><ul><li>Achtergronden via background </li></ul><ul><li>Browser support chart </li></ul><ul><li>Horizontale lijsten: display: block; float: left; of display: inline; (geen IE5) </li></ul>
  121. 121. Vertikale navigatie <ul><ul><li><ul> </li></ul></ul><ul><ul><li><li class=&quot;first selected&quot;><a href=&quot;home.htm&quot;>Home</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;about.htm&quot;>About</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;services.htm&quot;>Our Services</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;work.htm&quot;>Our Work</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;news.htm&quot;>News</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;contact.htm&quot;>Contact</a></li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul>
  122. 122. Vertikale navigatie css <ul><ul><li>ul { </li></ul></ul><ul><ul><li>margin: 0; </li></ul></ul><ul><ul><li>padding: 0; </li></ul></ul><ul><ul><li>list-style-type: none; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>li { </li></ul></ul><ul><ul><li>display: inline: /* :hack: Removes large gaps in IE/Win */ </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>a { </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>width: 200px; </li></ul></ul><ul><ul><li>height: 39px; </li></ul></ul><ul><ul><li>line-height: 39px; </li></ul></ul><ul><ul><li>color: #000; </li></ul></ul><ul><ul><li>text-decoration: none; </li></ul></ul><ul><ul><li>background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom; </li></ul></ul><ul><ul><li>text-indent: 50px; </li></ul></ul><ul><ul><li>text-transform: uppercase; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  123. 123. Vertikale navigatie css <ul><ul><li>a:hover, .selected a { </li></ul></ul><ul><ul><li>background-color: #369; </li></ul></ul><ul><ul><li>background-position: right bottom; </li></ul></ul><ul><ul><li>color: #fff; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>.first a { </li></ul></ul><ul><ul><li>height: 40px; </li></ul></ul><ul><ul><li>line-height: 40px; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  124. 124. Horizontale navigatie html <ul><ul><li><ul> </li></ul></ul><ul><ul><li><li class=&quot;first&quot;><a href=&quot;#&quot;>Home</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>About</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>News</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>Products</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>Services</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>Clients</a></li> </li></ul></ul><ul><ul><li><li><a href=&quot;#&quot;>Case Studies</a></li> </li></ul></ul><ul><ul><li></ul> </li></ul></ul>
  125. 125. Horizontale navigatie css <ul><ul><li>ul { </li></ul></ul><ul><ul><li>margin: 0; </li></ul></ul><ul><ul><li>padding: 0; </li></ul></ul><ul><ul><li>float: left; </li></ul></ul><ul><ul><li>width: 720px; </li></ul></ul><ul><ul><li>background: #FAA819 url(images/mainNavBg.gif) repeat-x; </li></ul></ul><ul><ul><li>list-style: none; </li></ul></ul><ul><ul><li>text-transform: uppercase; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>ul li { </li></ul></ul><ul><ul><li>float: left; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  126. 126. Horizontale navigatie css <ul><ul><li>ul a { </li></ul></ul><ul><ul><li>padding: 0 2em; </li></ul></ul><ul><ul><li>line-height: 2.1em; </li></ul></ul><ul><ul><li>background: url(images/mainNavBorder.gif) repeat-y left top; </li></ul></ul><ul><ul><li>text-decoration: none; </li></ul></ul><ul><ul><li>color: #fff; </li></ul></ul><ul><ul><li>float: left; </li></ul></ul><ul><ul><li>display: block; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>ul a:hover { </li></ul></ul><ul><ul><li>color: #333; </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>ul .first a { </li></ul></ul><ul><ul><li>background: none; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  127. 127. Suckerfish drop down menu <ul><li>Zie: </li></ul><ul><li>http://www.htmldog.com/articles/suckerfish/dropdowns/ </li></ul><ul><li>Volledig css gebaseerd (met javascript voor IE)‏ </li></ul><ul><li>Volledig zichtbaar voor zoekmachines </li></ul><ul><li>Probleemloos uitbreidbaar naar verschillende niveaus </li></ul>
  128. 128. Met de steun van Formulieren
  129. 129. Wat zijn formulieren Gegevens verkrijgen van surfers
  130. 130. Formulieren aanmaken <FORM name=&quot;enquete&quot; method=&quot;post&quot; action=&quot;mailto:hansrossel@koba.be&quot;> <P>Familienaam <INPUT type=&quot;text&quot; name=&quot;familienaam&quot; size=&quot;50&quot; maxlength=&quot;50“ /> </P> </FORM>
  131. 131. Input tekst <form> Voornaam: <input type=&quot;text&quot; name=“voornaam“ /> <br> Naam: <input type=&quot;text&quot; name=“naam“ /> <textarea name=“bericht&quot; cols=&quot;40&quot; rows=&quot;5“></textarea> </form>
  132. 132. Input radio buttons <form> <input type=&quot;radio&quot; name=“geslacht&quot; value=“man“ /> Man <br> <input type=&quot;radio&quot; name=“geslacht&quot; value=“vrouw“ /> Vrouw </form>
  133. 133. Input checkbox <form> <input type=&quot;checkbox&quot; name=“fiets“ /> Ik heb een fiets <br> <input type=&quot;checkbox&quot; name=“auto“ /> Ik heb een auto </form>
  134. 134. Drop down menu <form> <select name=“autos&quot;> <option value=&quot;volvo&quot;>Volvo</option> <option value=&quot;volvo&quot;>Volvo</option> <option value=&quot;saab&quot;>Saab</option> <option value=&quot;fiat&quot; selected=&quot;selected&quot;>Fiat</option> <option value=&quot;audi&quot;>Audi</option> </select> </form>
  135. 135. Formulieren css: Submit <style tyle=text/css> input.red { background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;} </style> <input class=&quot;red&quot; type=&quot;submit&quot; value=“Verzenden“ />
  136. 136. Formulieren css vervolg #submit{ background:#BC4819; color:#FFF; width:auto; padding: 2px 10px; border:none; }
  137. 137. Formulieren css: Input <style tyle=text/css> input.pink { background-color: #ffcccc; font-size: 10px;} </style> <input class=&quot;pink&quot; type=&quot;text&quot; name=“voornaam&quot; size=&quot;20“ />
  138. 138. Formulieren css: Textarea <style tyle=text/css> textarea.violet { background-color: #ccccff;} </style> <textarea class=&quot;violet&quot; rows=&quot;4&quot; name=“uwvraag&quot; cols=&quot;20&quot;>
  139. 139. Formulieren css input, textarea{ font-family: &quot;Lucida Sans Unicode&quot;,&quot;Lucida Sans&quot;, &quot;Trebuchet MS&quot;, Arial, Helvetica, sans-serif; font-size:1em; border: 1px solid #CDC6B2; border-left-width: 3px; padding:2px 0; width: 240px; overflow:hidden; }
  140. 140. CSS checkbox, drop down <input class=&quot;red&quot; type=&quot;radio&quot; value=&quot;V1&quot; checked name=&quot;R1&quot;> <option class=&quot;pink&quot; value= “introhtml.htm&quot;>- Intro to HTML</option>
  141. 141. Verwerking van formulieren <ul><li>Verstuurd via e-mail </li></ul><ul><li>Verwerking via CGI-scripts (nms)‏ </li></ul><ul><li>Verwerking via Server Side scripttalen (ASP – PHP – ColdFusion - …)‏ </li></ul><ul><li>Afhankelijk van wat de provider aanbiedt </li></ul>
  142. 142. Volledig formulier <form name=&quot;example&quot; id=&quot;example&quot; action=&quot;http://www.website.be/cgi-bin/berichtje.cgi&quot; method=&quot;post&quot; /> <input type=&quot;hidden&quot; name=&quot;subject&quot; value=&quot;Vraag via contactpagina op website&quot; /> <input type=&quot;hidden&quot; name=&quot;recipient&quot; value=&quot;1&quot; /> <input type=&quot;hidden&quot; name=&quot;redirect&quot; value=&quot;http://www.website.be/bevestiging.htm&quot; /> <input type=&quot;hidden&quot; name=&quot;env_report&quot; value=&quot;REMOTE_HOST,REMOTE_ADDR,REMOTE_USER,HTTP_USER_AGENT,HTTP_REFERER&quot; /> <p><label for=&quot;name&quot;>Naam</label> <input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot; /></p> <p><label for=&quot;email&quot;>E-mailadres</label> <input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot; /></p> <p><label for=&quot;tel&quot;>Telefoon</label> <input type=&quot;text&quot; id=&quot;tel&quot; name=&quot;tel&quot; /></p> <p><label for=&quot;message&quot;>Bericht</label> <textarea id=&quot;message&quot; name=&quot;message&quot; cols=&quot;40&quot; rows=&quot;5&quot;></textarea><br /></p> <p><input type=&quot;submit&quot; id=&quot;submit&quot; name=&quot;submit&quot; value=&quot;verzenden&quot; style=&quot;margin-top:10px;&quot; /></p> </form>
  143. 143. Contrôle formulier Kan server side of client side (of beide)‏ Server side: nms Client side http://www.quirksmode.org/dom/error.html
  144. 144. NMS Formmail <ul><li>Zie: http://nms-cgi.sourceforge.net/scripts.shtml </li></ul><ul><li>Basisinstellingen : </li></ul><ul><li>$max_recipients = 2; </li></ul><ul><li>$mailprog = '/usr/sbin/sendmail -oi -t'; </li></ul><ul><li>$postmaster = 'hansrossel@yahoo.com'; </li></ul><ul><li>@referers = qw(wmw.be 216.193.202.92 localhost); </li></ul><ul><li>@allow_mail_to = qw(hansrossel@yahoo.com [email_address] ); </li></ul><ul><li>%recipient_alias = ('1' => 'hansrossel@yahoo.com', '2' => 'info@koba.be'); </li></ul><ul><li>$send_confirmation_mail = 0; </li></ul>
  145. 145. NMS Formmail <ul><li>Beveiliging spambots: oa « berichtje », geen bevestigingsmail, recente versie gebruiken, … </li></ul><ul><li>Chmod: 755 </li></ul><ul><ul><li>aanvinken: owner: read, write, execute group: read, execute other: (world) read execute </li></ul></ul>
  146. 146. Email formulier antwoord Hieronder is het formulier dat verstuurd werd door ( [email_address] ) 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
  147. 147. Met de steun van Media invoegen
  148. 148. <embed> en <object> 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).
  149. 149. Grafische elementen : bewegende beelden <ul><li>Animated gif </li></ul><ul><li>.swf bestanden : vectorgebaseerde animaties door middel van bv. Macromedia Flash : ( www.macromedia.com )‏ </li></ul><ul><li>.mpg / .avi / … : filmmateriaal, maar grotere bestanden </li></ul>
  150. 150. Muziek toevoegen aan site <object width= &quot;300&quot; height= &quot;42&quot; > <param name= &quot;src&quot; value= “housefinch.mp3&quot; > <param name= &quot;autoplay&quot; value= &quot;true&quot; > <param name= &quot;controller&quot; value= &quot;true&quot; > <param name= &quot;bgcolor&quot; value= &quot;#FF9900&quot; > <embed src= “housefinch.mp3&quot; autostart= &quot;true&quot; loop= &quot;false&quot; width= &quot;300&quot; height= &quot;42&quot; controller= &quot;true&quot; bgcolor= &quot;#FF9900&quot; > </embed> </object> http://digitalmedia.oreilly.com/2005/02/23/mp3_embed.html
  151. 151. Quicktime filmpjes <ul><li>http://www.handleidinghtml.nl/html/objecten/objecten07.html </li></ul><ul><li>http://developer.apple.com/quicktime/quicktimeintro/tools/embed2.html </li></ul><ul><li>Voorbeeld </li></ul><ul><li><OBJECT CLASSID=&quot;clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B&quot; WIDTH=&quot;136&quot; HEIGHT=&quot;176&quot; TYPE=&quot;video/quicktime&quot; CODEBASE=&quot;http://www.apple.com/qtactivex/qtplugin.cab&quot;> </li></ul><ul><li><PARAM NAME=&quot;src&quot; VALUE=&quot;test.mov&quot;> </li></ul><ul><li><PARAM NAME=&quot;autoplay&quot; VALUE=&quot;false&quot;> </li></ul><ul><li><PARAM NAME=&quot;volume&quot; VALUE=&quot;25&quot;> </li></ul><ul><li><EMBED SRC=&quot;test.mov&quot; WIDTH=&quot;136&quot; HEIGHT=&quot;176&quot; TYPE=&quot;video/quicktime&quot; PLUGINSPAGE=&quot;http://www.apple.com/quicktime/download/&quot; AUTOPLAY=&quot;false&quot; VOLUME=&quot;25&quot;></EMBED> </li></ul><ul><li></OBJECT> </li></ul>
  152. 152. Enkel met <object> http://alistapart.com/articles/byebyeembed Vermijden van de niet standaard <embed> te gebruiken. Alternatieve oplossing voor de dubbele oplossing <object> én <embed>
  153. 153. Enkel <object> Quicktime <object classid=&quot;clsid:02BF25D5-8C17-4B23-BC80- » D3488ABDDC6B&quot; codebase=&quot;http://www.apple.com/qtactivex/qtplugin.cab&quot; width=&quot;320&quot; height=&quot;260&quot;> <param name=&quot;src“ value=&quot;http://www.sarahsnotecards.com/catalunyalive/ » diables.mov&quot; /> <param name=&quot;controller&quot; value=&quot;true&quot; /> <param name=&quot;autoplay&quot; value=&quot;false&quot; /> <!--[if !IE]>--> <object type=&quot;video/quicktime“ data= &quot;http://www.sarahsnotecards.com/catalunyalive/” “diables.mov&quot; width=&quot;320&quot; height=&quot;260&quot;> <param name=&quot;autoplay&quot; value=&quot;false&quot; /> <param name=&quot;controller&quot; value=&quot;true&quot; /> </object> <!--<![endif]--> </object>
  154. 154. Via Youtube <object width=&quot;425&quot; height=&quot;350&quot;> <param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/synxFmQJ_0A&quot;></param> <param name=&quot;wmode&quot; value=&quot;transparent&quot;></param> <embed src=&quot;http://www.youtube.com/v/synxFmQJ_0A&quot; type=&quot;application/x-shockwave-flash&quot; wmode=&quot;transparent&quot; width=&quot;425&quot; height=&quot;350&quot;></embed> </object>
  155. 155. Via Google video <embed style=&quot;width:400px; height:326px;&quot; id=&quot;VideoPlayback&quot; type=&quot;application/x-shockwave-flash&quot; src=&quot;http://video.google.com/googleplayer.swf?docId=3913745262811179417&amp;hl=en-CA&quot;> </embed>
  156. 156. Flash filmpjes <OBJECT CLASSID=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; WIDTH=&quot;128&quot; HEIGHT=&quot;96&quot; TYPE=&quot;application/x-shockwave-flash&quot; CODEBASE=&quot;http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0&quot;> <PARAM NAME=&quot;movie&quot; VALUE=&quot;test.swf&quot;> <PARAM NAME=&quot;play&quot; VALUE=&quot;true&quot;> <PARAM NAME=&quot;loop&quot; VALUE=&quot;true&quot;> <PARAM NAME=&quot;quality&quot; VALUE=&quot;high&quot;> <EMBED SRC=&quot;test.swf&quot; WIDTH=&quot;128&quot; HEIGHT=&quot;96&quot; TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;http://www.macromedia.com/go/getflashplayer&quot; PLAY=&quot;true&quot; LOOP=&quot;true&quot; QUALITY=&quot;high&quot;></EMBED> </OBJECT>
  157. 157. Microsoft patent probleem <ul><li>Voor Flash, Quicktime, …: « click to activate and use this control… » </li></ul><ul><li>Adobe Flash Player, Authorware Player, Shockwave Player, Adobe Reader, Sun Java, Apple QuickTime, RealNetworks RealPlayer en andere ActiveX controls. </li></ul><ul><li>Oplossing via javascript: </li></ul><ul><ul><li>http://www.apple.com/quicktime/tutorials/embed.html </li></ul></ul><ul><ul><li>http://www.adobe.com/designcenter/popular_topics/click_to_activate/ </li></ul></ul>
  158. 158. Iframe: <ul><li>Insluiten van andere html documenten </li></ul><ul><li><IFRAME SRC=&quot;iframes-vb.html&quot; WIDTH=&quot;275&quot; HEIGHT=&quot;100&quot; FRAMEBORDER=&quot;0&quot; ALIGN=&quot;left&quot; STYLE=&quot;margin-right: 20px;“> </li></ul><ul><li></IFRAME> </li></ul><ul><li>http://www.handleidinghtml.nl/html/frames/frames08.html </li></ul>
  159. 159. Met de steun van Schermformaten
  160. 160. Schermformaten <ul><li>Standaard 1024x768 </li></ul><ul><ul><li>Favorieten open? </li></ul></ul><ul><ul><li>Bovenmenu aftrekken </li></ul></ul><ul><ul><li>Toolbar </li></ul></ul><ul><ul><li>Laptop widescreen </li></ul></ul><ul><ul><li>Oudere pc’s 800x600, nieuwere 1152x… </li></ul></ul><ul><ul><li>Verschillen mac/pc </li></ul></ul><ul><ul><li>Verschillen IE en Firefox </li></ul></ul><ul><ul><li>Eventueel oplossen met styleswitcher </li></ul></ul>
  161. 161. Styleswitcher http://www.alistapart.com/stories/alternate/ <script type=&quot;text/javascript&quot; src=&quot;/scripts/styleswitcher.js&quot;></script> <a href=&quot;#&quot; onclick=&quot;setActiveStyleSheet('default'); return false;&quot;>change style to default</a> <a href=&quot;#&quot; onclick=&quot;setActiveStyleSheet('paul'); return false;&quot;>change style to paul</a> http://www.csszengarden.com
  162. 162. Met de steun van CSS Hacks
  163. 163. Box model Verschil tussen traditionele en W3C interpretatie van content/padding/margin bij een box. Oplossingen 1. CSS3 en Mozilla specificaties: http://www.quirksmode.org/css/box.html 2. Box model hack voor IE5 en 5.5: http://www.afterimage.nl/box-model-hack.htm
  164. 164. Tantek (box model) hack #box{   border: 10px solid black;   width: 770px; /* IE5.x/win sees this.. */   voice-family: &quot;&quot;}&quot;&quot;;   voice-family: inherit;   width: 750px; /* ..but not this &quot;standards&quot; width value.. */   }   html>body #box{   width: 750px; /* ..or this reinforcement of the standards width. */ }
  165. 165. Escape hack De escape hack is een nieuwere en eenvoudiger versie van de Tantek hack die juist hetzelfde doet: een andere breedte definiëren voor Internet Explorer 5 en 5.5 #box{   width: 770px;   wid th: 750px; /* IE 5 en 5.5 zien dit niet*/ }
  166. 166. CSS Hacks en IE7 Let op: Hacks moeten voorwaarts compatibel zijn! http://www.positioniseverything.net/articles/ie7-dehacker.html
  167. 167. Conditional comments voor IE <!--[if IE]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks.css&quot; /> <![endif]--> <!--[if IE 5]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks-5.css&quot; /> <![endif]--> <!--[if lt IE 8]> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iehacks.css&quot; /> <![endif]--> Voor IE vanaf versie 5: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp
  168. 168. Met de steun van Web 2.0
  169. 169. Web 2.0
  170. 170. Web 2.0 <ul><li>http://en.wikipedia.org/wiki/Web_2 </li></ul><ul><li>Kenmerken </li></ul><ul><li>Interactieve inbreng van bezoekers </li></ul><ul><li>Pagina’s moeten niet refreshen </li></ul><ul><li>Geen plugins nodig </li></ul><ul><li>User oriented </li></ul><ul><li>Databases combineren: </li></ul><ul><ul><li>Mashups: http://www.programmableweb.com/mashups </li></ul></ul><ul><ul><li>api’s: ht tp://code.google.com </li></ul></ul>
  171. 171. Web 2.0 websites <ul><li>Gebruik van Ajax: </li></ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul><ul><li>Scriptaculous: http://script.aculo.us : web 2.0 javascript. Showpiece: http://www.gucci.com </li></ul><ul><li>Ruby on rails: ontwikkelingsplatform http://www.rubyonrails.org </li></ul><ul><li>Nieuwe ontwikkelingen volgen: </li></ul><ul><ul><li>Blog: http://www.techcrunch.com </li></ul></ul><ul><ul><li>Podcast: http://www.twit.tv/ITN </li></ul></ul>
  172. 172. Ajax <ul><li>Gebaseerd op volgende technologieën: </li></ul><ul><li>Javascript: uitgebreid </li></ul><ul><li>CSS </li></ul><ul><li>DOM: objecten die de structuur vormen van webpagina’s </li></ul><ul><li>XMLHttpRequest-object: op achtergrond gegevens van de webserver ophalen in XML of tekst formaat. </li></ul>
  173. 173. Met de steun van Lanceren van de site
  174. 174. FTP <ul><li>Uploaden van de webpagina : </li></ul><ul><ul><li>Wat is het ftp-adres? </li></ul></ul><ul><ul><li>Wat is uw gebruikersnaam? </li></ul></ul><ul><ul><li>Wat is uw wachtwoord? </li></ul></ul><ul><li>FTP-programma’s : bv. Filezilla ( http://filezilla.sourceforge.net/ ), CuteFTP </li></ul>
  175. 175. Cuteftp <ul><li>Een FTP-programma om bestanden te uploaden naar uw webruimte </li></ul>
  176. 176. Pagina’s testen online <ul><ul><li>www.browsershots.org </li></ul></ul><ul><ul><li>Webdeveloper toolbar: https://addons.mozilla.org/firefox/60/ </li></ul></ul><ul><ul><li>Broken links: http://home.snafu.de/tilman/xenulink.html </li></ul></ul><ul><ul><li>Validators </li></ul></ul><ul><ul><ul><li>html http://validator.w3.org/ </li></ul></ul></ul><ul><ul><ul><li>css: http://jigsaw.w3.org/css-validator/ </li></ul></ul></ul>
  177. 177. Met de steun van Lanceren van de site Promotie & Zoekmachines
  178. 178. Site-bekendheid <ul><li>Onderschat traditionele reclame niet! </li></ul><ul><li>Briefwisseling – contactkaartjes – </li></ul><ul><li>Forums, nieuwsgroepen, blogs </li></ul><ul><li>Zoekmachines en linksites </li></ul><ul><li>Pay per Click: Google Adwords </li></ul><ul><li>Klantenservice – productondersteuning bieden via internet: handleidingen downloaden, ... </li></ul>
  179. 179. Metatags <ul><li>Meta-informatie (informatie over informatie op de pagina) gedefinieerd in <HEAD> </li></ul><ul><li>Zoekmachine / Zoekdirectory gebruikt de info in Meta-tags </li></ul><ul><li>Voorbeelden : </li></ul><ul><li><META http-equiv=“refresh” content=“5;URL=www.youiware.be”> </li></ul><ul><li><META name=&quot;description&quot; content=“website over auto, velo, moto&quot;> </li></ul>
  180. 180. Gevonden door de zoekmachine <ul><li>Inkomende links, linkopbouw, linktekst </li></ul><ul><li>Metatag “keywords” : niet gebruikt </li></ul><ul><li>Metatag “description” : beschrijving </li></ul><ul><li>Title tags gebruiken! </li></ul><ul><li>Bovenste gedeelte van de <BODY>! </li></ul><ul><li>Opgepast met grafische onderdelen, javascript, Flash, frames, image maps </li></ul><ul><li><ALT> tags gebruiken, <NOFRAMES> gebruiken </li></ul><ul><li>Sleutelworden en synoniemen consistent gebruiken in content en code. </li></ul>
  181. 181. Spam-indexing <ul><li>Herhaling van bepaalde trefwoorden in commentaartags, bv. <!– ferrari, ferrari, ferrari, ferrari --!> </li></ul><ul><li>Doorway pages </li></ul><ul><li>Tekst in het <BODY>-gedeelte van de tekst onzichtbaar maken d.m.v. kleur </li></ul><ul><li>Linkfarms </li></ul><ul><li>Google bombing – keyword spamming </li></ul><ul><li>Zie www.google.nl/webmasters/ </li></ul>
  182. 182. Met de steun van Speciale technieken
  183. 183. Opacity http://www.mandarindesign.com/opacity.html Verschillende opacity technieken
  184. 184. CSS Image gallery Verschillende gallery technieken
  185. 185. CSS Sprites http://www.alistapart.com/articles/sprites
  186. 186. Combinatie met php ddd
  187. 187. Advanced selectors External links

×