Web dizajn

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>


<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


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


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

Documents

Web dizajn