Hemside skolan

Skrivandet av HTML-taggarna kan ni t.ex. göra i Anteckningar i Windows, tänk på att ni måste spara filen ni skrivit till .htm eller .html, exempelvis kan ni spara filen till hemsida.html när ni sparar den. Sedan går ni exempelvis in i Explorer och öppnar filen och ser resultatet.

Steg 1, skapande av tom sida:

Efter // är kommentarer och de förklarar var "taggarna" betyder, dessa skall ej skrivas i web-dokumentet utan är enbart förklarande. En kommentar skrivs annars i html genom taggarna .

<html> //Här börjar ett HTML-dokument
<head> //Här börjar huvudet, där bla titeln på sidan skrivs in
<title>Sidans titel</title> //Här börjar och slutar titeln
</head> //Här slutar huvudet
<body> //Här börjar sidans innehåll
Här läggs innehållet i sidan
</body> //Här slutar sidans innehåll
</html> //Här slutar HTML-dokumentet

Du stänger alltid en tagg genom att skriva / framför t.ex. </body> för att det som kommer efter inte skall vara body. Ett annat exempel är om man vill ha en text tjock <b> så måste man avsluta med </b> för annars blir allt tjock i texten som kommer efter.

Skriv nu in taggarna för den tomma sidan, spara och se reultatet.

Steg 2, lägg till och formatera text:

Nästan allt som sidan skall innehålla läggs inom <body> taggarna. Om man t.ex. skriver hej så kommer hej att skrivas ut på sidan, då blir texten automatisk normal. Det blir lite tråkigt om man bara skulle ha en hemsida som bara hade normal text helt igenom, för att ändra på detta använder man olika taggar som berättar för webläsaren hur utseendet på hemsidan skall se ut. Ni kommer i dessa övningar få lära er de allra vanligaste HTML-taggarna.

Låt oss då lägga in en rubrik på sidan. Det finns sex rubrikstorlekar i HTML: h1-h6, varav h1 är den största.

<h1>Detta är en stor rubrik</h1>

<h6>Detta är en liten rubrik</h6>

När du vill skapa ett nytt stycke så skriver ni taggen <p>. Om du vill hoppa ned och starta på ny rad utan mellanrum så använder man sig av taggen <br>.

Sedan kan du ha olika textstilar och de är <b> som gör texten fet </b>, <i> som gör texten kursiv </i> och <u> som gör texten understruken </u>.

Tänk alltid på att stänga taggen när du inte skall ha den mer t.ex </b>

Taggarna <center> </center> gör att texten blir centrerad.

Då lägger vi i dessa taggar i den fil som vi skapade i Steg 1, koden "taggarna" lägger vi som vi vet mellan <body>, ett exempel kan vara:

<html>
<head>
<title>Bosses sida</title>
</head>
<body>
<h1>Välkommen till Bosse</h1>
Jag kan skriva texter som är:
<br>
<b>feta</b><i>kursiva</i>och<u>understuckna</u>
<p>
jag håller på och lär mig skriva html
<p>
</body>
</html>

Spara och se resultatet i en webläsare t.ex Explorer.

Steg 3, lägg in bilder:

Nu skall vi lära oss lägga in bilder i hemsidan. För att lägga in bilder använder man <img src= "adress">. Tänk på att bilden som du skall använda ligger i samma katalog som filen som du skapade i steg 1, när man lägger in img taggen så fungerar den som en sökväg till bilden. Låt oss säga att du har bilden dator.gif och som ligger i samma mapp som HTML-dokumentet. Då skriver ni <img src = "dator.gif ">.

Man kan även använda img taggen för att skapa en absolut referens som det heter, då länkar man till en bild som finns på en hemsida. Du skriver då <img src = "http://home.swipnet.se/conrad/conrad.jpg">, detta förutsätter att bilden conrad.jpg finns på denna hemsidan.

Nu skall du lägga in en bild i din skapade hemsida, tänk att bosse har en bild som heter bosse.gif.

Spara din fil och se resultat i en webläsare.

Steg 4, lägg in länkar:

Med hjälp av <a> kan vi skapa länk till en annan sida. Om du vill skapa en länk till en annan sida t.ex din hemsida två skriver man:

<a href = "hemsida2.html">Min hemsida två </a>

Om du vill länka till en sida på weben så måste du ange hela adressen. En länk till Conrad Carlsson hemsida ser ut så här:

<a href = "http://home.swipnet.se/conrad>Conrads hemsida</a>

Testa och lägg in länkar i din nyskapande hemsida

Steg 5, skapa länkar inom samma sida:

Ibland om det är en lång sida eller om du vill hänvisa till en specifik plats på din egen websida kan du skapa en länk inom sidan. Då skapar du först ett så kallat "destinationsankare" med koden <a name "namn"><a/>. Den koden placeras i HTML sidan där du vill att man skall hamna när man använder länken. Därefter skapar du länken till ankaret genom att sätta # framför namnet på ankaren, så här: <a href = "#namn">Till början</a> om t.ex ankaret ligger längst upp i HTML-sidan.

Test och lägg in i din nyskapade hemsida.

Steg 6, skapa listor:

Det finns olika sorters listor. En punkt lista använder <ul>och<li> en numrerad lista använder <ol>och<li>

Punktlista
<ul>
<li> första punkten
<li> andra punkten
</ul>

Numrerad lista
<ol>
<li>första numret
<li>andra numret
</ol>

Test och lägg in i din hemsida.

Tillbaka till Tips