Funkcję włączamy bardzo prosto – tworzymy jakiś plik z rozszerzeniem .php, a w nim:

<?php
    phpinfo();
?>

Po odpaleniu pliku powinna pojawić się tabela zatytułowana wersją języka PHP (pierwszy wiersz od góry).

Niekoniecznie jednak musimy zawsze sięgać do całej tabeli i później „docierać” do miejsca, które nas interesuje. Plik na szczęście można odpalić z parametrami. Oto i one (w nawiasie kwadratowym podany jest parametr liczbowy):

• INFO_ALL [-1] – pokazuje wszystko
• INFO_GENERAL [1] – informacje podstawowe (wersja, system, silnik itp..)
• INFO_CREDITS [2] – lista nazwisk deweloperów języka PHP  – nie wszędzie będzie działać (ze względu na rozległość utworzono oddzielną funkcję – phpcredits() ).
• INFO_CONFIGURATION [4] – konfiguracja środowiska PHP
• INFO_MODULES [8] – informacje o zastosowanych modułach i ich ustawieniach
• INFO_ENVIRONMENT [16] – otoczenie ( IP serwera i użytkownika, ścieżkach, parametrach serwera, protokołach, ale też przeglądarce użytkownika…)
• INFO_VARIABLES [32] – zmienne predefiniowane z tablic superglobalnych, które możemy użyć (np. $_SERVER)
• INFO_LICENSE [64] – informacje nt. licencji

Nazwy stałych parametrów wpisujemy na czysto, np. phpinfo(INFO_LICENSE);

Gdy jesteśmy zmuszeni często zaglądać do tej funkcji, proponuję posługiwać się następującą instrukcją:

<?php
    if( isset($_GET['p']) )
        phpinfo($_GET['p']);
    else
        phpinfo();
?>

Jako parametr p używamy wcześniej podanych liczb z kwadratowego nawiasu. Dla własnych rozwiązań w zupełności wystarczy.

O kolorach w systemie heksadecymalnym pisałem już w tym artykule: Kolory HEX. Jak je tworzyć i odczytywać?

Paleta 16 kolorów podstawowych

Na potrzeby WWW określono 16 kolorów, które określono słowami. Poniżej nazwy kolorów (w nawiasie ich heksadecymalne odpowiedniki), które możemy użyć w CSS:

