-
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 tagovi obično dolaze u parovima kao recimo i
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:
Ovo je paragraf.
HTML nisu osetljivi na veličinu slova case
insensitive):
znači isto što i
. Mnogi sajtovi koriste HTML tagove sa velikim slovima
-
Struktura HTML stranice
Ovo je zglavlje
Ovo je paragraf
Ovo je još jedan paragraf
-
O jaš je je DOCTYPE deklaracija definiše tip dokumenta Tekst između i opisuje veb stranicu Tekst između i predstavlja vidljivi
sadržaj stranice Tekst između i je prikazan kao zaglavlje Tekst između
i
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
-
deklaracija The 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
HTML 4.01
XHTML 1.0
-
Primeri HTML elemenata HTML zaglavlje je definisano tagovima od do
: Ovo je zaglavlje
HTML paragraf je definisan
tagom:
Ovo je paragraf.
HTML link je definisan tagom: Ovo je link
HTML slika je definisana tagom:
-
HTML elementi HTML dokument je
definisan HTML elementima
HTML element je sve počev od početnog do završnog taga
Početni tag se obično zove otvarajući tag. Završni tag se obično zove zatvarajući tag
Početni tag Sadržaj Završni tag
Ovo je paragraf
Ovo je link
-
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
Elementi sa praznim sadržajem su zatvoreni upočetnom tagu Većina HTML elemenata ima atribut
-
Element element definiše ceo HTML dokument Ovaj element ima početni tag i završni tag
Sadržaj ovog elementa je drugi HTML element (body
element)
...
-
Element Element definiše telo HTML dokumenta Ovaj element ima početni tag i završni tag
Sadržaj ovog elementa je drugi HTML element (recimo
element)
...
Ovo je moj prvi paragraf
...
-
Element
Element
definiše paragraf u HTML dokumentu Ovaj element ima početni tag
i završni tag
Sadržaj elementa je: Ovo je moj prvi paragraf.Ovo je moj prvi paragraf.
Završni tag nije neophodan, ali se preporučuje
-
Prazni HTML elementi HTML element bez sadržaja naziva se prazan element
i su prazni elementi bez završnog taga
tag definiše skok u novi red, bez otvaranja novogparagrafa
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 tagom. Adresa na
koju pokazuje link specificirana je u href atributu: Ovo je link
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
class Specificira jedno ili više imena klasa za element odnosi se na 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 do definiše najvažnije najveće po veličini zaglavlje, dok
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
bi trebalo koristiti kao glavno zaglavlje, zatim sledi zaglavlje, onda od njih manje značajno zaglavlje , itd.
-
Formatiranje teksta Tag Opis
Boldovan tekst
Naglašen tekst
)skošen tekst
Mali tekst
Važan deblji od boldovanog) tekst
Definiše tekst kao indeks (H2O)
Definiše tekst kao stepen (23=8)
Ubačeni tekst
Obrisan tekst
Markiran/istaknut tekst
-
HTML tagovi za "programerski
izlaz" Tag Opis
Definiše programerski kod
Definiše tekst sa tastature
Definiše primer programerskog koda
Definiše promenljivu
Definiše preformatiran tekst
-
HTML tagovi citiranja i definicije Tag Opis
Definiše skraćenicu ili akronim
Definiše kontakt informaciju autora/vlasnika dokumenta
Definiše smer pisanja teskta
Povezuje određeni citat sa određenim sajtom
Definiše inline (kratke) znake navoda
Definiše naslov rada
Definicija izraza
-
HTML komentari Komentari se ne prikazuju u veb čitaču, ali pomažu za
razumevanje HTML koda
-
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 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 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:
Linkovani tekst 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: Poseti example.com!
-
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:
Sekcija korisnih saveta Stvaranje linka na tekst "Sekcija korisnih saveta" unutar istog
dokumenta: Poseti sekciju korisnih saveta
Stvaranje linka na tekst "Sekcija korisnih saveta" iz druge stranice (html_links.htm):
Poseti sekciju korisnih saveta
-
HTML element Element je kontejner za sve head elemente Elementi unutar 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: , , , , , i
-
HTML element Element definiše naslov dokumenta Element je zahtevan u svim XHTML
dokumentima
Element : 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
Naslov dokumenta Ovde ide sadržaj dokumenta......
-
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:
The Wonderful World of Foobar! 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:
The Wonderful World of Foobar!
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:
Go back to my home page
-
HTML element Element specificira osnovni URL/odredište za
sve relativne URLove u okviru stranice:
Podešavanje _blank otvara odredišnu stranicu u novom prozoru ili novom listu.
-
HTML element Element definiše vezu između dokumenta i
spoljnih resursa
Element se najviše koristi za referenciranje opisa stilova style sheets):
-
HTML element Element se koristi za definiciju stila u HTML
dokumentu
Unutar elementa određuje se način prikazivanja HTML elemenata u veb čitaču:
body {background-color:yellow;} p {color:blue;}
-
HTML element Metapodaci (metadata) is podaci (informacije) o podacima Element 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
tagovi se uvek nalaze u okviru taga
-
tag – pri eri korišće ja Definisanje ključnih reči za veb pretraživač search
engine):
Definiše opis veb stranice:
Osvežava dokument svakih sekundi:
-
HTML element Element koristi se za definisanje skripta na klijentskoj
strani, npr. JavaScripta. var a = 3; var b = 4; var c = a + b; alert(c);
-
Pregled Tag Opis
Definiše informacije o dokumentu
Definiše naslov dokumeta
Definiše podrazumevanu adresu ili podrazumevano odredište za sve linkove na stranici
Definiše vezu između dokumeta i spoljnih resursa
Definiše metapodatke u vezi HTML dokumenta
Definiše skript na klijentskoj strani
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 elementa u 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:
Ovo je
paragraf.
-
Primer HTML stila – boja pozadine Osobina background-color definiše boju pozadine
elementa:
Ovo je zaglavlje
Ovo je paragraf.
-
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:
Zaglavlje
Paragraf.
-
Primer HTML stila – poravnanje teksta Osobina poravnanja teksta (text-align) određuje
horizontalno poravnanje teksta u elementu:
Centrirano zaglavlje
Ovo je paragraf.
-
Internal stil Internal unutrašnji stil se koristi kada u jednom
dokumentu postoji jedinstven stil. Internal stil se definiše u sekciji HTML stranice, korišćenjem taga, kao na primer:
body {background-color:yellow;} p {color:blue;}
-
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 taga. Tag dolazi unutar sekcije:
-
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: , , i , i atribute: color i bgcolor
-
HTML slike - tag i src atribut U HTMLu, slike su definisane preko taga Tag 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:
-
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:
-
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:
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
Definiše sliku
Definiše mapu slike (image-map) – kooordinate koje određuju sliku
Definiše područje osetljivo na klik unutar mape slike
-
Tabele Tabele su definisane tagom Tabela je podeljena na vrste korišćenjem taga (tr znači
table row) Vrsta je podeljena u ćelije korišćenjem tag (td znači
table data) Vrsta može biti podeljena na zaglavlja korišćenjem
taga (th znači table heading) Element služi kao prihvatilac podataka u tabeli Element 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
Jill Smith 50 Eve Jackson 94
-
Tabela sa "border" atributom
Jill Smith 50 Eve Jackson 94
-
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:
table,th,td { border:1px solid black; }
-
HTML tabela sa spojenom ivicom U slučaju da je potrbno paralelne ivice spojiti u jednu
ivicu, potrebno je u CSS dodati border-collapse:
table,th,td { border:1px solid black; border-collapse:collapse }
-
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 tagom Podrazumevano, mnogi veb čitači prikazuju boldovana i
centrirana zaglavlja:
Firstname Lastname Points Eve Jackson 94
-
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
Definiše tabelu
Definiše ćeliju zaglavlja u tabeli
Definiše vrstu u tabeli
Definiše ćeliju u tabeli
Definiše naslov tabele
Specificira grupu od jedne ili više kolona previđenih za formatiranje
Specificira osobinu za svaku kolonu u okviru elementa
Grupiše sadržaj zaglavlja header u tabeli
Grupiše sadržaj tela body u tabeli
Grupiše sadržaj podnožja (footer) u tabeli
-
HTML Liste Numerisane Nenumerisane Opisne
-
HTML nenumerisane liste Nenumerisane unordered liste počinju tagom.
Svaka stavka u listi počinje 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
Coffee Milk
Prethodni kod ima sledeći izgled u veb čitaču: Coffee Milk
-
HTML numerisane liste Numerisana ordered lista počinje tagom. Svaka
stavka u listi počinje tagom Stavke u listi su označene brojevima
Coffee Milk
Prethodni kod ima sledeći izgled u veb čitaču: 1. Coffee
2. Milk
-
HTML opisne liste Opisna lista je lista parova imena stavki sa njihovim opisom Tag definiše opisnu listu Tag se koristi zajedno sa tagom (ime stavke) i (opis stavke):
Coffee - black hot drink Milk - white cold drink
Prethodni kod ima sledeći izgled u veb čitaču: Coffee
- black hot drink
Milk
- white cold drink
-
Pregled tagova za liste Tag Opis
Defiše numerisanu listu
Definiše nenumerisanu listu
Defiše stavku u listi
Definiše opisnu listu
Definiše ime stavke u opisnoj listi
Definiše opis stavke u opisnoj listi
-
HTML blokovi HTML elementi mogu biti grupisani korišćenjem
tagova i
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: ,
, ,
Inline elementi se prikazuju bez prelaska u novu liniju Primeri: , , ,
-
HTML element HTML element je element na nivou bloka koji može
biti korišćen kao kontejner za grupisanje ostalih HTML elemenata
Element 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, element se može koristiti za postavljanje stila atributa za veliki blok stavki
Sledeća uobičajena upotreba elementa, je za raspored – izgled elementa. On zamenjuje "stari" način definisanja izgleda korišćenjem tabela. Element treba da prikaže tabelarne podatke i ne treba da se koristi za raspored elemenata
-
HTML element HTML element je inline element koji se može
koristiti kao kontejner za tekst
Element nema specijalno značenje Kada se koristi uz CSS, 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 ili
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
Definiše sekciju u dokumentu na nivou bloka
Definiše sekciju u dokumentu (inline)
-
HTML dizajn - korišće je elementa Element je element na nivou bloka koji grupiše
druge HTML elemente
Sledeći primer koristi pet elemenata za stvaranje višestrukih kolona:
-
Primer (1)
Naziv veb stranice Meni
HTML
CSS
JavaScript -
Primer (2) Ovde dolazi sadržaj VISER
-
HTML dizajn – korišće je ta ela Jednostavan način za stvaranje izgleda – rasporeda
stranice postiže se korišćenjem HTML taga Višestruke kolone mogu se formirati upotrebom
ili 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)
Naziv veb stranice
-
Primer (2)
Meni
HTML
CSS
JavaScript Ovde dolazi sadržaj VISER -
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 tag:
. Ulazni (input) elementi .
-
HTML forme - element Najvažniji element forme je element Element koristi se za odabir korisničkih
informacija
Element 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 definiše ulazno polje u jednom
redu u koje korisnik unosi tekst:
First name:
Last name:Sama forma nije vidljiva. Podrazumevana dužina tekstualnog polja je 20 karaktera.
-
Polje za lozinku definiše polje za lozinku:
Password:
Karakteri uneti u polje za lozinku nisu razumljivi prikazuju se kao tačke
-
Radio dug ići 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):
Male
Female -
Polja za potvrdu (checkboxes) definiše polje za potvrdu
(checkbox). Polja za potvrdu dozvoljavaju korisniku da iazbere JEDNO ili V)ŠE u okviru ponuđenih opcija:
I have a bike
I have a car -
Dugme za slanje (submit button) 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:
Username:
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
Definiše HTML formu
Definiše ulazni (input) element
Definiše višelinijski input element (text area)
Definiše labelu za element
Grupiše elemente u formi
Definiše naslov za element
Definiše padajuću drop-down) listu
Definiše grupu opcija u padajućoj listi
Definiše opciju (stavku) u padajućoj listi
-
HTML tagovi za formu (2) Tag Opis
Definiše dugme (koje reaguje na akciju)
(HTML5) Specifies a list of pre-defined options for input controls
(HTML5) Defines a key-pair generator field (for forms)
(HTML5) Defines the result of a calculation
-
HTML okviri (frames) Element služi za prikaz veb stranice unutar
druge veb stranice
Sintaksa za dodavanje taga :
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 – brisanje granice Atribut frameborder specificira mogućnost
prikazivanja granice oko okvira
Za brisanje granice potrebno je postaviti vrednost atributa na "0":
-
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):
example.com
-
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 tag tag se koristi za definisanje skripta na klijentskoj
strani (recimo JavaScripta) 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:
document.write("Hello World!")
-
HTML tag 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
element može sadržati sve elmente koji se mogu naći unutar elementa uobičajene HTML stranice
Sadržaj unutar elementa biće prikazan samo ako skript nije podržan u veb čitaču ili ako je onemogućen:
document.write “Zdravo svete!") Vaš veb čitač ne podržava JavaScript!
-
Primeri JavaScript naredbi JavaScript može direktno pisati u izlazni HTML tok:
document.write("
This is a paragraph
"); JavaScript može reagovati na događaje:
Klikni me!
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" () 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 ã ̃ ̀ 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:
I will display €
I will display €
I will display €
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 ∋ ∋ ∋ CONTAINS A MEMBER ∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
-
Neka HTML podrža a grčka slova Karakter Broj Entitet Opis
Α Α 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 Karakter Broj Entitet Opis
© © © REGISTERED SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
← ← LEFTWARDS ARROW
↑ ↑ UPWARDS ARROW
-
Neki drugi HTML podrža i e titeti Karakter Broj Entitet Opis
→ → RIGHTWARDS ARROW
↓ ↓ DOWNWARDS ARROW
♠ ♠ ♠ BLACK SPADE SUIT ♣ ♣ ♣ BLACK CLUB SUIT
♥ ♥ BLACK HEART SUIT
♦ ♦ 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 tagu: Za HTML4:
Za HTML5:
-
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 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
http HyperText Transfer Protocol
Uobičajena veb stranica počinje sa http://. Nema šifrovanja
https Secure HyperText Transfer Protocol
Sigurne veb stranice. Sve informacije se prenose kao šifrovane
ftp File Transfer Protocol Za preuzimanje ili postavljanje datoteka na 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 :
This is bad HTML Bad HTML
This is a paragraph
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 je obavezan , , i su obavezni
-
Najvaž ije razlike u od osu a 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
-
Najvaž ije razlike u od osu a HTML: XHTML Atributi
Imena atributa moraju biti napisana malim slovima Vrednost atributa mora biti između znaka navoda Minimizovanje atributa je zabranjeno
-
je obavezan XHTML dokument mora imati XHTML DOCTYPE
deklaraciju.
Elementi , , i moraju biti prisutni i xmlns atribut u elementu , mora specificirati xml imenski prostor (namespace) za dokument
-
Primer XHTML dokumenta Naslov dokumenta ......
-
XHTML elementi moraju biti
pravil o ug ježde i U HTMLu, neki elementi mogu biti nepravilno
ugnježdeni, kao na primer: Ovaj tekst je bold i italic
U XHTMLu, svi elementi moraju biti pravilno ugnježdeni, kao na primer: Ovaj tekst je bold i italic
-
XHTML elementi moraju uvek biti
zatvoreni Ovo je pogrešno:
Ovo je paragraf
Ovo je još jedan paragraf
Ovo je ispravno:
Ovo je paragraf
Ovo je još jedan paragraf
-
Prazni elementi moraju biti
zatvoreni Ovo je pogrešno:
Skok u novi red:
Horizontalna linija: Slika:Ovo je ispravno: Skok u novi red:
Horizontalna linija: Slika:
-
XHTML elementi moraju biti
napisani malim slovima Ovo je pogrešno:
Ovo je paragraf
Ovo je ispravno:
Ovo je paragraf
-
Imena atributa moraju biti
napisana malim slovima i moraju
se alaziti iz eđu z akova avoda Ovo je pogrešno:
Ovo je ispravno:
Ovo je pogrešno:
Ovo je ispravno:
-
Minimizacija atributa je
zabranjena Ovo je pogrešno:
Ovo je ispravno:
-
Kako konvertovati iz HTMLa u
XHTML Dodati XHTML 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