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 1990. godine od strane naučnika Cern - a, pod vođstvom Tim Berners – Lee.
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
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>
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
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
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.
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
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.
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>
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.
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>
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
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
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
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>
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>
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>
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
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
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
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
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>
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:
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: