Grundkurs i hur man skriver en Internet webb-sida

Grundkurs

Denna beskrivning förklarar grunderna i hur man skriver en egen webb-sida på Internet World Wide Web. Det innehåller allt man måste veta för att skapa en webb-sida.

Detta dokument innehåller bara ett fåtal av de HTML kommandon som finns. Vi har valt ut de som man har mest användning av när man ska komma igång med att skriva en webb-sida. När man kan grunderna, finns det flera sidor att fördjupa sig i.

Innehållsförteckning

  1. HTML Kommandon
  2. Ett HTML basdokument
  3. Text i ett HTML dokument
  4. Kommandon som brukar placeras inom <HEAD> funktionen
  5. De vanligaste kommandona
  6. Att visa bilder
  7. Hur man utför länkning
  8. Listor
  9. Mer "coola" grejer
  10. Speciella tecken
  11. Uniform Resource Locator (URL)

HTML Kommandon

 Ett HTML kommando börjar med ett < tecken och slutar med ett > tecken. Exempelvis är kommandot för att sätta titeln på ett dokument <TITLE>. På engelska kallas ett HTML kommando för "tag", därför kallas de ofta för "tagg" på svenska.

HTML kommandon är oftast satta i par, ett för att starta och ett för att avsluta funktionen. Kommandot för att avsluta en funktion börjar med ett / tecken följt av startkommandot. Tecknet / brukar kallas "slut på".

Exempel: 

   <TITLE>Hur man skriver en Internet webb-sida</TITLE>

De vanligaste undantagen till par-regeln är <HR> och <IMG> kommandon. Det finns för nuvarande inget </HR> eller </IMG> kommando.

När man skriver ett HTML kommando spelar det ingen roll om stora, små eller en blandning av bokstäver används. Följande tre har samma funktion: <TITLE>, <title>, <TitlE>.

Alla HTML kommandon stöds ej av alla webb-läsare. Om en webb-läsare hittar ett kommando som den ej stödjer har den ingen funktion. De flesta kommandon i den här beskrivningen stöds av alla webb-läsare.

De flesta kommandon kan ta olika attribut som i sin tur kan ha olika värden. En attribut skrivs precis efter kommandots namn och innan > tecken.

Exempel på ett FONT kommando med en SIZE attribut: 

   <FONT SIZE=+1>hej på dig</FONT>

Text i ett HTML dokument

 När man skriver text i ett HTML dokument måste texten redigeras med hjälp av kommandon. T.ex nytt stycke i texten ignoreras av webb-läsaren, för att få nytt stycke måste ett kommando användas.

Webb-läsarn kommer automatiskt att byta rad då det behövs beroende på fönstrets vidd.

Ett HTML basdokument

 Ett HTML dokument består av en enda funktion:

   <HTML>...dokumentet....</HTML>

Denna <HTML> funktion innehåller två delar. En <HEAD> del och en <BODY> del.

I <BODY> delen ingår den information man vill visa till användaren (t.ex texten). <HEAD> delen är en beskrivning av vad <BODY> delen innehåller (t.ex titeln).

   <HTML>
   <HEAD>
   <TITLE>Ett enkelt HTML exempel</TITLE>
   </HEAD>
   <BODY>
   <H1>Detta är en huvudrubrik nivå-ett</H1>
   <P>Välkommen till HTMLs underbara värld.</P>
   <P>Denna text är ett stycke.</P>
   <P>Och denna text är andra stycket.</P>
   <ADDRESS>
   Skrivet av <a href="mailto:carolina@april.se">Carolina Carlberg</a>
   </ADDRESS>
   </BODY>
   </HTML>

Kommandon som brukar placeras inom <HEAD> funktionen

 <TITLE> ....text.... </TITLE>
Detta kommando sätter dokumentets titel. Alla dokument bör ha en titel. Titeln visas på titelraden av din webb-läsare. Titeln används främst av sökprogram för att hitta dokument. Titeln bör inte bestå av mer än ett halvt dussin ord som beskriver dokumentets innehåll (max 64 tecken rekommenderas).

