Download presentation
Presentation is loading. Please wait.
1
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 koji se podaci prikazuju na Web stranicama. HTML je matični jezik Web pretraživača. Razvijen je godine od strane naučnika Cern - a, pod vođstvom Tim Berners – 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 - 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= 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> </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> </ol> </li> <li>Body</li> <li>Conclusion</li> </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 Oznaka <TR> - obeležava početak reda tabele.
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
Primer 1: Tabela na web stranici: <td align=center>1</td>
<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> <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> <td>199240</td> <td>Modem</td> <td align=center>1</td> <td align=right>$75.00</td> </tr> <tr> <td colspan=4 align=right><b>Total:</b></td> <td align=right>$525.00</td> </table> </body> </html> Tabela na web stranici:
24
Primer 2: <html><head><title>Tabela</title>
<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> <td>Najmanja</td> <td>Najveca</td> <td>Merkur</td> <td>Jupiter</td> </table> </body> </html> Tabela na web stranici:
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
