Skoro chcesz tworzyć strony WWW, na pewno widziałeś już wiele. Na pewno zauważyłeś już strony, które mają menu po lewej czy prawej stronie lub na górze albo na dole. Jest wiele sposobów, aby zbudować taką stronę – ja przedstawię jeden: tabele.

W poniższym artykule zostanie przedstawiony przykładowy szablon strony (krok po kroku zaprojektujesz i zbudujesz szkielet strony opartej na tabelkach). Wiedza ta powinna być dalej samodzielnie pogłębiana.

Projekt strony

Zanim weźmiesz się do pracy musisz wiedzieć, co chcesz zrobić. Na razie nie myśl o tematyce strony, ani co będziesz na niej zamieszczał. Na to przyjdzie jeszcze czas… Na razie przyda się mały trening, później zrobisz co zechcesz…

Co będzie potrzebne? :

• Kartka (A4, może być w kratkę),
• ołówek i/lub długopis,
• linijka.

Jak widać nie potrzebujesz tutaj żadnego programu…

Poniżej zobaczysz rysunek, który wykonałem w programie graficznym. Tobie zlecam wykonanie tego rysunku za pomocą w/w narzędzi. Za pomocą tych narzędzi wykonuję każdy projekt strony, którą buduję…

Rys. 1 Projekt strony opartej na tabelkach

Projekt strony warto też opisać. Jak widać na rysunku wyszczególniłem pewne miejsca: (nagłówek), (menu), (tabela główna), (menu_2), (stopka).

Przykładowy opis, jaki można wykonać pod rysunkiem:

• (nagłówek) – miejsce na logo strony. Powinien mieć X kolor oraz Y efekty. Po lewej stronie nazwa witryny umieszczona w logo. Prawa strona zarezerwowana jest na banner reklamowy.
• (menu) – miejsce na menu główne strony. Zostaną tutaj umieszczone dodatkowe tabele z linkami do działów i podstron.
• (menu_2) – miejsce dodatkowe. Mogą znaleźć się tutaj odnośniki do partnerów, wyszukiwarka, ankiety, etc…
• (tabela główna) – główny tekst strony, czyli właściwa strona. Odpowiednia treść prezentowana przez podstronę lub dział.
• (stopka) – element zakończeniowy. Miejsce na drobne informacje, np. na temat praw autorskich strony. Możliwe dodatkowe linki pomocnicze takie, jak .np. kontakt czy reklama.

Opis projektu powinien być bardziej obszerny. Najlepiej opisać wszystko co ma być uwzględnione w jego realizacji. Tym razem skupimy się tylko na tabelkach.

Tematowi projektowania stron internetowych na pewno poświęcę dodatkowy artykuł…

Podstawowe wiadomości o tabelkach

Z tabelami na pewno już nie jeden raz spotkałeś się w wielu kursach HTML-a. Postanowiłem jednak przypomnieć kilka rzeczy podstawowych.

Podstawowym znacznikiem każdej tabeli jest <TABLE> ... </TABLE>. Dodatkowo można w nim uwzględnić kilka parametrów, np. szerokość, wysokość, odległość między komórkami itp…

Pomiędzy znacznikami <table> należy umieścić przynajmniej jedną komórkę. Zanim jednak to nastąpi trzeba zaznaczyć rząd (wiersz). Rząd tabeli można zaznaczyć znacznikiem <tr> (ang. Table Row). Zatem kolejne znaczniki to <tr> ... </tr>.

Po między tymi znacznikami umieszczamy znacznik komórki tabelki <td> ... </td>. Z kolei pomiędzy tymi znacznikami umieszczamy treść.

<table>
  <tr>
    <td>
        ... Treść ...
    </td>
  </tr>
</table>

Parametry

Dodatkowo można ustawić pewne parametry dla tabelek i ich komórek. Przykładowo znacznik:

<table cellspacing="0" cellpadding="0" border="0" width="400">

… będzie oznaczał, że tabelka ma nie zawierać odstępów pomiędzy komórkami oraz w nich. Obramowania również ma nie być, natomiast szerokość tabeli to 400px.

Dobrym nawykiem jest stosowanie stylów CSS:

