Floating Facebook Widget
forsiden webdesign grafikk guider guider
Forsiden » Guider » Koding » Hvordan en nettside kan bygges opp (html)

Hvordan en nettside kan bygges opp (html)

Dette er en bitteliten innføring i hvordan en nettside kan bygges opp. Det er ikke så veldig detaljert, men jeg håper kanskje at dette kan få noen til å bli litt mer interessert i å lære seg dette i stedet for å kopiere koder man finner på nettet uten å vite hva de betyr. (beklager for grusomme fargekombinasjoner, men det må jo være litt tydelig ;))

Slik som dette kan en nettside bygges opp, og det er slik blogg.no sin standardmal er bygd opp. Hver seksjon er et <div> element. Det skrives slik: <div> Innhold her </div>. Om du skulle skrevet bildet over i html-koder, så ville det sett ut som disse to bildene:

            

<html>-elementet forteller nettleseren at dette er et html dokument.
<head>-elementet må inneholde tittelen på nettsiden, og kan ha meta informasjon, stiler, link til stilsett, script osv.
<body>-elementet inneholder alt innhold på siden som man kan se. Tekst, bilder, lenker osv. Her har jeg lagt inn alle <div>-taggene.

På bildet  til venstre ser man at html-taggen begynner øverst i dokumentet og slutter nederst. Det vil si at alt innhold i dokumentet jeg har laget er inni <html> elementet.
På bildet til høyre ser man hvor <div> elementet med id wrapper begynner og slutter.
Det hjelper å studere kodene for å se hvor ting begynner og slutter. Du kan også prøve å skrive en bokstav en plass i malene dine for å se hvor den havner.

Alle html koder/tager er beskrevet detaljert på w3schools.com. Den er på engelsk, men har man litt forståelse for språket så er det ikke verre enn å lese på norsk. Om du støter på et ord du ikke vet hva betyr eller hva som menes med det på «HTML-språket», google det så finner du det ut :) Dette kan kanskje se veldig kjedelig ut, så man må være interessert i å lære det. Det er gøy når man merker at man har lært noe og at man klarer å lage ting uten å følge noen guider, og når man finner ut ting på egenhånd.

Alle elementer i et HTML dokument bør styles med CSS (slik som posisjonering, farger, størrelse, bredde, skriftype) , men det kan jeg kanskje ta senere.

12 kommentarer

Unknown 22. juli 2012, kl. 00:05

Jeg vil bare gi beskjed om at det er en person som hat tatt i bruk et av gratis designene dine, og tatt bort linken. Sjekk bloggen her: http://www.sellyena.blogg.no.

Lita 22. juli 2012, kl. 17:27

SV: Takk for tips Lisa. Skal prøve dette. :)
Hvis du lager design, er jeg interessert.

MaritaT. 29. juli 2012, kl. 01:36

Hei! Jeg har et spørsmål… Vet du hvor man kan laste opp psd-filer? Jeg fikk det nemlig ikke til på tinypic.com..

Marianne 31. juli 2012, kl. 19:05

Dette har ikke noe med innlegget ditt å gjøre, men jeg trenger hjelp med å få vist hele innlegget når jeg f.eks. sjekker arkivet mitt. Jeg har spurt folkene på bloggr.no, men de har ikke gitt meg noe svar, så håpet på at du kanskje visste hvordan jeg kan vise hele innlegget? Er så plagsomt å måtte trykke på en og en for å finne riktig innlegg.
Takk på forhånd i hvert fall :)

Marianne 08. august 2012, kl. 19:26

Jeg lurer på så mye, huff :b Men jeg lurte på om du visste om en link (html) som kan gå fra en side til en annen, altså du går på en side også blir du overført til en annen (om du har ny blogg f.eks.). Trenger en slik link, håper du skjønner hva jeg prøver å forklare og at du veit om en link (html). Takk på forhånd i hvert fall :)

Jørgen 08. august 2012, kl. 21:05

Hei!
Du hjalp meg med noen blogglinker for et års tid siden (Takk for det!).
Jeg skrev en epost til bloggdesignet-kontoen din i går. Oppdrag. Jeg vet ikke om du sjekker den epostadressen eller ikke, nå som du har fått ny adresse i kontaktinfofeltet. :-)

Ser frem til å høre fra deg!

Silje 17. oktober 2012, kl. 14:46

Jeg prøver, men det er ikke så lett å holde styr på alle kodene, spesielt når husken ikke er helt på topp.

Jeg så det designet du hadde laget til http://www.themakeupartist.blogg.no og det er kjempe fint. Men jeg lurte på en ting, jeg har veldig lyst på bilder på begge sidene sånn som på bloggen til themakeupartist, men jeg finner bare ut hvordan jeg får det på den siden jeg har sidemenyen. Det ser så rart ut når jeg bare har bilder på den ene siden =/ Håper virkelig du kan hjelpe meg eller vet om noen som kan hjelpe! Det hadde vært kjempe snilt av deg å hjelpe.

Håper du får en fin dag!

Marianne 03. november 2012, kl. 19:05

Ser ut som du er opptatt eller ikke har tid til bloggen, men jeg tar sjansen å spør om et par ting jeg har søkt og lurt på en stund nå..
Veit du om en form for kode, eller om jeg må endre i malene i wordpress for å skille innleggene? Altså sånn at det ikke ser ut som et, om du skjønner?

Og jeg finner ikke noe kode for å få siste kommentar og innlegg, eller, de jeg finner funker ikke.
Får ikke brukt widgets, siden da får jeg ikke endret sidebaren (farger etc.)! Muligens jeg må endre noen koder i malene, men det blir så stress :b Så håper du kan gi meg tilbakemelding når du får tid :)

Tror det var alt jeg lurte på i dag.
God helg :)

Unknown 26. november 2012, kl. 01:06

- Når jeg skal venstrestille sidemenyen flytter ikke headeren seg, det samme skjer når jeg skal flytte sidemenyen til høyre. Det funker når jeg endrer på et tall.
- Når jeg klikker meg innpå bloggen er overskriften helt normal, men når jeg klikker meg innpå innlegg, kategori og arkiv, er overskriften tykk. Hvordan ordner jeg det slik at det blir likt i alle malene?
- Designet ser ikke likt ut når jeg er innpå Internett Explorer og Google Chrome. Hvorfor er det ikke likt?

Jeg håper du kan svare meg på disse spørsmålene. På forhånd takk! (:

Emilie 10. desember 2012, kl. 22:05

hei :) Kan du lage ett harry potter design som er gratis?

Skriv en kommentar

E-postadressen din vil ikke bli publisert. Påkrevde felt er markert med *.

*


Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Søk

 

Nerdie.me Design Proudly powered by WordPress