Grunnleggende om websider og HTML-kode Html er et språk / en standard som brukes for å gi instrukser til nettlesere om hvordan ulike elementer på en webside skal fortolkes og presenteres for en sluttbruker. Utvikling og vedlikehold av standarden gjøres av et internasjonalt konsortium kalt W3C. På W3Cs webside (http:/www.w3c.org) finnes mye informasjon om denne standarden, samt annet nyttig stoff relatert til web. Hva er en html-fil? En html-fil er en ren tekstfil (med filendelse htm eller html). Html står for Hyper Text Markup Languge, og er en standardisert måte å beskrive websideinnhold på, slik at ulike nettlesere skal kunne tolke samme kode likt. Når en nettleser laster ned en html-fil, er det tagger (les 'tægger') plassert i kildekoden som avgjør hvordan nettleseren skal presentere informasjonen som en webside. Et eksempel: Hva betyr <b>tekst</b> i html-koden? Når nettleseren støter på dette i html-koden, vet den at ordet "tekst" skal presenteres på skjermen med uthevet (bold) skrift. Dette fordi start- og slutt-taggen (dvs. <b> og </b>), henholdsvis foran og etter teksten, forteller dette Http (Hyper Text Transfer Protocol) er en standardisert protokoll for overføring av webdokumenter mellom webservere og nettleserklienter. Aktuelle editorer: Notisblokk (NotePad) Frontpage NVU Notisblokk er tilgjengelig i Windows, under Start -> Tilbehør og er en enkelt teksteditor som lager ren tekst (etter ASCII-kode-formatet). Html-kode kan skrives direkte inn som tekstelementer, og fila må så lagres med filendelse htm eller html, f.eks. index.htm. Ulempen med en slik teksteditor, er at det kan bli nokså komplekst å forholde seg kun til koder, særlig når webdokumentene blir store og inneholder mye ulik type funksjonalitet. Frontpage er en editor fra Microsoft, som er spesialdesignet for å forenkle utvikling og publisering av websider. Den jobber etter det såkalte WYSIWYG-prinsippet (What You See Is What You Get). Dette medfører at den som koder, kan konsentrere seg om innholdet, istedenfor om teknologien og de underliggende HTML-kodene. Samtidig er det enkelt å se hvilke koder som automatisk genereres av Frontpage, etterhvert som webdokumentet designes. Det er med Frontpage enkelt å kombinere WYSIWYG-utvikling med HTML-koding, der dette måtte være ønskelig eller påkrevd. Nvu er en editor utviklet for samme formål som Frontpage. Forskjellen er at NVU (se http://www.nvu.com) er utviklet etter "åpen kildekode"-prinsippet, og er kostnadsfri å nedlaste (i motsetning til f.eks. Frontpage, Dreamweaver m.fl., som er programmer som må kjøpes). Nvu er (foreløpig) ikke utviklet i samme grad som Frontpage, men ser ut til å dekke det som det er behov for i dette kurset. Hvordan lager man html-filer? Siden html-filer er rene tekstfiler, kan de lages i vanlig teksteditorer, f.eks. Notisblokk. Vanligvis utvikler man ikke html-sider i rene teksteditorer, men i egne editorer utviklet spesielt for slike formål (f.eks. Frontpage eller Dreamweaver, som sikkert mange har hørt om). Moderne publiseringsverktøy benytter gjerne WYSIWYG-prinsippet (What You See Is What You Get). Man lager da html-dokumentet etter samme prinsipp som man lager f.eks. et Word-dokument (der de underliggende kodene er skjult for brukeren). Det defineres gjerne maler og stilark som bestemmer hvordan tekst m.m. skal presenteres i en nettleser (på tilsvarende måte som man bør benytte stiltyper i Word). IT-verktøy høsten 2005 Olav Dæhli 1
Hvorfor trenger man å kjenne til html-koding? Det melder seg gjerne fra tid til annen behov for å gjøre endringer direkte i html-koden som blir generert. Dette fordi resultatet ikke alltid blir slik man ønsker det med publiseringsverktøyet. Ofte ønsker man også å lage noe html-koden direkte på html-format (uten å gå via konvertering) fordi det ikke ligger mulighet for å lage koden akkurat slik man ønsker med f.eks. Frontpage. Frontpage f.eks. (og Nvu), er derfor laget slik at det skal være enkelt å skifte mellom normalmodus og htmlmodus. Det er også en forhåndsvisningsmodus lett tilgjengelig. Man kan hele tiden enkelt skifte mellom de tre ovennevnte moduser. Også i andre sammenhenger møter man ofte behov for å kunne lage litt html-kode direkte. Det kan være f.eks. et meldingsvindu som skal fylles ut, der man kan benytte html-kode direkte for å formatere teksten. Skal man programmere, kan man komme borti tilfeller der man f.eks. skal lese inn fra, og presentere et resultat i en nettleser. Grunnprinsippene for html-kode Nedenfor er grunnprinsippene for html-koding beskrevet, og i tillegg er det tatt med noen av de vanligste taggene, for å vise prinsippene for disse. Utover dette har man gjerne oppslagsverk der man finner de kodene man behøver (og etter som man jobber mye med det, får man naturligvis gradvis utvidet sitt "vokabular"). Men som nevnt, i det påfølgende er kun det helt grunnleggende tatt med. Kodingen startes alltid med <html> og avsluttes med </html>. "/"-tegnet markerer at det handler om en slutt-tag. Resten av koden består av "et hode" (<head>), der tittel (<title>) m.m. kan legges, og en "kropp" (), der tekst m.m. som skal vises på skjermen kan legges. Dette er altså elementene som danner rammen rundt html-koden. Hvordan vise resultatet av html-koden For å prøve eksemplene nedenfor, kan dere skrive koden(e) inn i et Notisblokk-dokument, slik at dette blir ren tekstkode. Lagre så filen med "htm" (eventuelt html) som filendelse, f.eks. med filnavn "mitthtml-dokument.htm". Gå så inn i Utforsker og dobbeltklikk på dokumentet. Resultatet skal da åpnes/vises i et nettleservindu. Alternativt kan dere gå over i html-modus i Frontpage og skrive inn (eller lime inn) teksten der i htmlmodus. Gå deretter over i forhåndsvisning, for å se hvordan det vil bli seende ut i en nettleser. Limer dere inn kode fra f.eks. Word, så lim teksten først inn i Notisblokk (og så over til Frontpage). Dette sånn at innholdet blir omgjort til en ren uformatert tekst. Frontpage har også et verktøy for forhåndsvisning i en nettleser. Dokumentet må da først lagres. Grunnstrukturen i et html-dokument Koden nedenfor, viser grunnstrukturen i et html-dokument, med taggene (< _ > html, head, title og body (med tilhørende slutt-tager marker med skråstrek </ _>) <html> <head> <title> Dette er et tittel-felt, og legges i "hodet" </title> </head> Teksten legges inne i "kroppen" </html> Det er her laget innrykk, for å markere hvilke tagger som hører sammen, men disse har ingen betydning for prosesseringen av koden. IT-verktøy høsten 2005 Olav Dæhli 2
Formatering av tekstelementer (mellom og ) Ulike tekst- og formatteringselementer legges mellom taggene og. I de neste avsnittene skal vi se på noen ulike tekst- og formatteringselementer som kan legges inn i dette området (se punkt 1-6 nedenfor). Dette er bare et utvalg av det antall muligheter som finnes, men er vanlig benyttede elementer, og det viser prinsippene. 1. Avsnitt <p> <p> Med p-tagger lager vi avsnitt </p> <P align="center"> Sentrerer teksten i avsnittet </p> 2. Overskrift <h> <h1> Dette er en overskrift på nivå 1 </h1> 3. Lister <ol>, <ul>, Nedenfor er det listet opp tre listetagger man bør kjenne til: ol = ordered list (nummerert liste) ul= unordered list (unummerert liste) li=list item Her følger et komplett eksempel, der vårt opprinnelig eksempel er utvidet med en nummerert og en unummerert liste: <html> <head> <title> Dette er et tittel-felt, og legges i "hodet" </title> </head> <h1>dette er en overskrift</h1> <ol> Dette er nummerert punkt nr 1 Dette er nummerert punkt nr 2 </ol> <ul> </ul> <p>her kommer et avsnitt<p> <p>her kommer et avsnitt til </p> </html> IT-verktøy høsten 2005 Olav Dæhli 3
Her er en variant med nummerert liste der nummerert punkt nr 1 har to underpunkter som ikke er nummerert (altså vanlig punktliste). Nummerert punkt nr 2, har ingen underpunkter: <ol> Dette er nummerert punkt nr 1 <ul> </ul> Dette er nummerert punkt nr 2 </ol> 4. Sette inn et bilde <img src= "bildefilnavn"> Innsetting av bilde gjøres med img src. Her benyttes det ikke noen slutt-tag. Et eksempel: Her kommer et bilde: <img src="hitlogo.gif"> Tilleggsparamtre kan legges til, f.eks. tekst som skal vises om bildet ikke er tilgjengelig: <img src="hitlogo.gif" alt="bildet kan ikke vises"> 5. Sette inn en lenke <a href="web-adresse"> <a img src="http://www.hit.no/tf"> Denne teksten blir en lenke til TFs hjemmeside </a> IT-verktøy høsten 2005 Olav Dæhli 4
6. Tabeller <table> <tr> <td> <table> og </table> henholdsvis starter og avslutter en tabell <tr> og </tr> representerer start og slutt på en tabellrad (table row) <td> og </td> representerer start og slutt på tabelldata (table data) Et eksempel: <table> <tr> <td> data 1 i rad 1 </td> <td> data 2 i rad 1 </td> <td> data 3 i rad 1 </td> </tr> <tr> <td>data 1 i rad 2</td> <td>data 2 i rad 2</td> <td>data 3 i rad 2</td> </tr> </table> Bruk samme kode som ovenfor, men endre <tabel> til følgende: <table border="1" bordercolor=red cellpadding="1" cellspacing="0"> Årsaken til endringen, er følgende attributters betydning: border="1": Denne gjør at vi nå ser kantlinjen (hvilket man ikke gjør, når satt til "1"=. bordercolor=red: Denne gjør at kantlinjen blir rød. cellpadding="1": Angir antall piksler fra kantlinje til teksten i en celle cellspacing="0" : Antir antall piksler mellom cellene. 7. Diverse mye benyttede tagger (husk også å ta med slutt-tagger) Taggene nedenfor er mye benyttede tagger. <i> Italic (skråstilt skrift <b> Bold (uthevet skrift) <br> Linjeskift (trenger ingen sluttag) <font size = "angi tall"> <font color="angi farge/fargekode"> Farge kan f.eks. være "red" eller hex-kode IT-verktøy høsten 2005 Olav Dæhli 5