xHTML i CSS

HTML & CSS
Milan Milošević
www.mmilan.com

Pirot, 14 – 16 oktobar 2009

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

Sadržaj strane
● 13 standardnih elemenata
– Text – Graphics
– Sound – Frames
– Lists – Images
– Video – Forms
– Hyperlinks – Image Maps
– Tables
– Colour
– Layers


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 http://www.webdevout.net/browser-support

– Firefox – xHTML 1.1
– IE 6 – xHTML 1.0 (delimično)
– IE 7 – xHTML 1.1 (delimično)


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


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/


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


Š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 ● Sami
– <div></div> – <img src=”” alt=”” />
– <h1></h1> – <br />
– <p></p> – <hr />
– <strong></strong>
– <span></span>
– <em></em>
– <a></a>


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


Block & inline
● div ● a
● h1, … h6 ● img
● p ● span
● strong
● em


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#navigation
<div id=”navigation”></div> #navigation

<div class=”post”></div> div.post
<div class=”post”></div> .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>
Heading 1
<h3> Heading 3</h3> Heading 2
Heading 6


Formatiranje teksta (1)
Tekst

Naslovi Paragrafi Reči/slova

<h1> - najveći <p> <b> - bold
. <i> - italic
. <br /> - nov red
<h6> - najmanji <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 Tekst koji se prikazuje
(nevidljiv) (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:mm@mmilan.com">Pišite mi</a>


Liste (1)
● Tri vrste listi u xHTML
– Numerisane <ol>
– Nenumerisane <ul>
– Definicije <dl>

● Moguće kombinacije


Numerisane liste
<ol> 1. Jabuke
<li>Jabuke</li> 2. Banane
<li>Banane</li> 3. Kruške
<li>Kruške</li> 4. Šljive
<li>Šljive</li>
</ol>
● Vrste nabrajanja (list-style-type)
– lower-alpha, decimal, lower-roman, upper-roman,
upper-alpha

Nenumerisane liste
<ul> ● Jabuke
<li>Jabuke</li> ● Banane
<li>Banane</li> ● Kruške
<li>Kruške</li> ● Šljive
<li>Šljive</li>
</ul>
● Vrste nabrajanja (list-style-type)
– squere, disc, circle, none


Definicije
<dl>
● Složenije <dt>Internet Explorer</dt>
<dd>Developed by Microsoft</dd>
<dt>Netscape</dt>
<dd>Developed by Netscape</dd>
</dl>
● Dva elementa za svaki
element liste

Internet Explorer
Developed by Microsoft
Netscape
Developed 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 name
2. Your order number
3. 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

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 {} @import url(http://style.com/basic);

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


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


Napredi CSS selektori
●
Descendant Selector
body h1 { }
#navigation p {}

●
Adjacent Sibling Selectors
p.intro + span {}

●
Child Selectors
div ol > p {}

●
Universal Selector
* {}

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

●
Pseudo-Class Selectors
a:active {}
#nav:hover {}


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š primera
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
mm@mmilan.com

www.facebook.com/mmilann
www.twitter.com/mmilann


xHTML i CSS

Recommandé

Recommandé

Contenu connexe

Plus de Milan Milošević

Plus de Milan Milošević (20)

xHTML i CSS