Hela processen kan man beskriva med ord:
1. Öppna ett HTML-dokument.
2. Öppna HEAD-avdelningen. Allt som finns här är osynligt på webben. Därför börjar alla märken i HEAD med ordet META, förutom TITLE-märket. För ett HTML-dokument META betyder: ”Visa inte det här information på webben utan skicka den till sökmotorrobotar för identifiering av dokumentet.”
3. Stänga HEAD-avdelningen.
4. Öppna BODY-avdelningen. Allt som finns här är synligt på webben.
5. Stäng BODY-avdelningen.
6. Stäng HTML-dokumentet.
Det här var strukturen för vilken HTML-sida som helst på Nätet.
HTML-koden är:
<html>
<head>
<title> Namn på din hemsida </title>
<meta …..märket forsätter här>
<meta …..ännu ett META-märke här>
<meta …..det kan finns ännu flera META-märken>
</head>
<body>
Innehållet i ditt dokument som visas på Nätet.
</body>
</html>
Det som återstår nu är att lära HTML-märken för att skapa länkar, infoga bilder, osv. Efter det kan du skriva ditt första HTML-dokument.
Det är dags att introducera parametrar eller attribut. En parameter (attribut) kan beskrivas som en egenskap för märken. Olika märken har olika egenskaper; dock finns det en del märken som har gemensamma egenskaper.
<BODY>-märket har attribut som anger hemsidans bakgrund, textfärgen, länkfärgen o s v.
En webbsida med röd bakgrund har attribut BGCOLOR=”red” i sitt BODY-märke. Fullständiga HTML-koden blir:
<BODY BGCOLOR=”red”>
Oftast nöjer man sig inte enbart med att ange bakgrundsfärgen utan man vill påverka resten av webbsidan. Glöm inte att BODY-märket är startpunkten för det som ska visas på skärmen vilket gör att alla attribut i det har global effekt. I praktiken betyder det att om du anger att textfärgen ska vara blå kommer det att gälla för hela webbsidan, om man inte i efterhand ändrar specifika stycken, meningar och ord i texten.
Attribut som tar hand om textfärgen heter TEXT=” ”. Koden som anger röd bakgrund och blåfärgad text på en webbsida blir:
<BODY BGCOLOR=”red” TEXT=”blue”>
Det man ofta vill ändra är färgen på länkar i sitt dokument. Detta gör man med attribut LINK=” ”. Standard värdet för länkar är blå och det behöver man inte ange ifall man vill behålla färgen.
Anta att vi vill ha en röd bakgrund, blå text och gröna länkar på en webbsida:
<BODY BGCOLOR=”red” TEXT=”blue” LINK=”green”>
Du har säkert märkt att färgen på länkar du redan besökt har ändrat sin färg efter besöket? Det ska vi också påverka. Vissa länkar vill man inte ändra färg på efter att man klickat på dem. Till ex. om du har en meny på din webbsida kanske du vill att länkfärgen förblir detsamma oavsett om man klickat på dem eller inte.
Koden för röd bakgrund, blå text och alltid gröna länkar blir:
<BODY BGCOLOR=”red” TEXT=”blue” LINK=”green” VLINK=”green”>
Självklart kunde vi ange vilken färg som helst i VLINK=” “. Denna egenskap anger färgen på besökta länkar på din webbsida.
Notering: Färgen man anger behöver inte anges som jag gjort hittills (red, green, blue). Man kan ange färgerna i hexadecimalform: #ffffff.
Du har säkert sätt det tidigare. Det som är viktigt just nu är vetskap att det kvittar vilken metod du använder för att ange färgen på dina element i dokumentet. Dock måste jag påpeka att hexadecimalform ger större urval av färgerna.
Hexadecimalformen består av tecknet ”#” följd med 6 hexadecimala siffror (tal: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f).
Varje sifferkombination av hexadecimala tal motsvarar en viss färg.
Föredrar du första varianten är det bra att veta vilka färger som kan anges. Det är enbart 16 standard Windows färger: Black, white, green, blue, yellow, magenta, cyan, purple, gray, lime, maroon, navy, olive, silver, and teal.
För att sammanfatta BODY-märket har jag samlat de viktigaste attribut kopplade till det:
|
Attribut: |
Exempel: |
|
Bgcolor |
<body bgcolor=”green”> |
|
Text |
<body text=”green”> |
|
Link |
<body link=”green”> |
|
Vlink |
<body vlink=”green”> |
|
background |
<body background=”bild.gif”> |
Du ser att i tabellen finns det ett attribut som jag inte nämnt hittills: BACKGROUND. Det används ifall man vill ha en bild i bakgrunden istället för en vanlig färg.
Tänk på att genvägen till bilden måste vara exakt. En annan sak är bildstorleken. Man ska se till att ha små bilder (i storlek) annars kommer din webbsida att laddas långsamt för dina besökare.
]]>Håll dig till:
Times New Roman, Verdana, Arial, Tahoma och Helvetica.
I HTML kan man använda sig av fördefinierade rubriker för olika ändamål. ”Headings” är engelska namnet för rubriker man använder sig av i HTML-dokument.
Elementet med vilket man identifierar rubriker är H. Märket för att definiera en rubrik börjar med elementet H följd med en av 6 tal: 1, 2, 3, 4, 5, 6.
Största rubrik börjar med <H1> och slutar med </H1>. Minsta rubrik börjar med <H6> och slutar med </H6>.
Här kommer alla möjliga rubriker:
<H1> Störst text < /H1>
<H2> Större text </H2>
<H3> Stor text </H3>
<H4> Normal </H4>
<H5> Mindre </H5>
<H6> Minst </H6>
Rubrikmärket har också sina egna attribut med vilka man ändrar egenskaper för texten som följer. Här kommer det mest använda attribut för rubriker:
|
Attribut: |
Beskrivning: |
Exempel: |
|
align |
Justering av rubriken: |
<h1 align=”center”> |
Exempelvis:
<H1 align=”center”> Störst text </H1>
kommer att justera texten på mitten av din webbsida.
]]>Ibland är det en fördel men det händer att man vill ha fasta radbrytningar och då kan man använda sig av märket <P>.
Effekten man får med ett nytt stycke är den du ser nu när du läser den här boken. Har du märkt att jag delar in min text i stycken med högst 5-6 rader?
Det gör jag för lättare läsning och trevligare utseende. Man tröttnar lätt på texter utan radbrytningar.
Det vanligaste attribut för stycken är align.
<P align=”center”> text är centrerad </P>
OBS: man kan utesluta </P> för stycken och några få märken till.
Radbrytning
I vissa fall har man ett behov av en ny rad inom samma stycke. Självklart finns det ett märke även för det. Det heter <BR>.
<br> representerar en ny rad.
<p> representerar ett nytt stycke .
Egentligen är <p> samma som två <br>.
Du kan skriva <br><br> istället för <p>.
Fet- och kursivstil
Märket för att göra texten i fetstil börjar med <B> och slutar med </B>.
Märket för kursivstil börjar med <I> och slutar med </I>.
Exempel:
<B> fetstil kommer här </B>
<I> kursivstil följer efter </I>
Alla tre egenskaper är attribut för ett nytt märke som behandlar texten. Dags att presentera FONT-element som bygger märket: <FONT> </FONT>.
Tänk på vad jag skrev tidigare om val av teckensnitt. Trots av ett stort urval brukar man välja en av 5 standard teckensnitt:
Times New Roman, Verdana, Arial, Tahoma och Helvetica.
I tabell nedan hittar du alla attribut med motsvarande beskrivning och exempel:
|
HTML –märke: |
Beskrivning: |
Exempel: |
|
<FONT FACE=”Font”> text </FONT> |
Istället för “Font” skriv en av 5 standard teckensnitt. |
<FONT FACE=”Arial”> text </FONT> |
|
<FONT COLOR=”color”> text </FONT> |
Ange färgen på texten som följer. Både namn på färg och hexadecimalt tal går att skriva |
<FONT COLOR=”green”> text </FONT> |
|
<FONT SIZE=”size”> text </FONT> |
Istället för “size” anger du ett tal mellan 1 och 7. Om du inte gör någon kommer storlek 2 att användas. |
tre |
Anta att vi vill ha en del av en text skriven med Verdana, grönfärgad och med storlek 5:
<font color=”green” size=”5″ face=”Verdana”>min text</font>
Låt oss ta ett större exempel med flera märken inblandade. Man börjar med ett nytt stycke med små bokstäver, centrerat. Sista två ord i stycket vill man modifiera genom att ändra attribut som påverkar teckensnitt (Verdana), färg (blå) och teckenstorlek (5):
<h5 align=”center”>
Precis, man ska kunna <font color=”blue” size=”5″ face=”Verdana”>FÅRSTÅ HTML</font>.</h5>
Precis, man ska kunna FÖRSTÅ HTML.
]]>GIF vs. JPEG
För det mesta finns det två olika format på bilder på Nätet: gif och jpeg. Nedladdnings tid för en webbsida är mycket viktigt och därför är valet av bild formatet av stor vikt.
Man kan inte säga att ena är bättre än det andra utan var och en har sin plats och sin uppgift. När man pratar om ”bra val” menar man framförallt storleken på bilden (inte storleken på skärmen utan storleken på hårddisken).
Man vill ha så liten bild som möjligt och val av formatet spelar stor roll för webbsidans nedladdningstid.
Det finns två aspekter av problematiken kring bildformatet:
1. Besökare: ju mindre bilder desto snabbare visas din webbsida för dina besökare. Kommer du ihåg sidor du bara stäng efter att du tröttnat på att vänta för nedladdningen? Jag är säker på att du inte vill förlora dina besökare bara för att din hemsida laddas ner långsamt.
2. Webbmaster (du): ju mindre bilder du har desto mindre databandbredd (transfer) förbrukas. De flesta webbhotell begränsar ditt konto genom att sätta gränser för antalet MB (GB) som kan passera från/till ditt webbhotellkonto. Vill man få mer att förbruka kostar det pengar. Därför är det olika priser för olika webbhotell (alla har olika leverantörer, olika konfigurationer, support, o s v.).
Om din huvudsida har 10 bilder som är 50kb/bild stora, kommer det totalt att förbrukas ca 500kb per besök på den webbsidan. De flesta billiga webbhotellpaket ger dig enbart 1GB/månad för datatransfer. Detta innebär att du skulle kunna ta emot enbart 2048 besök i månaden. Dock måste jag påpeka att 500kb/webbsida är mycket ovanligt men om man inte hanterar bilderna på ett bra sätt kan det hända att man förbrukar väldigt mycket i onödan.
En normal webbsida bör inte vara större än 70kb. Genomsnittet för en webbsida innehållande text och mindre bilder (knappar, baner) är ca 40kb.
Undantag är alltid intressanta Därför hänvisar jag till en hemsida som förbrukar dryga 400GB i månaden. Sidan ligger: www.3dkingdom.org
GIF står för ” Graphic Interchange Format”. GIF-formatet är lämpat för menyer och mindre bilder. Speciellt är det bra för bilder som har större areor av samma färg.
JPEG står för “Joint Photographic Experts Group” och det är lämpad för fotografier och logo-bilder.
Om man skulle konvertera en mindre GIF-bild till Jpeg-formatet skulle den nya Jpeg-bilden vara större än den ursprungliga GIF-bilden.
På samma sätt, om man skulle konvertera en Jpeg-bild till GIF-formatet skulle den nya bilden bli betydligt större än den ursprungliga.
]]>Du har redan bekantat dig med attribut för HTML-märken. <IMG>-märket har ett jätte viktigt attribut som inte kan uteslutas: SRC.
SRC står för ”source”. Där anger man adressen till bilden man vill infoga i sitt dokument.
<IMG src=”bild.gif”> eller <IMG src=”bild.jpg”>
Exemplet ovan fungerar enbart när bilderna och webbsidor ligger i samma katalog. Man brukar skapa en separat katalog för bilderna och då kan koden se ut så här:
<IMG src=”bildkatalog/bild.gif”>
En viktig sak som inte bör glömmas är versaler. En bild som heter Bild.gif är inte samma sak som en bild som heter bild.gif(gäller servrar med Unix/Linux operativsystem, vilket betyder majoriteten av alla webbhotell).
Det är inte allt förstås . Det finns en hel rad attribut du kan använda dig av för att åstadkomma olika saker med dina bilder.
ALT-attribut: möjliggör textvisning för angivna bilden. Du har säkert märkt att på vissa webbsidor får man upp en beskrivning då man pekar på en bild (utan att klicka).
Det är viktigt eftersom en del användare stänger av visning av bilder i sin webbläsare. I det fallet visas texten du angivit i ALT-attributet.
Exempel:
<IMG src=”bild.gif” ALT=”beskrivande namn på bilden”>
ALIGN-attribut: definierar bildens position i närliggande textområdet. Attributet kan anta följande värden:
left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom.
Där var det en del . Det är bara att prova sig fram:
<P><IMG ALIGN=”left” src=”bild.gif”> Den här texten visas på höger sida av bilden, längs hela bildens höjd. Det fina med det är att texten inte placeras under bilden vilket skulle hända om vi inte använt ALIGGN-attributet</P>.
Den här texten visas på höger sida av bilden, längs hela bildens höjd. Det fina med det är att texten inte placeras under bilden vilket skulle hända om vi inte använt ALIGGN-attributet.
Snyggt eller hur?:)
BORDER-attribut: anger tjockleken på ramen runt bilden. Rätt så ofta vill man inte ha någon ram alls. Men ibland är det till en fördel att ha det. Värdet som anges här är utryckt i pixel (1,2,3, …).
<IMG src=”bild.gif” BORDER=”3” ALT=”beskrivande namn på bilden”>
WIDTH- och HEIGHT-attribut: definierar bildens bredd och höjd. Ofta utesluter man detta helt och då visas bilden som den är.
]]>Den enklaste varianten kan se ut så här:
<A HREF=”http://google.se”>Nyfiken</A>
Enkelt eller hur :)
Jag länkar ”Nyfiken” till en plats på Internet genom att använda mig av <A>-märket och dess attribut: HREF.
Du har säkert sätt hyperlänkar mitt i en mening. Det gör man så här:
<P> Besök min <A HREF=”http://svensk-server.info”> hemsida</A></P>
Vidare går det utmärkt att göra en hyperlänk av en bild. Det är mycket populärt då man gör menyer på sin webbsida. En enkel bildlänk kan se ut så här:
<A HREF=”http://svensk-server.info”> IMG SRC=bild.gif” BORDER=”0”></A>
Lägg märke till att allt som kommer mellan märken <A></A> kommer att utgöra din hyperlänk. I sista fallet var det en bild som heter ”bild.gif”.
IMG-märket är verktyg för infogande av bilder på en webbsida. SRC-attribut är till för att lokalisera fysiska platsen på bilden.
BORDER-attribut är tjocklek för ramen runt bilden (det här fallet finns det ingen ram eftersom vi tilldelar en nolla).
TIPS:
Exempel använda hittills kommer att öppna en ny webbsida i en och samma webbläsarfönster där sidan med länken finns. Ibland vill man att den länkade sidan ska öppnas i ett nytt fönster. Detta åstadkommer man med ett attribut som talar om för webbläsare hur den ska uppträda med just denna länk.
HTML-koden för en hyperlänk som öppnar ett nytt fönster:
<A HREF=”http://svensk-server.info” TARGET=”_blank” >Nyfiken</A>
Hittills visade jag enbart hur man länkar till webbsidor med deras Internet adresser. Man kan länka även med genvägar till specifika filer (ifall de ligger på samma server). Så här kan det se ut:
<A HREF=”hemsida.html”>Nyfiken</A>
För att koden ovan ska fungera korrekt måste båda webbsidor ligga i samma katalog. Ifall de ligger i olika kataloger måste man ange även katalog namn:
<A HREF=”katalog/hemsida.html”>Nyfiken</A>
eller
<A HREF=”../katalog/hemsida.html”>Nyfiken</A>
Ser du skillnaden?
För att kunna länka rätt måste du ha grundläggande kunskap om arkivering av filer på hårddisken. Filer och kataloger har en hierarkisk fördelning på disken och innan du länkar filerna måste du veta deras hierarkiska relation.
Första varianten är korrekt när filen vi länkar till finns i underkatalogen direkt i hierarkin i relation till filen man länkar ifrån. Därför kallas det för relativlänkning.
Andra varianten fungerar åt motsatt håll, dvs. när man länkar från en underkatalog, från botten uppåt i hierarkistrukturen.
Denna variant kallas för absolutlänkning.
Prova dig fram tills du förstår hur det fungerar i praktiken. Du kan alltid använda dig av Internet-adresser istället för den här metoden.
]]>Med listorna underlättar man för läsaren. Glöm aldrig att du vill ha nöjda besökare. En lista i texten bygger upp strukturen i delar av din text så att läsaren kan koncentrera sig på det viktiga du har att meddela.
Nummerlista: bygger man med märket <OL>. OL står för ”ordered list” vilket betyder att det man räknar upp kommer i en ordning (numerisk).
Nummerlistan startar med <OL> och slutar med </OL>. Innehållet i varje rad i alla listor börjar med <LI> och slutar med </LI>.
EXEMPEL: Koden för en nummerlista:
<OL>
<LI> Nummer ett </LI>
<LI> Nummer två </LI>
<LI> Nummer tre </LI>
</OL>
Resultatet i dokumentet på skärmen blir:
Punktlista: bygger man med märket <UL>. UL står för ”unordered list” vilket betyder att man inte har en numerisk ordning.
Punktlistan startar med <UL> och slutar med </UL>. Innehållet i rader startar på samma sätt som i en nummerlista med <LI> och slutar med </LI>.
EXEMPEL: Koden för en punklista.
<ul>
<li> Punkt 1 </li>
<li> Punkt 2 </li>
<li> Punkt 3 </li>
</ul>
Resultatet i dokumentet på skärmen blir:
Man kan göra det lite svårt för sig och ha listor infogade i listor men det hoppar vi över nu eftersom den här boken ska ge grundläggande kunskaper om HTML. Det är inte nödvändigt att kunna allt i början :)
]]>