Leksjon 1
Grunnleggende html
Det første vi må gjøre er å lære noen grunnregler for HTML. Hvis du er helt ukjent med programmering i HTML eller vil lære mer kan du lete på nettet og finne mange meget gode læresider. Her vil du kun få med deg det aller nødvendigste for å kunne strukturere og utforme siden din. Begynn med å åpne notisblokken i Windows eller Enkel tekst i OSX. Skriv så inn følgende kode:
<html> <head> <title> CSS-leksjoner </title> </head> <body> Her er noe jeg har skrevet </body> </html>
Lagre denne teksten ("Lagre som" eller "Arkiver som" i filmenyen eller arkivmenyen.) i en egen tom mappe og kall den for index.html
Start så en nettleser, f.eks Safari, Opera eller Internet Explorer, og åpne filen. ("Åpne fil" fra arkivmenyen eller filmenyen) Den burde se slik ut:
Alt som begynner med < og slutter med > kaller vi for en tagg. (Engelsk: tag) De fleste tagger er såkalte containertagger. Det betyr at mellom start-taggen <title> og slutt-taggen </title> bør det være et innhold. Det betyr også at foran og bak innholdet bør det være en start- og en slutt-tag. I dette tilfellet er innholdet "CSS-leksjoner", og denne teksten finner vi igjen i tittelfeltet på nettleseren. Forskjellen på start-taggen og slutt-taggen er altså tegnet "/", som alltid står først i en slutt-tagg. I selve innholdsvinduet i nettleseren, det hvite arket, kan vi lese det vi skrev mellom den start- og slutt-taggen som heter "body". Alt av tekst og bilder som befinner seg mellom <body> og </body> vil vises på siden. Iallefall foreløpig...
Dokumentet trenger altså bare disse taggene for å fungere. Den første, <html>, markerer starten på koden som nettleseren skal prøve å forstå. Siden den er en containertagg, vil vi altså finne en </html> som siste linje i dokumentet. Så kommer hodet, eller <head>. I hodet kan vi legge flere ting, og disse vil ikke vises direkte på siden vår, men vil ha betydning for det som presenteres. Inne i hodet har vi her skrevet tittelen på siden i containertaggen som heter "head". Når hodet slutter, </head>, begynner kroppen, altså <body>. Nå er vi klar til å fylle kroppen med innhold.
Hvis du har skrevet riktig (nettlesere tåler ikke skrivefeil i kodene) og har klart å lagre og åpne den første siden din, er du klar for leksjon 2.
Leksjon 2
Overskrifter
Det finnes syv forskjellige nivåer i html som beskriver overskrifter. Den største og feiteste er <h1> og den minste er kanskje <h7>. Vi skal her prøve ut to forskjellige nivåer. I dokumentet ditt kan du føye til følgende kode foran teksten i kroppen din:
<h1>Den store overskriften</h1>
Etter teksten, på en ny linje, kan du skrive følgende:
<h2>En mindre overskrift</h2> Her har jeg skrevet noe mer.
Nå kan du lagre dokumentet på nytt, og se det i nettleseren. Hvis du har plassert det nye innholdet i "body"-containeren vil du sannsynligvis se følgende:
Avsnitt
For senere å kunne utforme siden på en mer tiltalende måte er det nødvendig at vi inkluderer all tekst som ikke er overskrifter i en ny tagg, nemlig <p> for paragraf eller avsnitt på norsk. Den andre linja i hodet skal altså gjøres om fra
Her er noe jeg har skrevet
til
<p>Her er noe jeg har skrevet</p>
Det samme må du gjøre på teksten i det andre avsnittet. Det skulle gi oss følgende kode så langt:
<html> <head> <title> CSS-leksjoner </title> </head> <body> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer</p> </body> </html>
Hvis du ser på dokumentet i nettleseren nå, vil du ikke se stor forskjell. Men i og med at all tekst nå står inne i hver sin lille container har vi full kontroll over hvordan vi vil at siden skal se ut i de fleste nettlesere.
Leksjon 3
Lister
I dette eksemplet skal vi lage menyen til siden vår som en liste. De to nødvendigste taggene heter <ul> og <li>. <ul> er selve listecontaineren, og hver linje i listen er mellom <li> og </li>. Da er vi klare:
Foran alt du har skrevet til nå, inne i "body"-taggen, skriver du følgende:
Meny <ul> <li>Menyvalg 1</li> <li>Menyvalg 2</li> <li>Menyvalg 3</li> <li>Menyvalg 4</li> <li>Menyvalg 5</li> </ul>
Hypertekst
For at menyen skal føre oss et annet sted, må vi sette de forskjellige menyvalgene inn i en hyperlenke. Taggen som brukes heter <a>, og vi bruker et element inne i denne taggen som forteller hvor vi skal, nemlig "href". Koden for det første menyvalget blir da som følger:
<li><a href="side1.html">Menyvalg 1</a></li>
Den teksten som står inne i anførselstegnene, "side2.html", forteller nettleseren hvor den skal gå når brukeren trykker på lenken. Det er her viktig, som alltid, å lukke containeren bak teksten som skal framstå som en lenke. Hvis du gjør dette på alle menyvalgene får du følgende kode:
<html> <head> <title> CSS-leksjoner </title> </head> <body> Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer</p> </body> </html>
Lagre dokumentet og ta det opp i nettleseren. Hvis du prøver å trykke på en av lenkene, sår du nok til svar at siden ikke finnes, men det er jo kanskje fordi siden ikke finnes. Så da må du lage en liten side, med noen ord på, og kalle den for side1.html og prøve på nytt (på "Menyvalg 1"). Håper dette gikk greit!
Hvis det mot formodning ikke gikk greit skyldes det i 99% av tilfellene en bitteliten forglemmelse eller skrivefeil. Et anførselstegn som mangler eller en bokstav for mye i en tagg eller en referanse (f.eks <a href="side1.htm"> istedet for <a href="side1.html"> vil gjøre at ingenting virker slik du vil. Så vær nøye, og let gjennom koden hvis du får problemer. Du kan også få siden din sjekket for feil her.
Denne siden er sjekket og funnet i orden!
Leksjon 4
Litt mer innhold, så er vi klare
Denne siden skal ende opp med en boks på toppen av siden, hvor tittelen på siden kan stå. Så blir det en meny til venstre og selve innholdet til høyre. Selve den grafiske utformingen, med farger og størrelser og bakgrunner skal vi gjøre ved hjelp av stilark. Så det vi mangler er en linje med tittel på. Den setter vi inn først i kroppen (igjen).
Min side om programmering
Dette ser da merkelig ut. Ingen containertagger rundt teksten? Joda, vi kan godt sette inn en tagg eller to, men først må vi øke volumet av tekst på selve hovedsiden. Dette gjør vi ved å skrive inn en tilfeldig tekst i det siste avsnittet i koden. Jeg skriver dette:
<p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet.</p>
Koden i dokumentet mitt ser dermed slik ut:
<html> <head> <title> CSS-leksjoner </title> </head> <body> Min side om programmering Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </p> </body> </html>
Sjekk at denne siden er ok, og bla over til neste leksjon. Der skal vi begynne å se på hvordan siden skal se ut. Nå har vi jo et fornuftig innhold, og det er jo tross alt det som er det viktigste på en hjemmeside. La du forresten merke til at "Min side om programmering" og "Meny" kom på samme linje i nettleseren? Mystisk.
En siste ting før vi setter i gang. Last ned minst én nettleser i tillegg til den du bruker til vanlig. Sjansen er stor for at du bruker Internet Explorer for Windows, og den er ikke blant de skarpeste når det gjelder stilark. Prøv f. eks Opera, og se om de to behandler siden din ulikt.
Leksjon 5
Stilark som kosmetikk
Nå er vi klare til å sette de forskjellige elementene på riktig plass, og gi dem farge, utforming og størrelse som passer. Til dette bruker vi stilark, eller CSS. Det er en kode som forteller taggene hvordan de skal se ut på siden vår. Først må du sette inn en ekstra linje i hodet, som forteller nettleseren hvordan den skal tolke de forskjellig tegnene i koden. Sett den inn foran <title>:
<meta http-equiv="Content-Type" content= "text/html; charset=utf-8">
Det første vi skal gjøre er å gi all tekst en annen skrifttype og farge. Vi gjør det som sagt ved å bruke et stilark, eller style sheet på engelsk. (CSS står for Cascading Style Sheet). Stilarket putter vi inn i hodet på dokumentet, mellom </title> og </head>, og taggen heter "style". Vi føyer til at stiltypen er tekst eller css ved å skrive "type="text/css" inne i selve style-taggen, slik:
<style type="text/css"> </style>
Så skal vi fortelle nettleseren at i kroppen (body) skal all tekst være i skrifttypen Verdana med farge grå og størrelse 1em. Dette vil se slik ut:
<style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
</style>
For å gjøre det mer oversiktelig vil jeg bruke rød farge på html-koden og grønn farge på CSS-koden. Legg merke til at først i CSS-koden kommer navnet på den taggen vi vil styre (body), og så kommer koden vår innimellom to artige klammer. Lagre dokumentet og ta det opp i leseren. Skriften skal da være uten pynt, eller serifer som det også kalles, siden vi nå bruker Verdana som skrifttype. Fargen på alle bokstaven skal være grå, unntatt lenkene, som har sin egen sjef. Den sjefen heter <a>, og vi kan prøve å fortelle ham (eller er det en kvinne?) at fargen på lenkene heller skal være mørk grønn. Det er flere måter å angi farger på i stilark, og her får du se en variant. Først en nummerindikator, nemlig "#". Så tre hexadesimale tall på rekke. Det hexadesimale tallsystemet går fra 0-16, men bare med ett siffer. Tallene 0-9 skrives som i det desimale tallsystemet (titall-systemet) og tallene 10-16 skrives med bokstavene a-f. Så "#f00" blir rød (de tre tallene er rød, grønn og blå), "#0f0" blir grønn og "#f0f" blir lilla. Prøv deg fram. Jo høyere tall, jo lysere farge. Mørk grønn kan derfor være "#6a6". Koden blir som følger:
a {
color: #6a6;
}
Denne koden putter du inni <style> etter avslutningsklammen til "body". Vi føyer også til at lenkene skal være litt fetere enn den vanlige skriften.
font-weigth: bold;
Sjekk resultatet i nettleseren. Hos meg ble det slik:
I en kommentar i stilarket (kommentarer ser slik ut: /* Kommentaren */) etter "color: grey;" sier jeg at du må sjekke denne i flere lesere. Hvis teksten blir svart i stedet for grå i en leser er det kanskje best å angi fargen som #666 eller noe i nærheten. Koden i dokumentet mitt ser dermed slik ut:
<html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> CSS-leksjoner </title> <style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
a {
color: #6a6;
font-weigth: bold;
}
</style> </head> <body> Min side om programmering Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </p> </body> </html>
I neste leksjon skal vi lage toppteksten som et banner over hele bredden.
Leksjon 6
Bokser
For å lage tittelen på siden som et banner, kan vi bruke flere metoder. En av metodene er å plassere tittelen inne i taggen <div>, og så gi den DIVen et eget navn. Det gjør vi ved å føye til "id="tittel". Koden først i "body"-taggen går da fra:
</head> <body> Min side om programmering Meny <ul>
Til dette:
</head> <body> <div id="tittel"> Min side om programmering </div> Meny <ul>
Allerede nå kan du se forskjell i nettleseren. Tittelen og "Meny" står på hver sin linje. Nå skal vi gi DIVen instruksjoner i stilarket:
#tittel {
font-size: 2.5em;
background-color: #6a6;
}
Prøv dette, og se på resultatet. Hvis alt gikk bra, ble tittelen til en boks med mørk grønn bakgrunn. Men teksten, som er grå, ble lite lesbar. Prøv å gi teksten inne i DIVen en farge med større kontrast. Jeg prøver hvit:
color: white;
Hvordan gikk det? Slik ser det ut hos meg:
Var ikke dette artig? Nå er koden blitt større:
<html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> CSS-leksjoner </title> <style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
a {
color: #6a6;
font-weigth: bold;
}
#tittel {
font-size: 2.5em;
background-color: #6a6;
color: white;
}
</style> </head> <body> <div id="tittel"> Min side om programmering </div> Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </p> </body> </html>
Neste oppgave blir å lage en boks til menyen, og gi den egenskaper som passer inn i helheten.
Leksjon 7
Flere bokser
Vi starter med å putte all menykoden vår inn i en DIV som vi kaller meny.
<div id="meny> Menykoden vår, altså "Meny" og listen som følger. </div>
Så forteller vi nettleseren hva den skal gjøre med denne DIVen. En boks kan flyte til venstre eller høyre. Vi prøver venstre her. Det å flyte betyr at boksen putter seg så langt til venstre som mulig, og at teksten som kommer etter boksen flyter på høyresiden og under boksen. Vi må også gi boksen en bredde, ellers kan den finne på å dekke hele skjermen på noen lesere.
#meny {
float:left;
width: 150px;
}
Se på siden din, og legg merke til at menyen nå er oppe i venstre hjørne, og overskriftene og tekstene flyter rundt under og til høyre. Da er vi kommet et godt stykke på vei. For bedre å skille menyen fra resten av siden, kan vi gi den en ramme.
border: solid 1px black;
Denne koden betyr at boksen får en ramme som er en hel strek (solid) med en bredde på en pixel (1px), eller ett skjermpunkt om du vil, og med fargen svart. Sjekk hva som skjer etter hver ny instruksjon du gir nettleseren. Så kan vi skape litt luft inne i boksen.
padding: 10px;
Det neste blir å skape litt luft rundt selve boksen, og det gjør vi med å sette en marg rundt overalt.
margin: 20px;
Så kan vi for artighets skyld forandre rammen fra "solid" til "dashed" og se hva som skjer, samtidig som vi setter en lys bakgrunnsfarge og gjør teksten fet, slik at selve ordet "Meny" ikke kommer helt bort.
background-color: #eee; font-weight: 600;
Begynner det å ta form? Har du benyttet anledningen til å eksperimentere litt underveis, eller er du sånn passelig kommet hit:
Har du rotet deg litt ut og vil følge avslutningen av dette minikurset, kan du bare markere koden under og kopiere den inn i et tomt dokument. Viola! Eller var det voila?
<html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> CSS-leksjoner </title> <style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
a {
color: #6a6;
font-weigth: bold;
}
#tittel {
font-size: 2.5em;
background-color: #6a6;
color: white;
}
#meny {
float:left;
width: 150px;
border: dashed 1px black;
padding: 10px;
margin: 20px;
background-color: #eee;
font-weight: 600;
}
</style> </head> <body> <div id="tittel"> Min side om programmering </div> <div id="meny"> Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> </div> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </p> </body> </html>
Det som gjenstår nå er å sette en venstremarg på hovedteksten, og kanskje litt småkosmetikk.
Leksjon 8
Den siste boksen
For å kunne sette en rett venstremarg på hovedteksten vår, altså selve innholdet på siden, må vi lage en boks og ha det i.
<div id="innhold"> Her putter vi resten av det som befinner seg i kroppen. </div>
Vi må nå regne ut hvor stor venstremargen skal være. Menyboksen er 150 piksler bred. I tillegg kommer en marg på 20 piksler på hver side. Og så har vi kanskje glemt luften inni boksen. "Padding" på hver side på 10 punkter. Dette blir til sammen 150+20+20+10+10, altså 210px. Hvis vi ikke tar med lufta inne i boksen, kommer vi skjevt ut. Mange ville tro at når vi sier at boksen skal være 150 piksler bred, så vil lufta (padding) bare komprimere tekstbredden inne i boksen, men faktisk blir boksen 20 piksler bredere når vi har 10px padding på hver side. Husk dette.
#innhold {
margin-left: 210px;
}
Nå er vi nesten i mål! Sjekk hvordan det ser ut, og tenk på at du kan forandre alt av farger, størrelser, skrifttyper og marger ved hjelp av små forandringer i stilarket. Noen små justeringer som jeg selv ville ha gjort kommer i den siste leksjonen. Men allerede her har du laget deg en mal som vil duge til presentasjon av oppgaver og annet stoff som du vil dele med andre.
<html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> CSS-leksjoner </title> <style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
a {
color: #6a6;
font-weigth: bold;
}
#tittel {
font-size: 2.5em;
background-color: #6a6;
color: white;
}
#meny {
float:left;
width: 150px;
border: dashed 1px black;
padding: 10px;
margin: 20px;
background-color: #eee;
font-weight: 600;
}
#innhold {
margin-left: 210px;
}
</style> </head> <body> <div id="tittel"> Min side om programmering </div> <div id="meny"> Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> </div> <div id="innhold"> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </div> </p> </body> </html>
Leksjon 9
Justeringer
Det første vi kan justere, er bredden på innholdet og luftmengden i høyrekanten. Som du ser på leseren din går teksten helt i kanten av vinduet, og den strekker seg så langt den kan om du har et stort vindu. Tekstblokker med stor bredde er vanskelige å lese, fordi øyet må søke så langt fra slutten av en linje til starten av den neste. Så vi setter en bredde på 500px, og en padding på 20px på høyresiden.
width: 500px; padding-right: 20px;
Denne koden skulle altså inn i "#innhold" i stilarket. Den neste justeringen blir å gi tittelen en smule luft. (i "#tittel")
padding: 0.2em;
I menyen er det punkter i listen, men hvis du ikke vil ha disse, kan du hive inn følgende kode i stilarket:
ul {
list-style: none;
margin-left: 0;
padding: 0;
}
Hvis du nå ser etter, så ser det ganske greit ut, men den siste lille justeringen blir å forskyve menyen 20px til venstre, for nå er den jo litt for langt inn på arket. Det enkleste blir da å sette venstremargen til 0 (i "#meny").
margin-left: 0;
Nå skulle det hele ta seg slik ut:
Bare en bitteliten sak til slutt. Når musepekeren ruller over en lenke, kan vi sette inn en liten effekt. Vi prøver en enkel rollover her. Sett den inn etter "a" i stilarket.
a:hover {
text-decoration: none;
background-color: #6a6;
color: white;
}
Artig? Prøv andre kombinasjoner. På denne siden finner du de fleste kodene og litt mer utfyllende forklaringer på bruken av stilark. Prøv også en meget god dansk side som gir flotte leksjoner i både html og CSS. Lykke til, og husk:
Innholdet er det viktigste. (Men det skader jo ikke at det ser pent og ryddig ut)
Her kan du besøke min ferdige side. Under finner du koden. Du kan også finne koden til et hvilket som helst nettside du besøker, men stilarkene er som oftest ikke inkludert. Gå på menyen "view" eller "vis" og velg "view source" eller "vis kilde". Da kan du kanskje plukke opp noen tips. Men hold deg til små og enkle sider...
<html> <head> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8"> <title> CSS-leksjoner </title> <style type="text/css">
body {
font-family: verdana;
font-size: 1em;
color: #333;
}
a {
color: #6a6;
font-weigth: bold;
}
a:hover {
text-decoration: none;
background-color: #6a6;
color: white;
}
#tittel {
font-size: 2.5em;
background-color: #6a6;
color: white;
padding: 0.2em;
}
#meny {
float:left;
width: 150px;
border: dashed 1px black;
padding: 10px;
margin: 20px;
margin-left: 0;
background-color: #eee;
font-weight: 600;
}
#innhold {
margin-left: 210px;
width: 500px;
padding-right: 20px;
}
ul {
list-style: none;
margin-left: 0;
padding: 0;
}
</style> </head> <body> <div id="tittel"> Min side om programmering </div> <div id="meny"> Meny <ul> <li><a href="side1.html">Menyvalg 1</a></li> <li><a href="side2.html">Menyvalg 2</a></li> <li><a href="side3.html">Menyvalg 3</a></li> <li><a href="side4.html">Menyvalg 4</a></li> <li><a href="side5.html">Menyvalg 5</a></li> </ul> </div> <div id="innhold"> <h1>Den store overskriften</h1> <p>Her er noe jeg har skrevet</p> <h2>En mindre overskrift</h2> <p>Her har jeg skrevet noe mer, og nå vil jeg skrive enda mer. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. Denne setningen kan kopieres og limes inn flere ganger slik at det dannes en skikkelig tekstblokk i dette avsnittet. </div> </p> </body> </html>
