Powerpoint Htmlcss

Erkend door de

Vlaamse regering Met de steun van

HTML & CSS

hansrossel@koba.be

www.koba.be

Erkend door de

Geschiedenis

Pre-HistoriePre-Historie 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.

HistorieHistorie 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

Recente geschiedenisRecente geschiedenis 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-design

8 april 2014: Einde van IE6: https://www.modern.ie/en-us/ie6countdown

Te onthoudenTe onthouden 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

Planning website project

Project stappenProject stappenAnalyse fase Doelen, doelgroep (user personas), planning, team Keuze domeinnaam en hosting

Voorbereidende fase Informatie architectuur: sitemap, trefwoordena, navigatie,

inhoudstypes Wireframes Interactie design

Project stappenProject stappenOntwikkelingsfase Grafsch ontwerp (photoshop) Xhtml/css prototype Programmatie CMS systeem

Testfase: bugfxes, usability

Lanceringsfase

Onderhoudsfase: backups & updates

Erkend door de

Domeinnaam

Domeinnaam kiezenDomeinnaam kiezen 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

Domeinnaam beschikbaar?Domeinnaam beschikbaar?

Voor .com, .net, .org domeinnamen

http://whois.domaintools.com/

Voor .be domeinenwww.dns.be

Domein aanvragen & instellenDomein aanvragen & instellen 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

Hosting - Webruimte

Waar komen de pagina’s terecht?Waar komen de pagina’s terecht?

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

Belangrijke elementenBelangrijke elementen 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)

ControlepaneelControlepaneel Cpanel Plesk Webmin Open Shift Eigen controlepaneel van het

hostingbedrijf

Erkend door de

HTML & CSS

De taal van webpagina’s

Wat is HTML?Wat is HTML? 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

Html paginaHtml pagina

Elementen (Tags)Elementen (Tags) 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

HTML AttributenHTML Attributen 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.

CSS tag opmaak voorbeeldCSS tag opmaak voorbeeld 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?

Html + cssHtml + css

Erkend door de

Basis elementen webpagina

Index.htmlIndex.html De structuur van een webpagina :

<!DOCTYPE html>

<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

Doctype

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

Tekst invoegen

TekstenTeksten 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

Body instellingen

KleurenKleuren RGB – monitor : Red Green Blue

FF 00 00 : volledig rood, geen groen, geen blauw00 FF 00 : geen rood, volledig groen, geen blauw

Css bodyCss bodybody {

background-color: #404040;

font-family: Verdana, Helvetica, sans-serif;

font-size:12px;

line-height:180%;

color:#ffffff;

margin: 0;

padding: 0;

Css headersCss headersh1 {

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

Werkomgeving

WerkomgevingWerkomgevingHtml Editors Dreamweaver Sublime text

Firefox en plugins https://getfrebug.com https://addons.mozilla.org/en-US/frefox/addon/web-deve

loper/

Erkend door de

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

LinksLinks Structuur: <a href="http://www.handleidinghtml.nl">Handleiding

HTML</a>

Absolute en relatieve links

Ankers

Target

Base: voor 404 pagina

mailto links: let op spam: encrypt of encode email adres via

javascript vb http://automaticlabs.com/products/enkoderform

Accesskey

Css LinksCss Linksa:link, a:visited {

text-decoration: none;

color: #039;

a:hover {

text-decoration: underline;

background-color: #e4F4e3;

color: #333;

Erkend door de

Afbeeldingen

Grafsche elementen : enkele tipsGrafsche elementen : enkele tips Resolutie : 72 dpi aanvaardbaar voor scherm Grootte : 50 kb Afbeeldingen in verschillende pagina’s gebruiken:

caching “Slicen” van afbeeldingen “Clickable maps” (hotspots)

Grafsche elementenGrafsche elementen .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

Foto's en logo'sFoto's en logo's 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.

AfbeeldingenAfbeeldingen <img src=“logo.gif" width="105" height="125"

border=“0” alt=“De post">

img : Tag voor afbeeldingenwidth : breedteheight : hoogteborder : rand rondom afbeeldingalt : alternatieve tekst

Combinatie hyperlink afbeeldingCombinatie hyperlink afbeelding Afbeelding aanklikbaar maken :

plaats de <img> tag tussen <a href> en </a> tags

Grafsche elementen : editorsGrafsche elementen : editors 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, ...

Afbeeldingen vindenAfbeeldingen vinden• Professioneel: – http://www.istockphoto.com– http://www.shutterstock.com

• Google afbeeldingen zoeken: copyright!• Vrij van copyright– http://www.freeimages.com–Www.fickr.com (soms)

Afbeeldingen htmlAfbeeldingen html <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)

Css afbeeldingenCss afbeeldingenimg {

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

Erkend door de

Verschillen html & xhtml stijl

Verschillen html vs xhtmlVerschillen html vs xhtmlI

In xhtml is DOCTYPE verplichtA

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

Ook lege elementen moeten gesloten worden

◦ Incorrect: <br>, <hr>, <img>

◦ Correct: <br />, <hr />, <img />E

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>

Html vs xhtml (vervolg)Html vs xhtml (vervolg)A

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

Alle elementen en attributen moeten klein geschreven worden

◦ Incorrect: <BODY><P ID="iets">Tekst</P></BODY>

◦ Correct: <body><p id="iets">Tekst</p></body> A

Attributen mogen niet geminimaliseerd worden

◦ Incorrect: <option selected>, <frame noresize>, <input checked>

◦ Correct: <option selected="selected">, <frame noresize="noresize">, <input checked="checked“>

Overschakelen html -> xhtmlOverschakelen html -> xhtml 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

Bestandsstructuur

Bestandsstructuur websiteBestandsstructuur websiteMappen Css Javascript ImagesBestanden Index.htm 404.htm & .htaccess Robots.txt Cgi-bin

Erkend door de

Layout:Frames, Tabellen en CSS

Een grove structuur voor de pagina

SchermformatenSchermformaten 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

Layout met FramesLayout met Frames 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.

Html framesHtml frames <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>

Layout met TabellenLayout met Tabellen 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

TabellenTabellen

<td width="85">eerste rij</td></tr><tr>

<td width="85">tweede rij</td></tr>

</table>

Layout via div lagenLayout via div lagen 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.

Vast-stellingenVast-stellingenHoe 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

Structuur: Lagen makenStructuur: Lagen maken

</div><div id=“nav”></div></div>

Centreren 1 kolom liquidCentreren 1 kolom liquidLiquid layouts

div#container{margin-left: 10%; margin-right: 10%;}

1 Kolom gecentreerd1 Kolom gecentreerd

CSS met auto margin:

#container {

width: 960px;

margin: 0 auto;

1 Kolom gecentreerd (versie 2)1 Kolom gecentreerd (versie 2)

CSS met negatieve margin:

#container {

width:720px;

position:relative;

left:50%;

margin-left:-360px;

2 Kolommen – fxed – xhtml 2 Kolommen – fxed – xhtml <div id=“container">

</div> <div id=“navigatie”>

</div><div id=“footer”></div>

</div>

2 Kolommen – fxed – css 2 Kolommen – fxed – css #content {

width:720px;

foat:right;

#navigatie {

width:180px;

foat:left;

#footer {

clear:both;

2 Kolommen fxed - padding2 Kolommen fxed - padding

#navigatie {

padding-top: 20px;

padding-bottom: 20px;

3 Kolommen fxed – xhtml 3 Kolommen fxed – xhtml <div id=“content”>

</div>

</div>

3 Kolommen fxed – css3 Kolommen fxed – css

#hoofdcontent {

width: 320px;

foat: left;

#contentblok {

width:180px;

foat: right;

3 Kolommen fxed – padding3 Kolommen fxed – padding

#contentblok h1, #contentblok h2, #contentblok p {

padding-left: 20px; // box model bug IE5

padding-right: 20px; // box model bug IE5

3 Kolommen liquid – css3 Kolommen liquid – css#container {

width: 85%;

margin: 0 auto;

#navigatie {

width: 23%;

foat: left;

#content {

width: 75%;

foat: right;

3 Kolommen elastisch – css3 Kolommen elastisch – css

Default font-size = 16px

10px = 62.5% van 16px

body {

font-size: 62.5%

3 Kolommen elastisch – css3 Kolommen elastisch – css#container {

width: 72em;

margin: 0 auto;

#navigatie {

width: 18em;

foat: left;

#content {

width: 52em;

foat: right;

3 Kolommen elastisch – css3 Kolommen elastisch – css

#hoofdcontent {

width: 32em;

foat: left;

#contentblok {

width: 18em;

foat: right;

Hybrid liquid-elastisch – cssHybrid liquid-elastisch – css#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;

Hybrid liquid-elastisch – cssHybrid liquid-elastisch – css

#hoofdcontent {

width: 32em;

max-width: 66%;

foat: left;

#contentblok {

width: 18em;

max-width: 31%;

foat: right;

Liquid en elastische afbeeldingenLiquid en elastische afbeeldingen

#header {

height: 171px;

background: url(images/hoofding.png) no-repeat left top;

Voordelen:

Schalen van de afbeelding bij elastische of liquid layouts (afbeelding op maximale grote nemen die niet volledig getoond wordt bij kleiner resizen)

Header afbeelding alternatiefHeader afbeelding alternatief

#header {

width: 100%

overfow: hidden;

</div>

Faux ColumnsFaux 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;

Erkend door de

Positioning

Box modelBox model

Block level & Inline elementsBlock level & Inline elements

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

Relative positioningRelative positioning#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;

Relative positioningRelative positioning

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;

Absolute positioningAbsolute positioningElement neemt geen plaats in. Andere elementen houden er geen rekening meeZwevendPositie enkel tov ancestor/parent elementz-index

#box2 {

position: absolute;

width:150px;

height: 100px;

top:20px;

left:20px;

z-index:2;

Fixed positioningFixed positioning

Gelijkaardig principe als absolute positioningPositie enkel tov venster zelfUsability: menu of invulformulier blijft steeds zichtbaarNiet ondersteund door IE6

#box2 {

position: fxed;

width:150px;

height: 100px;

top:20px;

left:20px;

z-index:2;

FloatingFloating

Boxen kunnen links of rechts gefoat wordenAls box waarin de 3 boxen vervat zit niet breed genoeg is valt de derde box eronderClear: 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;

ClearClear

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.

foat:left;

Problemen met foatProblemen met foat

Voorbeeld: Image met tekst rechts

.news {

background-color:gray;

border:solid 1px black;

foat:left;

.news img {

foat:left;

.news p {

foat:right;

Problemen met foatProblemen met foatOplossing 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

Lijsten

Styling van lijstenStyling van lijsten

ul { margin:0;

padding:0;

list-style-type:none;

li { background: url(bullet.gif) no-repeat 0 50%;

padding-left:30px;

Erkend door de

Navigatie

Opstellen inhoudstafel en menuOpstellen inhoudstafel en menu

Usability: snel informatie vinden Accessibility

◦ Slechtzienden

◦ Mobiel internet

◦ Zoekmachines

Menu positie: boven, links, rechts, elders Inhoudstafel opstellen

Listamatic: css menu’s met lijstenListamatic: css menu’s met lijsten

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)

Vertikale navigatieVertikale navigatie

<li><a href="about.htm">About</a></li>

<li><a href="services.htm">Our Services</a></li>

<li><a href="contact.htm">Contact</a></li>

CSS SpritesCSS Sprites

http://www.alistapart.com/articles/sprites

http://www.koba.be/lesimages/pixy-rollover.gif

Vertikale navigatie cssVertikale navigatie cssul {

margin: 0;

padding: 0;

list-style-type: none;

display: inline: /* :hack: Removes large gaps in IE/Win */

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;

Vertikale navigatie cssVertikale navigatie css

a:hover, .selected a {

background-color: #369;

background-position: right bottom;

color: #fff;

.frst a {

height: 40px;

line-height: 40px;

Horizontale navigatie htmlHorizontale navigatie html

<li><a href="#">About</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>

Horizontale navigatie cssHorizontale navigatie css

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;

Horizontale navigatie cssHorizontale navigatie cssul 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;

Suckerfsh drop down menuSuckerfsh drop down menuZie: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

<head>

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>

<head> Beveiliging<head> Beveiliging

Hotlink + index protection op server

<head> zoekmachines<head> zoekmachines<title>titel</title>

<head> meta tags<head> meta tags<meta http-equiv=“refresh"

content="4;url=http://www.domain.com/link.html” /> (of uur verversen)

<head> nutteloze meta tags<head> nutteloze meta tags<!-- HTML Comments (treated as HTML

markup) --> : tenzij voor uitleg

Robots.txtRobots.txt User-agent: * Disallow: /cgi-bin/ Disallow: /javascript/ Disallow: /Templates/ Disallow: /css/

Bemerk• Gehoorzaamheid?

• Gevaar hele site niet geïndexeerd

<head> css<head> css<link href="../css/screen.css" rel="stylesheet"

type="text/css" media="screen" />

Belangrijk: volgorde, zie cursus p122

Erkend door de

VerschillendeStyle sheets

Voor print en handheldVoor print en handheld

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

StyleswitcherStyleswitcherhttp://www.alistapart.com/stories/alternate/

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

Conditional comments voor IEConditional comments voor IE

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

Erkend door de

Tabellen

Tabellen htmlTabellen html <table> <th>titel</th>

</tr><tr>

</tr></table>

Tabellen html (vervolg)Tabellen html (vervolg) th ipv td Width Colspan, rowspan Align, valign Cellpadding, cellspacing Centreren tabel <caption>Dit is het bijschrift</caption>

Tabellen cssTabellen css 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 »>

Summary en captionSummary en caption<tab le ce llspacing="0" id="p lay listTab le" 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>

TheadThead

<thead>

</thead>

TbodyTbody

<tbody>

</tbody>

Odd en evenOdd en even

Table cssTable csstable {

border-collapse: collapse; (dus niet separate standaard)

width: 50em;

border: 1px solid #666;

th, td {

padding: 0.1em 1em;

Maar voor IE6: cellspacing=”0”

Caption cssCaption css

caption {

font-size: 1.2em;

font-weight: bold;

margin: 1em 0;

Thead cssThead cssthead {

background: #ccc url(images/bar.gif) repeat-x left center ;

border-top: 1px solid #a5a5a5;

border-bottom: 1px solid #a5a5a5;

font-weight: normal;

text-align: left;

AfwerkingAfwerking.odd {

background-color :#edf5ff; }

tr :hover {

background-color :#3d80df;

color : #fff; }

thead tr :hover {

background-color : transparent;

color : inherit; }

Erkend door de

Formulieren

Eenvoudig formulierEenvoudig formulier

< form id="comments_form " action="#"

method="post">

</form>

Fieldset & LegendFieldset & Legend

<legend>Your Contact Details</legend>

</feldset>

Label en InputLabel en Input <p>

<label for="author">Name: <em class="required">(Required)</em></label>

<label for="email">Email Address:</label>

<label for="url">Web Address:</label>

Message (textarea)Message (textarea)<feldset>

<legend>Comments</legend>

<label for="text">Message: <em class="required">(Required)</em></label>

</feldset>

Form cssForm cssform {

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 e lements on focus */

input:focus, textarea:focus {

background: #ffc; }

input.radio {

foat: left;

margin-right: 1em; }

textarea {

width: 300px;

height: 100px; }

Wat zijn formulierenWat zijn formulieren

Gegevens verkrijgen van surfers

Formulieren aanmakenFormulieren aanmaken

<P>Familienaam <INPUT type="text"

name="familienaam" size="50" maxlength="50“ />

</P></FORM>

Input tekstInput tekst

<form>Voornaam: <input type="text" name=“voornaam“ /> <br> Naam: <input type="text" name=“naam“ /> <textarea name=“bericht" cols="40" rows="5“></textarea>

</form>

Input radio buttonsInput radio buttons

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

</form>

Input checkboxInput checkbox

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

</form>

Drop down menuDrop down menu

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

Formulieren css: SubmitFormulieren css: Submit<style tyle=text/css>

input.red { background-color: #cc0000;

font-weight: bold; font-size: 12px;

color: white;}</style>

Formulieren css vervolgFormulieren css vervolg

#submit{

background:#BC4819;

color:#FFF;

width:auto;

padding: 2px 10px;

border:none;

Formulieren css: InputFormulieren css: Input

font-size: 10px;}</style>

Formulieren css: TextareaFormulieren css: Textarea

Formulieren cssFormulieren css

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;

CSS checkbox, drop downCSS checkbox, drop down

<option class="pink" value= “introhtml.htm">- Intro to HTML</option>

Verwerking van formulierenVerwerking van formulieren Verstuurd via e-mail Verwerking via CGI-scripts (nms) Verwerking via Server Side scripttalen

(ASP – PHP – ColdFusion - …) Afhankelijk van wat de provider aanbiedt

Volledig formulierVolledig formulier<form name="example" id="example" action="http://www.website.be/cgi-bin/berichtje.cgi"

method="post" />

<p><label for="email">E-mailadres</label>

<p><label for="tel">Telefoon</label>

<p><label for="message">Bericht</label>

</form>

Contrôle formulierContrôle formulier

Kan server side of client side (of beide)

Server side:nms

Client sidehttp://www.quirksmode.org/dom/error.html

NMS FormmailNMS FormmailZie: 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;

NMS Formmail NMS Formmail Beveiliging spambots: oa « berichtje »,

geen bevestigingsmail, recente versie gebruiken, …

Chmod: 755◦ aanvinken:

owner: read, write, execute group: read, execute other: (world) read execute

Email formulier antwoordEmail formulier antwoordHieronder 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

Media invoegen

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

Grafsche elementen : Grafsche elementen : bewegende beeldenbewegende beelden Animated gif .swf bestanden : vectorgebaseerde

animaties door middel van bv. Macromedia Flash : (www.macromedia.com(

.mpg / .avi / … : flmmateriaal, maar grotere bestanden

Muziek toevoegen aan siteMuziek toevoegen aan site<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

Quicktime flmpjesQuicktime flmpjeshttp://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">

<EMBED SRC="test.mov" WIDTH="136" HEIGHT="176" TYPE="video/quicktime"

PLUGINSPAGE="http://www.apple.com/quicktime/download/" AUTOPLAY="false"

VOLUME="25"></EMBED>

</OBJECT>

Enkel met <object>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>

Enkel <object> QuicktimeEnkel <object> Quicktime<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" />

width="320" height="260">

</object>

</object>

Via YoutubeVia Youtube<object width="425" height="350"><param name="movie"

value="http://www.youtube.com/v/synxFmQJ_0A"></param>

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

Via Google videoVia Google video

</embed>

Flash flmpjesFlash flmpjes<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">

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

Microsoft patent probleemMicrosoft patent probleem 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_topics/click_to_activate/

.fv videoformaat.fv videoformaat

Ffmpeg: conversie op server naar .fv +

compressie

Flash players◦ Jeroen We ijring◦ Flowplayer◦ ...

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

Erkend door de

Vlaamse regering

CSS Frameworks & GridsCSS Frameworks & Grids

CSS3 VoorstelWorkflow & optimalisatie

Het belang van snelheidHet belang van snelheid Frameworks = Sne ller werken

Compressie & optimalisatie = snellere pagina's◦ Amazon : 100 m s extra laadsne lhe id geeft 1% m inder 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: N icole Sullivan,

Yahoo!)

YslowYslow 80% van laadtijd is voor het laden van e lementen vanu it

html: css, js, videos.

14 regels: http://developer.yahoo.com/performance/rules.htm l

Google tech & yslow

http ://www.youtube .com /watch?v=BTHvs3V8DBA

Yslow p lugin voor frebug: http://developer.yahoo.com/yslow

Compressie & optimalisatieCompressie & optimalisatie Eerst valideren!

Kleinere css = sneller laden

Automatisch:

http://foele .fyspray.org/csstidy//css_optim ise

r.php: compressie & optimalisatie

CSS3 Template layoutCSS3 Template layout Geavanceerd templating met css3 (draft):

http://www.w3.org/TR/css3-layout

Jquery implementatie?

http://ejohn.org/blog/css3-template-layout

Grid systemenGrid systemen 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

VoordelenVoordelen Vertrekken van vaste basiscode (w ie l n iet heru itvinden)

Browser compatibiliteit: Herbruikbaarheid css en hacks voor IE6 (en zelfs IE5,

maar als zelfs msn.com die niet meer respecteert...)

Professionele grid structuur

Flexibele voorgedefnieerde classes voor basiselementen: lijsten, tabellen,

Sneller werken, rapid prototyping (ipv wireframing) opstellen van mock-ups

Clean code

Klein <5kb

Iphone viewport is 960px

NadelenNadelen Jij en iedereen die aan de site werkt moet

het framework kennen

Er is code die je niet gebruikt

Beperkingen in design◦ De xhtm l layout zou moeten gebaseerd zijn op

het design, niet omgekeerd◦ Fixed width vb 960px, voor 1280px schermen

wil je soms 960px + extra niet belangrijke kolom (reclame)

SamenstellingSamenstelling reset.css

typography.css

grid.css

ie.css

print.css

forms.css

Reset: Tripoli & compressieReset: Tripoli & compressie* {margin:0; padding:0;}: traag

Eric Meyer :

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded

Tripoli: http://devkick.com/lab/tripoli/ Compatibe l met W indows: IE5 , IE5 .5 , IE6 , IE7 , IE8 , Opera 8 , Opera 9 ,

Safari, Firefox 2, Firefox 3, OS X: IE5, Firefox 2, Firefox 3, Safari 2,

Safari 3, Camino

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

960.gs960.gs http://960.gs

Ook fuid: http://www.designinfuences.com/fuid960gs

En elastic

http://csswizardry.com/typogridphy

Uitgewerkt voorbeeld:http ://nettuts.com /tutoria ls/htm l-css-techn iques/prototyp ing-w ith-the-grid-960-css-framework

BluetripBluetrip http://bluetrip.org: combinatie van blueprint

en 960.gs

Meer infoMeer info http://www.alistapart.com/articles/framewo

rksfordesigners http://www.smashingmagazine.com/2007/09/

21/css-frameworks-css-reset-design-from-

scratch

__ __ _____ ___ Met de steun van Erkend door de

Vlaamse regering

JQUERY

10/08/07

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

10/08/07

Populairiteit jquery groeitPopulairiteit jquery groeit

B: http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

Bron: http://www.google.com/trends?q=jquery%2C+mootools%2C+yahoo+ui%2C+dojo+(toolkit%7Cjavascript%7Clibrary%7Cframework)%2C+prototype+(toolkit%7Cjavascript%7Clibrary%7Cframework)&c

tab=0&geo=all&date=all

10/08/07

Jquery toevoegenJquery toevoegen● http://www.learningjquery.com/2008/06/updated-jquery-bookmarkl

● 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

VoorbeeldenVoorbeelden

__ __ _____ ___ Met de steun van Erkend door de

Vlaamse regering

Core functionaliteit

http://www.simonwhatley.co.uk/blog/wp-content/uploads/2008/02/jquery12_api_reference.png

10/08/07

Meer jqueryMeer jquery

● http ://docs.jquery.com

● http://learningjquery.com

● http://ajaxian.com/archives/hacking-digg-with-frebug-and-jquery

● http://plugins.jquery.com/

Erkend door de

Speciale technieken

JavascriptJavascript http ://www.webappers.com

www.dynamicdrive.com

plugins.jquery.com

OpacityOpacity

http://www.mandarindesign.com/opacity.html

Verschillende opacity technieken

Advanced selectorsAdvanced selectors

External links

Erkend door de

CSS HacksMet dank aan Internet Explorer

WebstandaardenWebstandaarden 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.orgSVG testhttp://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-flters-displace-

01-f.html

Gekende bugsGekende bugs Star hack

Box model hack

3 pixel gap

Double foat bug

Has content

Oplossing via javascriptOplossing via javascript Ie7 en ie8.js

◦ http ://code .goog le .com /p/ie7-js

Erkend door de

CSS Hacks

Box modelBox model

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

Tantek (box model) hackTantek (box model) hack#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. */}

Escape hackEscape hack

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; wid\th: 750px; /* IE 5 en 5.5 zien dit niet*/

CSS Hacks en IE7CSS Hacks en IE7

Let op: Hacks moeten voorwaarts compatibel zijn!

http://www.positioniseverything.net/articles/ie7-dehacker.html

Erkend door de

Web 2.0

Web 2.0Web 2.0

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

Web 2.0 websitesWeb 2.0 websites• Gebruik van Ajax:http://www.adaptivepath.com/publications/essays/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• Podcast: http://www.twit.tv/ITN

AjaxAjax

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

Lanceren van de site

FTPFTP 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

CuteftpCuteftp Een FTP-programma om bestanden te

uploaden naar uw webruimte

Pagina’s testen onlinePagina’s testen online• 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/

Erkend door de

Lanceren van de sitePromotie & Zoekmachines

Site-bekendheidSite-bekendheid Onderschat traditionele reclame niet! Briefwisseling – contactkaartjes – Forums, nieuwsgroepen, blogs Zoekmachines en linksites Pay per Click: Google Adwords Klantenservice – productondersteuning

bieden via internet: handleidingen downloaden, ...

MetatagsMetatags Meta-informatie (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">

Gevonden door de zoekmachineGevonden door de zoekmachine 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.

Spam-indexingSpam-indexing 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

Technology

Transcript of Powerpoint Htmlcss

Mechelen powerpoint

Powerpoint Wero

Powerpoint jongerensite

Powerpoint eigenreizer1.0

Powerpoint projectinstellingen

Vink powerpoint

Powerpoint eigenreizer3.0

Powerpoint stijladvies

Powerpoint ledenwerving

Powerpoint stage

Powerpoint binnentreden

Een diavoorstelling maken met Powerpoint · Een diavoorstelling maken met PowerPoint Wat is PowerPoint? PowerPoint is een programma waarmee je diavoorstellingen kunt maken. Het programma

Powerpoint kaderwerving

Powerpoint fietscongres

Powerpoint eigenreizer2.0

Thema 2 PowerPoint aardrijkskunde PowerPoint aardrijkskunde rik rik.

Powerpoint IWPacademy

Powerpoint parijs

Paarden powerpoint

Powerpoint Blog