HTML

Marko Carić
Šta je HTML?
 HTML = Hyper Text Markup Language
 HTML je markup jezik (jezik sa nizom detaljnih
stilskih instrukcija)
 Markup jezik je skup markerskih tagova
 Tagovi opisuju sadržaj dokumenta
 HTML dokument sadrži HTML tagove i otvoren
tekst
 HTML dokumenti se takođe zovu veb strane
 HTML stranice imaju ekstenziju html ili htm
HTML tagovi
 HTML markerski tagovi se obično zovu HTML tagovi
 HTML tagovi su ključne reči (imena tagova) okružena sa
uglastim zagradama kao recimo <html>
 HTML tagovi obično dolaze u parovima kao recimo <b> i
</b>
 Prvi tag u paru je početni tag, drugi par u tagu je završni
tag
 Završni tag se piše isto kao i početni uz kosu crtu pre
imena taga
 Početni i završni tag često se zovu otvarajući i zatvarajući
tag
HTML elementi
 "HTML tagovi" i "HTML elementi često se koriste da
opišu istu stvar
 Precizno govoreći, HTML element je sve između
početnog i završnog taga uključujući i tagove:
 HTML element:
 <p>Ovo je paragraf.</p>
 HTML nisu osetljivi na veličinu slova case
insensitive): <P> znači isto što i <p>. Mnogi sajtovi
koriste HTML tagove sa velikim slovima
Struktura HTML stranice
 <html>
 <body>
 <h1>Ovo je zglavlje</h1>
 <p>Ovo je paragraf</p>
 <p>Ovo je još jedan paragraf</p>
 </body>
 </html>
O jaš je je
 DOCTYPE deklaracija definiše tip dokumenta
 Tekst između <html> i </html> opisuje veb stranicu
 Tekst između <body> i </body> predstavlja vidljivi
sadržaj stranice
 Tekst između <h1> i </h1> je prikazan kao zaglavlje
 Tekst između <p> i </p> je prikazan kao paragraf
Ve čitač
 Svrha veb čitača (npr. Google Chrome, Internet
Explorer, Firefox, Safari) je da pročita HTML
dokument i da ga prikaže u obliku veb stranice
 Najčešće server vraća odgovor u (TML obliku, koji veb
čitač treba da prikaže u prihvatljivom obliku za
korisnika
 Veb čitač ne prikazuje HTML tagove, ali ih koristi da
odredi sadržaj (TML stranice koja treba da bude
prikazana korisniku
HTML verzije
Verzija Godina
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
<!DOCTYPE> deklaracija
 The <!DOCTYPE> deklaracija pomaže veb čitaču da ispravno prikaže
veb sadržaj
 Postoji mnogo različitih dokumenata na Vebu, ali veb čitač može
prikazati stranicu potpuno ispravno samo ako zna HTML tip i
korišćenu verziju
 HTML5
 <!DOCTYPE html>
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 XHTML 1.0
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Primeri HTML elemenata
 HTML zaglavlje je definisano tagovima od <h1> do
<h6>:
 <h1>Ovo je zaglavlje</h1>
 HTML paragraf je definisan <p> tagom:
 <p>Ovo je paragraf.</p>
 HTML link je definisan <a> tagom:
 <a href="http://www.example.com">Ovo je link</a>
 HTML slika je definisana <img> tagom:
 <img src= "example.jpg" alt= " example.com"
width="104" height="142">
HTML elementi
 HTML dokument je Početni tag Sadržaj Završni
tag
definisan HTML Ovo je
elementima <p> </p>
paragraf
 HTML element je sve <a
href="default Ovo je link </a>
počev od početnog do .htm">
završnog taga <br>
 Početni tag se obično
zove otvarajući tag.
Završni tag se obično
zove zatvarajući tag
Sintaksa HTML elementa
 HTML element počinje sa početnim / otvarajućim
tagom
 HTML element se završava završnim / zatvarajućim
tagom
 Sadržaj elementa je sve između početnog i završnog
taga
 Neki HTML elementi imaju prazan sadržaj <br>
 Elementi sa praznim sadržajem su zatvoreni u
početnom tagu
 Većina HTML elemenata ima atribut
Element <html>
 <html> element definiše ceo HTML dokument
 Ovaj element ima početni tag <html> i završni tag
</html>
 Sadržaj ovog elementa je drugi HTML element (body
element)
 <html>
 <body>
 ...
 </body>
 </html>
Element <body>
 Element <body> definiše telo HTML dokumenta
 Ovaj element ima početni tag <body> i završni tag
</body>
 Sadržaj ovog elementa je drugi HTML element
(recimo <p> element)
 <body>
 ...
 <p>Ovo je moj prvi paragraf</p>
 ...
 </body>
Element <p>
 Element <p> definiše paragraf u HTML dokumentu
 Ovaj element ima početni tag <p> i završni tag </p>
 Sadržaj elementa je: Ovo je moj prvi paragraf.
 <p>Ovo je moj prvi paragraf.</p>
 Završni tag nije neophodan, ali se preporučuje
Prazni HTML elementi
 HTML element bez sadržaja naziva se prazan element
 <br> i <hr> su prazni elementi bez završnog taga
 <br> tag definiše skok u novi red, bez otvaranja novog
paragrafa
 <hr> tag stvara horizontalnu liniju u veb stranici
HTML atributi
 HTML elementi mogu imati atribute
 Atributi obezbeđuju dodatne informacije u vezi
elementa
 Atributi su uvek specificirani u početnom tagu
 Atributi dolaze u paru ime/vrednost (name/value) kao na
primer: name="value"
 Primer: HTML link je definisan <a> tagom. Adresa na
koju pokazuje link specificirana je u href atributu:
 <a href="http://www.example.com">Ovo je link</a>
 Vrednost atributa bi trebalo da bude uvek u okviru znaka
navoda. Navodnici su uobičajeni, mada su dozvoljeni i
apostrofi
Opis ekih čestih atri uta
Atribut Opis
Specificira jedno ili više imena klasa za element odnosi se na
class
definisanje klase u stylesheet-u)
id Specificira jedinstveni id za element
style Specificira inline CSS stil za element
title Specificira dodatnu informaciju u vezi elementa
HTML zaglavlja
 Zaglavlja su definisana u rasponu tagova od <h1> do <h6>
 <h1> definiše najvažnije najveće po veličini zaglavlje, dok <h6>
definiše najmanje značajno najmanje po veličini zaglavlje
 HTML zaglavlja bi trebalo koristiti samo u svrhu stvaranja pasosa
sa tekstom na vrhu stranice. Ne preporučuje se stvaranje teksta
veličine BIG ili debljine bold
 Veb pretraživači koriste zaglavlje za dobijanje informacije o
strukturi date veb stranice
 Pošto korisnici mogu pregledati veb stranice na osnovu zaglavlja,
važno ih je koristiti u cilju prikaza strukture dokumenta
 <h1> bi trebalo koristiti kao glavno zaglavlje, zatim sledi <h2>
zaglavlje, onda od njih manje značajno <h3> zaglavlje , itd.
Formatiranje teksta
Tag Opis
<b> Boldovan tekst
<em> Naglašen tekst
<i> )skošen tekst
<small> Mali tekst
<strong> Važan deblji od boldovanog) tekst
<sub> Definiše tekst kao indeks (H2O)
<sup> Definiše tekst kao stepen (23=8)
<ins> Ubačeni tekst
<del> Obrisan tekst
<mark> Markiran/istaknut tekst
HTML tagovi za "programerski
izlaz"
Tag Opis
<code> Definiše programerski kod
<kbd> Definiše tekst sa tastature
<samp> Definiše primer programerskog koda
<var> Definiše promenljivu
<pre> Definiše preformatiran tekst
HTML tagovi citiranja i definicije
Tag Opis
<abbr> Definiše skraćenicu ili akronim
Definiše kontakt informaciju autora/vlasnika
<address>
dokumenta
<bdo> Definiše smer pisanja teskta
<blockquote> Povezuje određeni citat sa određenim sajtom
<q> Definiše inline (kratke) znake navoda
<cite> Definiše naslov rada
<dfn> Definicija izraza
HTML komentari
 Komentari se ne prikazuju u veb čitaču, ali pomažu za
razumevanje HTML koda
 <!– Napiši ovde svoj komentar-->
HTML linkovi (hiperlinkovi)
 Linkovi se nalaze u praktično svim veb stranicama. Omogućavaju da se
klikom na njih prelazi sa stranice na stranicu
 HTML <a> tag definiše hiperlink
 Hiperlink (ili link) je reč, grupa reči, ili slika koja služi da uz klik
omogući prelazak na drugi dokument
 Kada se kursorom prelazi preko linka na veb stranici, strelica se
pretvara u malu šaku
 Najvažniji atribut <a> elementa je href atribut, koji upućuje na
odredište na koje link vodi
 Podrazumevano, linkovi se u svim veb čitačima pojavljuju u obliku:
 Neposećeni linkovi podvučeni plavom bojom
 Posećeni linkovi podvučeni ljubičastom bojom
 Aktivni linkovi podvučeni crvenom bojom, aktivni su u trenutku dok
se drži pritisnit klik nad linkom
Sintaksa HTML linkova
 HTML kod za link izgleda:
 <a href="url">Linkovani tekst</a>
 Atribut href specificira odredište linka
 Atribut target specificira gde će biti otvoren linkovani
dokument
 Sledeći kod otvara linkovani dokument u novom
prozoru ili novom listu tabu veb čitača:
 <a href="http://www.example.com/"
target="_blank">Poseti example.com!</a>
ID atribut za link
 Atribut id može se koristiti za stvaranje obeleživača bookmark
unutar HTML dokumenta.
 Napomena: Obeleživači bookmarks) se zasebno ne prikazuju.
Nevidljivi su veb čitaču
 Sidro sa atributom id unutar HTML dokumenta:
 <a id="tips">Sekcija korisnih saveta</a>
 Stvaranje linka na tekst "Sekcija korisnih saveta" unutar istog
dokumenta:
 <a href="#tips"> Poseti sekciju korisnih saveta </a>
 Stvaranje linka na tekst "Sekcija korisnih saveta" iz druge
stranice (html_links.htm):
 <a href="http://www.example.com/html_links.htm#tips">
Poseti sekciju korisnih saveta </a>
HTML <head> element
 Element <head> je kontejner za sve head elemente
 Elementi unutar <head> elementa mogu biti skriptovi
ili instrukcije veb čitaču gde da pronađe šablon stila
(style sheets), mogu obezbeđivati meta informacije,
itd.
 Sledeći tagovi mogu biti dodani u head sekciju:
<title>, <style>, <meta>, <link>, <script>,
<noscript> i <base>
HTML <title> element
 Element <title> definiše naslov dokumenta
 Element <title> je zahtevan u svim XHTML
dokumentima
 Element <title>:
 definiše naslov u paleti alatki toolbar veb čitača
 obezbeđuje naslov za stranicu koja je dodata u omiljene
tj. često korišćene stranice favorites)
 prikazuje naslov stranice među rezultatima veb
pretraživača search-engine)
Primer
 <!DOCTYPE html>
<html>
<head>
<title>Naslov dokumenta</title>
</head>
<body>
Ovde ide sadržaj dokumenta......
</body>
</html>
Apsolutna i relativna putanja
 Apsolutna URL putanja sadrži više informacija od
relativne (URL) putanje. Relativna putanja je
pogodnija za upotrebu, pošto je kraća i prenosivija.
Međutim, relativna putanja se može koristiti samo za
referenciranje stranica na istom serveru.
Upotreba apsolutne putanje
 Apsolutna putanja, tipično ima oblik:
 protokol://domen/putanja
 Protokol je obično http://, ali takođe može biti https://, ftp://,
gopher:// ili file://
 Domen je ime veb sajta (npr. www.viser.edu.rs). Putanja
uključuje direktorijum i informacije o traženoj datoteci
 Za referisanje na linkove sa drugog servera, nužno je koristiti
