Visa källa för Skapa hemsida

För att du själv skall kunna skapa en väldigt enkel hemsida bör du även kunna de allra enklaste HTML kommandona. De har sett likadana ut i över 20 år och det skadar inte att kunna dem. Vill du fördjupa dig och lära dig att göra mer avancerade sidor finns det så mycket information om HTML på Internet att du skulle kunna börja läsa den nu fram tills du blir pensionär och inte läsa samma sida två gånger. Vill du inte läsa på skärmen brukar alla bibliotek ha olika böcker om HTML också. Tyvärr syns inte resultatet av taggarna i wiki-formatet (som grundskoleboken.se använder), men du får lita på mitt ord. Om du kan hantera de "taggar" som beskrivs här nedanför kommer du egentligen inte att behöva något mer för att skapa de enklaste hemsidorna.


==Taggar==

HTML-koden bygger på taggar, vilket är en förenklad beskrivning av &lt; och &gt; tecknen. Vanligtvis börjar man ett HTML kommando med en tag och avslutar med en likadan fast med ett / tecken framför, bra exempel är hur man gör enkel formatering på text:
 Fet stil     = &lt;b&gt; Allt som skrivs här blir fet men &lt;/b&gt;här är det vanligt.
 Kursiv stil  = &lt;i&gt; Allt som skrivs här blir kursiv men &lt;/i&gt;här är det vanligt.
 Understruken = &lt;u&gt; Allt som skrivs här blir understruket men &lt;/u&gt;här är det vanligt.

Vill man ha rubriker skapas de med en h-tagg (h=header). Det finns sex olika nivåer där 1 är störst och 6 är minst.
 &lt;h1&gt; Störst rubrik &lt;/h1&gt; och här är det vanligt.
 &lt;h6&gt; Minst rubrik &lt;/h6&gt; och här är det vanligt.

Det finns vissa taggar som styr textflödet:
  &lt;br&gt; radbrytning &lt;br&gt; och ännu en ny rad. Radbrytning har ingen sluttagg
  &lt;hr&gt; Horisontell linje &lt;hr&gt; och ännu en horisontell linje. Även denna saknar sluttagg.
  &lt;P&gt; Nytt stycke &lt;/p&gt;. Vid nytt stycke skapas automatiskt en ny rad i början.

Det finns en tagg för bildvisning:
 &lt;img src="http://sökväg till bilden"&gt; ''Bildtaggen saknar sluttagg''.

De flesta taggar kan styras i sidled med "align"=. Exemplet nedan visar bilder, men de flesta taggelement kan justeras på det här viset.
  &lt;img src="http://sökväg till bilden" align="left"&gt; Bilden hålls mot vänsterkanten
  &lt;img src="http://sökväg till bilden" align="center"&gt; Bilden hålls i mitten
  &lt;img src="http://sökväg till bilden" align="right"&gt; Bilden hålls mot högerkanten

Tabeller är en historia för sig. En tabell har tre olika taggar;
  &lt;table&gt;&lt;/table&gt; Början och slutet på en tabell
   &lt;tr&gt;&lt;/tr&gt; Början och slutet på en tabellrad
   &lt;td&gt;&lt;/td&gt; Början och slutet på en tabellcell
Minsta möjliga tabell, med en enda rad som har en enda tabellruta/cell blir alltså:
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;Detta syns för den som ser på tabellen&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

Länkar som skickar iväg användaren skrivs så här:
 &lt;a href="http://ditdenska"&gt;Klicka på mig &lt;/a&gt;
Ibland (oftast) vill man inte stänga det fönster eleven står i, då skriver man:
 &lt;a href="http://ditdenska" target="new"&gt;Klicka på mig &lt;/a&gt;
Då öppnas ett nytt fönster men det gamla består, något som är viktigt när man jobbar med databasdrivna sessioner.

Färger i HTML beskrivs i hexadecimal form. Vill man t.ex. ha en sida med gråblå bakgrundsfärg skriver man:
 &lt;body bgcolor=#CCCCCC&gt;
Alla färger styrs av ett Rött -- Grönt - Blått värde där 00 blir svart och FF blir vitt. I hexadecimala tal kan inget vara mer än F. Dvs
  &lt;body bgcolor=#000000&gt; blir en svart sida
  &lt;body bgcolor=#FFFFFF&gt; blir en vit sida
  &lt;body bgcolor=#FF0000&gt; blir en röd sida
  &lt;body bgcolor=#00FF00&gt; blir en grön sida
  &lt;body bgcolor=#0000FF&gt; blir en blå sida
Det gör detsamma om man skriver färgerna med små- eller stora bokstäver. Det mesta inom en html-tagg kan ges en annan färg. Vill man ändra textfärgen skriver man t.ex.:
 &lt;font color="#FF6699"&gt;Texten är färgad.&lt;/font&gt;
Det går att ange storlek och typsnitt i font-taggen också:
 &lt;font color="#FF6699" size="2" face="Arial"&gt;Texten är färgad, rätt liten och med typsnittet Arial.&lt;/font&gt;
