Osnove HTML-a

Svi znamo što je HTML i nećemo trošiti vrijeme na objašnjenje istoga. Idemo na nešto konkretno, napraviti prvu web stranicu. Napravite datoteku test.php, nije bitno gdje će ista biti smještena. Svaka HTML datoteka mora započeti sa <html> i završiti sa </html>.

Zapravo gotovi svi tagovi u HTML jeziku započinju sa <tag> i završavaju sa </tag> gdje se umjesto tag stavlja oznaka tag-a: html, head, title, body, table, tr, td, div, span itd.

Uzmimo slijedeći primjer:

<html>
     <head>
          <title>Hello Croatia</title>
     </head>
     <body>
          <span style="color:red;">HELLO CROATIA</span>
     </body>
</html>

U ovom primjeru vidimo da na početku imamo <html> i na kraju </html>. Nadalje imamo <head> tag u kojemu smo definirali <title> tag koji određuje naslov stranice. I onda imamo <body> tag u kojega se smješta sadržaj stranice (ono što vide korisnici kada otvore stranicu). Ovaj primjer će samo prikazati crvenim tekstom HELLO CROATIA.

Vidimo da imamo SPAN tag. On se koristi za oblikovanje pojedinih dijelova teksta. Naš SPAN ima atribut style kojime smo definirali da je boja teksta crvena. Za određivanje boje najbolje je koristiti hexadecimalne oznake, za crvenu boju to je #FF0000. Prve dvije znamenke/slova određuju intezitet crvene, druge dvije intenzitet zelene i zadnje dvije intenzitet plave boje. U heaxadecimalnom sustavu imamo 16 znamenaka: 0-9 i A,B,C,D,E,F gdje je F najveća vrijednost. 

Probajte se malo igrati sada i isprobavati razne boje i dodati tekst sa različitim bojama.

Atributi

Svaki HTML tag može imati više atributa. Najvažniji atributi su:

  • id - identifikacijska oznaka elementa - može poslužiti za definirane CSS-a za taj element ili za dohvaćanje elementa putem JavaScripta. ID oznaka mora biti unikatna, samo jedan element može imati jedan ID.
  • name - naziv elementa - koristi se uglavnom u formama, a njih ćemo proći kasnije
  • class - jedna ili više CSS klasa koje definiraju izgled elementa.
  • style - određivanje izgleda elementa inline
<html>
     <head>
          <title>Hello Croatia</title>
          <style tyle="text/css">
               .crveni-tekst{color:#FF0000;}
               .sivi-obrub{border:1px solid #DEDEDE;}
               #moj-id1{background-color:#00FF00; color:white;}
               body{font-size:22px;}
          </style>
     </head>
     <body>
          <span class="crveni-tekst sivi-obrub">HELLO CROATIA</span>
          <div id="moj-id1">DIV ELEMENT</div>
     </body>
</html>

U ovom primjeru unutar <head> smo definirali <style> tag gdje smo definirani CSS za 3 selektora:

  • .crveni-tekst
  • .sivi-obrub
  • #moj-id1

Postoji nekoliko vrsta selektora, u ovisnosti sa kojom oznakom kreću:

  • Ukoliko selector kreće sa točkom (npr .crveni-tekst) tada će on djelovati na sve elemente koji u sebi imaju atribut class="crveni-tekst", class može sadržavati i više elemenata class="crveni-tekst sivi-obrub" kao što je u primjeru gore
  • ukoliko selector kreće sa # tada se on odnosi na ID elementa, npr #moj-id1 se odnosi na element koji ima atribut id="moj-id1"
  • ukoliko selector ne kreće ni sa točkom ni sa # tada on određuje sve elemente sa nekim tagom. U gornjem primjeru imamo definirano body{font-size:22px;} to će cijelom tekstu unutar <body> taga postaviti veličinu fonta na 22 px

To bih bilo to za ovaj dio. Sada bih bilo dobro da malo isprobavate selektore i definirate izgled za različite elemente. Shvaćanje selektora je vrlo bitno, jer se ne koristi samo za CSS, nego je koristan i za JavaScript.