apsolutnu putanju
 Nedostatak ovog pristupa ogleda se opštem slučaju kada se u
trenutku pisanja koda ne zna tačno mesto na serveru gde će se
aplikacija nalaziti, pa samim tim i putanja do neke stranice
 Korišćenje relativnih putanja je mnogo podesnije, jer se zasniva
na kretanju u odnosu na direktorijum stranice sa koje skačemo
Upotreba relativne putanje
 Kada se referencira datoteka u matičnom istom direktorijumu,
(relativna) putanja je prosto ime datoteke. Na primer, ukoliko se kreira link
ka stranici foobar.html, sa stranice koja se nalazi u istom direktorijumu
navodi se:
 <a href="foobar.html">The Wonderful World of Foobar!</a>
 Ako se kreira link ka stranici koja se nalazi u poddirektorijumu u odnosu
na stranicu sa linkom potrebno je pre imena stranice navesti ime
direktorijuma. Recimo ako se foobar.html nalazi u direktorijumu foodbar
unutar www direktorijuma, navodi se:
 <a href="foobar/foobar.html">The Wonderful World of
Foobar!</a>
 Ako se kreira link ka stranici koja se nalazi u naddirektorijumu u odnosu
na stranicu sa linkom, potrebno je koristiti dve tačke .. , što znači skok u
taj direktorijum:
 <a href="../home.html">Go back to my home page</a>
HTML <base> element
 Element <base> specificira osnovni URL/odredište za
sve relativne URLove u okviru stranice:
 <head>
<base href="http://www.example.com/images/"
target="_blank">
</head>
 Podešavanje _blank otvara odredišnu stranicu u
novom prozoru ili novom listu.
HTML <link> element
 Element <link> definiše vezu između dokumenta i
spoljnih resursa
 Element <link> se najviše koristi za referenciranje
opisa stilova style sheets):
 <head>
<link rel="stylesheet" type="text/css"
href="mojstil.css">
</head>
HTML <style> element
 Element <style> se koristi za definiciju stila u HTML
dokumentu
 Unutar <style> elementa određuje se način
prikazivanja HTML elemenata u veb čitaču:
 <head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
HTML <meta> element
 Metapodaci (metadata) is podaci (informacije) o podacima
 Element <meta> obezbeđuje metapodatke u vezi HTML
dokumenta. Metapodaci se neće prikazati u veb stranici, ali
će poslužiti sa parsiranje analizu značenja niza simbola -
tagova u skladu sa određenim pravilima
 Meta elementi se obično koriste za određivanje opisa
stranice, ključnih reči, autora dokumenta, poslednje
promene i ostalih metapodataka
 Metapodaci mogu biti korišćeni od strane veb čitača (za
prikaz sadržaja i ponovno učitavanje stranice), veb
pretraživača pretraživanje po ključnim rečima ili ostalih
veb servisa
 <meta> tagovi se uvek nalaze u okviru <head> taga
<meta> tag – pri eri korišće ja
 Definisanje ključnih reči za veb pretraživač search
engine):
 <meta name="keywords" content="HTML, CSS, XML,
XHTML, JavaScript">
 Definiše opis veb stranice:
 <meta name="description" content=“Veb tutorujal za
HTML i CSS">
 Definiše autora veb stranice:
 <meta name="author" content=“Mika Mikic">
 Osvežava dokument svakih sekundi:
 <meta http-equiv="refresh" content="30">
HTML <script> element
 Element <script> koristi se za definisanje skripta na klijentskoj
strani, npr. JavaScripta.
 <!DOCTYPE html>
<html>
<body>
<script>
var a = 3;
var b = 4;
var c = a + b;
alert(c);
</script>
</body>
</html>
Pregled
Tag Opis
<head> Definiše informacije o dokumentu
<title> Definiše naslov dokumeta
Definiše podrazumevanu adresu ili podrazumevano
<base>
odredište za sve linkove na stranici
<link> Definiše vezu između dokumeta i spoljnih resursa
<meta> Definiše metapodatke u vezi HTML dokumenta
<script> Definiše skript na klijentskoj strani
<style> Definiše stil informacije u dokumentu
HTML stil - CSS
 CSS (Cascading Style Sheets) se koristi za stilizovanje
HTML elemenata
 CSS je uveden zajedno sa verzijom HTML 4, u cilju
obezbeđivanja boljeg načina za stilizovanje (TML
elemenata
 CSS može biti dodat u HTML na sledeće načine:
 Inline – korišćenjem style atributa u HTML elementu
 Internal – korišćenjem <style> elementa u <head> sekciji
 External – korišćenjem spoljne CSS datoteke
 Najprikladiniji način za dodavanja CSSa u HTML, je
ubacivanje CSS sintakse u posebnu CSS datoteku (external
style)
Inline stil
 Inline stil se koristi kada jedinstveni stil treba
primeniti na jedno pojavljivanje elementa.
 Za korišćenje inline stila potrebno je koristiti style
atribut u okviru taga. Atribut style može sadržati bilo
koju CSS osobunu
 Primer ispod pokazuje promenu boje slova i leve
margine paragrafa:
 <p style="color:blue;margin-left:20px;">Ovo je
paragraf.</p>
Primer HTML stila – boja pozadine
 Osobina background-color definiše boju pozadine
elementa:
 <!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">Ovo je
zaglavlje</h2>
<p style="background-color:green;">Ovo je
paragraf.</p>
</body>
</html>
Primer HTML stila - font, boja i
veliči a
 Osobine font-family, color, i font-size definišu font,
boju i veličinu teksta u elementu:
 <!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">Zaglavlje</h1>
<p style="font-family:arial;color:red;font-
size:20px;">Paragraf.</p>
</body>
</html>
Primer HTML stila – poravnanje
teksta
 Osobina poravnanja teksta (text-align) određuje
horizontalno poravnanje teksta u elementu:
 <!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">
Centrirano zaglavlje
</h1>
<p>Ovo je paragraf.</p>
</body>
</html>
Internal stil
 Internal unutrašnji stil se koristi kada u jednom
dokumentu postoji jedinstven stil. Internal stil se
definiše u <head> sekciji HTML stranice, korišćenjem
<style> taga, kao na primer:
 <head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External stil
 External (spoljni) stil je idealan kada ga je potrebno
primeniti na mnoge stranice. Uz pomoć njega moguće
je promeniti izgled svih stranica na sajtu promenom
samo jedne datoteke. Svaka stranica mora biti upućena
na stranicu sa šablonom stila style sheet) preko
<link> taga. Tag <link> dolazi unutar <head> sekcije:
 <head>
