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 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>Svakarečjeunovomredu.</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.


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


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 onmultiple linesin the file but willbe automatically wrappedin the browser<pre>Text inside of the PREtags will show exactlyas 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></ul></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 nabrajanjePrimer:I. Introduction

A. Key pointB. Key pointC. Key point

II. BodyIII. Conclusion

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

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 TabelaCELLSPACING – razmak između ćelija

tabeleHEIGHT – zadaje visinu tabeleWIDHT – zadaje širinu tabelestyle="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:<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>

<td align=center>1</td>

<td align=right>$75.00</td>


</tr>

<tr>

<td colspan=4 align=right><b>Total:</b></td>


</tr>

</table>

</body>

</html>

Tabela na web stranici:

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:

Documents

Osnove HTML-a