Lär dig HTML – 3 lektioner

Lektion 2 – absolut nybörjare

I del 2 av HTML-skolan vidareutvecklar vi vår första hemsida index.htm. Nu ska vi lyfta fram den på nätet genom att infoga metamärken

Varför använder man metamärken?
Dessa märken används bland annat för att beskriva sidans innehåll, att ge webbläsarna information om själva hemsidan och att skapa “nyckelord” så sökmotorerna ska kunna indexera sidan. Det finns två olika typer av metamärken. Först har vi de med attributen name och content: <meta name=”name” content=”content“> Sedan är det de med http-equiv och content som attribut: <meta http-equiv=”http-equiv” content=”content“> Metamärkena ska placeras inom <head>. Använder du ramar (frames) är det extra viktigt att du tänker på detta.

Vi ska nu skriva in denna kod i head:
<meta http-equiv=”content-type” content=” text/html; charset=”ISO-8859-1 “>

Detta gör vi för att vi vill berätta för webbläsarna att vi använder ett språk som innehåller å – ä och ö. Vi använder content-type för att tala om vad för typ av bokstäver det är man använder, och det är charset som berättar detta. Tillägget ISO-8859-1 är koden som fungerar bäst för oss här i Västeuropa. Eftersom det språk som används ute på nätet är engelska måste vi därför ange detta i våra svenska hemsidor. I och med denna sista metadefinition har nu också index.htm tagit klivet från att att ha varit en tentativ valid sida till att bli en 100% korrekt valid sida enligt W3C:s normer.

  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. <meta http-equiv=”content-type” content=” text/html; charset=”ISO-8859-1 “>
  6. </head>
  7. <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.
  8. </body>
  9. </html>

Vi fyller på med metamärken i head:

<meta name=”description” content=”här emellan skriver du vad hemsidan innehåller“>
<meta name=”keywords” content=”här emellan fyller du i dina nyckelord. Separera varje ord med ett komma“>

  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. <meta http-equiv=”content-type” content=” text/html; charset=”ISO-8859-1 “>
  6. <meta name=”description” content=” innehåll “>
  7. <meta name=”keywords” content=” nyckelord “>
  8. </head>
  9. <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.
  10. </body>
  11. </html>

Det finns fler metamärken att använda – men jag har valt dessa tre för jag tycker att de är viktigast. Ok – så här långt har vi en index.htm som är valid html 4.01 enligt W3C, och nu ska vi sätta lite färg på både länkar och text som bakgrund. Fast vi ska inte förstöra vår htmlkod genom att peta in css-koder i den utan vi ska länka till en extern stilmall istället. Jag har två baktankar med detta. För det första är det mycket praktiskt att ha en extern stilmall som sköter css-formateringen. Det innebär i klartext att det bara är i den som Ni ändrar om ni vill byta bakgrundsfärg, textfärg, länkar eller liknande. Tänk Er 25 sidor med css-kod på varje sida – vilket jobb det skulle ta. Nu ändrar Ni bara på ett ställe sedan så sköter denna stilmall resten.

För det andra så är det faktiskt så att html bygger sidan och css styr utseende. Html är alltså inte ett redskap för att göra “luft” mellan rader, bokstäver eller bilder. Man ska inte heller “kapsla” in en massa genomskinliga bilder i tabeller (eller liknande) för att styra utseendet åt ett visst håll. Allt detta är det css-mallen som ska ta hand om. Det är inte heller särskilt svårt när man väl lärt sig. Sist vill jag då också säga – sköter man sin hemsida efter denna modell så kommer man att ha en hemsida som följer webbstandard och det innebär bara fördelar.
Det går utmärkt att läsa mer om detta under länkarna xhtml och webbstandard.

Läs mer i lektion 3 om hur man kopplar stilmallen till sidan – samt hur man formaterar stilmallen.

Tycker Du att denna information var till nytta? Tveka inte om att kontakta mig om Du har några 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 *