Dnevnik eklektika - Piše Dragan Babić

Osnove (x)html-a

Kako početi učiti html?

Eh, da sam samo imao negde da pročitam ovo što ću ja upravo sada napisati pre jedno četiri godine. Ja sam kao i mnogo drugih ljudi krenuo sa učenjem markapa onako neplanski, neorganizovano, nesistematizovano, krljao sam, pokušavao da pravim neke stranice uz pomoć raznih alata, poklanjajući malo pažnje značenju sadržaja koji obeležavam markapom, a to je upravo i najbitnije.

Markap (u kom god pakovanju da ga preferirate – html, xhtml, xml…) je neraskidivo i apsolutno povezan sa sadržajem. Tu nema spora. Ono što je veoma bitno je da postanete svesni šta je u stvari taj sadržaj, šta predstavlja, šta znači, dakle semantika.

Semantika je ključna reč za markup jezike, jer vi zapravo kada pišete html kôd, označavate sadržaj, i opisujete ga, stoga su i markup jezici s pravom nazvani opisnim jezicima.

Vrlo rado pravim analogiju sa tipografijom kada se radi o ovoj temi – vi ne možete odraditi knjigu (napraviti prelom, odlučiti se za pismo, kompoziciju stranice…) ukoliko je niste pročitali i razumeli njen sadržaj. Šta vi u stvari označavate odlučuje o tome kako i sa čim ćete ga označiti i opisati.

Prvi koraci

Vaši prvi koraci bi definitivno trebali da budu informisanje i učenje semantike markap jezika (ili njegove varijante). Na taj način ćete steći vrlo dobru osnovu za kasnije baratanje markapom i opisivanje sadržaja, izbeći zablude tipa „Šta je div, šta je layer, tabele za layout…”, a da ne pominjemo da u samom startu eliminiše one nezgodne loše navike koje dosta ljudi stekne u početku i koje se jako teško odbacuju.

Dakle morate se navići da automatski prepoznajete vrstu sadržaja i onda nemate brigu da ćete negde pogrešiti.

Primer izrade Web stranice

Pokušaću da vam dam što bolji savet oko samog procesa pravljenja Web stranice, koji je opet diskutabilan, jer su pristupi različiti, ali čisto kao primer – ovo je moj način.

Recimo da vam je dizajner dao layout stranice iz fotošopa, u .psd fajlu i vaš posao je da ga prebacite u (x)html.

1. Odredite glavne sekcije stranice (header, footer, glavna kolona, sporedni sadržaj…) i odlučite se za njen markap. Logično je da ove delove označite elementima div (div – page division).
2. Odredite i označite markapom sadržaj tih sekcija zasebno (meniji, podmeniji, naslovi, liste…). Dobra praksa je konstruisati menije uz pomoć neuređenih listi (ul) jer su meniji u stvari liste linkova. Odlučite se za nivoe naslova. Ja recimo h1 koristim samo jednom na stranici za naslov stranice, a h2 za naslov glavnog sadržaja na toj stranici (unos u blogu recimo), h3 za podnaslove u unosu, itd. Definition liste (dl) su dobre za pravljenje sekcija sadržaja u sidebarovima recimo.
3. Kada ste označili sav sadržaj možete da krenete sa dodavanjem css-a i formiranjem željenog layouta, dodavanjem dekorativnih elemenata, itd. Ovaj korak proizilazi iz prethodna dva jer morate da obratite pažnju na to da trebate imati dovoljno elemenata kako bi mogli da ostvarite željeni layout, ali opet nikako ne trebate dodavati ekstra markap samo da biste postigli neke fancy forice u dizajnu.

Jedna od najvažnijih stvari koje morate prihvatiti je činjenica da Web stranice nisu pregledavane samo od strane drugih ljudi i samo na kompjuterskim monitorima. Kada sam pisao članak veoma sličan ovom postavio sam i jedno pitanje vezano za nagli porast korisnika koji će Web stranice sve više posećivati sa svojih mobilnih telefona i sličnih naprava, i oni direktno zavise od kvaliteta markapa koji ste vi napisali, jer je dobro struktuirana stranica čitljiva, pregledna i razumljiva u svakom kontekstu, a kako se stvari odvijaju i kako su usmerene kontekst je king.

Tekst ilustrovao Dule – slikar/ilustrator i student (još malo) Akademije umetnosti iz Novog Sada.
Kontaktirajte ga u vezi poslovnih ponuda.

• « Novo na Dnevniku - Ilustracije
• Opera 9.1 nasledila gamma png boljku? (Ipak ne) »

Komentari na ovaj unos 12

1. Eniac kaže 17/01/07 02:48 AM

   Odlican tekst iz razloga sto je stvarno puno ljudi kojima je ovo nepoznanica. Mozda bi trebalo da imas vise ovakvih tekstova jer bi time privukao mnogo siru populaciju… Ali opet možda i izgubio neku postojeću… Trade off… jebiga

   Btw… Ilustracije su keeeva :) Hvala ti za ovakav blog

2. Dragan Babić kaže 17/01/07 08:40 AM

   

   Hvala Eniac. U suštini ja sam napisao par tekstova na ovu temu (uvod u html i css) i mislio sam da je to to, tj. da će koga god interesuje otići i pročitati te članke, međutim nisam uzeo u obzir da ne prate svi ljudi ovaj blog od početka i da ne znaju da oni uopšte postoje (pretragu ne znam da li neko koristi ovde). U svakom slučaju nije bilo loše da napišem još jedan tekst makar i samo kao skretanje pažnje ili podsećanje na ono što sam pisao ranije.

   Što se tiče publike – ima ovakvih tekstova na blogu, ali publika se mahom skuplja oko malo drugačije tematike. :)

3. Zoran Zlokapa kaže 17/01/07 12:12 PM

   Heh, ja bi samo prije svega ubacio nešto tipa: „Zaboravite sve što mislite da znate o web dizajnu, html-u i css-u! Zaboravite Dreaweaver, a pogotovo FrontPage!” :)
   Na moju nesreću, sretao sam se sa likovima koji su govorili kako oni „kuže” web dizajn pa mi krene slagati sajt eksportujući html iz fireworks-a (jel se tako zove program??).
   E, takvim tipovima obavezno po dvije, tri pleske preko frnjokalice prije nego im se išta krene objašnjavati.
   Jesam ja skrenuo sa teme? Nema veze, morao sam se izlajati negdje :)

   Živjeli momci!

4. Eniac kaže 17/01/07 01:29 PM

   To je zaista zanimljivo kod blogova, pises stalno u jednom ruhu, i kao uhodas se, i onda slucajno napises drugaciji tekst i javi se par 10 ljudi sto je za nase uslove prilicno… Marfi ili sta vec… :)

   Inace imam kvalitetnu kompilaciju od 100 pesama iz 90 domace + strane haha

5. Nemanja Cosovic kaže 17/01/07 06:42 PM

   Meni je zaista drago da si se bas ti Dragane odlucio da pises o „how to html/css” temama.
   Previse je i starih i mladih web developera koji grese, i ne zele da isprave svoje greske. Navika je cudo.

   Ipak za neke od njih markap i semantika je spansko selo. Da li bi mogla postojati neka legenda i prevodi da lakse shvate?

   @Zoran:
   Ti tipovi verovatno i na zalost nece dolaziti i citati ovaj blog. :(
   Ja se ipak nadam da ce se i to promeniti.

6. Goran Mitic kaže 17/01/07 08:35 PM

   U razgovoru sa Eniax-om provukla se priča da nedostaje sajtova tipa HtmlDog na srpskom. Mislim da bi takav korak doneo dosta opšteg dobra za nove generacije, da što više klinaca nauči HTML i CSS, kao i njihovu pravilnu upotrebu. Definitivno prolazi vreme FrontPage (table) dizajna ali baš zbog toga sto su neki ljudi seli i W3C standarde pretakali u lako čitljive sajtove prilagođene kako početnicima tako i naprednim korisnicima. Jedna od mojih omiljenih pojava kao i dobar je http://webstandardsgroup.org/ . Za one koji ne znaju, jezgro ekipe čine australijanci i novozelanđani koji su napravili bum sa izdanjima kao ivrlo čestim seminarima koje organizuju. Veoma često podkastuju prezentacije tako da time, na neki način kreiraju buduće trendove.

   Pozdravljam tvoj tekst jer podržava celu ovu priču. Na kraju ako Srbija kao i ex-YU države nemaju sredstava da se globalno bave visoko-tehnološkim proizvodima kao što su automobili, kompjuteri itd, za softver ne trebaju velika ulaganja, možemo biti nalik Irskoj ;).

