<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cocktails and Dreams</title>
<style type="text/css">
body {
background-color: #006;
background-image: url(media/wp.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFC;
}
a:link {
color: #F69;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F69;
}
a:hover {
text-decoration: none;
color: #F00;
background-color: #FFF;
}
a:active {
text-decoration: none;
color: #F00;
}
h1 {font-size: 24px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 9px;}
#topbanner {
position:absolute;
left:0px;
top:0px;
width:940px;
height:100px;
z-index:1;
}
#menu {
position:absolute;
left:10px;
top:135px;
width:125px;
height:250px;
z-index:2;
}
#tekst {
position:absolute;
left:185px;
top:135px;
width:750px;
height:250px;
z-index:3;
}
</style>
</head>
<body>
<div id="topbanner">
<img src="media/topbanner.png" />
</div>
<div id="menu">
<p><a href="index.html">Forside</a></p>
<p><a href="aabningstider.html">Åbningstider</a></p>
<p><a href="priser.html">Priser</a></p>
<p><a href="arrangementer.html">Arrangementer</a></p>
<p><a href="stillinger.html">Ledige stillinger</a></p>
<p><a href="adresse.html">Adresse</a></p>
</div>
<div id="tekst">
<h1>Velkommen</h1>
HTML
& CSS
af Hasse Sørensen for MicroWorld-NetCom

HTML & CSS
Tekst og design: Hasse Sørensen, Nordisk Grafik
Udgiver og ophavsretsholder: MicroWorld-NetCom
Copyright © 2011 Nordisk Grafik og MicroWorld-NetCom.
Alle rettigheder forbeholdes. Kopiering og
gengivelse af enhver art er strengt forbudt.
Den juridiske ophavsretsholder af HTML-sproget er
World Wide Web Consortium (W3C).
Formålet med dette materiale er at beskrive hvordan det
kan lade sig gøre at designe, og vedligeholde, websites
uden brug af dyrt software, fx Adobe™ Dreamweaver®.
For at kunne følge dette materiale og skabe lignende
websites i fremtiden kræves kun en computer med et
præinstalleret tekstbehandlingsprogram (Notesblok i
Windows eller TextEdit på Mac OSX), en browser
(Internet Explorer, Firefox, Safari...) og på et tidspunkt vil
det være nødvendigt at tage et billedbehandlingsprogram i brug. Til grundlæggende behov kan vi anbefale
Picasa, som kan hentes på www.picasa.com.
Med andre ord: Med dette materiale – og noget på
hjerte – kan du blive webdesigner, blot du har den
billigeste computer du kan finde1, og en ditto
internetforbindelse2.
1
2
(I skrivende stund) Asus netbook: kr. 1.895,(I skrivende stund) Kr. 69,- pr. md.

/*Indhold*/
Indhold
Internettet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Mini leksikon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Kom godt i gang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Koderne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Før vi starter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Selvstændig CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Visual Lightbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Fixed Div . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Share this! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Kommentarer i koden . . . . . . . . . . . . . . . . . . . . . . . . 26
Mailto: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Formularer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
IFrame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Billedbehandling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Udgiv website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Fremtidens koder . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
@ font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Tekst i spalter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Rotation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Afrundede hjørner . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
RGB-farver og gennemsigtighed . . . . . . . . . . . . . . 38
Skygger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Farveforløb . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Baggrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

/*Internettet*/
Internettet
Internettet blev opfundet i begyndelsen af marts
1989, hos CERN i Schweiz, af IT-medarbejderen Tim
Berners-Lee.
Den første internetserver var en NEXT Cube med
64 Mb RAM, 256 Mb harddisk og en label med
påskriften ”DO NOT POWER DOWN!!!”
Tim har siden initieret oprettelsen af internetkonsortiet W3C, som holder styr på nye protokoller og
kodesprog til internettet, og forsøger at opdrage
på både browserudviklere og webdesignere. Se
evt w3.org for mere information.
Opfindelsen af internettet består i et kodesprog til
websites (HTML), en protokol til transport af filer
(FTP) og en protokol til at hente websider (HTTP) til
at læse i en browser.
– hvis HTML, FTP, HTTP og browser er sort snak
kan du læse om dem i afsnittet Mini leksikon.
Internettet fungerer på dén måde at filer lægges
tilgængelige på en server, der igen er forbundet
med et ”edderkoppespind” med alle de andre
internetservere. Når en person på Langeland
henter en webside i Bangkok går datastrømmen
igennem servere i 11-12 lande, bla. Pakistan. Skulle
alle Pakistans servere blive afbrudt, går datastrømmen igennem servere i Tibet, Kirgisistan og
Rusland i stedet.
Siden de første websites er internettet blevet
fodret med mange nye teknologier, for at gøre
oplevelsen mere interessant; CSS, JavaScript, Flash,
søgemaskiner og kreditkortbetaling. – mange af
disse opfindelser blev oprindeligt gjort til ære for
pornosites (se minileksikon).
Tim Berners-Lee
Den første internet-server

/*Mini leksikon*/
Mini leksikon
Browser
Et program der kan læse HTML, fx Internet
Explorer, Mozilla Firefox, Apple Safari, Google
Chrome, Opera m.fl.
Cache
Når en computer eller internetserver opbevarer en
mængde websider sådan at de kan vises hurtigere,
end hvis de skal hentes direkte fra serveren hver
gang. Smart til 128kb/s modem’er til kr. 11,25 i
minuttet, men et helvede i forhold til opdatering
af websider.
CMS
Content Management System, et website bygget
op omkring én skabelon-side, og hvor både menu,
tekst og billeder hentes i en database. Dette gør
det muligt at redigere, opdatere og interagere
med websitet direkte i browseren. De fleste større
virksomheders website er et CMS-site, for let
opdatering, imens Facebook og hotels.com også
er CMS-sites for let interaktion.
CSS
Cascading Style Sheet, Det kodesprog der bruges
til at styre designet på et website. CSS kan være én
lay-out fil der styrer hele websitet, eller koden kan
være placeret i toppen af hver enkelt side.
Domæne
Et domæne er en webadresse, fx www.netcom.dk.
Et domæne er delt i et top-level domain (fx ”.dk”)
et domain (fx ”netcom”) og evt. et sub-domain (fx
”aarhus” i ”aarhus.netcom.dk”).
Top level domains er landedomæner (.dk, .se, .no
osv.), typedomæner (fx. .com, .org, .gov osv.) og i
sjældne tilfælde blandinger (.co.uk, .go.th osv.).
E-mail
Electronic Mail. E-brev.
Firewall
En ’brandmur’ tjener til at forhindre uønsket
adgang til en computer eller server.
FTP
File Transfer Protocol, dén protokol der bruges til
at up- og downloade filer mellem en internet
server og en computer. Bruges bla. til at placere et
website på en internet-server.
Hacker
En person der skaffer sig uaftoriseret (og ulovlig)
adgang til en computer eller server. En hacker kan
efterlade sig en virus, en orm, en trojansk hest,
spyware eller simpelthen ødelægge eller ændre et
website. Hackere kan være tyve, hærværksmænd
eller politiske aktivister. Et mål for en politisk
hacker kunne være at ændre CIA’s website ved at
skrive undskyldninger på forsiden, imens et mål
for en tyv kunne være at overføre penge fra alle
konti i en bank til egen konto.
Hjemmeside
Et websites første side, index.html. Bruges også i
betydningen privat website.
HTML
Hyper Text Markup Language, det kodesprog der
bruges til at udforme websider.
HTML findes i forskellige versioner: HTML 1, HTML
2, HTML 3, HTML 4, XHTML (se det) og snart HTML
5.
HTTP
Hyper Text Transfer Protocol, dén protokol der
bruges til at hente websider, så de kan læses i en
browser.
IP-adresse
Internet Protocol; adressen til en computer eller
server på internettet. Bruges sjældent til at hente
websites, da vi i stedet bruger URL (se det).
IP-adresser bruges af bla. politiet til at finde en
computer der har været brugt til at hente ulovlig
musik eller lægge bombeudskrifter ud på nettet,
så det er på tide du holder op...

