Grunder HTML

Varje HTML-sida behöver innehålla följande taggar som minst.
Själva sidan läggs mellan boddy-taggarna.

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>Titel på sidan</title>
</head>
<body>

</body>
</html>

Enkla/vanliga taggar

Här är några enkla html-taggar vi kan använda för att formatera text.

<!-- KOMMENTARER -->

<p> Nytt stycke </p>
<h1>Stor rubrik</h1>
<h6>Liten rubrik</h6>

<br> Ny rad OBS!Ingen sluttagg
<hr> Ny rad med linje som delar sidan OBS!Ingen sluttagg

Taggar med start och stop startas och stoppas i den ordning dem läggs in. T.ex.
<p><span class="betoning">Många av taggarna</span> går att styra ytterligare genom att lägga till saker i taggen men vi återkommer till detta framöver.</p>

Bilder

För att lägga in bilder på sidan så används img-taggen.

Viktigt att tänka på att URLen(adressen) i src-delen blir korrekt. Antingen använda absoluta referenser med hela URLen "http://www.testa.se/bild/bild.jpg" eller en relativ adress som refererar till var bilden ligger i förhållande till sidan. Ligger bilden i samma katalog som sidan så är det bara filnamnet men om det t.ex. ligger i en underkatalog vid namn Bilder så blir adressen "Bilder/filnamn.jpg".

OBS!Ingen sluttagg

<img src="URL" alt="Text som förklarar vad bilden föreställer">

Storlek, placering av omkringliggande text osv styr vi med hjälp av CSS.
Många bild/bildanimations-format stödjs t.ex. JPG/GIF/PNG/APNG, ensidiga PDF-filer/vektor graphic.

Länkar

För att kunna komma vidare från vår sida så behöver vi länka till andra sidor/annat material på vår webbplats eller till någon extern källa. För detta använder vi a-taggen, oftast ihop med href för att referera till en annan källa.

URLen fungerar precis som med bilderna. Så antingen en absolut adress eller en relativ.

<a href="URL">Länktext</a>
Naturligtvis så kan vi lägga in t.ex. en bild istället för Länktext vilket gör att bilden får en länk och kopplar vidare när vi klickar på den.

Listor

För att skapa punktlistor använder vi ul-taggen och skapar sedan varje punkt med li-tagg. För numrerad lista så ersätter vi ul med ol istället.

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>

För att få andra varianter av punkter kan vi modifera det genom att lägga till list-type-style i vår CSS för <ul>-taggen.
En "ordnad" lista dvs numrerad får vi genom att använda <ol>-taggen istället för <ul>. Själva punkterna är fortfarande <li>-taggar.

Ett vanligt sätt att bygga upp en horisontell meny är att använda punktlista där man sätter CSS-formateringen display:inline på <li>-taggarna och sedan arbetar vidare därifrån.

Style-sheets(CSS)

Mycket av vår styrning av utseendet på sidan vill vi styra med hjälp av CSS. Styles(stilmallar) går att lägga som seperat style-sheet-dokument(filändlese .css), som ett block i vår html-filer som ett style-block eller direkt våra taggar. Att ha ett separat style-sheet är att föredra eftersom vi då enklare kan ändra inställningar som gäller på alla våra sidor på ett stället. Det går naturligtvis att kombinera de olika metoderna och de läses in i följande ordning: style-sheet -> style-block -> style i tagg. Detta innebär att om vi har styles som säger emot varandra så kommer den sista inlästa gälla.

För att länka ett style-sheet lägger vi in följade tagg i HEAD-taggen. Eller kopplar den via Format-menyn i Dreamweaver.

<link href="css/style.css" rel="stylesheet" type="text/css">

För att indikera vad vi vill ändra i vårt stylesheet så använder vi antingen själva tagg-namnet t.ex. h2 eller a. Alternativt så kan vi skapa klasser eller id för att identifera återkommande saker eller unika saker som skall formateras. I vårt stylesheet identiferas en klass med . före klassnamnet t.ex. .meny och för ett id så använder vi # t.ex. #bottom. I html-koden så identiferar/kopplar taggarna till sina formateringar med hjälp av id="idnamn" eller class="klassnamn". 
Dreamweaver är till stor hjälp med listningar av alla formateringar vi kan göra. En formatering kan se ut som följande:

body {
background-color:#000;
background-image:url("tribal.jpg");
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
font-size:12px;
padding-top:0px;
margin-top: 0px;
}

a {
text-decoration:none;
color:#990000;
}

.bottom {
padding-top:8px;
font-size:10px;
text-align:center;
}

Containers

För att strukturera upp innehållet på en sida så kan det vara bra att dela upp sidan i olika delar t.ex. banner/logga, meny, huvuddel(med inre delar), sidfot osv. HTML5 har flera olika färdiga containers som t.ex. div, nav, footer, header, article som vi kan använda. Till stor del fungerar dem på samma sätt men har med namnet en förklarligt användningsområde t.ex. nav som används för placering av huvudmenyer.

I början så kan vi använda div-taggen till alla våra saker så kan vi fixa till allting senare. Om vi sätter en klass/id i vår div-tagg så kan vi enkelt styra utseende och positionering i vår stylesheet.


Webb-referens

Webbstandrarder när det gäller HTML/CSS sätts av W3C(World Wide Web Consortium) men det finns flera andra intressegrupper som driver på utvecklingen inom olika områden.

W3C-HTML5 - referenser
CSS Reference hos Mozilla Developer Network
Unicorn - validerare