Menu

  Strona główna
  Bios
  Dos
  Internet
  Office
  Programy
  Sprzęt
  System
  Webmastering
  Kursoteka
  Linkownia
  Bez cenzury
  Pobieralnia

MP3 Player




Kliknij i słuchaj

 

Szukacz













 

Informacje


Twoje IP


Przeglądarka


Dziś jest


Pijemy za zdrowie


Gości online
ministat liczniki.org


Statystyki

 

Reklama

HTML i CSS pod lupą


 

HTML i CSS pod lupą

Wstęp

Stron WWW stale przybywa. Coraz więcej ludzi ma dostęp do Internetu, a wielu z nich nie chce być tylko odbiorcami - chce się pokazać. WWW to najpopularniejsza z usług Internetu. Nic dziwnego, że tak wiele osób robi swoje strony. Zdaniem niektórych to niedobrze, że Sieć staje się coraz gorszym śmietnikiem pełnym kiepskich stron - zarówno pod względem formy, jak i treści. Ja uważam jednak, że potęga Internetu leży właśnie w takiej rozproszonej pajęczynie różnorodnych zasobów i wspaniałe jest to, że każdy może w niej zaistnieć - na miarę własnych umiejętności.

Ten artykuł to zbiór porad na temat tworzenia stron WWW z użyciem HTML i CSS. Staram się pokazać w nim szereg szczegółów, niuansów, mało znanych chociaż użytecznych elementów, atrybutów i właściwości tych języków. Opisuję w nim to, na co zwróciłem szczególną uwagę czytając ostatnio po raz drugi ich specyfikacje. Chciałbym podkreślić, że to nie jest kurs HTML ani CSS. Żeby zrozumieć ten artykuł, musisz już znać conajmniej podstawy tych języków. To nieuniknione, że dobór tematów jest subiektywny. Niektóre z przedstawionych tu rozwiązań zapewne już znasz, inne wydadzą ci się mało interesujące. Mimo tego mam nadzieję, że ten artykuł choć trochę pomoże ci pisać lepsze strony WWW.

1. Dostępność

W standardach internetowych bardziej niż gdziekolwiek indziej daje się we znaki ogromna rozbieżność pomiędzy standardami, jakie ustala W3C, a ich realizacją w różnych przeglądarkach WWW. Wystarczy spojrzeć na tabelę na stronie CSS contents and browser compatibility. Można się zastanawiać, czy teoria to tylko nieudolna próba usystematyzowania praktyki, czy też może praktyka to tylko nieudolna próba zastosowania teorii. Jakkolwiek jest naprawdę, stworzenie strony, która jest jednocześnie zgodna ze standardem i wygląda dobrze w różnych przeglądarkach to prawdziwe wyzwanie.

Jednak warto do tego dążyć. Dzięki temu powstaje strona bardziej *dostępna*. Gorąco polecam w tym miejscu książkę "W głąb dostępności". Jest na licencji GNU FDL i chociaż skupia się na dosyć wąskiej dziedzinie - dostosowaniu internetowego bloga do potrzeb internautów niepełnosprawnych - zawiera bardzo wiele praktycznych porad na temat języków HTML i CSS. Dla mnie dostępność oznacza coś więcej. Rozumiem przez to spełnienie wymagań takich jak:

  • Strona działa dobrze w różnych przeglądarkach WWW. Już tylko ok. 80% internautów używa Microsoft Internet Explorer. To nadal największa grupa, ale rośnie popularność programów alternatywnych, a pośród nich na wymienienie zasługuje przede wszystkim Mozilla i oparty na tym samym silniku FireFox. Tak czy owak, IE i Mozilla są obecnie i zapewne długo jeszcze pozostaną dwiema najważniejszymi przeglądarkami i na nich należy sie skupić.

  • Strona działa dobrze w różnych systemach operacyjnych. W każdym z nich stosuje się inne przeglądarki i dostępne są inne czcionki.

  • Strona działa dobrze również w przeglądarkach takich, jak tekstowy Lynx czy programy dla niewidomych odczytujące treść strony na głos. HTML został tak zaprojektowany, aby strony mogły być interpretowane na różne sposoby. Trzeba go tylko odpowiednio użyć.

  • Strona zostanie dobrze skatalogowana przez wyszukiwarki internetowe, takie jak (najpopularniejszy obecnie) Google, a tym samym więcej osób ją odnajdzie i odwiedzi.

2. Z czego korzystać?

Aby dobrze poznać HTML i CSS, nie wystarczy przeczytać kilka kursów. Trzeba nauczyć się korzystać z oryginalnej specyfikacji tych standardów. Znajdziesz je tutaj:

Kiedy już zrobisz swoją stronę, powinieneś sprawdzić jej poprawność za pomocą usług walidacyjnych W3C:

HTML

1. Pamiętaj, że tytuł jest najważniejszy

Chociaż nie jest pokazywany w treści dokumentu, każdy program do odczytywania WWW (od przeglądarki po wyszukiwarkę katalogującą twoją stronę) przywiązuje dużą uwagę do tekstu, jaki zawierasz w sekcji <head> na swojej stronie: 

<title>Tytuł mojej strony<title>

Na podstawie swoich doświadczeń chciałbym udzielić ci kilku wskazówek na temat tego tytułu. Po pierwsze - tytuł powinien dobrze opisywać treść danego dokumentu. Nie wpisuj do niego listy słów kluczowych, jak robią to niektórzy: 

<title>Strona o programowaniu - programowanie,programować,kodować,
  kodzić,kodowanie,C++,delphi,basic,pascal<title> <!-- ŹLE !!! -->

Po drugie - nigdy nie nazywaj strony głównej Strona główna. To nic nie mówi. Wyobraź sobie internaute przeglądającego jednocześnie wiele stron, który na pasku zadań ma okno tak właśnie zatytułowane. 

<title>Strona główna<title> <!-- ŹLE !!! -->

Tytuł powinien być możliwie krótki i opisywać sedno sprawy. Strona główna powinna nosić tytuł całego twojego serwisu:

<title>Strona o programowaniu<title>

Natomiast podstrony mogą mieć tytuł złożony z kilku członów: 

<title>Strona o programowaniu :: Zobacz artykuł ::
Jak napisać trojana?<title>

Lub jeszcze lepiej - sam tytuł danego artykułu: 

<title>Jak napisać trojana?<title>

Wysuwam nawet hipotezę, że taki krótki tytuł trafiający w samo sedno to magiczny klucz do wysokiej pozycji strony w wynikach wyszukiwania Google. Nie jest bowiem tajemnicą, że wyszukiwarki bardzo małą wagę przykładają do słów kluczowych keywords - wielu twórców stron wpisuje tam byle jakie, niezwiązane z tematem, a często wyszukiwane słowa, jak sex,porno,mp3. Długi tytuł <title> też może być interpretowany jako próba "oszukania" mechanizmu katalogującego wyszukiwarki.

Jako przykład zobacz moją stronę domową. W dziale Ludzie znajdują się konta zarejestrowanych osób. Wyszukaj pseudonim któregoś z nich (albo mój) w Google w stronach polskich, a najprawdopodobniej konto tej osoby na mojej stronie zobaczysz na pierwszym miejscu - przed jego własną stroną domową i innymi śladami jego działalności w Sieci, a nawet przed stronami poważnych firm o tej samej nazwie (np. Spax). Moja strona wcale nie notuje ogromnej popularności. Wydaje mi się, że cała tajemnica tkwi właśnie w tytule strony danego konta - jak możesz się przekonać, jest nim tylko sama ksywa danej osoby.

2. Określaj wersję HTML

Każdy plik czy pakiet sieciowy musi mieć nagłówek. Dzięki niemu może zostać prawidłowo rozpoznany i obsłużony. Nie inaczej jest ze stronami HTML. Każda taka strona powinna rozpocząć się od jednego z trzech możliwych nagłówków:

  • Jeśli będziesz ściśle przestrzegał specyfikacji HTML i nie będziesz używał żadnych wycofanych elementów ani atrybutów: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  • Jeśli chcesz pozwolić sobie na używanie wycofanych elementów i atrybutów: 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

  • Jeśli używasz ramek, czyli zamiast <body> chcesz użyć w danym dokumencie <frameset> (ten nagłówek również dopuszcza składniki wycofane): 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html4/frameset.dtd">

Element albo atrybut jest przez standard uznany za wycofany (ang. "deprecated"), kiedy nie zaleca się jego używania, bo istnieje lepsze wyjście. wycofany są głównie składniki określające formatowanie, jak element <font> czy atrybut background. Zamiast nich należy używać arkusza stylów CSS i za jego pomocą określać wygląd strony, a w pliku HTML zawierać tylko jej treść i odniesienia do tego arkusza.

Warto jednak pozostawić sobie furtkę, żeby czasem można było użyć jednego z tych wycofanych składników. W końcu nie są one wycofane ze standardu (chociaż mogą zostać wycofane w kolejnych wersjach), a CSS nie jest doskonały i nie zawsze pozwala na łatwe zrobienie tego, co chce się otrzymać.

Dlatego osobiście polecam w miarę możliwości nie używać tych wycofanych części języka HTML, ale stosować nagłówek drugi. Szablon pustego dokumentu HTML może wtedy wyglądać tak: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="pl">
  <head>
    <meta http-equiv="Content-Type" content="text/html;
          charset=Windows-1250">
    <title>Tytuł</title>
    <meta name="Description" content="Opis">
    <meta name="Keywords" content="słowo,słowo,słowo">
    <meta name="robots" content="all">
    <link rel="stylesheet" type="text/css" href="mójstyl.css"
          charset="Windows-1250">
  </head>
  <body>
  </body>
