Den här beskrivningen förklarar grunderna i hur man skriver en egen websida.

Dokumentet 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 websida.
När man kan grunderna, finns det bättre flera sidor att fördjupa sig i.

Börja med att skapa en mapp på t.ex Skrivbordet och döp mappen till hemsidan.
Öppna sedan anteckningar (start, program, tillbehör, anteckningar) och börja knacka kod.
När du är färdig väljer du arkiv, spara som, döp dokumentet till index.html och välj alla filer, leta upp mappen hemsidan och välj spara.

Vill du se hur det ser ut så öppnar du mappen hemsidan och dubbel-klickar på filen index.html så visas det du har gjort i webläsaren.
Vill du lägga till eller ändra något så väljer du visa och klickar på källa så öppnas det du gjort i anteckningar.
Du kan nu fortsätta att koda och när du är färdig väljer du arkiv, spara.
Klicka sen på uppdatera i webbläsaren så ser du dom förändringar eller tillägg som du gjort.
Det här är inte så svårt som det kanske verkar.Har du gjort det några gånger så sitter det i "fingertopparna" he,he.

För att skicka upp sajten till din webplats behövs ett ftp program.
Vi har ws-ftp som är gratis och en bruksanvisning här

Färgkoder
Färgtest
Startsidan

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 taggar har samma funktion:
<TITLE> <title> <TitlE>.

De flesta kommandon i den här beskrivningen stöds av alla webb-läsare.

Många 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>Rösta rätt rösta rött</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 text och bild)
<HEAD> delen är en beskrivning av vad <BODY> delen innehåller, t.ex titeln och
instruktioner till webläsaren (ramen som omger den här sajten)

Det som står här under är inte mycket, men går att skicka upp på nätet för visning.
1. Prova att kopiera och klistra in basdokumentet i anteckningar.
2. Spara och döp det till prov.html.
3. I menyn under väljer du "Alla filer"

<HTML>
<HEAD>
<TITLE>Min websida</TITLE>
</HEAD>
<BODY>
<BODY bgcolor=#ff0000>
<CENTER>
<H1>Välkommen hit</H1>
</CENTER>
<P>Detta är min hemsida.</P>
<P>Här är lite info om mej.</P>
<P>Jag gillar att bla bla bla.</P>
<P>Här är en bild på mej</P>
<IMG SRC="bildavmig.gif">
<ADDRESS>
Skrivet av <a href="mailto:clanen@clanen.net">Clanen.net</a>
</ADDRESS>
</BODY>
</HTML>

Kommandon placerade 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 och 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.

De vanligaste kommandona

<BR>
Tala om för webläsaren att byta till en ny rad.

<P> ....text.... </P>
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 här under för att se hur en sådan ser ut.

Val av textstil

<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).

<S> ....text.... </S>
Visa texten i överstruken stil.

<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.

Specialtecken

Tecken Character entity
å &aring;
Å &Aring;
ä &auml;
Ä &Auml;
ö &ouml;
Ö &Ouml;
< &lt;
> &gt;
& &amp;
" &quot;
æ &aelig;
Æ &AElig;
ø &oslash;
Ø &Oslash;

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.
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 inte för att ange en "vanlig" postadress.

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="bildnamn.gif">

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="danc.gif" ALIGN=MIDDLE>

Denna bild tillhör.....någon.

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

Denna logo tillhör Clanen.net.
Kom ihåg att du inte kan ha å, ä eller ö i filnamnet.

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,
  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 länk:

   <A HREF="http://www.aftonbladet.se"target=blank">Aftonbladet</A>

Denna länk öppnas i ett nytt fönster (target=blank") och ser ut så här i din webb-läsare:

Aftonbladet

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

För att länka till en annan sida som DU har skapat så skriver man:
<A HREF="lankar.html">Mina Länkar</A>
Kom ihåg att du inte kan ha å, ä eller ö i namnet på länken.
Dokumentet kan alltså inte heta länkar.html.

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.aftonbladet.se/">
   <img src="gatillafton.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><b>Windows xp pro
   <DD>Windows xp pro gör skäl för sitt trevliga namn. 
       Den används nästan hela året och det är inte svårt att få nya fina exemplar 
       av den.
   <DT>Linux 
   <DD>Linux är ett operativ för den nördiga. Den gillar inte 
       andra operativ varken som client eller server. Den vill ofta ha en knäpp användare.</b>
   </DL>

Resultatet blir:

Windows xp pro
Windows xp pro gör skäl för sitt trevliga namn. Den används nästan hela året och det är inte svårt att få nya fina exemplar av den.
Linux
Linux är ett operativ för den nördiga. Den gillar inte andra operativ varken som client eller server. Den vill ofta ha en knäpp användare.

<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 grejer

I denna sektion visar jag fler kommandon för att kunna snygga till i din websida.

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>Texten/bilden kommer att stå i mitten</CENTER>

ser ut så här:

Texten/bilden 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):

   M<FONT SIZE=-1>ATS </FONT>B<FONT SIZE=-1>ORGSTRÖM</FONT>

Detta ser ut så här:

MATS BORGSTRÖM

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

   <FONT SIZE=+2>M</FONT>ATS <FONT SIZE=+2>B</FONT>ORGSTRÖM

Detta ser ut så här:

MATS BORGSTRÖM

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.
Detta har formatet: 

   <body background="grafikfil">

Exempel: 

   <body background="bakgrund.gif">

Speciella tecken igen

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
© 2005 The Borgström Clan

Omarbetad 29:e Januari 2005
LYCKA TILL MED DIN WEBSIDA



UPP

Startsidan