Skrivarstuå > HTML >

Enkel innføring i HTML
ved Olve Utne

 

Dette er ei enkel innføring i HTML-koding for den som vil skrive sine eigne html-dokument frå botnen av. Ein kan bruke gratisprogram som Lær tekst / Teach Text / Enkel Tekst for Macintosh og Notepad / Word Pad for Windows. Det er sjølvsagt litt meir tungvint å skrive koden sjølv enn å bruke grafiske redigeringsprogram som Netscape Composer, Microsoft FrontPage, HoTMetaL og liknande, men:

Kvar skal filane plasserast?

Korleis ein lastar opp nettsidene sine til ein server kjem vi tilbake åt. Det som er viktig nå ein begynner å å laga nettsider er å ha full kontroll på korleis og kvar ein lagrar ting. Det første ein gjer når ein begynner å laga nettsider er å laga ei mappe på harddisken eller på ein diskett / ZIP-disk. I denne mappa skal ein berre legge filar som er ein del av nettstaden, og alle filane som skal vera ein del av nettstaden skal lagrast der. Etterkvart treng du kanskje fleire mapper, men desse skal vera inni hovudmappa! Dette er ekstremt viktig, ettersom rot i systemet her fører med seg at sidene ikkje vil virke som dei skal.

Kva skal filen heite?

Ein html-fil er ein heilt vanleg tekstfil. Det som er spesielt med filen er:

  1. Innhaldet er koda i kodespråket html.
  2. Filnamnet endar normalt på .html eller .htm.

Endinga .htm er tryggast å bruke om du arbeider med gamle datamaskiner, ettersom MS-DOS og Windows 3x ikkje les filnamn med meir enn tre teikn etter punktum.

Ein bør vera svært nøye med store og småe bokstavar. På serverar som kjører Linux/Unix/Macintosh osv. er filnamna Index.html og index.html ulike adressar, så om ein lagar ein link med småe bokstavar i staden for store eller omvendt, så vil ikkje serveren finne dokumentet. Dette er spesielt viktig å hugse på for den som brukar MS-DOS eller Windows, ettersom desse operativsystema ikkje skil skikkeleg mellom store og småe bokstavar, og ein til og med kan oppleva at filnamna blir endra av operativsystemet...!

Lineskift

Ein kan skrive heile html-dokumentet på éi line om ein vil — strukturen i dokumentet blir ikkje bestemt av lineskifta i tekstfilen, men av kva for taggar ein brukar — sjå nedanfor. Det er likevel best å skifte line på ein logisk måte, slik at det blir lettare å orientere seg for den som skriv eller redigerer html-koden.

Viktig ord: tag

Ein tag (blir uttala om lag som tægg) er ein kode for ein html-funksjon. Vi kjenner att taggen på at han er innramma av spisse klammer, slik som <dette>. Som hovudregel kjem taggane parvis — ein har ein starttag og ein sluttag. Sluttagen er enkelt sagt lik starttagen, bortsett frå at ein har / (ein skråstrek) etter den første spisse klamma:

<html> </html>

Nokre få unntak finst. Blant desse er koden for vassrett skiljeline:

<hr>

Ein bør helst innleie html-dokument med ein tag (enkelt-tag) som fortel kva dokumenttype det er og kva versjon av html ein brukar. Dei vanlege versjonane av html er 3.2 og 4.0, og koden kan vera meir eller mindre streng. Dette eksemplet fortel at dokumentet er eit html-dokument som inneheld html versjon 4.0 med «laus» (transitional) koding:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

Eit enkelt strukturert html-dokument skal deretter innehalde minimum desse kodane:

<html>
<head>
</head>
<body>
</body>
</html>

Taggen <html> og sluttaggen </html> rammar inn html-dokumentet; taggen <head> og sluttaggen </head> rammar inn ein seksjon med generell info om dokumentet; og taggen <body> og sluttaggen </body> rammar inn sjølve tekstdelen av dokumentet.

Innanfor området <head> bør ein ha tagen <title> </title>. Inni denne taggen skriv ein filnamnet ein vil skal visast på topplina over vindauget, slik:

