Teckensnitt, teckenstorlek och färg

Man kan liva upp sin webbsida genom att betona vissa ord med annan färg eller genom att ändra teckensnittet och teckenstorlek på vissa meningar.

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:

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.

Andra bloggar om: it, html, server

Written by admin on maj 4th, 2007 with no comments.
Read more articles on HTML grunder.

Bilder

Innan man sätter igång och börjar infoga bilder på sin hemsida bör man tänka på en viktig sak. Många bilder är privatägda och förbjudna att använda utan ägarens tillåtelse. Om du hittar en fin bild på Nätet och vill gärna ha den på din hemsida, skicka e-post till ägaren och fråga om han tillåter dig använda den eller inte.

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.

Andra bloggar om: IT, html, bild

Written by admin on april 26th, 2007 with no comments.
Read more articles on HTML grunder.

HTML-märke för bilder

Nu till det praktiska: infoga bilder på din webbsida.
HTML-märket för bilderna är <IMG> och det har inget slutmärke (</IMG>).

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.

Andra bloggar om: html, design, webb

Written by admin on april 17th, 2007 with no comments.
Read more articles on HTML grunder.

Länkar

Jag ska inte förklara för dig vad hyperlänkar är för något. Istället går vi direkt in på hur man gör en hyperlänk.

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.

Andra bloggar om: html, hemsida, webb

Written by admin on mars 31st, 2007 with no comments.
Read more articles on HTML grunder.

Grunden i listor

Den här delen hör egentligen till textformateringen. Listor använder man för att snygga till texten där man uppräknar något.

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:

1. Nummer ett
2. Nummer två
3. Nummer tre

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:

• Punkt 1
• Punkt 2
• Punkt 3

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

Andra bloggar om: html, design, text

Written by admin on mars 27th, 2007 with no comments.
Read more articles on HTML grunder.

« Older articles

Newer articles »