View
59
Download
3
Category
Preview:
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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.
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 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>
<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>
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:
Recommended