Увод у web програмирање
DESCRIPTION
Увод у WEB програмирање. W orld W ide W eb (ili samo Web ) - kolekcija ogromnog broja elektronskih dokumenata sačinjenih od povezanih Web stranica napisanih u HTML-u. Хипертекст. Странице садрже показиваче на друге странице. Интернет. Технологије. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/1.jpg)
Увод у Увод у WEBWEB програмирањепрограмирање
1
![Page 2: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/2.jpg)
World Wide Web (ili samo Web) - kolekcija ogromnog broja elektronskih dokumenata sačinjenih od povezanih Web stranica napisanih u HTML-u.
2
Sajt A
Sajt B
Sajt C
Sajt DSajt E
Sajt F
Sajt G
![Page 3: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/3.jpg)
Хипертекст
3
Странице садрже показиваче на друге странице.
![Page 4: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/4.jpg)
Интернет
4
Ljk kjls fsf Dfsaf f adf
Fafadf fadfaf
Disk
Sde f Dfsaf f adf
Fafad
Disk
kjls fsf Dfsaf f adf
Fafad
Hiperlink na abcd.com
Hiperlink na xyzw.com
KlijentServer
abcd.comServer
xyzw.com
Web pretraživač
Trenutno prikazana stranica u
pretraživaču
Web server Web server
I N T E R N E T
TCP konekcija
![Page 5: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/5.jpg)
Технологије Веб је клијент сервер окружење које се састоји од
три компоненте: клијента, сервера, мреже Технологије за веб отежавају посао дизајнерима
Брза промена технологије израде Непотпуно дефинисана Читачи је не подржавају у потпуности
Клијенска технологија која се користи за веб: Читач веба – browser Html Css JavaScript
5
![Page 6: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/6.jpg)
Развој WWW апликацијаПРОГРАМСКИ ЈЕЗИЦИ HTML (Hypertext Markup Language) Java Perl ASP CSS JavaScript
ШТА ЈЕ ПОTРEБНO ЗA RAZVOJ WWW APЛИКAЦIJE ? Теxт едитор Веб browser Графички програм Веб сервер (опционо)
6
![Page 7: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/7.jpg)
H T M LH T M L Hypertext Markup Language
7
![Page 8: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/8.jpg)
HTML HTML је структуирани описни језик који се
користи за израду Веб страна. Представља поједностављени подскуп SGML-a
(Standard Generalized Markup Language). Омогућава формирање изгледа целе стране,
њених саставних деловa кaо и мрeжно структуирaног докумeнтa.
HTML елементи указују WWW читачу шта треба да предузме и како треба да прикаже текст.
HTML документ је plain-text (ASCII) фајл који креирамо помоћу било којег текст едитора.(нпр. Notepad на Windows рачунаримa).
WYSIWYG HTML Едитори (Dreamweaver, Home Page, PageMill).
WYSIWYG "what you see is what you get";
8
![Page 9: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/9.jpg)
WYSIWYG
9
![Page 10: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/10.jpg)
http://www.w3scools.com
10
![Page 11: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/11.jpg)
Правила језика HTML HTML документи су структуирани Језик HTML не прави разлику између малих и
великих слова HTML препознаје само један размaк HTML елементи треба да су затворени, осим ако су
празни Атрибуте језика HTML треба смештати у знакове
наводa Читачи игноришу непознате атрибуте и елементе
језика HTML Тестирање – CSE Validatore
11
![Page 12: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/12.jpg)
HTML ELEMENTI
Описни језици попут HTML састоје се од кодова, који се називају елементи (тагови), и који се користе за описивање структуре и изгледа документа.
Читач Веба интерпретира HTML елементе и на основу њих приказује документ на екрану.
HTML тагови служе за означавање различитих елемената у HTML документу.
HTML таг се означава са знаком “мање од” (<), имена тагa, и знaком “веће од” (>). Тaгови су обично упaрени.
<tag> … </tag> Неки тагови могу имати атрибуте. <title> <TITLE> <TiTle>.
12
![Page 13: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/13.jpg)
13
TagTag ОписОпис
<html> ... </html> Декларише да је Web страница писана у HTML-у
<head> ... </head> Заглавље странице
<title> ... </title> Дефинише наслов странице
<body> ... </body> Ограничава тело странице
<h n> ... </h n> Ограничава наслов нивоа n
<b> ... </b> Задебљана слова (bold)
<i> ... </i> Изсошена слова italik
<center> ... </center> Хоризонтално центрирање ... на страници
<ul> ... </ul> Ограничава неуређену листу
<ol> ... </ol> Ограничава уређену листу
<il> ... </il> Ограничава ставку уређене листе
<br> Умеће нови ред (прелом линије)
<p> Започиње нови параграф
<hr> Умеће хоризонталну линију по целој дужини стране
<img src = “...“> Приказује слику
<a href=“...“> ... </a> Дефинише hiperlink
![Page 14: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/14.jpg)
14
Тело документа Тело документа садржи сав текст и
путање до слика које чине страну, заједно са свим елементима који контролишу изглед стране.
Тело документа почиње маркером <BODY> и завршава се маркером </BODY>.
Елемент BODY је опциони.
14
![Page 15: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/15.jpg)
1515
![Page 16: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/16.jpg)
16
Форматирање блокова текста
Елементи за форматирање блокова текста се користе за форматирање читавих пасуса текста у документу.
Користе се у телу документа. За форматирање наслова користе се
елементи H1, H2, H3, H4, H5 и H6. Користе се за одвајање страна у мање
целине.
16
![Page 17: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/17.jpg)
17
Сви елементи имају почетне и завршне маркере.
Званично правило о насловима је следеће: што је наслов већег нивоа (што је мањи број), то ће оно бити истакнутије приказано.
Већина читача их приказује на исти начин: фонтом Times New Roman, појачано, са 24, 18, 14, 12, 10 и 8 пиксела, респективно.
Могу се користити стилови за форматирање наслова одређеним фонтом, величином или бојом.
17
![Page 18: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/18.jpg)
1818
![Page 19: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/19.jpg)
19
Читачи аутоматски преламају текст према ширини блока или прозора, правећи нове редове ако је потребно.
За креирање новог параграфа користи се елемент P.
Елемент има почетни и завршни маркер, али се завршни маркер може изоставити.
Параграф је окружен вертикалним простором од једног или пола реда.
Могу се користити стилови за форматирање пасуса одређеним фонтом, величином или бојом.
19
![Page 20: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/20.jpg)
2020
![Page 21: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/21.jpg)
21
Ручни прекид реда остварује се елементом BR.
Елемент има само почетни маркер и не садржи друге елементе.
Ручни прекид реда се користи за кратке редове текста који треба да се појаве један после другог без много простора између.
Могу се користити вишеструке ознаке BR да би се направио додатни простор између редова или параграфа.
21
![Page 22: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/22.jpg)
2222
![Page 23: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/23.jpg)
23
За приказивање хоризонталних линија користи се елемент HR.
Елемент има само почетни маркер и не садржи друге елементе.
23
![Page 24: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/24.jpg)
24
За приказивање адреса, потписа и ауторства користи се елемент ADDRESS.
Елемент има почетни и завршни маркер. Обично приказује искошен текст и раздваја
параграф пре и после елемента ADDRESS.
24
![Page 25: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/25.jpg)
25
Преформатирани текст омогућава да се одрже оригинални прекиди и размаци.
То је идеално за кôд, песме, табеле итд.
За приказивање преформатираног текста ко-ристи се елемент PRE.
Елемент има почетни и завршни маркер.
Преформатирани текст се обично приказује са фонтом са једнаким размаком као што је Courier. 25
![Page 26: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/26.jpg)
2626
![Page 27: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/27.jpg)
27
За цитирање текста на нивоу блока користи се елемент BLOCKQUOTE.
Елемент има почетни и завршни маркер.
Уобичајено је да текст буде померен с лева и десна, формира нови параграф и додаје простор изнад и испод цитата.
27
![Page 28: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/28.jpg)
2828
![Page 29: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/29.jpg)
29
За дефинисање термина користи се елемент DFN.
Елемент има почетни и завршни маркер. Текст се приказује у курзиву.
29
![Page 30: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/30.jpg)
30
Форматирање речи Поједине речи или делови текста могу се
приказати различитим стиловима. Стилови могу бити:
логички физички.
Код логичких стилова начин приказивања је одређен читачем.
Код физичких стилова начин приказивања одређује сам корисник.
30
![Page 31: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/31.jpg)
31
Логички стилови су: CITE CODE EM KBD SAMP STRONG VAR.
Сви елементи логичких стилова имају почетне и завршне маркере.
31
![Page 32: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/32.jpg)
32
Елемент CITE се користи за приказивање цитата или референци. Текст је у курзиву.
32
![Page 33: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/33.jpg)
33
Елемент CODE се користи за приказивање програмског кода. Текст је приказан непропорционалним фонтом.
33
![Page 34: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/34.jpg)
34
Елемент EM се користи за истицање текста. Текст је у курзиву.
34
![Page 35: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/35.jpg)
35
Елемент KBD се користи за истицање текста. Текст се приказује непропорционалним фонтом.
35
![Page 36: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/36.jpg)
36
Елемент SAMP се користи за приказивање примера. Текст је приказан непропорцио-налним фонтом.
36
![Page 37: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/37.jpg)
37
Елемент STRONG се користи за јаче истицање текста. Текст је приказан појачаним фонтом.
37
![Page 38: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/38.jpg)
38
Елемент VAR указује на име променљиве. Текст је у курзиву.
38
![Page 39: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/39.jpg)
39
Физички стилови су:
Сви елементи имају почетне и завршне маркере.
B
I
TT
BIG
SMALL
SUB
SUP
Слова су појачана
Слова су искошена
Слова су приказана непропорционалним фонтом
Текст је приказан великим фонтом
Текст је приказан малим фонтом
Текст је приказан испод нормалног текста
Текст је приказан изнад нормалног текста
39
![Page 40: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/40.jpg)
4040
![Page 41: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/41.jpg)
41
Елементи набрајања
HTML подржава следеће типове набрајања: описне листе или листе за дефиниције листе набрајања листе навођења.
Описне листе су листа термина и одговарајућих дефиниција.
Овај тип листа је посебно погодан за индексе.
41
![Page 42: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/42.jpg)
42
Описна листа почиње маркером <DL>, а завршава се маркером </DL>.
Елемент DL садржи елементе DT и DD. Оба елемента имају почетне и завршне
маркере, али се завршни маркери могу изоставити.
Елемент DT се користи за означавање термина који ће се дефинисати у листи.
Елемент DD се користи за означавање дефиниције у листи.
42
![Page 43: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/43.jpg)
43
Читачи обично увлаче дефиниције у новом реду испод термина који се дефинише.
43
![Page 44: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/44.jpg)
44
Листа набрајања се користи за представљање листе чланова одвојене празним редом.
Листа почиње маркером <UL>, а завршава се маркером </UL>.
Чланови листе се представљају елементом LI.
Елемент LI има почетни и завршни маркер, али се завршни маркер може изоставити.
44
![Page 45: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/45.jpg)
4545
![Page 46: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/46.jpg)
46
За дефинисање стила ознаке за целу листу или појединачне ставке листе може се користити превазиђени атрибут type.
Вредности атрибута type могу бити: disc circle square.
Ако је type=disc, тада је ознака • Ако је type=circle, тада је ознака ◦ Ако је type=square, тада је ознака ▪
46
![Page 47: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/47.jpg)
4747
![Page 48: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/48.jpg)
48
Сортиране листе се користе за представљање листи које су сортиране према неком критеријуму.
Листа почиње маркером <OL>, а завршава се маркером </OL>.
Чланови листе се представљају елементом LI.
Ако другачије није одређено, чланови сортиране листе се нумеришу бројевима 1, 2, 3 итд.
48
![Page 49: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/49.jpg)
4949
![Page 50: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/50.jpg)
50
Начин обележавања набрајања може се променити превазиђеним атрибутом type.
Могуће вредности атрибута type су:
A
a
I
i
1
За обележавање користимо велика слова A, B, C …
За обележавање користимо мала слова a, b, c …
За обележавање користимо велике римске бројеве I, II …
За обележавање користимо мале римске бројеве i, ii …
За обележавање користимо арапске цифре 1, 2, 3 ...
50
![Page 51: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/51.jpg)
5151
![Page 52: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/52.jpg)
5252
![Page 53: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/53.jpg)
5353
![Page 54: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/54.jpg)
5454
![Page 55: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/55.jpg)
55
Нумерација сортиране листе може почети бројем различитим од 1.
То се постиже превазиђеним атрибутом start. Вредност атрибута start се увек поставља у
бројевима, који се затим конвертују према одговарајућем типу набрајања.
55
![Page 56: Увод у WEB програмирање](https://reader036.vdocuments.mx/reader036/viewer/2022081504/56813221550346895d987fed/html5/thumbnails/56.jpg)
56
Може се променити набрајање дате ставке у листи.
То се постиже превазиђеним атрибутом value. Промена броја ставке у листи доводи до
промене следећих елемената у листи.
56