HTML Del 1

Dette er et kurs for nybegynnere. Vi fortsetter i dag på våres index.html, som vi laget forrige gang. Nå skal vi kort gjennomgå linker, bilder og noen andre av de aller mest grunnleggende elementer.

Ofte brukte elementer

H elementene.

Vi har til rådighet noen H elementer som brukes til overskrifter. Det lønner seg å bruke disse. Det lønner seg både fordi de er der til våres rådighet og fordi mange søkemaskiner kikker etter slike når de besøker siden vår for eventuelt å legge en link til den i søkemotoren.

Derfor starter du med vårt HTML dokument fra forrige avsnitt og rett under <BODY> skriver du følgende:
<H1>Om blomster.</H1>
Når du trykker på F12 så ser du resultatet av denne overskriften.
Når du ser på oversikten over elementer Her så finner du H1 elementet og klikker på det. Du ser da at dette elementet (sammen med de andre H elementer) kan ha flere atributter. Slike atributter forteller nettleseren at den skal gjøre noe mere spesielt med det. Blant annet ser du at det har en atributt som heter align. Bare klikk på det ordet også. Der vil du se at det står "Depreciated". Det vil si at vi ikke bør bruke denne atributten. Og lenger nede står det også hvorfor. Man skal bruke CSS (Cascading Style Sheets) til slikt. Og vi skal ikke inn på CSS før senere i dette innføringskurset, så vi lar bare tingene være som de er. Det har seg nemlig slik at vi skiller mellom struktur, innhold og utseende. Innholdet og strukturen er det vi plaserer i våres index.html (i HTML filen), og stilen / utseendet, eller det som noen feilaktig kaller "layout", den plaserer vi i en egen fil senere. Du skal bare vite at det nå er innholdet og strukturen vi konsentrerer oss om og at alt dette med plassering, farger, bakgrunn, skrifttyper, størrelser og slikt, det er noe vi her i innføringen hekter på til slutt. Normalt vil du gjøre dette fortløpende.

En ting du allerede nå skal være klar over er at ditt HTML dokument skal være fint leselig helt fra begynnelsen. Det skal kunne gå an å lese din side selv om du ikke bruker noen ting nå i begynnelsen for å angi utseende. Mange surfere velger å se bort fra hvordan du ønsker at det skal se ut, og surfer derfor med sine egne stilsett eller helt uten stilsett. Det er surferens eget valg hvordan han vil ha din side presentert, ikke ditt. Surferen kan både velge dette og mange velger også å surfe uten at bilder vises i det hele tatt. Der er også surfere som bruker helt andre plattformer enn det du gjør, og mange er også blinde eller svaktseende, eller har andre handikap.

Eksperimenter gjerne med å prøve de forskjellige H elementer.

BR elementet.

<BR> forteller nettleseren at her er det et tvunget linjeskift. Det er altså med dette elementet at du som forfatter bestemmer at en slikt linjeskift skal finne sted. Uten slike, så vil teksten komme på en linje og kun wrappe til ny linje når flaten for tekst er fyldt ut. Du kan nå gå til linjen hvor du har skrevet "Jeg er glad i blomster." og sette skrivemerket rett bak siste bokstaven i "blomster". Deretter trykker du på Linjeskift / Enter knappen på ditt tastatur to ganger og skriver "Jeg har vært glad i blomster hele mitt liv."

Når du nå trykker F12 så ser du at dine linjeskift ikke har noen betydning for hvrodan teksten vises. De to linjer kommer etter hverandre.

Nå tar du og plasserer skrivemerket mellom de to linjer og skriver <BR> og lagrer dokumentet. Når du nå bruker F12 for å se resultatet så ser du at du har fått et tvunget linjeskift.

P elementet

Når det gjelder avsnitt i vår tekst så kunne vi selvsagt bruke et par <BR> elementer for å skille dem fra hverandre. Det gjør vi også i noen tilfeller, men den beste måten å gjøre det på er å bruke <P> elementet. Det er fordi det senere kan gi oss muligheten for å lage en stil til alle disse avsnitt, eller til spesielt valgte avsnitt. Så dersom du vil ha en spesiell stil, farge, størrelse, bakgrunn, skrifttype osv. på dine avsnitt, så bruker du <P>.

