Svensk Server

augusti 15, 2007

Body-märke och introduktion till attribut

Sparat under: HTML grunder — admin @ 3:08 e m

Innan vi går börjar med nya märken vill jag betona vikten av Body-märket och dess betydelse för hemsidans utseende.

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.

Andra bloggar om: , ,

juli 26, 2007

Textformatering

Sparat under: HTML grunder — admin @ 10:20 f m

I vanliga ordbehandlingsprogram kan man formge texten med färger, teckensnitt och olika stilar. På liknande sätt gör man det även i hemsideprogram ( FrontPage o s v).

En viktig sak man ska tänka på vid val av teckensnitt är faktum att man är begränsad till några teckensnitt. Trots stort urval av teckensnitt du har bör man hålla sig till standard teckensnitt av en enkel anledning: inte alla användare har det teckensnitt du tänkt dig.
Resultatet blir det att din webbsida inte visas som du tänkt dig för dina besökare.

Håll dig till:
Times New Roman, Verdana, Arial, Tahoma och Helvetica.

Andra bloggar om: , ,

juni 12, 2007

Rubriker

Sparat under: HTML grunder — admin @ 7:39 e m

Ofta brukar man dela in texten på en webbsida. Exempelvis har man en titel, en sammanfattning i början och brödtext i resten av webbsidan.

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:
left, center, right, justify

<h1 align=”center”>

Exempelvis:
<H1 align=”center”> Störst text </H1>

kommer att justera texten på mitten av din webbsida.

Andra bloggar om: , ,

maj 11, 2007

Stycken, Radbrytning, Fet- och kursivstil

Sparat under: HTML grunder — admin @ 8:44 f m

Stycken
En webbläsare (Internet Explorer exempelvis) kommer att visa texten på skärmen efter fönstrets bredd. Ändrar du fönsterstorleken kommer texten att visas lite annorlunda p.g.a. raderna bryts på olika ställen beroende på fönstrets bredd.

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>

Andra bloggar om: , ,

maj 4, 2007

Teckensnitt, teckenstorlek och färg

Sparat under: HTML grunder — admin @ 3:40 e m

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:

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
sju

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

« Newer PostsOlder Posts »

Drivs av Wordpress