Axels HTML-skole

FOR NYBEGYNNERE
[Tilbake til hjemmesiden min]

Denne skolen ble laget lenge før det fantes gode nok såkalte WYSIWYG-editorer (What You See Is What You Get). Disse fungerer som f.eks. Word, og genererer HTML-koden ferdig for deg. I gamle dager derimot, måtte man kode i CMed, Notepad, Edit eller andre "rene" teksteditorer, og for å kunne lage gode sider måtte man kunne kode HTML. Dette mener mange at man ikke trenger lenger.

De har nok litt rett, fordi det kan være vanskelig å lære "ren" HTML fra bunnen. Så, hvis du vil lage en hjemmeside - kan det lønne seg å investere i Microsoft Frontpage, Macromedia Dreamweaver eller andre WYSIWYG-editorer. Du kan også laste ned mange mindre avanserte gratisversjoner fra nettet.

MEN, her får du også lære mange andre nyttige triks, som om hvordan du tjener penger på hjemmesiden din, om tellere, nyttige tips som bør følges, og hemmeligheten om hvordan man får flere besøkende! I tillegg vil det nok lønne seg å kunne litt om "grunnspråket" likevel, fordi WYSIWYG-editorenes HTML-kode ikke alltid er til å stole på.

Alt i alt: SETT I GANG OG LES!

Hva er HTML?

Språket som blir benyttet for å lage WWW-sider heter HTML.
HTML står for Hyper Text Markup Language.
Et HTML dokument består av ren tekst eller såkalt ASCII-tekst.
Derfor kan du bruke rene teksteditorer, som f.eks Notepad, Edit eller programmet "Enkel Tekst" til og kode HTML.
Men det enkleste er som du har lest å bruke f.eks Frontpage eller Pagemill.
Du kan i dag laste ned share - og freeware HTML-editorer fra nettet.
En veldig god shareware-versjon som fungerer i 30 dager er Homesite 4.5 som du kan laste ned herfra.
Hvis du vil prøve en "light versjon" av Frontpage, så følger programmet "Microsoft Frontpage Express" med Internet Explorer 4.0 og høyere.

Grunnleggende HTML-programmering

For å lære HTML-programmering er det lurt å ta utgangspunkt i et enkelt eksempel, for så å bygge på etterhvert.
Dette eksempelet er ett godt utgangspunkt:

En liten hjemmeside

For og lage sider for WWW, må de ende på HTM eller HTML
F.eks: index.html
For å se hvordan dette dokumentet tar seg ut må vi se på det i en nettleser,
f.eks. Internet Exploer, Netscape eller Opera.
Dette gjør vi med å skrive inn adressen i Adresselinjen, eller velge åpne fra Fil-menyen.

Ordene som er omsluttet av <.....> kalles "tags".
Det er disse som bestemmer utseendet på dokumentet ditt.
Det finnes mange forskjellige "tags", men jeg vil her kun komme inn på de mest sentrale.
De fleste har en begynnelse og en slutt på formatet <TAG>......</TAG>.
Skråstreken markerer slutten på en <tag>.
Alt som er imellom slutten og begynnelsen vil ha <tagens>egenskap/utseende.

Grafikk

En side uten grafikk er ikke noe serlig fancy.
Alle bilder på internett er i JPEG, PNG eller GIF-format,
Bildene bør ta minst mulig plass, så her er noen tips:

Hovedregelen er at JPEG er best for fotografier og bilder som er avhengig av god gjengivelse av farger og nyanser.
GIF og PNG er formatet som passer for enkel grafikk og bilder med få farger (f. eks tekst).

Gif bilder klarer kun og lagre fra 2 til 256 farger,
men du kan bestemme nøyaktig hvilke farger det skal være i "GIF-palettet".

GIF er et bildeformat som finnes hovedsaklig i to standarder: GIF87 og GIF89a.
Det er GIF89a som gir deg muligheten til og lagre i det formatet som kalles "interlaced"
og også muligheten til og lage en transparent farge (se overskriften).
Den transparente fargen vises ikke når bildet kommer opp i webleseren.
Interlace betyr at bildet lastes ned litt om gangen,
og webleseren viser da et mindre "kornete bilde" etterhvert som det lastes ned.
GIF bruker også en ikke-ødeleggnde form for komprimering.

JPEG klarer mange tusen farger, men bruker en ødeleggende form for komprimering.
Skal du f. eks ha et bilde av deg på hjemmesiden, eller et bilde med jevne nyanser er JPG det lureste alternativet.

Men det nye standardformatet PNG (uttales Ping),
får filstørrelsene ned mellom 30-40 prosent.
PNG bruker en billedkomprimering som ikke ødelegger, og de inneholder automatisk gammakorrigering.
Dette innebærer at bildet presenteres likt på ulike maskiner.
Dessuten finnes det mulighet til å legge inn nøkkelord for søkemaskiner,
opphavsinformasjon og annet i filen.