</html>

3. Definiuj kodowanie

Istnieje wiele standardów kodowania znaków. Do zapisu polskich liter można używać:

Windows-1250

Standard używany domyślnie w Windows. Obsługiwany przez wszystkie programy w tym systemie, jak choćby systemowy Notatnik.

ISO-8859-2

Standard używany w Linux i bardziej zalecany do używania w Sieci. W Windows obsługiwany tylko przez nieliczne programy, jak Pajączek.

Strony po angielsku zapisuje się natomiast w:

ISO-8859-1

Standardowy zestaw znaków. Jeśli napiszesz plik tekstowy bez polskich liter, będzie zgodny z tym standardem.

Są też standardy uniwersalne, pozwalające na kodowania znaków wielu różnych języków (w tym także polskiego) w jednym dokumencie (tzw. Unikod):

UTF-8

Znaki standardowe zapisuje tak jak ISO-8859-1, ale do zapisania polskiej litery wykorzystuje dwa bajty.

UTF-16

Do zapisania każdego znaku wykorzystuje dwa bajty.

Musisz poinformować przeglądarkę o tym, w jakim standardzie zakodowane są polskie znaki na twojej stronie. W przeciwnym razie użytkownik w ich miejscu zobaczy krzaki i ciężko będzie ją przeczytać. Służy do tego jeden z elementów <meta>. Umieszczaj go zaraz na początku wewnątrz sekcji <head>:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

Oczywiście w miejsce ISO-8859-2 wstaw nazwę użytego kodowania.

http-equiv to taki rodzaj elementu <meta>, który uzupełnia informacje z nagłówka HTTP. Jeśli znasz trochę specyfikację protokołu HTTP lub używasz funkcji header() w PHP, wiesz o czym mówię. Kodowanie możesz też zdefiniować za pomocą prawdziwego nagłówka HTTP. Odpowiedni kod w języku PHP wygląda tak: 

header('Content-Type: text/html; charset=ISO-8859-2');

4. Nie zapominaj o referencjach do encji znakowych

Chodzi o zastępowanie niektórych specjalnych znaków ich odpowiednikami w postaci takiej jak &lt;. Istnieje wiele znaków, które można w ten sposób zastępować, ale w przypadku kilku z nich obowiązkowo trzeba to robić:

  • &amp; (od ang. "amperstand") zastępuje "&" - zawsze, bo sam ten znak oznacza właśnie rozpoczęcie referencji do encji znakowej.

  • &lt; (od ang. "less than" - mniejszy niż) zastępuje "<" - przynajmniej w tekście pomiędzy znacznikami, bo sam ten znak oznacza rozpoczęcie znacznika (np. <br>).

  • &gt; (od ang. "greater than" - większy niż) zastępuje ">" - przynajmniej w wartości atrybutu, bo sam ten znak może zostać odebrany jako zakończenie znacznika.

  • &quot; (od ang. "quotation-marks" - cudzysłów) zastępuje " - przynajmniej w wartości atrybutu, bo sam ten znak oznacza zakończenie tej wartości (np. class="naglowek").

Przeglądarki czasami tolerują nieużywanie tych konstrukcji, tylko pisanie odpowiadających im znaków bezpośrednio, ale nie radzę na tym polegać. Takie błędy są bardzo poważne i zawsze wyłapywane przez validator. Szczególnie częstym błędem jest zapominanie o odpowiednim zapisaniu znaku &, który ma zwyczaj pojawiać się w adresach. Trzeba zawsze pisać w ten sposób: 

<a href="index.php?page=users&action=view&id=14"> <!-- ŹLE !!! -->
<a href="index.php?page=users&amp;action=view&amp;id=14"> <!-- Dobrze -->

Za pomocą referencji do encji znakowych można też zapisać wiele dodatkowych, użytecznych znaków. Oto niektóre z nich:

  • &laquo; - « - podwójna strzałeczka w lewo

  • &raquo; - » - podwójna strzałeczka w prawo

  • &copy; - © - symbol "copyright"

  • &sect; - § - znak paragrafu

5. Uważaj na odstępy

Wszystkie odstępy (białe znaki) w kodzie HTML takie, jak spacje, tabulacje, końce wiersza itp. - są zamieniane na pojedyncze spacje. Dzięki temu możesz pisać tekst dzieląc go swobodnie na linie, a mimo tego przeglądarka potraktuje go jako tekst w jednej linii. Do wymuszenia przejścia do nowej linii w wynikowej stronie WWW służy element <br>.

Uważaj jednak na początku i na końcu każdego elementu - wokół znaczników. Postawienie lub niepostawienie w tych miejscach spacji czy znaku końca wiersza ma znaczenie. Dlatego dwa poniższej linki wyglądają i działają trochę inaczej. Lepszy wydaje się wariant pierwszy. 

a <a href="xxx">b</a> c
a<a href="xxx"> b </a>c

Wyjątkiem jest element <pre>, w którym znaki końca wiersza są interpretowane dosłownie. Dzięki temu możesz pokazywać fragmenty kodów źródłowych z wcięciami itp. Nie zaleca się jednak używania w nich tabulacji - lepiej zawsze robić wcięcia za pomocą dwóch spacji, tak jak tutaj: 

for (x = Rect.left; x < Rect.right; x++) {
  if ((x^235334435)%3 != 0) {
    TextIndex = (x^435435)%TEXT_COUNT;
    TextY = static_cast<int>(Time*static_cast<int>
       ((sinf(static_cast<float>(x)*10.0f)+2.0f)*4.0f));
    B = 128+static_cast<BYTE>(( (x*324324)^3244325 )%127);
    for (y = 0; y < static_cast<int>
       (TEXTS[TextIndex].length()); y++) {
      main::screen::Draw(x, Rect.top+(TextY+y)%Rect.height(),
        main::screen::Char(TEXTS[TextIndex][y], false,
                           RGB(B/2, B, B/2), 0));
    }
  }
}

6. Definiuj opis i słowa kluczowe

Oprócz tytułu strony, sekcja <head> może zawierać zbiór znaczników <meta> przechowujących pary łańcuchów w postaci nazwa => wartość. Zbiór dopuszczalnych nazw i ich znaczenie nie są ściśle zdefiniowane, jednak istnieje bardzo dużo ogólnie przyjętych i często stosowanych. Najważniejsze z nich to:

  • Słowa kluczowe keywords - należy wymienić po przecinku słowa związane z tematyką strony. Wyszukiwarki biorą je pod uwagę podczas katalogowania twojej strony.

  • Opis strony description - krótki opis zawartości danej strony, który może być pokazywany pod jej tytułem w wynikach wyszukiwania.

  • Polecenie dla programów katalogujących strony robots - np. wartość "all" oznacza, że cała strona powinna zostać skatalogowana, a "noidenx" - że nie powinna.

Oto przykład użycia tych znaczników: 

<head>
  <title>Strona o programowaniu</title>
  <meta name="keywords" content="programowanie,programować,kodować,
    kodzić,kodowanie,C++,delphi,basic,pascal">
  <meta name="description" content="Serwis poświęcony programowaniu
    pecetów w różnych językach programowania.">
  <meta name="robots" content="all">
</head>

Jest też wiele innych możliwości. Niektóre z nich to:

  • author - definiuje nazwę autora strony, np. "Jan Kowalski".

  • copyright - przechowuje notatkę o prawach autorskich, np. "&copy; 2004 Kowalski S.A.".

  • date - przechowuje datę utworzenia strony, np. "1994-11-06T08:49:37+00:00".

  • generator - przechowuje nazwę programu użytego do stworzenia strony, np. "Pajączek NxG 5.0.2".

Znacznik <meta> pozwala też na uzupełnianie informacji z nagłówka HTTP. Przykład poznaliśmy już wcześniej przy okazji określania kodowania: 

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">

Niektóre inne możliwości to:

  • Definiuje, kiedy strona wygasa: 

    <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

  • Określa datę utworzenia dokumentu: 

    <meta http-equiv="Creation-date" content="2004-09-12T17:06:15Z">

  • Nakazuje odświeżanie treści strony po podanej liczbie sekund: 

    <meta http-equiv="Refresh" content="10">

    W ten sposób można też zrobić przekierowanie na inną stronę po podanym czasie, ale Konsorcjum nie zaleca tego sposobu (lepiej to robić za pomocą prawdziwego nagłówka HTTP) 

    <meta http-equiv="Refresh" content="10; URL=http://www.onet.pl/">

  • Określa adres kontaktowy adres e-mail: 

    <meta http-equiv="Reply-to" content="mój@adres.e-mail.pl">

  • Określa język strony 

    <meta http-equiv="Content-Language" content="pl">

  • Informuje przeglądarki i serwery proxy, że strona jest generowana dynamicznie, często się zmienia i dlatego nie należy jej buforować, tylko za każdym razem pobierać z serwera. Te dwa nagłówki muszą być razem, ponieważ wzajemnie uzupełniają się do dwóch różnych wersji HTTP: 

    <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control"
      content="no-store, no-cache, must-revalidate">

  • Działające tylko w przeglądarce Microsoftu efekty przejścia podczas wchodzenia i wychodzenia na daną stronę: 

    <meta http-equiv="Page-Enter"
     content="RevealTrans(Duration=3,Transition=0)">
