H.A.P

treker

HTML dla "zielonych"
W tym rozdziale dowiesz się:

Co jest potrzebne, aby zrobić własną stronę WWW
Dlaczego warto używać edytorów HTML
Czy Twój edytor obsługuje polskie znaki
Jak wygląda typowy dokument HTML
W jaki sposób zachęcić internautów aby odwiedzili Twoją stronę
Co to są podstrony
W jaki sposób wpisuje się tekst na stronach WWW
Jakie są zasady poprawnego wpisywania znaków interpunkcyjnych w tekście komputerowym
Co to są znaczniki i atrybuty
W jaki sposób układać tekst na ekranie
W jaki sposób zmienić wygląd tekstu
Jak zmienić tło strony
W jaki sposób wstawić obrazek na stronę WWW
Do czego służą odsyłacze (hiperłącza)
Czego unikać, aby Twoja strona WWW nie odstraszała internautów

--------------------------------------------------------------------------------

WSTĘP
Widzę, że jesteś "zielony" (ewentualnie "zielona")... ale nic się nie martw. Jeśli jednak nadal koniecznie chcesz "zmienić kolor", przeczytaj umieszczony poniżej tekst. Pozwoli Ci on, stworzyć Twoją pierwszą stronę internetową, nawet w ciągu jednego dnia. Jeśli uważasz, że pisanie stron w języku HTML jest dla Ciebie "czarną magią", a sama strona jest jakimś tajemniczym i bardzo skomplikowanym dokumentem, to się mylisz. Napisanie krótkiej strony internetowej jest tak proste, że potrafiłby to zrobić nawet średnio inteligentny szympans Wink

. Zatem nie trać już czasu na wymówki typu: "Ja się niczego nie nauczę!" i tym podobne, bo to nieprawda. Rozpocznij już lepiej czytać.

Mam tylko jedną prośbę: postaraj się przeczytać w miarę uważnie i po kolei całą treść na tej stronie. Jeśli pominiesz jakiś punkt lub przeczytasz go zbyt pobieżnie, może to spowodować, że nie zrozumiesz następnych.

--------------------------------------------------------------------------------

EDYTORY
Co jest potrzebne, żeby napisać stronę internetową? Teoretycznie może to być dowolny edytor tekstu, no i oczywiście dobre chęci. Dokument HTML (Hypertext Markup Language - Hipertekstowy Język Oznaczania) jest po prostu plikiem tekstowym, gdzie wpisujemy wszystkie polecenia, dotyczące formatowania tekstu, wstawiania grafiki i inne. Lecz pisanie strony w zwykłym edytorze tekstu, byłoby bardzo uciążliwe. Dlatego powstało wiele wyspecjalizowanych edytorów, które ułatwią, przyspieszą i uprzyjemnią Twoją pracę. Są to np.:

Pajączek (shareware - płatny)
Najbardziej znany polski edytor HTML rozwijany od lat. Oferuje szerokie wsparcie dla najnowszych technologii internetowych, z których warto wymienić takie jak HTML, XHTML, XML, PHP, JavaScript, VBScript, Perl, MathML, SVG, SMIL, P3P, ASP i inne. Wsparcie to dotyczy nie tylko ułatwionej edycji plików źródłowych w tych językach - program oferuje bowiem kontekstową dokumentację dla wybranego polecenia języka, przeglądanie za pomocą serwera czy funkcję dynamicznego kodu, która uwalnia od konieczności pamiętania poleceń języka.

EdHTML (darmowy)
Uniwersalny edytor do HTMLa. Wspiera również XHTML, CSS, JavaScript i PHP. Bardzo dobrze koloruje składnię, pozwala na proste testowanie stron we wbudowanych przeglądarkach, pozwala także na testowanie skryptów PHP nie wychodząc z programu. Program zawiera wiele wbudowanych narzędzi, np. kompresor HTML, konwerter polskich znaków itp. Dzięki szablonom i rozbudowanej pomocy pomaga początkującym webmasterom.

Edytor Znaczników HTML - ezHTML (darmowy)
Dostęp do wszystkich możliwości języka HTML dają zakładki - pomieszczone na nich zostały wszystkie istotne znaczniki. Można także skorzystać z listy znaczników zawierającej wszystkie tagi standardu HTML 4.0. Wiele czynności automatyzują "czarodzieje" i inne kreatory. Warto także zwrócić uwagę na konfigurowalny interfejs (pasek użytkownika, na który można przenieść najczęściej używane polecenia), edytor kolorujący znaczniki oraz inne drobne ułatwienia (np. powtórne wstawienie ostatnio użytego znacznika, podpowiedzi składniowe, automatyczne zamykanie znaczników).

Extra Page (darmowy)
Edytor HTML kolorujący składnię, zapisujący pliki w formacie kodowania ISO-8859-2, zawierający kreator strony oraz posiadający wiele innych funkcji, m.in.: możliwość wstawiania i edycji znaczników META, zmiana właściwości strony, kolorowanie składni HTML, możliwość edycji zawartości tabeli podczas jej wstawiania.

kED (darmowy)
Edytor plików html, css, xml, php, JavaScript. Edycja wielu dokumentów jednocześnie, rozbudowana edycja tabel (w tym oczyszczanie tabel zapisanych przez MS-Word). Możliwość wyboru dodatkowych zewnętrznych przeglądarek. Wbudowany prosty mechanizm sprawdzania struktury dokumentu - "rysuje" on sprawdzany dokument w postaci drzewa, dzięki czemu łatwiej zobaczyć, czy wszystkie znaczniki są prawidłowo podomykane.

Kicia (darmowy)
Zawiera obsługę wbudowanego języka skryptowego, wsparcie dla 14 różnych rodzajów dokumentów (TXT, HTML, PHP, PERL, C/C++, Pascal i inne).

WebSite PRO (darmowy)
Posiada bardzo pomocny mechanizm podpowiedzi składni, który pozwala w szybki i sprawny sposób budować nasze witryny. Wystarczy w odpowiednim momencie je wywołać skrótem Ctrl+Spacja, a ukaże się lista dostępnych wariantów. Podpowiedzi udzielają nam pomocy w zakresie: HTML, JavaScript, CSS, PHP. Ponadto posiada moduły kolorowania dokumentów Perl, Java, JavaScript, CSS, PHP, Ini, C++, Object Pascal. Potrafi w locie sprawdzać poprawność kodu dzięki opcji autowalidacja znaczników.

Zajączek (darmowy)
Dzięki pracy z programem wykorzystanie technologii takich jak PHP, JS, VBS, CSS, XML, SQL stanie się prostsze, a szablony i kreatory przyspieszą pracę nad większymi serwisami. Program umożliwia również tworzenie rozbudowanych graficznie diagramów tworzonych dokumentów.

Jeśli nie wiesz, który edytor HTML będzie dla Ciebie odpowiedni albo wolisz poszukać programu obcojęzycznego, to dodatkowe opisy i porównania wraz z plikami do ściągnięcia znajdziesz np. w serwisie Onet.pl lub w magazynie Chip.