<table style="border: #000000 1px solid; padding: 3px; margin: 0px; width: 400px;">

Wszystko zależy od tego, co ma zostać osiągnięte.

Osobne ustawienia można wykonać dla komórek <TD>.

Komórka obok komórki

Dla naszego przykładu konieczne będzie wykonanie kilku kolumn (bez przechodzenia do nowego wiersza). Nie będzie to zadanie trudne.

Chodzi tylko o to, aby wszystkie komórki danego wiersza (rzędu) zostały umieszczone pomiędzy jego znacznikami. Myślę, że lepiej wytłumaczę to na przykładzie:

<table>
  <tr>
    <td> komórka nr 1 </td> <td> komórka nr 2 </td>
  </tr>
  <tr>
    <td> komórka nr 3 </td> <td> komórka nr 4 </td>
  </tr>
</table>

Efekt może wyglądać następująco (po zastosowaniu stylów):

Przy takiej konstrukcji tabelki należy pamiętać, że ilość komórek kolejnego rzędu musi być taka sama, jak ilość komórek rzędu pierwszego.

Kombinacje

Poprzednia konstrukcja nie daje nam jeszcze możliwości wdrożenia naszego projektu. Co prawda przy odrobinie wyobraźni można spróbować (tworząc tabelki w komórkach). Jest jednak lżejsze rozwiązanie.

Można określić rozmiar danej komórki jako sumę rozmiarów komórek kolejnego rzędu.

Do realizacji tego celu należy posłużyć się parametrem colpan="n", gdzie n to liczba obejmowanych komórek.

Powyższy przykład można zrealizować w następujący sposób:

<table>
  <tr>
    <td colspan="2"> komórka nr 1 + komórka nr 2 (bez przerwy) </td>
  </tr>
  <tr>
    <td> komórka nr 3 </td> <td> komórka nr 4 </td>
  </tr>
</table>

Jak widać ograniczamy ilość użytego znacznika <TD>.

W alternatywny sposób można spowodować, że dana komórka będzie obejmować dwa wiersze.

W tym celu należy posłużyć się parametrem rowspan="n". Należy też pamiętać, że podana w parametrze wartość ma być równa ilości wierszy, które chcemy wziąć w objęcia. Niemniej jednak nie można podawać wartości przekraczającej ilość wierszy, bo może to spowodować błędy w wyświetlaniu.

<table>
  <tr>
    <td rowspan="2"> komórka nr 1 + komórka nr 3 (bez przerwy) </td>
   <td> komórka nr 2 </td>
  </tr>
  <tr>
    <td> komórka nr 4 </td>
  </tr>
</table>

W powyższym przykładzie warto zauważyć, że znika komórka nr 3 na rzecz komórki nr 1.

To rozwiązanie nie przyda się jednak w naszym projekcie…

Realizacja projektu

Teraz wystarczy usiąść chwilę i zastanowić się. Spójrz na rysunek.

Musisz stworzyć tabelkę o trzech kolumnach i trzech rzędach. Rząd górny musi zawierać komórkę o rozmiarze trzech komórek rzędu środkowego. To samo tyczy się ostatniego wiersza.

