Tips för billiga kläder: Klädguiden med kläder och för din motorcykel kanske Mckläder och mc hjälmar kan passa bra? Pröva! KlädGuiden innehåller massor med sköna prisvärda kläder. Jag skrev den för att hjälpa människor att hitta unika kläder. Kanske något för fritiden när du inte kodar HTML ;)

Piffa till texten

5 steg

Webbsidor innehåller i de flesta fall information till för att läsas. Med tanke på det är det väldigt viktigt att lägga ner energi på att göra texten läslig och inbjudande.

Det finns flera html-taggar för att modifiera allt ifrån texters storlek till färg. I kapitlet "Skapa en schysst presentation" snuddade vi på detta genom att använda oss av <b> och <i>. Att formatera texters utseende genom att använda sådana taggar är dock en gammal teknik. I dagens utveckling används främst något som kallas CSS. Det skänker utvecklaren betydligt mer flexibilitet och frihet. Du kommer snart bli varse om varför.

För att direkt visa vilken nytta vi kan ha av CSS för att göra vår sida snyggare, tar vi fram exemplet ifrån "Skapa en schysst presentation":

<html>
  <h1 align="center">Grattis världen!</h1>
  <p align="center">Jag är en ny webbutvecklare som kommer
ta marknaden med storm.</p>
  <hr>
  Skapad av <b>simpelt.se</b><br>
  <i>18 / 9 - 1921</i> (jag var först)
</html>

~~Skriv kommentar~~Avbryt - Visa kommentarer ( 1 )Göm kommentarer

zat0s

var är alla bilder? :(

All CSS skrivs inom en egen tag

<style> och
</style>

Enligt praxis skrivs den ut överst på sidan.

Lägg in <style></style> precis efter <html>. Allting om hur texten (och även annat) skall se ut på sidan kommer vi nu att skriva innanför dessa två taggar.

~~Skriv kommentar~~Avbryt - Visa kommentarer ( 0 )Göm kommentarer

Med CSS kan man kortfattat editera hur varje tag påverkar sitt innehåll. Låter det klurigt? Lugn! Med några praktiska exempel kommer detta gå som en dans.

Vi vill få till en snyggare rubrik ("Grattis världen!"). Eftersom rubriken omges av <h1> och </h1> (Header 1), kan vi på CSS-språk skriva

h1 { color: blue; }

för att ändra färg till blå på rubriken, det som skrivs innanför <h1> och </h1>. Koden för sidan skall nu se ut som följer:

<html>
  <style>

    h1 { color: blue; }

  </style>

  <h1 align="center">Grattis världen!</h1>
  <p align="center">Jag är en ny webbutvecklare som kommer
ta marknaden med storm.</p>
  <hr>
  Skapad av <b>simpelt.se</b><br>
  <i>18 / 9 - 1921</i> (jag var först)
</html>

Tänk på att det fortfarande inte spelar någon roll var du har mellanslag och radbrytningar. Det är dock smart att lägga in det här och var för att koden skall bli läsligare och lättare att arbeta med.

~~Skriv kommentar~~Avbryt - Visa kommentarer ( 0 )Göm kommentarer

Sidan bör nu se ut som på bilden. Vi kan även ändra teckensnitt med hjälp av...

font-family: helvetica;

...om vi vill använda teckensnittet helvetica. Eftersom även teckensnittet skall appliceras på rubriken måste vi även lägga denna i h1. Det gör vi genom att skriva:

h1 { color: blue; font-family: helvetica; }

Notera att varje "stilorder" avslutas med semikolon, för att sedan direkt kunna följas av en ny. Ett vanligt kolon används för att separera Vad det är som skall ställas in, och Vad det skall ställas in till. För att göra läsligheten lite högre för koden skriver vi om det till:

h1 {
  color: blue;
  font-family: helvetica;
}

Exempel på teckensnitt som vanligtvis är installerade är verdana, arial/helvetica (arial för Microsoft Windows), georgia. För att vara på säkra sidan kan du använda så kallade "generiska teckensnitt" som "serif", "sans-serif", "cursive", "fantasy" och "monospace", där webbläsaren själv tar fram ett teckensnitt som verkar stämma överens med namnet. Exempelvis kan du erhålla ett snirkligt teckensnitt om du väljer "cursive".

~~Skriv kommentar~~Avbryt - Visa kommentarer ( 0 )Göm kommentarer

Skulle besökaren inte ha det teckensnitt som anges installerad på sin dator kan vi ange alternative teckensnitt genom att skriva

font-family: Prettyfont, helvetica, arial;

Har besökaren teckensnittet Prettyfont på sin dator kommer texten att skrivas med det. I annat fall används helvetica. Finns inte heller detta installerat, används slutligen arial. Ser du mönstret? Skulle inte heller arial ligga på användarens dator används ett standardteckensnitt, definierat av webbläsaren - vilket det är kan du inte veta på förväg - det är därför det är bra att ange alternativa teckensnitt så att du vet hur besökaren ser din sida.

Låt oss nu anpassa även stycket på sidan. Skriv in följande kod efter stilkoden för h1.

 p { 
  font-family: verdana, sans-serif;
  font-size: 12px;
  color: #333333;
}

Hela koden ser nu ut som följande:

<html>
  <style>

    h1 {
      color: blue;
      font-family: helvetica;
    }

    p { 
      font-family: verdana, sans-serif;
      font-size: 12px;
      color: #333333;
    }

  </style>

  <h1 align="center">Grattis världen!</h1>
  <p align="center">Jag är en ny webbutvecklare som kommer
ta marknaden med storm.</p>
  <hr>
  Skapad av <b>simpelt.se</b><br>
  <i>18 / 9 - 1921</i> (jag var först)
</html>

~~Skriv kommentar~~Avbryt - Visa kommentarer ( 0 )Göm kommentarer

Steg för steg

Skapa din första sida med HTML

Skapa en schysst presentation

Piffa till texten

Snygg layout

Skapa sidor snabbt

Kommunikation

Eller varför inte resa lite med några sista minutenresor? Det är grymt härligt avkoppling för ett tag.

På väg att välja en ny kamera? Hitta tips och idéer om olika
kameror här.