1 / 31

Pozadinske boje i slike Za menjanje pozadinske boje potrebno je:

HTML – 2. deo. Pozadinske boje i slike Za menjanje pozadinske boje potrebno je: Komanda koja ć e re ć i pretraživaču da ć e se pozadinska boja promeniti; K ô d za boju. Komanda za menjanje pozadinske boje se pi š e u okviru BODY linije. BODY linija treba da izgleda:

quintessa-urban
Télécharger la présentation

Pozadinske boje i slike Za menjanje pozadinske boje potrebno je:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML – 2. deo • Pozadinske boje i slike • Za menjanje pozadinske boje potrebno je: • Komanda koja će reći pretraživaču da će se pozadinska boja promeniti; • Kôd za boju.

  2. Komanda za menjanje pozadinske boje se piše u okviru BODY linije. BODY linija treba da izgleda: <BODY BGCOLOR="######"> Šestocifreni kôd za boju stavlja se umesto "######" u gornjoj komandi.

  3. Pozadinska slika Slika koja se stavlja u pozadinu obično je u .jpg ili .gif formatu, tako da bi tačan naziv celog fajla trebalo ispisati u kôd koji će prikazati sliku u pozadini stranice: <BODY BACKGROUND="vasa_slika.gif"> Ovaj kôd je napisan pod pretpostavkom da se slika nalazi u istom folderu gde i stranica na koju se unosi.

  4. Ako se slikanalazi u npr. folderu “slike”, a stranica u kojutreba unetisliku u root-u (ili folderu, gde već stoji prezentacija), ondakôdtreba da izgledaovako: <BODY BACKGROUND=“slike/vasa_slika.gif">

  5. Povezivanjestranica (Tekstualnilinkovi -Hypertext Links) Povezivanjestranica se vrši pisanjemtagovakojisuvećpominjani. Primer: <A HREF="http://www.google.com">Kliknite ovde da odetena Google</A> Ovo je link kojiotvara web stranicu “Google”, napravljennadtekstom “Klikniteovde da odetena Google”.

  6. Objašnjenje: • A je skraćenica od Anchor(sidro) • HREFje skraćenica od Hypertext REFerence(hipertekstupućivanje). To je način da se pretraživačukaže "Ovde piše gdeće link otići".  • http://www.google.comje PUNA ADRESA linka. Takođe, vidi se da se adresanalazi pod znacimanavoda. To je zatošto je to atribut Anchor taga, komandaunutarkomande.

  7. Zatim se zapisuje tekst nad kojim se pravi link. Ono što je u tom prostoru ispisano će se pojaviti kao opcija na koju posetilac može kliknuti. Dakle, zapisuje se nešto što će opisati ili označiti link. • </A>Označava kraj cele komande.

  8. Postojiopcijaunosatzv. ToolTip-a(savet), kojikada se pređe mišemprekolinka, obično ToolTip sadrži dodatnedetalje o linku: <A HREF=“http://www.google.com” TITLE =“Ovaj link otvara web pretrazivac Google”>Klikniteovde da odetena Google</A>

  9. E-mail linkovi Link poznatkao "mailto:" komanda. Ona je veomaslična hypertext linku u prethodnomprimeru. Ovajkôdtakođe postavljatekstnastranicinakojiposetiocimogukliknuti i otvoriti program zaslanjeelektronske pošte.

  10. Primer: <A HREF="mailto:username@mail.com">Klikniteovde da unesete adresu u Outlook!</A> Primećuje se da je kôdistogformatakaoza link, osimšto se ovdeupisuje "mailto:" umesto "http://" i e-mail adresaumestoadresastranice. I dalje je potrebanzavršni</A> tag nakraju.

  11. Slike Postavljanjeslikenastranicu Komandazapostavljanjeslike je konstantna i koristi seisti format. Sveslikekoje se koristetrebasmestitinaistomestogde i HTML stranicekoje se pišu. To znači da sliketrebaiskopiratinaistulokacijugde se nalaze i HTML stranice (ilistranicanakoju hoćemo da postavimoslike). Kôdzaubacivanjeslike: tag (<), zatim(imgsrc=), pa nazivslike ("vasa slika") i nakrajuzavrsni tag(>)

  12. IMGje skraćenica od "image". IMGnajavljuje pretraživaču da na tom mestu treba da se prikaže slika. Slika će se pojaviti tačno gde se napiše u oznaci za sliku. • SRC je skraćenica od "source". Ovo je atribut, komanda unutar komande i govori pretraživaču gde treba da nadje sliku (putanja). • slika.gifje naziv slike.

  13. Formatislika • .gifje skraćenica od Graphic Interchange Format. Slikesaovomekstenzijomsuveomapopularne, često se koristezatošto je pomoću malihprogramamoguće napravititzv. animirane gif-ove(sličice) koji se masovnokoristena web prezentacijama. • .jpgili.jpeg je skraćenica od Joint Photographic Experts Group,organizacijakoja je napravila format. Slikesaovomekstenzijom se takodje čestokoristena web-u zatošto zauzimajumanjeprostoranadisku. 

  14. Aktiviranjeslika Kako da slikapredstavlja link?Napraviće se opcija da,kada se kliknenasliku, link treba da otvorisajtwww.google.com. Ovo je kôd: <A HREF=”http://www.google.com”><IMG SRC=”slika.gif”></A> 

  15. Okoslike se pojavljujeplavalinija. To se događa kada se aktiviraslika, odnosno kadaslikapostane link kanekomsajtu. Tačnije, to je “border”okoslike. Border se može uklonititakošto će se upotrebitiatributtaga. Border će biti uobičajeno obojen u boju kojom je obojen tekst. Kôd je istikao i prethodni, s timšto je dodato: IMG BORDER="0" Borderi se mogu i podebljatitakošto će se upisatinpr. BORDER= "35".

  16. Obrada slika Pozicija na stranici Inicijalno, slika se postavlja krajnje levo. Ako sliku hoćemo da postavimo na sredinu stranice onda je potrebno upotrebiti tagove <CENTER> i </CENTER>. Kako sliku smeštamo na desnu stranu? Identično, kao kada se postavlja tekst. Dodavanjem atributa ALIGN="--" komandi <P> , samo što umesto <P>postavljamo <IMG> komandu.

  17. Pozicioniranje teksta uz slike Kako izgleda kôd, kada je potrebno pisati pored slike? Pozicioniramo tekst pored slike, na vrhu, u sredini i u donjem delu. Ponovo koristimo ALIGN="--" komandu sa još tri atributa: “top”, “middle”, ili “bottom”: ALIGN="top" ALIGN="middle" ALIGN="bottom"

  18. Ne treba koristiti top, middle i bottom atribute osim ukoliko je potreban samo jedan red teksta. Ako treba napisati više redova, koriste se ALIGN="left"iALIGN="right" atributi. Čak iako se slika već nalazi levo unosi se ALIGN="left" atribut. Može se napisati više redova teksta pored slike.

  19. Definisanje visine i širineslike Dodavanjevisine i širineslikepomaže pretraživaču da efikasnijeprikaže sliku. Ukoliko se znakolika je visina i širinaslike, ona se morazadati unošenjem tačnihvrednosti: <IMG SRC=”slika.jpg” WIDTH=”250” HEIGHT=”188”/> Uvektrebazadatipravuveličinuslike. Ukoliko suvrednostikoje se unoseveće negošto suprave, ondaće pretraživačrazvući sliku. Ukoliko se zadajumanjevrednosti, pretraživačcesmanjitisliku.

  20. Jednostavne komande za tabele Kod za tabelu: <TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1"> <CAPTION>Brojevi</CAPTION> <TR> <TD ALIGN = "center"> 1 </TD> <TD ALIGN = "center"> 2 </TD> <TD ALIGN = "center"> 3 </TD> </TR>  <TR> <TD ALIGN = "center"> 5</TD> <TD ALIGN = "center"> 7 </TD> <TD ALIGN = "center"> 9 </TD> </TR>  <TR> <TD ALIGN = "center"> 4 </TD> <TD ALIGN = "center"> 6 </TD> <TD ALIGN = "center"> 8</TD> </TR>  </TABLE> 

  21. Komandekojesukorišćenesusledeće: • <TABLE>označava da pretraživačtreba da iscrtatabelu; • <CAPTION> i </CAPTION>stavljajunasloviznadtabele. Naslovće bitinasredini. Ovakomanda se ne morakoristiti. • <TR> se koristizaunosnovogreda. Svaka<TR>komanda se završavasa</TR>. • <TD>se koristikada hoćemo da u posebnućelijuunesemonekisadržaj.  • </TABLE>zatvaratabelu. 

  22. Komande za tabele kreiraju seriju ćelija. Svaka ćelija se pravi ubacivanjem <TD> i </TD> komande. Ukoliko hoćemo da u tabelu unesemo još redova onda se koriste <TR> i </TR> komande za formiranje prvog reda u tabeli.

  23. Podkomande: • BORDER - govoripretraživaču kolikolinijaokotabeletreba da budepodebljana. Mogu se postaviti i drugevrednostiumesto "3".  • CELLSPACING- označavakolikoćebitirazmakizmeđu ćelija.  • CELLPADDING- pokazujekolikiće bitiprostorizmeđu linijaćelijetj. kolikoće ćelijabitivelika. 

  24. <TD> komandi je pridružena podkomanda ALIGN=”center”, koja govori da sve što se nalazi u ćeliji treba da bude tačno u sredini ćelije.  • Postoji opcija korišćenja ALIGN="left" ili  ALIGN="right"

  25. Linkovi u tabeli Komande su iste kao i za svaku tabelu osim što se unosi link za komandu posle <TD> komande. Evo kako izgleda kôd u gornjoj levoj (prvoj)ćeliji:  <TD align = "center"><A HREF="http://www.kombib.co.rs">KOMPJUTER BIBLIOTEKA</A></TD>

  26. Pod pretpostavkom da imamoukupnočetirićelije i da smonapravili link zaprvu – gornjulevu, napravitilinkove u preostale tri ćelije i to ka: MIKRO KNIGA: www.mikroknjiga.rs CET COMPUTER: www.cet.rs JedinstveniinformatičkisavezSrbije: www.jisa.rs

  27. Da bi se unela slika u ćelije, kôd je sledeći: <TD ALIGN = "center"><IMG SRC="slika.gif" width="70" height="90"></TD>

  28. Linkovikaodređenimsekcijamanastranici Trebaunetidvestvarinajednojstranici: 1.Osnovna link komandakojaciljakaodređenojsekcijistranice. 2. Tačkanakojuće stranicaskočiti.

  29. Evoosnovne link komande: <A HREF="#dno">idinadno...</A> Na mestugdeće link prebacitiposetiocapostaviće se ova komanda: <A NAME="dno">

  30. O čemu se radi: • A HREFkomanda je istakao i osnovna link komandaosimšto nema URL već link kojivodikasekcijinastranicigde je pomoću određene reči (u ovomslučaju ta reč je "dno") označenogdetreba da se ode, kada se kliknena link. • znak#koji se nalaziispred reči "dno". Tajznak je potreban da bi se označilo da je to link kojivodinaželjenusekciju u okvirustranicenakojoj se nalaziteilinaželjenusekcijunekedrugestranice. Bez#znaka, pretraživačće tražitiadresustranicekoja ne postoji.

  31. Umesto reči "dno" može se staviti bilo šta. • Tačka gde će link otići ima isti generalni format, osim što rečHREFmenjamo saNAME. • Znaka# nema u NAME komandi. • NAME komanda se stavlja tamo gde je potrebno da link prebaci posetioca. • Deo stranice na kome je stavljenaNAME komandaće uvek biti na vrhu prozora kada neko klikne na link koji vodi ka tom delu stranice.

More Related