webdesign och HTML

HTML grunderna

OBS! Följ guiderna i den ordning de anges nedan så lär du dig grunderna i att bygga webbsidor och skapa en webbplats.

Grunderna i HTML
Dokumenttyp och teckenuppsättning
Färger och färgkoder
Text och specialtecken
Listor, punktlistor och numrerade listor
Mall med grundkod för HTML-sidor
Bilder
Bakgrundsbilder
Sidmarginaler
Länkar
Gå vidare:
Webbhotell och domännamn
FTP-program
Tabeller
CSS grunder
HTML och doctypes
Teckenkoder - charset
W3C - webbstandards
webbläsare och säkerhet

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 sidinnehåll helt utan formatering och CSS - stilmallar » används för att formatera webbsidornas innehåll och utseende.

Det finns HTML-editorer som ger 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++ som är en fristående HTML-editor.

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:

HTML-kodens struktur

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.

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

Dokumenttyp och teckenuppsättning

Att använda en standardiserad teckenkodning är en förutsättning för att dina sidor ska visas likadant oberoende av vilket dator eller program som används. När du använder svenska tecken i dina sidor kan vissa tecken visas felaktigt i webbläsaren. Du kan läsa mer i guiden Teckenkoder - charset »

Dokumenttyp - doctype

För att underlätta för webbläsaren och dessutom göra dina sidor snabbare att ladda ska du använda en Doctype-deklaration - DTD (Document type declaration).

Kopiera eller skriv koden nedan:

<!doctype html>

Notepad++

Teckenuppsättning - charset

Att använda en standardiserad teckenkodning är en förutsättning för att dina sidor ska visas likadant oberoende av vilket dator eller program som används. De flesta länder har ju landspecifika tecken som bara används i det egna språket och använder då en teckenkodning som innehåller de tecken som används. Teckenuppsättningen UTF-8 har alla språkversioner inbyggd och du behöver inte välja en specifik version av teckenkodningen.

Spara dokumentet med samma teckenkod som CHARSET

Det räcker inte att bara ange teckenuppsättningen i dokumentets kod. Du måste också se till att din editor sparar dokumentet med samma teckenkod. I Notepad++ gör du detta med menyn "Format":

TIPS! Du kan även konvertera ett sidinnehåll du redan skrivit. Använd menyn ovan men välj då "Konvertera till UTF-8".

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:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
</head>
<body>Det här är min första webbsida!
</body>
</html>

Notepad++
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":
Öppna ditt HTML-dokument i en webbläsare. Läs mer om webbläsare i guiden Webbläsare och säkerhet »

Använd snabbkommandot CTRL+O eller menyn "Arkiv/Öppna" och bläddra dig fram till filen "index.html".

Så här kan exemplet se ut i webbläsaren Google Chrome:

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

Färger och färgkoder

Färger kan anges Hexadecimalt eller som RGBa

Hexadeciamala färgkoder

Färger kan anges med det Hexadecimala talsystemet där färgen Vit anges med värdet #FFFFFF. När du använder ett bildbehandlingsprogram för att skapa bilder till din webbplats används färgsystemet RGB (Red,,Green, Blue). RGB-värdet motsvaras av ett värde i det Hexadecimala färgsystemet. Här är några exempel:


VIT RGB: 255, 255, 255 Hexadecimalt: #FFFFFF	SVART RGB: 0, 0, 0 Hexadecimalt: #000000	RÖD RGB: 255, 0, 0 Hexadecimalt: #FF0000	BLÅ RGB: 0, 0, 255 Hexadecimalt: #0000FF

Se tabell med Hexadecimala färgkoder » längre ned på denna sida.

Bakgrundsfärg

Bakgrundsfärg och andra egenskaper anges som en "stil" (style) och använder CSS (Cascading Style Sheet). När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

CSS-formatet anges inom märket <STYLE>där formatet för varje märke anges inom block omslutna med måsvingar eller "krullparenteser" { }

Formatet anges med selektorer som anger vad som ska formateras. I vårt exempel är det <BODY> som är selektor och ska ha egenskapen för bakgrundsfärg. Selektorer och format anges inom kommentarsstecken 

I exemplet nedan anges att <BODY> ska CSS-formateras för bakgrundsfärg:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>Det här är min första webbsida!
</body>
</html>

Ange CSS-koden för bakgrundsfärgen och spara ditt dokument på nytt.

Gå tillbaka till webbläsaren och använd webbläsarens "uppdaterings-knapp" (Reload/Refresh) eller snabbkommando F5:

Färgnamn och Hexadecimala värden

Färgerna anges normalt som Hexadecimala värden men ett urval av färger kan även anges med namn:

black	silver	gray	white
maroon	red	purple	fuchsia
green	lime	olive	yellow
navy	blue	teal	aqua

Hexadecimala färger:

black = "#000000"	silver = "#C0C0C0"	gray = "#808080"	white = "#FFFFFF"
maroon = "#800000"	red = "#FF0000"	purple = "#800080"	fuchsia = "#FF00FF"
green = "#008000"	lime = "#00FF00"	olive = "#808000"	yellow = "#FFFF00"
navy = "#000080"	blue = "#0000FF"	teal = "#008080"	aqua = "#00FFFF"

#FFFFFF

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#FFCCFF

#FFCCCC

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#FF99FF

#FF99CC

#FF9999

#FF9966

#FF9933

#FF9900

#FF66FF

#FF66CC

#FF6699

#FF6666

#FF6633

#FF6600

#FF33FF

#FF33CC

#FF3399

#FF3366

#FF3333

#FF3300

#FF00FF

#FF00CC

#FF0099

#FF0066

#FF0033

#FF0000

#CCFFFF

#CCFFCC

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#CCCCFF

#CCCCCC

#CCCC99

#CCCC66

#CCCC33

#CCCC00

#CC99FF

#CC99CC

#CC9999

#CC9966

#CC9933

#CC9900

#CC66FF

#CC66CC

#CC6699

#CC6666

#CC6633

#CC6600

#CC33FF

#CC33CC

#CC3399

#CC3366

#CC3333

#CC3300

#CC00FF

#CC00CC

#CC0099

#CC0066

#CC0033

#CC0000

#99FFFF

#99FFCC

#99FF99

#99FF66

#99FF33

#99FF00

#99CCFF

#99CCCC

#99CC99

#99CC66

#99CC33

#99CC00

#9999FF

#9999CC

#999999

#999966

#999933

#999900

#9966FF

#9966CC

#996699

#996666

#996633

#996600

#9933FF

#9933CC

#993399

#993366

#993333

#993300

#9900FF

#9900CC

#990099

#990066

#990033

#990000

#66FFFF

#66FFCC

#66FF99

#66FF66

#66FF33

#66FF00

#66CCFF

#66CCCC

#66CC99

#66CC66

#66CC33

#66CC00

#6699FF

#6699CC

#669999

#669966

#669933

#669900

#6666FF

#6666CC

#666699

#666666

#666633

#666600

#6633FF

#6633CC

#663399

#663366

#663333

#663300

#6600FF

#6600CC

#660099

#660066

#660033

#660000

#33FFFF

#33FFCC

#33FF99

#33FF66

#33FF33

#33FF00

#33CCFF

#33CCCC

#33CC99

#33CC66

#33CC33

#33CC00

#3399FF

#3399CC

#339999

#339966

#339933

#339900

#3366FF

#3366CC

#336699

#336666

#336633

#336600

#3333FF

#3333CC

#333399

#333366

#333333

#333300

#3300FF

#3300CC

#330099

#330066

#330033

#330000

#00FFFF

#00FFCC

#00FF99

#00FF66

#00FF33

#00FF00

#00CCFF

#00CCCC

#00CC99

#00CC66

#00CC33

#00CC00

#0099FF

#0099CC

#009999

#009966

#009933

#009900

#0066FF

#0066CC

#006699

#006666

#006633

#006600

#0033FF

#0033CC

#003399

#003366

#003333

#003300

#0000FF

#0000CC

#000099

#000066

#000033

#000000

TIPS! Du kan använda Kalkylatorn i Windows för att omvandla RGB-värden till Hexadecimala värden.

Välj att visa Kalkylatorn i avancerat läge. Använd menyn: "Visa/Avancerad" eller "Visa/programmerare" (beroende på version av Windows):

Skriv in ditt första värde från RGB-systemet, tex 255 (R-255,G-255,B-255=VITT):

Växla till läget "HEX" i Kalkylatorn du får då Hex-värdet "FF":

Fortsätt med de andra två värdena tills du har en motsvarande Hexadecimalkod. OBS! Du gör alltså omvandlingen i tre steg och glöm inte att byta tillbaka till rätt läge på Kalkylatorn efter varje omräkning.

RGBa färgvärden med opacitet

CSS3 ger möjlighet att använda färgvärden i RGBa som är ett tillägg till RGB-färger och ger en alfa-kanal för att ange opacitet.

Ett RGBa-värde anges så här: rgba(red, green, blue, alpha)

Parametern Alpha anges som ett värde mellan 0 och 1 där 0.5 är 50% opacitet. Du kan tex ange värdet 0.45 om 0.5 är för hög opacitet.

I exemplen nedan används Svart färg för att skapa olika gråskalor med Alfa-värdet:

rgba(0, 0, 0, 0.15);

rgba(0, 0, 0, 0.3);

rgba(0, 0, 0, 0.45);

rgba(0, 0, 0, 0.75);

I exemplen nedan används Röd färg för att skapa olika nyanser med Alfa-värdet:

rgba(255, 0, 0, 0.15);

rgba(255, 0, 0, 0.3);

rgba(255, 0, 0, 0.45);