Font-taggen är föråldrad, men den fungerar bra och är enkel att förstå om  man jämför med alternativet (style sheets). Typsnittet är beroende av om användaren har exakt samma typsnitt installerat på sin dator, så använd enbart de vanligaste typsnitten,

Vill man istället ha en "tapet" i bakgrunden, en bild, skriver man:
  &lt;body background="http://sökvägtillbilden"&gt;

Listor är bra, de används ofta. Vill man ha en lista med olika delar med en prick framför varje skriver man t.ex:
 &lt;ul&gt;
 &lt;li&gt;Kaffe&lt;/li&gt;
 &lt;li&gt;Mjölk&lt;/li&gt;
 &lt;/ul&gt; 
Vill man däremot ha en lista där det står en siffra framför varje skriver man t.ex:
 &lt;ol&gt;
 &lt;li&gt;Kaffe&lt;/li&gt;
 &lt;li&gt;Mjölk&lt;/li&gt;
 &lt;/ol&gt; 
Vill man slutligen ha en lista som Google använder, med en rad där det finns text under, skriver man:
 &lt;dl&gt;
 &lt;dt&gt;Kaffe&lt;/dt&gt;
 &lt;dd&gt;Här står det en fantastiskt massa om kaffe.&gt;/dd&gt;
 &lt;dt&gt;Mjölk&lt;/dt&gt;
 &lt;dd&gt;Här står det en fantastiskt massa om mjölk.&gt;/dd&gt;
 &lt;/dl&gt;

==Ljud==

Att spela upp ljud är litet krångligare. Enklast är att helt enkelt skapa en länk till ljudet och låta operativsystemet avgöra vilket program som skall användas för att spela upp det:
 &lt;a href="http://sökvägtill_ljud.mp3"&gt;Spela ljudet&lt;/a&gt;


Ett mer avancerat system är att spela upp ljudet genom Yahoo, men det är en tvåstegsmanöver. Där du vill ha en knapp för att spela upp ljudet, eller ljuden om de är många, skriver du:
  &lt;a href="http://sökvägtill_ljud.mp3"&gt;Spela ljudet&lt;/a&gt;
Längst ner på sidan, alldeles innan taggarna för avslutande body och html, skriver du:
 &lt;script type="text/javascript" src="http://mediaplayer.yahoo.com/js"&gt;&lt;/script&gt;
Det som händer är att på den plats där du skrivit i ljudfilens sökväg skapas en knapp, och när man trycker på den öppnas en ljuduppspelare. 

Källa: http://www.w3schools.com/html/html_sounds.asp


==Video==

Video är så krångligt att jag helst inte vill ha med det, men samtidigt är det en av de viktigaste kanalerna för elevernas inlärning i nuläget.  Olika videosajter på Internet använder olika format och olika egna system för att spela upp videofiler på. Allra enklast är det om du vet sökvägen direkt till videofilen. Då skriver du bara:
 &lt;a href="http://sökvägtill_fil.flv"&gt;Spela filmen&lt;/a&gt;
och sedan är det bara att hoppas på att du har rätt codec installerad på datorn så att filmen går att spela upp. Har du gratisprogrammet ''VLC media player'' installerat så klarar du av att spela de flesta formaten.

Om du däremot vill spela upp en video du hittat på Internet så är du tvungen att själv, utifrån den sajtens krav och inmstruktioner,  lista ut hur man bakar in filmen i din sida. Den här koden används för Youtube klipp, exemplevis Loreens Euphoria:

 &lt;iframe id="ytplayer" type="text/html" width="640" height="360"
 src="http://www.youtube.com/embed/Pfo-8z86x80"
 frameborder="0" allowfullscreen&gt;

Om du tittar på sökvägen längst upp i Youtube så står det t.ex.:
 http://www.youtube.com/watch?v=Pfo-8z86x80
Då är det koden som står bakom v= som du skall använda dig av.

Källa: http://www.youtube.com/dev

Om du vill ha filmer från Metacafe och liknande sajter gäller andra regler.


==Färdig sida==

Nu har du lärt dig koden som skall visas, men det finns litet till innan du har en riktig hemsida. Man brukar tala om sidhuvud och sidfot. I sidhuvudet finns en mängd information som inte syns för tittaren men som Firefox eller Internet Explorer behöver för att visa upp sidan på ett bra sätt. Sidfoten behövs för att tala om att sidan är slut. Det ser t.ex. ut som detta:

 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sv-SE"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;title&gt;Denna text syns längst upp i Firefox/Internet Explorer &lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;h1&gt;Här skriver du den html-kod användarna skall se &lt;/h1&gt;&lt;br&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Det är alltså det som står mellan &lt;body&gt; och &lt;/body&gt; taggarna som användarna som tittar på din hemsida kommer att se.

==Ut på nätet==

Detta är allt du behöver kunna för att skapa egna hemsidor. Nästa steg är att få ut sidorna på Internet så att andra än du själv kan se dem. För att det skall lyckas behöver du ha ett konto på en webserver. Enklast för elever är att ansluta sig till webstjärnan:

http://www.webstjarnan.se/

Gör du egna hemsidor hemma får du söka upp något företag som hyr ut plats för websidor, nästan ingen gör det gratis numera.


[[Kategori: Svenska]]