1.Osnove HTML-a HyperText Markup Language – tekst procesor koji nije What You See Is What You Get 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.
1.Osnove HTML HTML komande se pišu u vidu tag-ova (etiketa) HTML tagovi su “case insensitive” i pišu se unutar < >. Vrste tagova: Prosti <X > (bez završnog taga) Složeni <X> neki tekst </X> Sa atributima <X A1=a A2=b...> neki tekst </X>
1.Osnove 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
1.Osnove 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> Primer1 Primer1
1.Osnove HTML HTML ignoriše oznake za novi red, kao i više od jednog razmaka između reči. Primer: <html><head><title>Probna stranica</title></head> <body> Svaka reč je u novom redu. </body> </html>
2.Struktura teksta Naslovi <Hn>, n=1 do 6 Odeljak <DIV> Pasus <P> Novi red <BR> Podvlaka <HR> Unapred formatiran tekst <PRE> Duži navodi <BLOCKQUOTE>
2.Struktura teksta Naslovi <Hn>, gde n 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> Primer2
2.Struktura teksta Paragraf (pasus) <P> Služi za razdvajanje pasusa u tekstu. Tekst pasusa postavi se između oznaka <P> i </P> Radi isto što i <BR> samo sa većim proredom Atribut ALIGN služi za poravnavanje (LEFT, RIGHT, CENTER, JUSTIFY) Iste atribute ima i tag <DIV> za definisanje odeljaka Primer3
2.Struktura teksta Novi red <BR> Ovom oznakom prelamamo tekst, prelazimo u novi red, pri čemu se ne dodaje prazan red Ako želite da je vaš tekst u jednom redu to se postiže tagom <NOBR> </NOBR>. Tada se pojavljuje horizontalni “scrollbar”. Nevidljiv razmak - ubacuje jednu prazninu između reči. Ovaj kod moramo ponoviti onoliko puta koliko praznih karaktera (space) želimo da dodamo. Primer 4
2.Struktura teksta Podvlaka ili razdvojna linija <HR> Ima atribute : NOSHADE - za nezasenčenu liniju ALIGN – za poravnavanje (=“center”) SIZE - za debljinu linije (=“5”) WIDTH - određuje koliko linija zauzima od širine stranice (u %) (=“50%”) COLOR (=#ff0000”)
3.Formatiranje teksta Telo stranice počinje sa <BODY> i završava se sa </BODY>. Tag <BODY> ima sledeće atribute: BACKGROUND – Zadaje pozadinsku sliku BGCOLOR – Zadaje boju pozadine stranice TEXT – Zadaje standardnu boju teksta LINK – Zadaje boju veze na stranici ALINK – Zadaje boju veze pre selektovanja VLINK – Zadaje boju veze koja je već bila posećena Primeri 5, 6 i 7
3.Formatiranje teksta <FONT> - služi za formatiranje teksta. Ima sledeće atribute: COLOR – zadaje boju teksta FACE – zadaje ime fonta SIZE – zadaje relativnu veličinu fonta (od 1 do 7)
3.Formatiranje teksta Tag <B> - Bold Tag <I> - Italic Tag <S> - precrtana slova Tag <U> - podvučena slova Tag <STRONG> - jača slova Tag <BIG> - veća slova Tag <SMALL> - manja slova Tag <SUB> - spuštena slova -index Tag <SUP> - podignuta slova – stepen Tag <TT> - teleprinterska slova Primer 8
4.Liste Nenumerisane <UL> tag Numerisane <OL> tag Neuređene <DL>tag Stavke se definišu pomoću <LI> taga Dozvoljene su i liste unutar liste
4.Liste Nenumerisane liste imaju atribut TYPE i on može dobiti vrednost: CIRCLE DISC SQUARE Primer 9
4.Liste Numerisane liste imaju atribut TYPE i on može dobiti vrednost: A - velika slova a – mala slova I – rimski brojevi i – mali rimski brojevi Ako se ništa ne navede onda se koriste arapski brojevi Atribut START navodi od kog broja kreće nabrajanje Primer 10
4.Liste Neuređene (opisne) liste <DL> <DT> odrednica1 <DD> njen opis <DT> odrednica2 <DD> njen opis ... </DL> Primer 11 i 12
5.Linkovi Tag <A> - opisuje vezu koja vodi ka drugom čvoru. Atributi su HREF i NAME <A HREF=http://www.s-markovic.edu.rs> Link ka gimnaziji – polazni čvor1 </A> <A NAME=“pozicija u dolaznom čvoru 2”> je mesto gde želimo da stignemo. Ako se ne navede, pozicioniraćemo se na početak čvora 2.
5.Linkovi Pristupa se drugom delu iste stranice (sadržaj, povratak na vrh, ...) Link na drugu stranicu iste prezentacije Link na stranice drugih prezentacija U prva dva slučaja dovoljno je relativno adresiranje, dok je u trećem potrebno navesti punu putanju URL – Uniform Resourse Locator Primer 13, 14 i 15
6.Slike Tag <IMG> mora imati bar jedan atribut i to: SRC koji definiše naziv i lokaciju slike Ostali atributi su: ALIGN Za vertikalno poravnavanje TOP, MIDLE, BOTTOM Za horizontalno LEFT,CENTER,RIGHT WIDTH i HEIGHT za dimenzionisanje HSPACE i VSPACE za položaj slike BORDER za širinu okvira slike ALT naziv slike kao alternativa prikaza
6.Slike Slika može biti i veza za link <A HREF=“Primer.html”> <IMG SRC=“Slika.gif”> </A> Primer 16 , 17 i 18
7.Tabele Parametri: Tag <TABLE> - pravljenje tabela Za nadnaslov se koristi <CAPTION> 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
7.Tabele Svaki red u tabeli se opisuje tagom <TR> CELLSPACING – razmak između ćelija tabele HEIGHT – zadaje visinu tabele (u pikselima ili % veličine prozora Web browsera) WIDHT – zadaje širinu tabele Svaki red u tabeli se opisuje tagom <TR> Parametri: ALIGN (left, center, right) i VALIGN (top, middle, bottom) , BACKGROUND i BGCOLOR Pr1, Pr1a i Pr1b
7.Tabele Tag <TH> - obeležava zaglavlje tabele (prvi red). Isti je kao i <TD> samo što obezbeđuje da je boldovan i centriran Parametri: ALIGN, BACKGROUND, BGCOLOR, COLSPAN (broj kolona koje se spajaju), ROWSPAN (broj redova koji se spajaju), VALIGN (vertikalno poravnavanje), WIDTH ( širina ćelije) Tag <TD> - Opisuje pojedinačnu ćeliju. Parametri: isti kao kod <TH> Pr2, Pr3,Pr4 i Pr5