3Основе HTML

Тагови за форматирање текста у HTML

Основни начин предаје информација на већини сајтова је текст. То значи, да можете направити свој сајт ако умете, као минимум - да читате, а као максимум - да пишете (у свакој шали има мало шале).

Прост, необликован текст, може се додати у html страницу просто сместивши га између тагова <BODY> и </BODY>.

Али, ми често желимо нешто да нагласимо, желимо нешто да издвојимо и за то морамо да применимо обликовање текста.

Ви сте лепо написали свој текст у текстуалном уређивачу, подебљали сте делове, неке делове обојили, .... преносите то на html страницу, кад оно, тамо ништа од тога нема, и сав текст је исти, а ви сте се толико трудили!

Кажу да се претходно припремљен текст може пренети у html у изворном облику и то се ради помоћу тагова <pre> и </pre>. Морам да признам да још никад нисам пробала, па пробајте ви.

Најпопуларнији тагови за форматирање текста су:

<B></B> - подебљати - болдовати, а често се уместо њега користи: <strong></strong>

<I></I> - искошен (италик, курзив), а често уместо њега: <em></em>

<U></U> - подвучени текст

<STRIKE></STRIKE> - текст је ~~прецртан~~

<SUB></SUB> - доњи индекс, нпр. код хемијскох формула: H₂O

<SUP></SUP> - горњи индекс: (a+b)²

Сви ти тагови се могу користити појединачно, или њих неколико заједно. То се постиже путем стављања тагова један у други. Нпр.:

<strong>H<sub>2</sub>O</strong>- то је<strong><em>формула воде.</em></strong>

При посматрању у прегледачу, то ће изгледати овако:

H₂O – то је формула воде.

Разместити блокове текста (пасусе) на html-страници, могуће је помоћу тага <P>. Тај таг поставља текст у нови ред и прави размак. Нпр.:

<p>Ово је први пасос.</p> <p>Ово је други пасос.</p>

то ће изгледати овако:

Ово је први пасус.

Ово је други пасус.

Као што се види, не мора се користити затварајући таг </p> јер прегледач (браузер) сматра, да почетак следећег реда, представља завршетак претходног. Сигурно сте се већ досетили да за добијање неколико празних редова, треба неколико пута узастопно да напишете таг <p>. Тај таг има необавезни атрибут align с могућим значењима: center, left, right i justify, који равњају текст по жељи.

На пример, html-код

<p align="center">Поравнање по центру</p>

поравнава текст по центру:

Поравнање по центру

А овај код:

<p>По левом крају (стандардно)</p>

поравнава текст по левом крају:

По левом крају (стандардно)

Ако треба обезбедити прелазак у нови ред, без остављања празног реда (као кад у текстуалном уређивачу притиснете Enter), онда се користи таг <BR>. Нпр., html-код:

1.Први ред.<br>2.Други ред.

у прегледачу ће изгледати овако:

1.Први ред.

2.Други ред.

Таг BR нема затварајући таг.

Визуелно се делови текста могу разделити још помоћу тага <HR>. Тај таг ствара на страници деобну површину. Он има следеће атрибуте:

size – дебљина површине;

width – ширина површине;

align - поравнање;

color – боја површине;

noshade – атрибут који нема значење. Ако је наведен, онда се прави црна површина без сенке.

За стварање раздела и подраздела, корсте се тагови заглавља. Постоји шест ниова заглавља и овако се означавају:

<H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6>.

Заглавља су подебљана, а најкрупније је <H1></H1>. Тагови заглавља имају атрибуте:

align – поравнање на страници (то већ знате);

title – испливавајућа примедба, која се појављује кад станете мишем на заглавље.

На пример, код HTML:

<h6 align="center" title="Заглавље 6 нивоа.">Заглавље 6 нивоа.</h6>

у прегледачу ће изгледати овако:

Заглавље 6 нивоа.

За форматирање слова (фонтова), у HTML постоји таг <FONT></FONT>. Тај таг има следеће атрибуте:

color – боја фонта;

face – гарнитура фонта;

size – размер фонта. Може бити задат апсолутним (од 1 до 6) или односним значењем (од +1 до +6 и од -1 до -6). Стандардно, величина фонта је 3. Ако поставите <font size="+1"></font>, онда ће текст који се налази између тагова <font> и </font>, бити увећан за 1 у односу на остали текст. Аналогно је и са -1 (смањен за 1).

Направити списак у HTML, могуће је помоћу тагова <OL></OL> i <UL></UL>. У првом случају ствара се уређени (нумерисани) списак, у другом неуређени (маркирани). Сваки елеменат списка одваја се тагом <LI></LI>. Прегледач (браузер) приказује елементе списка с новим редом у виду стубаца са одступима и маркерима. Вид маркера одређује се атрибутом type. У нумерисаном (уређеном <OL>) списку маркери (значења атрибута type) су овакви:

1 – нумерација арапским цифрама (стандардно);

А – великим латиничним словима (алфабет);

а – малим латиничним словима;

I – великим римским цифрама;

i – малим римским цифрама.

Нпр., HTML-код

<ol type="a"><li>Први елемент.</li> <li>Други елемент.</li></ol>

прегледач ће показати овако:

Први елемент.
Други елемент.

У маркирном списку, значења атрибута су следећа:

disc – попуњени кружић (стандардно);

circle – непопуњени кружић;

square – попуњени квадратић.

Нпр., HTML-код

<ul type="square"><li>Форматирање</li> <li>текста</li> <li>у HTML.</li></ul>

у прегледачу (браузеру) изгледа овако:

Форматирање
текста
у HTML.

Вежбица: проучите HTML-код испод:

и пробајте да закључите шта значе наведени тагови и њихови атрибути, а такође, где је у горњем тексту искоришћен тај HTML-код.

Додатак:

Често се користи таг:

Он има више значења и може да обухвата доста других тагова. Нпр. уз њега се могу користити сва 4 значења атрибута align:

<div align="center"> текст </div>

<div align="left"> текст </div>

<div align="right"> текст </div>

<div align="justify"> текст </div>

Он може у себи да садржи параграфе: уз помоћ њега, можемо, рецимо, пасусе да групишемо да се равнају по десном крају:

<div align="right"><p>текст првог пасуса</p><p>текст другог пасуса</p><p>текст трећег пасуса</p></div>

Blog Snelle

Странице

петак, 12. март 2010.