Трчећи текст

Веб странице не морају бити статичне.  Текст може да "трчи" преко странице. То се постиже уз помоћ следећих тагова:

<blink> или <marquee>

Овај елемат има своје атрибуте који га одређују:

BEHAVIOR
BGCOLOR
DIRECTION
HEIGHT
HSPACE
LOOP
SCROLLAMOUNT
SCROLLDELAY
VSPACE
WIDTH

Шта сад значе ови атрибути?

BEHAVIOR

Одређује понашање вашег текста.

Може бити  SCROLL – почиње са једне стране иде преко одређеног дијела странице и завршава на другом крају. Чим је завршио на другом крају почиње поново испочетка.
SLIDE – почиње са једне стране, иде преко одређеног дијела странице и засутавља се чим дотакне другу страну

BGCOLOR

Одређује боју позадине marquee-ja. Треба се изразити хексадецимално.

DIRECTION

Одређује смер клизања marquee-ja. Може бити
LEFT – са лева на десно
RIGHT – са десна на лево
UP – одоздо према горе
DOWN – одозго према доле

HEIGHT

Одређује висину marquee-ja. Може се изразити у пикселима или у постотцима.

HSPACE

Одређује ширину лијеве и десне маргине изван marquee-ja у пикселима.

LOOP

Одређује колико ће marquee-ja бити у функцији. Ако је одређено LOOP=1 онда ће марqуее само једном проћи; ако је одређено INFINITE онда ће марqуее радити непрекидно.

SCROLLAMOUNT

Одређује брзину трчећег текста.

SCROLLDELAY

Одређује број милисекунди паузе после сваког „протрчавања“.

VSPACE

Одређује висину горње и доње маргине изван marquee-ja.

WIDTH

Одређује ширину marquee-ja у пикселима или постотцима.

<MARQUEE> ИНФОРМАТИКА И
РАЧУНАРСТВО </MARQUEE>

или

<marquee direction=“right“>HTML
programiranje</marquee>

или

<marquee direction=“Left“ scrollamount=“4″
width=“180″ style=“font-size: 12pt;
color: red; font-family:bold“ height=“20″
bgcolor=“yellow“>ИНФОРМАТИКА И
РАЧУНАРСТВО</marquee>

Advertisements

Креирање табела

Табела је и у HTML-у дводимензиона матрица чији се елементи називају ћелије (енгл. cell). Представљају веома згодну алатку за представљање података на wеб страници. Поред класичног начина употребе табела, у HTML-у се табеле користе и да би се лакше контролисао размештај текста и слика на вашој страници.  Смештање елемената  странице у ћелије табеле представља класичан „трик“ wеб дизајнера.  Ћелија може да садржи разноврсне информације: бројеве, текст, боје, листе, хипер-везе, слике, итд.

Изглед и елементе табеле можемо прецизно одредити помоћу атрибута:

  •  задавање величине ивице табеле – BORDER (број)
  • задавање боје ивице табеле – BORDERCOLOR (број)
  • положај табеле унутар прозора (поравнање) – ALIGN (left, right, center)
  • задавање ширине табеле – WIDTH (број пиксела или процената у односу на прозор)
  • подешавање боје позадине табеле – BGCOLOR (боја)
  • подешавање простора између зида ћелије и садржаја – CELLPADDING (број)
  • растојање између ћелија – CELLSPACING (број)

Основни таг који означава почетак и крај табеле је:

<TABLE> овде дође садржај табеле </TABLE>

Садржај табеле се ставља унутар тага којим се дефинише једна ћелија табеле:

<TD> садржај ћелије </TD>

Таг који је веома сличан претходном, а служи за дефинисање насловних ћелија табеле је:

<TH> садржај ћелије </TH>

Табела не мора да садржи <th> таг, али мора да садржи бар један <td> таг, у који ће те ставити садржај ваше табеле. Редови табеле се дефинишу помоћу тага:

<TR> <TD> садржај ћелије </TD> <TD> садржај ћелије </TD> …  </TR>

а као што се види унутар њега се умећу <td> ili <th> тагови који дефинишу ћелије табеле са одговарајућим садржајем.

Табела са једним редом и једном колоном:

<TABLE BORDER=“1″ >

<TR>

<TD>100</TD>

</TR>

</TABLE>

Ево како изгледа:
tabela u html-u 4

Табела са једним редом и три колоне:

<TABLE BORDER=“1″ >

<TR>

<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>

</TABLE>

Ево како изгледа:

tabela u html-u 5

Табеле са два реда и три колоне:

<TABLE BORDER=“1″ >

<TR>

<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>

<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>

</TABLE>

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

tabela u html-u 6

Додавање боја:

<TABLE BORDER=“1″ >

<TR>

<TD BGCOLOR=“#b0e0e6″ >100</TD>
<TD BGCOLOR=“#9acd32″ >200</TD>
<TD BGCOLOR=“#ffff00″ >300</TD>
</TR>
<TR>

<TD BGCOLOR=“#b0e0e6″ >400</TD>
<TD BGCOLOR=“#9acd32″>500</TD>
<TD BGCOLOR=“#ffff00″>600</TD>
</TR>

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

dodavanje boja u tabelu

</TABLE>

Оквири за табеле:

<TABLE BORDER=“8″ >

<TR>

<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>

<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>

</TABLE>

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

tabela u html-u 7

Табела без оквира:

<TABLE >

<TR>

<TD>100</TD>
<TD>200</TD>
<TD>300</TD>
</TR>
<TR>

<TD>400</TD>
<TD>500</TD>
<TD>600</TD>
</TR>
</TABLE>

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

tabela bez okvira

Заглавље табеле:

Пример:

<TABLE BORDER=“2″>

<TR>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Име:</FONT></TH>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Презиме :</FONT></TH>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Разред :</FONT></TH>

</TR>

<TR>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марко</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марковић</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>осми</FONT></TD>

</TR>

</TABLE>

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

tabela u html-u

Основна разлика између текста који се налази унутар <th> i <td> тагова је у томе што је текст у првом случају подебљан  и центриран унутар ћелије, а у другом случају текст није подебљан и поравнат је уз леву ивицу ћелије. Ивица табеле се приљубљује уз садржај ћелија максимално колико је могуће. Ширина колона је одређена првом ћелијом у свакој колони.

Табела уопште не мора да буде униформно форматирана, тј. да се свакој ћелији може доделити неко друго својство помоћу атрибута који се умећу у њен <td> таг. Да бисмо табели доделили одговарајуће димензије користићемо атрибуте height i width. Вредност ових атрибута се као и код <img> тага може задати или у пикселима или у процентима величине прозора HTML browser-a. Овај други начин дефинисања је препоручљив јер онда не морате да размишљате о резолуцији екрана.

Празна ћелија у табели:

<TABLE BORDER=“2″>

<TR>

<TH><FONT FACE=“Verdana“
SIZE=“2″>Име:</FONT></TH>

<TH><FONT FACE=“Verdana“
SIZE=“2″>Презиме :</FONT></TH>

<TH><FONT FACE=“Verdana“
SIZE=“2″>Разред :</FONT></TH>

</TR>

<TR>

<TD><FONT FACE=“Verdana“
SIZE=“2″>Марко</FONT></TD>

<TD><FONT FACE=“Verdana“
SIZE=“2″>Марковић</FONT></TD>

<TD>&nbsp;</TD>

</TR>

</TABLE>

prazna ćelija u tabeli

Следећи пример представаља табелу са ширином од 70% и висином од 30%:

Пример:

<TABLE BORDER=“2″ HEIGHT=“30%“ WIDTH=“70%“>

<TR>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Име :</FONT></TH>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Презиме :</FONT></TH>

<TH><FONT FACE=“Verdana“ SIZE=“2″>Разред :</FONT></TH>

</TR>

<TR>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марко</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марковић</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>осми</FONT></TD>

</TR>

</TABLE>

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

tabela u html-u 2

Ако желите да ваше колоне буду једнаке ширине требало би да у одговарајуће <th> или <td> тагове убаците атрибуте width са жељеном шириниом. У случају насе табеле то значи да треба у сваки <th> таг ставити атрибут width са вредношћу 33%. Тако, на пример, можемо направити табелу која ће се протезати преко целе ширине странице, а свака колона ће заузимати тачно трећину ширине табеле:

<TABLE BORDER=“2″ WIDTH=“100%“>

<TR>

<TH WIDTH=“33%“><FONT FACE=“Verdana“ SIZE=“2″>Име :</FONT></TH>

<TH WIDTH=“33%“><FONT FACE=“Verdana“ SIZE=“2″>Презиме :</FONT></TH>

<TH WIDTH=“33%“><FONT FACE=“Verdana“ SIZE=“2″>Разред :</FONT></TH>

</TR>

<TR>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марко</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>Марковић</FONT></TD>

<TD><FONT FACE=“Verdana“ SIZE=“2″>осми</FONT></TD>

</TR>

</TABLE>

tabela u html-u 3

Проширивње ћелија на више редова или колона:

<TABLE BORDER=“1″>

<TR>

<TH>Име</TH>
<TH COLSPAN=“2″>Телефон</TH>
</TR>

<TR>

<TD>Марко Марковић</TD>

<TD>218 89 21</TD>
<TD>218 88 22</TD>

</TR>

</TABLE>

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

tabela u html-u 8

или:

<TABLE BORDER=“1″>

<TR>

<TH>Име:</TH>

<TD>Марко Марковић</TD>
</TR>
<TR>
<TH ROWSPAN=“2″>Телефон:</TH>
<TH>218 85 21</TH>
</TR>
<TR>
<TH>218 86 22</TH>

</TR>

</TABLE>

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

tabela u html-u 9

Задатак за вежбу:

урадити распоред часова као табелу

<TABLE BORDER=”2″ WIDTH=”100%” >
<TR>
<TH ROWSPAN=”2″ COLSPAN=”2″></TH>

<TH COLSPAN=”5″ BGCOLOR=”#ffff00″> ДАНИ
У НЕДЕЉИ</TH>
</TR>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>Часови</TH>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>понедељак</TH>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>уторак</TH>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>среда</TH>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>четвртак</TH>
<TH WIDTH=”20%”
BGCOLOR=”#9acd32″>петак</TH>
</TR>

<TH>1.</TH>
<TD>историја</TD>
<TD>хемија</TD>
<TD>српски ј.</TD>
<TD>физичко</TD>
<TD>музичко</TD>
</TR>
<TR>
<TH>2.</TH>
<TD>математика</TD>
<TD>српски ј.</TD>
<TD>ликовно</TD>
<TD>физика</TD>
<TD>биологија</TD>
</TR>
<TR>
<TH>3.</TH>
<TD>физичко</TD>
<TD>математика</TD>
<TD>географија</TD>
<TD>енглески</TD>
<TD>српски</TD>
</TR>
<TR>
<TH>4.</TH>
<TD>техничко</TD>
<TD>математика</TD>
<TD>информатика</TD>
<TD>географија</TD>
<TD>француски</TD>
</TR>
<TR>
<TH>5.</TH>
<TD>техничко</TD>
<TD>српски</TD>
<TD>физичко</TD>
<TD>физика</TD>
<TD>грађанско в.</TD>
</TR>
</TABLE>

raspored

HTML везе

Веза или линк представља адресу-изворно место документа на вебу.  Линкови су обично подвучени  у документима да се истакне њихова појава. Када корисник кликне на неки линк аутоматски се отвара нови прозор са приказом документа на који линк указује.  Кликом на одређени линк се не напушта основна страница.

Атрибут href

Атрибут href дефинише везу „address“.

Линковање на други документ  постиже се на следећи начин:

<a href=“http://ucimotehnicko.wordpress.com „>Техничко и информатичко образовање </a>

Текст који се налази између <a> и </a> тагова („Техничко и информатичко образовање „) је текст на који корисник треба да кликне како се отворила нова URL адреса http://ucimotehnicko.wordpress.com/

На нашој страници то ће изгледати овако:

hiperlink 2

Оно што нам је потребно да документ повежемо са неким другим документом јесте УРЛ адреса тог другог документа.

Значење појединих елемената:

<a                                                                                                              означава почетак линка

href                                                                                                           означава „hypertext reference“

http://ucimotehnicko.wordpress.com/                                  ово је URL документа на који се  повезујемо

Техничко и информатичко образовање                             текст који се појављује и на који можемо кликнути

/a>                                                                                                            крај линка

Атрибут  name

При коришћењу атрибута  name, таг <a >  одређује име за које се везује ленгер    (anchor – сидро) унутар HTML документа.

Ако хоћете да се  линкујете на неки посебан део вашег документа, потребно је дефинисати  место за линковање (anchor ), а затим да направите линк до тог места. На пример, ако желите да се са врха вашег документа преместите на задњу реченицу  вашег документа, ви ћете тој вашој задњој реченици  дати неко име, на пример „važno“ и креирати линк на то име.

То се може  урадити на следећи начин:

На почетку задње реченице дефинишемо везу (anchor, сидро):

<a name=“label“>Neki sadržaj</a>

А онда на врх нашег документа посатвимо линк

<a href=“#label“>Određeni sadržaj</a>

Знак # који се појављује у линку заправо показује претраживачу да треба да оствари везу унутар истог документа, а не да иде на другу URL адресу (као код повезивања са другим документима).

<a name=“tips“>Korisni saveti</a>

<a href=“#tips“>idi na odeljak korisni saveti</a>

Рад на слици

Многи докумети на интернету садрже слике. То је због тога што сe сликама могу пренети многе информације јер пословица каже „једна слика вреди 1000 речи“. Најчешће се користе слике у .gif i .jpeg формату, али су могући и други формати.

Постоји много слика  на интернету слободних за коришћење – „public domain“. Могу се преузети, конвертовати у .gif формат (ако су у неком другом формату). Могу се користити само слике које сте сами направили, или оне за чије коришћење имате дозволу.

Стављање слике у документ

Слике које се појављују у вашим документима морају имати комплетну URL адресу (или адресу фолдера где се налазе). За приказ слике користе се следећи тагови:

<img src=“path or URL of image file“>

На пример, <img src=“http://ucimotehnicko.files.wordpress.com/2013/10/dscn7025.jpg?w=600. jpg“>

Овде „img src“ означава извор слике са URL адресом где се слика налази.

Ако се слика налази у истом фолдеру где се налази и одговарајући HTML документ, тада није потребно задавати целу URL адресу, већ само назив фајла који садржи слику.

На пример,  ако имате слику „osdjurajaksic.jpg“  у истом фолдеру са HTML документом,  довољно је да напишете:

 <img src=“ osdjurajaksic.jpg „>

slika

Атрибути за img таг

По дифолту слике су поравнате са текстом на доњу ивицу. Положај слике у односу на текст странице се може дефинисати убацивањем align атрибута u <img> таг. Вредности овог атрибута и одговарајуће ефекте можемо видети из следећег примера :

right – поставља слику уз десну маргину:

<img src=“ osdjurajaksic.jpg“ align=right><h3>Osnovna škola  „Đura Jakšić“, Kanarevo brdo 2, Beograd</h3>

djura

left – поставља слику уз леву маргину:

<img src=“ osdjurajaksic.jpg“ align= left ><h3>Osnovna škola  „Đura Jakšić“, Kanarevo brdo 2, Beograd</h3>

slika levo

Величина слике

Величину слике можемо дефинисати помоћу два атрибута: width и height.

Вредност ширине и висине странице се може задати или у пиксекима или у процентима.
Горње слика има следеће вредности атрибута: width=“150″ и height=“150″.
Ако желимо да слика из претходних примера буде пропорционално два пута већа  написаћемо:

<img src=“osdjurajaksic.jpg“ width=“300″ height=“300″>

<img src=“osdjurajaksic.jpg“ width=“600″ height=“600″>

velicina slike

Ако задамо само height или само width атрибут, друга димензија ће бити увећана пропорционално са заданом тако да се слика неће деформисати.

Остављање празнина око слике

Ви можете повећавати празнину око слике помоћу хоризнонталних и вертикалних маргина,  које задајете у пиксeлима.

На пример, додавањем атрибута  hspace = 70 биће додато50 пиксела левој и десној маргини слике. Atribut vspace = додаје маргине  на врх и на дно слике .

Пример:

<img src=“osdjurajaksic.jpg“ align= left hspace=70><h3>Osnovna škola  „Đura Jakšić“, Kanarevo brdo 2, Beograd</h3>

dodavanje razmaka

top – поравнава слику са врхом слова у текућој линији (следећа линија текста почиње испод слике):

Одговарајући таг гласи:

<p><h2>Osnovna škola „Đura Jakšić“, Kanarevo brdo 2<img src=“ osdjurajaksic.jpg“ align=“top“ width=“68″ height=“68″/>
Beograd</h2></p>

bottom – поравнава слику са доњом ивицом слова (default):

Одговарајући таг гласи:

<p><h2>Osnovna škola „Đura Jakšić“, Kanarevo brdo 2<img src=“ osdjurajaksic.jpg“ align=“bottom“ width=“68″ height=“68″/>
Beograd</h2></p>

middle – поставља слику тако је доња ивица слова на средини слике (следећа линија текста почиње испод слике):

Одговарајући таг гласи:

<p> <h2>Osnovna škola „Đura Jakšić“<img src=“ osdjurajaksic.jpg“ align=“middle“width=“68″ height=“68″/> Kanarevo brdo 2,
Beograd</h2></p>

poravnavanje slike

Слика се може уоквирити са следећим тагом:

<img border=“9″ src=“osdjurajaksic.jpg“>

border

Постоји још један користан атрибут <img> тага. То је alt атрибут. Атрибут alt се примењује да би се дефинисао алтернативни текст за слику, тј. тај атрибут говори посматрачу веб стране име слике која недостаје на сајту, због тога што читач није могао да учита слику. Уместо слике појавиће се име слике поред оквира у којем се налази црвено слово x. Ово је корисно нарочито ако сте слику поставили као линк, јер ће онда и у случају неучитавања слике посетилац знати где води тај линк. Употребићемо увек овај атрибут и да у њега уписујемо текст који укратко описује дану слику.

На пример:

<img src=“moja slika.jpg“ alt=“Slika„>

Слика није пронађена. Када мишем станемо на слику појави се опис слике.

Вежба:

Напишите HTML документ у коме ће се налазити сликe наше школе која имаjу  Интернет адресу:

http://ucimotehnicko.files.wordpress.com/2013/10/osnovna-c5a1kola-c491ura-jakc5a1ic487-2.jpg?w=600

http://ucimotehnicko.files.wordpress.com/2013/10/osnovna-c5a1kola-c491ura-jakc5a1ic487.jpg?w=600

http://ucimotehnicko.files.wordpress.com/2013/10/dscn63271.jpg?w=600

http://ucimotehnicko.files.wordpress.com/2013/10/dscn63192.jpg?w=600

http://ucimotehnicko.files.wordpress.com/2013/10/osnovna-c5a1kola-c491ura-jakc5a1ic487-3.jpg?w=600

Пронађите податкe о школи и напишите испод слике. Сликe треба да има димензију 120×80.

Поставите сликe да буду :

  1. На поčетку текста
  2.  На средини текста
  3. На крају текста

 

Рад на тексту

Врло важна ствар код израде www странице је и одабир фонта сa којим ћемо радити. Не треба бирати неке егзотичне фонтове, јер их старији претраживачи неће моћи очитати зато је најбоље да примените неке стандардне као што су Times New Roman, Arial i Verdana.

У сваком HTML документу  треба поставити наслов. Постоји 6 величина наслова, од  <h1> до <h6>:

<h1>HTML-основе</h1>

HTML-основе

<h2>HTML-основе</h2>

HTML-основе

<h3>HTML-основе</h3>

HTML-основе

<h4>HTML-основе</h4>

HTML-основе

<h5>HTML-основе</h5>

HTML-основе

<h6>HTML-основе</h6>

HTML-основе

Без обзира  у колико је редова  у изворном HTML документу ( у Notepade) написано редова, они се увек налазе у једном реду.  Приликом израде HTML документа треба знати да се текст у више редова пише коришћењем  следећег тага:

<br> и  </br>.

Коришћењем  тага <pre> и </pre> постижемо чување  формата како је био написан са свим размацима и новим редовима

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

HTML користи одређене тагове за  форматирање изгледа текста:

<b> </b>

Подебљан текст

<strong>   </strong>

Истакнут текст

<i>     </i>

Искошен текст

<u>    </u>

Подвучен текст

<strike>    </strike>

Прецртан текст

<big>   </big>

Текст писан већим словима

<small>   </small>

Текст писан мањим словима

Ознаке <strong>   </strong> и <b> </b> имају исто дејство.

Пример коришћења тага <br> и  </br> :

<html>
<body>
<br><big>Текст писан већим словима </big>

<br><smoall>Текст писан мањим словима </small></br>
<br><b>Текст писан наглашеним словима </b></br>
<br><strong>Текст писан наглашеним словима </strong></br>
<br><i>Текст писан искошеним словима </i></br>
<br><strike> Текст писан прецртанима словима </strike></br>

</body>
</html>

Изглед у читачу:

Текст писан већим словима 
Текст писан мањим словима 

Текст писан наглашеним словима 

Текст писан наглашеним словима 

Текст писан искошеним словима 

Текст писан прецртаним словима 

Пример коришћења тага <pre> и  </pre> :

<html>
<body>
<pre><big>Текст писан већим словима </big>

<smoall>Текст писан мањим словима </small>
<b>Текст писан наглашеним словима </b>
<strong>Текст писан наглашеним словима </strong>
<i>Текст писан искошеним словима </i>
<strike> Текст писан прецртаним словима </strike></pre>

</body>
</html>

изглед у читачу:

Текст писан већим словима

Текст писан мањим словима 
Текст писан наглашеним словима 
Текст писан наглашеним словима 
Текст писан искошеним словима 
  Текст писан прецртаним словима  

Исписивање слова у индексу или експоненту

Слове се могу исписивати у индексу или експоненту.  Индекс се додаје помоћу тага <sub>, a експонент помоћу тага <sup>. Следећа табела приказује пример њихове примене:

H<sub>2</sub>O

H2O

3<sup>2</sup>=9

32=9

Уколико посебно не нагласимо којим фонтом желимо да буде исписан текст,  на нашој страници, претраживач ће користити обично Times New Roman. Таг којим можемо мењати фонт на HTML stranici je:

<font> ,  а он може имати три атрибута: face, size и color.
Атрибутом face дефинисан је тип фонта којим желимо да наш текст буде исписан. На једној страници можемо користити и више различитих фонтова, али водимо рачуна да не претерамо у „украшавању“. Водимо рачуна и да корисник који учитава нашу страницу мора имати инсталиран тај фонт на свом рачунару. У супротном његов претраживач ће приказати текст у фонту Times New Roman. Зато не треба  користити неке егзотичне фонтове, већ користимо само широко распрострањене фонтове.

Ако желимо да наша страница буде исписана рецимо „Arial“ фонтом, онда требамо  написати:

<font face=“Arial“> наш текст</font>

Ако користимо неке егзотичније фонтове онда би било добро да наведемо и неколико алтернативних фонтова, један за другим, одвојених зарезом. Ако посетилац наше странице на свом рачунару нема инсталиран први фонт са листе, он ће га приказати у следећем са листе, и тако даље. На пример:

<font face=“Verdana,Arial,Courier“>

Ево примера неколико популарних фонтова које можемо користити на својим страницама:

Times New Roman, Arial, Verdana, Courier, Comic Sans MS

Величина слова  се дефинише  преко size атрибута. HTML разликује 7 величина слова које носе вредности од 1 до 7. Подразумиевана величина је 3.  Ако су слова величине 3 сувише мала можемо задати величину фонта од рецимо 5, на следећи начин:

<font size=“5″>

Ево листе са величинама фонта од 1 до 7 па одаберимо величину која нам одговара:

величина 1,

величина 2,

величина 3,

 величина 4,

величина 5, …

Атрибутом color  можемо мењати боју текста. За овај атрибут важи исто правило као и код дефинисања боја <body> тагом. Дакле, ако желимо да у неком делу текста променимо боју фонта у тиркизну ставићемо:

<font color=“#00FFFF“> наш текст</font>

Текст је по обичају поравнат уз леву маргину. Ако желимо да наш наслов, или било који други текст буде центриран, требамо га ставити између тагова <center> и</center>:

<center>ОВО ЈЕ ЦЕНТРИРАН ТЕКСТ</center>

што ће дати следећи резултат:

ОВО ЈЕ ЦЕНТРИРАН ТЕКСТ

Тагови за поравнања  изгледају овако:

<p align=“left“>
<p align=“center“>
<p align=“right“>

Текст се у претраживачу аутоматски ломи на крају реда. То може бити незгодно ако желимо да неке фразе буду целе у једном реду. Ово се може постићи уметањем тог дела текста између тагова:

<nobr> наш текст</nobr>

Увлачење реда

У  HTML документу можемо увући ред за одређени број мјеста коришћењем следеће ознаке:

&nbsp;

Ова ознака оставља једно празно место. Ако желимо оставити више празних места једноставно ставите више  оваквих ознака једну за другом:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Уметање хоризонталних линија

www странице могу у свом тексту имати неколико одвојених целина које је добро и визуално одвојити, као што су различите опаске и коментари. Да би се то омогућило, HTML језик располаже с основном могућношћу додавања хоризонталних линија помоћу елемента hr (од енглеског horizontal rule).

Елемент hr је увек празан (не може имати садржај) те нема завршну ознаку. Приликом наиласка на њега претраживач ће приказати хоризонталну линију у новом ретку центрирано.

Елемент hr може имати атрибуте за одређивање начина приказивања линије. Основни атрибут јест width којим је могуће дефинисати дужину линије. Вредност атрибута може бити број (који представља дужину линије у тачкама) или постотак укупне расположиве ширине. Следећи пример црта линију чија ће дужина износити 70% укупне расположиве дужине екрана:

<hr width=“70%“>

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


Ваља приметити да је знатно боље мерне величине задавати помоћу постотака, а не помоћу вредности у тачкама. Наиме, различити корисници прегледават ће странице у претраживачима с прозорима разних ширина. Линије, и уопште сви остали графички објекти који имају апсолутне величине неће се моћи прилагодити различитим ширинама прозора, већ ће бити или премали или превелики. С друге стране, графички елементи с релативно заданим величинама помоћу постотака расположивог простора увиек ће се моћи прилагодити разним величинама прозора те ће у правилу боље изгледати.

Величине графичких елемената ваља наводити релативно, ако је то могуће, да би се постигли бољи резултати у случају прозора различитих величина.

Помоћу атрибута align могуће је одредити да ли ће се линија приказати лево (у случају вредности left), десно (у случају вриједности right) или центрирано (подразумијевана вриједност center). На пример:

<hr align=“right“ width=“50%“>

Na pretraživaču to će izgledati ovako:


Такође је могуће одредити дебљину линије, и то помоћу атрибута size. Вредност тог атрибута представља дебљина линије у тачкама (није могуће задати релативну ширину постотцима):