rgba(255, 0, 0, 0.75);

I exemplen nedan används Gråskalor för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(204,204,204, 1);
motsvarar Hex-värde:
#CCC

rgba(253,253,253, 1);
motsvarar Hex-värde:
#999

rgba(102,102,102, 1);
motsvarar Hex-värde:
#666

rgba(51, 51, 51, 1);
motsvarar Hex-värde:
#333

I exemplen nedan används Grundfärger för att skapa olika nyanser med Alfa-värdet. Observera att ingen transparens används då Alpha-värdet är "1":

rgba(255,0,0, 1);
motsvarar Hex-värde:
#FF0000

rgba(255,255,0, 1);
motsvarar Hex-värde:
#FFFF00

rgba(0,255,0, 1);
motsvarar Hex-värde:
#00FF00

rgba(0,0,255, 1);
motsvarar Hex-värde:
#0000FF

Text och specialtecken

Text och teckensnitt (fonter, typsnitt) som visas på webbsidan beskrivs bara för webbläsaren av HTML-koden. Teckensnittet laddas alltså inte ned när du läser in sidan i webbläsaren. Du kan även använda dig av specialtecken » som framgår av tabellen längst ned på denna sida.

Eftersom teckensnittet inte bäddas in och följer med HTML-filen kan textens utseende variera på olika datorer. Om det valda teckensnittet inte finns på användarens dator ersätts det av ett teckensnitt. Det innebär att din layout kan förändras. Förutom att texten inte visas som du vill så kan förskjutning i texten uppstå vilket i sin tur kan placera bilder och grafik felaktigt.

Vill du vara säker på att din layout bibehålls så kan du använda något av dessa teckensnitt:

Arial	Arial Black	Times New Roman
Courier New	Verdana	Comic Sans
Impact	Georgia	Trebuchet
Webdings abcdefgh

Teckensnittens utseende kan variera beroende på vilken storlek du valt och dessutom beror det på vilken bildskärmsupplösning dina besökare har. Här är några exempel på teckensnitt i olika storlekar där du själv kan avgöra läsbarheten:

TIMES NEW ROMAN size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=1	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=2	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
TIMES NEW ROMAN size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
ARIAL size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!
VERDANA size=3	Tänk på att dina valda teckensnitt kan se olika ut på olika bildskärmar!

För att ha ännu bättre kontroll över sina webbsidor kan man i HTML-koden lägga in ett eller flera ersättningsteckensnitt. Om det valda teckensnittet inte finns visas istället det valda erättningsteckensnittet. Ange de valda teckensnitten åtskilda med kommatecken:

font-family: Verdana, Arial, Helvetica, sans-serif;

Storlekar på tecken

Storlekar på text kan anges med olika enheter och CSS ger möjlighet att skala text obegränsat och olika enheter för att ange storleken. En vanlig enhet är pixlar som även används för att ange storlek på bildskärmar och därför erbjuder bra kontroll över hur resultatet blir på en bildskärm.

Textstorlekar kan anges i enheterna:

px - pixlar (pixels) - samma enhet som bildskärmars upplösning
pt - Punkter (point) - 1 pt är lika med 1/72 inch
in- tum (inch)
cm - centimeter
mm - millimeter
p - picas - 1 pc är lika med 12 punkter
em- em - relativ till andra element
ex - exs - en ex är x-höjden på ett tecken
% - Procent - relativ till andra element

Rubriker - Headings

Du kan använda rubriker (heading) som finns i fasta storlekar. Här visas de fasta storlekar som kan användas i HTML-koden:

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

Rubriker kan användas tillsammans med CSS för att ange fördefinierade Rubrikformat i valfria storlekar.

HEADING anges med märket <H1>, <H2>, <H3> osv.
Här anges Rubriknivå 1:

<h1>Rubrik</h1>
<p>Texten här..</p>

Teckensnitt och format på sidinnehåll

Fortsätt arbeta med ditt dokument "index.html" som du arbetade med tidigare.

Teckensnittet som du vill använda som "standard-teckensnitt" anger du som en CSS-egenskap för <BODY>och detta gäller då allt textinnehåll på sidan.

Lägg till "font-family" och "font-size" som STYLE för märket <BODY>:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>Det här är min första webbsida!
</body>
</html>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
När du vill dela upp texten i olika stycken används märket <P> (Paragraph) som även ger ett extra radavstånd till texten som kommer efter textstycket.

Skriv mer text och formatera denna med rubrik och styckeindelning enligt nedan:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Det här är min första webbsida!</h1>
<p>Jag har precis lärt mig att använda olika storlekar
på texten.</p>
</body>
</html>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Du kan ange delar av texten eller enstaka ord feta, kursiva genom att använda taggarna <STRONG><EM>

