Lär dig HTML – 3 lektioner

Lektion 1 – absolut nybörjare

Del 1 av HTML-skolan riktar sig till dig som inte har arbetat med html förut men vill prova på att göra en hemsida. Du har kanske inte heller så stor vana att hantera din dator och använder därför ett wysiwyg-program som exempelvis dreamweaver för att underlätta.

Det spelar ingen roll – WYSIWYG betyder ungefär “det du ser är vad du får” och innebär att om du gör några klick med musen så skapar programmet koden och du behöver inte tänka på något mer. Men eftersom jag anser att grunden för att skapa hemsidor ligger i att lära sig hur html fungerar så hänvisar jag också till hur man “kodar för hand”. Sådana här program kan generera koder som är “för mycket” i olika sammanhang därför tycker jag att det är lite vanskligt att enbart förlita sig på dessa. Tag gärna tillfället i akt och försök själva – kunskap i htmlkodning underlättar definitivt eventuella felsökningar eller för en framtida övergång till xhtml – webbstandard.

Börja här:

Skapa en mapp på skrivbordet som du förslagsvis döper till webb. För dig som aldrig gjort det tidigare så gör du det genom att högerklicka på “skrivbordet” och ange nytt >> mapp i rutan som kommer upp. Under mappen ser du en blåmarkerad list med en vit blinkande prompt. Denna prompt skriver ut din text så skriv “webb” och klicka sedan bredvid mappen. Nu ska det stå “webb” under mappen. Öppna sedan upp notepad, anteckningar eller det program du använder. Har du aldrig öppnat anteckningar eller notepad förr gör du så här:

  1. Klicka på den lilla rutan som det står start på längst ner i vänstra hörnet.
  2. I rullgardinen som kommer upp finns en länk som heter kör – klicka på den.
  3. I nästa lilla ruta som kommer upp ombeds du att skriva in programmet eller namnet på det dokument som du vill öppna.
  4. Här skriver du antingen in notepad eller anteckningar.
  5. Klicka på OK och det kommer upp ett nytt fönster med en tom vit bakgrund. Maximera.

Steg 1:

Se nu till att du har ett tomt (blankt) dokument framför dig oavsett om det är i notepad, anteckningar eller från ditt wysiwyg-program. Finns det någon kod som programmet genererat så radera denna! Spara sedan det tomma dokumentet som index.htm i mappen webb. Du gör detta genom att klicka på arkiv >> spara som. Nu kommer en stor ruta upp med en rullgardinslista som det förmodligen står “mina dokument” på. Klicka på listan med pilen och scrolla ned tills du ser mappen som det står webb på. Markera denna (blir blåmarkerad i listan) och klicka sedan på den lilla rutan spara som finns längre ned till höger. Dubbelkolla sedan att filen verkligen blev sparad genom att gå in på skrivbordet och öppna mappen webb. Dubbelklicka på den. Ser du filen index.htm så gjorde du rätt.

Steg 2

Det första som alltid ska finnas på ett dokument som ligger ute på nätet är ett så kallat doctype. Doctype innehåller information om din hemsida, hur du har byggt den, vilka typer av koder du använder och så vidare. Det är därför mycket viktigt att du inte glömmer att skriva ut detta doctype, annars tolkas sidan i ett “felaktigt” läge av webbläsaren. Hemsidor utan gällande doctype är ur en kodningsdefinition helt ofullständiga oavsett hur proffsiga de än ser ut att vara och inget att sträva efter!

Eftersom vi nu ska börja med att göra en enkel hemsida sätter vi därför in denna kod allra högst upp i dokumentet. Kopiera gärna av den och klistra in i ditt eget dokument. Råkade du stänga ditt dokument så öppnar du det igen genom att upprepa proceduren med startknappen >> kör och välja index.htm. Du kan också gå in i själva mappen och dubbelklicka på filen – när den har öppnats går du in i arkiv (file) och öppna (open) – då kommer du in i anteckningar.

Sätt in följande kod.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Steg 3

Nu har du typbestämt ditt dokument och vi ska börja med själva html-kodningen. När man skriver i htmlkoder använder man sig av meta-taggarna < och >. Denna tagg < öppnar en kod medan denna > avslutar koden. Det är inte samma sak som att stänga en kod – man stänger koderna genom att lägga en slash / före själva attributet. Du kommer att förstå allt efter som vi skapar dokumentet.

Den första koden som kommer efter doctype är naturligtvis htmlhypertext markup language. Därefter kommer sidhuvudet – head. Det som skrivs i sidhuvudet kommer inte att synas på själva hemsidan, men kan styra utformningen på ett eller annat sätt beroende på vilka koder man skriver in. Vi ska kika mer på det längre fram – nu inriktar vi oss först på att bygga vår sida.

Så här långt har vi kommit i kodningen:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>

Efter <head> måste vi lägga <title> – titeln på sidan. Observera att <title> inte är samma sak som index.htm. <title> är den text som kommer att synas högst upp i webbläsaren när man besöker sidan och inte namnet på själva filen/dokumentet. Vi skriver dit:Min första hemsida och här stänger vi sedan head och beger oss in i body.

Så här långt har vi nu kommit i kodningen:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Min första hemsida</title>
  5. </head>
  6. <body>

