@Szczygliś was here: Kurs projektowania WWW od podstaw. Lekcja 3

nastepna lekcja >>

UWAGA: Efekty działania znaczników nie są pokazywane na tej stronie! >> Przykłady.zip

W tej lekcji nauczymy się jak używać tego co jest w HTML najważniejsze - czyli hiperłączy. Popracujemy też trochę z tabelami i nareszcie stworzymy coś konkretnego, co będzie miało już ręce i nogi. Na początek, tak jak ostatnio - pobieramy przygotowany plik z przykładami i rozpakowywujemy gdzieś na swoim komputerze.

Link do pobrania przykładów do Lekcji 3 znajduje się poniżej:
http://www.szczyglis.cba.pl/lekcje_html.html

UWAGA: Począwszy od tej lekcji, a więc lekcji numer 3 - każdy plik z przykładami zawierać będzie w sobie również wszystkie poprzednie przykłady z poprzednich lekcji, a także wszystkie dotychczasowe lekcje (włącznie z obecną) zapisane w postaci pliku PDF.

Na wstępie powiemy sobie, czym są hiperłącza. Używamy ich na codzień - są to po prostu tekstowe, lub graficzne odnośniki kierujące do innych stron lub plików. Nauczymy się teraz jak z nich korzystać i jak je tworzyć. Otwórzmy w przeglądarce plik z pierwszym przygotowanym przykładem, a więc "Lekcja3_przyklad_1.html". Co widzimy? Widzimy na górze 4 linki (hiperłącza) do pozostałych trzech przykładów przygotowanych dla tej lekcji. Możecie sobie poklikać i zobaczyć, co przygotowałem w pozostałych przykładach. Pozostańmy jednak przy naszym pierwszym przykładzie. Jak widać, również po lewej stronie znajdują się 3 linki, z czego jeden prowadzi do nikąd, a dwa pozostałe do przeglądarki Google. Otwórzmy teraz nasz przykład w Notatniku.

MetaTagi

Na początek, zanim przejdziemy do omawiania tematu odnośników, spójrzmy na kod naszego przykładu. Jak zapewne zauważyliście, w pliku z przykładem pojawiło się kilka rzeczy, których nie było wcześniej. M.in. w nagłówku pojawiły się dwa nowe znaczniki <meta>: "description" (opis strony) i "keywords" (słowa kluczowe).

Do czego służą te znaczniki?

"description" - pozwala na wpisanie krótkiego (najlepiej do 250 znaków) opisu naszej strony. Opis ten zostanie wyświetlony np. w wyszukiwarce Google, pod nazwą naszej strony.

"keywords" - pozwala na określenie słów kluczowych pomocnych dla wyszukiwarek podczas przeszukiwania stron. Słowa oddzielamy przecinkami starając się dobrać je tak, aby jak najdokładniej opisywały naszą stronę. Nie przekraczajmy również ilości 100 słów, gdyż wyszukiwarki nie lubią ich nadmiaru.

W naszym przypadku wygląda to tak:

<meta name="description" content="Kurs HTML dla początkujących" />
<meta name="keywords" content="kurs,html,podstawy,www,tworzenie,budowa,stron" />

Użycie tego typu znaczników wygląda więc następująco:

<meta name="NAZWA_METATAGU" content="ZAWARTOŚĆ METATAGU" />

Jak widać nazwę tagu <meta> wpisujemy w "name" (pol. "nazwa"), natomiast nasz opis i słowa kluczowe w "content" (pol. "zawartość"). Z czasem poznamy więcej znaczników <meta> - będę je dodawał stopniowo, podczas każdej kolejnej lekcji będzie dochodzić coś nowego. Myślę, że taka forma nauki będzie lepsza, niż pokazanie wszystkiego naraz.

Kolory w HTML

          <body bgcolor="#FFFFFF">

Przy znaczniku <body> pojawił się nowy atrybut o nazwie "bgcolor". Jest to skrót od angielskiego "background color", co po polsku znaczy "kolor tła". Jak więc sama nazwa wskazuje - atrybut ten określa kolor tła dla naszej strony. Wartość koloru możemy podać na dwa różne sposoby - jako angielską nazwę, np. "white", "red", "black", lub w dokładniejszej formie - jako wartość szesnastkową danego koloru. Wartość szestastkową danego koloru poda nam zawsze pierwszy lepszy program graficzny, jak np. Photoshop, czy GIMP. Warto pamiętać, że wartość koloru w postaci szesnastkowej podajemy zawsze ze znakiem "#".

Wartość szesnastkową (hex) danej barwy możemy też w każdej chwili uzyskać, korzystając z dostępnych w internecie generatorów, np. tutaj:

http://www.w3schools.com/tags/ref_colorpicker.asp
(warto sobie tą stronę dodać np. do Ulubionych)

