OPISNI JEZIK HTML Literatura Veb programiranje Dua Vukovi
OPISNI JEZIK HTML Literatura: Veb programiranje – Duša Vuković, Stanka Matković, Mijodrag Đurišić
• Sadržaji koji su nam dostupni na vebu najčešće se ne čitaju linearno. • Određene delove sajtova možemo da preskočimo koristeći linkove. • Ovako organizovan sadržaj koji se sastoji iz delova kroz koje je moguće nelinearno kretanje naziva sae hipertekst.
HTML • Jezik koji se koristi za opis veb-stranice je HTML – jezik za označavanje hiperteksta (engl. Hyper. Text Markup Language). • Svaki HTML dokument se sastoji od elemenata koji služe za opis logičke strukture hipertekstualnih dokumenata. • Elementima se predstavljaju naslovi, liste, paragrafi, tabele, linkovi i slično.
HTML • Elementi se sastoje od: otvorenog taga, sadržaja i zatvorenog taga. • Sadržaj elementa može da bude tekst i/ili drugi element sa svojim otvorenim tagom, sadržajem i zatvorenim tagom. • Tag je oznaka koja se piše uz sadržaj i kojom se sadržaj opisuje. • Svaki tag je zapisan između znaka manje i znaka veće: < i >
HTML • Otvoreni i zatvoreni tag se razlikuju samo po kosoj crti koja se pojavljuje u zapisu zatvorenog taga. • Npr. otvorenom tagu <title> odgovara zatvoren tag </title>. • Tag može da sadrži i atribute kojima se detaljnije opisuje element na koji se odnose. • Postoje i elementi koji nemaju sadržaj, npr. element koji opisuje prelazak u novi red: ili </br>.
• Svaki web browser ima u sebi mehanizam za tumačenje tagova. • Kada se stranica učita, web browser prepozna sadržaj i tagove, i tumačenjem tagova prikaže se sadržaj na način koji je tagovima opisan. Na taj način web browser izvršava zapis koji se nalazi u HTML dokumentu. • Ako želimo da vidimo taj zapis, tj. izvorni HTML kod neke stranice, možemo da izaberemo opciju View page source koja se pojavljuje na meniju koji se dobije kada se klikne desni klik bilo gde na veb-stranici.
Kreiranje statičkih veb-stranica • Najjednostavniji način kreiranja veb-stranice je upotrebom jednostavnih tekst editora (koristićemo Notepad++). • Na sledećoj stranici prikazan je kod jednostavne veb-stranice sa malo teksta.
Primer veb-stranice u HTML-u
Primer veb-stranice u HTML-u • Kada snimamo fajl, neophodno je da se promeni tip fajla, tako što se izabere All Files pod Save as type. • Ukoliko na stranici imamo i ćirilična slova, moramo izabrati UTF-8 kod Encoding stavke. • Kada se unese ime fajla, ono mora da se završava ekstenzijom. html ili. htm.
Primer veb-stranice u HTML-u • Informacije o kodiranju (registrovanju znakova) mogu da se uključe i u HTML kod nezavisno od editora koji se koristi: • <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> • Kada se dva puta klikne na snimljen fajl, pokreće se web browser koji otvara ovaj fajl kao veb stranicu.
Primer veb-stranice učitan u web browser-u
• Ukoliko želimo da menjamo HTML kod, potrebno je da isti fajl otvorimo ponovo uz pomoć tekst editora Notepad++ npr. • To možemo da uradimo tako što pokrenemo Notepad++ i izaberemo fajl preko opcije File/Open. • Možemo i da kliknemo na desni klik miša nad fajlom i izaberemo opciju Open with, a zatim pronađemo program Notepad++.
• U kodu možemo da uočimo da su nazivi manastirskih zgrada bili napisani u zasebnim redovima, a da se sada prikazuju jedna za drugom. • Svi web browser-i se pridržavaju pravila da ignorišu višak praznog prostora, što uključuje i prelaske u novi red. Ako želimo nešto da prebacimo u novi red, moramo da dodamo odgovarajući tag.
• Kreirana veb stranica je sačuvana na računaru. Ako želimo da ona bude vidiljiva na vebu, potrebno je da se postavi na neki veb server. • Često se to postavljanje naplaćuje, na godišnjem nivou.
Osnovni HTML tagovi • Na samom početku HTML dokumenta nalazi se deklaracija !DOCTYPE koja sadrži informaciju o tipu fajla. • Na internetu postoje različiti tipovi fajlova i ova deklaracija pomaže web browser-u da pravilno prikaže veb stranicu. • <!doctype html>
• Element HTML predstavlja celokupnu veb stranicu i u sebi sadrži sve druge elemente. • Označavaju ga otvoren i zatvoren tag HTML: <HTML> i </HTML>. • On sadrži i dva obavezna elementa: HEAD (zaglavlje, glava dokumenta) i BODY (telo dokumenta)
HTML ima sledeću strukturu <!doctype html> <head> Sadržaj glave </head> <body> Sadržaj tela koji se prikazuje u web browser-u </body> </html>
• Deklaracija i tagovi mogu da se pišu i velikim i malim slovima, ili kombinovano. • <html> • <HTML> • <Html>
• Veb stranice često imaju dosta sadržaja, i moguće su sitne greške. • Manje greške web browser ignoriše, kao i sadržaj koji se nalazi posle zatvorenog HTML taga. • Postoji više verzija HTML-a, a mi radimo u verziji HTML 5, preporučeni standard od 2014. godine.
Glava HTML dokumenta i tag HEAD • Glava nema sadržaj u vidu teksta, već u njoj mogu da se nalaze i drugi tagovi koji opisuju veb stranicu i njene veze sa drugim fajlovima. • Početak elementa HEAD označava otvoreni, a kraj zatvoreni tag HEAD. • U glavi HTML dokumenta mogu da se pojave sledeći elementi: LINK, META, SCRIPT, STYLE, TITLE.
TITLE • Element TITLE je obavezan i postavlja naslov veb stranice koji će biti vidljiv na jezičku web browser-a. • Zapisuje se između otvorenog i zatvorenog taga TITLE: <title> Manastir Studenica </title>
LINK • Element LINK se koristi za povezivanje veb stranice sa nekim drugim fajlovima. Npr, ukoliko je stil (vrsta i boja slova, boja pozadine…) definisan u zasebnom fajlu, u okviru ovog taga će se stranica povezati sa stilom.
META • Element META služi za opis veb stranice. • Primer ovog elementa videli smo kod opisa načina registrovanja znakova dokumenta. • Najčešće sadrži podatke koji opisuju veb stranicu: ko je autor, autorska prava, ključne reči za pretragu, opis. • Ovi podaci se nalaze u opisu atributa name i content.
Prošireni prvi primer HTML stranice
- Slides: 24