Html-Osnove.Pdf
Total Page:16
File Type:pdf, Size:1020Kb
- OSNOVE - Tehnologije za izradu Web stranica − HTML − CSS − JavaScript − PHP − ASP − MySQL − Adobe FLASH − AJAX Šta je to HTML? − HTML je standardizovan jezik koji se koristi na Web-u. Koristi se za opisivanje formata Web stranice i njenih elemenata. − HTML jezik ne sadrži podatke, ved definiše način na koji se podaci prikazuju na Web stranicama. − HTML je matični jezik Web pretraživača. − Razvijen je 1990. godine od strane naučnika Cern-a, pod vođstvom Tim Berners-Lee. Primer: Google stranica Izgled Google stranice u HTML jeziku Alati za izradu Web stranica Grafički orijentisani HTML editori koji omogudavaju korisnicima kreiranje Web stranica bez potrebe poznavanja HTML –a i drugih Web-jezika: • Microsoft • Open source – FrontPage – Quanta Plus – Exspression Web – Mozilla Composer • Macromedia – … – HomeSite – DreamWeaver • Adobe – PageMill HTML – START Alati koji su vam potrebni za izradu Web sajta u HTML jeziku: − Neki od Web browser-a (Microsoft Internet Explorer, Opera, Mozilla Firefox ...) − Jednostavan Text Editor (Notepad - iz Windows-a ili Notepad ++ koga možete preuzeti sa Interneta i instalirati na vaš računar). Notepad - Start Meni/All Programs/Accessories ... Notepad ++ možete preuzeti sa Interneta i instalirati na vaš računar (http://notepad-plus-plus.org/download). HTML osnove - 1 • HTML (HyperText Markup Language). • HTML datoteka se sastoji od tagova i tekstova. • Tagovi (oznake): − definišu strukturu i izgled dokumenta − otvarajudi tag: <ime_elementa> − zatvarajudi tag: </ime_elementa> − postoje i prazni tagovi: <ime_elementa> (pravilnije: <ime_elementa />) XHTML (Extensible HyperText Mark-up Language) struktuiraniji način pisanja HTML. HTML osnove - 2 Osim imena HTML elementa, tag čini i određeni broj atributa, čije su vrednosti uokvirene navodnicima: <img src="slika.gif"> Ime Atribut Vrednost atributa Ime taga govori browser-u šta da uradi, a atribut kako da to uradi. Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima. Razlika između malih i velikih slova ne postoji: (title = Title = tiTLe) Struktura HTML dokumenta - 1 Osnovna struktura HTML dokumenta: − html (dokument-stranica) − head (glava-zaglavlje) head (glava-zaglavlje) − body (telo) body (telo) html (dokument-stranica) Struktura HTML dokumenta - 2 Ispravno formatiran HTML dokument ograničen je sa tagovima: <html> - početak html dokumenta </html> - kraj html dokumenta Unutar ove oznake se nalazi kompletan sadržaj strane, uključujudi i eventualne skriptove. Struktura HTML dokumenta - 3 Zaglavlje stranice: <head> - početak zaglavlja </head> - kraj zaglavlja Sadrži informacije koje su specifične za tu stranu. Tag gde se upisuje naslov strane koji de biti prikazan u Web pretraživaču: <title> - početak naslova </title> - kraj naslova Struktura HTML dokumenta - 4 Telo stranice: <body> - početak tela </body> - kraj tela U telu html stranice smešta se HMTL kod koji zapravo predstavlja "pravi" sadržaj strane. Struktura HTML dokumenta -5 Minimalni HTML dokument: <html> <html> <head> <head> </head> </head> <body> <body> </body> </body> </html> </html> Struktura HTML dokumenta - 6 Minimalni HTML dokument: Primer 1: <HTML> <HEAD> <TITLE> Ja volim Informatiku! </TITLE> </HEAD> <BODY> </BODY> </HTML> Primer 1: HTML dokument napišite u Notepad-u. Sačuvajte ga u nekom folderu, sa ekstenzijom .htm. Otvorite prethodno sačuvan dokument u nekom Web browser-u: Primer 1: Izgled stranice Primer 2: <html> <head> <title>Naslov</title> </head> <body> Tekst dokumenta. </body> </html> Primer 2: Izgled stranice Komentar Oblik: <!-- Ovo je komentar --> Komentar počinje sekvencom znakova <!-- (između ovih znakova ne sme da postoji ni jedan razmak), a završava se sekvencom znakova -->. Obrada teksta - 1 Pasusi teksta se navode između <p> tagova: <p> Pasus... </p> Svi <p> tagovi počinju u novom redu. Iza završnog </p> taga, prelazi se u novi red, sa dodatnim praznim prostorom između. Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag <br>. Obrada teksta - 2 U okviru početnog taga <p> može se navesti atribut align, koji određuje horizontalno poravnanje paragrafa; vrednost ovog atributa može biti jedna od slededih: left, center, right i justify. Ukoliko se navede samo početni tag <p>, podrazumeva se da je slededi element u novom redu. Primer 3: Pasusi <html> <head> <title>Pasusi</title> </head> <body> <p>Ovo je prvi pasus.</p> <p>Ovo je drugi pasus.</p> <p>Ovo je treci pasus sa praznim redom.<br></p> <p align="right">Ovo je pasus koji je desno poravnat.</p> <p align="center">Ovo je pasus koji je centriran.</p> </body> </html> Primer 3: Izgled stranice Obrada teksta -3 Naslovi se mogu istadi korišdenjem elemenata h1, h2, h3, h4, h5 i h6. Tag <h1> daje najvedu veličinu slova, a <h6> najmanju. Svaki od ovih elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre zaglavlja. U okviru zaglavlja se može navesti atribut align, koji određuje horizontalno poravnanje zaglavlja. Vrednost ovog atributa može biti jedna od slededih: left, center, right. Primer 4: Tekst <html> <head> <title>Veličina slova</title> </head> <body> <h1>Ovo je veličina slova u zaglavlju H1</h1> <h2>Ovo je veličina slova u zaglavlju H2</h2> <h3>Ovo je veličina slova u zaglavlju H3</h3> <h4>Ovo je veličina slova u zaglavlju H4</h4> <h5>Ovo je veličina slova u zaglavlju H5</h5> <h6>Ovo je veličina slova u zaglavlju H6</h6> </body> </html> Primer 4: Izgled stranice Obrada teksta - 4 Za grubo razdvajanje teksta linijom koristi se prazan tag <hr>. On dodaje jednu horizontalnu liniju ispred i iza koje postoji prazan red. Mogude je podesiti visinu korišdenjem atributa size=n (n je broj piksela), širinu pomodu atributa width=n i poravnanje pomodu atributa align (mogude vrednosti su left, right i center). Primer 5: Linije <HTML> <HEAD> <TITLE> Linije </TITLE> </HEAD> <BODY> <HR> <HR WIDTH=35%> <HR WIDTH=250 ALIGN=RIGHT> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=10 COLOR="red"> <HR WIDTH=550 SIZE=3 COLOR="blue"> </BODY> </HTML> Primer 5: Izgled stranice Obrada teksta - 5 Tag <blockquote> služi za vede blokove citata. Obično se predstavlja kao blok teksta uvučen u odnosu na ostatak. Tag <cite> se koristi za krade citate i uglavnom ispisuje tekst italikom. Koristi se za citate unutar teksta. Tag <code> služi za kratke (manje od jednog reda) listinge (unutar teksta). Tag <pre> (preformatted) obezbeđuje prikaz teksta “onako kako je unet” (svi enteri, tab-ovi i razmaci se prikazuju kako su uneti). Primer 6: Citati <html> <head> <title>Enter the title of your HTML document here</title> </head> <body> <p>Ovo je tekst koji je levo poravnat.</p> <blockquote>Ovo je veliki blok citata.</blockquote> <p>Ovo je treći pasus, unutar kojeg će biti naveden citat. <cite>Ovo ćemo posmatrati kao citat.</cite> </p> </body> </html> Primer 6: Izgled stranice Obrada teksta - 6 Ukoliko treba promeniti sam izgled teksta, koriste se slededi elementi: – <b> - za podebljan tekst, – <i> - za iskošen (italik) tekst, – <u> - za podvučen tekst, – <big> - daje vedi font za 1 od zadatog, – <small> - daje manji font za 1 od zadatog, – <blink> - daje tekst koji treperi. Obrada teksta - 7 Tag <font> omogudava da se menja boja, veličina i vrsta fonta. Sav tekst između početnog i završnog taga bide prikazan sa specificiranim karakteristikama . Atributi u okviru početnog taga <font> su: − face - naziv fonta, − color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB skali), − size - menjanje veličine, − weight - debljina slova. Primer 7: Tekst <html> <head> <title>Karakteristike teksta</title> </head> <body> <p>Sledeći tekst će prikazati upotrebu atributa za menjanje karakteristika teksta:</p> <p><b>Ovo je podebljan tekst.</b></p> <p><i>Ovo je iskošen tekst.</i></p> <p><u>Ovo je podvučen tekst.</u></p> <p>Ovo su slova uobičajene veličine, <big>a ovo su slova za jedan veća od uobičajenih.</big></p> <p>Ovo su slova uobičajene veličine, <small>a ovo su slova za jedan manja od uobičajenih.</small></p> <p><font face="Arial" color="red" size="10">Ovo je tekst crvene boje, font je Arial, slova su veličine 10.</font></p> <HR WIDTH=1000 SIZE=3 COLOR="blue"> <p><font face="Times New Roman" color="green" size="6">Ovo je tekst zelene boje, font je Times New Roman, slova su veličine 6.</font></p> </body> </html> Primer 7: Izgled stranice Liste - 1 Liste su potrebne u tekstu kad nešto nabrajamo. Grafičke liste se prave upotrebom tagova <ul> i <li>. Primer 8: Liste 1 <HTML> <head> <title>Liste1</title> </head> <body> Ovo je moja prva lista: <ul> <li>text1</li> <li>text2</li> <li>text3</li> </ul> </body> </HTML> Liste - 2 Vrsta oznake bira se atributom type, taga <ul>, (primer: cirkle, square,...). Primer 9: Liste 2 <HTML> <head> <title>Liste1</title> </head> <body> Ovo je moja prva lista: <ul type="square"> <li>text1</li> <li>text2</li> <li>text3</li> </ul> </body> </HTML> Liste - 3 Numeričke liste prave se upotrebom tagova <ol> i <li>. Vrsta numeracije se bira atributom type, taga <ol>, (primer: 1, a, A, I...). Primer 10: Liste 3 <HTML> <head> <title>Liste1</title> </head> <body> Ovo je moja prva lista: <ol type="A"> <li>text1</li> <li>text2</li> <li>text3</li> </ol> </body> </HTML> Liste - 4 Start numeracije bira se atributom start, taga <ol>, (primer: 5, 3, 11, 20...). Primer 11: Liste 4 <HTML> <head> <title>Liste1</title> </head> <body> Ovo je moja prva lista: <ol type="1" start=5> <li>text1</li> <li>text2</li> <li>text3</li> </ol> </body> </HTML> Slike - 1 Tag <img> definiše sliku koja de se javiti u HTML dokumentu. Atribut src sadrži ime slike koja treba