XML-intro

Introduktion till HTML

Denna sida ger en snabb introduktion till språket HTML.

Webbsidor

En webbsida består av ett antal delar som kan identifieras som text, bilder, länkar och andra layoutmässiga symboler (t.ex. skiljelinjer). Sidorna kan också inkludera andra digitala medier, t.ex. videofilmer och ljud, men dessa hanteras av s.k. tilläggsprogram ("plugin") i webbläsaren.

Sidan skapas i språket HTML där man kan dela in texten i rubriker, stycken, tabeller, listor, etc. Bilder ligger som separata filer och i HTML-koden lägger man in referenser till dessa. En länk består av en markering av det som ska vara ankare (dvs den text som ska bli understruken) samt en referens till den fil som man ska hoppa till som destination. Som andra exempel i denna introduktion kommer att visa, kan man också skapa formulär med textfält, knappar och menyer.

Ett HTML-dokument är en textfil med sidans text och HTML-koder för formatering eller referenser till andra filer.

En webbplats består alltså av flera olika filer med referenser mellan dem.

HTML

HTML står för HyperText Markup Language. Det är ett beskrivningsspråk, där man med ett antal olika koder ("taggar") "märker upp" informationen och därmed beskriver layouten. Det är ej ett programmeringsspråk, eftersom det inte finns några instruktioner för att utföra något. Ett HTML-dokument består av sidans textinnehåll samt koder för:

formatering
layout
referenser (bilder, länkar, etc)
speciella tecken (åäö, etc)

Exempel

HTML-kod

Utseende på webbsidan

<HTML>
  <HEAD>
    <TITLE>Exempel</TITLE>
  </HEAD>
  <BODY>
    <H2>Ett exempel</H2>
    <HR>
    <IMG SRC="pics/bild.jpg" ALIGN="Left">
    <P>Detta är ett exempel på en
    <B>webbsida</B>.
    <P><A HREF="dest.htm">En länk</A>
  </BODY>
</HTML>

Ett exempel

Detta är ett exempel på en webbsida.

En länk

Koder

	Exempel
	HTML-kod	Utseende
Koder ("taggar") skrivs inom < och >. Tecknen däremellan utgör namnet på koden och eventuella attribut. I HTML görs det ingen skillnad på gemena och versala bokstäver, så man kan använda vad man vill. Man brukar dock hålla sig till antingen enbart gemener eller enbart versaler av läsbarhetsskäl. I exemplen på denna sida används versaler för koderna och då blir det lite lättare att urskilja koderna från informationens innehåll.	<P>Ett textstycke med text <HR> <P>Mer text	Ett textstycke med text Mer text
I en del fall måste man ha både en start- och en slutkod, för att ange var något ska börja och sluta. Då man t.ex. vill ha någon text i fetstil, måste man ange både var fetstil ska börja och var det ska upphöra. I exemplet används B som står för bold och är HTML-koden för fetstil. Slutkoden är alltid densamma som startkoden, med den skillnaden att man har ett snedstreck precis före koden.	en <B>text</B> i fetstil	en text i fetstil
I en del fall räcker det med en startkod, t.ex. för att ange nytt stycke (koden är P som står för paragraph). Stycket slutar då det kommer en ny kod för ett nytt stycke, eller någon annan kod som avbryter stycket, t.ex. en tabell eller lista.	<P>Text i ett stycke.<P>Andra stycket.	Text i ett stycke. Andra stycket.
Det är dock inte fel att ha en slutkod, utan man kan alltid ta med en slutkod, även om den inte har någon funktion.	<P>Text i ett stycke.</P> <P>Andra stycket.</P>	Text i ett stycke. Andra stycket.
I vissa fall behövs också ett eller flera attribut för att ge ytterligare information. I t.ex. koder för bilder och länkar måste man ange vilken bildfil som ska användas och vad destinationen för länken är. Koderna i exemplet är: IMG står för image och SRC står för source. A står för anchor och HREF står för hypertext reference.	<IMG SRC="pics/bild.jpg"> <A HREF="dest.htm">ankartext</A>	ankartext
ÅÄÖ och en del andra tecken har fått särskilda koder, för att man säkert ska veta att de visas korrekt i alla webläsare och datormiljöer. Å är A med en ring, Ä är A med omljud (umleit=uml) och på samma sätt är Ö ett O med omljud.	å ä ö Å Ä Ö © ... Växjö	å ä ö Å Ä Ö © ... Växjö
Hela koden i ett HTML-dokument omges med koderna <HTML> och </HTML>, så att webbläsaren ska veta att den nu ska tolka text inom < och > som HTML-koder. Koden delas sedan in i en HEAD- och en BODY-del. I HEAD-delen ges information till webbläsaren, bl.a. TITLE som dels visas i webbläsarens titelrad och dels blir namnet på bokmärket om någon väljer att skapa ett bokmärke på sidan. I BODY-delen lägger man in allt som ska visas på sidan.	<HTML> <HEAD> <TITLE>Min sida</TITLE> </HEAD> <BODY> Texten som visas... </BODY> </HTML>

För ytterligare genomgång av HTML-koder och hur man sätter samman webbsidor med HTML, rekommenderas du nu att gå vidare till de grundläggande övningarna i HTML.