17 mart 2022

HTML – Web dizajn kurs

Slobodan MirićEdukacija, HTML i CSS, Web dizajn kurs 1

Iz kojeg kod ugla krenete da se bavite vebom, jedno je sigurno da HTML ne možete da izbegnete. Ali ono što je opet ohrabrujuće je da je on lak i da ćete ga naučiti za nekoliko dana. Ono što mi preporučujemo da se on paralelno uči sa CSS-om jer ako planirate da se bavite, web dizajnom, front endom u globalu ali i WordPressom. Sami page bilderi su zapravo CSS okviri koji služe za izradu layouta sajta i ako ne znate CSS, zapravo nikada ozbiljno nećete moći ni da radite WordPress. Nećemo ovde pisati o istorijatu za to malo imate Wikipediju i treba da znate da je iza njega World Wide Web Konzorcijum koji se bavi njegovom standardizacijom. Trenutno smo u verziji HTML 5 koja je na sceni još od 2008 godine.

HTML - Hyper Text Markup Language

Kao što vidite iz naslova HTML nije programski jezik, ne donosi odluke – on nam je struktura svake stranice i zapravo stranice bez CSS-a bi bili izgledom kao neki Word dokument. Zapravo kako pišemo liniju po liniju koda browser tako čita i na taj načim servira posetiocu nekakav izgled. Ovde imamo jedan pojam browser, što je zapravo veb pretraživač i pomenućemo najvažnije Google Chrome, Internet Explorer, Firefox, Chrome, Opera, Edge i drugi. Zapravo HTML, CSS i Javascript su jezici koje direktno procesuira browser i na taj način treba da zapamtimo da su to jezici koji su sa strane klijenta, dok imamo nasuprot njima serverske tehnologije: PHP, Java, Ruby….Javascript pored html-a koji donosi strukturu i css-a koji se bavi stilizacijom donosi interaktivnost i to je moć ove trojke, možemo da pravimo potpune veb aplikacije. Najvažnije je znati da sa „zdravom“ html strukturom možemo lako dalje da napradujemo i izadi veb sajtova i aplikacija.

A naša tema HTML je ništa drugo nego jezik kojim pomoću tagova, po naški oznaka pravimo strukturu i videćete da je to veoma lako (nisam sreo nikoga za 4 godine koliko se bavim edukacijom da neko nije naučio HTML). Oznake su prva stvar koju treba da shvatimo i unutar <> znakova stavljamo željeno ime taga i na taj način formatiramo sadržaj. Većina tagova mora da ima i zatvarajuće oznake </> gde je razlika u tome da imamo unutar znakova <> i kosu crtu /. Kada dođemo do konkretnih tagova rećićemo koji nemaju zatvaranje. Sami tagovi su ništa drugo nego komande kojom govorimo pretraživaču koja je namena našeg sadržaja. Sintakasa samog jezika je laka i potrebno je veoma kratko vreme da se usvoji.

Video koji nam za sat ipo vremena prezentuje HTML jezik

Predlažemo da posle pogledanog videa, a može i pre pročitate tekst u nastavku u kojem smo još dodatno i tekstualno pojasnili HTML.

Kako početi rad u HTML-u?

Da bi krenuli da pišemo kod neophodan nam je text editor i mi ćemo na ovom kursu koristiti Visual studio code, moderan i editor koji je potpuno ušao u „narod“ potpuno je gurnuo u drugi plan sve ostale, ali i svakako vi možete da koristite i Atom, Sublime text, pa i Notepad++. VS code ima odlične extenzije i rad u njemu će vam biti ugodan, za početak instalirate Live server i možete da uživate u kodiranju. Ne morate svaki put da klikate Save, možete u opciji File da čekirate opciju Auto save i možete u stvarnom vremenu da pratite rezultate rada bez osvežavanja dokumenta u browseru. Sve stvari o kojima pišemo obradili smo u video lekcijama kursa praktično.

U osnovnoj strukturi HTML-a imamo prvo deklaraciju koja nam govori da se nalazimo u verziji 5 HTML-a i to je <!DOCTYPE html>. Važno je da ovo bude prvi red u kodu.
Prvi element u stablu naše strukture je <html> koji ima i svoj zatvarajući tag </html> i između njih se smešta celokupan kod stranice. Unutar otvarajučeg html taga imamo i atribut (o njima ćemo malo kasnije, ali inicijalno oni nam donose dodatne informacije o tagu unutar kojeg se nalaze) lang koji zadaje jezik na kojem će biti stranica.

Između html oznaka imamo ugnježden tag koji spada u osnovnu strukturu i to je <head> tag koji takođe ima i zatvarajući </head>. Drugi neophodan tag unutar osnovne strukture je <body> koji takođe ima zatvarajući tag </body>. Unutar head taga ćemo pored opštih informacija o html dokumentu i spoljnih datoteka stilova i skripti ili favicona dodati jedan neophodan tag koji će biti naslov strane i to je <title> tag koji jel tako isto ima i zatvarajući </title>.

Ceo vidljivi deo sadržaja stranice smeštamo u <body> tag koji smo pomenuli kao drugi neophodan deo uz head tag kao osnovu html dokumenta.

Najkorišteniji tagovi

Od mnoštva koje imamo u HTML-u imamo neki koji su prosto pretežni oni zapravo nose većinu strukture i to su H tagovi za naslove, paragrafi P, liste OL, UL i LI, zatim A tag za linkove, IMG tag za slike, kao i vrlo koristtan tag za novi red BR.

H tagovi idu od h1 do h6, <h1></h1> je najveći, a <h6></h6> najmanji. Naslovi su u osnovi sa stilom bolda.

P tagovi / paragrafi su nosioci većine tekstualnog sadržaja, a kada želimo nabrajanje tu koristimo neuređene i uređene liste, UL (unoredered lists – neuređene liste) i OL (ordered lists – uređene liste). Imamo i definition liste, ali one nisu deo priče ovog osnovnog kursa.

Linkovi su u opštem smislu veoma važni jer omogućuju kretanje u okvirima jednog veb sajta tako i u povezivanju različitih veb lokacija. A tag <a href=““></a> nam služi za povezivanje i ima jedan neophodan atribut href koji definiše putanju.

I od tagova koji spadaju u grupu najkorištenijh je i tag za slike <img src=““ alt=““> koji ima dva obavezujuća atributa, prvi je src i to je u stvari putanja do slike, a alt je alternativni tekst koji će se učitati ako slika iz nekog razloga ne može da se očita.

Građenje izgleda i gradivni elementi

Tabele su u začetku bile glavni oblik uređenja sadržaja gde smo sa njima uređivali izgled u redove i kolone i u radnim danima veba su bile veoma korisne u od velike pomoći. Posle je div elemenat preuzeo dominaciju u građenju blokova, a od verzije html 5 dolazi niz semantičkih elemanata koji su alternativa jednom elementu za tu namenu. Gradivni elementi zapravo su tagovi koji služe za grupisanje elemenata i to je zapravo glavni posao veb dizajnera da dobro strukturiše elemente i napravi i lep layout i zdravu strukturu koja je kasnije zgodna za dinamičku obradu.

Tag za tabele je <table> </table> i za redove koristi <tr> </tr> tagove, a ćelije unutar redova, ćelije koristimo <td> </td> tagove. U primeru koji smo radili koristili smo <th> </th> tagove da u prvom redu istaknemo naslove. Nisu to svi tagovi, ali u ovom osnovnom kursu ćemo se na njima zadržati.

Kontakt forme

Kontakt forme su akcija koju naše stranice imaju sa korisnicima. Sastoje se od polja za unos podataka, dugmad. Form tag <form></form> je elemenat koji okuplja polja i on je njihov nosioc,<input> tagovi (nema zatvarajući) služe za interakciju pomoću kojih korisnici unose tražene podatke i za to nam služi type atributi (text, email, password, radio, checkbox, color, date, time, range, search, submit), dok nam atribut placeholder služi da unutar polja upišemo željeni tekst.

Semantika

Pominjali smo već DIV (divison) tag koji je bio prvi način za pravljenje gradivnih elemenata i onda su došli u verziji 5 main, header, footer, aside, section i article koji imaju istu ulogu kao i div, ali imaju konkretnije značenje koje browseru daje uputstvo kako lakše da razume strukturu. Imali smo ranije mnoštvo divova za puno klasa što browseru ne znači ništa. Ali iz ugla programera, mnogo je lepša za oko nova html5 struktura. Div je samo značenje odeljka, dok na primer header i footer odmah i vizuelno i značenjski govore da je nešto zaglavlje i podnožje, aside da je neki sidebar tj sadržaj koji je bočni, mnogo je lakše tumačenje strukture i sadržaja. Do nas je da sa elementima koje imamo što bolje napravimo organizaciju stranica.

Semantičke elemente ćemo posebno dodatno odraditi u posebnom blog postu, i napraviti poređenje kako je ranije bilo, a kako je sada. Ovde bi polako i završili ovaj članak. Sledi stilizacija u narednom tekstu 😉