Ein introduksjon til HTML

Vegard Andreas Larsen

Lagre artikkel

HTML som språk

Generelt er det meste du ser på internett skrive i ein eller anna form for HTML. Det finns mange ulike standardar, eller versjonar, av HTML, og du er nødt til å velgje ein som du skal halde deg til. Me kjem i denne guiden til å halde oss til HTML 4.01 Transitional, som er blandt dei vanlegaste standardane i bruk på Internett i dag. Det er og ei vanleg feiltolking å tru at HTML er eit programmeringspråk, når det faktisk er eit formatteringsspråk.

HTML står for HyperText Markup Language, og er som namnet tilseier eit språk som fortell korleis tekst og bilete skal visast på ein dataskjerm. Språket er svært enkelt oppbygd, og om det i tillegg er strukturert skikkeleg,, kan kven som helst lese det utan forkunnskapar. Kven som helst kan og lære å skrive HTML.

Til dykk som kan HTML, og føler for å klage på at me ikkje følgjer W3C-standardane overalt i denne guiden; me har kutta enkelte ting med vilje, for å ta det igjen på slutten. Me er ikkje imot standardane, men me føler at det vil vere enklare å gje folk oversikt om dei slepp å bry seg med detaljar i byrjinga. Etterkvart som me kjem lengre ut i denne guiden, skal me fortelle meir om standardar og validering. Om du ikkje har arbeida med HTML før, så treng du ikkje bry deg noko om at du ikkje skjønte dette avsnittet.

Sidan HTML eigentleg berre er rein tekst, kan du i teorien bruke Notisblokk i Windows til å skrive HTML-dokument. Det er ikkje anbefalt å bruke Notisblokk til dette, sidan programmet ikkje har støtte for såkalla kode-opplysning, dvs. fargekoding av det du skriv inn. Ta det med ro, det finns svært mange alternativ der ute som gjer dette.

Om ein er villig til å bruke pengar på eit verktøy som gjer at ein slepp å skrive sjølve HTML-koden, då er Macromedia Dreamweaver noko å satse på. Program der du skriv inn websida di som om det skulle ha vore eit Word-dokument, er det som me kallar WYSIWYG-editorar; What You See Is What You Get. Microsoft FrontPage er og eit slikt program, men sidan det programmet lagar så utrulig rotete kode, kan me ikkje anbefale det. Dreamweaver tillater både WYSIWYG- og kode-redigering, og det er difor eit svært godt verktøy for HTML-koding. Dessverre kostar Dreamweaver relativt mykje pengar, meir nøyaktig 339£. Du kan dog kjøpe ein utdanningslisens, som lisensen seier at du ikkje kan lage private heimesider med, for rundt 1500kr.

Sidan du mest sannsynleg ikkje har råd til eit slikt program, så har me ein del andre anbefalingar på lager. UltraEdit er eit svært godt verktøy, og det har støtte for fargekoding av svært mange typar kode. Om du seinare byrjar å programmere eit anna språk, kan du lett hente ned ekstrapakkar til programmet med fargekoding for fleire språk. UltraEdit er rett og slett genialt til webprogrammering. UltraEdit er eit program som me godt kan anbefale til dei fleste, men programmet kan sjå litt uvenleg ut for nybyrjarar. UltraEdit er gratis for prøvebruk i 30 dagar, etter det må du betale $39 for det.

Det er no me kjem til gratis-alternativet; EVRSoft 1st Page 2000. Programmet har fargekoding av HTML-og CSS-koden din, du kan sitte og redigere på koden samstundes som du ser korleis sida vert sjåande ut.

Om du er Linux-brukar, er Quanta Plus det anbefalte altnernativet. Quanta Plus kjem med dei fleste nyare Linux-distribusjonar, sidan det er ein del av KDE-pakken, så sjansen er stor for at det allereie er installert på ditt system. Quanta har fargekoding av tekst for omtrent alle moglege programmeringsspråk og formatteringsspråk, og er difor eit svært godt verktøy.

Installasjonen av programma får de finne ut av sjølve. Om de har problem med nokre av programma, kan de spørje på forumet vårt.

Dette er <b>HTML</b>-<i>kode</i>.

Om du lagrar dette som ei fil som du kallar minhtmlfil.html, og opnar den i nettlesaren din, vil teksten verte vist slik;

Dette er HTML-kode.

Så enkelt er det egentlig. Dei delane me fargela i dømet over, er sjølve HTMLen, resten er berre heilt vanleg tekst. HTML er bygd opp av det me kallar merkelappar, eller som dei heiter på originalspråket; tags. Me nyttar det (ifølge Norsk Språkråd) heilnorske uttrykket tagg om desse merkelappane. Ein liten kuriositet er at det faktisk heiter å tagge HTML når du skriv nettsider for hand.

Ein slik tagg startar alltid med eit "mindre enn"-teikn (

<

) og avsluttast med eit "større enn"-teikn (

>

). Innimellom desse finn me namnet på taggen, og i nokon tilfeller og nokon såkalla attributtar som kan forandre oppførselen til taggen. I første omgang skal me berre bry oss om namnet på taggen.

Dei fleste taggar må avsluttast ein eller anna plass i koden. Ein avslutningstagg startast med

</

og avsluttast med

>

. Innimellom her skal du berre skrive namnet på taggen. Når me seier at noko står "inne i

<b>

-taggen", meiner me at du finn det mellom

<b>

og

</b>

.

Me kan t.d. sjå på dømet over igjen. Rundt ordet "HTML" ser du at det står ein

<b>

-tagg.

<b>

-taggen gjer at teksten inni den blir feit, bokstaven b er valt grunna at det engelske ordet for feit skrift er bold. Du ser og at rundt ordet "kode" i dømet, er det ein

<i>

-tagg. Bokstaven i er her valt fordi det engelske ordet for kursiv skrift, er italic.

For dei taggane som ikkje har nokon avslutningstagg, bør du avslutte taggen ved å legge til ein skråstrek på slutten. Ta t.d. enkle linjeskift som eit godt døme (du skal lære meir om dette seinare);

Etter denne setningen kjem det eit linjeskift.<br />Dette er ei ny linje.

Me kan først ta ein kikk på det generelle oppsettet på ei webside.

<html>
  <head>
    <title>Mi side</title>
  </head>
  <body>
    <h1>Mi side</h1>
    <p>
      Dette er tekst på mi side.
    </p>
  </body>
</html>

Dette vert kanskje litt mykje på ein gong, men eg skal prøve å forklare det bit for bit. Eg har gjeve HTML-nøkkelorda feit skrift, slik at du lettare skal sjå dei, samt at alt som er HTML-taggar er i blått. Dette er det me kallar fargekoding (eller syntax highlighting, som det nok heiter i redigeringsprogrammet du nyttar).

Nøkkelordet

html

angjer at her byrjar HTML-dokumentet. Som du ser vert ikkje dette avslutta igjen før heilt siste linja, noko som er logisk. Nøkkelordet

head

er ei forkorting for header, og alt som er innanfor start- og slutt-taggen her angjer informasjon om sida.

title

spesifiserer tittelen på sida, det som kjem opp som overskrift på i nettlesaren din. Alt imellom

<title>

og

</title>

-taggen vert vist der. Tittelen på sida i dette dømet vil vere "Mi side".

No kjem me til den viktigaste delen av heile koden; nemlig

<body>

-taggen. Alt som står inne i

<body>

-taggen, er sjølve innhaldet på sida; overskriftene, teksten, hyperlinkane, bildene, tabellane og formatteringa. Ideelt sett skal ein kunne lese innhaldet i denne body-taggen i utan problem, og så lenge HTML-koden er skriven i ein rein teksteditor er dette lett mogleg. Enkelte WYSIWYG-editorar, som t.d. FrontPage, gjer ofte denne koden vanskelig å lese.

For å få ei klar oppdeling av teksten din, er HTML litt annleis oppbygd enn vanlege tekstfiler. T.d. vil ting som linjeskift verte ignorert, det er eigne taggar for få linjeskift og skifte av avsnitt. Det same gjeld doble mellomrom, uansett kor mange mellomrom du har mellom to ord, vil berre eit av desse mellomromma verte vist i nettlesaren din. Korleis du kan komme deg rundt dette problemet skal me ta opp seinare.

Først og fremst nyttar me

<p>

-taggen for å avgrense avsnitt. p'en i taggen kjem frå engelsk paragraph, eller avsnitt på norsk. Dvs. at eit avsnitt skal alltid settast inn i

<p>

-taggar. Om me nyttar eit utdrag av dømet på forrige side, kan me analysere det litt meir.

  <body>
    <h1>Mi side</h1>
    <p>
      Dette er tekst på mi side.
    </p>
  </body>

Her ser du at "Dette er tekst på mi side", står imellom ein

<p>

- og ein

</p>

-tagg. Dette indikerer at alt som står imellom desse to, er tekst som høyrer til det avsnittet.

Om du ser litt lenger oppe, har du overskriftstaggen

<h1>

. Denne indikerer at det er snakk om ei overskrift, av storleik 1. Overskrifter rangerer frå 1 til 6, der 1 er størst og 6 er minst. h i taggen står for header, som er engelsk for overskrift. Det er viktig å merka seg at ein overskriftstagg ikkje skal stå inne i eit avsnitt, men som ei sjølvstendig eining i

<body>

-taggen.

Som ein generell regel skal all tekst du skriv på ei side, unnteke overskrifter, stå i avsnitt. Det finns mange unntak av denne regelen, men venn deg til å dele opp dokumenta dine skikkelig. Me kjem attende til desse unntaka seinare.

Dei fleste taggar i HTML kan ha såkalla attributtar, som endrar utsjånaden eller plasseringa til teksten inne i dei. Nokre slike attributtar er påkrevde, andre er valgfrie. Ein attributt vert plassert i åpningstaggen, og gjeld heilt fram til den gitte taggen vert avslutta. Det klassiske dømet på attributtar, er ved bruk i avsnitt.

<p>
  Denne teksten blir midtstilt.
</p>

Om du skriv teksten over i ei HTML-side, vil heile avsnittet verte midtstilt i staden for venstrejustert, som det blir i ein vanleg avsnittstagg. Ein kan og skrive

align="right"

for å få høgrejustering av teksten.

I dømet over vil nøkkelordet

align

vere namnet på attributten, medan

"center"

er verdien. Om du skal skrive tekst i verdien til ein attributt, er du nødt til å bruke hermeteikn rundt verdien, slik som i dømet over. Dersom du berre sett verdien til eit tal, slepp du desse hermeteikna. Me kjem til å spesifisere dette meir nøye seinare.

På neste side skal me ta for oss dei ulike taggane ein om gangen, med spesielle attributtar som du bør legge merke til for kvar tagg.

Det er eit standard oppsett for korleis ei HTML-side skal vere oppbygd. Først og fremst skal alle HTML-dokument byrje med ein

<html>

-tagg, og verte avslutta med ein

</html>

-tagg. Denne taggen gjer det enkelt for ein nettlesar å sjå at det faktisk er snakk om eit HTML-dokument.

Hovudsakleg er ei HTML-side delt inn i ein informasjonsdel og ein tekstdel. Informasjonsdelen finn du i

<head>

-taggen.

head

er kort for header, og informasjonen du finn her er det me kallar metainformasjon om dokumentet. Det vanlegaste, og kanskje viktigaste elementet her er

<title>

, som angjer tittelen som vil verte vist som overskrifta på nettlesarvindauget. Her sett ein og ofte inn

<meta>

-taggar, som oppgjer annan informasjon om kva dokumentet inneheld, noko som me skal komme attende til seinare.

Tekstdelen er den delen me har konsentrert oss om no, og du finn den i

<body>

-taggen. Dette er sjølve kroppen av sida, det som du skriv her vil verte vist som innhald på sida.

Ein kan og legge inn kommentarar som ikkje vil verte viste i ein nettlesar, kvar ein vil i koden. Kommentarar er på ein måte sjølvlukkande, og vert ikkje brukt spesielt ofte i HTML, men det er likevel kjekt å vete kva det er for noko skulle du komme over det. Me nyttar det t.d. ein gong i denne guiden.

Ein kommentar byrjar med

<!--

og vert avslutta med

-->

. Alt imellom dette vil verte tolka som ein kommentar, og kan gjerne spenne over fleire linjer. Ein legg inn kommentarar om ein ønskjer å minne seg sjølv på kvifor ein gjorde noko, t.d. om noko i ein tabell er uklart.

Sjølv om kommentarar ikkje vert vist i nettlesaren, er det fullt mogleg for ein som opnar nettsida di, å lese kva som står der. Du bør difor aldri skrive sensitiv informasjon i kommentarar.

Avsnittstaggen

<p>

er nok ein av dei mest brukte taggane i HTML som språk. Den skal stort sett nyttast rundt all tekst som ikkje er i tabellar eller overskrifter (som me kjem attende til seinare) eller overskrifter. Avsnittstaggen har ein

align

-attributt som me nemnte tidlegare, som kan verte satt til

"left"

,

"center"

eller

"right"

.

For å få linjeskift i HTML, er det som sagt ikkje nok å lage eit linjeskift i HTML-fila. Du må då benytte

<br>

-taggen. Namnet på taggen er ein forkortelse for break, og det er ein av dei få taggane som ikkje har ein korresponderande avslutningstagg. Om du følgjer XHTML-standarden, som er ei vidareutvikling av HTML, må du skrive denne taggen som

<br />

, for å indikere at den avsluttar seg sjølv. Dette er for øvrig ikkje gyldig HTML, og du bø ikkje benytte denne metoden om du ikkje skrive XHTML-sider. Eigentleg bør du bruke linjeskift minst mogleg, og bruke avsnitt i staden. Linjeskift er svært greie når du t.d. skal legge inn ein kodesnutt over fleire linjer. Den einaste plassen me har brukt enkle linjeskift i denne artikkelen, er i kodedøma.

Overskrifter får du ved å bruke

<h1>

til

<h6>

, der 1 er størst. Det er berre å eksperimentere med storleikane, og du vil ofte oppleve at nokre av overskriftene faktisk vert mindre enn resten av teksten på sida. Det er difor ofte vanleg å berre nytte ein eller to storleikar på overskrifter på ei side, t.d. hovudoverskrift og underoverskrift. Dette gjer ofte svært god flyt på sidene, og gjer dei mindre anstrengande å lese.

Om du vil ha ei såkalla horisontal linje, nyttar du

<hr>

-taggen.

hr

er ei forkorting for horisontal ruler, og vert oftast nytta på sider som ikkje inneheld mykje design.

Når du no har sett på tekstflyt, er det naturleg å sjå på måtar ein kan påvirke sjølve teksten. Feit og kursiv tekst er viktig; og endring av skrifttype og storleik er andre ting me skal ta for oss.

Endring av skrifttypen gjer me med

<font>

-taggen. Den har ein attributt som heiter

face

; og den tar som parameter ei kommaseparert prioritert liste med skrifttypar. Forvirrande? Eigentleg ikkje. Me tar eit døme for å vise bruken.

<p>
  <font face="Courier New, Courier, mono">Dette er med ein annan skrifttype.</font>
</p>

No har du heilt sikkert ein del spørsmål med kvifor eg valgte denne lista med skrifttypar, der du sikkert ikkje har høyrt om minst 2 av dei. Courier New er ein skrifttype i Windows, Courier er den tilsvarande skrifttypen i Linux, og mono er det generelle namnet på denne typen skrifttypar (skrifttypar der alle bokstavane tar like stor plass). Desse skrifttypane er ikkje heilt like, men å ha ei heil slik liste med ting sikrar at alle som vil sjå sida di, kan sjå den på ein tilfredsstillande måte. At lista er kommaseparert, betyr berre at dei ulike skriftnamna er skilte med eit komma (og eventuelt eit mellomrom, som i dømet). At lista er prioritert, betyr at skrifttypen du skriv først i lista, vil vere den som vert prøvd først. Det er vanleg å avslutte lista med ein generell skrifttype, slik at sjølv om nokon med eit operativsystem du aldri har høyrt om, framleis kan sjå sida di nokonlunde slik du hadde tenkt deg det.

Legg merke til at eg nyttar

<font>

inne i eit avsnitt. Det må ein gjere, men skriftendringa treng ikkje naudsynt spenne over heile avsnittet, som i dømet over. Ein kan gjere slik at berre litt av teksten i eit avsnitt får endra skrifttype, og ein kan nytte fleire

<font>

-taggar i eit avsnitt. Kunsten er å eksperimentere.

Det finns fleire måtar å endre skriftstorleiken på. Du kan gjere det ved hjelp av

size

-attributten til

<font>

-taggen, eller du kan benytte spesielle taggar. Dersom du allereie nyttar ein

<font>

-tagg for å angje skrifttypen eller fargen, er det enklast å nytte

