skriv ut »

HTML
Hypertext Markup Language

Även om du använder ett visuellt program som hjälp när du jobbar med dina webbsidor är det viktigt att du förstår den HTML-kod som programmet skapar. Här är en genomgång av grunderna i HTML.

TIPS! Gå igenom alla de steg-för-steg-övningar som finns i guiderna för att få en kunskapsgrund att bygga vidare få.

OBS! HTML finns i flera versioner och nu finns även XML och framförallt CSS som i flera fall bör användas istället för vissa av de märken som visas i denna guide. Det viktiga är att du får bra grundkunskaper om hur HTML-sidor är uppbyggda så att du sedan kan gå vidare till de andra guiderna här på Webdesignskolan. Du bör använda CSS för formatering av sidornas layout. Gå vidare till guiden CSS - grunder » när du är klar med HTML-grunderna!

webbsidor bygger i grunden på sidbeskrivningsspråket HTML (HyperText Markup Language). Det innebär att utseende och innehåll styrs av att HTML-koden kan beskriva sidan på rätt sätt för din webbläsare . Olika webbläsare tolkar HTML-koden på olika sätt och dina webbsidor kan därför se olika ut på olika datorer - läs mer i guiden "webbläsare och säkerhet" ». Organisationen W3C » (World Wide Web Consortium) fastställer standarder för hur HTML-kod ska skrivas och användas. HTML är urprungligen avsett att endast visa text helt utan formatering och inte för att visa bilder eller annan layout. Idag används stilmallar - CSS » för att effektivare formatera webbsidornas innehåll och utseende.

Det bästa är naturligtvis om man försöker anpassa sina webbsidor för att fungera på olika datorer och operativsystem. Det innebär i sin tur att man kanske får avstå från vissa effekter som bara syns i vissa webbläsare. Du bör också fundera över vilken målgrupp du vänder dig till när du planerar din webbplats. En ovan användare kan missa information och länkar mm om det inte är tydligt presenterat.

 

Grunderna i HTML

Det finns många HTML-editorer och de ger dig hjälp med koden och det finns även WYSIWYG-editorer där du ser hur sidan kommer att se ut i webbläsaren (What You See Is What You Get) . Ett av de populäraste programmen är Dreamweaver som du kan läsa mer om på Dreamweaverskolan »

När du följer denna guide är det bäst att använda en vanlig texteditor så att du får skriva koden helt själv. Du bör ha grundkunskaper i hur HTML-språket är uppbyggt även när du använder HTML-editorer. Ofta måste du kontrollera och korrigera i HTML-koden "manuellt" och då är det viktigt att veta vad du gör.

Använd gärna Windows enkla texteditor Anteckningar (Notepad) som du bör hitta under menyn "Start/Alla Program/Tillbehör".

Du kan också använda menyn "Start/Kör..." och skriva namnet notepad:

Programmet Anteckningar (Notepad) skriver ASCII-text vilket innebär att koden du skriver förblir helt oformaterad.

Startläge - kodningen kan börja!

Innehållet som ska som ska synas på själva sidan skrivs inom "märken" (taggar - tags) som talar om vad som ska visas för webbläsaren (kallas också för "element"). Märken skrivs inom <hakar> (brackets). De flesta taggar har en start-tagg och en slut-tagg som i exemplet nedan:

<TITLE> Min första webbsida </TITLE>

Taggarna är inte känsliga för stora och små bokstäver (Case sensitive) det går lika bra att skriva <TITLE> som <title> eller <Title>. (OBS! i XHTML används enbart gemener - läs mer om XML » )

Följande märken är själva stommen till webbsidan och ska finnas i varje dokument:

<HTML> Anger att koden och sidan är ett HTML-dokument.

<HEAD> "Osynlig" information som används för att ge information till webbläsaren, sökmotorer mm. Inget som skrivs här syns för demn som ska läsa dina sidor.

<TITLE> Sidans titel.

<BODY> Allt som skrivs i BODY syns i webbläsaren, det är alltså sidans kropp.
 

ÖVNING 1: GRUNDERNA

Att skriva HTML-koden och visa den i en webbläsare.

  1. Skriv in följande kod i programmet Anteckningar. Var noga med att skriva exakt alla tecken i märkena (om du missar ett tecken eller mellanslag kan webbläsaren tolka koden felaktigt):

  2. Spara dokumentet med namnet min_forsta.htm
  3. Starta sedan en webbläsare och öppna där ditt HTML-dokument. Använd menyn "Arkiv/Öppna" eller snabbkommandot CTRL+O och bläddra dig fram till filen "min_forsta.htm":

TIPS! Använd aldrig ÅÄÖ eller mellanslag i filnamnen till dokument och bilder som skall publiceras på Internet. Använd "underscore" understrykning _ eller bindestreck - istället för mellanslag. Exempel på filnamn:

min_forsta_sida.html
sida-1.htm
sida_1.html

 

Bakgrundsfärg

Bakgrundsfärg anges med BGCOLOR som ett tillägg inom märket <BODY> och det kallas då för ett attribut till märket <BODY>

se färdigt exempel  »

<html>
<head>
<title>Min Internetplats</title>
</head>
<body bgcolor=#FFFFFF>Det här är min första webbsida! </body>
</html>
  1. Ange koden för bakgrundsfärgen och spara ditt dokument på nytt. Gå till webbläsaren och använd webbläsarens "uppdaterings-knapp" (Reload/Refresh) eller tangenten F5:



    Läs mer om färger i nästa steg!

Gå vidare: Färgkoder, Hexadecimala färger  »