1. Osnove - HTML

7/21/2019 1. Osnove - HTML

http://slidepdf.com/reader/full/1-osnove-html 1/39

Izgled sajtova pre mnogo god

7/21/2019 1. Osnove - HTML



7/21/2019 1. Osnove - HTML


Pronađite karaktere na tasta

< > / : { } " #

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• HTML fajl mora imati ekstenziju ".html" ili "htm" da b

browser – pregledač (u daljem tekstu browser) mogao

prepozna i prikaže fajl, odnosno web stranu.

• Prva strana koja će biti prikazana u browser-u kada otk

www.nekiwebsajt.com je "index.html" i u najvećem b

slučajeva ta strana se tako i zove.

• Drugim rečima browser uvek traži web stranu sa tim

• Sve ostale strane možete da nazovete kako kog želite.

7/21/2019 1. Osnove - HTML


Osnove HTML-a

Preporuka je da se u nazivima koje dodeljujete vašim we

držite sledećih pravila:

1. Nazive uvek pišite malim slovima bez razmaka i spekaraktera.

napr. "o nama.html" – nepoželjno

treba da piše:

"onama.html" ili "o_nama.html" ili "o-nama.htm"oNama.html"

7/21/2019 1. Osnove - HTML


Osnove HTML-a

2. Prvo slovo naziva je uvek malo slovo i ne sme biti bro

napr. "1 proizvod plave kategorije.html" – nepravilno

treba da piše:

"proizvod_plave_kategorije_1.html" ili neka kombinacijprimera.

3. Za nazive foldera se treba držati istih pravila.

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<> </>

<ime elementa>neki sadržaj</ime elementa>

primer:

<p></p>

<p> ja sam tekst, a moj tag se zove paragraph, oznaka m

Pisanje HTML Tagova

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<p>Zovem se ... (Vaše ime i prezime)</p><h1>Zovem se ... (Vaše ime i prezime)</h1>

<h2>Zovem se ... (Vaše ime i prezime)</h2>


<h4>Zovem se ... (Vaše ime i prezime)</h4><h5>Zovem se ... (Vaše ime i prezime)</h5>


Vežba

7/21/2019 1. Osnove - HTML


Osnove HTML-a

1. HTML Element

<html></html>

2. Head Element<head></head>

Da nabrojimo tipove HTML elemenata:

7/21/2019 1. Osnove - HTML


Osnove HTML-a

Head elemeti su vidljivi samo za browser, a mogu sadrželemente:

• Title Element<title></title>

• Meta Tags<meta charset="utf-8" />

<meta name="description" content="Description of Your we

• Link Tags<link href ="style.css" rel="stylesheet" type="text/css"/

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Script & Style Tags <script type="text/javascript">

document.write("Kako ste?") document.write("Dobro, a vi?")

</script>

3. Body Element<body></body>

7/21/2019 1. Osnove - HTML


Osnove HTML-a

HTML Doctypes i Validation

Deklaracija HTML DOCTYPE nije oznaka. To je više kao uputstvo za b

tome u kojoj verziji HTML-a je stranica napisana.

U nekim browser-ima se zahteva odgovarajuća DOCTYPE deklaracija

pravilno renderovale veb stranicu i prikazale je ispravno.

Deklaracija DOCTYPE je postavljena na samom početku HTML dokum

otvaranja <html> elementa.Postoji više verzija HTMl i XHTML DOCTYPE deklaracija.

Navodim primer jedne od najčešće korišćenih:

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN" "http://www.w3.org/TR/html4/loose

HTML5 je donela dosta novina i unapredila HTML sintakskojima je i pisanje DOCTYPE-a:

<!DOCTYPE HTML> ili<!doctype html>

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<!DOCTYPE Html>

<html>

<head>

<title>Ovo je moja prva web strana</title>

</head>

<body>

<p>Zovem se .... </p> <p>Kako ste? </p>

<p>Odlično. Ja sam u školi računara Obuke i kursevi i učim

</p>

</body>

</html>

Osnovna struktura web stranice izgledala ovako:

7/21/2019 1. Osnove - HTML


Osnove HTML-a1. Block-level Html elementi

Block-level elementi formatiraju blokove teksta. Oni zauzimaju 100

širine tela bowser-a (body-a).

Najčešće se koriste za kreiranje zaglavlja pasusa, podele na web str

tabele, ali se ne ograničavaju sa ovim što je navodeno.

• Headings <h1>Zovem se...</h1>

<h2>Zovem se...</h2> <h3>Zovem se...</h3>

<h4>Zovem se...</h4>



O HTML

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Paragraphs <p>Zovem se ....</p>

<p>Kako ste?</P>

<p>Odlično. Ja sam u školi računara Obuke i kursevi i učim HTML

• Horizontal Rules <hr />

• Div Tags

<div> tag, je skraćenica za "division" (podela), nema stvarno značefunkciju u HTML, ali činjenica da se svi ostali elementi HTML mogu

DIV elementima čini ovaj element idealan alat za CSS.

<div> element može delovati kao kontejner za delove elemenata H

pomoć CSS-a izrađuju se rasporedi, navigacija, stilizovanje prezent

efekta.

O HTML

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<div>

<p>Zovem se ....</p></div>

Postoji mnogo više "Block-level" elemenata od gore navedenih, ali gore n

najčešće korišćeni.

Primer:

O HTML

7/21/2019 1. Osnove - HTML


Osnove HTML-a

2. Inline Html elementi

Inline HTML elementi formatiraju tekst bez prekida toka teksta. Oni

formatirati jedan karakter, ili beskonačan broj karaktera u isto vremeelementi mogu se koristiti unutar elemenata blok nivoa, ali inline ele

mogu da sadrže elemente blok nivoa. Oni mogu da sadrže samo teks

umetnute elemente.

Naznačajni inline Html elementi su:

<p>Kako ste?<br />Odlično. Ja sam u školi računara Obuke i kursevi i

HTML i CSS.</p>

<br /> (break)

O HTML

7/21/2019 1. Osnove - HTML


Osnove HTML-a

<p>Zovem se<span>....</span></p>

<span>....</span> (span - koristi se u kombinaciji sa CSS-om)

• Presentational Elements <font></font> - font, tip i vrsta <b></b> - bold(CSS2) <strong></strong> - bold (CSS3) <i></i> - italik (CSS2) <em></em> - italik (CSS3) i mnogi drugi ređe korišćenih

Osno e HTML a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

Linkovi su vrlo jednostavni. Oni imaju otvoren anchor tag <a> i zatvo

</a>, između kojih ste postavlja tekst koji će biti viđen na veb stranic

Hipertekst referenca, ili "href " atribut definiše adresu linka, ili gde ćeodvesti ako kliknete na njega. Kod izgleda ovako:

3. Links

<a href ="web adresa ili neka druga lokacija">neki tekst</a>

• Tipovi linkova

- HTML text links <a href ="http://www.obukeikursevi.com">Obuke i kursevi</a>

- HTML image links <a href ="blog.html "> <img src="images/slika.jpg"> </a>

Osnove HTML a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

- HTML email links <a href ="mailto:[email protected]">Obuke i kursevi</a>

- HTML links anchors - Link ka linku na istoj strani: <a href =" #email "> HTML Email Link </a>

- HTML Download Links<a href ="http://www.obukeikursevi.com/doc/HTML-Cheat-Sheet

Download HTML Cheat Sheet</a>

Osnove HTML a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

Slike su važan vizuelni aspekt većine veb stranica. HTML zahteva pos

atribute za prikaz slike na veb stranici.

Za slike tag je <img/>, ali je to prazan elemenat, pa se mora definisa

lokacija slike. Atribut "src" se dodeljuje za identifikaciju slike i putanj

Uočite da ovaj tag nema klasičan otvoreni-zatvoreni tag kao napr. <p

