tagovima mogude je dodeliti id ili klasu i zadati im stil. 21

Korak 02

22

Paragraf

levo

centrirano

desno

23

CLASS atributi • Atribut CLASS se koristi za povezivanje elementa sa definisanim stilom. • Najčešde se koristiti kada imamamo stil definiran u CSS-u. • Ako u nekom CSS stilu imamo definisan stil za klasu ”pasus”. • Tada u HTML fajlu napišemo

levo

centrirano

desno

30

Primer 3: HTML linije

levo

---

centrirano

---

desno

31

Primer 4: Font Ovaj tekst je u fontu "Comic Sans MS" . Ovaj tekst je crven, a ovaj velicine 5.

32

Korak 03

33

Linkovi • HTML veze se nazivaju linkovi ili hiperveze • One omogudavaju prelazak sa jednog mesta na stranici na drugo mesto unutar same stranice ili na neku drugu stranicu

34

Linkovi • HTML link se definiše tagom Na primer

pocetna pozicija

35

Link na stranicu koja se nalazi na istom serveru • Kod ove vrste linkova koristi se tag sa atributom href i nazivom stranice na koju želimo da skočimo

Link na stranicu 1

36

Apsolutne putanje • Odredišna stranica u opštem slučaju ne mora da se i fizički nalazi u istom direktorijumu gde i polazna stranica. • Postoje dva rešenja ovog problema, a to je rad sa apsolutnim i relativnim putanjama • Korišdenje apsolutnih putanja podrazumeva navođenje pune putanje do odredišne stranice, na primer: href=”c:\Aplikacije\Poslovne\Klijent\Prva.htm” 37

Relativne putanje • Korišdenje relativnih putanja je mnogo podesnije, jer se zasniva na kretanju u odnosu na direktorijum stranice sa polaznom pozicijom • Neka direktorijum A sadrži stranice a1 i a2, B stranicu b3, a C stranicu c4

38

Relativne putanje • Za stranicu a1, – relativna adresa stranice a2 je „a2.htm”; – relativna adresa stranice b3 je „B/b3.htm”; – relativna adresa stranice c4 je „B/C/c4.htm”; • Za stranicu b3, – relativna adresa stranice a1 je „../a1.htm” (simbol .. označava direktorijum iznad direktorijuma gde se nalazi stranica sa polaznom pozicijom); – relativna adresa stranice c4 je „C/c4.htm”; • Za stranicu c4, – relativna adresa stranice a2 je „../../a2.htm”; – relativna adresa stranice b3 je „../b3.htm”. 39

Primer: Main.htm

This is my Main Page

This is some text.

Ovo je link do stranice1

Ovo je link do stranice 2

40

Page1.htm

Stranica 1

Neki tekst.

41

Page2.htm

Stranica 2

Neki tekst.

42

Link na stranicu koja se ne nalazi na istom serveru

• U ovom slučaju je potrebno navesti celu web adresu te stranice. Opšti oblik adrese koja se pojavljuje kao vrednost href atributa je: scheme://server.domen [:port]/putanja/ imeDokumenta

Link ka Tehnickom fakultetu

43

Atribut target • Atribut target definiše gde de dati dokumenat biti otvoren Visit W3Schools! • Prethodni primer pokazuje da de se dati dokumenat otvoriti u novom prozoru

44

Atribut name • Omogudava link na istu stranicu • Za ovu vrstu linkova prvo se napravi oznaka na mestu na stranici gde se nalazi krajnja pozicijia. Oznaka se dobija pomodu atributa name u tagu: Pozicija 1 • na polaznoj poziciji navodi se tag sa imenom krajnje pozicije: Skok na poziciju 1

45

Primer <TITLE> Link u okviru iste stranice

Tenis

Novak Djokovic
Ana Ivanovic
Jelena Jankovic

Novak Djokovic

................
................

Ana Ivanovic

................
................

Jelena Jankovic

................
................

46

Link na sekciju iz neke druge stranice • Ako se želi da se uspostavi veza sa nekom drugom stranicom, ali ne sa početkom te stranice, ved nekim drugim delom, potrebno je koristiti i prvu i drugu vrstu linkova. • Definiše mesto odakle se želi nastaviti sa pregledom pomodu atribut href u tagu sa navođenjem imena stranice, ali se dodaje deo #sekcija, da bi se pozicioniralo na sekciju tekst polazne pozicije

47

Link na e-mail Posaljite e-mail poruku!

• Pored adrese na koju se želi poslati poruka mogu se podesiti još neki parametri, kao što su naslov ili tekst poruke Posaljite e-mail!

48

Primer

Stranica sa koje je moguce poslati mail

Neki tekst.

Posaljite e-mail!

49

Liste • Liste u jeziku HTML služe za navođenje, popisivanje određenih delova teksta • Liste mogu biti – nenumerisane, – numerisane – neuređene liste.

50

Nenumerisane liste • Nenumerisane liste koriste

tag (unordered list) • Svaka stavka se unosi tagom
• • Kafa
  • Mleko
  • Secer
  51
  
  Nenumerisane liste • Da se promeni okruglo dugme može se regulisati odgovarajućim atributom. • Atribut je type može uzeti vrednosti: – circle - okruglo dugme – disc - ispunjeno okruglo dugme – square - kvadratno dugme
  
  52
  
  Primer
  • ponedeljak
  • utorak
  • sreda
  • cetvrtak
  • petak
  53
  
  Numerisane liste • Numerisane liste koriste
  tag
  1. Kafa
  2. Mleko
  3. Secer
  
  
  54
  
  Numerisane liste • Atribut type: A - velika slova a - mala slova I - rimski brojevi i - mali rimski brojevi
  
  55
  
  Primer
  • ponedeljak
  • utorak
  • sreda
  • cetvrtak
  • petak
  56
  
  Definicione liste • Je lista stavki, sa definicijom svake stavke • Ovaj oblik liste se dobija sa

  tagom. • Svaka stavka ovakve liste se sastoji iz dva dela: – termina koji se definiše – i njegove definicije.
  
  • Termini počinju

  tagom, • Opis temina počinje

  tagom. • Termini se poravnavaju uz levu marginu a njihove definicije se pojavljuju u novom redu i pomerene su za određen broj mesta. 57
  
  Primer 1

  Kafa

  Crno toplo pice

  Espreso

  Kapucino

  Mleko

  Belo hladno pice

  
  
  58
  
  Ugnezdena lista

  Ugnezdena lista h4>

  • Kafa
  • Čaj
    • Crni čaj
    • Zeleni čaj
  • Mleko

  59
  
  Korak 04

  PREGLED ROBE

  
  

  • Ambalaza
  • Konfekcija
  • Ostalo

  
  
  62
  
  

  GALERIJA

  
  

  • Ambalaza
  • KOnfekcija
  • Ostalo

  
  
  63
  
  

  LINKOVI

  
  

  • HOME
  • Drzavne institucije
  • Banke
  • Firme

  64
  
  Tagovi za formatitanje teksta Tag
  
  Description
  
  
  
  Defines bold text
  
  
  
  Defines big text
  
  <em>
  
  Defines emphasized text
  
  
  
  Defines italic text
  
  <small>
  
  Defines small text
  
  <strong>
  
  Defines strong text
  
  <sub>
  
  Defines subscripted text
  
  <sup>
  
  Defines superscripted text
  
  
  
  Defines inserted text
  
  <del>
  
  Defines deleted text
  
  <s>
  
  Deprecated. Use <del> instead
  
  <strike>
  
  Deprecated. Use <del> instead
  
  
  
  Deprecated. Use styles instead
  
  65
  
  Primer <TITLE> Link u okviru iste stranice

  Tenis

  Ovo je bold tekst
  Ovo je big tekst
  <em> Ovo je amphasized tekst
  Ovo je italic tekst
  <small> Ovo je small tekst
  <strong> Ovo je strong tekst
  <sub> Ovo je subscript tekst
  <sup> Ovo je superscript tekst
  
  66
  
  Slika kao link • Slika u HTML dokumentu može predstavljati i polazni čvor u hipervezi. Dolazna adresa se tada navodi kao kod običnog linka, a umesto teksta koji se može aktivirati navodi se tag IMG. "tag IMG za željenu sliku"
  
  67
  
  Pozadina • ili • ili • ili 68
  
  HTML Tabele • • • •
  
  Tabele se definišu tagom Tabele se dele na redove pomodu taga Redovi se dele na delije pomodu taga

  Delije mogu da sadrže tekst, slike, liste, paragrafe, forme... 69 Primer 1 red 1, celija 1 red 1, celija 2 red 2, celija 1 red 2, celija 2 70 Zaglavlja u tabeli • Zaglavlja se u tabeli definišu tagom

  71 Primer 2 sadrzaj naslova tabele sadrzaj prve celija headera sadrzaj poslednje celije headera sadrzaj prve celije prvog reda sadraj poslednje celije prvog reda sadraj prve celije poslednjeg reda sadraj poslednje celije poslednjeg reda 72 Primer 3 Ime : Prezime : Zanimanje : Petar Petrovic Prodavac 73 cellpadding i cellspacing • Pomodu cellpadding atributa definiše se rastojanje između sadržaja delije i njene granične linije. • Pomodu cellspacing atributa se može odrediti rastojanje između pojedinih delija tabele. 74 colspan i rowspan • HTML dopušta mogudnost da se pojedine delije tabele protežu duž više redova ili kolona tabele. • Ovakav efekat se može postidi pomodu atributa colspan i rowspan, koji se ubacuju u ili tag one delije koja se želi posebno da formatira. • Vrednost ovih atributa se zadaje brojem kolona ili redova tabele duž kojih treba da se prostire data delija. 75 Primer 76 Prva Druga Treca Cetvrta Peta Sesta 77 Korak 06 • Kreirati HTML dokument ambalaza.htm • Isto kao index.htm • Promeniti centralni deo 78 Korak 06 79 Korak 06 80 Korak 06 Sifra NAZIV PROIZVODA Dimenzije t/p 101 Kese za domacinstvo 1/30 (170x250)x30 kom 50 102 Kese za domacinstvo 2/30 (200x300)x30 kom 50 81 Zadatak 1 • Napisati HTML kod sledede stranice: 82 83 • Dodajemo tabelu 84 Prvi red tabele • Dodajemo jedan red, koji se sastoji od jedne delije • width = “100%”, određuje relativnu veličinu delije cellpadding definiše rastojanje između sadržaja ćelije i njene granične linije cellspacing određuje rastojanje između pojedinih ćelija tabele colspain = “4”, spaja četiri kolone u prvom redu width = “100%”, određuje relativnu veličinu ćelije 85 Drugi red tabele 86 • U okviru ovog reda, dodaje se prva delija rowspan = “2”, spaja dva reda u prvoj koloni li – nova stavka liste ol - Numerisana lista 87 • Druga delija (25%) 88 • Treča delija (30%) • rowspain = “3”, spaja tri reda u tredoj koloni ul - Nenumerisana lista 89 • Četvrta celija (20%) • rowspain = “2”, spaja dva reda u četvrtoj koloni 90 Tredi red non-breaking space 91 Četvrti red • Dodaju se dve kolone u četvrtom redu • colspain = “2”, spaja dve kolone u četvrtom redu 92 HTML forme • Formu čini skup elemenata forme • Elementi forme su elementi koji dozvoljavaju korisniku da unosi podatke • Forma se definiše pomodu tagova . elementi . 93 Atributi taga • ACTION koji sadrži adresu (URL) programa na serveru • METHOD kojim je opisana metoda prenosa argumenata programa. Ovaj atribut može imati vrednosti GET ili POSTM 94 Tag input • Najupotrebljavaniji tag u formi jeste tag • Tip ulaznog elementa se specificira pomodu atributa ovog taga – Polje za unos teksta – Radio dugme – Polje za potvrdu – Dugme – Padajuda lista 95 Polje za unos teksta • Atribut type mora da ima vrednost text • Atribut name definiše ime elementa pomodu koga drugi elementi aplikacije (JavaScript, serverski deo aplikacije) mogu da čitaju ili da menjaju unetu vrednost • Atribut value definiše početni tekst koji de se pojaviti u tekst polju • Atribut size zadaje maksimalan broj karaktera koji se mogu uneti u okviru ovog elementa 96 Primer 1 Unesi ime: Prezime: 97 Radio dugme • Radio dugmad se definišu korišdenjem taga i njegovog atributa type sa vrednošdu radio 98 Primer 2 DA NE 99 Polje za potvrdu • Polje za potvrdu se definiše tagom input sa vrednošću atributa type checkbox 100 Primer 3 Ja imam bicikl: Ja imam auto: Ja imam jahtu: 101 Padajuda lista • Padajuda lista se definiše pomodu taga <select> i opcija • Tag <select> opisuje izbor između mogućih vrednosti navedenih u okviru taga • Atributi uz tag <select> su: – size kojim je opisan broj elementa u opcijama koje de biti prikazane – multiple kojim se omogudava izbor više opcija u istom trenutku 102 Primer 4 Moj omiljeni predmet je: <select name="predmeti"> Matematika Fizika Informatika 103 Dugme • Type button – definiše dugme opšteg tipa. • Akciju se mora definisati u okviru samog taga. • Najčešde je to Java Script funkcija koja izvršava određene provere pre samog slanja podataka na server 104 • Type submit - definiše dugme pomodu koga se podaci šalju na server. • Type reset – definiše dugme koje postavlja sve vrednosti elemenata forme na predefinisane vrednosti < input type =“ reset" name=“ponisti"> 105 Primer 5 Korisnicko ime: 106 • Tag < textarea> prikazuje tekst u odvojenom tekst prozoru sa scrollbarovima. • Dimenzije prozora su određene atributima rows (broj redova teksta) i cols (broj kolona). • Atribut name dodeljuje simboličko ime području u kome se nalazi tekst. ... neki tekst ... 107 Boje • Svi elementi stranice rad sa bojama organizuju identično • Boja se definiše – pomodu preredefinisanog engleskog naziva boje (npr. "yellow" za žutu boju) – Ili preko heksadecimalne RGB vrednosti ispred koje obavezno treba staviti simbol # (npr. #ffff00) 108 Vrednosti boja Color Color HEX #000000 Color RGB rgb(0,0,0) #FF0000 rgb(255,0,0) #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) 109 • World Wide Web Consortium (W3C) je definisao imena za 16 boja za HTML i CSS: – aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. • Za ostale boje mora se definisati keksadecimalna vrednost boje 110 Boja pozadine • Boja pozadine se određuje atributom bgcolor u okviru taga. • U slučaju da se prilikom navođenja taga BODY izostave opisani atributi, čitač im dodeljuje predefinisane vrednosti. • • 111 • Pored pozadine, može se menjati i boja teksta, pomoću atributa text – – – – ili ili ili 112 • Pozadina u obliku slike se definiše pomoću atributa background u BODY tagu. • Na primer, ako se želi da se kao pozadina stavi slika “sl1.jpg" tada će odgovarajući tag izgledati: • Pri definisanju pozadine u obliku slike, dobra praksa je da se definiše i bgcolor atribut. 113 Zadatak 2 – lične informacije 114 115 DIV tag definiše sekciju unutar HTML dokumenta. Obično se koristi za grupisanje elemenata, da bi se isformatirali istim stilom 116 • Prvi red tabele 117 • Drugi red tabele 118 • Tredi red tabele 119 • Četvrti red tabele 120 • Peti red 121 • Šesti red 122 • Sedmi 123 • Osmi 124 • Deveti red Skriveno polje. Nije vidljivo za korisnika. Koristi se za prenos informacija o stanju klijenta ili servera 125 • Deseti red 126 Frejmovi • Sa frejmovima možemo da prikažemo više od jednog HTML dokumenata i istom prozoru browser-a • Svaki dokumenat se prikazuje u posebnom frejmu 127 Tag frameset • Tag frameset definiše kako se prozor deli na frejmove • Tag ima atribute: – COLS za vertikalnu podelu prozora i – ROWS za horizontalnu podelu prozora 128 Tag frame • Tag frame definiše koji HTML dokumenat se prikazuje u datom frejmu • Tag frame ima atribute: • SRC, preko koje se zadaje adresa dokumenta koji de biti prikazan u zoni tog taga i • MARGINWIDTH i MARGINHEIGHT 129 Primer (index.htm) 130 Frame_a.htm Frame A 131 Frame_b.htm Frame B 132 Atributi taga frame • SRC: definiše adresu dokumenta koji će se učitati u okviru frejma. • BORDERCOLOR: Definiše boju za ivicu frejma. • FRAMEBORDER: Vrednost '1' ili 'yes' ovog atributa prikazuje granicu frejma, dok vrednost '0' ili 'no' ne prikazuje. • MARGINWIDTH: Definiše veličinu praznog prostor između leve i desne strane frejma i njegovog sadržaja izražen u pikselima. • MARGINHEIGHT: Definiše veličinu praznog prostor između vrha i dna frejma i njegovog sadržaja izražen u pikselima. 133 Atributi taga frame • NAME: Specificira ime frejma koje se može koristiti u okviru drugih programskih modula, kao što su JavaScript ili VBScipt. • NORESIZE: Aktivnom vrednošću ovog atributa se sprečava korisnik da menja zadatu veličinu frejma. Ovaj atribut se samo navodi bez ikakve vrednosti. • SCROLLING: Vrednosti ovog atributa su 'YES', 'NO' i 'AUTO'. Ako je vrednost 'YES' scroll bar će se pojaviti bez obzira da li je potreban iline, 'NO' će sprečiti 134 Primer • Korišćenjem frejmova i linkova može se omogućiti promena jednog dela stranice, dok bi preostali deo stranice ostao nepromenjen. • Kod definicije linka (koji se nalazi na drugom frejmu) se navede atribut target sa vrednošću koja predstavlja ime frejma čiji se sadržaj menja Promena frejma 135 main.htm 136 meni.htm Blic Press Vecernje Novosti 137 pocetna.htm Ovo je stranica ciji ce se sadrzaj promeniti ako se aktiviraju linkovi iz menija 138 139 Zadatak 1. Napisati HTML kod stranice kontakt.htm koja je po horizontali podeljena na tri dela (koja su u odnosu 15%:70%:15). U prvom delu stranice od vrha prikazana je stranica A.htm. Drugi deo stranice od vrha je podeljen vertikalno na tri dela (koja su u odnosu 15%:70%:15%), u kojima se izvršavaju stranice B.htm, forma.htm i C.htm. U tredem delu od vrha prikazana je stranica D.htm. 140 • kontakt.htm 141 • a.htm 142 Zadatak 143 Zadatak 144 Related Documents Html February 2021 3 Html February 2021 4 Html Programiranje March 2021 0 1-html March 2021 0 Html Tutorijal March 2021 0 Comandos Html March 2021 0 More Documents from "Jose Mise" 9_interfejsi February 2021 0 2_klase I Objekti February 2021 0 5 Niz Stek String February 2021 0 3_kontrolne Strukture February 2021 0 Enkapsulacija: Dr Nenad Jovanovid Ftn, 2010. Godina February 2021 1 Html February 2021 4 Copyright © 2024 VBOOK.PUB.