Det er bare nye weblesere støtter PNG,
så når så godt som ingen kjører på eldre lesere enn Explorer og Communicator 4, vil PNG bli mere utbredt enn det er nå.

PNG er ikke en konkurrent til JPG, men må heller sees på som et alternaltiv til GIF.

En tom side

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Angir hvilken HTML-versjon du bruker (dette er 3.2)
<HTML>
Markerer starten av HTML-siden
<HEAD>
<TITLE>Tittelen på hjemmesiden.</TITLE>
Skriv inn tittelen på dokumentet.
Teksten vises på toppen av web-leseren.

<META name="description" content="Her skriver du inn det du vil at det skal stå når søketjenestene finner ditt dukument">
<META name="keywords" content="Her skriver ordene du vil at søketjenestene skal klaffe på adskilt med komma og space. F.eks: Ditt Navn, koder, fotball">

</HEAD>

<BODY BGCOLOR="white" TEXT="black" LINK="blue">
BGCOLOR definerer bakgrunnsfargen. Skal du bruke en av de vanlige hovedfargene,
skriver du rett og slett navnet på bakgrunnsfargen (på engelsk, f.eks: blue, black, red eller cyan).
Vil du spesifisere fargen mer eksakt, må du bruke den heksadesimale koden for fargen.
Vil du ha denne koden til en spesiell farge, kan du finne det ut med Paint Shop Pro!
Etter LINK=" skriver du fargen til linkene.
Hvis du vil ha et bakgrunnsbilde, kan du bytte ut BGCOLOR="farge"
med BACKGROUND="filnavn.gif".
Bakrunnsbildet repeteres til teksten er slutt.

Mellom <BODY>og </BODY>tagene skriver du det du vil ha i selve dokumentet

</BODY>
</HTML> Markerer slutten av HTML-dokumentet

(ord i kursiv er bare en forklaring, ikke en del av HTML-koden)

De viktigste tagene

