Tehnike i alati web dizajna

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/796px-Bar_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

http://hostname/~username/filename

http://www.apl.jhu.edu/~lmb/test

http://www.apl.jhu.edu/~hall/

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>

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

http://validator.w3.org/

http://www.htmlhelp.com/tools/validator/

http://validator.w3.org/

HTML struktura dokumenta

Glavni HTML elementi

1. DOCTYPE

2. HTML

3. 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 * BACKGROUND * BGCOLOR * TEXT * LINK, VLINK, ALINK * Onload, OnUnload, OnFokus, OnBlur

5. 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 – nastavak

* Liste - OL - LI - UL - LI - DL - DT - DD

* Ostalo - HR - DIV - CENTER

HTML Tag-ovi

Table 2: HTML tags classification (2)

Start tag Purpose NN IE DTD

Basic Tags

<!DOCTYPE> Defines the document type STF

<html> Defines an html document 3.0 3.0 STF

<body> Defines the body element 3.0 3.0 STF

<h1> to <h6> Defines header 1 to header 6 3.0 3.0 STF

<p> Defines a paragraph 3.0 3.0 STF

<br> Inserts a single line break 3.0 3.0 STF

<hr> Defines a horizontal rule 3.0 3.0 STF

 Defines a comment 3.0 3.0 STF

Char Format

<b> Defines bold text 3.0 3.0 STF

<font> Deprecated. Defines text font, size, and color 3.0 3.0 TF

<i> Defines italic text 3.0 3.0 STF

<em> Defines emphasized text 3.0 3.0 STF

<big> Defines big text 3.0 3.0 STF

<strong> Defines strong text 3.0 3.0 STF

HTML Tag-ovi

<small> Defines small text 3.0 3.0 STF

<sup> Defines superscripted text 3.0 3.0 STF

<sub> Defines subscripted text 3.0 3.0 STF

<bdo> Defines the direction of text display 6.2 5.0 STF

<u> Deprecated. Defines underlined text 3.0 3.0 TF

Output

<pre> Defines preformatted text 3.0 3.0 STF

<code> Defines computer code text 3.0 3.0 STF

<tt> Defines teletype text 3.0 3.0 STF

<kbd> Defines keyboard text 3.0 3.0 STF

<var> Defines a variable 3.0 3.0 STF

<dfn> Defines a definition term 3.0 STF

<samp> Defines sample computer code 3.0 3.0 STF

<xmp> Deprecated. Defines preformatted text 3.0 3.0

Blocks

<acronym> Defines an acronym 6.2 4.0 STF

<abbr> Defines an abbreviation 6.2 STF

HTML Tag-ovi

<address> Defines an address element 4.0 4.0 STF

<blockquote> Defines a long quotation 3.0 3.0 STF

<menu> Deprecated. Defines centered text 3.0 3.0 TF

<q> Defines a short quotation 6.2 4.0 STF

<cite> Defines a citation 3.0 3.0 STF

<ins> Defines inserted text 6.2 4.0 STF

<del> Defines deleted text 6.2 4.0 STF

<s> Deprecated. Defines strikethrough text 3.0 3.0 TF

<strike> Deprecated. Defines strikethrough text 3.0 3.0 TF

Links

<a> Defines an anchor 3.0 3.0 STF

<link> Defines a resource reference 4.0 3.0 STF

Frames

<frame> Defines a sub window 3.0 3.0 F

<frameset> Defines a set of frames 3.0 3.0 F

<noframe> Defines a noframe section 3.0 3.0 TF

<iframe> Defines an inline sub window (frame) 6.0 4.0 TF

HTML Tag-ovi

<dt> Defines a definition term 3.0 3.0 STF

<dd> Defines a definition description 3.0 3.0 STF

<menu> Deprecated. Defines a menu list 3.0 3.0 TF

Images

<img> Defines an image 3.0 3.0

<map> Defines an image map 3.0 3.0

<area> Defines an area inside an image map 3.0 3.0

Tables

<table> Defines a table 3.0 3.0 STF

<caption> Defines a table caption 3.0 3.0 STF

<th> Defines a table header 3.0 3.0 STF

<tr> Defines a table row 3.0 3.0 STF

<td> Defines a table cell 3.0 3.0 STF

<thead> Defines a table header 4.0 STF

<tbody> Defines a table body 4.0 STF

<tfoot> Defines a table footer 4.0 STF

<col > Defines attributes for table columns 3.0 STF

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

HTML Tag-ovi

<colgroup> Defines groups of table columns 3.0 STF

Styles

<style> Defines a style definition 4.0 3.0 STF

<div> Defines a section in a document 3.0 3.0 STF

<span> Defines a section in a document 4.0 3.0 STF

Meta info

<head> Defines information about the document 3.0 3.0 STF

<title> Defines the document title 3.0 3.0 STF

<meta> Defines meta information 3.0 3.0 STF

<base> Defines a base URL for all the links in a page 3.0 3.0 STF

<basefont> Deprecated. Defines a base font 3.0 3.0 TF

Programming

<script> Defines a script 3.0 3.0 STF

<noscript> Defines a no script section 3.0 3.0 STF

<applet> Deprecated. Defines a applet 2.0 3.0 TF

<object> Defines an embedded object 3.0 STF

<param> Defines a parameter for an object 3.0 3.0 STF

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> <BODY> <P> Paragraph 1 Paragraph 1 <P> </P> Paragraph 2 <P> <P> Paragraph 2 Paragraph 3 </P> <BODY> <P> Ekvivalentno sa Paragraph 3 podrazumijevanim </P> tagovima <BODY> Potpuno zadati

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 HTML oznaka

< ⁢

> >

& &

" "

Non-breaking a space &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>

http://host/path/chapter2.html

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

Link na relativni URL – rezultat

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

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

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

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)

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

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

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&field-keywords=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

HTML okviri

HTML frames

Napomena: izgled i

veličina div-ova je

definisana u

posebnom css fajlu

o čemu de biti riječi

u nastavku.

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 ROWS="50 , 10% , * , 2*"> . . . . . . </ FRAMESET> </ 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 – rezultat

Frame – primjer 1

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <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> <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 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


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


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/

http://www.w3.org/Style/CSS/

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2

http://jigsaw.w3.org/css-validator/

http://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) …

Eksterni Style Sheets

Embedded Style Sheets

Eksterni Style Sheets - rezultat

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">  </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 } …

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



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

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 )

CampBearClaw.html - primjer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Camp Bear Claw</TITLE> <LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css” /> </HEAD> <BODY> <H1>Camp Bear Claw</H1> We have the following activities: <H2 CLASS="archery">Archery</H2> <H2 CLASS="arts">Arts and Crafts</H2> <H2 CLASS="horseback">Horseback Riding</H2> <H2 CLASS="hiking">Hiking</H2> <H2 CLASS="campfire">Campfire Song Times</H2> <H2 CLASS="java">Java Programming</H2> </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“ /> </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% }

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

Bates.html - rezultat

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  </UL>  </BODY> </HTML>

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

Cabinets.css

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

Bounding Box

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

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>  </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,

Efekat preloma paragrafa (primjer,nastavak)

Psalm23.html - rezultat

Float svojstvo može se iskoristiti

za implementaciju “drop caps”

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>

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

-

Dinamička promjena vidljivosti sloja – primjer

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Changing Visibility Dynamically</TITLE> <STYLE>  </STYLE> ...

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

<SCRIPT TYPE="text/javascript">  </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> ...

Dodatak: jedinice mjerenja

Dinamička promjena vidljivosti sloja - primjer

Unit Description

cm Centimeters (absolute unit)

em The height of the current font (relative unit)

ex The height of the letter “x” in the current font (relative unit)

in Inches (absolute unit)

mm Millimeters (absolute unit)

pc Picas; 6 picas per inch; 12 points per pica (absolute unit)

pt Points; 72 points per inch (absolute unit)

px Pixels (relative unit)

Documents

Tehnike i alati web dizajna