Avtor: -primož- 02.08.09

Naj bo vaše besedilo lepo oblikovano

HTML - Oblikovanje besedila

Ker bodo obiskovalci prišli na vašo spletno stran predvsem zaradi pisane vsebine v obliki besedila je pomembno, da je to besedilo primerno urejeno in oblikovano. Pri oblikovanju besedila se držite načela lepo in pregledno. Lepo pomeni ne kičasto, kar pomeni, da uporabljajte največ dve različni pisavi. Pregledno pomeni ne stisnjenjo, kar pomeni, da delajte odstavke in spuščajte vrstice med njimi. V tem vodiču vam bom pokazal, kako besedilo vstavite v HTML kodo, kako mu določite barvo, pisavo, velikost in še druge stvari.

Oblikovanje besedila po poglavjih:

- Vstavljanje besedila

- Velikost besedila

- Barva besedila

- Pisave

- Slog besedila

- Vsi atributi skupaj

Priporočam:

- Šestnajstiški zapis barv

- Osnovne pisave

- Strong poudarjeno besedilo

- Vsi atributi skupaj

1. Vstavljanje besedila

Vse besedilo, ki želimo, da je na spletni strani prikazano moramo zapisati med oznaki <body> in </body> .

HTML Primer 1:

<html>

<head>

</head>

<body>

To je besedilo, ki se bo prikazalo na spletni strani.

</body>

</html>

Prikaz besedila na spletni strani

Sedaj morate to besedilo tudi urediti, to je določiti, kakšne velikosti bo, ali bo poudarjeno, kakšne barve bo, … Vse te stvari besedilu določite s pomočjo oznake , ki jo zaprete s . Ta oznaka pove brskalnikom, da naj prikaže besedilo, kakor vi želite. In sicer v to oznako morate dodati atribute , s katerimi poveste kako naj besedilo izgleda.

2. Velikost besedila

Za spreminjanje velikosti besedila oznaki dodamo atribut size=" " (ang. size - velikost). Velikost pisave definirate s slikovnimi pikami oz. piksli ( px ).

HTML primer 2:

<html>

<head>

</head>

<body>

To je besedilo velikosti 3 px (piksle).

To je besedilo velikosti 12 px.

To je besedilo velikosti 1 px.

To je besedilo velikosti 5 px.

</body>

</html>

Prikaz uporabe atributa size=" "

3. Barva besedila

Barvo besedila določimo s pomočjo atributa color=" ". Barvo poimenujemo z angleško besedo ali pa vpišemo njeno šest-mestno šestnajstiško kodo. Koda barve se začne s simbolom za število ( # ).

osnovne barve:

Slovensko ime	angleško ime	koda
bela	white	#FFFFFF
črna	black	#000000
siva	gray	#CFCFCF
rumena	yellow	#FFF000
zelena	green	#00FF00
modra	blue	#0000FF
rdeča	red	#FF0000
oranžna	orange	#FFCC00

HTML primer 3:

<html>

<head>

</head>

<body>

To besedilo je črne barve.

To besedilo je črne barve.

To besedilo je zelene barve.

To besedilo je zelene barve.

To besedilo je rdeče barve.

To besedilo je modre barve.

</body>

</html>

Prikaz uporabe različnih barv

4. Pisave

Besedilu lahko določite tudi pisavo, s katero naj bo prikazano. To lahko naredite tako, da v oznako dodate atribut face=" ". Med narekovaje morate napisati točno ime pisave. Priporočeno je, da uporabljate osnovne pisave.

osnovne pisave:

Times New Roman

Arial

Comic Sans MS

Courier New

Tahoma

Trebuchet MS

Verdana

HTML primer 4:

<html>

<head>

</head>

<body>

To besedilo je zapisano s pisavo Arial.

To besedilo je zapisano s pisavo Comic Sans Ms.

To besedilo je zapisano s pisavo Verdana.

</body>

</html>

Prikaz uporabe različnih pisav

5. Slog besedila

Besedilo lahko tudi poudarite in to na različne načine. Lahko je krepko (bold),ležeče (italic) ali pa podčrtano (underline). Da lahko to naredite morate uporabiti posebne oznake. To niso atributi in jih ne dodajamo v oznako . Oznake so  ,   in  .

*Priporočam vam, da namesto oznake uporabljate  . Na koncu bodo poudarjene besede izgledale isto, a s strong poudarjene besede bodo imele pri googlu več veljave, kot tiste z .

HTML primer 5:

<html>

<head>

</head>

<body>

To besedilo je krepko.

To besedilo je ležeče.

To besedilo je podčrtano.

</body>

</html>

Prikaz poudarjenih besedil

6. Zaključek - vsi atributi skupaj:

Atribute lahko uporabljate tudi skupaj.

HTML primer 6:

<html>

<head>

</head>

<body>

To besedilo je zapisano s pisavo Tahoma, je modre barve in velikosti 6 px. Pomembne besede so krepke, ležeče ali pa podčrtane.

</body>

</html>

Prikaz zgornjega primera

Upam, da vam je vodič prav prišel in, da vam sedaj pisava, barva in velikost besedila ne delata več preglavic.

[ Na vrh ]

Komentiraj:

Sorodni vodiči
Mailto povezava Položaj spletne strani znotraj iframea Flash v HTML HTML - Osnove Javascript ure za spletno stran	Barve in odtenki - seznam imen in kod Slovenski lightbox efekt Šumniki na spletnih straneh YouTube video na spletni strani Absolutno in relativno naslavljanje