Skriv in mer text och ändra textens attribut:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Det här är min första webbsida!</h1>
<p>Jag har precis lärt mig att använda olika storlekar
på texten.</p>
<p>Jag kan också göra vissa ord i <strong> fet stil</strong>, andra i <em>kursiv stil</em>.</p>
</body>
</html>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Ändra textstorleken på rubriken genom att lägga till en CSS-mall för märket <H1> enligt nedan. Notera att formatet för <H1>här anges inom ett eget block omslutna med måsvingar { krullparenteser }:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Det här är min första webbsida!</h1>
<p>Jag har precis lärt mig att använda olika storlekar
på texten.</p>
<p>Jag kan också göra vissa ord i <strong> fet stil</strong>, andra i <em>kursiv stil</em>.</p>
</body>
</html>

font-weight: normal; anger att texten kan vara något "tunnare" än standardfonten. Det passar ofta bra i stora storlekar när vissa teckensnitt blir alltför framträdande och "tjocka".

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Specialtecken

Vissa specialtecken motsvaras i HTML-koden av ett namn eller ett nummer. I vissa fall krävs det för att tecknet ska visas och i andra fall rekommenderas det för korrekt återgivning i de webbläsare som inte är svenskspråkiga.

Liten översättningstabell för vanliga specialtecken:
Tecken	Kod	Tecken	Kod	Tecken	Kod
å	å	©	©	§	§
ä	ä	®	®	«	«
ö	ö	™		»	»
<	<	£	£	°	°
>	>	¥	¥	æ	æ
&	&	€	€	ø	ø
£	£	“		‰
´	´	”		ü	ü
"	"	—		˜

Större översättningstabell för specialtecken. Du kan ange kod eller mostvarande ASCII-nummer:
Tecken	Kod	ASCII	Tecken	Kod	ASCII
nonbraking space			Ð	Ð	Ð
¡	¡	¡	Ñ	Ñ	Ñ
¢	¢	¢	Ò	Ò	Ò
£	£	£	Ó	Ó	Ó
¤	¤	¤	Ô	Ô	Ô
¥	¥	¥	Õ	Õ	Õ
¦	¦	¦	Ö	Ö	Ö
§	§	§	×	×	×
¨	¨	¨	Ø	Ø	Ø
©	©	©	Ù	Ù	Ù
ª	ª	ª	Ú	Ú	Ú
«	«	«	Û	Û	Û
¬	¬	¬	Ü	Ü	Ü
			Ý	Ý	Ý
®	®	®	Þ	Þ	Þ
¯	¯	¯	ß	ß	ß
°	°	°	à	à	à
±	±	±	á	á	á
²	²	²	â	â	â
³	³	³	ã	ã	ã
´	´	´	ä	ä	ä
µ	µ	µ	å	å	å
¶	¶	¶	æ	æ	æ
·	·	·	ç	ç	ç
¸	¸	¸	è	è	è
¹	¹	¹	é	é	é
º	º	º	ê	ê	ê
»	»	»	ë	ë	ë
¼	¼	¼	ì	ì	ì
½	½	½	í	í	í
¾	¾	¾	î	î	î
¿	¿	¿	ï	ï	ï
À	À	À	ð	ð	ð
Á	Á	Á	ñ	ñ	ñ
Â	Â	Â	ò	ò	ò
Ã	Ã	Ã	ó	ó	ó
Ä	Ä	Ä	ô	ô	ô
Å	Å	Å	õ	õ	õ
Æ	Æ	Æ	ö	ö	ö
Ç	Ç	Ç	÷	÷	÷
È	È	È	ø	ø	ø
É	É	É	ù	ù	ù
Ê	Ê	Ê	ú	ú	ú
Ë	Ë	Ë	û	û	û
Ì	Ì	Ì	ü	ü	ü
Í	Í	Í	ý	ý	ý
Î	Î	Î	þ	þ	þ
Ï	Ï	Ï	ÿ	ÿ	ÿ

Punktlistor

Punktlistor, numrerade listor och definitionslistor har bra stöd i HTML och du kan även gruppera listobjekten i undernivåer. En lista där varje listobjekt är markerad med en symbol kallas för punktlista eller "onumrerad lista" (unordered list) och anges med märket<UL>. Varje del i listan skrivs inom ett "listelement"<LI>.

Lägg till koden nedan i ditt dokument för att skapa en punktlista:

<p>Här är en punktlista:</p>
<ul>
<li>1:a kvartalet</li>
<li>2:a kvartalet</li>
<li>3:e kvartalet</li>
<li>4:e kvartalet</li>
</ul>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Numrerad lista

En lista där varje del är markerad med en siffra kallas för "numrerad lista" (ordered list) och anges med märket <OL>. Varje del i listan skrivs inom ett "listelement" <LI>.

Lägg till koden nedan för en numrerad lista:

<p>Här är en numrerad lista:</p>
<ol>
<li>Vår</li>
<li>Sommar</li>
<li>Vinter</li>
<li>Höst</li>
</ol>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Listor i flera nivåer