Vanligvis visas titeln längst upp i webb-läsarens fönster skiljt från dokumentet och kommer ej ut när dokumentet skickas för utskrift.

<BASE HREF="URL">
Specificerar namnet på filen i vilket detta HTML dokument finns. URL är namnet av dokumentet och en beskrivning av hur man hittar dokumentet på Internet.

Detta kommando används när länkar inom ett dokument ej innehåller kompletta beskrivningar av hur man hittar dokumentet på Internet.

De vanligaste kommandona

Text redigering

 <BR>
Tala om för webb-läsaren att byta till en ny rad. Det finns ett problem med vissa webb-läsare som kräver att man har ett mellanslag innan <BR>. Som regel bör man därför alltid ha ett mellanslag framför.

<P>
Det gamla sättet: Tala om för webb-läsaren att byta till ett nytt stycke.

<P> ....text.... </P>
Det nya sättet: Tala om för webb-läsaren att texten innanför kommandot är ett stycke. Detta sätt är att föredra.

<HR>
Visar en horisontell linje med samma bredd som fönstret i din webb-läsare. Den används för att separera sektionerna i texten. Se ovanför "De vanligaste kommandona" för att se hur en sådan ser ut.

Val av text stil

<B> ....text.... </B>
Visa texten i fet stil (bold).

<I> ....text.... </I>
Visa texten i kursiv stil (italics).

<U> ....text.... </U>
Visa texten i understruken stil (underline).

<TT> ....text.... </TT>
Visa texten i skrivmaskins stil (typewriter).
Notera att varje tecken i detta teckensätt har samma vidd.

<B><I> ....text.... </I></B>
Vissa webb-läsare stödjer flera samtidiga text stilar. Om din webb-läsare har denna funktion, kommer denna text att vara i både fet och kursiv stil.

Rubriker

 HTML har sex olika nivåer av rubriker, numrerade från 1 till 6; nivå 1 den mest iögonfallande. Metoden som används för att visa rubrikerna skiljer sig från webb-läsare till webb-läsare.

Rubrikerna visas i större och/eller fetare stil än normalt för vanlig text. En rubrik börjar på en ny rad och avslutas med ett nytt stycke.

<h1> ....text.... </h1>
<h2> ....text... </h2>
<h3> ....text... </h3>
<h4> ....text... </h4>
<h5> ....text... </h5>
<h6> ....text... </h6>

Exempel på hur rubrikerna ser ut med just din webb-läsare:

En <h1> rubrik ser ut så här.

En <h2> rubrik ser ut så här.

En <h3> rubrik ser ut så här.

En <h4> rubrik ser ut så här.

En <h5> rubrik ser ut så här.
En <h6> rubrik ser ut så här.

Adressen

 Kommandot för att tala om vem som har skrivit dokumentet är <ADDRESS>. Den brukar komma sist i dokumentet, precis innan </BODY>. Vanligvis ingår en länk till en mailto: URL. Den används ej för att ange en "vanlig" postadress.

Titta på vårt bas dokument för ett exempel på hur man skriver ett sådant kommando.

Det finns ett problem med vissa webb-läsare som kräver att man har ett mellanslag innan </ADDRESS>. I regel bör man därför alltid ha ett mellanslag framför.

Att visa bilder

 För att visa en bild används <IMG> kommandot. Detta gör att webb-läsaren visar upp en grafikfil i fönstret. Grafikfilerna brukar ha GIF eller JPG format. Kommandot har formatet:

   <IMG SRC="bildnamn">

Exempel: 

   <IMG SRC="ap_icon.gif">

Man kan kombinera text och bild på samma rad, t.ex:

Denna logo tillhör April System Design.

Man kan välja bildens placering i förhållande till texten. Placeringen görs med hjälp av ALIGN optionen. Med detta attribut placeras texten vid toppen (ALIGN=TOP), mitten (ALIGN=MIDDLE) eller botten (ALIGN=BOTTOM) av bilden.

Till exempel: 

   <IMG SRC="ap_icon.gif" ALIGN=MIDDLE>

Denna logo tillhör April System Design.

Det finns en hel sida senare i kursen som förklarar mycket mer om hur man användar bildar, ikoner och fotografier på en webb-sida.

Hur man utför länkning

 Kraftfullheten i HTML kommer av dess förmåga att koppla delar av text eller bilder till ett annat internet dokument. Webb-läsaren markerar dessa sektioner, vanligtvis med blå färg och understruket, för att visa att dessa är hypertext-länkar (ofta förkortade till länkar). När man klickar på en länk, kopplas man vidare till ett nytt dokument.

HTML kommandot för att utföra länkning är <A>, som står för "anchor".

Hur man länkar till andra dokument

För att sätta en länk i ditt dokument, som kopplar dig vidare till ett annat internet dokument, gör följande:
  1. Starta kommandot med <A (Det ska vara ett mellanslag efter A:et).
  2. Specifisera det dokument som länken går till genom att skriva HREF="dokumentnamn". Om det ligger på samma server, kan man skriva endast dokumentets filnamn. Om det ligger på en annan server, ska dokumentnamn skrivas i ett format som kallas för URL, för er som ej kan detta format har vi förklarat URL senare i detta dokument.
  3. Skriv A-kommandots sluttecken >
  4. Anger den text eller bild som ska bli länken i ditt dokument. Texten visas med blå färg och understruket i ditt dokument.
  5. Avsluta med slut kommandot: </A>
Länkens format:

   <a href="dokumentnamn"> .... text .... </a>

Ett exempel på en hypertext-länk:

   <A HREF="http://www.april.se">April System Design</A>

Denna länk kommer att ser ut så här i din webb-läsare:

April System Design

Klickar man på denna, kommer webb-läsaren att visa upp dokumentet "index.html" på world wide web servern "www.april.se".

Hur man länkar till en annan plats i samma dokument

Det är möjligt att ha länkar inom samma dokument. Detta kan användas för att flytta direkt till ett visst kapitel utan att behöva läsa igenom hela dokumentet. Just denna metod har vi använt oss av när vi skrev innehållsförteckningen i detta dokument.

För att markera de ställen i ett dokument som man kan flytta sig till, använder man sig av ett så kallat ankare. Ett ankare namnsätter en viss plats i dokumentet. Man sätter ett ankare runt just den text man vill flytta sig till

Ankarets format:

   <a name="platsnamn"> .... text .... </a>

Exempelvis använde vi oss av följande kommando för att döpa vår rubrik "Uniform Resource Locator (URL)" till namnet "url": 

   <A NAME="url">
   <H2>Uniform Resource Locator (URL)</H2>
   </A>

När man nu har döpt den plats i dokumentet, kan man sätta en länk till platsen ifrån någon annan plats i samma dokument. För att göra detta, använder man sig av samma metod som vid länkning till ett annat dokument. Istället för att specificera dokumentnamn, skriver man ett # tecken följt av platsnamn.

För att sätta en länk till vår URL rubrik, skriver vi: 

   En förklaring av vad
   <A HREF="#url">URL</A>
   är för nå't.

Denna länk kommer att ser ut så här i din webb-läsare:

En förklaring av vad URL är för nå't.

Klickar man på denna länk, hoppar man till denna plats i dokumentet.

Hur man länkar till en annan plats i ett annat dokument

När man länkar till ett annat dokument, brukar man komma till början av dokumentet. Det är möjligt att kombinera de föregående två metoderna för att kunna länka till en annan plats i ett annat dokument.

Länkens format:

  <a href="dokumentnamn#platsnamn"> .... text .... </a>

T.ex. Det finns ett kapitel som heter "frames" i dokumentet "htmlkurs/htmldoc5.html" på web server "www.april.se". För att länka dit, använde vi oss av följande kommando: 

   Här kan man läsa om hur man använder
   <A HREF="htmldoc1.html#lis">Listor</A>
   i ett html-dokument.

Denna länk kommer att ser ut så här i din webb-läsare:

Här kan man läsa om hur man använder Listor i ett html-dokument.

Att använda en bild som länk

Man kan använda en bild som en länk, istället för text. Bilden visas då i en blå ram. När man klickar på bilden, kopplas man vidare till ett nytt dokument.

Länkens format:

   <a href="namn"> .... bild .... </a>

Exempel: 

   <a href="http://www.april.se/">
   <img src="ap_icon.gif">
   </a>

Denna länk kommer att ser ut så här i din webb-läsare:

Listor

HTML har stöd för onumrerade, numrerade och definitions listor. Listor har vi använt för att skapa dokumentets innehållsförteckning.

Onumrerade listor

För att göra en onumrerad lista:

  1. Börja med ett "start-med" lista <UL> kommando.
  2. För varje enhet i listan, skriv <LI> följt av texten. (Notera att inget "slut-på" kommando </LI> finns.)
  3. Avsluta med "slut-på" lista </UL> kommando.

Ett exempel på en tre-enhets lista: 

   <UL>
   <LI>Norrland
   <LI>Svealand
   <LI>Götaland
   </UL>

Resultatet blir:

En <LI> enhet kan bestå av flera rader eller paragrafer. Åtskilj paragraferna på vanlig sätt med <P>.

Numrerade listor

En numrerad lista (även kallad ordnad lista) fungerar på samma sätt som en onumrerad lista, förutom att kommandot heter <OL>.

   <OL>
   <LI>Umeå
   <LI>Uppsala
   <LI>Lund
   </OL>

Resultatet blir:

  1. Umeå
  2. Uppsala
  3. Lund

Definitions listor

För att skapa en definitions lista, används <DL> kommandot. En definitions lista består av alternerande meningar och definitioner. <DT> kommandot används för att specificera meningen (Define Term), och <DD> kommandot för att specificera definitionen (Define Definition).

Följande är ett exempel av en definitions lista: 

   <DL>
   <DT>Flitiga Lisa
   <DD>Flitiga Lisa gör skäl för sitt trevliga namn. Den blommar 
       nästan hela året och det är inte svårt att få nya fina exemplar 
       av den - sticklingar rotar sig lätt.
   <DT>Gardenia 
   <DD>Gardenia är en krukväxt för den kunniga. Den tål inte 
       kalk i jorden eller i vattnet. Den vill ha en jämn fuktighet 
       både i luften och i jorden. Men den som lyckas med den blir 
       belönad - både blad och blommor är utsökt vackra och den har 
       en underbar doft.
   </DL>

Resultatet blir:

Flitiga Lisa
Flitiga Lisa gör skäl för sitt trevliga namn. Den blommar nästan hela året och det är inte svårt att få nya fina exemplar av den - sticklingar rotar sig lätt.
Gardenia
Gardenia är en krukväxt för den kunniga. Den tål inte kalk i jorden eller i vattnet. Den vill ha en jämn fuktighet både i luften och i jorden. Men den som lyckas med den blir belönad - både blad och blommor är utsökt vackra och den har en underbar doft.

<DT> och <DD> kommandona kan innehålla flera paragrafer eller andra listor.

"Listor i listan"

Det är möjligt att skapa en lista som innehåller ytterligare en eller flera listor. Vår innehållsförteckning är en numrerad lista som innehåller flera onumrerade listor.

Ett exempel på "listor i listan" är: 

   <UL>
   <LI>Sverige:
      <UL>
      <LI>Stockholm
      <LI>Göteborg
      <LI>Malmö
      </UL>
   <LI> Norge:
      <UL>
      <LI>Oslo
      <LI>Stavanger
      </UL>
   </UL>

Resultatet blir:

Mer "coola" grejer

 I denna sektion visar vi fler kommandon för att kunna snygga till i din webb-sida. Alla webb-läsare har inte stöd för dessa kommandon. Man bör försöka skriva sitt HTML dokument så att det ändå ser bra ut med en webb-läsare som ej stödjer dessa kommandon.

