Osnove HTML-a

HTML (HyperText Markup Language) je osnovni jezik kojim se izrađuju mrežne stranice. Omogućuje opisivanje izgleda i sadržaja stranice pomoću tzv. HTML oznaka (tagova).

Što je HTML?

HTML je jezik kojim web-preglednici (kao što su Chrome, Firefox, Edge) prikazuju sadržaj – tekst, slike, video, poveznice itd. HTML dokumenti sadrže oznake koje određuju kako će sadržaj izgledati.

HTML5 je najnoviji standard u području HTML jezika nastao sa željom da se poboljša prikazivanje višemedijskih sadržaja na jednak način u različitim preglednicima i uređajima (npr. računalo, tablet, pametni telefon).

HTML oznake možete pisati i malim i velikim slovima.

Osnovna struktura HTML dokumenta

HTML dokument započinje i završava s oznakom <html>. Sastoji se od dvije osnovne cjeline:

  1. Zaglavlje stranice – <head>
    Sadrži informacije o stranici: jezik, naslov, povezane datoteke itd.
  2. Tijelo stranice – <body>
    Tu se nalazi glavni sadržaj: tekst, slike, videozapisi, poveznice…
Osnovne HTML oznake

Najčešće HTML oznake

OznakaOpis
<html>...</html>Označava početak i kraj HTML dokumenta
<head>...</head>Zaglavlje stranice
<title>...</title>Naslov stranice (prikazuje se u tabu preglednika)
<body>...</body>Glavni sadržaj stranice
<p>...</p>Odlomak teksta
<a href="...">...</a>Poveznica na drugu stranicu
<img src="..." alt="...">Slika
<iframe src="...">Ugradnja YouTube videa ili drugog sadržaja

Atributi oznaka

HTML oznake često imaju atribute – dodatne informacije koje određuju ponašanje ili izgled elemenata.

Primjeri:

Kôd za dodavanje YouTube zapisa možete kopirati iz skočnog izbornika YouTube videozapisa rabeći naredbu Kopiraj ugrađeni kôd.

Vizualni i tekstualni HTML uređivači

Stranice se mogu izrađivati pomoću:

  • Vizualnih uređivača (npr. Adobe Dreamweaver, Microsoft Sway)
  • Tekstualnih uređivača (npr. Blok za pisanje) – ovdje se piše “ručni” HTML kôd

Primjer HTML datoteke: “moja_stranica.html”

moja stranicaPreuzmi

Upute za učenike:

  1. Otvorite Blok za pisanje (Notepad).
  2. Kopirajte ovaj kod u novi dokument.
  3. Spremite ga kao moja_stranica.html (odaberite „Svi dokumenti“ i dodajte .html na kraj imena).
  4. Dvaput kliknite na spremljenu datoteku – otvorit će se u vašem web pregledniku.

Vježbe i pitanja za ponavljanje

Vježba 1: Otvori mrežno mjesto naše škole i pokušaj prepoznati HTML oznake.

Vježba 2: U Bloku za pisanje napravi jednostavnu HTML stranicu.

Pitanja za ponavljanje:

  1. Što je HTML i čemu služi?
  2. Kako izgleda osnovna struktura jednog HTML dokumenta?
  3. Koje dvije osnovne oznake sadrži svaki HTML dokument?
  4. Koje oznake se koriste za početak i kraj HTML dokumenta?
  5. Kako se označava glavni sadržaj stranice u HTML-u?
  6. Koja HTML oznaka se koristi za umetanje slike na mrežnu stranicu? Napiši primjer.
  7. Čemu služi oznaka <a> i koji atribut mora sadržavati da bi veza funkcionirala?
  8. Što se nalazi unutar oznake <head>, a što unutar oznake <body>?
  9. Koji atribut koristiš za određivanje širine slike u HTML-u?
  10. Kako se u HTML dokument ugrađuje YouTube videozapis?
  11. Koja je razlika između vizualnog i tekstualnog HTML uređivača?
  12. **Napiši HTML kôd koji prikazuje naslov “Moja prva stranica”, jedan odlomak teksta