Lær deg HTML på 21 minutter

En kveld viste tv-programmet “Hardcopy” en historie om en 10 år gammel gutt med en psykotisk
mor som ikke ville ta sine medisiner og banket opp gutten. Han ville bo hos sin far, men dommeren ville ikke forandre foreldreretten deres. Dermed bygde tiåringen en webside som oppmuntret Internettbrukere til å kontakte dommeren med en formoding om å endre foreldreretten.

Denne fortellingen forteller jeg til mine venner som ønsker at jeg skal hjelpe dem med å bygge deres statiske HTML-sider. “Tiåringen fikk sin til å virke; det tror jeg du klarer, også.”

Dersom de tviler, anbefaler jeg dem å finne en side de liker, velger Save As i Netscape, og editerer siden med den teksteditoren de ønsker. Jeg kjenner ingen som ikke klarte å kaste sammen en enkel side på under 21 minutter.

HTML-tutorial

Min kusine er virkelig hårete.

Dette er et fullt ut akseptabelt HTML dokument. Skriv det i en tekst-editor, lagre den som index.html, og den opp på din webserver. En webserver kan sende den. En bruker med Netscape Navigator kan se den. En søkemotor kan indeksere den. Anta at du vil ha noe som er mer uttrykksfullt. Du vil at ordet virkelig skal vises i kursiv:

Min kusine er <I>virkelig</I> hårete.

HTML står for HyperText Markup Language. <I> er markup. Den gir browseren beskjed om at den må begynne å rendere ord i kursiv. </I> lukker <I> elementet og stopper kursiv tekst. Dersom du ønsker å fremheve virkelig med tykk skrift:

Min kusine er <B>virkelig</B> hårete.

Det er et par dusin andre tagger i HTML. Du kan lære dem ved å velge View Source fra Netscape Navigator når du besøker sider der du liker formateringen av teksten. Dette er hvordan jeg lærte markup. Du kan lære dem ved å besøke www.hwg.org/ og klikke gjennom noen av guidene og tutorialene der. Eller du kan kjøpe HTML:The Definitive Guide (Musciano and Kennedy, O’Reilly, 1997).

Dokument struktur

Bevepnet med en hel armé av tagger, kan du begynne å strø dem rundt mellom dine ord mer eller mindre tilfeldig. Selv om webleserne er ekstremt medgjørlige med tekniskt ulovlige markup, så er det nyttig å vite at et HTML dokument består av to deler: head (hode) og body (kroppen). Head inneholder informasjon om dokumentet, slik som tittelen. Body inneholder informasjon som skal bli vist i brukerens webleser.

Et annet poeng med struktureringen er at du prøver å passe på at du avslutter et hvert element du åpner. Så dersom ditt dokument har <BODY> i starten, skal den også ha </BODY> til slutt. Dersom du starter en HTML tabell med <TABLE> og ikke avslutter den med </TABLE>, vil Netscape Navigator mest sannsynlig ikke vise noe av innholdet. Tagger kan overlappe hverandre, men du bør stenge den først åpnede taggen før resten. F.eks. for noe som er både bold og kursiv:

Min kusine er <B><I>virkelig</B></I> hårete.

Noe som forvirrer mange nye brukere er at <P> taggen som brukes til å markere en paragraf, har en vilkårlig slutt-tag </P>. Webleserne er satt opp slik at en åpen <P>-tag implisitt blir lukket ved neste </P>. Dette medfører at mange bruker <P> som paragrafseparatorer (inkludert meg). Her er kildekoden til et dokument som kan være greit å bruke som utgangspunkt:

<html>
 <head>
  <title>Nytt dokument</title>
 </head>
 <body bgcolor=white text=black>
  <h2>Nytt dokument</h2>
  av <a href="http://www.dinurl.no">Morten Jacobsen</a>
  <hr>
  Introduksjonstekst
  <h3>Første subhode</h3>
  mer tekst
  <p>
  enda mer tekst
  <h3>Andre subhode</h3>
  konklusjon tekst
  <hr>
  <a href="mailto:morten@webdirect.no">
   <address>morten@webdirect.no</address>
  </a>
 </body>
</html>

Se html-dokumentet her.

La oss gå gjennom dette dokumentet steg for steg. HTML elementet på toppen sier
“jeg er et HTML dokument.” Legg merke til at denne taggen avsluttes i bunnen av dokumentet. Det viser seg faktisk at denne taggen er unødvendig. Jeg har lagret dokumentet i filen “basic.html”. Når en bruker spør etter dette dokumentet, ser webserveren på .html attributten og legger inn en MIME header for å fortelle brukerens webleser at dette dokumentet er av typen text/html.

Kvamsfjellet mot Rondablikk Hotell (juli 1999) Jeg putter inn et <HEAD> element mest for å lovlig kunne bruke <TITLE> taggen for å gi dette dokumentet et navn. Når tekst er plassert mellom <TITLE> og </TITLE> vil den fremstå i toppen av brukerens Netscape-vindu, på Go menyen og i Bookmark-menyen, dersom han/hun velger å bookmarke denne siden. Etter å ha avsluttet head med </HEAD>, åpner jeg body dokumentet med <BODY>, som jeg har lagt til noen parametre som manuelt setter bakgrunnsfargen til white (hvit) og tekstfargen til black (sort). Noen weblesere har bakgrunnen default på grå, noe som gjør kontrasten mellom teksten og bakgrunnen så liten at det kan være vanskelig å lese.

Rett under bodyen har jeg en overskrift (headline), størrelse 2, innkapslet i <H2> tagger. Dette vil bli vist til brukeren i toppen av dokumentet. Jeg skulle muligens brukt <H1>, men de fleste weblesere viser den i en font som er alt for stor for de fleste sitt ego. Under overskriften legger jeg ofte inn “av Morten Jacobsen” eller noe liknende som indikerer hvem som står bak siden, pluss kanskje en link til personlig informasjon. Tekststrengen “Morten Jacobsen” er en hypertekst link, og det er derfor den er pakket inn i et A element. <A HREF= sier “dette er en hyperlink.” Dersom leseren klikker et sted mellom her og </A> elementet, sender webleseren han til http://www.dinurl.no.

Etter overskriften, forfatter og eventuelle navigasjonsknapper, legger jeg inn en horisontal linje <HR>. Det er lurt å ikke overdrive bruken av disse horisontale linjene: Profesjonelle grafiske designere bruker mellomrom som separasjon. Jeg bruker <H3> overskrifter i tekst for mellomrom, og legger bare en <HR> i bunnen av dokumentet.

Under den siste <HR> signerer jeg dokumentet mitt med morten@webdirect.no. <ADDRESS>
elementet medfører vanligvis en kursiv tekst. Jeg tror at alle dokumenter på Internett skulle hatt en slik signatur. Lesere forventer at de bare kan scrolle ned til bunnen av dokumentet og finne ut hvem som er ansvarlig for nettopp det de har lest. Legg merke til at denne er pakket inn i en link-tag. Dersom en bruker klikker på linken (min e-post adresse), vil webleseren poppe opp et “send mail to morten@webdirect.no” vindu. Jeg synes det nesten alltid er dårlig å publisere en e-post adresse på en webside uten å pakke den inn i en “mailto:” tag.


Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Takk for enkel innføring. Noen som kjenner andre gode, norske tutorials jeg bør kikke på?

nope

Du kan jo finne en god en på dansk på http://html.dk
Den er grunnleggende og forklarer godt!
Brukte den da jeg var rundt 10 år.

Tusen, tusen, tusen takk !!