Page 1


TEHNIKE I ALATI WEB DIZAJNA (Osnove HTML-a)

Darko Denkovid


INTRO - Uvod u HTML - Kreiranje i publikovanje HTML stranice - Validacije dokumenata - Glavni HTML elementi - Elementi na nivou bloka u HTML-u - Elementi na nivou teksta u HTML-u - Kreiranje linkova (hypertext links) - Dodavanje slika dokumentu - Izgradnja tabela

World Wide Web (www) *Definicije - World Wide Web *Skup kompjutera na internet/u koji podržavaju HTTP *Nije odvojena mreža

- HTTP *HyperTekst Transfer Protocol *Jezik koji koriste WWW klijenti (Google Chrome,Opera,Internet Explorer,Firefox itd...) da zatraže dokumenta od WWW servera (tj. programa koji se izvršava na Web sajtu kao sto je amazon.com ili yahoo.com)

- HTML *HyperText Markup Language *Jezik kojim se dizajniraju web stranice


Internet i Web *Internet znači Inter-Network -Mreža mnogo LAN-ova (local-area networks) -LAN-ovi su različitih tipova

*Web – World Wide Web - Ogromna količina informacija u obliku hiperteksta (hypertext) i uskladištena na mnogim računarima koji su dio interneta

-Ova dva pojma su povezana ali nisu jednaka

Hyper Text Markup Language * Tekst je izmiješan sa “mark up“ tagovima - tagovi su zatvoreni parom zagrada <> - <H1> Introduction </H1>

* Šta opisuju "mark up" tagovi? - Izgled (Appearance) - Raspored (Layout) - Sadržaj (Nije uvijek moguće postići tačan izgled)


HTML Primjer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="images/style.css" /> <title>Bar</title> </head> <body> <div id="bg"><div id="sadrzaj"> <div id="toplinks"> <a href="index.html">Home</a> <a href="kultura.html">Kultura</a> <a href="smjestaj.html">Smještaj</a> <a href="turizam.html">Turizam</a> <a href="galerija.html">Galerija</a> <a href="onama.html">O nama </a> </div> <div id="zaglavlje"><div id="title"><a href="#">Prezentacija Bara </a></div> <div id="title_info"> <p><i>Saznajte novosti u Baru na: </i></p> <p><b><a href="http://www.barinfo.cg.yu/">www.barinfo.cg.yu</a></b></p></div> </div><div id="navigacija"><ul> <li><a href="index.html">Home</a></li> <li><a href="kultura.html">Kultura</a></li> <li><a href="smjestaj.html">Smještaj</a></li> <li><a href="turizam.html">Turizam</a></li> <li><a href="galerija.html">Galerija</a></li> <li><a href="onama.html">O nama </a></li> </ul></div><div id="clanci"> <h2><a href="#">O Baru </a></h2> <p><strong>Bar</strong> je primorski grad i luka na crnogorskoj obali južnog Jadrana, u neposrednoj blizini granice sa Albanijom. Poznat je kao ljetno kupalište sa ugodnim temperaturama tokom cijele godine i dugim, kilometarskim pješčanim plažama. <table width="361" height="122" border="0" align="center" cellspacing="10"><tr><td width="169"><div align="center"><a href="images/796pxBar_shopping_malls.jpg" target="_blank"><img src="images/796px-Bar_shopping_malls.jpg" alt="bar" width="153" height="136" /></a></div></td><td width="169"><div align="center"><a href="images/800px-Dvor_kralja_Nikole_Bar.jpg" target="_blank"><img src="images/800px-Dvor_kralja_Nikole_Bar.jpg" alt="bar" width="153" height="136" /></a></div></td> <td width="169"><div align="center"><a href="images/korzo1.jpg" target="_blank"><img src="images/korzo1.jpg" alt="bar" width="153" height="136" /></a> </div></td></tr></table> <strong>Bar</strong> je gradsko naselje u opštini Bar u Crnoj Gori</a>. Prema popisu iz 2003. bilo je 13719 stanovnika (prema popisu iz 1991. bilo je 10971 stanovnika). Luka Bar je najveća crnogorska . Bar je veza Crne Gore sa svijetom, jer je granična opština, koja je Jadranskim morem vezana sa Podgorice je udaljen 75km. Barska opština se nalazi na jugu Crne Gore, izeđu Jadranskog mora i Skadarskog jezera. Sam grad se nalazi na 42°6' geografske širine i 19°6' geografske dužine, na nadmorskoj visini od 4 metra.</p> </div></div></div> </body> </html>

Kreiranje i publikovanje HTML stranice 1. Kreirati HTML dokument (u tekstu editoru ili primjenom nekog od specijalizovanih programa) 2. Postaviti dokument u direktorijum koji je dostupan (često je to public_html ili www ) na sistemu koji izvršava HTTP – daemona 3.

Pristupiti stranici preko http://hostname/~username/filename *Na primjer: http://www.apl.jhu.edu/~lmb/test - Ako nema imena datoteke,često se podrazumijeva ime(najčešde: index.html) *Na primjer: http://www.apl.jhu.edu/~hall/ se odnosi na datateku index.html u hall-ovom public_html direktorijumu


Kreiranje i publikovanje HTML stranice – nastavak 4. Validacija dokumenta - Provjeriti sintaksu upotrebom formalnog -HTML validatora * http://validator.w3.org/ * http://www.htmlhelp.com/tools/validator/ - Verzija HTML u odnosu na koju se vrši validacija bazira se na DOCTYPE <!DOCTYPE HTML PUBLIK "-//W3C//DTD HTML 4.0 Transitional//EN"> - WWW Konzorcijum je 2001 dodao savjet da web stranice uključuju informaciju o skupu karaktera, iako je ASCII ili Latin1 podrazumijevan. Validator http://validator.w3.org/ daje upozorenje ako se to ne uradi

HTML Document Template <!DOCTYPE

HTML

PUBLIC

"-//W3C//DTD

HTML 4.0 Transitional//EN">

<HTML> <HEAD> <TITLE>Naslov</TITLE>

<---------- Naslov. Pojavljuje se na naslovnoj liniji vašeg internet browser-a. Nije uvijek vidljiv.

</HEAD> <BODY> <H1>Glavni naslov</H1>

<! --

<---------- Glavni naslov. Često se upotrebljava kao naslov internet strane. Prikazuje se unutar tijela vaše internet strane.

Ostatak strane ide ovdje -->

<----- HTML komentar. Zamjenjuje tijelo vaše internet starnice

</BODY> </HTML>


HTML struktura dokumenta

Glavni HTML elementi 1. 2. 3.

DOCTYPE HTML HEAD - TITLE element je obavezan - Opcioni elementi: -

BASE META BGSOUND SCRIPT, NOSCRIPT STYLE LINK


Glavni HTML elementi - nastavak 4.

BODY element - <BODY BGCOLOR ="YELOW"> - HTML Atributi i njihove vrijednosti * * * * *

5.

BACKGROUND BGCOLOR TEXT LINK, VLINK, ALINK Onload, OnUnload, OnFokus, OnBlur

Elementi unutar BODY elementa - <BODY> Ostali HTML elementi </BODY>

META element *Pamti informaciju o dokumentu, forward i refresh stranicama - NAME="author - NAME="keywords" - NAME="description" - HTTP - EQUIV="refresh"


META element, primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Naslov</TITLE> <META HTTP-EQUIV="REFRESH" CONTENT="3600"> </HEAD> <BODY> <H1

ALIGN="CENTER">glavni naslov</H1>

<H2>Vijesti</H2> Bla, bla,bla. <H2>Međunarodne vijesti</H2> Yadda, yadda, yadda. </BODY> </HTML>

META element, primjer ... <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1/> <meta http-equiv="description" content="The description of a web page cab be put here"/> </head> ...


Elementi na nivou bloka *

Headings - H1 ... H6 - ALIGN

*

Osnovne sekcije teksta (Text Sections) -P - ALIGN - PRE - WIDTH - ADDRESS - BLOCKQUOTE

Elementi na nivou bloka â&#x20AC;&#x201C; nastavak * Liste - OL - LI - UL - LI - DL - DT - DD * Ostalo - HR - DIV - CENTER


HTML Tag-ovi Table 2: HTML tags classification (2) Start tag Basic Tags

Purpose

NN

IE

DTD

<!DOCTYPE> <html> <body> <h1> to <h6> <p> <br> <hr> <!--...-->

Defines the document type Defines an html document Defines the body element Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

3.0 3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF STF STF

Char Format <b> <font> <i> <em> <big> <strong>

Defines bold text Deprecated. Defines text font, size, and color Defines italic text Defines emphasized text Defines big text Defines strong text

3.0 3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0

STF TF STF STF STF STF

HTML Tag-ovi <small> <sup> <sub> <bdo> <u>

Defines small text Defines superscripted text Defines subscripted text Defines the direction of text display Deprecated. Defines underlined text

3.0 3.0 3.0 6.2 3.0

3.0 3.0 3.0 5.0 3.0

STF STF STF STF TF

Output <pre> <code> <tt> <kbd> <var> <dfn> <samp> <xmp>

Defines preformatted text Defines computer code text Defines teletype text Defines keyboard text Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.0

STF STF STF STF STF STF STF

Blocks <acronym> <abbr>

Defines an acronym Defines an abbreviation

6.2 6.2

4.0

STF STF

3.0 3.0


HTML Tag-ovi <address> <blockquote> <menu> <q> <cite> <ins> <del> <s> <strike>

Defines an address element Defines a long quotation Deprecated. Defines centered text Defines a short quotation Defines a citation Defines inserted text Defines deleted text Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text

4.0 3.0 3.0 6.2 3.0 6.2 6.2 3.0 3.0

4.0 3.0 3.0 4.0 3.0 4.0 4.0 3.0 3.0

STF STF TF STF STF STF STF TF TF

<a> <link>

Defines an anchor Defines a resource reference

3.0 4.0

3.0 3.0

STF STF

Frames <frame> <frameset> <noframe> <iframe>

Defines a sub window Defines a set of frames Defines a noframe section Defines an inline sub window (frame)

3.0 3.0 3.0 6.0

3.0 3.0 3.0 4.0

F F TF TF

STF STF TF

Links

HTML Tag-ovi <dt> <dd> <menu>

Defines a definition term Defines a definition description Deprecated. Defines a menu list

3.0 3.0 3.0

3.0 3.0 3.0

Images <img> <map> <area>

Defines an image Defines an image map Defines an area inside an image map

3.0 3.0 3.0

3.0 3.0 3.0

Tables <table> <caption> <th> <tr> <td> <thead> <tbody> <tfoot> <col >

Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0 4.0 4.0 4.0 3.0

STF STF STF STF STF STF STF STF STF


HTML Tag-ovi <colgroup>

Defines groups of table columns

3.0

STF

Styles <style> <div> <span>

Defines a style definition Defines a section in a document Defines a section in a document

4.0 3.0 4.0

3.0 3.0 3.0

STF STF STF

Meta info <head> <title> <meta> <base> <basefont>

Defines information about the document Defines the document title Defines meta information Defines a base URL for all the links in a page Deprecated. Defines a base font

3.0 3.0 3.0 3.0 3.0

3.0 3.0 3.0 3.0 3.0

STF STF STF STF TF

Programming <script> <noscript> <applet> <object> <param>

Defines a script Defines a no script section Deprecated. Defines a applet Defines an embedded object Defines a parameter for an object

3.0 3.0 2.0

3.0 3.0 3.0 3.0 3.0

STF STF TF STF STF

3.0

Headings * Heading tipovi - <H1...>...</H1> - <H2...>...</H2> - <H3...>...</H3> - <H4...>...</H4> - <H5...>...</H5> - <H6...>...</H6> * Atributi: ALIGN - Vrijednosti: LEFT (default), RIGHT, CENTER * Ugnjezdeni tagovi - Headinzi i ostali elementi na nivou bloka mogu sadr탑ati elemente na nivou teksta, ali obrnuto nije mogude


Headings – primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> Vrste naslova</TITLE> </HEAD> <BODY> Primjeri 6 vrsta naslova (heading-a): <H1>Nivo - 1 (H1) </H1> <H2 ALIGN="CENTER">Nivo - 2 (H2) </H2> <H3><U> Nivo - 3 (H3) </U></H3> <H4 ALIGN="RIGHT">Nivo – 4 (H4) </H4> <H5> Nivo - 5 (H5) </H5> <H6> Nivo - 6 (H6) </H6> </BODY> </HTML>

Headings – rezultat


P – osnovni paragraf * Atributi: Align - LEFT (default), RIGHT, CENTER. Isto kao headings. - Bjeline se ignorišu (koristiti <BR> za line break) * Uzastopni <P>-ovi ne proizvode više praznih linija - Završni tag (End Tag) je opcionalan: <BODY> <P> Paragraph 1 </P> <P> Paragraph 2 </P> <P> Paragraph 3 </P> <BODY> Potpuno zadati

<BODY> Paragraph 1 <P> Paragraph 2 <P> Paragraph 3 <BODY> Ekvivalentno sa podrazumijevanim tagovima

Preformatirani paragrafi * PRE element - <PRE>...</PRE>

* Atributi: WIDTH - Očekuje širinu u karakterima Nije široko podržan

* Problem: Specijalni karakteri <PRE> if (a<b) { doThis(); } else { doThat(); } </PRE>

Željeni karakter < > & " Non-breaking a space

HTML oznaka &it; &gt; &amp; &quot; &nbs p


OL: Ordered (Numbered) Lists – Uređene liste * OL element - <OL> <LI>... <LI>... ... </OL> - Atributi: TYPE, START, COMPACT

* Elementi liste: LI - <LI...> ... </LI> (end tag opcionalan) - Atributi: (kad su unutar OL) VALUE, TYPE Primjer liste: <OL> <LI> Stavka 1 <LI> Stavka 2 <LI> Stavka 3 </OL>

Ugnježdene liste (Nested Ordered Lists) - primjer <OL TYPE="I"> <LI>Headings <LI>Basic Text Sections <LI>Lists <OL TYPE="A"> <LI>Ordered <OL TYPE="1"> <LI>The OL tag <OL TYPE="a"> <LI>TYPE <LI>START <LI>COMPACT </OL> <LI>The LI tag </OL> <LI>Unordered <OL TYPE="1"> <LI>The UL tag <LI>The LI tag </OL> <LI>Definition <OL TYPE="1"> <LI>The DL tag <LI>The DT tag <LI>The DD tag </OL> </OL> <LI>Miscellaneous </OL>


UL: Unordered (Bulleted) List – Neuređene liste * UL element - <UL> <LI>… <LI>… … </UL>

* Atributi: TYPE, COMPACT *

- TYPE je DISC, CIRCLE ili SQUARE ElementI liste: LI (TYPE) - TYPE je DISC, CIRCLE ili SQUARE Primjer liste: <UL> <LI> Stavka 1 <LI> Stavka 2 <LI> Stavka 3 </UL>

UL: Vrste oznaka (primjer) <LI>UL tag <UL TYPE="CIRCLE"> <LI>Tipovi <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>COMPACT </UL> <LI>LI tag <UL TYPE="CIRCLE"> <LI>Tipovi <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>VALUE </UL> </UL>


Elementi na nivou teksta * Stilovi fizičkih karaktera - B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK - FONT - SIZE - COLOR - FACE - BASEFONT - SIZE

* Stilovi logičkih karaktera - EM, STRONG, CODE, SAMP,KBD, DFN, VAR, CITE

Elementi na nivou teksta - nastavak * Hypertext linkovi -A *HREF, NAME, TARGET, ...

* Slike (Images) - IMG *SRC (obavezno), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP

* Osteli Text-Level elementi - BR (Eksplicitni prekid linije – line break) - AREA (Client – side image maps) - APPLET (Java) - ...


Stilovi fizičkih karaktera - primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> Stilovi fizikih karaktera</TITLE> </HEAD> <BODY> <H1> Stilovi fizikih karaktera </H1> <B>BOLD</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</u><br> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG<BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONTCOLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR> </BODY> </HTML>

Stilovi fizičkih karaktera - rezultat


Stilovi logičkih karaktera - primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> Stilovi logickih karaktera</TITLE> </HEAD> <BODY> <H1>Stilovi logickih karaktera</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized </STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE> Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM> </BODY> </HTML>

Stilovi logičkih karaktera - rezultat


Hypertext linkovi *Linkovi mogu sadrĹžati slike i ostale elemente na nivou teksta (na primjer: <A HREF...>...</A>)

*Link na apsolutni URL - Koristi se kompletan URL koji poÄ?inje sa http:// *Java is discussed in *<A HREF="http://host/path/chapter2.html"> *Chapter 2</A>

*Link na relativni URL - Koristi se ime datoteke ili relativna putanja do nje *Interpretira se u odnosu na lokaciju tekude datoteke *Java is discussed in *<A HREF="Chapter2.html">Chapter 2</A>.

Hypertext linkovi - nastavak

* Link na sekciju - Koristi se ime sekcije sa prefiksom # * Images are discussed in * <A HREF="#Section2">Section 2</A>.

* Link na sekciju u URL-u - Koristi se apsolutni i relativni URL, pa #, pa ime sekcije * Images are discussed in * <A HREF="chapter1.html#Section2"> * Sec. 2 of Chap. 1</A>.

* Imenovanje sekcije - Koristi se <A NAME="...">, bez znaka # * <H2><A NAME="Section2">Images</A></H2>


Link na apsolutni URL – primjer

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> Hipertekst linkovi</TITLE> </HEAD> <BODY> <H1>Ukoliko želite da otvorite google kliknite <A HREF="http://www.google.com">ovdje</A></H1> </BODY> </HTML>

Link na apsolutni URL – rezultat


Link na relativni URL – primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE>Prva strana</TITLE> </HEAD> <BODY> <H1>Prva strana</H1> <P>Ukoliko želite da otvorite drugu stranu kliknite <A HREF="druga.html">ovdje</A></P> </BODY> </HTML> <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE>Druga strana</TITLE> </HEAD> <BODY> <H1>Dobrodošli na drugu stranu </H1> </BODY> </HTML>

Link na relativni URL – rezultat


Link na sekciju – primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD> <TITLE> Hipertekst linkovi</TITLE> </HEAD> <BODY> <H1>Sekcija 1</H1> <P>Ukoliko želite da pristupite Sekciji 2 kliknite <A HREF="#sekcija2">ovdje</A></P> <P>Tekst sekcije 1 </P> <P>Tekst sekcije 1</P> <P>Tekst sekcije 1</P> ……… <P>Tekst sekcije 1</P> <H1><A NAME="sekcija2">Sekcija 2</A></H1> <P>Tekst sekcije 2</P> <P>Tekst sekcije 2</P> </BODY> </HTML>

Link na sekciju – rezultat


IMG: Umetanje slika *Primjer <IMG SRC="SomeFile.gif" ALT="My Dog" WIDTH=400 HEIGHT=300>

