Upload
evangeline-kline
View
93
Download
6
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
Web dizajnIV godina
Informatički smer
HTMLHTML – Hypertext Markup LanguageSvrha 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
HTML
HTML
HTMLHTML 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, ...
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 komentarU daljem HTML tekstu postoji određen red kako se
pišu naredbeWeb 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>
HTMLIzgled 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>
HTML – osnovni elementi strukture<HTML> ... </HTML>
Početak i kraj HTML dokumentaPre početka može jedino stajati tip dokumentaPosle kraja dokumenta ne sme stajati ni jedna
naredbaIzmeđu njih je ostatak dokumenta
<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”><HTML >Ovde se nalazi ostatak dokumenta, celokupan izgled</HTML>
HTML – osnovni elementi strukture<HEAD> ... </HEAD>
Početak i kraj zaglavljaZaglavlje je skup informacija o dokumentuTe informacije ne utiču na sadržaj HTML dokumenta,
ali daju važne informacije www čitačuUnutar 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>
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
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)
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åle Refsnes"><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)
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 pikselima ili u drugim jedinicama, ako se tako navede u opisu (%, em)
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)
HTML – formatiranje blokova teksta<ADDRESS> … </ADDRESS>
Formatira adresu za prikaz. Implicira i na razdvajanje paragrafa (naredba <BR/> break)
<address>Sajt napravila<a href="mailto:[email protected]">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)
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 redova kakav 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)
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, Comic Sans MS, ...) 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)
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)
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)