/*Mini leksikon*/
PHP
HTML-sider der henter data fra en database, i
stedet for at indeholde tekst og billeder. Bruges til
dynamiske websites, fx CMS-sites, WikiPedia eller
Facebook.
Pornosite
Et website der viser amatørgynækologiske billeder
og film.
Portal
Et website der tjener som en adgangsvej til resten
af internettet, fx. www.google.dk eller adx.dk
RSS
Really Simple Syndication, XML-data (se det)
der kan distribueres via websites og RSSlæsere på computere, mobiltelfoner m.m.
Bruges oftest til nyheds-resuméer, blog-opdateringer m.m.
Server
En computer der altid er tændt, som der altid er
adgang til, og som bla. kan bruges til at placere et
website og E-mails på (”mail-server”).
WAP
Wireless Application Protocol, internet trafik på
mobil-telefon-netværket.
Webmail
E-mail der læses og skrives på et website, fx Gmail
eller Hotmail.
Webhotel
En server-plads man lejer til at placere et website,
E-mails m.m.
Webshop
Et website hvor det er muligt at købe varer, og
som regel betale med kreditkort.
Webside
En enkelt side på et website.
Website
Et ’websted’, alle sider placeret på én
www-adresse.
WWW
World Wide Web. En beskrivelse af internettet, der
oprindeligt tjente til at afgrænse websites fra fx
nyhedsgrupper. Nu bruges beskrivelsen ikke
længere, da internettet stort set udelukkende
består af websites, og www er ikke nødvendigt
foran 99% af alle web-adresser.
XHTML
Extensible HyperText Markup Language
En ’oprydning med en møggreb’ i det tidligere
dårligt strukturerede HTML. Har indbygget mulighed for fællesstrukturering med XML data.
XML
Extensible Markup Language, en data-struktureringsform der minder om – og kan bruges sammen med – HTML (XHTML). Bruges bla. til adressebogen på din mobiltelefon og data i nyere Word
dokumenter (.docx).
URL
Uniform Resource Locator, en web-adresse.
Begrebet bruges sjældent i Danmark, men i næsten alle andre lande er det almindeligt at finde på
fx visitkort; ”URL: www.netcom.dk”.
I dette materiale har vi valgt at arbejde med den version af HTML der hedder XHTML 1.0
Transitional, og CSS version 3.0, som er de seneste stabile versioner af HTML og CSS der anbefales af
The Internet Consortium (W3C).
Den næste version af HTML – HTML5 – bliver behandlet sidst i materialet.

/*Kom godt i gang*/
Kom godt i gang
Dit design bliver simpelthen pakket ned i koder,
og ’genopstår’ på den besøgendes skærm, som
kan være alt fra en kæmpe Apple Studio Display til
en lille bitte netbook med Internet Explorer.
Før du starter på et website er det en god idé at
have et klart overblik over hvad sitet skal indeholde, hvor ofte det skal opdateres, hvem der skal
opdatere det, hvem målgruppen er og hvad sitet
skal kunne udvikle sig til.
Ét af de vigtigeste hensyn at tage på et website er
navigationen, altså hvordan man klikker fra én side
til en anden. Det er vigtigt at brugeren kan finde
og finde ud af at bruge sitets menu(er).
Du skal altså tegne to skitser inden du går i gang:
Én skitse der forestiller dit side-design, og én skitse
der viser hele websitet i diagram-form.
En webside starter som en idé eller en skitse, bliver
omdannet til kode, billeder, tekst og evt. film og
lyd, placeres på en server, hvorfra alle med
internetadgang og en browser kan hente koderne
m.m. ned på deres computer, hvor koderne igen
omdannes til dét design du oprindeligt lavede da
du skrev koden.
– og så er helvede løs!
Internettet er ren anarki, både med hensyn til
hvilke websites der bliver lagt ud (propaganda,
børneporno, bombeopskrifter…), og med hensyn
til teknologien. Dette betyder at da du sad med
din computer og testede siden i Firefox på en 1280
x 800 skærm, og den så fin ud, kunne du ikke
forsvare dig imod dem der kigger på siden i
Internet Explorer på en 900 x 640 skærm, med et
stort udvalg af ekstra menubjælker øverst og til
højre på skærmen.
Logotop (flash?)
Nye
varer
Menu
Del
Billede
Tilmeld
Nyhedsbrev
Forside
Om os
Blå
Varer
Service Kontakt
Røde

/*Koderne*/
Koderne
HTML-koder består af en række koder – såkaldte ’tags’, før, efter og omkring teksten, der styrer sidens
layout, indsætter billeder, definerer links m.m.
Et ’tag’ består af et ’krokodillenæb’, en vedtaget kode og et afsluttende ’krokodillenæb’, evt. en tekst, og
derefter den samme kode igen, denne gang forsynet med en skråstreg. Et tekst-afsnit ser fx sådan ud:
<p>Dette er et afsnit</p>, Hvor <p> betyder Paragraph (afsnit).
Visse koder er ’selv-afsluttede’, altså indeholder deres egen afslutning, fx <br/>, der betyder Break
(linieskift).
HTML koder skal skrives i en HTML-editor (fx Adobe™ Dreamweaver®), eller i det mest enkle tekstprogram
vi kan finde – Notesblok i Windows eller TextEdit på Mac OSX – da mere komplekse tekstbehandlings
programmer har en kedelig tendens til at korrumpere teksten. Oversat til rent dansk betyder dette at du
aldrig-aldrig-aldrig må bruge Microsoft™ Word® til at skrive HTML-koder.
Forfatteren til dette materiale har engang bygget en webside i en sms, siddende på en strand i Thailand ;-)
Struktur
En HTML-side består af to sektioner; Head og Body.
Head indeholder alle overordnede informationer om siden: Kodetype, teksttype, sprog, søgeord, layoutinformationer osv.
Body indeholder selve sidens tekst og billeder.
Før vi starter
1. Sørg for at computeren viser hele filnavne, incl. filtypenavnet (.jpg, .txt osv);
I Windows: Åben en tilfældig mappe, klik på Funktioner > Mappeindstillinger > Vis > Fjern flueben ved
”Skjul filtypenavne for kendte filtyper”.
I Mac OSX: Imens Finder er aktiv tryk Æble + komma, vælg fanen Avanceret og sæt flueben i ”Vis alle
endelser på arkivnavne”
2. Der findes en opgavemappe til dette materiale. Sørg for at den findes på dit skrivebord
3. Opret en mappe på skrivebordet til dit website. Den skal hedde ”cocktailsanddreams”
4. Inde i den nye mappe skal du oprette to nye mapper: ”media” og ”assets”
5. Kopier alle billeder fra opgavemappen til ”media”-mappen
6. Åben Notesblok (Windows) eller TextEdit (Mac OSX)

/*HTML*/
HTML
Forklaring
HTML-Kode
Den første formelle beskrivelse af dokumentet
<!DOCTYPE html>
Koden der fortæller hvor HTML-koden starter og <!DOCTYPE html>
slutter
<html>
</html>
Strukturen i Head og Body
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Sidens titel, som vises i browserens topbjælke, i <!DOCTYPE html>
fanen og i bogmærker
<html>
<head>
<title>Cocktails and Dreams</
title>
</head>
<body>
</body>
</html>
Det første afsnit tekst
<!DOCTYPE html>
<p> betyder Paragraph
<html>
<head>
<title>Cocktails and Dreams</
title>
</head>
<body>
<p>Velkommen</p>
</body>
</html>
Gem nu dokumentet som ”index.html” i mappen ”cocktailsanddreams”, lad den forblive åben
i Notesblok/TextEdit og åben den samtidig i en
browser (Internet Explorer, Firefox, Safari...).
Hvis du kan skal du vælge at gemme dokumentet som UTF-8 type
Når kode bliver overflødig at repetere vil den blive vist her som (...)
Ny kode vil blive vist med gul baggrund

/*HTML*/
Forklaring
HTML-Kode
Ret den første linie tekst til en <h1> (Heading 1, (...)
overskrift 1), og tilføj mere tekst som almindeligt <body>
afsnit
<h1>Velkommen</h1>
<p>Her kan du feste natten lang
i godt selskab med cocktails fra
hele verden; søde, sure, stærke,
sjove og flotte cocktails.</p>
</body>
</html>
Tilføj en <h2> (Heading 2) og mere brødtekst
(...)
<body>
<h1>Velkommen</h1>
<p>Her kan du feste natten lang
i godt selskab med cocktails fra
hele verden; søde, sure, stærke,
sjove og flotte cocktails.</p>
<h2>Drinkskortet</h2>
<p>Vi har det mest omfattende
drinkskort i hele trekantsområdet, med alt fra Galiano Hot
Shots til Singapore Gin Sling og
fra Irish Coffee til Sønderjysk
kaffe.</p>
<p>Det eneste vi ikke serverer
er øl.</p>
</body>
</html>
Tilføj nu et billede. img betyder Image (billede) (...)
og src betyder source (kilde)
<p>Det eneste vi ikke serverer
er øl.</p>
<img src=”media/cocktail.png” />
</body>
</html>
Gem siden og opdater den i browseren
Tilføj nu en menu over teksten
(...)
<body>
<p>Forside</p>
<p>Åbningstider</p>
<p>Priser</p>
<p>Arrangementer</p>
<p>Ledige stillinger</p>
<p>Adresse</p>
<h1>Velkommen</h1>
<p>Her kan du feste natten (...)

/*HTML*/
Forklaring
HTML-Kode
Opret en Action omkring ”Forside”. En Action er <body>
typisk en Hyper Link Reference, href, altså et link. <p><a href=”index.html”>Forside</
a></p>
<p>Åbningstider</p>
Gør nu det samme på alle menupunkterne.
(...)
Bemærk at de filnavne der refereres til, fx ”aab- <body>
ningstider.html” kun er skrevet med små bog<p><a href=”index.html”>Forside</
staver, og ikke indeholder mellemrum og bog- a></p>
staverne æ, ø og å.
<p><a href=”aabningstider.
De filer der refereres til findes ikke endnu...
html”>Åbningstider</a></p>
<p><a href=”priser.html”>Priser</
a></p>
<p><a href=”arrangementer.
html”>Arrangementer</a></p>
<p><a href=”stillinger.
html”>Ledige stillinger</a></p>
<p><a href=”adresse.
html”>Adresse</a>
</p>
<h1>Velkommen</h1>
<p>Her kan du feste natten (...)
Sæt nu et banner ind i toppen af siden
(...)
<body>
<img src=”media/topbanner.png”
/>
<p><a href=”index.html”>Forside</
a></p>
(...)
I nogle browsere vil bogstaverne æ, ø og å blive (...)
vist som sære symboler. Derfor indsættes en
<html>
kode der forklarer hvilket alfabet der bliver
<head>
brugt.
<meta http-equiv=”Content-Type”
content=”text/html;
charset=UTF-8” />
<title>Cocktails and Dreams</
title>
</head>
(...)
Når der laves nye linier i HTML-koden er det for din skyld alene. Browseren er bedøvende ligeglad
om koden er skrevet i én eller 250 linier. Derfor kan vi heller ikke lave nye linier ved at trykke enter
eller return i koden. For at ombryde linien skal vi benytte afsnit (<p> og </p>) eller et blødt linieskift
(<br/>).

/*HTML*/
Forklaring
HTML-Kode
Gem siden og opdater den i browseren
Indsæt nu nogle Div’er til at dele sidens indhold
lidt op.
En Div er en Division – sektion – af en side, som
vi senere kan bruge til at lave layout.
(...)
<body>
<div id=”topbanner”>
<img src=”media/topbanner.png”
/>
</div>
<div id=”menu”>
<p><a href=”index.html”>Forside</
a></p>
(...)
<p><a href=”adresse.
html”>Adresse</a>
</p>
</div>
<div id=”tekst”>
<h1>Velkommen</h1>
(...)
<img src=”media/cocktail.png” />
</div>
</body>
</html>
I Matthæusevangeliet, kapitel 20 vers 16 beskriver Jesus den korrekte brug af HTML:
”Sådan skal de sidste blive de første, og de første de sidste.”
Dette betyder at når to ’tags’ sættes omkring fx en tekst skal den sidste blive den første og den første
den sidste:
<p><a href=”...”>Tekst</a></p>

/*CSS*/
CSS
Nu skal vi lave layout, dvs. bestemme farver, typografi, baggrundsgrafik og placeringer.
CSS – Cascading Style Sheet – koderne er anderledes lidt end HTML...
Forklaring
Først skal vi forklare browseren at her kommer
CSS-koden
CSS-kode
(...)
<title>Cocktails and Dreams</
title>
<style type=”text/css”>
</style>
</head>
(...)
Koden starter med en beskrivelse af hvad der
(...)
tilpasses, i dette tilfælde ”body”. Derefter følger <style type=”text/css”>
’tuborg-klammer’ med beskrivelser imellem.
body {
Farver kan beskrives med tre eller seks tal/
background-color: #006;
bogstaver. Farvekoderne kan findes mange
background-image: url(media/
steder på nettet ved at søge på ”hex color”.
wp.png);
background-image betyder baggrundsbillede.
background-repeat: repeat-x;
I dette tilfælde er baggrundsbilledet 900 pixels margin-left: 0px;
højt, men kun én pixel bredt. Derfor gentager vi margin-top: 0px;
det uendeligt på x-aksen med backgroundmargin-right: 0px;
repeat: repeat-x;
margin-bottom: 0px;
Alternativerne er repeat, repeat-y og no-repeat
}
Bemærk at alle funktioner afsluttes med semi</style>
kolon (”;”)
(...)
Vi skal have beskrevet standard-typografien i
(...)
body og tabel-celler (td og th).
margin-bottom: 0px;
Bemærk at vi ikke skriver én skrifttype, men
}
flere. Skrifttypen kan kun bruges hvis den er
body,td,th {
installeret på computeren, så i dette tilfælde
font-family: Verdana, Geneva,
vises teksten i Verdana, og hvis den ikke findes i sans-serif;
Geneva, og hvis den heller ikke findes i en
font-size: 12px;
hvilken som helst sans serif skrifttype.
color: #FFC;
}
</style>
(...)

/*CSS*/
Forklaring
Beskriv nu hvordan links skal opføre sig.
a:link betyder tekst omkranset af <a href=(...)>
og </a>.
a:visited betyder sider der har været besøgt.
a:hover betyder når musen bevæger sig hen
over.
a:active betyder når der bliver klikket på linket.
text-decoration: none; betyder at den evindelige
understregning af links forsvinder. Alternativet
er text-decoration: underline; på fx a:hover.
I dette tilfælde er der i stedet en baggrundsfarve på a:hover...
Der skal fastsættes størrelser for Headings
(overskrifter). I HTML findes der seks af dem:
<h1> - <h6>, hvor <h1> bør være den største.

CSS-kode
(...)
body,td,th {
font-family: Verdana, Geneva,
sans-serif;
font-size: 12px;
color: #FFC;
}
a:link {
color: #F69;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #F69;
}
a:hover {
text-decoration: underline;
color: #F00;
background-color: #FFF;
}
a:active {
text-decoration: underline;
color: #F00;
}
</style>
(...)
(...)
a:active {
text-decoration: none;
color: #F00;
}
h1 {font-size: 24px;}
h2 {font-size: 18px;}
h3 {font-size: 16px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 9px;}
</style>
/*CSS*/
Forklaring
Nu skal der laves layout!
Div’erne kan placeres, tilpasses, farves og meget
andet.
En div-beskrivelse starter med en ’havelåge’ (”#”)
efterfulgt af navnet på den pågældende div.
position bestemmer om den ’flyder’ eller står et
bestemt sted. absolute er i forhold til browserkanten. left og top er hvorfra der måles en
afstand, i dette tilfælde 0 pixels.
width og height er bredde og højde.
z-index er z på koordinatsystemet, altså dybden;
vi kan arbejde i lag! (Dét kommer vi tilbage til.)
Så skal resten placeres...
CSS-kode
(...)
h6 {font-size: 9px;}
#topbanner {
position:absolute;
left:0px;
top:0px;
width:940px;
height:100px;
z-index:1;
}
</style>
(...)
(...)
h6 {font-size: 9px;}
#topbanner {
position:absolute;
left:0px;
top:0px;
width:940px;
height:100px;
z-index:1;
}
#menu {
position:absolute;
left:10px;
top:135px;
width:125px;
height:250px;
z-index:2;
}
#tekst {
position:absolute;
left:185px;
top:135px;
width:750px;
height:250px;
z-index:3;
}
</style>
(...)
Gem filen og opdater i browseren...

/*Selvstændig CSS*/
Selvstændig CSS
Inden vi dublikerer filen, og dermed opretter en række nye filer (Forside, Åbningstider, Priser,
Arrangementer, Ledige stillinger og Adresse), vil det være smart at klippe CSS-oplysningerne ud, og
placere dem i en selvstændig fil, sådan at alle layout-tilpasninger foretages ét sted.
Forklaring
Klip CSS-koden ud af filen. (Ctrl/Æble + X)
Slet <style type=”text/css”> og </style>
Skriv koden der henter dén CSS-fil vi skal lave
om lidt
Gem filen og opdater i browseren

CSS-kode
(...)
<title>Cocktails and Dreams</
title>
<style type=”text/css”>
body {
background-color: #006;
background-image: url(media/
wp.png);
background-repeat: repeat-x;
(...)
width:750px;
height:250px;
z-index:3;
}
</style>
</head>
<body>
(...)
<title>Cocktails and Dreams</
title>
<style type=”text/css”>
</style>
</head>
<body>
(...)
(...)
<title>Cocktails and Dreams</
title>
<link href=”assets/stylesheet.
css” rel=”stylesheet” type=”text/
css”>
</head>
<body>
(...)
/*Selvstændig CSS*/
Forklaring
Opret en ny fil i Notesblok/TextEdit og indsæt
den udklippede tekst (Ctrl/Æble + V)
Skriv følgende kode i toppen af filen:
Gem filen med navnet ”stylesheet.css” i mappen
”assets”
Prøv nu at opdatere browseren!
Filen ser fin ud igen, men baggrundsbilledet er
’smuttet’. Det er fordi referencen url(media/
wp.png); peger ind i en mappe ved navn ”media” og derefter på billedet. Men først skal vi ud
af mappen ”assets”, eller ét niveau op. Dette
gøres med stien ”../”
Gem filen og opdater browseren.
Luk filen, åben ”index.html” og vælg ”Gem
som....”
Gem som aabningstider.html og slet brødteksten og cocktail-billedet.
Indsæt en ny overskrift (h1) der passer til sidens
navn
CSS-kode
body {
background-color: #006;
background-image: url(media/
wp.png);
background-repeat: repeat-x;
(...)
height:250px;
z-index:3;
}
@charset ”UTF-8”;
/* CSS Document */
(...)
background-color: #006;
background-image: url(../media/
wp.png);
background-repeat: repeat-x;
(...)
(...)
<div id=”tekst”>
<h1>Velkommen</h1>
<p>Her kan du feste natten lang
i godt (...)
<p>Det eneste vi ikke serverer
er øl.</p>
<img src=”media/cocktail.png” />
</div>
(...)
(...)
<div id=”tekst”>
<h1>Åbningstider</h1>
</div>
(...)
Gem filen (Ctrl/Æble + S)
Vælg nu Gem som... og gem med navnet ”priser.
html”
Ret overskriften til ”Priser”, gem og vælg bagefter Gem som...

/*Tabeller*/
Tabeller
Tabeller er en måde at lave detail-layout i fine kasser. – bondegårdsvinduer...
HTML-koden til en tabel med to rækker og to kolonner ser sådan ud:
<table width=”100%” border=”0” cellspacing=”0” cellpadding=”0”>
Tabellen er 100% bred, ingen ramme, ingen mellemrum i mellem cellerne, ingen indvendig margin i
cellerne (der kan ikke defineres en højde i ’table-tag’et’)
<tr> Tabelrække 1 starter
<td height=”200”>Øverst til venstre Tabelcelle 1 starter, den er 200 pixels høj Øverst til venstre</td>
Tabelcelle 1 slutter
<td align=”left” valign=”top” >Øverst til højre Tabelcelle 2 starter, indholdet placeres til venstre, øverst, i
cellen Øverst til højre</td>
</tr> Tabelrække 1 slutter
<tr> Tabelrække 2 starter
<td>Nederst til venstre</td>
<td>Nederst til højre</td>
</tr> Tabelrække 2 slutter
</table> Tabellen slutter
Som det ses vil indholdet i cellen (tekst eller billede) automatisk placere sig til venstre og vertikalt centreret, med mindre vi giver besked på noget andet.
Nu skal vi indsætte en tabel på index-siden med én række og to kollonner.
Forklaring
Åben filen ”index.html” i Notesblok/TextEdit

CSS-kode
/*Tabeller*/
Forklaring
Skriv en tabel med én række og to kollonner i
’tekst-div’en’
Flyt nu Teksten – men ikke biledet – ind i den
første celle, ved hjælp af Cut (Ctrl/Æble + X) og
Paste (Ctrl/Æble + V)
CSS-kode
(...)
<div id=”tekst”>
<table width=”100%” border=”0”
cellspacing=”0” cellpadding=”15”>
<tr>
<td></td>
<td></td>
</tr>
</table>
<h1>Velkommen</h1>
(...)
(...)
<table width=”100%” border=”0”
cellspacing=”0” cellpadding=”15”>
<tr>
<td><h1>Velkommen</h1>
<p>Her kan du feste natten lang
i godt selskab med cocktails fra
hele verden; søde, sure, stærke,
sjove og flotte cocktails.</p>
<h2>Drinkskortet</h2>
(...)
<p>Det eneste vi ikke serverer
er øl.</p></td>
<td></td>
</tr>
</table>
<img src=”media/cocktail.png” />
(...)

