Kaskadowe arkusze stylów (CSS) W trakcie projektowania własnego serwisu w języku HTML napotkamy problem z określeniem precyzyjnego pozycjonowania tekstu i grafiki oraz elastycznym formatowaniem tekstu. Te problemy mogą być rozwiązane przy pomocy stylów. Styl to po prostu zestaw parametrów dotyczących czcionki i akapitów, który przypisać można do określonego fragmentu tekstu. Aby zastosować styl w dokumencie HTML musimy wprowadzić poniższy zapis: 1. <style type="text/css"> 2. <!-- 3.... 4. --> 5. </style> Sam styl definiujemy pomiędzy drugim a trzecim wierszem i ma on postać: selektor {właściwość1: wartość1; właściwość2: wartość2} gdzie selektor oznacza dowolny znacznik któremu chcemy przypisać jakieś własności, np.: P { font-family: family: Helvetica; font-size: 12pt; color:blue} UL { font-weight: bold; color: #FF0000 } Aby ułatwić Tobie pracę ze stylami zebrałem najpopularniejsze własności styli i umieściłem je w pliku CSS.pdf, który znajduje się na dysku G w folderze zadania\html. Zadanie 1 Otwórz teraz w edytorze HTML plik wstep.html znajdujący się na dysku G w katalogu zadania/internet. Twoim celem będzie ustawienie następujących styli dla znaczników: body kolor tła na zielony, p kolor czcionki ustal na biały, wyrównanie tekstu wyjustowane, rodzina czcionek Arial, wielkość 12 pt. h1 tytuł stopnia pierwszego wyśrodkuj Zadanie 2 Utwórz teraz w edytorze HTML nowy dokument. W sekcji body umieść wizytówkę wprowadzając fikcyjne lub własne dane. Wprowadzając nazwisko i imię wykorzystaj znacznik nagłówkowy <h1>. Pozostałe wiersze opatrz znacznikiem akapitu <b> zaś odpowiednie elementy wyróżnij przez pogrubienie (znacznik <b>). Andrzej Kowalski Data urodzenia: 1 stycznia 1991 Miejsce urodzenia: Szczecin Wzrost 182 cm Waga 70 kg Oczy niebieskie czcionkę w pierwszym wierszu dla znacznika <h1> ustaw na kolor niebieski o rozmiarze 20 pt. rodzaj czcionki ustal Courier. Napis wyrównaj do środka. Korzystając z atrybutu border ustal obramowanie koloru czerwonego o rozmiarze 2 px w kolorze czerwonym kreskowane (dashed) -1-
tło ustal na kolor zielony, zaś domyślny kolor czcionki na czerwony (ustal to w znaczniku body. Wynik swojej pracy zapisz w pliku wizytowka.html na swoim dysku sieciowym. Zadanie 3 Język CSS przewiduje tworzenie tzw. klas, które pozwalają zróżnicować ten sam element (znacznik) zależnie od pojawiających się okoliczności. Jest oczywiste, że w większym dokumencie, składającym się z wielu akapitów, nie wszystkie akapity muszą mieć taki sam wygląd, np. czcionka Times, o rozmiarze 12 punktów, w kolorze czarnym. Może się przecież zdarzyć, że niektóre akapity będziemy chcieli wyróżnić pogrubieniem, inne zaznaczyć odmiennym kolorem, a jeszcze inne - mniejszą czcionką. Te "nietypowe" akapity możemy łatwo zdefiniować za pomocą klas i tylko w odpowiednim miejscu przywoływać stosowne definicje, podczas gdy gros tekstu będzie wyświetlane za pomocą podstawowego formatowania przewidzianego dla akapitu. Na przykład, definicja stylów akapitów w części nagłówkowej dokumentu może mieć taką postać: P {font-family: Helvetica; font-size: 10pt} P.wyrozniony { font-size: 14pt; font-weight: bold; color: navy;} Natomiast w samym tekście będziemy przywoływać klasy za pomocą polecenia <p class= wyrozniony >Akapit</p> Otwórz teraz dokument wizytówka.html, który modyfikowałeś w poprzednim zadaniu. Dodaj do niego nowa klasę o nazwie p.kolor. Tej klasy użyjemy aby akapit z kolorem Twoich oczu był ustawiony właśnie na ten kolor. Zapisz tak zmodyfikowany przez ciebie dokument na dysku. Zadanie 4 (odsyłacze) Podstawową ideą budowy serwisów www jest łączenie poszczególnych dokumentów odpowiednim zestawem hiperłaczy. Hiperłączem (odnośnikiem) w dokumencie HTML może być zarówno tekst, jak i obrazek. Hiperłącza definiuje znacznik <A> jego podstawowym atrybutem jest HREF za pomocą, którego określamy ścieżkę do dokumentu wyświetlanego po uruchomieniu hiperłącza. Najprostsze hiperłącze ma postać: <A HREF= nazwa dokumentu > Tekst hiperłącza </A> Otwórz teraz plik odsylacze.html znajdujący się na dysku g w katalogu zadania/internet. Umieść w nim odnośniki (możesz posłużyć się ikoną: ) do odpowiednich stron podanych w dokumencie. Znalezienie adresów tych stron nie powinno być dla Ciebie trudne. No może z jednym wyjątkiem. Aby utworzyć odnośnik do skrzynki pocztowej musisz użyć następującego znacznika: <A HREF= mailto: twój@adres.poczty.elektronicznej>..</a>. Zapisz tak zmodyfikowany dokument na swoim dysku sieciowym. Zadanie 5 Otwórz teraz zmodyfikowany plik wstep.html z Twojego dysku sieciowego. Dla znacznika nagłówka stopnia pierwszego ustal obramowanie wykropkowane o grubości 1 piksela w kolorze czerwonym. Aby to zrobić posłuż się następującymi atrybutami dla obramowania: border: 1px dashed #FF0000 Zapisz zmiany. -2-
Zadanie 6 (Tabele) Na stronie WWW można umieścić tabelę, która podobnie jak w edytorze Word może być wykorzystana do rozmieszczenia zawartości strony. Tworzymy ja za pomocą polecenia <TABLE>...</TABLE>, a poszczególne wiersze tabeli poprzedzamy poleceniem <TR>. Ponadto wiersz może być podzielony na komórki, każda poprzedzamy poleceniem <TD>. Między tymi znacznikami możemy umieścić tekst i grafikę. Oto przykład definicji tabeli złożonej z trzech wierszy i dwóch kolumn 1 : <TABLE> <TR> <TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD></TR> <TR> <TD> </TD><TD> </TD></TR> </TABLE> Utwórz teraz nowy dokument, zapisz go pod nazwą oceny.html. Zbuduj w nim tabelę podobną (no prawie) do poniższej: Przedmiot Ocena Matematyka 4 Informatyka 5 Biologia 6 Chemia 5 Średnia 5 Twoja tabela zapewne różni się od powyższej brakuje w niej obramowania, kolorów wypełnienia oraz w ostatnim wierszu przerywanej linii. Aby ustalić te elementy możesz posłużyć się stylami dla znacznika tabeli (<table>) i znacznika komórki (<td>). Możesz zdefiniować je np. w poniższy sposób table {border-width: 1px; border-color:red; border-style: solid; } td {border-width: 1px; border-style: solid;} W zadaniu tym musisz również posłużyć się dwoma klasami aby ustalić kolor i obramowanie pierwszego i ostatniego wiersza tabeli. Zapisz zmiany w dokumencie. 1 Uwaga: dla przejrzystości obrazu dokumentu w edytorze HTML warto umieszczać definicje wierszy tabeli jedną pod drugą, natomiast definicje kolejnych komórek obok siebie, co symuluje układ wierszy i kolumn w całej tabeli. -3-
Zadanie 7 Utwórz teraz nowy dokument HTML. W tym dokumencie zdefiniujemy klasy dla znacznika TD, tak aby otrzymać flagi niektórych państw, tak jak na rysunku poniżej: Polska Francja Włochy A oto przykładowe klasy: Monako TD ustaw szerokość na 100, zaś wysokość na 50 pikseli(klasa bazowa) TD.niebieski kolor niebieski TD.czerwony kolor czerwony TD.czarny kolor czarny TD.zielony kolor zielony Ćwiczenie zapisz jako flagi.html -4-
Zadanie 8 Definicję stylu możemy również umieścić w osobnym pliku (styl zewnętrzny), np. o nazwie styl.css wówczas jeśli chcemy go dołączyć do naszego dokumentu, to w nagłówku naszego dokumentu umieszczamy specjalny odsyłacz: Wówczas plik styl.css ma postać: <link href="styl.css" rel="stylesheet" type="text/css"> <style type="text/css"> <!-- selektor1 {właściwość1: wartość1; właściwość2: wartość2} selektor2 {właściwość1: wartość1; właściwość2: wartość2}... --> </style> Na dysku G w katalogu zadania/internet znajduje się folder serwis z projektem serwisu bazującym na stylach CSS. Skopiuj ów folder na swój dysk sieciowy a następnie dodaj do każdego pliku HTML odsyłacz do definicji stylu zewnętrznego znajdującego się w pliku style.css Zadanie 9 W tym ćwiczeniu posłużymy się tzw. selektorami pseudoklas dla odsyłaczy aby utworzyć efekt zwany ROOL OVER (zmiana np. koloru obramowania odsyłacza zależnie od jego statusu). Wyróżniamy następujące pseudoklasy związane ze statusem odsyłaczy: 1. a:link pozwala nadać formatowanie odsyłaczowi na stronie, na przykład: a:link {color:yellow; background: blue} 2. a:visited nadaje formatowanie odsyłaczowi już odwiedzonemu, na przykład: a:visited {color:green} 3. a:hover selektor nadaje styl elementowi, gdy urządzenie wskazujące, np. myszka, znajduje się nad elementem, ale nie aktywizuje go, na przykład: a:hover {background:blue; color:red} 4. a:active selektor :active formatuje we wskazany sposób aktywny w danym momencie element, np. kliknięty odsyłacz. a:active {background:olive; color:black} Otwórz teraz plik odsylacze.htm, który modyfikowałeś w jednym poprzednich ćwiczeń. Określ teraz kolor tekstu odsyłacza: nieodwiedzonego i odwiedzonego na żółty, tło na zielony. wskazanego przez mysz na tak aby kolor tekstu zamienia się na zielony zaś tła na żółty. Pracę zapisz na swoim dysku sieciowym. Zadanie 10 Wykorzystaj selektory pseudokras poznane w poprzednim ćwiczeniu dla znacznika H1, aby wzbogacić twoją wizytówkę z pliku wizytowka.html o ciekawy efekt. -5-
Zadanie 11 Otwórz teraz plik wstep.html zapisany na Twoim dysku sieciowym. Przejdź do jego edycji i dla znacznika body ustal korzystając z atrybutów margin-left, margin-right, margin-top rozmiar lewego i prawego marginesu na 10% zaś górnego na 5% Ustal szerokość i wysokość znacznika nagłówkowego H1 odpowiednio na 150px 40 px. Zapisz swoją pracę, ale nie zamykaj pliku. Zadanie 12 Elementy blokowe Dodaj następnie na początku sekcji body znacznik blokowy div postaci: <div class="blok"> Wizytówka </div> Ustal dla klasy blok następujące formatowanie: wysokość 100px, szerokość 50 px odstęp wewnętrzny (atrybut padding) na 10 pt obramowanie ciągłe o rozmiarze 3 px w kolorze brązowym tło elementu na kolor biały tekst wyśrodkuj. Zadanie 13 Pływanie elementów Każdy element na stronie można ustawić w dowolnym miejscu. Służą do tego następujące atrybuty: position, którego wartością najczęściej są dwa elementy: relative : Obiekt jest przesuwany ze swojej normalnej pozycji, a inne obiekty są wyświetlane tak, jak gdyby nie był przesunięty. - absolute left, right, top, określające położenie bloku względem w bloku nadrzędnym. np.: lub position: absolute; top: 50px; left: 100px; position: relative; top: 50px; left: 100px; Przesuń blok klasy blok w lewo o 250 px i w dół o 150px. Wypróbuj dwa atrybuty: absolute i relative i porównaj ich działanie. Zapisz tak zmodyfikowany dokument. -6-
Zadanie 14 Modyfikowanie szablonu strony Posiadasz już spore umiejętności, więc najwyższy czas na poważniejszy projekt Skopiuj na swój dysk domowy katalog strona_szkoly z dysku G. Otwórz dokument index.html do edycji. Dokument ten wygląda następująco: 1. <html> 2. <head> 3. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 4. <title>strona Główna</title> 5. <link type="text/css" rel="stylesheet" href="style.css"> 6. </head> 7. <body> 8. <div class="logo"> 9. </div> 10. <div class="menu"> 11. </div> 12. <div class="glowna"> 13. </div> 14. </body> 15. </html> Zauważ, że w linii 5 zawiera on już dowiązanie do istniejącego pliku ze stylami. Liniae8 9 zawiera blok, który służy do utworzenia logo z pliku logo.png Linie 10 11to blok do budowy menu, zaś linie 12 13 to blok w którym będzie pojawiała się treść. Otwórz teraz plik ze style.css, w którym będziesz modyfikował formatowanie poszczególnych bloków. Dopisz teraz wzorując się na poniższych opisach atrybuty dla poszczególnych znaczników lub klas: znacznik body: w tle dokumentu umieść obraz tlo.gif znajdujący się w katalogu grafika; domyślny rozmiar czcionki ustaw na 16pt; margines lewy ustal na 10% klasa logo w tle bloku umieść obraz logo.png znajdujący się w katalogu grafika o niepowtarzającym się elemencie i wyśrodkowany (background: url("grafika/logo.png") no-repeat center;) wysokość ustal na 150 px; obramowanie ustaw na kolor biały o rozmiarze 2 px kreskowane klasa menu w tle bloku umieść obraz logo.png znajdujący się w katalogu grafika o niepowtarzającym się elemencie i wyśrodkowany (background: url("grafika/logo.png") no-repeat center;) wysokość ustal na 150 px; klasa glowna tło bloku ustal na kolor żółty obramowanie 2px ciągłe w kolorze czerwonym szerokość bloku ustal na 750px -7-
Efekt Twojej pracy powinien być podobny do poniższego: Zadanie 15 Projekt szablonu (na ocenę) Przygotuj projekt szablonu strony internetowej koła informatycznego. Twój projekt powinien spełniać następujące kryteria: Kodowanie polskich znaków: iso8859-2 Wykorzystanie kaskadowych arkuszy styli zdefiniowanych w osobnym pliku. Powinien być podzielony na co najmniej 4 bloków takich jak: blok logo, blok, menu, blok tekstu, blok stopki dokumentu, itp. W bloku menu wykorzystaj efekt ROOL-OVER. W stopce dokumentu powinny znajdować się twoje dane, takie jak: imię i nazwisko, oraz adres e-mail. Powinien być przetestowany na co najmniej dwóch przeglądarkach, w tym w Internet Explorerze. Ocenianiu podlega również czytelność i estetyka szablonu. Możesz skorzystać z poniższego wzorca: -8-