<title>Eksempel 1</title>

For å få inn tekst i sjølve vindauget, må vi fylle inn området mellom <body> og </body>. Vi kan skrive vanleg tekst der utan å gjera noko anna, men da får vi ikkje noko anna formatering av dokumentet enn vi ville fått med å skrive på maskin...

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>Eksempel 1</title>
</head>
<body>
      Her kan vi fylle ut tekst i store mengder og skrive og skrive og skrive,
      men utan at det blir noko slags anna formatering av teksten enn vi ville
      endt opp med med ei vanleg skrivemaskin..........
</body>
</html>

Dette blir sjåande slik ut:
Eksempel 1

Strukturering av teksten i dokumentet

For å få struktur på dokumentet, med brødtekst (vanleg avsnittstekst) og overskrifter, brukar vi bestemte taggar:

Vi såg tidlegare at vi kan bruke koden <hr> for å setje inn vassrette skiljeliner i dokumentet. Ut frå det vi har lært av kodar til no, kan vi setje opp eit html-dokument med typografisk strukturert innhald:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>Eksempel 2</title>
</head>
<body>
<h1>  Viktigaste overskrift: kode h1
</h1>
<p>   Vi brukar koden p for avsnitt
      som skal innehalde vanleg tekst,
      og lineskifta vi gjer med enter-tasten i tekstfila
      spelar ingen rolle for korleis teksten blir broten
      (delt opp i liner) i nettlesaren.
</p>
<h2>  Ei mellomviktig overskrift: kode h2
</h2>
<p>   Når vi testar koden i nettlesaren,
      ser vi at koden h2 gir mindre skrift enn koden h1,
      og tilsvarande blir h3 mindre enn h2,
      h4 mindre enn h3, etc.
</p>
<hr>
<p>   Koden hr gav ein vassrett strek -
      og dermed eit tydeleg skilje i teksten.
</p>
</body>
</html>

Dette blir sjåande slik ut:
Eksempel 2

Linkar

Linkar blir òg kalla lenkjer eller peikarar. Når du trykkjer på ein link, lastar maskina inn det dokumentet som linken peikar til eller utfører den kommandoen som linken peikar til.

Ein link har vanlegvis denne strukturen:

<a href="dokument.htm">Synleg linktekst</a>

Vi ser at sluttagen berre er </a>. Når ei tag inneheld fleire element, tek vi berre med den delen av teksten som kjem føre mellomrommet. Ved linkar er dette berre bokstaven a.

Relative linkar

I eksemplet ovanfor såg vi eksempel på ein relativ link. Det vil seie at nettlesaren leitar på ein stad relatert til filen som linken finst i i staden for på ein absolutt (fast definert) nettadresse. Om ein relativ link inneheld berre filnamnet, slik som ovanfor, leitar nettlesaren etter dokumentet i same mappa som filen linken er i. For å leite i mappa «over», skriv vi ../ føre filnamnet;

<a href="../dokument.htm">Synleg linktekst</a>

For å leite i ei undermappe, skriv vi mappenamn/filnamn:

<a href="undermappe/dokument.htm">Synleg linktekst</a>

Når vi lagar link til ein annan nettstad, treng vi ein absolutt link. Da skriv vi inn den fullstendige nettadressen, inkludert http:// e.a.:

<a href="http://www.domene.com/dokument.htm">Synleg linktekst</a>

E-postlink

Ein spesialtype link er e-postlinken: adressen inneheld kommandoen mailto: og e-postadressen til mottakaren:

<a href="mailto:brukarnamn@domene.com">Mottakarnamn</a>

Eksempel på html-kode med ulike linktypar:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>Eksempel 3</title>
</head>
<body>
<h1>  Viktigaste overskrift: kode h1
</h1>
<p>   Vi brukar koden p for avsnitt
      som skal innehalde vanleg tekst,
      og lineskifta vi gjer med enter-tasten i tekstfila
      spelar ingen rolle for korleis teksten blir broten
      (delt opp i liner) i nettlesaren.
