Plik do pobrania

Podstawy HTML i styli CSS
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.
2.
3.
4.
5.
<style type="text/css">
<!-.........................
-->
</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 { fontfont-family: Helvetica; fontfont-size: 12pt; color:blue}
UL { fontfont-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-
Podstawy HTML i styli CSS
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.
) do odpowiednich stron podanych
Umieść w nim odnośniki (możesz posłużyć się ikoną:
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ó[email protected]>…..</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-
Podstawy HTML i styli CSS
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 kolumn1:
<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-
Podstawy HTML i styli CSS
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
Monako
A oto przykładowe klasy:
•
•
•
•
•
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-
Podstawy HTML i styli CSS
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:
<link href="styl.css" rel="stylesheet" type="text/css">
Wówczas plik styl.css ma postać:
<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-
Podstawy HTML i styli CSS
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.:
position: absolute; top: 50px; left: 100px;
lub
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-
Podstawy HTML i styli CSS
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.
2.
3.
4.
5.
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-2" />
<title>Strona Główna</title>
<link type="text/css" rel="stylesheet" href="style.css">
6.
7.
</head>
<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-
Podstawy HTML i styli CSS
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-