Istnieją również edytory graficzne (choćby FrontPage - dostępny w pakiecie biurowym Microsoft Office). Aby się nimi posługiwać, nie musisz wcale znać języka HTML, ponieważ stronę tworzy się w nich jak w zwykłym edytorze tekstu, a cały kod HTML generuje automatycznie program. Ale nie ma nic za darmo (no może oprócz tego kursu Smile

. Takie edytory nie dają Ci pełnej kontroli nad zawartością strony. Możesz korzystać z bogatych narzędzi, lecz czasami nauka wszystkich możliwości takiego edytora, może zabrać więcej czasu, niż nauka podstaw HTML. Dodatkowo generują "nadmiarowy" kod, co zwiększa objętość strony oraz powoduje, że bardzo trudno ją później modyfikować przy użyciu edytorów tekstowych. Poza tym istnieją przypadki, w których znajomość choćby podstaw HTML jest wprost niezbędna.

Chociaż stronę WWW można napisać w zwykłym edytorze tekstu, absolutnie nie polecam tej metody! Po pierwsze łatwo w ten sposób popełnić błędy literowe w nazwach poleceń HTML, co spowoduje błędy w wyświetlaniu strony. Wyspecjalizowane edytory HTML od razu o nich informują, ponieważ każde poprawne polecenie HTML zwykle jest w nich napisane innym kolorem - niepoprawne komendy nie zmieniają koloru. Cała treść w zwykłym edytorze tekstu jest jednolita, co sprawia, że nie zauważymy błędów.

Jeśli do tworzenia dokumentów HTML używasz np. windows'owskiego Notatnika (Notepad), a nie zainstalujesz odpowiedniej nakładki klawiaturowej (patrz następny punkt) i wykorzystasz przedstawiony dalej na tej stronie szablon dokumentu, to znaki: ą, ś, ź, Ą, Ś, Ź zostaną błędnie zakodowane - w przeglądarce internetowej pojawią się w ich miejscu "krzaczki".

Na różnych forach i grupach dyskusyjnych czasem można spotkać trochę żartobliwe wypowiedzi typu: "Prawdziwy webmaster nie używa żadnych dodatkowych edytorów, bo tak jest zbyt łatwo". Nigdy nie wierz w takie "bajki"! Prawdziwego webmastera cechują w największym skrócie: wiedza, zdolności oraz umiejętność wykorzystania właściwych narzędzi, które znacznie ułatwiają, a przede wszystkim przyspieszają pracę. Ponadto, z niezrozumiałych powodów, osoby początkujące (choć nie tylko) często twierdzą, że nie używają edytora HTML, bo chcą się "dobrze" nauczyć języka HTML. Takie rozumowanie jest całkowicie błędne! Czy używając zwykłego długopisu nauczymy się pisać gorzej niż gdybyśmy to robili przy pomocy gęsiego pióra i plamiącego atramentu? Przeciwnie - tekst napisany długopisem będzie wyglądał bardziej estetycznie (brak kleksów Smile

. Przecież zasady pisowni zawsze są takie same, bez względu na narzędzie jakiego używamy. Podobnie wykorzystanie tekstowych edytorów HTML wcale nie oznacza, że gorzej nauczymy się języka HTML. Przyspieszy to tylko naszą pracę i uchroni od popełnianych błędów składniowych, czyli raczej pozwoli nam jeszcze lepiej poznać język HTML. Większość doświadczonych webmasterów-profesjonalistów wykorzystuje tekstowe edytory HTML i Tobie też radzę jak najszybciej zaopatrzyć się w taki. Im wcześniej to zrobisz, tym lepiej dla Ciebie.

Z powyższych powodów jeszcze raz gorąco zachęcam do zainstalowania edytora HTML - najlepiej jakiegoś polskiego darmowego (freeware) - oferta jest dość bogata, a większość z nich udostępnia zupełnie wystarczające funkcje, aby stworzyć świetną stronę [link widoczny dla zalogowanych]

--------------------------------------------------------------------------------

POLSKIE ZNAKI
Ten punkt ma charakter raczej już historyczny. Obecnie prawie wszystkie edytory HTML doskonale radzą sobie z prawidłowym zapisywaniem polskich znaków w dokumentach HTML. Radzę jednak przynajmniej przejrzeć poniższe informacje, aby w razie problemów nie dać się zaskoczyć, a już obowiązkowo zalecam sprawdzić, czy Twój edytor poprawnie zapisuje polskie litery (możesz to zrobić tutaj - jeśli test wypadnie pomyślnie, spokojnie możesz pominąć czytanie tego punktu).

UWAGA!
W niektórych edytorach HTML konieczne jest wybranie kodowania ISO-8859-2 za pomocą odpowiedniej opcji w menu programu.

Uwagi tutaj zawarte dotyczą praktycznie tylko obcojęzycznych edytorów i to tych mniej zaawansowanych. Również użytkownicy Linuxa nie muszą się o nic martwić, ponieważ system ten standardowo koduje znaki w ISO.

Aby rozpocząć pracę, musisz zaopatrzyć się w czcionki, które pozwolą Ci uzyskać polskie znaki ("ogonki"). Powinny to być koniecznie czcionki w standardzie ISO-8859-2. Jest to powszechnie przyjęty i stosowany w polskim Internecie standard kodowania znaków.

Jeśli chcesz używać obcojęzycznego edytora w Windows, który nie potrafi prawidłowo zapisywać polskich znaków w standardzie ISO,przejdź na Polską Stronę Windowsową, a następnie na podstronę: "Klawiatura ISO-8859-2". Można tam pobrać darmową klawiaturę Izy Kibord (dla systemu Windows 95/98/Me lub NT4/2000/XP) oraz czcionkę PolskieStrony 2000.

Następnie trzeba zainstalować pobraną czcionkę w systemie. Aby to zrobić, należy wybrać:
Menu Start/Ustawienia/Panel sterowania/Czcionki/Plik/Zainstaluj nową czcionkę...,
a potem odszukać czcionkę na dysku i kliknąć OK.

W Windows XP aby dotrzeć do apletu "Czcionki", należy wybrać:
Menu Start/Panel sterowania/Wygląd i kompozycje,
a następnie po lewej stronie na karcie Zobacz też kliknij Czcionki.

Teraz wystarczy w używanym przez nas edytorze HTML, ustawić dodaną właśnie czcionkę jako ekranową (robi się to zwykle w menu Ustawienia - Settings, Konfiguracja - Configuration, Opcje - Options itp.).

Teraz musisz jeszcze tylko zainstalować pobraną klawiaturę ISO - w Windows 95/98/Me uruchom INSTALUJ.BAT. Po zakończeniu instalacji i restarcie komputera, klawiatura ISO (widoczna jako Islandzka - "IS") jest dostępna poprzez przełącznik języków na pasku zadań (kliknij skrót aktualnego języka na pasku).

Przedstawione wskazówki dotyczą również sytuacji, gdy używamy do tworzenia stron WWW zwykłego edytora tekstu - czego raczej nie polecam.

Na koniec dobra rada:
Jeżeli nie możesz połapać się w czcionkach ISO, po prostu zaopatrz się w jeden z polskich edytorów, które obsługę tego kodowania znaków mają wbudowaną. Wtedy nie trzeba nic ustawiać ani instalować. Narzędzia oferowane przez te programy - nawet darmowe - są zupełnie wystarczające (przynajmniej na początek).

Sprawdź czy Twój edytor poprawnie koduje polskie znaki
Jeśli nie wiesz, czy Twój edytor właściwie zapisuje polskie litery w zalecanym międzynarodowo standardzie ISO, możesz to sprawdzić tutaj.

Jeśli jednak zdecydujesz się na używanie edytora, który nie obsługuje polskich liter w standardzie ISO, a jednocześnie nie chcesz instalować dodatkowych nakładek, dokumenty HTML po zapisaniu możesz przekonwertować do standardu ISO również w specjalnym generatorze. Jest to jednak na pewno dużo bardziej uciążliwe niż praca w odpowiednim edytorze, który konwersję przeprowadza w locie, w sposób niezauważalny dla użytkownika.

--------------------------------------------------------------------------------

RAMY DOKUMENTU
Stronę WWW tworzy się podobnie jak zwykły dokument tekstowy: po otwarciu edytora HTML, należy wybrać opcję z menu: Plik/Nowy (lub File/New). Teraz można już zacząć pisanie strony. Jednak ponieważ dokument HTML nie jest całkowicie zwykłym plikiem tekstowym (zawiera hipertekst, osadzone obrazki i musi być poprawnie wyświetlany w różnych systemach operacyjnych na całym świecie), dlatego wymyślono specjalny szablon dokumentu HTML, który powinien być przestrzegany.

Oto jak przykładowo powinny wyglądać ramy każdego dokumentu w formacie HTML (istnieją również inne podobne szablony):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="Description" CONTENT="Tu wpisz opis zawartości strony">
<META NAME="Keywords" CONTENT="Tu wpisz wyrazy kluczowe rozdzielone przecinkami">
<META NAME="Author" CONTENT="Tu wpisz swoje imię i nazwisko">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
<TITLE>Tu wpisz tytuł strony</TITLE>
</HEAD>
<BODY>

Tu wpisuje się treść strony

</BODY>
</HTML>

UWAGA! Powyższy szablon dotyczy kodu źródłowego, dlatego jeżeli używasz edytora graficznego (np.: FrontPage), koniecznie musisz się przełączyć w tryb bezpośredniej edycji kodu źródłowego HTML.
Dodatkowo jeśli używasz zwykłego edytora teksu (np. windows'owskiego Notatnika - Notepad) bez nakładki klawiaturowej, to niektóre polskie znaki zostaną błędnie zakodowane - zamiast nich pojawią się "krzaczki"! Jeszcze raz radzę zaopatrzyć się w jakiś edytor HTML - najlepiej polski.

Większość edytorów HTML przy tworzeniu nowego dokumentu automatycznie wpisuje swój własny szablon - zbliżony do powyższego. Jeśli chcesz, możesz z niego skorzystać, modyfikując opisane poniżej fragmenty. Proponuję jednak zastąpić go szablonem przedstawionym w tym rozdziale. Również w tym przypadku wszystkich zmian należy dokonywać bezpośrednio w trybie edycji kodu źródłowego HTML! Jeśli posiadasz edytor graficzny, musisz się do niego przełączyć, natomiast edytory tekstowe najczęściej posiadają tylko taki tryb - wtedy nie trzeba nic przełączać.

Wskazówka dla "bardzo" początkujących
Nie musisz za każdym razem, gdy tworzysz nową stronę, przepisywać całego tekstu powyższego szablonu. Wystarczy w przeglądarce internetowej naprowadzić wskaźnik myszki na początek tekstu (wskaźnik powinien zmienić kształt) i wcisnąć lewy klawisz myszki. Trzymając cały czas wciśnięty lewy przycisk, przeciągnij myszką do końca tekstu szablonu, po czym zwolnij przycisk - tekst zostanie zaznaczony. Teraz wciśnij na klawiaturze jednocześnie klawisze: Ctrl+C, co wywoła skopiowanie zaznaczonego tekstu do schowka systemowego. Następnie w edytorze HTML po otwarciu nowego pliku wystarczy wcisnąć: Ctrl+V, a do dokumentu zostanie wklejony tekst ze schowka.
Jeśli jesteś bardziej doświadczonym użytkownikiem komputera, takie rady pewnie Cię śmieszą. Proszę jednak o wyrozumiałość - każdy kiedyś zaczynał. Przypomnij sobie Twoje początki...

Tekstu napisanego w powyższym szablonie kolorem czarnym nie powinno się zmieniać. Natomiast można (a nawet należy) zmieniać tekst, który został napisany kolorem czerwonym.

Cała treść która znajduje się pomiędzy wyrazami <HEAD> oraz </HEAD> (w szablonie powyżej) jest nazywana nagłówkiem dokumentu (treść nagłówkowa), natomiast wszystko pomiędzy <BODY> oraz </BODY> stanowi tzw. ciało dokumentu (treść właściwa).

A teraz wyjaśnimy sobie ważniejsze linijki.
W miejsce tekstu: Tu wpisz opis zawartości strony, należy wpisać słowny opis, co znajduje się na Twojej stronie internetowej. Z wiadomości tej korzystają wyszukiwarki sieciowe. Tekst który tutaj wpiszesz, pojawi się w wyszukiwarce, po odnalezieniu przez nią Twojej strony. Jeśli nie wpiszesz tutaj nic, wyszukiwarka wyświetli najczęściej kilka pierwszych linijek, które znajdują się na stronie. Ciekawy, ale niezbyt długi, opis może zachęcić internautów do odwiedzenia Twojego serwisu! Każda pojedyncza strona, która znajduje się w serwisie, powinna mieć swój własny opis, przedstawiający jej treść.

W miejsce tekstu: Tu wpisz wyrazy kluczowe rozdzielone przecinkami, należy wpisać słowa kluczowe, których można użyć w wyszukiwarce sieciowej, aby została odnaleziona przez nią Twoja strona. Staraj się tutaj wpisać wyrazy, które jak najlepiej oddają zawartość strony. Wyrazy muszą być oddzielone od siebie przecinkami (np.: wyraz1, wyraz2, wyraz3)! Dobrze dobrane słowa kluczowe, pomogą wyszukiwarkom, w odnalezieniu Twojej strony! Każda pojedyncza strona, która znajduje się w Twoim serwisie, powinna mieć swoje własne wyrazy kluczowe.

Tekst: Tu wpisz swoje imię i nazwisko, jest informacją o autorze strony. Dlatego możesz tu podać swoje imię i nazwisko (choć wcale nie musisz). Jeśli chcesz pozostać anonimowy, wykasuj całą tą linijkę.
W opisie zawartości strony, wyrazach kluczowych oraz autorze strony nie należy używać znaków cudzysłowu. Jeśli musimy to zrobić, należy zamiast nich wpisywać: "

Pomiędzy wyrazami <TITLE> oraz </TITLE> (w miejsce czerwonego tekstu: Tu wpisz tytuł strony) należy wpisać tytuł, jaki będzie nosiła Twoja strona. Może on być dowolny, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on również odnosić się w jakiś sposób do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu), a także w wyszukiwarkach sieciowych, po odnalezieniu Twojej strony - dlatego właśnie nie może on być zbyt długi. Trafny tytuł może również zachęcić internautów do obejrzenia Twojej strony!

I najważniejsze - w miejsce tekstu: Tu wpisuje się treść strony (pomiędzy wyrazami <BODY> oraz </BODY>) należy wpisać właściwą zawartość strony. Może to być po prostu zwykły tekst, który ma się pojawić na stronie. Są to również tzw. znaczniki sterujące wyglądem dokumentu (które zostaną opisane dalej).
Dla ciekawskich Wink

Jeśli już teraz chcesz koniecznie wiedzieć, co oznaczają nie opisane powyżej linijki, zobacz rozdziały: Deklaracja typu dokumentu DTD, Deklaracja strony kodowej oraz Język strony.

UWAGA!
W żadnym wypadku nie należy pomijać czwartej linijki od góry (w powyższym szablonie), tzn.:
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">

Co to są podstrony?
Praktycznie wszystkie serwisy internetowe składają się z pewnej liczby podstron, a nie tylko z jednej, bardzo długiej, strony głównej. Każda podstrona to po prostu osobny plik (z rozszerzeniem *.html lub *.htm), który tworzy się w taki sam sposób, jak stronę główną (przy użyciu szablonu przedstawionego powyżej). Np. ten serwis składa się z następujących podstron (zobacz w spisie treści): "Dla zielonych", "BODY i META", "Tekst" itd. Taka organizacja treści ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu, co trwałoby prawdopodobnie bardzo długo.
Wszystkie podstrony zapisuje się zwykle w tym samym katalogu - jako osobne pliki - lub w różnych katalogach (jeśli chcemy je jakoś posegregować tematycznie). Z jednej podstrony użytkownik możne automatycznie przechodzić do innych, klikając odpowiednie odnośniki (jeśli je umieścimy).

Jeszcze jedno:
Plik będący stroną startową (czyli główną) musi nazywać się index.html lub index.htm. Twoja witryna internetowa może składać się z dowolnej ilości podstron - każda z nich to osobny plik, tworzony w ten sam sposób, jak strona główna. Inne podstrony mogą nazywać się dowolnie, byleby miały rozszerzenie *.html lub *.htm. Jednak stosowanie bardzo długich nazw, może być uciążliwe, szczególnie w przypadku, gdy internauta będzie chciał się bezpośrednio przenieść do którejś z podstron Twojego serwisu, poprzez wpisanie jej adresu w przeglądarce (każda strona ma swój unikatowy adres, do którego można się odnosić).

UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
wielkich liter
znaków specjalnych (np.: \ / : * ? " < > | )
spacji (jeśli musisz, w zamian używaj podkreślnika "_")
polskich liter (ą, ć, ę, ł, ń... itd.)
Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

W dalszych punktach na tej stronie zostanie zamieszczony opis podstawowych poleceń, które mogą Ci być pomocne w napisaniu Twojej pierwszej najprostszej strony internetowej. Wszystkie je należy umieszczać pomiędzy wyrazami <BODY> oraz </BODY> (w ramach właściwej treści strony). Jeśli chcesz wprowadzić na stronę zwykły tekst, możesz go po prostu bezpośrednio wpisać, bez używania żadnych dodatkowych poleceń.

--------------------------------------------------------------------------------

WPISYWANIE TEKSTU
Jeśli chcemy umieścić na stronie WWW zwykły tekst, możemy wpisać go bezpośrednio z klawiatury - w miejsce właściwej treści dokumentu (patrz: Ramy dokumentu). Nie trzeba przy tym stosować żadnych dodatkowych poleceń. Należy jednak pamiętać, że przeglądarka internetowa automatycznie zawinie wszystkie wiersze, dlatego w edytorze HTML tekst możemy wpisywać dowolnie, np. po wpisaniu:

To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
To jest zwykły tekst...
Na ekranie otrzymamy:

To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst... To jest zwykły tekst...
W edytorze możemy zakończyć linię (klawisz Enter) w dowolnym miejscu - tam, gdzie jest to wygodne. Nie należy również przedzielać wyrazów, z jednej linii do drugiej, za pomocą pauzy:

To jest zwykły tekst... To jest zwykły tekst... To jest zwy-
kły tekst...
Zaznaczony wyraz powinniśmy wpisać normalnie. Przeglądarka sama ustawi go w odpowiedniej linii.

Na koniec kilka praktycznych porad, które początkowo łatwo zbagatelizować, ale uwierz mi - naprawdę okazują się niezwykle przydatne:

Dbaj o poprawność ortograficzną i stylistyczną tekstu! O ile błędy literowe mogą się zdarzyć każdemu, to rażące błędy ortograficzne, popełniane zbyt często, odstraszają potencjalnych czytelników. Jeśli masz kłopoty z ortografią (jak większość Polaków Smile

, sprawdzaj tekst w słowniku komputerowym (np. w Wordzie). Wiele edytorów HTML ma własny słownik.

Używaj znaków interpunkcyjnych, a zwłaszcza przecinków! Jeśli nie będziesz ich używać, tekst który napiszesz, może okazać się zupełnie niezrozumiały dla czytającego. Przypominam, że przecinki stawiamy pomiędzy zdaniami prostymi, wchodzącym w skład dłuższego zdania złożonego (zdanie złożone zawiera kilka czasowników). Stawia się je zawsze przed: "że", "iż", a najczęściej również przed: "a", "ale", "lecz", "aby", "żeby", "ponieważ", "bo", jak również przed wyrażeniami zawierającymi "który" (np.: "z którym", "w którym", "po którym", "wewnątrz którego" itd.). Nie stawiamy przecinków przed ani za spójnikami: "i", "oraz", "lub", "albo", "bądź", "ani", "czy" (jeśli pełni rolę spójnika).

Kropki używamy - poza zakończeniem zdania - również po skrótach (np.: "prof.", "inż."). Wyjątkiem są skróty, kończące się na ostatnią literę pełnego wyrazu (np.: "mgr", "nr", ale "dyr."). Ponadto często stosuje się nawiasy, dla przedstawienia jakiejś uwagi pobocznej (w ich miejsce można również użyć myślników).

Oddzielaj nowymi akapitami fragmenty tekstu, które nieco różnią się od siebie tematycznie. Bardzo długi "czysty" tekst niezbyt dobrze się czyta.

Nie musisz od razu stać się literatem (chyba, że piszesz stronę literacką). Nie chodzi mi o to, aby teksty na Twojej stronie były wprost idealne pod względem gramatycznym i ortograficznym. Nie popadajmy w paranoję. To jest kurs HTML, a nie nauka poprawnej polszczyzny Smile

. Z pewnością również w tym serwisie znajdziesz błędy (wybaczcie, nie jestem polonistą Wink

. Jak głosi słynny cytat: "Mylić się jest rzeczą ludzką... i nic co ludzkie nie jest mi obce" (co, nie wiesz kto to powiedział... ja też nie Smile

, jednak przydatne może okazać się chociaż minimum wiedzy przedstawione tutaj. Ważne, aby Twoja strona nie odstraszała internautów poprzez niepotrzebne błędy, których przecież można bardzo łatwo uniknąć.

Jeśli napiszesz swoją stronę internetową "byle jak", może to sugerować, że również informacje na niej zawarte nie są wiarygodne!

To wszystko była powtórka, lecz jest coś, czego najczęściej nie uczą w szkole, a co jest niezbędne przy pracy z tekstem komputerowym - są to zasady wpisywania znaków interpunkcyjnych:

Podstawowe znaki przestankowe: kropka ("."), przecinek (","), wykrzyknik ("!"), pytajnik ("?"), dwukropek (":"), średnik (";"), wielokropek ("..."). Przed tymi znakami nigdy nie stawiamy spacji! Spację stawiamy natomiast po nich.
Wyjątek stanowi sytuacja, gdy bezpośrednio po sobie następuje kilka takich znaków - wtedy spację stawiamy tylko po ostatnim z nich.
Drugi wyjątek stanowią krótkie kilkuwyrazowe skróty, w których każdy skrócony wyraz jest zakończony kropką - wtedy spację stawiamy tylko na końcu takiego skrótu (np.: "m.in." - między innymi, "Sp. z o.o." - spółka z ograniczoną odpowiedzialnością; ale "100 tys. zł").
Trzeci wyjątek stanowią daty, godziny i liczby - jeśli występuje wewnątrz nich kropka, przecinek lub dwukropek, nie stawiamy po nim spacji (np.: "15.07.1410 r.", "9:08", "12,5" - notacja polska, "12.5" - notacja angielska).
Ponadto należy zauważyć, że pojedyncze kropki w wielokropku nie oddzielamy spacjami, a jeśli stanowi on koniec zdania, nie stawiamy dodatkowej kropki. Podobnie jeżeli na końcu zdania znajduje się skrót zakończony kropką, nie stawiamy już po nim drugiej kropki. Nie stawiamy spacji po wielokropku, jeśli rozpoczynamy od niego nowy fragment tekstu - dla wskazania kontynuacji jakiejś wcześniejszej wypowiedzi.
Jeżeli chodzi o jednostki fizyczne, zawsze stawiamy przed nimi spację. Natomiast po nich nie stawiamy spacji chyba, że znajdują się na końcu zdania.
Poprawnie: ...wyraz... wyraz. wyraz, wyraz! wyraz? wyraz: wyraz; wyraz... np.: tel./fax m.in. 15.07.1410 r., 9:08, 1 kg, itp.
Niepoprawnie: ... wyraz ... wyraz , wyraz ! wyraz,wyraz wyraz :wyraz...wyraz ... wyraz. . . wyraz... . np. : tel. / fax m. in. 15. 07. 1410r. , 9: 08, 1 kg., 1kg, itp..

Nawiasy i cudzysłowy. Treść znajdująca się w nawiasie, nigdy nie powinna być od niego oddzielona spacjami (dotyczy to zarówno początku jak i końca)! Przed otwarciem nawiasu zawsze stawiamy spację. Zwykle stawiamy ją również po jego zamknięciu. Wyjątek stanowi sytuacja, w której bezpośrednio po nawiasie występuje podstawowy znak przestankowy - wtedy nie stawiamy spacji między nimi. Wszystko to odnosi się również do cudzysłowu.
Poprawnie: wyraz (treść) wyraz "treść" wyraz (treść), wyraz "treść"! wyraz - (...) - ("treść!") "treść" (itd.).
Niepoprawnie: wyraz ( treść ) wyraz(treść)wyraz wyraz( treść) wyraz "treść" , wyraz "treść" ? -( ... )-"treść"( "treść! " ) (itd. ) .

Pauza (myślnik) - wpisujemy ją, oddzielając z obu stron spacjami. Wyjątek stanowią łączniki, wchodzące w skład złożonych wyrazów (np.: "biało-czerwony"), końcówki (np.: "PC-y"), nr telefonu, kody pocztowe itp. - wtedy nie rozdzielamy ich spacjami.
Poprawnie: To jest - jak głoszą stare pisma - poprawnie. biało-czerwony 20-letni PC-y 99-999 e-mail
Niepoprawnie: To jest- jak głoszą stare pisma-niepoprawnie. biało - czerwony, biało- czerwony, 20 - letni 99 - 999 e - mail

Operatory matematyczne ("+", "-", "=") piszemy najczęściej, oddzielając je z obu stron spacjami. Wyjątek stanowią znaki minus i plus, które nie oznaczają działania matematycznego, lecz znak liczby - wtedy nie stawiamy po nich spacji. Ponadto nawias występujący w nazwach funkcji, nie poprzedzamy spacją.
Poprawnie: f(x, y) = -2x + 3y + 4
Niepoprawnie: f (x,y)= - 2 x+ 3 y+4

Wiem, że uwagi tutaj przedstawione mogą niektórych trochę śmieszyć (szczególnie pierwsza część). Bądźcie tolerancyjni dla tych, którzy nie są tak doświadczeni. Przypomnijcie sobie, czy nigdy nie trafiliście na stronę WWW, na której wręcz roiło się od "denerwujących" błędów. Co wtedy można pomyśleć o takim serwisie? Mam nadzieję, że uczestnikom tego kursu nigdy to się nie przytrafi.

--------------------------------------------------------------------------------

ZNACZNIKI
Poza zwykłym tekstem, na stronę możesz wprowadzić znaczniki (tzw. "tagi"). Znacznik jest to specjalny tekst, umieszczony w nawiasach ostrych, np.: . Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie, widoczne są tylko efekty jego działania (np. wstawienie obrazka). Ja sam aby umieszczony powyżej znacznik był widoczny, musiałem się posłużyć pewną "sztuczką" (jeśli nie możesz wytrzymać i już teraz chcesz wiedzieć jaką, zajrzyj na stronę: Znaki specjalne).

Ponieważ znaki: "<" (znak mniejszości) oraz ">" (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: < oraz >. Ponadto znak "&" (ampersand - angielskie "and" - Shift+7) należy zastępować przez: &.

Istnieją znaczniki otwierające (np.: <CENTER>) oraz zamykające (np.: </CENTER>). Zauważ, że znacznik zamykający rozpoczyna się ukośnikiem (czyli znakiem: "/") i ma taką samą nazwę jak otwierający. Pomiędzy znacznikami otwierającym i zamykającym może znaleźć się jakiś tekst, który chcemy np. poddać formatowaniu (w tym przypadku będzie to wyśrodkowanie tekstu), np.:

<CENTER>Ten tekst zostanie ustawiony na środku ekranu.</CENTER>
albo
<CENTER>
Ten tekst zostanie ustawiony na środku ekranu.
</CENTER>
(Oba powyższe sposoby są równoważne).

Znacznik otwierający musi znaleźć się zawsze przed znacznikiem zamykającym (co jest chyba dosyć logiczne - nie można zamknąć jeszcze nie otwartych drzwi ani otworzyć nie zamkniętych). Należy również pamiętać, że prawie każdy znacznik (poza nielicznymi wyjątkami) trzeba zamknąć, co oznacza, że nie można zapominać o wstawianiu znaczników zamykających!

Nie ma żadnego znaczenia jakimi literami wpisujemy znaczniki, np. znacznik możemy równie dobrze wpisać tak: . Przyznasz jednak, że ten drugi sposób jest mało czytelny. Dlatego w tym kursie wszystkie znaczniki będą pisane dużymi literami.

UWAGA!
W języku XHTML wszystkie znaczniki i atrybuty muszą być pisane obowiązkowo małymi literami.

Praktycznie każdy edytor HTML oferuje: kolorowanie składni, automatyczne zamykanie znaczników oraz szereg różnych generatorów.

Kolorowanie składni polega na tym, że jeśli wpiszemy poprawny znacznik, jego składnia przyjmie określony kolor - zależny od ustawień. Dzięki temu od razu uwidaczniają się wszystkie błędy (najczęściej literowe). Jest to chyba najważniejsza zaleta stosowania edytorów HTML. Dlatego właśnie nie poleca się używania zwykłych edytorów teksu, do tworzenia stron [link widoczny dla zalogowanych]
Automatyczne zamykanie znaczników polega na dopisaniu przez program odpowiedniego znacznika zamykającego, zaraz po tym jak użytkownik poda znacznik otwierający. Dzięki temu, że nie trzeba tego robić ręcznie, praca przebiega dużo sprawniej, a dodatkowo nie zapomnimy o zamykaniu znaczników, ponieważ program robi to automatycznie za nas.
Generatory (lub inaczej kreatory - wizards) pomagają przy tworzeniu różnorodnych znaczników (poprzez specjalne okna dialogowe).

--------------------------------------------------------------------------------

KONIEC LINII
 
Powyższy znacznik ( ) stosuje się gdy chcemy natychmiastowo zakończyć linię. Zapytasz zapewne: Po co go stosować, nie można po prostu nacisnąć Enter i przenieść kursor tekstowy do następnej linii? Otóż nie można. Przeglądarka internetowa ignoruje wszelkie znaki przejścia do następnej linii za pomocą klawisza Enter (ignoruje również postawienie obok siebie więcej niż jednej spacji - zobacz: Znaki specjalne). Na przykład jeśli wpiszesz w edytorze taki tekst:

To jest pierwsza linia...
a to jest druga linia.
w przeglądarce pojawi się:

To jest pierwsza linia... a to jest druga linia.

Linia zostanie zakończona automatycznie tylko wtedy, gdy podany tekst będzie zbyt długi, aby zmieścić się w jednym wierszu. Jeśli jednak koniecznie chcemy natychmiast zakończyć linię, możemy to zrobić, stawiając w miejscu gdzie ma być ona zakończona, znacznik . Np. wpisanie w edytorze:

To jest pierwsza linia... 
a to jest druga linia.
spowoduje wyświetlenie tekstu:

To jest pierwsza linia...
a to jest druga linia.

Jeśli postawisz obok siebie więcej niż jeden znacznik , możesz "zejść" kilka linijek niżej, np. wpisanie:

To jest pierwsza linia... 
...a to jest kolejna linia.
spowoduje wyświetlenie:

To jest pierwsza linia...

...a to jest kolejna linia.

Zwróć uwagę, że samego znacznika nie widać na ekranie przeglądarki. Widać jedynie efekty jego działania, tzn. zakończenie linii.

Znacznik nie ma znacznika zamykającego (to jest właśnie jeden z nielicznych wyjątków)!

--------------------------------------------------------------------------------

PARAGRAF
Tu wpisz treść paragrafu
Paragraf (czyli nowy akapit) to pewien ustęp w tekście. Następujące po sobie paragrafy, są rozdzielone linijką przerwy. Treść paragrafu (akapitu) należy wpisać pomiędzy znacznikami oraz . Przyjęło się, że praktycznie każdy zwykły tekst na stronie WWW umieszcza się w paragrafach. Pojedynczy akapit przedstawia ustęp w tekście, który nieco różni się tematycznie od poprzedniego. Zamiast stosować dwa znaczniki końca linii: , można po prostu objąć wybrany fragment tekstu paragrafem, a efekt będzie identyczny. Dzięki temu strona będzie wyglądała estetyczniej i łatwiej będzie można odszukać na niej interesujące informacje.

Paragraf jest bardzo ważny w składni HTML, ponieważ pozwala w określony sposób sformatować tekst na ekranie (ułożyć go w podany sposób). Robi się to podając atrybuty znacznika. Atrybut wpisuje się zawsze wewnątrz znacznika otwierającego - bezpośrednio po jego nazwie (oddzielony od niej spacją), a przed znakiem zamknięcia nawiasu ostrego, czyli przed ">". Każdy znacznik ma ściśle określone atrybuty, które obsługuje. W przypadku paragrafu można zastosować m.in. następujące:

Wyrównanie tekstu do lewej strony (domyślnie):
Treść paragrafu
lub
Treść paragrafu

Wyrównanie tekstu do prawej:
Treść paragrafu

Wyśrodkowanie tekstu:
Treść paragrafu

Justowanie tekstu (wyrównanie do obu marginesów jednocześnie):
Treść paragrafu

We wszystkich przypadkach czcionką podkreśloną zostały zaznaczone właśnie atrybuty znacznika.
W miejsce tekstu: Treść paragrafu, należy wpisać tekst, który ma zostać sformatowany w sposób określony przez parametr.

Przykład:

ALIGN="left",
wyrównanie do lewej,
wyrównanie do lewej (ALIGN="left"),
(ALIGN="left")...

ALIGN="right",
wyrównanie do prawej,
wyrównanie do prawej (ALIGN="right"),
(ALIGN="right")...

ALIGN="center",
wyśrodkowanie,
wyśrodkowanie (ALIGN="center"),
(ALIGN="center")...

justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify"); justowanie, czyli wyrównanie do obu marginesów jednocześnie (ALIGN="justify")...

--------------------------------------------------------------------------------

TEKST POGRUBIONY
Tu wpisz tekst
Znacznik ten pozwala pogrubić (wytłuścić) część tekstu (ang. "bold"), który się wewnątrz niego znajduje. Podobna funkcja jest zwykle dostępna w zwykłych edytorach (np.: WordPad), podczas tworzenia normalnego dokumentu tekstowego.

Przykład:

Ten tekst jest pogrubiony (wytłuszczony)

--------------------------------------------------------------------------------

TEKST POCHYLONY
Tu wpisz tekst
Pozwala napisać tekst pismem pochylonym, czyli kursywą (ang. "italic").

Przykład:

Ten tekst jest napisany pismem pochylonym, czyli kursywą

--------------------------------------------------------------------------------

TEKST PODKREŚLONY
Tu wpisz tekst
Pozwala podkreślić fragment tekstu (ang. "underline").

Przykład:

Ten tekst jest podkreślony

--------------------------------------------------------------------------------

WIELKOŚĆ CZCIONKI
Tu wpisz tekst
gdzie jako "n" należy wpisać wartość od 1 (czcionka najmniejsza) do 7 (czcionka największa).

Przykład:

Czcionka o rozmiarze 1
Czcionka o rozmiarze 2
Czcionka o rozmiarze 3 (domyślna)
Czcionka o rozmiarze 4
Czcionka o rozmiarze 5
Czcionka o rozmiarze 6
Czcionka o rozmiarze 7

--------------------------------------------------------------------------------

KOLOR CZCIONKI
Tu wpisz tekst
gdzie jako "kolor" można wpisać:

black (czarny)
white (biały)
silver (srebrny)
gray (szary)
maroon (kasztanowy)
red (czerwony)
purple (purpurowy)
fuchsia (fuksja)
green (zielony)
lime (limonowy)
olive (oliwkowy)
yellow (żółty)
navy (granatowy)
blue (niebieski)
teal (zielonomodry)
aqua (akwamaryna)

Jeśli za mało Ci tych szesnastu kolorów, zajrzyj na stronę pt.: Kolory.

Edytory HTML posiadają często specjalny selektor kolorów, za pomocą którego można w prosty sposób wybrać barwę o dowolnym odcieniu.

Przykład:

Ten tekst został napisany czcionką koloru czerwonego

--------------------------------------------------------------------------------

RODZAJ CZCIONKI
Tu wpisz tekst
lub
Tu wpisz tekst
gdzie zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to w przypadku drugiego polecenia należy ją objąć w znaki apostrofu (np.: Tekst).
W miejsce kropek można wpisać dalsze rodzaje czcionek, rozdzielone przecinkami (jeśli tego nie zrobimy, kropki należy pominąć).

UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (w Internet Explorerze będzie to najprawdopodobniej 'Times New Roman', chociaż to też nie jest pewne).
Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie ISO). Koniecznie sprawdź rezultat w praktyce!

W przypadku drugiego polecenia zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Jest to lepszy sposób, gdyż pozwala się ubezpieczyć na wypadek nieposiadania jednego rodzaju czcionki przez użytkownika.

W systemie Windows standardowo dostępne powinny być czcionki: 'Times New Roman', Arial, 'Courier New'. Dodatkowo od jakiegoś czasu z Internet Explorerem dostarczane są: Verdana, Tahoma, 'Trebuchet MS', Georgia. Przy definiowaniu czcionki, dobrze jest wykorzystywać te właśnie rodzaje, a także takie które domyślnie występują w innych systemach operacyjnych (np.: Helvetica - podobna do Arial).

Przykład:

Czcionka Arial
Czcionka 'Courier New'
Czcionka 'Times New Roman'
Czcionka Verdana

--------------------------------------------------------------------------------

ŁĄCZENIE PARAMETRÓW
Wszystkie powyższe parametry (atrybuty i znaczniki) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze:


To jest jakiś tekst

Otrzymamy:

To jest jakiś tekst

Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: ), a na końcu zamykamy ten znacznik, który otworzyliśmy jako pierwszy (czyli ).

Dodatkowo atrybuty odnoszące się do tego samego znacznika (w naszym przypadku jest to znacznik ), można połączyć, wypisując je po kolei, rozdzielone spacjami (w naszym przypadku są to atrybuty: SIZE="5", COLOR="red" oraz FACE="Courier New"). Kolejność wpisywania zarówno atrybutów jak i znaczników (otwierających) jest dowolna.

--------------------------------------------------------------------------------

KOLOR TŁA ORAZ TEKSTU
<BODY BGCOLOR="kolor tła" TEXT="kolor tekstu">
Tu jest właściwa treść strony
</BODY>
Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek.

Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych atrybutów dla znacznika <BODY>. Atrybuty te (BGCOLOR oraz TEXT) nie wpisujemy w miejscu właściwej treści strony - tak jak w przypadku znaczników - lecz wewnątrz znacznika otwierającego <BODY> (przed właściwą treścią) - tak jak pokazano powyżej - ponieważ nie są one oddzielnymi znacznikami tylko atrybutami. Należy również pamiętać, że na stronie może się znajdować tylko jeden znacznik <BODY>. Wszystkie atrybuty które się do niego odnoszą (jak na przykład dwa powyższe), wpisuje się do tego samego znacznika (otwierającego), a nie wstawia się nowego w innym miejscu strony.

Kolor tła oraz tekstu całej strony powinniśmy ustalać zawsze jednocześnie.

Nawet jeśli ustalimy kolor tekstu na całej stronie, możemy go później lokalnie (miejscowo) zmieniać za pomocą polecenia ... (zobacz: Kolor czcionki).

--------------------------------------------------------------------------------

WSTAWIENIE OBRAZKA
<IMG SRC="Tu podaj względną ścieżkę dostępu do obrazka">
Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (.jpg lub .gif).

UWAGA! Znacznik <IMG SRC="..."> nie posiada znacznika zamykającego!

Przykład:

--------------------------------------------------------------------------------

Poniżej znajdziesz przykłady poprawnych ścieżek dostępu, dla różnych struktur katalogów na dysku. We wszystkich przypadkach naszym zamiarem będzie wstawienie obrazka o nazwie plik.gif do dokumentu strona.html - drogę "przejścia" zaznaczono kolorem czerwonym i strzałkami. Przy tworzeniu ścieżki zawsze "startujemy" od strona.html i zmierzamy do plik.gif
index.html stanowi stronę główną, którą się teraz nie zajmujemy.

Poprawnie: plik.gif
Niepoprawnie: C:\www\plik.gif, plik.GIF, plik

Jak widać obrazek plik.gif oraz dokument strona.html znajdują się w tym samym katalogu. Nie ma przy tym znaczenia czy oba pliki są w katalogu głównym serwisu czy w jakimś podkatalogu - ścieżka dostępu jest taka sama. W takim przypadku wystarczy podać nazwę pliku bez żadnych dodatków. Jest to najprostsza struktura katalogów (szczególnie pierwsza - wszystko w jednym katalogu). Stosuje się ją szczególnie w serwisach składających się z niewielu podstron. Jeśli masz problemy ze swobodnym tworzeniem bardziej skomplikowanych ścieżek dostępu, polecam Ci właśnie ten model, ponieważ możliwość pomyłki jest tutaj naprawdę niewielka.

Poprawnie: katalog/plik.gif
Niepoprawnie: C:\www\katalog\plik.gif, katalog\plik.gif, katalog/plik.GIF, katalog/plik

W przypadku kiedy plik.gif znajduje się w jakimś podkatalogu a dokument strona.html nie, przed nazwą pliku trzeba podać nazwę tego podkatalogu oraz ukośnik (zwykły, nie odwrócony!). Taka struktura jest stosowana np. gdy mamy dużo plików (np. zdjęć) i dla utrzymania porządku chcemy je trzymać w osobnym podkatalogu.

Poprawnie: ../plik.gif
Niepoprawnie: C:\www\plik.gif, katalog/plik.gif, ..\plik.gif, ../plik.GIF, ../plik

Sytuacja analogiczna jak poprzednio, lecz teraz plik.gif jest w katalogu głównym, a strona.html w podkatalogu. W takim przypadku przed nazwą pliku trzeba wstawić ../ co oznacza "wyjście" do katalogu nadrzędnego, czyli z katalog/ do www/ Struktura przydatna w przypadku wielu działów w serwisie, z których każdy składa się z dużej ilości podstron umieszczonych w osobnych katalogach.

Poprawnie: ../katalog2/plik.gif
Niepoprawnie: C:\www\katalog2\plik.gif, katalog2/plik.gif, ..\katalog2\plik.gif, ../katalog2/plik.GIF, ../katalog2/plik

Jest to nieco zmodyfikowany poprzedni wariant. Teraz również plik.gif znajduje się w podkatalogu - podobnie jak strona.html z tym, że są to dwa różne katalogi. Budowanie ścieżki w tym przypadku rozpoczynamy w podkatalogu o nazwie katalog1/ w którym znajduje się nasza strona.html. Następnie wychodzimy do katalogu nadrzędnego www/ co jest realizowane przez wstawienie ../ na początku ścieżki dostępu. Teraz możemy swobodnie wejść do drugiego podkatalogu katalog2/ (realizuje się to przez podanie jego nazwy) w którym znajduje się nasz plik.gif a na końcu - jak zawsze - podajemy nazwę pliku. Struktura przydatna w przypadku wielu działów w serwisie oraz dużej ilości plików. Wtedy w katalogu głównym znajduje się zazwyczaj jedynie strona główna index.html a wszystkie podstrony oraz pliki są umieszczone w katalogach podrzędnych.

Poprawnie: ../../katalog2/katalog2a/plik.gif
Niepoprawnie: C:\www\katalog2\katalog2a\plik.gif, katalog2/katalog2a/plik.gif, ../katalog2/katalog2a/plik.gif

Ten przykład jest już dość zaawansowany. Jeśli go zrozumiesz, możesz powiedzieć, że ścieżki dostępu "masz w małym palcu" Smile

"Znajdujemy się" w katalogu: katalog1a/ (bo tutaj jest nasza strona, na której chcemy wstawić obrazek). Pierwsze dwie kropki w ścieżce dostępu powodują wyjście o jeden poziom wyżej - czyli do katalogu: katalog1/. Kolejne dwie kropki odpowiadają za wyjście o następny poziom wyżej, czyli do katalogu: www/. Teraz możemy już wejść do katalogu podrzędnego: katalog2/, a potem do: katalog2a/, który znajduje się wewnątrz niego. Na końcu wystarczy podać nazwę pliku.

Powyższe sposoby podawania ścieżki dostępu obowiązują dla wszystkich rodzajów plików - również dla podstron. Częstym błędem popełnianym przez osoby początkujące, jest podanie bezwzględnej ścieżki dostępu, np.:

C:\www\katalog2\katalog2a\plik.gif (BŁĄD!)

Jest to karygodny błąd!!! Po wprowadzeniu strony do Internetu, zostaje ona zapisana na dysku komputera-serwera (nie na Twoim). Struktura (wygląd) drzewa katalogów będzie tam z całą pewnością inna niż na Twoim dysku lokalnym. Dlatego podana ścieżka bezwzględna tam nie istnieje. Co gorsze, błędu możesz nie wykryć od razu, ponieważ na Twoim komputerze obrazek wczyta się poprawnie, ale już znajomy nic nie zobaczy! Zauważ również, że w ścieżkach używamy ukośników ("/"), a nie odwróconych ukośników ("\").

Jest jeszcze jeden rodzaj poważnego błędu:

Obie ścieżki wyglądają poprawnie, ale są absolutnie niedopuszczalne! Nie wolno wstawiać do dokumentu plików z innego dysku. W ogóle nie można się odwoływać do plików, które znajdują się "powyżej" katalogu głównego serwisu - u nas jest to www/ (katalog główny serwisu można rozpoznać po tym, że bezpośrednio w nim znajduje się strona główna index.html).

PAMIĘTAJ: stosuj zawsze względne, a nie bezwzględne ścieżki dostępu! Używaj również zwykłych, a nie odwróconych ukośników. Wszystkie pliki Twojej strony powinny znajdować się w obrębie katalogu głównego serwisu, w żadnym razie powyżej niego!

Niektóre edytory HTML umożliwiają automatyczne wstawienie względnej ścieżki dostępu (dopiero po zapisaniu strony na dysku), poprzez wybranie pliku w specjalnym selektorze. Dzięki temu tworzenie zawiłych ścieżek, może być dużo łatwiejsze.
Z takiego generatora możesz skorzystać również tutaj.

Przy okazji zwracam uwagę, że strona startowa index.html (patrz powyżej) musi znajdować się w głównym katalogu na serwerze. Podczas umieszczania strony w Internecie, na serwer wysyłamy wszystkie pliki znajdujące się w katalogu www/, ale nie sam katalog. index.html musi bezwzględnie znajdować się w katalogu głównym na Twoim koncie WWW, w przeciwnym razie Twoja strona w ogóle się nie wyświetli!
Podczas umieszczania strony w Internecie, nie zapomnij przekopiować na serwer również wszystkich plików obrazków!

UWAGA! Bardzo ważne: w nazwach plików lepiej nie używać:
wielkich liter
znaków specjalnych (np.: \ / : * ? " < > | )
spacji (jeśli musisz, w zamian używaj podkreślnika "_")
polskich liter (ą, ć, ę, ł, ń... itd.)
Jeśli nie zastosujesz się do tych zaleceń, może się okazać, że po wprowadzeniu strony do Internetu, pliki takie nie wczytają się (nawet jeśli na Twoim komputerze wszystko jest w porządku)!

Na koniec jeszcze jedna rada: obrazki wstawione na stronę, wydatnie zwiększają jej objętość, a co za tym idzie, wydłużają czas wczytywania strony. Jeśli na Twoim dysku lokalnym strona wczytuje się błyskawicznie, nie myśl, że będzie tak samo po wprowadzeniu jej do Internetu. Oczywiście im większy jest obrazek, tym więcej miejsca zajmuje na dysku. Poza tym zbyt wiele nieprzemyślanej grafiki tylko zaciemnia treść. Dlatego staraj się z tym nie przesadzać. Należy również pamiętać, aby wszystkie obrazki były zapisane w jednym z dwóch formatów:

GIF - dla rysunków składających się z mniej niż 256 kolorów, np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten obsługuje przezroczystość.
JPG - dla zdjęć wielokolorowych. Nie obsługuje przezroczystości.
W żadnym wypadku nie należy stosować formatu BMP, gdyż nie posiada on żadnej kompresji i w związku z tym grafika zapisana w tym formacie ma dużo większą objętość.

Grafikę przydatną dla stron WWW możesz znaleźć bezpośrednio w Internecie. Istnieje wiele serwisów internetowych dla webmasterów, oferujących darmowo gotowe przyciski menu i inne przydatne dodatki. Wystarczy trochę poszukać.

--------------------------------------------------------------------------------

USTAWIENIE OBRAZKA
<IMG SRC="Tu podaj względną ścieżkę dostępu do obrazka" ALIGN="rodzaj">

gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.

Natomiast jako: "rodzaj" należy wpisać:
left - obrazek będzie ustawiony po lewej stronie względem otaczającego go tekstu,
right - obrazek po prawej stronie względem tekstu.

Przykład:

ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left", ALIGN="left"...

ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right", ALIGN="right"...

--------------------------------------------------------------------------------

WYŚRODKOWANIE OBRAZKA
<CENTER><IMG SRC="Tu podaj względną ścieżkę dostępu do obrazka"></CENTER>
gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.

Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu.

Przykład:

--------------------------------------------------------------------------------

ODSYŁACZ DO PODSTRONY
(w obrębie tego samego dysku)
Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak stronę główną). Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo). Umieszczenie wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane (chyba, że Twoja strona jest naprawdę krótka)!

Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.

Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca:

<A HREF="względna ścieżka dostępu do podstrony">opis odsyłacza</A>
Zasady wpisywania ścieżki dostępu są takie same jak w przypadku obrazków.
Natomiast zamiast: "opis odsyłacza", należy wpisać krótki tekst, który pojawi się na ekranie i po kliknięciu którego nastąpi przejście do podanej podstrony (adres strony jest widoczny tylko w pasku statusu przeglądarki).

Przykład:

Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej tego kursu).

--------------------------------------------------------------------------------

ODSYŁACZ DO ADRESU INTERNETOWEGO
(w obrębie całego Internetu)
Użytkownika można odsyłać również do cudzych stron, a nie tylko do własnych i nie jest to w żaden sposób łamanie praw autorskich (jeśli nie podpiszemy się jako autorzy takiej strony Smile

- przeciwnie - jest do darmowa reklama dla strony, do której następuje odwołanie.

Składnia odsyłacza do adresu internetowego (w obrębie całego Internetu) jest następująca:

<A HREF="adres internetowy">opis odsyłacza</A>
Zasady wpisywania "opisu odsyłacza" są takie same jak w przypadku odsyłacza do podstrony.
Natomiast jako: "adres internetowy" należy wpisać adres miejsca w Internecie, gdzie chcemy się przenieść (np.: [link widoczny dla zalogowanych]).

Adres strony internetowej zawsze musi rozpoczynać się od [link widoczny dla zalogowanych]

Odsyłacz taki jest przydatny, jeśli chcemy umieścić w swoim serwisie tzw. linki do dowolnych stron w obrębie całego Internetu. Jeśli surfując w sieci, trafimy na jakąś ciekawą stronę, możemy skopiować jej adres (z paska adresu przeglądarki) i umieścić w odsyłaczu. Dzięki temu wszyscy użytkownicy odwiedzający naszą witrynę, będą mogli przenieść się bezpośrednio do wskazanej strony, bez potrzeby wpisywania jej adresu.

Przykład:

Aby zobaczyć przykład działania takiego odsyłacza możesz kliknąć tutaj (nastąpi przejście do strony głównej portalu internetowego onet.pl).

--------------------------------------------------------------------------------

ODSYŁACZ POCZTOWY
<A HREF="mailto:adres poczty e-mail">opis odsyłacza</A>
Zamiast: "adres poczty e-mail" należy wpisać adres poczty elektronicznej (np.: [link widoczny dla zalogowanych]).

Ten odsyłacz jest przydatny, gdy pragniesz umieścić na stronie adres swojej skrzynki poczty elektronicznej (e-mail). Dzięki temu będziesz w stałym kontakcie z internautami odwiedzającymi Twoją stronę.

Pamiętaj, że podanie swojego adresu na stronie WWW, może spowodować, że zaczną do Ciebie przychodzić niechciane wiadomości - reklamówki (tzw. spam). Dobrym pomysłem może być założenie sobie darmowego konta pocztowego w dowolnym portalu internetowym (np. onet.pl) i podanie adresu takiego konta na swojej stronie - darmowe konto zawsze można zmienić. Zakładając stronę WWW na darmowym serwerze, często dostajemy również konto e-mail. Wtedy można z niego skorzystać.

Przykład:

Jako przykład użycia takiego odsyłacza możesz wysłać list do mnie (tylko proszę, jeśli nie masz nic konkretnego do napisania, nie przysyłaj mi pustych listów Smile

Wyślij list do autora kursu HTML

--------------------------------------------------------------------------------

ODSYŁACZ OBRAZKOWY
Wszystkie odsyłacze przedstawione do tej pory, miały postać tekstową. Jeśli chcesz umieścić w swoim serwisie np. menu z obrazkowymi przyciskami, należy w tym celu użyć następującego polecenia:

<A HREF="adres"><IMG SRC="Tu podaj względną ścieżkę dostępu do obrazka" BORDER="0"></A>

gdzie jako "adres" można podać:
względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu,
adres internetowy (poprzedzony przez "http://")
adres poczty elektronicznej (poprzedzony przez "mailto:").
Natomiast zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek.

Jak widać odsyłacza obrazkowego możemy użyć w połączeniu z dowolnym typem odsyłaczy (do podstrony, do adresu internetowego lub pocztowy). Jednak najczęściej w ten sposób tworzy się menu nawigacyjne serwisu (odsyłacze do podstron).

Obrazki przycisków najlepiej zapisywać w formacie GIF. Jeśli nie masz zacięcia artystycznego, nie musisz samodzielnie rysować wszystkich grafik. W Internecie na pewno znajdziesz wiele stron, gdzie możesz darmowo pobrać gotowe przyciski.

Przykład:

Kliknij na tym przycisku:

--------------------------------------------------------------------------------

JAK ZROBIĆ DOBRĄ STRONĘ
Na koniec chciałbym poruszyć bardzo ważną sprawę, o której wiele osób zdaje się zapominać. Znajomość podstaw HTML w zupełności wystarcza do napisania strony internetowej, lecz aby stworzyć dobry serwis, który będzie często odwiedzany i którym będzie się można naprawdę pochwalić, trzeba czegoś więcej:

Zastanów się dobrze nad tematyką swojej strony. Oczywiście nikt nie zabroni Ci publikacji informacji o tym, że np. Twój pies wabi Azor, a kot - Mruczek, ale czy coś takiego naprawdę może przyciągnąć czytelników? Nie zapominaj, że wiele osób łączy się z Internetem za pomocą modemu, płacąc za każdą minutę spędzoną w sieci, więc czy ktoś będzie tracił czas na czytanie takich informacji? Postaraj się znaleźć temat, który Cię interesuje, jest oryginalny i może zaciekawić innych. Zwykle lepsze rezultaty przynosi skupienie się na jednej dziedzinie, niż opisywanie wszystkiego po trochę.

Uważaj z doborem kolorów na stronie, zwłaszcza jeśli chodzi o tło oraz tekst. Nieciekawe lub rażąco złe zestawienie barw jest najważniejszym czynnikiem, który zdradza, że autor serwisu jest kompletnym amatorem. Wyobraź sobie co pomyślą np. klienci jakiejś firmy, która posiadałaby stronę z zielonym tłem i czerwonym tekstem (lub co gorsze odwrotnie)! Unikaj jak ognia jaskrawych odcieni w tle. Jeśli nie masz pomysłu, ustal białe tło i czarny tekst - tak jest najbezpieczniej. Dobre rezultaty dają również barwy całkiem ciemne lub delikatne pastelowe (jasne). Tło w żadnym razie nie może pogarszać czytelności strony, dlatego należy pamiętać o doborze odpowiedniego koloru tekstu.

Nie przesadzaj z grafiką. Fakt, że wiesz jak wstawić na stronę obrazek nie oznacza, że musi się od nich roić. Pamiętaj, że to właśnie grafika najbardziej wpływa na szybkość ładowania strony, dlatego ogranicz jej ilość oraz rozmiary. Jeśli już musisz coś umieścić, postaraj się, aby było to naprawdę dobrej jakości. Tworząc samodzielnie obrazy, używaj antialiasingu, czyli wygładzania poszarpanych krawędzi. Cechą po której na pierwszy rzut oka można rozpoznać dobrego projektanta jest oszczędne i umiejętne operowanie grafiką, która dobrze komponuje się z wyglądem strony.

Przyjrzyj się innym renomowanym witrynom. Zwróć uwagę na projekt szaty graficznej. Dużo nie zawsze znaczy dobrze. Czasem bardziej oszczędna forma wygląda lepiej - a przede wszystkim czytelniej - niż wyszukane ozdobniki. Najważniejszy jest dobry pomysł. Pamiętaj, że kolorystyka witryny oraz projekt oprawy graficznej to pierwsze rzeczy, na które zwracają uwagę użytkownicy. Jeśli się nie postarasz, Twoja strona już na wstępie będzie mówiła: "Tutaj nie ma nic godnego uwagi, możesz opuścić to miejsce". Większość dobrych stron w Internecie zbudowana jest następująco: na górze znajduje się banner lub logo serwisu, po lewej lub po prawej - menu, a obok - treść strony. Nie znaczy to, że musisz koniecznie podporządkować się takiemu kanonowi, lecz jeżeli chcesz uzyskać podobną strukturę, we właściwej treści strony (BODY) wpisz np.:
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD BGCOLOR="kolor góra" COLSPAN="2" ALIGN="center" VALIGN="middle">
Tutaj można umieścić logo serwisu
</TD>
</TR>
<TR>
<TD BGCOLOR="kolor menu" WIDTH="Tutaj wpisz szerokość menu (np.: 150)" ALIGN="left" VALIGN="top">
Tu umieszcza się odsyłacze spisu treści
</TD>
<TD BGCOLOR="kolor strony" ALIGN="left" VALIGN="top">
Tu wpisuje się treść strony
</TD>
</TR>
</TABLE>
a otrzymamy:

Tutaj można umieścić logo serwisu
Tu umieszcza się odsyłacze spisu treści Tu wpisuje się treść strony

Nawigacja w serwisie to bardzo ważna sprawa. Nieczytelny układ strony, menu w którym trudno cokolwiek znaleźć i inne podobne historie są częstą przyczyną zniechęcenia użytkowników, którzy w konsekwencji opuszczają witrynę. Przy projektowaniu systemu odsyłaczy spróbuj wczuć się w sposób myślenia internautów. Pamiętaj, że nie znają oni serwisu tak dobrze jak Ty i mogą nie chcieć zagłębiać się w szczegóły. Dlatego warto w widocznym miejscu umieścić hiperłącza do najciekawszych działów, jakiś system wyszukiwania lub indeks. W przypadku obszerniejszych witryn wskazane jest podzielenie ich na działy tematyczne. Sposób nawigacji powinien być przede wszystkim wygodny, praktyczny, logiczny i łatwo dostępny.

Dbaj o poprawność ortograficzną i stylistyczną tekstu. Naucz się zasad wpisywania znaków interpunkcyjnych. Jeśli na stronie WWW występuje masa błędów, prawdopodobnie autor nie ma nic ważnego do prze

Abanjodickder · Wysłany: Wto 9:19, 06 Mar 2007 Temat postu:

Christina Ricci Undressing!
[link widoczny dla zalogowanych]

Gość

Christina Ricci Undressing!
[link widoczny dla zalogowanych]

ciovrhmuz dkujonc · Gość

kyrm pyirqf kyvgsc vlkog hzymdltn ncgfjtbvw lszmp

qhgmazp ezrvm · Gość

vbifl qmhdtk dgnmkorvw mtyrd uibtzn ohjqumer seulifc [link widoczny dla zalogowanych]

timberland · Gość

Nice site. Thank you:-)
[link widoczny dla zalogowanych] nikeshop
[link widoczny dla zalogowanych] bowerman
[link widoczny dla zalogowanych] reeboke
[link widoczny dla zalogowanych] n dorfin
[link widoczny dla zalogowanych] bumper
[link widoczny dla zalogowanych] dryice
[link widoczny dla zalogowanych] timberland
[link widoczny dla zalogowanych] after market
[link widoczny dla zalogowanych] ice skates ccm
[link widoczny dla zalogowanych] nike women basketball shoes
[link widoczny dla zalogowanych] todo terreno
[link widoczny dla zalogowanych] savarez
[link widoczny dla zalogowanych] golfbilder
[link widoczny dla zalogowanych] dynamis
[link widoczny dla zalogowanych] buying a
[link widoczny dla zalogowanych] bag golf nike stand
[link widoczny dla zalogowanych] golfcaddies
[link widoczny dla zalogowanych] mizuno golf bags in uk
[link widoczny dla zalogowanych] sandali
[link widoczny dla zalogowanych] mitchellness

shoe stores · Gość

Very good site. Thanks:-)
[link widoczny dla zalogowanych] mdb7600
[link widoczny dla zalogowanych] palm tungsten e screen replace
[link widoczny dla zalogowanych] ombre rose
[link widoczny dla zalogowanych] room darkening
[link widoczny dla zalogowanych] noritake
[link widoczny dla zalogowanych] sexmangas
[link widoczny dla zalogowanych] doc martens
[link widoczny dla zalogowanych] j madness
[link widoczny dla zalogowanych] rocket dog
[link widoczny dla zalogowanych] air force one
[link widoczny dla zalogowanych] b baller
[link widoczny dla zalogowanych] stilettos
[link widoczny dla zalogowanych] size9
[link widoczny dla zalogowanych] university of illinois mens gymnastics
[link widoczny dla zalogowanych] shoe stores
[link widoczny dla zalogowanych] charles david
[link widoczny dla zalogowanych] hcf 56k
[link widoczny dla zalogowanych] moccasin
[link widoczny dla zalogowanych] shellys
[link widoczny dla zalogowanych] off the wall

christmas tree quilt · Gość

Nice site. Thank you!
[link widoczny dla zalogowanych] twin quilt lion giraffe
[link widoczny dla zalogowanych] free hand quilting pattern
[link widoczny dla zalogowanych] yarns
[link widoczny dla zalogowanych] christmas tree quilt
[link widoczny dla zalogowanych] ornament
[link widoczny dla zalogowanych] coogi
[link widoczny dla zalogowanych] sofaland
[link widoczny dla zalogowanych] diamond cross earrings
[link widoczny dla zalogowanych] double quilts
[link widoczny dla zalogowanych] towel
[link widoczny dla zalogowanych] smith and nobel
[link widoczny dla zalogowanych] shower curtain valance
[link widoczny dla zalogowanych] candlestick
[link widoczny dla zalogowanych] custom window system ocala fl
[link widoczny dla zalogowanych] custom windows themes
[link widoczny dla zalogowanych] man cashmere cardigan sweater
[link widoczny dla zalogowanych] man diamond cross necklace
[link widoczny dla zalogowanych] crew neck
[link widoczny dla zalogowanych] no dachi
[link widoczny dla zalogowanych] roman shade

makaibari · Gość

Cool site. Thanks!!!
[link widoczny dla zalogowanych] jv1080
[link widoczny dla zalogowanych] artesa
[link widoczny dla zalogowanych] pleasant hill cemetery
[link widoczny dla zalogowanych] whisk
[link widoczny dla zalogowanych] hillsboro
[link widoczny dla zalogowanych] gaggia coffee maker
[link widoczny dla zalogowanych] christine kelley san rafael california
[link widoczny dla zalogowanych] amarige
[link widoczny dla zalogowanych] joseph phelps cabernet 2002
[link widoczny dla zalogowanych] frialator
[link widoczny dla zalogowanych] kneaded relief
[link widoczny dla zalogowanych] michele chiarlo barolo
[link widoczny dla zalogowanych] clarice cliff
[link widoczny dla zalogowanych] makaibari
[link widoczny dla zalogowanych] duralex
[link widoczny dla zalogowanych] six mile creek vineyard
[link widoczny dla zalogowanych] ekco
[link widoczny dla zalogowanych] cuisinart mini mate plus chopper grinder
[link widoczny dla zalogowanych] gourmet green tea
[link widoczny dla zalogowanych] twinnings

makaibari · Gość

Cool site. Thanks!!!
[link widoczny dla zalogowanych] jv1080
[link widoczny dla zalogowanych] artesa
[link widoczny dla zalogowanych] pleasant hill cemetery
[link widoczny dla zalogowanych] whisk
[link widoczny dla zalogowanych] hillsboro
[link widoczny dla zalogowanych] gaggia coffee maker
[link widoczny dla zalogowanych] christine kelley san rafael california
[link widoczny dla zalogowanych] amarige
[link widoczny dla zalogowanych] joseph phelps cabernet 2002
[link widoczny dla zalogowanych] frialator
[link widoczny dla zalogowanych] kneaded relief
[link widoczny dla zalogowanych] michele chiarlo barolo
[link widoczny dla zalogowanych] clarice cliff
[link widoczny dla zalogowanych] makaibari
[link widoczny dla zalogowanych] duralex
[link widoczny dla zalogowanych] six mile creek vineyard
[link widoczny dla zalogowanych] ekco
[link widoczny dla zalogowanych] cuisinart mini mate plus chopper grinder
[link widoczny dla zalogowanych] gourmet green tea
[link widoczny dla zalogowanych] twinnings

jawspdf · Gość

Very good site. Thanks:-)
[link widoczny dla zalogowanych] cartoon mailing labels
[link widoczny dla zalogowanych] butangas
[link widoczny dla zalogowanych] ultimate collection
[link widoczny dla zalogowanych] rocawear
[link widoczny dla zalogowanych] spown
[link widoczny dla zalogowanych] daddy longlegs
[link widoczny dla zalogowanych] graphic novels
[link widoczny dla zalogowanych] math
[link widoczny dla zalogowanych] sillowet
[link widoczny dla zalogowanych] mcfarlane
[link widoczny dla zalogowanych] franklincovey
[link widoczny dla zalogowanych] figur
[link widoczny dla zalogowanych] action figures ninja turtles sale in canada
[link widoczny dla zalogowanych] cycle trader
[link widoczny dla zalogowanych] feeny
[link widoczny dla zalogowanych] acc 50th
[link widoczny dla zalogowanych] jawspdf
[link widoczny dla zalogowanych] book comic finder store
[link widoczny dla zalogowanych] most searched
[link widoczny dla zalogowanych] michael

wylikoqiote

[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]

wylikoqiote

[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]
[link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych][link widoczny dla zalogowanych]

wylikoqiote

[link widoczny dla zalogowanych]

wylikoqiote

[link widoczny dla zalogowanych]