Search

xHTML i CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    xHTML i CSS - Presentation Transcript

    1. HTML & CSS Milan Milošević www.mmilan.com Pirot, 14 – 16 oktobar 2009 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    2. Sadržaj strane ● 13 standardnih elemenata – Text – Graphics – Sound – Frames – Lists – Images – Video – Forms – Hyperlinks – Image Maps – Tables – Colour – Layers Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    3. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    4. 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) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    5. Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    6. 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> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    7. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    8. 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/ Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    9. HTML i XHTML ● Loš primer: ● XML opisuje, a HTML prikazuje podatke ● Različiti programi, operativni sistemi, računari, mobilni telefoni... Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    10. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    11. Struktura → Hello World... Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    12. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    13. Šta browser ignoriše ● “Enter”, tj. prekid linije ● Više “space” ili “tab” karaktera ● Višestruke <p> tagove ● Nepoznate tagove ● Komentare – <!-- … Ovo je komentar ... --> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    14. HTML & CSS (1) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    15. HTML & CSS (2) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    16. xHTML Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    17. Zaglavlje (header) dokumenta ● Između <head> tagova ● Dodatne informacije o dokumentu ● Stilovi, skripte, ● Najčešće se koristi – <title> – <meta> – <style> – <link> – <script> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    18. <title> ● Naslov dokumenta ● Vidljiv kao ime prozora <head> <title>Title of the document</title> </head> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    19. <meta> ● Opis stranice <head> <meta name="description" content="Web dizajn" /> <meta name="keywords" content="HTML,CSS,XML" /> <meta name="author" content="Milan Milosevic" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </head> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    20. Telo (body) dokumenta ● Između <body> tagova ● Najveći deo stranice ● Vidljiv na stranici ● Serija tagova koji definišu sadržaj i izgled stranice Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    21. Zatvaranje tagova ● Parovi ● Sami – <div></div> – <img src=”” alt=”” /> – <h1></h1> – <br /> – <p></p> – <hr /> – <strong></strong> – <span></span> – <em></em> – <a></a> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    22. Najvažniji tagovi ● <div> - struktura “kutija” ● <p> - paragraf teksta ● <h1>,...,<h6> - naslovi ● <strong> - bold tekst ● <em> - italic tekst ● <img> - slika ● <a> - link Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    23. 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> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    24. Atributi (ime=”vrednost”) (2) ● href – <a href=”http://mmilan.com”>Homepage</a> ● src i alt – <img src=”/slika.jpg” alt=”Alternativni tekst” /> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    25. Block & inline ● div ● a ● h1, … h6 ● img ● p ● span ● strong ● em Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    26. Putevi ● Apsolutni – http://www.domen.tld/folder1/folder2/slika.jpg ● Relativni – folder2/slika.jpg ● “Root” relativni – /folder1/druga-slika.jpg Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    27. 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 } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    28. xHTML: Najvažniji elementi Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    29. Paragraf ● Tag: <p>...</p> ● Nova linija: <br /> ● <br /><br /> NIJE isto što i <p> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    30. Naslovi <h1> Heading 1</h1> <h2> Heading 2</h2> Heading 1 <h3> Heading 3</h3> Heading 2 <h4> Heading 4</h4> Heading 3 <h5> Heading 5</h5> Heading 4 <h6> Heading 6</h6> Heading 5 Heading 6 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    31. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    32. 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) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    33. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    34. 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> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    35. Liste (1) ● Tri vrste listi u xHTML – Numerisane <ol> – Nenumerisane <ul> – Definicije <dl> ● Moguće kombinacije Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    36. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    37. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    38. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    39. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    40. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    41. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    42. Simboli http://www.w3schools.com/tags/ref_symbols.asp Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    43. CSS Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    44. Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    45. Š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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    46. 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) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    47. “Kaskade” ● Kombinacija stilova – Browser – Eksterni – Umetnuti – Inline – Korisnički Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    48. Nasleđivanje ● Elementi “nasleđuju” stilove od roditelja ● Olakšava posao, skraćuje fajlove ● Ako element nije definisan → identičan je roditelju Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    49. 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> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    50. CSS sintaksa selector/element { property: value; } ● selector – xHTML element, grupa, class ili id ● property – zavisi od elementa Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    51. Primer: XHTML element body { margin: 0; padding: 0; border-top: 1px solid #ff0; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    52. Grupisanje elemenata h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    53. Class <p class=“intro”>Ovo je probni tekst</p> .intro { font: 12px verdana, sans-serif; margin: 10px; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    54. Id <p id=“intro”>Ovo je testiranje</p> #intro { border-bottom: 2px dashed #fff; } Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    55. 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 {} Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    56. Model kutije (1) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    57. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    58. <style type="text/css"> ul { background: red; margin: A B C D; padding: E F G H; } li { color: white; background: blue; margin: a b c d; padding: e f g h; } </style> .. <ul> <li>1st element of list </li> <li>2nd element of list </li> </ul> Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    59. Problemi sa “kutijama” Standard IE (stare verzije) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    60. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    61. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    62. CSS Fonts ● Font-family ● Font-weight ● Font-style ● Font-size Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    63. 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) Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    64. CSS Layout ● Margin ● Padding ● Border ● Z-index ● Positioning ● Width ● Height ● Float ● Text-align ● Vertical-align Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    65. CSS Text ● Text-indent ● Text-align ● Text-decoration ● Letter-spacing ● Text-transform ● Word-spacing ● White-space Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    66. CSS Background ● Background-color ● Background-image ● Background-position ● Background-repeat Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    67. CSS Lists ● List-style ● List-style-image ● List-style-position ● List-style-type Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    68. 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; Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    69. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    70. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    71. 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    72. 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 /* … */ Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    73. Različiti “browser-i” Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    74. Dva načina ● “Hacks” ● Uslovni komentari <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> ● 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 Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com
    75. P I T A NJ A ? Milan Milošević www.mmilan.com mm@mmilan.com www.facebook.com/mmilann www.twitter.com/mmilann Milan Milošević, 14-16. oktobar 2009, Pirot www.mmilan.com

    + Milan MilosevicMilan Milosevic, 1 month ago

    custom

    63 views, 0 favs, 0 embeds more stats

    Seminar o izradi web sajtova
    14-16. oktobar 2009, P more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 63
      • 63 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 1
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved