HTML & CSS. Tekst og design: Hasse Sørensen, Nordisk Grafik Udgiver og ophavsretsholder: MicroWorld-NetCom

Transkript

1 <!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; HTML 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; & CSS 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 af stillinger</a></p> Hasse Sørensen for MicroWorld-NetCom <p><a href="adresse.html">adresse</a></p> </div> <div id="tekst"> <h1>velkommen</h1>

2 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 gen givelse 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 tekst behandlings program (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å Med andre ord: Med dette materiale og noget på hjerte kan du blive webdesigner, blot du har den billigeste computer du kan finde 1, og en ditto internetforbindelse 2. 1 (I skrivende stund) Asus netbook: kr ,- 2 (I skrivende stund) Kr. 69,- pr. md. <! >

3 /*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 Fixed Div Share this! Kommentarer i koden Mailto: Formularer IFrame Billedbehandling...31 Udgiv website SEO Fremtidens koder HTML5... font Tekst i spalter Rotation Afrundede hjørner RGB-farver og gennemsigtighed Skygger Farveforløb Baggrund <! >

4 /*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 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 <! >

5 /*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 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.). 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... <! >

6 /*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. 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 s på ( mail-server ). WAP Wireless Application Protocol, internet trafik på mobil-telefon-netværket. Webmail der læses og skrives på et website, fx Gmail eller Hotmail. Webhotel En server-plads man lejer til at placere et website, s 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: 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. <! >

7 /*Kom godt i gang*/ Kom godt i gang 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 internet adgang 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. 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. Logotop (flash?) Menu Nye varer Del Billede Tilmeld Nyhedsbrev Forside Om os Varer Service Kontakt Blå Røde <! >

8 /*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) <! >

9 /*HTML*/ HTML Forklaring Den første formelle beskrivelse af dokumentet Koden der fortæller hvor HTML-koden starter og slutter Strukturen i Head og Body Sidens titel, som vises i browserens topbjælke, i fanen og i bogmærker Det første afsnit tekst <p> betyder Paragraph 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 HTML-Kode <!DOCTYPE html> <!DOCTYPE html> <html> </html> <!DOCTYPE html> <html> <head> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <title>cocktails and Dreams</ title> </head> <body> </body> </html> <!DOCTYPE html> <html> <head> <title>cocktails and Dreams</ title> </head> <body> <p>velkommen</p> </body> </html> Når kode bliver overflødig at repetere vil den blive vist her som Ny kode vil blive vist med gul baggrund <! >

10 /*HTML*/ Forklaring Ret den første linie tekst til en <h1> (Heading 1, overskrift 1), og tilføj mere tekst som almindeligt afsnit HTML-Kode <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> </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 <! >

11 /*HTML*/ Forklaring Opret en Action omkring Forside. En Action er typisk en Hyper Link Reference, href, altså et link. Gør nu det samme på alle menupunkterne. Bemærk at de filnavne der refereres til, fx aabningstider.html kun er skrevet med små bogstaver, og ikke indeholder mellemrum og bogstaverne æ, ø og å. De filer der refereres til findes ikke endnu... HTML-Kode <body> <p><a href= index.html >Forside</ a></p> <p>åbningstider</p> <body> <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> <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 kode der forklarer hvilket alfabet der bliver brugt. <html> <head> <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/>). <! >

12 /*HTML*/ Forklaring Gem siden og opdater den i browseren HTML-Kode 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> <! >

13 /*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 Koden starter med en beskrivelse af hvad der tilpasses, i dette tilfælde body. Derefter følger tuborg-klammer med beskrivelser imellem. Farver kan beskrives med tre eller seks tal/ bogstaver. Farvekoderne kan findes mange steder på nettet ved at søge på hex color. background-image betyder baggrundsbillede. I dette tilfælde er baggrundsbilledet 900 pixels højt, men kun én pixel bredt. Derfor gentager vi det uendeligt på x-aksen med backgroundrepeat: repeat-x; Alternativerne er repeat, repeat-y og no-repeat Bemærk at alle funktioner afsluttes med semikolon ( ; ) Vi skal have beskrevet standard-typografien i body og tabel-celler (td og th). Bemærk at vi ikke skriver én skrifttype, men flere. Skrifttypen kan kun bruges hvis den er installeret på computeren, så i dette tilfælde vises teksten i Verdana, og hvis den ikke findes i Geneva, og hvis den heller ikke findes i en hvilken som helst sans serif skrifttype. CSS-kode <title>cocktails and Dreams</ title> <style type= text/css > </style> </head> <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; </style> margin-bottom: 0px; body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFC; </style> <! >

14 /*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> <! >

15 /*CSS*/ Forklaring CSS-kode Nu skal der laves layout! Div erne kan placeres, tilpasses, farves og meget h6 {font-size: 9px; andet. #topbanner { En div-beskrivelse starter med en havelåge ( # ) position:absolute; efterfulgt af navnet på den pågældende div. left:0px; position bestemmer om den flyder eller står et top:0px; bestemt sted. absolute er i forhold til browserkanten. left og top er hvorfra der måles en height:100px; width:940px; afstand, i dette tilfælde 0 pixels. z-index:1; width og height er bredde og højde. z-index er z på koordinatsystemet, altså dybden; </style> vi kan arbejde i lag! (Dét kommer vi tilbage til.) Så skal resten placeres... 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... <! >

16 /*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 CSS-kode Klip CSS-koden ud af filen. (Ctrl/Æble + X) <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> Slet <style type= text/css > og </style> <title>cocktails and Dreams</ title> <style type= text/css > </style> </head> <body> Skriv koden der henter dén CSS-fil vi skal lave om lidt Gem filen og opdater i browseren <title>cocktails and Dreams</ title> <link href= assets/stylesheet. css rel= stylesheet type= text/ css > </head> <body> <! >

17 /*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../ CSS-kode body { background-color: #006; background-image: url(media/ wp.png); background-repeat: repeat-x; height:250px; UTF-8 ; /* CSS Document */ background-color: #006; background-image: url(../media/ wp.png); background-repeat: repeat-x; 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 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... <div id= tekst > <h1>velkommen</h1> <p>her kan du feste natten lang i go dt <p>det eneste vi ikke serverer er øl.</p> <img src= media/cocktail.png /> </div> <div id= tekst > <h1>åbningstider</h1> </div> <! >

18 /*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 <! >

19 /*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 /> <! >

20 /*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 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 > Indsæt billedet vlimage01_sm.jpg lige over <h1>arrangementer</h1> CSS-kode </head> <body>  <script type= text/javascript src= ajax/libs/mootools/1.2.4/mootoolsyui-compressed.js ></script> </script>  <div id= topbanner > <div id= tekst > <img src= media/vlimage01_ sm.jpg /> <h1>arrangementer</h1> <! >

21 /*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. 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 Space : Efter indsættes endnu et lille billede, med endnu et link omkring, og endnu en Non-Breaking Space... det er tilladt at copy-paste (Ctrl/Æble + C og Ctrl/Æble + V)! 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> <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> <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> <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> <! >

22 /*Visual Lightbox*/ Forklaring CSS-kode og igen... 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 lightbox en, men et andet website. bemærk at når vi skriver et link til et andet website starter linket med ligesom browseren automatisk sætter ind, når vi skriver en www-adresse i adressefeltet. For at linke til en specifik side, fx en bestemt film på YouTube, er det en god idé at finde siden i browseren, og copy-paste hele adressen ind i koden. Gem siden og test den i browseren. <a href= media/vlimage03.jpg rel= width:768,height:576 class= advanced title= Cocktails and Dreams ><img src= media/vlimage03_sm.jpg /></a> <a href= rel= width:768,height:576 class= advanced title= YouTube ><img src= media/ vlimage04_sm.jpg /></a> <h1>arrangementer</h1> 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, Mp3- filer 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. <! >

23 /*Fixed Div*/ Fixed Div Uden yderligere forklaring... Forklaring CSS-kode Åben filen arrangementer.txt, markér al teksten og kopier den. Luk filen igen. Indsæt teksten under <h1>arrangementer</h1> <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> 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 #menu { position:fixed; left:10px; top:135px; width:125px; height:250px; z-index:2; <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> <! >

Vis mere