En lista där varje listobjekt även har en undernivå får du genom att lägga till en extra <OL> eller <UL> före eller efter <LI> (listelement).

Lägg till koden nedan för en punktlista med undernivåer:

<p>Här är en punktlista i två nivåer:</p>
<ul>
<li>1:a kvartalet
<ul>
<li>Januari</li>
<li>Februari</li>
<li>Mars</li>
</ul>
</li>
<li>2:a kvartalet
<ul>
<li>April</li>
<li>Maj</li>
<li>Juni</li>
</ul>
</li>
<li>3:e kvartalet
<ul>
<li>Juli</li>
<li>Augusti</li>
<li>September</li>
</ul>
</li>
<li>4:e kvartalet
<ul>
<li>Oktober</li>
<li>November</li>
<li>December</li>
</ul>
</li>
</ul>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Symboler i punktlistor

Vill du ha andra symboler i dina punktlistor än de som är standard kan du ange:

<ul type="square">
för fylld kvadrat.
<ul type="circle">
För ofylld cirkel
<ul type="disc">
För fylld cirkel

Exempel på symbolen "fyrkant" (square):

<p>Här är en punktlista med fyrkant:</p>
<ul type="square">
<li>1:a kvartalet</li>
<li>2:a kvartalet</li>
<li>3:e kvartalet</li>
<li>4:e kvartalet</li>
</ul>

Definitionslistor

Definitionslistor anges med märket <DL> och kan vara användbara när man behöver lista många ord med tillhörande beskrivningar. Avståndet mellan styckena blir mindre än normalt och texten i beskrivningen blir indraget:

Exempel på definitionslista:

<dl>
<dt>HTML</dt>
<dd>Hypertext markup language, ett sidbeskrivningsspråk för webbsidor som tolkas av webbläsaren</dd>
<dt>Browser</dt>
<dd>Webbläsare, program som behövs för att läsa webbsidor via Internet eller Intranet</dd>
<dt>WYSIWYG-editor</dt>
<dd>What you see is what you get, du ser resultatet av det du redigerar direkt utan att behöva förgranska.</dd>
</dl>

Mall med grundkod för HTML-sidor

Här är ett exempel på grundkod du kan använda i dina nya webbsidor:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sidtitel</title>
</head> <body>
<p>Innehåll här...</p>
</body>
</html>

Skapa ett nytt dokument och kopiera/klistra in koden ovan.
Spara ditt dokument med namnet "sida2.html" i samma mapp som redan sparat din startsida "index.html":

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Nu är din webbsida förberedd för att fyllas med innehåll! Gå vidare till nästa avsnitt nedan.

Bilder

Du kan använda bilder för att förstärka ett budskap eller göra webbplatsen mer attraktiv och lättnavigerad. Bilder kan du skapa du själv i ett bildbehandlingsprogram som tex Photoshop. Har du en fotoskrivare eller digitalkamera medföljer ofta ett redigeringsprogram för att bearbeta och överföra bilden till din dator. Det finns många bildarkiv och webbplatser som tillhandahåller färdiga fotografier och illustrationer som du kan använda på din webbsida. Alla bilder omfattas av upphovsrätten. Ofta får du använda den privat och inte i kommersiellt syfte. Om du "lånar" en bild från en hemsida så är det olagligt om du inte får tillåtelse från den som har upphovsrätten till bilden.

Hämta gärna bilder i vårt Bildgalleri » eller hos http://se.freeimages.com/ »

Bilder infogar du i koden med märket IMG (image) och attributet SRC (source, källa):

<IMG SRC> är bildkällan och sökvägen till din bild. I exemplet ovan ligger den i samma mapp som HTML-dokumentet. OBS! Bilderna du infogar i ditt HTML-dokument är inte inbäddade i dokumentet. Det är viktigt att du även skickar bildfilerna via FTP när du senare publicerar webbplatsen till din webbserver.

Tilläggen WIDTH och HEIGHT gör att inläsningen av sidan i webbläsaren går snabbare eftersom webbläsaren då vet hur stort utrymme som krävs till bilden. Om du inte vet storleken på bilden så använder du inte tillägget för bred och höjd. Det räcker då att du anger sökvägen till bilden:

Tillägget ALT används för att ange information om bilden eller bildens namn i klartext. Om du använder ett ALT-namn på bilden så visas detta även om inga bilder kan visas i webbläsaren. Detta ökar också tillgängligheten för dokumentet för dem som inte kan se bilder i webbläsaren.

Så här kan bild och alternativt namn se ut :

Infoga en bild

Använd dokumentet "sida2.html" som du sparade i avsnittet ovan.

Skriv din egen text (eller kopiera/klistra in texten nedan) och placera den i ett stycke <P> mellan <BODY> och </BODY>:

