Tehnička škola Požega

  • Povećaj veličinu slova
  • Normalna veličina slova
  • Smanji veličinu slova
Početna

Osnovno o HTMLu

HTML

Osnova World Wide Weba je HTML. Ovdje ćemo vam pokušati objasniti što je to zapravo, i kako funkcionira, a u ostalim lekcijama iz ovog područja potražite ostalo.

HTML nije programski jezik

Dakle, ne morate biti programer da biste napravili web stranicu. Sad vam je sigurno lakše. HTML je u stvari sustav dogovorenih oznaka, takozvanih tagova, pomoću kojih zadajemo različite elemente stranice.

Web stranica je u osnovi najobičniji tekst dokument (s nastavkom htm ili html...) U taj dokument po određenim pravilima ubačene su te html oznake.

Kad takvu stranicu otvorimo nekim web preglednikom (Internet explorer, Firefox, Opera,...) taj web preglednik interpretira te oznake i prikazuje ih na način dogovoren standardima.

Kako izgleda HTML kod pojedine stranice možete se uvjeriti ako odaberete naredbu view source (prikaži izvorni kod) u vašem web pregledniku. Iako se to uglavnom tad čini jako komplicirano, brzo ćete se uvjeriti da uglavno nije tako.

Što mi sve treba za izradu HTML stranice?

Notepad. Zapravo HTML stranice možemo napraviti u bilo kojem tekst editoru. Naravno, pri izradi složenijih stranica to baš i nije najpametnije rješenje pa postoje specijalni HTML editori. Bolji HTML editori rade na takozvani WYSWYG (What You See is What You Get) način: preko raznih traka s alatima, wizarda, i sličnog vi radite na stranici i pri radu odmah vidite stranicu kao što će ona izgledati u web pregledniku. Za to vrijeme, editor automatski kreira html oznake i kod.

Najpopularniji takvi editori danas su:

Nekoliko osnovnih tagova

Iako će vaš preglednik ispravno učitati i prikazati i obični tekst dokument, pri izradi stranice često koristite neke tagove koji naizgled ne rade ništa. Oni su potrebni da bismo odresili strukturu dokumenta i osigurali njegov ispravan prikaz u svim preglednicima.

Tagovi koji će se sigurno naći u svakom dokumentu su:

<html> određuje početak i kraj dokumenta

<head> određuje početak i kraj zaglavlja dokumenta

<body> određuje početak i kraj tijela dokumenta

Svaki HTML dokument trebao bi se sastojati od zaglavlja (sadrži elemente stranice koji nisu direktno vidljivi) i tijela dokumenta (sadrži vidljive elemente stranice).

Dakle to će izgledati otprilike ovako:

<html>
<head>
<title>Moja prva stranica</title>
</head>
<body>
<p>probni odlomak teksta</p>
</body>
</html>

Vidimo da se za pisanje tagova koriste znakovi < i >. Svi ovdje prikazani tagovi su parni: postoji npr tag <p> koji kaže da na tom mjestu počinje odlomak i tag </p> koji kaže da na tom mjestu završava odlomak.

Osim parnih postoje i neparni tagovi koji se ne pojavljuju u paru i koji kosu crtu sadrže iza slova koje određuje tag, primjer: tag <br /> koji služi za prelazak u novi red.

Tag <title> u zaglavlju dokumenta zadaje naslov stranice koji je vidljiv u traci naslova web preglednika.

Nekoliko osnovnih pravila

Preporuke i standardi W3Ca se vremenom mijenjaju, neke od stvari koje ćemo sad nabrojati i nisu uvijet za funkcioniranje stranice, no najbolje se držati postojećih standarda.

Tagovi se pišu malim slovom!

To je po najnovijem standardu. Ipak, svi preglednici će razumjeti i <BR /> kao i <br />.

Tagovi moraju biti ispravno zatvoreni

Tag koji je kasnije započet mora biti prije zatvoren, ne smiju se zatvarati unakrsno.

Neparni tagovi trebaju sadržavati kosu crtu (oznaku zatvaranja). Ipak preglednici će vam ispravno prikazati prelazak u novi red i ako ga napišete ovako: <br> , no to ne znači da biste to i trebali raditi.

Većina preglednika će znati savladati i situaciju kad ne zatvorite tag <p>, no po novim standardima i on mora imati završetak: </p>.

Atributi uvijek u navodnike

Poneki tagovi imaju male dodatke - atribute koji su specifični za svaki pojedni tag. Na primjer slike se u dokument ubacuju tagom poput ovog:

<img src="/slika.jpg" />

Naravno nije dovoljno reći "ovdje ubacujem sliku", treba i odrediti datoteku slike, a to je atribut za tag img. Img je neparni tag (primjetite kosu crtu na kraju!).

Deklaracija

Na početku dokumenta, čak prije <html> taga treba deklarirati html dokument redom poput ovog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ukoliko radite u nekom pametnijem editoru, on će vam to napraviti automatski, odmah po stvaranju novog dokumenta.

Da ponovimo:

  • HTML nije programski jezik već skup standardiziranih oznaka koje služe za određivanje elemenata web stranice
  • svaki dokument se sastoji od zaglavlja i tijela dokumenta
  • tagovi se pišu malim slovom i uvijek moraju biti zatvoreni
  • naučili smo što znače tagovi <html>, <head>, <body>, <title>, <p>, <img> i <br> .
  • HTML kod svake stranice možemo vidjeti naredbom view source web preglednika. Ukoliko želite analizirati kako je poneka stranica napravljena, pokušajte snimiti kompletnu stranicu na vaše računalo i otvoriti je u Dreamweaveru, no prethodno savladajte još poneku lekciju.