Webdesign met HTML en CSS in Dreamweaver

50
Webontwikkeling U wil een eigen website bouwen? Dan is het belangrijk dat u even op weg wordt geholpen. Belangrijk is dat u niet verstrikt raakt in veelvoorkomende fouten van beginnende webontwikkelaars. Hoe beter de start, hoe minder werk het onderhoud van een site oplevert. Vooraf moet u goed weten waar u naartoe wil, wat uw doelgroep is, welke informatie u met de wereld wil delen... Een goede start is het halve werk! Thema's die aan bod komen: Thema's die aan bod komen: domeinnamen, hosting, webruimte... de verschillende webformaten (html, xhtml, css, xml...) afbeeldingen en internet javascript en interactie multimedia op internet web 2.0 en AJAX mashup databankgestuurde websites ... 1. Domeinnamen, hosting en webruimte Een website kan je ook op je eigen computer zetten, maar dan is hij nog niet bereikbaar voor anderen. Voor het aanmaken van een website moet je een "stuk" ruimte op de harde schijf van een "webserver" (=centrale computer) huren. Een webserver beschikt immers over een vast IP-nummer, terwijl uw thuiscomputer een 'dynamisch' (lees: wisseleld) IP- nummer krijgt toegewezen. Uw thuiscomputer een vast IP-nummer geven? U kan een vast IP-nummer vragen bij uw internetprovider, maar dit is zeker niet gratis. Bovendien moet u dan op uw computer webserversoftware installeren. U kan ook gebruikmaken van een toepassing als DynDNS waardoor uw thuiscomputer ook zonder 'vast IP' van overal toegankelijk is. Maar dit is niet aan te raden voor een 'bedrijfssite'. Bovendien is het ook niet aangewezen als u niet zo goed op de hoogte bent van de beveiliging van webservers. Die huur betaal je per jaar. De prijzen zijn afhankelijk van de hoeveelheid ruimte die je nodig hebt. Even ter vergelijking: een simpele USB-stick met 2 gigabyte ruimte kost in de Carrefour nog 20, maar voor een zelfde hoeveelheid ruimte op een server betaal je al snel 1500 euro per jaar. Natuurlijk heb je voor een site niet zo veel ruimte nodig. 100 megabyte moet ruimschoots volstaan voor een relatief kleine website met een beperkt aantal pagina's. Hoe meer ruimte je huurt, hoe goedkoper die in verhouding wordt: vb. Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 1

description

HTML, CSS, Javascript.... stap voor stap vanuit Dreamweaver. Dus... echt een beginnerscursus

Transcript of Webdesign met HTML en CSS in Dreamweaver

Page 1: Webdesign met HTML en CSS in Dreamweaver

WebontwikkelingU wil een eigen website bouwen? Dan is het belangrijk dat u even op weg wordt geholpen. Belangrijk is dat u niet verstrikt raakt in veelvoorkomende fouten van beginnende webontwikkelaars. Hoe beter de start, hoe minder werk het onderhoud van een site oplevert. Vooraf moet u goed weten waar u naartoe wil, wat uw doelgroep is, welke informatie u met de wereld wil delen... Een goede start is het halve werk!

Thema's die aan bod komen:Thema's die aan bod komen:● domeinnamen, hosting, webruimte...● de verschillende webformaten (html, xhtml, css, xml...)● afbeeldingen en internet● javascript en interactie● multimedia op internet● web 2.0 en AJAX● mashup● databankgestuurde websites● ...

1. Domeinnamen, hosting en webruimteEen website kan je ook op je eigen computer zetten, maar dan is hij nog niet bereikbaar voor anderen. Voor het aanmaken van een website moet je een "stuk" ruimte op de harde schijf van een "webserver" (=centrale computer) huren. Een webserver beschikt immers over een vast IP-nummer, terwijl uw thuiscomputer een 'dynamisch' (lees: wisseleld) IP-nummer krijgt toegewezen.

Uw thuiscomputer een vast IP-nummer geven?U kan een vast IP-nummer vragen bij uw internetprovider, maar dit is zeker niet gratis. Bovendien moet u dan op uw computer webserversoftware installeren.

U kan ook gebruikmaken van een toepassing als DynDNS waardoor uw thuiscomputer ook zonder 'vast IP' van overal toegankelijk is. Maar dit is niet aan te raden voor een 'bedrijfssite'. Bovendien is het ook niet aangewezen als u niet zo goed op de hoogte bent van de beveiliging van webservers.

Die huur betaal je per jaar. De prijzen zijn afhankelijk van de hoeveelheid ruimte die je nodig hebt.

Even ter vergelijking: een simpele USB-stick met 2 gigabyte ruimte kost in de Carrefour nog €20, maar voor een zelfde hoeveelheid ruimte op een server betaal je al snel €1500 euro per jaar.

Natuurlijk heb je voor een site niet zo veel ruimte nodig. 100 megabyte moet ruimschoots volstaan voor een relatief kleine website met een beperkt aantal pagina's.Hoe meer ruimte je huurt, hoe goedkoper die in verhouding wordt:vb.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 1

Page 2: Webdesign met HTML en CSS in Dreamweaver

- 50 megabyte > €90/jaar- 100 megabyte > €160/jaar- 200 megabyte > €200/jaar

Hosting kan onderverdeeld worden in verschillende soorten (volgens stijgende kostprijs):

Gratis hosting

Meestal met beperkte mogelijkheden. Het draaien van scripts (bijvoorbeeld PHP) en het voeren van een eigen domeinnaam is vaak niet mogelijk. Schijfruimte en bandbreedte zijn meestal ook beperkt. Soms voegt de hostingfirma reclameboodschappen toe aan elke pagina.

Shared hosting

Hierbij worden meerdere (honderden) websites op dezelfde server geplaatst. Hierdoor is het mogelijk dat de ene website de andere doet vertragen of zelfs crashen.

Reseller hosting

Bestemd voor wie zelf een webhost wil worden. Voorziet in een hoge schijfruimte en bandbreedte die kan verdeeld worden over alle sites die de gebruiker er wil op plaatsen. Te vergelijken met shared hosting, maar u heeft meer vrijheid en u kunt zelf webhostng verkopen.

Virtual Private Server (VPS) hosting

Hiermee kan één fysieke server meerdere virtuele servers huisvesten. Elke klant heeft dan adminstrator of root-rechten om de server te configureren en gebruikers rechten toe te kennen. De klant kan een VPS ook voor andere toepassingen dan websites gebruiken. Als een virtuele server crasht, dan hebben de andere klanten daar geen last van. Processorcapaciteit en bandbreedte naar de harde schijf worden wel gedeeld door de klanten.

Dedicated hosting

De klant krijgt werkelijk een eigen server (machine). Wel heeft deze zich te houden aan datalimiet en hardeschrijf ruimte.

Co-Located hosting

De klant plaatst een eigen server in de ruimte van de colocatieprovider. Het is vereist om een "19" rack mountable"-server te plaatsen van 1, 2 of 4U (Units). Ook hier heeft de klant rekening te houden met datalimiet, maar hardeschrijven kunnen naar gewenste hoeveelheid worden geplaatst of vervangen door grotere.

Hosting in mensentaal

Ter vergelijking:Jan Peters (=domeinnaam) huurt een studio (=domeinruimte) in een appartement (=server). Hoe groter en luxueuzer de studio, hoe meer Jan Peters betaalt.De naam "Jan Peters" staat bij de gemeente (=internetproviders zoals Telenet)

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 2

Page 3: Webdesign met HTML en CSS in Dreamweaver

