Lektion 1

Vad är en webplats egentligen?

En webplats, eller en hemsida kan t.ex. vara som Sökövikens.

En webplats består i regel av ett eller flera dokument/sidor skrivna i HTML (Hyper Text Markup Language).

Hur skapas en sida i HTML?

De två vanligaste sätten att skapa kod:

  1. Skriva koden "för hand"
  2. Använda ett WYSIWYG-program

Det finns olika program, som kan användas för att skriva sidor i HTML. Det enklaste är en helt vanlig texteditor, t.ex. Notepad. Om man vill kan man använda ett mera avancerat program, som t.ex. kan färga koden automatiskt för att koden skall bli enklare att läsa.

Med en WYSIWYG (What You See Is What You Get) editor kan man med ett grafiskt gränssnitt skapa sidan. WYSIWYG-programmet tar då hand om att skriva koden, och man behöver i regel inte skriva kod för hand.

Varför skall vi lära oss skriva HTML-kod???

Visserligen är det ibland enklare att använda WYSIWYG-program, men att skriva kod i HTML är inte svårt. En handskriven sida är i regel betydligt mindre än en motsvarande sida skapad med ett WYSIWYG-program. Dessutom kan det vara bra att kunna kolla vad editorn har gjort och göra små förändringar för hand.

Strukturen i HTML

HTML-koden består av taggar, eller kommandon/ord, som finns mellan tecknen < och >.
Ex. <HTML>, <BODY>

De flesta taggarna har också en avslutande tag, som börjar med </ och avslutas med >.
Ex. </HTML>, </BODY>

OBS Det är ingen skillnad om taggarna skrivs med små eller STORA bokstäver.

Den enklaste sidan

Den enklaste sidan av alla ser ut såhär:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  <TITLE>Min sida</TITLE>
 </HEAD>
 <BODY>
   Sidans stomme
 </BODY>
</HTML>

Uppgift 1

Skriv in sidan ovan i Notepad och spara den som upg1.html och öppna den i MS Internet Explorer.
Var ser du texten "Min sida"?
Var ser du texten "Sidans stomme"?

Uppgift 2

Öppna filen upg1.html i Notepad och skriv in valfri text på platsen där du hade "Min sida" och "Sidans stomme". Spara denna fil som upg2.html. Var noga med att inte spara över den ursprungliga upg1.html.

Rubriker

HTML innehåller sex olika taggar för rubriker. De är <H1>, <H2>, ..., <H6>. Nummer ett är den mest betydande, medan nummer 6 är den minst betydande av dem.

Uppgift 3

Skapa en ny sida (du kan använda upg1.html som botten igen). Skriv som Title "Rubriker".
I stommen (BODY) skall du skriva en rubrik med varje rubrikstil, alltså totalt 6 rubriker.

Ex. <H1>Rubrik1</H1>

Text

I HTML kan man skriva text på vanligt sätt med några undantag. Ibland går det att skriva å, ä, ö med samma tecken i HTML-koden, men det är inte sagt att det fungerar som det skall på alla platformer. Om man vill följa standarderna och vara på den säkra sidan att sidan är läslig bör man använa HTML-kodade tecken i stället. Nedan en liten tabell på hur man kodar olika tecken i HTML:
TeckenKod
å&aring;
ä&auml;
ö&ouml;
Å&Aring;
Ä&Auml;
Ö&Ouml;
Som en minnesregel: å=&aring; "a med ring" och ä och ö (&auml; och &ouml;) "a umlaut" och "o umlaut" (umlaut är tyska och betyder omljud).

Text brukar ofta indelas i stycken (Paragraphs). Det finns en tag också fär att visa vad som är ett stycke. Ett stycke text omges av en inledande <P> och avslutande </P> tag.

Taggen <BR> ger ett radbyte.

Uppgift 4

Gör en sida, där du skriver in följande (var noga med radbyten och kom ihåg att koda om speciella tecken):

Växter, växter, växter
Rosor, tulpaner och fyrklöver

Djur, djur, djur
Älg, björn och åsna

Fet, understruken och kursiv

De gamla taggarna <B>Bold</B>, <U>Underline</U> och <I>Italic</I> kan ännu användas, men vi kommer i samband med CSS att gå igenom modernare sätt att komma till samma eller bättre resultat.

Uppgift 5

Gör en kopia på upg4.html, som du kallar upg5.html. Gör nu första raden fet, andra raden understruken, tredje raden kursiv. Gör ännu den fjärde och sista raden fet, understruken och kursiv, med undantag av ordet "och", som bara skall vara fett.

Valid HTML 4.01!

Valid CSS!