Uvod u html

Editor html kôda


Označavanje sintakse programskog kôda razičitim bojama elementi, svojstva, tekst

Umetanje kôda pomoću komadića (engl. snippets) Ctrl + Space

Omatanje više redaka kôda Edit + Fold

Pozivanje web preglednika iz editora

HyperText Markup Language


Hypertext - dio teksta koji ima ulogu poveznice.

Markup Language - označni jezik.

Označni jezik sastoji se od označnih elemenata.

Označni elementi služe za opisivanje web stranice.

HTML dokumenti - web stranice


Sadrže označne elemente i običan tekst. Web preglednik koristi označne elemente za:
Određivanje sadržaja web stranice kroz:

  • Umetanje teksta i slika
  • Kreiranje poveznica (engl. link)

HTML elementi


Razlikujemo parne i prazne elemente.

Parni elementi se sastoje od početne i završne oznake. Između njih se nalazi sadržaj elementa: <element>sadržaj</element>

Prazni elementi imaju samo početnu oznaku. Na kraju praznog elementa u xhtml-u dolazi kosa crta / <element />

HTML svojstva


Neki elementi zahtjevaju umetanje svojstava kako bi imali učinka.

Vrijednost svojstva navodima iza znaka '=' a unutar navodnika.

Svojstva se uvijek umeću unutar početne oznake elementa: <img src="krajolik.jpg" />

Više svojstava navodimo jedno iza drugoga odvojena razmakom.

Sintaksna pravila (x)HTML-a


Ime elementa kao i naziv svojstva pišu se malim slovima.

Vrijednost svojstva upisuje se unutar dvostrukih navodnika.

Svi elementi moraju biti zatvoreni <p>Tekst odlomka</p> <img src="krajolik.jpg" />

Elementi moraju biti pravilno ugniježđeni.

Ugniježđivanje elemenata


Pravilno Nepravilno
<head> <title>Naslovnica</title> </head> <head> <title>Naslovnica</head> </title>

HTML klase i identifikatori


Svojstva identifikatora i klase koristimo izvan html-a za pristup elementima.

Bitna razlika je u tome što identifikator mora imati jedinstvenu vrijednost.

Više elemenata može imati istu vrijednost klase.

<img class="slika" id="prva" src="krajolik.jpg" />

Standardna HTML svojstva


Svojstvo style dodjeljuje elementu css stil, u donjem primjeru dodjeljujemo tekstu plavu boju:
<p style="color:blue;">Tekst plave boje.</p>

Svojstvo title određuje što će se ispisati u oblačiću kada se pokazivač miša nađe iznad elementa.
<p title="Tekst u oblačiću">Odlomak</p>

Komentari i praznine


Za komentiranje koristimo poseban oblik elementa.

<!-- tekst komentara -->

Komentar nema početni i završni element.

Praznine i prelaske u novi redak u HTML kodu web preglednici ignoriraju. Na taj način je moguće kreirati pregledniji kôd.

Struktura HTML dokumenta


<html>
  <head>
    <title>Naziv stranice</title>
    <!-- Ovdje unosimo podatke o stranici -->
  </head>
  <body>
    <!-- Sadržaj koji će se prikazati na stranici -->
  </body>
</html>

<head> elementi


Svojstva koja tek posredno određuju sadržaj stranice.

  • Meta elementi i naslov stranice
  • CSS (Cascading Style Sheet) - vizualni izgled stranice
  • JavaScript - klijentsko programiranje web stranice

<body> elementi


Elementi koji izravno određuju sadržaj stranice.

  • Odlomci, naslovi, popisi i poveznice (engl. link)
  • Slike
  • Tablice
  • Strukturni elementi


Hvala na pozornosti!


Pitanja?