xhtml i css

Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com

Milan Miloševićwww.mmilan.com

HTML & CSS

Pirot, 14 – 16 oktobar 2009


Sadržaj strane

– Text

– Sound

– Lists

– Video

– Hyperlinks

– Tables

– Colour

– Layers

– Graphics

– Frames

– Images

– Forms

– Image Maps

● 13 standardnih elemenata


HTML Standard (1)

● Tim Berners-Lee, CERN, 1990. godine

● World Wide Web Consortium (W3C)

● U praksi: Netscape, Microsoft,...– Posebni tagovi u browserima

● Od 2002/2003 standardizacija W3C


HTML Standard (2)

● W3C standardi– HTML 3.2

– HTML 4.01

– xHTML 1.0

– xHTML 1.1

– XHTML 2.0

● Podrška– Firefox – xHTML 1.1

– IE 6 – xHTML 1.0 (delimično)

– IE 7 – xHTML 1.1 (delimično)

http://www.webdevout.net/browser-support

http://www.webdevout.net/browser-support


HTML (1)

● HTML - Hyper Text Markup Language● Nije programski jezik● Koristi tagove <tag>.● HTML dokument = web strana, .htm ili .html● Tagovi:

– Otvoren i zatvoren <tag>...</tag>

– Prazni tagovi <tag />

– Atributi <tag atribut=”..”>...</tag>


HTML (2)

● Najčešći tagovi:– <h1>Naslov</h1>

– <p>Paragraf</p>

– <a href="http://www.google.com">Link</a>

– <img src="slika.jpg" />

– <br />

Nov red

http://www.google.com/


XHTML

● EXtensible HyperText Markup Language● Stroža i čistija verzija HTML-a● Skoro identičan HTML 4.01● HTML definisan kao XML aplikacija● Standard

– http://validator.w3.org/

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

http://validator.w3.org/

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


HTML i XHTML

● Loš primer:

● XML opisuje, a HTML prikazuje podatke● Različiti programi, operativni sistemi, računari,

mobilni telefoni...


Pravila, pravila...

● Zatvoreni tagovi: <h1>paragraf <p>...● Ugneždeni tagovi: <b><i>tekst</b></i>● Mala slova – tagovi i atributi: <P>, <H1>, <A> ● Zatvoreni prazni elementi <br>● Vrednost atributa “..”: <table width=100%>● Struktura dokumenta


Struktura → Hello World...


DOCTYPE

● XHTML 1.1 (samo Firefox)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

● XHTML 1.0 strict (Firefox, IE7)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

● XHTML 1.0 transitional (Firefox, IE6)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

http://www.w3schools.com/tags/tag_DOCTYPE.asp

http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd

http://www.w3schools.com/tags/tag_DOCTYPE.asp

Šta browser ignoriše

● “Enter”, tj. prekid linije● Više “space” ili “tab” karaktera● Višestruke <p> tagove● Nepoznate tagove● Komentare

–


HTML & CSS (1)


HTML & CSS (2)


xHTML


Zaglavlje (header) dokumenta● Između <head> tagova● Dodatne informacije o dokumentu● Stilovi, skripte, ● Najčešće se koristi

– <title>

– <meta>

– <style>

– <link>

– <script>


<title>

● Naslov dokumenta● Vidljiv kao ime prozora

<head>

<title>Title of the document</title>

</head>


Telo (body) dokumenta

● Između <body> tagova● Najveći deo stranice● Vidljiv na stranici● Serija tagova koji definišu sadržaj i izgled

stranice


Zatvaranje tagova

● Parovi– <div></div>

– <h1></h1>

– <p></p>

– <strong></strong>

– <span></span>

– <em></em>

– <a></a>

● Sami– <img src=”” alt=”” />

– <br />

– <hr />


Najvažniji tagovi

● <div> - struktura “kutija”● <p> - paragraf teksta● <h1>,...,<h6> - naslovi● <strong> - bold tekst● <em> - italic tekst● <img> - slika● <a> - link


Atributi (ime=”vrednost”) (1)

● id– Jedinstven

– <div id=”navigacija”></div>

● class– može da se ponavlja

– dodatno opisuje

– tekst, poruka, komentar

– <div class=”post” id=”post-123”></div>


Atributi (ime=”vrednost”) (2)

● href– <a href=”http://mmilan.com”>Homepage</a>

● src i alt

– <img src=”/slika.jpg” alt=”Alternativni tekst” />

http://mmilan.com/


Block & inline

● a● img● span● strong● em

● div● h1, … h6● p


Putevi

● Apsolutni– http://www.domen.tld/folder1/folder2/slika.jpg

● Relativni– folder2/slika.jpg

● “Root” relativni– /folder1/druga-slika.jpg


Veza sa CSS-om

<div id=”navigation”></div>

<div id=”navigation”></div>

<div class=”post”></div>

<div class=”post”></div>

div#navigation

#navigation

div.post

.post

selector { attribute:value; attribute2:value2 }


xHTML:Najvažniji elementi


Paragraf

● Tag: <p>...</p>

● Nova linija: <br />

● <br /><br /> NIJE isto što i <p>


Naslovi

<h1> Heading 1</h1>

<h2> Heading 2</h2>

<h3> Heading 3</h3>

<h4> Heading 4</h4>

<h5> Heading 5</h5>

<h6> Heading 6</h6>

Heading 1Heading 2

Heading 3

Heading 4

Heading 5

Heading 6


Formatiranje teksta (1)

Tekst

Naslovi Paragrafi Reči/slova

<h1> - najveći..<h6> - najmanji

<p> <b> - bold<i> - italic<br /> - nov red<div> - nov blok<hr /> - horizontalna linija<span> - deo teksta


Linkovi (1)

● Tag: <a>● Povezuju dve lokacije ili dva dokumenta● Najvažnija stvar na WWW● Unutar dokumenata ili između dokumenata

<a href="http://www.w3schools.com/"> Visit W3Schools! </a>

Adresa dokumenta(nevidljiv)

Tekst koji se prikazuje(vidljiv)


Linkovi (2)

● Četiri stanja linka:– Link – običan link

– Active – aktivan u drugom prozoru browser-a

– Visited – link koji je već posećen

– Hover – kursor miša se nalazi iznad linka


Linkovi (3)

● Eksterni linkovi<a href=”http://mmilan.com” target=“_blank”> Homepage</a>

● Interni linkovi<a href=“#Section1”>Skoči na Poglavlje 1</a>

* * *

<a name=“Section1”>Poglavlje 1</a>

● E-mail<a href="mailto:[email protected]">Pišite mi</a>

mailto:[email protected]


Liste (1)

● Tri vrste listi u xHTML– Numerisane <ol>

– Nenumerisane <ul>

– Definicije <dl>

● Moguće kombinacije


Numerisane liste<ol>

<li>Jabuke</li>

<li>Banane</li>

<li>Kruške</li>

<li>Šljive</li>

</ol>

1. Jabuke

2.Banane

3.Kruške

4.Šljive

● Vrste nabrajanja (list-style-type)– lower-alpha, decimal, lower-roman, upper-roman,

upper-alpha


Nenumerisane liste<ul>

<li>Jabuke</li>

<li>Banane</li>

<li>Kruške</li>

<li>Šljive</li>

</ul>

● Jabuke● Banane● Kruške● Šljive

● Vrste nabrajanja (list-style-type)– squere, disc, circle, none


Definicije

● Složenije

● Dva elementa za svaki element liste

<dl> <dt>Internet Explorer</dt> <dd>Developed by Microsoft</dd> <dt>Netscape</dt> <dd>Developed by Netscape</dd> </dl>

Internet ExplorerDeveloped by Microsoft

NetscapeDeveloped by Netscape


Ugneždene liste<ul> <li>Send us a letter, including:</li> <ol>

<li>Your full name</li><li>Your order number</li><li>Your contact information</li>

</ol> <li> Use the web form to send an email </li></ul>

• Send us a letter, including:1. Your full name2. Your order number3. You contact information

• Use the web form to send an email


Boje

● Važan element strane● Globalno i lokalno podešavanje● Tagovi imaju atribut color● Heksadecimalno ili ime

– #0000FF → blue

– #FF0000 → red

– #000000 → black

– #eee → #EEEEEE


Slike

<img src=”slika.jpg” alt=”Naslov slike” height=”70%” width=”60” usemap=”#mapimage” />

<a href=””><img src=”” / ></a>

● alt – Alternativni text

– Vidljiv dok se otvara stranica, u slučaju da ne postoji slika, Voice reader, pop-up prozor, pretraživači

● height, width – dimenzije slike (% ili px)

– Formatiranje stranice pre otvaranja slika, promena veličine slike

● usemap – mapiranje slike


Simboli

http://www.w3schools.com/tags/ref_symbols.asp

http://www.w3schools.com/tags/ref_symbols.asp


CSS


Šta je CSS?

● Cascading Style Sheets (CSS)● Grupa pravila koja definišu izgled sajta● Slojevi prezentacije

– Struktura (XHTML)

– Funkcija (skripte)

– Izgled (CSS)

● Lako održavanje i menjanje


Prednosti CSS-a

● Razdvaja izgled od elemenata● U istom fajlu gde je HTML ili posebno● Definiši jednom → koristi više puta● HTML – nikada nije bio namenjen za dizajn,

različite improvizacije (font, b, i)


“Kaskade”

● Kombinacija stilova– Browser

– Eksterni

– Umetnuti

– Inline

– Korisnički


Nasleđivanje

● Elementi “nasleđuju” stilove od roditelja

● Olakšava posao, skraćuje fajlove

● Ako element nije definisan → identičan je roditelju


Upotreba stilova

● External Style Sheet<link href=“stylesheet” type=“text/css” href=“location.css” />

– Najčešći metod

● Embedded Styles<style type=“text/css”>

body {}

</style>

● Inline Styles<p style=“font-size: 12px”>Lorem ipsum</p>

@import url(http://style.com/basic);


CSS sintaksa

selector/element {

property: value;

}

● selector – xHTML element, grupa, class ili id● property – zavisi od elementa


Primer: XHTML element

body { margin: 0; padding: 0; border-top: 1px solid #ff0;

}


Grupisanje elemenata

h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif;

}


Class

<p class=“intro”>Ovo je probni tekst</p>

.intro { font: 12px verdana, sans-serif; margin: 10px;}


Id

<p id=“intro”>Ovo je testiranje</p>

#intro { border-bottom: 2px dashed #fff;}


● Descendant Selectorbody h1 { }#navigation p {}

● Adjacent Sibling Selectorsp.intro + span {}

● Child Selectorsdiv ol > p {}

● Universal Selector* {}

• Attribute Selectorsdiv[href=“http://home.org”]

● Pseudo-Class Selectorsa:active {}#nav:hover {}

Napredi CSS selektori


Model kutije (1)


Model kutije (2)

● Za sve elemente● margin – transparentna, može da se preklapa,

rastojanje do susednog elementa● border – ivica kutije, u boji ili transparentna,

ako je debljina 0 → nestaje● padding – rastojanje od ivice do sadržaja, iste

boje kao sadržaj (boja pozadine● content – većina ljudi misli da je samo ovo

element, ono što je vidljivo


Problemi sa “kutijama”

Standard IE (stare verzije)


Korišćenje <div>

● “DIVision”

● Definiše blok koji može da sadrži druge elemente (tekst, slike, itd)

● Mogu da se raspoređuju kao slojevi


Osobine: float i clear

● Standardno div zauzima 100% širine roditelja● Dodatne osobine → manje● float:left (right)

– Ravna element po levoj (desnoj) ivici

● clear:left (right, none, both)– Označava gde nije dozvoljeno pojavljivanje “float”

elemenata


CSS Fonts

● Font-family● Font-weight● Font-style● Font-size


CSS jedinice i boje

● Jedinice– %– in– cm– mm– em (relativna jedinica, u odnosu na korišćeni font)– px – pt (1pt = 1/72 in)

● Boje– ime (red, etc)– rgb(x,x,x), rgb(x%, x%, x%)– #rrggbb (HEX)


CSS Layout

● Margin● Padding● Border● Z-index● Positioning● Width● Height● Float● Text-align● Vertical-align


CSS Text

● Text-indent● Text-align● Text-decoration● Letter-spacing● Text-transform● Word-spacing● White-space


CSS Background

● Background-color● Background-image● Background-position● Background-repeat


CSS Lists

● List-style● List-style-image● List-style-position● List-style-type


CSS skraćenice

font-family: verdana, sans-serif;font-weight: bold;font-size: 12px;

font: bold 12px verdana, sans-serif;

padding-top: 5px;padding-right: 8px;padding-bottom: 5px;padding-left: 10px;

padding: 5px 8px 5px 10px;


Uslovni CSS (1)

a[href $='.pdf'] { padding-right: 18px;background: transparent url(icon_pdf.gif) no-repeat center right;

}

● Dodaje PDF ikonu svim linkovima (href) koji završavaju sa .pdf.

● CSS obavlja sav posao, bez modifikacije HTML-a


Uslovni CSS (2)

span[id ^='google'] { background-color: green;}

● Svaki span koji počinje sa “google” dobija zelenu pozadinu

● Još primerahttp://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS

http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS


Nekoliko saveta

● Koristite eksterni CSS fajl● Ne koristite @import, link je efikasnije● Koristite nasleđivanje elemenata● Koristite grupisanje elemenata● Koristite skraćene forme zapisa● Izbegavajte !important


Pišite razumljiv CSS

● Osnovni podaci na početku fajla (ime, verzija, datum, itd)

● Definišite i zapišite boje koje koristite● Logična imena klasa i identifikatora● Grupišite pravila● Komenatri /* … */


Različiti “browser-i”

Dva načina

● “Hacks”● Uslovni komentari



● Sintaksa– gt: veće od (greater than)

– lte: manje ili jednako (less than or equal to)

– IE 5, IE 5.5, IE 6, IE 7, IE 8


P I T A NJ A ?

Milan Milošević

www.mmilan.com

[email protected]

www.facebook.com/mmilann

www.twitter.com/mmilann

http://www.mmilan.com/

mailto:[email protected]

http://www.facebook.com/mmilann

http://www.twitter.com/mmilann

xhtml i css

Education