KRATKI 'CRASH COURSE'
Mala škola HTML-a
objavljeno: 10. ožujka 2017.
Upoznavanje s HTML-om [1. lekcija]
HTML – skraćeno za HyperText Markup Language – je ukratko jezik weba, jezik kojim se grade web stranice. HTML jezikom se zapravo pišu znakovne datoteke koje web preglednici (Internet Explorer, Google Chrome, Mozilla Firefox, Opera, Safari – ili neki od stotina manje poznatih web preglednika) čitaju i prikazuju kao web stranice.
Analizom imena dolazimo do:
• HyperText – linkovi, veze ili poveznice kojima se krećemo po webu.
• Markup – HTML jezik se sastoji od tagova. Tagovi su riječi koje označuju tekst (najčešće s obje strane poput zagrada) i daju mu neku ulogu ili svojstva.
Kao u sljedećem primjeru:
<b>Podebljano</b> – riječ Podebljano bit će u web preglednicima prikazana masnim tekstom jer je omeđena početnim tagom <b> i završnim tagom </b> koji joj daju to svojstvo.
• Language – HTML je jezik sa svojom sintaksom i pravilima.
Napravimo jednostavnu *.html znakovnu datoteku (kod možete jednostavno kopirati i zalijepiti u notepad ili neki drugi jednostavni tekstualni editor):
<html>
<head>
<title> Ovo je naslov stranice</title>
</head>
<body>
Ovo je tijelo stranice
</body>
</html>
Objašnjenje:
<html></html> – sav kod u *.html datotekama mora biti između ova dva taga, inače se stranica neće ispravno učitati.
<head></head> – Svaka web stranica je podijeljena na sekcije. Unutar <head></head> tagova su podaci o stranici, takozvana head sekcija. Najčešći podatak je unutar <title> </title> tagova i predstavlja naslov stranice prikazan u naslovnoj traci web preglednika.
<body></body> – Druga sekcija svake stranice naziva se body sekcija ili tijelo stranice. U toj sekciji su svi podaci koji se prikazuju u prozoru web preglednika, tu se stavlja sadržaj koji želimo prikazati na stranici.
Spremite ovaj kod u datoteku s .HTML ekstenzijom i otvorite ju. Datoteka će se otvoriti u vašem web pregledniku. U naslovu vašeg preglednika piše naslov web stranice Ovo je naslov stranice – tekst unutar <title> </title> tagova. U samoj stranici je samo tekst Ovo je tijelo stranice koji smo stavili unutar <body></body> tagova. U idućem članku ćemo proširiti našu stranicu novim tagovima.
………………………………
Web kao usluga se mijenjao pa tako danas govorimo o verziji 2.0 , 3.0 ili čak 4.0. U svakoj od tih verzija web stranica je uvijek izgrađena HTML jezikom – uz proširenje nekim drugim tehnologijama poput php-a, aspx-a, javascripta itd… Kako se mijenjao web, mijenjao se i HTML jezik pa je danas aktualna verzija HTML 5.0 koja je donijela nove tagove s podrškom za, na primjer, multimediju. Neki od novih tagova su <video>, <audio> ili <canvas>.
………………………………
Head zaglavlje sekcija HTML dokumenta [2. lekcija]
U ovom dijelu pozabavit ćemo se detaljnije ( <head></head> ) head (zaglavlje) sekcijom HTML dokumenta. Tagovi koji se koriste unutar zaglavlja HTML dokumenta su takozvani metadata tagovi – tagovi koji sadrže podatke o podatcima. Takvi tagovi se ne prikazuju u tijelu stranice, a osim <title></title> taga (objašnjen u prvom članku) ne prikazuju se nigdje.
Tagovi koje ćemo objasniti (postoje i drugi tagovi za <head> sekciju) u ovom članku:
• <style> odnosno <link>
• <meta>
• <script>
<style> tag se koristi da bi se definirala svojstva, odnosno promijenio izgled tagova koji se koriste u tijelu web stranice.Na primjer:
<style>
b {color:red;}
</style>
Ovaj kod unutar <head> taga bi promijenio to da je sav mastan tekst na stranici sada i crvene boje. Međutim, kako se web sjedišta (siteovi) sastoje od mnogo stranica, nepraktično je izgled definirati unutar same stranice. Izgled se, umjesto toga, opisan ovakvim pravilima izdvaja u posebnu datoteku s *.css ekstenzijom. CSS stoji za Cascading Style Sheets – što je samo po sebi poseban jezik kojim se mijenja izgled tagova na web stranicama. Prednost CSS-a je što se izgled definira na jednom mjestu, a može se primijeniti na bilo koji broj web stranica. Također, u slučaju da želimo promijeniti izgled cijelog web sjedišta – sada to možemo napraviti na samo jednom mjestu. *.css datoteke se u *.html datoteke uključuju pomoću <link> taga. Recimo da imamo style.css datoteku u kojoj je definiran izgled tagova, ovako bismo ju povezali u <head > sekciji:
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<meta> tag služi za postavljanje informacija o stranici koje, na primjer, koristi web tražilica ili sam web preglednik. Primjer unutar <head > sekcije bi mogao izgledati ovako:
<meta charset=”UTF-8″>
<meta name=”description” content=”osnove HTML-a “>
<meta name=”keywords” content=”HTML,CSS,JavaScript”>
<meta name=”author” content=”Školska knjiga”>
<meta charset=”UTF-8″> – govori web pregledniku da naša stranica koristi utf8 kodnu tablicu za prikaz znakova (utf8 je dobar izbor jer podržava hrvatske znakove).
<meta name=”description” content=”osnove HTML-a “> – opis stranice koji će se prikazati, na primjer, rezultatima pretraživanja na Googleu.
<meta name=”keywords” content=”HTML,CSS,JavaScript”> – ključne riječi po kojima će web tražilice pronaći stranicu
<meta name=”author” content=”Školska knjiga”> – podatci koji će definirati autora web stranice.
………………………………
Pisanje HTML koda u običnim uređivačima teksta jako brzo može postati jako zbunjujuće, zato se često koriste posebni tekstualni editori koji svojom obojenom sintaksom olakšavaju korisniku rad i snalaženje u linijama koda. Dobar primjer su (potpuno besplatni) programi poput editora Bluefish dostupnog na web adresi http://bluefish.openoffice.nl/index.html ili Notepada++ dostupnog na web adresi https://notepad-plus-plus.org/ .
………………………………
Najčešći tagovi i izgled teksta [3. lekcija]
Red je i da se detaljnije pozabavimo najčešćim tagovima koji se pojavljuju u tijelu stranice i koji određuju izgled teksta:
• <p></p>
• <span></span>
• <h1…6></h1…6>
• <a></a>
<p></p> tag služi za označavanje paragrafa, odnosno odlomka teksta. Tekst unutar tagova bit će odvojen od ostalih redaka. Za svaki tag se pomoću CSS-a može definirati izgled teksta unutar taga, na primjer ako u tag dodamo style=“color:red;“ :
<p style=“color:red;“ >
Unutar ovog odlomka teksta slova će biti obojena crvenom bojom jer smo tag za paragraf prilagodili pomoću CSS-a.
</p>
<span></span> tag služi za označavanje i mijenjanje izgleda teksta (također pomoću, na primjer style=“color:green;“ ) unutar retka to jest dijela rečenice. Pogledajmo na primjeru:
<p style=“color:red;“ >
Unutar ovog odlomka teksta slova će biti obojena crvenom bojom jer smo tag za paragraf prilagodili pomoću CSS-a.<span style=“color: green;“ > Ovaj dio smo promijenili span elementom</span>
</p>
Tagovi <h1>, <h2>, <h3>, <h4>, <h5>,<h6> stoje za engleski header i označavaju različite veličine naslova. Najveći naslov označava <h1>, a najmanji <h6>. Proširimo svoju <body> sekciju s nekoliko naslova:
<h1> Ovo je glavni naslov </h1>
<h6>Ovo je podnaslov</h6>
Unutar svih tagova možemo mijenjati izgled, odnosno svojstva sadržaja pomoću ključne riječi style. Na primjer promijenimo:
<h1 style=“color:yellow ;“ > Ovo je glavni naslov </h1>
<h6 style=“color:blue;“ >Ovo je podnaslov</h6>
Tag <a></a> je tag koji najčešće koristimo. Služi za stvaranje hiperveze (linka). Unutar <a></a> taga se može staviti tekst koji postaje link, ali se može staviti i drugi sadržaj poput, na primjer, slike. Poput svih ostalih tagova, može se mijenjati osnovni izgled pomoću ključne riječi style. Za razliku od gore spomenutih tagova <a></a> tag ima neke obavezne elemente unutar svog otvarajućeg taga <a>:
<a href=“www.google.hr“ > Link na google.hr</a>
U kodu <a href=“www.google.hr“ > href dio pokazuje web adresu na koju će nas hiperveza odvesti kada kliknemo na nju.
Od češćih tagova koji se koriste pri radu s tekstom valja spomenuti i </br> tag koji prebacuje tekst u novi redak, <hr> te koji povlači vodoravnu liniju:
<p style=“color:red;“ >
Unutar ovog odlomka teksta slova će biti obojena crvenom bojom jer smo tag za paragraf prilagodili </br> pomoću CSS-a.<span style=“color: green;“ > Ovaj dio smo promijenili span elementom</span>
</p>
<hr>
………………………………
U praksi je, kao što smo spomenuli u prethodnom članku, komplicirano mijenjati izgled tagova u html datoteci. Zato se izgled tagova sprema u odvojenoj CSS datoteci. Ali, što ako jedan te isti tag treba izgledati drukčije na istoj stranici? Tagovi se mogu proglasiti klasom taga, ili se identificirati pomoću ID svojstva. To omogućuje da se za svaku klasu ili ID taga definira drugačiji izgled unutar CSS datoteke. Na primjer:
<p class=“odlomak“ >
Unutar ovog odlomka teksta slova će biti obojena crvenom bojom jer smo tag za paragraf prilagodili </br> pomoću CSS-a.<span ID=“diorecenice“ > Ovaj dio smo promijenili span elementom</span>
</p>
………………………………
Pozicioniranje sadržaja [4. lekcija]
U ovom dijelu pozabavit ćemo se pozicioniranjem sadržaja u <body> sekciji. Problem s pozicioniranjem u HTML-u je u tome što će se sadržaj uvijek tretirati kao tekst koji se piše od početka do kraja retka. To, naravno, ne odgovara potrebama dizajna, pa se sadržaj može pozicionirati, na primjer, tablicom. Osnovni tagovi pri izgradnji tablice:
• <table> – otvarajući tag za tablicu, označava početak tablice
• </table> – zatvarajući tag za tablicu, označava kraj tablice
• <tr> – otvarajući tag za redak, označava početak retka
• </tr> – zatvarajući tag za redak, označava kraj retka
• <td> – otvarajući tag za ćeliju, označava početak ćelije
• </td> – zatvarajući tag za ćeliju, označava kraj ćelije
Osim tagova koji se koriste pri izgradnji tablice, gotovo je uvijek nužno koristiti neke njihove atribute:
• border=”0″ – svojstvo taga table <table> koje se koristi za definiranje debljine linije tablice. U ovom primjeru to je 0, što znači da je linija tablice nevidljiva pa imamo dojam da je sadržaj nalijepljen na neku poziciju u tijelu stranice iako je zapravo u ćeliji nevidljive tablice.
• width=“150px“ – svojstvo <td> i <table> taga. Određuje širinu ćelije u pixelima.
• height=“50px“ – svojstvo <td> i <table> taga. Određuje visinu ćelije u pixelima.
• align=“center“ – svojstvo <td> taga. Određuje poravnanje sadržaja u ćeliji. Moguće vrijednosti su: center, left, right.
• valign=“middle“ – svojstvo <td> taga. Određuje vertikalno poravnanje sadržaja u ćeliji. Moguće vrijednosti su: middle, top, bottom.
Pogledajmo primjer jedne jednostavne tablice:
<table border=”1″ width=”450″>
<tr>
<td width=”150″ height=”150″ valign=”top” align=”left”> Sadržaje je poravnan gore lijevo u ćeliji. </td>
<td width=”150″ height=”150″></td>
<td width=”150″ height=”150″></td>
</tr>
<tr>
<td width=”150″ height=”150″> </td>
<td width=”150″ height=”150″ valign=”middle” align=”center”> Sadržaje je poravnan u sredinu ćelije vodoravno i okomito.</td>
<td width=”150″ height=”150″></td>
</tr>
<tr>
<td width=”150″ height=”150″> </td>
<td width=”150″ height=”150″></td>
<td width=”150″ height=”150″ valign=”bottom” align=”right”> Sadržaje je poravnan dolje desno u ćeliji.</td>
</tr>
</table>
U prilogu možete provjeriti kako ovaj kod za tablicu generira tablicu pomoću koje pozicioniramo sadržaj u <body> sekciji.
………………………………
Ovakav način pozicioniranja sadržaja se danas već smatra zastarjelim. Umjesto toga koriste se tablice oblikovane pomoću CSS-a. Također, moguće je uopće ne koristiti tablice za pozicioniranje. Pozicioniranje u tablicama je zamijenjeno posebnim tagom za spremnik:<div></div>. <div> tagu se pomoću CSS-a može dati bilo koji položaj, širina, visina ili izgled.
………………………………
HTML koncept u kombinaciji s drugim web tehnologijama [5. lekcija]
Sada ćemo objasniti HTML koncept s kojime se često susrećemo u kombinaciji s drugim web tehnologijama. Na primjer, kada šaljete mail u nekom webmailu, ili postavljate profilnu sliku na nekoj društvenoj mreži, vi zapravo koristite <form></form> element HTML-a, odnosno formu. Valja napomenuti da je na takvim web sjedištima HTML samo dio slagalice kojim unosite podatke, a samo slanje poruke ili elektroničke pošte obavlja neki serverski skriptni jezik poput PHP-a ili ASPX-a.
Kombinacija HTML-a, CSS-a, serverskih skriptnih jezika i javascripta (programski jezik samog web preglednika) i gotovo uvijek neke baze podataka je ono što poznajemo pod nazivom web 2.0.
Pogledajmo tagove od kojih HTML slaže forme – obrasce za unos i slanje podatka:
• <form> – otvarajući tag za formu.
• </form> – zatvarajući tag za formu.
• <input> – označava elemente forme u koje unosimo sadržaj koji će forma poslati. Postoji više tipova <input> elementa koji služe za prenošenje različitih sadržaja (teksta, slika itd.).
Sam <form> tag ima nekoliko svojstava koja su nužna da fb forma radila:
• action=”stranica_koja_obraduje_formom_poslane_podatke” – zapravo veza na stranicu koja će obraditi podatke poslane . Ta stranica je zapravo skripta u nekom od serverskih skriptnih jezika.
• method=“GET“ – određuje način na koji će se podatci poslati na obradu skripti. Vrijednost GET znači da će podatci biti pri prijenosu skripte prikazani u linku (URL-u stranice), dok bi POST vrijednost značila da će biti skriveni golom oku pri prijenosu, tj. neće biti vidljivi u URL-u stranice.
Pogledajmo primjer forme (bez skripte koja bi primila i obradila podatke, naravno, jer to ne spada u HTML):
<form action=” stranica_koja_obraduje_formom_poslane_podatke” method=“GET“>
Ime:<br>
<input type=”text” name=”ime” value=”Vaše ime”><br>
Prezime:<br>
<input type=”text” name=”prezime” value=”Vaše prezime”><br><br>
<input type=”submit” value=”Pošalji podatke”>
</form>
Izgled forme možete vidjeti u priloženoj datoteci. Napominjemo da forma ne radi jer pod svojstvo action je navedena nepostojeća skripta.
………………………………
Danas živimo u svijetu u kojem web 2.0 tehnologije zalaze, često i previše (Facebook, Twiter itd.). Ako ste zainteresirani za učenje, preporučili bismo vam besplatnu platformu PHP (skriptni jezik)/MYSQL (baza podataka)/APACHE (web server koji se instalira na vaše lokalno računalo). Ta kombinacija je potpuno besplatna i možete je pronaći na http://www.wampserver.com
………………………………
PRIREDIO: Milan TROSKOT, nastavnik informatike | OŠ Bartula Kašića, Zadar
Diplomirao na Fakultetu organizacije i informatike u Varaždinu 2007 i stekao zvanje diplomirani informatičar. Autor je članaka te web, windows i najnovije pomalo android developer.