<meta http-equiv="Page-Exit"
     content="RevealTrans(Duration=3,Transition=0)">

7. Rób powiązania z sąsiednimi stronami

Element <link>, występujący w sekcji <head>, wykorzystywany jest zwykle do dołączania zewnętrznego arkusza stylów w taki sposób: 

<link rel="stylesheet" type="text/css" href="moj_styl.css">

Posiada też jednak inne, bardzo ważne zastosowanie. Za jego pomocą można zdefiniować powiązania z innymi stronami serwisu - ze stroną główną, nadrzędną, następną, poprzednią itp. Nie zawsze ma to sens, ale warto wykorzystywać tą możliwość jak najczęściej - szczególnie w zbiorach dokumentów o zorganizowanej strukturze, jak fora dyskusyjne czy wieloczęściowe kursy.

Te powiązania nie są wyświetlane w treści strony, a Internet Explorer nie potrafi zrobić z nich żadnego użytku. Jednak dla użytkowników innych przeglądarek, jak Mozilla czy tekstowy Lynx, bywają one nieocenioną pomocą podczas poruszania się po stronach danego serwisu. Przykładowo Mozilla pokazuje na stronach, które używają tego mechanizmu, dodatkowy pasek z przyciskami do nawigacji.

Przykładowe powiązanie ze stroną poprzednią wygląda tak: 

<link rel="prev" title="Rozdział 4 - Zmienne" href="chapter4.html">

Niektóre dopuszczalne wartości atrybutu rel to:

  • alternate - odpowiednik tego dokumentu dla innego języka lub medium

  • stylesheet - arkusz stylów

  • start - pierwszy dokument

  • next - następny dokument

  • prev - poprzedni dokument

  • contents - spis treści

  • index - indeks

  • glossary - słownik terminów

  • copyright - notatka o prawach autorskich

  • chapter - rozdział

  • section - sekcja

  • subsection - podsekcja

  • appendix - dodatek, załącznik

  • help - pomoc

  • bookmark - zakładka

Jeszcze jednym przykładem jest połączenie do innej wersji językowej ten samej strony: 

<link rel="alternate" title="The manual in Portuguese" type="text/html"
  hreflang="pt" href="http://someplace.com/manual/portuguese.html">

Zobacz Przykład 1.

8. Możesz zrobić ikonkę swojego serwisu

Microsoft wprowadził możliwość skojarzenia ze stroną ikony - takiej, jak mają programy i inne pliki w Windows. Coraz więcej przeglądarek obsługuje ten mechanizm. Taka ikonka jest wyświetlana m.in. na pasku przeglądarki obok adresu, w "Ulubionych" itp.

Aby zrobić ikonkę do swojej strony, najpierw musisz ją narysować. Zapisać ją należy w formacie ICO - są do tego specjalne programy. Plik taki powinien zawierać przynajmniej wersję o wymiarach 16x16, a najlepiej także 32x32. Nazwij go "favicon.ico" i umieść w katalogu głównym twojej strony - wiele przeglądarek domyślnie tam go szuka.

Wreszcie, dodaj do swojej strony w sekcji <head> taką linijkę: 

<link rel="SHORTCUT ICON" href="favicon.ico">

9. Nadawaj tytuł swoim elementom

Bardzo wiele elementów w języku HTML posiada atrybut title. Warto go używać, żeby opisywać tytuł danego zasobu. Przeglądarki graficzne często pokazują go w formie dymka po najechaniu kursorem myszy nad dany element, nawet jeśli to jest zwykły akapit.

Ten atrybut najlepiej nadaje się chyba do linków. Daje dodatkowe możliwości do różnych form, w jakich linki mogą być zbudowane. Oto kilka przykładów: 

Kliknij <a href="http://www.regedit.risp.pl/">tutaj</a> <!-- ŹLE !!! -->
Kliknij <a href="http://www.regedit.risp.pl/"
  title="Regedit - Strona Domowa">tutaj</a> <!-- Już lepiej -->
<a href="http://www.regedit.risp.pl/">Regedit - Strona Domowa</a>
Więcej informacji znajdziesz na <a href="http://www.regedit.risp.pl/"
  title="Regedit - Strona Domowa">mojej stronie domowej</a>

Warto też zaznaczać skróty za pomocą elementu <acronym>. Pisząc informacje techniczne używasz wielu skrótów i z pewnością nie wszystkie są znane czytającemu. Dlatego stosuj taką konstrukcję: 

<acronym title="World Wide Web Consortium">W3C</acronym>

Niektórzy chcieliby stosować także element <abbr> (ang. "abbreviation" - skrót) podkreślając, że skrót to nie to samo co akronim. Niestety atrybut title w przypadku tego elementu nie pokazuje dymka w Internet Explorerze, dlatego najlepiej zawsze stosować (do skrótów i do akronimów) element <acronym>.

Zobacz Przykład 2.

10.Stosuj prawdziwe nagłówki

Do nagłówków w swoim dokumencie używaj elementów od <h1> do <h6>, a nie akapitów ze specjalnymi klasami stylów. Dzięki temu będą nie tylko wyglądały jak nagłówki, ale również będą prawdziwymi nagłówkami, a to może być istotne dla niektórych programów odczytujących twój dokument.

Konsorcjum zaleca nie pomijać poszczególnych poziomów nagłówków, tylko używać kolejno: <h1>, w nim <h2>, dopiero pod nim <h3> itd. Chodzi o to, żeby nie wykorzystywać wybiórczo poszczególnych poziomów nagłówków tylko z powodu takiego czy innego ich wyglądu. Przykładowy kod może wyglądać tak: 

<h1>Rozdział 1</h1>
  <!-- Wstęp do rozdziału 1... ->
  <h2>Podrozdział 1</h2>
    <!-- Treść podrozdziału 1... -->
  <h2>Podrozdział 2</h2>
    <!-- Treść podrozdziału 2... -->
<h1>Rozdział 2</h1>
<!-- itd... -->

Ciekawym problemem jest forma, w jakiej powinno się zapisywać nagłówek główny - ten pierwszy i jedyny, który znajduje się na górze treści strony i jest taki sam, jak jej tytuł. Możliwych rozwiązań jest kilka:

  • Stosować do niego <h1>, a jako nagłówki w treści dokumentu używać te od <h2>.

  • Stosować do niego akapit ze specjalną klasą, a dopiero w treści dokumentu używać wszystkich nagłówków od <h1>.

  • Stosować do niego nagłówek <h1> ze specjalną klasą, a w treści dokumentu używać normalnych nagłówków od <h1>. Obecnie skłaniam się właśnie do tego rozwiązania.

Bardzo efektownym pomysłem jest zdefiniowanie w arkuszu stylów ramki (ang. "border") po niektórych stronach nagłówka. Przykładowy styl może wyglądać tak: 

h1 {
  font-weight: bold;
  color: darkblue;
  font-size: 16pt;
  border-left: #475691 4px solid;
  border-bottom: #475691 1px dashed;
  padding-left: 4px;
}
h2 {
  font-weight: bold;
  color: darkblue; font-size: 13pt;
  border-left: navy 4px dotted;
  padding-left: 3px;
}
h3,h4,h5,h6 {
  font-weight: bold;
  color: darkblue;
  font-size: 9pt;
}
h1#title {
  text-align: center;
  border-style: none;
}

Zobacz Przykład 3.

11. Poznaj egzotyczne elementy

Większość twórców stron WWW używa tylko niektórych elementów HTML - najczęściej nagłówków <h1> - <h6> i akapitów <p>. Tymczasem język ten zawiera wiele interesujących możliwości, które jednocześnie definiują znaczenie danego fragmentu i pozwalają (z pomocą arkusza stylów) na jego wizualne formatowanie.

Warto ich używać, ponieważ dużo wygodniej jest zdefiniować sobie wygląd (np, czcionkę, kolor) do znacznika pisanego tak: 

Zmienna nosi nazwę <code>MyObject</code>

niż tak: 

Zmienna nosi nazwę <span class="KlasaDoKodu">MyObject</span>

Niektóre z tych elementów są "block-level" - zastępują akapit:

  • <address> - adres kontaktowy (zwykle na początku albo na końcu dokumentu).

  • <blockquote> - cytat.

Inne natomiast są typu "inline" - mogą występować wewnątrz tekstu:

  • <em>, <strong> - nacisk i silniejszy nacisk. Stosuj zamiast <b>.

  • <cite> - cytat lub odniesienie do innego źródła (np. nazwa jakiegoś standardu).

  • <dfn> - definicja.

  • <code> - fragment kodu komputerowego w tekście, np. nazwa zmiennej czy funkcji.

  • <samp> - wydruk wyjścia programu.

  • <kbd> - tekst do wprowadzenia przez użytkownika.

  • <var> - zmienna lub argument programu.

  • <abbr>, <acronym> - skrót i akronim.

  • <q> - cytat.

Zobacz Przykład 4.

12. Poprawnie używaj akapitów

Akapit jaki jest, każdy widzi - ot element <p> - żadna filozofia. Jednak jego też trzeba umieć poprawnie używać. Np. W3C nakazuje nie pisać (tak często stosowanych przez niektórych do robienia odstępu) akapitów pustych. 

<p></p> <!-- ŹLE !!! -->
<p>&nbsp;</p> <!-- Już lepiej -->

Najlepiej rozwiązać to tak: 

<p style="margin-top:2em;">
  No i mamy akapit, nad którym jest przerwa o wysokości 2 linijek tekstu.