/*Visual Lightbox*/
Visual Lightbox
JavaScript er et helt tredie programmeringssprog, som vi ikke skal beskæftige os med her. Men vi skal lære
at benytte et Javascript.
Helt konkret skal vi indsætte en Visual Lightbox, en slags ’virtuelt vindue-i-vinduet’, som består af 6-7
JavaScript filer, 4-5 CSS filer og nogle små billedfiler.
Forklaring
CSS-kode
1. Åben mappen ”Visual Lightbox” i opgavemappen og kopier mappen ”lightbox” ind i
mappen ”assets” i din site-mappe
(”cocktailsanddreams”).
2. Kopier billederne fra ”Visual Lightbox”
mappen ind i mappen ”media”.
3. Åben filen ”koder.txt”, markér al teksten
(Ctrl/Æble + A), og kopier den (Ctrl/Æble + C).
Luk filen igen.
Åben filen arrangementer.html fra din
site-mappe
Indsæt den kopierede tekst (Ctrl/Æble + V) lige (...)
under <body> og over <div id=”topbanner”>
</head>
<body>

<script type=”text/javascript”
src= ”http://ajax.googleapis.com/
ajax/libs/mootools/1.2.4/mootoolsyui-compressed.js”></script>
(...)
</script>

<div id=”topbanner”>
(...)
Indsæt billedet ” vlimage01_sm.jpg” lige over
(...)
<h1>Arrangementer</h1>
<div id=”tekst”>
<img src=”media/vlimage01_
sm.jpg” />
<h1>Arrangementer</h1>
(...)

/*Visual Lightbox*/
Forklaring
Sæt nu et link til ”vlimage01.jpg” omkring
billedet, med class=”advanced” og title=”cocktails
and Dreams”.
Class’en kalder funktionen i JavaScriptet, der
viser billedet (”vlimage01.jpg”) i en Visual
Lightbox. Title giver en titel nederst i boksen.
CSS-kode
(...)
<div id=”tekst”>
<a href=”media/vlimage01.jpg”
rel= ”width:768,height:576”
class=”advanced”
title=”Cocktails and
Dreams”><img src=”media/vlimage01_sm.jpg” /></a>
<h1>Arrangementer</h1>
(...)
Gem filen og se den i din browser. Prøv at klikke
på billedet.
Indsæt nu et mellemrum der ikke ’knækker
(...)
linien’ efter billedet. Det hedder ”Non-Breaking <div id=”tekst”>
Space”:  
<a href=”media/vlimage01.jpg”
rel= ”width:768,height:576”
class=”advanced”
title=”Cocktails and
Dreams”><img src=”media/vlimage01_sm.jpg” /></a> 
<h1>Arrangementer</h1>
(...)
Efter   indsættes endnu et lille billede,
<div id=”tekst”>
med endnu et link omkring, og endnu en
<a href=”media/vlimage01.jpg”
Non-Breaking Space...
rel= ”width:768,height:576”
– det er tilladt at ’copy-paste’ (Ctrl/Æble + C og
class=”advanced”
Ctrl/Æble + V)!
title=”Cocktails and
Dreams”><img src=”media/vlimage01_sm.jpg” /></a> 
<a href=”media/vlimage02.jpg”
rel= ”width:768,height:576”
class=”advanced”
title=”Cocktails and
Dreams”><img src=”media/vlimage02_sm.jpg” /></a> 
<h1>Arrangementer</h1>

/*Visual Lightbox*/
Forklaring
– og igen...
CSS-kode
(...)
Dreams”><img src=”media/vlimage02_sm.jpg” /></a> 
<a href=”media/vlimage03.jpg”
rel= ”width:768,height:576”
class=”advanced”
title=”Cocktails and
Dreams”><img src=”media/vlimage03_sm.jpg” /></a> 
<h1>Arrangementer</h1>
(...)
Her kommer overraskelsen: Det fjerde lille
(...)
billede skal ikke åbne sin ’storebror’ i light<a href=”media/vlimage03.jpg”
box’en, men et andet website.
rel= ”width:768,height:576”
– bemærk at når vi skriver et link til et andet
class=”advanced”
website starter linket med http://, ligesom
title=”Cocktails and
browseren automatisk sætter ind, når vi skriver Dreams”><img src=”media/vlien www-adresse i adressefeltet.
mage03_sm.jpg” /></a> 
For at linke til en specifik side, fx en bestemt film <a href=”http://youtube.com”
på YouTube, er det en god idé at finde siden i
rel= ”width:768,height:576”
browseren, og ’copy-paste’ hele adressen ind i
class=”advanced”
koden.
title=”YouTube”><img src=”media/
vlimage04_sm.jpg” /></a>
<h1>Arrangementer</h1>
(...)
Gem siden og test den i browseren.
En Visual Lightbox er et fremragende alternativ til traditionelle pop-up vinduer, især da mange har
en pop-up-stopper i deres browser.
Mange lightbox-versioner understøtter billeder, men denne type understøtter også film, flash, Mp3filer og HTML-sider.
– husk at tage en kopi med hjem!
Vær dog opmærksom på at visse websites (fx Google og Hotmail) har et JavaScript der forhindrer
dem i at blive vist i en Visual Lightbox eller en IFrame.

/*Fixed Div*/
Fixed Div
Uden yderligere forklaring...
Forklaring
Åben filen ”arrangementer.txt”, markér al teksten og kopier den.
Luk filen igen.
Indsæt teksten under <h1>Arrangementer</h1>
Sæt <h2> tags omkring overskrifterne og <p>
tags omkring afsnittene.
(Overskrifterne er: Mick Øgendahl,
Morgenmusik, Disco 3000, Schwung, Ballon Kaj
og Svindlerne)
Gem siden og test den i browseren. Teksten er
nu så lang at siden ’scroller’...
Åben nu filen ”stylesheet.css” i Notesblok/
TextEdit
Ret nu position i #menu til fixed
CSS-kode
(...)
<h1>Arrangementer</h1>
Mick Øgendahl
Mick Øgendahl er en atypisk
stand-up-komiker. Hvor langt de
fleste stand-up-komikere udelukkende bruger det talte ord til
at fremføre deres pointer,
(...)
rusket op i autoritetstroen.
</div>
(...)
(...)
<h1>Arrangementer</h1>
<h2>Mick Øgendahl</h2>
<p>Mick Øgendahl er en atypisk
stand-up-komiker. Hvor langt de
fleste stand-up-komikere udelukkende bruger det talte ord til
at fremføre deres pointer,
(...)
rusket op i autoritetstroen.</p>
</div>
(...)
#menu {
position:fixed;
left:10px;
top:135px;
width:125px;
height:250px;
z-index:2;
}

/*Fixed Div*/
Forklaring
Gem filen og genindlæs arrangementer.html i
browseren. Menuen står nu stille når resten af
siden scroller.
Vi skal lave en Fixed Div mere.
Nederst i ”stylesheet.css” indsættes koden
I ”arrangementer.html”, lige før </body>, skrives
denne kode:
Vi har nu en Div i bunden af siden, som står fast
når der scrolles. Indtil nu indeholder den kun
teksten ”xxx”, men den ændrer vi om lidt...

CSS-kode
#del {
position:fixed;
left:10px;
bottom:0px;
width:125px;
height:50px;
z-index:3;
}
(...)
rusket op i autoritetstroen.</p>
</div>
<div id=”del”>
xxx
</div>
</body>
</html>
/*Share this!*/
Share this!
Det ville jo være rart hvis de besøgende på siden ville dele oplevelsen med deres venner på de sociale
netværk.
– derfor kan vi lave et link til Facebook. Og Twitter. Og MySpace. Og LinkedIn. Og Arto. Og Digg. Og Bebo.
Og Blogger. Og Boardlite. Og Google. Og ...
Der findes flere services der kan hjælpe os med det hele på én gang. Vi tager bare én af dem:
Add This.
Åben et nyt vindue i browseren og gå ind på www.addthis.com
Vælg knaptype 1, og ”No, just give me the button”, og klik så på ”Get Your Button”.
Den side der nu dukker op giver os en kode, som vi helt enkelt vælger og kopierer.
Forklaring
CSS-kode
1. Åben et nyt vindue i browseren og gå ind på
www.addthis.com
2. Vælg knaptype 1, og ”No, just give me the
button”, og klik så på ”Get Your Button”.
3. Den side der nu dukker op giver os en kode,
som vi helt enkelt markerer og kopierer.
Vælg teksten xxx i ”arrangementer.html”
rusket op i autoritetstroen.</p>
og erstat den med den kopierede kode
<div id=”del”>

