134
Marko Carić

Marko Cari - Sveznadarrazno.sveznadar.info/3_4_net/_html.pdf · 2020. 9. 11. · a i ,dD>M y HTML = H yper T ext M arkup L anguage y HTML je markup jezik (jezik sa niz om detaljnih

  • Upload
    others

  • View
    1

  • Download
    0

Embed Size (px)

Citation preview

  • 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 u

    poč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 novog

    paragrafa

    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