Nysgjerrig på nyhetsbrev og markedsføring med e-post?

Mail Pilots gir deg gratis rapport med tips om hvordan komme i gang med nyhetsbrev
http://mailpilots.dmail.no/start/rapport/

En Enkel Guide til HTML

Sist oppdatert: 16.08.2008
Trykk her om du ønsker å skrive ut guiden.

Tema i guiden

Introduksjon til HTML og tagger

HTML er en forkortelse for HyperText Markup Language. HTML er med andre ord er markeringsspråk for tekst med aktive lenker til andre hypertekstdokumenter. Markeringspråk benytter såkalte "Tags" for å tilordne forhåndsdefinerte egenskaper/stiler på tekst eller områder av et dokument.

Nettsider i dag lages i mange forskjellige beskrivelsesspråk, men grunnprinsippene for den visuelle delen er den samme. Denne guiden er ikke bare ment som en introduksjon til HTML, men skal også gi grunnlag for å forstå hvordan presentasjonsdelen av publisering på internett fungerer. For det som i de fleste nettlesere ser pent ut ser ofte ganske anderledes ut i et tekstbehandlingsprogram og er ofte ikke annet en en ren tekstfil med etternavnet html eller htm. Markeringsspråket er for nettleseren en oppskrift på hvordan dokumentet skal presenteres på brukerens maskin

Nettleseren skiller mellom hva som er ren tekst og hva som er forklaring på hvordan dokumentet skal se ut på en veldig enkel måte. Alt som beskriver noe om utseende til siden står inne i klammer ("<" og ">"). De fleste slike kontroll "tegn", som jeg fra nå av vil referere til som Tags, opptrer i par. Det vil si at vi har en starttag og en endetag. Starttaggen ser slik ut: < k >, og endetaggen ser slik ut: </ k > , der k erstattes med den egenskapet som skal tilordnes teksten eller området som er omringet av start- og endetagg.

Det finnes også tagger som står alene. Eksempel på slike er <br> taggen som utfører enkelt linjeskift i teksten og <hr> som viser en horisontal linje i dokumentet.

Nesten alle Tagger har ekstra kontrolltegn, "attributter". Attributter er ofte valgfrie og blir gjennomgått etterhvert som vi kommer over dem.

HTML er et såkalt CASE-innsensitivt språk, det vil si at det ikke gjør noe om man bruker store eller små bokstaver i taggene. Men noe man må være klar over er at de fleste adresser og lenker til grafikk og liknende er CASE- sensitivt. En grei regel er å ha bevisst forhold til om man benytter store eller små bokstaver, og at man er konsekvent med bruken. Dette gjør at det blir lettere å lese kode i ettertid om man skulle ha behov for å gjøre endringer.



Oversikt over tagger



Følgende er en liste over ofte brukte HTML tagger.
Når det kommer til det med nøsting og om tagger opptrer i par så er det noe man kan se litt mer eller mindre bort ifra etter innføringen av XHTML1.0 standarden. Den krever at alle tagger blir avsluttet når de ikke gjelder lengre. Dette vil ikke påvirke eldre HTML standarder. Det kan likevel innføres som en god praksis da det bidrar til både ryddigere kode, en mer bevisst holdning til hva man driver med, samt at det vil kunne gjøre en senere overgang enklere.
 
Tag Beskrivelse
<A> Anchor: Har med linker til en annen plass. Lokalt eller andre plasser på nettet.
<B> Bold: Fet teksttype
<BR> Tvungen linjeskift
<CENTER> Tag som utgår bruk DIV align="" isteden
<DL> Definisjonsliste: Start- og ende- tagg
<DT> Definisjonsliste: Ordet som defineres
<DD> Definisjonsliste: Definisjonen
<EM> Utheving
<H1> til <H6> Forskjellige overskrifter
<HEAD> En header til dokumentet
<HR> Horisontal Linje
<HTML> Dokumentgrunnlag
<I> Italics /kursiv teksttype
<IMG> Innsatt bilde
<LI> Liste objekt
<LINK> En lenke
<META> Informasjon om dokumentet
<OL> Ordnet liste
<P> Avsnitt
<PRE> Preformatert tekst
<STRIKE> Gjennomstrøket tekst
<STRONG> Sterkt uthevet tekst
<TABLE> Tabell
<TD> Tabell: Datacelle
<TITLE> Dokumentets navn
<TR> Tabell: Rad
<TT> Tekststil med enkelt mellomrom
<U> Understreket teksttype
<UL> punktliste (uordnet)
<XMP> Kodeeksempel

Det finnes en god del flere tagger, men mange av dem er helt unødvendig for å lage enkle hjemmesider.

Strukturen i et HTML dokument

Alle HTML dokumenter starter med <HTML> taggen, og ender med </HTML> taggen. Om man åpner e,n fil skriver begge de taggene og lagrer filen i formatet filnavn.html eller filnavn.htm så har man i teorien en fil som kan leses av en nettleser som en html-fil. Siden vil fremstå som tom, men det er fordi den ikke inneholder annen informasjon for nettleseren enn det at dette er en HTML side.

I tillegg til <HTML> taggene som utgjør rammen til dokumentet, så har vi ett felt bestående av hodet til dokumentet <HEAD> feltet, og brødteksten i dokumentet, <BODY> feltet, eller et <FRAMESET> felt om siden er delt opp i flere vindu.