<div class=”addthis_toolbox
addthis_default_style ”>
<a href=”http://www.addthis.com/
bookmark.php?v=250&username=xa(...)
<a class=”addthis_button_preferred_4”></a>
</div>
<script type=”text/javascript”
src=”http://s7.addthis.com/js/250/
addthis_widget.js#username=xa4d45c9d909082271”></script>

</div>
</body>
</html>
Gem siden og se det i funktion i din browser

/*Kommentarer i koden*/
Kommentarer i koden
Der findes et ’tag’ der ikke har nogen funktion. Den bruges simpelthen til at skrive bemærkninger eller
notater til os selv – eller en anden designer vi arbejder sammen med – i koden, uden at det påvirker siden
på nogen måde.
Den ser sådan ud:

Prøv at skrive nogle bemærkninger ind i siden, som kan hjælpe dig med at finde hoved og hale i den
efterhånden meget lange kode.
På samme måde kan vi skrive bemærkninger i CSS-filen, her ser koden blot anderledes ud:
/* Dette er en bemærkning */
>
t
s
k
e
t
d
o
G
<!/* God
t desig
n */

/*Mailto:*/
Mailto:
Forklaring
Åben filen ”adresse.html” og skriv adressen:
Indsæt nu et mailto: link omkring E-mail
adressen.
mailto: links fungerer på den måde at når det
besøgende klikker på det åbnes deres E-mail
program automatisk, opretter en ny E-mail og
indsætter den linkede adresse i ”Til” feltet.
CSS-kode
<div id=”tekst”>
<h1>Adresse</h1>
<p>Skippervej 20</p>
<p>9681 Ranum</p>
<p>Tlf: 78 12 56 34</p>
<p>E-mail: [email protected]</p>
</div>
</body>
<div id=”tekst”>
<h1>Adresse</h1>
<p>Skippervej 20</p>
<p>9681 Ranum</p>
<p>Tlf: 78 12 56 34</p>
<p>E-mail: <a href=mailto:info@
cocktailsanddreams.dk>[email protected]</a></p>
</div>
</body>

/*Formularer*/
Formularer
Nu skal vi lave en kontaktformular.
Skriv følgende kode. Forklaringer er sat ind i bemærknings-tags...
(...)
<p>E-mail: <a href=mailto:[email protected]>[email protected]</a></p>

<form id=”form1” name=”form1” method=”post” action=”xxx”>

<p><label>Navn<input type=”text” name=”navn” id=”navn” /></label></p>

<p><label>E-mail<input type=”text” name=”email” id=”email” /></
label></p>

<p><label>Tlf<input type=”text” name=”tlf” id=”tlf” /></label></p>

<table width=”200”>
<tr>
<td><label><input type=”radio” name=”Vedr.” value=”kursus”
id=”Vedr._0” />Kursus</label></td>
</tr>
<tr>
<td><label><input type=”radio” name=”Vedr.” value=”socarr”
id=”Vedr._1” />Socialt arrangement</label></td>
</tr>
<tr>
<td><label><input type=”radio” name=”Vedr.” value=”druk”
id=”Vedr._2” />Fest</label></td>
</tr>
</table>

<p><label>Besked<br />
<textarea name=”besked” id=”besked” cols=”45” rows=”10”></textarea>
</label></p>
<p><input type=”submit” name=”send” id=”send” value=”Send” /></p>
</form>

</div>
</body>
(...)
action=”xxx” skal erstattes med en rigtig form-mail-adresse, som fåes fra udbyderen af webserveren,
fx action=”http://www.cocktailsanddreams.dk/cgi-bin/FormMail.pl”, sådan at de udfyldte data bliver sendt som
E-mail
til hoved-E-mail-adressen
på serveren
www.cocktailsanddreams.dk...
Undlad
venligst at afprøve dette
script, da
der (gud-hjælpe-mig) findes et rigtigt mobil-værtshus
med adressen www.cocktailsanddreams.dk!

/*IFrame*/
IFrame
En IFrame er et ’hul’ i siden, hvori vi kan hente en anden html-side. – egen eller andres.
Forklaring
Under formularen indsætter vi en IFrame på den
’fuskede’ måde:
1. Gå ind på Googe Maps i browseren og find
adressen Skippervej 20, 9681 Ranum.
2. Klik på ”Link” i øverste højre hjørne af kortet.
3. Her kan du få både et link til at indsætte i en
mail eller på en webside, men også en
såkaldt iframe, som integrerer selve kortet
på siden.
4. Vi skal dog tilpasse lidt, for dét kort vi ser
giver ikke meget mening, når man kommer
fra fx København. Derfor skal vi klikke på
”Tilpas og vis eksempel på integreret kort”.
5. Vælg ”Stor”, zoom så meget ud at man i det
mindste kan se at det ligger i Limfjorden, og
kopier så koden nederst i vinduet.
Vi har nu fået en IFrame med følgende værdier:
Bredde: 640 (pixels)
Højde: 480
Rammetykkelse: 0
Kan der scrolles i IFramen: Nej
Margin top/bund: 0
Margin højre/venstre: 0
Sti til fil der vises: (...)
Ret nu bredden til 750, så den fylder vores
tekst-div ud.
CSS-kode
(...)

<iframe width=”640” height=”480”
frameborder=”0” scrolling=”no”
marginheight=”0” marginwidth=”0”
src=”http://maps.google.dk/maps?f=
q&source=s_q&hl=da&g
eocode=&q=Skippervej+20,+9681+
Ranum&aq=0&sll=55.869147,11
.228027&sspn=7.267189,19.753418&
amp;ie=UTF8&hq=&hnear=Ski
ppervej+20,+9681+Ranum&ll=56.8
85002,9.085693&spn=2.863157,7.031
25&z=7&iwloc=A&output
=embed”></iframe><br /><small><a
href=”http://maps.google.dk/maps?f
=q&source=embed&hl=da&am
p;geocode=&q=Skippervej+20,+9
681+Ranum&aq=0&sll=55.8691
47,11.228027&sspn=7.267189,19.753
418&ie=UTF8&hq=&hnear
=Skippervej+20,+9681+Ranum&ll=
56.885002,9.085693&spn=2.863157,7
.03125&z=7&iwloc=A”
style=”color:#0000FF;textalign:left”>Vis stort kort</a></
small>
</div>
</body>
</html>
(...)

<iframe width=”750” height=”480”
frameborder=”0” scrolling=”no”
marginheight=”0” marginwidth=”0”
src=”http://maps.google.dk/
maps?f=q&source=s_
(...)

/*IFrame*/
Forklaring
Giv også IFrame’n et navn, så vi kan misbruge
den
CSS-kode
(...)