7. pitchweis kaže 20/01/07 07:51 AM

   Eto, Dragane, pokušavam da pronađem analogiju da bi nekom mogao da objasnim kako se prave sajtovi, ali mi nije palo sledeće na pamet:

   „Vaši prvi koraci bi definitivno trebali da budu informisanje i učenje semantike markap jezika (ili njegove varijante). Na taj način ćete steći vrlo dobru osnovu za kasnije baratanje markapom i opisivanje sadržaja, izbeći zablude tipa „Šta je div, šta je layer, tabele za layout…”, a da ne pominjemo da u samom startu eliminiše one nezgodne loše navike koje dosta ljudi stekne u početku i koje se jako teško odbacuju.”

   Pošto ja ne znam, hajde mi kaže u čemu je ključna razlika između html -a i xhtml -a?

   Pozz

8. Siniša kaže 20/01/07 08:01 PM

   Čini mi se da si odmah u startu pogrešno postavio stvari. Nije „naš” posao da dizajn iz .psd fajla prebacimo u HTML, nego je posao dizajnera da dizajnira već više-manje gotovi markup.
   Tako barem ja gledam na to :)

9. Dragan Babić kaže 21/01/07 11:54 AM

   

   @ pitchweis: Odgovoriću na tvoje pitanje u sledećem unosu koji sam već počeo da pišem, ima dosta da se kaže pa je malo preveliko za komentar, a ovako će se lakše naći i biti kao referenca.

   @ Siniša: Ne kapiram šta hoćeš da kažeš. Ja ne znam kako ti sebe postavljaš na tržištu i kako tumačiš svoju profesionalnu ulogu, ali ja na primer osobito volim da pretvaram psd dizajne u xhtml stranice. Ne vidim kako to „ne ulazi u naš posao”, mislim to ne ulazi u okvir tvog posla ako ti to ne želiš, ali to je druga priča.

   Loša je situacija kada dizajner nije iskusan u radu na Webu pa ti pošalje loše isplaniran i dizajniran layout, pa ti moraš da koriguješ „na svoju ruku”, tu dolazi do problema, ali ako je dizajner dobar – to samo olakšava tvoj posao.

10. Siniša kaže 27/01/07 02:49 AM

    Ma i ja volim da pretvaram dobre psd-ove u html. Samo sam htio reći da je pametnije prvo napraviti „čisti” html dokument i onda ga dati dizajneru na obradu.
    Inače, dobar post :)

11. Miroslav kaže 30/11/07 01:23 AM

    Pitanja u uvodu su ono sto ja neznam i sto mi treba, ali si ih postavio vise nego sto si dao odgvora. Daj primer u praksi KAKO napraviti meni?

    Zahvalan bih bio na odgvor mailom

    HVALA

    PS – Eto mog bloga u potpisu, tamo mi treba meni da organizujem teme

12. Dragan Babić kaže 30/11/07 09:54 AM

    

    Milane imaš po netu izobilje resursa i sajtova koji nude tutorijale i gotova rešenja na tu temu.

Komentariši unos “Osnove (x)html-a”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.