gedomicilieerd (=domain name service) op het adres van zijn studio.Jan Peters moet nu nog zorgen voor de inboedel (=website), anders is zijn studio leeg en valt er niet veel te beleven.

DomeinnamenDomeinnamenOok de huur van een domeinnaam betaalt u per jaar. De prijzen zijn variëren van agent tot agent en van extensie tot extensie. Een .com-domeinnaam is duurder dan een .be-naam. Een .com-naam kan u maar eens om de zes maanden van server verhuizen!Controleren of een naam nog vrij is?

● be-namen kan u controleren via www.dns.be● alle andere extensies kan u controleren via www.alldomains.com

Opgelet!Opgelet!Pas goed op waar u uw webruimte huurt. Check even de onderstaande vragen:

● Waar staat de webserver? Laat u niets wijsmaken. U kan dit zelf controleren met een traceroute-programma of in Windows met het commando ping.Wanneer u merkt dat de hostingprovider u beliegt, huurt u best geen ruimte.

● Goedkope ruimte met enorme bandbreedtes is niet altijd even betrouwbaar.● Kan u de provider telefonisch bereiken?● Gaat het om een eenmanszaak of een grote firma? Een eenmanszaak is geen

probleem, maar vraag steeds na waar de server gehuurd wordt en/of hij de server in eigen beheer heeft staan....

● Kent u zijn adres?● Wat krijgt u voor uw geld? ● Welke garanties worden u geboden? Automatische backup? Wat als de server

offline gaat? ● Welke “uptime” heeft de server? Hoe vaak crasht hij?● Welke webserversoftware wordt er gebruikt? Windows, Linux, UNIX? Linux is de

meest gebruikte webserversoftware en zeer rigide en betrouwbaar.● ...

2. Een webpagina in HTMLWebpagina's worden opgemaakt in HTML. Toch zal u in verband met webdesign vaak geconfronteerd worden met allerlei benamingen waar u niet meteen wijs uit zal raken.

Een kort overzichtEen kort overzicht● HTML● CSS

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 3

Page 4: Webdesign met HTML en CSS in Dreamweaver

● XHTML● XML● XSL● XSLT● Javascript● DHTML● E4X● SVG● AJAX● ...

HTMLHTML staat voor hypertext markup language. HTML is geen programmeertaal, maar beschrijft enkel de tekststructuur. Het duidt titels, alinea's, lijsten enz. aan in een tekst.

HTML is gedefinieerd met SGML (Stardard Generalized Markup Language) waarvoor de omschrijving is bepaald door de ISO-norm 8879. SGML is veel uitgebreider dan HTML, maar dient net als HTML voor het structureren van tekstuele informatie.

ISO= International Organization for StandardizationDe International Organization for Standardization (ISO) is een internationale organisatie die normen vaststelt. De organisatie is een samenwerkingsverband van nationale standaardisatieorganisaties in 148 landen. Om te voorkomen dat de organisatie in elke taal een andere afkorting zou krijgen, heeft de ISO vanaf het begin gekozen voor de aanduiding ISO, afgeleid van het Griekse isos, wat gelijk betekent.Meer informatie vind je op: www.iso.org [Bron:Wikipedia]

In een webpagina staat in de eerste plaats tekst. Die tekst heeft een bepaalde structuur en kan een of meerdere van de volgende onderdelen bevatten:

● titels of koppen● alinea's● citaten● tabellen● lijsten● verwijzingen of referenties (links, hyperlinks) naar andere webpagina's of websites● (verwijzingen naar) afbeeldingen● ...

Mensen onderscheiden meteen een titel of een alinea. Een computerprogramma daarentegen is dom. Je moet het op een of andere manier vertellen waar de verschillende onderdelen staan. Dit kan je enkel door aan het programma letterlijk te vertellen waar elk onderdeel begint en eindigt. HTML markeert een titel of alinea zoals je dat zelf misschien al eens in een cursus deed met een markeerstift. Met een HTML-markering duid je het begin en het einde van een tekstonderdeel of tekstelement aan.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 4

Page 5: Webdesign met HTML en CSS in Dreamweaver

Voorbeelden van markeringenVoorbeelden van markeringen

[begin van de titel] Mijn titel [einde van de titel]

[begin van een lijst]

[begin van het opsommingspunt]eerste opsommingspunt[einde van het opsommingspunt]

[begin van het opsommingspunt]tweede opsommingspunt[einde van het opsommingspunt]

[begin van het opsommingspunt]derde opsommingspunt[einde van het opsommingspunt]

[einde van de lijst]

In HTML zien de bovenstaande voorbeelden er als volgt uit:

<h1>Mijn titel</h1>

<ul>

<li>eerste opsommingspunt</li>

<li>tweede opsommingspunt</li>

<li>derde opsommingspunt</li>

</ul>

Verklaring van de afkortingen in HTML:

● h = head● ul = unordered list (niet-genummerde lijst)● li = list item

Webbrowsers renderen de HTML naar een leesbare weergaveWebbrowsers renderen de HTML naar een leesbare weergaveWebbrowsers, maar ook andere programma's lezen die markeringen uit en zetten de HTML-structuur om in een voor mensen leesbare weergave. Dit proces noemen we "renderen" of "parsen".

Door aan te duiden waar een bepaald tekstonderdeel begint en eindigt, herkent de webbrowser (Internet Explorer, Firefox, Safari...) de verschillende tekstonderdelen.

HypertekstHypertekstHTML kan "hypertekst" bevatten en dit maakt het nu net zo fantastisch. Een document kan verwijzingen bevatten naar andere documenten. Dit kunnen verwijzingen zijn naar documenten zoals foto's en teksten die zich op dezelfde computer of medium bevinden, maar ook naar documenten die zich ergens op de wereldwijde locatie van het internet bevinden. De "lezer" zal hiervan niets merken.

Een hypertextsysteem is een systeem waar behalve tekst ook referenties (hyperlinks) gebruikt worden, die verwijzen naar andere stukken tekst in hetzelfde of een zelfde soort systeem. Door de referenties te activeren kan andere informatie worden gezocht, bewerkt

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 5

Page 6: Webdesign met HTML en CSS in Dreamweaver

en gepubliceerd. De bekendste hypertexttaal is ongetwijfeld HyperText Markup Language (HTML) op het World Wide Web. In 1945 schreef Vannevar Bush een artikel in The Atlantic Monthly getiteld As We May Think, waarin hij een toekomstig apparaat beschrijft dat hij de Memex noemt. Het apparaat is elektronisch gekoppeld aan een bibliotheek en kan boeken en films uit de collectie weergeven, en is verder in staat referenties uit deze werken te volgen naar een volgend boek of volgende film, enzovoort. Informaticus Ted Nelson gebruikte voor het eerst het woord 'hypertext', in 1965. Nelsons product, en andere hypertextsystemen, zoals NLS van Douglas Engelbart en de populaire Apple Macintosh-toepassing HyperCard, werden begin jaren 1990 overvleugeld door het succes van het World Wide Web van Tim Berners-Lee, al ontbraken aan het laatste systeem veel eigenschappen die de vroegere systemen wel hadden, zoals typed links, transclusion en source tracking. [Bron:Wikipedia]

Links en referentiesLinks en referentiesU kan een link opnemen naar een bepaald doel binnen hetzelfde document (webpagina) of naar een andere webpagina, document of internetadres. U kan een link opnemen door gebruik te maken van de <a>-markering (=anker of anchor).

<a>Link naar de contactpagina</a>

Deze link verwijst nog naar geen enkel adres. Om de link aanklikbaar te maken, moeten we nog een referentie-attribuut opnemen (href= hyperlink reference).<a href=”contact.html”>Link naar de contactpagina</a>

