HTML je kratica za Hypertext Markup Language (jezik za označavanje hiperteksta) . To je poseban jezik koji se koristi za izradu web stranica. Kada posjetite web stranicu, računalo čita HTML kako bi vam prikazalo riječi, slike i poveznice. Zamislite HTML kao građevne blokove web stranice. Baš kao što koristite Lego kockice za izgradnju kuće ili automobila, mi koristimo HTML oznake za izgradnju web stranice.
HTML je kôd koji računalu govori kako prikazati tekst, slike, videozapise i poveznice na web stranici. To je kao davanje uputa prijatelju koji crta sliku za vas. HTML koristi riječi unutar kutnih zagrada, koje se nazivaju oznake , za označavanje početka i kraja dijela web stranice.
Svaka web stranica koju posjetite koristi HTML na neki način. Bez HTML-a ne bi bilo web stranica koje biste mogli vidjeti. HTML pomaže u organiziranju sadržaja i govori računalu kako prikazati stranicu. To je prva stvar koju se nauči u web razvoju jer omogućuje funkcioniranje interneta!
HTML dokument ima posebnu strukturu. Počinje deklaracijom pod nazivom <code><!DOCTYPE html></code> koja računalu govori da stranica koristi HTML. Zatim se dokument dijeli na dva glavna dijela: zaglavlje i tijelo.
Vrlo jednostavan HTML dokument izgleda ovako:
<code><!DOCTYPEhtml>
<html>
<glava>
<title>Moja prva web stranica</title>
</head>
<tijelo>
<p>Pozdrav, svijete!</p>
</body>
</html> </code>
U ovom primjeru, odjeljak <head> daje naslov stranice, a odjeljak <body> je mjesto gdje stavljate sadržaj koji se pojavljuje na zaslonu.
HTML koristi oznake za označavanje različitih dijelova web stranice. Oznaka je riječ unutar kutnih zagrada. Na primjer, <code><p></code> govori računalu da ono što slijedi je odlomak. Kada završite odlomak, koristite završnu oznaku, <code></p></code>, kako biste označili kraj.
Element u HTML-u sastoji se od početne oznake, dijela sadržaja i zatvarajuće oznake. Na primjer:
<code><p>Ovo je odlomak.</p></code>
Svaka oznaka upućuje web preglednik kako prikazati sadržaj.
U HTML-u postoji mnogo oznaka. Neke od najčešćih su:
Atributi pružaju dodatne informacije o HTML elementu. Dodaju se početnoj oznaci unutar kutnih zagrada oznake. Najčešći atributi su src i alt koji se koriste s oznakom slike.
Na primjer, za dodavanje slike možete napisati:
<code><img src="picture.jpg" alt="Lijepa slika"></code>
Ovdje src govori pregledniku gdje se nalazi slikovna datoteka, a alt daje opis slike ako se ne može prikazati.
HTML dokument je podijeljen na dva dijela:
Linkovi vam omogućuju prelazak s jedne stranice na drugu. U HTML-u linkove stvaramo pomoću oznake <a> . Atribut href unutar oznake govori pregledniku odredište linka.
Na primjer:
<code><a href="https://www.example.com">Posjetite Example.com</a></code>
Kada kliknete na ovu poveznicu, vaš preglednik će otvoriti web-stranicu example.com .
Slike uljepšavaju web stranicu i čine je zanimljivijom. Za dodavanje slike koristite oznaku <img> . Imajte na umu da oznaka <img> nema završnu oznaku.
Evo kako dodajete sliku:
<code><img src="suncokret.jpg" alt="Svijetli suncokret"></code>
Ovaj kod govori pregledniku da prikaže sliku suncokreta. Atribut src pokazuje na lokaciju slike, a atribut alt daje opis slike.
Popisi organiziraju informacije u uredan format. U HTML-u postoje dvije glavne vrste popisa:
Evo primjera neuređenog popisa:
<code><ul>
<li>Jabuka</li>
<li>Banana</li>
<li>Trešnja</li>
</ul> </code>
A evo i primjera uređenog popisa:
<kod><ol>
<li>Prvi</li>
<li>Drugi</li>
<li>Treći</li>
</ol> </code>
Tablice pomažu u prikazu informacija u retcima i stupcima. Korisne su kada trebate usporediti podatke ili navesti stavke u mreži.
Evo jednostavnog primjera HTML tablice:
<code><table border="1">
<tr>
<th>Ime</th>
Dob
</tr>
<tr>
<td>Alice</td>
10
</tr>
</table> </code>
U ovoj tablici, <tr> definira redak tablice, <th> se koristi za zaglavlje tablice (podebljani tekst), a <td> se koristi za podatke tablice (ćelije).
HTML vam također omogućuje dodavanje multimedije poput zvuka i videa. Pomoću oznake <audio> možete uključiti zvučne datoteke. Pomoću oznake <video> možete ugraditi video playere na svoju web stranicu.
Evo primjera koda za ugradnju videa:
<code><video width="320" height="240" kontrole>
<source src="film.mp4" type="video/mp4">
</video> </kod>
Ovaj kod stvara video player s gumbima za reprodukciju, pauziranje ili promjenu glasnoće. Atribut controls upućuje preglednik da prikaže te gumbe.
Svaka web stranica na internetu izrađena je pomoću HTML-a. Zamislite da posjećujete web stranicu svoje škole, stranicu sa zabavnom igrom ili čitate online priču. HTML radi iza kulisa kako bi rasporedio tekst, slike i ostali sadržaj tako da ih možete jasno vidjeti.
Na primjer, kada na internetu vidite sliku svog omiljenog lika iz crtića ili kliknete na poveznicu kako biste pročitali više o nekoj zabavnoj temi, HTML je tu da to omogući.
Pogledajmo jednostavan projekt. Zamislite da želite napraviti malu web stranicu o svojoj omiljenoj životinji, poput mačke. Možete uključiti naslov, odlomak o mačkama, sliku, pa čak i poveznicu na web stranicu sa zabavnim činjenicama o mačkama.
Vaš HTML kod može izgledati ovako:
<code><!DOCTYPEhtml>
<html>
<glava>
<title>Moja omiljena životinja</title>
</head>
<tijelo>
<h1>Sve o mačkama</h1>
<p>Mačke su razigrane i mekane. Vole spavati i predi. Mnogi ljudi vole imati mačke kao kućne ljubimce.</p>
<img src="cat.jpg" alt="Slatka mačka">
<a href="https://www.catfacts.com">Saznajte više o mačkama</a>
</body>
</html> </code>
Ovaj projekt koristi naslove, odlomke, slike i poveznice. Pokazuje kako se HTML koristi za izgradnju cjelovite web stranice s mnogo dijelova.
Dok HTML gradi strukturu web stranice, postoje i drugi alati koji web stranicama daju zabavan izgled i ponašanje.
Iako danas učimo o HTML-u, poznavanje CSS-a i JavaScripta pomaže nam da shvatimo kako se izrađuju web stranice.
Dok istražujete HTML, pronaći ćete mnoge druge oznake. Evo još nekoliko koje trebate znati:
Ove oznake vam daju veću kontrolu nad načinom na koji se vaš sadržaj prikazuje na web stranici.
HTML se mnogo promijenio od svog nastanka. Tijekom vremena dodano je mnogo novih oznaka i značajki. Svaka nova verzija HTML-a olakšava izradu složenih i lijepih web stranica. Danas HTML radi zajedno s CSS-om i JavaScriptom kako bi izgradio moderne web stranice koje su zabavne za korištenje i izgledaju sjajno.
Ova evolucija znači da je HTML jednostavan za učenje i dovoljno moćan za izradu svega, od jednostavnih web stranica do složenih web aplikacija.
Iako je učenje HTML-a zabavno, uvijek je važno ostati siguran na internetu. Kada posjećujete web stranice ili istražujete online sadržaj, ne zaboravite uvijek zatražiti pomoć odrasle osobe ako niste sigurni u vezi nečega. Vaša sigurnost je na prvom mjestu, a učenje HTML-a uvijek bi trebalo biti zabavno i sigurno iskustvo.
Pogledajmo neke važne pojmove koje ste danas naučili:
HTML se koristi u mnogim stvarnim okruženjima. Evo nekoliko primjera:
Ovi primjeri pokazuju kako je HTML vrlo koristan alat u mnogim dijelovima svakodnevnog života.
Danas smo naučili da je HTML skraćenica za Hypertext Markup Language (Jezik za označavanje hiperteksta) . To je osnovni jezik koji se koristi za izradu web stranica. Evo ključnih točaka koje treba zapamtiti:
HTML je temelj svake web stranice koju vidite na internetu. Pomoću jednostavnih građevnih blokova poput oznaka i atributa možete stvoriti zabavne i interaktivne stranice. Kako budete nastavili učiti, vidjet ćete kako HTML pomaže oživjeti web stranice, čineći internet korisnim i uzbudljivim mjestom za istraživanje.