*Atributi: - SRC (obavezan) - ALT (tehnički obavezan) - ALIGN (pogledati <BR CLEAR="ALL">) - WIDTH, HEIGHT - HSPACE, VSPACE - BORDER - USEMAP, ISMAP

Poravnavanje slike, primjer <! DOCTYPE HTML PUBLIC "-//W3C//DTD// HTML 4.0 Transitional//EN"> <HTML> <HEAD><TITLE>Image Alignment</TITLE></HEAD> <BODY> <H1 ALIGN="CENTER">Image Alignment</H1> <TABLE BORDER=1> <TR><TH> Alignment <TH>Result <TR><TH><CODE>LEFT</CODE> <TD><IMG SRC="rude-pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT 77> This positions the image at the left side, with text flowing around it on the right. <TR><TH><CODE>RIGHT</CODE> <TD><IMG SRC="rude-pc.gif"ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT 77> This positions the image at the right side, with text flowing around it on the left. ... </TABLE> </BODY> </HTML>


Poravnavanje slike, rezultat

Tabele *Šablon <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD><TITLE>Tabele</TITLE></HEAD> <BODY> <H1>Tabele</H1> <TABLE BORDER=1><CAPTION>Naziv tabele</CAPTION> <TR><TH>Naslov1</TH> <TH>Naslov2</TH></TR> <TR><TD>Red1 Kolona1</TD> <TD>Red1 Kolona2</TD></TR> <TR><TD>Red2 Kolona1</TD> <TD>Red2 Kolona2</TD></TR> <TR><TD>Red3 Kolona1</TD> <TD>Red3 Kolona2</TD></TR> </TABLE> </BODY> </HTML>


Table – primjer … <table width="443" height="250" border="2px"> <tr align="center" height="21" bgcolor="#FFFF99"> <td width="31"><strong>uid</strong></td> <td width="91"><strong>name</strong></td> <td width="68"><strong>gender</strong></td> <td width="68"><strong>year</strong></td> <td width="50"><strong>rank</strong></td> <td width="119"><strong>percent</strong></td> </tr> <tr height="17" align="center"> <td width="31">1.</td> <td width="87">Jacob</td> <td width="64">m</td> <td width="64">2006</td> <td width="64">1</td> <td width="131">1.13%</td> </tr> …

Atributi elementa TABLE * ALIGN - ALIGN atribute daje horizontalno poravnavanje cijele tabele - Legalne vrijednosti su LEFT (default), RIGHT i CENTER * BORDER - Specificira širinu u pikselima granice tabele - Ovo se dodaje na granicu oko svake delije u tabeli (CELLSPACING)

* CELLSPACING - Prostor u pikselima između susjednih delija. Crta se kao 3D linija, ako je BORDER nenulta vrijednost, inače je prazni prostor u boji pozadine. - Default je najčešde 3


Atributi elementa TABLE - nastavak * CELLPADDING - CELLPADDING određuje prazan prostor u pikselima između granica delija i tabele - Default je obično 1

* WIDTH - Širina tabele, ili u pikselima (<TABLE WIDTH=250>) ili kao procenat trenutne širine prozora browsera (<TABLE WIDTH="75%">)

* BGCOLOR - Boja pozadine tabele TABLE (koristi se i za TR, TD, TH) * BORDERCOLOR, BORDERCOLORDARK, * BORDERCOLORLIGHT - Nestandardni atributi koje podržava IE za boju granica tabele

Atributi elementa TABLE - nastavak * BACKGROUND - Nestandarni atribut podržan od IE daje datoteku slike koja de "popločati" pozadinu slike

-

Može se koristiti style sheets umjesto ovog atributa

* RULES - HTML 4.0 atribut koji određuje koja je unutrašnja linija za podjelu crta - Sve se crtaju ako ovaj atribut nije naveden - Legalne vrijednosti su: NONE, ROWS, COLS i all * FRAME - Određuje koje de se spoljašnje granice crtati - Crtaju se sve 4 ako atribut nije naveden - Legalne vrijednosti su BORDER ili BOX (sve), VOID (nijedna), ABOVE (gornja), BELOW (donja), HSIDES (gornja i donja), VSIDES (lijeva i desna), LHS (lijeva) i RHS (desna)


Table CAPTION * Atribute - ALIGN (Vrijednosti : TOP, BOTTOM) * Upotreba - Odgovarajuda tabela bez granica (enclosing borderless table) daje vedu fleksibilnost od CAPTION. <CAPTION align="top">Naziv tabele</CAPTION>

<CAPTION align="bottom">Naziv tabele</CAPTION>

Red tabele - TR: Table Row * TR se koristi za definisanje svakog reda tabele * Svaki red sadrži TH i/ili TD elemente * ALIGN - ALIGN (vrijednosti LEFT, RIGHT ili CENTER) se koristi za horizontalno poravnavanje delija tabele

* VALIGN - VALIGN (vrijednosti TOP, MIDDLE, ili BOTTOM) se koristi za vertikalno poravnavanje delija tabele

* BGCOLOR - Postavlja boju za red tabele, poništavajudi boju postavljenu za čitavu tabelu primjenom BGCOLOR atributa za TABLE

* BORDERCOLOR, BORDERCOLORDARK, * BORDERCOLORLIGHT - Podržava ih samo IE (zadaju boju granica redova)


Polja tabele - Table Cells: TH i TD * COLSPAN - COLSPAN definiše heading ili polje koje se prostire na više kolona <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN> <HTML> <HEAD><TITLE>Tabele</TITLE></HEAD> <BODY> <H1>Tabele</H1> <TABLE BORDER=1> <TR><TH COLSPAN=2>Kolona 1 i 2 naslov <TH>Kolona 3 naslov <TR><TD>Kolona 1 <TD>Kolona 2 <TD>Kolona 3 </TABLE> </BODY> </HTML>

Polja tabele - Table Cells: TH i TD - nastavak * ROWSPAN - ROWSPAN definiše heading ili polje koje se prostire na više redova

* ALIGN - LEFT, RIGHT, CENTER, JUSTIFY i CHAR - Na primjer poravnavanje po decimalnoj tački <TD ALIGN="CHAR" CHAR=".">

* VALIGN - TOP, BOTTOM, MIDDLE * WIDTH, HEIGHT - Vrijednost u pikselima (procenti zvanično nijesu dozvoljeni) * NOWRAP - Koristiti pažljivo * BGCOLOR, BACKGROUND - Isto kao za TABLE i TR


