Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 1 / 23
HTML HTML Sªu»y do deniowania struktury dokumentu: akapity nagªówki listy tabele odno±niki sekcje Nie powinien sªu»y do deniowania formatu P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 2 / 23
Elementy blokowe i s siaduj ce HTML deniuje dwa rodzaje elementów (znaczników) Blokowe Zawieraj zªamanie wiersza przed i po elemencie Zajmuj caª dost pn szeroko± p, h1-h6, ul, ol, li, table, div S siaduj ce Umieszczane w bie» cym wierszu Szeroko± zale»na od zawarto±ci a, abbr, cite, q, span P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 3 / 23
Modykacje wygl du Kaskadowe arkusze stylów CSS - Cascading Style Sheets Okre±laj dla elementów HTML m. in. rodzaj, krój i wielko± czcionki tªo jako kolor lub obraz marginesy, dopeªnienia ukªad (layout) P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 4 / 23
Oszcz dno± czasu i pracy Denicje stylów przechowywane w oddzielnych plikach Ujednolicenie wygl du wszystkich podstron Šatwo± modykacji Kompletna zmiana wygl du za pomoc podmiany pliku ze stylami Style globalne i lokalne Style dla przegl darek i dla wydruku P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 5 / 23
Kolejno± kaskadowa Denicje stylów mo»na umieszcza w zewn trznym pliku w sekcji head dokumentu HTML jako warto± atrybutu style znacznika HTML W przypadku sprzeczno± i obowi zuj cym jest styl najbardziej szczegóªowy P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 6 / 23
Skªadnia Nazwa znacznika HTML Lista wªa±ciwo±ci w nawiasach {...} wªa±ciwo± : warto± ; Przykªadowy ukªad p { background-color: #EEEEEE; color: #000000; margin: 10px; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 7 / 23
Umieszczanie denicji stylów w zewn trznym pliku <link type=text/css rel=stylesheet href=mojstyl.css /> w sekcji head dokumentu HTML <style>... </style> jako warto± atrybutu style znacznika HTML <p style=background-color: #6C8CD5; margin: 20px;> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 8 / 23
Czcionki Wªa±ciwo± font-family Nazwa czcionki, np.: Arial, Georgia, Tahoma, Courier,... Lista czcionek na wypadek braku obsªugi przez przegl dark Na ko«cu czcionki generyczne: szeryfowa (serif) bezszeryfowa (sans-serif) staªej szeroko±ci (monospace) font-family h1 { font-family: Georgia, Times New Roman, serif; } p { font-family: Trebuchet MS, Arial, sans-serif; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 9 / 23
Wªa±ciwo±ci czcionki Wªa±ciwo± font-size Jednostki: px, pt, pc, cm, mm, em, ex, % Wªa±ciwo± font-weight Pogrubienie: bold; Wªa±ciwo± font-style Kursywa: italic Wªa±ciwo±ci czcionki h2 { font-family: Trebuchet MS, Arial, sans-serif; font-size: 24px; font-weight: bold; font-style: italic; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 10 / 23
Kolory Kolor tªa: background-color Kolor czcionki: color Kolor obramowania: border-color Sposoby okre±lania koloru Nazwa: white, black, green, red,... Kod RGB: rgb(255, 255, 255), rgb(0, 0, 0), rgb(0, 200, 0), rgb(150, 0, 0),... Kod HEX: #FFFFFF, #000000, #336633, #CC8C00,... Wªa±ciwo±ci czcionki h3 { background-color: #EEEEEE; color: #111166; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 11 / 23
Tekst Wyrównanie: text-align do lewej lub do prawej left, right wy±rodkowanie center wyjustowanie justify Dekoracja: text-decoration podkre±lenie underline naddkre±lenie overline przekre±lenie line-through Wci cie pierwszego wiersza: text-indent P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 12 / 23
Model pudeªkowy Elementy HTML mog by oddzielane od siebie za pomoc marginesów (margin) odst p od innych elementów i kraw dzi okne dopeªnienia (padding) odst p zawarto±ci od obramowania elementu ramek (border) pomi dzy marginesem a dopeªnieniem P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 13 / 23
Model pudeªkowy P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 14 / 23
Marginesy i dopeªnienia Zazwyczaj dla elementów blokowych Jednostki: px, cm, mm, % Marginesy: margin-top, margin-right, margin-bottom, margin-left margin: 10px; margin: 20mm 5mm 0 5mm; margin: 10% 5%; Dopeªnienia: padding-top, padding-right, padding-bottom, padding-left padding: 10px; padding: 20mm 5mm 0 5mm; padding: 10% 5%; P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 15 / 23
Obramowanie Zazwyczaj dla elementów blokowych Szeroko± : border-width Jednostki: px, cm, mm, % Style obramowania: border-style solid, dotted, dashed, double, inset Poªo»enie border-top border-right border-bottom border-left P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 16 / 23
Sekcje div Sekcje strony Znacznik <div> Atrubuty class, id Sªu» grupowania elementów na stronie Mo»na na przykªad utworzy sekcje nagªówek lewa kolumna obszar gªówny stopka pojemnik na wszystko Formatowanie sekcji za pomoc stylów P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 17 / 23
Sekcje div Przykªadowy ukªad <div id=pojemnik> <div id=naglowek>... </div> <div id=lewa-kolumna>... </div> <div id=zawartosc>... </div> <div id=stopka>... </div> </div> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 18 / 23
Sekcje w HTML5 Przykªadowy ukªad <div id=pojemnik> <header>... </header> <nav>... </nav> <article>... </article> <footer>... </footer> </div> P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 19 / 23
Formatowanie sekcji Sekcje strony s formatowane za pomoc stylów Ukªad Wymiary Marginesy Obramowania Tªo P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 20 / 23
Formatowanie sekcji body, #pojemnik, #naglowek body { background: #666666; color: #000000; } #pojemnik { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; } #naglowek { background: #876ED7; padding: 0 10px 0 20px; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 21 / 23
Formatowanie sekcji #lewa-kolumna, #zawartosc, #stopka #lewa-kolumna { oat: left; width: 200px; background: #FFD073; padding: 15px 10px 15px 20px; } #zawartosc { margin: 0 0 0 250px; padding: 0 20px; } #stopka { padding: 0 10px 0 20px; background: #FFFF73; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 22 / 23
Efekt ko«cowy P. Witkowski (MIM UW) Technologie Informacyjne Wiosna 2013 23 / 23