Labb 1
Webbutveckling HT14
Alexander Henriksson
Head och body
Headern börjar med taggen <head> och slutar med taggen </head>. Den innehåller metadata (data
om dokumentet) som inte visas i webbsidan. Den kan innehålla titel, script m.m.
Body börjar med taggen <body> och slutar med taggen </body>. Den består av innehållet i htmldokumentet såsom text, länkar, tables m.m.
Doctype
Doctype deklareras med t.ex. <!DOCTYPE html> och deklareras först i html-dokumentet. Den
berättar för webbläsaren vilken version av html dokumentet är skrivet i så att innehållet kan
renderas korrekt.
I HTML5 börjar man dokumentet med samma tag även om språket inte är beroende av någon DTD.
Metataggar
Deklareras med <meta> och har ingen sluttagg utan deklareras: <meta name="author"
content="Alexander Henriksson" />. Metadata visas inte direkt på hemsidan utan används för att läsa
in data om t.ex. beskrivning av hemsidan, nyckelord/sökord, när sidan senast ändrats.
<meta name="description" content="Artiklar och Guider"/>
<meta name="keywords" content="Artiklar,Guider,IT"/>
<meta name=”DC.Title” content=”Artiklar och guider”/>
<meta name="DC.Subject" content="IT Artiklar; IT Guider; IT support"/>
Dublin core är en standard för metataggar och deklareras <meta name=”DC.Title” content=”Artiklar
och guider”/>. Dublin core har 15 metadata element och möjliggör att mer metadata kan läggas in i
html-dokumentet. Det är bra då hemsidan blir lättare att indexera och mer sökmotoroptimerad om
den har metadata.
Labb 1
Webbutveckling HT14
Alexander Henriksson
Titel
En titel kan se ut såhär:
<html>
<head>
<titel>Artiklar och guider</titel>
</head>
<body>
</body>
</html>
Den visas höst upp i webbläsaren, i titelfältet.
CSS
Bestämmer sidans stil/layout. Finns oftast i en separat fil. Länkningen mellan html-dokumentet och
CSS-dokumentet görs i headern med taggen:
<link rel="stylesheet" type="text/css" href="stilmall.css">
En element selektor tillämpar CSS på alla element med en viss tagg till exempel:
p{
background-color: red;
}
Gör så att alla element med taggen <p> får röd bakgrundsfärg. Användbart om man vill ändra stilen
på all brödtext.
Labb 1
Webbutveckling HT14
Alexander Henriksson
Id selektorer väljer istället att allt med ett visst id ska få en viss CSS-stil till exempel:
#content {
background-color: red;
}
Gör så att allt med id="content" får röd bakgrundsfärg. Användbart för att ändra divar.
Class selektorer väljer istället att allt med en viss class ska få en viss CSS-stil till exempel:
.header {
background-color: red;
}
Gör så att allt med class="header" får röd bakgrund. Använts ofta med JavaScript för att göra
ändringar i html.
Labb 1
Webbutveckling HT14
Hemsidan i olika webbläsare
Såhär ser hemsidan ut i olika webbläsare.
Safari:
Safari skalad:
Alexander Henriksson
Labb 1
Google chrome:
iPhone:
Webbutveckling HT14
Alexander Henriksson