<p>Du kan använda bilder för att förstärka ett budskap eller göra webbplatsen mer attraktiv och lättnavigerad. Bilder kan du skapa du själv i ett bildbehandlingsprogram som tex Photoshop. Har du en fotoskrivare eller digitalkamera medföljer ofta ett redigeringsprogram för att bearbeta och överföra bilden till din dator. Det finns många bildarkiv och webbplatser som tillhandahåller färdiga fotografier och illustrationer som du kan använda på din webbsida. Alla bilder omfattas av upphovsrätten. Ofta får du använda den privat och inte i kommersiellt syfte. Om du "lånar" en bild från en hemsida så är det olagligt om du inte får tillåtelse från den som har upphovsrätten till bilden.</p>

Notepad++

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Formatera teckensnittet för hela sidan med CSS enligt avsnittet Text och specialtecken » ovan.

Ange CSS-koden mellan <TITLE> och </HEAD>:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sidtitel</title>
<style type="text/css">

</style>
</head>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Använd din egen bild eller bilden som vi använder i exemplet.

Högerklicka på bilden nedan och spara den i samma mapp som ditt HTML-dokument:

farhage.jpg
I vårt exempel är bilden sparad i samma mapp som HTML-dokumenten:

Placera bilden inom samma stycke <P> som din text:

<p><img src="farhage.jpg" alt="Fårhage" width="200" height="149"> Du kan använda bilder... </p>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

OBS! Det är viktigt att du använder VERSALER och gemener korrekt när du anger sökvägar till bilder eller andra dokument. Om du anger bildens namn i HTML-koden till "farhage.JPG" när bildfilen heter "farhage.jpg" kan detta innebära att bilden inte visas alls.

En bra regel är att använda gemener (små bokstäver) och att inte använda mellanslag i filnamn och sökvägar.

Bildnamnet:
"semester_i_smogen_2006.jpg"
är bättre än namnet:
"Semester i Smögen 2006.jpg".
Om du vill placera texten till höger eller vänster om bilden använder du CSS-attributet: FLOAT

Placera bilden till vänster om texten med float: left; och till höger om texten med float: right;

Justera din bild så att den ligger till vänster om texten. I exemplet nedan anges också marginaler för att ge ett avstånd från bildens kant till texten:

<p><img src="farhage.jpg"
style="float: left; margin: 0px 15px 15px 0px;"
alt="Fårhage" width="200" height="149"> Du kan använda bilder...</p>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Bakgrundsbilder

Bakgrundsbilder repeteras till höger och nedåt som standard och när den repeteras så skapar den ett mönster med synliga skarvar. Du ange om, och hur, bilden ska upprepas och även en exakt position för bilden.
Läs mer om egenskaper för bakgrundsbilden i guiden CSS grunder »

Använd dokumentet "sida2.html" som du sparade tidigare i avsnittet ovan.

Använd din egen bild eller bilden som vi använder i exemplet.

Högerklicka på bilden nedan och spara den i samma mapp som ditt HTML-dokument:

bakgrund2.gif
I vårt exempel är bilden sparad i samma mapp som HTML-dokumenten:

Bakgrundsbild och andra egenskaper anges med CSS. När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

Ange CSS-koden för background-image enligt nedan:

<title>Sidan 2</title>
<style type="text/css">

</style>
</head>
<body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Bakgrundsbilder repeteras till höger och nedåt som standard. Bakgrundsbilden i vårt exempel är en "mönsterplatta" (tile) och när den repeteras så skapar den ett mönster utan synliga skarvar.

Om du använder en "vanlig" bild som inte är anpassad för ett mönster så kan det se ut så här:

Du ange om, och hur, bilden ska upprepas och även en exakt position för bilden.

Läs mer om egenskaper för bakgrundsbilden i guiden CSS grunder »
Använd egenskapen background-repeat för att ange att bakgrundsbilden endast ska repeteras nedåt.

I exemplet nedan anges att bakgrundsbilden endast ska repeteras i Y-led :

<title>Sidan 2</title>
<style type="text/css">

</style>
</head>
<body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Prova en annan typ av bakgrundsbild som är övertonad mot vit färg i högerkant och nederkant.

Högerklicka på bilden nedan och spara den i samma mapp som ditt HTML-dokument:

bakgrund1.jpg

Ändra i koden och byt ut den bakgrundsbild du använde tidigare.

Låt den nya bilden justeras enligt standard ( ta bort egenskapen background-repeat):

<title>Sidan 2</title>
<style type="text/css">

</style>
</head>
<body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Bakgrundsbilder repeteras till höger och nedåt som standard. När bakgrundsbilden i vårt exempel repeteras så skapar den ett mönster med synliga skarvar.
Ange att bakgrundsbilden inte ska upprepas genom att ange egenskapen background-repeat: no-repeat
Ange att bilden inte ska scrollas med sidinnehållet, med egenskapen background-attachment: fixed enligt nedan:

<title>Sidan 2</title>
<style type="text/css">

</style>
</head>
<body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Sidmarginaler

Sidmarginaler anges med CSS. När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

Använd dokumentet "sida2.html" som du sparade tidigare enligt avsnittet ovan.

I exemplet nedan anges att <BODY> ska CSS-formateras för sidmarginal. Inom samma selektor finns redan formateringen för teckensnitt (font) och bakgrundsbild (background-image).

Ange CSS-koden för margin enligt nedan:

<title>Sidan 2</title>
<style type="text/css">

</style>
</head>
<body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Sidmarginaler används normalt inte till att justera allt sidinnehåll som i vårt exempel. Det är bättre att placera innehållet i en tabell <TABLE> eller en box <DIV> och där ange att marginaler ska användas. Läs mer om tabeller i guiden Tabeller » och boxar i guiden CSS positionering »

Länkar

En länk är ett klickbart område och kan vara en text eller bild. Interna länkar är kommunikationen mellan sidorna i din webbplats och externa länkar leder till andra webbplatser. Märket för länk är <A HREF> (Anchor Hyperlink Reference).

Den adress som länken leder till kallas även URL (Uniform Resource Locator) och kan vara absolut eller relativ.

En absolut URL innehåller kommunikationsprotokollet HTTP och följs av ett domännamn. Läs mer om domännamn i guiden Webbhotell och domännamn »

Externa länkar som leder från en webbplats till en annan webbplats är absoluta. Exempel på absolut URL:

https://webdesignskolan.se/html/grunder/html_lankar.html

En relativ URL används inom en webbplats och anger sökvägen mellan mappar och dokument. Inget kommunikationsprotokoll HTTP eller domännamn behöver anges. Exempel på relativ URL:

html/grunder/html_lankar.html

Adressen i form av en URL anges inom startmärket <A HREF> och det länkade objektet (text, bild etc) anges mellan start- och slutmärket <A HREF> och </A>

Så här kan en textlänk se ut:

Klicka här för att gå till Drömvävaren

Klicka här för att gå till
<a href="http://dromvavaren.se/index.html">Drömvävaren</a>

Sökvägen i exemplet ovan är hela den absoluta sökvägen till sidan "index.html" och kan användas när andra webbplatser länkar till vår webbshop Drömvävaren. När vi själva skapar länkar inom vår egen webbplats använder vi relativa sökvägar som är relativ till den sida vi länkar ifrån. Exemplet nedan är en relativ sökväg till sidan "index.html":

<a href="../index.html">Drömvävaren</a>

En fördel med relativa sökvägar är att du kan byta domännamn utan att länkarna blir inaktuella. Du kan även testa din webbplats lokalt på din dator eller flytta den till annan dator eller webbserver.

Skapa en textlänk

Texten som ska vara länkad anges mellan start- och slutmärket <A HREF> och </A>

OBS! Exemplen nedan förutsätter att du redan sparat dokumenten "index.html" och "sida2.html" enligt tidigare guider.

Skapa ett nytt dokument och spara med namnet "sida3.html" i samma mapp som du sparat filerna "index.html" och "sida2.html":

Här är ett exempel på grundkod du kan använda i ditt dokument. Kopiera/klistra in koden nedan:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sidan 3</title>
<style type="text/css">

</style>
</head>
<body>
<p>Innehåll här...</p>
</body>
</html>
Skriv den text som ska länkas. I exemplet nedan anges texten inom ett stycke <P>:

<body>
<p>till Sida 2</p>
</body>
Ange att texten ska länkas till dokumentet "sida2.html"

<body>
<p><a href="sida2.html">till Sida 2</a></p>
</body>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Testa din länk genom att klicka på den länkade texten!
Öppna dokumentet "sida2.html".

Skriv en text ovanför den tidigare texten och bilden. Ange att texten ska länkas till dokumentet "sida3.html":

<p><a href="sida3.html">Sida 3</a></p>

<p><img src="farhage.jpg"

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Testa din länk!

Title - länkinformation

Använd attributet TITLE för att lägga till information som visas när muspekaren placeras över den länkade texten.
Prova länken nedan för att se informationen:

Drömvävaren

Så här kan koden se ut:

<a href="index.php" title="Klicka här för att komma till Drömvävaren webbshop!"">Drömvävaren</a>

Länk till namngiven platshållare

Ett ID som placeras någonstans i koden kan användas för att länka till avsnitt inom samma dokument eller till ett avsnitt i ett annat dokument.

Ett namngiven platshållare kan se ut så här:

OBS! Undvik VERSALER, ÅÄÖ och mellanslag i länkar.

Länken som ska leda till ett ankaret anger du inom <A HREF> där Tecknet # (brädgård) anges före ankarnamnet:

En relativ URL som leder till ett ankare kan se ut så här:

<a href="sida2.html#namn">Klicka här!</a>

En absolut URL som leder till ett ankare kan se ut så här:

<a href="http://dromvavaren.se/sida2.html#namn">Klicka här!</a>

Öppna dokumentet "sida2.html".

Skapa ett par tomma stycken <P> och lägg till en platshållare nedanför den tidigare texten:

en bild från en hemsida så är det olagligt om du inte får tillåtelse från den som har upphovsrätten till bilden. </p>

<p> </p>
<p> </p>
<p id="platsinfo"></p>

</body>
</html

Skriv in det textavsnitt som ankarlänken ska leda till.

en bild från en hemsida så är det olagligt om du inte får tillåtelse från den som har upphovsrätten till bilden. </p>
<p> </p>
<p> </p>
<p id="platsinfo"></p>
<p>En platshållare kan användas när en länk ska leda till ett avsnitt i dokumentet.</p>

</body>
</html

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:
Nedanför ankaret måste du ha mer sidinnehåll för att webbläsaren ska kunna scrolla fram avsnittet med ankaret. Om du inte har mer text eller innehålll kan du lägga till tomma stycken <P> eller göra flera radbrytningar <br>

I exemplet nedan har vi lagt till fler radbrytningar <BR>:

<p> </p>
<p> </p>
<p id="platsinfo"></p>
<p>En platshållare kan användas när en länk ska leda till ett avsnitt i dokumentet.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html
Ange en textlänk som leder till platshållaren. Placera den under din tidigare länk:

<body>
<p><a href="sida3.html">sida 3</a></p>
<p><a href="#platsinfo">avsnitt 1</a></p>

Testa din länk!

Notera att ankarnamnet visas i adressfältet:

Bildlänkar

Använd attributet ALT när du infogar en bild. De målgrupper som inte kan se eller ta del av bilder kan då istället se den ALT-information du angivit för bilden.

En länkad bild anges mellan start- och slutmärket <A HREF> och </A>
Adressen i form av en URL anges inom startmärket <A HREF>

Så här kan en bildlänk se ut:

Vissa webbläsare visar en ram runt bilden för att visa att den är länkad. Du kan dölja ramen runt bilden genom att använda attributet BORDER="0"

Så här kan en bildlänk utan ram se ut:

Använd ditt dokument "sida2.html" och skapa en länk från bilden som går till dokumentet "sida3.html":

<body>
<p><a href="sida3.html">sida 3</a></p>
<p><a href="#platsinfo">avsnitt 1</a></p>

<p><a href="sida3.html">
<img src="farhage.jpg" style="float: left; margin: 0px 15px 15px 0px;"alt="Fårhage" width="200" height="149" border="0" style="margin: 0px 20px 10px 0px; float: left;">
</a>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Testa din länk!

Mål för länk, Target

Länkade sidor öppnas i samma fönster som den sida du länkar ifrån. Om du vill att den länkade sidan ska öppnas i ett nytt fönster kan du ange detta som ett mål (target) för länken.

Målet för att öppna en länkad sida i ett nytt webbläsarfönster är: TARGET="_BLANK"

Så här kan en textlänk med attributet target="_blank" se ut:

Drömvävaren

<a href="http://dromvavaren.se/index.html" target="_blank">Drömvävaren</a>

Så här kan en bildlänk med attributet target="_blank" se ut:

Länk till e-postadress

Du kan använda attributet MAILTO om du vill länka till en e-postadress.

Så här kan en textlänk till en e-postadress se ut:

Kontakta oss via mail

<a href="mailto:din_egen@e-postadress_här?subject=Kontakt från Drömvävaren">Drömvävaren</a>

Använd ditt dokument "sida2.html" och skapa en textlänk till en e-postadress.

Lägg till e-postlänken ovanför dina tidigare länkar:

<body>
<p><a href="mailto:din_egen@e-postadress_här">Klicka här för att kontakta oss</a></p>
<p><a href="sida3.html">sida 3</a></p>
<p><a href="#platsinfo">avsnitt 1</a></p>

Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

Testa din länk!

OBS! om ingen e-postklient öppnas så är inget program konfigurerat med e-postkonton på den dator du använder.

Vill du ange ett förvalt meddelandehuvud kan du lägga till ?subject=Rubriknamn här

<p><a href="mailto:din_egen@e-postadress_här?subject=Kontakt från Drömvävaren">Klicka här för att kontakta oss</a></p>

Nu kan du grunderna i HTML!

Nu kan du de vanligaste HTML-elementen och det ger dig en bra grund för att fortsätta bygga dina sidor. Använd huvudmenyn och fortsätt med de guider som visas efter "HTML-grunder". Du kommer att upptäcka att det ständigt kommer nya metoder och tekniska lösningar fortare än du hinner lära dig de gamla.

Börja gärna med att välja ditt eget domännamn och ta in på ett webbhotell ». Därefter behöver du ett FTP-program för att skicka dina filer till ditt webbhotell.

Copyright © www.webdesignskolan.se
Materialet får skrivas ut och användas för personligt bruk.
Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här »