DOM *HTML u stvari deklariše hijerarhiju (skup elemenata) koja čini našu web-stranicu *Drugi način da se konceptualizuje ova definicija je kroz DOM

DOM *DOM predstavlja stranicu definisanu pomodu HTML-a kao hijerarhiju objekata

*DOM elementi formiraju strukture drveta (tree strukture), gdje neki elementi sadrže neke druge elemente kao svoju djecu

*Čvorovi drveta omogudavaju da se web-stranicom može manipulisati programski i dinamički


Alati *DOM Inspector - Dodatak koji omogudava da posmatrate stranicu kao hijerarhiju DOM objekata - Izuzetno koristan za vizuelizaciju kad je HTML struktuiran

*Firebug - Jedan od najpopularnijih alata - Daje mogudnost pregleda DOM objekata stranice, analize CSS nasljeđivanja i CSS svojstava, dibagovanje Java script koda, itd.

Na početku, HTML je bio sve A Snippet of Amazon.com code from 1999 <font face=verdana,arial,helvetica size="-2">Search of the Day: <nobr><a href="/exec/obidos/search-handle-url/index=blended&fieldkeywords=saffron/">saffron</a></nobr><font></TD> </TR> </TABLE>

Ovaj HTML služi za upravljanje: Sadržajem (Content) Strukturom dokumenta (Document Structure) Tekstom i vizuelnim stilom (Text and Visual Style) Izgledom (Layout - Whitespace, Visual Structure)


Moderni (X)HTML daje strukturu A Snippet of Modern Amazon.com code <div class="unified_widget blurb"><h2>Exercise Your Mind with Binary Time from The One</h2><div class="row"><div class="asinItem"><div class="prodImage"><a href="/gp/product/...">

Ovaj HTML služi za upravljanje: Sadržajem (Content) Strukturom dokumenta (Document Structure) Tekstom i vizuelnim stilom (Text and Visual Style) Izgledom (Layout - Whitespace, Visual Structure)

Izgledom i vizuelnim stilom bavi se CSS (Cascading Style Sheets) o čemu de biti riječi kasnije.

Moderni (X)HTML daje strukturu – nastavak

HTML služi kao struktura za sadržaj elemenata CSS dodaje vizuelni aspekt za pojedine tipove elemenata Ovo razdvajanje dozvoljava fleksibilniju kontrolu nad vizuelnim komponentama stranice i dozvoljava ponovnu upotrebu zajedničkih i uobičajenih šablona. Takođe, HTML kod je jasniji i čitljiviji


Moderni (X)HTML daje strukturu – nastavak

HTML je struktura i sadržaj, a nije stil (style) Struktura se najčešde razbija na elemente primjenom više tagova <div> -

<div class="classname"></div> -Kreira kontejnere (containers) za sadržaj -Dodati klase za kontejnere tako da se mogu primjeniti stilovi

Primjer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Div-ovi</title> <link href="_css/main_layout.css" rel="stylesheet" type="text/css" media="screen, projection" /> </head> <body> <div id="okruzujuci"> <div id="zaglavlje">ZAGLAVLJE</div> <div id="glavni">GLAVNI</div> <div id="podnozje">PODNOZJE</div> OKRUZUJUCI</div> </body> </html>


Primjer - nastavak

Napomena: izgled i veličina div-ova je definisana u posebnom css fajlu o čemu de biti riječi u nastavku.

HTML okviri

HTML frames


Prednosti okvira Određeni djelovi interfejsa (npr. sadržaj) treba da budu uvijek na ekranu Može se izbjedi ponavljanje opštih sekcija na više stranica Konzistentna upotreba na velikim sajtovima može pojednostaviti navigaciju Pogodan način miješanja tekst-orijentisanog HTML-a sa Java apletima Image maps su zgodnije za upotrebu ako slika ostaje na ekranu a mijenja se samo rezultujuda sekcija

Nedostaci okvira Značenja "Back" i "Forward" su zbunjujuda Slabo dizajnirani okviri zbunjuju korisnike Teško je pronadi stvarni URL potrebne stranice - Problemi pri štampanju! Teško je napraviti "bookmark" Neki stariji browseri ne podržavaju okvire Sigurnost - security -

Hakeri mogu umetnuti frame polja u vašu stranicu pod određenim uslovima, uz mogudnost krađe informacija namijenjenih vašem sajtu


Frame Template <! DOCTYPE

HTML

PUBLIC

"-//W3C/DTD

HTML

4.0

Frameset//EN">

<HTML> <HEAD><TITLE>Document

Title</TITLE></HEAD>

<FRAMESET ...> <!—frame And Nested FRAMESET Entries --> <NOFRAMES> <BODY> < !-- Stuff for non-frames browsers --> </BODY> </NOFRAMES> </FRAMESET> </HTML>

FRAMESET atributi COLS,ROWS - Lista piksel vrijednosti, procenata i ostataka (weighted remainders) razdvojena zarezima

-

FRAMESET uvijek mor zadati najmanje dvije vrste ili kolone. Netscape ima probleme ako to nije slučaj!

-

Primjeri:

<FRAMESET COLS="25%, * , *"> ... </ FRAMESET>

<FRAMESET ROWS="50 , 10% , * , 2*"> ... </ FRAMESET>


FRAMESET ROWS - Primjer

<FRAMESET ROWS="50 , 10% , * , 2* "> . . . </FRAMESET>

FRAMESET atributi – nastavak FRAMEBORDER -

Da li se prikazuje granica između okvira YES ili 1 zadaje granicu; NO ili 0 - bez granice Može se poništiti (overridden) postavljanjem vrijednosti FRAMEBORDER u individualnom FRAME-u Često se koristi u sprezi sa BORDER=0 i FRAMESPACING=0

BORDER (Netscape), FRAMESPACING (IE) -

Zadaje debljinu granice između polja Primjenjuje se samo na "outermost" FRAMESET

BORDERCOLOR -

Postavlja boju granice između polja, preko hex RGB vrijednosti ili naziva boje


Frame Border - primjeri

FRAME: Zadavanje sadržaja SRC - URL dokumenta koji se smješta u polje frame-a NAME -

Daje ime odredišta za TARGET atribut hypertext linka

FRAME BORDER, BORDERCOLOR MARGINWIDTH, MARGINHEIGHT - Zadaje left/right i top/bottom margine SCROLLING -

Da li polje okvira ima scrollbar-ove

NORESIZE - Veličina polja se ne može mijenjati (no resize)


Frame – primjer 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <HTML> <HEAD><TITLE>Frame Example 1</TITLE></HEAD> <FRAMESET ROWS="55% , 45%"> <FRAMESET COLL="*,*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET>

4.0

Frameset//EN">

<FRAMESET COLL="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">non-frames Version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>

Frame – primjer 1 – rezultat


Frame – primjer 2 <! DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD><TITLE>Frame Example 2</TITLE></HEAD> <FRAMESET COLLS="55% , 45%"> <FRAMESET ROWS="*,*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <FRAMESET ROWS="*,*"> <FRAME SRC="Frame-Cell.html"> <FRAME SRC="Frame-Cell.html"> </FRAMESET> <NOFRAMES> <BODY> Your browser does not support frames. Please see <A HREF="Frame-Cell.html">non-frames Version</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>

Frame - primjer 2 - rezultat


Pristup poljima Zadaje polje (frame) u koje se smješta stranica referencirana kroz hyperlink

NAME atribut FRAME-a <FRAME SRC=". . ." NAME="cellName">

TARGET atribut A HREF-a <A HREF=". . ." TARGET="cellName">

Primjer


Cold – Fusion.html <! DOCTYPE HTML PUBLICC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> <TITLE>Investing in Cold Fusion</TITLE> </HEAD> <FRAMESET ROWS="75 , * "> <FRAME SRC="TOC.html" NAME="Main"> <NOFRAMES> <BODY> This page requires Frames. For a non-Frames Version, <A HREF="Introduction.html">the introduction</A>. </BODY> </NOFRAMES> </FRAMESET> </HTML>

TOC.html <! DOCTYPE HTML PUBLICC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Table of Contents</TITLE> </HEAD> <BODY> <TABLE WIDTH="100%"> <TR><TH><A HREF="Introduction.html" TARGET="Main"> Introduction</a></TH> <TH><A HREF="Potential.html" TARGET="Main"> Potential</A></TH> <TH><A HREF="Investing.html" TARGET="Main"> Investing</A></TH> <TH><A HREF="References.html" TARGET="Main"> References</A></TH> </TR> </TABLE> </BODY> </HTML>


Primjer - rezultat

Predefinisana Frame imena _blank -

UÄ?itava dokument u novi browser prozor

_top -

Povezani dokument de zauzeti cijeli prozor browser-a Dokument nede biti u polju

_parent -

Postavlja dokument u neposrednog FRAMESET roditelja Isto kao "_top" ako nema ugnjezdenih okvira

_self -

Postavlja dokument u tekude polje Neophodno samo za prepravljanje (override) BASE pozicije


Pregled DOCTYPE je obavezan za validaciju dokumenta HTML dokument mora imati zatvoren HTML element, HEAD (TITLE je obavezan) i BODY Dokumenti su sastavljeni od block-level i text-level elemenata Hypertext linkovi <A HREF="...">, -mogu biti apsolutni ili relativni - Link na imenovanu sekciju oznaÄ?ava se sa #section Tabele se kreiraju od glavnog elementa, <TABLE>; redova, <TR>; headera tabela, <TH>; i podataka tabele, <TD> - BGCOLOR daje pozadinsku boju tabelama, redova i polja - Koriste se ROWSPAN ili COLSPAN za spajanje polja

Pregled Frame-ovi zahtijevaju Frameset DOCTYPE za validaciju FRAMESET moĹže biti podijeljen na kolone ili redove - Za kreiranje redova i kolona treba koristiti ugnjezdene (nested) FRAMESET-ove

Dajudi naziv FRAME-u, dokumenti mogu biti prikazani u imenovanom polju - <FRAME ... NAME="..."> - <A HREF="..." TARGET="..."> Postoje 4 predefinisana naziva: - _blank, _top, _parent, and _self


Cascading Style Sheets

Šta su Style Sheets Način da se odvoji formatiranje dokumenta od HTML MARKUP elemenata Način centralizovanog upravljanja izgledom (stilom) cjelokupnog sajta Način kreiranja layout-a web stranica bez komplikovanih tabela i trikova Način da korisnik preuzme kontrolu nad prikazom stranice


Šta su Style Sheets Database-driven web sajtovi zahtijevaju da sadržaj bude odvojen od stila. Veliki sajtovi izvlače korist od centralizovanog ili korporativnog stila, koji može biti primijenjen svuda.

10,000 stranica

Šta su Style Sheets


Korist od CSS-a Modan i fleksibilan način zadavanja formata HTML elemenata - Možemo definisati font, size, boju pozadine (background color), sliku pozadine (background image), margine, itd. Možemo dijeliti stilove (style sheets) za više dokumenata ili čitav sajt Može se zadati definicija klase za stil i faktički definisati novi HTML dokument Pravila se primjenjuju u hijerarhijskom maniru (precedence rules)

CSS specifikacije Prikazani su samo neki stilovi, ostale možemo nadi na: Zvanični sajt: www.w3.org/Style/CSS/ CSS1 http://www.w3.org/TR/REC-CSS1 CSS2 http://www.w3.org/TR/REC-CSS2 Validator za CSS: http://jigsaw.w3.org/css-validator/ tutorial: www.w3schools.com/


Zadavanje pravila Opšti oblik pravila selector

{

property:

value

}

ili selector { property1: value1; property2: value2; ... propertyN: valueN }

Primjer H1 { text-align: center; color: blue }

Anatomija pravila


Tipovi stilova (Style Sheets) Svaki ima manji opseg (scope) â&#x20AC;Ś

Eksterni Style Sheets


Eksterni Style Sheets - rezultat

Embedded Style Sheets


Inline Style Sheets

Pozivanje Style Sheets Link ( u <HEAD>) o <link rel=“stylesheet” href=“style.css” type=“text/css”>