Start-tag:	Slutt-tag:	Info:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">		HTML er egentlig bare et bekvemt samlingsnavn for mange forskjellige standarder. Det er viktig for deg å holde deg til èn HTML-standard og være klar over hvilke koder som hører til den. Du kan få problemer hvis du går utenfor den bestemte standarden. Det finnes en rekke eldre versjoner og en mengde ulike dialekter som er spesialtilpasset forskjellige weblesere. Alle kodene du hører om i denne skolen er tillatt i HTML 3.2. Du angir enkelt hvilken HTML-versjon du bruker ved å sette inn korrekt DOCTYPE-koden i begynnelsen av dokumentet. Den aller siste versjonen er 4.0. Jeg har droppet den her fordi den introduserer mye nytt - som også er spennende og bedre enn i tidligere versjoner, men den er også mer avansert og vanskeligere å lære. En middles stor personlig hjemmeside vil klare seg helt fint med versjon 3.2 (kalles ofte for Wilbur).
<IMG SRC="bilde1.gif" HEIGHT="høyde" WIDTH="bredde">		Bildet "bilde1.gif" vises i browseren. Du bør også fylle inn høyde og bredde ved hjelp av HEIGHT="tall" og WIDTH="tall".
<A HREF="http://www.microsoft.com"> Klikk her!	</A>	Hvis du trykker på "Klikk her"-knappen, så kommer du til Microsoft`s hjemmeside, du kan også lenke til en fil tilhørende hjemmesiden din, slik: f.eks: <A HREF="fotball.html">Gå til fotballsiden min!</A>
<H1>	</H1>	Det som skrives mellom <H1> og </H1> blir i stor overskrift. Du kan også bruke H2-H6, der H6 er minst.
<BR>		Linjeskifte
<P>	</P>	Nytt avsnitt (det er ikke nødvendig å bruke tagen </P> for å avslutte den)
<FONT SIZE=4 FACE="Arial">	</FONT>	<FONT SIZE= kan være fra 1-7 der 1 en minst, og 7 størst. I FACE= kan du skrive skrift-typen (i dette tilfellet Arial), hvis ikke brukeren har skriften du oppgir, går den tilbake til standard-skriften. ("Times New Roman" i IE, og "Arial Narrow" i Netscape) Du kan også bruke COLOR"#555555" i font tagen. Bytt 555555 med navnet til fargen (engelsk), eller fargekoden du vil ha.
<I>	</I>	Kursiv tekst. <B> er fet tekst</B> <U> er understreket</U>
<HR>		En horisontal linje over hele skjermen
<A HREF="MAILTO:kulesider@glemsk.net"> Send en mail!	</A>	Hvis man trykker på "Send en mail!", så kan man sende en mail til adressen kulesider@glemsk.net
<CENTER>	</CENTER>	Gjør alt inne i tagen sentrert

Småtips

Ha en "Counter" på hjemmesiden din!
En teller, eller en "Counter" er et bilde som kalles opp til siden, og for hver gang siden lastes ned økes bildet med et tall (se nederst)
c2i.net tilbyr dette gratis til alle sine abonnenter.
Du kan velge mellom en rekke stiler, og HTML-koden for telleren finner du på home.c2i.net
Hvis du ikke har c2i.net tilbyr din nett-leverandør ganske sikkert en slik. Ring dem og spør! Har de ikke dette tilbudet, anbefaler jeg Fastcounter.
Kall førstesiden din "index.html"
Dette er blitt en gjennomført standard, så det er greit og holde seg til den.
Du kan dessuten endre andre sider, uten at det påvirker stedets struktur.
Hos de fleste nett leverandører, inkludert c2i.net, må du kalle førstesiden "index.html", for at du skal få adressen "home.c2i.net/ditt.brukernavn/"
Ikke skriv hele søkeveien!
Hvis du skal kalle opp et bilde som ligger i samme katalog som hjemmesiden din,
skriv aldri hele søkeveien, kun <IMG SRC="bilde.jpg" HEIGHT ="høyde" WIDTH="bredde">
Det blir vanskeligere å vedlikeholde sidene,
og mange kan få problemer med og navigere mellom sidene.

Men du skal selvfølgelig skrive hele søkeveien hvis bilde ligger et annet sted på nettet.
F.eks: <IMG SRC="http://kulesider.glemsk.net/logo.gif WIDTH=131 HEIGHT=36">.
Bruk fil-endelsen html
Det finnes i dag ingen grunn til og bruke fil-endelsen htm.
Bruk html!
Ikke glem og fortelle hvem du er!
Ikke gjem deg bort i sidene dine.
Fortell hvem du er, men ikke vær for personlig heller!
Du bør ha en META TAG på siden din!
Koden plasserer du mellom </TITLE> og </HEAD>, og ser slik ut:

<META name="description" content="Her skriver du inn det du vil at det skal stå når søketjenestene finner ditt dukument">
<META name="keywords" content="Her skriver ordene du vil at søketjenestene skal klaffe på adskilt med komma og space. F.eks: Ditt Navn, koder, fotball">
Se hvordan andre har kodet siden!
Hvis du finner en bra side på nettet, som du kunne lært noe av,
klikk bare på "Page Source" i "View" - menyen (Netscape Navigator)
eller "Source" i "View" - menyen. (Internet Explorer)

Gjør hjemmesiden din tilgjengelig
Når du er fornøyd med hjemmesiden din kan du gjøre den tilgjengelig på nettet.
De fleste nett-leverandører tilbyr 10MB plass, hør med dem om det.
Hvis du ikke har plass til dette med abonnementet ditt (eller om du surfer på skolen etc.), er vil jeg anbefale start.no, et meget bra, norsk alternativ.

Her følger instruksjoner for deg med c2i.net-abbonement fra Tele2 (har du en annen leverandør - skjekk sidene deres):

For å legge ut sidene på c2i.net trenger du et FTP-program.
Har du PC, er CuteFTP et bra alternativ. Bruker du Mac, anbefaler jeg Fetch.

Slik legger du ut sidene på c2i.net med CuteFTP

Når du starter CuteFTP, starter du i en del av programmet som heter 'Site Manager'. Trykk da på "add site", for å lage en ny oppkobling.
Så må du taste inn følgende:

Site label   Hjemmeside på c2i.net
Host adress   home.c2i.net
User ID   Ditt brukernavn
Password   Ditt passord
Trykk på OK
Velg "Hjemmeside på c2i.net", og trykk "Connect"
Når du nå er koblet opp, kommer du til og se innholdet på harddisken til venstre, nesten på samme måte som Utforskeren i Windows eller Finder under MacOs.
Klikk deg fram til katalogen du har lagt HTML filene i, og marker alle filene som tilhører hjemmesiden din.
Dra så filene du har markert over på høyre side, dobbeltklikk hvis det bare er en fil du skal overføre.
Nå har du en hjemmeside! For å se på den drar du nå til:
http://home.c2i.net/ditt.brukernavn/ (bytt ut "ditt.brukernavn" med ditt brukernavn, og husk at førstesiden skulle hete "index.html"!)

Hvordan få besøkende

For å få flere besøkende til hjemmesiden din, må du spre det glade budskap om at den eksisterer.
Markedsføre den, med andre ord. Her har du et par tips for hvordan du gjør nettopp det:

Registrer deg
Det første du bør gjøre etter at du har lagt opp sidene dine, er å registrere dem hos søketjenestene.
Dette kan du gjøre hos alle søketjenester, men det enkleste er å bruke en masseregistrerer,
en tjeneste som registrerer siden din hos mange forskjellige søketjenester på en gang.
De fleste av disse koster penger, men du kan registrere siden din i de 10 mest brukte søkemotorene direkte fra min HTML Skole, og det er helt gratis! Fyll ut skjemaet under (husk på META-tagen du har lært om), og trykk på "Send".

Den eneste store søkemotoren du ikke får registrert deg i med skjemaet over, er Yahoo!
Dette er fordi den er katalog-basert, og du må velge riktig katalog først. For å registrere siden din manuelt i Yahoo! - trykk her.

Er siden din norsk, er det allikevel aller viktigst å få registrert seg hos disse søkemotorene:

For registrering i Kvasir, trykk her.
For registrering i Yahoo! Norge, trykk her.
For registrering i Origo trykk her.

Bannerbytte
Når du er gjennom det første steget; registrert hjemmesiden din, er det på tide med neste steg:
Bannerbytte med andre websteder. Det går helt enkelt ut på at du, mot å vise annonsebannere fra andre hjemmesider, får ditt banner plassert på deres sider. Den beste bannerbytte-tjenesten er Link Buddies. Det eneste du "betaler" er å vise andre medlemmers bannere på dn hjemmeside. Hvor mange ser banneret ditt? Det kommer faktisk an på hvor mange som besøker sidene dine. Link Buddies har et poengsystem hvor du får 3 poeng hver fjerde gang du viser et banner (dvs. når noen surfer innom siden din). Viser du 4000 bannere får du altså 3000 poeng. For hvert poeng du samler, får du ditt eget banner publisert èn gang på noen av de andre medlemmenes hjemmesider. En annen positiv ting med Link Buddies er at du får banneret ditt vist 500 ganger når du melder deg inn, og 7 hver gang siden din er aktiv! Det vil si at selv om siden din ikke er så populær, vil du få vist banneret ditt mange ganger! Hvis du i tillegg har et fint banner som trekker til seg klikk, vil det si at du kan få en drastisk økning i antall besøkende på hjemmesiden din! Det du trenger av informasjon finner du på deres hjemmesider. Er siden din på Norsk, er det sannsynligvis lurere å melde deg inn i Hyperbanner Norge. Du får ikke vist banneret ditt så mange ganger som hos Link Buddies, men til gjengjeld viser du bare bannere på og for norske sider. Trenger du et banner som ser fint og attraktivt ut, kan jeg sikkert lage et fint et til deg! Bare mail meg, og jeg skal se hva jeg får til. (setter pris på at du linker til meg :)

Tjen Penger!

Det er lettere enn du tror å tjene penger på hjemmesiden din! Rundt om kring på nettet er det mange firmaer som tilbyr videreformidling av reklamebannere - og jeg har testet mange av dem opp gjennom tidene. Den jeg er mest fornøyd med, og bruker nå - er TradeDoubler. Det beste av alt er at de har kontorer i både England og Norge, noe som betyr at du kan velge mellom både engelsk - og norskspråklige bannere!

Hvor mye du får betalt, varierer mellom hvilke bannere du velger. Et eksempel er å annonsere for en nettbuttik - og få 2 kr. per klikk på banneret, og 20 kr. per klikk som fører til salg/registrering. TradeDoubler lar deg velge mellom flere forskjellige selskaper å annonsere for, blant annet Nettavisen, CDON, Funshopper, Letsbuyit, Dropzone og bol.com. Hvordan bli medlem: Skriv in e-postadressen din i boksen ovenfor og trykk på "send", så er du i gang! Eventuelt kan du følge denne linken for å gå til sidene deres.

Andre nyttige ting på veien:

Paint Shop Pro	Meget bra shareware grafikkprogram!
Ulead Gif Animator	Program for animering av GIF-filer
HTMLhelp.com	Mye nyttig HTML-info.
W3C	Står bak HTML- og andre websandarder.
Homesite	Min klare favoritt blant HTML editorene

Gi og ta

Hvis denne siden har inspirert deg / gitt deg hjelp til og lage en hjemmeside,
håper jeg du gjør meg den tjenesten og legger til følgende nederst på din hjemmeside:

<CENTER>Siden er laget med støtte av 
<A HREF="http://kulesider.glemsk.net/">
<IMG SRC="http://kulesider.glemsk.net/logo.gif" WIDTH=131 HEIGHT=36 BORDER=0 ALIGN=MIDDLE ALT="cosmos KULE SIDER"></A>
</CENTER>

Slik ser det ut i browseren:

Siden er laget med støtte av

Besøkende siden 25 mars 1998: