informatika n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Informatika PowerPoint Presentation
Download Presentation
Informatika

Loading in 2 Seconds...

play fullscreen
1 / 17

Informatika - PowerPoint PPT Presentation


  • 76 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Informatika' - shing


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
informatika

Informatika

Uvod u HTML

slide2
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.
ablon
Š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
slide4
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
tekst 1
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
tekst 2
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;
pasus efekti
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
naslovi
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
linkovi 1
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
linkovi 2
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
liste 1
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
liste 2
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
liste 3
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
slike 1
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
slike 2
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
tabele 1
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
tabele 2
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