Należy również wykonać czarne obramowanie o szerokości 1px. Do tego warto użyć stylów (border-left: #000000 1px solid; border-right: ...; border-top: ...; border-bottom: ...; itd…).

Poniżej przedstawię tylko szkielet projektu (style musisz dopisać sam – wszystkie niezbędne wiadomości znajdują się w tym artykule)…

<table cellspacing="0" cellpadding="0" style="width: 800px;
border: #000000 1px solid;">
  <tr>
    <td colspan="3" style="width: 800px; border-bottom: #000000 1px solid;">
      (nagłówek)
    </td>
  </tr>
  <tr>
    <td style="width: 120px; border-right: #000000 1px solid;"> (menu) </td>
    <td style="width: 560px; border: 0;">
      (tabela główna)
    </td>
    <td style="width: 120px; border-left: #000000 1px solid;"> (menu_2) </td>
  </tr>
  <tr>
    <td colspan="3" style="width: 800px; height: 20px;
border-top: #000000 1px solid;">
      <span style="font-size: 10px;">(stopka)</span>
    </td>
  </tr>
</table>

Tak właśnie może wyglądać szkielet Twojej strony. Reszta zależy już tylko od Twojej wyobraźni. Pamiętaj, że w komórkach możesz zagnieżdżać dodatkowe tabelki oraz bloki DIV.

Podsumowanie

Tabele w języku HTML tworzy się bardzo łatwo. Aby uniknąć niepotrzebnych problemów, warto je najpierw zaprojektować. Projekt tabeli powinien składać się co najmniej z rysunku i jego opisu. Projekt najlepiej wykonywać na kartce papieru.

Do realizacji projektu przydadzą się podstawowe wiadomości o HTML-u oraz CSS.

Pamiętaj, że to od Twojej wyobraźni zależy, w jaki sposób wykorzystasz powyższy wiadomości. W każdym razie, przedstawione wyżej informacje pozwalają na stworzenie dobrego szkieletu strony WWW.

Poniżej zobaczysz dwa rodzaje realizacji takiego menu. Pierwsze będzie przypominało standardowy formularz z przyciskiem, drugie natomiast będzie przenosić do wybranego miejsca przez sam wybór opcji…

Wersja z przyciskiem

<form action="sciezka_do_pliku.html" method="post">
    <select name="my_newsletter" id="my_newsletter">
        <option value="in">Zapisz</option>
        <option value="out">Wypisz</option>
    </select>

    <input type="submit" value="Przenieś" >
</form>

W ten oto sposób można przekierować gościa np. na stronę z dalszymi instrukcjami odnośnie wpisywania / wypisania z newslettera. Powyższa instrukcja wymaga od gościa naciśnięcia przycisku, aby akcja została wykonana. Za pomocą JavaScript możemy wykonać to samo bez przycisku…

Wersja bez przycisku

<form>
    <select onchange="self.location.href = this.value">
        <option> MENU </option>
        <option value="http://www.webperfect.pl"> Strona Główna </option>
        <option value="http://www.webperfect.pl/informacje"> Informacje </option>
    </select>
</form>

Jeśli używasz ramek zamień this.value na parent.nazwa_ramki

W ten sposób po naciśnięciu na daną opcję zostajemy przeniesieni na odpowiednią (pod)stronę. Takie dodatkowe menu z pewnością pomoże Ci urozmaicić witrynę, ale nie stosowałbym go jako zamiennika typowego menu zbudowanego z list wypunktowanych i odsyłaczy. Zachęcam do testowania.

HTML to hipertekstowy język znaczników (ang. HyperText Markup Language). Za jego pomocą konstruuje się struktury dokumentów kojarzonych jako witryny internetowe, czyli strony WWW. HTML umożliwia określenie znaczenia poszczególnych fragmentów tekstu w dokumencie (np. wyróżnienia: pogrubienie, podkreślenie, pochylenie; tworzenie nagłówków, akapitów, list itp.) oraz ustalenia w jaki sposób ma się dany fragment wyświetlać (np. w tabeli, układy menu, bloki tekstu, osadzenie grafiki itd…). Język ten umożliwia także podstawowe interakcje użytkownika poprzez zastosowanie formularzy i hiperłączy (linków).

Krótko mówiąc, HTML jest to język przeznaczony głównie do tworzenia stron WWW i dokumentów pochodnych (słowem wyjaśnień: mogą być to wszelkie pliki pomocy o rozszerzeniu .html lub .htm). Za jego pomocą formatujemy wygląd dokumentu.

HTML jest swobodnym językiem, niezależnym od sprzętu czy systemu operacyjnego. Na każdej platformie dokumenty HTML powinny wyglądać niemal identycznie (zwłaszcza jeśli dokument tworzony jest w oparciu o ścisłe standardy). Do odczytania dokumentu wymagana jest odpowiednia przeglądarka (ang. browser).

Od strony kodu, cechą charakterystyczną jest to, że znaczniki obejmowane są w nawiasy trójkątne i w przeważającej większości występuje znacznik zamykający, którego nazwa poprzedzona jest ukośnikiem (ang. slash), np. <b>pogrubienie</b>, chociaż bywa, że znacznik nie jest zamykany – głównie znaczniki meta, znacznik łamania wiersza <br /> czy też wstawiania obrazka <img src="ścieżka do pliku" />.

XHTML (ang. eXtensible HyperText Markup Language) ma być kolejną wersją HTML (ostatnia wersja HTML oznaczona jest numerem 4.01). Niestety na wprowadzenie nowego standardu niekompatybilnego wstecz trzeba będzie jeszcze poczekać, gdyż nie wszystkie przeglądarki są wstanie w pełni obsłużyć XHTML. Webmasterom pozostaje więc używanie XHTML-a w wersji 1, która stanowi rozszerzenie HTML 4 do postaci XML, natomiast XHTML 2 to już czysty standard będący następną wersją HTML.

Struktura strony w (x)HTML

Dokument HTML składa się z trzech podstawowych bloków. Pierwszy to deklaracja standardu (określenie, czy strona pisana jest w oparciu o standard HTML czy XHTML, jego wersję oraz rodzaj standardu, np. ścisły czy przejściowy). W drugim bloku znajdują się informacje dla przeglądarek i innych programów (np. pająków wyszukiwarek internetowych) – tytuł strony, znaczniki meta, inne deklaracje (np. CSS). Trzecia część to element główny, czyli właściwa zawartość strony. Drugi i trzeci blok objęty jest znacznikami początku i końca dokumentu, czyli <html> ... </html> (element podstawowy, ang. root), natomiast w standardzie XHTML określa się dodatkowo tzw. przestrzeń nazw oraz język.

Warto tutaj też wspomnieć o deklaracji XML, która jest szczególnie zalecana w sytuacji, gdy kodowanie znaków ma być inne niż utf-8 lub utf-16 i kodowanie nie jest określone żadnym protokołem wyższego rzędu (jak nagłówki http). Deklarację XML wstawia się jako pierwsza linijkę dokumentu. Należy jednak pamiętać o zachowaniu kompatybilności wstecz z uwagi na przeglądarki, które nie obsługują XML (np. Internet Explorer do niedawna w ogóle nie obsługiwał XHTML-a, sytuacja zmieniła się dopiero w wersji 9), dlatego też zaleca się wstawienie osobnego znacznika meta…

Szkielet dokumentu xHTML

Najprościej dokument XHTML można ująć w poniższy sposób.

<!DOCTYPE html /.../ >


    




Akapit Tekst pogrubiony ... i tak dalej

Jako DOCTYPE w XHTML 1.0 mamy trzy możliwości:

1) Standard ścisły (strict):

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2) Standard przejściowy (transitional):

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3) … oraz standard obejmujący tzw. ramki (framset):

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