Akapit może zawierać w swoim wnętrzu wyłącznie tekst i elementy typu "inline", jak np. <strong>. Nie może natomiast zawierać elementów typu "block-level", jak nagłówki <h1>.

Teoretycznie akapitów, podobnie jak niektórych innych elementów, nie trzeba zamykać. Początek następnego akapitu, nagłówka albo innego elementu typu "block-level" powinien oznaczać koniec danego akapitu. Niestety panowie z MS pomyśleli widocznie inaczej i niezamknięcie akapitu grozi potraktowaniem w Internet Explorerze następującej po nim np. tabeli jako zawartej w tym akapicie. Konsekwencją tego będzie brak odstępu pomiędzy nimi, a także odziedziczenie z niego formatowania. Dlatego lepiej zawsze akapity zamykać </p>.

Zobacz Przykład 5.

13. Określaj język

Jeśli piszesz stronę po polsku, prawdopodobnie będą na nią wchodzili wyłącznie Polacy. Ale globalizacja wciąż postępuje i może na nią trafić ktoś z dowolnego zakątka świata. Każdy człowiek bez trudu rozpozna użyty język (jeśli tylko nie piszesz iAkIMiŚ d21WNYM1 ltierakmi :) lub przynajmniej stwierdzi, czy jest w stanie to przeczytać. Ale maszynom sprawia to dużo większy problem. Dlatego powinieneś jawnie określić użyty język.

Służy do tego atrybut lang. Występuje w wielu różnych elementach. Warto określić go globalnie dla całego dokumentu HTML, a potem ewentualnie zmieniać w elementach podrzędnych. 

<html lang="pl">
  <head>
    <!-- ... -->
  </head>
  <body>
    <p>Linus Torvalds powiedział tak:
      <q lang="en">Software is like sex: It's better when it's free.</q>

14. Naucz się dobrze używać list

List często się używa, bo pozwalają usystematyzować informacje. Najczęściej spotykane są listy nieuporządkowane (wypunktowane) <ul> (ang. "unordered list") i uporządkowane (numerowane) <ol> (ang. "ordered list"). Element określający pozycję listy <li> nie musi być zamykany. Każda lista musi posiadać conajmniej jedną pozycję.

Bardzo przydatny, chociaż niedoceniany jest trzeci rodzaj listy - lista definicyjna <dl>. Przeznaczona jest do podawania listy definicji różnych pojęć i może zawierać dwa rodzaje pozycji:

  • <dt> - definiowane pojęcie (zawsze definiuję w stylu ten element jako pogrubiony)

  • <dd> - opis (pisany jest z wcięciem)

Te dwa rodzaje pozycji nie muszą występować naprzemiennie - może to być dowolna ich kombinacja. Ich także nie trzeba zamykać.

Niektóre przeglądarki (zgadnij które ;) mają problem w sytuacji, kiedy pozycja listy nie zaczyna się tekstem, tylko jakimś blokiem (jak kolejna, zagnieżdżona lista) i pokazują ten blok dopiero w następnej linii pod oznaczeniem pozycji listy. Mozilla pokazuje w tej samej - tam, gdzie pokazałaby tekst danej pozycji.

Zobacz Przykład 6.

15. Naucz się dobrze tabel

Tabele to bardzo potężny, ale i niełatwy mechanizm HTML. Często stosuje się je, wbrew zaleceniom Konsorcjum, do robienia układu strony. Poza tym służą również do tego, do czego powinny - do prezentowania tabelarycznych danych. Ciekawe, że atrybut width tabeli nie jest wycofany. Jednak mimo tego zaleca się definiować szerokość tabeli za pomocą stylów.

Oto przykład prostej tabeli: 

<table summary="Podsumowanie">
  <caption>Tytuł</caption>
  <thead>
    <tr>
      <th colspan="2">Nagłówek
  <tfoot>
    <tr>
      <td>Stopka 1<td>Stopka 2
  <tbody>
    <tr>
      <td>Dane 11<td>Dane 12
    <tr>
      <td>Dane 21<td>Dane 22
</table>

Atrybut summary to krótkie podsumowanie zawartości tabeli. Nie jest nigdzie pokazywane, ale może być wykorzystane np. przez przeglądarki głosowe dla niewidomych albo przez roboty katalogujące. Dlatego warto go ustawiać.

Warto też używać podelementu <caption>. Często spotyka się osobny akapit nad lub pod tabelą, który zawiera jej podpis. Tak nie należy robić. Ten podelement służy właśnie do tego, a za pomocą odpowiednich właściwości arkusza stylów można sprawować pełną kontrolę nad jego wyglądem, formatowaniem, ramką, a także pozycją (nad lub pod tabelą - to niestety nie działa w MSIE, w którym zawsze jest nad).

Kolumny

Przeglądarka potrafi sama domyślić się ilości kolumn tabeli. Mimo tego można i powinno się jawnie je definiować. Szczególnie, że dzięki temu, przy okazji można podać ich styl. Bez tego trzebaby określony styl nadawać każdej komórce leżącej w danej kolumnie.

Kolumnę definiuje znacznik <col>. Do nadania kolumnie stylu służą atrybuty class i id. Atrybut width określa szerokość, natomiast atrybut span mówi o tym, ile jednakowych kolumn na raz definiuje ten element.

Listę kolumn można podać jako listę elementów <col>, ale można je też dodatkowo pogrupować za pomocą elementu <colgroup>. Ten element także posiada atrybuty class i id. Jego atrybut width określa szerokość każdej kolumny danej grupy (chyba że definiuje one własną szerokość), natomiast atrybut span pozwala zdefiniować liczbę kolumn w danej grupie i w przypadku, jeśli grupa zawiera choć jedną kolumnę zdefiniowaną jawnie za pomocą <col> - jest ignorowany.

Aby lepiej zilustrować to trudne zagadnienie, omówię przykład: 

<table>
  <colgroup class="liczby" width="50" span="5">
  </colgroup>
  <colgroup width="75">
    <col class="napisy" span="3">
    <col id="nazwa" width="100">
  </colgroup>
  ...

Pierwsza grupa definiuje 5 jednakowych kolumn o szerokości 50 pikseli i klasie "liczby". Druga grupa definiuje kolumny o domyślnej szerokości 75 pikseli. Pośród nich są 3 kolumny o klasie "napisy" i jedna o identyfikatorze "nazwa", której szerokość zostaje zmieniona względem domyślnej szerokości kolumn z tej grupy na 100 pikseli. W sumie tabela będzie więc miała 9 kolumn.

Wiersze i komórki

Wiersze definiuje się za pomocą elementu <tr> (ang. "table row"). Można je zgrupować za pomocą elementów <thead>, <tfoot> i <tbody>. Żadnego z nich nie trzeba (ale można) zamykać. W każdym wierszu musi być tyle samo kolumn.

Warto stosować to grupowanie, ponieważ dla wielu różnego rodzaju przeglądarek może to mieć znaczenie. Przykładowo, długa tabela może być drukowana z wierszami stopki (z sekcji <tfoot>) na końcu każdej strony. Poza tym, dzięki temu możesz nadawać styl całej grupie wierszy.

Choć wydaje się to nienaturalne, grupa wierszy stopki <tfoot> musi być powyżej właściwej treści tabeli <tbody>. Jednak nie ma w tym nic złego - i tak zostanie przez przeglądarkę pokazana na jej końcu. Sekcji <tbody> może być kilka, a każda musi zawierać conajmniej jeden wiersz <tr>.

Są dwa rodzaje komórek: <td> (ang. "table data") oraz <th> (ang. "table head"). Te drugie służą do opisywania nagłówka tabeli. Dzięki temu, że są to pojedyncze komórki, nagłówkiem może być dowolny zbiór komórek - np. te w pierwszym wierszu, w ostatniej kolumnie albo jakiekolwiek inne.

Zobacz Przykład 7.

16. Wykorzystaj maksymalnie linki

Oprócz linków do innych dokumentów, możesz też pisać linki do konkretnych miejsc w tym samym albo w innym dokumencie. Musisz wtedy zastosować znak #, a po nim nazwę, którą oznaczone jest to miejsce. 

<a href="#top">Przejdź do góry</a>

Nazwa takiej kotwicy w ramach jednego dokumentu nie może się powtarzać, nawet bez uwzględniania wielkości liter. Z kolei podczas odnoszenia się do niej wielkość liter musi być zachowana. Może zawierać tylko podstawowe znaki ASCII (a więc bez polskich liter). Kotwicę taką można zdefiniować używając elementu <a>: 

<h1><a name="top">Nagłówek pierwszy</a></h1>

Takie alternatywne użycie tego elementu (wyłącznie z atrybutem name) definiuje tylko kotwicę o podanej nazwie i nie tworzy linka (ale niestety powoduje podkreślenie tekstu). Ten sam element <a> może też być linkiem, jeśli dodatkowo wyposażysz go w atrybut href.

Czasami przydałaby się możliwość zdefiniowania kotwicy w danym miejscu, bez obejmowania nią jakiejś treści - po prostu kotwicy pustej. Teoretycznie jest to możliwe, ale podobno niektóre przeglądarki niezbyt poprawnie na to reagują. Internet Explorer i Mozilla obsługują je dobrze, ale mimo tego lepiej ich nie używać. 

<a name="top"></a> <!-- Lepiej nie -->