Hodet eller HEAD feltet startes med <HEAD> taggen og inneholder informasjon om selve dokumentet. Normalt så er dokumentets tittel (det som vil bli stående i hodet på nettleseren) en del av dokumenthodet). I tillegg til informasjon som beskriver dokumentet for søkemotorer. Slik beskrivelsesinformasjon kalles metadata. Metadata beskriver språket informasjonen i dokumentet er skrevet i, i tillegg til informasjon om forfatter, dato opprettet, gyldighet og kort oppsummering og beskrivende stikkord.

Etter at dokumenthodet er avsluttet kommer den delen av dokumentet som vises for brukeren. Koden som kommer her varierer ut ifra om dette er en nettside som benytter ett vindu eller flere vinduer (frames). Det er bare denne innholdsdeklarasjonen som er forskjellig for de to typen dokumenter. Denne guiden vil primært omhandle dokumenter med en-vindus løsning, men har en kort innføring til sider med flere vindu under Frames/ vinduer.

Bodyfeltet deklareres ved hjelp av <BODY> taggen. Inne i den taggen kan generell informasjon om stilen dokumentet taes med. Dette er farge på; hovedtekst; lenker; aktive lenker; besøkte lenker i tillegg til bakgrunnsfargeeller bakgrunnsbilde for siden.

Om ikke attributter for dokumentfarger spesifiserers nærmere vil standardfarger for nettleseren bli brukt. Følgende kommer et lite eksempel på et basisdokument. Mellomrom og linjeinnrykk er for lesbarhet og er ikke nødvendig.

<html> <head> <title> FISK R OSS </title> <meta name="keywords" lang="no" content="Restauranter, Trondheim, Mat, Fisk"> <meta name="author" lang="no" content="Frank Flink"> </head> <body bgcolor="#808000" text="#800080" link="#C0C0C0" alink="#808080" vlink="#FFFFFF"> Beklager men nettsiden vår har ikke komme opp helt enda på grunn av algeoppblomstring i fisketanken vår. <body> </html>

Bakgrunn / farger

Farger brukes på tekst og på bakgrunner. De blir bestemt av en hexadesimal RGB kode eller ved hjelp av en rekke predefinerte navn på fargeverdier. RGB koden er Rød Grønn Blå verdiene fra 00 til FF Heksadesimalt (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) hvor #FF0000 er Rød, #00FF00 er Grønn og #0000FF er Blå. Man ser lett at det er utrolig mange farger man kan hente ut av denne skalaen. Man kan prøve seg frem til nye farger ved å forandre hexverdiene. Følgende er oversikt over de 16 grunnfargene med kode og navn.

 
black
#000000
 
green
#008000
 
silver
#C0C0C0
 
lime
#00ff00
 
gray
#808080
 
olive
#808000
 
white
#ffffff
 
yellow
#ffff00
 
maroon
#800000
 
navy
#000080
 
red
#ff0000
 
blue
#0000ff
 
purple
#800080
 
teal
#008080
 
fuchsia
#ff00ff
 
aqua
#00ffff

La oss se videre på eksemplet ovenfor; vi kunne også ha skrevet:

<body bgcolor="purple" text="olive" link="silver" alink="gray" vlink="white">

Men hva om vi vil bruke bilde som bakgrunn?
 Da må vi i tillegg legge til attributt for bakgrunnsbilde med referanse til det aktuelle bildet.

<body background="bilder/minbakgrunn.gif">

Dette er en referanse til bildet minbakgrunn.gif som ligger på katalogen bilder som ligger under katalogen som dokumentet som beskriver utseendet på HTML presentasjonen ligger. Vi må være klar over at om skjermstørrelsen er større enn hva bakgrunnsbildet er vil bildet gjenntaes som et "lappeteppe" utover skjermen.

Ønsker man at bakgrunnen skal være fast i forhold til teksten må man legge på attributten bgproperties="fixed". Det gjør at grafikken står fast, og bare teksten beveger seg når man beveger seg ned i dokumentet.

Mer om bilder vil vi se på under pkt.1.7, linker og katalogstruktur vil det bli sett nærmere på under pkt.1.6

HEXbot er ett bra program som genererer HTMLfargekoder, det kan lastes ned her /bin/HxBt_Gold.zip (kun win32).

Tabeller

Tabeller er kanskje det "vanskeligste" med HTML, men behersker man tabeller godt er det bare fantasien som setter begrensninger for hvor anvanserte nettsider man kan lage designmessig. En tabell består av et tabellrammeverk med tabellrader og tilhørende dataceller inne i radene. Med andre ord <TABLE>, <TR> og <TD> taggene. I tillegg til disse kommer topptekst, hode og bunntekst de vil jeg ikke se nærmere på.

Et lite eksempel på en tabell med en rad, tabellen er midtstilt har en bredde som tar 60% av den totale skjermbredden. Border er rammen rundt selve tabellen, Cellspacing er mellomrommet mellom hver celle og Cellpadding er tykkelsen på "rammen" rundt hver celle. I ett så enkelt eksempel som det første vil ikke de to sistnevnte ha mye hensikt. Det vil komme ett par eksempel med tilhørende taggs. Man må huske at en celle må ha innhold av en type for at den skal vises på skjermen.

<table align="center" width="60%" border="1" cellspacing="2" cellpadding="1">
 <tr>
  <td width="100">
  </td>
 </tr>
</table>


 

Man kan også sette alle rammer lik 0, da vil vi få en usynlig tabell som setter teksten vi skriver opp i spalter, effekten av dette kan bli svært bra.

Ett litt mer innholdsrikt eksempel. Vi har er også bruken av Header og Body. Legg merke til at man setter opp først raden, så legger man celler inn i radene.

<div align="center">
<table border="1" cellspacing="2" cellpadding="1">
 <thead>
  <tr><th>fiskepriser </th><th>pris per kilo</th>
  <tbody>
  <tr><td width="90%">akkar </td><td>kr. 80.00</td></tr>
  <tr><td width="90%">sjøstjerner </td><td>kr. 65.00</td></tr>
  <tr><td width="90%">sjøpinnsvin </td><td>kr. 90.00</td></tr>
 </table>
</div>


Fiskepriser Pris per kilo
Akkar Kr. 80.00
Sjøstjerner Kr. 65.00
Sjøpinnsvin Kr. 90.00



Format på celler

Celletaggen <td> kan sammenlignes med <body> taggen. Man kan sette bakgrunnsfarge og tekstfarger i en celle på lik linje med hva man kan gjøre i body taggen. I tillegg kan man sette vertikal "alignment" i cella; valign="top|middle|bottom", der middle er default

Tabeller er som sagt delt opp i rader som inneholder celler. Dette viker litt ifra den vanlige oppfatningen av rader og kolonner, for om man skal få noen celler til og gå over flere rader, eller at en celle skal ta like stor plass som to andre celler må man formatere tabellen spesielt.

En tabell som skal se slik ut:

 
       
    
  
  

kan føres slik:

<table width="500" border="2" colspan="5" cellspacing="1" cellpadding="0">
<tr><td colspan="5" width="500">&nbsp; </td></tr>
<tr><td colspan="1" width="100">&nbsp;</td><td colspan="1" width="100">&nbsp;</td>
<td colspan="1" width="100">&nbsp;</td><td colspan="1" width="100">&nbsp;</td>
<td colspan="1" width="100">&nbsp;</td></tr>
<tr><td colspan="2" width="200">&nbsp;</td><td colspan="1" width="100">&nbsp;</td>
<td colspan="2" width="200" rowspan="2">&nbsp;</td></tr>
<tr><td colspan="2" width="200">&nbsp;</td><td colspan="1" width="100">&nbsp;</td></tr>
<tr><td colspan="3" width="300">&nbsp;</td><td colspan="2" width="200">&nbsp;</td></tr>
</table>


Tekst

Det er tre måter og skrive tekst på i HTML, vi kan dele teksten opp i paragrafer ved hjelp av <P> og </P> taggene. Vi kan også manipulere tekstflyten ved hjelp av <BR> tagger. Disse to metodene er ikke HELT sikre da noen browsere ikke tar likt hennsyn til tabulatorer og mellomrom, dette fører til at ett oppsett som ser helt bra ut på en maskin kan være helt annerledes på en annen. Derfor er det noe som heter preformatert tekst, all tekst som skrives mellom <PRE> og </PRE> vil komme ut som "forfatteren" har satt den. Ett lite eksempel, først med paragrafer , så med preformatert tekst.

Meny:<STRONG> Fisk R oss </STRONG>
BREIFLABB          545,00 kr.
SLIMÅL             406,00 kr.
TANG                12,50 kr.
       23% skatt ikke medregnet i prisen.

Meny: Fisk R oss BREIFLABB 545,00 kr. SLIMÅL 406,00 kr. TANG 12,50 kr. 23% skatt ikke medregnet i prisen.


 Meny: Fisk R oss  
BREIFLABB         545,00 kr.
SLIMÅL            406,00 kr.
TANG               12,50 kr.
       23% skatt ikke medregnet i prisen.

Vi ser at nettleseren ikke tar noe hensyn til linjeskift og mellomrom større enn ett, altså to mellomrom regnes som ett. Vi kunne så klart ha brukt tvungen linjeskift i tillegg til paragraftaggene, men det ville gjøre det "umulig" og oppdatere menyen senere.

Uten noen <FONT> tagg, som teksttaggen heter, ser teksten ut som teksten i dette dokumentet. Men om vi vil så kan teksten se annerledes ut. Vi kan manipulere teksten ved bruk av farge, størrelse, utseende, og stil. Vi ser først på noen av taggene som endrer stilen til teksten.

<B>FET TEKST</B>
<U>UNDERSTREKET TEKST</U>
<EM>UTHEVET TEKST</EM>
<STRONG>STERKT UTHEVET TEKST</STRONG>
<STRIKE>GJENNOMSTRØKET TEKST</STRIKE>
<I>ITALIC TEKST</I>
<TT>TRYKKSRIFT</TT>

Størrelse

Størrelsen på teksten bestemmes av og sette teksten til forskjellige typer headere, H1-H6 eller ved å bestemme størrelsen spesifikt. Headertagger ble fra tidlig av brukt av søkemotorer til å forstå det viktige innholdet av et dokument (ved hjelp av å se innholdet av overskriftene). Dette gjorde at veldig mange nettsteder skrev all teksten ved hjelp av header tagger. De fleste nettsteder hvor det blir lagt vekt på utseende bruker spesifikk bestemmelse av størrelse og utseende tekst uten hjelp av header tagger, og på grunn av at de blir behandlet spesiellt av nettleseren går de fleste bort fra å bruke dem.

Spesifikk bestemmelse

<font size="n"> Tekst med størrelsen n</font >

Der n kan være ett hvilket som helst tall.

Utseende

Med utseende mener vi den fonten teksten skal ha, dette kalles i HTML for face. Man setter opp forskjellige fonter som man vil ha, og maskinen til brukeren velger den første av de fontene du har satt opp til tekstens font. Om ingen av dine fonter ligger på brukerens maskin så vil brukerens maskin overse face valget. En komplett font tag vil se slik ut:

<font size=4 color="#FFFFFF" face=" Helvetica, Arial, Times new roman, Verdana">


Den avsluttes med en enkel font endetag ( </FONT> ), eventuelle headere og stilendringer blir pakket rundt teksten på vanlig måte. Det vil ikke bli brukt noen andre fonter i dette dokumentet utenom på e-brev adressen i bunnen av dokumentet, grunnen er det at man ikke på forhånd vet hvilken font som vil vises på skjermen, og det er da umulig å referere til det, det er forresten brukt den samme taggen der som i dette eksempelet.

Lenker

Vi har mange typer lenker og forholde oss til. Her er en liten presentasjon av en del av dem.

Alt som har med lenker og lenking å gjøre har ankertaggen som grunnlag ( < a > ), det er den som forteller at teksten som står mellom anker start- og anker endetagg enten er en lenke, eller navnet på en plass som en lenke kan peke til.

Samtidig som vi ser på lenker vil vi se litt på katalogstrukturer. Dette går litt på hvordan filene som HTML-dokumentet ditt refererer til ligger i forhold til dokumentet selv. Noen ligger i samme katalog, noen på underkataloger, og noen andre steder på nettet (utenfor tjeneren).
La oss si at katalogstrukturen ser slik ut:

I dette tilfellet så ligger hodedokumentet, index.html, i katalogen html_public. Alle bilder ligger i underkatalogen bilder, andre filer, som lyd, tekstdokumenter ligger i underkatalogen div.

Skal bildet bakgrunn.jpg være bakgrunnsbilde på hjemmesiden vil det stå:

<BODY BACKGROUND="./bilder/bakgrunn.jpg">


Dette er ikke en link i, men en referanse til noe en plass på tjeneren. Lenker er enten målet for, eller veien til, en annen plass på nettet. Skulle det være mulighet for å laste ned lydsporet bestsang.wav, fra underkatalogen div måtte det blitt brukt en link, en link inneholder normalt følgende:

Linken til lydfilen vil se slik ut:

<A HREF="./div/bestsang.wav">


Om lydfilen lå på katalogen gustava ville den ha sett slik ut:

<A HREF="../bestsang.wav">


