Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Informatika 6

607 views

Published on

  • Be the first to comment

  • Be the first to like this

Informatika 6

  1. 1. Uvod u HTML
  2. 2. HTML HTML = Hypertext Markup Language, Jezik za označavanje hiperteksta HIPERTEKST = tekst (dokument) koji sadrži veze (linkove) prema drugim dokumentima ili prema elementima istog dokumenta Jezik za označavanje = poseban jezik koji se koristi za označavanje različitih elemenata nekog dokumenta kao što su, na primer, naslovi, pasuse, liste, slike, tabele itd.
  3. 3. Šablon <HTML> - početak HTML dokumenta  <HEAD> - zaglavlje dokumenta  <TITLE> - naslov dokumenta  Naslov Web Stranice  </TITLE> - kraj naslova  </HEAD> - kraj zaglavlja  <BODY> - telo dokumenta  Ovde će biti sadržaj dokumenta.  </BODY> - kraj tela dokumenta </HTML> - kraj HTML dokumenta
  4. 4. Uvod Otvoriti Notepad Upisati šablon za HTML Sačuvati pod nazivom Index.html u odgovarajućem folderu pogledati rezultat pomoću IE Objasniti pojedine tagove Sintaksa: ne pravi se razlika između malih i velikih slova Sintaksa: formatiranje teksta nema uticaja na rezultat
  5. 5. Tekst 1 Ispod teksta “Ovde će biti sadržaj stranice.” dodati sledeće dve rečenice, obe u novom redu: Ovo je drugi red dokumenta. Ovo je treći red dokumenta. Snimiti dokument i posmatrati promene Staviti tag <BR> ispred dodatih rečenica, snimiti dokument i pogledati promene
  6. 6. Tekst 2 Dodavanje formatiranog teksta: <PRE> Koristeći tag PRE  možemo dodati tekst čiji je format unapred  određene unutar dokumenta. </PRE> Snimiti i pogledati promene Izbrisati tagove, snimiti dokument, pogledati promene, vratiti tagove Objasniti kako se dodaju specijalni znaci: < = &lt; ili < > = &gt; ili >
  7. 7. Pasus, efekti Dodati horizontalnu liniju pomoću taga <HR> ispred i iza već napisanog teksta Dodati sledeće pasuse i pogledati promene:  <P> Prvi pasus. </P>  <P> Drugi pasus. </P>  <P> Treći pasus. </P> Promeniti poravnanje pasusa dopuniti tekst i pogledati promene:  centrirati prvi: ALIGN=“CENTER”  levo poravnati drugi: ALIGN=“LEFT”  desno poravnati treći: ALIGN=“RIGHT” Promeniti font za reči “centrirano”, “pasus”, “desno.”:  <B>, <I>, <U> Dodati četvrti pasus: Iskrivljeno i podvučeno. Dodati horizontalnu liniju
  8. 8. Naslovi Objasniti tagove za različite nivoe naslova: <H1>...</H1>, ... <H6>...</H6> Dodati sledeća tri naslova i pogledati promene: Ovo je naslov najvišeg nivoa. H1 Ovo je naslov drugog nivoa. H2 Ovo je naslov trećeg nivao. H3 Centrirati naslov najvišeg nivao Dodati horizontalnu liniju i pogledati promene
  9. 9. Linkovi 1 Objasniti tag za linkove: <A HREF=“adresa”>...</A> URL = Uniform Resource Lokator (Uniformni Lokator Resursa) http://www.w3.org/MarkUp/ImeFajla.html http – protokol, Hypertext Transfer Protocol  (protokol za prenos hiperteksta) www.w3.org – domen  .org – domen prvog nivoa  w3 – domen drugog nivoa  www – domen trećeg nivoa MarkUp – ime foldera ako ne navedemo ime fajla, bira se podrazumevani fajl sa nazivom  Index.html
  10. 10. Linkovi 2 Primeri domena prvog nivoa:  .ORG – organizacije  .COM – firme  .EDU – obrazovne institucije  .GOV – vladine organizacije Dodati link na www.w3.org unutar novog pasusa, tako da link predstavlja reč Web iz rečenice:  Link prema organizaciji W3. Dodati link na www.w3.org/MarkUp unutar novog, centriranog pasusa tako da link predstavlja reč Ovde iz rečenice:  Ovde možete čitati o jeziku HTML. Dodati horizontalnu liniju i posmatrati promene
  11. 11. Liste 1 Nabrajanje, lista sa simbolima, znacima ispred elemenata liste: <UL>  <LI> ... </LI>  <LI> ... </LI> </UL> Dodati sledeću listu i pogledati promene: Spisak studenata sa znacima:  Milan  Jovan  Ana  Maja
  12. 12. Liste 2 Nabrajanje, lista sa brojevima ispred elemenata liste: <OL>  <LI> ... </LI>  <LI> ... </LI> </OL> Dodati sledeću listu i pogledati promene: Spisak studenata sa brojevima:  Milan  Jovan  Ana  Maja
  13. 13. Liste 3 Definiciona lista (rečnik):  <DL>  <DT> ... </DT>  <DD> ... </DD>  </DL> Dodati sledeću listu i horizontalnu liniju, pogledati promene:  Rečnik pojmova:  Izraz (term)  Definicija izraza (terma)  HTML  Hypertext Markup Language  URL  Uniform Resource Locator
  14. 14. Slike 1 Tag za slike:  <IMG SRC=“ime fajla”  ALIGN=“left,right,top,bottom,middle”  BORDER=5  ALT=“alternativni tekst”  WIDTH=“širina”  HEIGHT=“visina”  HSPACE=“...”  VSPACE=“...”> Dodati sliku planete Neptun i pogledati promene, argumenti:  ALIGN=“right” ALT=“Slika planete Neptun” Dodati okvir širine 5, levo poravnanje, širina 200, visina 175, hspace 10, vspace 20
  15. 15. Slike 2 Dodati novi pasus sa opisom planete Neptun iz fajla Neptun.txt Unutar novog reda dodati tekst: Sada ćemo dodati logo organizacije W3. Poništiti paravnanje sa <BR CLEAR=“all”> Dodati logo W3: http://www.w3.org/Icons/w3c_main.png Tipovi slika koje se mogu koristiti: PNG, JPG, GIF Dodati alternativni tekst: Logo organizacije W3. Dodati horizontalnu liniju i pogledati promene
  16. 16. Tabele 1 <TABLE>  <CAPTION> Naslov tabele </CAPTION>  <TR> Prvi red </TR>  <TR> Drugi red </TR> </TABLE> <TH> zaglavlje kolone </TH> <TD> polje tabele </TD> Napraviti sledeći višejezični rečnik, dodati horizontalnu liniju i pogledati:  Višejezični rečnik  Engleski Srpski Mađarski  Window Prozor Ablak  Train Voz Vonat  Apple Jabuka Alma
  17. 17. Tabele 2 Dodati okvir veličine 5 (BORDER) Centrirati celu tabelu (ALIGN=“CENTER”) Promeniti širinu tabele na 300 (WIDTH) Promeniti veličinu praznog prostora između polja tabele na 10 (CELLSPACING) Promeniti veličinu praznog prostora između polja i okvira na 5 (CELLPADDING) Centrirati engleske reči (ALIGN) Pogledati promene

×