uvod u web programiranje - pmf.ni.ac.rspmf.ni.ac.rs/pmf/vesti/html.pdf · internet vs. web internet...
Post on 06-Feb-2018
235 Views
Preview:
TRANSCRIPT
Uvod u Web programiranje
Pregled kursa
Klijent tehnologije (izgled Web aplikacije, statički Web sajtovi):
HTML,
CSS,
DOM,
Javascript
Osnovni pojmovi
WWW – World Wide Web Sistem međusobno povezanih hipertekst
dokumenata na Internetu kojima se pristupa preko Web čitača (browsera)
Hipertekst (HyperText) dokument – tekst sa linkovima (referencama ka ostalim dokumentima)
Internet – “mreža svih mreža” Svetska, javno dostupna mreža povezanih
računarskih mreža koje prenose podatke korišćenjem IP (Internet Protocol) standarda.
Vizualizacija Interneta
Svaka boja kojom je mreža nacrtana označava jedan domen (.com, .org, .us, ...)
Internet vs. Web
Internet je mreža računara (hardvera), dok je Web mreža dokumenata i drugih resursa (multimedija)
Internet je medijum za razne servise kao što su: e-mail,
file sharing,
VoIP (voice telephony)
Web
Streaming multimedia (muzika, video,...), itd.
Osnovni pojmovi
Web aplikacija – aplikacija kojoj se pristupa preko Web čitača korišćenjem Interneta (ili intranet mreže)
Web sajt – skup Web strana uokviru nekog domena (npr. uokviru domena www.pmf.ni.ac.rs)
Web strana – dokument napisan u (X)HTML-u.
Web standardi
U osnovi Web-a su tri standarda:
HTTP (HyperText Transfer Protocol)
HTML (HyperText Markup Language)
URI (Uniform Resource Indentificator)
Analogija:
•HTTP – poštanski sistem
•HTML – pismo
•URI - adresa
Evolucija Web-a
1980 -1990 Formiranje Weba; samo tekstualni dokumenti
1993 Mosaic browser (tekst i grafika)
Statički Web sajtovi (strane se ne procesiraju na serveru)
Dinamički Web sajtovi (Web server napravi Web stranu i šalje je klijentu)
Dvoslojne, troslojne i višeslojne Web aplikacije
Evolucija Web-a
Web 2.0 – glavni moto je kolaborativnost, tj. ljudi širom Interneta kreiraju sadržaj
Web sajtovi služe kao servisi
Primeri:
Google Maps (korisnici dodaju lokacije na mapi)
Wikipedia (korisnici pišu sadržaj)
Del.icio.us (social bookmarking)
Facebook, Twitter (predstavljanje korisnika)
Web 2.0
Akcenat na kolaboraciji
Wiki (www.wikipedia.org),
Social-networking,…
YouTube, Google Videos (korisnici uploaduju video materijal)
Blog sajtovi (“online dnevnik”, korisnici pišu “blogove”)
(X)HTML i CSS
Osnovni elementi Web strane
Osnovi HTML-a
HTML - Hypertext Markup Language.
Tekst sa dodatnim karakteristikama: formatiranje, slike, multimedija i linkovi ka drugim dokumentima.
XHTML – eXtensible Hypertext Markup Language
Izveden iz XML-a i time je sintaksno stroži od HTML-a (maltene pravilno napisani HTML)
CSS – Cascading Style Sheets
HTML elementi služe da se napravi sadržaj Web strane (u smislu strukture strane): ovo ovde je naslov, zatim ide podnaslov, pa slika, itd...
Stilovi definišu kako da se prikažu HTML elementi
Oni definišu kako će naslov izgledati, gde će biti pozicija slike, kakva će biti slova u tekstu, itd.
HTML
HTML se sastoji od:
elemenata, <div> </div>
atributa, <div style=“…”>
komentara i <!-- … -->
znakovnih referenci. “ predstavlja “
Struktura HTML dokumenta
Deo za informacije o verziji HTML-a
Zaglavlje - informacije o dokumentu
Telo dokumenta – sadržaj, tj. Skup HTML elemenata
Element se sastoji od početnog dela (tag-a, <div>), sadržaja i završnog dela (</div>). Npr:
<div>Novosti</div>
HTML kod
HTML ELEMENTI
Описни језици попут HTML састоје се од кодова, који се називају елементи (тагови), и који се користе за описивање структуре и изгледа документа.
Читач Веба интерпретира HTML елементе и на основу њих приказује документ на екрану.
HTML тагови служе за означавање различитих елемената у HTML документу.
HTML таг се означава са знаком “мање од” (<), имена тагa, и знaком “веће од” (>). Тaгови су обично упaрени.
<tag> … </tag>
Неки тагови могу имати атрибуте. 18
<html>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/
/EN“ "http://www.w3.org/TR/html4/ strict.dtd">
Primer HTML dokumenta
<head>
<title>Moja prva Web strana</title>
</head>
<body>
<p>Hello world!</p>
</body>
Primer <html>
<head>
<title>Moja prva Web strana</title>
</head>
<body style="background-color:#acd373">
<p id=“par1” style="background-color:#ff6600;“> Hello<span style="color:white;“>world </span>
</p>
<div>Hello again</div>
</body>
</html>
Paragraf sa identifikatorom “par1”
SPAN inline element; style atribut predstavlja CSS objekat pridružen ovom SPAN elementu
21
Тело документа
Тело документа садржи сав текст и путање до слика које чине страну, заједно са свим елементима који контролишу изглед стране.
Тело документа почиње маркером <BODY> и завршава се маркером </BODY>.
Елемент BODY је опциони.
21
22 22
23
Форматирање блокова текста
Елементи за форматирање блокова текста се користе за форматирање читавих пасуса текста у документу.
Користе се у телу документа.
За форматирање наслова користе се елементи H1, H2, H3, H4, H5 и H6.
Користе се за одвајање страна у мање целине.
23
24
Сви елементи имају почетне и завршне маркере.
Званично правило о насловима је следеће: што је наслов већег нивоа (што је мањи број), то ће оно бити истакнутије приказано.
Већина читача их приказује на исти начин: фонтом Times New Roman, појачано, са 24, 18, 14, 12, 10 и 8 пиксела, респективно.
Могу се користити стилови за форматирање наслова одређеним фонтом, величином или бојом.
24
25 25
26
Читачи аутоматски преламају текст према ширини блока или прозора, правећи нове редове ако је потребно.
За креирање новог параграфа користи се елемент P.
Елемент има почетни и завршни маркер, али се завршни маркер може изоставити.
Параграф је окружен вертикалним простором од једног или пола реда.
Могу се користити стилови за форматирање пасуса одређеним фонтом, величином или бојом. 26
27 27
28
Ручни прекид реда остварује се елементом BR.
Елемент има само почетни маркер и не садржи друге елементе.
Ручни прекид реда се користи за кратке редове текста који треба да се појаве један после другог без много простора између.
Могу се користити вишеструке ознаке BR да би се направио додатни простор између редова или параграфа.
28
29 29
30
За приказивање хоризонталних линија користи се елемент HR.
Елемент има само почетни маркер и не садржи друге елементе.
30
31
За приказивање адреса, потписа и ауторства користи се елемент ADDRESS.
Елемент има почетни и завршни маркер.
Обично приказује искошен текст и раздваја параграф пре и после елемента ADDRESS.
31
34
Форматирање речи
Поједине речи или делови текста могу се приказати различитим стиловима.
Стилови могу бити:
логички
физички.
Код логичких стилова начин приказивања је одређен читачем.
Код физичких стилова начин приказивања одређује сам корисник.
34
35
Логички стилови су:
CITE
CODE
EM
KBD
SAMP
STRONG
VAR.
Сви елементи логичких стилова имају почетне и завршне маркере.
35
36
Елемент CITE се користи за приказивање цитата или референци. Текст је у курзиву.
36
38
Елемент EM се користи за истицање текста. Текст је у курзиву.
38
39
Елемент STRONG се користи за јаче истицање текста. Текст је приказан појачаним фонтом.
39
40
Физички стилови су:
Сви елементи имају почетне и завршне маркере.
B
I
TT
BIG
SMALL
SUB
SUP
Слова су појачана
Слова су искошена
Слова су приказана непропорционалним фонтом
Текст је приказан великим фонтом
Текст је приказан малим фонтом
Текст је приказан испод нормалног текста
Текст је приказан изнад нормалног текста
40
41 41
43
Елементи набрајања
HTML подржава следеће типове набрајања:
описне листе или листе за дефиниције
листе набрајања
листе навођења.
Описне листе су листа термина и одговарајућих дефиниција.
Овај тип листа је посебно погодан за индексе.
43
44
Описна листа почиње маркером <DL>, а завршава се маркером </DL>.
Елемент DL садржи елементе DT и DD.
Оба елемента имају почетне и завршне маркере, али се завршни маркери могу изоставити.
Елемент DT се користи за означавање термина који ће се дефинисати у листи.
Елемент DD се користи за означавање дефиниције у листи.
44
45
Читачи обично увлаче дефиниције у новом реду испод термина који се дефинише.
45
47
Листа набрајања се користи за представљање листе чланова одвојене празним редом.
Листа почиње маркером <UL>, а завршава се маркером </UL>.
Чланови листе се представљају елементом LI.
Елемент LI има почетни и завршни маркер, али се завршни маркер може изоставити.
47
48 48
51
За дефинисање стила ознаке за целу листу или појединачне ставке листе може се користити превазиђени атрибут type.
Вредности атрибута type могу бити:
disc
circle
square.
Ако је type=disc, тада је ознака •
Ако је type=circle, тада је ознака ◦
Ако је type=square, тада је ознака ▪ 51
52 52
55
Слике
Слике се не кодирају у HTML документ, већ се наводи путања до слике.
За приказивање слика користи се елемент IMG.
Елемент IMG има само почетни маркер.
Елемент IMG има следеће атрибуте:
SRC
ALT
WIDTH
HEIGHT
USEMAP
ISMAP
56
Вредност атрибута SRC је адреса слике која треба да буде укључена у документ.
Атрибут је обавезан.
58
Атрибути WIDTH и HEIGHT дефинишу величину слике.
Вредности атрибута могу бити у пикселима или у процентима.
Вредности у процентима одређују величину слике у односу на ширину и висину прозора читача.
Стилови могу да контролишу висину и ширину слике.
59
60
61
62
63
Атрибути USEMAP и ISMAP се користе за дефинисање мапе слике која треба да се користи са референтном сликом.
Мапе слика везују подручја слике са серијом URL адреса тако да притисак на одређени део доводи корисника на одговарајућу страну.
Постоје две врсте мапа слика:
клијентска
серверска.
Клијентске мапе слика раде много брже зато што се обрађују у посетиочевом читачу.
64
Елемент MAP може имати један или више елемената AREA.
Елемент AREA дефинише подручје на које може да се притисне.
Елемент има само почетни маркер.
Атрибути елемента AREA су:
SHAPE
COORDS
HREF
NOHREF
ALT.
65
66
Подручја
69
Везе
Основна снага HTML језика се налази у способности повезивања дела текста или неке слике са другим документом, сликом, анимацијом итд.
Веза има три дела:
одредиште
назив
циљ.
Одредиште одређује шта ће се дешавати када корисник притисне везу.
70
Могу се правити везе које приказују слику, пуштају звук или филм, преузимају датотеке, отварају групе порука, шаљу електронску пошту итд.
Сва одредишта су дефинисана писањем URL адресе.
URL адреса или униформни локатор ресурса је модерно име за адресу.
Она садржи информације о томе где је датотека и шта читач треба да ради са њом.
71
Друге честе шеме су:
http://www.site.com/folder1/file.html
шема име сервера путања
име датотеке
https://
ftp://
news:
mailto:
file:///
За сигурне Web стране
За пренос датотека
За слање и читање порука са Usenet група
За слање електронске поште
За приступање датотекама на локалном
диску
72
Веза се приказује елементом А.
Елемент има почетни и завршни маркер.
Елемент А има следеће атрибуте:
HREF
NAME
ACCESSKEY
TABINDEX
Обавезно мора да се наведе један од атрибута HREF или NAME.
Атрибут HREF указује на везу ка другом документу или ка другој локацији унутар документа.
73
74
75
76
Ако је сидро у посебном документу, тада се за позивање дела стране користи
<a href=“strana.html#imeSidra”>
Osnovne kategorije CSS objekta
CSS objekat se sastoji od mnoštva atributa koji se mogu svrstati u sledeće kategorije:
Border - Izgled okvira
Margin - Udaljenost od drugih elemenata
Padding – Udaljenost od okvira do sadržaja
Font – Izgled slova
Background – Izgled pozadine
Deklarisanje stilova
Tri načina za deklarisanje stilova
U style elementu uokviru strane
U style atributu uokviru samog elementa
U eksternom CSS fajlu
Deklaracija u style elementu <html> <head> <title>Uvod u CSS</title> <style> #par1 { font-family:tahoma; font-size:20px; border:2px #223300 dashed; /* slozeni atribut */ background-color:#3d7f44; } </style> </head> <body style="background-color:#acd373"> <p id="par1">Hello <span style="color:white;">world</span></p> <div>Hello again</div> </body> </html>
Deklaracija u style atributu
<html>
<head>
<title>Uvod u CSS</title>
</head>
<body style="background-color:#acd373">
<p id="par1“ style=“font-family:tahoma; font-size:20px; border:2px #223300 dashed; background-color:#3d7f44;” >Hello <span style= "color:white;“> world</span></p>
<div>Hello again</div>
</body>
</html>
Deklaracija u eksternom fajlu <html> <head> <title>Uvod u CSS</title> <link rel=“stylesheet” type=“text/css” href=“main.css”> </head> <body style="background-color:#acd373"> <p id="par1“>Hello <span style="color:white;">world </span></p> <div>Hello again</div> </body> </html>
#par1 { font-family:tahoma; font-size:20px; border:2px #223300 dashed; /* slozeni atribut */ background-color:#3d7f44; }
main.css
Najlepši srpski sajtovi
Ovo je moja top lista najbolje dizajniranih domaćih sajtova. Izbor je krajnje subjektivan i ograničen, i sigurno da postoji još mnogo sajtova za koje ne znam.
Glavni kvalitet ovih sajtova je ne samo što su lepi, nego što su napravljeni u CSS-u. Svako može nacrtati lepu stranicu, ali nije lako sve to pretočiti u kod.
Kontakt
PRIRODNO-MATEMATIČKI FAKULTET
Niš • Višegradska 33 www.pmf.ni.ac.rs
Telefon - (018) 533-015
Hvala na paznji!
Pitanja?
top related