петак, 14. децембар 2012.

INFORMATIKA I RAČUNARSTVO

OSNOVE HTML-a

I DEO

Šta je HTML?

HyperText Markup Language ili skraćeno HTML je jezik koji koristimo za izradu web stranica (website). Važno je napomenuti da HTML nije programski jezik, već prosti tekstualni fajl koji oznakama (tagovima) govori našim Internet pregledačima (web browser-ima) kako da prikažu dokument. Samim tim, da bi naučili i koristili HTML ne morate biti programer. Svaki HTML dokument mora imati .htm ili .html ekstenziju.
Evo primera kako izgleda jedan najprostiji HTML document
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4    <title>Osnovni HTML dokument</title>
5</head>
6<body>
7    <p>Neki tekst</p>
8</body>
9</html>

Alati za izradu i pregled HTML dokumenta

Pošto je HTML običan tekstualni fajl, za njegovu izradu je dovoljan običan tekst editor koji dolazi uz operativni sistem (Notepad uz Windows, TextEdit uz MacOS). Iako tekst editori kao Notepad i TextEdit “završavaju posao”, oni su ograničeni, tj. nemaju mogućnosti kao neki napredniji programi koji su namenjeni za tu svrhu.
Pored tekst editora potreban vam je Internet pregledač (browser). Kao i tekst editor, browser takodje dolazi uz operativni sistem. Na Windows operativnom sistemu to je Microsoft Internet Explorer dok je na Macintosh-u to Apple Safari. I ovde takođe imate mogućnost izbora između različitih programa pa evo liste nekoliko popularnih browsera. Svi browseri su besplatni i slobodni za preuzimanje.

HTML tagovi

Došli smo do važnog dela ovog tutorijala, a to su tagovi. Tagovi su ključne reči u HTML dokumentu i označavaju se zagradama “<” i “>”. Svaki tag mora početi sa <...> i završiti se sa </...>. U ovakvoj formi vam je sigurno nejasno o čemu se radi pa ću uzeti neki od tagova, naslov dokumenta npr.
1<title></title>
Dakle, svaki tag počinje sa <tag> i završava se sa </tag>.
Tagovi su „case insensitive“, što znači da je nevažno da li ih pišete velikim ili malim slovima. Dobra praksa je da tagove pišete malim slovima jer većina web dizajnera, ako ne i svi koriste mala slova.
Spisak svih tagova možete naći na sledećoj adresi: http://w3schools.com/tags/default.asp

HTML elementi

Tagovi zajedno sa sadržajem čine HTML element. Dakle, sve od početnog taga pa do završenog taga je HTML element. Uzmimo tag paragrafa npr.
1<p>Ovo je tekst paragrafa</p>
Postoje i tzv. prazni elementi, tj. elementi koji nemaju sadržaj i mogu se zatvoriti već u početnom tagu. Na primer, neki od praznih elemenata su: <br/>, <hr/>, <img/> i mnogi drugi.

HTML atributi

Atributi se mogu definisati unutar početnog taga koji će predstavljati neke dodatne informacije za sadržaj unutar taga. Najčešće se atribut definiše kao ime=”vrednost”. Na sledećem primeru ću definisati klasu za paragraf tag.
1<p class=”paragraf”>Neki tekst</p>
Ne mora da vas buni trenutno šta je klasa i čemu ona služi, ovde je fokus na atribut. Kao što rekoh, atribut najčeće dolazi u obliku ime=”vrednost”. U našem slučaju ime atributa je class dok je vrednost atributa paragraf. Takođe, elementi mogu imati i više definisanih atributa.

Struktura HTML dokumenta

Minimalna struktura HTML dokumenta obuhvata sledeće:
  • <!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>
Na DOCTYPE-u se neću mnogo zadržavati. DOCTYPE je deklaracija koja definiše u kojoj verziji je dokument napisan. Ne treba da vas buni šta sve ovde piše, ali ako želite da saznate više, posetite http://www.w3schools.com/tags/tag_doctype.asp
Svaki HTML dokument mora početi <html> i završiti se </html>. Takođe, unutar HTML mora postojati dva dela: zaglavlje (head) i telo (body) dokumenta. Zaglavlje služi za pružanje nekih informacija o dokumentu i neće biti prikazano u browser-u, dok sve što se nalazi u telu dokumenta, biće prikazano u web browser-u. Takodje, u zaglavlju mora postojati naslov dokumenta (title).
Sada ću na primeru pokazati kako se pravi prosta HTML stranica i kako možete videti izvorni kôd (source code) bilo kog sajta. Za potrebe ovog primera koristiću Notepad++ i Mozilla Firefox.

- Otvorite Notepad i ukucajte sledeće:

1<html>
2 
3</html>
Napomena
Pre nego što nastavim dalje sa kôdom, hteo bih da napomenem da praktikujete da zatvarate tagove odmah po otvaranju, u slučaju da zaboravite kasnije da zatvorite. U nekim programima se tagovi automatski zatvaraju (Aptana), ali neki to ne podržavaju.

- Unutar <html> </html> ukucajte sledeće:

1<head>
2 
3<title>Pocetna strana</title>
4 
5</head>
6 
7<body>
8 
9Neki tekst za probu
10 
11</body>
Ovim smo napravili prostu web stranicu. Sada sačuvajte fajl kako bi mogli da ga pregledamo. Idite na File > Save As… i za ime stavite index.html.

- Pokrenite neki od browser-a i otvorite fajl koji ste napravili. Idite na File > Open File… i pronadjite vaš fajl.

Kao što možete primetiti, sadržaj <title></title> taga se prikazuje u samom vrhu browser-a i pokazuje naziv stranice.
Sve što se nalazi između <body></body> taga biće prikazano u browseru:
Ukoliko odete na View > Page Source (skraćenica CTRL + U) videćete kôd koji smo prethodno uneli u fajl. To bi trebalo da izgleda ovako:
Ovim su prikazane neke najosnovnije stvari koje morate da savladate ako želite da nastavite sa učenjem HTML jezika a kasnije i pravljenjem web stranica.

у

Нема коментара:

Постави коментар