HTML-hjelp for begynnarar

Dette dokumetet inneheld litt enkel starthjelp for å koma i gang med å laga web-sider her ved UiB.

[Filer/katalogar] [HTML-koder] [URL-Referanser] [Bilete] [Norske teikn] [Ikon] [Mailrespons] [Meir hjelp] [Eksempel] [Layout]

Filer og katalogar

Web-sidene skriv ein i eit "språk" som heiter html (hyper text markup language). For at web-browsaren skal vita at sidene er i html, må filene heita filnamn.html. Hovudsida i ein katalog skal ein kalla index.html, og om berre katalogen blir oppgjeve i addressa, vil denne sida bli lesen.

Først må du få ein katalog i det området som er tilgjengeleg for å laga web-sider. Om du er ved zoologisk institutt, ta kontakt med meg eller Tor. For at sidene skal vera tilgjengelege må filene og katalogane vera leselege for alle. Det gjer ein ved å skriva:

chmod 644 filnamn
chmod 755 katalognamn

For å laga/editera filene bruk ein vanleg editor (joe for eksempel, er du vant med pico bruk heller jpico). Ein grei editera sidene på er å bruka lynx. Start lynx ved å skriva lynx index.html (eventuelt lynx . for ei liste over filene i katalogen) når du står i web-katalogen din. Då kan du berre trykka `e' for å editera fila, eller andre filer som den referer til direkte. Når du går ut av editoren, vil lynx med ein gong visa endringane dine. (Første gong du gjer det, må du velja editor i lynx, gjer det ved å trykka `o' for options, og fyll ut editor-feltet med t.d. `joe'.)

Html-kodar

Alle html-kodar består av koder innelukka i <>. Kodene er anten referansar til andre dokument, eller koder for å formattera sidene. Mange av kodene er para, du slår dei på med <kode> og av med </kode>

Nokre vanlege kodar

<tittel></tittel>
<hx></hx> der x=1-6, overskrift
<p> avsnitt
<br> linjeskift
<hr> horisontal linje
<i></i> kursiv
<b></b> uthev
 kommentar
<pre></pre> ferdig formattert tekst (skal ikkje ombrekkast)
<ul></ul> opplisting, bruk <li> foran kvar linje i lista

Sjå eksempel på slutten av sida. Ein mykje meir fullstendig oversikt over koder finn du i HTML quick reference eller A beginners guide to HTML

URL-Referansar

Lokale dokument peiker ein til ved å skriva <a href="filnamn.type">klikkbar tekst (eller eit ikon)</a>. Type-delen av filnamnet avgjer kva browseren vil tolka referansen som, og kan td vera .html, .txt, .gif, .jpg og .mpeg.

Referanser til sider på andre maskinar oppgjev ein slik:
<a href="http://www.uib.no/zoo">Klikkbar tekst</a>
Ein kan og visa til gopher/ftp-sites ved å byta ut `http' med `ftp' eller `gopher'.

Denne typen referanser `type://maskin-addresse/katalog/fil' er kalla ein URL, Uniform Resource Locator. Det meste som finst på internet kan oppgjes som ein URL.

Bilete

Bilete som skal vera på sjølve sida må vera i .gif-format, og blir referert slik:
<img src="filnamn.gif">
Ein bør og oppgje kva som skal stå dersom den som ser på sida bruker ein tekstbasert browser (dvs lynx). Det gjer ein slik:
<img src="filnamn.gif" alt="alternativ tekst">
For reint dekorative bilete skriv alt="".

Norske teikn

Ein kan godt bruka vanlege norske teikn om ein bruker eit ISO-8859-1-teiknsett, det er det teiknsettet som blir brukt i UNIX og MS-Windows. Bruk ikkje MS-Dos, OS/2 eller MacIntosh-teiknsett. I staden for norske teikn kan ein då bruka &-koder:
Æ -> Æ
æ -> æ
Ø -> Ø
ø -> ø
Å -> Å
å -> å
Tabell over spesialkoder

Ikon

Me har samla ein del ikon i katalogen /zoo/icons, dei kan du referera til direkte ved å skriva <img src="/zoo/icons/filnamn">

Korleis laga `Mail til'-sider

Det er to måter å gjera det mogleg å senda mailrespons direkte via web-sider. Den eine er å bruka <a href="mailto:mailaddresse">Namn</a>, for eksempel <a href="mailto:Brage.Forland@zoo.uib.no">Brage.Forland@zoo.uib.no</a>. Ulempen med denne måten er at ikkje alle web-browserar forstår denne.