Kotwicę definiuje też atrybut id, który nadaje się często różnym elementom i który pełni też różne inne funkcje (m.in. do stylów, do skryptów). On też musi być niepowtarzalny w skali dokumentu. Co więcej, nazwy identyfikatorów i kotwic współdzielą jedną przestrzeń nazw i nie mogą się powtarzać. 

<h1 id="title">Tytuł główny</h1>

17. Prawidłowo wstawiaj obrazki

Zapewne nie jest ci obce wstawianie obrazków do strony WWW. To bardzo popularny zabieg. Warto jednak zwrócić przy tej okazji uwagę na kilka drobiazgów.

Przede wszystkim pamiętaj, że atrybut alt jest _obowiązkowy_. Zawiera on alternatywny tekst, który ma opisywać zawartość obrazka. Tekst ten zostanie wyświetlony w miejscu obrazka, jeśli ten nie może być pokazany (np. w przeglądarce tekstowej, albo po prostu jeśli obrazek nie załaduje się). Ponadto Internet Explorer pokazuje go jako dymek nad obrazkiem. Mozilla tego nie robi. Oto kilka uwag na temat definiowania tego alternatywnego tekstu obrazka:

  • Jeśli obrazek przedstawia napis, ustaw atrybut alt na treść tego napisu.

  • Jeśli obrazek przedstawia coś konkretnego, ustaw go na nazwę albo krótki opis zawartości.

  • Jeśli to jest tylko niewielki element formatujący, pozostaw ten atrybut pusty (alt="").

Warto zawsze wpisywać atrybuty width i height, które określają odpowiednio szerokość i wysokość obrazka. Podanie niezgodnych z jego prawdziwymi wymiarami powoduje jego przeskalowanie, ale warto je podawać zawsze - nawet, jeśli mają to być jego oryginalne wymiary. Przeglądarka może wtedy narysować układ strony uwzględniając wielkość tego obrazka jeszcze zanim zacznie go pobierać.

Ciekawostką jest, że wymiary można też podać w procentach. Obrazek będzie wtedy skalowany proporcjonalnie do wielkości okna przeglądarki. Co więcej, Internet Exporer i Mozilla przeskalowują obrazek proporcjonalnie (tzn. tak, że zawsze zachowuje proporcję między szerokością a wysokością), jeśli jako szerokość poda się width="100%", a wysokości nie poda się wcale.

Istotna jest też ramka (ang. "border") wokół obrazka. Przeglądarki mają nieprzyjemny zwyczaj rysowania jej wokół obrazków, szczególnie jeśli są one linkami. Aby pozbyć się tej ramki, zwykle ustawia się atrybut border. Ten jednak jest wycofany i dlatego najlepiej zdefiniować zerową ramkę wokół wszystkich obrazków za pomocą arkusza stylów. 

img {
  border-width: 0
}
<img src="screen01.gif" width="160" height="100"
  alt="Pierwszy screen z mojego programu">

18. Powinieneś stosować mapy po stronie klienta

Mapa to możliwość zdefiniowania kilku linków w różnych miejscach jednego obrazka. Może działać po stronie serwera. Wystarczy w tym celu ustawić dla obrazka, który jest linkiem atrybut ismap. 

<a href="mapa.php"><img src="obrazek.jpg" alt="Logo" ismap></a>

Po kliknięciu takiego linka serwer otrzyma dodatkowe informacje o pozycji kliknęcia (X,Y), tzn. wywołany zostanie adres w postaci: 

http://www.jan.kowalski.com.pl/mapa.php?10,27

Po stronie serwera leży wtedy obowiązek odpowiedniego zinterpretowania tej pozycji i pokazania lub przekierowania na stosowną stronę. Ale ten sposób jest zły, ponieważ użytkownicy nie mogący oglądać obrazków (przeglądarki tekstowe, głosowe, roboty katalogujące strony dla wyszukiwarek) całkowicie pozbawieni zostają możliwości dostania się pod adresy dostępne przez taką mapę. Poza tym ten sposób jest skomplikowany, bo wymaga napisania skryptów na serwer.

Dużo prostszy, bardziej zalecany i ogólnie lepszy sposób to mapy po stronie klienta. Obrazek używający takiej mapy definiuje się tak: 

<img src="obrazek.jpg" alt="Logo" usemap="#moja_mapa">

Ponadto trzeba też zdefiniować samą mapę: 

<map name="moja_mapa">
<area href="adres1.html" shape="rect" coords="0,0,160,100" alt="Powrót">
<!-- ... -->
</map>

Mapa nosi jakąś nazwę i składa się ze zbioru obszarów (ang. "area"). Każdy z nich musi posiadać:

  1. Adres, pod który odsyła (atrybut href) lub pusty atrybut nohref, który oznacza obszar nie będący linkiem (za jego pomocą można "wyciąć" część obszaru linka, ale w MSIE jakoś nie chce to działać).

  2. Tekst alternatywny (atrybut alt).

  3. Rodzaj kształtu

  4. Parametry kształtu

Możliwe kształty i ich parametry to:

  • shape="default" - cały obrazek. coords="" - brak parametrów.

  • shape="rect" - prostokąt. coords="0,0,160,100" - kolejno pozycja lewej, górnej, prawej i dolnej krawędzi.

  • shape="circle" - okrąg. coords="50,50,20" - kolejno pozycja (X,Y) środka i promień.

  • shape="poly" - wielokąt. coords="10,10,20,10,20,20" - kolejne punkty (X,Y) wielokąta. Jeśli ostatni punkt nie jest taki sam jak pierwszy, wielokąt i tak zostanie domknięty.

Zobacz Przykład 8.

19. Poznaj dobrze formularze

Formularze są przydatne i często stosowane do komunikacji zwrotnej (ang. "feedback") z internautą odwiedzającym stronę WWW. Chciałbym pokazać ci kilka drobiazgów związanych z tym tematem.

Pola formularza tworzy się najczęściej zwykle za pomocą elementu <input>. Jego atrybut type określa rodzaj pola. Jeśli nie podasz tego atrybutu, domyślnie przyjęta zostanie wartość "text", co oznacza kontrolkę do edycji jednowierszowego tekstu.

Specyfikacja podaje, że spośród grupy pól typu "radio" zawsze jedno powinno być zaznaczone. Jeśli żadne nie jest, przeglądarka powinna zaznaczyć pierwsze. Jednak ani Mozilla, ani Internet Explorer tego nie robią. Dlatego żeby być zgodnym jednocześnie ze specyfikacją, różnymi przeglądarkami i własnym sumieniem, warto zawsze zaznaczać jedno z nich za pomocą atrybutu checked.

Ciekawym elementem jest <button>. Pozwala on na stworzenie przycisku, który może mieć dowolną treść (kod HTML) w swoim wnętrzu - np. wielolinijkowy tekst, czy nawet obrazki. Jednak w Internet Explorerze jego obsługa jest bardzo nieładna i dlatego lepiej go nie używać. 

<button type="reset" name="reset">
  <!-- Tutaj tekst, obrazki i dowolny kod typu "inline" -->
</button>

Bardzo irytujące jest w formularzach na stronach WWW, że podczas zaznaczania pół typu "checkbox" czy "radio" trzeba wcelować w samo pole. W zwyczajnych programach wystarczy kliknąć na tekst opisujący dane pole. Okazuje się, że na stronie też można, a nawet powinno się robić coś takiego. Służy do tego element <label>: 

<input type="checkbox" name="programuje" value="tak" id="czy_programuje">
<label for="czy_programuje">Czy programujesz?</input>

Takie objęcie pewnego kodu HTML w element <label> nie powoduje na nim żadnych efektów wizualnych, natomiast kojarzy go z danym polem formularza poprzez identyfikator tego pola i powoduje przekazanie mu ogniska (ang. "focus") oraz zaznaczenie go, jeśli użytkownik kliknie na ten tekst.

Kolejną ciekawostką jest element <fieldset>, który służy do wizualnego grupowania pól formularza w logiczne bloki o podanym tytule. Element ten tworzy bardzo ładnie wyglądającą (szczególnie w Internet Explorer w Windows XP) okalającą ramkę, na której u góry po lewej stronie napisany jest tytuł. 

<fieldset>
  <legend>Dane personalne</legend>
  <!-- Tutaj są pola i inny kod formularza... -->
</fieldset>

Warto zawsze zdefiniować tytuł, jaki ma nosić przycisk typu "submit" do wysyłania danych formularza, bowiem niektóre przeglądarki mają nieprzyjemny zwyczaj domyślnie tytułować go rozwlekłym i niezbyt atrakcyjnie brzmiącym tekstem w rodzaju "Prześlij kwerendę". 

<input type="submit" value="OK">

Na koniec warto napisać kilka słów o liście rozwijalnej <select>. Jej pozycje można grupować za pomocą elementu <optgroup>. 

<select name="wyszukiwarka">
  <optgroup label="Google">
    <option value="google_swiat">Na świecie
    <option value="google_polska">W Polsce
    <option value="google_obrazki">Obrazki
  </optgroup>
  <optgroup label="Inne">
    <option value=yahoo">Yahoo
    <option value="altavista">Altavista
    <option value="onet">Onet.pl
  </optgroup>
</select>

Do poszczególnych pozycji listy rozwijalnej - <option> - można też próbować stosować style. Mozilla akceptuje m.in. background-color (kolor tła), color (kolor tekstu) i margin-left (odstęp po lewej). W Internet Explorer działają te dwa pierwsze.

Zobacz Przykład 9.