još elemenata sa takozvanim samozatvarajućim tagovima (Self -ClosiSlika može biti u samom root-u, ali se može nalaziti i u nekom folder

nekoliko primera kako se definiše putanja:

4. Rad sa slikom

Osnove HTML a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Slika je u istom direktorijumu (folderu) gde je i web stranica: <img src="Koala.jpg"/>

• Slika je u direktorijumu (folderu) koji se zove "images": <img src="images/Koala.jpg"/>

• Slika je u direktorijumu (folderu) koji se zove "images", ali se on nalazi je izvan foldera gde je web strana: <img src="../images/Koala.jpg"/>

Atributi koji su preporuka da se koriste kada je slika u pitanju: <img src="Koala.jpg" alt="Koala.jpg" height="145" width="145"/>

Osnove HTML a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

HTML nam daje tri tipa lista.

• UNORDERED liste su označeni bullets-ima (tačkama)

• ORDERED liste su označene brojevima, slovima ili rimskim brojevim

• DEFINITION liste sadrže opis svake stavke ili termin

UNORDERED liste se najčešće koriste za kreiranje stavki na glavnom primena ima mnogo više.

Unordered Lists imaju tri vrste bullets-a. Opcije su krug, kvadrat ili d

Podrazumevani je disk.

5. Rad sa listama

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Unordered Lists (default) <ul>

<li>Šta je HTML?</li>

<li>Kako da napravim HTML stranu?</li>

<li>Šta je lista</li>

</ul>

- Različiti oblici bullets-a

<ul> <li type="circle">Šta je HTML?</li>

<li type="square">Kako da napravim HTML stranu?</li>

<li type="disc">Šta je lista</li>

</ul>

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Ordered Lists <ol>

<li>Šta je HTML?</li>

<li>Kako da napravim HTML stranu?</li>

<li>Šta je lista</li>

</ol>

- Tipovi <ol></ol> taga mogu biti:

<ol type="a"></ol><ol type="A"></ol>

<ol type="i"></ol>

<ol type="I"></ol>

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML-a

• Definition Lists (HTML4) - Description list (HTML5) <dl>

<dt>HTML</dt>

<dd>Hypertext Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading Style Sheets</dd>

<dt>PHP</dt>

<dd>PHP: Hypertext Preprocessor</dd>

</dl>

<dt> tag definiše termin (ime - naziv)

<dd> tag opisuje ime- naziv

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

Tabele se koriste kao metod uređenja informacija na veb stranici. Ta

koristiti za kreiranje rasporeda čitave stranice, ali se to više ne prepoDanas se "Layout" (raspored) stranice uređuje preko CSS-a, jer je šir

može da obavi posao sa manje koda.

Tabele su slične onima u Excel-u. Tekst, slike, i svi ostali HTML eleme

postavljeni unutar svake ćelije.

Tag za tablu je <table></ table>.

Redovi se označavaju sa <tr></tr> tagom.

Unutar svakog reda, su <td></td> tagovi, koji ustvari čine kolone.

6. Rad sa tabelama

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

I red, I kolona I red, II kolona

II red, I kolona II red, II kolona

III red, I kolona III red, II kolona

• Primer jednostavne tabele - izgled

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

<table>

<tr>

<td>I red, I kolona</td><td>I red, II kolona</td>

</tr>

<tr>

<td>II red, I kolona</td>

<td>II red, II kolona</td>

</tr><tr>

<td>III red, I kolona</td>

<td>III red, II kolona</td>

</tr>

</table>

<table></table> - Tabela<tr></tr> - Redovi u tabe<td></td> - Kolone u tab

• Primer jednostavne tabele - kod

<thead></thead> - Zaglavlje

<tbody></tbody> - Grupa pounutrašnjem, delu tabele

<tfoot></tfoot> - Grupa polj

Tabela može imati: zaglavlja (header) i podnožja

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

7. Rad sa formom

Forme se koriste za upite nad bazom podataka, identifikacija korisni

trgovina itd.Web strana treba da sadrži skriptu, obično PHP skriptu, ali postoji i n

jezika koji imaju istu svrhu, a to je da prikupe informacije koje je kori

polja i dostave te podatke serveru koji će to upisati u bazu podataka

nekome na e-mail itd.

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

<input/> element (Self -Closing Tags)

<form> Ime:<input type="text" name="ime" placeholder="Ime"/>

Prezime:<input type="text" name="prezime" placeholder="Prezime"/>

<button type="submit">Pošalji</button> </form>

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

Forma može sadržati sledeće elemente:

• Buttons

• Check Boxes & Radio Buttons • Textareas

• Dropdown Menus

• Upload Fields

Svi ovi elementi se programiraju u napr. PHP-u, gde se definiše načprikupljanja podataka sa web strane, obrada i slanje istih na neku o

destinaciju.

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Osnove HTML a

<select name="select">

<optgroup label="web kurs I"><option value="html">html</option>

<option value="css">css</option>

</optgroup>

<optgroup label="web dizajn II">

<option value="joomla"> joomla</option>

<option value="wordpress">wordpress</option>

</optgroup>

</select>

<select> - polje unutar jedne od ponudjenih s<optgroup> - grupa op

listi<option> - opcija kod p

• Primer Dropdown Menus

Osnove HTML-a

7/21/2019 1. Osnove - HTML


8. Rad sa bojama

Boje u HTML-u se mogu primeniti na tri načina:

•

Hexadecimal colors • RGB colors • Color names - Svi moderni browser-i prikazuju 140 boja po imenu.

Color Color HEX Color RGB Color Name

#FF0000 rgb(255,0,0) Red

#00FF00 rgb(0,255,0) Green

#0000FF rgb(0,0,255) Blue

Osnove HTML-a

7/21/2019 1. Osnove - HTML


9. HTML Layout - Raspored elemenata

Skica - mockup buduć

Osnove HTML-a

7/21/2019 1. Osnove - HTML


Prenošenje skice-dizajna sa papira u HTML je sledeći korak.

Postoje dva glavne metode da uradite ovaj korak:

• pomoću tabela i

• pomoću CSS.

HTML tabele su se koristile godinama kao metoda za layout (raspore

ali CSS-baziran layout postao je standard.

Podrška browsera za CSS je poboljšana, pa se tabelarni prikazi korist

slučajevima.

CSS layout se je lakši za održavanje i brže se učitava. Obe opcije su postrane savremenih browser-a.

Osnove HTML-a

7/21/2019 1. Osnove - HTML


A kada se govori o web dizajnu, misli se na CSS.

CSS je vrlo moćan alat, jer utiče na opšti utisak Vašeg celokupnog saj

1. Osnove - HTML

Documents

Transcript of 1. Osnove - HTML