Tilbake til meny for Informatikk studieretningsfag

HTML - en kort innføring

Komme i gang

Oppgavene nedenfor er basert på at du skriver all koden selv. Dette kan du gjøre i en tekst-editor som f.eks. Notisblokk. Det anbefales IKKE å bruke et tekstbehandlingsprogram (Word el.l.), siden det da kan blir vanskelig å lagre filen på riktig måte. Imidlertid finnes det glimrende og gratis programvare som er spesielt egnet til å arbeide med HTML-kode. Et enkelt program som er egnet for begynnere er Arachnophilia, det er et lite gratisprogram som kan lastes ned her: Arachnophilia. Et mer omfattende program som passer best for de som kjenner litt til HTML-koding er HTML-Kit. Dette programmet kan du finne her: HTML-Kit. Programmet er omfattende, men likevel gratis (freeware).

En egen side her på trell.org har noen enkle tips om bruken av Arachnophilia.

Hva er HTML?

HTML er forkortelse for HyperText Markup Language, eller "hypertekst avmerkingsspråk", for å forsøke en norsk oversettelse.

Dette "språket" består av et kodesystem som benyttes for å merke en tekst slik at den kan vises på en standardisert måte av ulike nettlesere (browsere). Det vil med andre ord si at hvis man benytter dette kodesettet, så vil teksten vises på en noenlunde forutsigbar måte i forskjellige nettelsere, slik som Netscape, Internet Explorer, Opera og andre.

Hypertekst er tekst som inneholder ord, grafikk og/eller bilder som henviser til andre dokumenter eller til et annet sted innenfor samme dokument (fil). Et slikt ord/grafikk/bilde kalles da for en lenke (link). En tekst-lenke skiller seg gjerne fra øvrig tekst ved at den har en annen farge og den kan også være understreket. Alle lenker har det til felles at musepekeren endrer utseende, normalt til en pekende hånd, når den føres over lenken. Ved å klikke på lenken, vil nettleseren lese inn og vise det koblete dokument eller sted. Hypertekst-systemet er dermed slik at man fritt kan springe fra dokument til dokument, fra sted i dokument til annet sted i samme eller annet dokument. Et mer moderne uttrykk er Hypermedia, som man kan bruke for å understreke at også bilder, lyder, animasjoner osv kan inngå i lenkestrukturen.

Dette kan kalles en nettverksstruktur, i motsetning til f eks en lineær struktur, hvor man bare kan gå fra én side til den neste, og i motsetning til en hierarkisk struktur, hvor man bare kan gå fra ett nivå til dokumenter på neste underliggende nivå og tilbake igjen. Nettverksstrukturen er den mest åpne av alle slike strukturer.

Prinsipper for tagger

Avmerkingen i HTML-systemet gjøres ved hjelp av såkalte tagger. (Ordet tagg kommer fra engelsk, tag, merkelapp.) Hovedprinsippet er enkelt: En tagg plasseres før det som skal avmerkes og en tilsvarende tagg plasseres etter det samme. Et eksempel: Ordet Overskrift skal avmerkes som en overskrift av tredje nivå:

<h3>Overskrift</h3>

Alle tagger består av de to tegnene < ... >, med taggens navn inni. Avslutningstaggen har i tillegg tegnet / før taggens navn. Det er egne tagger for tekstformatering, slik som normale avsnitt, overskrifter, uthevet, kursiv, mindre størrelse, større, linjeskift, ulike lister, tabeller mm. Det er også spesielle tagger for å plassere inn bilder og grafikk, og for å angi elementer (tekst, bilder eller grafikk) som lenker eller mål for lenker.

Når du skal lage en internett-side, er det greit å benytte en tekst-editor som enkelt lagrer teksten som ren tekst, f eks notisblokk (notepad). Hvis du bruker Word eller en annen tekst-behandler må du alltid huske på å velge Lagre som, og Ren-tekst som lagringsformat. Nettleserene forutsetter at filene som skal leses inn er lagret som et rent tekstformat.

Du kan dermed rett og slett skrive inn din tekst i notisblokk, merke av ord, avsnitt osv med tagger, og lagre teksten, gjerne med et navn som ender på .htm eller .html. Så er det bare å åpne filen din i nettleseren for å kikke på resultatet.

Noen tagger er nødvendige for at nettleseren skal forstå at det dreier seg om et html-dokument:

Begynnelse og slutt på hele dokumentet:

<html> ... </html>

Begynnelse og slutt på den teksten som skal vises:

<body> ... </body>

Det anbefales å skrive alle tagger med små bokstaver (ikke STORE). I tekstene her er det også forutsatt at alle tagger lukkes, dvs at alle tagger som kan ha slutt-tagg skal ha det. (Begge deler er for å lette overgangen til XHTML-standardene.)

En del tagger og deres anvendelse

Alle taggene gjengis her med begynnelse- og slutt-tagg, med et eksempel, og med en visning av hvordan dette eksempelet vil ta seg ut i nettleseren.

Tagger for navigasjon

Den viktigste egenskapen ved html-dokumenter er hypertekstprinsippet. Denne egenskapen er avhengig av tagger for avmerking av lenker og av mål (bokmerker).

Lenketaggene:

<a href="referanse"> ... </a>

Her kan referanse være navnet/adressen på en hvilken som helst fil på internett. Da må hele URL-en til filen oppgis:

<a href="http://home.no.net/krev/index.html">En internettside</a>

Denne html-avmerkingen vil bli seende slik ut i nettleseren: En internettside

Men referanse kan også være navnet på en fil som ligger samme sted (samme maskin og katalog) som den filen lenken befinner seg i. Da er det tilstrekkelig med navnet på filen:

<a href="bugs.html">En annen internettside</a>, som ser slik ut: En annen internettside

Ta med vei-navn hvis filen ligger i en annen katalog. Du kan også oppgi navnet på et bokmerke i samme fil:

<a href="#top">Til toppen av siden</a>, fortsatt på samme måten: Til toppen av siden

Legg merke til bruken av tegnet: #.

Bokmerker avmerkes på denne måten:

<a name="top">Første overskrift</a>

(Obs: I bokmerke-taggen brukes ikke tegnet #.) Bokmerker er ikke synlige i nettleseren, de brukes bare til navigering.

Oppgave 1:
Lag to internettsider i html-format. Kall f eks den ene fil-a.htm og den andre fil-b.htm. Legg inn en liten tekst i hver. Legg inn i hver fil en lenke til den andre filen. Legg også inn en lenke til denne internettsiden (adressen vil du du kunne se i nettleseren din). Legg også inn tre bokmerker i hver tekst, en øverst, en nederst og en midt i teksten. Lag en meny som fører deg til de ulike stedene i teksten.

Tagger for logisk inndeling

For å lage et oversiktlig dokument, vil man dele dette inn i avsnitt, gjerne med overskrifter, eventuelt også lister og/eller tabeller. Tabeller behandles i et eget avsnitt nedenfor.

Et vanlig avsnitt med tekst avmerkes slik:

<p> Første avsnitt med vanlig tekst. Det kan bestå av et ukjent antall setninger. </P>

p står for Paragraph. To påfølgende avsnitt vil bli vist med to linjeskift i mellom, dvs én blank linje i mellom.

Ønsker du å tvinge frem et linjeskift inne i et avsnitt, kan du bruke taggen:

<br />

Denne taggen har ikke en separat slutt-tagg, derfor / i slutten av taggen. Du kan også bruke denne en eller flere ganger imellom avsnitt, eller andre steder for å skape avstand (luft).

Du kan gi deler av teksten overskrifter, på ulike nivåer. Dette kan man sammenlikne med inndelingen av bøker i kapitler, seksjoner, avsnitt osv. Det er 6 nivåer av overskrifter, som bør benyttes i riktig rekkefølge (overskrift 2 "utenfor" overskrift 3 osv.)

<h2> Overskrift på nivå 2 </h2>, kan ta seg omtrent slik ut:

Overskrift på nivå 2

Oppgave 2:
Legg inn et par-tre overskrifter med ulikt nivå i hver av de to filene dine. Studér resultatet i nettleseren.

Tagger for lister

HTML-standarden har ulike muligheter for å lage lister. Du kan lage nummererte eller unummererte lister, eller såkalte definisjons-lister. For å lage en liste, må du benytte et sett med tagger, på to nivåer. Her er et par eksempler på slike lister:

Unummerert liste:

<ul> <li> Et listepunkt (List Item) </li> <li> Et annet listepunkt </li> </ul>

Utseende:

Et listepunkt (List Item)
Et annet listepunkt

Nummerert liste (Ordered List):

<ol> <li> Første listepunkt </li> <li> Andre listepunkt </li> </ol>

Utseende:

Første listepunkt
Andre listepunkt

Definisjonsliste (Definition List):

<dl> <dt> dt = (Definition) Term </dt> <dd> Først vil du skrive en tekst </dd> <dt> dd = (Definition) Definition </dt> <dd> Teksten etter dd vil komme med et passende innrykk </dd> </dl>

Utseende:

dt = (Definition) Term: Først vil du skrive en tekst
dd = (Definition) Definition: Teksten etter dd vil komme med et passende innrykk

Definisjonslister kan brukes til litt av hvert, ikke bare definisjoner! Legg merke til at for alle listetypene er det bare den ytterste taggen som trenger slutt-tagg.

Oppgave 3:
Lag en definisjonsliste hvor du som termer lister opp titlene på lærebøkene du bruker i informatikk. Som definisjon skriver du forlag og utgivelsesår.

Tagger for presentasjon

For å klargjøre teksten og for å gi bestemte ord, vendinger eller avsnitt ulik vekt, så kan man benytte typografiske virkemidler. Her er noen eksempler på slike formateringsmuligheter.

<b>Fet skrift</b> - Fet skrift
<i>Kursiv skrift</i> - Kursiv skrift
<small>Liten skrift</small> - Liten skrift
<center>Sentrert skrift</cent> -

Sentrert skrift

Det kan være nyttig å kunne legge inn en vannrett linje, man kan her angi tykkelsen på linjen (i pixeler) og bredden, f eks i % av skjermbredden (hr har ikke separat slutt-tagg):

<hr size="4" width="50%" />

Oppgave 4:
Bruk de fire formateringsmulighetene ovenfor i en av tekstene dine, slik du synes det passer. Forsøk også med ulike skillelinjer.

Tagger for bilder

For å kunne legge inn et bilde i en web-side, så må dette bildet først foreligge som en egen fil. Dette gjelder både fotografier, tegninger eller grafikk. Bruk gjerne først et grafikk-program til å lage eller bearbeide et bilde etter ditt eget behov. Bilder/grafikk skal fortrinnsvis være i ett av formatene: PNG, GIF eller JPG. De tre formatene har ulike egenskaper som man må ta hensyn til.

<img src="intel.gif" width="74" height="32" alt="Intel" /> Koden kan resultere i følgende bilde:

src angir kildefilen til bildet/grafikken, width og height angir bredde og høyde på bildet, og alt angir en alternativ tekst, hvis bildet ikke vises. width, height og alt er ikke strengt nødvendige, men bør være med. (img har ikke separat slutt-tagg, derfor avslutningen med /.)

Her gjelder de samme muligheter for angivelse av URL som ved lenker (se ovenfor). Et bilde kan også godt være en lenke, plassér da bare lenke-taggene rundt bild-taggen.

Oppgave 5:
Lag eller finn et eller flere bilder som du legger på samme katalog som du har web-sidene dine. Pass på at du bruker PNG, GIF eller JPG-format. (GIF egner seg til grafikk og tegninger med få farger. JPG er best egnet til fotografier. PNG er nyere og mer allsidig format spesielt utviklet for internett.) Sjekk gjerne størrelsen på bildefilene dine, så ikke de blir for store. Internett tar tid!

Legg så inn tagger for bildene dine på passende sted i web-sidene dine.

Tagger for tabeller

Det er svært vanlig å benytte tabeller for å presentere tekst og data på en oversiktlig måte, men også for å frembringe spesielle formateringsmessige effekter. For at teksten din skal være lett leselig i ulike nettlesere (og ikke bare den du selv tilfeldigvis benytter), så bør du ikke benytte for kompliserte tabellstrukturer.

For å angi at tekst og/eller bilder skal plasseres i en tabell, må man bruke et system av ulike tagger. Man angir at det skal være en tabell med <table> ... </table>. I tillegg må det angis at det skal være en ny rad i tabellen: <tr>... </tr>, og det må angis at det skal være en ny celle (Datacell) i tabellen: <td> ... </td>. Alle disse tre nivåene må være med for at det skal bli en tabell. Koden for ny rad må befinne seg innenfor tabell-taggene, og koden for ny celle må befinne seg innenfor rad-taggene. I tillegg kan du, om du ønsker det, angi en overskrifts-celle (Table Header) for hver rad. Den angis slik: <th> ... </th>.

Du kan også angi en rekke egenskaper ved tabellen. Her skal vi bare ta med to, tabellens bredde, og om det skal være en synlig kantlinje. Bredden angis med width, enten i % av skjermbredden, eller i antall pixeler. Kantlinjen angis med border og tykkelsen i pixeler. Her følger et eksempel på en tabell:

<table width="50%" border="2"> <tr> <th>Art</th> <th>Vekt, kg</th> <th>Lengde uten hale</th> <th>Maksimal alder, år</th> </tr> <tr> <td>Bjørn</td> <td>80-350</td> <td>180-230</td> <td>30</td> </tr> <tr> <td>Koala</td> <td>5-12</td> <td>80</td> <td>13</td> </tr> <tr> <td>Mungo</td> <td>1,5</td> <td>43</td> <td>10</td> </tr> </table>

Som blir seende omtrent slik ut:

Art	Vekt, kg	Lengde uten hale	Maks. alder, år
Bjørn	80-350	180-230	30
Koala	5-12	80	13
Mungo	1,5	43	10

Oppgave 6:
Lag din egen tabell i en av tekstene dine.

Tagger for tittel, farger og annet

Det er fint å ha en tittel på web-siden sin, den som kommer til syne i den blå linjen øverst i vinduet. Denne tittelen er også nyttig, fordi det er denne som blir tittel hvis noen legger siden din inn i sin bokmerkesamling (favoritter i Internet Explorer). For å lage en tittel må du benytte to nye tagger: <head> ... </head> og <title> ... </title>. head-taggene må komme før body-taggen, og den kan inneholde ulik informasjon i tillegg til tittelen. title-taggene må komme inni head-taggene. Den koden du ser her gir tittelen i dette vinduet:

<head> <title>HTML - en liten oversikt</title> </head>

Mange liker å bruke farger på web-sidene sine. En rekke av elementene kan gis farger, slik som bakgrunnen, tekst, deler av teksten, tabeller osv. Det er nokså vanlig at man velger farger og fargekombinasjoner som er slående - men da blir ofte teksten vanskelig eller ubehagelig å lese. Ved valg av farger: Ta først og fremst hensyn til god leselighet!

Bakgrunnsfarge kan du angi i body-taggen: <body bgcolor="#D0FFFF"> gir den bakgrunnsfargen du ser her. Fargekoden er bygget opp slik: D0 FF FF, hvor hvert tosifret hexadesimalt tall angir en fargekomponent, i rekkefølgen rødt, grønt, blått. Minste verdi for hver komponent er 00, høyeste er FF. Eksempler: #FFFFFF gir helt hvitt, #000000 gir helt sort, #990000 gir varmt rødt. Du kan også benytte enkelte engelske ord for fargen: bgcolor="red". Ønsker du å angi en annen tekstfarge enn den vanlige, sorte, kan du gjøre dette i body-taggen med text="#..." Dette er imidlertid ikke å anbefale. Formatering av HTML-siden ivaretas bedre med bruk av stilark, og det anbefales heller å bruke disse i stedet for attributtene som kan inngå i body.

Du kan også angi farge, skrifttype og størrelse på deler av teksten din ved å bruke font-taggen: <font color="#009900" size="+2" face="Arial"> ... </font>. Her angir størrelsen en trinnvis økning (eller reduksjon) i forhold til standard størrelse. face angir skrifttype. Det anbefales ikke å benytte font-koden, men heller formatere teksten med stilark (Cascading StyleSheets), se artikkelen HTML - bruk av stilark (CSS).

Det kan være du vil gi teksten din en bestemt horisontal plassering. Da kan du angi en parameter i p-taggen: <p align="right"> ... </p> gir høyre-justert tekst. Alternativene er left og center. Tekst-justering ivaretas bedre med bruk av stilark, og det anbefales heller å bruke disse i stedet for align-attributtet.

For å forstå hvordan fargekodene er bygget opp, anbefales det å lese om Binære og hexadesimale tall.

Å validere koden

Når du har skrevet en del kode, så kan det være greit å vite om koden er riktig satt opp, etter de standarder som finnes for HTML. Slike standarder er utarbeidet av W3C (WWW Consortium). For å validere (teste) koden din, kan du bruke programmer som HTML-Kit, eller du kan bruke W3C sin online valideringstjeneste. For at denne siste skal fungere må du legge inn et par ekstra linjer i koden din, slik at valideringsprogrammet kan bruke riktig regelsett.

Legg først inn følgende (nøyaktig!) før starttaggen <html> helt først i dokumentet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Legg så inn følgende i head-seksjonen:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

Etter å ha lagret HTML-filen, er du nå klar for å validere den. Bruk en nettleser og gå til siden: http://validator.w3.org/. Ved siden av feltet Local file: trykker du på knappen Choose. Bla deg fram til riktig fil og trykk Åpne (eller Open). Trykk deretter Validate file. Nå vil du enten få opp en melding om at filen din validerer korrekt, eller en liste med feilmeldinger, og angivelse av hvilke linjer i koden din som inneholder feil. Deretter er det bare å gå i gang og rette feilene...!

HTML på internett

Her er lenker til noen internettressurser omkring bruk av HTML-kodesettet.

NCSA - A Beginner's Guide to HTML: Omfattende innføring i HTML. På engelsk.
The Bare Bones Guide to HTML: En liste over alle HTML-tagger. Det anbefales å bare bruke tagger etter HTML 3.2 spesifikasjonen, eller HTML 4.0 spesifikasjonen. Ikke bruk tagger etter Netscape eller Microsoft Internet Explorer Extension. På engelsk.
HTML Help, Colors: Detaljert hjelp om bruk av farger og fargekoder. På engelsk.
Special Characters: Komplett liste over spesialtegn. På engelsk.
Web design online lærebok: Tutorial for design av web-sider. Tar for seg alt fra innhold til layout. På engelsk.
W3C HTML Validation Service: Her kan du kontrollere din HTML-kode for feil og mangler. På engelsk.