69 besökare online
Drömvävaren webbshop
14 kunder online

webdesign och HTML

 

OBS!
HTML finns i flera versioner och webbsidor kan även byggas med XML.
CSS (stilmallar) används för formatering av sidornas layout. Gå vidare till guiden CSS - grunder » när du är klar med HTML-grunderna!

Grunderna i HTML

Webbsidor är uppbyggda av 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 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 WYSIWYG-programmen är Dreamweaver som du kan läsa mer om i guiderna om Dreamweaver »

När du följer de här HTML-guiderna, som ska ge dig grundkunskaperna, är det bra att använda en vanlig texteditor så att du får skriva koden själv. Du bör ha grundkunskaper i hur HTML-språket är uppbyggt även när du använder WYSIWYG-editorer. Ofta måste du ändå kontrollera och korrigera i HTML-koden "manuellt" och då är det viktigt att veta vad du gör.

Vi rekommenderar att du använder Notepad (Anteckningar) som finns i Windows eller Notepad++ som är en fristående HTML-editor.

Notepad (Anteckningar)

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äget i Notepad, kodningen kan börja:

 

Notepad++

Notepad++ är en texteditor för Windows. Du har stor hjälp av programmets färgade kodsyntax och visning av radnummer. Notepad++ använder flikar för att hantera flera öppna dokument och visar färger på kodsyntax. Det innebär att du enklare kan se om du skriver fel när du programmerar och ändrar i HTML-kod och PHP-kod. Du kan söka och ersätta kod och dessutom visas radnummer vilket är en stor fördel när du felsöker din kod.

Läs om hur du hämtar programmet i guiden Notepad++ (HTML-editor) »

När du öppnar programmet visas "change.log" som innehåller nyheter och buggfixar. Välj menyn "Arkiv/Nytt" för att öppna ett nytt tomt dokument:

Startläget i Notepad++, kodningen kan börja:

 

 

Skriva HTML-koden och visa den i en webbläsare

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 webbplats </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> när du skriver koden i HTML.
Observera att i XHTML används enbart gemener, läs mer i guiden Dokumenttyp - doctypes XML och XHTML »

Följande märken ärgrunden 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.

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

    Notepad


    Notepad++


  2. Startsidan i en webbplats bör du namnge till "index" och filtillägget kan vara ".htm", eller ".html". Den webbserver som du senare publicerar din webbplats till är konfigurerad att öppna sidor med namnet "index.htm" eller "index.html". Läs mer om att publicera innehållet i webbplatsen i guiden Använda FTP-program »

    Adressen till din webbplats kallas även URL och är den som anges i webbläsarens adressfält. Hela adressen anges med domännamn och sidnamn. Om du namnger din startsida till "index.html" behöver bara domännamnet anges i adressfältet. Om du ger din startsida andra namn måste hela adressen skrivas in i webbläsarens adressfält. Exemplet nedan visar hur en URL kan se ut:

    Startsidan heter "index.html"


    Startsidan heter "start.html"


    Läs mer om domännamn i guiden Webbhotell och domännamn »

    Spara ditt dokument med namnet "index.html". En bra metod när du sparar en webbplats är att spara alla dina HTML-filer i en egen mapp med undermappar. I exemplet nedan har vi redan skapat en mapp med namnet "www_grund":



  3. Öppna ditt HTML-dokument i en webbläsare. Läs mer om webbläsare i guiden Webbläsare och säkerhet »

    Använd menyn "Arkiv/Öppna" eller snabbkommandot CTRL+O och bläddra dig fram till filen "index.html". Så här kan exemplet se ut i webbläsaren Firefox:

TIPS! Använd aldrig ÅÄÖ eller mellanslag i filnamnen till dokument och bilder som skall publiceras på en webbplats. Använd "underscore" (understrykning) eller bindestreck istället för mellanslag.

Exempel på filnamn:

information_om_foretaget.html
vara_nya_priser.html
sida-1.html
sida_1. html

 

Nästa guide: Färger och Hexadecimala färgkoder  »