Du skal nå skrive inn <P> på linjen over "Jeg er glad i blomster." Dersom du ikke har en ledig linje der, så er det bare å sette skrivemerke foran J i Jeg og klikke på Enter-tasten. Så trykker du linjen ett hakk ned og får en ledig linje. Under linjen "Jeg har vært glad i blomster hele mitt liv." skirver du nå </P>. Det avslutter avsnittet. Dette siste er dog ikke nødvendig, men vi tillegger oss gode vaner helt fra starten av.

Du vil ikke se noen forskjell dersom du nå trykker på F12. Men vi skal lage et nytt avsnitt rett under den siste </P> du skrev. Du skriver da følgende på linjen under:
<P>Jeg liker Solsikker, Tullipaner og Roser</P>
Nå kan du trykke på F12 og se at du vitterlig har fått et nytt avsnitt.

Din HTML kode ser foreløbig slik ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>En side om blomster</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-Language" CONTENT="no">
</HEAD>
<BODY>
<H1>Om blomster.</H1>
<P>
Jeg er glad i blomster.
<BR>
Jeg har vært glad i blomster hele mitt liv.
</P>
<P>Jeg liker Solsikker, Tullipaner og Roser</P>
</BODY>
</HTML>


DIV - Gruppering av elementer

Vi har nå snakket litt om avsnitt og da faller det naturlig å snakke litt om gruppering av elementer også. Til dette har vi DIV og SPAN elementene. Du kan lese mere om dem begge to i Indeks of Elements. Disse elementene gir oss muligheten for å seksjonere hele våres domument, ikke bare i avsnitt som vi allerede har prøvd oss på, men i hele seksjoner med mange elementer inne i.

Vi kan for eksempel tilføye elementet <DIV> på linjen under vårt H1 element og avslutte det med å plassere </DIV> på linjen over </BODY>

Du vil ikke se noen forskjell om du ser på Forhpndsvisninen (F12), men du har nå gruppert alt du har skrevet i kroppen hittil inne i et DIV element. Dette kan du bruke senere når og hvis du vil legge til en stil.

Nå skal du tilføye en ny seksjon rett over </BODY> som skal se slik ut:
<DIV>
<P>
Solsikker er noe flotte store blomster med svære gule kroner og som kan bli kjempe høye.
</P>
<P>
Tullipaner er også noen flotte blomster. De kan ha forskjellig farge og blir ikke på langt nær så store som solsikker.
</P>
</DIV>

A Linker

Linker, eller Anker, kan være flere forskjellige ting. Vi bruker dem ofte til å linke / lenke til et annet dokumet, en annen webside, eller et annet sted på samme webside. Du ser at ordene "Linke, eller Anker," i dette avsnitt er en annen farge og kanskje også understreket. Det gir deg et tegn om at her er noe spesielt. Musepekeren skifter også form når du holder den over disse ordene. Faktisk skjer det at du blir ført til en annen side dersom du klikker på dem. Et nytt vindu i den nettleser vil åpne seg og vil vise W3 sin definisjon av dette A elementet. Koden ser slik ut:

<A href="http://www.w3.org/TR/html401/struct/links.html#edef-A" target="_blank">Linker, eller Anker </A>

Nå kan du prøve å skrive inn en slik link i ditt dokument også. Bare bruk den samme som du ser overfor og sett din inn rett før </BODY>. Denne forteller at du vil åpne det dokumentet hos www.w3.org som ligger i undermappen TR/html401/struct og som heter links.html. Ikke nok med det, men det forteller også at nettleseren skal gå til et anker på siden som heter #edef-A. Med andre ord så vil nettleseren scrolle ned til A elementet på den siden. Atributten target som du ser i denne koden forteller nettleseren hva den skal gjøre. I dette tilfelle blir den instruert om at denne siden skal åpne seg opp i et nytt (_blank) vindu. Du kan linke til alle slags filer på denne måten, også bildefiler.

