Om programmeringsspråket HTML

0

HTML är en akronym för HyperText Markup Language. HTML är ett märkspråk för hypertext som styr innehåll och utseende på webbsidor. Med märkspråk menas att man använder textkoder (element och taggar) i ett dokument, som sedan avgör hur innehåll som till exempel bilder, text och länkar presenteras på webbsidor. För att bygga en webbsida med hjälp av HTML kan man använda ett ett textredigeringsprogram eller ett HTML-redigeringsprogram. Sublime Text, Kompozer och Notepad ++ är exempel på vanliga program.

HTML-struktur: Dokumenttyp, element och taggar

Högst upp i varje dokument anges dokumenttypen, DOCTYPE. Med hjälp av en DOCTYPE-deklaration kan man tala om för webbläsaren att dokumentet är en HTML-fil, samt vilken version av HTML som används. De textkoder som finns i ett dokument består av element som är uppbyggda av taggar. Varje element består vanligtvis av en start- och sluttagg och mellan start- och sluttaggen finns själva innehållet som kommer presenteras på webbsidan. Själva taggarna visas alltså inte för användaren på webbsidan, utan på webbsidan presenteras bara det innehåll som finns mellan start- och sluttaggen. HTML-taggar brukar oftast ha en öppnings- och stängningskod. Öppningsetiketten består av taggnamnet omgivet av ett mindre än-tecken (<) och ett större än-tecken (>). Stängningsetiketten består i sin tur av taggnamnet omgivet av ett mindre än-tecken (<) och ett snedstreck följt av ett större än-tecken (/>).

Det finns fyra olika typer av standardkategorier för element, nämligen strukturmärken, presentationsmärkningar, hyperlänkmärkningar samt interaktiva element. Element inom kategorin strukturmärken används för att avgöra innehållets syfte. Ett exempel på detta är elementet <h1>…</h1> som är den högsta rubriknivån inom HTML, och används för att visa att innehållet mellan taggarna är en rubrik.

Element inom kategorin presentationsmärkningar används för att avgöra innehållets stil. Till exempel kan elementet <i>…</i> användas för att göra innehållet inom taggarna kursivt.

Syftet med hyperlänkmärkningar är att märka ut länkar i dokumentet. Inom taggarna <a href=”länk”>länktext</a> lägger man in själva länken, samt länktexten som man önskar presentera. Interaktiva element består av, precis som det låter, interaktiva objekt. Det kan vara allt från knappar till listor.

Nedan följer en lista med vanligt förekommande HTML-taggar:

  • <html>…</html> – Talar om för webbläsaren att dokumentet är ett html-dokument
  • <head>…</head> – Innehåller dokumentets metadata
  • <body>…<body> – Innehåller själva innehållet i dokumentet, såsom text, bilder och listelement
  • <title>…</title> – Titel
  • <h1>…</h1> – Huvudrubrik
  • <p>…</p> – Paragraf
  • <li>…</li> – Listelement

Grundstrukturen för ett HTML-dokument utgörs av följande element:

<!DOCTYPE html>

<html>

<head>…</head>

<body>…</body>

</html>

Bortsett från DOCTYPE ska all kod finnas mellan <html> och </html> i dokumentet.

Ett exempel på hur en minimal kodstruktur med innehåll kan se ut är följande (Titel här, Rubrik här samt Paragraf här, är det enda innehåll som kommer visas på webbsidan):

<!DOCTYPE html>

<html>

<head>

<title>Titel här</title>

</head>

 

<body>

<h1>Rubrik här</h1>

<p>Paragraf här</p>

</body>

</html>

Attribut

HTML

HTML

Attribut kan ingå i HTML-element. Dessa ger möjlighet att ge ytterligare information om ett element. Till exempel ger dessa möjlighet att ange textfärg eller anpassa en bilds storlek. Attributen specificeras i starttaggen. Nedan följer en lista med vanligt förekommande attribut:

  • href – Länk
  • src – Bildkälla
  • width – Bredd
  • height – Höjd
  • alt – Alternativ text som visas om en bild inte kan visas
  • style – Används för att specificera till exempel färg, typsnitt och storlek för en text

Comments are closed.