Av Lars Verket
HTML er en forkortelse for HyperText Markup Language.
Ved hjelp av dette "styrespråket" skapes det struktur i et dokument. HTML forteller hvilke deler av teksten som skal være overskrift, hva som er et bilde, hvilke deler av teksten som hører sammen osv.
Hypertekst/Hypermedia: Forskjellige deler av dokumentene er lenket til andre dokumenter. På denne måten dannes en vev av dokumenter (WWW).
Andre forkortelser:
Hypertekst strekker seg historisk tilbake til midten av 40-årene, men det var ikke før i begynnelsen av 90-årene at det virkelig fikk sin praktiske anvendelse.
I 1945 beskrev Vannevar Bush en maskin som ble kalt MEMEX, og som arbeidet mekanisk i forbindelse med mikrofilm. I 1965/66 kommer begrepet hypertekst, og det er Theodore H. Nelson som er opphavsmannen. Han bruker visjonen til Bush, men istedet for mikrofilm vil han ha datamaskiner.
På slutten av 80-tallet ble det forsket en del på lukkede hypertekst-systemer (f.eks. HyperCard til Macintosh), men det var først ved lanseringen av Mosaic (den første www-leseren), og HTML 1.0 at det virkelig ble fart på sakene.
Hovedgrunnen til dette er den enorme mengden med informasjon som blir gjort tilgjengelig gjennom en åpen standard. Hver ny aktør tilfører ny verdi til nettverket, og på denne måten har Internett vokst noe enormt de siste årene. I dag er langt over 10 millioner maskiner tilknyttet Internett, og HTML er viktig for publiseringen av informasjonen. Ved at det finnes en standard for HTML kan alle lese hverandres dokumenter.
Farsrollen til HTML blir tilskrevet Tim Berners-Lee ved CERN. Mannen bak Mosaic var Marc Andreesen (akkurat passert 20), og han er også nøkkelpersonen bak dagens Netscape.
HTML definerer forskjellige elementer på siden, f.eks. tittel, overskrift, pragraf, bilde osv. Elementene kan struktureres slik at viktige overskrifter blir større enn mindre viktige osv. På denne måten bygger HTML opp et strukturert dokument.
Struktureringen skjer ved hjelp av TAGer. Disse står inne i <TAG>. Mange av TAGene har en start- og sluttTAG:
<TAG>Her er det som blir definert.</TAG>
TAGene kan ha forskjellige attributter som gir tilleggsinformasjon til www-leseren om hvordan elementet skal behandles. Eksempler på vanlige attributter er: justering høyre/venstre/senter, farger, størrelse osv.
Til slutt har vi standardene. HTML har gjennomgått tre standardiseringer så langt. Dette er versjon 1.0, 2.0 og 3.2. HTML-dokumentene skal begynne med en kode som forteller hvilke standard de er kodet etter. Disse ser slik ut:
Strukturen i et HTML dokument er som følger:
Strukturen på dokumentet avgjøres av følgende TAGer:
Vi har nå en side som ser slik ut:
<HTML>
<HEAD>
<TITLE>Dette er en testside</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Denne siden vil ikke vise noe annet enn "Dette er en testside" i toppen av www-leseren. I neste punkt ser vi nærmere på TAGer som kan plasseres i BODY.
Ikke fortvil over alle kodene. Det finnes mange programmer som automatiser mye av kodejobbingen! Vi kommer tilbake til disse helt til slutt i kurset.
Til slutt: Det er tre tastekombinasjoner som er et "must" når vi skal jobbe videre i dag. De er:
På den første siden vi lager, skal vi bruke følgende TAGer:
Vi kan nå utvide siden vi lagde over - ved å sett inn innhold i BODY:
<HTML>
<HEAD>
<TITLE>Vår første HTML-Dokument</TITLE>
</HEAD>
<BODY>
<H1>VELKOMMEN!>
<P>Detteer vår <B>første</B> og hittil <I>beste</I>side. <BR>Følg med, det kommer flere!</P>
<HR><ADDRESS>Denne siden ble laget av meg i mai 1997</ADDRESS>
</BODY>
</HTML>
Denne siden vil se slik ut i www-leseren.
Overskrifter brukes på samme måte som i vanlig dokumentbehandling. Det viktigste får overskrift 1 osv.
| Koden ser slik ut: <H1>Overskrift 1</H1> <H2>Overskrift 2</H2> <H3>Overskrift 3</H3> <H4>Overskrift 4</H4> <H5>Overskrift 5</H5> <H6>Overskrift 6</H6> |
Resultatet blir slik:Overskrift 1Overskrift 2Overskrift 3Overskrift 4Overskrift 5Overskrift 6 |
Vi har nå gått igjennom det mest grunnleggende, men det er fremdeles en del "morsomme" TAGger som kan gjøre dokumentet mer leservennlig. Vi ser nærmere på noen av disse nedenfor.
Opplistinger med punkter eller numre er blitt svært vanlige. I HTML er det egne kommandoer for dette. Vi skiller mellom tre typer lister:
Nedenfor ser du eksempler på de forskjellige listeformene:
| Koden ser slik ut: <UL> <LI>Første kulepunkt <LI>Andre kulepunkt </UL> <OL> <LI>Første nummererte punkt <LI>Andre nummererte punkt </OL> <DL> <DT>Termen som skal defineres <DD>Definisjonen av termen </DL> |
Resultatet blir slik:
|
Dette kan gjøres mer avansert med såkalte nøstede lister. På denne måten får man flere nivåer på punktene:
| Koden ser slik ut: <UL> <LI>Første kulepunkt <OL> <LI>Første nummererte punkt <LI>Andre nummererte punkt </OL> <LI>Andre kulepunkt </UL> |
Resultatet blir slik:
|
FONT-TAGen er forholdsvis ny, og angir størrelsen på skrift. På denne måten fungerer den likt som Hx, men forskjellen ligger i at tekst formatert med FONT fremdeles oppfører seg som tekst. Overskrifter blir det automatisk en del luft rundt, og det unngår man ved bruk av FONT. Koden for font ser slik ut:
| Koden ser slik ut: <FONT SIZE="+2">Test av FONT</FONT> |
Resultatet blir slik: Test av FONT |
Det er mulig å oppgi verdien på FONT både relativt (+/-) og absolutt (0, 1, 2....). Her er det bare å prøve seg frem. Det er også mulig å kombinere FONT med B (fet skrift).
Farger er en attributt til mange forskjellige TAGger. Blant annet BODY og FONT.
En del basisfarger kan oppgis med navn, men komplett fargeangivelse kan bare oppgis som hex-koder. Det finnes forskjellige programmer som finner disse kodene.
Her har dere noen farger for testing:
Vi bruker eksempelet over:
| Koden ser slik ut: <FONT COLOR="red" SIZE="+2">Test av FONT</FONT> <FONT COLOR="#00FF00" SIZE="+2">Test av FONT</FONT> |
Resultatet blir slik: Test av FONT Test av FONT |
Attrubuttet i FONT er COLOR. I BODY må en bruke BGCOLOR= for å endre bagrunnsfarge på hele siden.
Hypertekst uten pekere er som..... (en eller annen klisje)
Vi skiller mellom to typer pekere:
Absolutte pekere inneholder hele URLen (uniform resource locator). Eks: http://krs.hia.no/
Dette vil være en peker til HiAs forside.
Relative pekere inneholder bare veien fra det dokumentet du er i til neste fil på samme server. Eks: neste.htm
Dette vil være en peker til et dokument som ligger i samme katalog.
En peker er bygd opp på denne måten:
<A HREF="http://www.krs.hia.no/">HiA Kristiansand</A>
Den vil se slik ut: HiA Kristiansand
Det er også mulig å peke internt i samme dokument. Da brukes NAME for å gi navn til et element. For å peke til dette elementet brukes #navn i pekeren. Eks:
<A HREF="#kristiansand">Kristiansand</A>
<A NAME="kristiansand">Kristiansand</A>
Det er denne fremgangsmåten som brukes for å lage interne innholdsfortegnelser osv.
Dette er navnet på pekere som "utløser" e-postfunksjonen i www-leseren (eller et separat e-post program). Den ligner ganske mye på pekerne over:
En mailto-funksjon er bygd opp på denne måten:
<A HREF="mailto:lars.verket@fedrelandsvennen.no">Lars Verket</A>
Den vil se slik ut: Lars Verket
Bilder har vært mulig å bruke helt siden HTML 1.0. Når du bruker bilder er det viktig å være klar over en ting:
Jo større og bedre bilder, jo lengre tid tar det å laste siden!
Mange editorer og noen sider på Internett kan hjelpe deg med å beregne hvor lang tid det vil ta å laste ned siden din for en typisk bruker.
Det er ingen grunn til panikk. Mange teknikker kan brukes for å få bildene så små som overhodet mulig - uten at det går merkverdig utover kvaliteten.
Hvor får jeg tak i grafikk og bilder? På Internett finner du mange sider med grafikk til fri avbenyttelse. Disse kopierer du enkelt ned til deg selv vha. høyre mustast. Velg "Save AS", og vips ligger grafikken på harddisken din! Med bilder er det verre. Noen bilder er til fri avbenyttelse, men det er viktig å være obs på at copyright også gjelder på Internett.
Eksempel: Student - postkort - 70.000,-
HTML-koden for å legge inn et bilde på siden ser slik ut:
<IMG SRC="filnavn/adresse til bildet">
Det finnes en god del forskjellige attributter til denne TAGgen, og de kommer vi tilbake til.
Bilder på Internett publiseres nesten utelukkende i to formater: JPG og GIF. Det er også et format som heter PNG, og dette støttes av de nyeste www-leserne. For at bildene skal bli synlig før hele bildet er lastet ned, brukes en teknikk som tegner bildet flere ganger. På denne måten blir det tydeligere og tydeligere. For JPG kalles dette progressiv JPG, og GIF kalles det interlaced.
Formatene har hvert sitt "område". JPG-formatet komprimerer bildet, og er best å bruke på bilder. GIF er best til grafiske elementer.
I Fædrelandsvennen bruker vi følgende variable på JPG-formatet: 72 dpi og "compression level" = 35%. Da går det minimalt utover bildet, men bildet blir drastisk mindre i størrelse.
De to første attributtene du bør lære deg å bruke er WIDTH og HEIGHT. Disse forteller www-leseren hvor mye plass som skal settes av til bildet. På denne måten kan siden "tegnes" med tekst, og så fylles med bilder etterpå. Dette reduserer nedlastingstiden, og er et MUST!.
Eks:<IMG SRC="filnavn/adresse til bildet" WIDTH=249 HEIGHT=180>
Verdiene i WIDTH og HEIGHT oppgis i punkter. Disse finner du i f.eks. Paint Shop Pro (se senere).
Vi har lært to ting fra før: ALIGN og A HREF=. ALIGN virker også med bilder, og det er fullt mulig å gjøre et bilde til en peker. Sette A HREF foran bildekoden, og husk /A etterpå!
Det er også god skikk å bruke attributten ALT="". Denne gir teksten som står på skjermen før bildet er lastet ned.
For å få "luft" rundt bildet brukes HSPACE= og VSPACE=. Her setter du inn antall punkter med luft mellom bilde og tekst.
Bakgrunnsbilde: BACKGROUND="filnavn til bilde". Det er forholdsvis enkelt å kopiere ned bakgrunnsbilder, og det finnes store arkiver en også kan bruke.
Til slutt er det attributtet BORDER=x. Denne angir antall punkter tykkelse på rammen rundt bildet.
Eks:
<A HREF="peker"><IMG SRC="filnavn/adresse til bildet" ALT="Tekstinfo" ALIGN=right WIDTH=249 HEIGHT=180 BORDER=1></A>
Denne HTML-koden inneholder et klikkbart bilde (altså med peker), og alle attributtene vi har lært. Bildet kan også ha forskjellige pekere i forskjellige områder av bildet. Mer om dette i neste avsnitt.
Vi skiller mellom to typer:
Serverside: Her ligger kart-filen et annet sted på serveren, og det er serveren som utfører operasjonen.
Clientside: Kartfilen ligger i den nedlastede HTML-filen, og det er klienten som utfører operasjonen.
For å lage kart til bilder bruker du tilleggsprogrammer. MapThis anbefales - det er til og med gratis! Se peker senere.
Tabeller brukes både som tabeller, og for å styre layout. Tabeller er kronglete å lage manuelt, men i neste avsnitt går vi igjennom det helt grunnleggende.
Her er oppbyggingen av en enkel tabell. Legg merke til at tabellen bygges opp bortover, og ikke nedover som mange kanskje ville ha trodd etter å ha jobbet med regneark.
<TABLE BORDER=1>
<TR>
<TD>Data 1</TD>
<TD>Data 2</TD>
</TR>
<TR>
<TD>Data 3</TD>
<TD>Data 4</TD>
</TR>
</TABLE>
Tabellen over vil se slik ut:
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Oversikten nedenfor er ikke komplett, men viser et utvalg av de attributtene som kan brukes i forbindelse med tabell-TAGgene.
Attributter for TABLE:
Attributter er TR
Attributter for TD
Vi har vært igjennom MAILTO-funksjonen, men det finnes også en mulighet til å lage skjemaer. For å sette opp et skjema trenger en tilgang til et script. Slike script ligger tilgjengelig flere steder. Her er koden vi bruker på Fædrelandsvennens ungdomssider:
<FORM METHOD=post ACTION="http://home.sn.no/cgi-bin/mailit">
<INPUT TYPE="hidden" NAME="mailto" VALUE="lars.verket@fedrelandsvennen.no">
<INPUT TYPE="hidden" NAME="reply-to" VALUE="lars.verket@fedrelandsvennen.no">
<INPUT TYPE="hidden" NAME="subject" VALUE="Dagens tema">
<INPUT TYPE="hidden" NAME="rcpt-url" VALUE="http://fedrelandsvennen.no/veggen/takk.htm">
<TEXTAREA NAME="tekst" WRAP="virtual" ROWS=8 COLS=60></TEXTAREA>
<pre>
<FONT SIZE=+1>
Navn <INPUT NAME="navn" SIZE=35>
Adresse <INPUT NAME="adresse" SIZE=35>
Postnr. <INPUT NAME="postnr" SIZE=10> Poststed <INPUT NAME="poststed" SIZE=30>
E-post <INPUT NAME="epost" SIZE=35>
</FONT>
</pre>
<INPUT TYPE="submit" VALUE="Send post">
<INPUT TYPE="reset" VALUE="Slett">
</FORM>
Her som ellers: Finner du et fint skjema-oppsett: KOPIER KODEN!
Dette ser slik ut:
En mal er en standardside. I større www-tjenere er det veldig mye tid å spare på å lage maler. En mal inneholder de elementene som ikke skal forandres i hvert dokument. I ODIN var det egne maler for pressemeldinger, taler osv.
Maler brukes ved at man klipper nytt materiale inn i en mal. På denne måten slipper en masse koding, og kan konesntrere seg mer om innhold!
Maler er også et "offiselt stempel" på sidene. Dette kan være viktig for større institusjoner.
De to siste årene er det disse tre editorene jeg har brukt mest:
Internettet inneholder masse informasjon og programmer for de som har lyst til å finne ut mer om HTML og relaterte ting. Nedenfor går jeg igjennom noen av ressursene jeg har hatt stor nytte av.
Programmer: