HTML HTML er en forkortelse for HyperText Markup Language og er således et markeringssprog og ikke et programmeringssprog! HTML bruges til at opmærke indholdet på en hjemmeside, og skal ses som en måde at strukturere indhold på! HTML definerer en række markeringskoder, kaldet tags, som benyttes når en hjemmeside skal konstrueres. Den simple struktur af en (tom) hjemmeside ses herunder: <html> <head> </head> <body> </body> </html> Sandkassen og HTML-dokumenter (www.akat.dk/datalogi/sandkassen.html) En hjemmeside er det samme som et HTML-dokument. En browser er det program man bruger til at se hjemmesiderne/html-dokumenterne gennem. Browseren omdanner HTMLdokumentet til et grafisk billede på computerskærmen. HTML-dokumenter, af typen.html, indeholder ren tekst. En tekst-editor til at skrive hjemmesider i, behøver derfor kun at kunne skrive ren tekst! og det er ideen bag sandkassen på www.akat.dk (se herunder): Figur 1 Sandkassen på www.akat.dk etablerer et simpelt udviklingsmiljø til konstruktion af hjemmesider. Side 1
Tags og attributter Tags forekommmer i 2 varianter: container-tags og separator-tags. Container-tags består altid af et start-tag og et slut-tag, som fx <html>.</html> medens separator-tags kun består af et tag, som fx <img>. Tags kan forsynes med attributter, som fx <img src= bil.jpg >, hvor attributten er src (source) med værdien bil.jpg (et navn på en grafik-fil). En anden skrivemåde kunne være: <img src= bil.jpg > Dokument modellen og DOM-træet Dataloger elsker at lave modeller af alting, og har selvfølgelig også lavet en model af et HTMLdokument, kaldet Document Object Modelellen og forkortet DOM. HTML-dokumenter er, i denne model, kun opbygget af 3 forskellige typer klodser : 1. HTML-elementer (også kaldet TAGS), fx <p> p 2. Text-elementer text 3. Attributter til HTML-elementer (attribut-navn= attribut-værdi ), fx src= bil.jpg src Modellen vises altid som et (omvendt) træ - et såkladt DOM-træ (se herunder): <html> <head> </head> <body> Sunde madvarer: <ul> <li>grøntsager</li> <li>frugt</li> </ul> <img src="bil.jpg"> </body> </html> html head body text ul img li li text text src Figur 2 HTML-dokumentet i den venstre ramme er illustreret i DOM-træet til højre. Træet indeholder 3 textelementer, 1 attribut og 7 HTML-elementer, hvoraf 1 er et separator-tag og resten container-tags. De enkelte elementer i træet kaldes også knuder og man beskriver knuderne relativt til hinanden svarende til et stamtræ - på engelsk: Knuden direkte over en knude er parent (forælder) til denne knude. Knuderne et niveau direkte under en knude er children (børn) af denne knude. Knuder på samme niveau og med samme parent er siblings (søskende). Mængden af alle knuder på alle niveauer under en knude er descendants (efterkommere) af denne knude. Parent, grandparent, og alle andre knuder ovenover en knude, er ancestors (forfædre) til denne knude. (Bemærk at text-knuder/text-elementer ikke kan have children) Side 2
ex1.html: 1 : <html> 2: <head> 3: <title>om HMTL</title> 4: </head> 5: <body> 6: HTML-dokument: 7: <ul> 8: <li>html-elementer</li> 9: <li>text-elementer</li> 10: <li>attributter</li> 11: </ul> 12: <img src="bil.jpg" width="100"> 13: <hr> 14: <a href="http://www.akat.dk">katten</a> 15: </body> 16: </html> BROWSER HTML - Øvelse 1 HTML-dokumentet i filen ex1.html indlæses af browseren og skærmbilledet nederst genereres. (Linjenumrerne i kildekoden hører ikke med til dokumentet og har kun pædagogisk værdi) a) Knyt linjenumre til de enkelte elementer i browserens genererede skærmbillede b) Hvor mange TEXTelementer indeholder dokumentet? c) Lav en skitse at HTMLdokumentets DOM-træ Side 3
HTML Øvelse 2 Gå i sandkassen og lav en hjemmeside der indeholder en række links, præsenteret i en liste. Når din browser modtager et HTML-dokument fra fx en web-server, ankommer hele indholdet som én lang tekst-linje. Efterhånden som browseren tygger sig igennem de enkelte tegn, opbygges DOM-træet for det pågældende dokument. HTML-elementerne/HTML-knuderne definerer således strukturen af dokumentet medens text-elementerne/text-knuderne er selve indholdet på godt dansk : HTML is for content (and structure of content). Vi afslutter denne lille gennemgang af dokument modellen, med at tilføje, at DOM-træet altid har en øverste knude (roden) kaldet document, således at DOM-træet helt præcist tegnes som vist herunder: document html head body text Figur 3 document-knuden er den øverste Attributten id Som vi lige har set bliver, selv forholdsvis simple, hjemmesider til en kompleks fremstilling i DOM-modellen. Hvis en hjemmeside skal være dynamisk og interaktiv, har vi brug for at kunne finde bestemte HTML-elementer og manipulere dem. Her kommer attributen id på banen. Attributtens værdi skal være et unikt navn i det pågældende HTML-dokument. Et eksempel kunne være: <ul id= favoritlinks >. Eksempel på etablering af navigation med attributten id Meget lange HTML-dokumenter vil altid ses i browseren sammen med en lodret scroll-bar (figur 4). Derfor vil man ofte placere en navigations-menu, bestående af links til de respektive afsnit, øverst på siden, og i bunden af hvert afsnit placere et link tilbage til menuen. Dette kan nemt etableres via id-attributter på de elementer der skal hoppes til og a-elementer (links) til at foretage hoppene. Her følger en detaljeret fremgangsmåde: 1: Vi vil hoppe til overskrifterne MENU, Afsnit 1 og Afsnit 2, og da disse er tekst-elementer i h3-elementer (headerelementer) forsynes disse h3-elementer med id-attributter med de anførte værdier: Figur 4 Store dokumenter scroller. Side 4
. <h3 id= menu >MENU</h3>. <h3 id= af1 >Afsnit 1</h3>. <h3 id= af2 >Afsnit 2</h3>. 2: Links der hopper til de 3 elementer med de angivne atrribut-værdier etableres, som sagt, via a-elementer hvor href-attributtens værdi netop er det relevante id, på det HTML-element der skal hoppes til. Dog skal vi fortælle browseren at de angivne href-værdier peger på HTML-elementer i samme dokument, og dette gøres ved at foranstille id-værdien et #-tegn:. <h3 id= menu >MENU</h3> <a href= #af1 >Afsnit 1</a> <a href= #af1 >Afsnit 1</a> <h3 id= af1 >Afsnit 1</h3>..[en masse tekst] <br><a href= #menu >Til menu</a> <h3 id= af2 >Afsnit 2</h3>. [en masse tekst] <br><a href= #menu >Til menu</a> Figur 5 Der er klikket på linket til Afsnit 2' (se vt. Figur 4)og browseren har scrollet dokumentet så Headeren på Afsnit 2 (med id= af2 ) placeres øverst i browser-vinduet. HTML Øvelse 3 Hop i sandkassen og lav et dokument med navigation via attributten id. Sikkerhedsindstillinger i FireFox-broweren kan medføre at navigationen ikke virker i sandkassen. I stedet kan man kopiere indholdet fra tekstboksen (i sandkassen) og placere denne i en selvstændig html-fil (se fx også http://www.akat.dk/datalogi/idnavi.html) HTML-elementet iframe Ved hjælp af denne container-tag kan man indsætte et vindue i et dokument, hvori et andet web-dokument kan vises. Indholdet i framen defineres ved src-attributten, hvis værdi angiver adressen på det dokument der skal vises i rammen. width og height er attributter, som definerer størrelsen af den ramme hvori det fremmede web-dokument vises, og frameborder-attributten bestemmer om der skal vises en ramme om det indlejrede dokument eller ej. Man kan således, fx, overvåge mange hjemmesider på en gang i et og samme browservindue. Vi iler med et eksempel: <iframe src= http://www.google.dk width= 100% height= 90% frameborder= no > </iframe> Side 5
Figur 6 I sandkassen har vi testet en iframe med de viste attribut-værdier. Eksempel på etablering af navigation med iframe Figur 7 I sandkassen har vi etableret en navigation via en iframe. Side 6
Forsynes iframen fra figur 6 med en id-attribut kan man opbygge en lille navigation med, fx knapper, der indlæser forskellige hjemmesider i den samme iframe. Vi springer lige ud i et eksempel i figur 7. Vi har faktisk her sneget lidt JavaScript ind via event-handleren onclick Kildekoden samt en kort forklaring følger her. <html> <head> </head> <body> <button onclick="document.getelementbyid('f1').src='http://www.google.dk'" > Google</button> <button onclick="document.getelementbyid('f1').src='http://www.akat.dk'" > Katedralskolen</button> <hr> <iframe src="http://www.google.dk" width="100%" height="90%" frameborder="no" id="f1" > </iframe> </body> </html> document.getelementbyid( f1 ) er en reference til iframe-elementet..src henviser til den lokale src-attribut i dette iframe-element, hvis værdi sættes til http://www.google.dk, hvilket har den effekt at et muse-klik på knappen udløser onclickevent-handleren, hvorved Katedralskolens hjemmeside indlæses i iframen. HTML Projektopgave: Datalogiholdets hjemmeside navigation på 2 niveauer Der skal etableres et site bestående af flere HTML-dokumenter, som beskriver datalogiholdet på Aarhus Katedralskole (fx et HTML-dokument der beskriver de enkelte elever med email, adresse og telefonnummer - gerne med billeder, et andet HTML-dokument der fx indeholder diverse favoritlinks etc ). Et styrende HTML-dokument, forsynet med en iframe, skal gøre det muligt at vælge mellem disse. De enkelte HTML-dokumenter som vises i iframen kan endvidere være forsynet med en lokal navigation som omtalt på side 4 og 5. Sitets URL: www.akat.dk/datalogi/projekt1/ramme.html Side 7
Projektopgave: Datalogiholdets hjemmeside - navigation på 2 niveauer Følgende HTML-dokumenter, alle placeret i mappen projekt1 kunne udgøre starten på projektet: ramme.html elevdata.html billeder.html favoritlinks.html ramme.html Etablerer en række knapper og et iframeelement, således at når der fx klikkes på knappen Elev data så vises HTMLdokumentet elevdata.html i iframe en. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) elevdata.html viser elevdata (i en tabel) med indlagt lokal navigation. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden specielt tabeller - for de andre elever) billeder.html Viser billeder (med navn) med indlagt lokal navigation. Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) favoritlinks.html viser favoritlinks (i liste) med indlagt lokal navigation. Figur 8 Et bud på Datalogiholdets hjemmeside Grp.: (Gruppen skal gennemgå opbygningen af hjemmesiden for de andre elever) Side 8
Endnu et udviklingsmiljø til konstruktion af hjemmesider Sandkassen er fin at teste små hjemmesider i, men skal man i gang med større projekter er det nødvendig at bruge en tekst-editor. Programmet Notesblok (eng.: NotePad ), som følger gratis med Windows, er et udmærket bud på en sådan editor. Det afgørende er at man husker at gemme dokumentet i en fil af typen.html (i stedet for default-værdien.txt) ved fx at skrive eksempel.html når filen skal gemmes (anførselstegnene skal med). Når dokumentet først er gemt, kan man efterfølgende navigere til dokumentet og fx klikke på det, hvorefter ens browser viser dokumentet. Den videre konstruktion af hjemmesiden foregår nu ved at redigere HTML-dokumentet i teksteditoren (notesblok), gemme det, og skifte til browservinduet, hvor der trykkes opdater. Banalt men hamrende effektivt! Figur 9 Udviklingsmiljøet etableret på forfatterens skrivebord. Til venstre programvinduet med tekst-editoren notesblok, og til højre programvinduet med browseren. HTML-editorer Der findes et stort udvalg af HTMLeditorer på markedet, op på internettet kan man downloade gratis (freeware) udgaver. Fælles for disse editorer er ofte en høj indgnags-tærskel, samt et ofte let genkendeligt design på de producerede hjemmesider. Vil man ændre i det genererede HTMLdokument, bliver man alligevel nødt til at have et grundlæggende kendskab til HTML. Figur 10 En god, gratis editor er fx ConTEXT som tillader at man selv skriver HTML-indholdet. Man kan arbejde med flere HTML-dokumenter, der bliver vist i faneblade. Til venstre ses en oversigt over filerne i den mappe, hvor ens site ligger. Side 9
Udgivelse/upload til server Via det tidligere beskrevne udviklingsmiljø, kan man, i ro og mag, på ens egen computer, kreere sit eget hjemmesidekompleks men skal andre have glæde af anstrengelserne, skal hjemmesiderne placeres på en web-server. Medens klient-programmet: browseren, er perfekt til download fra en web-server,og efterfølgende visning af hjemmesiderne, så benytter man ofte en anden klient/program, når der skal uploades til en web-server, nemlig en såkaldt FTP-klient (FTP = File Transfer Protocol). Sådanne klienter kan hentes som freeware på internettet, og figur 11 viser én af slagsen. Figur 11 FTP-klienten har 2 vinduer. Det venstre indeholder filer og mapper på ens egen computer (klienten) mens det højre viser filer og mapper på web-serveren. Ved at markere mapper/filer og klikke på piletasterne kan filer flyttes mellem klient og server. Specialtegn Visse tegn som ikke findes på tastaturet,og fx tegnene < og >, kan alligevel skrives ind i et HTML-dokument, via en såkaldt escape-sekvens. Vi iler med nogle eksempler: Tegn Escape-sekvenser < < < > > = & & & Udvalgte HTML-elementer/tags Dette er langtfra en gennemgang af samtlige HTML-elementer. Et overblik kan fx findes på flg. (engelske) site: http://www.w3schools.com/html/ Tekst: <h1> </h1> (head: overskrift> Indsætter en overskrift. Tallet angiver font-size, med 1 som det største og 6 som det mindste. Side 10
<p> </p> (paragraph: afsnit) Markerer et tekst-afsnit. Browseren indsætter lidt luft før og efter elementet. <br/> (linebreak: ny linje) <ul> </ul> (unordered list: ikke-nummereret liste) Placerer en liste i HTML-dokumentet. De enkelte elementer i listen markeres med <li> </li>. Eks.: <ul> <li>tænd for computeren</li> <li>etabler forbindelse til internettet</li> <ul> <ol> </ol> (ordered list: nummeretret liste) Placerer en nummereret liste i HTML-dokumentet. De enkelte elementer i listen markeres med <li> </li>. <table> </table> (tabel) Indsætter en tabel med rækker: <tr> </tr>, indeholdende celler: <td> </td>. Eks.: <table> <tr><td>celle 1</td><td>celle 2</td></tr> <tr><td>celle 3</td><td>celle 4</td></tr> </table> Tabellen set gennem en browser. Grafik: <img> (image: billede) Indsætter et billede/grafik på en hjemmeside. Attributter: src= url url udpeger en grafik-fil, typisk af typen.jpg,.gif eller.png Link: width= 380 height= 120 Dimensionerer billedet i billedpunkter (pixels). Hvis kun én af attributterne angives, skaleres billedet. Hvis begge angives kan billedet (evt.) forvrænges. <a> </a> (anchor: anker) Indsætter et link til et andet sted i samme dokument, eller til et andet dokument på samme computer/webserver eller til et dokument på en anden webserver på internettet. Attribut: href= url url udpeger det dokument der hoppes til, når der klikkes på teksten mellem <a> og </a>, kaldet linkteksten. url en kan være relativ, og pege på et sted i samme dokument, hhv. på en fil på samme computer/webserver, eller være absolut, og pege på en fil på en anden Side 11
webserver på internettet. Vi iler med en række eksempler: Eks.: Relative url er: <a href= #afsnit1 >Afsnit 1</a> Der hoppes til et HTML-element med det angivne id (= afsnit ) i samme dokument. Den klikbare del af linket er teksten Afsnit 1. <a href= indhold.html >Indholdsfortegnelse</a> Der hoppes til et andet dokument relativt til det aktuelle (dvs. i samme mappe på den samme computer). Browseren viser herefter det angivne dokument indhold.html. <a href= oversigt.html#kap3 >Kapitel 3</a> Der hoppes til et andet dokuments HTML-element med id= kap3. <a href= bog1/kap4/indhold.html >Kapitel 4</a> Der hoppes til dokumentet indhold.html, der befinder sig relativt til det aktuelle dokument, i en undermappe kap4 til en undermappe bog1 på samme computer. <a href=../kap7/indhold.html >Kapitel 7</a> Der hoppes til dokumentet indhold.html, der befinder sig i en mappe kap7 på samme niveau som den aktuelle mappe (../ betyder ét niveau op (= overmappe)) Absolut url: <a href= http://www.google.dk/ >Google</a> Den danske Google-startside (homepage) vises i browseren, hvis der klikkes på linkteksten Google. Den absolutte url kendes på http:// Doctype-erklæring og angivelse af tegnsæt HTML-dokumenter bør forsynes med en varedeklaration, en såkaldt Doctype-erklæring, som fortæller browseren hvad det er for en version af HTML der benyttes i det pågældende dokument. En Doctype-erklæring placeres allerførst i dokumentet og kan, fx, se således ud: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>min første, pinlig korrekte, hjemmeside</title> </head> <body> </body> </html> Side 12
Doctype-erklæringen fortæller, bl.a. at det er HTML-version 4.01 vi har benyttet til opmærkning af dokumentet. Endvidere er der i <head>-afsnittet placeret en meta-tag som fortæller at det tegnsæt browseren skal anvende hedder utf-8. Validering og W3C Man kan sikre sig at det HTML-dokument man har lavet overholder de gældende regler for opmarkering af hjemmesideindhold ved at konsultere WorldWideWeb-konsortiets (W3C s) hjemmeside på adressen: http://validator.w3.org/ og her få ens hjemmeside valideret: Figur 12 Vi har valgt at validere ved at copy-paste indholdet fra hjemmesiden direkte over i et tekst-felt på validatoren. Trykkes på 'Check -knappen falder dommen prompte (se figur 14 på næste side) W3C er en verdensomspændende organisation som har til opgave at udarbejde standarder for hvorledes dokumenter på internettet skal konstrueres, således at fx browserkonstruktørerne kan være med på de nyeste standarder. Figur 13 Den del af MIT som bl.a. huser det amerikanske W3C-team. Side 13
Figur 14 Vi var heldige! dokumentet vi pastede ind i validatoren overholdt alle forskrifter (det var for øvrigt kun en tom skal) og vi kan nu blære os med et af nedenstående ikoner vist i figur 15 herunder. Figur 15 De to blære -ikoner man kan placere på egen hjemmeside hvis hjemmesiden er kommet igennem W3C-validatorens nåleøje! Side 14
Side 15