Body är kroppen på sidan, det vill säga den del där din text eller dina bilder kommer att synas. Det som är viktigt i all htmlkodning är att man inte upprepar vissa koder två gånger. WYSIWYG-programmen tänker aldrig på detta eftersom de är skapade att ge en kod, som sedan kan upprepas i all oändlighet om bara klickar på knappen. Programmet är med andra ord inte så “smart” att det kan se – eller tänka på – om man råkar trycka in fel kod. Det utför bara ditt kommando. Vissa kommando innehåller dessutom flera kodslyngor som “standard” och det är just detta som ställer till problem om man inte förstår htmlprogrammeringens grunder.

I ett dokument får det bara finnas 1 head och 1 body. Detta är oerhört viktigt om man vill få en fungerande hemsida. Head kommer också före body – aldrig tvärtom. Det vanligaste felet är just att det finns flera “body/head-koder” i samma dokument. Ha därför alltid som vana att kontrollera detta. När Ni sedan vet vad som ska finnas inom respektive kod, och var koden ska vara, är det lättare att se när koder har hamnat på fel ställe.

Vi ska fylla body med lite text och vi skriver in detta:Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare. Som vi nu har lärt oss så avslutar vi body med en snedslash så här </body>.

Så här långt har vi nu kommit i kodningen:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Min första hemsida</title>
  5. </head>
  6. <body>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.
  7. </body>

Steg 4

Vi avslutar vårt dokument här med att stänga </html> för att granska hur det blev. Det här är mitt första htmldokument. Eftersom sidan enbart innehåller rena koder och är validerad för att den håller en webbstandard enligt W3C sätter jag dit deras logga. Dock är den än så länge bara tentativt valid. För att den ska fylla hela kravet måste vi skriva in ytterligare koder. Det – och utvecklar sidan – gör vi i lektion 2.
Här är koden till hela dokumentet.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Min första hemsida</title>
  5. </head>
  6. <body>Hej och välkommen till min första hemsida. Än ser det inte så mycket ut för världen men den kommer snart att bli finare.
  7. </body>
  8. </html>

Var denna information till nytta? Kontakta mig gärna om Du har synpunkter.

Liknande poster:

20 Comments Add yours

  1. Alice says:

    oj koden blev till text oxh sånt, va bra haha, men hur ska jag göra den till en hemsida??

    1. Lena says:

      Hej!
      Om du följer hela guiden så kommer det att bli en hemsida.

  2. Alice says:

    Min första hemsida

    Hej och välkommen till min första hemsida! Än ser det inte så mycket ut för världen men den kommer snart att bli finare.

    Detta är min kod i mappen index 🙂

    1. Lena says:

      Tyvärr kan jag inte se din kod.

  3. ludwik says:

    allt gick bra fram till stilmallen, men sedan (fastän jag kopierat rätt text in i head, namngivit stilmallen rätt och klistrat in rätt kod i stilmallen) så blir det fortfarande inte färgglatt, stilmallen laddas inte.
    vad ska jag göra så det funkar?

    1. Lena says:

      har du kollat rätt sökvägar? Du kan maila mig dina koder så ska jag titta på dem =)

  4. Alice says:

    det är mappen jag har på skriv bordet/bakrunden på datorn

  5. Alice says:

    jag menar nu har jag ju bara massa html-koder men vart ska man lägga dom?
    om jag lägger dom i ett blogg inlägg blir det konstigt. du hade ju en länk där allt är blått och sånt, men i min mapp är det fortfarande html-koder 🙂

    1. Lena says:

      Ok, om det är några temafiler från mig som ligger i htm-format så visa källan i dokumentet och kopiera koden därifrån.

  6. Alice says:

    eller nej jag fattar inte :S

  7. Alice says:

    Jaha, haha fattade nu när jag läste del 2 😀

  8. Alice says:

    Hej!
    Hur kommer man till självaste “hemsidan”. Eller är det mappen som är det?
    Jag menar nu när jag går in i mappen ser jag ju alla koder och sånt. När jag klickade på din länk var det inte så. Förlåt att jag är lite seg, men jag fattar inte!
    Annars har det gått bra, så tack för hjälpen 🙂 .

    1. Lena says:

      Hej och förlåt för sent svar.

      Jag förstår inte riktigt heller vad du menar. Är det min mapp eller mappen på blogg.se du syftar på?

  9. Lina says:

    Det har jag gjort.Kan det bero på att jag har mac? Blir snart knasig om det inte funkar..

  10. Lina says:

    Jag får det inte att funka.När jag öppnar webbläsaren syns all kod i alla fall.Hjälp,vad gör jag för fel!

    1. Lena says:

      Kontrollera att du har sparat ditt dokument som html, exempelvis index.html.

  11. Isabella says:

    Tack för hjälpen!
    Finns det mer lektioner som ”fortsätter på” denna?

    Grymt bra skrivet btw, man förstod verkligen allt! Tummen upp Lena!:D

    1. Lena says:

      Hej!

      Jag har fler huider bland länkarna, men är det något speciellt du vill veta? Berätta så kan jag lotsa dig rätt =)

  12. Maya says:

    tack för hjälpen

    1. Lena says:

      Varsågod =)

Leave a Reply

Your email address will not be published. Required fields are marked *