W przypadku XHTML 1.1 istnieje tylko jeden typ dokumentu, który możemy zadeklarować następująco:

Z deklaracji tej więc wynika, że XHTML 1.1 nie obejmuje elementów zdeprecjonowanych, także kompatybilność wsteczna została w tym wypadku silnie ograniczona.

Zatem HTML czy XHTML?

Z cała pewnością można stwierdzić, że HTML 4 to już przeszłość, od której należy uciekać. Nowe standardy to zazwyczaj nowsze możliwości oraz pozytywne zmiany jakościowe, więc nie ma sensu pozostawać w tyle. Najlepiej chyba być na bieżąco i podążać za tymi standardami.

Niezależnie od tego czy tworzysz duży portal internetowy czy tylko wizytówkę o sobie, musisz pamiętać o ustawieniu odpowiedniej strony kodowej. Lepiej czyta się tekst na stronie z polskimi znakami niż bez – jest to podstawowy czynnik, który pobudza Internautę do zainteresowania się daną publikacją. To samo tyczy się błędów ortograficznych – jeżeli czytelnik zorientuje się, że tekst jest podziurawiony błędami nie będzie chciał go czytać (nawet jeśli jest bardzo ciekawy).Wyobrażasz sobie sytuacje, w której czytasz książkę z masą błędów ortograficznych oraz o pisowni pozbawionej znaków diakrytycznych? Zanim więc wstawisz jakikolwiek tekst na stronę sprawdź go dokładnie (np. Wordem), tym bardziej, że dzisiaj każdy szanujący się edytor umożliwia sprawdzenia pisowni i gramatyki.

