uvod u web programiranje - pmf.ni.ac.rspmf.ni.ac.rs/pmf/vesti/html.pdf · internet vs. web internet...

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

23

Форматирање блокова текста

Елементи за форматирање блокова текста се користе за форматирање читавих пасуса текста у документу.

Користе се у телу документа.

За форматирање наслова користе се елементи H1, H2, H3, H4, H5 и H6.

Користе се за одвајање страна у мање целине.

23

24

Сви елементи имају почетне и завршне маркере.

Званично правило о насловима је следеће: што је наслов већег нивоа (што је мањи број), то ће оно бити истакнутије приказано.

Већина читача их приказује на исти начин: фонтом Times New Roman, појачано, са 24, 18, 14, 12, 10 и 8 пиксела, респективно.

Могу се користити стилови за форматирање наслова одређеним фонтом, величином или бојом.

24

26

Читачи аутоматски преламају текст према ширини блока или прозора, правећи нове редове ако је потребно.

За креирање новог параграфа користи се елемент P.

Елемент има почетни и завршни маркер, али се завршни маркер може изоставити.

Параграф је окружен вертикалним простором од једног или пола реда.

Могу се користити стилови за форматирање пасуса одређеним фонтом, величином или бојом. 26

28

Ручни прекид реда остварује се елементом BR.

Елемент има само почетни маркер и не садржи друге елементе.

Ручни прекид реда се користи за кратке редове текста који треба да се појаве један после другог без много простора између.

Могу се користити вишеструке ознаке BR да би се направио додатни простор између редова или параграфа.

28

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

43

Елементи набрајања

HTML подржава следеће типове набрајања:

описне листе или листе за дефиниције

листе набрајања

листе навођења.

Описне листе су листа термина и одговарајућих дефиниција.

Овај тип листа је посебно погодан за индексе.

43

44

Описна листа почиње маркером <DL>, а завршава се маркером </DL>.

Елемент DL садржи елементе DT и DD.

Оба елемента имају почетне и завршне маркере, али се завршни маркери могу изоставити.

Елемент DT се користи за означавање термина који ће се дефинисати у листи.

Елемент DD се користи за означавање дефиниције у листи.

44

45

Читачи обично увлаче дефиниције у новом реду испод термина који се дефинише.

45

47

Листа набрајања се користи за представљање листе чланова одвојене празним редом.

Листа почиње маркером <UL>, а завршава се маркером </UL>.

Чланови листе се представљају елементом LI.

Елемент LI има почетни и завршни маркер, али се завршни маркер може изоставити.

47

51

За дефинисање стила ознаке за целу листу или појединачне ставке листе може се користити превазиђени атрибут type.

Вредности атрибута type могу бити:

disc

circle

square.

Ако је type=disc, тада је ознака •

Ако је type=circle, тада је ознака ◦

Ако је type=square, тада је ознака ▪ 51

55

Слике

Слике се не кодирају у HTML документ, већ се наводи путања до слике.

За приказивање слика користи се елемент IMG.

Елемент IMG има само почетни маркер.

Елемент IMG има следеће атрибуте:

SRC

ALT

WIDTH

HEIGHT

USEMAP

ISMAP

56

Вредност атрибута SRC је адреса слике која треба да буде укључена у документ.

Атрибут је обавезан.

58

Атрибути WIDTH и HEIGHT дефинишу величину слике.

Вредности атрибута могу бити у пикселима или у процентима.

Вредности у процентима одређују величину слике у односу на ширину и висину прозора читача.

Стилови могу да контролишу висину и ширину слике.

63

Атрибути USEMAP и ISMAP се користе за дефинисање мапе слике која треба да се користи са референтном сликом.

Мапе слика везују подручја слике са серијом URL адреса тако да притисак на одређени део доводи корисника на одговарајућу страну.

Постоје две врсте мапа слика:

клијентска

серверска.

Клијентске мапе слика раде много брже зато што се обрађују у посетиочевом читачу.

64

Елемент MAP може имати један или више елемената AREA.

Елемент AREA дефинише подручје на које може да се притисне.

Елемент има само почетни маркер.

Атрибути елемента AREA су:

SHAPE

COORDS

HREF

NOHREF

ALT.

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 указује на везу ка другом документу или ка другој локацији унутар документа.

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?

uvod u web programiranje - pmf.ni.ac.rspmf.ni.ac.rs/pmf/vesti/html.pdf · internet vs. web internet...

Documents