<link rel="stylesheet" type="text/css"
href="mojstil.css">
</head>
Zastareli tagovi i atributi
 U verziji HTML 4, nekoliko tagova i atributa se koristi
za stilizovanje dokumenta. Ti tagovi nisu podržani u
novijoj verziji HTML5
 Zastarelost ne podrazumeva da ih nije moguće
koristiti, već da se to ne preporučuje
 Poželjno je izbegavati sledeće tagove: <font>,
<center>, i <strike>, i atribute: color i bgcolor
HTML slike - tag <img> i src atribut
 U HTMLu, slike su definisane preko <img> taga
 Tag <img> je prazan, što znači da sadrži jedino atribute, ali
nema zvaršni tag
 Za prikaz slike na stranici potrebno je koristiti src atribut. Src
znači "source". Vrednost src atributa je URL slike koja treba da se
predstavi
 Sintaksa za definisanje slike:
 <img src="url" alt=“neki_tekst">
 URL upućuje na lokaciju gde je slika uskladištena. Slika sa
imenom "boat.gif", nalazi se u "images" direktorijumu na
"www.example.com" tj. ima URL:
http://www.example.com/images/boat.gif
 Veb čitač prikazuje slike na mestu <img> taga u dokumentu.
Ako se slika stavi između dva paragrafa, veb čitač sukcesivno
prikazuje prvo prvi pargraf, pa sliku, pa drugi paragraf
HTML slike - alt atribut
 Atribut alt određuje alternativni tekst kao zamenu za
sliku koja ne može biti prikazana recimo usled spore
konekcije ili greške
 Vrednost alt atributa je tekst definisan od strane
autora:
 <img src="smiley.gif" alt="Smiley face">
HTML slike – postavljanje visine i
širi e
 Atributi height i width određuju visinu i širinu slike.
 Vrednost atributa je određena u pikselima i to
podrazumevano:
 <img src="smiley.gif" alt="Smiley face" width="42"
height="42">
 Napomena: Dobra praksa je postavljanje atributa i za
visinu i za širinu slike. Bez tih atributa, veb čitač neće
moći tačno da odredi veličinu slike
HTML tagovi za slike
Tag Opis
<img> Definiše sliku
<map> Definiše mapu slike (image-map) – kooordinate koje određuju sliku
<area> Definiše područje osetljivo na klik unutar mape slike
Tabele
 Tabele su definisane <table> tagom
 Tabela je podeljena na vrste korišćenjem <tr> taga (tr znači
table row)
 Vrsta je podeljena u ćelije korišćenjem <td> tag (td znači
table data)
 Vrsta može biti podeljena na zaglavlja korišćenjem <th>
