Uvod u HTML Hyper Text Markup Language

Uvod u WWW (World Wide Web)World Wide Web, ili skraeno Veb je danas jedan od najpopularnijih mehanizama za razmenu informacija meu ljudima. Pomou veb-a moemo prezentirati informacije koje se sastoje od rei, slika, video i audio zapisa - i sve to bez dodatnog softvera koji korisnik mora da instalira na svom raunaru - dovoljno je da ima bilo koji veb pretraiva (Internet Explorer, Firefox, Chrome, Opera i slino).Pored toga to putem Veb-a ljudi mogu da primaju informacije, oni mogu i da kreiraju sopstvene veb stranice i da na taj nain oni postaju izvor informacija za druge. Kreiranje veb stranica je jednostavno ako savladate nekoliko osnovnih HTML komandi. Za kreiranje veb stranica mogu se koristiti razni HTML editori kao to su Microsoft Visual Web Developer, FrontPage, Adobe Cold Fusion, Dreamweaver i sl. U ovom kursu emo se baviti HTML komandama i pisanjem HTML koda bez upotrebe specijalizovanih editora. Za programiranje HTML stranica bie vam potreban samo neki prost editor teksta (NotePad na primer)

ta je HTML ?HTML je skraenica od Hyper Text Markup Language, to se na srpski moe prevesti kao Jezik za oznaavanje hiper tekstova. Hiper tekstovi su tekstovi koji pored rei sadre i sliku, video i audio zapise. HTML je podskup jednog ireg jezika, SGML-a (Standard General Markup Language) i koristi se za definisanje izgleda World Wide Web dokumenata (stranica) kao i za uspostavljanje veza (linkova) meu dokumentima (podrazumeva se da dokument sadri tekst, sliku, zvuk, grafiku).

Osnovne HTML komandeU ovom delu bie opisane osnovne HTML komande i koraci koje treba preduzeti kako bi se neki dokument pripremio za prezentaciju na Veb-u.

HTML je jezik koji slui za opisivanje web stranica. Znai, HTML nije programski jezik, ve 'opisni' jezik. Osnova za kreiranje web stranice je poznavanje opisnog jezika HTML (HyperText Markup Language). HTML slui za izradu stranice a izgled se definie pomou CSS-a (CSS je skraenica od Cascading Style Sheets). Stilovi definisu kako ce izgledati HTML elementi.Sve to je potrebno za poetak imamo na raunaru a to je tekst editor (Notepad) i neki Web browser.

U sutini HTML dokument je obian tekstualni dokument sa ekstenzijom .htm ili .html, tako da se moe kreirati i u bilo kom od tekst editora, kao to su Notepad, WordPad, MS Word. Iako je izrada HTML stranica vrlo jednostavna, postoje pravila koja moramo znati i potovati ih pri izradi HTML dokumenata. Svaki HTML dokument sastoji se od deklaracija, elemenata i atributa elemenata. O deklaracijama rei emo vie u nekoj od sledeih lekcija, a sada emo se posvetiti elementima i atributima.

Elementi HTML-aElementima formiramo strukturu i opisujemo izgled delova sadraja HTML dokumenata. Elementi mogu da se nalaze bilo gde u okviru HTML dokumenta. Svaki elemenat sastoji se iz tri dela:poetni tag,sadraj izavrni tag.

HTML koristi tagove da pomou njih ukae pretraivau kako neki tekst ili slika treba da budu prikazani na ekranu. Tag je specijalna sekvenca znakova takozvani marker (Markup) koji je ograen znacima < i >. Zavrni tag razlikujemo od poetnog po znaku / (slash) . Svaki HTML dokument poseduje bar jedan element najvieg nivoa HTML tag. Na primer da biste napravili najjednostavniji HTML dokument, dovoljno je da pokrenete Notepad, unesete poetni i zavrni HTML tag, .

[prva.html-code] Prvi tag koji ste u ovom primeru upisali je . To govori vaem internet pretraivau da je to poetak jednog HTML dokumenta. Poslednji tag je , koji govori pretraivau da je to kraj HTML dokumenta.

Snimanje html datotekeNakon unoenja teksta jako je vano ispravno snimiti datoteku. Datoteka se snima komandom Save As iz menija File. Snimiemo ovaj dokument kao 'prva.html'.u Save in: padajuoj listi izaberite direktorijum u kojem elite da sauvate datoteku.