Man kan også sette opp bokmerker innenfor en annen plass på samme dokument. Disse bokmerkene settes ved å gi de ønskede plassene i dokumentet ankernavn. Man lager linker til de stedene ved bruk av numerisk tegnet (#) og navnet etterfølgende:

<A NAME="Viktigpunkt">PS! les dette</A>

<A HREF="#Viktigpunkt">Trykk her for viktig opplysning</A>


For referanser ute på nett må man spesifisere hvilken protokoll, og adressen til stedet det skal lenkes til i HREF, på lik linje med innskrivning av nett adresser i URL vinduet i browseren.

Eksempel på to hyperlenker, den første til en hjemmeside og den andre til en mailadresse.

<a href="http://www.web-amp.com/">Web-Amp</a>

<a href="mailto:html@web-amp.com">Send e-post til meg</a>


Basetaggen
En lite brukt og lite nevnt tagg er <BASE> taggen. Basetaggen er til slik at man kan referere til eksterne lenker på en side som om de var lokale. Det vil si at det er mulig å hente bilder, andre dokumenter inn vår publikasjon ved å referere til dem som lokale filer. Begrensingen i dette er at man kan bare forholde seg til ett annet nettsted. Basetaggen plasseres i innenfor HEAD taggene i dokumentet og settes lik adressen til den plassen alle filene vårt dokument skal stå ilag med. Fordelen med dette er at man kan lage ett nettsted fordelt på flere tjenere, men ha delt grafikkatalog, filreferanse. Man trenger ikke ta hensyn til hvor dokumentene skal ligge i utviklingsprosessen.

<base href="http://www.web-amp.com/html">


Ved å bruke sette basetaggen slik jeg har gjort nå. Kan jeg flytte index.html til en annen server uten å måtte forandre bildereferanser eller kopiere bildene til den serveren.

Bilder

HTML-standarden sier ingenting om hvilke bildeformater som skal støttes, derfor er det helt opp til utviklerne av nettlesere hvilke formater de vil støtte. I dag er formatene GIF og JPEG (JPG) støttet av de fleste, og kan brukes trygt uten å være i tvil om at noen browsere ikke skal støtte dem. Formatene PNG og SVG er nyere formater som man enkelt kan laste ned tilleggsprogramvare til nettleseren for at man skal kunne være i stand til å se. Disse er nye formater som skal være bedre enn både GIF og JPEG.

Standarden som beskriver ulike medieformater (bilder, lyd, dokumenter, osv.) heter MIME. Alle formater har en tilhørende MIME-Type som må registreres i brukerens datamaskin for at den skal vite hvordan den skal håndtere formatet. Det er dette som bestemmer at en word-fil skal åpnes i Office og at en grafikkfil skal vises i nettleseren eller åpnes i paint.

Bilder plasseres inn i dokumentet ved hjelp av img taggen og referansen til bilde man vil ha plassert i dokumentet. Bildekilden (source) defineres av src-atributten.

<img src="./bilder/bilde.gif" border="0" alt="http://www.image-planet.com/" width="120" height="66" vspace="2" hspace="2" valign="middle">


gir oss : Ihttp://www.image-planet.com/

Følgende alternative attributter i img taggen kan brukes:

Der n er ett tall og angir ett antall piksler. En pixel er en enhet på skjermen for tegning. Størrelsen på en pixel vil avhenge av hvilken oppløsning man bruker.

En konvensjon på web tilsa at browsere skal laste ned tekst før den begynner på bilder, ved å føre på høyde på bilder selv om de skal ha sin opprinnelige størrelse vil teksten komme på rett plass i dokumentet først som sist.

Verken BORDER, ALIGN trenger å være med. Da vil bildet ha sin opprinnelige plassering og komme akkurat der i teksten den er referert til ifra.

Det er ikke alltid at browseren klarer og vise det bildet vi refererer til. En måte og likevel få frem hvilket bilde som var tenkt lastet ned er å bruke alternativ tekst, ALT="[tekst]", der teksten er en kort beskrivelse av det bildet som egentlig skulle stå der.

Bilder som lenker

Det å ha ett bilde som lenke er ikke alltid like enkelt, fordi det er ikke alltid brukeren skjønner at dette er en link. Men det er også det eneste problemet med det. For å unngå linke farger rundt bildet må BORDER settes lik null, videre erstattes bare teksten som normalt er lenken med en bildereferanse på følgende måte:

<a href="http://www.tihlde.org/~gustava"><img src="bilder/bilde.gif" border="0"></a>


Dette vil gjøre at man vil "surfe" til den angitte linken ved at brukeren trykker på bildet.

Tekstflyt rundt bilder

Det å skrive tekst rundt bilder er oftest ikke så vanskelig, problemet kommer som regel først når man ikke vil ha teksten rundt bildet lengre. Det som kreves av et bilde for at teksten skal gå rundt det, og ikke slutte ovenfor for og så fortsette etter, er at det må justeres til høyre eller venstre med hjelp av ALIGN="RIGHT" eller ALIGN="LEFT". På denne måten vil teksten flyte rundt på siden av bildet, om du vil at bildet skal være midtstilt og teksten skal flyte rundt det på den måten, må du bruke tabeller.

For at teksten skal gå klar for bildet, dvs: stoppe halvveis på det, for og fortsette under det, så er det en god måte som finnes i den HTML standarden som brukes i dag. Vi bruker tvungen linjeskift eller <BR> taggen. Men vi må utvide <BR> taggen med en ekstra "operasjon": clear="left" eller clear="right" om bildet er høyrejustert eller venstrejustert.
Denne metoden går også for tekstflyt rundt tabeller eller andre objekter. Den fullstendige break taggen ser da slik ut:

<br clear="[side]">


Imagemaps - bildekart

Imagemaps (bildekart) er i grunnen ikke så enkelt og lage uten noe hjelpeprogram. Hjelpeprogrammer kan lastes ned fra http://www.tucows.com/. Selv om det er kjekt å bruke verktøy så skal vi se på hvordan imagemaps fungerer.

Et bilde deles opp i flere klikkbare områder ved hjelp av et imagemap Imagemaps knyttes til bilder via attributten usemap="[navn]" i <img> taggen ([navn] er stien til imagemap/kartet). Kartet defineres helst i samme html-fil som det blir brukt, usemap vil da se slik ut; usemap="#mittkart".

Selve kartet defineres innenfor <map> taggen og </map> taggen. En enkel imagemap kan se slik ut:

<map name="mittkart">
<area shape="rect" alt="En rektangulær lenke" coords="x1,y1,x2,y2" href="hyperlenke 1">
<area shape="circle" alt="Her er en lenke til tjenerdelen" coords="x1,y1,r" href="hyperlenke 2">
<area shape="polygon" alt="En firkantig lenke til nettet" coords="x1,y1,x2,y2,xn,yn" href="hyperlenke 3">
<area shape="default" alt="Om du trykker på en plass som ikke tatt av andre bokser" href="hyperlenke 4">
</map>


Det kommer kanskje klart frem hva det forskjellige er av dette eksempelet et area kan være firkant, sirkel, mangekant eller default. Default er resterende område på bildet. Coords er koordinatene til de forskjellige figurene. venstre topp og høyre bunn på firkant. Sirkel, sentrum og radius. Mangekant, mange koordinater. href er lenken området refererer til.

Forklaringer på ord og uttrykk

Om man skal ta sine WEB-publikasjoner ett skritt videre må det mer enn ren HTML til hjelp. Følgende er en kort forklaring på noen av de språkene og teknikkene man kan bruke i forbindelse med publisering på web.

AJAX
er et samlebegrep for en kombinasjon av teknikker som åpner for asynkron web. Dette betyr at innhold på sider kan endre seg uten at brukeren etterspørr ny side, eller at deler av siden kan hente oppdatert innhold uten at hele siden laster. Sentrale teknikker benyttet i AJAX er DHTML, JavaScript og Web Services.
Applets
er "Java applikasjoner brettet inn i webkonvolutter". Applets er kanskje det tyngste og tregeste som finnes av denne typen "hjelpemidler". Applets blir skrevet på forhånd og blir kompilert i en java .class fil. Denne blir lest av webleserens egene javaengine, for så å bli kompilert på klientsiden. Applets har sine begrensninger med at de er tunge, og at de ikke alltid fungerer som ønsket. Det finnes svært vellykkede javaApplets på nettet, men de er i mindretall.
ASP
står for Active serverpages, og er Microsoft® sin implementasjon av CGI. Dette stemmer ikke helt, da ASP egentlig er en blanding mellom SSI og Serverside VBScript. Altså Visual Basic kode kjørt på serveren ved lasting av sider. Språket er i hovedsak brukt for å lage sider, eller presentere informasjon lagret i databaser på serveren. ASP kjører på NT servere såvell som på Apacheservere.
CGI
står for Common Gateway Interface, som er betegnelse på en type tjeneste serveren tilbyr. CGI kodes i hovedsak i perl, men kan også kodes med C++, og en rekke andre programmeringsspråk. Perl-CGI er scriptspråk som kompileres av tjeneren hver gang det blir kalt. CGI brukes blant annet til behandling av forms, men kan legge til grunne for hele applikasjoner som jobber med web grensesnitt. Store websteder som bytter innhold svært ofte, slik som nettaviser, bruke CGI i sitt navigasjonssystem. Man kan ved hjelp av CGI på forhånd definere en layout, så henter CGI inn tekst fra filer fortløpende.
DHTML
Dynamic HTML. Tar utgangspunktet i DOM. Kombinasjonen HTML/JavaScript/Stylesheets bruker DOM slik at en sides interaktivitet kan legges til klienten i større grad. DHTML krever ikke noe "mer" av hverken server eller klient, men man må ha god kjennskap til programmering for å kunne bruke DHTML.
DOM
Document object model. Objektorientert syn på ett dokument. Alle lenker, avsnitt, bilder blir sett på som objekter og blir referert til som objekter i dokumentet. Dette gir muligheten til å bygge opp sider i flere lag. Forandre tekst på lenker, og lignende. DOM er bare en modell, DHTML tar denne i bruk.
JavaScript
er ett scriptspråk som bygger på programmeringsspråket Java. JavaScript integreres i HTML dokumentet og kompileres av klienten. JavaScript kan i hovedsak brukes til det meste, det er fantasien som setter begrensningene. JavaScript blir stort sett brukt til verifisering av forms, navigering, og som ett middel for å få sider til å virke mer levende.
PHP
er serverside scriptspråk som mer og mer har gått over til å støtte funksjonalitet man kan få ved bruk av Java eller andre kraftige programeringsspråk. Språket gir mulighet for produksjon av dynamiske sider og kan brukes i forbindelse med web-butikker eller andre nettsteder som jobber mot en eller annen form for database. PHPsyntaks er en lik Perl og C. PHP genererer på samme måte som ASP, klientside kode (HTML, JavaScript e.l).
RSS
er en metode for å utveksle nøkkelinformasjon mellom nettsteder eller fra nettsteder direkte til brukere. Eksempelvis kan du laste ned hovedsakene fra en nettavis til skrivebordet ditt til enhver tid ved hjelp av en kobling til avisens RSS-feed.
SGML
(Standard Generalized Markup Language) er ikke et web-språk, men en av primærspråkene for type-setting.
SSI
står for serverside-includes, og består i hovedsak av en del tagger som henter ut serverspesifik data før dokumentet blir lastet opp til klienten. Dette gir muligheten til at informasjon i dokumentet kan ha forskjellig innhold utifra hvilken tid det er på døgnet, programmet kan starte programmer på server osv. SSI har mange kjente sikkerhetshull og det er av den grunn sjeldent å finne en server som har alle mulighetene til SSI tilgjengelig.
Stylesheets/css
Stylesheets gjør at man kan si at en standardisert tagg skal ha ett bestemt utseende på den enkelte HTMLsiden. Det vil si at man legger enten i selve HTMLdokumentet eller i et dokument som er felles for hele nettstedet en fil der alle taggene og hvordan utseendet demmes skal være. CSS står for cascading stylesheets, som egentlig bare betyr at det er bare den siste deklarasjonen av en tagg som gjelder. Mer om stylesheets finnes på http://www.w3.org/Style/.
Web-Services
er "interaktive websider for datamaskiner". Ved hjelp av web-services kan et nettsted benytte funksjonalitet fra et annet nettsted. Dette kan både være informasjonsuthenting og interaksjon.
XHTML
er en standard som er innført for å få HTML "tilbake på skinnene". HTML er basert på SGML på lik måte som XML er det. XHTML knytter HTML og XML og gjør at HTML-sider i større grad kan leses av datamaskiner og gir større mulighet for formell forståelse av innhold.
XML
Extensible markup language gir deg muligheten til å definere egne tagger for eget bruk. XML er viktig ved innføring av store nettsteder der det er behov for spesiell beskrivelse av informasjon. Ett eksempel på dette kan være en butikkløsning der flere firma laster opp informasjon om sine produkter. XML brukes da til å beskrive en vare..

Frames

Noen ganger så vil det være hensiktsmessig å bruke frames på sitt webområde. Dette er noe man må vurdere selv, men bruken av frames kan resultere i "overkill" på en liten side, og en del kjente problemer med frames kan føre til at systemet går tregere ( enda tregere ), eller bare krasjer.

Hva vil det si å bruke frames?
Når man bruker frames vil man. i det første dokumentet (index.html) brukeren kommer til på websiten, ha et dokument som deler vinduet til browseren opp i mindre felter som fungerer uavhengig av hverandre. Man kan på den måten dirigere lenker til å dukke opp i andre felter i samme vindu. Dette kan gjøre det lettere å navigere i store dokumenttre, men om det ikke er satt opp rett kan det fort bli mye mer rot enn hva det hadde blitt uten frames.

Hvordan setter man opp frames?
Man lager en vanlig indexfil med htmltags og header, men isteden for feltet, definerer man rammene for de feltene som siden skal inneholde, alstå en FRAMESET, en framesett kan være av typen rader eller kolonner.. ROWS eller COLS. Man deler opp framesettene som man vil med prosentvis andel av skjermen, eller i pixels. Innenfor <FRAMESET> taggene setter man opp <FRAME> tagger, tilsvarende til hvor mange felter som er definert i frameseten. Man kan også sette framesets inne i Framesets isteden for en Frame, dette gjør av vi deler opp ett allerede inndelt felt inn i enda mindre felt.

<FRAMESET [ COLS | ROWS ]="liste med høyde eller bredde på antall felt FRAMESET skal inneholde">
</FRAMESET>


Ett Frameset inneholder like mange elementer av frames eller frameset tilsammen som det spesifiseres i listen med høyder/bredder. <FRAME> taggen har disse attributtene:
<FRAME
SRC="(URL(adresse) til det dokumentet som skal vises i dette feltet ved oppstart)"
name="(Navnet på feltet, dette brukes til senere hyperlenkereferanser i targetfeltet)"
marginwidth= "(margbredde på feltet)"
marginheight="(marghøyde på feltet)"
scrolling="yes|no|auto" (Om det skal være mulig å bruke rullegardin på feltet)
noresize (Om det skal være mulig å forandre størrelsen på vinduet)>


Det man må huske når man bruker frames er at alle hyperlenker må (burde) ha target="" attributten. Target peker på det feltet som lenken skal vises i, eller om lenken skal komme i nytt vindu eller om den skal ta hele browservinduet. En target="" vil gjøre at linken kommer i ett nytt vindu, noe som fører til at ett utall med browservindu fyller desktoppen. Target="_top" gjør at lenken som er referert til tar opp hele browservinduet, altså at vi går bort i fra frames. Om target attributten bli utelatt vil lenken vises i det feltet den er referert til ifra.

Selv om det kanskje er lite relevant nå som Frames endelig har blitt en del av HTML standarden, så er det greit og ha en <NOFRAMES> </NOFRAMES> tagg. Alt som står mellom de taggene vil vises om browseren ikke har støtte for frames, noe som er høyst usannsynlig i dag.

Forms

Forms er en så omfattende del av HTML, at det kan være verdt og lage en egen guide på dem. Det vil jeg ikke gjøre, isteden vil jeg kort ta for meg hva forms er, og hvordan man setter opp en enkel form.

Forms brukes med den hensikt at brukere av en side kan interaktivt kommunisere med ett program og på den måten få resultater tilbake. Dette kan være interaktive spørreundersøkelser, matbestilling, bankvirksomhet, gjestebøker, eller bare ren tilbakemelding til forfatteren av ett dokument.

En form fungerer bra alene, men tjener ofte bedre sin hensikt ved hjelp av ett program liggende på serveren i form av batch filer, cgi-script / java-script. Det vil si at en form, eller skjema, samler informasjon fra brukeren og sender det til noe ekstert som behandler den informasjonen.

<form action="[hvor resulatet skal sendes]" target="[hvor resultatvinduet skal komme]"
method="[POST|GET]" enctype="[mimetype]" >
<label for="tekstfelt">tekstfelt: </label><br>
<input type="text" id="tekstfelt" size="20"><br>
<label for="tekstområde">tekstområde: </label><br>
<textarea id="tekstområde" rows="2" cols="20">default tekst</textarea>
<label for="radioknapp">radioknapper: </label>
<input type="radio" name="radioknapp" value="radio1"> radio1
<input type="radio" name="radioknapp" value="radio2"> radio2
<input type="radio" name="radioknapp" value="radio3"> radio3
<label for="flervalg">flervalg: </label><br>
<input name="flervalg" type="checkbox" value="sjekk 1">sjekk 1
<input name="flervalg" type="checkbox" value="sjekk 2" > sjekk 2
<input name="flervalg" type="checkbox" value="sjekk 3" > sjekk 3
<label for="gardinvalg">gardinvalg: </label>
<select name="gardinvalg">
<option value="valg 1">valg 1
<option value="valg 1">valg 2
<option value="valg 3">valg 3
</select>
send og nullstillknapp:
<input type="submit" value="send"> <input type="reset" value="nullstill">
</form>







Radio1 Radio2 Radio3

Sjekk 1 Sjekk 2 Sjekk 3


Send og nullstillknapp:

Her kan de som leser litt i eksempelet forstå hvordan de forskjellige elementene fungerer. Følgende er likevel verdt og kommentere;

  • ACTION funksjonen inneholder en hyperlinkreferanse til filen resultatet av formen skal sendes til for behandling. Dette kan også være en e-post adresse.
  • TARGET fungerer på samme måte som target under frames.
  • METHOD forteller måten resultatet skal sendes på, valget her er GET og POST, dette er HTTP standarder på måter og sende slik informasjon og hypertekst kall på. Det eneste som er verdt og kommentere om dem akkurat her, er at POST er mye mer kompleks enn GET.
  • ENCTYPE har sammenheng med MIME-standarder, med dette forteller vi det som tar imot resultatet hva som kommer, slik at det som kommer blir tatt imot på rett måte.
  • INPUT elementet kan ha følgende "natur": [TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE | BUTTON] disse velger vi imellom ved og endre TYPE attributten.
  • Som sagt så er forms litt mer avansert enn annen HTML, og de som har bruk for mer forståelse enn den enkle oversikten kan gå på W3C og laste den HTML spesifikasjonene der.

    Hvordan legge ut hjemmesiden

    kunne legge ut en hjemmeside må man ha ett område tilgjengelig på en server som er oppe døgnet rundt slik at folk skal få tilgang til den. For at gjester på hjemmesiden skal få lese hjemmesiden, men ikke eposten din, som som regel ligger på samme server, må dokumentene som hjemmesiden inneholder settes til å kunne leses av andre. Dette er en enkel men ikke idiotsikker måte og gjøre det på. Normalt så er det spesifikke instruksjonen om hvordan slikt skal gjøres hos de enkelte nettlevrandørene.

    Katalogen som åpningssiden til HTML-dokumentet som du har laget heter vanligvis html_public, public_html eller www_docs som den heter hos SOL. Man må logge seg inn på serveren og opprette en slik katalog og ønskede underkataloger. Man overfører deretter alle filene over til serveren slik at katalogstrukturen på serveren matcher katalogstrukturen som underligger katalogen som HTML-dokumentet ligger på. (ENKELT)

    Så kommer det som en del har problemer med, denne delen gjør filene dine tilgjengelig til alle som går inn på domenenavnet til din nett leverandør, og skriver brukernavnet ditt etter (eks. http:domenenavn.no/~brukernavn ).

  • På katalogen som har ditt brukernavn på serveren skriv.
  • chmod a+x [katalognavn på den katalogen som dokumentene ligger i].
  • Dette åpner katalogen for gjester. Det er mulig at du må gjøre slik på alle underkataloger av denne katalogen også.
  • Skriv deretter: chmod a+r [katalognavn på den katalogen som dokumentene ligger i]/*.*
  • Det er som sagt bedre at du leser spesifikke instruksjoner om dette på serveren der du skal legge hjemmesiden, fordi noen liker å gjøre det på sin egen måte.

    Stiltips

    Kommentarer

    Etter å ha lest alt dette så sitter du kanskje igjen med tanken: Må jeg HA alt dette ? og HVOR er alt det andre ? Svaret er at jeg har bare tatt med ting her som jeg selv har brukt og synes skal til for at en hjemmeside eller en WEB-presentasjon skal se bra ut. Følgende er noen kommentarer på det jeg har tatt med og det jeg ikke har tatt med.

    Frames har nå etter lang tid blitt med i HTML standarden. Nettlesere av nyere dato støtter frames nå på den måten at de vil se mer eller mindre lik ut på de forskjellige plattformer. Likevel vil jeg si at de fleste har litt for lett for å velge frames til sin side. Det er fullt mulig å lage pene/brukelige sider uten. Skal man bruke frames må man være sikker på at man bruker det helt ut. Da tenker jeg spesielt at man har ett bevisst forhold til target="" attributter på linker. Slik a dokumenter kommer opp i rett vindu.

    Fonter: Man må huske at alle fonter som man setter at et HTML dokument skal bruke, ligger lokalt hos brukeren og ser derfor ikke bestandig ut slik man regner med. Det samme gjelder egendefinerte farger. Det finnes mange plattformer som leser og tolker HTML på litt forskjellige måter. Derfor kan man ikke være helt sikker på hvordan sluttresultatet vil bli.

    Nå etter at Stylesheets har kommet så har det blitt større rom for å kontrollere utseende på skrift. Det er kanskje like greit for en nybegynner å lære seg stylesheets først som sist. Problemet er at de fleste nybegynnere sitter med nettlesere som ikke støtter stylesheets. Er du en av dem som bruker en nettleser som er tidligere enn 4.0 versjon råder jeg deg til å oppgradere.

    Jeg vil til slutt råde folk til å se på kildekoden på sider rundt om på nettet. Det er ofte svært lærerrikt.

    Videre lesing

    For de med litt ambisjoner på webfronten har jeg har lagt opp et utvalg av mine anbefalte bøker.

    Nysgjerrig på nyhetsbrev og markedsføring med e-post?

    Mail Pilots gir deg gratis rapport med tips om hvordan komme i gang med nyhetsbrev
    http://mailpilots.dmail.no/start/rapport/
    Gustav Aagesen
    1997 © 2006
    Hei mamma!