PREZENTACIJE NA INTERNETU WWW World Wide Web ili
PREZENTACIJE NA INTERNETU
WWW • World Wide Web, ili skraćeno Web je danas jedan od najpopularnijih mehanizama za desiminaciju informacija među ljudima. • Pomoću web-a možemo prezentovati informacije koje se sastoje od reči, slika, video i audio zapisa - i sve to bez dodatnog softvera koji korisnik mora da instalira na svom računaru - dovoljno je da ima bilo koji web pretraživač (Internet Explorer, Firefox, Chrome, Opera i sl. ) • Pored toga što putem Web-a ljudi mogu da primaju informacije, oni mogu i da kreiraju sopstvene web stranice i da na taj način oni postaju izvor informacija za druge. • Za kreiranje web stranica mogu se koristiti razni HTML editori kao što su Microsoft Visual Web Developer i Front. Page, Adobe Cold Fusion i Dreamweaver i sl.
URL • Kada neko želi da vam da uputstvo kako da pristupite nekoj informaciji na internetu on vam tada saopštava elektronsku adresu na kojoj se ta informacija nalazi. Ta elektronska adresa je zapravo URL. Svaki dokument na internetu ima jedinstvenu adresu (URL) što nam omogućava da pomoću nje lako dodjemo do web stranice koja nas interesuje u moru drugih web stranica. • Kada znamo URL adresu, onda u našem pretraživaču unesemo tu adresu i posle kratkog vremena sadržaj web stranice će se pojaviti na našem ekranu.
HTML • HTML je skraćenica od Hyper Text Markup Language, što se na srpski može prevesti kao Jezik za označavanje hiper tekstova. • Hiper tekstovi su tekstovi koji pored reči sadrže i sliku, video i audio zapise. • HTML je podskup jednog šireg jezika, SGML-a (Standard General Markup Language) i koristi se za definisanje izgleda World Wide Web dokumenata (stranica) kao i za uspostavljanje veza (linkova) među dokumentima (podrazumeva se da dokument sadrži tekst, sliku, zvuk, grafiku).
HTML je osnovni jezik za kreiranje strukture i sadržaja, kao i formatiranje sadržaja stranica na Internetu Pomoću njega možete menjati boju i veličinu teksta, boju pozadine, umetnuti sliku i zvuk na Internet stranicu, ali ne možete izračunati koliko je 2+2 HTML dokumenat je običan tekstualni dokumenat sa ekstenzijom. htm ili. html, tako da se može kreirati i u bilo kom od tekst editora, kao što su Notepad, Word. Pad, MS Word
Struktura HTML dokumenta Svaki HTML dokument sastoji se iz: • elemenata • atributa elemenata • deklaracija Elementima formiramo strukturu i opisujemo izgled delova sadržaja HTML dokumenta. Svaki element se sastoji iz tri dela: • početni tag • sadržaj • završni tag Tag je specijalna sekvenca znakova – takozvani marker koji je ograđen znacima < i > <> - početni tag </ > - završni tag
Struktura HTML dokumenta Svaki HTML dokument poseduje bar jedan elemenat najvišeg nivoa – HTML tag Otvorite Notepad (ili bilo koji drugi editor teksta i otkucajte): < html > </html > Snimite dokument u svoj folder pod imenom prva. html ili prva. htm Pri snimanju u polju Save As Type odaberite All files a u polju Encoding izaberite Unicode
Struktura HTML dokumenta Dvoklikom na ikonicu dokumenta prva. html otvara se internet browser (IE, Mozilla Firefox , Chrome, . . ) i prikazuje potpuno praznu web stranicu Da bi ova stranica bila prava HTML stranica fali joj sadržaj
Struktura HTML dokument po pravilu ima dve osnovne sekcije: HEAD i BODY (glava i telo). <html> <head>. . . </head> Njime se opisuje zaglavlje HTML dokumenta <body>. . . </body> Njime se opisuje telo HTML dokumenta </html>
Struktura HTML dokumenta U zaglavlju se definišu razni podaci koji učestvuju u komunikaciji između Internet čitača (browser-a ) i Internet servera To su obično informacije o samom dokumentu (naslov, opis, ključne reči, ime autora, itd) Browser ne prikazjue informacije koje se nalaze između tagova <head> i </head> osim sadržaja taga <title> Sadržaj taga <title> je naslov HTML dokumenta koji će se pojaviti u naslovnoj liniji web browser-a
Struktura HTML dokumenta <html> <head> <title> Naslov </title> </head> <body>. . . </body> </html>
Struktura HTML dokumenta Sve ono što vidimo u prozoru browser-a, tj. sadržaj stranice i HTML elementi za formatiranje (opis) tog sadržaja, nalazi se u telu dokumenta koji uokviruje <body> tag U HTML dokumentu sme da postoji samo jedan par tagova <body> </body> Ovaj element određuje glavni sadržaj dokumenta Početni tag <body> ima atribute koji omogudavaju da se odrede karakteristike koje važe na nivou dokumenta: • boja pozadine ili slika • boja teksta • boja posedenih ili neposedenih linkova, itd.
Osnovni HTML tagovi <html> <head> <title> Naslov </title> </head> <body> Ovo je neki tekst! </body> </html> Vežba 1. htm
Atributi body taga BGCOLOR – promena boje pozadine <html> <head> <title> Naslov </title> </head> <body bgcolor=red> Ovo je neki tekst! </body> </html> Vežba 2. htm
Atributi body taga Ovo može i preko heksadecimalne oznake boje <html> <head> <title> Naslov </title> </head> <body bgcolor=„#FF 00 FF“> Ovo je neki tekst! </body> </html> Vežba 3. htm
Atributi body taga Umesto boje na pozadinu možete postaviti i sliku ! BACKGROUND=„sky. jpg“ <html> <head> <title> Naslov </title> </head> <body background=„sky. jpeg"> Ovo je neki tekst! </body> </html> Vežba 4. htm
Font tag i njegovi atributi <FONT FACE. . . SIZE. . . COLOR> Određuje kojim oblikom slova, veličinom(1 -7) i bojom će biti ispisan tekst oivičen tagovima: <body background=„sky. jpeg> <font face="verdana" size="5" color="red"> Ovo je font verdana crvene boje veličine 5 </font> </body> Vežba 5. htm
Osnovni HTML tagovi <BR>, <HR> Tag <BR> služi za prelazak u novi red, a <HR> podvlači liniju ispod teksta (Horizontal Rule) <html> <head> <title> Naslov </title> </head> <body background=„sky. jpeg> Posle ove rečenice prećićemo u novi red a zatim podvući liniju <hr> </body> </html> Vežba 6. htm
Osnovni HTML tagovi <B>, <I>, <U> Služe osnovnim formatiranjima teksta: Bold (masni tekst), Italic (kurziv), Underlined (podvučeni tekst) <BODY> <font face="verdana" size="1" color="black"><B>Ovo je podebljani tekst </B></font> <font face="verdana" size="1" color="black"> <I> Ovo je tekst u kurzivu </I> </font> <font face="verdana" size="1" color="black"> <U> Ovo je podvuceni tekst <U> </font> </BODY> Vežba 7. htm
Osnovni HTML tagovi <H 1>…<H 6> Stilovi naslova – od Heading 1 do Heading 6. <html> <head> <title> naslov </title> </head> <body> <h 1>naslov nivoa 1</h 1> <h 2>naslov nivoa 2</h 2> <h 3>naslov nivoa 3</h 3> <h 4>naslov nivoa 4</h 4> <h 5>naslov nivoa 5</h 5> <h 6>naslov nivoa 6</h 6> </body> </html> Vežba 8. htm
Osnovni HTML tagovi <P align = ". . . "> Prelazak u novi paragraf. Moguće je ravnati paragrafe levo (left), centrirati (center) ili ih ravnati desno (right) <html> <head> <title> Naslov </title> </head> <body> <p align="right">ovaj tekst je ispisan desno…</p> <p align="center">…ovaj je na sredini…</p> <p align="left">…a ovaj levo, zar ne? </p> </body> </html> Vežba 9. htm
Osnovni HTML tagovi <A HREF> Link ka drugoj HTML stranici ili drugom resursu. Za link ka nekoj drugoj stranici, van servera, treba navesti ceo URL, sa HTTP prefiksom <html> <head> <title>Naslov </title> </head> <body> <font size="3"> <a href=„Vežba 2. htm"> ovo je link ka drugoj stranici!</a> </font> </body> </html> Vežba 10. htm
I opet BODY tag <BODY BGCOLOR="#ffffcc" LINK="#ffffcc„ VLINK="#ffffcc"> Izmena boje pozadine stranice, linkova, posećenih linkova. Heksadecimalni kod boje ili konstanta (red, blue, white. . . ) <html> <head> <title>Naslov </title> </head> <body bgcolor="#000000" link="#ffffff" vlink="yellow"> <font size="3"> <a href=„Vežba 2. htm"> ovo je link ka drugoj stranici!</a> </font> </body> </html> Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar Vežba 11. htm
Osnovni HTML tagovi <A HREF="mailto: …"> Uz rezervisanu reč MAILTO dobijamo linkove ka mail adresama. <html> <head> <title>Naslov </title> </head> <body> <font size="+3"> <a href="mailto: ipetuhov@gmail. com"> posaljite mi mail!</a><font> </body> </html> Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar Vežba 12. htm
Osnovni HTML tagovi <IMG SRC=". . . " ALIGN="" ALT="Tekst umesto slike" VSPACE="xx" HSPACE="xx" BORDER="xx" WIDTH="xx" HEIGHT="xx"> Umetanje slike u dokument. Potrebno je navesti putanju do slike. I slika može biti hiperlink – samo je treba zatvoriti unutar <A> taga. <body> <font size=„ 3"> Lepa sela lepo gore </font> <img src="lepa. jpg" align="center" alt="nas najbolji film" border=„ 3" width=„ 200" height=„ 300"> </body> Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar Vežba 13. htm
Osnovni HTML tagovi <UL>, <OL> Ovaj tag služi za nabrajanje, tj. za stvaranje liste stavki, koja može biti bulleted (ul) ili numbered (ol) <body> <ul> <li>kafa <li>caj <li>mleko </ul> <ol> <li>kafa <li>caj <li>mleko </ol> </body> Nenumerisana lista Numerisana lista Vežba 14. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
Osnovni HTML tagovi <TABLE> Kreiranje tabela. Jedan od najbitnijih tagova, jer ne služi samo za prikazivanje tabelarnih podataka, već i za pozicioniranje sadržaja na stranici. Koristi se kombinacija tri taga: TABLE, TR, TD <TABLE> Osnovni tag. On govori browseru "ovo je tabela", uz nekoliko atributa kao što su veličina, debljina ivica itd. . <TR> Ovaj tag (table row) označava horizontalne redove, koji se sastoje od jedne ili više ćelija. <TD> Ovaj tag (table data) označava pojedinačni blok ili ćeliju unutar jednog reda. Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Svaka tabela mora da ima bar jedan red. Evo tabele samo sa jednom ćelijom. Debljina ivice tabele <body> <table border=1> <tr> <td>pera</td> </tr> </table> </body> Red tabele Ćelija Vežba 15. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Širina tabele se određuje pomoću: <TABLE BORDER= WIDTH=100%> <body> <table border=1 width=100%> <tr> <td>pera</td> </tr> </table> </body> Vežba 16. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Možemo podešavati i visinu tabele: <TABLE BORDER=1 WIDTH=100 HEIGHT=75> <body> <table border=1 width=100 height=75> <tr> <td>pera</td> </tr> </table> </body> 75 100 Vežba 17. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Takođe moguće je kontrolisati gde će se nalaziti sadržaj ćelije <TD ALIGN=LEFT, CENTER, RIGHT>. . . </TD> <body> <table border=1 width=100 height=75> <tr> <td align=center> pera</td> </tr> </table> </body> Vežba 18. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Moguće je, takođe, kontrolisati i vertikalni položaj sadržaja ćelije. <TD ALIGN=. . . VALIGN=TOP, MIDDLE, BOTTOM>. . . </TD> <body> <table border=1 width=100 height=75> <tr> <td align=center valign=bottom> pera</td> </tr> </table> </body> Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar Vežba 19. htm
TABLE tag Slike se takođe mogu koristiti unutar tabela. <TD> <IMG SRC=“ “WIDTH=. . HEIGHT=. . > </TD> <body> <table border=1 width=100 height=75> <tr> <td align=left valign=middle> <img src=“pera. gif“ width=32 height=32> </td> </tr> </table> </body> Vežba 20. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag A sada više ćelija u jednom redu <BODY> <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Pera</TD> <TD WIDTH=20%>Laza</TD> <TD WIDTH=20%>Mika</TD> </TR> </TABLE> </BODY> Vežba 21. htm Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Tri ortaka od preko puta ulice vide šta se dešava, pa i oni žele da uskoče u tabelu. Daćemo im čitav red. <TABLE BORDER=3 WIDTH=300 HEIGHT=75> <TR> <TD WIDTH=60%>Pera</TD> <TD WIDTH=20%>Laza</TD> <TD WIDTH=20%>Mika</TD> </TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 22. htm Kao što ste možda i sami zaključili, atribut WIDTH iz prvog reda važi i u drugom redu. Ekonomsko-trgovinska škola „Dositej Obradovid“ Alibunar
TABLE tag Korisna funkcija je zadavanje boja pozadine za pojedinačne ćelije, redove, ili čitave tabele. Za to se koristi atribut BGCOLOR <TABLEBORDER=3 BGCOLOR=blue> <TR> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> Za celu tabelu <TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 23. htm
TABLE tag Bojenje pojedinačnih redova <TABLE BORDER=3> <TR BGCOLOR=yelow> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TR BGCOLOR=red> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 24. htm
TABLE tag Bojenje pojedinačnih ćelija <TABLE BORDER=3> <TR BGCOLOR=yellow> <TD>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TD BGCOLOR=red>Gaga</TD> <TD BGCOLOR=blue>Sima</TD> <TD> Đole </TD> </TR> </TABLE> Vežba 25. htm
TABLE tag • Atribut za boju u <TD> tagu jači je od onog u <TR> tagu, a ovaj od • onog u <TABLE> tagu • <TABLEBORDER=3 BGCOLOR=green> • <TR BGCOLOR=yellow> • <TD BGCOLOR=red>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Najjači tag Najslabiji tag Vežba 26. htm
TABLE tag Za spajanje kolona koristi se atribut COLSPAN Prvo spajamo dve ćelije <TABLE BORDER=3> <TR> <TD COLSPAN=2>Pera</TD> <TD>Mika</TD> </TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 27. htm
TABLE tag Sada spajamo sve tri kolone <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER>Pera </TD> </TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 28. htm
TABLE tag Uzgred, sva ostala HTML formatiranja mogu se primeniti unutar ćelije. Neka nas podebljani Pera odvede facebook <TABLE BORDER=3> <TR> <TD COLSPAN=3 ALIGN=CENTER> <A HREF="http: //facebook. com"> <B> Pera </B> </A> </TD> </TR> <TD>Gaga</TD> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 29. htm
TABLE tag Za spajanje redova koristi se atribut ROWSPAN Prvo spajamo dve ćelije <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Pera</TD> <TD>Laza</TD> <TD>Mika</TD> </TR> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 30. htm
TABLE tag Naravno, i ovi atributi (COLSPAN i ROWSPAN) se mogu koristiti istovremeno. <TABLE BORDER=3> <TR> <TD ROWSPAN=2>Pera</TD> <TD COLSPAN=2>Laza</TD> </TR> <TD>Sima</TD> <TD>Đole</TD> </TR> </TABLE> Vežba 31. htm
- Slides: 44