20. Spróbuj robić układ strony bez tabel

HTML został stworzony do opisywania prostych stron składających się z kolejnych akapitów tekstu, obrazków itp. Wraz z popularyzacją Internetu wśród zwykłych użytkowników zaistniała potrzeba dostarczania w sposób funkcjonalny i atrakcyjny dużych ilości informacji. Niestety, HTML niezbyt dobrze radzi sobie z opisywaniem wizualnego układu strony.

Najczęściej stosowane do definiowania wizualnego układu strony są tabele <table>. Jednak posiadają one liczne wady i bywa z nimi wiele kłopotu. Nie do tego celu zostały stworzone i nie nadają się do niego najlepiej. Przykładowo, Internet Explorer nie pokazuje tabeli aż do całkowitego wczytania jej treści, a więc strony zrobione na jednej dużej tabeli pokazują się dopiero całe, już załadowane, a wcześniej nie widać nic.

Tabele nie są też zalecane do tworzenia układu strony przez W3C. Organizacja ta zaleca stosowanie innych metod, szczególnie sekcji <div> z przypisanymi odpowiednimi stylami - właściwością position:absolute lub float.

Tworząc stronę w ten sposób możesz pisać poszczególne sekcje w dowolnej kolejności w pliku, ponieważ ich pozycja na ekranie i tak jest ustalona przez arkusz stylów. Zaleca się wtedy, aby wcześniej znalazła się właściwa treść strony, a dopiero potem menu, elementy nawigacyjne i inne. Dzięki temu:

  • Użytkownicy przeglądarek tekstowych zobaczą u góry treść strony, a nie będą musieli na każdej z nich przewijać najpierw długiego menu z listą działów.

  • Użytkownicy przeglądarek dla niewidomych usłyszą najpierw treść strony, a nie będą musieli na każdej wysłuchiwać menu.

  • Wyszukiwarki katalogujące twoją stronę zwrócą większą uwagę na właściwe informacje, jeśli biorą pod uwagę miejsce ich występowania w dokumencie.

  • Użytkownik zwykłej przeglądarki ściągając twoją stronę przez powolne łącze lub z powolnego serwera zobaczy najpierw treść strony i będzie mógł już zacząć ją czytać, a dopiero potem mniej istotne elementy jej układu.

Niestety, ten sposób też nie jest pozbawiony wad. Nawet, jeśli uda się otrzymać pożądany układ strony za ich pomocą, to rozwiązanie wydaje się być nieco "naciągane", posiada liczne ograniczenia i nie daje aż takiej swobody, jak tabele. Dlatego póki co, ja pozostaję przy tabelach.

Zobacz Przykład 10.

CSS

1. Intensywnie wykorzystuj style

HTML ma służyć do opisywania treści. Oczywiście zawiera on liczne informacje dotyczące wyglądu strony, ale powinny one mieć postać odniesienia do arkusza stylów CSS. Odniesienie takie robi się za pomocą atrybutów class oraz id.

class to atrybut stworzony specjalnie do kojarzenia elementów z określoną klasą z arkusza stylów. Wyobraź sobie, że chcesz, aby wszystkie nagłówki <h1> miały kolor czerwony, ale niektóre z nich zielony. W tym celu możesz zdefiniować styl w taki sposób: 

h1 { color: red }
h1.zielony { color: green }

Teraz każdy taki nagłówek będzie czerwony: 

<h1>Rozdział 1</h1>

A każdy przypisany do klasy zielony będzie zielony: 

<h1 class="zielony">Rozdział specjalny !</h1>

Selektor h1.zielony wybiera tylko nagłówki <h1> z przypisaną klasą zielony. Można też napisać selektor taki: .zielony albo taki: *.zielony - obydwa oznaczają wszystkie, dowolne elementy z przypisaną tą klasą.

Możnaby się zastanawiać, dlaczego do tego drugiego nagłówka wybrany zostaje właśnie kolor tekstu zielony, skoro pasują do niego obydwa selektory pokazanego stylu? Specyfikacja definiuje specjalny algorytm doboru selektorów, ale mówiąc ogólnie wyższy priorytet ma ten bardziej szczegółowy (czyli ten drugi).

Element może mieć przypisane na raz kilka klas. Dzięki temu możesz definiować osobne klasy do pogrubiania, zmiany koloru itp. Nazwy klas oddziela się spacją. Odpowiedni kod HTML wygląda w ten sposób: 

<p class="pogrubiony powiekszony czerwony">
  Uwaga!!! Bardzo ważny tekst...
</p>

Podobnie do class działa atrybut id. Są jednak istotne różnice. Ten ostatni służy do nadawania identyfikatorów elementom i jest wykorzystywany nie tylko do stylów. Identyfikatory w ramach jednego dokumentu nie mogą się powtarzać, a element może mieć tylko jeden identyfikator. Styl dla elementu o danym identyfikatorze definiuje się w arkuszu za pomocą znaku "#". 

p#uwaga {
  color: red;
  font-weight: bold;
  font-size: 2em;
}
<p id="uwaga">
  Uwaga!!! Bardzo ważny tekst...
</p>

HTML posiada dwa elementy wymyślone specjalnie do stosowania stylów. Są to:

  • <div> - sekcja. To element typu "block-level", który w swoim wnętrzu może zawierać akapity, kolejne sekcje <div> itp.

  • <span> to element typu "inline". Obejmuje tekst i inne elementy typu "inline" - może znajdować się wewnątrz tekstu.

Zobacz Przykład A.

2. Naucz się osadzać styl

Stylów CSS można używać na 3 sposoby. Pierwszy i najbardziej zalecany to łączenie dokumentu HTML z zewnętrznym plikiem CSS, który zawiera styl dla całego twojego serwisu. 

<head>
  <title>Tytuł mojej strony</title>
  <meta ...
  ...
  <link rel="stylesheet" type="text/css" href="my_style.css">
</head>

Styl można też wpisać bezpośrednio do pliku HTML. 

<head>
  <title>Tytuł mojej strony</title>
  <meta ...
  ...
  <style type="text/css">
    body { ... }
    h1 { ... }
    /* itd... */
  </style>
</head>

Wreszcie, czasami może zajść nagła potrzeba użycia w jednym miejscu jakiegoś nietypowego formatowania. Wtedy z pomocą przychodzi obecny w bardzo wielu elementach atrybut style i ratuje nas od używania wycofany elementów formatujących takich, jak <font>. 

<!-- Wyjątkowo, ten jeden akapit ma być zielony -->
<p style="color:green">
  ...
</p>

3. Poznaj zaawansowane selektory

Selektor to wyrażenie, które mówi, jakie elementy dokumentu HTML mają mieć nadany określony styl. Oprócz najczęściej używanych, prostych selektorów, jak sama nazwa elementu (np. h1), dostępne są też dużo bardziej zaawansowane możliwości. Oto kilka przykładów:

  • .klasa - pasuje do wszystkich elementów o klasie klasa.

  • *.klasa - jak wyżej.

  • #identyfikator - pasuje do elementu, który ma id="identyfikator".

  • h1.klasa - pasuje tylko do elementów <h1> o klasie klasa.

  • div p - pasuje do akapitów <p>, które leżą gdzieś (niekoniecznie bezpośrednio) wewnątrz elementu <div>.

  • div > p - pasuje tylko do akapitów <p>, które leżą bezpośrednio wewnątrz elementu <div>.

  • table + p - pasuje do akapitów <p>, które leżą bezpośrednio po tabeli <table>.

  • p[id] - pasuje do akapitów <p>, które posiadają atrybut id (niezależnie od jego wartości).

  • a[href="index.html"] - pasuje do akapitów <p>, których podany atrybut ma dokładnie podaną wartość (<a href="index.html" ...>.

Dostępne są też użyteczne pseudoklasy:

  • :first-child - elementy, które są pierwszym elementem zagnieżdżonym w swoim elemencie nadrzędnym.

  • :lang(en) - elementy które mają ustawiony (lub odziedziczony z elementów nadrzędnych) język określony jako angielski (lang="en").

  • :link - link jeszcze nie odwiedzony.

  • :visited - link już odwiedzony.

  • :hover - link, nad którym jest kursor myszy.

  • :active - link "wciśnięty".

  • :focus - link, który ma ognisko (ang. "focus").

Oraz pseudoelementy:

  • :first-line - pierwsza linia tekstu.

  • :first-letter - pierwsza litera tekstu.

  • :before, :after - pozwalają na wstawianie dodatkowego tekstu na początku i na końcu elementów, ale niestety nie działają w Internet Explorer.

Mozilla definiuje własne, ciekawe rozszerzenia:

  • :not - zaprzeczenie selektora

  • :empty - element pusty

Pseudoelementy :not i :empty nie są wymysłem programistów Mozilli.
Są to elementy wprowadzonego standardu CSS 3.
Nawiasem mówiąc Mozilla obsługuje już sporą część tego standardu.

Selektory można łączyć w bardziej skomplikowane. Przykładowo, poniższy selektor ustawia czerwony kolor tekstu wyłącznie dla elementów <span>, które należą do klasy red i które leżą bezpośrednio wewnątrz akapitu <p> w języku angielskim (lang="en"), ale tylko jeśli akapit taki leży gdzieś wewnątrz sekcji <div> o identyfikatorze content. 

div#content p:lang(en) > span.red {
  color: red;
}

Niestety te różne zaawansowane możliwości selektorów CSS nie we wszystkich przeglądarkach działają poprawnie. Ostatecznie jednak i tak rzadko bywają potrzebne.

