HTML uputstvo za početnike

Uvod

U najopštijem smislu internet je skup medusobno povezanih računara.

World Wide Web (WWW) predstavlja stalno promenljiv skup stotina miliona dokumenata, koji se nalaze negdje na internetu i napisani su u nekom obliku HTML-a

HTML (Hypertext markup language) ili hipertekstualni markerski jezik je jezik na kome je napisana većina Web dokumenata. Hipertekst znači da možete da napravite vezu na Web strani koja vodi posetioca na bilo koju drugu Web stranu ili praktično do bilo čega na internetu. To znači da informacijama na Webu može da se pristupi sa mnogo, raznih, strana. Univerzalnost HTML-a se ogleda u tome da se HTML (Web) dokumenti čuvaju u obliku tekstualnih datoteka pa ih može pročitati bilo koji računar (bez obzira na operativni sistem i vrstu računara ili Web čitača). Naravno, to ne znači da će svaki računar ili Web čitač (browser) na isti način prikazati Web stranu (HTML dokument).

Na internet tržistu se vodi "rat" izmedu proizvođača Web browser-a (pretraživača), koji se trude da baš njihov pretraživač ima najviše korisnika. Najpoznatiji aktuelni pretraživači su Internet Explorer, Mozilla Firefox, Google Chrome i Opera

"Ujedinjene nacije" Weba je organizacija koja se zove World Wide Web Consortium www.w3.org a često se koristi skraćenica "W3C". Ovaj konzorcijum se trudi da standardizuje HTML, a aktuelna verzija je HTML 4.01

Kako kreirati html dokument, možete saznati prateći sledeći link:
Kreiranje HTML dokumenta

Struktura HTML dokumenta

Oznake

Oznake (tags) su elementi koji identifikuju i strukturiraju različite delove web strane. One govore web pretraživaču šta je šta, gde se šta nalazi i kako treba šta prikazati. One govore pretraživaču: "Zaglavlje je ovde, ovo je pasus, a ono tamo tabela, ovaj tekst prikaži podebljano, ovaj tekst podvučeno, ovde ubaci ovu sliku i prikaži je na ovaj način" i sl.. Postoji oznaka za otvaranje i oznaka za zatvaranje nekog elementa web strane (kod nekih elemenata oznaka za zatvaranje nije neophodna).
Ako bismo želeli dodati naslov dokumenta, to bi uradili na sledeći način (pogledaj osnovnu šemu HTML dokumenta da bi video gde se stavlja naslov dokumenta):




<title> Naslov dokumenta (Web strane) </title>


Oznake (tagovi), dakle, obično dolaze u parovima, gde je otvarajuća oznaka unutar znakova < >, a zatvarajuća unutar oznaka </ > .
Na primer tag table (tabela) je uokvirena oznakama (tagovima) na sledeći način, a redovi, tr, i ćelije, td su, logično, ugneždene u njima




<table border="1">
    <tr>
        <td>
          Ovde je sadržaj prve ćelije u prvom redu
        </td> 
        <td>
          Ovde je sadržaj druge ćelije u prvom redu
        </td>
    </tr>  
    <tr>
        <td>
          Ovde je sadržaj prve ćelije u drugom redu
        </td> 
        <td>
          Ovde je sadržaj druge ćelije u drugom redu
        </td>
    </tr>  
</table>


Prethodna tabela bi bila u pretraživaču prikazana na sledeći način:


Ovde je sadržaj prve ćelije u prvom redu Ovde je sadržaj druge ćelije u prvom redu
Ovde je sadržaj prve ćelije u drugom redu Ovde je sadržaj druge ćelije u drugom redu


U prethodnoj tabeli je prvom tagu, <table>, dato svojstvo (atribut) border="1" što pretraživaču govori "prikaži granice u tabeli sa debljinom 1".
Ovde možete pogledati spisak podržanih tagova (oznaka) sa njihovim definicijama i spisak atributa u HTML 4.01:
Lista tagova (oznaka) i Lista atributa odgovarajućih tagova
, na koje se odnose

Osnovna šema HTML dokumenta

Svaki html dokument ima za osnovu sledeću šemu:




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

        <head>

         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />  
                  
        <title>Naslov dokumenta</title>

         </head>
         <body>
      
          Glavni deo, tj. telo dokumenta, gde ide sadržaj
    
        </body> 
 
</html>


Dakle, ceo HTML dokument je uokviren html oznakama. U head sekciji (zaglavlju) je smešten naslov, tj. title, a zaglavlje je predviđeno i za pisanje meta tagova, uključivanje javascript dokumenata, style oznaka i td. U body sekciju (telo dokumenta) se smešta sav sadržaj koji posetilac Web strane treba da vidi.
DOCTYPE deklaracija nije html oznaka. Ona govori čitaču u kojoj verziji jezika je pisan html. Ako se izostavi dokument će ipak biti prikazan, mada dobra praksa nalaže da se ova deklaracija ne izostavlja.
U zaglavlju dokumenta je postavljen meta tag <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> što pretraživaču govori da se koristi skup karaktera (znakova) koji omogućava upotrebu, pored ostalog, i naših slova.

Dodavanje elemenata u HTML dokument

Ovde se isključivo misli na dodavanje u telo dokumenta pomoću odgovarajućíh oznaka: naslova, paragrafa, slika, linkova, tabela i slično, kao i prikaz osnovnih atributa za njihovo formatiranje i funkcionisanje, gde je to neophodno.

Dodavanje naslova i paragrafa (pasusa)

Naslovi, kao što je poznato mogu biti u više nivoa: naslov, podnaslov, podpodnaslov i td.
Evo kako bi to izgledalo u html-u:



    <h1> Najveći naslov </h1>
    <h2> Malo manji naslov </h2>
    <h3> Još malo manji naslov </h3>
    <h4> Pa još malo manji naslov </h4>
            .
            .


Pretraživač bi to prikazao kao:


Najveći naslov

Malo manji naslov

Još malo manji naslov

Pa još malo manji naslov



Pasus (paragraf) je uokviren tagovima na sledeći način:


<p>
Ovo je prvi pasus. Zatvaranje taga je opciono (nije obavezno). Običan tekst se uglavnom piše unutar ovih oznaka, mada je moguće pisati i bez oznaka pa će paragraf ipak biti prikazan.
</p>
<p>
Ovo je drugi paragraf. Ako želimo prelomiti red koristićemo oznaku <br> za prelom reda, a ona, kao i neke druge oznake (tagovi), nema svoj par za zatvaranje.
</p>



Prethodni paragrafi (pasusi) bi u pretraživaču bili prikazani na sledeći način:


Ovo je prvi pasus. Zatvaranje taga je opciono (nije obavezno). Običan tekst se uglavnom piše unutar ovih oznaka, mada je moguće pisati i bez oznaka pa će paragraf ipak biti prikazan.

Ovo je drugi paragraf. Ako želimo prelomiti red koristićemo oznaku
za prelom reda, a ona, kao i neke druge oznake (tagovi), nema svoj par za zatvaranje.


Naglašavanje, košenje, podebljavanje, podvlačenje i precrtavanje teksta

U html-u to bi izgledalo ovako:


<p>
Ako želimo naglašen (emphasize), odnosno iskošen (italic) tekst radimo to ovako: <em>evo malo naglašenog teksta</em>. Slično izgleda i <i>iskošeni tekst (italic)</i>. Možemo i <b>podebljati tekst (bold)</b>, a možemo i <u>podvući tekst (underline)</u>. Ako nam se ne sviđa možemo i <strike>precrtati tekst. </strike>.
</p>



Pretraživač bi to prikazao ovako:


Ako želimo naglašen (emphasize), odnosno iskošen (italic) tekst radimo to ovako: evo malo naglašenog teksta. Slično izgleda i iskošeni tekst (italic). Možemo i podebljati tekst (bold), a možemo i podvući tekst (underline). Ako nam se ne sviđa možemo i precrtati tekst .


Promena vrste, veličine, boje fonta i pozadine

Upotreba klasičnih atributa font oznake ne rade najbolje u novijim realizacijama html-a (depricated), pa se preporučuje upotreba stilova. Generalno se umesto atributa sve više koriste stilovi.
Opšta sintaksa upotrebe stilova je <oznaka style="osobina1:vrednost1;osobina2:vrednost2;...">. Priča o stilovima je malo opširnija, pa se ovde nećemu upuštati u nju.
Primer html-a za upotrebu stilova u formatiranju teksta:


<p>
<font style="color:red;font-size:14pt;background:orange;font-family:arial;">Ovaj tekst je pisan fontom veličine 14 pt, a u crvenoj je boji, sa narandžastom pozadinom i fontom arial.</font>. <font style="color:blue;font-size:10pt;background:yellow;font-family:verdana;">Ovaj tekst je pisan fontom veličine 10 pt, u plavoj je boji, pozadina je žuta, a pisan je fontom Verdana</font>.
</p>



Pretraživač bi to prikazao ovako:


Ovaj tekst je pisan fontom veličine 14 pt, a u crvenoj je boji, sa narandžastom pozadinom i fontom arial. Ovaj tekst je pisan fontom veličine 10 pt, u plavoj je boji, pozadina je žuta, a pisan je fontom Verdana..




Stilovi se mogu primeniti na skoro sve elemente html-a: pasuse, naslove, tabele, telo dokumenta, i td.

Ubacivanje slika

Slike se u html dokument ubacuju na sledeći način:


<center> <img src="HTMLuputstvo_slike/slika.jpg" width="275px" height="200px" title="Anine rukotvorine" alt="Anine rukotvorine" ></center>


Pretraživač bi to prikazao ovako:


Anine rukotvorine




Slika je postavljena između oznaka <center> i </center> koje služe da sliku centriraju na strani, a slika bi bez toga (podrazumevano) bila prikazana levo.
Slika bi se, naravno, morala nalaziti u folderu (direktorijumu) "HTMLuputstvo_slike", koji bi morao biti u istom direktorijumu sa ovim html fajlom.
Atribut "title" služi da se pojavi tekst dodatnog objašnjenja kada se kursor postavi iznad slike. Atribut "alt" se upisuje dok se (ako se) slika ne učita.
Podržana su uglavnom tri formata slika: JPEG, GIF i PNG

Napomena:
Neko jedinice dužine piše u pt (point), neko u px (pixel). Treba znati da je 3pt=4px (1pt=1/72 inča, oko 0,035 cm). Za neke objekte koriste se i jedinica em (1 em=12pt) kao i procenat (%), gdje je 100% podrazumevana veličina (naprimer za veličinu slova 100% je 12pt, pa je onda, na primer, 150% 18pt).

Postavljanje linkova

Html dokument možemo povezati sa mnogo drugih dokumenata (Web strana) bilo na lokalnom računaru ili bilo gdje na internetu. Evo primera:


<a href="lokalni_dokument.html"> Lokalni dokument u istom folderu </a> <br>
<a href="dokumenti/lokalni_dokument.html"> Lokalni dokument u pod folderu </a> <br>
<a href="http://www.w3schools.com/tags/tag_style.asp">Stilovi u zaglavlju dokumenta (dokument na internetu) </a>


Pretraživač bi to prikazao ovako:


Lokalni dokument u istom folderu
Lokalni dokument u pod folderu
Stilovi u zaglavlju dokumenta (dokument na internetu)



Ako je adresirani dokument (vrednosr atributa href, pod navodnicima) na istom računaru (prva dva linka u primeru) adresiramo ih relativno. U prvom linku adresirani fajl je u istom folderu sa ovim html fajlom, a drugi link upućuje na fajl koji je u folderu "dokumenti", koji je u istom folderu kao i ovaj fajl. Treći link upućuje na fajl na internetu i tu se mora navesti puna adresa fajla (URL).

Pravljenje tabela

Verovatno ne postoji Web prezentacija koja ne sadrži bar jednu tabelu. Na početku ovog uputstva već je napravljena jedna tabela pa ćemo ovde samo objasniti još neke mogućnosti pri pravljenju tabela. Evo primera jedne tabele:


<table border="1" cellpadding="5" cellspacing="5" width="75%"> <caption>Naslov tabele</caption> <tr> <th width=40%> Zaglavlje prve kolone </th> <th> Zaglavlje druge kolone </th> </tr> <tr> <td colspan="2"> Ova ćelija se proteže na dve kolone, a sadržaj je centriran. </td> </tr> <tr> <td> Ovde je sadržaj prve ćelije u drugom redu </td> <td> Ovde je sadržaj druge ćelije u drugom redu </td> </tr> <tr> <td rowspan="2"> Ovde je sadržaj ćelije koja se proteže na dva reda.Dužina ove
kolone je 40% dužine tabele. </td> <td> Ovde je sadržaj treće ćelije u trećem redu </td> </tr> <tr> <td> Ovde je sadržaj četvrte ćelije u četvrtom redu </td> </tr> </table>



