Lär dig HTML – 3 lektioner

I del 3 av HTML-skolan ska vi skapa och koppla en enkel stilmall till index.htm. Sedan sätter vi färg på sidan

Det första vi ska göra är att lägga in denna kod i head:
<link rel=”stylesheet” href=”stilA.css” type=”text/css”>

  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. <link rel="stylesheet" href="stilA.css" type="text/css">
  9. </head>
  10. <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.
  11. </body>
  12. </html>

Att vi lägger denna kod i head beror på att länken automatiskt ska kalla på stilmallen. Den ingår så att säga i hela layouten och är inte klickbar.

Att göra en enkel stilmall

Nu har vi så kommit fram till stilmallen som ska formatera utseendet på index.htm. Det du nu först ska göra är att öppna ett tomt dokument och sedan spara det som stilA.css. Observera att filändelsen ska vara css!

Inled gärna dokumentet med denna kod: /*css document */

I css-mallen går det alldeles utmärkt att skriva ut egna små kommentarer – så länge dessa ligger inom /* och */ Det kan vara om hur du löste ett problem i koden eller vill minnas en särskild färgkod till annat tillfälle. I vilket fall som helst så är det ett jättebra knep att använda sig av. Vi ska i alla fall börja på vår stilmall genom att lägga in följande koder:

 /* css document */
html,body
{
font-family: arial, Helvetica, Times, serif;
font-size:11px;
line-height:15px;
margin-left: 10px;
text-align:left;
background-color: #99CCCC;
margin-top: 20px;
background-image: url('');
background-repeat: repeat;
color:#003333;
}

Vad betyder då detta?
Jo – koden html,body talar om för oss att koderna inom dessa klammer { } omfattar om hela dokumentet html inklusive bodykroppen body

Font-family är teckensnittet du använder. Här har jag angett fyra alternativ; arial, Helvetica, Times, serif. Anledningen till detta är att det finns olika operativsystem och de som arbetar med Macdatorer har ofta andra typsnitt. Genom att då erbjuda alternativ så använder besökarens dator det typsnitt som rankas först om detta finns som standard på dennes dator.

Font-size är storleken på bokstäverna – i detta fall ställt till 11 pixlar. Ibland vill man kanske ha lite mer luft mellan raderna. Då lägger man in en kodsnutt som heter line-height – här ställd till 15 pixlar.

Margin betyder marginal och vill man skjuta marginalen i antingen sidled eller från toppen till botten som gör man det i margin. Vi har använt margin-left för att skjuta in texten 10 pixlar från vänstra marginalen och margin-top för att ge marginalen 20 pixlars utrymme ned till texten. Texten är också vänsterställd i dokumentet. Vi ser detta i koden text-align:left.

Nu ska vi ändra bakgrundsfärg och textfärg. Bakgrundsfärgen ändrar man i denna kod; background-color: #99CCCC. Jag har valt en ljusblå webbsäker bakgrundsfärg. Till texten så valde jag en nyans som skulle passa. Färgen är mörkgrönblå och ligger i samma webbsäkra färgskala som bakgrunden – color:#003333.

Innan vi tar klivet över att göra våra länkar vill jag bara uppmärksamma om möjligheten att använda en bakgrundsbild. Det är i denna kod: background-image: url(‘din_bild_här.jpg’); background-repeat: repeat; och här ställer man även in värdet om man vill att bakgrunden ska upprepas eller ej.

/* css document */
html,body
{
font-family: arial, Helvetica, Times, serif;
font-size:11px;
line-height:15px;
margin-left: 10px;
text-align:left;
background-color: #99CCCC;
margin-top: 20px;
background-image: url('');
background-repeat: repeat;
color:#003333;
}

Funktionen för en hyperlänk är att den pekar mot ett specifikt mål – det vill säga target. Grundkoden för en länk ser ut så här:

  1. <a href="din_länk.htm" title="Länkens_namn" target="_blank">Länk</a>

Den här länken kommer att öppna måldokumentet i ett eget fönster, vi ser det på märkningen target=”_blank”. I din css mall skriver du in följande:

/*navigering - allmänna länkar*/
a:link, a:active, a:visited {
color: #990000;
margin-bottom:0px;
font-weight: normal;
text-decoration: underline;
font-family: arial, Helvetica, sans-serif;
font-size: 11px;
}
a:hover {
color: #ffffff;
margin-bottom:0px;
text-decoration: none;
font-weight: normal;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
}

De här märkningarna styr utseende på länken, det vill säga hur den ska se ut både i färg, utseende och storlek. När man för musen över länken kommer den att ändra färg till vit. Du ser det i a:hover {color:#ffffff.

En mer ingående guide i hur man gör länkar och skapar en bra länkstruktur hittar du i guiden att-lanka-katalogstruktur

Ditt färdiga dokument index.htm ser ut så här. Mer information om css hittar du bland guiderna.

Lycka till!

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 *