Zobacz Przykład B.

4. Stosuj komentarze

Arkusz stylów CSS może zawierać komentarze, czyli twój własny tekst, który jest ignorowany podczas przetwarzania. Naprawdę warto ich używać, choćby do opisywania klas - po co które wprowadziłeś i kiedy należy je stosować. Komentarze piszę się tak: 

/* Ta klasa definiuje tekst, który jest bardzo ważny i
   ma przykuć uwagę czytelnika. Stosować do ostrzeżeń itp.
*/
.uwaga {
  color: red;
  font-weight: bold;
}

5. Wyrażaj długość w różnych jednostkach

Bardzo wiele właściwości w CSS (ang. "properties") wymaga podania długości, wysokości, szerokości, grubości czy innej wielkości tego rodzaju. Trzeba *zawsze* wyrażać je w określonych jednostkach. Istnieje wiele jednostek, podzielonych na względne i bezwzględne. Warto je znać. Jednostkę można pominąć tylko, jeśli wartością liczbową jest 0. Jednostka musi następować bezpośrednio po liczbie, bez jakiejkolwiek spacji. 

.klasa1 { padding: 0 } /* dobrze */
.klasa2 { padding: 4 } /* ŹLE !!! */
.klasa3 { padding: 4 px } /* ŹLE !!! */
.klasa4 { padding: 4px } /* dobrze */

Jednostki względne są najbardziej użyteczne, szczególnie do określania długości na ekranie:

  • px - piksele.

  • em - wysokość bieżącej czcionki. Jeśli użyta do określania wielkości czcionki, odnosi się do wielkości czcionki elementu nadrzędnego, np. powiększenie czcionki o 20% można wyrazić jako: 

    font-size: 1.2em

    Z kolei margines nad akapitem wysoki na dwie linie można zrobić tak: 

    <p style="margin-top:2em">...

  • ex (tzw. "x-height") - wysokość małej litery "x" bieżącej czcionki.

Jednostki bezwzględne mają sens jedynie wtedy, kiedy znane są parametry urządzenia wyjściowego, np. w przypadku drukarki.

  • cm - centymetry

  • mm - milimetry

  • in - cale (ang. "inch")

  • pt - punkty (1/72 cala)

  • pc - "picas" (12 punktów)

Długości można też wyrażać w procentach za pomocą znaku "%".

6. Zapisuj kolory na różne sposoby

Kolory można zapisywać na wiele różnych sposobów. Pierwszym z nich są nazwy. Poniżej prezentuję pełną listę nazw, jakie definiuje standard. Wszystkie inne, których obszerny spis jest często prezentowany w różnych kursach w Sieci, nie należą do standardu i są niepoprawne.

  •       black

  •       gray

  •       silver

  •       white

  •       fuchsia

  •       red

  •       orange

  •       yellow

  •       lime

  •       aqua

  •       blue

  •       purple

  •       maroon

  •       olive

  •       green

  •       teal

  •       navy

Kolory niestandardowe trzeba zapisywać w sposób liczbowy. Najbardziej popularna pośród tych sposobów jest chyba forma: #RRGGBB, gdzie RR, GG i BB to wartości szesnastkowe odpowiednich składowych koloru - czerwonej, zielonej i niebieskiej. Na przykład #000000 oznacza kolor czarny, #FFFFFF biały, a #FF0000 czerwony.

Istnieje jednak skrócona notacja w formie: #RGB. Tutaj każdą składową definiuje tylko jedna cyfra szesnastkowa. Przykładowo kolor jasnoczerwony #fee jest rozwijany do #ffeeee, a nie do #f0e0e0.

Kolor można też określić za pomocą liczb dziesiętnych w formie takiej jak w tym przykładzie: RGB(255,0,0), albo procentowo: RGB(100%, 0%, 0%).

7. Poznaj pojęcie mediów

HTML wspólnie z CSS zaprojektowane zostały tak, by dokumenty w nich napisane mogły być odczytywane przez różnorodne programy, jak przeglądarki tekstowe, dźwiękowe (dla niewidomych) i inne. Wiadomo jednak, że strona nie może w nich wszystkich wyglądać jednakowo. Dlatego wprowadzono możliwość definiowania stylów osobno dla różnych rodzajów mediów. Nazwy najważniejszych dla nas mediów, które definiuje specyfikacja to:

  • all - wszystkie

  • screen - ekran

  • print - drukarka

  • tty - urządzenie (program) tekstowe piszące czcionką nieproporcjonalną, jak konsola czy terminal

  • tv - ekran o niskiej rozdzielczości i ograniczonych możliwościach przewijania

  • projection - prezentacja multimedialna

  • handheld - małe, czarno-białe urządzenie przenośne

Dzięki zdefiniowaniu stylu (lub tylko pewnych jego elementów) wyłącznie dla poszczególnych mediów możesz np. ukryć menu, zmienić czcionkę, kolory, tło itp. dla wersji strony przeznaczonej do drukowania. To naprawdę działa! Wszystko załatwi za ciebie przeglądarka, nie musisz już przygotowywać w swoim serwisie osobnych skryptów generujących "wersję do druku".

Jednym ze sposobów wykorzystania mediów jest dołączenie w pliku HTML arkusza stylów tylko dla określonego medium: 

<link rel="stylesheet" type="text/css" media="print"
      href="MyStyle_ForPrint.css">

Inny sposób to zdefiniowanie sekcji dla określonego medium już w samym arkuszu stylów: 

/* Tu jest styl ogólnie dla wszystkich mediów */
...
@media print {
  /* Tu jest styl do drukowania
     Nadpisuje on ustawienia stylu ogólnego
  */
  body {
    font-family: "Times New Roman", serif;
    /* itp... */
  }
  ...
}

Zobacz Przykład C.

8. Zrozum model blokowy

Każdy element typu "block-level" definiuje pewien prostokątny obszar. Przyjrzyjmy się jego krawędziom. Obszar taki składa się z:

  1. Treści

  2. Wypełnienia padding

  3. Krawędzi border

  4. Marginesu margin

Wypełnienie to odstęp treści obszaru od jego krawędzi. Jest rysowane z takim samym tłem, jak treść tego obszaru. Margines to odstęp krawędzi obszaru od krawędzi obszarów sąsiednich. Jedyne, co można robić z tymi dwoma wielkościami, to definiować ich szerokość - wszystkich czterech jednocześnie: 

padding: 4px;

Lub każdej z osobna:

maring-left: 16px;
maring-right: 0;

Podczas obliczania odstępu między sąsiednimi blokami ich marginesy nie są sumowane. Następuje ich złączenie (ang. "collapse") - wybierany jest większy spośród nich.

Dużo więcej można zrobić z krawędzią. Oprócz jej szerokości można ustalić kolor oraz styl linii, jaką jest rysowana.

Zobacz Przykład D.

9. Nie definiuj globalnie typu listy

Rodzaj wypunktowania lub numerowania listy można zmienić w stylu za pomocą właściwości list-style-type. Jednak nie definiuj jej globalnie dla wszystkich list w dokumencie. Zagnieżdżone na różnych poziomach zagłębienia listy są automatycznie oznaczane w różny sposób, a robiąc to pozbawiłbyś swoją stronę tego efektu.

Do numerowania kolejnych pozycji listy odpowiednio małymi i dużymi literami służą dwie równoważne pary dopuszczalnych wartości: lower-alpha i upper-alpha oraz lower-roman i upper-roman. Używaj zawsze tych pierwszych, bo te drugie nie działają w Internet Explorerze.

Za pomocą właściwości list-style-position można wybrać, czy oznaczenia kolejnych pozycji mają się mieścić wewnątrz ich prostokąta (wartość "inside"), czy na zewnątrz (wartość "outside").

Zobacz Przykład E.

10. Wykorzystaj potęgę czcionek

Tekst to najważniejszy element stron WWW. Język CSS daje ogromną kontrolę nad wyglądem tekstu i warto te możliwości jak najlepiej wykorzystać. Za podstawową właściwość można uznać font-family, która określa nazwę kroju czcionki. Można wymienić kilka nazw - kiedy przeglądarka nie zna jednej, próbuje użyć następnej.

Pamiętaj, że strona powinna dobrze wyglądać w różnych przeglądarkach, ale także w różnych systemach operacyjnych. Różne systemy mają różne zestawy czcionek. Dlatego na końcu listy należy zawsze podać jedną ze standardowych, ogólnych nazw:

  • serif - czcionka szeryfowa (jak "Times New Roman") - dobra do drukowania

  • sans-serif - czcionka bezszeryfowa (jak "Verdana" czy "Arial") - dobra do ekranu

  • monospace - czcionka nieproporcjonalna (jak "Courier New" czy "Fixedsys" - każda litera ma taką samą szerokość) - dobra do kodów źródłowych itp.

  • fantasy - czcionka ozdobna

  • cursive - kursywa

Przykładowy zbiór klas do różnych czcionek może wyglądać tak: 

body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 9pt;
  ...
}
.kod {
  font-family: "Courier New", Courier, monospace;
  font-size: 9pt;
}
.naglowek_ozdobny {
  font-family: palatino, georgia, "times new roman", serif;
}
.naglowek_komputerowy {
  font-family: Courier;
  font-size: 40px;
}
@media print {
  body {
    font-family: "Times New Roman", serif;
  }
}

Do pochylania służy właściwość font-style. Jej najważniejsze wartości to normal i italic. Do pogrubiania z kolei służy właściwość font-weight z wartościami normal i bold. Ta ostatnia ma dużo innych możliwych wartości i pozwala nawet określać "grubość" czcionki liczbowo, ale w praktyce tylko te dwie wartości różnią się wyglądem.

Do podkreślania (i nie tylko) służy właściwość text-decoration o dopuszczalnych wartościach:

  • none - nic specjalnego

  • underline - podkreślenie (linia pod tekstem)

  • overline - nadkreślenie (linia nad tekstem)

  • line-through - przekreślenie (Internet Explorer rysuje je trochę niżej, niż Mozilla i wygląda odrobinę nieładnie :)

  • blink - miganie (tekst pojawia się i znika, w Internet Explorer nie działa)

Do określania wielkości tekstu służy właściwość font-size. Jej dopuszczalne wartości to:

  • xx-small, x-small, small, medium, large, x-large, xx-large - w praktyce kolejne wielkości nie rosną liniowo. Pierwsze dwie są praktycznie takie same, a dopiero począwszy od wartości large rosną szybko. Poza tym do zwykłego tekstu najodpowiedniejsza wydaje się wielkość small.

  • larger, smaller - wielkość względna - powiększenie albo pomniejszenie czcionki względem czcionki elementu nadrzędnego.

  • Wielkość wyrażona w dowolnych jednostkach, jak procenty, pt, px, em, ex itp.

Dosunięcie tekstu reguluje właściwość text-align o wartościach ze zbioru:

  • left - do lewej

  • center - do środka

  • right - do prawej

  • justify - wyjustowanie (do lewej i do prawej, odstępy w tekście zostają odpowiednio rozciągnięte - ładnie to wygląda, ale gorzej się czyta)

Właściwość o prostej nazwie font pozwala równie prosto ustawić całą czcionkę (wszystkie jej parametry) na raz, według jednej z czcionek domyślnych przeglądarki:

  • caption - czcionka używana na kontrolkach interfejsu użytkownika, jak przyciski, listy rozwijalne itp.

  • icon - czcionka używana do podpisywania ikon

  • menu - czcionka używana w menu

  • message-box - czcionka używana w oknach dialogowych

  • small-caption - czcionka używana w etykietach małych kontrolek

  • status-bar - czcionka używana na pasku stanu

Właściwość text-transform pozwala zamienić wszystkie litery danego tekstu na duże (wartość uppercase), na małe (wartość lowercase), pierwsze litery każdego wyrazu na duże (wartość capitalize) lub pozostawić wielkość liter bez zmian (none).

Ciekawy efekt pozwala uzyskać właściwość font-variant ustawiona na wartość small-caps (domyślnie ma wartość normal). Cały tekst jest wtedy pisany kapitalikami (wygląda wtedy jak pisany dużymi literami, ale litery oryginalnie duże są większe od pozostałych w sensie wielkości).

Wreszcie - text-indent określa szerokość wcięcia pierwszej linii tekstu letter-spacing wielkość dodatkowego odstępu pomiędzy literami, a word-spacing odstępu pomiędzy wyrazami. O zachowywaniu oryginalnego odstępów (jak znaki końca wiersza) z kodu HTML mówi właściwość white-space, ale nie we wszystkich przeglądarkach poprawnie działają wszystkie jej wartości.

Zobacz Przykład F.

11. Możesz używać rozszerzeń Microsoftu

Microsoft wprowadził dla swojej przeglądarki Internet Explorer szereg rozszerzeń. Używając ich możesz otrzymać na swojej stronie ciekawe efekty, ale będą one działały tylko w tej przeglądarce (czyli u 80% użytkowników). Twoja strona nie jest wtedy w pełni zgodna ze standardem, ale z drugiej strony standard przewiduje możliwość wprowadzania nietypowych rozszerzeń.

Nie zapominaj jednak o pozostałych użytkownikach. Jeśli postarasz się o poprawny kod, twoja strona może we wszystkich przeglądarkach wyglądać bardzo dobrze, a w tej najpopularniejszej jeszcze lepiej! :)

Jednym z tych rozszerzeń jest możliwość kolorowania pasków przewijania strony. Poniżej znajduje się przykładowy styl. Więcej informacji znajdziesz na stronie Colouring the scrollbar in IE 5.5+. 

body {
  scrollbar-arrow-color: black;
  scrollbar-face-color: lime;
  scrollbar-highlight-color: white;
  scrollbar-3dlight-color: silver;
  scrollbar-shadow-color: gray;
  scrollbar-darkshadow-color: black;
  scrollbar-track-color: green;
}

Można stosować różne efekty tekstowe. To jakby rozszerzenie tego, co CSS pozwala standardowo zrobić z czcionką. Za ich pomogą można ciekawie ozdabiać nagłówki. Wystarczy dopisać do stylu filtr w postaci: Filter:rodzaj-filtru(parametr,parametr,...), np.: 

filter: Wave(Add=1, Freq=4, LightStrength=50,Phase=50,Strength=10);

Oto lista filtrów, których nazwy znam. Do każdego trzeba jeszcze znać parametry.

  • Blur - wrażenie szybkiego przesuwania elementu

  • Glow - rozproszony cień wokół elementu

  • DropShadow - cień za elementem

  • FlipH - odbicie poziome

  • FlipV - odbicie pionowe

  • Shadow - dodatkowy cień za elementem

  • Wave - zniekształcenie (fala)

  • Alpha - przezroczystość

  • Chroma - jeden kolor przezroczysty

  • Grayscale - skala szarosci

  • Invert - negatyw

  • Light - podświetla fragmenty

  • Mask - tworzy z obiektu maskę przezroczystości

  • Xray - zewnetrzne granice

Żeby filtry tego rodzaju działały, blok zawierający tekst musi mieć też zdefiniowaną w stylu szerokość width lub wysokość height.

Jeszcze inne efekty (od prostego efektu przejścia - gradientu - na tle, aż po dużo bardziej zakręcone :) można otrzymać stosując do całych sekcji <div> filtry w postaci takiej, jak np.: 

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
  startColorStr=#77AAFF,endColorStr=#FFAA77);

Te wszystkie rozszerzenia działają tylko wtedy, gdy plik HTML nie posiada na początku określenia żadnej z wersji HTML w rodzaju: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Godne polecenia, chociaż może niezbyt pożądane przez internautów ze względu na wprowadzane opóźnienie w ich nawigacji między stronami, są efekty przejścia znane dotychczas z programów do prezentacji (jak Microsoft PowerPoint). Można je stosować do całych stron definiując efekt na wejście i efekt na wyjście za pomocą nagłówka HTTP lub jego odpowiednika w postaci znacznika <meta>, np.: 

<meta http-equiv="Page-Enter"
      content="RevealTrans(Duration=2.0,Transition=10)">

Można też stosować je do pojedynczych bloków na stronie, ale ich wyzwalanie wymaga kodu JavaScript lub innego języka skryptowego. Po szczegóły dotyczące filtrów i przejść odsyłam na stronę Cascading Style Sheets.

Zobacz Przykład G.

Zakończenie

W artykule omówiłem wybrane szczegóły języków HTML i CSS pod kątem zarówno zgodności ze specyfikacją, jak i realizacji praktycznej w najpopularniejszych przeglądarkach. Mam nadzieję, że okażą się one przydane tobie podczas tworzenia stron WWW nawet, jeśli nie jest to twoim głównym zajęciem. Uważam bowiem, że warto dbać o poprawny i dobrze działający kod - nawet, jeśli nie jest to kod języka programowania.

Na koniec chciałbym pozdrowić moich kolegów o pseudonimach:

  • Xion - za recenzję, cenne uwagi i ogólne wspieranie mnie w mojej działalności :)

  • g[R]eK - za przekonanie mnie, jak ważna jest zgodność ze standardem i ogólnie za niestrudzone głoszenie swoich kontrowersyjnych poglądów :)

Dodatki

1. Przykłady

Oto linki do wszystkich przykładów dołączonych do artykułu zebrane w jednym miejscu.

2. Elementy HTML

Oto spis omówionych w artykule (lub choćby wspomnianych) elementów języka HTML. Jak wiele z nich znałeś przed jego lekturą? To oczywiście nie jest pełna lista elementów - język zawiera ich dużo więcej.

<a>, <abbr>, <acronym>, <address>, <area>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <col>, <colgroup>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <h1>, <head>, <html>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <meta>, <ol>, <optgroup>, <option>, <p>, <pre>, <q>, <samp>, <select>, <span>, <strong>, <style>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <title>, <tr>, <ul>, <var>

3. Atrybuty HTML

Oto spis omówionych w artykule atrybutów języka HTML.

alt, background, class, colspan, content, coords, for, height, href, hreflang, http-equiv, id, ismap, label, lang, media, name, rel, shape, span, src, summary, title, type, usemap, width, value

4. Właściwości CSS

Oto spis omówionych w artykule właściwości (ang. "properties") języka CSS.

border-bottom, border-left, border-style, border-width, color, filter, float, font, font-family, font-size, font-style, font-variant, font-weight, letter-spacing, list-style-position, list-style-type, margin-left, margin-right, margin-top, padding, padding-left, position, scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color, text-align, text-decoration, text-indent, text-transform, white-space, word-spacing

Adam Sawicki "Regedit"
www.programex.prv.pl
www.regedit.risp.pl

D.F.
Copyright © by MiniMax 1997/2007. All rights reserverd!