<hr align=“center“ width=“80%“ size=“10″>

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


Вежба:

Напиште песму Ђулићи, Јована Јовановића Змаја као HTML документ. Сваки ред нека буде написан другим фонтом и другом величином слова.

Бoја подлоге

Да би веб страница изгледала лепше у позадини се стављају боје. Треба водити рачуна да боја не буде прејака. На веб страницама се позадина и текст могу појавити у читавом спектру боја. Да би то постигли,  потребно је  додати још нека објашњења у оквиру нашег  <body>  тага. На пример, ако желимо  променити боју позадине у жуту тада ћемо унутар  <body>  тага додати:

<body bgcolor=“#ffff00″>
или:
<body bgcolor=“yellow“>

Боја позадине се одређује bgcolor атрибутом који је дeо  <body> тага. После сваког атрибута се ставља знак једнакости који служи за доделу вредности датом атрибуту,  а вредност атрибута се обaвезно ставља између знакова навода. Боје се  могу дефинирати на два начина: или преко назива боје (нпр.“yellow“), или преко хексадецималне РГБ вредности испред које обвезно треба ставити симбол # (нпр. #ffff00).

Код креирања Веб страница можемо се користити таблицом боја са њиховим називима и хексадецималним кодом. Боје су поредане по абецедном реду, а кад нам се нека боја допадне копирајмо њен код  на нашу Веб страницу.

  Боја   

Назив боје

Код боје
aliceblue F0 F8 FF
antiquewhite FA EB D7
aqua 00 FF FF
aquamarine 7F FF D4
azure F0 FF FF
beige F5 F5 DC
bisque FF E4 C4
black 00 00 00
blanchedalmond FF EB CD
blue 00 00 FF
blueviolet 8A 2B E2
brown A5 2A 2A
burlywood DE B8 87
cadetblue 5F 9E A0
charteuse 7F FF 00
chocolate D2 69 1E
coral FF 7F 50
cornflowerblue 64 95 ED
cornsilk FF F8 DC
crimson DC 14 3C
cyan 00 FF FF
darkblue 00 00 8B
darkcyan 00 8B 8B
darkgoldenrod B8 86 0B
darkgray A9 A9 A9
darkgreen 00 64 00
darkkhaki BD B7 6B
darkmagenta 8B 00 8B
darkolivegreen 55 6B 2F
darkorange FF 8C 00
darkorchid 99 32 CC
darkred 8B 00 00
darksalmon E9 96 7A
darkseagreen 8F BC 8F
darkslateblue 48 3D 8B
darkslategray 2F 4F 4F
darkturquoise 00 CE D1
darkviolet 94 00 D3
deeppink FF 14 93
deepskyblue 00 BF FF
dimgray 69 69 69
dodgerblue 1E 90 FF
firebrick B2 22 22
floralwhite FF FA F0
forestgreen 22 8B 22
fuchsia FF 00 FF
gainsboro DC DC DC
ghostwhite F8 F8 FF
gold FF D7 00
goldenrod DA A5 20
gray 80 80 80
green 00 80 00
greenyellow AD FF 2F
honeydew F0 FF F0
hotpink FF 69 B4
indianred CD 5C 5C
indigo 4B 00 82
ivory FF FF F0
khaki F0 E6 8C
lavender E6 E6 FA
lavenderblush FF F0 F5
lawngreen 7C FC 00
lemonchiffon FF FA CD
lightblue AD D8 E6
lightcoral F0 80 80
lightcyan E0 FF FF
lightgoldenrodyellow FA FA D2
lightgreen 90 EE 90
lightgrey D3 D3 D3
lightpink FF B6 C1
lightsalmon FF A0 7A
lightseagreen 20 B2 AA
lightskyblue 87 CD FA
lightslategray 77 88 99
lightsteelblue B0 C4 DE
lightyellow FF FF E0
lime 00 FF 00
limegreen 32 CD 32
linen FA F0 E6
magenta FF 00 FF
maroon 80 00 00
mediumaquamarine 66 CD AA
mediumblue 00 00 CD
mediumorchid BA 55 D3
mediumpurple 93 70 DB
mediumseagreen 3C B3 71
mediumslateblue 7B 68 EE
mediumspringgreen 00 FA 9A
mediumturquoise 48 D1 CC
mediumvioletred C7 15 85
midnightblue 19 19 70
mintcream F5 FF FA
mistyrose FF E4 E1
navajowhite FF DE AD
navy 00 00 80
oldlace FD F5 E6
olive 80 80 00
olivedrab 6B 8E 23
orange FF A5 00
orangered FF 45 00
orchid DA 70 D6
palegoldenrod EE E8 AA
palegreen 98 FB 98
paleturquoise AF EE EE
palevioletred DB 70 93
papaawhip FF EF D5
peachpuff FF DA B9
peru CD 85 3F
pink FF C0 CB
plum DD A0 DD
powderblue B0 E0 E6
purple 80 00 80
red FF 00 00
rosybrown BC 8F 8F
royalblue 41 69 E1
saddlebrown 8B 45 13
salmon FA 80 72
sandybrown F4 A4 60
seagreen 2E 8B 57
seashell FF F5 EE
sienna A0 52 2D
silver C0 C0 C0
skyblue 87 CE EB
slateblue 6A 5A CD
snow FF FA FA
springgreen 00 FF 7F
steelblue 46 82 B4
tan D2 B4 8C
teal 00 80 80
thistle D8 BF D8
tomato FF 63 47
turquoise 40 E0 D0
violet EE 82 EE
wheat F5 DE B3
white FF FF FF
whitesmoke F5 F5 F5
yellow FF FF 00
yellowgreen 9A CD 32

