Skrypt opisuje ćwiczenia z zakresu formatowania dokumentów HTML poprzez arkusze CSS. Pokazane jest również użycie znaczników <meta>. Do wykonania ćwiczenia potrzebny jest edytor plików tekstowych (vim, kate, notepad) oraz przeglądarki internetowe (Firefox, Chrome).
Na podstawie poniższego szablonu przygotuj dokument zawierający informacje o wybranym albumie muzycznym. Możesz wykorzystać rzeczywiste dane z takich serwisów jak http://www.merlin.pl lub http://www.empik.pl. Niech opis zawiera conajmniej trzy akapity.
<html>
<head>
<title>tytuł albumu i nazwa wykonawcy</title>
<meta name="author" content="Jan Kowalski">
<meta name="description" content="opis albumu muzycznego">
</head>
<body>
<h1>tytuł albumu</h1>
<h2>nazwa wykonawcy</h2>
<table>
<tr>
<td> <img src="tutaj adres URL okładki" alt="tutaj zdjęcie okładki"> </td>
<td>
<ul>
<li><b>wydawca</b>: <u>wydawca</u>
<li><b>łączny czas trwania</b>: 54 minuty
<li><b>cena brutto</b>: cena
<li><b>stawka VAT</b>: 22%
</ul>
</td>
</tr>
<tr>
<td colspan=2> Opis albumu:
<p>pierwszy akapit</p>
<p>drugi akapit</p>
<p>trzeci akapit</p>
<p>czwarty akapit</p>
</td>
</tr>
</table>
</body>
</html>
Sprawdź w przeglądarce, czy zostało poprawnie rozpoznane kodowanie znaków i czy poprawnie wyświetlają się znaki diakrytyczne. Dodaj w sekcji nagłówka <head> znacznik <meta> informujący o zawartości dokumentu i użytym kodowaniu (w zależności od faktycznie użytego kodowania w edytorze zdefiniuj utf-8, windows-1250 lub ISO-8859-2). Odśwież dokument w przeglądarce.
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
Zwróć uwagę na znaczniki <meta> umieszczone w sekcji nagłówka dokumentu. Można tam umieścić także inne znaczniki, np. kontrolujące zachowanie agentów indeksujących lub definiujące korzystanie z kopii podręcznej strony przez przeglądarkę.
<meta name="description" content="laboratorium, css, html"> <meta name="robots" content="index, nofollow"> <meta http-equiv="cache-control" content="no-cache">
Umieść w pierwszej linii pliku deklarację wybranego typu dokumentu HTML 4.01: strict albo transitional. Dokonaj sprawdzenia poprawności dokumentu (zgodności ze standardem) poprzez serwis http://www.w3.org/.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
W celu naprawienia dokumentu usuń niepoprawny znacznik <u>...</u> i zastąp go poniższym kodem
<span style="text-decoration: underline">nazwa wydawnictwa</span>
W sekcji nagłówkowej umieść trzy reguły CSS podane poniżej. Sprawdź efekt w przeglądarce.
<style type="text/css">
* { font-family: Tahoma } /* selektor uniwersalny */
body { margin: 5em 10em 5em 10em } /* selektor znacznika */
p { text-align: justify }
</style>
Reguły CSS można również umieszczać jako zewnętrzny arkusz stylów CSS. W sekcji nagłówkowej umieść poniższy kod
<link rel="stylesheet" type="text/css" href="style.css" title="Arkusz stylów CSS">
Utwórz plik tekstowy o nazwie style.css w katalogu z dokumentem HTML. Pierwsza operacja będzie polegać na zmianie sposobu wyświetlania listy nieuporządkowanej. W arkuszu stylów umieść następującą regułę:
li { list-style-type: square }
Cena albumu powinna być wyraźnie zaznaczona. W dokumencie HTML dodaj nazwany zakres obejmujący cenę: <span id="cena">x zł</span>, a w arkuszu stylów umieść regułę:
#cena { color: red; font-weight: bold } /* selektor z identyfikatorem */
Pierwszy akapit opisu powinien być wyświetlany czcionką pochyłą. Zmień pierwszy znacznik <p> w opisie na <p class=”wstęp”> i dodaj do arkusza stylów następującą regułę:
.wstęp { font-style: italic } /* selektor dla znaczników danej klasy */
Zdjęcie okładki powinno być obramowane ramką koloru niebieskiego, która zmieni kolor na czerwony w momencie najechania na nią myszką. Do arkusza stylów dodaj dwie reguły:
td img { border-color: blue ; border-style: solid } /* znaczniki zagnieżdżone */
td img:hover { border-color: red ; border-style: solid } /* selektor z pseudo-atrybutem */
Chcemy uzyskać efekt „rozstrzelenia” liter w nazwie wykonawcy. Możemy do tego wykorzystać regułę z selektorem uwzględniającym kolejność znaczników
h1 + h2 { letter-spacing: 5px } /* selektor z następstwem znaczników */
Opis albumu chcemy wydrukować mniejszym krojem czcionki. Chcemy, aby reguła odnosiła się do paragrafów tekstowych, ale tylko do paragrafów wewnątrz tabelki. Dodaj do arkusza stylów poniższą regułę. Czy potrafisz ją zinterpretować?
td[colspan="2"] > p { font-size: small } /* selektor z wartością atrybutu i potomkiem */
Paragrafy zawierające opis mają być wydrukowane kolorem szarym. Nie dotyczy to pierwszego paragrafu, drukowanego czcionką pochyłą. Do tego celu posłuż się poniższą regułą:
p + p { color: gray }
Chcemy na lewym marginesie umieścić tło stanowiące powtórzenie jednego niewielkiego obrazka. Można to zrobić przy pomocy następującej reguły:
body { background-image: url(books.png); background-repeat: repeat-y }
Sprawdź algorytm rozwiązywania konfliktów przy stosowaniu reguł. W arkuszu stylów umieść dwie sprzeczne reguły. Która reguła została zastosowana?
h1 { color: blue }
h1 { color: green }
Wróć do pliku HTML i umieść regułę kolorującą tytuł albymu bezpośrednio w znaczniku: <h1 style="color: red"> tytuł albymu</h1> Czy reguła została zastosowana? Usuń regułę ze znacznika <h1>.
Dodaj do znacznika <style> regułę kolorowania tytułu albumu. Znacznik <style> powinien mieć teraz następującą postać:
<style type="text/css">
* { font-family: Tahoma } /* selektor uniwersalny */
body { margin: 5em 10em 5em 10em } /* selektor znacznika */
p { text-align: justify }
h1 { color: red }
</style>
Dodaj logo sklepu (obrazek) jako element z atrybutem position:absolute;.
Sprawdź, która reguła jest stosowana do kolorowania znacznika <h1> w zależności od tego, czy znacznik <link> dołączający zewnętrzny arkusz stylistyczny jest umieszczony w kodzie przed, czy po znaczniku <style>.
Umieść znacznik <link> po znaczniku <style>. Zmodyfikuj dodaną właśnie regułę do postaci h1 { color: red !important}. Która reguła kolorowania tytułu jest teraz stosowana?
Porównaj wygląd przygotowanego dokumentu w przeglądarkach Internet Explorer i Firefox. Jakie zauważasz różnice?