Enkel kodning med HTML

HTML står för HyperText Markup Language och är ett ganska simpelt programmeringsspråk som bygger på att man sätter olika slags taggar på innehållet för att markera för webbläsaren vilken typ av innehåll det är. Webbläsaren tolkar dessa taggar och presenterar innehållet enligt önskemålen. En fil med HTML-kod sparar du sedan med ändelsen .html för att webbläsaren ska veta hur den ska tolka koden.

HTML-dokumentet

En HTML-sida behöver först och främst vissa taggar som visar att det är en HTML-sida. Alla annan kod på din sida ska omgärdas av dessa taggar för att visa att det som finns mellan dem är just HTML-kod. Efter detta behövs taggar som delar in sidan i en del för sidhuvud och en del för själva innehållet. I sidhuvudet ska vissa instruktioner ligga, t ex kallar man här på CSS-filen om det finns någon, eller lägger in metadata så som hemsidans titel, beskrivning och nyckelord. I andra delen ska du föga överraskande lägga in själva innehållet.

Lägga in text

Det enklaste man kan lägga in på en webbsida är text. Du behöver egentligen inte ens någon tagg för att lägga in text. Lägger du in lite text utan någon tagg alls så kommer den tolkas som vanlig text. Dock kan du lägga in en tagg för att berätta att allting som ligger inom taggarna är ett "stycke".

Start-tagg och slut-tagg (t ex rubriker och länkar)

Sådant som rubriker och länkar måste alla omslutas av taggar, alltså med en start-tagg och en slut-tagg. Detta visar var denna specifika typ av innehåll börjar och var den slutar, och att allt som är inuti taggarna är av visst slag. Överst ser du en rubrik (h1 är den största rubriken, sen finns även h2, h3 och h4 etc) och under detta två exempel på hur en länk kan se ut i HTML-kod.

Rubrik

"Länkadressen" ska bytas ut mot adressen till en specifik webbsida t ex http://www.google.com eller en sida som tillhör din webbsida. För att en länk ska funka krävs att man alltid definierar vart man ska komma när man klickar på den. Som du kan se i den andra exempellänken går det dock att lägga in ytterligare (ej obligatoriska) saker i taggen som ger mer funktionalitet. I title skriver du in en beskrivning för länken, t ex namnet på den sida du länkar till. Target avgör hur den nya sidan ska öppnas. Ifall du vill att sidan ska öppnas i samma webbläsarfönster behöver du inte ha med target alls men vill du att den ska öppnas i ett helt nytt fönster så ska du skriva som ovan.

Taggar utan avslutande tagg (t ex bilder)

Vissa taggar är ensamma och har alltså inget avslut. Ett exempel på en sådan tagg är den för att lägga in en bild. I detta fall har du ingenting att omsluta med taggar och behöver då bara en enda snutt kod. Koden för att lägga in en bild är som följer:

Efter src skriver man in var någonstans bilden finns. Detta är sökvägen på den server där du har dina filer. Ifall du har lagt bilden i samma mapp som filen med HTML-koden så behöver du bara skriva in bildens namn och ändelse. Ifall du sparat bilden i en egen mapp som heter bilder så blir sökvägen istället "bilder/bildensnamn.jpg". När du har ett element som inte har en avslutande tagg så ska du se till att avsluta taggen med ett / så som i exemplet ovan, för att vara säker på att koden fungerar i alla lägen. Alt är till för en liten beskrivande text. Se till att du inte använder å, ä eller ö när du sparar bilder eller skapar mappar då det inte fungerar i HTML-koden.

Mycket mer att lära...

Det finns mycket mer att lära sig om HTML än vad som får plats i en kort artikel. Vi erbjuder endast en mycket grundläggande inblick i hur HTML fungerar. För mer info och en bra HTML-skola, klicka här.