VIII разред‎ > ‎II. HTML‎ > ‎

1. Основни елементи 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?

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

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

На пример, да приступите почетној веб страници сајта наше школе потребно је да знате следећи URL:

http://www.osvokasavic.edu.rs/


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

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

Употреба тагова

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

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

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

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

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

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



Сваки HTML документ мора да садржи одређене HTML тагове. На почетку документа мора бити таг 
<html> и документ се мора завршити са тагом </html>. Остали део документа се састоји од два дела:
  • HEAD - заглавље (почиње са <head> а завршава са </head>)
  • BODY - тело (почиње са <body> а завршава са </body>)

HEAD - заглавље садржи обавезно:

    • TITLE - наслов (почиње са <title> а завршава са </title>). 

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


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

<html>
    <head>
        <title>Naslov</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>

p и br таг (Параграф)

Како можемо прећи у нови ред или започети нови одељак? Кад пишемо текст у Notepad-у прелазак у нови ред се постиже притиском на тастер ENTER. Међутим ово неће довести до преласка у нови ред и на нашој HTML страници. Наиме, да би претраживач прешао у нови ред, то му морамо експлицитно наредити одговарајућим тагом. Таг за прелазак у нови ред је <br> таг. Он не захтева одговарајући завршни таг (што је и разумљиво).

Прелазак у нови одељак постиже се <p> тагом. Он има исти учинак као и претходни таг с том разликом што ће направити мали размак између редова. На крају одељка можемо ставити и његов завршни таг, али већина претраживача га не захтева, тако да га слободно можемо изоставити.

pre таг (Форматирани текст)

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

На пример:

<pre>ovo je

 

               jedan primer

               pre-formatizovanog

        teksta</pre>

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

ovo je

 

               jedan primer

               pre-formatizovanog

        teksta       

blokquote таг (Блок навод)

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

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

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

hr таг (Хоризонтална линија)

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

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


adress таг (Адреса)

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

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

<address> 
Uvod u HTML/Sladjana Macenovski/osvoka.sladjanamacenovski@gmail.com 
</address>

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

 Uvod u HTML/Sladjana Macenovski/osvoka.sladjanamacenovski@gmail.com

Коментари

Могуће је у 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 postavljen u dve linije--->


Вежба 1.

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

HTML код

<html>
<head>
  <title> Prvi HTML dokument </title>
</head>
<body>
  Ovde se nalazi sadržaj vašeg dokumenta:
  <br>
tekst, slike, grafika itd.
  
  <p> Preformatirani tekst
  <pre>ovo je
 

               jedan primer

               pre-formatizovanog

        teksta</pre>

  <p> Blok navod

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

  <p> Horizontalna linija

  <hr>

  <p> Adresa

  <address>
  Slađana Mačenovski
  <br>
   <br>e-mail: osvoka.sladjanamacenovski@gmail.com
  </address>

  <p> Komentar

  <!-----Ovo je komentar koji se neće pojaviti u pretrazivaču----->

</body>
</html>


  • Замените текст у адресном тагу својим именом и презименом и својом е-маил адресом.
  • Сачувајте на диск рачунара фајл под именом Вежба1 користећи енглеску латиницу без размака са екстензијом  .html (примерVezba1.html)
  • Отворите у свом претраживачу ову датотеку и погледајте свој први HTML документ .
  • Пошаљите вежбу наставнику на преглед кликом на следећу слику:
https://www.dropbox.com/request/45ogNo4DIED2jsKWnPeO

Примери

Учитајте следеће HTML датотеке и погледајте примере за горе наведене тагове. Да би видели HTML код ових примера, на учитани фајл у претраживачу, кликните десним тастером миша и одаберите ставку View page source. Сам HTML код нећете моћи мењати, али га можете копирати у текст едитор и тамо га преправити.
ċ
Слађана Маченовски,
21.01.2015. 23:47
ċ
Слађана Маченовски,
21.01.2015. 23:47
ċ
Слађана Маченовски,
21.01.2015. 23:47
ċ
Слађана Маченовски,
21.01.2015. 23:47
ċ
Слађана Маченовски,
21.01.2015. 23:47
Comments