1 / 24

Osnove HTML-a

Osnove HTML-a. Hypertext Markup Language – jezik za opis hiperteksta 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, ve ć definiše način na k oji se podaci prikazuju na Web stranicama.

christmas
Télécharger la présentation

Osnove HTML-a

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Osnove HTML-a • Hypertext Markup Language – jezik za opis hiperteksta • HTMLjestandardizovanjezikkojisekoristinaWeb-u.KoristisezaopisivanjeformataWebstraniceinjenihelemenata. • HTMLjeziknesadržipodatke,već definišenačinna kojisepodaciprikazujunaWebstranicama. • HTMLjematičnijezikWebpretraživača. • Razvijenje1990.godineodstranenaučnikaCern-a,podvođstvomTimBerners–Lee.

  2. HTML • HTML kod počinje sa <HTML> i završava sa </HTML> • Svaka stranica se sastoji od dva dela: zagljavlja i tela stranice • Zaglavlje može da sadrži: • Naslov stranice • Definicije stilova za formatiranje teksta • Skriptove koji treba da se izvršavaju na klijentskoj strani • Podatke namenjene pretraživačima, kao što su ključne reči i opis sadržaja stranice

  3. HTML • Zaglavlje počinje sa <HEAD> • Oznaka <TITLE> definiše naslov stranice • Oznaka <STYLE> služi za opisivanje definicije stilova (Cascading Style Sheets) • Oznakama <SCRIPT> započinje i završava se blok koda koji treba da se izvršava na klijentskom računaru • Oznaka <META> definiše opisne podatke namenjene pretraživačima Web-a • Zaglavlje se završava sa oznakom </HEAD>

  4. HTML • Telo stanice počinje sa <BODY> i predstavlja sadržaj koji će se pojaviti na stranici • Oznaka <BODY> ima sledeće parametre: • BACKGROUND – Zadaje pozadinsku sliku • BGCOLOR – Zadaje boju pozadine stranice • TEXT – Zadaje standardnu boju teksta na stanici • LINK – Zadaje standardnu boju kojom se pokazuju veze na stranici • ALINK – Zadaje boju veze pre selektovanja

  5. HTML • VLINK – Zadaje boju veze (linka) koje su već bile posećene • LEFTMARGIN – širina leve margine predstavljena u pikselima. Obično se zadaje vrednost 0 (a na drugi način se vrši poravnavanje) • TOPMARGIN – visina gornje margine. Takođe se obično zadaje 0

  6. Prelamanje i razmaci u tekstu stranice <html><head><title>Probna stranica</title></head> <body> Svaka reč je u novom redu. </body> </html> Iako je u datoteci svaka reč napisana u novom redu, HTML će ignorisati oznake za novi red, kao i više od jednog razmaka između reči.

  7. Prelamanje i razmaci u tekstu stranice • Oznaka <P> • Služi za razdvajanje pasusa u tekstu. Tekst pasusa postavi se između oznaka <P> i </P> • Postoji parametar ALIGN koji služi za poravnavanje (left, right, center, justify) • Ova oznaka dodaje prazan red između pasusa

  8. Prelamanje i razmaci u tekstu stranice • Oznaka <BR> • Ovom oznakom prelamamo tekst, prelazimo u novi red, pri čemu se ne dodaje prazan red Milan Petrović<br> Bulevar NN 123<br> 11000 Beograd<br> • Nevidljiv razmak &nbsp; - ubacuje jednu prazninu između reči. Ovaj kod moramo ponoviti onoliko puta koliko praznih karaktera (space) želimo da dodamo.

  9. Naslovi na stranici • Oznaka <Hx>, gde x može da bude 1-6. • Primer: <html><head><title>Različite veličine naslova</title><head> <body> <h1>Naslov veličine 1</h1> <h2>Naslov veličine 2</h2> <h3>Naslov veličine 3</h3> <h4>Naslov veličine 4</h4> <h5>Naslov veličine 5</h5> <h6>Naslov veličine 6</h6> </body> </html>

  10. Oznake za formatiranje teksta • Oznaka <BLOCKQUOTE> - za obeležavanje teksta kao citata. Tekst biva uvučen i sa leve i sa desne strane • Oznaka <PRE> - tekst se prikazuje identično kao u datoteci. Komanda dodaje i prazan red.

  11. Oznake za formatiranje teksta <html><head><title>Proba</title><head> <body> This text is on multiple lines in the file but will be automatically wrapped in the browser <pre> Text inside of the PRE tags will show exactly as it is in the file. </pre> </body> </html>

  12. Oznake za formatiranje teksta • Oznaka <FONT> - služi za formatiranje teksta. Ima sledeće parametre: • COLOR – zadaje boju teksta • FACE – zadaje ime fonta • SIZE – zadaje relativnu veličinu fonta

  13. Oznake za formatiranje teksta • Oznaka <B> - Bold • Oznaka <I> - Italic • Oznaka <S> - precrtana slova • Oznaka <U> - podvučena slova • Oznaka <em> - naglašena slova • Oznaka <small> - manja slova • Oznaka <strong> - jača slova • Oznaka <mark> - označena slova • Oznaka <sub> - spuštena slova • Oznaka <sup> - podignuta slova

  14. Veze i slike • Oznaka <A> -obeležava vezu koja vodi ka drugom dokumentu. • <a href=http://www.s-markovic.edu.rs>Gimnazija</a> • Oznaka <IMG> - koristi se za prikazivanje grafike na stranicama • <img src=“slike/slika1.gif”> • atributi: WIDTH, HEIGHT

  15. Liste sa stavkama • Oznaka <UL> - neuređena lista • Parametri: TYPE – (Square, Disc, Circle) • Oznaka <LI> - sledeća stavka <html><head><title>Neuredjena lista</title><head> <body> <ul> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> <li>Stavka 5</li> </ul> </body> </html>

  16. Liste sa stavkama <html><head><title> Neuredjena lista </title><head> <body> <ul type=“circle”> <li>Stavka 1</li> <li>Stavka 2</li> <ul> <li>Stavka 2a</li> <li>Stavka 2b</li> </ul> <li>Stavka 3</li> <li>Stavka 4</li> <li>Stavka 5</li> </ul> </body> </html>

  17. Numerisane liste • Oznaka <OL> - numerisane liste – slično kao <UL> <html><head><title>Numerisana lista</title><head> <body> <ol> <li>Stavka 1</li> <li>Stavka 2</li> <li>Stavka 3</li> <li>Stavka 4</li> <li>Stavka 5</li> </ol> </body> </html>

  18. Numerisane liste • Parametri <OL> : • TYPE – A, a, I, i, 1 • START – broj od kojeg kreće nabrajanje Primer: I. Introduction A. Key point B. Key point C. Key point II. Body III. Conclusion

  19. Primer: <html><head><title>Uredjena lista </title><head> <body> <ol type="I" start="2"> <li>Introduction <ol type="A"> <li>Key Point</li> <li>Key Point</li> <li>Key Point</li> </ol> </li> <li>Body</li> <li>Conclusion</li> </ol> </body> </html> • Tekst na web stranici: • II. Introduction • A. Key Point • B. Key Point • C. Key Point • III. Body • IV. Conclusion

  20. Formatiranje Tabela • Oznaka <TABLE> - pravljenje tabela • Parametri: • ALIGN – poravnavanje (left, right) • BACKGROUND – slika pozadine • BGCOLOR – boja pozadine • BORDER – debljina ivice oko ćelija tabele, ako je vrednost 0 – neće biti linija • CELLPADDING – razmak između ivice i sadržaja svake ćelije

  21. Formatiranje Tabela • CELLSPACING – razmak između ćelija tabele • HEIGHT – zadaje visinu tabele • WIDHT – zadaje širinu tabele • style="font-size:50“ – zadaje veličinu fonta • Oznaka <TR> - obeležava početak reda tabele. • Parametri: ALIGN, BACKGROUND, BGCOLOR

  22. Formatiranje Tabela • Oznaka <TH> - obeležava zaglavlje tabele (prvi red) • Parametri: ALIGN, BACKGROUND, BGCOLOR, COLSPAN (broj kolona koje se spajaju), ROWSPAN (broj redova koji se spajaju), VALIGN (vertikalno poravnavanje), WIDTH ( širina ćelije) • Oznaka <TD> - Obeležava početak sadržaja ćelije. • Parametri: isti kao kod <TH>

  23. <td align=center>1</td> <td align=right>$75.00</td> <td align=right>$75.00</td> </tr> <tr> <td colspan=4 align=right><b>Total:</b></td> <td align=right>$525.00</td> </tr> </table> </body> </html> • Primer 1: <html><head><title>Proba Tabela</title> </head> <body> <h2>Product List</h2> <table cellpadding=3 border=1> <tr> <th colspan=2>Item</th> <th>Quantity</th> <th>Price</th> <th>Extended</th> </tr> <tr> <td>127250</td> <td>PC Hard Drive</td> <td align=center>3</td> <td align=right>$150.00</td> <td align=right>$450.00</td> </tr> <tr> <td>199240</td> <td>Modem</td> Tabela na web stranici:

  24. Primer 2: • <html><head><title>Tabela</title> • </head> • <body> • <table cellpadding=2 border=1 width=30% height=20% style="font-size:20"> • <tr align=center> • <td colspan=2>Planete</td> • <td rowspan=3><b>Suncev sistem</b></td> • </tr> • <tr align=center> • <td>Najmanja</td> • <td>Najveca</td> • </tr> • <tr align=center> • <td>Merkur</td> • <td>Jupiter</td> • </tr> • </table> • </body> • </html> Tabela na web stranici:

More Related