|
|
|
|
|
|
Skrevet av Anders Lothe
Sist oppdatert 23. mai 2004
HTML - Hva er det?
For å lage en hjemmeside bør du kunne HTML-kode. HTML står for Hyper Text Markup Language og er språket
nettleseren din leser når den skal vise en nettside.
Trykker du på Vis (view) og deretter Kilde (source) i Internet Explorer vil
HTML-koden til sida du ser på vises. For VG.no og andre store nettsider vil koden være meget kryptisk og
vanskelig å forstå.
HTML-koden er satt sammen av "tagger". En tag kan f.eks. se slik ut: <BR> Denne taggen
forteller nettleseren at den skal lage en ny linje. Akkurat som om du hadde trykket på
ENTER/RETURN/LINJESKIFT i en tekstbehandler.
For å skrive HTML-kode må du bruke en tekstbehandler. Notisblokk er den enkleste av de, men du kan også
bruke mer avanserte tekstbehandlere som f.eks. TextPad. Kan lastes ned gratis fra
http://www.textpad.com/ Det som er veldig
viktig når du laget HTML-filer er at de må slutte med .html eller .htm. Så når du lagrer fila skriver du
ikke filnavn.txt, men filnavn.html.
Du lurer kanskje på hvorfor jeg bruker notisblokk i stedet for å bruke Frontpage, Word og andre enklere
programmer for nettdesign. Jeg bruker notisblokk fordi den ikke har noen begrensninger. Lager du en
nettside i Frontpage vil du på noen områder oppleve at du ikke kan gjøre alt som notisblokk kan gjøre.
En annen grunn er at du ikke lærer HTML-språket når du bruker Frontpage eller Word, men skal du lage
en god nettside må du ha innsikt i HTML, samme om du bruker verdens beste nettdesignerprogram.
Min første nettside
Vi begynner med en enkel og grei nettside. Den skal ha en tittel og en linje med tekst i seg. Koden
er slik:
Legg merke til første og siste linje. Her har vi to tagger. Den første taggen er <HTML> og
den siste er </HTML>. Den første taggen setter starter en tilstand, mens den siste taggen
avslutter denne tilstanden. I dette tilfellet sier koden til nettleseren at den i den første linja skal
starte en HTML-tilstand, og i den siste linja sier koden at nettleseren skal forlate HTML-tilstanden.
Våre sider starter og avslutter med en HTML-tag. Legg merke til at den avsluttende taggen er lik den
startende taggen, men den inneholder en skråstrek. De fleste tagger har en starter og en avslutter, men
noen tagger har bare en starter og ikke en avslutter. Et eksempel på dette er <BR>.
Ser vi videre på sida vår ser vi at den har en HEAD-tag og en BODY-tag. Dette er måten en HTML-side er
bygd opp på. En nettside har altså et HODE og en KROPP. Hodet inneholder diverse informasjon og
innstillinger om nettsiden. I dette tilfellet inneholder hodet en tittel på sida som vises øverst i
vinduet.
TITLE-taggen setter tittelen på nettsiden som vises øverst i viduet på nettleseren.
Kroppen inneholder i dette tilfellet bare tekst, men det er i dette området selve nettsiden skal kodes.
Linker
En nettside har som oftest en link eller flere. Linkene kan være til andre nettsider, eller nettsider som
ligger lagret på samme plassering som siden du er på. Vi legger inn to linker på sida vår:
Vi har nå plassert tre linker inne i body-taggen. Det vil si at det skal vises tre linker på nettsida vår.
En link lages ved å lage en A-tag. A-taggen trenger diverse informasjon for å vite hvilken side det skal
linkes til, og det skrives inne i taggen som href="link". Legg merke til at du må skrive inn
http:// for linker til andre nettsteder. Sider som er lagret på samme sted som du har lagret siden
du linker fra trenger bare filnavnet, som i den andre linken. Den tredje linken linker også til en side
lagret på samme plassering som denne siden, men den er lagret i en undermappe, mappe, og enda en undermappe,
mappe2. I linken til VG har vi også lagt inn target=_blank. Dette betyr at siden skal vises i et
nytt vindu. Hadde vi skrevet target=vg hadde også siden kommet opp i et nytt vindu, men hvis du
hadde en ny link med samme target ville siden åpnes i det samme vinduet som VG ble åpnet i.
Hvis du har laget en side med linker vil du kanskje oppdage at linkene får forskjellig farge. En farge for
en ubesøkt link, en farge for linker du akkurat har valgt og en farge for linker du har besøkt tidligere.
Disse fargene kan forandres på. Vi må da legge inn informasjon i BODY-taggen. Slik:
link=green alink=green vlink=green forteller nettleseren at alle type linker skal være grønne. Dette
er henholdsvis fargen til ubesøkt link, aktiv link og besøkt link.
Farger
Vi har til nå brukt fargen green for linker. I HTML-språket kan vi velge mellom å bruke disse fargene:
Red, darkred, lightred, blue, darkblue, lightblue, green, darkgreen, lightgreen, white, black, gray, lightgrey,
darkgray, magenta, purple, pink, cyan, darkcyan, yellow, orange, og sikkert noen til. Jeg kommer ikke på flere
i slengen. I stedet for å bruke de faste fargene kan du lage dine egne farger. I stedet for green skriver
du da #000000 for svart og #FFFFFF for hvit. Disse fargene begynner alltid med et #-tegn. Fargen
er sammensatt av tre deler: de to første sifferene er mengde rødfarge, de to midterste sifferene er mengde
grønnfarge og de to siste sifferene er mengde blåfarge. Legg også merke til at tallene er hexadesimale. Dette
betyr at du teller slik: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12, 13, osv. Du teller altså
forbi 9 og bytter ut 10 med A, 11 med B, 12 med C, osv. Etter F kommer 10. Etter 19 kommer 1A, 1B, 1C, 1D, 1E,
1F og 20. Slik fortsetter det helt opp til FF. Dette gir 256 forskjellige verdier på to siffer. Husk å skrive
begge sifferene, altså 01 likevel om verdien av tallet bare er 1.
Eksempler på farger: #FF0000 gir rød. #00FF00 gir grønn. #0000FF gir blå. #FFC705
gir oransje. #824DFB gir en blå-lilla farge. Eksperimenter litt med farger slik at du får det inn
i blodet.
Når du lager nettsider er det viktig å ikke overdrive bruken av farger. Ikke bruk mørk farge på mørk bakgrunn.
Vil du lære god fargebruk bør du kikke litt på Mircosoft Windows. De har en konsistent bruk av farger. Du ser
aldri mørke farger på mørk bakgrunn, sterke farger som nesten blender deg, og de forandrer ikke fargene når
du går fra et vindu til et annet. De holder seg til en standard, og fargene skal ikke være dominerende på
skjermen. Derfor bruker Microsoft mye grått, svart og hvitt. Anonyme farger som holder seg i bakgrunnen.
Sterke farger bør du spare til viktige meldinger. En leser oppfatter mye enklere en advarsel som er skrevet
i rød tekst på grå bakgrunn, omgitt av vanlig svart tekst på grå bakgrunn.
Fonter
Vi vil gjerne ha en annen type skrift på nettsiden vår. Vi må da bruke FONT-taggen:
Her er det en del å ta tak i. BODY-taggen har nå fått inn bgcolor som angir bakgrunnsfarge på siden
og color som angir skriftfarge.
Vi har satt inn en FONT-tag. Noe av det den kan gjøre er å angi skrifttype. Skrifttypen angis i
face=. Vi har valgt Verdana som skrifttype. Det er viktig å ikke bruke ukjente skrifftyper på
nettsiden din. Forskjellige maskiner har forskjellige skrifttyper installert. De mest brukte er Times New
Roman, Arial, Verdana og Courier New. Du bør også holde deg til disse skrifttypene.
size=7 har også blitt satt inn for å angi skriftstørrelsen. Verdier som kan velges er fra og med
1 til og med 7.
color=blue har også blitt satt inn for å vise at FONT-taggen også kan bestemme farge å teksten.
Legg også merke til at vi har satt inn en FONT-tagg inne i FONT-taggen med blå skrift. Den innerste FONT-taggen
bruker da egenskapene fra FONT-taggen utenfor, men overskriver egenskapene som er satt i seg selv. Når alle
FONT-tagger har blitt avsluttet brukes standard skrifftype, farge og størrelse, som nederst på siden.
Vi bruker også tre nye tagger i denne koden. Disse er: <B>, <I> og <U>
som henholdsvis slår på fet skrift, kursiv skrift og understreket skrift. <BR> har også blitt
brukt for å vise linjeskift.
Bilder
Det kan kanskje være fint med noen bilder på nettsida vår også. La oss sette inn et bilde:
Vi kikker først på BODY-taggen som nå har fått inn en background-egenskap. Denne sier at vi skal ha et bilde
som bakgrunn. Vi angir linken til bildet. Ligger bildet plasser på samme sted som nettsiden din trenger
du bare oppgi filnavet. Bildet vil bli repetert over hele nettsiden når det ikke er stort nok til å dekke
hele siden.
Vi har lagt inn tre bilder. Bilder lages ved hjelp av en IMG-tag. src angir linken til bildet. Vi kan også
angi width (bredde) og height (høyde) på bildet. Bredden og høyden blir oppmålt i antall pixler, eller punkt.
Vi kan også angi størrelsen på bildet i prosent, men dette er prosent av nettsiden. Hvis vi skriver
width=100% vil bildet bli like bredt som nettsiden. Hvis ikke height-egenskapen er satt vil bildet
bli satt i korrekt størrelsesforhold til den angitte høyden.
Justering av tekst
Å plassere bilder og tekst fra venstre til høyre er ikke alltid ønskelig. Du vil kanskje midtstille eller
høyre-justere en linje på sida di. Ikke noe problem:
Her bruker vi DIV-taggen for å justere teksten og eventuelle bilder som taggen omfavner. Vi setter
align-egenskapen til hvor vi vil ha teksten vår. Vi har disse alternativene: left, right, center og
jusify. Altså venstre, høyre, sentrert og tilpasset. Tilpasset tekst vil si at nettleseren lager
større mellomrom mellom ordene for å få ordene jevnt fordelt utover hele linjen. I stedet for <DIV
align=center> kan du også bruke <CENTER> og </CENTER> for å sette
tekst eller bilder i en midtstilt posisjon.
Formatering av kode
Som du kanskje har sett av HTML-koden til nå har vi brukt innrykk. Dette er ikke nødvendig for
nettleseren. Du kan gjerne skrive en hel nettside på en enkel linje. Nettleseren bryr seg ikke.
Du kan også skrive ett tegn på hver linje. Det er du som bestemmer hvordan koden skal se ut, men
det er viktig å holde orden på koden. Da får du lettere oversikt og slipper å bruke lang tid på å
lete deg frem til stedet du skal forandre koden. Det kan også være lurt å hoppe over noen linjer
for å gi koden litt mer luft. Det gjør det også letter å finne frem. Legg merke til at om du f.eks.
skriver norw gjør et linjeskift i koden og skriver ay på neste linje vil du få et
mellomrom i teksten slik at resultatet blir norw ay.
Lager du 1000 linjeskift får du ikke 1000 mellomrom, men bare ett. Du får også bare laget ett mellomrom
mellom ord. Vil du ha større mellomrom må du sette inn en spesiell kode for mellomrom. Den koden er:
Tabeller
Tabeller høres kanskje ut som om det er noe som bare brukes i presentasjon av tallmateriale, osv.
Ja, det kan brukes til det, men det kan brukes til så mye annet også. Du kan bruke tabeller for å
lage kolonner og spalter på nettsida di. Du kan dele opp sida di i forskjellige deler slik at teksten
har sine områder. Vi tar et eksempel:
Vi lager her en TABLE-tag. Taggen starter en tabell. Tabellen har egenskapene border, width, height, bgcolor,
background, cellspacing og cellpadding. Border forteller hvor stor rammen på cellene i tabellen skal være. En
celle er ett felt i tabellen. Width og height forteller om bredde og høyde. Som i IMG-taggen kan det velges
mellom punkter og prosent. Velger du 25% prosent vil nettleseren gjøre tabellen/kolonnen/raden 25% av celllen
tabellen ligger i. Hvis ikke tabellen ligger i en cell, som i dette eksempelet, vil nettleseren gjøre
tabellen/kolonnen/raden 25% av nettsiden.
Legg merke til den andre TD-taggen. Den har egenskapen width=*. * betyr at den bruker plassen som blir
til overs. Hvis ikke width-egenskapen hadde blitt satt ville kolonnen brukt så mye plass den trengte, men ikke
mer
Bgcolor har akkurat samme funksjon som i BODY-taggen. Den bestemmer bakgrunnsfarge. Background bruker
bakgrunnsbilde i stedet for farge. Cellspacing forteller tabellen hvor mange punkter det skal være mellom
cellene. Cellpadding forteller hvor mange punkter det skal være fra rammen til innholdet i cellene.
Legg merke til hvordan tabellen er oppbygd. Først en TABLE-tagg, deretter en TR-tagg og inne i TR-taggen en
TD-tagg. TABLE-taggen viser hvor tabellen skal lages. TR-taggen forteller hvor en rad skal lages. TD-taggen
viser hvor kolonnen skal lages. Husk alltid å bruke denne rekkefølgen. Lager du en TR-tagg inne i en TD-tagg
vil det bare bli feil.
I den siste TD-taggen har vi skrevet colspan=3 som en egenskap. Dette er fordi vil vil at kolonnen skal
strekke seg over tre kolonner. Lager du tre kolonner i første rad må også alle andre rader har tre kolonner.
Derfor må vi skrive colspan=3 for å få laget en kolonne hvor nettleseren krever tre kolonner.
I den siste TR-taggen har vi skrevet align=right valign=bottom. Dette betyr at teksten i denne raden
vil bli høyrejustert. Valign betyr vertical-align, vertikal justering. Vi har her satt den til bottom. Dette
vil føre til at teksten vil bli plassert nederst i høyre hjørne. Valign-verdier er: top, bottom og center.
Skal du lage en tabell med bare en cell må du likevel skrive en TABLE-tagg, en TR-tagg og en TD-tagg. Skal du
bare ha en rad må du gjøre det samme. En tabell skal alltid ha minst en TR-tagg og en TD-tagg.
Ved bruk av tabeller kan vi nå lage spalter på nettsiden vår. Ved bruk av DIVs justify egenskap får vi også
fylt ordene utover hele linjen:
For å få fylt tekst og tabeller helt ut til kantene på nettleseren må vi inn i body-taggen og angi noen
egenskaper. Disse er: leftmargin=0 topmargin=0. Dette setter venstremarg til 0 punkter og toppmarg
til 0 punkter. Da får vi utnyttet hele siden.
Frames
I stedet for å bruke tabeller kan vi dele opp siden vår i frames. Frames deler opp en nettside ved hjelp av
flere nettsider. Hver frame viser altså en nettside hver. Du kan f.eks. vise VG på venstre halvdel av skjermen
og Dagbladet på andre halvdel. Mest brukt er kanskje metoden hvor du lager en egen nettside med meny for å
vises på venstre del av skjermen. Vi lager et eksempel:
I denne nettsiden plasseres ikke body-taggen etter head-taggen. Dette gjør vi fordi denne siden er oppbygd av
frames. Vi starter først med å sette inn en frameset-tag som forteller nettleseren at vi skal lage en side
med frames. Frameset har ekenskapen cols="200,*" som sier at vi skal lage to kolonner. Kolonnen til
venstre skal være 200 punkter bred, mens kolonnen til høyre skal bruke resten av siden. Du kan også lage tre
eller flere kolonner hvis du vil det. frameborder=0 framespacing=0 forteller at rammen til framene skal
være 0 punkter brede og spacing (mellomrommet) mellom framene skal være 0 punkter. framecolor=black
er fargen til rammen, men siden den er på 0 punkter betyr ikke dette noe særlig her.
I framset-taggen lager vi først en frame. Den setter inn med en frame-tag. Vi gir framen et navn. Dette gjør
vi for at vi i A-taggene, som er tag for link, kan sette target=meny for at siden det linkes til skal
vises i denne framen. Vi vi at en link skal vises over hele nettleseren og fjerne framene skriver vi
target=_parent i A-taggen. I src="meny.html" linkes det til nettsiden som skal vises i framen.
marginwidth=0 marginheight=0 forteller hvor stor margen i framene skal være. scrolling=auto
sier at hvis innholdet i framene blir større enn størrelsen til framene skal nettleseren automatisk sette
inn rullegardinger. frameborder=no sier at vi ikke vil ha rammer i framene. noresize sier at
vi ikke vil at leseren skal få forandre på størrelsen til framene våre.
I høyre kolonne vil vi ha to nye frames. Vi lager da et nytt frameset, men denne gangen skriver vi
rows="100,*". Dette gjør vi for å få en frame over den andre.
I det ytterste framesettet har vi også lagt inn en NOFRAMES-tag. Innholdet i denne taggen vises for nettlesere
som ikke støtter frames. Innholdet i NOFRAMES-taggen er en BODY-tag, altså en egen liten nettside.
Frames har sine fordeler og ulemper. Fordel: Lager du en meny i tables i stedet for i frames må du inn på hver
eneste fil som har meny for å forandre på menyen når denne skal forandres. Har du frames trenger du bare gå
inn på en fil. Du kan vise eksterne nettsider, men likevel ha din egen meny tilgjengelig. Ulemper: Hvis noen
har en link på den eksterne siden, og targetet i linken er satt til _parent forsvinner alle framene du hadde
fremme. En annen ulempe er at du får flere enn en rullegardin å flytte på når du skal nedover på siden. Enda
en ulempe er at ikke alle nettleser støtter frames, selv om jeg tror dette er ganske få. Det er mulig det bare
er eldre nettleser som ikke støtter frames i dag. VG, Dagbladet og andre aviser bruker ikke frames, men
nettbutikker som f.eks. http://www.multicom.no/ og
http://www.psdata.no/ liker å bruke frames. Noen
hjemmesider har også bitt seg fast i frames-trenden.
Iframe
Vil du ha en frame som kan plasseres på siden som et hvilket som helst bilde kan du benytte deg av
IFRAME-taggen:
Ingen nærmere forklaring skal være nødvendig nå.
Avsluttende ord
Behersker du alt dette beherkser du HTML godt. Skal du gå videre etter dette anbefaler jeg å lære PHP og CSS.
Takk for at du leste dette, og jeg håper du ble litt klokere!
|
|
|
|
|
|
| "Jeg er for dødsstraff. Den som har begått en forferdelig forbrytelse, må få en passende straff. Så han lærer til neste gang."
Britney Spears |
| | | | |
| | Du må være innlogget for å skrive på tavla. |
| | | | |
|
