Grundkurs i HTML
Har du ändrat din bloggdesign någon gång har du säkert kommit i kontakt med HTML. Men vad är det egentligen för något, hur skriver man det och vad betyder allt?
HTML är en förkortning för Hyper Text Markup Language, och är ett så kallat uppmärkningsspråk. HTML används när man gör hemsidor. På blogg.se hittar du bloggens HTML i kodmallen. HTML berättar för webbläsaren vad som ska finnas och stå på sidan, t.ex. vad som är en rubrik, vad som är ett stycke och vad som är en lista och vad som ska stå i listan.
Att skriva HTML
HTML kan du skriva i en simpel textredigerare såsom Notpepad, eller i ett program speciellt utformat att skriva kod i, t.ex. Notepad++ och Dreamweaver. Observera att det är en väldigt dålig idé att skriva din HTML i en så kallad ordbehandlare, t.ex. Word. De kan nämligen lägga till "osynlig kod" i din kod.
Taggar
HTML är uppbyggt av så kallade taggar. En tagg börjar med ett mindre än-tecken och slutar med ett större än-tecken. Mitt emellan dessa tecken anger man vad det är för slags tagg. Taggar kan se ut på två olika sätt. Det vanligaste är att de är uppdelade i två delar - en starttagg och en slutttagg. I sluttaggen lägger man till ett snedstreck. Då ser det ut såhär:
<tagg> </tagg>
Men taggar kan också bara bestå av en tagg, som då stänger sig själv. Det ser ut såhär:
<tagg />
Viktiga och vanliga taggar
En doctype-deklaration är egentligen inte en tagg, men den är en av de allra viktigaste delarna i ditt HTML-dokument. Den berättar för webbläsaren att dokumentet är ett HTML-dokument och vilken version av HTML det är. Den hämtar även alla regler och definitioner som gäller för versionen du angett. Doctype-deklarationen ska alltid finnas allra längst upp i ditt dokument, det får inte ens finnas en radbrytning eller ett mellanslag innan. Doctype-deklarationer kan vara rätt långa och krångliga, men du behöver inte memorera dem då de är enkla att hitta med en snabb googling. Blogg.se använder främst HTML-versionen XHTML 1.0 Transitional, och den ser ut såhär:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML-taggen är inte så krånglig - den säger bara att allt inom dess start- och sluttagg är HTML. Du lägger starttaggen just under din doctype och sluttaggen allra längst ned i ditt dokument.
-taggen lägger du till under din HTML-tagg. -taggen kan beskrivas som huvudet eller hjärnan i ditt dokument. Här lägger du till information om ditt dokument, t.ex. hemsidans titel och språk. Här brukar man även länka till sin CSS (stilmallen på blogg.se), ett annat uppmärkningsspråk som berättar för webbläsaren hur allt du lägger till i ditt HTML-dokument ska se ut (t.ex. färg, typsnitt och storlek). Man brukar även lägga till så kallade script här, som då ofta innehåller ett programmeringsspråk såsom t.ex. Javascript. Dessa script kan sköta t.ex. kommentarsfunktionen.
Inom
-taggen börjar det roliga. -taggen är själva kroppen på din hemsida. Här lägger du till allt som ska finnas och synas på din hemsida, t.ex. din bloggrubrik, din header och dina inlägg. Det är inuti -taggen du kan använda alla taggar jag går igenom nedan.står för engelskans paragraph och betyder stycke.
-taggen använder du alltså till textstycken, t.ex. i ett blogginlägg. T.ex. är detta textstycke inom en
-tagg!
H i denna tagg står för engelskans heading, alltså rubrik. Siffran bredvid står för rubrikens nivå. T.ex. är
en underrubrik till , och så vidare. Heading-taggen går från till . Huvudrubriken på din hemsida skulle alltså stå inom taggen .
,
,
till . Huvudrubriken på din hemsida skulle alltså stå inom taggen .
,
,
.
,
,
- och
- , som står för list item, listobjekt. Det som står innanför li är alltså en punkt på listan. Här har ni ett exempel på en osorterad lista:
`
- ``
- Listobjekt 1 ``
- Listobjekt 2
- Listobjekt 3
`
Den skulle alltså se ut såhär:
- Listobjekt 1
- Listobjekt 2
- Listobjekt 3
är taggen för länkar, och står för anchor. -taggen är lite annorlunda från de taggar jag tagit upp innan, då den kräver ett så kallat attribut för att fungera. Ett attribut lägger man till inom starttaggen. -taggen ser ut såhär:
<a href="Länk">Länktext</a>Attributet här är alltså href, själva länken.
-taggen är taggen för bilder, och står för image.
-taggen kräver två attribut, src (source) och alt (alternate text).
-taggen är även lite speciell då den stänger sig själv.
-taggen ser ut såhär:
<img src="Bildlänk" alt="Bildbeskrivning" />Src är alltså själva länken till bilden, och alt är en beskrivning av bilden. Alt-attributet läser skärmläsare (som synskadade använder) samt sökmotorer när de går igenom sidan.
När du ska dela upp sin sida i olika delar, t.ex. en inläggsdel och en sidomeny, behöver du använda en
-tagg. När du tänker på "boxar" är det oftast-taggen du ska använda. Inuti div-taggen kan du alltså använda alla taggarna jag gått igenom efter body-taggen.Ett exempel
Hur skulle ett HTML-dokument då kunna se ut? Här nedan har jag skrivit ett väldigt enkelt HTML-dokument. Förstår du allt? Då har du läst igenom artikeln och förstått alla taggar jag gått igenom! Förstår du inte allt behöver du kanske läsa igenom allt igen eller ställa några frågor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`
Min hemsida Mimmis hemsida
Vem är jag?
Jag är en glad tjej från Luleå som tycker om en massa olika saker!
`
- är två olika slags listor.
- står för unordered list, osorterad lista, och
- står för ordered list, sorterad lista.
- ger dig en lista med punkter eller fyrkanter, medan
- ger dig en lista med siffror eller bokstäver. Inuti ul hittar vi
Tummen upp! 
Tummen upp säger jag med.
Håller med, riktigt bra artikel! :)
Starta ny diskussion