HTML

Skapa HTML

För att skapa HTML krävs ingen dyr eller svårhanterlig programvara. Det finns många avancerade program för att skapa HTML och som gör det mesta arbetet åt dig men vi kommer att använda en vanlig texteditor. Detta gör vi för att verkligen se hur HTML ser ut och få lite känsla för koden. En enkelt editor (redigerare) att använda är t ex Notepad (Anteckningar) i Windows.

Kod i Notepad

För att webbläsaren ska förstå att det är HTML i ett dokument måste filen ha filändelsen html eller htm. Vi kommer att använda html i kursen. Om man jobbar endast med Windows spelar det ingen roll om filnamnet är med gemena eller versaler (eller blandat) eftersom dessa räknas som samma tecken. Men när filerna ligger på en dator som kör t ex UNIX (som är vanligt för de webbservrar som många hemsidor ligger på) räknas gemena och versaler som olika tecken. Ha därför som vana att döpa alla filer med gemena bokstäver, det blir då lättare för dig själv och andra att hitta sidorna.

Genom att skapa en webbsida om hunden Nike kommer vi titta på grunderna i HTML och hur de olika taggarna används. Exemplet kommer att byggas upp från grunden och varje ny sak förklaras när den införs. Ett bra sätt att lära sig HTML är att prova, så gör gärna exemplet under läsningens gång eller direkt efter.

Det är en hel del saker som kommer att hända och vill du själv följa med följer här lite instruktioner för hur du kan göra. Vi ska skapa ett antal filer och förbättra dessa genom ett antal delsteg. När det är dags att jobba med exemplet skapar du den fil som det handlar om i din texteditor. Efter att ha gjort ändringar i filen öppnar du samma fil i din webbläsare för att titta på resultatet. För varje ändring som du gör i koden måste du ladda om HTML-sidan i webbläsaren för att ändringen ska synas där också. Glöm inte att spara filen i texteditorn först!

Grunden till HTML

HTML är alltså till för att beskriva hur text, bilder och andra media är strukturerade i ett dokument. Det här kommer inte helt att avgöra hur sidan kommer att se ut i användarens webbläsare, men det avgör vilken struktur innehållet får. Det är webbläsaren som avgör dokumentets slutliga layout och hur allt kommer att se ut för användaren. Det här betyder att du inte kan veta exakt hur din sida ser ut i alla slags olika webbläsare, så det gäller att testa på flera. Det som anger formateringen är HTML-märken. Vi kommer att kalla dessa för märken eller taggar (efter det engelska ordet tag). För att mer exakt styra sidans utseende ska vi senare i kursen titta på CSS, men för stunden inriktar vi oss på att titta på själva innehållet.

Koden i denna lektion kommer att skrivas med följande font: <HTML>. Kod som inte ligger i den löpande texten har följande utseende

<HTML>

Ett märke består av en kod samt eventuella attribut och attributens värden.Allt detta innesluts sedan inom < och > för att markera start och slut på märket. Ett märke kan ha flera attribut eller inget attribut alls.

Exempel på märken är :

<HTML>
eller
<BODY BGCOLOR="blue">

För att formatera en del i ett dokument måste man beskriva vilken del det gäller och vad som ska göras med den. Detta gör man genom att innesluta den efterfrågade delen mellan det märke man vill formatera med samt dess slutmärke. Det kan se ut såhär :

<H1> Min personliga hemsida </H1>

Här ser vi att slutmärket är precis som startmärket fast med tecknet / först. Detta tecken fås genom att hålla inne Shift och trycka på tangenten för 7. Start- och sluttaggen tillsammans med allt som står innanför kallar vi för element. Allting som står i elementet H1 kommer nu att formateras enligt reglerna för H1. H1 står för övrigt för rubriknivå 1 och är i regel den största och viktigaste rubriken på en sida.

Alla märken har inte slutmärken vilket vi kommer att se lite senare.

Förutom att märka upp innehåll som ska visas på en webbsida går det att bestämma att ett visst stycke i HTML-dokumentet bara ska vara en kommentar. Detta kallas ibland att bortkommentera kod då det ofta används för att tillfälligt utesluta en viss del av koden för att se hur det påverkar HTML-sidan. Oavsett om du bara vill skriva in en kommentar som förklarar vad en viss del i dokumentet fungerar eller om du vill kommentera bort kod för att testa, används följande märken :

<!--
och
-->

Ett exempel är


<!-- 

Här skriver jag lite text som inte ska synas.

Det här är ju inte kod, bara en kommentar.

Sen avslutas kommentaren och efter slutmärket kan koden ta vid igen.

-->