Pretraživač bi to prikazao ovako:


Naslov tabele
Zaglavlje prve kolone Zaglavlje druge kolone
Ova ćelija se proteže na dve kolone, a sadržaj je centriran.
Ovde je sadržaj prve ćelije u drugom redu Ovde je sadržaj druge ćelije u drugom redu
Ovde je sadržaj ćelije koja se proteže na dva reda.Dužina ove kolone je 40% dužine tabele. Ovde je sadržaj druge ćelije u trećem redu
Ovde je sadržaj druge ćelije u četvrtom redu


Kao što se vidi tabeli se može dati naslov, caption, (a ne mora), ćelije zaglavlja su ograničene sa <th> i </th>. Atribut Cellpadding određuje slobodan prostor oko teksta u ćeliji, a atribut Cellspacing određuje udaljenost između ćelija u tabeli. Atribut width određuje dužinu tabele ili ćelije, i najbolje ga je zadati u procentima (relativno) jer onda prikaz neće zavisiti od velične prozora. Propuštanje nekoliko redova, rowspan, ili kolona, colspan, nekada je od velike koristi. Poravnavanje sadržaja se vrši upotrebom atributa align (podrazumevano poravnanje je levo, sem za ćelije zaglavlja gde je sadržaj centriran, a moguće vrednosti su left, right i center).

Pravljenje listi

Postoje tri vrste listi koje se mogu napraviti u html-u: liste sa nabrajanjem (ordered), bez nabrajaanja (unordered) i definicione liste. Evo primera:



<h3>Lista sa nabrajanjem (uređena lista)</h3>

<ol> 
  <li>Prva stavka uređene liste</li>
  <li>Druga stavka uređene liste</li>
  <li>Treća stavka uređene liste
  <ol>
      <li>Prva stavka ugneždene liste</li>
      <li>Druga stavka ugneždene liste</li>
      <li>Treća stavka ugneždene liste</li>
  </ol>
  </li>
  <li>četvrta stavka uređene liste</li>
</ol> 

<h3>Lista bez nabrajanja (neuređena lista)</h3>

<ul> 
  <li>Prva stavka uređene liste</li>
  <li>Druga stavka uređene liste</li>
  <li>Treća stavka uređene liste
  <ul>
      <li>Prva stavka ugneždene liste</li>
      <li>Druga stavka ugneždene liste</li>
      <li>Treća stavka ugneždene liste</li>
  </ul>
  </li>
  <li>Četvrta stavka uređene liste</li>
</ul> 

<h3>Definiciona lista</h3>

<dl> 
  <dt>Prva stavka def. liste</dt>
    <dd>Objašnjenje prve stavke</dd>
  <dt>Druga stavka ldef. iste</dt>
    <dd>Objašnjenje druge stavke</dd>
  <dt>Treća stavka def. liste</dt>
    <dd>Objašnjenje treće stavke</dd>
  </ul>
</dl> 



Pretraživač bi to prikazao ovako:


Lista sa nabrajanjem (uređena lista)

  1. Prva stavka uređene liste
  2. Druga stavka uređene liste
  3. Treća stavka uređene liste
    1. Prva stavka ugneždene liste
    2. Druga stavka ugneždene liste
    3. Treća stavka ugneždene liste
  4. Četvrta stavka uređene liste

Lista bez nabrajanja (neuređena lista)

  • Prva stavka neuređene liste
  • Druga stavka neuređene liste
  • Treća stavka neuređene liste
    • Prva stavka ugneždene liste
    • Druga stavka ugneždene liste
    • Treća stavka ugneždene liste
  • Četvrta stavka neuređene liste

Definiciona lista

Prva stavka definicione liste
Objašnjenje prve stavke
Druga stavka definicione iste
Objašnjenje druge stavke
Treća stavka definicione liste
Objašnjenje treće stavke




Prve dve vrste lista se često koriste, a treća vrlo retko. Ugnezditi možemo listu i u ugneždenu listu.