• black(#000000)
• silver(#C0C0C0)
• gray(#808080)
• white(#FFFFFF)
• maroon(#800000) red(#FF0000)
• purple(#800080)
• fuchsia(#FF00FF)
• green(#008000)
• lime(#00FF00)
• olive(#808000)
• yellow(#FFFF00)
• navy(#000080)
• blue(#0000FF)
• teal(#008080)
• aqua(#00FFFF)

W raz z rozwojem wersji CSS pula tych nazw trochę się zwiększyła i tak w przypadku CSS 2.1 mamy jeden dodatkowy kolor orange(#FFA500), natomiast w CSS 3 dodano jeszcze 130 nazw.

Kolory dziesiętne RGB

W bardzo łatwy sposób możemy za pomocą liczb dziesiętnych zakodować odpowiedni kolor. Podobnie jak w systemie heksadecymalnym mamy 16 777 216 kombinacji, po 256 dla każdego koloru (czerwony, zielony, niebieski).  Dla każdego koloru możemy zatem wybrać liczbę z zakresu od 0 do 255 i użyć w przykładowy sposób (CSS):

body{
color: rgb(0,0,255);
...
}

W powyższy sposób otrzymamy kolor już wiadomo chyba jaki.

Jak zamienić HEX na dziesiętny RGB?

Możesz potraktować to jako ciekawostkę, bo o ile nie napiszesz własnej palety koloru to raczej nie wiele Ci się to przyda, no ale może warto wiedzieć.

A więc tak: przypominam, że przedział systemu szesnastkowego przyjmuje znaki od 0-F (liczbowo byłoby to 0-15) . Aby zamienić HEX na dziesiętne odczytujemy wartość HEX i mnożymy x16 do odpowiedniej potęgi każdą liczbę, następnie wszystko dodajemy. Żeby było łatwiej pokaże to na przykładzie:

HEX F = DEC 15, bo 15*16^0 = 15
HEX FF = DEC 255, bo 15*16^1  + 15*16^0 = 255
HEX FFF = DEC 4095, bo 15*16^2 + 15*16^1 + 15*16^0 = 4095

Potęgi liczymy od 0 do ilości znaków kodu heksadecymalnego, w taki sposób, że jedności będą miały potęgę 0, dziesiątki potęgę 1, setki potęgę 2 itd…  Prościej mówiąc lecimy z potęgami od prawej do lewej strony (licząc od 0).

Zamiana w drugą stronę jest już nieco bardziej skomplikowana, więc na razie sobie ją darujemy.

Procentowy RGB

Kolor RGB możemy zapisać w postaci procentowej. Po prostu nadajemy tutaj wartości od 0 do 255, tyle, że w procentach (100% = 255):

body{
    background: rgb(0%,100%,0%);
...
}

W ten oto sposób otrzymaliśmy zielone tło. Należy pamiętać, że pomiędzy wartością liczbową a znakiem procentu nie może być żadnych odstępów i wszystkie wartości muszą być określane w procentach.

Nie jest to idealne rozwiązanie dla kogoś, kto chce dopasować kolor pod grafikę.

Dosyć ciekawego rozwiązania dostarcza nam CSS w wersji 3, a konkretnie chodzi o określanie koloru RGB ze stopniem przezroczystości alpha. Wygląda to następująco:

div{
   background: rgba(100%,0%,0%,0.5);
...
}

Wartość alpha mieści się w przedziale 0 (pełna przezroczystość) do 1 (wartość domyślna – brak przezroczystości).

Sposób ten akceptują przeglądarki, które obsługują przezroczystość (IE ma z tym problemy).

Model HSL

Jest to dosyć ciekawe rozwiązanie. Wybieramy barwę (ang. Hue), następnie określamy nasycenie (ang. Saturation) oraz jasność (ang. Lightness). Jednym słowem nie mieszamy  bezpośrednio kolorów, jak w przypadku RGB. Określamy go tak: hsl(H, S%, L%).

Barwa (H) określana jest  jako liczba całkowita w stopniach z przedziału 0 do 360 (koło barw). I tak oto wartość 0 daje nam barwę czerwoną, w kierunku do 120 jest coraz bardziej zielona, natomiast 240 to już barwa niebieska, a kolejne wyższe wartości kierują nas coraz bardziej w barwę czerwoną. Następnie procentowo określamy nasycenie oraz jasność. System ten określany jest również jako HSB (ang. Brightness – jasność).

Na wstępie chciałbym zaznaczyć, że w większości przypadków, używanie skomplikowanej kompozycji kolorów i tak może okazać się uciążliwe. O wiele lepszym sposobem będzie użycie dowolnego generatora. Zdarzają się jednak również takie sytuacje, w których to generator staje się zbędny.

System heksadecymalny – HEX

System heksadecymalny to alternatywny system liczbowy. W normalnym życiu używamy systemu dziesiętnego (decymalnego). W komputerach stosowany jest system binarny (dwójkowy). Znanym systemem używanym w komputerach jest też system oktalny (ósemkowy).

O co tutaj chodzi?

Oczywiście chodzi o zapis liczb. Ponieważ nie jest to artykuł nt. systemów liczbowych przedstawię tylko jedną ich cechę  – zakres liczbowy (inaczej przestrzeń znakową, w której możemy operować). Otóż systemy liczbowe wykorzystują pewne zakresy. Po przekroczeniu danego zakresu następuje swojego rodzaju pętla (cyfry się powtarzają).

Oto zakresy dla przykładowych systemów liczbowych:

• DECIMAL (dziesiętny) – 0-9
• OCTAL (ósemkowy) – 0-7
• BINARY (dwójkowy) – 0-1
• HEXADECIMAL (szesnastkowy) – 0-15

W pierwszych trzech systemach wykorzystywane są wyłącznie cyfry. System heksadecymalny jest inny. Ponieważ cyfr mamy tylko od 0 do 9, a zakres HEX-ów jest do 15 – pięć cyfr trzeba czymś zastąpić.

W systemie heksadecymalnym liczby od 10 do 15 zastąpiono literami alfabetu łacińskiego.

Zatem w systemie tym mamy do wyboru znaki 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 oraz A, B, C, D, E, F. Prawidłowy zakres mieści się więc w przedziale 0 – F.

Na pewno zwróciłeś uwagę na nazewnictwo powyższych systemów. Przytoczę tutaj kolejną regułkę:

Nazwa systemu liczbowego oznacza ilość wykorzystywanych znaków, a nie ostatnią liczbę zakresu

W systemie dziesiętnym wykorzystujemy 10 cyfr. Numerację zaczynamy od zera. W systemie heksadecymalnym wykorzystujemy 16 znaków – tutaj również zaczynamy numerację od zera, kończymy na dziewiątce i rozpoczynamy od pierwszej litery alfabetu łacińskiego (A), a kończymy na literze szóstej (F).

Aby operować kolorami w trybie HEX powyższe wiadomości na temat liczb można uznać za wystarczające.

Kolory HEX, czyli #XXYYZZ

Format kolorów heksadecymalnych opiera się o trzy kolory podstawowe: czerwony, zielony i niebieski (Red, Green, Blue). Powyższe oznaczenie #XXYYZZ określa się jako #RRGGBB (pierwsze litery angielskich nazw kolorów).

Numer koloru (0-F) oznacza jasność, gdzie 0 to kolor najciemniejszy, natomiast F to kolor najjaśniejszy. Można też uznać, że niższa cyfra oznacza poziom zaniku koloru (0 – brak koloru, F- kolor rzeczywisty). W ten sposób można mieszać kolory.

Przykładowo, aby uzyskać kolor czerwony można użyć #FF0000 (dwa F oznaczają pełny kolor czerwony, pozostałe kolory – brak zielonego i niebieskiego). Analogicznie do tego przykładu możemy uzyskać kolor zielony (LIME) – #00FF00 oraz niebieski – #0000FF.

Są to oczywiście najjaśniejsze odcienie podanych kolorów. Jeżeli wartości będą mniejsze – dany kolor będzie ciemniejszy. Wartości każdego koloru określa się mianem nasycenia.

Możemy też zmieszać kolory w powyższy sposób (np. czerwony + zielony = żółty lub czerwony + niebieski = fioletowy).

Nieco bardziej fachowe tłumaczenie

Każdy parametr mieści się w zakresie od 0 do 255, czyli od 00 do FF w heksach. Nie wszystkie kolory możemy zauważyć – ograniczeniem jest tutaj układ wzrokowy człowieka. Komputer potrafi te kolory rozpoznać, a dzięki takiemu rozwiązaniu (dwa znaki systemu heksadecymalne na kolor) można uzyskać aż 16 777 216 kolorów (proste obliczenie – dla każdego koloru mamy 256 możliwości – tak jak wyżej napisałem od 0 do 255 – i mamy 3 kolory, czyli 256³ daje nasz wynik).

Inny format: #RGB

Istnieje też nieco uproszczony format tworzenia kolorów w systemie heksadecymalnym. Ma on postać #RGB i można w nim uzyskać 4096 możliwości kolorów. Nasycenie każdego koloru mieści się w zakresie od 0 do 15, czyli od 0 do F (HEX) dla każdego z kolorów. Ta skrócona paleta umożliwia nam uzyskanie 4096 kolorów (16³)

Skala szarości

Skala szarości mieści się w przedziale od #000000 do #FFFFFF, czyli pomiędzy czarnym, a białym kolorem. Aby w miarę łatwo utworzyć kolor szary należy ustawiać wartości w taki sposób, aby barwa, nasycenie oraz jaskrawość był takie same.

Przykładowy kolor szary to: #AAAAAA.

Aby kolor był ciemniejszy należy zmieniać wartości w stronę zera, aby był jaśniejszy – odwrotnie.

Paleta bezpiecznych kolorów

Niestety wykorzystując wszystkie kombinacje nie uzyskamy kompatybilności z wszystkimi systemami i komputerami. Dzieje się tak ponieważ nie każdy komputer czy system operuje na takiej samej palecie.

Istnieje jednak pewien format gwarantujący kompatybilność. Jest to paleta 216 bezpiecznych kolorów, które powinny wyświetlać się tak samo na każdym komputerze. Rozwiązanie to zostało opracowane niegdyś przez firmę Netscape dla kompatybilności z monitorami 8-bitowymi.

Paleta 216 bezpiecznych kolorów określana jest mianem Web-Safe (Colours). Można ją znaleźć w większości programów oferujących palety kolorów oraz w programach graficznych (Photoshop od wersji 3.0).

Podsumowanie

Idea wyliczania kolorów heksadecymalnych jest dosyć prosta w zrozumieniu. Zastosowano podział na trzy podstawowe kolory, których nasycenie można zmieniać od 0 do 255 każdy.

W łatwy sposób możemy wygenerować odcienie kolorów podstawowych (jaśniejszy-ciemniejszy). Kolory w skali szarości otrzymamy podając te same wartości nasycenia dla wszystkich. Inne kolory otrzymamy poprzez mieszanie kolorów podstawowych.

Istnieją dwa formaty zapisu: #RRGGBB oraz #RGB – różnią się one ilością kombinacji. Na potrzeby stron internetowych oraz dla zapewnienia kompatybilności należy posługiwać się bezpieczną paletą 216 kolorów, która powinna znajdywać się w każdym programie graficznym (Web-Safe).

Zastosowany znak # (ang. hash) oznacza, że przedstawiony dalej ciąg będzie miał postać heksadecymalny.

System heksadecymalny jest jednym z kilku sposobów na określanie kolorów. Na potrzeby WWW możemy posłużyć się również notacją dziesiętną, procentową lub za pomocą modelu HSB (ang. Hue, Saturation, Brightness – Barwa, Nasycenie, Jaskrawość) określany też jako HSL..

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.

Najważniejszą rzeczą na witrynie internetowej jest zawartość jaką witryna prezentuje. W głównej mierze to, co znajduje się na stronie internetowej, decyduje o zainteresowaniu użytkowników. Dopiero na drugim miejscu jest oprawa graficzna (co wcale nie znaczy, że witryna ma wyglądać niechlujnie). Zawartość strony (content) decyduje również o tym, czy użytkownik odwiedzi serwis ponownie.

Zawartość strony przyczynia się też do skuteczności kampanii reklamowych.

Mit: tekst Vs. grafika

Nie jest prawdą, że tekst dominuje nad grafiką i odwrotnie. Jedno i drugie powinno ze sobom współgrać. Nie można stwierdzić, że strona bez tekstu (lub z minimalną jego ilością) jest bezwartościowa.

Sam tekst również nie jest wskazany. Trudno czyta się strony, na której treść zajmuje całą szerokość od lewej do prawej (aż trzeba kręcić główną), jeszcze z czcionką 14px Time New Roman – o „nadmiarze” suwaków już nie wspominając. Dobra oprawa to podstawa (dobra – nie znaczy przecież cudowna).

Nie ma znaczenia czy to, co znajduje się na stronie, wygląda wyśmienicie – ważne żeby było przede wszystkim czytelne i w tym właśnie ma pomagać oprawa graficzna.

Strony tekstowe – strony graficzne

Ogólnie strony internetowe możemy podzielić na te dwie części. Pierwsze, strony tekstowe, to takie, na których sporo czytamy. Drugie natomiast, graficzne, to wszelkiego rodzaju galerie czy filmy. Często te części miesza się ze sobą (np. kiedy strona z artykułami posiada dodatkowo galerie zdjęć, czy galeria zdjęć – masę komentarzy).

Faktem jest, że nie ważne czy strona jest „graficzna”, czy „tekstowa” – ważne żeby oferowana zawartość był godna uwagi.

Grupa docelowa

Grupa docelowa jest określona zawartością strony. Jest to grupa osób zainteresowana danym tematem. Jeśli mamy stronę o zwierzętach – grupą docelową będą np. miłośnicy zwierząt (ogólnie) lub miłośnicy kotów (bardziej precyzyjnie) – i takich osób należy się spodziewać tworząc strony o tej tematyce.

Nie powinno się umieszczać innych treści niż te związane z tematyką strony. Posiadając stronę o psach, w większości nikogo nie będzie interesowała galeria samochodowa.

Należy unikać mieszania różnych tematyk, chyba, że jest na to bardzo dużo materiałów. Najlepiej jednak jest skupić się nad danym tematem i stopniowo go rozszerzać…

Psychologia oglądacza – wersja mini

Oglądacz, czyli użytkownik znajduje stronę internetową. Wchodzi i co widzi? Widzi zawartość. Można stwierdzić, że pierwsze wrażenie liczy się najbardziej, ale jestem zdania, że bardziej liczy się to, czy użytkownik znalazł to, czego szukał.

W wyszukiwarce znalazł: darmowy przepis na pizzę, klika i przechodzi na stronę. Na witrynie znajduje przepis na pizzę z gotowym ciastem (kupujesz ciasto i robisz) – to na pewno nie to czego szukał. Jeszcze gorzej: przepisu nie ma – tylko jakieś wyrazy konkretnie ze sobą niepowiązane – efekt: zawód, rozczarowanie i użytkownik z głowy.

Alternatywnie, wpisał: śmieszne filmy, znalazł, śmiał się, były faktycznie śmieszne – jest zadowolony, wpadnie jutro, aby sprawdzić, czy doszły jakieś nowe…

Powyższe dwa paragrafy to oczywiście tylko przykłady, których może być więcej…

Gdy użytkownik będzie rozczarowany, nie wróci już na stronę, która go zawiodła. Jeszcze gorzej, jeśli został oszukany. Jeżeli natomiast użytkownik jest zadowolony z treści – wróci jeszcze nie raz, a nawet doda stronę do zakładek, poleci stronę znajomemu itd…

Dobry content

Przy tworzeniu zawartości strony, dobrze jest postawić się na miejscu użytkownika z grupy docelowej. Przemyśleć dokładnie, czego taka osoba może szukać na stronie i dać tego, jak najwięcej.

Wstępnie – musisz się uzbroić

Jeżeli chcesz dobrze i sprawnie skonstruować stronę WWW musisz uzbroić się w pewne rzeczy. Jak za pewne domyślasz się, przede wszystkim – w cierpliwość. Stron nie powinno tworzyć się z rozmachu. Nie zawsze od razu wszystko wyjdzie jak należy. Czasami trzeba zacząć od nowa. Do sprawy należy podchodzić spokojnie – nerwy w niczym nie pomogą.

Kolejną rzeczą, w którą musisz się uzbroić to czas. Nie twórz stron, jeżeli nie masz czasu. Jeżeli zależy Ci na sprawnym i dokładnym zaprojektowaniu strony, lepiej przygotuj się na dłuższą „podróż”. Jeżeli śpieszysz się gdzieś, odłóż cały ten proces na kiedy indziej.

Jeżeli masz już cierpliwość i czas, przydadzą Ci się narzędzia. Używaj tylko wygodnego edytora tekstu. Pamiętaj o przygotowaniu programu graficznego (może być w gotowości do użycia). Dobrze jest mieć pod ręką jakąś paletę kolorów (z hexami).

Do projektowania przydadzą się też: ołówek, długopis, arkusz kartek A4 (np. w kratkę) i ewentualnie linijka…

Dobrym pomysłem jest sporządzenie grafiku lub wyznaczenie czasu na projekt (w rozkładzie na dzień).

Najpierw pomyśl…

Twoim zadaniem jest zaprojektowanie strony. Przygotuj sobie kartę i ołówek lub długopis. Zastanów się o czym dokładnie ma być strona. Jakie działy, odnośniki – zawartość merytoryczna. Na razie zapomnij o układzie graficznym. Wypisz wszystko po kolei. Rozplanuj działy, napisz wstępnie co w nich będzie (jakie elementy, może mechanizmy itp.). Zastanów się o czym mogą być artykuły (możesz też wypisać gdzieś ich tytuły).

Pamiętaj, że to tylko projekt wstępny i jeżeli chcesz coś zmienić to zmieniaj, kreśl…

Następnie zaprojektuj linki. Określ łącza w menu. Zastanów się co gdzie ma prowadzić. Możesz to narysować lub napisać.

Przykład:

Strona o kulinariach: na stronie głównej aktualności / ciekawostki / zmiany na stronie. Oprócz tego zrobić miejsce na odnośniki (mechanizm) do najnowszych pięciu przepisów / artykułów.

W menu – Dania: gotowane, smażone, pieczone, mrożone, na surowo, sałatki. Następnie w każdym z działów przepisy, mogą być podzielone na mięsne i wegetariańskie. Uzupełnieniem przepisów mogą być ciekawostki na temat danych potraw (np. po wybraniu danego przepisu nowe menu z odnośnikami typu: „Czy wiesz, że?” oraz „Witaminy i wartości odżywcze”, „Zalecenia”, „Inne sposoby podawania”.

W menu głównym strony można dodatkowo umieścić kategorię Fast Food, gdzie będą znajdywać się artykuły o tym, jak zrobić pożywny (ale nie koniecznie zdrowy obiad) w jak najkrótszym czasie. Oraz napoje czy koktajle.

Ponadto warto dać użytkownikowi możliwość dodawania własnych przepisów (po zarejestrowaniu) oraz dodawania komentarzy do przepisów / ciekawostek itp., a także umożliwić ocenę niniejszych (zaplanować mechanizmy – skrypty).

itd …

To jest trochę jakby gadanie do samego siebie, ale dużo daje. Można naprawdę wymyślić świetne rzeczy, jednak trzeba poświęcić temu trochę czasu… Ważne, żeby wyłapać jak najwięcej pomysłów.

Podobnie warto postępować w przypadku projektowania sklepów internetowych, katalogów, stron firmowych czy portali.

Papierowy układ strony

Skoro już wiesz, co będzie na Twojej stronie warto to narysować. Narysuj najpierw stronę główną wraz z całym układem nowego layout-u. Narysuj sobie nagłówek (np. z logo lub bannerem reklamowym), lewym / prawym menu (lub górnym), narysuj środek. Napisz linki w menu, przykładowe tabelki w treści – spróbuj odzwierciedlić stroną prosto ze swojej wyobraźni…

To jest trochę jakby gadanie do samego siebie, ale dużo daje. Można naprawdę wymyślić świetne rzeczy, jednak trzeba poświęcić temu trochę czasu… Ważne, żeby wyłapać jak najwięcej pomysłów.

Podobnie warto postępować w przypadku projektowania sklepów internetowych, katalogów, stron firmowych czy portali.

Papierowy układ stronySkoro już wiesz, co będzie na Twojej stronie warto to narysować. Narysuj najpierw stronę główną wraz z całym układem nowego layout-u. Narysuj sobie nagłówek (np. z logo lub bannerem reklamowym), lewym / prawym menu (lub górnym), narysuj środek. Napisz linki w menu, przykładowe tabelki w treści – spróbuj odzwierciedlić stroną prosto ze swojej wyobraźni…

Ładna strona czy lekka strona?

To pytanie stawiali sobie webmasterzy od wieków. Obecnie nie zawsze ma to znaczenie, bo trzeba by było odpowiedzieć sobie na kolejne pytanie: co to jest lekka strona? Z pewnością: lekka, czyli taka, która się szybko ładuje, jest mało przeciążona. Na dzień dzisiejszy mamy szeroki asortyment, jeżeli chodzi o łącza internetowe, więc można popisać się grafiką. Grunt to nie przesadzić.

Ładna strona czy lekka strona?To pytanie stawiali sobie webmasterzy od wieków. Obecnie nie zawsze ma to znaczenie, bo trzeba by było odpowiedzieć sobie na kolejne pytanie: co to jest lekka strona? Z pewnością: lekka, czyli taka, która się szybko ładuje, jest mało przeciążona. Na dzień dzisiejszy mamy szeroki asortyment, jeżeli chodzi o łącza internetowe, więc można popisać się grafiką. Grunt to nie przesadzić.

Grafikę obrazkową należy nadal stosować z rozwagą. Ogromny projekt graficzny i tak może okazać się zbędny. Wszystko zależy od celu witryny oraz od tego, co właściwie chcesz zaprezentować. Faktem jest, że ładna strona nie zawsze musi być „przeładowana” grafiką obrazkową. W rzeczywistości wystarczą minimalne umiejętności CSS i parę pomysłów, aby witryna mogła konkurować z pięknym „kombajnem” graficznym.

Można zatem stwierdzić, że ta „lekka” strona również może być ładna. I nie zawsze trzeba wynajmować grafika, który ułoży naprawdę odjazdowy design graficzny, ale można rozważyć taką możliwość.

To tyle, jeśli chodzi o kwestię „ciężkiej” grafiki…

Strona to nie piasek – zadbaj, aby się nie sypała

Witryna nie powinna posiadać niedociągnięć. Wszystko powinno mieć ręce i nogi. Co z tego, ze zapłaciłeś za layout te 300zł, jeśli pojawiły się niedociągnięcia, których nie chce Ci się usunąć? Jeszcze zanim strona pojawiła się w sieci powinna być przetestowana pod tym względem. Żadnych rozjeżdżających się tabelek, nieprawidłowych przerw między obrazkami. Wszystko powinno być na swoim miejscu.

Poprawność kodu też jest mile widziana. Należy zadbać o zamykanie odpowiednich znaczników. Z doświadczenia wiem, że czasami jest to najczęstsza przyczyna problemów z tabelkami lub DIV-ami. Przy poprawnym kodzie jego analiza jest łatwiejsza. Szybciej znajdziesz błąd.

Pamiętaj, aby przetestować witrynę pod przeglądarką wizualną (Mozilla Firefox, IE, Opera). Dobrze jest też wybrać jakiś standard W3C i się go trzymać. W zakreśie możliwości należy poprawiać wszelkie bugi. Przede wszystkim nie należy ignorować nawet najbardziej złośliwych skarg użytkowników.

Każdy użytkownik chce widzieć witrynę tak, jak ją zaprojektowano, czyli poprawnie.

O co tak na prawdę chodzi?

Dwie podstawowe sprawy zostały opisane powyżej. Teraz czas na konkrety…

Chodzi o użytkownika. To odbiorca ma widzieć stronę, nie tylko Ty. Należy zaprojektować stronę pod odbiorcę, czyli użytkownika. To użytkownik ma odwiedzić witrynę, kupić coś, przeczytać tekst, dodać stronę do katalogu. Nie rób stron dla siebie, zrób ją dla nich.

Wszystko przejrzyste

Nie ważne czy witryna, którą projektujesz to sklep, katalog, serwis informacyjny czy galeria grafiki – wszystko powinno być przejrzyste. Grafika (o której była mowa na początku) powinna być przyjazna użytkownikowi. Wygląd strony nie tylko ma się podobać, ale ma też sprawiać wrażenie, że komuś zależało na odwiedzinach strony.

Niektórzy mówią, że wygląd strony pod względem graficznym się nie liczy – ważne, żeby strona nie raziła w oczy i była czytelna. Po części można się z nimi zgodzić, ale czy tak trudno jest trochę pokombinować by strona wyglądała schludnie? To nic trudnego, można użyć wąskiej gamy kolorów i odpowiednio dobranych czcionek.

Warto pamiętać o stworzeniu światła, czyli odstępów pomiędzy elementami, co powoduje czytelność i skupienie wzroku na danym elemencie – chodzi o to, aby nie drażnić użytkownika i żeby sam wybierał elementy, na których ma się skupić. Nie warto upychać wszystkiego – jedno zaraz obok drugiego – a zwłaszcza linków bez odpowiednich odstępów. Użytkownik powinien odróżniać, co jest do czego na stronie.

Don’t make me think – nie każ mi myśleć

Użytkownik nie powinien się zbyt długo zastanawiać jak przejść na daną podstronę. Witryna to nie gra komputerowa – albo umożliwisz użytkownikowi normalne przemieszczanie się po jej elementach, albo znudzony myśleniem użytkownik opuści stronę. To, co powinno zastanawiać Twojego gościa to raczej treść Twojej witryny, a nie „jak przeczytać następny artykuł”, lub „jak dodać stronę do katalogu”.