Centrera text eller bilder

Man kan centrera text eller bild med kommandot <CENTER>. Det kan även användas för att centrera rubrikerna som vi har gjort i detta dokument.

Detta har formatet:

   <CENTER> ...text eller bild... </CENTER>

Exempel: 

   <CENTER>detta kommer att stå i mitten</CENTER>

ser ut så här:

detta kommer att stå i mitten

Teckensätt storlek

 <FONT SIZE> kommandon används för att ändra storleken på teckensnittet.

Detta har formatet:

   <FONT SIZE=±storlek> ...text... </FONT>

T.ex för att göra teckensnittet mindre (notera minus-tecknet framför ettan):

   K<FONT SIZE=-1>EITH </FONT>B<FONT SIZE=-1>ARKER</FONT>

Detta ser ut så här:

KEITH BARKER

T.ex för att göra teckensnittet större:

   <FONT SIZE=+2>C</FONT>AROLINA <FONT SIZE=+2>C</FONT>ARLBERG

Detta ser ut så här:

CAROLINA CARLBERG

Grafikfil som bakgrund

Det finns ett attribut till <body> kommandot där man kan specificera en grafikfil som bakgrund. Denna kommer att användas istället för den vanliga enfärgade bakgrunden. Bakgrundsfilen brukar vara ett diskret mönster i grått- eller pastellfärg. Vi har använt oss av en grafikfil som bakgrund till denna sida.

Detta har formatet:

   <body background="grafikfil">

Exempel: 

   <body background="backgrnd.gif">

Speciella tecken

Speciella tecken kan skapas med "& tecken-namn ;". De första tre i nedanstående lista, kan bara skapas på detta sätt.

Följande är en lista av de mest användbara speciella tecken, och deras namn: 

   &amp;       &
   &lt;        <
   &gt;        >
   &quot;      " 
   &copy;      ©
   &Auml;      Ä
   &auml;      ä
   &Aring;     Å
   &aring;     å
   &Ouml;      Ö
   &ouml;      ö
   &Oslash;    Ø
   &oslash;    ø
   &aelig;     æ
   &AElig;     Æ
   &nbsp;      "hårt" mellanslag

Uniform Resource Locator (URL)

 En URL (Uniform Resource Locator) identifierar en resurs på internet. Resursen kan vara en webb-sida, men kan också vara mycket annat, exempelvis ett program eller en datafil. Man kan tänka sig URL:n som en adress.

En URL består av en eller flera delar, vanligast tre. Ett exempel på en URL är:

http://www.april.se/index.html

Protokoll

http://www.april.se/index.html

Denna del i URL:n anger det protokoll som används för att utnyttja resursen. För en World Wide Web server, är protokollet alltid http:.

Andra vanliga protokoll är ftp: för filöverföring, mailto: för e-post och file: för en fil på det lokala systemet.

Domännamn

http://www.april.se/index.html

Denna del i URL:n anger domän- eller servernamn för den dator som resursen finns på.

Katalog

http://www.april.se/datafiler/april.html

Denna del i URL:n anger den katalog där resursen finns. Den är sökvägen på servern till önskad resurs. Om resursen finns på rotkatalogen på servern, utelämnas denna del. Notera att underkatalogerna avskiljs av / tecken.

Resurs

http://www.april.se/index.html

Denna del i URL:n anger resursnamnet.

På en WWW-server är detta namnet på ett HTML dokument som innehåller en webb-webbsida. I detta fall, blir filtypen .htm eller .html. På vissa www-servrar kan denna utelämnas, och då får man serverns första sida, vanligtvis index.html.

En Relativ URL

Om man ska länka till "http://www.april.se/index.html", men redan befinner sig i ett dokument i "http://www.april.se", behöver man inte ange hela URL:n. Det räcker med "index.html" för att komma till "http://www.april.se/index.html". Denna kallas för en relativ URL.

Uppdaterad 19:e november 2000