Kurs HTML i CSS.
Edycja strony, użycie CSS, zapis heksadecymalny kolorów.
Dołożyłem wszelkich starań, aby strona nie zawierała błędów,
ale nikt nie jest nieomylny...
Lekcja 2 - Edycja strony www w Notatniku
Aby przejść do edycji pliku HTML, należy go otworzyć, a następnie wybrać (jeśli IE jest domyślną przeglądarką) opcję: WIDOK|ŹRÓDŁO
Jeśli IE nie jest domyślną przeglądarką, to klikamy prawym klawiszem ikonkę pliku HTML, wybieramy opcję otwórz za pomocą i z listy programów wybieramy Notatnik (lub inny edytor).
Poniższy schemat przedstawia sposób użycia poleceń CSS (Kaskadowych Arkuszy Stylów), które zostały wprowadzone w celu rozdziału struktury i treści dokumentu HTML od formatu prezentacji. Deklaracja użycia tych poleceń jest w sekcji nagłówkowej,
a polecenia znajdują się pomiędzy: <style type="text/css">, a </style>. Taki sposób włączenia poleceń CSS do dokumentu HTML nazywa się stylem wewnętrznym (wewnętrznym arkuszem stylów).
Polecenie background-color: silver; określa srebrny kolor tła,
Polecenie text-align: left; sprawia, że text zaczyna się od lewego marginesu,
Polecenie h1{font-size: 16px; color: blue;} ustala rozmiar czcionki w nagłówku <h1> na 16 px, a jej kolor na niebieski.
Nazwy kolorów są ich nazwami w języku angielskim lub mogą być w tzw. zapisie heksadecymalnym. Przykłady zapisu heksadecymalnego:
white - #ffffff; black - #000000; red - #ff0000; green - #00ff00; blue - #0000ff;
To polecenie h1{font-size: 16px; color: #ff0000;} oznacza, że tekst w nagłówku jest pisany kolorem czerwonym
www.nikhef.nl/pub/computing/WebColors.php
Link wyżej jest do strony z angielskimi nazwami kolorów i ich zapisem heksadecymalnym
<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
h1{font-size: 16px;
color: blue;
}
p{font-size: 12px;
color: red;
}
</style>
</head>
<body>
<h1>Rozmiar tej czcionki - 16px, kolor - niebieski</h1>
<p>Rozmiar czcionki w tym akapicie to 12px, a jej kolor jest czerwony</p>
</body>
</html>
Możemy również zapisać polecenia CSS w osobnym pliku tekstowym (np. przy pomocy Notatnika) z rozszerzeniem .css i skojarzyć go z dokumentem HTML przy pomocy instrukcji:
<link rel="stylesheet" href="sciezka_dostepu_do_pliku/nazwa_pliku.css" type="text/css">
Tak określony styl nazywamy stylem zewnętrznym (zewnętrznym arkuszem stylów).
Poniższy schemat przedstawia przykład użycia takiego stylu, którego polecenia CSS są zapisane w pliku mojstyl.css,
znajdującym się w tym samym katalogu, w którym mamy dokument HTML.
Plik mojstyl.css zawiera wszystkie polecenia CSS z pierwszego schematu.
<html> <head> <title>Zapraszam na moją wspaniałą stronę!</title> <link rel="stylesheet" href="mojstyl.css" type="text/css"> </head> <body><h1>Rozmiar tej czcionki - 16px, kolor - niebieski</h1>
<p>Rozmiar czcionki w tym akapicie to 12px, a jej kolor jest czerwony</p>
</body> </html>
Polecenie h1{font-size: 16px; color: blue;} ustala rozmiar czcionki 16 px, a jej kolor na niebieski we wszystkich nagłówkach <h1>.
Co zrobić, aby np. pojedynczy nagłówek <h1> lub <p> miał kolor darkgreen (#006400).
W tym celu należy użyć tzw. selektora klasy.
Nazwę selektora klasy należy poprzedzić kropką:
.ciemnozielony {color: #006400;}
<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
h1{font-size: 16px;
color: blue;
}
p{font-size: 12px;
color: red;
}
.ciemnozielony {color: #006400;
}
</style>
</head>
<body>
<h1>Rozmiar tej czcionki - 16px, kolor - niebieski</h1>
<p>Rozmiar czcionki w tym akapicie to 12px, a jej kolor jest czerwony</p>
<h1 class="ciemnozielony">Ten tekst jest napisany kolorem ciemnozielonym</h1>
<p class="ciemnozielony">Ten tekst jest napisany kolorem ciemnozielonym</p>
</body>
</html>
Znacznik <div> służy do wydzielenia z dokumentu HTML obszaru (bloku),
któremu możemy nadać określony format np. kolor tła.
Poniżej mamy przykład użycia tego często używanego znacznika:
<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
h1{font-size: 16px;
color: blue;
}
p{font-size: 12px;
color: red;
}
.ciemnozielony {color: #006400;
}
.blok1{
background-color: #eee;
}
.blok2{
background-color: #fff0f5;
}
</style>
</head>
<body>
<h1>Rozmiar tej czcionki - 16px, kolor - niebieski</h1>
<p>Rozmiar czcionki w tym akapicie to 12px, a jej kolor jest czerwony</p>
<h1 class="ciemnozielony">Ten tekst jest napisany kolorem ciemnozielonym</h1>
<p class="ciemnozielony">Ten tekst jest napisany kolorem ciemnozielonym</p>
<div class="blok1">
<h1>Nie trzeba mówić trza, trza mówić trzeba</h1>
<h1>Leci pies przez owies, ogonem wywija</h1>
<p>pewnie nieżonaty</p>
<p>cieszy się bestyja</p>
</div>
<div class="blok2">
<h1>Pan porucznik od ułanów poszedł na zające</h1>
<h1>i napotkał trzy panienki nago się kąpiące</h1>
<p>Wpadł pies do jatki i porwał mięsa ćwierć</p>
<p>a pewien kucharz głupi zarąbał go na śmierć</p>
</div>
</body>
</html>
Znacznik <span> odnosi się do wycinka dokumentu np. słowa, kilku słów itp.,
i umożliwia nadanie temu wycinkowi określonego formatu np. koloru.
Poniżej mamy dwa przykłady użycia tego znacznika:
<html>
<head>
<title>Zapraszam na moją wspaniałą stronę!</title>
<style type="text/css">
body{
background-color: silver;
text-align: left;
}
h1{font-size: 16px;
color: blue;
}
p{font-size: 12px;
color: red;
}
.ciemnozielony {color: #006400;
}
</style>
</head>
<body>
<h1>Posadzili bacę na kamieni kupę, obchodzili wkoło
<br>całowali w <span style="color: orange;">czoło</span></h1>
<p>Hej dziewczyno z <span class="ciemnozielony">Łaskarzewa</span>,
<br>w co też Ty się przyodziewasz!</p>
</body>
</html>
ćwiczenie 1
Przekopiuj do Notatnika zawartość powyższego schematu.
Zmień kolor tła na żółty (yellow)
Tak przygotowany plik zapisz pod nazwą drugi.html w tym samym katalogu, w którym znajduje się index.html
ćwiczenie 2
Otwórz plik drugi.html w przeglądarce.
ćwiczenie 3 Utwórz przy pomocy Notatnika plik drugistyl.css zawierający polecenia CSS z ćwiczenia 2 i skojarz ten plik z plikiem HTML drugi.html. ćwiczenie 4 Używając stylu wewnętrznego utwórz klasę .brown {color: #8b4513;}
ćwiczenie 5 Przekopiuj do Notatnika zawartość ostatniego schematu.
Ostatnia aktualizacja: 11 marca, 2010
Zmień kolor tła na: coral, rozmiar czcionki w znaczniku <p> na 14px oraz kolor tekstu w tym znaczniku na navy.
W znaczniku <h1> napisz Ocena mojego przyjaciela/mojej przyjaciółki, a w znaczniku <p>, używając znacznika
<br> do przejścia do następnego wiersza, opisz go/ją - co Ci się w nim/niej podoba, a co nie.
Zastosuj tę klasę do znaczników <h1> i <p>.
Dokonaj takich zmian w tym schemacie, aby znacznik <span> dotyczył dwóch lub większej liczby wyrazów.
Tak zmieniony plik zapisz pod nazwą span.html
Copyright © 2010 by Jerzy Grabek, kontakt: fizyka4you@wp.pl
lekcja 1
