Technologie Informacyjne

Transkrypt

1 Technologie Informacyjne Wykªad 7 Paweª Witkowski MIM UW Wiosna 2013 P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 23

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

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

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

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

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

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

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

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

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

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

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

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

14 Model pudeªkowy P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 23

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

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

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

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

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

20 Formatowanie sekcji Sekcje strony s formatowane za pomoc stylów Ukªad Wymiary Marginesy Obramowania Tªo P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 23

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

22 Formatowanie sekcji #lewa-kolumna, #zawartosc, #stopka #lewa-kolumna { oat: left; width: 200px; background: #FFD073; padding: 15px 10px 15px 20px; } #zawartosc { margin: px; padding: 0 20px; } #stopka { padding: 0 10px 0 20px; background: #FFFF73; } P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 23

23 Efekt ko«cowy P. Witkowski (MIM UW) Technologie Informacyjne Wiosna / 23