Боја текста се одредјује теxт атрибутом. Ако желимо да наша страница има зелена слова на жутој позадини ставићемо:

<body bgcolor=“#ffff00″ text=“#008000″>

Слика позадине се подешава тако што мењамо атрибуте у тагу BODY на следећи начин

<BODY BACKGROUND=“naziv slike.jpg“></BODY>

Вежба 1:

Отворите програм Notepad (Start-Accessories-Notepad) и у њему унесите дати код. Промените боју позадине. Замените текст у адресном тагу својим именом и својом е-маил адресом. Сачувајте фајл под својим именом користећи енглеску латиницу, без размака са екстензијом  html. Отворите у свом брaузеру ову датотеку.

<html>
<head>
<title>Osnovna škola „Đura Jakšić“ </title>
</head>
<body BGCOLOR=“#C7 15 85″>
<h2><center>Osnovna škola „Đura Jakšić“</center></h2>
<hr>
<br>
<p> adresa
<address>
Boje u HTML/Snežana/srasica@gmail.com
</address>
</body>
</html>

Вежба 2:

Слика за преузимање:

Psenica

Слику запамтите под одређеним именом (Pariz, psenica). Отворите програм Notepad (Start-Accessories-Notepad) и у њему унесите дати код. За позадину ће те сада ставити слику коју сте преузели. Замените текст у адресном тагу својим именом и својом е-маил адресом. Сачувајте фајл под својим именом користећи енглеску латиницу, без размака са екстензијом  html. Отворите у свом брaузеру ову датотеку.

<html>
<head>
<title>Osnovna škola „Đura Jakšić“ </title>
</head>

<BODY BACKGROUND=“psenica.jpg“></BODY>
<h2><center>Osnovna škola „Đura Jakšić“</center></h2>
<hr>
<br>
<p> adresa
<address>
slika u pozadini u HTML/Snežana/srasica@gmail.com
</address>
</body>
</html>

HTML

HTML је језик којим се описују веб странице.

HTML је скраћеница од Hyper Text Markup Language, што значи хипер текст односно, језик за означавање. HTML није програмски језик, већ језик којим се означавају елементи веб страница. Хипер текстови су текстови који поред речи садрже и слику,  аудио и видео записе. HTML се користи  за дефинисање изгледа  World Wide Web страница, као и за успостављање веза – линкова, међу документима -подразумева се да документ садржи текст, слику, звук, графику.

За рад у HTML-u  користити најједноставније алате, као Notepad (за Windows), TextEdit (за Mac) ili KEdit (за KDE).  Не користите програме за обраду текста, као што су Microsoft Word i OpenOffice. Овакви програми уобичајено праве фајлове које веб-браузер не може да чита. За HTML и CSS, требају нам чисти, једноставни текст фајлови.

Први корак је да отворите свој текст едитор Notepad, TextEdit, или KEdit,

HTML користи тагове да помоћу њих укаже претраживачу  како неки текст или слика треба да буду приказани на екрану. Тагови се стављају унутар  < > заграда. У већини случајева, тагови се постављају у паровима,  на почетак неког дела документа, а на крају тог дела документа поставља се таг завршетка.

На пример, да направите наслов документа користите следећи опис:

 <title>Основна школа „Ђура Јакшић“</title>

Уочите ова два тага, <title> и </title> између којих се налази текст наслова документа. Видите да се таг завршетка разликује од тага почетка по косој црти (/).

HTML тагови нису осетљиви на велика и мала слова (УРЛ јесте осетљив). У већини случајева  HTML игнорише бланко знаке и празне линије. Када пишете HTML код,  погодно је да стављате празне линије због лакше читљивости када .

Веб читачи имају за циљ да прочитају HTML документ и да га на екрану рачунара прикажу као веб страницу.

Објашњења HTML документа

 Текст  између <html>  и </html> описује  веб страницу.

Текст између <title> и  </title> означава назив документа, пошто се налази у заглављу, неће бити приказан на екрану, али ће се појавити у на разним другим местима (на врху прозора, у букмарк-у страница и сл.)

Текст између <head>  и </head> описује заглавље. Заглавље се неће приказивати на екрану. Оно служи да се унутар њега дефинишу неке карактеристике документа, као што је наслов.

Текст између  <body> и  </body> описује видљиви део стране. Сав текст, све слике и линкови на друге документе налазиће се унутар ових тагова. <body> се налази одмах након заглавља (head тагова).

Текст између <h1> и </h1> означава наслов. h таг се користи за избор величине слова која ће се користити за наслове и поднаслове у вашем документу. Постоји шест нивоа величине од h1 до h6. Највећа слова се добијају тагом h1,  а најмања тагом h6. Таговима за наслове се не постиже само промена величине слова, већ су наслови и болдовани, а такође испред и иза наслова се додаје по једна празна линија.

На веб страници то изгледа овако:

Osnovna škola „Đura Jakšić“

Osnovna škola „Đura Jakšić“

Osnovna škola „Đura Jakšić“

Osnovna škola „Đura Jakšić“

Osnovna škola „Đura Jakšić“
Osnovna škola „Đura Jakšić“

Текст између <p> и </p> означава параграф.  Таг <p>  проузрокује постављање текста у нову лиију уз додавање једне празне линије испред. Таг <br>  је сличан претходном са разилком што се не додаје једна празна линија испред .

Можете посебним таговима означити да ваш текст буде у болд и/или италиц облику. Постоји и таг за подвлачење текста, али се обично не користи јер се линкови такође приказују као подвучени . Не можете користити истовремено оба тага (за болд и за италиц).  Ако грешком то покушате онај последњи унет ће бити примењен. Болд и италиц се јављају у два облика: физичком и логичком и можете користити оба према вашој жељи. Употреба ових тагова види се у следећим примерима:

Физички тагови

Ово је <b>boldovano</b>

На веб страници то изгледа овако:

Ovo je boldovano

Ово је <i>italic</i>

На веб страници то изгледа овако:

Ovo je italic

Логички тагови

Ово је <strong>jako istaknuto</strong> 

На веб страници то изгледа овако:

Ovo je jako istaknuto

Ово је <em>istaknuto</em> 

На веб страници то изгледа овако:

Ovo je istaknuto

Постоји мала разлика између физичког и логичког тага. Код физичког се мења само облик слова, а логички је зависан од претраживача и може унети и друге промене (рецимо промену боје слова).

У HTML постоји једноставан начин за прављење листа са набрајањем, без набрајања или за дефинисање.  Када користите листе празна поља између „булита“ или бројева се аутоматски додају и могу бити различити од претраживача до претраживача.

Листе без редних бројева

Листе без редног броја почињу тагом <ul> после тога, следе линије текста које се означавају тагом <li>. Листа се завршава тагом </ul>.

Листе без редних бројева:

<ul>
<li> proleće

<li> leto

<li> jesen

<li> zima
</ul>

А ево како ће то изгледати на веб страници, а без редних бројева:

  • proleće
  • leto
  • jesen
  • zima

Листе са редним бројевима

Прављење горње листе,  са редним бројем испред сваке линије:

<ol>
<li> proleće

<li> leto

<li> jesen

<li> zima
</ol>

А ево како ће то изгледати на веб страници листе са редним бројевима:

  1. proleće
  2. leto
  3. jesen
  4. zima

Листа у листи – Угњеждене листе

Пример који показује  где се унутар једне листе налазе друге листе:

<ul>
<li> proleće
<ul>
<li> vesnik proleća
<li> visibaba
</ul>
<li> leto
<ul>
<li> more
<li> planina
</ul>
<li> zima
<ul>
<li> skijanje
<li> Kopaonik
</ul>
</ul>

А ево како ће то изгледати на веб страници:

  • proleće
    • vesnik proleća
    • visibaba
  • leto
    • more
    • planina
  • zima
    • skijanje
    • Kopaonik

Центрирање текста

Текст можете центрирати, можете центрирати слику, наслове помоћу тагова:

<center>Основна школа „Ђура Јакшић“ </center>

што ће на веб страници изгледати овако:

Основна школа „Ђура Јакшић“

Таг <center> аутоматски додаје нову линију на крају текста који је центриран.

Хоризонтална линија

Ако желите да раздвојите делове вашег документа, можете убацити хоризонталну линију помоћу тага  <hr>.

Хоризонтална линија ће бити приказана овако:


Адреса

На крај документа се обично поставља таг <address>  који се  користи за давање контакт информација о аутору веб странице. Ево примера коришћења address тага:

<address> HTML/Snežana/srasica@gmail.com </address>

А на веб страници ће то бити исписано у италиц облику:

HTML/Snežana/srasica@gmail.com


Задатак за вежбу:

Отворите програм Notepad (Start->Accessories->Notepad) и унесите следећи код:

<html>
<head>
<title>Osnovna škola „Đura Jakšić“</title>
</head>
<body>
<br>Ovo je veb stranica Osnovne škole „Đura Jakšić“: tekst,slike,video materijal …

<br>
<p> h tagovi
<h1>Osnovna škola „Đura Jakšić“</h1>
<h2>Osnovna škola „Đura Jakšić“</h2>
<h3>Osnovna škola „Đura Jakšić“</h3>
<h4>Osnovna škola „Đura Jakšić“</h4>
<h5>Osnovna škola „Đura Jakšić“</h5>
<h6>Osnovna škola „Đura Jakšić“</h6>

 

<br>
<p> Tagovi za bolod i zakosenje
<br>Ovo je <b>boldovano</b>
<br>Ovo je <i>italic</i>

<br>
<p> Logicki tagovi
<br>Ovo je <strong>jako istaknuto</strong>
<br>Ovo je <em>istaknuto</em>

<br>

<p> Liste bez rednih brojeva

<ul>
<li> proleće

<li> leto

<li> jesen

<li> zima
</ul>

<br>
<p> Liste sa rednim brojevima
<ol>

<li> proleće

<li> leto

<li> jesen

<li> zima

</ol>

<br>
<p> Definicione liste
<dl>
<dt>proleće 
<dd> leto
<dd> jesen
<dt> zima
</dl>
<br>
<p> Ugnježdene liste
<ul>
<li> proleće
<ul>
<li> vesnik proleća
<li> visibaba
</ul>
<li> leto
<ul>
<li> more
<li> planina
</ul>
<li> zima
<ul>
<li> skijanje
<li> Kopaonik
</ul>
</ul>

 
<br>
<p> Centriranje
<center>Osnovna škola „Đura Jakšić“ </center>

<br>
<p> Horizontalna linija
<hr>

<br>
<p> Adresa
<address> HTML/Snežana/srasica@gmail.com </address>

Замените текст у адресном тагу својим именом својом е-маил адресом. Сачувајте документ на Desktopu, под својим именом користећи енглеску латиницу, без размака,  са екстензијом  html. Отворите у свом брaузеру ову датотеку.