</p>
<h2>  Ei mellomviktig overskrift: kode h2
</h2>
<p>   Når vi testar koden i nettlesaren,
      ser vi at koden h2 gir mindre skrift enn koden h1,
      og tilsvarande blir h3 mindre enn h2,
      h4 mindre enn h3, etc.
</p>
<hr>
<p>   Koden hr gav ein vassrett strek -
      og dermed eit tydeleg skilje i teksten.
</p>
<p>   Her er nokre linkeksempel:
      <a href="dokument.htm">Relativ link</a>,
      <a href="http://domene.org/dokument.htm">Absolutt link</a> og
      <a href="mailto:namn@domene.org">Epostlink</a>.
</p>
</body>
</html>

Dette blir sjåande slik ut:
Eksempel 3

Med dei taggane som er viste så langt kan vi laga enkle html-dokument med vanleg brødtekst, ulike nivå av overskrifter, skiljeliner, relative (interne) linkar, absolutte linkar (til andre nettstader) og epostlinkar. Nokre ting vi ikkje får til med desse kodane er:

  1. påliteleg attgjeving av teikn som ikkje hører til tala 0-9, bokstavane a-z og nokre standardteikn som punktum, komma osv. (Eksempel: æ ø å é);
  2. Anna tekstformatering (f.eks. halvfeit, kursiv, større skrift, mindre skrift);
  3. bilde (foto, teikningar, diagram);
  4. tabellar;
  5. listeoppsett;
  6. andre fargar enn standardfargane i nettlesaren;
  7. globale stilark (éit dokument styrer utsjånaden på f.eks. alle dokumenta på ein nettstad).

Æ/ø/å

Om du berre skriv æ, ø eller å direkte inn i html-dokumentet, så er du garantert å få problem med sidene dine. Grunnen til dette er at desse teikna er på ulike stader i ulike teiknsett. Så om du skriv inn ein liten å i Windows, så vil det sjå ut som ein stor Œ på Macintosh, og blå blir f.eks. sjåande ut som blŒ.

For å unngå dette kan ein gjera to ting. Den første er å setje inn ein tag i hovudet av dokumentet (m.a.o. mellom <head> og </head>):

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

Koden i kursiv, iso-8859-1, er den internasjonale standarden, MEN: Om du vil bruke denne koden for å slippe å skrive spesialkodar for æ, ø og å, så verkar dette berre i Linux, og delvis på Macintosh! For å kunna gjera det same i Windows, må du setje inn koden Windows-1252 i staden.

Ein meir tungvint men mykje sikrare måte å gjera det på er å skrive inn ein spesialkode for kvart spesialteikn. Helst bør ein gjennomføre både dette og den nemnde taggen. Kodane for æ, ø og å er:
Æ &AElig; æ &aelig;
Ø &Oslash; ø &oslash;
Å &Aring; å &aring;

Koden for Måløy blir dermed M&aring;l&oslash;y, og koden for MÅLØY blir M&Aring;L&Oslash;Y.

Andre spesialteikn

Det latinske alfabetet

Det latinske alfabetet er bruka til svært mange språk, og i dette dokumentet ser vi korleis vi kan få fram skriftteikna vi treng for dei fleste européiske språka.

Det greske alfabetet

Det greske alfabetet kan vera nyttig i samband ned filosofi og religion. I dette dokumentet kan du finne enkle kodar for å setje inn greske skriftteikn eller ord i html-dokument.

Det hebraiske alfabetet

Det hebraiske alfabetet blir først og fremst bruka til hebraisk og araméisk, og i tillegg vanlegvis til språk som jiddisch, ladino (og djudeo-español) og ein del andre jødiske språk. Det hebraiske alfabetet går frå høgre mot venstre. Dette er lagt inn som ein del av definisjonen av dei hebraiske teikna i «Unicode».

Fargar

Fargekodar

Her finst ei liste over dei 16 basisfargane som dei enklaste PCane med fargeskjerm kan vise, og i tillegg nokre av dei såkalla nettsikre fargane — fargar som fungerer bra på maskiner med 256 fargar.

Skrivarstuå ©2002 Olve Utne
Oppdatert (updated) 1. april 2002 / 19. nissán 5752