HTML & CSS Spis treści 1. HTML... 2 1.1. Podstawy... 2 1.2. Struktura dokumentu... 2 1.3. Nagłówek... 2 1.4. Bloki tekstu... 3 1.5. Tekst... 4 1.6. Listy... 4 1.7. (Hiper)łącza... 5 1.8. Tabele... 5 1.9. Ramki... 6 1.10. Formularze... 7 1.11. Kolory... 8 1.12. Rysunki... 9 1.13. Mapy obrazu... 9 1.14. Obiekty multimedialne... 9 1.15. Znaki specjalne... 10 1.16. I18n... 10 1.17. Skrypty... 10 1.18. DHTML... 11 1.19. XHTML... 12 1.20. Rozwijane menu... 12 1.21. Htpasswd - dostęp chroniony do katalogów strony... 13 1.22. Programy do projektowania stron... 13 1.23. Publikacja witryn (FTP)... 14 1.24. Mikroformaty... 14 1.25. Urządzenia przenośne... 14 1.26. Walidacja dokumentów... 14 1.27. Sztuczki i triki... 14 2. CSS... 14 2.1. Podstawy... 14 2.2. Reguły stylów... 15 2.3. Jednostki... 15 2.4. Dziedziczenie i kaskadowanie... 16 2.5. Czcionki... 16 2.6. Formatowanie tekstu... 16 2.7. Tabele... 17 2.8. Listy... 17 2.9. Obramowanie, odstępy, marginesy... 18 2.10. Kolory i tło... 18 2.11. Pozycjonowanie... 19 2.12. Pseudoklasy i pseudoelementy... 19 2.13. Dynamiczny HTML i CSS... 20 2.14. Media... 21 2.15. Rozmieszczenie za pomocą tabel... 21 2.16. Style interfejsu użytkownika... 21 2.17. Testowanie i walidacja kodu CSS... 22 2.18. Sztuczki i triki... 22 1/22
1. HTML HTML = język służący do tworzenia dokumentów HTTP = protokół do przesyłania dokumentów HTML WWW = HTML + HTTP + przeglądarka Mosaic = pierwsza multimedialna przeglądarka Agent użytkownika (ang. user agent) = program umożliwiający dostęp do danych np. przeglądarka, aplikacje internetowe, wszystko co wyświetla strony internetowe 1.1. Podstawy Atrybuty wszystkich znaczników Atrybut Wartość Znaczenie id string identyfikator, aby można było odwołać się do danego znacznika w innym miejscu np. z zewn. skryptu JavaScript class string klasa CSS style string style CSS bezpośrednio w atrybucie. def-stylu; def-stylu; def-stylu dir rtl,ltr kierunek wyświetlania tekstu: od prawej do lewej (right-to-left, rtl) lub odwrotnie lang kod języka pl, en, en-us, http://tools.ietf.org/html/draft-alvestrand-lang-tags-v2-00 title string tekst podpowiedzi, wyświetlany w chmurce po najechaniu kursorem na element Przedawnione atrybuty name zamiast niego: id Komentarze <!--comment--> Sekcje CDATA =struktury jednak obsługiwane przez przeglądarki i inne programy przetwarzające XML i HTML, w przeciwieństwie do komentarzy HTML <![CDATA[tekst komentarza]]> Typ MIME Np. tutaj: <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <script type= text/javascript > URI Unified Resource Identifier =fragment tekstu o ściśle określone strukturze protokół:serwer/katalog/plik_stron.html http://www.example.com/products/products.html 1.2. Struktura dokumentu Typ dokumentu DOCTYPE określenie DTD na samym pocz. dokumentu, przed innymi elementami do kontroli poprawności składni doku HTML np. <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3c.org/tr/html4/strict.dtd > => ten DTD mówi: 1) najwyższym elementem jest <html> 2) dok jest zgodny ze standardami o formalnym id publicznym (FDI) = W3C HTML 4.01 Strict English 3) treść DTD w pliku http://www.w3c.org/tr/html4/strict.dtd HTML 5 - krócej <!DOCTYPE html> zamiast: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">. Znaczniki <!DOCTYPE HTML PUBLIC -//W3C//DTD// HTML 4.01 EN http://www.w3c.org/tr/html4/strict.dtd > <html> <meta name= description content= opis /> <meta http-equiv= Content-Type content= text/html; charset=utf-8 />//ustala domyślne kodowanie w przeglądarce <title>t</title> <link rel= stylesheet type= text/css href= /styles.css /> <style type= text/css > body { background:black; color:white a:link { color:red a:visited { color:blue a:active { color:yellow </style> <script language= JavaScript > function NewWindow(url) { fin = window.open(url,, width=800, height=600, scrollbars=yes, resizable=yes ); </script> <body> </body> </html> 1.3. Nagłówek Poniższe znaczniki powinny znajdować się w Metadane = info dla przeglądarki, niewyświetlane <meta> 2/22
Kodowanie <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> Nie cachowanie strony <meta http-equiv= pragma content= no-cache /> Odświeżenie strony po 3 sekundach <meta http-equiv= refresh content= 3 /> <meta http-equiv= pragma content= no-cache />//aby nie odświeżała z cache, tylko naprawdę! <meta http-equiv= expires content= 0 />//bo różne przeglądarki różnie traktują znacznik pragma :/ Przekserowanie na inną stronę po 3 sekundach <meta http-equiv= refresh content= 3;URL=http://www.google.pl /> Pelna lista nagłówków: http://www.w3.org/protocols/rfc2616/rfc2616.html Opis strony <meta name= description content= opis /> Słowa kluczowe <meta name= keys content= word1, word2, word3 /> Określenie domyślnej ścieżki zasobu to <base href="http://home.elka.pw.edu.pl/~zfabijan/pw/"/> <body> <img src="test/shark.jpg" width="100" height="100"/ </body> To to samo, co to: <body> <img src="http://home.elka.pw.edu.pl/~zfabijan/pw/test/shark.jpg" width="100" height="100"/> </body> Profile = dołączenie do dokumentu HTML struktury danych XML z info o stronie (autor doku, data modyf,...) <head profile= profiles/p1.html >//p1 to zwykły XHTML z el. <dl class= profile ><dt id= author ></dt><dd>name Surname</dd></dl> w <body> 1.4. Bloki tekstu Body + onload/onunload <body onload= fun(); > Akapit <p> Nagłówek <h1> do <h6> ENTER <br/> Pozioma linia <hr/> Cytowany tekst <blockquote> Wyśrodkowanie <center> Preformatowany tekst. Wyświetla wiele spacji, tabów i enterów! (a domyślnie HTML nie wyświetla wielu białych znaków). UWAGA! Czcionka wewnątrz pre ma znaki o stałej szerokości (to coś jak Courier New) i nie da się tego zmienić! <pre> Sekcja, fragment dokumentu wspólne formatowanie tekstu to takie rozdziały książki, które grupują jej akapity (<p>) jedne z najważniejszych znaczników, to one, alternatywnie do <table> - służą do rozmieszczenia na stronie; chyba layout w <div> jest bardziej elastyczny niż w <table> <div> np. <html> <style>.bordered { border-style: solid; width: 60%; padding: 20px; margin-left: auto; margin-right: auto;.centered { text-align: center; </style> <body> Oto tekst w ramce: <div class= bordered >Ala ma kota</div> A to już jest poza ramką. </body> </html> zakładka na tej samej stronie! <div id= bookmark >Rozdział 1</div> <a href= #bookmark >przejdź do Rozdziału 1</a>// 3/22
1.5. Tekst // Znaczniki Znacznik Znaczenie em wyróżnienie (domyślnie: kursywa), zalecane zamiast i, bo niektóre czcionki nie mają kursywy! => wtedy em oznacza coś innego np. pogrubienie strong tekst o większym znaczeniu (domyślnie: pogrubienie); zalecane zamiast b ins tekst wstawiony, podkreślenie, odpowiednik niezalecanego u del tekst przekreślony, skreślenie, odpowiednik niezalecanego strike big powiększenie tekstu; zagnieżdżanie big w big jeszcze bardziej powiększa! small pomniejszenie sup indeks górny sub indeks dolny Znaczniki akcentujące (ale zamiast nich zalecane CSS) Znacznik Znaczenie abbr skrót acronym Akronim. cite Cytat (kursywa) code Kod programu (Courier New) dfn Definicja (kursywa) em Uwypuklenie (kursywa) kbd Tekst wprowadzony z klawiatury (Courier New) samp Przykład (Courier New) strong Pogrubienie var Zmienna (kursywa) Znaczniki niezalecane, które należy zastąpić stylami CSS: b pogrubienie tekstu i kursywa u podkreślenie, zastąpiony przez ins tt tekst depeszy dalekopisu (ang. teletype terminal), czyli stała szerokość znaków (coś jak Courier New) strike przekreślenie, zastąpiony przez del font czcionka Czcionka <font size= +3 color= green >Ala ma kota</font>//ale należy używać CSS i <span class= x > zamiast tego! span tylko do stylów odpowiednik div (używanego do elementów blokowych), ale do tekstu, nie może zawierać innych znaczników, nie dodaje ENTERa! <html> <style>.emphasis { color:red; text-decoration:underline; font-weight:bold; </style> <body> <span class= emphasis >Tekst wyróżniony.<span>//zalecane <span style= color:red >Tekst czerwony.<span>//nie zalecane </body> </html> 1.6. Listy Lista uporządkowana (numerowana) <ol>lista numerowana<li>jeden</li><li>dwa</li><li>trzy</li></ol>//1. 2. 3. <ol style= list-style-type: upper-alpha >//A. B. C. Atr. style Wartości list-style-type decimal, decimal-leading-zero, lower/upper-roman/greek/latin/alpha, none,... list-style-position inside (czy kolejna linijka w pkcie pod nr-em), outside (czy kolejna linijka w pkcie pod 1.znakiem w 1.linijce) list-style-image Inicjalizacja nr-u listy <ol start= 4 >//4. 5. 6. Preferowane CSS: <style type="text/css"> ol.ten { counter-reset: list 7 li { list-stype-type: none; li:before { content: counter(list, decimal) ". "; counter-increment: list; </style> Wiele właściwości listy <ol list-style: list-style-type list-style-image list-style-positions > Lista nieuporządkowana (punktowana) <ul>lista punktowana<li>jeden</li><li>dwa</li><li>trzy</li></ul> Atr. style list-style-type list-style-position list-style-image Wartości disc, circle, square, none jak dla listy uporz. url(images/ball.png) Lista definicji <dl>lista definicji <dt>el1</dt>//termin <dd>def1</dd>//definicja <dt>el2</dt> <dd>def2</dd> </dl> 4/22
Lista zagnieżdżona?? Lista pozioma http://css.maxdesign.com.au/listutorial/horizontal_master.htm <ul class= horiz_list > <li><a href= # >About me</a></li> <li><a href= # >Hobby</a></li> <li><a href= # >IT</a></li> <li><a href= # >About me</a></li> <li><a href= # >Misc</a></li> <li><a href= # >Work</a></li> </ul> style.css.horiz_list { display: inline; 1.7. (Hiper)łącza <a href= http://www.google.pl >Google</a> <a href= ftp://ftp.funet.fi/pub/readme >Readme </a> <a href= mailto:zapf@vp.pl >Mail to zapf</a> Protokoły: http:, ftp, mailto: Łącza względne <a href= images/ball.png >Ball</a> Łącza bezwzględne <a href= http://www.google.pl >Google</a> <a href="file:///c:/ball.png">ball</a> Okna łączy <a target= _blank >//wyświetlenie w nowej zakładce <a target= _self >//wyświetlenie w tej samej zakładce <a target= _parent >//wyświetlenie w oknie nadrzędnym (?) <a target= _top >//wyświetlenie w głównym oknie przeglądarki + zastąpienie ramek (?) <a target= nazwa >// wyświetlenie doku w oknie o podanej nazwie np. B zawsze gdy klikamy link na stronie A to odświeża się ta sama strona B! Link otwarcia nowego pustego okna przeglądarki + link otwarcia w tym oknie czegoś: <script language="javascript"> function NewWindow() { fin = window.open("", "INFO", "width=400, height=400"); </script> <body> <a href="javascript:newwindow();">otwórz okno</a><br/> <a href="file:///c:/ball.png" target="info">ball</a> </body> Zdarzenie skryptu <a href= # onclick= fun(); >do</a> //uzup. z http://pornel.net/onclick Skróty klawiaturowe w Firefoxie: Alt+Shitf+accesskey <a href= http://www.wp.pl accesskey= t >wp</a> Kolejność zaznaczania łączy przez TAB <a tabindex= 3 <a tabindex= 1 <a tabindex= 2 Kotwica <a href="#2">go to two</a> <a id="2">two</a><br/> <link> <link> Zmiana kolorów łącza stan standardowy łącza <style>a:link {color: #000000; font-family: verdana, palatino, arial, sans-serif; font-size: 10pt; text-decoration: underline; </style> łącze wyświetlane w innym oknie <style>a:active {... </style> łącze już kiedyś kliknięte <style>a:visited {... </style> gdy kursor nad łączem <style>a:hover {... </style> Parametry dokumentu docelowego //s.122-124, nie wiem po co to... oprócz oczywiście dołączania CSSów 1.8. Tabele Do projektowania layout, podobnie jak <div> <table> <tr><th>name</th><th>surname</th></tr> 5/22
<tr><td>zbysio</td><td>f</td></tr> </table> Atrybut Wartość Znaczenie border int szerokość ramki, 0 = nie widać ramki Wersja skrócona tabeli <table border="1"> <tr><td>dane 1</td><td>Dane 2</td></tr> </table> Wersja pełna tabeli <table border="1"> <caption>podpis</caption> <thead> <tr><td colspan="2">nagłówek</td></tr> </thead> <tbody> <tr><th>kolumna 1 nagłówka</td><th>kolumna 2 nagłówka</th></tr> <tr><td>dane 1</td><td>Dane 2</td></tr> </tbody> <tfoot> <tr><td colspan="2">stopka</td></tr> </tfoot> </table> Szerokość i wyrównanie tabeli (względem znacznika-rodzica tabeli, a nie koniecznie okna przeglądarki!) <table width= 50% <table width= 500px >//ale if (znacznik-rodzic not scrollable) rozmiar może być obcięty do bloku-rodzica! //poszczególne el. tabeli <th, td, col, colgroup width= 50% > Odstępy i otaczanie komórek <table cellspacing= 10px //odstęp między komórkami <table cellpadding= 10px //odległość zawartości od krawędzi komórki Obramowanie <table border= 1 Rodzaj obramowania <table frame= void/above/below/hsides/lhs/rhs/vsides/box/border Rodzaj (widoczność) krawędzi <table rules= none/groups/rows/cols/all Wiersze <table> <tr>a</tr> <tr>b</tr> </table> Wiersze atrybuty <tr align= right/left/center/justify/char char= x //znak, który wypełnia wyrównanie tekst komórki jeśli ustawimy align= char charoff= 10px/10% //odl. znaku wyrównania od zawartości wiersza valign= top/bottom/middle/baseline //wyrównanie poziowe > Komórki - atrybuty <td abbr align axis //etykieta gdy tabela umieszczona w przestrzeni n-wymiarowej char charoff colspan headers rowspan scope valign nowrap //zalecany CSS zamiast tego > Podpis tabeli <caption>podpis</caption> Nagłówek, treść, stopka - opcjonalne <thead> <tfoot> <tbody> //zalecenie: w takiej kolejności jw. //zalecenie: albo zastos. Wsje 3, albo żadnej! Kolor tła niezalecane: <table bgcolor= red zalecane: <table style= background-color: red Rozciąganie komórki na kilka wierszy/kolumn <td rowspan= 2 > <td colspan= 2 > Grupowanie komórek <colgroup> <col></col> <col style= background-color: red ></col> </colgroup> 1.9. Ramki = niezależne, przewijane obszaru doku treść ramki zmieniana niezależnie od innych ramek o dobre do podziału strony na niezależne: nagłówek + menu + treść, bo można osobno przewijać zawartość, a menu się nie przewinie => nie zniknie z okna przeglądarki! 6/22
Ramka <frameset> Def. rozmieszczanie ramek <frameset> Zbiory ramek plik zbioru ramek można tylko znaczniki: <frameset> zamiast <body> i <frame> wewnątrz! <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/tr/html4/frameset.dtd ><html>... <frameset cols= 25%, 75% >//lub rows, zamiast np. 75% można: 75px lub * (wykorz. cały pozosały obszar) <frame > </frameset> </html> <frameset> <frameset cols= 25%, 75% > <frameset rows= 250px, 750px >//if (okno.rows > 1000px) drugi rząd rozciągnięty do max zamiast 750px <frameset rows= 50%, * >//* = wykorz. cały pozosały obszar (czyli 50% okna) <frameset rows= 50%, *, * >//3 wiersze: 50% okna przeglądarki, 25% i 25% Atrybut border Znaczenie 0 całkowite ukrycie obramowania (bo dla <frame frameborder= 0 > jednak zostaje cienka biała linia!) <frame> <frameset rows= 50%, *, * > <frame name= src= > </frame> </frameset> Atrybut Znaczenie frameborder 0 bez obramowania, 1-z obr. longdesc adres doku dłuższego opisu ramki; nie obsługiwany przez większość przeglądarek :/ marginheight górny + dolny margines ramki [px] marginwidth... scrolling yes/no/auto noresize blokuje zmianę rozmiaru ramki; to znacznik bez wartości, czyli piszemy: <frame noresize>...<frame> Odsyłacze do ramek aby zmienić treść ramki np. ramki treści strony za pomocą ramki menu ramka menu: <a href= http://google.pl target= content >//kliknięcie spowoduje otwarcie google w ramce content Atrybut <a> target Znaczenie nazwa ramki docelowej href u; wartości: ramka1, _blank - wyświetl. doku w nowym oknie _parent wyświetl. doku nadrzędnej ramce danej ramki _self wyświetl. doku w danej ramce _top - wyświetl. doku w danym oknie, bez ramek Zagnieżdżone zbiory ramek <frameset rows="160px, *"> <frame name="header" src="header.html"/> <frameset cols="180px, *"> <frame name="menu" src="menu.html"/> <frame name="content" src="content.html"/> </frameset> </frameset> Ramki pływające // Pełny przykład 3 ramki w stylu: header (na górze), menu (po lewej), content (po prawej)./src/test/frame Ramka wewnątrz innej ramki <iframe> Dokument PDF wewnątrz HTML w przeglądarce <iframe src="files/1.pdf" width="100%" height="500"></iframe> 1.10. Formularze <form action= skrypt.js > Name <input type= submit name= name /><br/> Age <input type= radio name= age /><br/> <select name= gender > <option name= male >Male</option> <option name= female >Female</option> </select> </form> Wywołanie skryptu <input onchange= fun();...>fun</input> etykieta pola <label for="name">name</label> zwykłe pole tekstowe <input id="name" type="text" size="20" maxlength= 20 /> password <input type="password" size="20"/> lista opcji, drop-down list <select id="gender"> <option id="male">male</option> 7/22
<option id="female">female</option> </select> lista opcji pogrupowana <select id="day"> <optgroup label= Dni wolne > <option>sobota</option> <option>niedziela</option> </optgroup> <optgroup label= Dni robocze > <option>poniedziałek</option>... </optgroup> </select> pole wyboru <fieldset> <legend>pola</legend> <input type= checkbox checked= checked value= 1 >1</input> <input type= checkbox value= 2 >2</input> </fieldset> przyciski opcji name określa nazwę grupy <fieldset> <legend>radio</legend> <input type="radio" name="nr" value="1" checked= checked >1</input> <input type="radio" name="nr" value="2">2</input> </fieldset> obszar tekstowy <textarea cols= 20 rows= 3 >Wartość domyślna</textarea> atr. wrap przedawniony, bo był różnie obsługiwany pole ukryte <input type= hidden /> zastos: zapamiętanie danych przesył. podczas częściowego zatwierdzania formularza (na stronie1) przycisk <input type= button onclick= buynow() /> rysunek <input type= image src= 1.jpg > if (wewnątrz form) kliknięcie spowoduje przejście do strony docelowej formularza (tak jak przycisk submit). else trzeba: <input type= image src= 1.jpg onclick= skrypt() > pole pliku <input type= file > Ale trzeba zastos. POST a nie GET + format pliku multipart, więc to pole tylko w formularzu o postaci zbliżonej do: <for action= program_obsługi.cgi metod= post entype= form/multipart > przycisk przesyłania danych <input type="submit"/> przycisk czyszczenia pól <input type="reset"/> atrybuty kontrolek tabindex kolejność uaktywniania kontroler po wciśnięciu TAB accesskey def. klawisza, po wciśnięciu którego kontrolka aktywna (zwykle Alt+litera) readonly disabled nie można zaznaczyć grupy kontrolek <fieldset> <legend>//etykieta ramki grupującej <input...> </fieldset> Zdarzenia index.html <html><script type= text/javascript > function eval_eq() { var x = document.getelementbyid( equation ).value; document.getelementbyid( results ).value = eval(x); </script> <form> Eq<input type="text" id="equation"><br/> Res<input type="text" id="results"><br/> <input type="button" onclick="eval_eq()"><br/> <form> </html> Rodzaje zdarzeń onclick, onfocus, onkeypress, onmouseover, onresize, onsubmit,... >ks.html.s.185 Skrypty formularzy weryf. danych, zapis danych w pliku/bd języki: Perl, Python, PHP gotowe skrypty CGI 1.11. Kolory Atrybut Wartość Przykładowa wartość Znaczenie color string red, green, blue kolor, http://www.w3schools.com/html/html_colornames.asp hex #FF0000, #00FFF00,#0000FF dec rgb(255,0,0), rgb(100%,0%,0%) Kolor tekstu <style> body { color: white; 8/22
</style> Kolor tła niezalecane <body bgcolor= red > zalecane <style> body { background-color: blue; </style> Tło - obrazek niezalecane <body background= images/ball.png > zalecane <style> body { background-image: url( images/ball.png ); </style> Paleta 216 kolorów ks.html.s.192-197 1.12. Rysunki Rysunki: rozmieszczanie, obramowanie <img src= files/1.jpg alt= Opis rys. height= 100px width= 50px > atr. align= top/bottom/right/left/middle przedawniony na rzecz CSS: text-align, float, vertical-align - if (brak atr. height+width) strona nie może z góry zarezerwowoac prostokąta => reszta elem. czeka na załadowanie rysunku :/ - atr. height+width w px albo % Obramowanie CSS border, border-top/right/left/bottom border-color, border-top/right/left/bottom-color border-style, border-top/right/left/bottom-style border-width, border-top/right/left/bottom-width 4px obramowania wokół rys. <img style= border: 4px solid black > 1.13. Mapy obrazu =def. fragm.. obrazu osobno klikowalnych np. mapa Polski z województwami <img alt= Opis src= files/circles.png usemap= #map1 > <map name= map1 > <a href=... shape= rect coords= 238, 302, 463, 463 > <a href=... shape= circle coords= 394, 119, 76 alt= opis >//znaczniki a i area - zamiennie <a href=... shape= poly coords= 164, 44, 191, 130, 274, 130, 206, 181 > </map> Obszary obrazu clickable <img src="images/rgby.bmp" usemap="#rgby_map"/> <map name="rgby_map"> <area shape="rect" coords="0, 0, 100, 100" href="http://www.wp.pl" title="wp" alt="wp" /> <area shape="rect" coords="0, 100, 200, 200" href="http://www.google.pl" title="google" alt="google" /> <area shape="rect" coords="100, 0, 200, 100" href="http://www.onet.pl" title="onet" alt="onet" /> <area shape="rect" coords="200, 0, 300, 200" href="http://www.interia.pl" title="interia" alt="interia" /> </map> 1.14. Obiekty multimedialne Reguły przeglądarki zawsze musza mieć określ. pluginy do obsługi obiektów multimedialnych! pliki multimedialne wewnątrz przeglądarki najlepiej odtwarzać przez umieszczanie ich treści w pliku Flash, bo większość przeglądarek ma wbudowany odtw. Flash Player unikać <a> do plików multimedialnych, stosować <object> / <embed> Obrazy najpopularniejsze: GIF, JPEG, PNG obraz z podkatalogu images, rozciągnięty do rozmiarów 100x100 pixeli, a jeśli brak obrazka, to wyświetli się napis Piłka <img src= images/ball.jpg alt= Piłka width= 100 height= 100 /> obraz z katalogu głównego images <img src= /images/ball.jpg.../> <object data/classid= plik.np._mpeg type= typ_mime_pliku codebase= wersja_pluginu_do_odtworz.obiektu > <param name= loop value= true />//dla Flash Player ustaw. aby animacja odtwarzała się cyklicznie </object> <embed> - przestarzały, dla starszych przeglądarek Windows Media Player 6 na stronie HTML znacznik <object> ks.html.s.231 Animacje tworzenie: Adobe Firefworks, tucows, Winfiles 9/22
Dźwięk warunek: w OSie musi być określ. domyślny odtw. pliku dźwiękowego! metoda 1 <bgsound src= files/1.mp3 loop= liczba_odtworzeń /> metoda 2 <embed...> Tworzenie plików multimedialnych płatny program Adobe Premier 1.15. Znaki specjalne Encja Znak spacja, kod mnemoniczny < < & & #169;, wartość dziesiętna #xa9;, wartość szesnastkowa Strzałki Spacja o zerowej szerokości nie widać odstępu, ale można w tym miejscu wydzielić tekst do nowego wiersza Przydatne gdy w wąskiej kolumnie tabeli mamy długą liczbę np. 1 234 567 890 to możemy przedzielić po 1, 4 i 7, bo co 3 cyfry http://konfiguracja.c0.pl/webpl/encje.html http://www.w3.org/tr/html4/sgml/entities.html Kodowanie <meta http-equiv="content-type" content="text/html; charset=windows 1250"> 1.16. I18n lokalizacja strony = umieszczenie na serwerach w różnych częściach świata Atrybut Wartość Znaczenie lang string język np. pl, en, en-us, http://tools.ietf.org/html/draft-alvestrand-lang-tags-v2-00 Tłumaczenie stron http://babelfish.yahoo.com/ Kodowanie w przeglądarce <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> HTML 5 krócej: <meta charset="utf-8"> zamiast: <meta http-equiv="content-type" content="text/html; charset=utf-8"> 1.17. Skrypty ->IT.JavaScript skrypty = logika aplik., algorytmy Skrypty klienckie = skrypty wykonywane po stronie klient przez przeglądarkę; najpopul. język skryptów klienckich = JavaScript, inne: JScript, VBScript osadzone w stronach HTML zaleta: nie wnoszą obciążenia na serwerze wada 1: wymagają od przeglądarki obsługi języka skryptowego wada 2: nie mogą zapis/odczyt. danych z OSu jednostki klienta/serwera Skrypty serwerowe wyk. przez serwer WWW zwane skryptami CGI obciążenie serwera, z reguły brak obciążenia klienta np. język Perl, Python, PHP, Java, ASP, ASP.NET, nie mogą odczyt/zapis. danych z maszyny klienta, ale z serwera - tak Wywołanie funkcji JavaScript otwierającej nowe okno w przeglądarce na stronie Google <html> <script type= text/javascript > function MiscWindow(w, h, url) { opts = "width=" + w + ",height=" + h; opts += ",scrollbars=no,resizable=yes"; var fin = window.open(url, "", opts); </script> <body> <a href="javascript:miscwindow(600, 400, 'http://www.google.pl');">otwórz okno</a><br/> </body> </html> 10/22
Pobranie skryptu z zewn. pliku index.html <script type= text/javascript src= skrypty.js ></script> Zastos. skryptów zdarzenia: onchange, onselect (weryf.danych formularza), onclick, onmouseout (animowanie obrazków zależnie od pozycji kursora), onclick, ondblclick (1/dwuklik myszy) operacje na polach formularzy Ukrycie skryptu przed starszymi przeglądarkami <script type= text/javascript src= skrypty.js > <!-- [kod skryptu] //koniec części ukrytej--> </script> 1.18. DHTML DHTML + dane z serwera = AJAX DHTML = HTML + CSS + JavaScript modyf. zawartości strony DOM (Document Object Model) obiektowa repr. doku HTML, jako drzewo podznaczników aby dostęp do elementów HTML z JavaScript Obiekt document - właściwości attributes mapa childnodes firstchild lastchild nextsibling nodename nodetype nodevalue albo value ownerdocument parentnode previoussibling Obiekt document metody JavaScript appendchild(nowywęzeł) clonenode(wdół) if (wdół==true) kopiuj wsje atrybuty + podwęzły createelement(el) createtextnode( text ) getattribute( a1 ) getelementbyid(1) getelementsbytagname(el) haschildnodes() insertbefore(nowyel, staryel) removechild(el) replacechild(nowyel, staryel) setattribute(atr, wartość) Przykład = funkcja kopiująca tekst z pola1 do pola2, wywołana za pomocą akcji przycisku <script type= text/javascript src= skrypty.js > function copy() { document.getelementbyid("pole2").value = document.getelementbyid("pole1").value; </script> <form> Pole1<input type="text" id="pole1"><br/> Pole2<input type="text" id="pole2"><br/> <input type="button" onclick="copy()" value="copy"><br/> <form> ECMAScript = standardowa wersja JavaScript, dla różnych przeglądarek Obiekty DOM używane w kodzie JavaScript w celu dostępu do strony HTML window okno przeglądarki metody open( stronadocelowa.html, nazwaoknadocel, width=800,height=600,scrollbars=yes,resizable=yes,toolbar=yes,location=yes,status=yes ) moveby(10,10) scroll(), scrollby(), scrollto() resizeby(),resizeto() document właściwości form dostęp do obiektów formularza właściwości: length, elements image location = info o adresie aktualnej strony: protokoł, host, port właściwość href = pełny URL history historia przeglądarki np. history.back() = cofnięcie do poprz. Strony this = obiekt, który wywołał funkcję JavaScript metody write, writeln getelementbyid().length użycie obiektu window.document - wyświetlenie aktualnej daty w nowym oknie skrypty.js function datewindow() { var today = new Date(); var newwin = window.open("", "", "width=400,height=300,scrollbars=no,resizable=yes"); var newdoc = newwin.document.open();//trzeba najpierw otworzyć dok. przed zmianą jego zawartości newdoc.write(today.getday() + "/" + (today.getmonth()+1) + "/" + today.getfullyear()); 11/22
newdoc.close(); index.html <input type="button" onclick="datewindow()" value="date"/> użycie obiektu form - dostęp do formularza skrypty.js document.form1.pole1.value =... document.form1.pole1.value.length =...;//długość tekstu w polu document.form1.checkbox1.checked = true;//akcja zaznaczenia pola użycie obiektu this index.html <p onclick= changecolor(this); >Po kliknięciu będzie kolor czerwony</p> skrypty.js function changecolor(el) { el.style.color = red ; albo bez osobnej funkcji JS: <p onclick= this.style.color= red >Po kliknięciu będzie kolor czerwony</p> Wykrywanie przeglądarki <script type= text/javascript > var bname = navigator.appname; var bver = parsefloat(navigator.appversion); if (bname = Netscape )... </script> Wykrywanie dostępu właściwości/metody obiektu <script type= text/javascript > if (document.getelementbyid)... if (document.regexp)... </script> Przykładowe skrypty DHTML wskaźnik położenia strony s.298-302 1.19. XHTML Zasady jawne zamykanie wsich znaczników wartości atrybutów zamykane w cudzysłowach/apostrofach każdy atrybut musi mieć wartość wielkość liter nazw znaczników ma znaczenie 1.20. Rozwijane menu http://www.drzewo-wiedzy.pl/?page=artykul&id=45 index.html <ul id="sddm"> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">home</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">html DropDown</a> <a href="#">dhtml DropDown menu</a> <a href="#">javascript DropDown</a> <a href="#">dropdown Menu</a> <a href="#">css DropDown</a> </div> </li> <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">download</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">asp Dropdown</a> <a href="#">pulldown menu</a> <a href="#">ajax dropdown</a> <a href="#">div dropdown</a> </div> </li> <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">order</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">visa Credit Card</a> <a href="#">paypal</a> </div> </li> <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">help</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">download Help File</a> <a href="#">read online</a> </div> </li> <li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">contact</a> <div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#">e-mail</a> <a href="#">submit Request Form</a> <a href="#">call Center</a> </div> </li> </ul> style.css #sddm { margin: 0; padding: 0; z-index: 30 #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial 12/22
#sddm li a { display: block; margin: 0 1px 0 0; padding: 4px 10px; width: 60px; background: #5970B2; color: #FFF; text-align: center; text-decoration: none #sddm li a:hover { background: #49A3FF #sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; background: #EAEBD8; border: 1px solid #5970B2 #sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #EAEBD8; color: #2875DE; font: 11px arial #sddm div a:hover { background: #49A3FF; color: #FFF menu.js var timeout = 500; var closetimer = 0; var ddmenuitem = 0; // open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getelementbyid(id); ddmenuitem.style.visibility = 'visible'; // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // go close timer function mclosetime() { closetimer = window.settimeout(mclose, timeout); // cancel close timer function mcancelclosetime() { if(closetimer) { window.cleartimeout(closetimer); closetimer = null; // close layer when click-out document.onclick = mclose; 1.21. Htpasswd - dostęp chroniony do katalogów strony http://www.htaccesstools.com/htpasswd-generator/ trzeba w katalogu chronionym stworzyć 2 pliki:.htpasswd tu hasło wygenerowane ze specjalnego generatora na jakiejś stronie zfabijan:bffckua10ainc.htaccess ścieżka do.htpasswd AuthName "Podaj haslo" AuthType Basic AuthUserFile /home/mion/s/36/zfabijan/.homepage/pw/.htpasswd AuthGroupFile /dev/null Require valid-user 1.22. Programy do projektowania stron Edytory HTML WYSIWYG Adobe Dreamweaver NetObject Fusion Inne narzędzia Micromedia Flash MX do Adobe Flash 13/22
1.23. Publikacja witryn (FTP) FTP poł. na Windowsie: pasek zadań -> Start -> Uruchom -> cmd -> wpisać ftp -> podać serwer np. zapf86.yoyo.pl -> podać nazwę usera i hasło i już port 20 = dane, 21=polecenia polecenia klienta FTP ascii przełącz tryb plików na ASCII binary tryb plików na binarny cd zmiana kat. na serwerze close koniec poł. z serwerem get pobranie pliku z serwera lcd zmiana kat. na kompie lokalnym ls mget pobranie wielu plików z serwera mkdir mput przesyłanie wielu plików na serwer user poł. danego usera pasv put quit koniec pracy z klientem FTP rmdir usunięcie kat. z serwera open inicjacja nowego poł. z serwerem 1.24. Mikroformaty Mikroformaty = technologia do oznaczania danych w doku HTML i zapewnienia możliwości wymiany tych danych z innymi stronami zapewnia łączność między stronami i dokumentami HTML na poziomie danych =połączenie HTML + XML np. hcard przekaz info o kontaktach między programami np. Outlook (imię, nazwisko, adres, tel, mail, zdjęcie) o = to jest po prostu klasa CSS vcard znacznika div i np. wtyczka Firefox Operator może importować tego div a jako kontakt do Outlooka więc chyba mikroformaty są mało przydatne i popularne... 1.25. Urządzenia przenośne XHTML Basic = minimalny podzbiór znaczników XHTML dla urządzeń mobilnych, które mają ograniczone możliwości sprzętowe, różnią się sposobem obsługi i poł. z Internetem 1.26. Walidacja dokumentów Porządkowanie kodu: program HTML Tidy 1.27. Sztuczki i triki Wstępne wczyt. obrazków Podział tekstu w komórkach tabeli Pasek tytułu o zmiennej szerokości Gazetowy układ kolumn Szybsze wczyt. rysunków przez zdef. width i height w <img> - wtedy przeglądarka zna rozmiar rysunku i może zarezerwować obszar i wczytać najpierw resztę strony Zabezpieczenie adresów e-mail 2. CSS Zalety separacja struktury strony (dokument HTML) od prezentacji (arkusze stylów CSS) można prezentować odmienne style dla różnych userów, grup odbiorców, urządzeń 2.1. Podstawy W znacznikach HTML <style type= text/css >.emphasis { color: red; text-decoration: underline; font-weight: bold; </style> <body> <div class= emphasis >Ala ma kota</div> </body> Sekcje w HTML <style type= text/css > </style> Plik CSS klasy konkretnych znaczników.emphasis {... //zadziała dla dowolnego znacznika 14/22
div.content {... //zadziała dla <div class= content >, nie zadziała dla pozostałych znaczników np. <span class= content > div.content a {... //dla wszystkich znaczników <a> wewnątrz <div class= content > Odwołanie do id znacznika HTML w style.css #moje_id {... Odwołanie do znaczników wewnętrznych znacznika o danym id #moje_id ul li {... Komentarze tylko /**/, bez // ew. <!-- -->, ale tylko jeśli CSS wewnątrz HTMLa w sekcji <style> - ale to może nie działać poprawnie Moje domysły kropki przed nazwą klasy oznaczają, że danej nazwy używamy w cudzysłowach, bo jeśli zadeklarujemy klasę body bez kropki, to będzie się tyczyć znacznika <body> więc klasy styli dotyczące całych znaczników mają nazwę bez kropki przed nią 2.2. Reguły stylów Selektor =wyrażenie wskazujące elementy, których dotyczą właściwości reguły stylu selektor { wyrażenie1: wartość1; wyrażenie2: wartość2; rodzaje selektorów wiele elementów h1, h2, h3 {... wszystkie el. * {... selektor znacznika wewnętrznego td w tr td może być bezpośrednio (synem) lub pośrednio (innym potomkiem) td tr td {... określenie że znacznik table ma być bezpośrednio synem <div class= div1 > div.div1 > table j.w. ale 2 dzieci rodzeństwo table i p div.div1 > table + p wszystkie znaczniki pomiędzy td a ol tr * ol {... selektor dowolnego znacznika danej klasy *.klasa {....klasa {... selektor znacznika a klasy k a.k {... dopasowanie do id znacznika #myid {... dopasowanie do wartości dowolnego atrybutu znacznika table[border= 3 ] {... dopasowanie do znacznika zawierającego dany atrybutu (a jego wartość nieistotna) table[border] {... połączenie wskazania na klasę znacznika i wartość atrybutu table.datalist[border= 3 ] {... dopasowanie do listy wartości atrybutu oddzielonej spacjami (~=) lub łącznikami ( =) [language~= us ] [language = us ] 2.3. Jednostki jednostki SYMBOL in cm mm pt NAZWA cal milimetr punkt, dla CSS2 pt=1/72 cala zastos: td {border: 2pt; pc pica, 1pc=12pt em jednostka rozmiaru danej czcionki ex jednostka wysokości znaku x px % np. width=50% = połowa szerokości el. nadrzędnego np. -20% rgb(0,0,0) rgb(0%,0%,0%) #rgb #rrggbb deg kąt w stopniach grad kąt w steradianach rad kąt w radianach s sekunda ms milisekunda Hz, khz częstotliwość w hercach, używane w stylach dot. dźwięków url() np. url( files/1.png ), url( http://wp.pl ) słowa kluczowe kolor: black, white, red,... obramowanie: thin, solid/dotted ->ks.html.dodatek A inherit odziedziczenie po el. nadrzędnym np. p { border: inherit 15/22
bez jednostki = większość przeglądarek traktuje jako px bez spacji między liczbą a jednostką! 2.4. Dziedziczenie i kaskadowanie dziedziczone tylko właściwości pierwszego planu niedziedziczone: tło, obraz dziedziczenie stylu od rodziców przez znaczniki potomne kolejność w pliku.css ma znaczenie! Dziedziczenie p { border: thin solid black; p.redbottom { border-bottom: thin dotted red; //a pozostałe krawędzie dziedziczone z p Kaskadowanie =mechanizm łączenia stylów przy stosowaniu ich do dokumentów style mogą pochodzić z różnych źródeł przykład To a:link { color: #003366; font-size: 10pt; a:visited { color: #D53D45; font-size: 10pt; Jest tym samym, co: a { font-size: 10pt; a:link { color: #003366; a:visited { color: #003366; Priorytety CSS CSS w znaczniku HTML > w osobnym pliku znaczniki <link href= 1.css > umieszczone później (w dalszych linijkach HTML) > wcześniej klasy w pliku CSS umieszczone później (w dalszych linijkach) > wcześniej oznaczenie!important.klasa { color: blue!important; specyficzność klas CSS, czyli priorytety przykład: A = liczba atrybutów id w selektorze B = liczba atrybutów i pseudoklas w selektorze C = liczba nazw elementów i pseudoelementów SELEKTOR A B C SPECYFICZNOŚĆ * 0 0 0 0 p 0 0 1 1 div p 0 0 2 2 ul ol+li 0 0 3 3 h1 + *[REL=up] 0 1 1 11 ul ol li.red 0 1 3 13 li.red.level 0 2 1 21 #columnhead 1 0 0 100 + dziedziczenie CSS p.bordered { border: thick solid black; border-top: thin solid red; //border-left/right/bottom dziedziczą po border, a border-top nadpisuje border! 2.5. Czcionki Atrybuty Atrybut Wartości color red font-family nazwa czcionki font-size 12pt, 150%, 1.5em, słowa kluczowe: xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller font-size-adjust stosunek wielkości czcionki do wysokości litery x font-style normal, italic, oblique font-variant normal, small-claps (małe kapitaliki) font-weight normal, bold, bolder, lighter, 100, 200... 900 font-stretch normal, wider, narrower, ultra/extra/-/semi-condensed/expanded text-decoration none, underline, overline, line-through, blink text-transform none, capitalize, uppercase, lowercase line-height interlinia, wysokość wierszy tekstu normal, 1.2em (rozmiar bezwzględny), 2 (2*większa wysokość wiersza), 200% (tez 2*większa) dekl. kilku czcionek, if (pierwsza niedostępna) użyj drugiej itd. font-style: Verdana, Arial, Times New Roman ; Zagnieżdżenie czcionki w dokumencie =własna/ściągnięta czcionka wady: dłuższe wczyt. strony, mniejsza elastyczność sposobu wyświetlania tekstu, brak standardu (2 różne obozy: OpenType i TrueDoc) typ czcionek OpenType Microsoftu: @font-face { font-family: Dax; font-weight: bold; src: url( files/fonts/dax.pfr ); typ czcionek TrueDoc, www.truedoc.com <link rel= fontdef src= files/fonts/amelia.pfr > 2.6. Formatowanie tekstu 16/22
Wyrównanie tekstu text-align: center/left/right/justify; text-align:, ;//Wyrównanie względem znaku Wyrównanie w pionie vertical-align: baseline/sub/super/top/text-top/middle/bottom/text-bottom/length/percentage Wcięcie 1.wiersza tekstu text-indent: 25px;//lub % szerokości bloku Znaki niewidoczne <pre> Wysświetli się z ENTERAMI i wieloma spacjami. </pre> = bez <pre> ale z CSS: white-space: pre; white-space: nowrap;//element niezawinięty w oknie przeglądarki zaleta CSS white-space: pre; nad <pre>: w <pre> zawsze czcionka o stałej szerokości, a z CSS taka, jak w oryginale ustawimy dla innych tekstów na stronie Obiekty przestawne nie wiadomo gdzie będą na stronie float: right; Odstępy między literami i słowami letter-spacing: normal/-.2em/.2em; word-spacing:...; Wielkie litery text-transform: none/capitalize/uppercase/lowercase; Dekorowanie tekstu text-decoration: underline/overline/line-through/blink(migotanie); text-shadow: red.1em -.05em 1em; //narysowanie drugiego tekstu, ale czerwonego i przesuniętego o 0.1em w prawo, o 0.05em w górę i rozmyte o 1em Automatyczne generowanie tekstu dodawanie tekstu przed/po znacznikiem dodawanie licznika 2.7. Tabele Obramowanie zarówno tabela, jak i jej komórki mają obramowanie: table, table * { border: 1pt solid black; jeszcze inaczej: table { border: outset 5pt; td, th { border: inset 5pt; odstępy table { border-spacing: 5px 15px; obramowanie osobne/złączone dla komórek table { border-collapse: separate/collapse; wyświetlanien pustych komórek table { empty-cells: show/hide; if (przeglądarka nie obsługuje empty-cells) aby wyświetlić pustą komórkę można wpisać w niej Układ graficzny table { table-layout: auto/fixed; Podpisy tabeli Podpis.html <table>... <caption>podpis</caption> </table> wyrównanie table { caption: top/bottom/left/right; caption { margin-left: 10px; vertical-align: middle; text-align: center; /*width: 10px;*/ //dla znacznika caption wyrównanie table { caption: ; 2.8. Listy Lista numerowana <ol><li>a</li></ol> Lista punktowana <ul><li>a</li></ul> Ale nie trzeba <li>, można dowolny znacznik! Np.: <ul> <li>a</li> <a style= list-style-type: decimal >a</a> </ul> 17/22
Markery = liczby/kropki/znaki poprzedzające elementy listy Typ listy ol { list-style-type: disc/circle/decimal/upper-roman/georgian/none/...; //>ks.html s.463 można osobny typ dla każdego elemetu! <ul> <li style= list-style-type: none >a</li> <li>b</li> </ul> Położenie punktów Pozycjonowanie markerów = zmiana położenia markera (znaku numerowania) względem tekstu list-style-position: inside/outside Punktory rysunkowe list-style-image: url( files/1.jpg ); 2.9. Obramowanie, odstępy, marginesy Model formatowania pojemnika pojemnik = prostokątny obszar przechowujący wsje elementy strony WWW; posiada właściwości: obramowanie, odstępy, marginesy Obramownie szerokość border-width: 5px/50%/thin/medium/thick border-top/right/left/bottom-width styl border-style: none/hidden/dotted/dashed/solid/double/groove.ridge/inset/outset border-top/bottom/left/right-style:... kolor ramki border-color border-top/bottom/left/right-color wszystkie właściwości ramki border: szerokość styl kolor border-top/bottom/left/right: szerokość styl kolor dynamiczne obramowanie to chyba takie jak się przechodzi tabulatorem między elementami strony HTML wsje strony obramowania musza być takie same outline-color outline-style outline-width outline: kolor styl szerokość zmiana dyn. obr. gdy element posiada focus/jest aktywny form *:focus { outline-width: thick; outline-color: green; form *:active {... Odstępy odstęp = przestrzeń między tekstem a ramką otaczającą tekst, czyli odstęp jest wewnątrz w porównaniu do marginesu padding, padding-top/bottom/right/left np. padding: 5px;//wsje odstępy = 5px padding: 5px 10px;//5px nad i pod elementem, 10px z lewej i prawej strony padding: 5px 10px 15px;//5px nad elementem, 10px z lewej i prawej strony, 15px pod elementem padding: 5px 10px 15px 20px;//5px nad elementem, 10px z prawej strony, 15px pod elementem, 20px z lewej strony np. padding: 200%;//odstęp 2*większy od wielkości czcionki Marginesy margines = przestrzeń między ramkami tekstu, czyli na zewnątrz w porównaniu do odstępu margin: 2px 4px 10px 4px; margin-top/bottom/right/left:... 2.10. Kolory i tło Kolor czcionki color:black; Kolor tła background-color:#c0c0c0; Podświetlanie tła po najechaniu myszką background-color:#c0c0c0; Inne background, border, border-color, border-top/right/left/bottom, border- top/right/left/bottom-color, outline, outline-color, text-shadow kolor pierwszoplanowy color: black; 18/22
tło background-color: red; obraz tła background-image: url( 1.jpg ); powtarzanie background-repeat: repeat/repeat-x/repeat-y/no-repeat/; sposób dołączenia tła do elementu background-attachment: scroll/fixed; //scroll=tło przewijane razem ze stroną pozycja tła background-position: pozioma pionowa; background-position: 20px 10px; background-position: 50% 50%; background-position: 20px 50%;//ale słów kluczowych nie można mieszać background-position: 20px;//20px od lewej strony w poziomie + domyślne wyśrodkowanie w pionie background-position: top center; wiele opcji background: background-color background-image background-repeat background-attachment background-position background: url( 1.jpg ) no-repeat top right; 2.11. Pozycjonowanie Szerokość, wysokość width: 400px; height: 200px; Odstępy między elementami?? padding:.5em Pozycja względna, bezwzlgędna position: relative; position: absolute; Pozycja względem brzegu strony top: 30px; bottom: 30px; left: 30px; right: 30px; Pozycjonowanie elementów HTML p. statyczne = elementy wewnątrz bloków width: 400px; height: 200px; border: 1pt solid black; background-color: white; padding:.5em; position: static; p. względne = względem standardowej pozycji statycznej elementu; zostawia miejsce na stronie (np. w tekście) takie, jakby element był w pozycji (top,left)=(0,0) px position: relative; top: 100px; left: 100px; p. bezwzględne = względme okna przeglądarki; nie zostawia miejsca na stronie, w przeciwieństwie do p.względnego position: absolute; p. stałe = jak p.bezwzględne, ale nie przewijane wraz ze stroną position: fixed; pozycja elementu: left: 25%;//przesunięcie elementu w lewo o 25% jego szerokości element zmniejszony do 25% szerokości okna przeglądarki, jego lewa prawędź na szerokości 25% przeglądarki, a prawa 50% szerokości position: absolute; left: 25%; right: 50%; /*width: 300px;//zgodnie z dziedziczeniem CSS, width przykryje right i element zwiększy szerokość, ale lewa krawędź pozostanie na 25% szer. Okna przeglądarki*/ Elementy dryfujące float: right/left/none; Szerokość, wysokość elementu width/height: 20px; min/max-width/height: 20px; Kontrola rozmiaru zawartość do rozmiaru pojemnika np. tekst w osobnej ramce if (za duży) może go być nie widać / można dodać scroll lub wyjść poza ramkę overflow: visible/hidden/scroll/auto; //visible = zawarość wyświetlona poza obramwoaniem //hidden = zawartośc zotanie przycięta, będzie niewidoczna i nieosiągalna //scroll //auto = przeglądarka decyduje o sposobie wyświetlenia Ułożenie nachodzących elementów z-index: 100; if (z-index < 0) element widoczny <=> tło przezroczyste/nie zasłania elementu Widoczność visibility: visible/hidden/collapse; //hidden = element niewyświetlany, ale jego odstep zostanie wyświetlony; aby nie wyświetlać też odstępu: właściwość display: none; 2.12. Pseudoklasy i pseudoelementy - do dynamicznego wstawiania styli Pseudoklasy 19/22
nieodwiedzona strona :link {... odwiedzona strona :visited {... aktywne łacza :visited {... łącze, nad którym znajduje się kursor :hover {... łącza w danym momencie używane przez usera :focus {... zastosowanie stylu w 1.elemencie potomnym znacznika wcięcie 1.akapitu p elementu div z klasy indent div.indent > p:first-child {text-indent: 25px; zależność od języka.quote:lang(en) { quotes: ;.quote:lang(fr) { quotes: << >> < > ; Pseudoelementy style 1.linijki i 1.litery tekstu :first-line :first-letter generowanie zawartości przed i po znaczniku dodanie cudzysłowu do tekstu w znaczniku klasy quote.quote:before { content: ;.quote:after { content: ; Właściwość content = automatyczne generowanie treści style.css div.tresc { content: Automatycznie wygenerowana treść znacznika div ; div.tresc2 { content: url( media/sound.wav ); index.html <div class= tresc >Ta treść zostanie zastąpiona przez właściwość content</div> Pseudoelementy :first-line 1.wiersz tekstu w akapicie :first-letter 1.litera tekstu w akapicie :before umieszczenie tekstu przed elementem :after -------- --------- po elemencie np. div.sidebar p:after {... np. cudzysłowy quote { quotes: '"' '"' "'" "'"; quote:before { content: open-quote; quote:after { content: close-quote; np. licznik elementów style.css h1:before { content: "Rozdział " counter(licznik) ". "; index.html <h1 style="counter-increment: licznik 1;">Jeden</h1> <h1 style="counter-increment: licznik 1;">Dwa</h1> <h1 style="counter-reset: licznik 0;">Zero</h1> Pseudoklasy znacznika <a> :link łącze nieodwiedzone :visited łącze nieodwiedzone :hover łącze po najechaniu kursorem myszy :a ctive łącze aktywne 2.13. Dynamiczny HTML i CSS Dostęp do właściwości CSS z JavaScript document. Zakres obsługi CSS2 przez obiekt DOM w Firefox i IE różnią się :/ Dostęp do właściwości CSS z poziomu JavaScript nazwa-właściwości w CSS = nazwawłaściwości w JavaScript np. index.html <p id= bigtext onclick= SuperSizeMe(this); >tekst</p> scripts.js function SuperSizeMe(obj) { obj.style.fontsize = xx-large ; Ale obj.style odwołuje się do atr. style znacznika, a jeśli chcemy odczytać wartość ustaloną w sekcji <style>: <style> #bigtext { font-size: medium; </style> to trzeba za pomocą specjalnych obiektów dostępu, różnych dla różnych przeglądarek: //Internet Explorer obj = document.getelementbyid( bigtext ); value = obj.currentstyle[ fontsize ]; //nazwa właściwości w JavaScript //Firefox obj = document.getelementbyid( bigtext ); objstyles = window.getcomputedstyle(obj, null); 20/22