Når du vil linke til et annet HTML dokument du har laget, som ligger i samme mappe som det du ser på, så er det veldig lett. La oss si at dette nye dokumentet heter side2.html Da linker du til dette ved å skrive:
<A href="side2.html" target="_self">Side 2</A>
Legg merke til at jeg nå har skrevet verdien _self i attributten target. Det betyr at jeg vil åpne det nye dokument i det vindu i nettleseren jeg allerede er i. Du finner mere om det her.

På en lingnende måte kan du linke til bokmerker i samme dokument. For eksempel dersom du har en lang avhandling og har lyst til å vise til et punkt lenger nede på siden, så kan du gi dette punktet en ID. La oss si at det du ønsker å vise til starter med et H3 element. Du gir da dette en ID slik <H3 id="bokmerke1">. Og for å lage en link til dette punktet så skriver du bare <A href="#bokmerke1">Gå til bokmerke 1</A>. Ved å klikke på den siste linken så blir du plasert ved bokmerket du har laget.

IMG Bilder

Du har helt sikkert også lyst til å vise bilder på din side. Til det bruker du IMG elementet. Vi kan for eksempel vise en blomst her
En blomst

Koden som gjør at dette bilde vises her lik denne:

<IMG src="bilder/rose.gif" width="100" height="154" alt="En blomst" border="0">

Og den vil jeg at du nå skal sette nederst i din HTML kropp. Det vil si før </BODY>. Men du trenger bildet også. Da skal du høyreklikke med musepekeren over bildet og velge lagre. Du skal lagre det i den mappen som du har kalt images på din disk. Den vi laget helt til å begynne med.

SCR atributten viser veien til bildet. Den kan være relativ som her, eller den kan være en hel URL som ser slik ut http://www.enside.no/bilder/rose.gif
man skal alltid fortelle nettleseren hvilken høyde og bredde (hight og width) bildet skal være. Atributten alt skal alltid være med og den skal beskrive bildet for de som ikke ser dette. Atributten border beskriver om der skal være en bord rundt bildet og eventuelt hvor tykk den skal være.

Ditt HTML dokument ser nå slik ut:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>En side om blomster</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-Language" CONTENT="no">
</HEAD>
<BODY>
<H1>Om blomster.</H1>
<P>
Jeg er glad i blomster.
<BR>
Jeg har vært glad i blomster hele mitt liv.
</P>
<P>Jeg liker Solsikker, Tullipaner og Roser</P>
<DIV>
<P>
Solsikker er noe flotte store blomster med svære gule kroner og som kan bli kjempe høye. </P>
<P>
Tullipaner er også noen flotte blomster. De kan ha forskjellig farge og blir ikke på langt nær så store som solsikker. </P>
</DIV>
<A href="http://www.w3.org/TR/html401/struct/links.html#edef-A" target="_blank">Linker, eller Anker </A>
<BR>
<IMG src="bilder/rose.gif" width="100" height="154" alt="En blomst" border="0">
</BODY>
</HTML>

Siden vi har laget i dag

Finner du her.

Neste gang

Den side vi har laget er jo umåtelig kjedelig slik den ser ut nå. Men husk at jeg sa at vi på denne HTML siden kun skal ha innholdet og ingen stil eller noe slikt. Derfor blir den kjedelig og det er også meningen. Neste gang skal vi så smått begynne å gjøre den litt mere attraktiv. Du vil komme til å får en kort innføring i bruk av stilark slik at du kan begynne på egen hånd å lære deg om dette. En av fordelene med å bruke stilark er at du ikke behøver å gjøre stort mere med ditt HTML dokument enn det du allerede har gjort. Og det samme stilarket kan benyttes til alle dine sider. Med andre ord kan du forandre stil på massevis med sider bare med å forandre litt på tingene i en eneste fil. Men det skal vi se på neste gang.


Linker

  1. Om websider
  2. Noen retningslinjer
  3. Design - Utseende - Redesign?
  4. Spyware og Adware
  5. Download Kalkulator
  6. Websikre Farger
  7. Ny PC? Hvordan?
  8. HTML Intro
  9. HTML Del 1
  10. HTML og CSS Del 2
  11. Infisert maskin?