taga (th znači table heading)
 Element <td> služi kao prihvatilac podataka u tabeli
 Element <td> može sadržati sve vrste (TML elemenata,
kao recimo tekst, slike, liste, druge tabele itd.
 Širina tabele može biti definisana korišćenjem CSSa
Primer
 <table style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tabela sa "border" atributom
 <table border="1" style="width:300px">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Tabela sa "border" atributom
 Ako se ne specificira granica border tabele, ona će se
prikazati bez nje
 Za dodavanje granica preko CSSa, koristi se border
osobina:
 <style>
table,th,td
{
border:1px solid black;
}
</style>
HTML tabela sa spojenom ivicom
 U slučaju da je potrbno paralelne ivice spojiti u jednu
ivicu, potrebno je u CSS dodati border-collapse:
 <style>
table,th,td
{
border:1px solid black;
border-collapse:collapse
}
</style>
HTML tabela sa raz ako iz eđu
ćelije i ivi a
 Moguće je podesiti razmak između sadržaja stranice i
njenih ivica
 Ako se rastojanje ne specificira, tabela će se prikazati
bez ivica
 Za postavljanje rastojanja koristi se CSS padding
osobina:
 th,td
{
padding:15px;
}
HTML zaglavlja tabele
 Zaglavlja tabela definisana su <th> tagom
 Podrazumevano, mnogi veb čitači prikazuju boldovana i
centrirana zaglavlja:
 <table style="width:300px">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML zaglavlja tabele
 Zaglavlje tabele može biti poravnato s leva pomoću
CSS text-align osobine:
 th
{
text-align:left;
}
HTML ta ela sa raz ako iz eđu
ćelija
 Potreban je atribut koji specificira razmak između
granica ćelija
 Za postavljanje razmaka između ćelija potrebno je
koristiti CSS border-spacing osobinu:
 table
{
border-spacing:5px;
}
HTML tagovi za tabelu
Tag Opis
<table> Definiše tabelu
<th> Definiše ćeliju zaglavlja u tabeli
<tr> Definiše vrstu u tabeli
<td> Definiše ćeliju u tabeli
<caption> Definiše naslov tabele
Specificira grupu od jedne ili više kolona previđenih za
<colgroup>
formatiranje
<col> Specificira osobinu za svaku kolonu u okviru <colgroup> elementa
<thead> Grupiše sadržaj zaglavlja header u tabeli
<tbody> Grupiše sadržaj tela body u tabeli
<tfoot> Grupiše sadržaj podnožja (footer) u tabeli
HTML Liste
 Numerisane
 Nenumerisane
 Opisne
HTML nenumerisane liste
 Nenumerisane unordered liste počinju <ul> tagom.
Svaka stavka u listi počinje <li> tagom
 Stavke u listi označene su simbolom podrazumevano
malim crnim krugom, a može se koristiti i drugi specijalni
simbol npr. kvadratić ili prazan krug
 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 Prethodni kod ima sledeći izgled u veb čitaču:
 Coffee
 Milk
HTML numerisane liste
 Numerisana ordered lista počinje <ol> tagom. Svaka
stavka u listi počinje <li> tagom
 Stavke u listi su označene brojevima
 <ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
HTML opisne liste
 Opisna lista je lista parova imena stavki sa njihovim opisom
 Tag <dl> definiše opisnu listu
 Tag <dl> se koristi zajedno sa tagom <dt> (ime stavke) i <dd> (opis stavke):
 <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Coffee
- black hot drink
Milk
- white cold drink
Pregled tagova za liste
Tag Opis
<ol> Defiše numerisanu listu
<ul> Definiše nenumerisanu listu
<li> Defiše stavku u listi
<dl> Definiše opisnu listu
<dt> Definiše ime stavke u opisnoj listi
<dd> Definiše opis stavke u opisnoj listi
HTML blokovi
 HTML elementi mogu biti grupisani korišćenjem
tagova <div> i <span>
 Većina (TML elemenata je definisana na nivou bloka
(block level) ili kao inline elementi
 Prilikom prikaza u veb čitaču, elementi na nivou bloka
počinju i završavaju se novom linijom
 Primeri: <h1>, <p>, <ul>, <table>
 Inline elementi se prikazuju bez prelaska u novu liniju
 Primeri: <b>, <td>, <a>, <img>
HTML <div> element
 HTML <div> element je element na nivou bloka koji može
biti korišćen kao kontejner za grupisanje ostalih HTML
elemenata
 Element <div> nema specijalno značenje; pošto je element
na nivou bloka, u veb čitaču se prikazuje prazna linija pre i
posle njega
 Kada se koristi uz CSS, <div> element se može koristiti za
postavljanje stila atributa za veliki blok stavki
 Sledeća uobičajena upotreba <div> elementa, je za
raspored – izgled elementa. On zamenjuje "stari" način
definisanja izgleda korišćenjem tabela. Element <table>
treba da prikaže tabelarne podatke i ne treba da se koristi
za raspored elemenata
HTML <span> element
 HTML <span> element je inline element koji se može
koristiti kao kontejner za tekst
 Element <span> nema specijalno značenje
 Kada se koristi uz CSS, <span> element služi za
podešavanje stila atributa za delove teksta
Izgled veb sajta
 Većina sajtova deli sadržaj na više kolona nalik
sadržaju u novimama
 Višestruke kolone se kreiraju korišćenjem <div> ili
<table> elementa. CSS se koristi za pozicioniranje
elemenata, za podešavanje pozadine ili vizuelni izgled
stranica
 )ako je moguće stvoriti lep izgled stranice preko HTML
tabela, njih pre svega treba koristiti za prikaz
tabularnih podataka!
Pregled HTML tagova za dizajn
stranice
Tag Opis
<div> Definiše sekciju u dokumentu na nivou bloka
<span> Definiše sekciju u dokumentu (inline)
HTML dizajn - korišće je <div>
elementa
 Element <div> je element na nivou bloka koji grupiše
druge HTML elemente
 Sledeći primer koristi pet <div> elemenata za
stvaranje višestrukih kolona:
Primer (1)
 <!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Naziv veb stranice</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Meni</b><br>
HTML<br>
CSS<br>
JavaScript</div>
Primer (2)
 <div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Ovde dolazi sadržaj</div>
<div id="footer" style="background-

color:#FFA500;clear:both;text-align:center;">
VISER</div>
</div>
</body>
</html>
HTML dizajn – korišće je ta ela
 Jednostavan način za stvaranje izgleda – rasporeda
stranice postiže se korišćenjem HTML <table> taga
 Višestruke kolone mogu se formirati upotrebom <div>
ili <table> elementa. Mada se ne preporučuje
upotreba tabele za podešavanje dizajna stranice,
sledeći primer koristi tabelu sa tri vrste i dve kolone;
prva i poslednja vrsta spajaju obe kolone upotrebom
colspan atributa:
Primer (1)
 <!DOCTYPE html>
<html>
<body>
<table width="500">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Naziv veb stranice</h1>
</td>
</tr>
Primer (2)
 <tr>
<td style="background-color:#FFD700;width:100px;">
<b>Meni</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Ovde dolazi sadržaj</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
VISER</td>
</tr>
</table>
</body>
</html>
HTML forme
 HTML forme se koriste za slanje podatka serveru
 HTML forma može sadržati ulazne input) elemente kao
što su tekst polja text fields), polja za potvrdu
(checkboxes), radio-dugmići, submit dugme itd. Forma
može takođe sadržati padajuće liste select lists), textarea,
fieldset, legend i label elemente
 Za kreiranje HTML forme koristi se <form> tag:
 <form>
.
Ulazni (input) elementi
.
</form>
HTML forme - <input> element
 Najvažniji element forme je <input> element
 Element <input> koristi se za odabir korisničkih
informacija
 Element <input> može imati različite oblike, u
zavisnosti od tipa atributa. Može biti tipa: tekstualno
polje, polje za potvrdu (checkbox), polje za lozinku,
radio dugme, dugme za slanje (submit), itd.
Tekstualno polje
 <input type="text"> definiše ulazno polje u jednom
redu u koje korisnik unosi tekst:
 <form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
 Sama forma nije vidljiva. Podrazumevana dužina
tekstualnog polja je 20 karaktera.
Polje za lozinku
 <input type="password"> definiše polje za lozinku:
 <form>
Password: <input type="password" name="pwd">
</form>
 Karakteri uneti u polje za lozinku nisu razumljivi
prikazuju se kao tačke
Radio dug ići
 <input type="radio"> definiše radio dugme. Radio
dumići dozvoljavaju korisniku da izabere TAČNO
JEDNO od ponuđenih mogućnosti pod uslovom da
pripadaju istoj grupi):
 <form>
<input type="radio" name="sex"
value="male">Male<br>
<input type="radio" name="sex"
value="female">Female
</form>
Polja za potvrdu (checkboxes)
 <input type="checkbox"> definiše polje za potvrdu
(checkbox). Polja za potvrdu dozvoljavaju korisniku da
iazbere JEDNO ili V)ŠE u okviru ponuđenih opcija:
 <form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car
</form>
Dugme za slanje (submit button)
 <input type="submit"> definiše dugme za slanje
 Prilikom akcije na dugme za slanje dolazi do slanja podataka na
server. Podaci se šalju ka stranici koja je navedena u action
atributu forme. Stranica definisana u action atributu najčešće
nekako obrađuje primljene podatke:
 <form name="input" action="html_form_action.php"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
 Ako se unesu neki karakteri u navedeno tekstualno polje i ako se
klikne na "submit" dugme, veb čitač šalje unete podatke ka
stranici "html_form_action.php"
HTML tagovi za formu
Tag Description
<form> Definiše HTML formu
<input> Definiše ulazni (input) element
<textarea> Definiše višelinijski input element (text area)
<label> Definiše labelu za <input> element
<fieldset> Grupiše elemente u formi
<legend> Definiše naslov za <fieldset> element
<select> Definiše padajuću drop-down) listu
<optgroup> Definiše grupu opcija u padajućoj listi
<option> Definiše opciju (stavku) u padajućoj listi
HTML tagovi za formu (2)
Tag Opis
<button> Definiše dugme (koje reaguje na akciju)
<datalist> (HTML5) Specifies a list of pre-defined options for input controls
<keygen> (HTML5) Defines a key-pair generator field (for forms)
<output> (HTML5) Defines the result of a calculation
HTML okviri (frames)
 Element <iframe> služi za prikaz veb stranice unutar
druge veb stranice
 Sintaksa za dodavanje taga <iframe>:
 <iframe src="URL"></iframe>
 URL pokazuje na lokaciju stranice koja treba da bude
prikazana
Iframe – postavlja je visi e i širi e
 Atributi height i width se koriste za postavaljanje
visine i širine okvira
 Vrednosti atributa podrazumevano su specificirani u
pikselima, ali mogu biti i u procentima(recimo "80%"):
 <iframe src="demo_iframe.htm" width="200"
height="200"></iframe>
Iframe – brisanje granice
 Atribut frameborder specificira mogućnost
prikazivanja granice oko okvira
 Za brisanje granice potrebno je postaviti vrednost
atributa na "0":
 <iframe src="demo_iframe.htm"
frameborder="0"></iframe>
Okviri i linkovi
 Okvir se može koristiti kao odredište na kome će se
prikazati stranica na koju upućuje link
 Atribut linka target mora sadržati ime atributa name
okvira (iframe):
 <iframe src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="http://www.example.com"
target="iframe_a">example.com</a></p>
HTML boje
 Boje se prikazuju kombinacijom CRVENE, ZELENE i
PLAVE boje
 CSS boje se prikazuju upotrebom heksadecimalnog
zapisa za kombinaciju vrednosti boja: Red, Green, i
Blue (RGB). Najmanja moguća vrednost boje zadata je
vrednošću 0 (nula, hex 00). Najveća moguća vrednost
je 255 (hex FF)
 Hex vrednosti su zapisane sa tri dvostruka broja,
počevši sa znakom #
Primeri boja
Boja BojaHEX Boja RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
16 ilio a različitih oja
 Kombinacijom crvene, zelene i plave boje u rasponu
od do dobija se više od miliona različitih boja
(256 x 256 x 256)
 Većina modernih monitora može da prikaže najmanje
16384 različitih boja
 140 imena boja definisana su u HTML i CSS
specifikaciji boja (17 standardnih boja plus dodatnih
123)
 Standardnih 17 boja su: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, orange,
purple, red, silver, teal, white, i yellow
HTML <script> tag
 <script> tag se koristi za definisanje skripta na klijentskoj
strani (recimo JavaScripta)
 <script> element ili sadrži skript naredbe ili pokazuje na
spoljnu (eksternu) datoteku preko src atributa
 Uobičajena upotreba JavaScripta je manipulisanje slikama,
validacija forme i dinamička promena sadržaja
 Sledeći skript prikazuje tekst Hello World! u vidu HTML
izlaza:
 <script>
document.write("Hello World!")
</script>
HTML <noscript> tag
 <noscript> tag se koristi da obezbedi alternativni tekst
korisnicima koji u veb čitaču imaju onemogućeno izvršavanje
skripta ili kod kojih veb čitač ne podržava skriptovanje na
klijentskoj strani
 <noscript> element može sadržati sve elmente koji se mogu
naći unutar <body> elementa uobičajene HTML stranice
 Sadržaj unutar <noscript> elementa biće prikazan samo ako
skript nije podržan u veb čitaču ili ako je onemogućen:
 <script>
document.write “Zdravo svete!")
</script>
<noscript>Vaš veb čitač ne podržava JavaScript!</noscript>
Primeri JavaScript naredbi
 JavaScript može direktno pisati u izlazni HTML tok:
 document.write("<p>This is a paragraph</p>");
 JavaScript može reagovati na događaje:
 <button type="button"
onclick="myFunction()">Klikni me!</button>
 JavaScript može manipulisati HTML stilovima:
 document.getElementById("demo").style.color="#ff
0000";
HTML Entiteti
 Određeni karakteri su rezervisani u HTMLu
 Ako se koristi "manje od" (<) ili "veće od" (>) znakovi, veb čitač
ih može pomešati sa znacima za otvaranje i zatvaranje tagova
 Karakter entiteti se koriste za prikaz rezervisanih karaktera u
HTMLu
 Karakter enitet ima dva prikaza:
 &entity_name;
 &#entity_number;
 Za prikaz znaka "manje od" potrebno je koristiti: < ili <
 Prednost korišćenja imena entiteta u odnosu na broj je lakše
pamćenje
 Nedostatak korišćenja imena eniteta u odnosu na broj je
mogućnost da veb čitač ne podržava sva imena entiteta, dok je
podrška za brojeve bolja
Praznina - Non Breaking Space
 Često korišćen karakter entiteta je praznina non