<iframe name=”jytte” width=”750”
height=”480” frameborder=”0”
scrolling=”no” marginheight=”0”
marginwidth=”0” src=”http://maps.
google.dk/maps?f=q&source=s_
(...)
Opret et link under IFrame’n til Cimber Air med (...)
parametret target.
#0000FF;text-align:left”>Vis stort
”Target” betyder mål, altså hvor skal linket
kort</a></small>
hentes til? I dette tilfælde ”Jytte” – det navn vi
<p><a href=”http://www.cimber.dk”
gav vores IFrame.
target=”jytte”>Flyv hertil</a></
Man kan også vælge target=”_blank”, hvorefter p>
linket åbner i et nyt vindue.
</div>
</body>
</html>
Gem filen og test den.
(...)
– super ærgeligt at man ikke kan scrolle i
<iframe name=”jytte” width=”750”
IFrame’n. Dette kan ændres ved at ændre
height=”480” frameborder=”0”
scrolling=”no” til scrolling=”yes” eller måske
scrolling=”auto”
scrolling=”auto”
marginheight= ”0”
(...)
Vi kunne måske godt bruge en blank linie under (...)
linket, så det var nemmere at få fat i.
Flyv hertil</a></p>
<p> </p>
</div>
</body>
</html>

/*Billedbehandling*/
Billedbehandling
Man kommer ikke uden om at skulle tilpasse og beskære billeder for at kunne bruge dem på websites. Og
her kommer Notesblok og TextEdit til kort...
Heldigvis findes der flere forskellige gratis programmer som kan bruges.
Her vil jeg fremhæve Picasa.
Picasa er en service som gør det muligt at gemme dine billeder på en gratis konto på nettet, hvor du kan
lade andre se, eller holde dem hemmelige. Picasa er også et program som kan downloades gratis til både
Windows og Mac OS X. – og programmet kan naturligvis synkronisere filerne på din computer med din
konto på nettet!
Picasa (programmet) kan administrere dine billeder, hente dem fra dit digitalkamera, og lave nogle helt
grundlæggende retucheringer og tilpasninger.
Find det på www.picasa.com

