1 / 19

Web dizajn

Web dizajn. IV godina Informatički smer. HTML. HTML – Hypertext Markup Language Svrha web pretraživača je da čita HTML dokumenta i sastavi ih u vidljive ili zvučne web stranice Pretraživač korisniku ne prikazuje oznake, ali ih koristi da bi protumačio sadržaj stranice

evangeline-kline
Download Presentation

Web dizajn

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. Web dizajn IV godina Informatički smer

  2. HTML • HTML – Hypertext Markup Language • Svrha web pretraživača je da čita HTML dokumenta i sastavi ih u vidljive ili zvučne web stranice • Pretraživač korisniku ne prikazuje oznake, ali ih koristi da bi protumačio sadržaj stranice • Pogodnost korišćenja HTML-a je u tome što predstavlja gradivne blokove svih web stranica • Omogućuje da se koristi semantika kao što su zaglavlja, paragrafi, liste linkovi, a pored toga i skripte, kao što je JavaScript • Prvu verziju HTML-a je razvio fizičar Tim Berners-Lee, početkom ‘90.-ih, a najnovija verzija je predstavljena 2008. godine, pod nazivom HTML5

  3. HTML

  4. HTML

  5. HTML • HTML jezik se sastoji od HTML elementa i teksta • HTML elementi ukazuju www čitaču šta treba da preduzme i kako treba da prikaže tekst. • Sastoji se od znaka “manje” (<), koji predstavlja početak naredbe, sledi tekst koji prestavlja naredbu koja treba da se izvrši i znaka “veće” (>), koji označava kraj naredbe (npr. <h1>) • Naredbe obično idu u parovima, odnosno svaka naredba ima svoj početak (npr. <h1>) i kraj, koji se predstavlja slično, samo je dodat backslash (/) (npr. </h1>) • Neke naredbe nemaju para, kao što je <BGSOUND>, ali se mogu pisati kao <BGSOUND/> • Tekst predstavlja sve ono što je ispisano između početne i krajnje naredbe, a to mogu biti i slike, video zapis, ...

  6. HTML • <!DOCTYPE> • Svaka strana HTML dokumenta počinje oznakom tipa dokumenta koja daje instrukcije browser-u u kojoj je verziji HTML strana pisana <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • Znak ! – navedena naredba je samo komentar • U daljem HTML tekstu postoji određen red kako se pišu naredbe • Web pretraživač ne pravi razliku između malih i velikih slova(HTML nije key sensitive) <tag><TaG><TAG> • Svaki tag je moguće opisati svim atributima koje podržava <TAG atribut1 atribut2 atribut3></TAG>

  7. HTML • Izgled prazne strane: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN“"http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

  8. HTML – osnovni elementi strukture • <HTML>... </HTML> • Početak i kraj HTML dokumenta • Pre početka može jedino stajati tip dokumenta • Posle kraja dokumenta ne sme stajati ni jedna naredba • Između njih je ostatak dokumenta <!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”> <HTML > Ovde se nalazi ostatak dokumenta, celokupan izgled </HTML>

  9. HTML – osnovni elementi strukture • <HEAD>... </HEAD> • Početak i kraj zaglavlja • Zaglavlje je skup informacija o dokumentu • Te informacije ne utiču na sadržaj HTML dokumenta, ali daju važne informacije www čitaču • Unutar njega se mogu nalaziti sledeći tagovi • <TITLE>... </TITLE> • Određuje naslov dokumenta; ispisuje se kao labela na tabu koji prikazuje sadržaj dokumenta <HEAD> <TITLE>Ovo je naslov sranice</TITLE> </HEAD>

  10. HTML – osnovni elementi strukture • <HEAD>... </HEAD> • <STYLE>…</STYLE> • Definiše informacije o stilu koji je upotrebljen na stranici <style type="text/css"> h1 {color:red;} p {color:blue;} </style> • Atributi: • MEDIA – za koji medijum (uređaj) je CSS stil optimizovan (all, aural, braille, handheld, projection, print, screen, ttz, tv) • SCOPED – da se stil odnosi samo na parent i child stranu trenutne strane (boolean element) • TYPE – tip korišćenog stila

  11. HTML – osnovni elementi strukture • <HEAD>... </HEAD> • <BASE> • Definiše osnovni URL za koji je trenutna strana vezana <base href="http://www.w3schools.com/images/" target="_blank"> • Atributi: • HREF – definiše bazni URL (web adresa) • TARGET – tab u kom će se otvoriti pokrenuti link (_blank, _parent, _self, _top) • <LINK> • Definiše vezu sa nekim spoljnim dokumentom (ka CSS stilu najčešće) <link rel="stylesheet" type="text/css" href="theme.css"> • Atributi: • HREF– lokaciju na koju se vezuje (URL) • REL – tip veze između trenutnog dokumenta i stila za koji se vezuje (stylesheet, ...) • TYPE – tip dokumenta za koji se vezuje (text, CSS)

  12. HTML – osnovni elementi strukture • <HEAD>... </HEAD> • <META> • Pruža informacije o strani. Koristi se za opis strane, ključne reči autora strane, informacije o poslednjoj modifikaciji, ... <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="StåleRefsnes"> <meta charset="UTF-8"> • <SCRIPT> • Opisuje skriptu korišćenu na strani, kao što je JavaScript <script>document.write("Hello World!")</script> <script type="text/javascript">...</script> • Atributi: • SRC – putanju ka spoljnom JavaScript dokumentu (URL) • TYPE – tip skripte (javaScript)

  13. HTML – osnovni elementi strukture • <BODY>... </BODY> • Početak i kraj tela dokumenta. Sadrži sve HTML elemente koji kontrolišu izgled strane <BODY> Celokupan sadržaj dokumenta ide ovde </BODY> • Atributi: • BACKGROUND– slika kao pozadina dokumenta(URL) <BODY BACKGROUND=“picture.jpg”></BODY> • BGCOLOR- kao pozadina se postavlja određena boja(naziv boje, #rrggbb) • TEXT- boja celokupnog teksta (naziv boje, #rrggbb) • LINK, VLINK i ALINK – kontrolišu boje neposećenog, posećenog i aktivnog linka (naziv boje, #rrggbb), #0000ff #800080 #ff0000 • LEFTMARGIN, TOPMARGIN – podešavanje margina u pikselimaili u drugim jedinicama, ako se tako navede u opisu (%, em)

  14. HTML – formatiranje blokova teksta • <H1>... </H1> • Za formatiranje naslova teksta. Postoji 6 nivoa naslova, od kojih je 1. nivo najviši: <H1>... </H1>, <H2>... </H2>, <H3>... </H3>, <H4>... </H4>, <H5>... </H5>, <H6>... </H6> <H1>Ovo je naslov prvog nivoa </H1> • Atributi: • ALIGN – poravnanje, koristi se do HTML4 (left,center, right, justify) • <P>... </P> • Specificira da se tekst posmatra kao poseban paragraf (pasus). Čitač automatski dodaje margine pre i posle teksta paragrafa <P>Tekst paragrafa </P> • Atributi: • ALIGN– poravnanje (left, right, center, justify)

  15. HTML – formatiranje blokova teksta • <ADDRESS> … </ADDRESS> • Formatira adresu za prikaz. Implicira i na razdvajanje paragrafa (naredba <BR/>break) <address>Sajt napravila<a href="mailto:djudju84@gmail.com">Jelena</a>.<br> Posetite nas:<br>Adresa<br></address> • <HR> • Prikazuje horizontalnu liniju (engleski horizontal rule); koristi se za odvajanje delova teksta (<HR/>) • Atributi: • SIZE – debljina lnije u pikselima (broj) • WIDTH – širina linije u pikselima ili procentima (broj) • ALIGN – poravnanje (left, center, right) • NOSHADE – bez senke • COLOR – boja (naziv, #rrggbb)

  16. HTML – formatiranje blokova teksta • <BR> • Prelamanje reda. Nova linija se pozicionira kao i ona koju smo prekinuli. Koristi se npr. kada se kuca tekst pesme (kada nije potreban veliki razmak između redovakakav tag <P>pravi) <P>Ružo moja bela <BR/>Al’ si mi crvena... <BR/>Volim te što si plava <BR/>K’o zelena trava!</P> • <BLOCKQUOTE> … </ BLOCKQUOTE > • Služi za citiranje teksta iz drugog izvora (druge strane). Obično je tekst uvučen. <blockquote cite="http://www.b92.net/sport.html">...</blockquote> • Atributi: • CITE – izvor citata (URL)

  17. HTML – formatiranje blokova teksta • <FONT> … </FONT> • Postavlja veličinu, tip i boju fonta. Ne koristi se u HTML5, potpuno je prebačen opis na CSS. • Atributi: (prva 3 do HTML4, ostalo za CSS) • COLOR – boja (naziv boje, #rrggbb) • FACE – tip fonta (Arial, ComicSansMS, ...) • SIZE – veličina; osnovna veličina je 3, a može biti od 1 do 7 ili se je navesti u pointima pt (broj od 1 do 7, +broj za relativno određivanje, broj sa naznakom pt) • CLASS – ime klase (ime) • DIR – smer teksta (rtl, ltr) • ID – jedinstveni ID stil (ime) • LANG – kod jezika (kod) • STYLE – vrsta stila (definicija stila) • TITLE – dodatne informacije o elementu (tekst)

  18. HTML – formatiranje blokova teksta • <DIV> … </DIV> • Definiše odeljak teksta. Koristi se za grupisanje blokova teksta koji se definišu CSS-om. <div style="color:#0000FF"><h3>Neki naslov</h3></div> • Atributi: (ne koriste se u HTML5) • ALIGN – poravnanje (left, right, center, justify) • <MARQUEE> … </MARQUEE> • Skrolujući pokretni tekst. Zastareo element. • Atributi: • BEHAVIOR – kako će se tekst prikazivati (scroll, slide, alternate) • HSPACE – leva i desna margina (broj) • LOOP – koliko se puta tekst u traci ponavlja (broj, infinity) • SCROLLAMOUNT – razmak između dve pojave teksta (broj, 50 je brzo) • SCROLLDELAY – u milisekundama na koliko se pojavljuje tekst (broj) • VSPACE – donja i gornja margina (broj)

  19. HTML – formatiranje blokova teksta • <DFN> … </DFN> • Služi za definiciju termina, npr. prvo pojavljivanje nekog teksta <DFN>Učenici odeljenja IV6 </DFN>su internet-zavisnici • <PRE> … </PRE> • Preformatiran tekst, neproporcionalnog fonta (uglavnom Courier font, kao pisaćom mašinom)

More Related