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?

← →

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