Żaden szanujący się webmaster nie powie Ci, że elementy tj. deklaracja strony kodowej i używanie polskich znaków są nieistotne!

Jedyne miejsca gdzie dopuszcza się pomijanie ogonków to takie, w których wypowiedź pisana jest w dużym pośpiechu, np. komunikatory, irc, smsy lub czaty itp… Tutaj sytuacja jest inna, gdyż napisanie krótkiej odpowiedzi z polskimi znakami w krótkim czasie sprawiłoby pewne problemy… Witrynie musisz poświęcić więcej czasu, ponieważ być może czytelnik będzie chciał kiedyś do niej powrócić – Tobie najbardziej powinno na tym zależeć.

Deklaracja strony kodowej ISO-8859-2

Aby zadeklarować odpowiednią stronę kodową dla dokumentu HTML 4.01 oraz XHTML 1 za pomocą meta tagów  należy użyć znacznika meta pomiędzy znacznikami <head> ... </head>, najlepiej jako pierwszy znacznik meta:

Dla XHTML w wersji 1.0 deklaracje ustawiamy na samej górze dokumentu. Wygląda ona następująco:

Jeżeli Twój serwer obsługuje pliki z rozszerzeniem php, powyższa instrukcja może spowodować błąd. W tym przypadku należy użyć poniższej instrukcji (deklaracja w postaci skryptu PHP):

' . "\n"; ?>

Ponieważ nie wszystkie przeglądarki akceptują XML zaleca się zastosowanie obydwu instrukcji (z meta tagiem oraz z deklaracją dla XHTML’a)…

Strona kodowa a edytor

Posiadacze edytorów tekstu (HTML) pod systemy Linux / UNIX nie powinni mieć większych problemów z dostosowaniem strony kodowej edytora do strony kodowej pisanego dokumentu pod warunkiem, że wszystko mają odpowiednio skonfigurowane. Natomiast użytkownicy systemów Windows mogą napotkać problemy z domyślnym ustawieniem kodowania. W większości wypadków MS NotePad (standardowy notatnik) ma ustawione domyślne kodowanie Windows-1250. Dlatego pisząc artykuły w Windowsie należy je konwertować do postaci ISO-8859-2…

Typowe edytory HTML, tj. Pajączek czy edHTML umożliwiają domyślne kodowanie znaków na odpowiedni standard. Zostały opracowane też specjalne programy, które konwertują pobierane znaki z klawiatury, np. KeyPlus (działający jeszcze na Windows 98).

Standard ISO czy MS Windows

W ramach standardu zaleca się stosowanie kodowań ISO zamiast Windows. Kodowanie Microsoftu może okazać się dla wielu przeglądarek nieodpowiednie (zwłaszcza na platformach obsługujących swoje wewnętrzne strony kodowe). Kodowanie Windows-1250 (pl) jest wewnętrznym kodowaniem systemów Windows i niech tak pozostanie (własne standardy posiadają także np. systemy dla Macintosh i SUN).

UNICODE

Istnieje jeszcze jeden standard kodowania znaków opracowany w 1993 roku – Unicode. Dzięki niemu możliwe jest pisanie w wielu językach (na litery przeznaczono 65536 znaków). W jego przypadku także należy posiadać odpowiedni edytor. Standard ten jest aktualnie rozwijany i staje się coraz bardziej popularny, Stronę kodową w tym przypadku określa się jako utf-8, natomiast jego rozszerzeniem jest utf-16.

Zastosowanie standardu UTF ma sens głównie w przypadku tworzenia stron wielojęzykowych. W przypadku stron o jednym  (polskim) języku zaleca się pozostanie przy standardzie ISO-8859-2, gdyż w tym wypadku jest to rozwiązaniem bardziej optymalne (standard UTF jest bardziej rozbudowany, a co za tym idzie – „cięższy”). Niemniej jednak wybór pomiędzy UTF i ISO ma coraz mniejsze znaczenie, gdyż oba te standardy są w pełni obsługiwane.