HTML CSS
za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony
Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. <znacznik> element strony </ znacznik zamykający> <p> przykładowa treść akapitu </p> Typy znaczników - charakterystyka układu Znaczniki kontenerowe (połączone w pary). Znaczniki kontenerowe obejmują jakąś zawartość np: <div></div> <h1></h1> <p></p> Znaczniki samodzielne (uzupełniające). Znaczniki samodzielne nie obejmują elementu, uzupełniają stronę o dodatkową zawartość (obrazek, linię), np: <img> <br> <hr>
CSS - kaskadowe arkusze stylów Za pomocą arkusza stylów określamy wygląd wskazanych w pliku html kontenerowych i samodzielnych elementów.
CSS - typy arkuszy stylów 1. Zewnętrzny arkusz stylów - reguły css zapisane są w osobnym dokumencie tekstowym połączonym z dokumentem html. Adres kierujący do reguł umieszczony jest w nagłówku dokumentu html. <link rel= stylesheet type= text/css href= css/strona.css /> 2. Wewnętrzny arkusz stylów - reguły css zapisane są w nagłówku dokumentu html. <style type= text/css >.przykład { background-color: #9C6; } 3. Wewnątrzwierszowy arkuszu stylów - reguły css zapisane są wewnątrz znaczników języka html. <td style= border: 1px solid black >Wiosna</td>
Reguły css selektor {cecha:wartość; cecha:wartość; cecha:wartość} h1 { color: blue; } selektor - identyfikacja elementu blok deklaracji cecha wartość
Ćwiczenie 1 1. Na dysku twardym utwórz folder, nazwij go - Cwiczenie-1. 2. Otwórz program JTHTML. 3. Wpisz kod dokumentu HTML5 Z menu Wstaw wybierz polecenie Szkielet strony. W wyświetlonym oknie dialogowym Szkielet strony odszukaj menu Typ dokumentu, z którego wybierz pozycję HTML5. 4. W głównej części dokumentu wstaw znaczniki: Nagłówka poziomu pierwszego Akapitu Pomiędzy znaczniki nagłówka wpisz: Ćwiczenie pierwsze Pomiędzy znaczniki akapitu wstaw tekst zastępczy (Wstaw > Przykładowy tekst) 5. W katalogu Cwiczenie-1 zapisz dokument, nadając mu nazwę dokumenthtml.html 6. Utwórz arkusz stylu CSS. Z menu Plik > Nowy wybierz polecenie Arkusz stylów CSS. Zapisz dokument w katalogu Cwiczenie-1 pod nazwą ArkuszStyluCSS.css. W oknie Wybór kodowania zatwierdź domyślne ustawienia kliknięciem na przycisk OK. Korzystając z polecenia Zapisz w menu Plik zapisz dokument. 7. Połącz arkusz stylu CSS z dokumentem HTML. Przejdź do dokumentu dokumenthtml.html. W części nagłówka dokumentu tuż przed znacznikiem zamykającym </head> wstaw kursor. Za pomocą klawisza ENTER utwórz nową linijkę kodu. Przejdź do nowo utworzonej linijki kodu. Z menu Style CSS wybierz polecenie Zewnętrzny arkusz stylów. Zauważ, kursor znajduje się pomiędzy cudzysłowami atrybutu href przypisanego do znacznika <link>. Atrybut href to odnośnik do innych dokumentów. Pozostaw kursor w miejscu domyślnym. Z menu Wstaw wybierz polecenie Ścieżka względna. W wyświetlonym oknie dialogowym Wybierz plik, wskaż dokument Arkusz- StyluCSS.css. Zakończ umieszczanie ścieżki dostępu kliknięciem na przycisk OK. Zapisz zmiany wprowadzone do pliku.
8. Przejdź do dokumentu ArkuszStyluCSS.css. Utwórz nową linijkę kodu. Z paska Wstawianie wybierz zakładkę Style CSS. Kliknij na przycisk Kreator stylów. W wyświetlonym oknie dialogowym Kreator stylów CSS, w polu Wstaw z selektorem wpisz selektor znacznika - h1. Z menu Nazwy i rodziny czcionek wybierz pozycję: Arial,Helvetica,Verdana,FreeSans,sans-serif. Zaznacz pole pogrubienie. W polu Wielkość czcionki wpisz wartoś 36px. Z menu Kolor czcionki wybierz: Czerwony. Wprowadzone cechy i wartości do selektora h1 zatwierdź przyciskiem Wstaw. Zapis kodu: h1 { font: bold 36px Arial,Helvetica,Verdana,FreeSans,sans-serif; color: #FF0000; }
Inny zapis: h1 { font-family: Arial, Helvetica, sans-serif; font-size: 36px; font-weight: bold; color: #FF0000; } font-family, określa rodzinę fontów, np. Arial, font-size, określa wielkość czcionki, np. xx-small, x-small, small, medium, large, larger, smaller, Xpt, Xpx, Xcm, Xin, font, kumuluje wszystkie powyższe właściwości czcionek, font-weight, określa wagę (grubość) czcionki, np. normal, bold, bolder, lighter, 100, 200... 900, color, określa kolor fontu 9. Utwórz nową linijkę kodu. Z paska Wstawianie wybierz zakładkę Style CSS. Kliknij na przycisk Kreator stylów. W wyświetlonym oknie dialogowym Kreator stylów CSS, w polu Wstaw z selektorem wpisz selektor znacznika - p. Z menu Nazwy i rodziny czcionek wybierz pozycję: Times New Roman,Times,Georgia,FreeSerif,serif;. W polu Wielkość czcionki wpisz medium. Z menu Kolor czcionki wybierz: Czarny. Wprowadzone cechy i wartości do selektora p zatwierdź przyciskiem Wstaw. Zapis kodu: p { font: medium Times New Roman,Times,Georgia,FreeSerif,serif; color: #000000; } 10. Zapisz zmiany wprowadzone do plików. 11. Przetestuj stronę w przeglądarce
Klasy selektorów i ich definiowanie selektor.klasa {cecha:wartość} p.negatyw { background: #000000; color: #FFFFFF; } selektor - identyfikacja elementu.klasa blok deklaracji cecha wartość przypisanie klasy wybranemu znacznikowi HTML <p class= negatyw ></p>
1. Przejdź do dokumentu ArkuszStyluCSS.css. Utwórz nową linijkę kodu. 2. Z paska Style CSS wybierz przycisk Kreator stylów. W wyświetlonym oknie dialogowym Kreator stylów CSS, w polu Wstaw z selektorem wpisz selektor znacznika oraz klasę - p.negatyw. Z menu Kolor czcionki wybierz pozycję: biały. Przejdź do zakładki Tło, z menu Kolor tła wybierz pozycję: Czarny. Wprowadzone cechy i wartości do selektora p.negatyw - zatwierdź przyciskiem Wstaw. 3. Zapisz zmiany wprowadzone do pliku. 4. Przejdź do dokumentu Cwiczenie-1.html. 5. Wstaw kursor za znacznikiem zamykającym akapit. Wyborem klawisza ENTER, utwórz nową linijkę kodu. 6. Napisz selektor wraz z klasą negatyw dla akapitu. <p class= negatyw ></p> 7. Pomiędzy znaczniki wklej tekst zastępczy. 8. Zapisz zmiany wprowadzone do pliku. 9. Przetestuj dokument w przeglądarce.