HTML – Ивана Грујовић

HTML & CSS

PRAKTIKUM – PRIMENATCP/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ČKIWEB 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 jezikWorld 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 mesto na 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 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

<!– Ha ha Komentar –>

◼ 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

<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 koji treba 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

◼ 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: meja@etf.rs”> meja@etf.rs </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>

◼ 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>

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

</style>

</head>

<body>

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>

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čite parametre 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>

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

ZADATAK HTML & 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_Vezbe2_HTML.pdf ◼ https://rti.etf.bg.ac.rs/rti/os4ip/vezbe/html/IP_Vezbe3_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