W naszym przypadku jako kolor tła podany jest kolor biały (#FFFFFF) więc nie widzimy efektu na ekranie, możemy jednak sami poeksperymentować i wpisać tam wartość innej barwy. Podczas poważnej pracy będziemy zawsze korzystać z postaci szesnastkowej, nazw angielskich będziemy używać jedynie czasami, podczas prostych działań. Wartość szestastkowa jest generalnie bardzo prosta do obliczenia "w głowie". Nie będzie to nam potrzebne, ale może dać jako taki pogląd, więc pokrótce opiszę zasadę zamiany kolorów na wartość HEX. Jak wiadomo, każda barwa wyświetlana na monitorze składa się z trzech składowych RGB, gdzie R(red) = czerwony, G(green) = zielony, B(blue) = niebieski. Każda z tych trzech składowych przyjmuje wartości od 0-255, w zależności od natężenia koloru. Dopiero połączenie tych 3 składowych daje nam w wyniku odpowiednie kolory. Tak jak w realnym życiu - mieszamy podstawowe barwy, aby uzyskać barwy złożone. Na logikę rzecz biorąc, aby uzyskać kolor biały, musimy nadać wszystkim trzem składowym wartości maksymalne, czyli: R=255, G=255, B=255. Analogicznie, aby uzyskać kolor czarny, musimy nadać im wartości zerowe: R=0, G=0, B=0. Aby uzyskać kolor czerwony: R=255, G=0, B=0, zielony: R=0, G=255, B=0 itd. W zapisie szestastkowym zapisywane jest to w taki sam sposób. Zapis #FFFFFF oznacza tak naprawdę #RRGGBB, gdzie RR to wartość szesnastkowa koloru czerwonego, GG - zielonego, a BB - niebieskiego. Wartość "255" to w systemie szesnastkowym "FF", wartość "0" to "00", tak więc jak widzimy, zapis #FFFFFF oznacza w rzeczywistości dokładnie to samo co 255.255.255 (R=255, G=255, B=255) - czyli kolor biały.

      Zapisy: <body bgcolor="#FFFFFF"> i <body bgcolor="white"> dadzą nam ten sam efekt.

Wiemy już co nieco o zapisie szesnastkowym, czas przejść dalej. Znaczniki <a href=...> narazie pomińmy, gdyż będziemy je omawiać dopiero za chwilę, przyjrzyjmy się jedynie dwóm nowym zapisom:

        <p align="left">

        i

        <hr size="5" color="red" noshade />

W pierwszym przypadku, nadaliśmy znacznikowi <p> atrybut "align" (wyrównanie) o wartości "left" (do lewej). W poprzedniej lekcji omawialiśmy coś podobnego, jednak dotyczyło to znacznika <div>. Tutaj to samo zrobiliśmy ze znacznikiem akapitu. Warto zauważyć, że <p> znajduje się wewnątrz <div>, który ma ustawione wyrównanie "center", a więc do środka. Dlatego, iż podaliśmy, że <p> będzie wyrównany do lewej, to tak właśnie się dzieje - znacznik <p> przestaje słuchać znacznika <div> i idąc swoją własną drogę, wyrównuje się do strony lewej. Oczywiście obowiązuje to jedynie naszego <p></p>, po akapicie wszystko wraca do formy i nadal obowiązuje wyrównanie do środka, które zarządził nadrzędnie znacznik <div>.

Kolejną nowością jest znacznik <hr />. Omawialiśmy go już wcześniej, jedakże tutaj doszło coś nowego - atrybut "color", który jak widać, zmienia kolor naszej linii z czarnego na czerwony. Jak widzimy, słowo "red" w tym przypadku w zupełności wystarcza, nie ma potrzeby zapisywania tego szesnastkowo. Choć oczywiście, zamiast "red", możemy wpisać "#FF0000", co da nam taki sam efekt.

Hiperłącza

Przechodzimy do głównego tematu. Hiperłącza tworzy się bardzo prosto, należy jednak pamiętać o kilku podstawowych zasadach, o których w tej lekcji się dowiemy. Jak wygląda takie hiperłącze (odsyłacz, odnośnik) od strony języka HTML? W najprostszej wersji, wygląda to tak:

        <a href="adres_do_którego_prowadzi_łącze">tekst_odnośnika</a>

Jak więc widzimy, za hiperłącze odpowiada znacznik <a>. Jest to skrót od ang. "anchor", co po polsku znaczy "kotwica". Atrybut "href", który jako wartość przyjmuje adres, do którego prowadzi nasz odnośnik, to skrót od ang. "hypertext reference", co oznacza "odnośnik hipertekstowy".

Popatrzmy na przykład:

        <a href="http://www.google.pl">To jest odnośnik do Google.pl</a>

Wyjątkowo teraz przedstawię efekt działania bezpośrednio na tej stronie.
Zapis taki jak powyżej w efekcie stworzy nam coś takiego:

        To jest odnośnik do Google.pl

Pamiętajmy, że znacznik <a> zamykamy zawsze po wpisaniu tekstu naszego odnośnika za pomocą </a>. Odnośniki mogą prowadzić zarówno do stron znajdujących się w internecie, jak również do plików, czy stron na naszym dysku. Mogą również prowadzić np. do obrazków, czy każdego innego rodzaju plików. Tworząc odnośnik do strony znajdującej się w internecie musimy zawsze pamiętać o podaniu "http://" przed adresem - to bardzo ważne. Przedrostka "http://" nie podajemy natomiast w przypadku, gdy strona/plik, do której prowadzi odnośnik znajduje się lokalnie na naszym komputerze.

Prosta nawigacja

Przykład: w folderze znajdują się dwa pliki - "strona1.html" i "strona2.html". Chcemy na każdej z nich utworzyć odnośnik do strony drugiej, jak to zrobimy? W pliku "strona1.html" stworzymy odnośnik, który wyglądać będzie tak:

        <a href="strona2.html">Link do strony 2</a>

Natomiast w pliku "strona2.html" stworzymy coś takiego:

        <a href="strona1.html">Link do strony 1</a>

Tym samym, mamy już prostą nawigację pomiędzy dwoma osobnymi stronami.
Widzimy to również na naszym przykładzie, który pobraliśmy - możemy tam w prosty przełączać się pomiędzy poszczególnymi przykładami.

Popatrzmy teraz na nasz przykład w Notatniku i zobaczmy jak tam to wygląda:

        <p>
           <a href="Lekcja3_przyklad_1.html"><b>link do przykładu #1</b></a><br />
           <a href="Lekcja3_przyklad_2.html">link do przykładu #2</a><br />
           <a href="Lekcja3_przyklad_3.html">link do przykładu #3</a><br />
           <a href="Lekcja3_przyklad_4.html">link do przykładu #4</a>
        </p>

Powyższy kod odpowiada za wyświetlenie odnośników do wszystkich pozostałych przykładów, które pobraliśmy. Zauważmy, że nie używamy tutaj "http://", gdyż wszystkie pliki, do których prowadzą odnośniki znajdują się w naszym folderze. Powyższy kod jest powtórzony w każdym z przykładów, tak aby z każdego przykładu można było przejść do wszystkich pozostałych. Jedyną różnicą jest to, iż w każdym przykładzie pogrubiona jest nazwa odnośnika, w którym aktualnie się znajdujemy.

Status odnośnika

Co zauważamy podczas klikania na naszych odnośnikach? Napewno zauważamy, że zmieniają one kolor. Odnośnik, który został już odwiedzony zmienia np. kolor na fioletowy. Dlaczego tak się dzieje? Dlatego, iż każdy odnośnik w języku HTML posiada tzw. 4 różne stany w jakich może się znajdować. Są to odpowiednio:

        - link (zwykły odnośnik)
        - active (odnośnik, w którym obecnie jesteśmy)
        - visited (odnośnik, który został już przez nas kiedyś kliknięty/odwiedzony)
        - hover (odnośnik w momencie najechania na niego myszką)

Przykładowo - jeśli najeżdżamy myszką na dany odnośnik, to w momencie trzymania nad nim kursora otrzymuje on chwilowo stan "hover". Jeśli natomiast na odnośnik klikniemy, to zapamiętane zostanie, że w dany odnośnik weszliśmy - otrzyma on więc status "visited" i zmieni kolor na fioletowy. Oczywiście jak narazie - wygląda to dość brzydko, zarówno podkreślenie jak i kolory, ale z czasem nauczymy się jak wizualnie zmieniać wygląd naszych odnośników, a także nauczymy się jak wykorzystywać wszystkie te 4 stany w jakich może znaleźć się odnośnik, żeby uzyskać ciekawe efekty.

Foldery i podfoldery

Co jeśli chcemy utworzyć odnośnik do strony, która znajduje się np. w podfolderze? Nic prostszego, podajemy po prostu do niego ścieżkę:

        <a href="podfolder/moja_strona.html">Mój odnośnik</a>

Co jednak jeśli zechcemy na stronie znajdującej się w naszym podfolderze wstawić odnośnik do strony, która znajduje się folder wyżej? Musimy wykorzystać znak przejścia do folderu nadrzędnego. Pokażę to na przykładzie:

Załóżmy, że w folderze mamy plik "strona1.html" i podfolder o nazwie "podfolder", a w nim plik "strona2.html". Jak prawidłowo umieścić w tych dwóch plikach odnośniki, tak aby jeden prowadził do drugiego i na odwrót?

W pliku "strona1.htm" zrobimy to tak:

    <a href="podfolder/strona2.html">Link do pliku podfolder/strona2.html</a>

Jak jednak zrobimy to w pliku "strona2.html", który znajduje się przecież folder "głębiej"? Zrobimy to tak:

        <a href="../strona1.html">Link do pliku strona1.html folder wyżej</a>

Jak widzimy - znak "../" oznacza po prostu "folder wyżej", "folder nadrzędny".
Analogicznie, jeśli chcemy przejść o 2 foldery wyżej, to wykorzystujemy "../../" itd. Hiperłącza jednak, tak jak wspomniałem wcześniej, nie muszą prowadzić jedynie do stron WWW, mogą prowadzić do każdego rodzaju plików, nic nie stoi na przeszkodzie, żeby stworzyć np. taki odnośnik:

        <a href="pliki/plik.zip">Link do pliku 'plik.zip'</a>

lub taki:

        <a href="obrazki/mona_lisa.jpg">Link do obrazu 'Mona Lisa'</a>

Możemy również tworzyć odnośniki wykorzystujące inne protokoły, niż HTTP, np:

<a href="gg://123456">Rozmawiaj z numerem 123456</a> - odnośnik uruchamia protokół GaduGadu i łączy z numerem 123456
<a href="ftp://serwer.pl/plik.zip">Pobierz przez FTP</a> - odnosnik pobiera plik z serwera FTP
<a href="skype:użytkownik?call">Zadzwoń</a> - odnośnik dzwoni do użytkownika przez Skype'a

Możliwości są nieograniczone.

Otwieranie w nowym oknie

Jak utworzyć odnośnik, który otworzy nam stronę nie w naszym, lecz w nowym oknie, lub nowej zakładce? Bardzo prosto. Znacznik <a> posiada poza "href" jeszcze inne atrybuty. Jednym z nich jest atrybut "target" - po polsku "cel/docelowo". Atrybut ten określa, gdzie ma się załadować nasz odnośnik. Domyślnie każdy odnośnik otwierany jest w tym samym oknie, z którego jest klikany, można to jednak zmienić, tak, aby otwierał się on w nowym oknie. Robimy to nadając atrybutowi "target" wartość "_blank" (czyli "puste/nowe"), tak jak poniżej:

<a href="http://www.google.pl" target="_blank">Link do Google (w nowym oknie)</a>

Znacznikowi <a>, tak jak w przypadku omawianego w poprzedniej lekcji znacznika <img> możemy także nadać atrybut "title", który odpowiadać będzie za wyświetlenie tekstu "w dymku" podczas najechania kursorem na odnośnik. Robimy to tak:

<a href="http://www.google.pl" title="To jest link do Google">Link do Google</a>

Identyfikatory i kotwice

O identyfikatorach jeszcze nie było, więc czas nadrobić zaległości. Każdy element, z którego składa się nasza strona jest w jakiś sposób identyfikowany przez naszą przeglądarkę. Każdy element ma więc dla naszej przeglądarki swój osobisty, unikalny identyfikator. Identyfikatory są nadawane automatycznie, my nawet tego nie widzimy. Nie będę teraz wnikał w szczegóły techniczne tego rozwiązania, może w którejś z kolejnych lekcji to przybliżę, napiszę teraz jednak jak samemu nadawać obiektom własne identyfikatory - funkcjonalność ta przyda nam się na później, gdyż w następnych lekcjach będziemy wykorzystywać ją dość często. Tak jak napisałem - każdy z obiektów na stronie posiada swój własny identyfikator, określany po prostu jako "id".
W jaki sposób nadajemy własne identyfikatory? Popatrzmy na poniższy kod:

        <h1 id="naglowek1">To jest nagłówek </h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin convallis ornare elit,<br />
        et imperdiet purus tempor id. Nulla elementum lacinia libero ut mattis. Sed libero justo, <br />
        vulputate et commodo et, eleifend ac urna. Aenean quis urna dolor, eget interdum lectus...</p>

        <a href="strona_wiecej.html" id="wiecej">czytaj więcej...</a>

Nadaliśmy dwa identyfikatory - jeden o nazwie "naglowek1" dla znacznika <h1>, drugi o nazwie "wiecej" dla znacznika </a>. Warto pamiętać, że identyfikator możemy nadać każdemu znacznikowi i elementowi, choć z reguły wykorzystuje się to tylko do określonej grupy znaczników. Co teraz możemy zrobić z naszymi identyfikatorami, do czego one służą? Tak naprawdę służą do bardzo wielu rzeczy, o których dowiemy się jednak później, w kolejnych lekcjach. Narazie dowiemy się jedynie, jak je wykorzystywać przy okazji odnośników.

Możemy tworzyć bezpośrednie odnośniki do identyfikatorów znajdujących się w obrębie jednej strony. Odnośniki odwołujące się do identyfikatorów mają postać:

        #nazwa_identyfikatora

Jak to wygląda w praktyce? Wykorzystamy jeszcze raz przykład podany kilka linijek wyżej (ten z tekstem Lorem Ipsum). Załóżmy, że chcemy na naszej stronie stworzyć odnośnik do identyfikatora "naglowek1", który się tam znajduje. Ważna uwaga: nazwa każdego identyfikatora musi zaczynać się od litery, nigdy od cyfry! Zrobimy to tak:

        <a href="#naglowek1">Skocz do Nagłówka 1</a>

Co się stanie, gdy klikniemy w taki odnośnik?
Stanie się to, że strona przeskoczy (przewinie się) do miejsca, w którym identyfikator "naglowek1" się znajduje. Możemy również tworzyć odnosniki do identyfikatorów, które znajdują się na innych stronach, a robimy to tak:

        <a href="http://strona.com#identyfikator"></a>

Kliknięcie w taki odsyłacz spowoduje otworzenie strony "http://strona.com" i automatyczne przeskoczenie do miejsca, w którym znajduje się identyfikator. Warto również pamiętać o czymś takim:

        <a href="#">Link donikąd</a>

Jest to tak zwany "pusty link". Prowadzi donikąd. Przydaje się, gdy tworzymy stronę i w ramach testów np. umieszczamy gdzieś próbne hiperłącza, które po prostu mają tam być, lecz narazie nie prowadzić w żadne konretne miejsca.

Jeśli jesteśmy już w temacie odnośników do identyfikatorów to warto wiedzieć, że istnieje jeszcze jeden sposób na wykonanie czegoś podobnego, bez używania nazw identyfikatorów, a jedynie samego znacznika <a>. Możemy bowiem w dowolnym miejscu na naszej stronie stworzyć sobie tzw. "kotwicę". Robimy to tak:

        <a name="nazwa_kotwicy"></a>

Zapis taki umieścić możemy w dowolnym miejscu na naszej stronie.
Następnie stworzyć możemy do niego odnośnik:

        <a href="#nazwa_kotwicy">Skocz do kotwicy</a>

Kliknięcie w taki odnośnik da nam efekt podobny, jak przy identyfikatorach - strona przeskoczy w miejsce, w którym znajduje się nasza kotwica.

UWAGA: Sposób działania identyfikatorów oraz kotwic przy odsyłaczach pokazany jest w dodatku do przykładu #1, w pliku: "Lekcja3_przyklad_1b.html". Plik ten nie jest podlinkowany do pozostałych, jest jedynie dodatkiem do przykładu #1.

Obrazek jako odsyłacz

Nie tylko tekst może pełnić rolę odsyłacza, może pełnić ją praktycznie każdy obiekt, ale o tym w innej lekcji. W tej lekcji zajmiemy się jedynie pokazaniem w jaki sposób sprawić, aby rolę odsyłacza pełnił zwykły obrazek.

Przykład:
<a href="http://www.google.pl" target="_blank">

<img src="obrazki/mona_lisa.jpg" />

</a>

Zapis taki spowoduje, że nasz obrazek stanie się odsyłaczem. Kliknięcie na obrazku będzie więc powodować otwarcie w nowym oknie strony pod adresem "http://www.google.pl". Warto zauważyć, że w momencie, gdy obrazek staje się odsyłaczem, wokół niego pojawia się obramowanie, które niezbyt estetycznie wygląda. W następnych lekcjach nauczymy się, jak to wyłączyć, narazie jednak w prostszy sposób pozbędziemy się ramki wokół obrazka. Zrobimy to w banalny sposób, ustawiając atrybut "border" (obramowanie) na wartość "0", tak jak poniżej:

<a href="http://www.google.pl" target="_blank">

</a>

W taki oto prosty sposób pozbyliśmy się brzydkiej, niebieskiej ramki wokół obrazka.

Odnośnik do emaila

Ostatnią rzeczą, jaką omówimy przy okazji odnośników, to sposób na stworzenie odnośnika do adresu email. Robimy to tak:

<a href="mailto:adres@email.pl">Napisz na adres adres@email.pl</a>

Kliknięcie w taki odnośnik spowoduje otwarcie programu pocztowego w celu wysłania wiadomości na adres@email.pl.

<a href="mailto:adres@email.pl?subject=temat_emaila">Napisz na adres adres@email.pl</a>

Stworzenie czegoś takiego jak powyżej spowoduje natomiast automatyczne wpisanie tematu do wiadomości email.

To właściwie tyle, jeśli chodzi o odsyłacze. Podstawy już znacie, w kolejnych lekcjach dowiemy się więcej, na chwilę obecną powinno nam wystarczyć to co zostało przedstawione do tej pory.

Tabele

Temat tworzenia tabel z początku wydawać się Wam będzie dość skomplikowany, jednakże wbrew pozorom - nie jest to trudna sztuka, wymaga jednak trochę nauki. Do czego używać będziemy tabel? Przede wszystkim do przedstawiania tabelarycznych danych. Kiedyś również używano tabel do określania wyglądu strony. Ja sam uczyłem się HTML-a właśnie w taki sposób, wiele lat temu. Teraz jednak już się tego nie używa, gdyż to przestarzały sposób, my jednak przez chwilę użyjemy go, żeby nauczyć się ogólnej koncepcji budowy layoutu witryny.

Na początek otwórzmy w przeglądarce plik z przykładem #2 - "Lekcja3_przyklad_2.html". Popatrzmy. Co widzimy? Widzimy 3 proste tabele, z czego dwie pierwsze składają się z jednego wiersza i jednej kolumny, a ostatnia z dwóch wierszy i jednej kolumny. Pokazane na przykładzie tabele różnią się również jak widać - szerokością.

Zacznijmy może od teorii. Każda tabela składa się ze znacznika otwierającego <table> i zamykającego </table>. Wygląda to następująco:

        <table>

          ...tutaj nasza tabela...

        </table>

Następnie tworzymy wiersze tabeli, za pomocą znacznika <tr>, który jest skrótem od ang. "table row", czyli "wiersz tabeli". Wierszy w tabeli możemy stworzyć nieograniczoną ilość, my jednak zaczniemy od stworzenia jednego wiersza. Wiersze w tabeli tworzymy w następujący sposób:

        <tr>
          ...tutaj pierwszy wiersz tabeli...
        </tr>

        <tr>
          ...tutaj drugi wiersz tabeli...
        </tr>

W praktyce wyglądać to będzie więc tak:

        <table>

          <tr>
            ...wiersz tabeli
          </tr>

        </table>

Czegoś nam tutaj jednak brakuje.
Wiersze w tabeli w rzeczywistości nie są wyświetlane na ekranie, istnieją tak jakby wirtualnie. Są jedynie "pojemnikami" na zawarte w nich kolumny (komórki). Aby zatem wyświetlić cokolwiek w naszej tabeli, to w wierszu musimy zawrzeć conajmniej jedną komórkę. Dopiero w komórce będziemy mogli umieścić jakiekolwiek dane.

Komórkę tabeli tworzymy za pomocą znacznika <td>, który jest skrótem od ang. "table data", czyli "dane tabeli". Komórkę tabeli definiujemy następująco:

        <td>
          ...komórka tabeli
        </td>

W praktyce więc, tabela składająca się z jednego wiersza i jednej zawartej w nim komórki wyglądać będzie tak:

        <table>

          <tr>

            <td>
             ... tutaj nasza komórka i miejsce na nasze dane
            </td>

          </tr>

        </table>

Komórek możemy w danym wierszu dodać tyle ile chcemy, warto jednak pamiętać, że ustalona na początku ilość komórek musi występować w każdym wierszu, tj. jeśli w wierszu pierwszym stworzymy 3 komórki, to również kolejne wiersze będą zawierać dokładnie po 3 komórki. Dla przykładu stwórzmy tabelę składającą się z jednego wiersza i z 3 komórek:

        <table>
          <tr>

           <td>
            ...pierwsza komórka
           </td>

           <td>
            ...druga komórka
           </td>

           <td>
            ...trzecia komórka
           </td>

          </tr>
        </table>

A teraz tabelę składającą się z dwóch wierszy i dwóch komórek:

        <table>

          <tr>
           <td>
            ...pierwsza komórka w I wierszu
           </td>

           <td>
            ...druga komórka w I wierszu
           </td>
          </tr>

          <tr>
           <td>
            ...pierwsza komórka w II wierszu
           </td>

           <td>
            ...druga komórka w II wierszu
           </td>
          </tr>

        </table>

Wrócmy jednak na chwilę do naszego przykładu, na którym przedstawione są 3 tabele różniące się szerokością. Pierwsza tabela składa się z jednego wiersza i jednej komórki i nie ma podanej szerokości. Druga tabela również składa się z jednego wiersza i jednej komórki, jednak ma podaną szerokość - 500 pikseli. Trzecia tabela składa się z dwóch wierszy z jedną komórką i ma podaną szerokośc w procentach - 80%.

Popatrzy teraz na kod naszego przykładu.
Przy każdej z tabel widzimy pewne atrybuty.
Pierwszym z nich jest "border" (obramowanie), drugim jest "width" (szerokość).

Atrybut "border" określa w pikselach rozmiar obramowania naszej tabeli.

Przykład:

        <table border="1">

Sprawi, że nasza tabela będzie posiadać obramowanie o grubości 1 piksela. Atrybut "width", jak sama nazwa wskazuje określa szerokość naszej tabeli.
Szerokość możemy podać na dwa różne sposoby - w pikselach oraz jako wartość procentową. Jaka jest różnica, zaraz się przekonamy.

Przykład:

        <table border="1" width="500">

Sprawi, że nasza tabela będzie mieć szerokość 500 pikseli.

Przykład:

        <table border="1" width="80%">

Sprawi, że nasza tabela będzie mieć szerokość 80% w stosunku do okna lub elementu, w którym jest umieszczona. Różnica pomiędzy jednym, a drugim jest taka, że w przypadku podania szerokości w pikselach, tabela będzie zawsze mieć zadaną szerokość (w tym przypadku 500px). W przypadku podania wartości procentowej, szerokość będzie zależna od okna przeglądarki, lub od elementu nadrzędnego, w którym tabela będzie się znajdować (np elementu <div>, lub innej tabeli). Popatrzmy na nasz plik z przykładem w oknie przeglądarki. Pobawmy się - zmniejszmy trochę okno, zwęższmy, potem zmaksymalizujmy - zobaczmy jak zachowują się w takich okolicznościach nasze tabele i czy zmienia się ich szerokość.

Zauważyliście zapewne, że kod z przykładu zawiera o jeden element więcej, niz to opisałem tutaj - chodzi o znacznik <tbody>. Jak widzimy w naszym przykładzie znajduje się on zaraz po <table> i zamyka przed </table>. Do czego on służy? Istnieją 3 takie znaczniki: <tbody>, <thead> i <tfooter>. Są to odpowiednio skróty od ang. "table body" (ciało tabeli, główna część), "table header" (nagłówek tabeli) i "table footer" (stopka tabeli). Nie są one wymagane podczas tworzenia tabeli, pozwalają jednak na logiczne rozdzielenie tabeli na nagłówek, główną część i stopkę. Nie są wymagane, lecz piszę o tym na wypadek, gdybyście kiedyś w przyszłości się z czymś takim spotkali - żebyście wiedzieli co to jest.

Wiemy już mniej więcej z czego składa się tabela i jak się ją tworzy za pomocą kodu HTML, więc czas przejść do następnego przykładu. Wyświetlmy teraz w przeglądarce plik z przykładem #3: "Lekcja3_przyklad_3.html". Jak widzimy - mamy tutaj dwie tabelki o rozpiętości 2x2, czyli 2 wiersze i 2 kolumny (komórki). Tak jak w przypadku pierwszego przykładu, także i tutaj jedna tabela ma podaną szerokość w procentach, druga w pikselach. Przyjrzyjmy się tym tabelam, a nastepnie otwórzmy plik z naszym przykładem w Notatniku, żeby popatrzeć na kod.

Odstępy

Przede wszystkim zwiększyliśmy obramowanie w przypadku pierwszej tabeli (border="3") i usunęliśmy je całkowicie w przypadku drugiej (border="0").
Pojawiło się jednak jeszcze coś:

<table border="3" width="80%" cellpadding="8" cellspacing="10">

Pojawiły się dwa atrybuty: "cellpadding" i "cellspacing".
Jest to nic innego jak ang. "cell padding" (wewnętrzny odstęp komórki) i "cell spacing" (rozstawienie komórek). Pierwszy atrybut - "cellpadding" określa w pikselach wewnętrzny odstęp zawartości komórki od jej krawędzi.
Drugi atrybut - "cellpadding" określa w pikselach odstępy pomiędzy komórkami.
Pobawcie się tymi wartościami, zmniejszcie je, potem zwiększcie - popróbujcie i popatrzcie na efekty. Ustawienie odpowiednich odstępów pozwala na bardziej estetyczne pokazanie danych w tabeli.

Szerokość komórek <td>

Co jeszcze nowego pojawia się w naszym przykładzie?
Przede wszystkim określona została tutaj szerokość nie tylko całej tabeli, ale również i poszczególnych komórek.

<td width="50%">

Atrybut "width" (szerokość) pozwala na ustalenie odpowiedniej szerokości danej komórki. Tak samo jak w przypadku szerokości całej tabeli, tak też i w tym przypadku możemy podać wartość zarówno w procentach (jak powyżej), jak również w pikselach, jak poniżej:

<td width="200">

Warto jednak mieć na uwadze, aby łączna szerokość nie przekraczała łącznej szerokości całej tabeli, podając więc szerokości w procentach musimy zmieścić się w 100%, natomiast podając w pikselach w całkowitej szerokości tabeli podanej w pikselach. Jeżeli się pomylimy i podamy zbyt duże wartości to nic się nie stanie - tabela jedynie nam się rozjedzie, warto jednak robić to poprawnie, gdyż w dalszych lekcjach przekonacie się, że niektóre elementy na stronach będziemy pozycjonować z dokładnością co do pojedyńczego piksela.
Należy pamiętać również jeszcze o jednej, bardzo ważnej sprawie - raz ustawiona szerokość komórek (kolumn) obowiązywać będzie również dla pozostałych wierszy w tabeli, co jest logiczne. Warto też pamiętać, iż jeśli nie podamy komórce informacji o szerokości, to szerokość zostanie ustawiona automatycznie w zależności od ilości danych, jakie się w niej znajdują.

Pozycjonowanie danych w tabeli

Podobnie jak w przypadku znaczników typu <p>, czy <div> również i w tabeli nasze dane możemy pozycjonować w różny sposób. Możemy wyrównywać je do lewej, do prawej, do środka, do góry itd..
Jak tego dokonujemy? Popatrzmy na nasz kod:

        <td align="center">

Jak widać, znowu korzystamy z atrybutu "align", w powyższym przypadku podając mu wartość "center", co oczywiście sprawia, że wyświetlane dane pozycjonowane są do środka komórki.

Drugim podobnym atrybutem jeśli chodzi o komórki tabeli jest atrybut "valign", który jest skrótem od ang. "vertical align", czyli "pionowe wyrównanie". Jak sama nazwa wskazuje, atrybut "valign" wypozycjonuje nam zawartość komórki w pionie. Tu jednak mała uwaga, w przeciwieństwie do atrybutu "align", a więc wyrównania poziomego, atrybut "valign" przyjmuje troszkę inne wartości, a są to odpowiednio:

        - "top" (wyrównanie do góry)
        - "middle" (wyrównanie do środka)
        - "bottom" (wyrównanie do dołu)

Przykłady:

<td valign="top">To jest zawartość wyrównana do góry komórki</td>
<td valign="top" align="center">To jest zawartość wyrównana do góry i do środka komórki</td>

W następnych lekcjach będziemy wyrównywać i pozycjonować innym sposobem, za pomocą tzw. "stylów CSS", jednak na chwilę obecną pobawmy się w taki właśnie sposób jak opisany tutaj. Polecam więc teraz zatrzymać się na chwilę i własnoręcznie poeksperymentować z pozycjonowaniem danych w tabeli na różne sposoby.

Mona Lisa

Wiemy już zatem jak pozycjonować dane w tabeli, więc przejdźmy do ostatniego w tej lekcji przykładu. Wyświetlmy w przeglądarce ostatni przykład #4 - z pliku "Lekcja3_przyklad_4.html". W tym przykładzie w praktyczny sposób wykorzystane zostało wszystko to, czego do tej pory się podczas naszych lekcji nauczyliśmy. Występują tutaj jedynie dwie nowe rzeczy. Pierwszą z nich jest komentarz. W języku HTML możemy sobie w kodzie umieszczać własne komentarze. Jest to przydatne, gdy chcemy sobie coś opisać, a nie chcemy, żeby zobaczyła to przeglądarka. Oczywiście przeglądarka zobaczy nasz komentarz, będzie się on również zawierał w źródle strony, jednakże nie będzie on wyświetlony na stronie podczas jej przeglądania.

Komentarze w kodzie dodajemy w następujący sposób:

        

Wszystko to co znajduje się pomiędzy "" jest traktowane jako komentarz i nie jest przetwarzane przez przeglądarkę.

Drugą nową sprawą jest jak zapewne widzicie pewna nieścisłość w wyświetlaniu tabeli z "Moną Lisą". Na czym polega owa nieścisłość? Otóż jak zapewne pamiętacie, napisałem wcześniej, że ilość komórek oraz ich szerokość jest zawsze taka sama dla każdego wiersza. W naszym przypadku jest jednak jak widać trochę inaczej, gdyż komórka z pochylonym opisem na dole rozciąga się na całą szerokość tabeli, pomimo iż w wierszu powyżej komórki są dwie i to o różnej szerokości. Jak więc tego dokonałem?

Otóż istnieje pewien atrybut, który pozwala na taki efekt, ten atrybut nazywa się:

        "colspan"

W naszym przykładzie wygląda to tak:

         <td colspan="2">
                <hr />
                 <p align="justify">
                  <i>
                   Donec vel lobortis arcu.[...]

                  </i>
                </p>
         </td>

Co tak naprawdę robi ten atrybut? Otóż rozciąga on daną komórkę na większą ilość komórek. W naszym przykładzie, poprzedni wiersz tabeli składał się z dwóch komórek o różnej szerokości. Za pomocą atrybutu "colspan" informujemy przeglądarkę o tym, żeby podczas wyświetlania naszej komórki rozciągnęła ją na szerokość 2 komórek. Analogicznie - jeśli nasz poprzedni wiersz składałby się z 3 komórek, to tutaj jako wartość atrybutu "colspan" zamiast cyfry "2" podalibyśmy cyfrę "3". Radzę poeksperymentować na własnych tabelach.

I to właściwie wszystko odnośnie opisu tego przykładu. Wszystko to co zostało tu wykorzystane jest już Wam znane i teraz czeka na Was dość duża praca domowa.

Zadanie domowe:

Wzorując się na przykładzie z Moną Lisą stwórzcie swoją tabelę w podobnej formie, która opisywać będzie wybrane przez siebie dzieło sztuki. Opis oczywiście weźcie z internetu, odpowiednio skróćcie i sformatujcie. Część merytoryczna nie będzie oceniana. Ważne, żeby po lewej stronie znajdował się obrazek przedstawiający dane dzieło. Obrazek musi być pobierany bezpośrednio z internetu, a nie z dysku. Po kliknięciu na obrazek, w nowym oknie ma otwierać się jego większa, powiększona wersja. Pod opisem dzieła sztuki ma znaleźć się link o nazwie "czytaj więcej", który po kliknięciu kierować będzie do strony na internecie, na której znajdować się będzie dłuższy opis danego obrazu (np. do Wikipedii). Dodatkowo - pod obrazem i opisem ma znajdować się informacja o dacie stworzenia danego dzieła i jego autorze.
Również tytuł strony, opis i słowa kluczowe mają być określone w dokumencie.
Wszystko ma znajdować się w jednym pliku ".html".
Odrobioną lekcję (plik html) należy wysłać na mój adres email w celu oceny :)

Czekam na emaile i do zobaczenia na następnej lekcji.
Omówimy m.in. wstęp do stylów CSS i stworzymy swój pierwszy szablon strony.

<< poprzednia lekcja

[ spis treści]