Lär dig HTML: 3 lektioner i att bygga en enkel hemsida
Postad: 15 december 2007 | HTML-guider | 20 CommentsI 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="style.css" type="text/css"/>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. Så här ser vårt dokument ut nu.
<!DOCTYPE html>
<html>
<head>
<title>Min första hemsida</title>
<meta http-equiv="content-type" content="text/html; charset="ISO-8859-1"/>
<meta name="description" content="innehåll"/>
<meta name="keywords" content="nyckelord"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<h1>Min hemsida</h1>
<p>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.</p>
</body></html>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 style.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 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, en mörkgrönblå och som ligger i samma webbsäkra färgskala 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:
<a href="din_länk.htm" title="Länkens_namn" rel="noopener noreferrer">Länk</a>Best praxis vad gäller interna länkar är att de öppnas i samma flik/fönster som själva sidan länken är placerad. Vill man däremot att länken ska öppnas i ett nytt fönster lägger man till target=”_blank”. 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 dokument index.htm är nu färdigt. Mer information om css hittar du bland guiderna.
Lycka till!