size

-attributten. Denne kan ta argumentet sitt på fleire ulike måtar; som ein skriftstorleik, som er det vanlege i dei fleste operativsystem, visningsstorleik i pikslar, eller relativ storleik i forhold til resten av sida.

Vanlege skriftstorleikar har eining

pt

, som er ei forkorting for points. Du kan oppgje det i pikslar,

px

, noko som ikkje er mykje brukt i HTML. Den mest interessante er derimot relativ storleik, der du hoppar eit gitt antall skriftstorleikar opp eller ned frå det som er vanleg, ved å oppgje ein positiv eller negativ talverdi; t.d.

+2

. Legg merke til at du kan kombinere ein relativ verdi med ei eining (

px

eller

pt

); eller du kan la vere. Derimot vert ei relativ eining (utan noko suffiks) ikkje oppfatta som nokre av delane, men derimot etter ein eigen tabell; om normal skriftstorleik er t.d. 10pt, og du gjer noko skrift storleiken +2, vil den effektive skriftstorleiken vere 14pt.

Den andre måten å gjere det på, er ved å nytte

<small>

- og

<big>

-taggane. Desse gjer det same som å sette

<font
size="-1">

og

<font size="+1">

, og du kan bruke ein tagg fleire gangar på samme teksten, for å gjere teksten fleire hakk mindre.

<font>

-taggen har ein til svært interessant attributt;

color

.

color

angjer ganske naturleg skriftfargen, og her har du eit utval av 16 777 216 ulike fargar. Fargane kan du enten spesifisere ved hjelp av namnet på fargen; blant dei gjenkjente fargenamna er

blue

,

red, yellow

og

green

. Derimot lagar du dine eigne fargar ved å bruke den såkalla RGB-modellen, som krever at du huskar litt grunnleggjande fargelære frå barneskulen. Det krev òg litt kjennskap til det heksadesimale talsystemet (16-talssystemet), som kort oppsummert har tal frå 0-F (0-9 + A-F). I HTML oppgjer me nemleg fargekodar i ved å setje heksadesimale verdiar av fargekomponentane raud, grøn og blå i saman.

Fargekoden

#FF0000

angjer det same som

red

, dvs. ein heilt raud farge;

#00FF00

angjer heilt klar grøn og

#0000FF

angjer heilt klar blå. Dette betyr at dei to første tala angjer kor mykje raudfarge me skal ha med, det tredje og fjerde talet angjer kor mykje grønt som skal vere med, og dei to siste representer mengda blåfarge. Dei fleste tekstredigerar som er berekna på bruk saman med HTML har eit verktøy som lar deg lage slike fargekodar utifrå eit vanleg fargevelgjingskart.

For å få ei blåfarga skrift, kan du då nytte følgjande kode;

<p>Noko av teksten er <font color="#0000FF">blå</font>.</p>

Då kjem me over på feit og kursiv tekst, og dette er ganske enkle prinsipp. To enkle taggar, som me og har nemnt tidlegare, vert brukt til dette;

<b>

og

<i>

. Sidan me har nytta desse som døme tidlegare, er det berre småting å nemne. Ein kan nytta dei samtidig, men ein må då passe på å strukturere dei skikkelig.

Dette er <b><i>feit og kursiv</i></b> tekst.

Måten nemnt over er korrekt måte å gjere det på. Følgjande måtar er feil;

Dette er <i><b>feit og kursiv</i></b> tekst.
Dette er <b><i>feit og kursiv</b></i> tekst.

Kvifor er dette feil? Sjå på rekkefølgjen i første linja; her vert kursiv-taggen starta først, deretter den feite taggen. Då skal

<b>

òg avsluttast først. I den andre linja vert

<b>

starta først, og den skal difor avsluttast sist.

Ein annan ting verdt å merke seg dersom du skal drive med XHTML i staden for vanleg HTML; er at desse to taggane ikkje finns i XHTML. Der nyttar ein

<em>

og

<strong>

i staden for; em står for emphasis.

<em>

gjer normalt teksten kursiv,

<strong>

gjer den feit. Bruken av desse skal me ta opp i ein seinare CSS-guide, sidan dei er berekna for bruk i lag med CSS.

Grunnen til at eg ikkje har vist korleis ein lagar understreka tekst her, er at understreka tekst vert av svært mange (inkludert meg) rekna for å vere direkte stygt. Om du har ekstreme behov for å benytte understreka tekst, så får du lære det ein annan plass.

Det finns mange fleire formatteringstaggar. T.d. kan du ta ein kikk på

<code>

, som me har brukt svært mykje i denne guiden. Andre er

<cite>

(sitat),

<del>

(sletta tekst),

<dfn>

(definisjon) og

<ins>

(innsatt tekst).

Dersom du har ein preformatert tekst (t.d. ei rein tekstfil) som du ønskjer å setje inn i dokumentet, kan du gjere det ved hjelp av

<pre>

. All tekst inne i

<pre>

-taggen vert vist direkte, med linjeskift og det heile, i ein skrifttype som har lik storleik på bokstavane. Dette er svært nyttig om du ikkje orkar å formatere fila til HTML. Merk at det ikkje er mogleg å nytte HTML-kodar i eit

<pre>

-felt. T.d. vil koden

<pre>Denne teksten blir vist akkurat som den står her.<br>
Eg kan sette inn så mange     mellomrom som eg vil,
og dei vil verte vist direkte. Til og med
<b>linjeskifta</b> er med.</pre>

verte vist slik;

Denne teksten blir vist akkurat som den står her.<br>
Eg kan sette inn så mange     mellomrom som eg vil,
og dei vil verte vist direkte. Til og med
<b>linjeskifta</b> er med.

