Innføring i HTML

Skal du lage en web-side, må du bruke et språk som heter HTML (Hyper Text Markup Language). HTML harkommandoer for å formatere tekst. Man kan angi størrelse på teksten, kursiv, uthevet etc. Videre har man koder for å inkludere bilder, samt linker til andre web-sider. Det finnes mange andre kommandoer. Et typisk html-dokument, består av den teksten du ser på skjermen, samt kommandoer skrevet i ren tekst. Vil du lage hjemmeside på NVG, må du først lage en katalog som heter .www i hjemmekatalogen din. Du kaller html-dokumentet for index.html og legger det i .www katalogen.

Katalogen lager du slik:

flode.nvg.ntnu.no:magnio:~<2> mkdir .www

Deretter går du inn i katalogen:

flode.nvg.ntnu.no:magnio:~<3> cd .www

og lager ei fil som må hete

index.html.

Bruk en editor, feks. pico, som er enkel for nybegynnere, eller emacs eller vi, som ved første øyekast (og tastetrykk!) kan virke noe mindre brukervennlig.

Fila index.html kommer fram når noen kaller opp ei hjemmeside på adressa http://www.nvg.ntnu.no/~brukernavn/, der brukernavn er feks. magnio. Fila kan inneholde hva som helst, så lenge det ikke strider mot Norges Lover og/eller NTNUs regelverk og/eller NVGs regler. Husk at det som regel er bedre å ha mange sider/dokumenter som inneholder litt (mindre) tekst hver enn ett stort dokument med mye tekst og grafikk, som kan ta svært lang tid å laste ned, spesielt med modem.

Et html-dokument bør starte omtrent slik:

<html>
<head>
<title>Bare et eksempel</title>
</head>
<body>

Som du ser ovenfor, så er kommandoene på formen <xxx> og altså skrevet i vanlig tekst. Mange av kommandoene kommer i par. F.eks. <title> og </title>. De er nesten alltid på formen <xxx> og </xxx>, der xxx angir hva som skal skje med teksten i mellom.

HTML Vanlig tekst:

Vanlig tekst ser slik ut og
formateres
automatisk
uten at du behøver tenke på linjedeling o.l.

Eksempel:

Vanlig tekst ser slik ut og formateres automatisk uten at du behøver tenke på linjedeling o.l.

I html kan du ha 6 forskjellige overskrifter (header)

<h1>Her er header størrelse 1</h1>

Eksempel:

Her er header størrelse 1

Her er header størrelse 2

Her er header størrelse 3

Her er header størrelse 4

Her er header størrelse 5

Her er header størrelse 6

Du kan utheve tekst:

Det er <i>spesielt</i> viktig at det går bra.

Det er <b>kjempekuult</b> å skrive HTML.

Eksempel:

Det er spesielt viktig at det går bra.

Det er kjempekuult å skrive HTML.

Vanlig tekst (ikke overskrifter, spesielle ting etc) bør skrives uten bruk av overskrifts- eller uthevingskoder.

Bilder kan inkluderes slik:

<img src="bilde.gif">

Man kan også få bildet til venstre eller høyre for teksten ved å skrive f.eks. <img align=right src="bilde.gif"> Merk at bildet må lagres i GIF eller JPG format (helst GIF). Husk at mange bruker modem slik at det kan ta veldig lang tid å laste ned bilder. Derfor bør du helst bruke små og få bilder/grafikk, og heller legge inn link til større bilder.Det gjør du slik: <a href="bilde.gif"><img src="bilde.gif"></a>

Eksempel:

Du kan ordne informasjon i unummerert listeform:

<ul>
<li>en
<li>to
<li>tre
</ul>

Eksempel:

Du kan ordne informasjon i nummerert listeform:

<ol>
<li>en
<li>to
<li>tre
</ol>

Eksempel:

Lenker til andre sider laget slik:

Det er <a href="http://www.nvg.ntnu.no/">Nettverksgruppa</a> som
har laget disse sidene

Legg merke til http://www.nvg.ntnu.no/ som er URL-adressen til siden det lenkes til.

Eksempel:

Det er Nettverksgruppa som har laget disse sidene.

På samme måte lager du linker til større utgave av bildene dine osv (se ovenfor).

Norske bokstaver (æ ø å) kan skrives direkte inn, men ettersom ikke alle browsere støtter dette, bør html-koder brukes for dette:

æ blir æ Æ blir Æ ø blir ø Ø blir Ø å blir å Å blir Å & blir & < blir < > blir >
Kodene skal skrives i <klammer>.

Vanlig tekst er vanligvis automatisk formatert, men dersom du vil bryte linjer og ellers lage luft i teksten finnes to metoder. <br> og <p>
Jeg vil at denne<br>linjen skal deles i to.

Det er lurt å legge inn litt luft i en ellers tunglest tekst. Dette vil hjelpe leseren slik at det blir lettere å lese teksten<p> Du bruker det vanligvis ved avsluttet avsnitt eller lignende.

Eksempel:

Jeg vil at denne
linjen skal deles i to.

Det er lurt å legge inn litt luft i en ellers tunglest tekst. Dette vil hjelpe leseren slik at det blir lettere å lese teksten
Du bruker det vanligvis ved avsluttet avsnitt eller lignende.

Du kan lage en skille-linje i dokumentet slik:
foran<hr>etter

Eksempel:

foran
etter

Flere HTML-relaterte sider.

Nettverksgruppa, [28.8.1996] support@nvg.ntnu.no