Wanneer u op de bovenstaande link klikt, wordt de weergegeven webpagina vervangen door de webpagina contact.html.U kan ook verwijzen naar adressen op andere websites:

<a href=”http://www.google.be”>Link naar Google</a>

Een verwijzing naar een externe website moet altijd beginnen met http://.Het is niet altijd zinvol om een webpagina door een klik op een link te vervangen door een andere website. Uw eigen website verdwijnt dan immers volledig uit beeld. U kan de pagina ook openen in een nieuw venster door het attribuut target (=doel) op te nemen en er de waar de _blank aan toe te kennen.

<a href=”http://www.google.be” target=”_blank”>Link naar Google</a>

U kan ook een link opnemen naar een emailadres. Wanneer u op zo'n link klikt, opent uw emailclient.

<a href=”mailto:[email protected]”>Verstuur een email.</a>

In webpagina's voor de Apple iPhone kan u zelfs een link opnemen die automatisch de telefoonfunctie van de iPhone opstart:

<a href=”tel:+32123456”>Telefoneer</a>

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 6

Page 7: Webdesign met HTML en CSS in Dreamweaver

AfbeeldingenAfbeeldingenAfbeeldingen en andere multimedia-elementen worden standaard niet in de webpagina opgenomen, maar gelinkt. Dit kan met de <embed>-markering. Voor afbeeldingen gebruikt men de <img>-markering.

<img></img>

Vermits een <img>-markering geen teksinhoud kan bevatten, is het niet nodig een begin- en eindmarkering te gebruiken. We gebruiken in dit geval de verkorte notatie:

<img/>

Natuurlijk moeten we aan de browser ook nog vertellen welke afbeelding weergegeven moet worden. Hiervoor moeten we aan de <img>-markering ook een src-attribuut (source=bron) meegeven.

<img src=”foto.jpg”/>

Attribuutwaardes moeten tussen dubbele (of enkele) aanhalingstekens geplaatst worden.De volgende afbeeldingstypes kunnen via een <img>-markering weergegeven worden:

● jpg of jpeg● gif● png

De afbeeldingen moeten zich op hetzelfde domein bevinden. Als ze zich op een ander domein bevinden, moet het src-attribuut aangepast worden:

<img src=”http://www.anderesite.be/afbeeldingen/foto.jpg”/>

Een webpagina in HTMLEen webpagina in HTML

HTML bestaat uit pure tekstinformatie. U kan een HTML-bestand m.a.w. gewoon openen in een programma als Kladblok (Windows Notepad). Voor het schrijven van webpagina's heeft u geen speciale software nodig. Een webpagina kan geschreven worden in een teksteditor (vb. Windows Notepad) vermits HTML pure tekstinformatie bevat. Een document dat u maakt met een tekstverwerker zoals Corel Word Perfect of Microsoft Word kan enkel met zijn respectievelijk programma geopend worden omdat het binair gecodeerd is. Als u een Worddocument (*.doc-formaat) opent in een teksteditor zoals Kladblok krijgt u "vreemde" tekens te zien.

Head en bodyHead en body

Een webpagina bestaat uit 2 onderdelen:

1. De "head" bevat

● algemene gegevens over de webpagina zoals titel, auteur, kernwoorden,

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 7

Page 8: Webdesign met HTML en CSS in Dreamweaver