Du kan sjølvsagt skrive normale matematiske ting som opphøgd i og nedsenka i direkte i HTML. Til dette nyttar du henhaldsvis taggane

<sup>

og

<sub>

. Det er ingen spesielle hemmeligheitar med desse. Skal du representere meir avanserte matematiske formlar, bør du bruke bilete, eller t.d. nytte eit språk om TeX som kan konvertere vitenskaplege dokument til HTML.

Hyperlenker, eller kort og godt lenker, er det som skiller hypertekst frå vanleg tekst. Ei lenke tar deg til ein annan plass, det vere eit anna dokument på din eigen server, eller på ein server på andre sida i verda, eller kankje berre til ein annan plass i same HTML-side? Lenker er svært kraftige på mange måtar, du kan velgje å åpne lenka i same vindauge som du trykker på den i, eller du kan åpne den i nye vindauge.

Hyperlenker lagar du med

<a>

-taggen. Denne må òg ha minst ein parameter; nemlig

href

.

href

er ei forkorting for hyper reference, og angjer kvar ein vil at linken skal føre hen. Dette kan vere ein relativ eller ein absolutt sti. Ein absolutt sti vert som oftast nytta når det skal leie til ein dokument på ein annan server, og det vil sjå noko slikt ut;

<p>
  Dette er <a href="http://www.sourcecode.no/">ei lenke</a> til Sourcecode.no.
</p>

Vist i weblesaren vil dette verte noko slik som dette;

Dette er ei lenke til Sourcecode.no.

Viktig å merke seg med dømet over, er at

http://

er påkrevd for at sida skal vente som forventa. Den delen angjer kva protokoll som skal nyttast av nettlesaren når den henter sida, og om du kuttar den delen, vil nettlesaren tru at du prøver å få tak i ei lokal fil. Blant andre ofte brukte protokollar finn du og FTP; som primært vert brukt til overføring av filer. FTP får addresser på forma

ftp://www.sourcecode.no/katalog/fil.endelse

.

Ein relativ sti peikar til ei fil som ligg på samme webserveren som det gjeldande dokumentet, og er som regel kortare enn den absolutte stien til fila; t.d. om to filer ligg i samme mappe, vil den relative stien berre verte filnamnet på fila. Måten å skrive relative stiar på, følgjer konvensjoane ein finn i Linux. Desse er relativt like dei som ein finn i Windows, bortsett frå at ein må bruke skråstrekar andre vegen.

Om ein ønskjer å åpne ei lenke i eit anna vindauge, nyttar ein

target

-attributten. Normalt vil lenkar på ei webside åpne i det same vindauget, men ved å setje

target="_new"

, vil kvar lenke åpne i sitt eige vindauge.

_new

spesifiserer at lenka skal åpnast i eit nytt vindauge uansett, men ein kan bytte dette ut, og gje det nye vindauget namn. Om nokon då klikkar på andre lenker med same

target

-verdi, vil denne linken åpne i det allereie eksisterande vindauget.

Ein kan òg linke direkte til såkalla bokmerker i ei fil, ved leggje til

#bokmerkenamn

på lenkja til sida. Om ein vil linke til eit bokmerke i same fila, lar ein berre

href

peike til

#bokmerkenavn

. Ein lagar bokmerker ved hjelp av

<a>

-taggen, men den blir nytta på ein annan måte enn tidlegare.

Ein kan velgje om bokmerket skal vere eit tekstutdrag, eller om det berre skal vere eit spesifikt punkt i fila;

<a />Bokmerke før teksten
<a>Dette er eit bokmerke</a>

Om du legg inn det over i eit webdokument, kan du altså linke til

#bokmerke1

og

#bokmerke2

, og verte tatt direkte til dei to punkta i teksten. Bruk av bokmerker gjer seg best i lengre dokument, men kan og med fordel brukast for å forenkle navigeringa i eit indeksert dokument.

Bruk av bilete på ei webside kan ofte løfte websida til nye nivå, spesielt om dei vert nytta riktig. Derimot kan dei og gjere ei webside svært tung å laste, så det er ofte lurt å ta seg tid med å gjere om bileta til eit passande format. Bilettaggar skal normalt stå inne i avsnittstaggar.

Det er hovudsakleg tre bildeformat som vert nytta på websider; GIF, JPEG og PNG. Dei har kvar sine bruksområder, generelt kan ein sei at ein nyttar JPEG på fotografi, og PNG eller GIF på bileter som har store einsfarga områder. Dette grunna at dei har ulike komprimeringsalgoritmar, som gjer at GIF- og PNG-bilete er svært gode på å pakke ned store einsfarga områder, medan JPEG er bra når ein har bileter med svært ulike områder. Du bør nytte eit bildebehandlingsprogram som Paint Shop Pro eller PhotoShop i Windows, og GIMP i Linux.

Storleiken på bildefilene er òg viktig. Det er svært dårlig praksis å endre storleiken på bilete ved hjelp av HTML, og sjølv om det er mogleg, bør du ikkje gjere det. Bestem deg for storleiken på førehand, og lagre biletet i rett storleik. Dersom du ønskjer å ha ein liten versjon av biletet på sida, og når ein klikker på den, vert det vist ein større versjon, lagar du rett og slett to ulike versjonar av biletet.

Ein viser bilete med

<img>

-taggen. Som med lenker, må denne ha minst ein attributt for å gjere noko, men den bør helst ha to. Først og fremst er det

src

(source) som er viktig; denne angjer kvar bildefila ligg. Du kan her og bruke absolutte og relative stiar som med hyperlenker.

Den andre viktige attributten er

alt

