HTML

Dokumentets utseende

Vissa saker måste finnas med på en HTML-sida. Detta är taggarna som beskriver var dokumentet startar och slutar (HTML), hur dess sidhuvud ser ut (HEAD) och vad som är kroppen (BODY) i dokumentet. Sidhuvudet måste också innehålla en titel (TITLE) och bör innehålla ett märke som beskriver vad för slags data dokumentet innehåller. För att vara korrekt HTML 4.01 krävs också en rad som beskriver vilken version av HTML vi använder oss av. Dessa saker krävs för att sidan ska tolkas rätt i webbläsaren. Det här blir en bra mall för de sidor som vi senare ska skapa om Nike.

Vi skriver alltså först in detta i en texteditor:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

			"http://www.w3.org/TR/html4/loose.dtd">

<HTML>

	<HEAD>

		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; 

				 CHARSET=ISO-8859-1">

		<TITLE>Nike, en busig hund </TITLE>

	</HEAD>



<BODY>



</BODY>

</HTML>

Raden
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

beskriver vilken dokumenttyp (version eller dialekt) av HTML som vi jobbar med Som du kanske kan utläsa använder vi oss av HTML 4.01 här och kommer att fortsätta att göra så. Ha med dessa två rader i alla dina HTML-filer. Det hjälper om du vill kunna köra dem genom ett program som kontrollerar att det är ett korrekt HTML-dokument. Detta program kallas för validerare och finns på lite olika ställen på Internet. (Vi använder oss av den som finns på W3C Vi ska titta på det lite längre fram i kursen.) I de flesta (men kanske inte alla) exempel på webbprogrammering.se kommer vi att använda denna dokumenttyp. Det är viktigt att använda sig av en korrekt dokumenttyp för att HTML-sidan ska kunna tolkas rätt i alla webbläsare. Ha därför för vana att alltid använda dig av det när du gör webbsidor som ska publiceras för andra än bara dig själv.

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-8859-1">

Ovanstående kod beskriver vilken teckenkodning som filen har. Det är även viktigt att ha med denna kodsnutt i sina HTML-filer, men vi kommer dock inte att använda det fullt ut i kursens exempel.

Detta är en grund för sidan och vi sparar den som "nike.html". TITLE är hela dokumentets titel och kommer att visas längst upp i webbläsaren, dvs över alla menyer och navigeringsverktyg.

Dokumentets titel

Märket BODY beskriver var allt innehåll på sidan ligger. Det som kommer att visas är alltså allt som vi sedan skriver in mellan dess start- och sluttagg. Som det ser ut nu har vi endast en tom sida.

Resultat

Nu skulle vi kunna skriva in all text vi vill inom märket BODY och ha en komplett sida, men det vore inte så roligt och vi skulle inte ha utnyttjat HTML till vad det är till för. Det skulle bara ha blivit vanlig text på sidan utan några som helst formateringar. Vi ska istället lägga till sak för sak som vi vill ha på sidan och forma dessa element med HTML.

TipsOrdning och reda är viktigt när man arbetar med datorn. Det är lätt att tappa bort filer. Inte i meningen att datorn plötsligt inte längre har kvar den fil som vi nyss sparade men vi själva glömmer VAR vi sparade den. Det är alltså viktigt att arbeta på ett strukturerat sätt. En bra början är att skapa ett antal kataloger där HTML-filer och bilder ska ligga. T ex kan du skapa katalogen webbfiler för HTML-dokument och katalogen img för dina bildfiler. img är en förkortning av Image (eng bild) och är vanligt förekommande för kataloger som innehåller just bilder. Lägger du dessutom katalogen img direkt under katalogen webbfiler har du senare lätt att komma åt bilderna när du ska skapa dina webbsidor. Skapa katalogerna på ett lättåtkomligt ställe, t ex under Mina Dokument eller på Skrivbordet.
TipsSkapa nu en mallsida som har hela strukturen för ett korrekt dokument. Denna mall kan du senare använda om och om igen när du under kursens gång ska göra korrekta HTML-sidor. Spara lämpligen filen med namnet mall.html och lägg den i den katalog som du har tänkt att arbeta i. Om du följde tipset ovanför är det en bra idé att spara mallen i den katalog som du skapade där ( katalogen webbfiler/htmlfiler). Ta gärna den tomma webbsidan som skapades som start för sidan om Nike för att göra din egen mall. Glöm inte bort att ta bort titeln "Nike, en busig hund"!