Html-Osnove.Pdf

- 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:  Komentar počinje 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

Html-Osnove.Pdf

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support