1 / 17

Informatika

Informatika. Uvod u HTML. 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

shing
Download Presentation

Informatika

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. Informatika Uvod u HTML

  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. Š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. 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. 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. 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 &#60; > = &gt; ili &#62;

  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

More Related