beschrijving....● de adressen (URL's) van externe stijlbestanden en externe javascripts● stijlgegevens● javascriptfuncties

De gegevens in de HEAD kunnen weggelaten worden.

2. De "body" bevat

De HTML-markeringen en teksten die de eindgebruiker op zijn scherm te zien krijgt.

De basis leggen voor een paginaDe basis leggen voor een pagina

We moeten aan de browser vertellen waar de webpagina begint en waar hij eindigt. Dat doen we eveneens door gebruik te maken van markeringen.De pagina start met <html> en eindigt met </html>. Voor de startmarkering <html> kan u nog een verwijzing opnemen naar het DOCTYPE, dit is een definitie van het soort HTML dat u gebruikt.Bijvoorbeeld:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

</html>

De HEAD-markeringenDe HEAD-markeringen

Tussen de begin- en de eindmarkeringen van de webpagina plaatst u begin- en de eindmarkering voor de head-sectie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

</html>

Tussen de begin- en eindmarkering van de HEAD-sectie kan u een heleboel META-informatie over de webpagina opnemen. META-markeringen hebben geen eindmarkering.

<meta></meta>

wordt

<meta/>

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 8

Page 9: Webdesign met HTML en CSS in Dreamweaver

Een voorbeeld van metatags (metamarkeringen)

<title>Ardeco dynamische webdesign</title>

<style type="text/css" media="all">@import "http://www.ardeco.be/ardeco.css";</style>

<script language="JavaScript" type="text/javascript" src="http://www.ardeco.be/scripts/shadow.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="nl" />

<meta http-equiv="imagetoolbar" content="false" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

<link rev="computerkit" href="http://www.computerkit.be/" title="Tutorials, lessen Photoshop, Flash, Webdesign" />

<meta name="robots" content="all" />

<meta name="DC.title" content="Ardeco dynamische webdesign" />

<meta name="author" content="Kris Merckx" />

<meta name="Copyright" content="Copyright (c) Kris Merckx" />

<meta name="Description" content="Copyright (c) Kris Merckx" />

U geeft best een titel aan elke pagina door de markering <title></title> toe te voegen. Als u dit niet doet, geeft de browser de benaming Untitled document aan uw pagina.

U kan externe stijlsjablonen of javascripts linken aan uw webpagina:

<style type="text/css" media="all">@import "http://www.ardeco.be/ardeco.css";</style>

<script language="JavaScript" type="text/javascript" src="http://www.ardeco.be/scripts/shadow.js"></script>

Via Content-type geeft u weer welk soort bestand, welke tekenset en welke taal voor het document (de webpagina) gebuikt zijn.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Content-Language" content="nl" />

Problemen met Internet Explorer vermijden

Om gebruikers te "helpen" met het zoeken van informatie voegt Internet Explorer automatisch links toe aan internetpagina's die je bekijkt. Het is dus best mogelijk dat er links worden toegevoegd naar concurrerende sites. Als je deze functie wil uitschakelen, voeg dan de volgende regel toe aan elk van uw webpagina's:

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 9

Page 10: Webdesign met HTML en CSS in Dreamweaver

<meta name="MSSmartTagsPreventParsing" content="true" />

Internet Explorer tovert op afbeelding in uw webpagina ook een toolbar voor het opslaan en afdrukken van afbeeldingen. Als u dit wilt verhinderen, voeg dan de volgende regel toe aan de pagina:

<meta http-equiv="imagetoolbar" content="false" />

De waarde op true zetten, heeft geen zin omdat dat de standaardinstelling is.

Relaties met andere documenten en bestanden

Met de markering LINK kan u relaties met andere documenten opnemen in uw webpagina. De markering LINK bevat geen waarde, daarom sluitenwe de tag af zonder eindmarkering. Dit doen we door een /> toe te voegen op het einde van de regel.

<link></link>

wordt<link/>

U kan dus geen waarde of inhoud aan de linkmarkering toevoegen, maar enkel attributen:

● rev: Met het REV-attribuut wordt aangegeven wat voor soort relatie de via het HREF attribuut gedefinieerde bron met het huidige document heeft (reverse relationship). U geeft hier een begrip of term in die uw pagina met een andere pagina deelt.

● rel: Het REL-attribuut duidt gerelateerde onderdelen of bestanden aan. Bijvoorbeeld een relatie met een stijlschema, een icoontje...

● media: als u een stijlblad (CSS-stijlsjabloon) met uw webpagina linkt met behulp van de markering LINK, kan u met het attribuut MEDIA instellen voor welk media-apparaat het sjabloon bedoeld is. U kan aan één en dezelfde pagina dus meerdere sjablonen koppelen waardoor de webpagina afhankelijk van het toestel anders wordt weergegeven:

● all: voor weergave door alle apparaten● screen: voor weergave zonder pagina-indeling op een computerscherm● print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview● aural: voor weergave door een spraaksynthesizer● braille: voor weergave door een brailleleesapparaat● handheld: voor weergave door een apparaat met een klein beeldscherm● projection: voor weergave door een projectieapparaat● tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast

karaktergrid● tv: voor weergave op een televisietoestel

<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

<link rev="computerkit" href="http://www.computerkit.be/" title="Tutorials, lessen Photoshop, Flash, Webdesign" />

Bron + meer informatie: http://www.htmlgids.nl/html/elementen/link.html

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 10

Page 11: Webdesign met HTML en CSS in Dreamweaver

Meta-informatie

De hoofdbedoeling van de HEAD is META-informatie over de pagina opnemen. Het attribuut NAME geeft het soort META-informatie weer, CONTENT bevatde betreffende waarde of informatie. De waarde achter "name" mag u niet zelf definiëren.

U kan kiezen uit:

● author: de auteur van het document● copyright: de eigenaar van de auteursrechten op de gebruikte informatie● description: een korte beschrijving van de inhoud van de pagina● generator: het programma waarmee de pagina aangemaakt is.● keywords: kernwoorden of begrippen die de inhoud van de pagina weergeven● robots: mag de inhoud en de gelinkte bestanden en webpagina's door een

zoekrobot als de Googlebot geïndexeerd worden

<meta name="robots" content="all" />

<meta name="author" content="Kris Merckx" />

<meta name="Copyright" content="Copyright (c) Kris Merckx" />

<meta name="Description" content="Copyright (c) Kris Merckx" />

DC.title is een uitbreiding van Dublin Core op de meta-informatie. Meer info vindt u op http://www.ardeco.be/cursus/meteriaal/webdesign/les_dublincore_metatags.html

Bron + meer informatie: http://www.htmlgids.nl/html/elementen/meta.html

De BODY-markeringenDe BODY-markeringenOnder de begin- en de eindmarkering van de HEAD van de webpagina plaatst u de begin- en de eindmarkering voor de body-sectie.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

Speciale tekens in een webpaginaIn HTML zijn <, > en " gereserveerde tekens. Ze zijn gereserveerd voor gebruik in HTML-markeringen. Dit wil zeggen dat u ze in principe niet in uw tekst van uw pagina kan opnemen. U dient ze te vervangen door hun HTML-variant:

< is in HTML &lt; > is in HTML &gt;

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 11

Page 12: Webdesign met HTML en CSS in Dreamweaver

" is in HTML &quot;

Ook andere speciale tekens worden op dezelfde manier opgegeven:

€ is in HTML &euro;& is in HTML &amp;è È is in HTML &egrave; en &Egrave;© is in HTML &copy;...

U kan ze ook door hun gecodeerde variant vervangen: het "-teken kan je ook met &#34; weergeven.

Meer uitleg hierover vind je op http://www.w3.org/MarkUp/html-spec/html-spec_13.html en op http://www.utexas.edu/learn/html/spchar.html

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 12

Page 13: Webdesign met HTML en CSS in Dreamweaver

3. Een website opbouwen

Een website structureren

● Een statische website is een website die uit een beperkt aantal onderling gelinkte HTML-webpagina's is opgebouwd.

● Ook afbeeldingen zijn in webpagina's gelinkt. Ze zitten niet in het bestand opgeslagen.

Als u met een website start, is het belangrijk een basismap voor uw website aan te maken op de harde schijf van uw toestel. Daarbinnen maakt u bijvoorbeeld een map aan met de naam images waar u alle afbeeldingen die u wil linken bewaart.Zorg in elk geval dat alle bestanden logische namen krijgen en dat u ze in een logische mappenstructuur bewaard.

Aandachtspunten:Aandachtspunten:● gebruik geen spaties in de namen van bestanden en mappen● houd de namen kort (liefst niet meer dan 8 tekens)● gebruik geen speciale tekens in de namen van bestanden en mappen● Oudere servers en sommige UNIX- en Linux-besturingssystemen zijn

hoofdlettergevoelig: vermijd dus het gebruik van hoofdletters

Een website bouwenDreamweaver is een veel gebruikt programma voor het bouwen van websites. Toch is het zeker geen noodzakelijk programma. U kan webpagina's immers even goed bouwen met een simpele teksteditor.

Voorbeelden van (gratis en open source) teksteditors:Voorbeelden van (gratis en open source) teksteditors:● Scite (Linux, Windows)● Smultron (Mac OS X)● ...

Wanneer u een teksteditor gebruikt moet u wel goed op de hoogte zijn van HTML en ook CSS en Javascript.Met een FTP-programma kan u de gemaakte bestanden uploaden naar de server en zelfs online aanpassen.

Voorbeelden van (gratis en open source) FTP-programma's:Voorbeelden van (gratis en open source) FTP-programma's:● FileZilla (Linux, Mac OS X, Windows)● Cyberduck (Mac OS X)

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 13

Page 14: Webdesign met HTML en CSS in Dreamweaver

● WinSCP (Windows)● ...

Is uw kennis van HTML echter te beperkt of wilt u zich er helemaal niet in verdiepen, dan moet u niet meteen zo diep in de buidel tasten voor de aankoop van een Dreamweaver-licentie.Er bestaan immers ook een aantal krachtige gratis webeditors in de aard van Dreamweaver.

Voorbeelden van webeditors:Voorbeelden van webeditors:● NVU en Kompozer (www.nvu.com – Mac OS X, Linux, Windows)● Aptana Studio

Een website starten in Dreamweaver

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 14

Page 15: Webdesign met HTML en CSS in Dreamweaver

1. Klik op Dreamweaver Site...

2. Voer een naam in voor de site die u wil maken. Het HTTP-adres dient u enkel in te vullen als u reeds over een domeinnaam beschikt. Klik onderaan op de knop Next >

3. Selecteer No, I do not want to use a server technology. Klik onderaan op Next>.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 15

Page 16: Webdesign met HTML en CSS in Dreamweaver

4. Selecteer de optie om de bestanden lokaal te bewerken.

5. Duid de map aan waar u de bestanden van uw website wil bewaren.

6. Klik onderaan op Next>.

7. Kies in het volgende scherm voor None (geen).

8. Klik nogmaals op Next>.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 16

Page 17: Webdesign met HTML en CSS in Dreamweaver

9. Klik op de knop Done.

10. In het palet Files wordt uw nieuwe site nu weergegeven.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 17

Page 18: Webdesign met HTML en CSS in Dreamweaver

De eerste webpagina's linken in Dreamweaver

1. Klik nu op HTML onder Create New.

2. De editor van Dreamweaver verschijnt met daarin een lege HTML-pagina. De basiscode voor de HEAD en de BODY is al aangemaakt.

3. Klik op Split.

4. Bovenaan wordt de HTML-code weergegeven, onderaan kan u de webpagina WYSIWYG (What you see is what you get) bewerken.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 18

Page 19: Webdesign met HTML en CSS in Dreamweaver

5. Geef een zinvolle naam aan de webpagina. De naam is mee bepalend voor hoe uw pagina in de zoekmachines zal gevonden worden.

6. Tik in het designvenster de tekst Homepagina.

7. Selecteer de tekst en kies bij eigenschappen voor Heading 2 (kop 2).

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 19

Page 20: Webdesign met HTML en CSS in Dreamweaver

8. U merkt dat de HTML-code voor een titel van niveau 2 automatisch is toegevoegd in het code-venster.

9. Bewaar het bestand als index.html.

De naam index.html is belangrijk. Een webserver zal dit bestand standaard openen als homepagina.

10. Het bestand index.html wordt nu ook getoond in het Files-panel.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 20

Page 21: Webdesign met HTML en CSS in Dreamweaver

11. Vervang de titel nu door Contactpagina.

12. Kies File / Save as (opslaan als) en sla het document nogmaals op onder de naam contact.html.

13. In het Files-palet is nu ook het bestand contact.html te zien.

14. Ga in het design-venster achter de titel staan en druk op de Enter-toets.

15. In de HTML-code verschijnt nu een nieuwe alinea met een spatie in (<p>&nbsp;</p>).

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 21

Page 22: Webdesign met HTML en CSS in Dreamweaver

16. Tik nu homepagina op de plaats van de spatie (&nbsp;).

17. Selecteer de tekst homepagina.

18. Klik in het eigenschappenvenster op het cirkeltje achter link.

19. Sleep met de linkermuisknop ingedrukt een pijl naar index.html in het Files-palet.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 22

Page 23: Webdesign met HTML en CSS in Dreamweaver

20. In de HTML-code is automatisch een link aangemaakt naar de pagina index.html.

21. Sla de aangepaste pagina op door op Ctrl + S te drukken (Mac OS X: CMD + S)

22. Dubbelklik nu op het bestand index.html in het Files-palet.

23. Ga achter Homepagina staan met de muis.

24. Druk op de Enter-toets.25. Er verschijnt een nieuwe alinea

met een spatie in.26. Tik Contact in.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 23

Page 24: Webdesign met HTML en CSS in Dreamweaver

27. Sleep met de linkermuisknop ingedrukt een pijl naar contact.html in het Files-palet.

28. De index.html-webpagina is nu op zijn beurt gelinkt aan de contact.html-pagina.

29. Bewaar de aangepaste pagina. Als er een sterretjes achter de naam van het bestand staat, dan is het bestand nog niet opgeslagen.

30. Open een vooruitblik (preview) door op F12 te drukken en test de links uit.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 24

Page 25: Webdesign met HTML en CSS in Dreamweaver

Het warm water niet blijven uitvindenHet web is de laatste jaren ingrijpend veranderd. Diverse grote websites en zoekmachines bieden de mogelijkheid aan om delen van hun informatie in uw eigen website te integreren. Zo wordt het mogelijk om Google Maps en YouTube-video's in uw eigen webpagina te integreren. Zulke systemen noemen we mashups.Een mashup is een webpagina of -applicatie waar gegevens uit meerdere bronnen gecombineerd en gezamenlijk gepresenteerd worden.

Diverse soorten mashups:

CombinerenBij een combinerende mashup worden verschillende typen gegevens gecombineerd. Populair zijn combinaties van gegevens met geografische coördinaten met Google Maps, waarbij gegevens op de betreffende locatie van een landkaart of satellietbeeld worden getoond.

VerzamelenBij verzamelmashups worden gegevens uit verschillende bronnen die ongeveer gelijke informatie bevatten samengevoegd tot een lijst van gegevens.Een voorbeeld is een website waar tv-programmainformatie uit de websites van de verschillende omroepen en kanalen verzameld wordt tot een overzicht.

ZoekenBij zoekmashups worden verschillende websites doorzocht om een specifiek element uit een aantal sites te kunnen vergelijken. Vaak gaat het om vergelijkingssites, die kijken bij welke webwinkel of reisbureau een bepaald product of reis het goedkoopst is.

AggregerenBij het aggegreren worden gegevens uit een aantal bronnen samengevoegd, soms gecombineerd met een filter. Verschil met verzamelen is dat de gegevens vaak in een gestandaardiseerd formaat zijn. Dit wordt het vaakst gebruikt in combinatie met RSS.

YouTube-video in uw websiteYouTube-video in uw websiteU kan niet alle YouTube-video's op uw website integreren. De auteur of uitgever moet hiervoor zijn toestemming hebben gegeven. Uiteraard moet u die toestemming niet zelf aanvragen. YouTube toont in dat geval de mogelijkheid om de film te 'linken'.

1. Ga naar YouTube.com en vraag de gewenste film op.2. Als de Embed-optie wordt weergegeven, kan u de film integreren in uw website.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 25

Page 26: Webdesign met HTML en CSS in Dreamweaver

3. Klik op het knopje Customize om de Embed-instellingen aan te passen naar wens.

4. U kan vervolgens de kleuren van de YouTube-speler aanpassen.

5. Klik met de muis in het Embed-invoerveld om de code te selecteren.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 26

Page 27: Webdesign met HTML en CSS in Dreamweaver

6. Klik de rechtermuisknop en kies Kopieer (of kopiëren).

7. Ga naar Dreamweaver en open de pagina waaraan u de film wil toevoegen.8. Ga met de muis achter de reeds aanwezige elementen in het design-venster staan.9. Klik op de Enter-toets.10. Aan de HTML-code is een nieuwe alinea met een spatie toegevoegd

(<p>&nbsp;</p>)11. Selecteer &nbsp; in het code-venster.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 27

Page 28: Webdesign met HTML en CSS in Dreamweaver

12. Klik in het code-venster tussen <p> en </p> met de rechtermuisknop en kies voor paste of plakken.

13. De code van YouTube staat nu in het code-venster.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 28

Page 29: Webdesign met HTML en CSS in Dreamweaver

14. Klik één keer in het design-venster om het te updaten.

15. U kan de werkende YouTube-speler enkel zien in de browser (via de vooruitblik-optie of preview).

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 29

Page 30: Webdesign met HTML en CSS in Dreamweaver

Google Maps op uw siteGoogle Maps op uw site

1. Ga naar maps.google.com en voer het gezochte adres in.2. Klik op de knop Zoeken in Maps.

3. U kan naar de gewenste positie zoomen en kiezen voor de satellietweergave of de gewone kaart.

4. Klik op Link rechts bovenaan de kaart.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 30

Page 31: Webdesign met HTML en CSS in Dreamweaver

5. U kan de HTML-code kopiëren. 6. Klik op Ingesloten kaart aanpassen en voorbeeld ervan weergeven als u nog

meer instellingen wil wijzigen.

7. Kies de gewenste grootte en zoom in tot het gewenste niveau.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 31

Page 32: Webdesign met HTML en CSS in Dreamweaver

8. Selecteer de HTML-code onderaan de pagina.

9. Kopieer ze met de rechtermuisknop.

10. Ga naar Dreamweaver en open de pagina contact.html.11. Ga met de muis achter de reeds aanwezige link staan en klik op Enter.12. In het code-venster verschijnt een nieuwe alinea (<p>&nbsp;</p>).

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 32

Page 33: Webdesign met HTML en CSS in Dreamweaver

13. Plak de HTML-code van Google Maps met de rechtermuisknop in het code-venster in de plaats van &nbsp;

14. Mogelijk kan u de kaart lokaal niet zien. Wanneer u de bestanden uploadt naar een server is er echter geen enkel probleem.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 33

Page 34: Webdesign met HTML en CSS in Dreamweaver

Inhouden uit een tekstverwerkerU kan niet zonder meer tekst uit een tekstverwerker zoals Microsoft Word in een webpagina plakken. Tekstverwerkers gaan op een slechte manier om met inhouden: ze vermengen inhoud (tekst, afbeeldingen...), structuur (titels, alinea's...) en opmaak (kleur, lettertype...) en slaan alles samen op in één document.Wanneer we een goede website willen bouwen, moeten we die dingen strict gescheiden houden (hierover later meer). Wanneer u een tekst uit Word kopieert om hem in Dreamweaver te plakken, neemt u ook heel wat “opmaakcodes” van Word mee over. Afbeeldingen uit een tekstverwerkingsdocument worden zelfs helemaal niet overgenomen.

In HTML mogen we enkel werken met platte tekst. De simpelste oplossing is om tekst uit een tekstverwerker te kopiëren en vervolgens te plakken in een simpele tekstditor zoals Microsoft Kladblok. Vervolgens kopieert u de tekst opnieuw en plakt hem in Dreamweaver. Dan bent u er pas zeker van dat alle opmaakcodes verwijderd zijn. U moet dan wel opnieuw starten met het ingeven van zowel structuurelementen als van opmaak.

Dreamweaver beschikt echter ook over een ingebouwde module voor het importeren van Word-documenten.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 34

Page 35: Webdesign met HTML en CSS in Dreamweaver

4. Navigeren door een website met HTML

Links en hyperlinksHogerop in de cursus hebben we reeds uitgelegd hoe een link of hyperlink in HTML wordt opgebouwd. Ook hebben we reeds pagina's aan elkaar gelinkt in Dreamweaver.

Image mapsEen image map bestaat uit een eenvoudige afbeelding (jpeg, gif...). Door bepaalde delen van de afbeelding aanklikbaar te maken, kan u bezoekers naar verschillende pagina's in de website doorsturen.Let op: gebruik image maps zinvol. Het heeft geen zin de hele navigatiestructuur van uw website te maken via image maps.

Zinvolle toepassingen:Zinvolle toepassingen:● een afbeelding van een huis met aanklikbare kamers● een landkaart met aanklikbare provincies● een groepsfoto's waarbij alle personen aanklikbaar zijn...● ...

Image maps maken in DreamweaverImage maps maken in Dreamweaver

1. Maak een nieuwe HTML-pagina in Dreamweaver aan.2. Bewaar de pagina. 3. Voeg een foto in.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 35

Page 36: Webdesign met HTML en CSS in Dreamweaver

4. Laat Dreamweaver de foto kopiëren naar de map Images. Als die map in uw sitestructuur nog niet bestaat, moet u die eerst aanmaken.

5. Selecteer empty bij Image Tag Accessibility Attributes.

6. Kies Draw Rectangle Hotspot.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 36

Page 37: Webdesign met HTML en CSS in Dreamweaver

7. Sleep een rechthoek over het deel van de afbeelding dat u aanklikbaar wil maken.

8. Voer onderaan de webpagina in waarnaar de aanklikbare zone verwijst.

9. Voer een zinvolle tekst in bij Alt. Bijvoorbeeld: “Ga naar de kinderkamer”.Dit Alt-attribuut tootn een gele tooltip wanneer een bezoeker met zijn muis over dit deel van de afbeelding beweegt. Jammer genoeg werkt Alt enkel in Internet Explorer.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 37

Page 38: Webdesign met HTML en CSS in Dreamweaver

10. Selecteer het Alt-attribuut in de HTML-code in het Code-venster.

11. Vervang alt door title.

12. Naast rechthoekige klikzones, kan u ook ronde zones kiezen. Met het polygone gereedschap kan u zelfs veelhoeken vormen.

13. Vergeet niet telkens het alt-attribuut te vervangen door title.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 38

Page 39: Webdesign met HTML en CSS in Dreamweaver

5. Inhoud, structuur en opmaak met HTML en CSSHet oorspronkelijke doel van HTML was tekstinformatie via het "internet" uitwisselbaar maken onafhankelijk van het computersysteem of het besturingssysteem. HTML-markeringen moesten het mogelijk maken om informatie zo te structureren dat een PARSER annex BROWSER die informatie zou kunnen weergeven. Al snel zag ook de bedrijfswereld en de hobby'ist de mogelijkheden van HTML in om zichzelf via het internet (lees: www) voor te stellen.Daarom ontstond al snel de vraag om naast structuurmarkeringen ook stijl- en opmaakmarkeringen aan HTML toe te voegen en werd het oorspronkelijke doel van HTML wat over het hoofd gezien.

Met de volgende HTML-code kon u bijvoorbeeld de grootte en de kleur van een bepaald tekstdeel instellen:

<font size=”10” color=”blue”>een stuk tekst</font>

Hierdoor ging het oorspronkelijke doel van HTML een beetje verloren. In XHTML ( de nieuwste versie van HTML) mag u om die reden enkel HTML-markeringen gebruiken die iets te maken hebben met de structuur van de pagina.

HTML dient voor structuur een inhoudLijst van alle markup in XHTML 1.1

Markering (tag) beschrijving <!--...--> Een commentaarregel van de webmaster <!DOCTYPE> Het documenttype <a> anker (link) <abbr> samenvatting <acronym> acroniem <address> adres <area> Definieert een bepaalde aanklikbare zone in een image

map <b> Vetgedrukte tekst <base> Definieert een basis-url voor alle links in de pagina.<bdo> Definieert de schrijfrichting van de tekst.<big> grote tekst <blockquote> Een lang citaat. <body> Het body-element van de webpagina.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 39

Page 40: Webdesign met HTML en CSS in Dreamweaver

<br> line break, lijneinde<button> drukknop<caption> table caption<cite> citaat <code> weergave van computercode <col> Definieert attributen van tabelkolommen<colgroup> Een groep tabelkolommen. <dd> Omschrijving van een definitie <del> Verwijderde tekst <div> Een onderdeel van een document <dfn> Een begrip uit een definitie <dl> Een definitielijst<dt> Een definitieterm <em> Beklemtoonde tekst <fieldset> Een verzameling formulierelementen (meestal weergeven

als een lijn rond een formulier) <form> Formulier.<frame> Een onderliggend venster: HTML kan diverse pagina's in

één venster weergeven. <frameset> Een verzameling van frames <h1> to <h6> Titels van niveau 1 tot 6<head> De HEAD-sectie van een webpagina <hr> een regel of lijn <html> HTML-document <i> schuingedrukte tekst <iframe> Een frame in een ander frame<img> Een afbeelding <input> Een invoerelement in een formulier. <ins> Ingevoerde tekst <kbd> Toetsenbordtekst <label> Een label voor een formulierelement <legend> De titel van een frameset.<li> Een onderdeel of element van een lijst. <link> Het 'adres' van een bronbestand (css, javascript...)<map> Een image map <meta> Meta-informatie over de pagina

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 40

Page 41: Webdesign met HTML en CSS in Dreamweaver

<noframes> Een noframes-onderdeel voor webbrowsers die frames niet kunnen weergeven.

<noscript> Een noscript-gedeelte voor webbrowsers die geen scriptingtalen ondersteunen.

<object> Een ingesloten object (vb. een Flashbestand)<ol> Een genummerde lijst <optgroup> Een groep opties in een formulier.<option> Een optie uit een vervolgkeuzelijst. <p> Een alinea <param> Een parameter voor een object. <pre> Vooraf opgemaakte tekst. <q> Een kort citaat. <samp> Een voorbeeld van computercode. <script> Een ingevoegd (uitvoerbaar) script. <select> Een vervolgkeuzelijst. <small> Smalle tekst <span> Een bepaald onderdeel in een tekst. <strong> Vette tekst <style> Een stijldefinitie (CSS) <sub> Kleine tekst onder de regel. <sup> Kleine tekst boven de regel (zoals bij vierkante meter) <table> een tabel <tbody> het 'body'-element van de tabel. <td> Een tabelcel <textarea> Een groot invoerveld voor tekst in een formulier.<tfoot> De voet van een tabel. <th> De kop van een tabel <thead> De kop van een tabel <title> Titel van het HTML-document. <tr> Een tabelrij <tt> teletype text <ul> Niet-genummerde lijst <var> Een variabele

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 41

Page 42: Webdesign met HTML en CSS in Dreamweaver

Tabellen voor opmaak? Dan zit u grondig fout...

De bedoeling van een (HTML-)tabel is elementen met elkaar vergelijken.

Appelen Peren kleur groen groen vorm rond met kleine inzakking

bovenaan rond met langwerpige afgeronde uitstulping bovenaan

boom appelaar perelaar

Webdesigners gingen al snel tabellen gebruiken als een middel om afbeeldingen exact te positioneren op een pagina. Programma's als Adobe Photoshop maken het zelfs mogelijk om een ontwerp van een afbeelding in stukken te snijden: onderdelen zoals knoppen, banners enz. komen op die manier in verschillende tabelcellen te staan.

In heel wat websites (en vaak niet op de minste) worden tabellen gebruikt voor de vormgeving van de webpagina. Het is immers de makkelijkste manier om snel een layout van een webpagina te maken. Ook in Dreamweaver zitten een massa kant-en-klare sjablonen voor webpagina's waarbij wordt uitgegaan van tabellen.

Het gaat inderdaad snel om op die manier een layout te bouwen.... Maar bij elke aanpassing van de stijl of vormgeving in de toekomst, moet u van nul af aan opnieuw beginnen. De inhouden zitten immers in tabellen en moeten opnieuw worden ingegeven.

Tabellen maken het ook behoorlijk moeilijk om webpagina's on-the-fly weer te geven op andere andere platformen (zoals gsm's enz.).

Inhoud, structuur en opmaak gescheiden houdenWe moeten trachten zoveel mogelijk inhoud, structuur en opmaak te scheiden. Tekstverwerkers zoals Microsoft Word gooien alles op een hoopje: een gebruiker tikt een tekst in zonder dat hij hoeft na te denken over enige vorm van structuur en kan meteen ook de tekst opmaken met lettertypes, kleuren enz.

Het (correcte) aanmaken van een webpagina kan je best vergelijken met het opstellen van een krantenartikel.

● De redacteur bepaalt de structuur van alle artikels1. een kop of titel2. een korte inleiding of beschrijving3. een tekst onderverdeeld in alinea's4. de naam van de auteur5. een quote

● Een journalist schrijft een artikel en houdt daarbij rekening met de opgegeven structuur

● Redacteurs, marketeers en layoutmensen leggen een stijl en opmaak voor de gehele krant vast.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 42

Page 43: Webdesign met HTML en CSS in Dreamweaver

● De layoutafdeling geeft alle structurele elementen een vooraf bepaalde opmaak of stijl.

● De krant wordt gepubliceerd.

Webdesigners nemen al deze taken vaak in hun ééntje voor hun rekening waardoor het gevaar bestaat de verschillende stappen op een hoopje te gooien. Probeer echter steeds rekening te houden met de verschillende fasen in het ontwerp:

1. structuur2. inhoud3. opmaak4. publicatie

Ruwweg kunnen we het als volgt stellen:Ruwweg kunnen we het als volgt stellen:

● De inhoud van uw webpagina bestaat uit platte tekst zonder opmaak waarbij u echter een structuur vooropstelt.

● U legt de structuur vast met behulp van HTML1. een kop of titel: H1, H2...2. een korte inleiding of beschrijving: metagegevens in de head (description),

een p-markering...3. een tekst onderverdeeld in alinea's: een tekst gemarkeerd door diverse p-

tags4. de naam van de auteur: een label-markering5. een quote: een blockquote-markering

● De layout voor de verschillende HTML-elementen (h1, h2, p, label, blockquote...) legt u vast met CSS.

Tekstonderdelen insluiten in HTML-markeringenTekstonderdelen insluiten in HTML-markeringenStop elke tekstonderdeel van uw webpagina in een structurele markering. Schrijf tekst dus steeds in een alinea, quote of titel. Plak tekst nooit los in de body zonder de tekst tussen een markering te plaatsen.

Het onderstaande voorbeeld leidt tot een verkeerd gebruik van HTML:

<body>

Dit is mijn tekst.

</body>

Correct gebruik:

<body>

<p>

Dit is mijn tekst.

</p>

</body>

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 43

Page 44: Webdesign met HTML en CSS in Dreamweaver

U kan uiteraard net zoals in een geschreven of gedrukte tekst meerdere alinea's aan een webpagina toevoegen:

<body>

<p>

Dit is een alinea.

</p>

<p>

Dit is nog een alinea.

</p>

</body>

In de BODY-sectie van de webpagina plaatst u dus alle tekstonderdelen tussen "structuur"markeringen.

Uw browser parst de structuur-markeringen en geeft ze in de weergave een standaardopmaak:

● <h>-markeringen staan op afzonderlijke regels en worden groter weergegeven● <p>-markeringen starten op een nieuwe regel● <ul>- en <li>-markeringen worden als een lijst met "bullets" weergegeven● ...

CSS zorgt voor opmaak en stijl (Cascading Style Sheets)

Inhoud en structuur van opmaak scheidenInhoud en structuur van opmaak scheidenU kan ook markeringen opnemen om de tekst meteen vorm te geven. Zoals hogerop reeds gezegd, is dit een verouderde en achterhaalde techniek van webdesign. Wilt u toekomstgericht denken en werken en vooral tijd besparen op langere termijn, neemt u voor de opmaak uw toevlucht tot CSS of Cascading Style Sheets.HTML-markeringen structureren de diverse onderdelen van de tekstuele inhoud, CSS zorgt voor de opmaak van de diverse onderdelen.

De vorm van CSSDe vorm van CSSCSS bepaalt de opmaak of de stijl van de diverse tekstonderdelen: u past een sjabloon toe! U kan dit sjabloon op 2 manieren toekennen: Een sjabloon zorgt voor een eenduidige vorm en layout!

In de head tussen

<style>

en

</style>

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 44

Page 45: Webdesign met HTML en CSS in Dreamweaver

In een gekoppeld extern bestand:

<link href="stijl.css" rel="stylesheet" type="text/css">

U kan op heel eenvoudige wijze een stijl toekennen aan elke structuurmatige HTML-markering:

HTML-markering{ eigenschap:waarde; andere eigenschap:waarde; }

De op die manier door CSS geselecteerde HTML-markering heten we een SELECTOR.

Bijvoorbeeld:

p{

text-align:center;

width:300px;

background-color:#cccccc;

color:red;

}

Het bovenstaande voorbeeld maakt alle alinea's op dezelfde manier op:

● tekst van de alinea's wordt gecentreerd● de alinea's krijgen een breedte van 300 pixels● de alinea's krijgen een lichtgrijze achtergrondkleur● tekstkleur van de alinea's is rood

Stijlen groeperenStijlen groeperen

Als u voor diverse elementen dezelfde eigenschappen wil instellen, kan u eenvoudig stijlen groeperen.Bijvoorbeeld: aan alle soorten koppen dezelfde kleur toekennen:

<html>

<head>

<style>

h1,h2,h3{color:red;}

</style>

</head>

<body>

<h1>Kop 1</h1>

<h2>Kop 2</h2>

<h3>Kop 3</h3>

</body>

</html>

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 45

Page 46: Webdesign met HTML en CSS in Dreamweaver

U kan daarnaast voor elk element afzonderlijk nog aparte eigenschappen vormgeven:

<html>

<head>

<style>

h1,h2,h3{

color:red;

padding:10px;

}

h1 {

border:3px solid black;

}

h2 {

border:2px solid blue;

}

h3 {

border:1px solid yellow;

}

</style>

</head>

<body>

<h1>Kop 1</h1>

<h2>Kop 2</h2>

<h3>Kop 3</h3>

</body>

</html>

Stijlklassen: een verschillende opmaak voor dezelfde elementenStijlklassen: een verschillende opmaak voor dezelfde elementenIn het bovenstaande voorbeeld worden alle door CSS geselecteerde HTML-elementen op dezelfde manier opgemaakt.In de praktijk betekent dit dat alle <p>-markeringen, alle <h1>-markeringen enz. op dezelfde manier worden weergegeven.Alhoevel dit voor eenvormigheid in stijl zorgt, is dit ook niet altijd wat u wenst. Een inleiding van een tekst wordt bijvoorbeeld anders weergegeven dan de rest van de alinea's.

We nemen een krantenartikel als voorbeeld. De tekst van het artikel bestaat uit een schuingedrukte inleiding. De rest van de tekst wordt normaal weergegeven. Toch staat zowel de inleiding als de rest van de tekst gemarkeerd tussen <p>-tags.In het onderstaande voorbeeld worden alle alinea's inclusief de inleiding uitgevuld en van een blauwe tekst voorzien.

<html>

<head>

<style>

p{

text-align:justify;

color: blue;

}

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 46

Page 47: Webdesign met HTML en CSS in Dreamweaver

</style>

</head>

<body>

<h1>Schrijven op een foton</h1>

<p>Amerikaanse natuurkundigen hebben het logo van hun universiteit op één enkel lichtdeeltje getekend. Hoogleraar John Howell van de universiteit van Rochester publiceerde het resultaat van zijn team in de gerenommeerde Physical Review Letters.

</p>

<p>Het klinkt onmogelijk, maar we slaan geen nullen en énen op, maar het hele plaatje, in lichtvorm, aldus project John Howell. Inderdaad onmogelijk, want we geloven er dan ook geen barst van.

</p>

<p>Het sprookje gaat zo: er werd precies één foton door een raster gestuurd waarin een patroon was gemaakt, in dit geval de letters UR. Door de ingewikkelde kwantumeigenschappen van licht, immers deeltje én golf tegelijkertijd, nam het foton het patroon over. Mooi.

</p>

<p>Vervolgens werd het foton afgeremd in een magisch doosje vol cesiumgas van 100 graden celsius, waarin de lichtdeeltjes blijkbaar gecomprimeerd en bewaard kunnen worden. Later kan de foton weer tevoorschijn worden getoverd, en uit de foton het letterpatroon worden gedistilleerd.

</p>

</body>

</html>

We willen de inleiding echter schuingedrukt weergeven: de inleiding hoort tot een aparte klasse (een geval apart ;-)). Aan de betrokken alinea kennen we een class-attribuut toe met de naam "inleiding".

<p class="inleiding">

vervolgens maken we de klasse aan in het stijlsjabloon:

p.inleiding{

font-style: italic;

}

Een klasse moet zelfs niet toegekend worden aan een welbepaald HTML-element. U kan ook een losstaande klasse definiëren en die aan meerdere HTML-elementen toekennen. Het voorbeeld

p.inleiding{

font-style:italic;

}

maakt alle <p>-tags met de klasse "inleiding" schuingedrukt.Het voorbeeld.inleiding{

font-style:italic;

}

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 47

Page 48: Webdesign met HTML en CSS in Dreamweaver

maakt ALLE elementen (dus niet alleen de <p>-tags) met de klasse "inleiding" schuingedrukt.

Stijlen en klassen combinerenStijlen en klassen combinerenU kan meerdere klassen definieren en ze aan een en hetzelfde element toekennen. Bijvoorbeeld:

.inleiding{

font-style:italic;

}

.opmerking{

border:1px solid red;

}

● Alle elementen met de klasse "inleiding" worden schuingedrukt.● Alle elementen met de klasse "opmerking" krijgen een rode rand van 1 pixel.

U kan de beide klassen nu aan een element toekennen door de benamingen voor de klassen in het attribuut CLASS op te nemen, gescheiden door een spatie.

<p class="opmerking inleiding">tekst</p>

