Użytkownicy popularnego edytora Word z pakietu MS Office mogą bez trudu stworzyć stronę WWW wykorzystując technikę WYSIWYG („what you see is what you get”). Dla początkującego autora wydaje się to idealne rozwiązanie, jednak ten sposób tworzenia stron WWW gorąco odradzam!
Wygenerowany z pomocą Worda kod HTML jest przeraźliwie zaśmiecony, nieczytelnie sformatowany i używa bez opamiętania znacznika <FONT> z atrybutem FACE, który nie powinien być używany w świetle specyfikacji HTML w dokumentach hipertekstowych.
Spójrzmy zresztą na ten właśnie fragment tekstu, co uczynił z nim generator HTML z Worda 97:
Prawda, że nieciekawe? Oprócz „zdeprecjonowanego” <FONT>, można zauważyć niedopuszczalne krzyżowanie znaczników. W przypadku bardziej skomplikowanego kodu, nie sposób go analizować i poddawać edycji.
Jednak, paradoksalnie, praca z Wordem lub innym zaawansowanym edytorem tekstowym, może początkującym „łebmajstrom” pomóc w zrozumieniu i jaki jest koncepcyjny związek między zasadami tworzenia dokumentów w edytorze tekstowym a zasadami konstrukcji arkuszy stylów. Spróbuję to pokazać, aczkolwiek nie zastosuję wszystkich rozwiązań możliwych w świetle specyfikacji CSS2. Ze wgzlędu na ograniczenia popularnych przeglądarek niektórych fascynujących możliwości formatowania nie będę w stanie zilustrować.
Krok 1: wybór szablonu
Gdy tworzymy nowy pusty dokument w edytorze tekstowym, najczęściej wykorzystujemy domyślne ustawienia szablonu. W edytorze Word ustawienia standardowego szablonu zapisywane są w pliku normal.dot. Można uznać, że jego odpowiednikiem w dokumencie HTML jest dołączany zewnętrzny arkusz stylów.
Umówmy się, że tym razem będzie to plik normal.css. Plik HTML powinien zawierać odwołanie do arkusza stylów:
Odwołanie do szablonu
<HTML> <HEAD> <TITLE>bez tytułu</TITLE> <LINK REL=STYLESHEET HREF="normal.css" TYPE="text/css"> </HEAD> <BODY> ... </BODY> </HTML>
Krok 2: układ strony
Rozpoczynamy tworzenie arkusza. Plik normal.css jest zwykłym plikiem tekstowym, w którym kolejno opisywać będziemy własności poszczególnych znaczników języka HTML. Najpierw jednak zobaczmy, jak to wygląda w edytorze Word:
W normal.css zdefiniujemy własności znacznika <BODY>:
/* Użyte jednostki miary mogą być inne: */
/* myśląc o różnych urządzeniach wyjściowych, */
/* warto zdecydować się na piksele: 'px', */
/* natomiast, gdy medium wyjściowym jest ekran */
/* lub drukarka - może wystarczą punkty */
/* typograficzne 'pt' oraz centymetry 'cm'? */
@media screen, print {
BODY {
margin-left: 2.5cm;
margin-right: 2.5cm;
margin-top: 2.5cm;
margin-bottom: 2.5cm;
}
}Krok 3: styl akapitu
W edytorze tekstowym styl akapitu jest to zestaw formatów znaku i akapitu zapisanych pod jedną nazwą. Zanim jednak zaczniemy definiować własne style, zwróćmy uwagę, że szablon domyślny normal.dot zawiera zbiór predefiniowanych stylów, m.in. stylstandardowy dla typowego akapitu oraz wbudowane style nagłówków.
W normal.css określimy cechy czcionki i tekstu standardowgo akapitu <P> dokładnie tak samo, jak dla stylu „standardowy”. Dodatkowo ten sam zespół własności przypiszemy innym „popularnym” znacznikom: <TD> <TH> <OL> <UL> <LI> <A>.
Nie zawsze jawna deklaracja własności jest wymagana, np. text-align: left czy text-indent: 0cm są wartościami domyślnymi. Tutaj czynimy to dla celów dydaktycznych.
/* Kaskadowość stylów polega m.in. na */
/* dziedziczeniu własności. Jeśli znacznikowi */
/* <P> zostaną przypisane określone cechy */
/* fontu oraz tekstu, to każda strona, która */
/* zawiera odwołanie do arkusza stylów, przejmie */
/* te atrybuty. Lokalnie (na stronie) można */
/* niektóre z nich zmienić. Zasłonią one wtedy */
/* własności zapisane w arkuszu, pozostawiając */
/* bez zmian resztę domyślnie określonych cech. */
P, TD, TH, OL, UL, LI, A {
font-family: "Times New Roman",
"Times New Roman CE", Times, serif;
font-size: 12pt;
text-align: left;
text-indent: 0cm;
}Krok 4: style nagłówków
Przykładem będzie nagłówek stopnia pierwszego. Zarówno w Wordzie, jak i w HTMLnagłówki mają znaczenie strukturalne: informują o randze danego fragmentu w hierarchii tekstu. Nagłówek 1 lub <H1> mogą wskazywać np. na tytuł dokumentu lub na nadrzędny rozdział.
W normal.css zdefiniujemy atrybuty <H1> tak samo, jak cechy stylu Nagłówek 1 w Wordzie:
/* Zdefiniowane atrybuty dotyczą własności */
/* czcionki, marginesów, akapitu, koloru */
/* i tła oraz wyrównania tekstu. */
/* Zestaw dostępnych czcionek definiujemy */
/* tak, aby każdy użytkownik, niezależnie */
/* od posiadanego systemu, mógł zobaczyć */
/* czcionkę bezszeryfową. */
H1 {
font-family: Arial, "Arial CE",
Helvetica, sans-serif;
font-size: 20pt;
font-weight: bold;
letter-spacing: 2pt;
background: gray;
margin-left: 1cm;
margin-right: 1cm;
margin-top: 12pt;
margin-bottom: 12pt;
text-align: center;
}Kolejne nagłówki definiujemy na tej samej zasadzie. Warto przy tym nadmienić, że HTMLposiada sześć predefiniowanych nagłówków: <H1> – <H6>, natomiast Word dziewięć. Jednak sześć wystarcza aż nadto.
Krok 5: własne style
Możemy już sobie wyobrazić, jaki kod HTML powinien zostać wygenerowany przezWorda w rezultacie naszych działań określających cechy dokumentu i jego zawartości. Arkusz stylów normal.css jest tu odpowiednikiem szablonu normal.dot.
Takie jednak postępowanie naraża nas na pewną niedogodność. Otóż w rezultacie zdefiniowania atrybutów większości popularnych znaczników w pliku normal.css wszystkie nasze dokumenty, które odwołują się do tego arkusza stylów, będą miały „na sztywno” zdeterminowane wyglądy poszczególnych znaczników. Potrzebna jest tu większa elastyczność. Możliwych jest kilka rozwiązań:
- zdefiniowanie innego arkusza stylów lub jego import,
- zdefiniowanie w dokumencie HTML bloku stylów zagnieżdżonych,
- użycie stylu lokalnego (in-line),
Wybieramy drugi sposób. W dokumencie HTML możemy umieścić blok definicji stylów odnoszących się wyłącznie do tej strony.
Style zagnieżdżone
<HTML>
<HEAD>
<TITLE>jak w Wordzie...</TITLE>
/* poniżej odwołanie do zewnętrznego arkusza stylów */
<LINK REL=STYLESHEET HREF="normal.css" TYPE="text/css">
/* poniżej miejsce na style zagnieżdżone */
<STYLE type="text/css">
<!--
/* do zdefiniowanego już stylu dodajemy kolor fontu... */
H1 {
color: red;
}
/* ...oraz wyrównanie do prawego */
/* i lewego marginesu (dla akapitów) */
P {
text-align: justify;
}
/* możemy zastosować tzw. klasy, które rozszerzają */
/* definicję stylu każdego praktycznie znacznika */
.p2 {
text-indent: 1cm;
margin-top: 3pt;
}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>Przykład. A jak zbudowałbym tę stronę dzisiaj? Zobacz.
Edytory stron WWW wcale nie muszą tworzyć brzydkiego, nieczytelnego i pełnego błędów kodu HTML. Myślę, że wkrótce wszystkie liczące się edytory HTML pracujące w trybie WYSIWYG umożliwią definiowanie stylów w taki sam sposób, jak dzisiaj definiujemy style w edytorach tekstowych. Kolekcje zdefiniowanych stylów zapisywać będziemy w osobnych arkuszach lub umieszczać w dokumencie w postaci stylów zagnieżdżonych.
Prawdziwego” łebskiego majstra” nie zwolni to jednak od poznania choćby podstaw języka HTML i specyfikacji CSS.