Html-Osnove.Pdf

- OSNOVE - Tehnologije za izradu Web stranica

− HTML − CSS − JavaScript − PHP − ASP − MySQL − Adobe FLASH − AJAX Šta je to HTML?

− 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, ved 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. Primer: Google stranica Izgled Google stranice u HTML jeziku

Alati za izradu Web stranica Grafički orijentisani HTML editori koji omogudavaju korisnicima kreiranje Web stranica bez potrebe poznavanja HTML –a i drugih Web-jezika: • Microsoft • Open source – FrontPage – Quanta Plus – Exspression Web – Mozilla Composer • Macromedia – … – HomeSite – DreamWeaver • Adobe – PageMill HTML – START

Alati koji su vam potrebni za izradu Web sajta u HTML jeziku: − Neki od Web browser-a (Microsoft Internet Explorer, Opera, Mozilla Firefox ...) − Jednostavan Text Editor (Notepad - iz Windows-a ili Notepad ++ koga možete preuzeti sa Interneta i instalirati na vaš računar). Notepad - Start Meni/All Programs/Accessories ... Notepad ++ možete preuzeti sa Interneta i instalirati na vaš računar (http://notepad-plus-plus.org/download). HTML osnove - 1

• HTML (HyperText Markup Language). • HTML datoteka se sastoji od tagova i tekstova. • Tagovi (oznake): − definišu strukturu i izgled dokumenta − otvarajudi tag: − zatvarajudi tag: − postoje i prazni tagovi: (pravilnije: )

XHTML (Extensible HyperText Mark-up Language) struktuiraniji način pisanja HTML. HTML osnove - 2

Osim imena HTML elementa, tag čini i određeni broj atributa, čije su vrednosti uokvirene navodnicima:

Ime Atribut Vrednost atributa

Ime taga govori browser-u šta da uradi, a atribut kako da to uradi. Pri prikazivanju stranica browser-i se oslanjaju na informacije date u tagovima. Razlika između malih i velikih slova ne postoji: (title = Title = tiTLe) Struktura HTML dokumenta - 1 Osnovna struktura HTML dokumenta: − html (dokument-stranica) − head (glava-zaglavlje) head (glava-zaglavlje) − body (telo)

body (telo)

html (dokument-stranica) Struktura HTML dokumenta - 2

Ispravno formatiran HTML dokument ograničen je sa tagovima: - početak html dokumenta - kraj html dokumenta

Unutar ove oznake se nalazi kompletan sadržaj strane, uključujudi i eventualne skriptove. Struktura HTML dokumenta - 3

Zaglavlje stranice: - početak zaglavlja - kraj zaglavlja Sadrži informacije koje su specifične za tu stranu.

Tag gde se upisuje naslov strane koji de biti prikazan u Web pretraživaču: - početak naslova - kraj naslova Struktura HTML dokumenta - 4

Telo stranice: - početak tela - kraj tela

U telu html stranice smešta se HMTL kod koji zapravo predstavlja "pravi" sadržaj strane. Struktura HTML dokumenta -5 Minimalni HTML dokument:

Struktura HTML dokumenta - 6 Minimalni HTML dokument: Primer 1: Ja volim Informatiku!

Primer 1: HTML dokument napišite u Notepad-u. Sačuvajte ga u nekom folderu, sa ekstenzijom .htm. Otvorite prethodno sačuvan dokument u nekom Web browser-u: Primer 1: Izgled stranice Primer 2:

Naslov

Tekst dokumenta.

Primer 2: Izgled stranice Komentar

Oblik:

Komentar počinje sekvencom znakova . Obrada teksta - 1

Pasusi teksta se navode između

tagova:

Pasus...

Svi

tagovi počinju u novom redu. Iza završnog

taga, prelazi se u novi red, sa dodatnim praznim prostorom između. Ukoliko treba ubaciti praznu liniju bez dodavanja praznog prostora, koristi se tag
. Obrada teksta - 2

U okviru početnog taga

može se navesti atribut align, koji određuje horizontalno poravnanje paragrafa; vrednost ovog atributa može biti jedna od slededih: left, center, right i justify. Ukoliko se navede samo početni tag

, podrazumeva se da je slededi element u novom redu. Primer 3: Pasusi

Pasusi

Ovo je prvi pasus.

Ovo je drugi pasus.

Ovo je treci pasus sa praznim redom.

Ovo je pasus koji je desno poravnat.

Ovo je pasus koji je centriran.

Primer 3: Izgled stranice Obrada teksta -3

Naslovi se mogu istadi korišdenjem elemenata h1, h2, h3, h4, h5 i h6. Tag

daje najvedu veličinu slova, a

najmanju. Svaki od ovih elemenata počinje u novom redu, a browser-i dodaju još malo praznog mesta pre zaglavlja. U okviru zaglavlja se može navesti atribut align, koji određuje horizontalno poravnanje zaglavlja. Vrednost ovog atributa može biti jedna od slededih: left, center, right. Primer 4: Tekst
Veličina slova

Ovo je veličina slova u zaglavlju H1

Ovo je veličina slova u zaglavlju H2

Ovo je veličina slova u zaglavlju H3

Ovo je veličina slova u zaglavlju H4

Ovo je veličina slova u zaglavlju H5

Ovo je veličina slova u zaglavlju H6

Primer 4: Izgled stranice Obrada teksta - 4

Za grubo razdvajanje teksta linijom koristi se prazan tag

. On dodaje jednu horizontalnu liniju ispred i iza koje postoji prazan red. Mogude je podesiti visinu korišdenjem atributa size=n (n je broj piksela), širinu pomodu atributa width=n i poravnanje pomodu atributa align (mogude vrednosti su left, right i center). Primer 5: Linije

Linije

Primer 5: Izgled stranice Obrada teksta - 5 Tag

služi za vede blokove citata. Obično se predstavlja kao blok teksta uvučen u odnosu na ostatak. Tag se koristi za krade citate i uglavnom ispisuje tekst italikom. Koristi se za citate unutar teksta. Tag

 služi za kratke (manje od jednog reda) listinge (unutar teksta). Tag  (preformatted) obezbeđuje prikaz teksta “onako kako je unet” (svi enteri, tab-ovi i razmaci se prikazuju kako su uneti). Primer 6: Citati
  Enter the title of your HTML document here   
Ovo je tekst koji je levo poravnat.
 Ovo je veliki blok citata.
 Ovo je treći pasus, unutar kojeg će biti naveden citat. Ovo ćemo posmatrati kao citat. 
   Primer 6: Izgled stranice Obrada teksta - 6
Ukoliko treba promeniti sam izgled teksta, koriste se slededi elementi: –  - za podebljan tekst, –  - za iskošen (italik) tekst, –  - za podvučen tekst, –  - daje vedi font za 1 od zadatog, –  - daje manji font za 1 od zadatog, –  - daje tekst koji treperi. Obrada teksta - 7
Tag  omogudava da se menja boja, veličina i vrsta fonta. Sav tekst između početnog i završnog taga bide prikazan sa specificiranim karakteristikama . Atributi u okviru početnog taga  su: − face - naziv fonta, − color - menjanje boje (navodi se ime boje ili heksadecimalni broj koji predstavlja tu boju na RGB skali), − size - menjanje veličine, − weight - debljina slova. Primer 7: Tekst   Karakteristike teksta   
Sledeći tekst će prikazati upotrebu atributa za menjanje karakteristika teksta:
 Ovo je podebljan tekst.
 Ovo je iskošen tekst.
 Ovo je podvučen tekst.
 Ovo su slova uobičajene veličine, a ovo su slova za jedan veća od uobičajenih.
 Ovo su slova uobičajene veličine, a ovo su slova za jedan manja od uobičajenih.
 Ovo je tekst crvene boje, font je Arial, slova su veličine 10.
 
 Ovo je tekst zelene boje, font je Times New Roman, slova su veličine 6.
   Primer 7: Izgled stranice Liste - 1 Liste su potrebne u tekstu kad nešto nabrajamo. Grafičke liste se prave upotrebom tagova  i . Primer 8: Liste 1
  Liste1   Ovo je moja prva lista: 
 text1
 text2
 text3
 
   Liste - 2 Vrsta oznake bira se atributom type, taga , (primer: cirkle, square,...). Primer 9: Liste 2
  Liste1   Ovo je moja prva lista: 
 text1
 text2
 text3
 
   Liste - 3 Numeričke liste prave se upotrebom tagova  i . Vrsta numeracije se bira atributom type, taga , (primer: 1, a, A, I...). Primer 10: Liste 3   Liste1   Ovo je moja prva lista:  text1
 text2
 text3
 
   Liste - 4 Start numeracije bira se atributom start, taga , (primer: 5, 3, 11, 20...).
Primer 11: Liste 4   Liste1   Ovo je moja prva lista: 
 text1
 text2
 text3
 
   Slike - 1
Tag  definiše sliku koja de se javiti u HTML dokumentu. Atribut src sadrži ime slike koja treba da se nađe u dokumentu, ili putanju do te slike. Atribut alt sadrži tekst koji je ispisan na mestu slike, ukoliko ona nije učitana iz nekog razloga. Slike - 2
Dimenzije slike se zadaju preko atributa height i width. Slika može biti poravnata u odnosu na ostatak dokumenta, a željena vrednost se daje u artibutu align. Debljina ivice slike se zadaje u atributu border. Primer 12: Slike
  Slike  
 
 
 
  Primer 12: Izgled stranice Dodatni atributi body taga
− Atribut bgcolor boji pozadinu stranice. − Atribut link definiše boju linka. − Atrigut vlink definiše boju posedenog linka. − Atribut alink definiše boju aktivnog (selektovanog) linka. − Atribut background definiše putanju do pozadinske slike. Primer 13: Boja pozadine i linkova 
 
 
Označavanje delova dokumenata
  Ovaj pasus obeležen je imenom “prvi”. Ovo je link na drugi deo. 
   Primer 13: Izgled stranice Primer 14: Slika za pozadinu 
 
 
Pozadinska slika
  All of the base tables and views for the database's data dictionary are stored in the schema SYS. These base tables and views are critical for the operation of Oracle... 
 
 Primer 14: Izgled stranice Linkovi (veze) - 1
− Linkovi na Web strani se prave pomodu  oznake (a je skradeno od anchor - sidro).
Atributi ove oznake su: href - (hyperlink reference) koji označava lokaciju na koju se preusmerava Web pretraživač kada korisnik klikne na link. Ne zaboravite "http://" za punu adresu. Primer 15: Link 1 
 Veza ka zvaničanom sajtu Gimnazije u Kuršumliji  Linkovi (veze) - 3
• Mogu se definisati veze unutara jedne stranice. • Sve što je potrebno je atribut id (identification) i simbol "#". • Id atribut markira element ka linku: 
Naslov 1
 • Sada je mogude kreirati link korišdenjem "#" u atributu veze. "#" mora da bude u paru sa id. Veza ka naslovu 1  Primer 16: Linkovi    Linkovi2 
  Veza ka zvaničanom sajtu Gimnazije u Kuršumliji 
Veza ka naslovu 1
 Veza ka naslovu 2
 
 Naslov 1
 Text text text text
Naslov 2
 Text text text text
   Primer 16: Izgled stranice Tabele - 1
Tabele se obično koriste iz dva razloga u HTML-u. Prvi je uredjenje podataka tabelarno. Drugi je manje uočljiv ali u HTML-u mnogo više korišden, a to je dizajniranje Web stranica korišdenjem nevidljivih tabela. Gotovo svi sajtovi koriste nevidljive tabele u dizajnu. Dizajniranje Web stranice tabelama znači podeliti stranicu na različite delove i u njima smeštati pojedine njene elemente. Obično ti delovi su zaglavlje, deo za dugmide koji povezuju stranice Web sajta, polje za pretragu Web-a ili sajta, polje za glavni deo strane, itd. Tabele - 2
Osnovni tag tabele je 
, koji ima početni i krajnji tag. Taj tag je u stvari onaj naš pravougaonik. U tabelu stavljamo jedan ili više horizontalnih polja. Tag horizontalnog polja je , i ono ima takođe početni i krajnji tag. U horizontalno polje stavljamo jednu ili više delija. Ćelija ima tag , a i ona ima početni i krajnji tag. Linije koja oivičava tabelu pravi se tako što se stavi atribut border unutar  taga. Primer 17: Tabela 1
   Tabela1    Sastav ekipa: 
  Ekipa 1  MARA  ĐOLE  ĐURA  
  Ekipa 2  JACA  MARKO  MILE  
 
   Primer 17: Izgled stranice Primer 18: Dekorativna HTML tabela Primer tabele koja služi da rasporedi elemente jedne Web stranice: Primer 18: Dekorativna HTML tabela Izgled tabele koja služi da rasporedi elemente jedne Web stranice: Tag Opis  ...  Deklariše da je Web stranica pisana u HTML-u  ...  Zaglavlje stranice  ...  Definiše naslov stranice  ...  Ograničava telo stranice  ...  Ograničava naslov nivoa n  ...  Zadebljana slova (bold)  ...  Isošena slova italik  ...  Horizontalno centriranje ... na stranici  ... 
 Ograničava neuređenu listu  ... 
 Ograničava uređenu listu  ...  Ograničava stavku uređene liste 
 Umede novi red (prelom linije)  …
 Ograničava paragraf 
 Umede horizontalnu liniju po celoj dužini strane Prikazuje sliku
 ...  Definiše hiperlink 66 HTML Tutorijali
Više o HTML-u možete saznati na slededim Web stranama:
− http://www.bubaj.com/index.php?html − http://webarena.rs/html-css − http://www.w3schools.com/html/default.asp