11. Основни елементи језика HTML

Увод

Пре него што почнемо потребно је да се подсетимо неких основних појмова који су вам представљени на следећим страницама

Увод у WWW (World Wide Web)

World  Wide Web, или скраћено Веб је данас један од најпопуларнијих механизама за размену информација међу људима. Помоћу веб-а можемо презентирати информације које се састоје од речи, слика, видео и аудио записа - и све то без додатног софтвера који корисник мора да инсталира на свом рачунару  - довољно је да има било који веб претраживач (Internet Explorer, Firefox, Chrome, Opera и слично).

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

За креирање веб страница могу се користити разни HTML едитори као што су Microsoft Visual Web Developer, FrontPage, Adobe Cold Fusion, Dreamweaver и сл. У овом курсу ћемо се бавити HTML командама и писањем HTML кода без употребе специјализованих едитора. За програмирање HTML страница биће вам потребан само неки прост едитор текста (NotePad или WordPad, на пример)

Шта је HTML ?

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

Шта је URL (Uniform Resource Locator) ?

Када неко жели да вам да упутство како да приступите некој информацији на интернету он вам тада саопштава електронску адресу на којој се та информација налази. Та електронска адреса је заправо УРЛ. Сваки документ на интернету има јединствену адресу (УРЛ) што нам омогућава да помоћу ње лако дођемо до веб странице која нас интересује у мору других веб страница.

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

На пример, да приступите веб страници која садржи предавања за ученике 8. разреда потребно је да знате следећи УРЛ:

http://i8.oshrs.edu.rs/

Основне HTML команде

У овом делу биће описане основне HTML команде и кораци које треба предузети како би се неки документ припремио за презентацију на Веб-у.

Ради лакшег праћења текста службене речи ће бити на жутој подлози.

Основни кораци: употреба тагова

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

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

 <title>Moj prvi Dokument na vebu</title>

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

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


Најмањи HTML документ

Сваки HTML документ мора садржи одређене HTML тагове. На почетку документа мора бти таг <html> и документ се мора завршити са тагом </html>. Остали дио документа се састоји од два дијела:

  • HEAD - заглавље (почиње са <head> а завршава са </head>)
  • BODY - тело (почиње са <body> а завршава са </body>)

HEAD - заглавље садржи обавезно TITLE - наслов (почиње са <title> а завршава са </title>title>). 

BODY - тело садржи стварни текст који чини параграфе, листе, као и остале елементе.

Најмањи HTML документ

<html>
<head>
   <title>Назив</title>
</head>
<body>
</body>
</html>

Таг HTML

<html>  таг означава почетак HTML програма (кода).

<html> таг се обично поставља на почетак документа, као прва наредба за претраживаче. На крају документа поставља се таг завршетка </html>. Између ова два тага налазиће се сви остали тагови као и сам садржај документа.

Таг head

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

Заглавље се описује између тагова <head> и </head>.

Сада можемо дати пример документа који садржи заглавље у којем је дефинисан назив документа таговима <title> и </title>:

<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>

Title таг

title таг вам омогућава да дефинишете назив вашег документа. То се постиже на следећи начин:

<title>Moj prvi HTML dokument</title>

Назив документа, пошто се налази у заглављу, неће бити приказан на екрану, али ће се појавити у на разним другим местима (на врху прозора, у букмарк-у страница и сл.)

Body таг

<body> и </body>  тагови дефинишу почетак и крај садржаја вашег документа. Сав текст, све слике и линкови на друге документе налазиће се унутар ових тагова.

<body> се налази одмах након заглавља (head тагова). Типична веб страница може изгледати овако:

<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
Ovde se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd.
</body>
</html>

h (Header) тагови

h таг се користи за избор величине слова која ће се користити за наслове и поднаслове у вашем документу. Постоји шест нивоа величине од h1 до h6. Највећа слова се добијају тагом h1  а најмања тагом h6. Следе примери yа свих 6 нивоа.

<h1>Ovoje naslov sa h1 tagom</h1>

Ovo je naslov sa h1 tagom

<h2>Ovoje naslov sa h2 tagom</h2>

Ovoje naslov sa h2 tagom

<h3>Ovoje naslov sa h3 tagom</h3>

Ovoje naslov sa h3 tagom

<h4>Ovoje naslov sa h4 tagom</h4>

Ovoje naslov sa h4 tagom

<h5>Ovoje naslov sa h5 tagom</h5>

Ovoje naslog sa h5 tagom

<h6>Ovoje naslov sa h6 tagom</h6>

Ovoje naslov sa h6 tagom

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

Параграфи

У HTML, параграф се означава тагом таг <p> и поставља се на крај сваког параграфа "нормалног" текста (под нормалним се подразумева текст који нема употребљене неке друге тагове). 

<p> овај таг проузрокује постављање текста у нову лиију уз додавање једне празне линије испред

<br> овај таг је сличан претходном са разиком што се не додаје једна празна линија испред 

Пре-форматирани текст

Таг <pre> се користи да означи да ће ваш текст задржати форму у ублику како је креиран са свим бланко знацима, новим линијама, табовима и сл. Другим речима биће онакав каквог сте га унели.

На пример:

<pre>ovo je

 

               jedan primer

               pre-formatizovanog

        teksta</pre>

On će se na ekranu pojaviti u sledećem obliku::

ovo je

 

               jedan primer

               pre-formatizovanog

        teksta       

Болд и италик тагови

Можете посебним таговима означити да ваш текст буде у болд и/или италиц облику.

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

Не можете користити истовремено оба тага (за болд и за италиц). Ако греском то покушате онај последњи унет ће бити примењен.

Болд и италиц се јављају у два облика: физичком и логичком и можете користити оба према вашој жељи. Употреба ових тагова види се у следећим примерима:

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

Ovo je <b>boldovano</b>
Ovo je boldovano
Ovo je <i>italic</i>
Ovo je italic

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

Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto

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

Листе

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

Када користите листе празна поља између "булита" или бројева се аутоматски додају и могу бити различити од претраживача до претраживача.

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

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

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

<ul>
<li> linija 1
<li> linija 2
<li> linija 3
</ul>

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

  • linija 1
  • linija 2
  • linija 3

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

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

<ol>
<li> linija 1
<li> linija 2
<li> linija 3
</ol>

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

  1. linija 1
  2. linija 2
  3. linija 3

Дефиниционе листе

Дефиниционе листе вам омогућавају да правите структуриране листе без "булита" и редних бројева. Ево примера:

<dl>
<dt> Ovo je jedan pojam
<dd> Ovo je njegova definicija
<dd> ovo je druga definicija
<dt> Ovo je drugi pojam
<dd> Ovo je njegova definicija
</dl>

Ова листа ће изгледати овако на екрану:

Ovo je jedan pojam

Ovo je njegova definicija

Ovo je druga definicija.

Ovo je drugi pojam

Ovo je njegova definicija

Угњеждене листе (листа у листи)

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

<ul>
<li> podatak 1
<ul>
<li> ugnježden podatak 1
<li> ugnježden podatak 2
</ul>
<li> podatak 2
<ul>
<li> ugnježden podatak 1
<li> ugnježden podatak 2
</ul>
<li> podatak 3
<ul>
<li> ugnježden podatak 1
<li> ugnježden podatak 2
</ul>
</ul>

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

  • podatak 1
    • ugnježden podatak 1
    • ugnježden podatak 2
  • podatak 2
    • ugnježden podatak 1
    • ugnježden podatak 2
  • podatak 3
    • ugnježden podatak 1
    • ugnježden podatak 2

Блок навод

Блок навод (blockquote) таг се користи да се неки део текста издвоји и прикаже као навод који ће у односу на остатак текста бити и са леве и са десне стране допуњен бланко знацима. То се постиже следећим таговима:

<blockquote>Tekst koji se želi prikazati kao navod</blockquote>

Да поново истакнемо, блок наводу ће бити додата лева и десна маргина како би се разликовао од остатка текста у документу.

Центрирање

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

<center>Ova rečenica je centrirana</center>

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

Ova rečenica je centrirana

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

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

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

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


Адреса

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

Ево примера коришћења address тага:

<address>
Uvod u HTML/Milan Milosevic/milanmilosevic@oshrs.edu.rs
</address>

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

 Uvod u HTML/Milan Milosevic/milanmilosevic@oshrs.edu.rs

Коментари

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

Коментари имају следећи облик:

<!-----Ovo je komentar koji se neće pojaviti u pretraživaču----->

Коментар се може налазити и у више линија као у следећем примеру:

<!----Ovaj komentar se takođe neće videti u pretraživačima

iako je postavlje u dve linije--->

Прецртавање текста

Ако вам буде потребно можете користити <strike> таг да део текста прцртате као што је урађено у следећем примеру:

<strike>Ovaj tekst će biti precrtan</strike>

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

Ovaj tekst će biti precrtan

Вежба

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

HTML код

<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
Ovde se nalazi sadrzaj vaseg dokumenta: tekst, slike, grafika itd.

<br>
<p> h tagovi
<h1>Ovoje naslov sa h1 tagom</h1>
<h2>Ovoje naslov sa h2 tagom</h2>
<h3>Ovoje naslov sa h3 tagom</h3>
<h4>Ovoje naslov sa h4 tagom</h4>
<h5>Ovoje naslov sa h5 tagom</h5>
<h6>Ovoje naslov sa h6 tagom</h6>

<br>
<p> Preformatirani tekst
<pre>ovo je

 

               jedan primer

               pre-formatizovanog

        teksta</pre>

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

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

<br>
<p> Lista bez rednih brojeva
<ul>
<li> linija 1
<li> linija 2
<li> linija 3
</ul>

<br>
<p> Liste sa rednim brojevima
<ol>
<li> linija 1
<li> linija 2
<li> linija 3
</ol>

<br>
<p> Definicione liste
<dl>
<dt> Ovo je jedan pojam
<dd> Ovo je njegova definicija
<dd> ovo je druga definicija
<dt> Ovo je drugi pojam
<dd> Ovo je njegova definicija
</dl>

<br>
<p> Ugnjezdene liste
<ul>
<li> podatak 1
<ul>
<li> ugnjezden podatak 1
<li> ugnjezden podatak 2
</ul>
<li> podatak 2
<ul>
<li> ugnjezden podatak 1
<li> ugnjezden podatak 2
</ul>
<li> podatak 3
<ul>
<li> ugnjezden podatak 1
<li> ugnjezden podatak 2
</ul>
</ul>

<br>
<p> Blokk navod
<blockquote>Tekst koji se zeli prikazati kao navod</blockquote>


<br>
<p> Centriranje
<center>Ova recenica je centrirana</center>

<br>
<p> Horizontalna linija
<hr>

<br>
<p> Adresa
<address>
Uvod u HTML/Milan Milosevic/milanmilosevic@oshrs.edu.rs
</address>

<br>
<p> Komentar
<!-----Ovo je komentar koji se nece pojaviti u pretrazivacu----->
<br>
<p> Precrtavanje
<strike>Ovaj tekst ce biti precrtan</strike>
</body>
</html>

  • Замените текст у адресном тагу својим именом и презименом и својом е-маил адресом.
  • Сачувајте на диск рачунара фајл под својим именом и презименом користећи енглеску латиницу без размака са екстензијом  html.
  • Отворите у свом броузеру ову датотеку.
  • Позовите наставника
Подстранице (1): 11. лекција: 1. вежба
Comments