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 i Geany 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 i Opera.
     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 <p> govori da se radi o paragrafu teksta, dok oznaka <a> 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, dok zatvarajuć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:

<p>Ovo je paragraf.</p>

     <p> predstavlja otvarajući tag paragrafa, dok je </p> 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 <div>...</div>, <h1>...</h1>, <span>...</span> 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:
<div><p>Ovo je paragraf unutar div elementa</p></div>

     Nepravilno:
<div><p>Ovo je paragraf unutar div elementa</div></p>

     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:

<p>
Ovo je paragraf.
</p>

     Je isto što i:

<p>Ovo je paragraf</p>

     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.

14 comments:

  1. Svaka čast, imam veliku želju naučiti html i css, i javascript i vidjevši vaš stari blog odlučio sam to zbilja i učiniti. prešao sam vašu staru školicu nabrzake i baš ste potrefili "u dlaku" kad ste odlučili napisati ispočetka na lakši način, baš to trebam, hvala!

    ReplyDelete
    Replies
    1. Ako dobro baratas engleskim jezikom preporucujem ti HTMLDOG.com imaju dobre tutoriale za HTML CSS i JAVA script

      Delete
    2. Što se tiče tutorijala na engleskom w3schools.com je po meni dobar izbor.

      Delete
  2. A jel mozes ti ovo da napravis u PDF-u za download kako bi ga kasnije koristili mozda na telefonima itd.

    ReplyDelete
    Replies
    1. Dodao sam u donjem levom uglu posta opciju za štampanje i PDF.

      Delete
    2. Hvala. Postavio sam ti i na 6# ali evo i ovde.
      Kad hocu tri dela jednaka umesto Content i Sidebar-a kako da pisem kod ? Dal se dodaje samo jos jedan div (uz naravno drugacije imenovanje DIV elemenata) ili nesto drugo ? I kako ide kod za CSS kad se formatiraju ta tri elementa

      Delete
    3. Dao sam nekakav odgovor na 6. lekciji. Ne mogu da pisem kod u komentarima ali valjda ces da se snadjes.

      Delete
  3. Snasao sam se sa div sam sredio sve.Jel moze da se sve ovo radi u Adobe Dw ?

    ReplyDelete
    Replies
    1. Može, mada dreamweaver je alat za vizuelnu izradu sajta više nego za kucanje kodova. Ako samo želiš da odradiš neki sajt dreamweaver je dobra opcija. Ako želiš da učiš html/css onda gledaj da kucaš kod.

      Delete
    2. Bas je dobar ovaj Codecademy.com moze bas da se nauci dobro HTML i CSS.

      Delete
    3. Slažem se, odličan je sajt. Znao sam još jedan sličan projekat. Kad se setim objaviću...

      Delete
  4. bogdane skloni bre ovaj levi sidebar sa sredine terna,odvlači pažnju!

    ReplyDelete
  5. ups sa desne strane

    ReplyDelete