breaking space) ( )
 Treba naglasiti da veb čitač uvek odbacuje niz praznina
posle prve. U slučaju da je u (TML kodu u nizu
izdvojeno praznina, veb čitač će odbaciti 9
poslednjih. Za dodavanje praznina koristi se
karakter entitet
Ko i ova je dijakritičkih z akova
 Dijakritički znak diacritical mark) je specijalan znak
dodat određenom karakteru
 Neki dijakritički znakovi poput ( )̀ ili ( )́ označavaju
naglašavanje karaktera
 Dijakritički znakovi se mogu pojavljivati iznad, ispod,
unutar karaktera ili između dva karaktera
 Dijakritički znakovi se kombinuju sa alfanumeričkim
znacima u cilju dobijanja karaktera koji nisu podržani
u odgovarajućem skupu karaktera koje koristi veb
stranica
Neki dijakritički z a i
Oznaka Karakter Construkcija Rezultat
̀ a à ̀
́ a á ́
̂ a â ̂
̃ a ã ̃
̀ O Ò ̀
́ O Ó ́
̂ O Ô ̂
̃ O Õ ̃
Još eki koris i HTML karakter
entiteti
Rezultat Opis Ime entiteta Broj entiteta
praznina
< manje od < <
> veće od > >
& ampersend & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
registered
® ® ®
trademark
HTML entiteti za simbole
 HTML simboli poput matematičkih operatora,
strelica, tehničkih simbola i oblika, nisu prisutni na
standardnoj tastaturi
 Za dodavanje ovih simbola u (TML stranicu, može se
koristiti HTML ime entiteta
 Ako ne postoji ime, može se koristiti broj entiteta
 Ako za dati karakter ne postoji ime entiteta, može se
koristiti decimalna ili heksadecimalna referenca
Primeri
 Ako se koristi ime ili broj entiteta, karakter će se uvek
ispravno prikazati, nezavisno od kodovanja koje
stranica koristi:
 <p>I will display €<p>
<p>I will display €<p>
<p>I will display €<p>
 Izlaz: I will display €
Neki HTML podrža i ate atički
simboli
Karakter Broj Entitet Opis
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DEFFERENCIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ NABLA
∈ ∈ ELEMENT OF
∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS A MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Neka HTML podrža a grčka slova
Α Α GREEK CAPITAL LETTER ALPHA
Β Β GREEK CAPITAL LETTER BETA
Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ GREEK CAPITAL LETTER ZETA
Neki drugi HTML podrža i e titeti
© © © REGISTERED SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← LEFTWARDS ARROW
↑ ↑ UPWARDS ARROW
Neki drugi HTML podrža i e titeti
→ → RIGHTWARDS ARROW
↓ ↓ DOWNWARDS ARROW
♠ ♠ &spades; BLACK SPADE SUIT
♣ ♣ &clubs; BLACK CLUB SUIT
♥ &hearts; BLACK HEART SUIT
♦ &diams; BLACK DIAMOND SUIT
HTML kodovanje
 ASCII je bio prvi standard za kodovanje (poznat takođe kao skup
karaktera . Definiše 127 alfanumeričkih karaktera koji se mogu
koristiti na Internetu
 ASCII podržava brojeve (0-9), Engleska slova (A-Z) i neke specijale
karaktere kao recimo! $ + - ( ) @ < >
 ANSI (Windows-1252) je podrazumevani skup karaktera za Windows
(počev od Windows 95). Podržava 256 različitih kodova
 ISO-8859-1, proširenje ASCII skupa karaktera, je podrazumevani skup
karaktera za HTML 4. Takođe podržava 256 različitih kodova
 Pošto su ANSI i ISO standardi prilično ograničeni, u (TML
podrazumevano kodovanje je Unicode (UTF-8)
 Unicode pokriva gotovo sve postojeće karaktere i simbole
 HTML 4 takođe podržava UTF-8
HTML charset atribut
 Za ispravan prikaz HTML stranice, potrebno je da veb
čitač poznaje skup karaktera koji će biti korišćen
 To je specificirano u <meta> tagu:
 Za HTML4:
 <meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1">
 Za HTML5:
 <meta charset="UTF-8">
ASCII skup karaktera
 ASCII koristi vrednosti od 0 do 31 (uključujući 127.
vrednost) za kontrolne karaktere
 ASCII koristi vrednosti od 32 do 126 za slova, cifre i
simbole
 ASCII ne koristi vrednosti od 128 do 255
ANSI skup karaktera (Windows-
1252)
 ANSI je identičan ASCII skupu karaktera za vrednosti
od 0 do 127
 ANSI ima jedinstven skup karaktera za vrednosti od
128 do 159
 ANSI je identičan UTF-8 skupu karaktera za vrednosti
od 160 do 255
ISO-8859-1 skup karaktera
 8859-1 je identičan ASCII skupu karaktera za vrednosti
od 0 do 127
 8859-1 ne koristi vrednosti od 128 do 159
 8859-1 je identičan UTF-8 skupu karaktera za
vrednosti od 160 do 255
UTF-8 skup karaktera
 UTF-8 je identičan ASCII skupu karaktera za vrednosti
od 0 do 127
 UTF-8 ne koristi vrednosti od 128 do 159
 UTF-8 je identičan ANSI i 8859-1 skupovima karaktera
za vrednosti od 160 do 255
 UTF-8 nakon vrednosti 256 sadrži preko 10.000
različitih karaktera
HTML Uniform Resource Locators
 URL je drugo ime za veb adresu
 URL može biti sastavljena od reči, kao recimo,
example.com" ili u obliku Internet Protocol (IP)
adrese: 192.68.20.50. Uglavnom se koristi ime, pošto ga
je lakše zapamtiti
URL - Uniform Resource Locator
 Veb čitač zahteva stranicu od veb servera koristeći URL
(jedinstveni resursni centar)
 Prilikom klika na link na (TML stranici, podvučeni
<a> tag upućuje na odredišnu adresu stranice na vebu
 Uniform Resource Locator (URL) se koristi za
adresiranje dokumenta tj. podataka na vebu
 Veb adresa kao recimo:
http://www.example.com/html/default.asp sledi
sledeća sintaksna pravila:
 šema://host.domen:port/putanja/ime_datoteke
O jaš je je delova URLa
 šema – definiše tip Internet servisa. Najčešći tip je http
 host – definiše domen hosta (podrazumevani host za
http je www)
 domen – definiše ime domena na Internetu npr.
example.com
 port – definiše broj porta hosta (podrazumevani broj
porta za http je 80)
 putanja – definiše putanju na serveru (ako se izostavi,
dokument mora biti uskladišten na korenom
direktorijumu servera)
 ime datoteke – definiše ime datoteke/resursa
Uo ičaje e URL še e
Šema Skraćenica za.... Stranice koje koriste ovu šemu
HyperText Transfer Uobičajena veb stranica počinje sa http://.
http
Protocol Nema šifrovanja
Secure HyperText Sigurne veb stranice. Sve informacije se
https
Transfer Protocol prenose kao šifrovane
Za preuzimanje ili postavljanje datoteka na
ftp File Transfer Protocol
sajt. Korisno za održavanje domena
file Datoteka na matičnom računaru
URL Kodovanje
 URL se može koristiti na )nternetu jedino korišćenjem
ASCII skupa karaktera
 Pošto URL često sadrži karaktere izvan ASCII skupa,
URL se mora konvertovati u ispravan ASCII format
 URL kodovanje konvertuje karaktere u pogodan
format za prenos preko Interneta
 URL kodovanje zamenjuje ne ASCII karaktere znakom
"%" posle čega slede heksadecimalne cifre
 URL ne može sadržati prazninu i zamenjuje je sa
znakom +
Primeri URL kodovanja
Karakter URL-kodovanje
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
Â %C2
Ã %C3
Ä %C4
Å %C5
Šta je XHTML?
 XHTML je HTML napisan kao XML
 XHTML znači EXtensible HyperText Markup
Language
 XHTML je skoro identičan verziji HTML 4.01
 XHTML je strožija i čistija HTML verzija
 XHTML je HTML definisan kao XML aplikacija
 XHTML je podržan od svih poznatijih veb čitača
Zašto XHTML?
 Mnoge stranice na )nternetu sadrže "loš" HTML
 Sledeći HTML kod će se verovatno lepo videti u veb čitaču
(čak i ako se ne slede (TML pravila zatvaranja taga :
 <html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
 XML je markerski jezik u kome dokument mora biti
ispravno markiran i "dobro formiran"
Zašto XHTML?
 Pojedini veb čitači se pokreću na računaru, a pojedini
na mobilnom telefonu ili na nekom drugom manjem
uređaju kome nedostaju resursi da pravilno
interpretira "loš" markerski jezik
 XHTML je razvijen kombinacijom HTMLa i XMLa
 XHTML je redizajnirani HTML u obliku XMLa
Najvaž ije razlike u od osu a
HTML:
 Struktura dokumenta
 XHTML DOCTYPE je obavezan
 XML namespace atribut u <html> je obavezan
 <html>, <head>, <title> i <body> su obavezni
HTML:
 XHTML elementi
 XHTML elementi moraju biti pravilno ugnježdeni
 XHTML elementi uvek moraju biti zatvoreni
 XHTML elementi moraju biti napisani malim slovima
 XHTML dokumenti
 XHTML dokumenti moraju imati jedan koreni
element
HTML:
 XHTML Atributi
 Imena atributa moraju biti napisana malim slovima
 Vrednost atributa mora biti između znaka navoda
 Minimizovanje atributa je zabranjeno
<!DOCTYPE ....> je obavezan
 XHTML dokument mora imati XHTML DOCTYPE
deklaraciju.
 Elementi <html>, <head>, <title> i <body> moraju
biti prisutni i xmlns atribut u elementu <html>, mora
specificirati xml imenski prostor (namespace) za
dokument
Primer XHTML dokumenta
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Naslov dokumenta</title>
</head>
<body>
......
</body>
</html>
XHTML elementi moraju biti
pravil o ug ježde i
 U HTMLu, neki elementi mogu biti nepravilno
ugnježdeni, kao na primer:
 <b><i>Ovaj tekst je bold i italic</b></i>
 U XHTMLu, svi elementi moraju biti pravilno
ugnježdeni, kao na primer:
 <b><i> Ovaj tekst je bold i italic </i></b>
XHTML elementi moraju uvek biti
zatvoreni
 Ovo je pogrešno:
 <p>Ovo je paragraf
<p>Ovo je još jedan paragraf
 Ovo je ispravno:
 <p>Ovo je paragraf</p>
<p>Ovo je još jedan paragraf</p>
Prazni elementi moraju biti
zatvoreni
 Skok u novi red: <br>
Horizontalna linija: <hr>
Slika: <img src="happy.gif" alt="Happy face">
 Skok u novi red: <br />
Horizontalna linija: <hr />
Slika: <img src="happy.gif" alt="Happy face" />
XHTML elementi moraju biti
napisani malim slovima
 <BODY>
<P>Ovo je paragraf</P>
</BODY>
 <body>
<p>Ovo je paragraf</p>
</body>
Imena atributa moraju biti
napisana malim slovima i moraju
se alaziti iz eđu z akova avoda
 <table WIDTH="100%">
 <table width="100%">
 <table width=100%>
 <table width="100%">
Minimizacija atributa je
zabranjena
 <input checked>
<input readonly>
<input disabled>
<option selected>
 <input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
Kako konvertovati iz HTMLa u
XHTML
 Dodati XHTML <!DOCTYPE> na prvu liniju stranice
 Dodati xmlns atribut u html element svake stranice
 Promeniti sva imena elemenata u mala slova
 Zatvoriti sve prazne elemente
 Promeniti sva imena atributa u mala slova
 Postaviti sve vrednosti atributa između znakova
navoda

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Marko Carić

<div id="footer" style="background-

You might also like