/*Udgiv website*/
Udgiv website
Da du købte dit webhotel fik du en FTP-adresse, et brugernavn og et password.
Når du skal udgive websitet til serveren, og dermed internettet, gøres det lidt forskelligt, afhængig af om
du bruger Windows eller Mac OS X.
Windows
På ét eneste område er Windows faktisk nemmere at bruge end Mac: FTP!
Åben et tilfældigt stifinder vindue, og ret adressen i adresselinien til ftp-adressen (fx ftp://mitwebsite.dk)
Derefter dukker der en dialogboks op, som spørger om brugernavn og password.
Nu stirrer du på filerne på serveren, og alt hvad du behøver at gøre er at trække filerne fra din site mappe
derind. Husk også ”media” og ”assets” mapperne.
Mac OS X
Du skal bruge et FTP-program, for din Mac tillader dig kun at se og hente filer fra en server i Finder; ikke at
uploade...
Hent fx Cyberduck på http://cyberduck.ch og installer det.
Vælg Bogmærke > Opret Bogmærke, indtast ftp-oplysningerne og du er kørende.
alt hvad du behøver at gøre er at trække filerne fra din site mappe derind. Husk også ”media” og ”assets”
mapperne.

/*SEO*/
SEO
Search Engine Optimization er en større videnskab
som vi kun kommer til at berøre helt
grundlæggende.
I det efterfølgende vil vi primært tage udgangspunkt i www.google.com, da Google står for over
80% af alle søgninger på internettet, og bliver
ivrigt kopieret af andre søgetjenester.
Google finder alle websites på internettet.
Spørgsmålet er hvor højt prioriteret ens website
bliver i en søgning. Det er de færreste der ønsker
at deres site bliver søgeresultat nummer 7.350.000.
Den første ting vi skal gøre er at indsætte nogle
såkaldte Meta-tags: ”Description” og ”Keywords”.
”Description” er en kortfattet beskrivelse af sitet.
Den vises under sitets adresse i Google.
”Keywords” er nøgleord der kan søges.
I Head-sectionen indsættes koderne:
<meta name=”Description” content=”Limfjordens
førende natklub” />
<meta name=”keywords” content=”dreams,
druk, dans, disco, natklub, musik, arrangementer,
mad, cocktails,” />
Dette sikrer delvist at det er de rigtige søgeord der
hjælper sitet til at blive vist i Google.
Men Google søger også i <h1> - <h6> tag’s, i
sidens <title>, i billedernes alt-tag’s, og selv i den
almindelige brødtekst (<p>). Jo flere gange det
søgte ord forekommer, og i jo flere forskellige
typer tag’s, jo højere bliver siden prioriteret.
Sider prioriteres også efter hvor mange andre sites
der lænker til dem (her tæller bannerannoncer og
henvisninger fra Facebook også).
Sidst men ikke mindst prioriteres de mest besøgte
sider højest.
Det betyder at hvis vi ønsker – lidt forenklet – at
sitet bliver højt prioriteret i alle søgninger på
ordene ”natklub” og ”limfjord”, vil vi bruge ordene
ofte i brødtekst (<p>), overskrifter (<h1> - <h6>),
billedbeskrivelser (alt=” ”), i meta-tags og i <title>.
Vi vil desuden oprette en Facebook side og en
Twitter profil med links til siden, annoncere ivrigt
på andre sites, og lave en konkurrence på websitet
med attraktive præmier, som sikrede mange
besøgende i en periode.
Vi kan holde øje med vores besøgende ved at
oprette en Google Analytics konto, som giver os
mulighed for at se hvor mange der klikker ind på
siden, hvorfra, hvilke søgeord der førte dem til
vores site, osv.
– se mere på http://www.google.com/analytics/
Sidst, men ikke mindst, kan man annoncere på
Google, sådan at der bliver vist en annonce oven
over – eller til højre for – søgeresultaterne, samt på
andre websites der lader Google annoncere
(GoogleAds). Der betales ikke for at annoncere,
men pr. klik; altså pr. reelt besøgende.

/*Fremtidens koder*/
Fremtidens koder
HTML5 og CSS3 er ikke bare det nyeste nye. – det er science fiction!
W3C (The World Wide Web Consortium) som bestemmer internettets standarder, har endnu ikke færdigudviklet HTML5, og det er stadig uvist hvornår det vil blive kaldt en ’Stable Release’. Browserne er endnu
ikke blevet strømlinet til HTML5 (Undtagen Safari 5.0.2). Men Adobe kunne ikke vente, og HTML5 er fuldt
understøttet i Dreamweaver, forstået på den måde, at man skal sørge for at hente opdateringer til programmet, så man kan følge med udviklingen af HTML og CSS standarderne. – og så er der et par cowboytricks vi skal benytte et stykke tid endnu...
Et eksempel:
At afrunde hjørner i HTML og CSS har aldrig kunnet lade sig gøre, og vi har lavet billeder til dét formål.
Med HTML5 og CSS3 kan det nu lade sig gøre, men ikke alle browsere ved hvordan de skal håndtere
koden border-radius:10px;
Derfor indsætter vi en ekstra kode til Mozilla (Firefox): -moz-border-radius:10px; og én til webkit (Internet
Explorer, Safari, Google Chrome m.fl.): -webkit-border-radius:10px;
Og til syvende og sidst indsætter vi en kode der sikrer, at hvis browseren ikke forstår koderne får den
hjælp af et javascript på nettet: <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
– det virker som et stort stykke ekstra arbejde, men vi skal huske på at det kun er for periode, og at afrundede hjørner i ren kode er et helt lille mirakel i HTML-kontekst.
Det samme er spalter, skygger, gennemsigtighed og rotation...
For at prøve dette af åbner vi mappen ”limatravel_com” i opgavemappen.

/*HTML5*/
HTML5
Document type
Du har sikkert set doctype koden en million gange:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
W3C har valgt at forenkle koden i HTML5, sådan at den nu hedder:
<!DOCTYPE HTML>
– så dét skal vi lige ændre i dokumentet thailand.html
Bagud-kompatibilitet
Af hensyn til browsere der endnu ikke forstår de nye koder skal vi indsætte et par ’cowboy-koder’
1. I sidens interne stylesheet indsættes linien header, section, footer, aside, nav, article, figure { display: block;
}
2. Efter styelsheet’et indsættes koden

Struktur-koder
W3C har erkendt at næsten alle webudviklere sidder og laver de samme ting, på hver sin måde. Vi tag’er
afsnit, footer osv., med div-navne vi selv finder på, aftaler med kollegaer, eller accepterer simpelthen div1,
div2, div3, span style 1... Alternativt bruger vi headers til ting de ikke er beregnet til.
Derfor indeholder HTML5 nu koderne
section
article
aside
bruges når en side opdeles i sektioner. Det kan anvendes sammen med h1, h2, h3, H4, H5,
og h6 elementer til at
strukturere dokumentet.
en selvstændig del af dokumentet, fx en blog eller en artikel.
hgroup
en selvstændig del af dokumentet med begrænset relevans eller sammenhæng, fx en
faktaboks eller annonce.
Kan bruges til at holde sammen på – og tilpasse – en gruppe af headere.
header
Sidehoved.
footer
Sidefod.
nav
Sidens navigation/menu.
figure
Indsat element, fx billede, video, kort...
figcaption
Ledsagende tekst til en figure, fx fotografens navn.
<figure>
<video src=”film.ogg”></video>
<figcaption>En film om ...</figcaption>
</figure>

/*@ font*/
@ font
Hidtil har vi været voldsomt begrænset i forhold til brugen af typografi på websites: Times New Roman,
Arial og Verdana...
Årsagen er jo at skrifttypen skal være installeret på den besøgendes computer for at virke. Derfor har vi
enten brugt billeder eller Flash, når vi ville bruge en alternativ skrifttype.
I HTML5/CSS3 er det muligt at benytte skrifter der ligger på en webserver beregnet til formålet.
Der findes en række betalingsservices, bla. webfonts.fonts.com, der hoster over 8.000 fonte, men i dette
tilfælde vil vi benytte en gratis: code.google.com/webfonts, der kun hoster 23 fonte.
1. I HEAD delen af koden på siden thailand.html skriver vi
<link href=’http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold&subset=latin’
rel=’stylesheet’ type=’text/css’>
<link href=’http://fonts.googleapis.com/css?family=Lobster&subset=latin’ rel=’stylesheet’ type=’text/css’>
– hvorved skrifttyperne Yanone Kaffeesatz og Lobster bliver hentet.
2. I sidens interne stylesheet retter vi font-informationen i #titlediv:
font-family: ’Lobster’, arial, sans-serif;
3. og i #maintext:
font-family: ’Yanone Kaffeesatz’, Verdana, Geneva, sans-serif;
4. Klik på Design og Liveview for at se resultatet.
• På code.google.com/webfonts er det muligt at hente skrifttyperne som opentype til computeren, så
du kan se dem imens du arbejder med udviklingen af siden på din computer. Du kan naturligvis vælge
også at bruge dem i tryksager, så du sikrer ensartetheden.
Lobster – Yanone Kaffeesatz
#titlediv
#maintext

/*Tekst i spalter*/
Tekst i spalter
Tekst i spalter har ikke rigtigt været en mulighed i HTML4/XHTML, medmindre vi fordelte teksten i tabeller
eller div manuelt, hvilket var et helvede når teksten senere blev redigeret.
Med koden column-count:4; kan vi fordele teksten i #maintext i fire spalter, og med koden columngap:10px; kan vi give spalterne en indbyrdes afstand på 10 pixels.
Desværre skal vi sætte koden ind nogle gange, da ikke alle browserne endnu er helt med ’på beatet’.
En browser læser CSS strengent, og hvis flere koder har den samme effekt vil den sidste, som browseren
forstår, blive brugt. Derfor sætter vi erstatningskoderne ind først, og den rigtige til sidst. På den måde
behøver vi ikke at huske på at slette noget, den dag erstantningskoderne ikke længere er nødvendige.
1. I # maintext i det interne stylesheet på siden thailand.html indsætter du følgende kode
-webkit-column-count:4;
-moz-column-count:4;
column-count:4;
-webkit-column-gap:10px;
-moz-column-gap:10px;
column-gap:10px;
Rotation
Igen en funtion der i HTML4/XHTML krævede billeder eller Flash.
1. I #titlediv på thailand.html sidens interne stylesheet indsættes følgende kode
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
transform:rotate(-5deg);
Så mangler vi bare skygger,
afrundede hjørner og
gennemsigtighed

/*Afrundede hjørner*/
Afrundede hjørner
Endnu en ting der kræver billeder i ’skiver’... – indtil HTML5!
1. I # maintext i det interne stylesheet på siden thailand.html indsætter du følgende kode
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
2. Og kigger på siden en gang til!
• Hjørnerne kan naturligvis afrundes mere eller mindre ved at justere 10px til fx 5px eller 15px...
RGB-farver og
gennemsigtighed
”Lad mig se en gange; RGB-farven 25,88,133 på en webside hedder #195885, og det giver mening fordi....
Aaaaargh!!!”
I HTML5 hedder RGB-farven 25,88,133 RBG(25,88,133).
– og det bliver bedre endnu, for vi kan tilføje alpha: RGBA(25,88,133,0.5). Nu er den farvelagte dims (div,
tabel, tekst...) 50% gennemsigtig!
1. I # maintext i det interne stylesheet på siden thailand.html finder du følgende kode
background-color: #FFF;
2. Og retter den til
background-color: rgba(255,255,255,0.7);
Skygger
Som alternativ til RGB
kan du også bruge HSL
(Hue/Saturation/
Luminance)
fx HSLA (0,0,0,0.7)
1. I #titlediv i det interne stylesheet på siden thailand.html indsættes koden:
text-shadow:3px 3px 6px rgba(0,0,0,0.5) 2px 3px;
2. I #maintext indsættes koden:
-webkit-box-shadow:rgba(0,0,0,0.3) 2px 3px;
-moz-box-shadow:rgba(0,0,0,0.3) 2px 3px;
Alpha beskrives på samme
måde som opasitet:
box-shadow:rgba(0,0,0,0.3) 2px 3px;
0.1 = 10%, 0.9 = 90%
Altså sort farve med
70% opasitet:
rgba(255,255,255,0.7)

/*Farveforløb*/
Farveforløb
Farveforløb kan indsættes som baggrund på siden, eller som baggrund i en DIV eller tabel.
1. # maintext i det interne stylesheet på siden singapore.html indsætter du følgende kode
background: -webkit-gradient(linear, left top, right bottom, from(#FF6666), to(#FFFFFF));
Baggrund
Vi kan nu tilpasse baggrundsbilleder sådan at de følger med browser-vinduet, med koden Cover:
1. I ”body” i det interne stylesheet på siden singapore.html indsættes følgende kode:
background: url(images/bangkok.jpg);
background-repeat:no-repeat;
background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;
2. Prøv nu at skalere siden i browseren med Ctrl/Æble +/-, og ved at trække i hjørnet

MicroWorld-NetCom
Tel: +45 70 15 20 20
www.microworld.dk
[email protected]
Kursuscentre
København
Dir: 20 84 57 57
Århus
Dir: 86 17 17 51
”Will you, for the love of God, stop developing Internet Explorer!”
– Tim Berners-Lee, opfinder af internettet, i et åbent brev til Microsoft