Obrađeno HTML i CSS za početnike .docx

HTML/CSS za početnike #1 - Uvod u HTML U sledećoj seriji lekcija potrudiću se da apsolutnim početnicima na najlakši mogući način opišem izradu jednostavnog web sajta. Za izradu sajta pomoću ovih lekcija biće vam potrebna samo dobra volja i jedan program za obradu teksta kao što je Notepad, mada preporučujem naprednije programe kao što je Notepad++ za Windows korisnike iGeany za korisnike Linux sistema. Naravno biće vam potreban i internet pretraživač da bi mogli da pogledate rezultate vašeg rada. Pretraživači koje ja preporučujem su Firefox iOpera. Pošto izrada svake web stranice kreće sa izradom HTML dokumenta i ja ću da krenem sa HTML-om. Šta je HTML? HTML je skraćenica od Hyper Text Markup Language, što nam govori da HTML nije programski jezik, već jezik oznaka (eng. Markup - Oznaka). Da pojasnimo, HTML koristi oznake (tagove) da opiše različite elemente internet stranice. Na primer, HTML oznaka govori da se radi o paragrafu teksta, dok oznaka predstavlja link. Pisanje HTML tagova (oznaka) HTML tagovi se pišu unutar znakova < i > i postoje otvarajući i zatvarajući tagovi.Otvarajući tag ima ulogu da označi početak nekog elementa web stranice, dokzatvarajući tag označava kraj istog elementa. Otvarajući tag takođe može da sadrži i neke dodatne parametre elementa ali o tome ćemo kasnije. Sada je najbolje da vidimo jedan primer elementa web stranice. Neka to bude paragraf: Ovo je paragraf. predstavlja otvarajući tag paragrafa, dok je zatvarajući tag istog paragrafa. Kao što vidite otvarajući i zatvarajući tagovi se razlikuju po tome što zatvarajući imaju znak / ispred imena taga. Primeri tagova su još i ..., ..., ... i tako dalje. Postoje i izuzeci koji nemaju zatvarajući tag ali sa njima ćemo se upoznati kasnije. HTML elementi mogu se “usađivati” jedan u drugi i pri tome se mora voditi računa redosledu zatvaranja elemenata. Primer: Pravilno: Ovo je paragraf unutar div elementa Nepravilno: Ovo je paragraf unutar div elementa Kao što vidite kada se jedan element nalazi unutar drugog, treba da bude upisan unutar istog kompletno, zajedno sa zatvarajućim tagom. To znači da se elementi zatvaraju suprotnim redosledom od redosleda otvaranja. Otvarajući i zatvarajući tagovi ne moraju da stoje u istom redu i broj praznih redova između tagova i unutar tagova nema nikakvog efekta na izgled web stranice. Na primer: Ovo je paragraf. Je isto što i: Ovo je paragraf Da rezimiramo, u ovoj lekciji saznali smo šta je HTML i šta su HTML tagovi (oznake). Takođe smo naučili neka pravila pisanja HTML tagova. U sledećoj lekciji počećemo sa izradom prvog HTML dokumenta i u hodu ćemo se upoznavati sa nekim HTML tagovima.

HTML/CSS za početnike #2 - Struktura HTML dokumenta U prethodnoj lekciji upoznali smo se sa HTML-om i naučili osnovnu sintaksu pisanja HTML tagova. U ovoj lekciji videćemo koji su to elementi koje svaka HTML stranica mora da sadrži i počećemo sa izradom prvog HTML dokumenta našeg web sajta. Struktura HTML dokumenta Sadržaj svakog HTML dokumenta nalazi se između ... tagova. Skoro sve što je izvan ovih tagova niti se prikazuje niti ima bilo kakav uticaj na web stranicu. Kažem skoro sve jer postoji jedan izuzetak i to je takozvana “doctype deklaracija” koja se piše na samom početku dokumenta i izgleda ovako: Doctype deklaracija u suštini i nije HTML tag već instrukcija internet pretraživaču koja mu govori o kakvom se dokumentu radi i nema zatvarajući tag. Primer deklaracije koju sam ja naveo govori pretraživaču da se ispod nje nalazi HTML5 dokument. Za HTML4 postoje tri tipa deklaracija i jedna od njih izgleda ovako: o ovome možete pročitati OVDE. Unutar ... tagova svaki HTML dokument sadrži “glavu” i “telo”. Glava HTML dokumenta se nalazi između ... tagova, dok se telo nalazi unutar... tagova. Glava HTML dokumenta se ne prikazuje na samoj web stranici ali sadrži neke bitne parametre sa kojima ćemo se upoznavati u hodu dok je telo sama web stranica koju mi vidimo pomoću internet pretraživača. Da bi vam sve bilo jasnije počećemo sa samom izradom dokumenta. Početak izrade web sajta Za početak napravite jedan folder na vašem računaru u kome ćete smeštati dokumente. Zatim otvorite program za obradu teksta (Notepad++, Notepad, Geany... U daljem tekstu “text editor”) i krenite sa unosom HTML koda. Na samom početku unesite doctype deklaraciju za HTML5: i ispod deklaracije osnovne elemente koje smo već opisali





Rekli smo da glava HTML dokumenta sadrži neke parametre dokumenta. Jedan od tih parametara je naslov stranice. Naslov se piše unutar ... tagova. Unesite sledeće u head sektor dokumenta:

Moj prvi sajt Naslov stranice je obavezan u HTML5 dokumentu i definiše naziv stranice u internet pretraživačima, a takođe se prikazuje i u Google i sličnim pretragama. Unećemo još jedan red u head sektor dokumenta, ispod naslova, i to je: