HTML & CSStnt.etf.rs/~oe4ppt/pdf/vezbe/OE4PPT_2017_1.pdf · 2017-10-25 ·

HTML & CSS

PRAKTIKUM – PRIMENA TCP/IP TEHNOLOGIJA U NAMENSKIM SISTEMIMA

MARIJA JANKOVIĆ

SADRŽAJ

• Pregled kursa OE4PPT

• Termini laboratorijskih vežbi

• Uvod u osnovne pojmove internet programiranja

• HTML

• CSS

PREGLED SADRŽAJA KURSA

• Cilj kursa je keiranja IP komunikacije između korisnika i

namenskog sistema koji prikuplja podatke.

• Akcenat je stavljen na serversko prikupljanje i obradu

podataka, a zatim prikazivanje obrađenih podataka u okviru

proste web stranice.

PREGLED SADRŽAJA KURSA

• HTML

• CSS

• JavaScript

• PHP

TERMINI LABORATORIJSKI VEŽBI

OSNOVNI POJMOVI

• Aplikacija

• Server

• Klijent

APLIKACIJA

• Bilo koji program koji izvršava određeni zadatak

• Klasična aplikacija je instalirana na klijentskoj mašini i

pokreće se izvršavanjem odgovarajućeg .exe fajla

WEB APLIKACIJA

• Web aplikacija se nalazi na internetu (tj. serveru) i njeno

izvršavanje se pokreće slanjem zateva preko odgovarajućeg

URL-a.

• Često je izlaz aplikacija nova HTML stranica koja se

prikazuje korisniku.

• Primeri web aplikacija su: webmail, online aukcije, instant

messenger...

STATIČKI WEB SAJTOVI

• Statički sajtovi se ne menjaju sve dok sam autor nešto ne

promeni

• Omogućavaju slanje informacija ka korisnicima

• Korisnici nemaju mogućnost interakcije i ne mogu neki

zadatak da izvršavaju na programabilan način

• Statičke veb sajtove čine obične statičke HTML stranice

(skup HTML fajlova)

ZAHTEV ZA HTML DOKUMENTOM

DINAMIČKI WEB SITE-OVI

Dinamički veb sajtovi omogućavaju interakciju sa

korisnikom.

Dinamičke veb sajtove čine dinamičke stranice

(skup php, asp, jsp... fajlova) koje takođe koriste

HTML za komunikaciju sa klijentom.

ZAHTEV ZA PHP SKRIPTOM

HTML = HYPERTEXT MARKUP LANGUAGE

• HTML je dominantan jezik World Wide Web-a.

• Sa kreiranjem HTML-a i razvojem pretraživača (eng. browser)

koji vrše interpretaciju HTML-a omogućeno je da svako sa

kompjuterom i telefonskom linijom može da surfuje po

internetu.

• HTML je u suštini jednostavan jezik koji služi za izvršavanje

aplikacija na internetu.

ŠTA HTML NIJE

Nije kao printovanje sadržaja.

Nije ni slika.

U slici desno su i slika i tekst zapravo samo pažljivo obojeni pikseli.

Slike i tekst se na internetu drugačije predstavljaju

slike se šalju kao zasebni fajlovi, a onda se predstavljaju preko piksela

tekst se prikazuje kao tekst

HTML5

„HTML5 is supposed to be what HTML should have been in

the first place.“

U ovom trenutku sa pojavom Microsoft Edga-a zatvoren je

krug svih poznatiji browser-a koji podržavaju HTML5. Tu se

nalaze i Chrome, Firefox, Opera, Safari.

HTML5 je današnji standard za pisanje web sadržaja.

Editor-i

Notepad

Notepad ++

Adobe Dreamweaver

Netbeans

Eclipse

Browser-i

Google Chrome

Mozilla Firefox

Internet Explorer

Opera

Safari

<tag>

HTML komande se pišu u vidu tagova.

Jedan tag je komanda koja govori čitaču kako i na koji način

da prikaže sadržaj opisane stranice.

Tagovi se pišu unutar oznaka < i >, npr:

<html>

<body>

<html> tag se nalazi na početku svakog HTML dokumenta

</tag>

Većina tagova ima i početni i završni tag.

Završni tag se dobija dodavanjem znaka "/" i označava mestona kom prestaje dejstvo početnog taga.

Uparuju se početni i završni:

<html> i </html>

<body> i </body>

<p> i </p>

<font> i </font>

<HTML> ili <html>

HTML tagovi nisu case sensitive tj. svejedno je da li se

pišu malim ili velikim slovima, pa je isto značenje

prethodnog taga <html>, kao i sledećeg <HTML>

Preporuka: malim slovima pisati tagove

Atributi

Atributi u okviru taga detaljnije određuju naredbu zadatu u

okviru taga

<tag name=“value” parametar=“vrednost”> primer </tag>

Uređeni par name/value se piše: name=“value“

Hello world

<!DOCTYPE html>

<html>

<head>

<title>This is a title</title>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

Vizuelni prikaz strukture HTML-a

Minimalna struktura



Komentar se može uneti radi dodatnog pojašnjenja delova

koda, ili u cilju isključivanja određenih delova HTML tagova

Neki tagovi ne podržavaju pisanje komentara u svom okviru

(npr. style)

<head>

<head> je element za zaglavlje, koji uključuje skripte, upućuje čitač gde da nađe stilove za učitanu stranicu, pruža meta-informacije, itd.

Sledeće oznake se mogu dodati u head sekciju:

<title> - naslov stranice, ispisuje se u tab-u browser prozora

<style> - definiše stil grupe tagova ili svakog posebno, inline CSS

<link> - uvezivanje HTML dokumenta i eksternog resursa, najčešće .css fajla

<meta> - keywords, autor info, podaci za pretraživače, refresh rate

<meta charset=“utf-8”>

<meta http-equiv="refresh" content="30">

<meta name="keywords" content="ETF, Signali, Telekomunikacije, Elektronika">

<script> - učitavanje JavaScript koda

<body>

Analogno main zaglavlju u C-u, body predstavlja region u

kome se definišu svi tag-ovi čiji će sadržaj biti prikazan na

stranici.

Moguće je za ceo body pomoću raznih atributa (backgound,

background-color, font-family...) definisati stil celog

dokumenta, ali to najčešće nije praktično.

Formatiranje teksta 1

<h1> Veliki naslov </h1>

<h1 align=“center” >Veliki naslov na sredini stranice</h1>

<h4> Mali naslov </h4>

<p> Moj prvi paragraf </p>

<div color=“darkred” align=“right”> Desni odeljak </div>

<p> Vidi mama mogu i bez desne ruke

A i bez tag-a

<p> hej, a zašto nema novog reda? Brbr <br/> Evo, sad ima </p>

Formatiranje teksta 2

Boje

Definišu se na dva načina:

Imenima predefinisanih boja (red, blue, green, darkred, black…)

Heksadecimalnim kodom RGB vrednosti

color=“#FF0000” – crvena

#FFFFE0

#000000

#808080

http://htmlcolorcodes.com/

<a>

Često je potrebno uspostaviti vezu između različitih stranica, ili različitih delova iste stranice.

Linkovi nam omogućavaju prelazak

sa jednog mesta na stranici na drugo mesto unutar iste stranice

sa jedne naše stranice na drugu našu stranicu (interni link, u okviru našeg sajta) ili

sa jedne naše stranice na drugu tuđu stranicu (eksterni link, na nekom drugom serveru)

<a>

Link podrazumeva da će korisnik klikom na određeni objekat(reč, grupa reči, slika, oblik) odabrati željeni prelazak

Destinacija je definisana atributom href

<a href=“putanja do nove html stranice”> tekst na kojitreba da se klikne </a>

<a href=“http://tnt.etf.rs/~oe4ppt”> Sajt predmeta </a>

mailto

<a> je inline tag, tj. Ne podrazumeva prelazak u naredni red, treba dodati <br> ili <br/> ukoliko je potrebno

<a target=“_self”>

Atribut target nam omogućava da definišemo u kom

prozoru ili frejmu će se otvoriti pozvani link

“_blank” – novi tab ili prozor

“ime_frejma” – otvara se u prethodno definisanom frejmu u

okviru iste stranici

“_self” – podrazumevana vrednost target atributa, otvara u

istom prozoru

Link na mejl

Za konsultacije pošaljite mejl predmetnom asistentu na <a

href=“mailto: [email protected]”> [email protected] </a>

Slika kao link

<a href=“stranica na koju skacemo”> <img src=“slika.gif”> </a>

Tag <img> pored putanje do slike ima i sledeće atribute:

alt – ukoliko browser ne otvara sliku umesto nje se pojavljuje teks definisan ovim atributom

height – u pikselima [px] ili u procentima širine stranice [%]

width – u pikselima [px] ili u procentima širine stranice [%]

Kao i globalne atribute HTML tagova

title

style

id

class

draggable

dropzone

<body> globalni stil

Ukoliko želimo možemo definisati globalni stil za celu stranicu

tako što definišemo globalne atribute za <body> tag

Neki od atributa su:

background-color – boja pozadine

text – boja teksta

background-image – postavljanje slike kao pozadine

repeat-x, repeat-y, repeat-xy, no-repeat...

background-position

left top, left center, center center, right bottom...

<table>

Tabela je dvodimenzionalna matrica čiji se elementi nazivaju ćelije. U HTML-u su tagovi organizovani tako da se matrica definiše kao niz redova koji sadrže niz elemenata tj. ćelija.

Ćelija može sadržati različite informacije: brojeve, tekst, boje, liste, linkove, slike...

<table> tag ima sledeće atribute:

border

background-color

cellspacing

cellpadding

width (px/%)

height (px/%)

Naziv tabele zadaje se tagom <caption>

<caption align=“bottom”> Primer </caption>

<tr>, <th>, <td>

<tr>

Tag <tr> definiše jedan red tabele </tr>

Od atributa podržava horizontalno poravnavanje align kao i

vertikalno poravnavanje valing, kao i sve generalne atribute

(color, font...)

<td>

Opis pojedinačne ćelije počinje sa ,<td> a završava se sa

</td>

Pored align i valign omogućava cell merge preko naredbi

rowspan – spajanje ćelija iste kolone

colspan – spajanje ćelija u istom redu

vrednost koja se dodeljuje rowspan i colspan atrbutima je

broj ćelije koje treba merge-ovati

<th>

Tag <th> ima ista svojstva kao tag <td> s tom razlikom što

obezbeđuje da sadržaj ćelije bude automatski centriran i

boldovan.

Tabela ne mora da sadrži <th> tag, ali mora da sadrži

bar jedan <td> tag, u koji se smešta sadržaj tabele.

tabela1.html

Otvoriti fajl tabela1.html i u browser-u i u editor-u

Izmeniti tabelu tako da se iste susedne vrednosti u

kolonama ili redovima merge-uju.

Dodeliti različitu boju pozadine svakom redu tabele

Kako lako definisati stil teksta, sekcije, objekta?

<tr align="center" valign="middle"> </tr>

<tr style=“align:center; valign:middle;"> </tr>

<head>

<style type=“text/css”>

td { text-align: center; vertical-align: middle;}

</style>

</head>

<body>

.

.

<tr> </tr>

CSS – Cascading Style Sheets

Koristi se u okviru HTML-a u cilju smanjivanja količine

repetitivnog koda.

Može predstavljati zasebni fajl sa definicijama stilova za sve

tag-ove, čime je omogućeno isto stilizovanje više html

stranica.

Na jednostavan način se prave skalabilne izmene u stilu i

prikazu.

CSS – Cascading Style Sheets

CSS kod se može učitati na tri različita načina

Eksterni stilovi - .css fajl sa stilovima

Interni stilovi – stilovi su navedeni u <head> zaglavlju u tag-u

<style> u formi CSS koda. Samo dati fajl ima pristup.

Atribut određenog tag-a – stil važi samo u konkretnom tag-u

Primer CSS – interni stilovi

<html>

<head>

<style type="text/css">

h1 { background-color: #00ff00; }

p { font-family: Verdana; }

</style>

</head>

<body>

<h1>Prvi naslov</h1>

<h2>Drugi naslov</h2>

<p>Tekst paragrafa</p>

</body>

</html>

Primer CSS – eksterni stilovi

primer.html

<html>

<head>

<link rel=“stylesheet” type=“text/css” href=“style.css”>

</link>

</head>

<body>

<h1>Prvi naslov</h1>

<h2>Drugi naslov</h2>

<p>Tekst paragrafa</p>

</body>

</html>

style.css

h1 {

background-color:#00ff00;

}

p {

font-family: Verdana;

}

CSS ID ili CLASS

Nekada za iste tagove želimo različiteparametre prikaza (nećemo da paragraf <p> uvek bude centriran npr.)

Definiše se ID kako bi se izolovao stil jednog elementa.

ID se koristi kao atribut različitih tag-ova.

Klasa se definiše kao posebna verzija istog tag-a.

CSS ID

Primer:

<head>

<style type=“text/css”>

h1 { text-align: center;}

p.desno { text-align:right;}

.centrirano { text-align:center; }

#idprimer {text-align:right; color: green;}

</head>

<body>

:

<h1> Naslov </h1>

<h1 id=“idprimer”> Novi Naslov </h1>

<p id=“idprimer”> desni zeleni paragraph </p>

<p class=“centrirano”> centrirani paragraph </p>

</body>

BLOKOVI I LAYOUT

HTML elemente možemo da grupišemo u blokove

korišćenjem naredbe <div>

Kada se koristi u CSS, ovaj tag može da definiše veliki broj

atributa čime može uticati na stil (izgled) sadržaja bloka i

samog bloka.

Primer layout.html & layout.css

ZADATAKHTML & CSS

STRANICA LABORATORIJA ZA SAJT PREDMETA

Naziv stranice je Laboratorija

Header stranice je širine 800 px i sadrži sliku sajt_header.png

Sa leve strane je potrebno postaviti meni (širine 200px, visine 500 px) sa linkovima na:

početnu stranu (link ka pravom sajtu, otvara se u novom prozoru)

obaveštenja (link ka pravom sajtu, otvara se u novom prozoru)

Linkovi sa leve strane treba da imaju veći font i padding.

U centralnom delu stranice napisati obaveštenje o Spisku studenata za laboratoriju i linkovati pravi spisak.

Ispod spiska postaviti centralizovanu tabelu rasporeda laboratorijskih vežbi

U footer-u stranice postaviti centrirano ulinkovan mejl predmetnog asistenta

Stil tabele, segmenata layout-a i teksta definisati u zasebnom .css fajlu.

Koristiti bold, italic, i druge izmene slova kako bi što bolje akcentovali tekst.

Dati kreativno rešenje za boje i stil sajta ☺

ACKNOWLEDGEMENT & REFERENCES

Dražen Drašković, Boško Nikolić, Internet programiranje

https://rti.etf.bg.ac.rs/rti/os4ip/vezbe/html/IP_Vezbe1_HTML.pdf



https://rti.etf.bg.ac.rs/rti/os4ip/vezbe/html/IP_Vezbe4_CSS.pdf

https://www.html-5-tutorial.com/about-html.htm

Documents

HTML & CSStnt.etf.rs/~oe4ppt/pdf/vezbe/OE4PPT_2017_1.pdf · 2017-10-25 ·