(alternative text), som angjer ein tekst som skal visast om biletet ikkje kunne verte vist. Denne er viktig fordi det er svært mange synshemma personar som får lest opp innhaldet av websider til seg, og å ha ein beskrivande alternativ biletetekst er difor svært viktig for mange. Du treng ikkje overdrive, t.d. kan du fint hoppe over denne teksten for bilete som er der for designet sin del, men bileter som har noko med teksten å gjere, bør du gje ein verdi for denne attributten.

<img src="bilde.gif" alt="Meg på ferie">

Som du ser, er

<img>

ein av dei få taggane som ikkje har ein eigen avslutningstag, og difor kan du avslutte den første taggen med ein skråstrek i staden, dersom du planlegg å skrive XHTML seinare.

<img>

har som

<p>

ein

align

-attributt, men den virkar ikkje som dei fleste forventar at den gjer.

align

tar same verdiar som den gjer når det gjeld avsnitt, men legg merke til at bileta ikkje endrar tekstflyten. Eit bilete som er venstrestilt, får ikkje teksta rundt til å formast om biletet på høgresida; tekst som står før og etter biletet, kjem før og etter biletet. Merk og at dei to følgjande linjene vil gje same resultat;

<img src="bilde.gif" alt="Meg på ferie">
<p><img src="bilde.gif" alt="Meg på ferie"></p>

Difor skal eg vise dykk eit lite triks, for å få biletet til å vere meir integrert med teksten. Dette er eigentleg CSS, men det er ikkje spesielt vanskelig likevel. Du legg til ein attributt

style

med verdien

float: right;

dersom du vil at biletet skal vere høgrestilt, og

float: left;

om du vil at det skal vere venstrestilt. Det er ikkje mogleg å senterstille biletet på denne måten. Legg merke til semikolonet på slutten. Som ein komplett kode;

<img src="bilde.gif" alt="Meg på ferie">

Du kan som sagt endre storleiken av bilete ved hjelp av HTML. Det er derimot ikkje anbefalt å endre storleiken, men du bør likevel spesifisere dei. Det gjer du ved hjelp av

width

- og

height

-attributtane.

<img src="bilde.gif" alt="Meg på ferie" height="480px">

Her ser du at eg har spesifisert ei eining når eg oppgav dimensjonane. Det er ikkje naudsynt, men ofte god praksis likevel. For bilete kan du oppgje eininga i pikslar (

px

) eller prosent (

%

). Prosent er relativ i høve til biletets dimensjonar når me snakkar om bilete, noko som er annleis enn når det gjeld tabellar, som me skal snakke om seinare.

Du kan gjere bilete til hyperlenker, om du vil. Det gjer du ganske enkelt ved å plassere ein biletetagg inne i ein

<a>

-tagg. I mange nettlesarar (t.d. Internet Explorer) får då biletet ei ramme rundt; denne kan du verte kvitt ved å setje

border

-attributten til biletet til

.

<a href="http://www.sourcecode.no"><img src="bilde.gif" alt="Sourcecode.no" border=0></a>

Lister er svært enkelt å få til i HTML. Me skiljer mellom nummererte og unummererte (punkt-) lister; og sjølv om dei har ulike taggar, er bruken stort sett lik. Den mest vanlege er den unummererte

<ul>

-lista. For kvart punkt på lista, må ein nytte

<li>

rundt kvart punkt. Eit enkelt døme følgjer;

<ul>
  <li>Først og fremst...</li>
  <li>For det andre...</li>
  <li>For det tredje...</li>
</ul>

Dette enkle dømet gjer oss ei unummerert liste med 3 underpunkt;

• Først og fremst...
• For det andre...
• For det tredje...

For å lage ei nummerert liste, byttar me ganske enkelt ut

<ul>

med

<ol>

(husk då sjølvsagt å bytte ut avsluttningstaggen òg).

Det finns og noko me kallar for definisjonslister. Desse er lite brukt, og om du ikkje har heilt spesielle behov, kan du hoppe rett til neste side. Ei definisjonsliste er ei liste som har eit underpunkt for kvart punkt. Dette er mogleg å få til med ei vanleg liste, ved å lage ei ny liste under eit punkt. Eksperimenter med det om du har lyst.

Ei definisjonsliste er avgrensa med

<dl>

-taggar (definition list). For kvart hovudpunkt du ønskjer, ein såkalla definisjonsterm, nyttar du ein

<dt>

-tagg (definition term). For kvart underpunkt eller definisjonsbeskrivelse nyttar du

<dd>

(definition description). Ei typisk slik liste kan sjå slik ut;

<dl>
  <dt>Ostekake</dt>
    <dd>Kake laget av ost.</dd>
  <dt>Karamellpudding</dt>
    <dd>Pudding med karamell i.</dd>
    <dd>Ofte brunaktig.</dd>
</dl>

Dette vert vist slik i ein nettlesar:

Ostekake Kake laget av ost. Karamellpudding Pudding med karamell i. Ofte brunaktig.

Legg merke til at siste definisjonentermen har to beskrivelsar.

Tabellar er ein svært effektiv måte å presentere visse typar informasjon på. Mange har òg funne ein annan bruk av tabellar; nemlig design. Det er store diskusjonar om dette verkeleg er ein god måte å gjere det på; personleg heller eg mot at ein ikkje bør gjere det, og i staden bruke CSS til å utforme sida. Dette har ikkje du lært noko om enno, og me skal difor ikkje diskutere det nærare i denne guiden. Sourcecode.no er designa hovudsakleg med bruk av tabellar.

Ein tabell består av eit sett med taggar, hovudsakleg

<table>

,

<tr>

,

<td>

og

<th>

.

<table>

avgrensar heile tabellen.

<tr>

avgrensar ei rad i tabellen, medan

<td>

avgrensar ei celle.

<th>

brukast akkurat som ei celle, men angjer ei overskrift. Følgjande kodesnutt gjer ein 3 raders, 2 kolonners tabell;

<table>
  <tr>
    <th>Rett</th>
    <th>Viktigste ingrediens</th>
  </tr>
  <tr>
    <td>Ostekake</td>
    <td>Ost</td>
  </tr>
  <tr>
    <td>Karamellpudding</td>
    <td>Karamell</td>
  </tr>
</table>

Dette vil verte vist som følgjande i ein nettlesar;

Legg merke til at måten tabellen er vist på her, vil vere påvirke av CSSen som me nyttar på desse sidene. Kopier teksten over inn i ditt eige HTML-dokument, og sjå korleis det vil verte vist i din nettlesar. Normalt er rekkeoverskrifter midtstilte (som dei faktisk er i dømet over) og med feit skrift, og tekst i celler er venstrejustert. Dei fleste nettlesarar viser og ei ramme rundt tabellen, som sagt bør du bruke denne koden i ditt eige HTML-dokument for å sjå korleis det vert.

<table>

har ein attributt

border

som angjer breidda på kanten mellom cellene, normalt er denne 1 piksel.

cell-spacing

og

cell-padding

er to andre ofte bruke attributtar her. Om du setter alle desse tre attributtane til 0 pikslar, vil ein ikkje kunne sjå skøytane imellom cellene, og cellene vil stå heilt inntil kvarandre.

Du kan endre bakgrunnsfargen på ein heil tabell, ei heil rad eller ei enkel celle ved å bruke

bgcolor

på den respektive taggen. Fargekodar vert oppgjeve på same måte som for tekstformatering.

Du kan oppgje breidde på kva som helst av tabell-taggane, både i prosent av sidebreidda (når det gjeld

<table>

-taggen) eller tabellbreidda (når det gjeld

<td>

og

<th>

), og i antall pikslar. Dette gjer du ved hjelp av

width

-attributten. Du kan og setje høgda av dei du vil, men husk at det er meiningslaust å setje høgda til

<table>

i prosent. Derimot kan du setje høgda av ei gitt rad i prosent av tabellhøgda. Det vil og vere meiningslaust å setje ulik høgde på ulike celler på samme rad.

Dersom du vil, kan du utelate dei siste cellene på ei rad, dersom du skal utelate celler midt inne i ei rad, er du nødt til å lage cellene som skal vere imellom, men la dei stå tomme;

...
<tr>
  <td>Celle 1</td>
  <td />
  <td>Celle 3</td>
</tr>
...

No kjem me til "halde tunga rett i munnen"-delen av tabellar, og det er her mange kjem til å dette av. Følgjande fenomen er du nødt til å studere nøye før du kan seie at du har mestra det, og det kan ofte vere vanskelig å skjønne strukturen på slike tabellar. Det me skal borti, er celler som spenner over fleire kolonner og/eller rader, det ein vil kalle samanslåing av celler i ein vanleg tekstredigerar.

I HTML vert slik "samanslåing" av celler gjort ved hjelp av to attributtar til

<td>

eller

<th>

, nemlig

colspan

og

rowspan

. Verdiane til desse angjer henhaldsvis kor mange kolonner eller rekker cella skal spenne over. Å setje desse til 1 har ingen effekt, det er den vanlege verdien. Dømet under vil gje deg eit kjapt inntrykk av korleis dette fungerer;

<table>
  <tr>
    <td colspan=2>A</td>
    <td rowspan=2>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <!-- Ei celle kjem her frå forrige rad-->
    <td>F</td>
  </tr>
</table>

Dette vil verte ein tabell på 4 kolonnar og 2 rekker, der første cella i første rad vil spenne over 2 kolonner, og tredje cella i første rad vil og spenne over neste rad. Det er ei vanleg kolonne heilt til slutt i tabellen. Der det står ein kommentar, er der ein ville satt inn ei ny celle dersom ein fjerna

rowspan=2

frå rekkja over. Slik vil dette sjå ut i ein nettlesar;

Sett deg ned og funder over kvifor dette vert vist slik. Fundèr på det, heilt til du har skjønt det. Prøv så å lage liknande konstruksjonar, gjerne over fleire rader.

Du kan sette bakgrunnsfargar på alle tabell-elementa, ved hjelp av attributten

bgcolor

, og fargekodane du lærte tidlegare. Dette gjeld både

<table>

,

<tr>

,

<td>

,

<th>

og sjølve

<body>

-taggen til HTML-dokumentet. På denne måten kan du gjere slik at heile websida har ein bakgrunnsfarge, mens du sett ein annan bakgrunnsfarge på tabellane.

Om du har tenkt deg litt om når du har lest igjennom denne guiden, vil du nok ha lagt merke til ein ting; kva gjer du om du vil ha eit mindre enn-teikn i teksten. Svaret er enkelt. Det er mange teikn som i HTML skal erstattast med ein form for kode; blant dei er mindre enn (<), større enn (>), et (&), æ, ø og å.

Grunnen til at æ, ø og å er slike teikn, er at ikkje alle datamaskiner i verda nyttar same ASCII-tabellen som me gjer, og desse teikna finns ikkje i desse tabellane, og ville difor verte vist feil på maskiner frå andre delar av verda. Dette kan forklarast på same måte som når du går inn på ei japansk nettside, og berre ser små firkantar istaden for skrift.

For å skrive ut desse teikna, nyttar me som sagt ein form for kode; den byrjar med ein ampersand (&) og vert avslutta med eit semikolon (;). Imellom desse skal det stå ei forkorting, som seier kva teikn det er snakk om. T.d. skriv me

&lt;

(less than) for å få mindre enn-teiknet, og

&gt;

(greater than) for å få større enn-teiknet. For å få vist ein ampersand?