Embedded ( u <HEAD>) o <style> h1 {color: #FFFFFF;} </style>

Inline ( u tag – u) o <p style=“color: #FFFFFF”></p>


Fizzics1.html -primjer (bez style sheet-a) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>. ... </BODY> </HTML>

Fizzics1.html - rezultat (bez style sheet-a)


Fizzics2.html - primjer (bez style sheet-a) Informacija o stilu <HEAD> <TITLE>Document Title</TITLE> <STYLE TYPE="text/css"> <!-BODY { background: URL(images/confetti-background.jpg) } H1 { text-align: center; font-family: Blackout } H2 { font-family: MeppDisplayShadow } STRONG { text-decoration: underline } --> </STYLE> </HEAD>

Fizzics2.html - rezultat (sa style sheet-om)


Eksterni style sheet-ovi Zadaje se link na eksterni style-sheet u HEAD sekciji HTML dokumenta <LINK REL=STYLESHEET HREF="Sitestyle.css" // Absolute or relative link TYPE="text/css">

Sitestyle.css /* Example of an external style sheet */ H1 { text-align: center; font-family: Arial } H2 { color: #440000; text-align: center; font-family: Arial Black, Arial, Helvetica, sans-serif } â&#x20AC;Ś

Inline specifikacija styla Koristi se STYLE atribut definisan za svaki HTML document da bi se direktno zadao stil Primjer ... <H1>New Advances in Physics</H1> <P STYLE="margin-left: 0.5in; margin-right: 0.5in; font-style: italic"> This paper gives the solution to three previously unsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine. ...


Definisanje stil klase Za definisanje stil-klase elementa, dodati tačku i ime klase HTML elementu // Define an "abstract" paragraph type P.abstract { margin-left: 0.5in; margin-right: 0.5in; font-style: italic }

Korišdenje: (primjer) - zadati ime stil klase u CLASS atributu HTML elementa <H1>New Advances in Physics</H1> <P CLASS="abstract"> This paper gives the solution to three previously unsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.

Definisanje stil klase Definisanje global stil-klase – izbaciti ime elementa // Style available to all elements .blue { color: blue; font-weight: bold }

Korišdenje: zadaje se ime stil klase u CLASS atributu HTML elementa <H2 CLASS="blue">A Blue Heading</H2> <!-- Apply to a section of text --> This text is in the default color, but <SPAN CLASS="blue">this text is blue.</SPAN>


Definisanje stila kroz korisnički definisane ID ID je kao klasa, ali se može primjeniti samo jednom u documentu <HEAD> <TITLE>...</TITLE> <STYLE TYPE="text/css"> <!-#foo { color: red } --> </STYLE> </HEAD> <BODY> ... <P ID="foo"> ... </BODY>

Style Sheet Precedence Rules 1 Pravilo označeno sa “important” ima najvedi prioritet (rijetko se koristi) H1 ( color: black ! important; Font-family: sans-serif ) <H1> New Advances in Physics</H1>

2 Autorova pravila imaju prioritet u odnosu na pravila “čitaoca” Style sheet pravila poništavaju (“override”) podešavanja browsera


Style Sheet Precedence Rules – nastavak 3

Specifičnija pravila imaju prioritet nad manje specifičnim pravilima #foo { ... }

// ID selector highest priority

P.big H1 { ... }

// Class higher over element

P STRONG { ... }

// Two tags higher than single tag

STRONG { ... }

4

U slučaju istog prioriteta, prednost ima posljednje pravilo

Osobine fonta

Font - weight -

Relativna težina (boldness) fonta normal | lighter| bold| bolder| 100|200| . . . | 900 H1 { font-weight : 200 } H2 { font-weight : bolder }

Font - style - Tip fonta normal | italic| oblique P { font-style : normal } TH { font-sytle : italic }


Osobine fonta - nastavak Font-size - Relativne ili apsolutne veličine slova - pt, pc, in, cm, mm | em, ex, px, % | - xx-large | x-large | large | medium | small | x-small | xx-small | smaller | larger STRONG { font-size: 150% } P { font-size: 14pt } P { font-size: xx-large }

Font-family “Typeface family za font

H1 { font-family: Arial }

Osobine fonta - nastavak CampBearClaw.html - primjer Font-size <!DOCTYPE HTML PUBLIC ili"-//W3C//DTD HTMLslova 4.0 Transitional//EN"> - Relativne apsolutne veličine <HTML> - pt, pc, in, cm, mm / em, ex, px, % / <HEAD> <TITLE>Camp Bear Claw</TITLE> - xx-large / x-large / large / medium / small / x-small /

<LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css” /> xx-small / smaller / larger </HEAD> <BODY> <H1>Camp Bear Claw</H1> STRONG (font-size: 150% ) We have the following activities: P ( font-size: 14pt ) <H2 CLASS="archery">Archery</H2> P ( font-size: xx-large ) <H2 CLASS="arts">Arts and Crafts</H2> Font-family <H2 CLASS="horseback">Horseback Riding</H2> <H2 CLASS="hiking">Hiking</H2> “Typeface family za font <H2 CLASS="campfire">Campfire Song Times</H2> <H2 CLASS="java">Java Programming</H2> H1 ( font-family: Arial ) </BODY> </HTML>


CampBearClaw.css

H1 { text-align: center; font-family: Funstuff } H2.archery { font-family: ArcheryDisplay } H2.arts { font-family: ClampettsDisplay } H2.horseback { font-family: Rodeo } H2.hiking { font-family: SnowtopCaps } H2.campfire { font-family: Music Hall } H2.java { font-family: Digiface }

CampBearClaw.html - rezultat


Svojstva Text-a Text-decoration -

Opisuje dodatke tekstu ili "dekoracije" teksta none | underline | overline | line-through | blink P { text-decoration: underline }

vertical-align STRONG -

Kako se elementi pozicioniraju po vertikali top | bottom | baseline | middle | sub | super | text-top | text-bottom | %

text-align -

Kako se elementi pozicioniraju po horizontali left | right | center | justify

Svojstva Text-a - nastavak text-indent - Zadaje uvlačenje (indentation) prve linije paragrafa - +/- pt, pc, in, cm, mm | +/- em, ex, px, % P { text-indent: -25px } /* Hanging indent */

line- height - zadaje rastojanje između dvije uzastopne base linije u paragrafu

- normal | number | pt, pc, in, cm, mm | em, ex, px, % .double { line-height: 200% } .triple { line-height: 3 } /* 3x the font size */ DIV { line-height: 1.5em }


Bates.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>An Open Letter to the IRS</TITLE> <LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/cssâ&#x20AC;&#x153; /> </HEAD> <BODY BACKGROUND="images/bond-paper.jpg"> <P CLASS="rhead"> April 1, 2001 <HR> <P CLASS="rhead"> William A. Bates<BR> Macrosoft Corporation<BR> Blumond, WA 12345 <P CLASS="lhead"> Internal Revenue Service<BR> Philadelphia, PA 67890 <P> <BR> Dear Sirs, <P CLASS="body"> I am writing to inform you that, due to financial difficulties, ...

Bates.css

P { margin-top: 5px } P.rhead { text-align: right; margin-right: 0.5in; font-family: sans-serif } P.lhead { font-family: sans-serif } P.body { text-align: justify; text-indent: 0.5in } P.foot { margin-left: 60%; line-height: 300% }


Bates.html - rezultat

Foreground i Background svojstva Color - Boja teksta ili foreground boja - Color name | #RRGGBB | #RGB | rgb( rrr, ggg, bbb) | rgb( rrr%, ggg%, bbb%) P { color : blue } H1 { color : #00AABB } H3 { color : rgb(255, 0, 0 ) } /* red */

background-image - none | url( filename) - zadaje se slika koja de se koristiti kao pozadina (background) oblast H2 { background-image: url(Bluedrop.gif);}


Foreground i Background svojstva - nastavak

background-repeat - zadaje naÄ?in pokrivanja oblasti pomodu slike (tile) - repeat | repeat-x | repeat-y | norepeat BODY { background-image: url(Bluedot.gif); background-repeat: repeat-x; }

background - Kombinacija prethodnih svojstava P { background: url(wallpaper.jpg) repeat-x }

Cabinets.html - primjer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Joe's Cabinets</TITLE> <LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css"> </HEAD> <BODY> <CENTER> <TABLE WIDTH=360 HEIGHT=199> <TR><TD ALIGN="CENTER" CLASS="banner">Joe's Cabinets </TABLE> </CENTER> <P> Welcome to Joe's Cabinets. We specialize in <UL> <LI>Custom Cabinets <LI>Kitchen Remodeling <!-- Etc --> </UL> <!-- Etc --> </BODY> </HTML>


Cabinets.css

.banner { background: url(images/boards.jpg) repeat-x; font-size: 50pt; font-family: Arial Rounded MT Bold }

Cabinets.html - rezultat


Svojstva Bounding Box-a CSS pretpostavlja das u svi elementi u jednom ili više pravougaonih regiona (bounding box) Stil može zadati margine, granice i popunjavanje (padding) bounding box-a P { margin: 0.25in; border: 0.25in solid black; padding: 0.25in; background: URL(images/bond-paper.jpg) }

Bounding Box


Slike i plutajudi (floating) elementi width, height - Zadaje fiksiranu veličinu elementa (obično u slici) - auto | pt, pc, in, cm, mm | em, ex, px IMG.bullet { width: 50px; height: 50px }

float - Ovo svojstvo dopušta da elementi plutaju do lijeve ili desne margine gdje se dešava “wrapping” teksta

- none | left | right

Psalm23.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>The 23rd Psalm</TITLE> <STYLE> <!-SPAN { float: left; font-family: "Cushing Book"; font-size: 75pt } --> </STYLE> </HEAD> <BODY> <H2 ALIGN="CENTER"> The 23rd Psalm (King James Version)</H2> <SPAN>T</SPAN>he LORD is my shepherd; I shall not want. He maketh me to lie down in green pastures: he leadeth me beside the still waters. He restoreth my soul: he leadeth me in the paths of righteousness for his name's sake. Yea,


Psalm23.html - rezultat

Float svojstvo može se iskoristiti za implementaciju “drop caps”

Efekat preloma paragrafa (primjer,nastavak)


Zadavanje nivoa sa Style Sheet

Style sheet daje alternativu LAYER i ILAYER elementima - Style sheet nivoi su podržani od Netscape-a i IE-a - Međutim, Netscape nivoi su kompletniji -Nema stila koji je ekvivalentan sa PAGEX i PAGEY za pozicioniranje

Problem -

Netscape i IE koriste različite modele objekata za referenciranje

-

http-://www.stopbadtherapy.com/standars.shtml kako kreirati cross-browser slojeve

-

Kreiranje Style Sheet sloja Koristimo ID tag format za definisanje stila #layer1 { position: absolute; left: 50px; top: 75px; ... }

Definišemo sloj pomodu DIV ili SPAN elemenata <SPAN ID="layer1"> ... </SPAN> <DIV ID="layer2"> ... </DIV>


Svojstva Layer-a

left, top - Zadaje left i top position - Opisuje kako je pozicija definisana u roditeljskom prozoru

- absolute,relative, static visibility - Da li je sloj vidljiv ili ne - visible, hidden, inherit

DinamiÄ?ka promjena vidljivosti sloja â&#x20AC;&#x201C; primjer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Changing Visibility Dynamically</TITLE> <STYLE> <!-#layer1 { position: absolute; left: 0.25in; top: 1.5in; color: black; background-color: #F5DEB3; visibility: hidden } #layer2 { position: absolute; left: 0.25in; top: 1.5in; color: #F5DEB3; background-color: black; visibility: hidden } H1 { text-align: center; font-family: Arial } FORM { text-align: center } --> </STYLE> ...


Dinamička promjena vidljivosti sloja – primjer <SCRIPT TYPE="text/javascript"> <!-function display(value1, value2){ if(document.layers) { // Test for Netscape. document.layers.layer1.visibility = value1; document.layers.layer2.visibility = value2; } else { document.all.layer1.style.visibility = value1; document.all.layer2.style.visibility = value2; } } //--> </SCRIPT> </HEAD> <BODY BGCOLOR="WHITE"> <H1>Changing Visibility Dynamically</H1> <FORM> <INPUT TYPE="BUTTON" VALUE="Show Layer1" onClick="display('visible', 'hidden')"> <INPUT TYPE="BUTTON" VALUE="Show Layer2" onClick="display('hidden', 'visible')"> </FORM> ...

Dinamička promjena vidljivosti sloja - primjer ... <DIV ID="layer1"> <H1>This is layer1.</H1> </DIV> <DIV ID="layer2"> <H1>This is layer2.</H1> </DIV> </BODY> </HTML>


Dinamička promjena vidljivosti sloja - primjer

Dodatak: jedinice mjerenja

Unit cm em ex in mm pc pt px

Description Centimeters (absolute unit) The height of the current font (relative unit) The height of the letter “x” in the current font (relative unit) Inches (absolute unit) Millimeters (absolute unit) Picas; 6 picas per inch; 12 points per pica (absolute unit) Points; 72 points per inch (absolute unit) Pixels (relative unit)


Tehnike i alati web dizajna  
Tehnike i alati web dizajna  

Tehnike i alati web dizajna Osnove HTML-a

Advertisement