u File name: unesite ime datoteke sa ekstenzijom .html ili .htm, nema razlike (npr. prva.html )u Save as type: padajuoj listi izaberite All Files (obavezno)i konano u Encoding: padajuoj listi izaberite Unicode Univerzalni Unicode standard e ispravno snimiti i prikazati bilo koji set svetskih pisama.

Kada se ispravno sauva datoteka 'prva.html', moe se videti sa prepoznatljivom ikonicom Internet dokumenta i pogledati kako izgleda u web pretraivau (otvaranjem iz nekog web pretraivaa ili dvostrukim klikom na ime datoteke). Dvoklikom na ikonicu dokumenta prva.html otvorie se Internet Explorer (ili bilo koji drugi Internet browser koji je podrazumevan na raunaru) koji e prikazati potpuno praznu stranicu. Moemo da ga snimimo i kao obian tekstualni dokument pa da ga nakon snimanja preimenujemo u 'prva.html'.

Ukoliko elimo da nastavimo rad na web strani, potrebno je ponovo otvoriti datoteku uz pomo nekog tekst procesora (Notepad).

Struktura HTML dokumentaDa bi ova stranica ipak bila prava HTML stranica fali joj sadraj. Tag je okvir u kom se nalaze svi ostali tagovi. HTML dokument uvek poinje tagom , a zavrava se tagom .Postoje jo dva HTML elementa koji su visokog nivoa, odmah uz html tag. To su head i body tagovi. Ovim elementima opisuje se zaglavlje i telo HTML dokumenta

HEADU zaglavlju se definiu razni podaci koji uestvuju u komunikaciji Internet itaa i Internet servera, odnosno informacije o samom dokumentu (naslov, opis, kljune rei, ime autora, itd.). Mada je upotreba ovog taga opcionalna, preporuka je da se uvek navede. Browser ne prikazuje informacije koje se nalaze izmeu tagova i , osim sadraja taga .

Tekst izmeu tagova i je naziv ili ime HTML dokumenta. Taj tekst se ispisuje na vrhu prozora pretraivaa kao naslov (u naslovnoj liniji web browser-a) ili ime otvorenog prozora.Primer:

Naslov

BODYSve ono to se vidi u prozoru browser-a, tj. sadraj stranice i HTML elementi za formatiranje (opis) tog sadraja, nalazi se u telu dokumenta koje uokviruje tag. U HTML dokumentu sme da postoji samo jedan par tagova . Ovaj element specificira glavni sadraj dokumenta. Poetni tag ima atribute koji omoguavaju da se specificiraju karakteristike koje vae na nivou dokumenta (boja pozadine ili slika, boja teksta, boja poseenih i neposeenih linkova, itd.)

Komentar u HTML koduKomentari u HTML kodu se navode u sledeem obliku:

Komentar poinje sekvencom znakova (izmeu ova dva znaka moe doi i razmak). Sve to se nalazi izmeu ove dve sekvence znakova Web browser e ignorisati-nee prikazati.

Ispod se nalazi primer pravilno struktuiranog html dokumenta.[struktura.html-code]

Naslov

Tekst dokumenta.

Primer 1Koristei Notepad editor kreirati HTML dokument sa osnovnim delovima: zaglavljem i telom, koji e u:Web itau prikazati tekst:Ime i prezime. Dobar dan.U vrhu pretraivaa, kao naslov napisati:Gimnazija 9. MajDokument potom snimiti pod nazivom primer1.html u folderu D:\HTML\IV?.

HTML tagovi nisu osetljivi na velika i mala slova (URL jeste osetljiv). U veini sluajeva (osim kod formatiranog teksta) HTML ignorie blanko znake i prazne linije. Meutim, pogodno je da kada piete HTML kod stavljate prazne linije zbog lake itljivosti kada budete eleli da aurirate HTML kod.

Html tags ()Html tagovi su specijalne rei izmeu zagrada

Html tagovi se koriste u parovima kao i Prvi tag u paru je poetni tag, a tag sa kosom crtom - / zavrni tagIako se negde zavrni tag moe izostaviti, trebalo bi da se uvek koriste u paruHtml element se sastoji od para tagova, poetnog i zavrnog

Html Prazni html elementi su elementi bez sadraja, primer je Ovakvi elementi nemaju zavrni tag poto su prazni, pa je ispravan nain pisanja sa kosom crtom na kraju kao Iako bi element bio ispravno protumaen od svih brouzera ne savetuje se zbog buduih verzija brauzer-a koje e moda striktnije potovati standardeHtml elementi tagovi nisu case sensitive, na pr. je isto to i

Html- jednostavan primerNaslov web strane Naslov prvog nivoa Tekst paragrafa

wb .html wb browser-

Vidljivi deo web straneVidljivi deo web strane je izmeu tagova i Tagovi i oznaavaju najvea slova za naslov najvieg nivoaShodno tome, postoje h1(najvei) h6 (najmanji)Tagovi i oznaavaju paragraf deo teksta ispred i iza koga je po jedan prazan redZadnji tag nije neophodan (za sada) ali ga treba stavljati

Tagovi h1 h6This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

Tagovi h1 h6 web strana h1h6.htm

Novi red tag Tag oznaava novi red u okviru istog paragrafaRazlika u odnosu na paragraf je da se ne kreira prazan red izmeu. Tag je jednostavan - prazan tag koji nema zavrni tag, dakle nema, ne postoji Moe da se koristi i samo tag , ali se ne preporuuje, tj. preporuuje se za budunost, da ih budui itai mogu pravilno interpretirati

Tag horizontalna linijaThis is a paragraph1New line1 This is a paragraph2New line2 This is a paragraph3New line3

Tagovi za formatiranjeTagovi: bold - masna slova izmeu bold i regular uveana slova emphasized - naglaena slova italics kurziv kao pisana i zakoena slova umanjena slova subscript subskript, indeks superscript superskript, izloilac deleted izbrisana, precrtana slova inserted umetnuta slova

Atributi html elemenataHtml elementi mogu da imaju atribute koji sadre dodatne informacije o elementuAtributi se uvek navode u poetnom tag-uAtributi uvek idu u paru "ime/vrednost" kao npr: Naziv_Atributa="Vrednost_Atributa".Vrednosti atributa treba da uvek budu u navodnicima. Najee su to dvostruki navodnici , ali mogu biti i jednostruki navodnici. Atributi i vrednosti atributa razlikuju velika i mala slova, ali se preporuuje korienje malih slova.

Primeri atributa html elemenata definie poetak naslova. takoe definie poetak naslova ali ima i dodatne informacije da taj naslov treba da bude centriran u pregledau.

Primer:

Ovo je naslov

.

ili

Ovo je naslov .

definie telo jednog HTML dokumenta. ima i dodatnu informaciju o boji pozadine. Vrednost atributa bgcolor je naziv boje u zagradiPrimer:

Ovo je naslovOvo je paragraf.Prva reenica.Druga reenica.

Za opisivanje boje se esto koriste posebne oznake, npr. za crvenu boju to znai vrednost atributaCOLOR=#FF0000.Ove oznake mogu se nai na sajtu:http://www.computerhope.com/htmcolor.htm

Html colors 16777216 boja u html-u

Takoe, moemo ubaciti sliku kao pozadinu, ali slika koju elimo da ubacimo mora da se nalazi u istom folderu gde je i HTML dokument.

tekst.

Primer

U koliko se slika ne nalazi na istom folderu gde je i HTML dokument, neophodno je navesti lokaciju slike (put do nje)

Moj prvi naslov! Moj prvi naslov

Html links - vezeHiperveze-linkovi su vaan deo svih HTML dokumenata objavljenih na WWW. Ove veze se koriste da bi povezale stranice sa nekim drugim resursima na WWW. Taj resurs moe biti druga stranica, slika ili e-pota.Tekst hiperveze se obino prikazuje u drugaijoj boji da bi se razlikovao od ostalog teksta i po pravilu je podvuen. Kada se miem prelazi preko teksta hiperveze kursor se menja, obino u simbol ake,kako bi ukazao na to da biranje tog teksta vodi do nekog povezanog materijala.

Za kreiranje linka nam treba anchor element (a je skraeno od anchorsidro). Atributi ove oznake su: href - (hyperlink reference) ija vrednost predstavlja lokaciju HTML dokumenta koji elimo da prikaemo u itau kada se na vezu klikne (lokaciju na koju se preusmerava Web pretraiva kada korisnik klikne na link). Ako dokumente snimamo u isti direktorijum dovoljno je da se navede samo naziv dokumenta.target oznaava na koji nain e se otvoriti ovaj link.

Primer:Napraviti dokument strana1.html na kojem e se nalaziti tekst: KLIKNI OVDE. Zatim, kreirati dokument na kojem e se nalaziti neka slika (npr smiley.jpg) i taj dokument snimiti kao strana2.html.Hipervezom povezati ova dva dokumenta tako da kada se u dokumentu strana1.html klikne na tekst: KLIKNI OVDE, u Web itau se prikae dokument strana2.html.Takoe, klikom na sliku smajlija u dokumentu strana2.html, vratiti se na dokument strana1.html

Strana1.html:

KLIKNI OVDE

Strana2.html:

U koliko elimo da napravimo hipervezu ka nekom sajtu (npr nae Gimnazije), vrednost atributa href je Web adresa Gimnazije9. maj - www.9maj.edu.rs:Primer:

Ovo je link za sajt Gimnazije 9. maj

Rezultat:Ovo je link za sajt Gimnazije 9. maj.

Ako elimo da se povezana strana preko hyperlink-a otvori u novom prozoru, koristi se atribut target sa vrednou elementa "blanktarget="blank"Primer:

Ovo je link za sajt Gimnazije 9. maj

Link na druge vrste dokumenataOsim na html strane, hyperlink moe da pokazuje i na neke druge dokumente file-ove koji nisu tipa html.Ako browser ne ume da otvori takav dokument, ponudie mogunost download-a takvog dokumenta ili izbor aplikacije koja eventualno moe da otvori takav dokument pdf dokument ili mp3, avi itd. Takoe, moe da se napravi link za slanje email-a na neku adresu

Link za slanje email-aAtribut href moe da se koristi i za otvaranje e-mail sa zadatom adresom za primaoca.Primer

Gimnazija 9.maj,Ni Web: 9maj.edu.rsEmail usAdresa: Jeronimova 18Telefon: +38118254088

Html imagesSlike se postavljaju na html stranu sa praznim elementom (image slika) sa sledeim atributima:src predstavlja lokaciju slike.alt opcioni atribut koji obezbeuje alternativni tekst koji se ispisuje i bie prikazan na mestu predvienom za prikazivanje slike ukoliko uitavanje slike na HTML stranicu ne uspe iz bilo kog razloga ili ako je korisnik onemoguio prikaz slike u svom web pretraivau.

Slika se pojavljuje na onom mestu u dokumentu na kome se nalazi element. Atribut alt se koristi za prikaz teksta ako slika iz nekog razloga ne moe da se prikae, to je dobra praksa. Sintaksa img elementa je sledea: .

primer:

gde je "Slike/" lokacija slike, a gitara.jpg je ime slike koja se uitava, a Slika gitare alternativni tekst.SRC="slika.gif" znaci da se slika nalazi u istom folderu u kome je i HTML dokument.

Za podeavanje dimenzija slike koristimo height (visina) i width (irina) atribute. Ako ne upiemo nista iza cifara za visinu i irinu, podrazumevana vrednost je u pikselima (px): Na ovaj nain moemo sliku prikazati i u drugaijoj dimenziji od njene originalne veliine. Takoe se deava da se, ukoliko nisu unete visina i irina slike, tokom uitavanja slike, veliina nekoliko puta promeni, to moe izazvati "skakutanje" sadraja na stranici.

Primer:

Postoji apsolutno i relativno adresiranje, ali o tome nee sada biti rei.

Kako da vidimo neki HTML izvorni kod

Da bi saznali kako su napravili neku internet stranicu, kliknite na padajui meni VIEW i iz padajueg menija odaberite opciju SOURCE. Otvorie se novi prozor u kom e biti ispisan HTML izvorni kod te stranice.

Internet stranicaNapraviemo direktorijum na D disku (HTML) u koji treba smestiti stranicu i sve objekte koje ugraujemo u nju. U HTML ubaciti jednu sliku po izboru sa diska, pa emo je preimenovati u Slika1 (u naem primeru slika je tipa jpg, ali moe bitii nekog drugog tipa-recimo png ili gif. Naravno, tada mora svuda gde se u HTML kodu pojavljuje ime Slika1.jpg zameniti sa Slika1.png ili Slika1.gif, u zavisnosti od tipa slike koju smo iskopirali).

Napraviemo Internet stranicu na kojoj pie 'Zdravo HTML svete!'.Otvorite novi Notepad dokument i ukucati sledei kod:

Moja Internet stranica

Zdravo HTML svete!

hspace ="30" vspace ="10" border ="2Za obezbeenje dodatnog prostora izmeu slike i teksta mogu se koristiti atributi hspace i vspace . Vrednosti se zadaju u pikselima. vspace se odnosi na marginu ispod i iznad, a hspace se odnosi na marginu levo i desno od slike.Atributom border se podeava veliina okvira (u pikselima) koji e biti iscrtan oko slike. Ako se postavi vrednost 0, onda slika nee imati okvir.

*