• pavle.pejak@osmihajlopupin.edu.rs
  • +381 65 47 90 564
  • ponedeljak neparna smena 5. čas (11:05 - 11:50 / 17:05 - 17:50)
e-Učenje

HTML, CSS, i JavaScript igraju ključne uloge u izradi i funkcionalnosti web stranica:

HTML (HyperText Markup Language):

- Glavni gradivni blok web stranica.

- Služi za strukturiranje sadržaja, poput naslova, paragrafa, slika, linkova, tabela.

- Definiše osnovni kostur svake web stranice.

CSS (Cascading Style Sheets):

- Koristi se za stilizaciju HTML sadržaja.

- Omogućava dizajn elemenata: boje, fontovi, razmaci, rasporedi.

- Pomaže u stvaranju vizuelno privlačnih i responzivnih web stranica.

JavaScript:

- Dodaje interaktivnost i dinamiku.

- Omogućava funkcionalnosti kao što su forme, animacije, navigacija, rad sa bazama podataka.

- Važan je za izradu modernih aplikacija i povezivanje sa serverima putem API-ja.

Ova tri jezika zajedno rade kako bi kreirala bogata i funkcionalna korisnička iskustva na internetu. Da li te zanima nešto konkretno o ovim tehnologijama?

Osnove HTML jezika

HTML je jezik koji web stranice "razumeju". Pomoću HTML-a pravimo strukturu stranice, definišemo šta se gde nalazi, kao što su tekst, slike, dugmad i još mnogo toga. HTML nije komplikovan - sve se svodi na upotrebu posebnih oznaka, nazvanih "tagovi".

HTML kod se piše u jednostavnom tekstualnom editoru, kao što je Notepad. Svaka stranica počinje sa osnovnom strukturom koja izgleda ovako.

Osnovni HTML tagovi

HTML koristi tagove za definisanje strukture i sadržaja web stranice. Evo nekih osnovnih tagova:

Strukturni tagovi

  • html – Označava početak i kraj HTML dokumenta.
  • head – Sadrži metapodatke, stilove i skripte.
  • title - Naslov web stranice.
  • body – Glavni sadržaj stranice.
<!DOCTYPE html>
<html>
<head>
  <title>Moja prva stranica</title>
</head>
<body>

</body>
</html>

Tagovi za tekst i liste

  • h1 do h6 – Naslovi različitih veličina.
  • p – Paragrafi (pasusi).
  • br – Prelazak u novi red.
  • ul i ol – Neuređene i uređene liste.
  • li – Stavke liste.
  <h1>Dobrodošli na moju prvu stranicu!</h1>
  <p>HTML je super zabavan!.</p>
  Ovo je rečenica<br>
  prelazi u drugi red.
  <ul>
    <li>jabuka</li>
    <li>kruška</li>
  </ul>

Multimedijalni tagovi

  • img – Prikazivanje slika (src atribut definiše putanju slike).
  • audio i video – Umetanje zvuka i videa.
  <img src='slika.jpg'>

  <audio controls>
    <sorce src='muzika.mp3' type='audio/mpeg'>
  </audio>

  <video controls>
    <sorce src='video.mp4' type='video/mp4'>
  </video>

Interaktivni tagovi

  • a – Linkovi (href atribut definiše URL).
  • button – Dugmad.
  <a href='https://skola.pavlepejak.in.rs'>Škola informatike</a>

  <button type='button'>Klikni na mene</button>