&amp;

er koden for det. Dette er lettare framstilt i ein tabell;

Legg merke til at i tabellen så er det forskjell på store og små bokstavar. Det finns sjølvsagt òg andre ting ein kan få bruk for, men det er enormt mange slike teikn.

&nbsp;

er ein som er ofte brukt. Bruker du denne imellom eit to ord, i staden for eit vanleg mellomrom, kan du vere sikker på at nettlesaren ikkje vil bryte dette ordet over to linjer. Den er og nyttig for å få fleire mellomrom mellom ord; t.d. vil du kunne sjå at me har brukt denne mykje for å indentere kodedøma våre på tidlegare sider.

Som du kanskje har lagt merke til, har eg t.d. heile tida nytta hermeteikn rundt alle attributtverdiar. Om du har eksperimentert litt, har du nok òg sett at det ikkje alltid er nødvendig. Kvifor gjer eg det heile tida då? Vel, det har med standardar å gjere. Dersom du følgjer standardane, vil du sørge for at sida di vert korrekt vist i alle nettlesarar, ikkje berre i Internet Explorer.

Ein bør nemlig skrive websider som skal virke i alle nettlesarar, slik at du kan få flest mogleg besøkande. Difor er det ofte lurt å teste sidene sine i dei mest brukte nettlesarane; ein god start er Internet Explorer, Netscape, Mozilla og Opera. Netscape og Mozilla viser dei fleste sider likt, så du treng ikkje alltid sjekke begge. Dersom du sitt i Linux, bør du kanskje prøve å bruke links eller lynx til å sjekke om sidene blir vist greit i nettlesarar som ikkje støtter bilete.

Til slutt bør du validere nettsidene dine. World Wide Web Consortium, som lagar standardane som dei fleste nettlesarane følgjer, har eit nettbasert program for å gjere dette. Når du gjer dette programmet addressa til HTML-sida di, vil programmet gå igjennom og leite etter feil. Desse feila er kanskje ikkje sjølvinnlysande; t.d. kan du ha gløymt å lukke ein tagg, noko som ofte ikkje vil visast i ein nettlesar.

Du bør og sjå litt på om koden din er lett å lese t.d. i Notepad. Koden din bør vere såpass lettleselig at dette ikkje er noko problem. T.d. har eg valt å sette omtrent alle nye taggar på ei ny linje, med eit gitt antall fleire mellomrom foran enn taggen før hadde. Når du lukkar ein tagg, går du tilbake like mange mellomrom. Dette er vanskeleg å forklare, men eg trur det skal vere klart frå døma tidlegare kva eg meiner. Legg merke til at nokre taggar ikkje vert sett på si eiga linje, dette inkluderer taggar som avsluttar seg sjølve (

<br />

og

<img />

), samt tekstformatteringstaggar som

<b>

og

<i>

. Dette er ein prosess som kallas indentering, eit ord som eg har oversatt fritt frå engelsk. Korleis du velgjer å indentere koden din, er eit spørsmål om personleg preferanse.

Det som er så kjekt når ein held på å lære seg HTML, er at ein kan sjå på korleis andre har gjort det på sine heimesider. Ved å velgje Vis, Kjelde i Internett Explorer, eller tilsvarande i andre nettlesarar, vil ein få sjå HTML-koden som ligg bak nettsida. Sjølv om mange nettsider i dag er basert på meir avanserte ting enn vanleg HTML, kan du lære mykje frå å sjå på andre sine sider, men ver varsam; det er ikkje alle nettsider som er spesielt bra eller fint koda.

W3C definerer nokre taggar som ikkje er fullt ut støtta av alle nettlesarar, eller som har dårleg implementasjon i nokre nettlesarar. Difor har me valt å plassere dei på slutten av denne guiden.

Først ut er

<acronym>

-taggen, som er svært nyttig når ein skal skrive akronym, dvs. forkortelsar som berre består av forbokstavane i t.d. eit firmanamn. Me har nytta denne taggen kvar gong me har introdusert nye akronym i denne guiden, og om du les dette i Internet Explorer, har du nesten garantert ikkje lagt merke til dette. Dersom du har lest denne sida i Opera, vil du sjå at først gong eit slikt akronym er brukt, vil det vere understreka, og om du held musa over det, vil du få opp kva det står for. I nokre weblesarar, som i IE, er ikkje denne understrekinga i bruk, men teksten virkar likevel. Du oppgjer

title

-attributten til

<acronym>

-taggen for å seie kva forkortinga står for, medan du plasserer sjølve forkortinga imellom start- og slutt-taggen.

<acronym>W3C</acronym>

Det finns ein svært liknande slik tagg, som heiter

<abbr>

, som er ein forkortelse for abbreviation (no pun intended). Denne er derimot ikkje støtta i mellom anna IE, men brukast ellers på same måten som

<acronym>

.

XHTML er ei vidareutvikling av HTML, som legg meir vekt på at sjølve ikkje skal angje noko av utsjånaden, utanom å definere kva type tekst det er snakk om. XHTML er designa for å arbeide i lag med CSS, og manglar difor ting som

<font>

-taggen. I XHTML er det og svært nøye å avslutte alle taggar, huske på korrekt hierarki når det gjeld opning og lukking av taggar, samt å ikkje definere definitiv utsjånad i sjølve dokumentet.

Strukturmessig er HTML og XHTML svært like, men XHTML er eit mykje strengare språk. Dersom du har planar om å formattere store dokument, og håpar at heile dokumentet skal få ein godt gjennomført stil, så er XHTML og CSS vegen å gå. Som nemnt tidlegare skal det snart komme ein CSS-guide her, som skal gje deg meir informasjon om korleis ein syr saman CSS og (X)HTML.