De volgorde waarin u de klassen opneemt, speelt geen rol voor de weergave. U mag dus even goed

<p class="inleiding opmerking">tekst</p>

schrijven.

Ook in het stijlschema kan u klassen combineren.Bijvoorbeeld:

.inleiding{

background-color:#cccccc;

}

.opmerking{

color:red;

}

.opmerking.inleiding{

border:1px solid black;

}

Het bovenstaande stijlsjabloon heeft het volgende resultaat:

● Alle elementen met de klasse "inleiding" krijgen een grijze achtergrondkleur.● In alle elementen met de klasse "opmerking" wordt de tekst rood weergegeven.● Alle elementen met beide klassen krijgen een zwarte boord van 1 pixel.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 48

Page 49: Webdesign met HTML en CSS in Dreamweaver

ID-selectoren: doelgericht stijlen toekennenID-selectoren: doelgericht stijlen toekennen

Het gebruik van klassen wordt momenteel ondersteund in HTML en XML-gebaseerde formaten als SVG en MathML, maar niet zo goed in XML zelf. U kan echter doelgericht een welbepaald element selecteren door aan het element waaraan u een bepaalde stijl wil toekennen, een ID toe te kennen.Bijvoorbeeld:

<p id="inleiding">Tekst</p>

In het stijlsjabloon gebruikt u in dit geval niet meer de puntnotatie (.inleiding), maar de #-notatie (#inleiding).

p#inleiding{font-style:italic;}

of

#inleiding{font-style:italic;}

Hou er rekening mee dat CSS hoofdlettergevoelig (case-sensitive) is. Als u voor de benamingen van uw selectoren in het stijlschema hoofdletters gebruikt, moet u die hoofdletters ook in de attribuutwaarden gebruiken.

Bijvoorbeeld:

De CSS-notatie:

#Inleiding{}

De HTML-notatie:

<p id="Inleiding">tekst</p>

Fout zou zijn:

<p id="inleiding">tekst</p>

zou tot een foutieve weergave leiden.

Een klasse gebruikt u dus best als u aan meerdere elementen dezelfde stijl wil toekennen. ID-selectoren gebruikt u in het geval u aan een welbepaald element een stijl wil toekennen.

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 49

Page 50: Webdesign met HTML en CSS in Dreamweaver

Attribuutselectoren: een krachtig instrumentAttribuutselectoren: een krachtig instrument

U kan ook alle elementen die een bepaald attribuut bevatten, van een specifieke stijl voorzien.

Bijvoorbeeld:Alle afbeeldingen met een TITLE-attribuut een groene boord geven.

De HTML-code:<img src="afbeelding.jpg" title="Mijn foto">

<img src="afbeelding.jpg">

De CSS-notatie:img[title]{

border:1px solid green;

}

Alle afbeeldingen met het attribuut TITLE krijgen een groene boord, alle afbeeldingen zonder het attribuut TITLE krijgen geen boord.

Niet alleen kan u stijlen toekennen aan HTML-elementen met een welbepaald attribuut, u kan zelfs stijlen toekennen aan elementen met een bepaalde attribuutwaarde.

Praktische voorbeelden:1. Links naar welbepaalde websites een andere kleur geven2. JPG-afbeeldingen een groene rand geven, PNG-afbeeldingen een blauwe rand

geven

Kris Merckx – Webontwikkeling – www.computerkit.be 2008 – Copyright: Creative Commons License 50