Den andre måten er å senda det via eit skript. Ein bruker då ein `form', og poster den til skriptet. Dei fleste browserane støtter no mailto, så den er absolutt å foretrekja.

Meir hjelp

Referansar til meir info om korleis laga html finn du på http://www.uib.no/zoo/brage/www.html. Ein annan grei måte å læra seg å laga sider, er å sjå korleis andre har lagd sidene. I mosaic/netscape gjer ein det ved å velja `view source', og i lynx gjer ein det ved å pressa `\'. Meir dokumentasjon på norsk kan ein og finna på "Kunsten å lage dokumenter i HTML".

Eksempel

Hovud:

<html><head><title>Eksempel</title></head>
<body>

<html><head><body> er ikkje nødvendig, men tilrådd. <title> er den tittelen som står på tittelinja/øverst, og er ikkje ein del av sjølve dokumentet.

Sjølve sida:

Det er 6 nivåer av overskrifter:

<h1>Nivå 1</h1>

<h2>Nivå 2</h2>

<h3>Nivå 3</h3>

<h4>Nivå 4</h4>

<h5>Nivå 5</h5>

<h6>Nivå 6</h6>

Andre mykje brukte koder er
<p> (Avsnitt)

<hr> (horisontal linje)

<br>linjeskift
<i>kursiv</i>
<b>utheva</b>
<em>vektlagt</em>

Opplisting med 2 nivåer:
<ul>

<li>Nivå 1
<li>Fortsatt nivå 1 <ul>
- <li>Nivå 2

</ul></ul>

<pre>
    Her er ferdig-
  formattert tekst
</pre>

<a href="http://www.uib.no/zoo/">Referanse til Zoologisk Institutt</a>

Ikon som peiker på eit bilete:
<a href="/zoo/pic/zoologo.gif/"><img src="/zoo/icons/zooicon.gif" alt="Logo for Zoologisk institutt"></a>

"Hale:"

avslutt med </body></html>

Denne er heller ikkje nødvendig, men tilrådd.

Layout

Ein står sjølvsagt heilt fritt til å velja korleis ei side skal sjå ut. Det finst ingen fasit på kva som er ei god side. Ein ting ein bør tenkja på likevel, er at sida kjem til å bli lesen av ulike browserar. Bruk derfor kodane på «standard» vis. Å bruka td. <h3> for å utheva tekst kan sjå fint ut på din browser, men ikkje på andre. Unngå òg å basera sidene på koder som er spesifikke for enkelte browsererar, som td Netscape. Kanskje dei fleste bruker Netscape akkurat nå, men slikt endrer seg raskt.

Mange som les sidene vil bruka tekstbaserte browserar, eller slår av bileta for å spara tid. Gjer derfor ikkje sida avhengig avgrafikk, og hugs å bruka «alt=»-opsjonen på bilete. Ei side som berre viser [IMAGE][IMAGE] i lynx er ikkje særleg spennande. Når du bruker bilete, pass på å ikkje gjera dei for store, og bruk heller eit mindre ikon som peiker på sjølve biletet om du vil ha det med.

Eit par råd, og vanlege feil:

Bruk mest mogleg "logiske" tags, dvs tags som beskriver innhaldet, og ikkje tags som bestemmer utsjånaden direkte.
Ikkje bruk <hx> for å bestemma fontstørrelse, <hx> er til overskrifter, og ikkje noko anna.
Ikkje skriv "klikk her", men gje meiningsfull tekst på linkane.
Ikkje bruk for store bilete.

Meir info kan du finna i uninett sin Style guide.

Bruk gjerne eit program for å sjekka syntaksen på sida. (Dette er viktig, feil som gjer teksta uleseleg i somme browserar kan sjå heilt ok ut i andre. Vanleg er manglande "-ar i slutten av urlar, som ikkje viser i Netscape, men som får tekst til å forsvinna i somme andre.) Er du på alfred, kan du bruka http://www.uib.no/cgi-bin/zoo/sjekkside.pl for å sjekka syntaksen. Andre kan henta ein kopi av html-sjekkaren her.

Sist oppdatert 24. februar 1995 av Brage. Send gjerne kommentarar til denne sida om det er noko som manglar eller bør forklarast betre.