HTML grund

Institutionen för interaktiva medier och lärande
HTML grund

	Syfte med sidan HTML-grund

	Syftet med denna sida är att ge grundläggande kunskaper när det gäller att förstå HTML-kod. Detta skall uppnås genom att du dels läser innehållet och att du dels nyfiket själv provar att koda.

	Vad är HTML?

	HTML är en förkortning av HyperText Markup Language. Detta programeringsspråk används till att skapa webbsidor. Webbsidor består av HTML-koder och text. Koderna "märker upp" hur innehållet på sidorna skall placeras och se ut. Andra beteckningar på koderna är "taggar" samt "märken", vilket jag ibland kommer att använda mig av i den följande genomgången.
	[ upp ]
	Varför lära sig HTML?

Kunna orientera sig	Idag finns det gott om bra HTML-editorer exempelvis Dreamweaver, Netscape Composer, Frontpage, där kodningen sköts av programmet. Oftast klarar man sig med dessa program, men ibland uppstår problem och du får inte din webbplats att se ut som du hade tänkt dig med den automatiska kodningen. Vid ett sådant tillfälle är det bra om du känner igen några av de vanligaste taggarna, då kan du orientera dig fram i koden till det ställe där felet har uppstått. Hittar du platsen med felet har du då större möjligheter att kunna rätta till det

Få en djupare förståelse	Om du använt dig av editorer av typen som nämnts ovan så kan det vara viktigt att sätta sig in i hur kodning fungerar för att på så sätt nå en djupare förståelse inför hur webbsidor är uppbyggda.

Gratis	Många editorer som skapar taggarna åt dig kostar ganska mycket pengar att köpa licens till. Klarar du av att koda sidor så är programmen du behöver helt gratis.
	[ upp ]
	Vilket material behöver du?

Ordbehandlare	Du behöver en enkel ordbehandlare, exempelvis "Notepad" eller "Wordpad".

Webbläsare	När det gäller webbläsare är det bra om du har möjlighet att titta på din sida i både Netscape Navigator och Internet Explorer under arbetets gång, om du vill använda Netscape Navigator rekomenderar jag att du laddar hem den nyaste versionen av Netscape, detta kan du göra på http://ftp.sunet.se/. Vid kodning är det dock svårt att som nybörjare anpassa sin kodning så att webbsidan visas lika i alla läsare, så välj en webbläsare som du skapar sidan för.
	[ upp ]
	Övningen

	Du kopierar koden som finns under länken "Övningskod" till höger genom att markera koden, trycka Ctrl-C på tangentbordet. Starta ordbehandlaren "Notepad" genom att gå till Startmenyn, Välj Kör, Skriv notepad, Tryck OK. Klistra in koden som du kopierat genom att trycka Ctrl+V på tangentbordet. Spara dokumentet i "Notepad" som "test.html" på skrivbordet. Starta din webbläsare, krymp ihop fönstret så att du ser filen "test.html" på skrivbordet samtidigt som webbläsarfönstret. Markera filen "test.html", dra och släpp denna fil i webbläsarfönstret. Nu ser du hur övningssidan ser ut i utgångsläget. Växla mellan webbläsarfönstret som visar denna sida, fönstret som visar "test.html" samt "Notepad" genom att trycka Alt+Tab på tangentbordet. Arbetsgången blir att du lägger till och förändrar taggar i koden i "Notepad", Sparar "test.html", Växlar över till webbläsaren, Välj att uppdatera aktuell sida, Analysera hur utseendet förändrades och lär utifrån detta!
	[ upp ]
	HTML-elements uppbyggnad

	Ett HTML-element består av allting mellan en starttagg och en sluttagg. Det kan innehålla ett attribut, vilket består av ett attributnamn och attributvärde. Attributnamnet anger en egenskap som texten mellan starttagg och sluttagg skall ha. Ett exempel på attributnamn är BGCOLOR vilket anger att texten inom starttagg och sluttagg skall ha en bakgrundsfärg. Attributvärdet preciserar attributsnamnets egenskap. Exempelvis så kan du precisera attributnamnet BGCOLOR genom att ange attributvärdet "red", vilket gör bakgrunden till texten mellan starttagg och sluttagg röd. Du kan ange attribut till alla taggar eller märken.

	[ upp ]
	En webbsidas grundtaggar

<html> </html>	Anger att allt inom dessa taggar innehåller HyperText Markup Language.

<head> </head>	Anger start och slut på sidans "huvud". Informationen som finns inom dessa koder syns inte direkt på webbsidan utan den berättar exempelvis för sökmotorer om sidans innehåll, författare samt vilka sökord som kan användas för att hitta sidan.

<title> </title>	Detta är ett exempel på en tagg som läggs inom sidans "huvud" och det du skriver mellan dessa koder blir sidans titel. Titeln är den text som hamnar uppe i den blå listen i webbläsarfönstret samt blir den titel på sidan som anges när någon lägger till din sida som ett bokmärke.

<meta> </meta>	Detta är ytterligare ett exempel på en tagg som läggs inom "huvudet". Med META koden har du bland annat möjlighet att definiera vilken information om din webbsida som skall synas när någon hittar din sida i en sökmotor. Läs mer om att lägga in metainformation på: http://www.dunkels.com/e-space/media/meta.htm Du kan med metataggarna bestämma: Keywords som anger vilka ord den som söker efter din sida skall skriva in i sökmotorn för att hitta sidan. Author som är namnet på författaren till sidan. Description som är en beskrivning för sökmotorerna om sidans innehåll.Om man inte har skrivit en egen Description, visar sökträffarna oftast den första texten på sidan, vilket ibland kan bli missvisande.

<body> </body>	Denna tagg markerar början och slutet på den "synliga" webbsidan. Allt som skrivs mellan dessa koder blir synligt för besökaren.

ORDNINGSFÖLJD I KODEN...	< html > < head > < title >< /title > < meta >< /meta > < /head > < body > < /body > < /html >
	[ upp ]
	Vanliga taggar

<p> </p>	Anger att ett nytt stycke börjar samt slutar.

<br>	Anger att textraden skall brytas, med andra ord byter du helt enkelt rad.

<b> </b>	Allt som skrivs mellan dessa taggar blir fetmarkerad text, "bold" på engelska.

<i> </i>	Allt som skrivs mellan dessa taggar blir kursiv text, "Italic" på engelska.

<u> </u>	Allt som skrivs mellan dessa taggar blir understruken text, "underlined" på engelska.

<strike> </strike>	Allt som skrivs mellan dessa taggar blir ~~överstruken text~~, "striked out" på engelska.

<sub> </sub>	Allt som skrivs mellan dessa taggar koder blir _{nedsänkt text} som kan vara bra att kunna skriva i exempelvis matematiska sammanhang .

<sup> </sup>	Allt som skrivs mellan dessa taggar blir ^{upphöjd text} som kan vara bra att kunna skriva i exempelvis matematiska sammanhang .

<h1> </h1>	Allt som skrivs mellan dessa taggar blir överskrift 1:a, du kan ange H2, H3 o.s.v beroende på hur många underrubriker du har.

<table> </table>	Dessa taggar markerar början och slutet på en tabell.

<tr> </tr>	Dessa taggar markerar början och slutet på en tabellrad.

<td> </td>	Dessa taggar markerar början och slutet av innehållet i varje cell.

<ol> </ol>	Markerar början och slutet på en numrerad lista.

<ul> </ul>	Markerar början och slutet på en punktad lista.

<li> </li>	li står för "list item" på engelska. Dessa taggar markerar början och slutet på varje inslag i en lista.

<!-- -->	Allt som skrivs mellan dessa taggar blir inte synligt för webbläsaren. Mellan dessa taggar kan du alltså lägga in komentarer, Javascript eller SSI som du ej vill ska visas i webbläsaren.
	[ upp ]
	Bilder och alternativtext

<img src ="sv">	Denna tagg infogar en bild på din webbsida. Byt ut filnamn till den sökväg som leder till bilden som skall visas. sv= sökväg till bilden med utgångspunkt från den html-sida där bilden skall visas

<img src ="sv" alt="Orm">	Denna tagg gör att en alternativtext, Orm, kommer att visas när du för pekaren över bilden. sv= sökväg till bilden med utgångspunkt från den html-sida där bilden skall visas

<img src ="sv" border="8">	Denna tagg gör att en ram visas kring din bild som är 8 pixlar bred. sv= sökväg till bilden med utgångspunkt från den html-sida där bilden skall visas

<img src ="sv" align="left">	Denna tagg gör att bilden hamnar till vänster och att den text du skriver efter denna kod hamnar strax till höger om bilden.Se skillnaden från exemplet ovan då bilden och texten hamnar på samma rad! sv= sökväg till bilden med utgångspunkt från den html-sida där bilden skall visas
	[ upp ]
	Skapa länkar

<a href="?"> Åsna </a>	Ordet Åsna blir en länk när du byter ut "?" mot den adress/fil du vill länka till.

<a href ="?"> Leif </a>	Skapa en e-post länk till mig genom att byta ut "?" mot mailto:leif.marklund@educ.umu.se

<a name ="avd.4"> </a>	Används till att skapa en länk inom en webbsida. Denna tagg skriver du in i koden framför den plats dit du snabbt vill kunna "hoppa" till. I detta fall kanske framför rubriken "Avdelning 4" på webbsidan. Det ligger en sådanhär kodsnutt överst på denna sida som "Upp" länkarna är länkade till.

<a href ="#avd.4">Avd.4</a>	Används i kombination med <a name> för att skapa en länk inom webbsidan. Denna tagg skriver du kring ett ord, Avd.4, som du vill skall bli en länk till den plats du vill att besökaren skall hoppa till."Upp-länkarna" på den här sidan är ett exempel på detta.
	[ upp ]
	Attributnamn

	Läs mer om olika attributnamn på: http://www.algonet.se/~eva/ref/html/

	Attributvärden

	Läs mer om olika attributväden på: http://www.algonet.se/~eva/ref/html/

	Fördjupning inom HTML

	http://www.w3.org/TR/html4/

[ upp ]

Umeå universitet Lärarutbildning Institutionen för interaktiva medier och lärande
	För våra studenter Stödsidor HTML-grund Syfte med sidan HTML-grund Vad är HTML? Varför lära sig HTML? Vilket materialbehöver du? Övningen HTML-elements uppbyggnad En webbsidas grundtaggar Vanliga taggar Bilder och alternativtext Skapa länkar Attributnamn Attributvärden Fördjupning inom HTML Övningskod

Institutionen för interaktiva medier och lärande
Umeå universitet
Informationen kontrollerades senast 19 sept 2002
Ansvarig för sidan: leif.marklund@educ.umu.se