Pamiętaj, że strona to taki specyficzny dokument, który nie wygląda tak samo na każdym komputerze. Różnice w wyglądzie, a nawet działaniu strony, zależą w głównej mierze od dwóch czynników - rodzaju przeglądarki oraz rozmiaru ekranu. Jak więc zoptymalizować stronę, by zawsze (lub niemal zawsze) wyglądała ona dobrze?
Jest kilka informacji, jakie powinieneś poznać aby Twoja strona była dla wszystkich bardziej przejrzysta, a które w normalnych warunkach poznawałbyś na długiej drodze zdobywania doświadczenia w pisaniu stron. Bowiem właśnie grafika na stronie jest często przyczyną najczęściej popełnianych i najpoważniejszych błędów.Umieszczanie strony
Na zajęciach z informatyki - i być może z wykorzystaniem moich porad - stworzyłeś już swoją pierwszą stronę WWW. Być może nagrałeś ją już na dyskietkę, lecz pragniesz aby i ktoś inny mógł ją obejrzeć. Być może byłeś na wspaniałej wycieczce, a zdjęcia chciałbyś opublikować, zamiast robić odbitki dla każdego jej uczestnika. To tylko jedno z zastosowań prywatnych i niekomercyjnych stron WWW, które akurat, nie wiedzieć czemu, wpadło mi do głowy.
Jak więc to zrobić?
Aby umieścić swoją stronę w internecie musisz wykonać następujące kroki:
- Po pierwsze, musisz znaleźć miejsce na dowolnym serwerze internetowym. W przypadku stron komercyjnych będzie to trochę kosztowało, ale na szczęście dla niekomercyjnych zastosowań dostępne są darmowe serwery. Stosuj te polskie - dostęp do nich będzie dla rodzimych internautów o wiele szybszy. Mogę Ci dwie z nich polecić (kliknij na adres, aby przenieść się na stronę odpowiedniej firmy): www.republika.pl, www.polbox.com. Ponoć Radio Maryja od dwóch lat także zakłada darmowe konta, ale z wiadomych przyczyn nie będę go propagował.
- Umieścić swoją stronę na serwerze. Najczęściej dostęp do konta jest za pośrednictwem FTP (File Transfer Protocol, jeśli jesteś laikiem to nie będzie Cię interesować co to jest). Jak to dokładnie zrobić, przeczytasz na stronie firmy, która jest właścicielem serwera. Z programów, które Ci to umożliwią, polecić Ci mogę jeden - według mnie zdecydowanie najlepszy - WS_FTP Pro (kliknij na nazwę aby przenieść się na stronę jego producenta, skąd ściągniesz darmową 30-dniową wersję).
- Twoja strona ma zapewne dosyć skomplikowany adres. Zapisz go sobie, a następnie pomyśl, jak można byłoby go uprościć. Możesz to zrobić, stosując tzw. alias. Aliasy oferowane są za darmo przez dwie firmy (kliknij na adres aby przenieść się na ich strony i stworzyć aliasy): www.z.pl oraz www.prv.pl. Jeżeli skorzystasz z ich usług, alternatywny adres Twojej strony będzie wyglądał tak: www.nazwa.z.pl, lub też www.nazwa.prv.pl. Oczywiście, ten krok możesz pominąć.
- Teraz możesz już obejrzeć swoją stronę za pomocą przeglądarki internetowej, wpisując już adres w internecie (jak dokładnie będzie on wyglądał, dowiesz się na stronie firmy na której serwerze ją umieszczałeś). I jeżeli jest to Twoja pierwsza strona, daję Ci głowę, że spotka Cię wielkie rozczarowanie. Linki nie działają, strona otwiera się wolno, połowy obrazków nie widzisz. Stronę należy więc gruntownie przebudować stosując poniższe porady:
Wielkość liter
- Serwery internetowe rozróżniają wielkość liter! Dlatego, dla ujednolicenia naszego systemu robienia stron, w nazwach plików będziemy stosowali tylko małe litery. Przykładowo, jeżeli mamy plik index2.htm (1) i chcemy, aby link w pliku index.htm (2) odnosił do pliku (1), to konstrukcje:oraz są niepoprawne! Choć na Twoim komputerze działającym pod systemem Windows strona będzie działać, aby działała ona w internecie musisz dokładnie podawać nazwy. A więc poprawnie będzie:. Oczywiście to samo dotyczy nazw katalogów oraz innych plików, np. obrazków.
Polskie znaki
- Nie używaj polskich znaków w nazwach plików! Jest to przyczyną wielu błędów, które omyłkowo łatwo jest popełnić. Zwłaszcza, gdy stronę sporządzamy na kilku komputerach, na których stosowane są różne standardy polskich znaków. Czyli:
Nie stosujemy: zdjęcie.jpg, a zamiast tego stosujemy: zdjecie.jpg
Długie nazwy
- Nie używaj długich nazw plików! To także przyczyna wielu błędów. Oczywiście, możesz używać długich nazw - ale dobrą radą jest, abyś się od tego powstrzymał, przynajmniej na początku, gdy o błąd łatwo. Choćby dlatego, że długie nazwy są obcinane przy przenoszeniu/kopiwaniu plików za pomocą ciągle popularnego dosowego Norton Commandera (który z resztą także zamienia część dużych liter na małe i odwrotnie). Dla przypomnienia, krótka nazwa zawiera do 8 znaków nazwy i do 3 znaków rozszerzenia. Czyli:
Nie stosujemy: mojezdjecie.jpg, a zamiast tego stosujemy: zdjecie.jpg lub mojezdje.jpg
Długie rozszerzenia
- W nazwach plików używaj trzyliterowych rozszerzeń, na przykład htm a nie html, jpg a nie jpeg. Pamiętaj, że nazwa pliku rzeczywistego i jego nazwa w linku muszą być takie same. Dlatego, pozamieniaj nazwy html i jpeg na ich trzyliterowe odpowiedniki. Dlaczego to polecam? Bowiem, priorytet nad czteroliterowym rozszerzeniem ma trzyliterowe. Plik index.html jest standartowym plikiem otwieranym po podaniu katalogu. Jeśli jednak istnieje tam plik index.htm, jest on otwierany zamiast index.html. Dlatego, dla ujednolicenia naszego systemu stosujemy trzyliterowe rozszerzenia. Czyli:
Nie stosujemy: grafika.html, a zamiast tego stosujemy: grafika.htm
Odstępy w nazwach
- W nazwie żadnego pliku nie może byc spacji! To już powinieneś wiedzieć z zajęć z zakresu systemu Linux, gdzie nie może w normalnych warunkach istnieć plik zawierający spację. Czyli:
Nie stosujemy: ja 1.jpg, a zamiast tego stosujemy: ja_1.jpg lub ja1.jpg
Slash i backslash
- W nazwach plików używaj znaku slash (/), a nie backslash (\)! To także wynika wprost ze specyfikacji systemów unixowych. Choć strona zawierająca backslash (\) będzie działać na Twoim komputerze, nie będzie działał żaden obrazek czy link jeżeli będziesz ściągał ją z internetu. Czyli:
Nie stosujemy:, a zamiast tego stosujemy:
O ile druga, trzecia i czwarta porada są poradami które ułatwią Ci życie, a nie musisz ich stosować (pod warunkiem że nie popełnisz głupiego błędu), to pierwszej i dwóch ostatnich zasad musisz trzymać się bezwarunkowo, bowiem bez ich zastosowania strona nie będzie działać poprawnie.
Przejrzystość kodu
Zastanawiasz się zapewne, dlaczego na zajęciach informatyki prowadzący owe zajęcia tłuczą Ci do głowy informacje o znacznikach, parametrach - HTML. Postaram Ci się wyjaśnić, dlaczego to ma sens. Strony www można generalnie tworzyć na trzy sposoby:
1. Tworzenie stron za pomocą graficznych generatorów. Przykładem takiego generatora jest Netscape Composer. Cała praca jest prosta i przyjemna. Efekt także jest miły dla oka, jednak na dłuższą metę stosowanie takich programów jest równoznaczne z, jak to się kolokwialnie określa, 'pójściem na łatwiznę'.
2. Tworzenie stron za pomocą tekstowych generatorów. Praca polega tu na pisaniu kodu strony, zaś generator ułatwia nam wstawianie fragmentów gotowego kodu - np. kodu obrazków, czy tabeli. Przykładem połączenia takiego programu i generatora graficznego jest Pajączek.
3. Tworzenie stron w czystym HTML. Jestem zwolennikiem tej metody. Polega ona oczywiście na pisaniu kodu strony w edytorze tekstu, np. Notatniku. Osoba tworząca stronę ma całkowitą kontrolę nad jej wyglądem, lecz musi znać język HTML w co najmniej podstawowym stopniu.
Napisałem powyżej, że trzecia metoda jest najlepsza. Różnice w ich działaniu możesz zaobserwować w prosty sposób - zrób identyczną stronę w każdy z powyższych sposobów. Następnie obejrzyj efekt Twojej pracy w przeglądarce (najlepiej kilku przeglądarkach). Największa różnica jest jednak w źródle strony. Generatory graficzne tworzą niezwykle nieefektywny i długi kod, zawierający mnóstwo sieci. Sam zadecydujesz którą będziesz stosować, jednak polecam zaznajomienie się z językiem HTML i stosowanie ostatniej metody. Tylko w ten sposób możesz zapewnić sobie, że za miesiąc będziesz się orientować jak zaktualizować stronę.
Przedstawiam Ci poniżej kilka kosmetycznych porad, które pozwolą Ci na lepszą orientacje w kodzie dokumentu HTML. Aby kod Twojej strony był przejrzysty, pisz go według poniższych wytycznych:
- Tekst w znacznikach pisz dużymi literami. Kod tak pisany jest nieco bardziej przejrzysty.
, a nie
- Tabele pisz w taki sposób, abyś nie miał problemu z wyóżnieniem fragmentu tekstu odpowiedzialnego za daną kolumnę. To samo oczywiście tyczy sie każdego składnika HTML. Przykładowo:
Nie
,
lecz
- Wyrażnie oddziel część HEAD od BODY. Nie zaszkodzi nawet kilka linii odstępu.
- Bardzo ważne jest, abyś wyrobił sobie styl pisania stron. Pisz stronę według takiej konwencji, która zapewni Ci że za jakiś czas będziesz się doskonale orientował, jak zmodyfikować stronę oraz sprawi, że będziesz wiedział, jak strona wygląda w przeglądarce na podstawie kodu.
HEAD i BODY
W tym dziale poznasz fragmenty kodu, gotowe do wstawienia podczas tworzenia strony. Tak więc, na samym początku tworzenia witryny wstawiamy do czystego jeszcze pliku kod:
HEAD
Skupmy się teraz na sekcji HEAD. Jak Ci wiadomo, zawiera ona podstawowe wiadomości o stronie, które w większości nie są wyświetlane w żaden sposób na ekranie podczas przeglądania strony. Mimo to, powinnieneś wstawić tam kilka znaczników:
- oznacza to, że twój dokument jest zgodny ze specyfikacją 4.0 języka HTML. Jest to przydatne przy testowaniu poprawności kodu Twojej strony za pomocą programów do tego celu napisanych (parserów).
- Jest to tytuł strony. Zostanie on wyświetlony na pasku u góry ekranu.
- Określa standard polskich znaków, jakie stosujesz. Ten w przykładzie, stosowany jest przez systemy zgodne z Windows. Dostępny jest jeszcze standard ISO-8859-2, lecz odradzam jego stosowanie.
- To język, w jakim jest pisana strona (oczywiście nie chodzi tutaj o język programowania). To informacja przydatna w wyszukiwarkach internetowych, gdy poszukujesz stron w wybranym języku. Dla angielskiego - en, amerykańskiego - en-us, niemieckiego - de.
- W ten sposób zaznaczasz autorstwo swojej strony. Myślę, że do tego znacznika nie muszę Cię specjalnie przekonywać, choć jest on z punktu widzenia wyszukiwarek mało istotny.
- Tutaj wypisujesz słowa kluczowe, czyli te, które porównywać będzie wyszukiwarka internetowa z szukanymi przez internautę słowami. Wpisuj wszystko co Ci przychodzi do głowy i co jest związane z tematem strony. Możesz wpisać to samo słowo bez polskich znaków oraz w różnych przypadkach i liczbach (cóż, język polski się niestety odmienia).
- To bardzo ważna część strony. Bowiem właśnie ten tekst zostanie wyświetlony przez wyszukiwarkę internetową, gdy Twoja strona trafi na listę odnalezionych dokumentów w sieci o żądanym temacie. Staraj się więc zachęcić internautę do odwiedzenia jej - ale nie prostackimi sformuowaniami jak 'Super strona!', 'Tylko tutaj!', etc. Bo właśnie takie strony okazują się najmniej ciekawe.
- Już opisywałem to w dziale style. Jest to polecenie importu styli z pliku zewnętrznego na aktualną stronę.
- Ty możesz się poszczycić brakiem tego znacznika, co oznacza że pisałeś samodzielnie swoją stronę w języku HTML.
- Ten znacznik nie jest wymagany. Oznacza on, że po czasie czas mierzonym w sekundach, otworzy się strona o adresie adres. Nie musisz stosować opcji adres, wtedy co czas sekund, Twoja strona będzie się automatycznie odświeżać. Pamiętaj, aby nie działo się to zbyt często.
BODY
Znacznik zawiera kilka bardzo istotnych parametów, których znajomość może pomóc Ci w udzieleniu odpowiedzi na kilka istotnych pytań.
- w ten sposób ustalisz kolor tła. Możesz podać jego nazwę lub jego składowe RGB (czerwony - zielony - niebieski) w systemie szesnastkowym (najmniejsza liczba to 00, a największa ff). Dla przykładu, kolor czerwony to #ff0000, biały #ffffff, a szary (średnia bieli i czerni) #888888.
- tak ustlisz obrazek, który będzie stanowił tło. Oczywiście, zamiast tekstu obrazek wstaw nazwę pliku który go stanowi lub jego adres.
- w ten sposób przyporządkujesz tekstowi na stronie kolor kolor1, linkom kolor2, odwiedzonym linkom kolor3, a linkom aktywnym kolor4. Podkreślenia linków pozbędziesz się tylko za pomocą styli, ale o tym już w dziale style.
- Ustalenie marginesu lewego na x pikseli, a górnego na y pikseli. Dostępne są jeszcze parametry RIGHTMARGIN (margines lewy) i BOTTOMMARGIN (margines prawy). Niestety, nie są one akceptowane przez Netscape Communicator, tak więc aby przy przeglądaniu nim stron wyglądały one dobrze, należy stosować parametry: MARGINHEIGHT (wysokość marginesu, czyli równocześnie margines górny i dolny) oraz MARGINWIDTH. Ustawienie marginesów na 0 powoduje maksymalne przybliżenie treści strony do krawędzi okna.
Grafika
Zapewne poznałeś już podstawowe polecenia pozwalające na wstawienie obrazków na stronę WWW. Jednak jest kilka informacji, jakie powinieneś poznać aby Twoja strona była dla wszystkich bardziej przejrzysta, a które w normalnych warunkach poznawałbyś na długiej drodze zdobywania doświadczenia w pisaniu stron. Bowiem właśnie grafika na stronie jest często przyczyną najczęściej popełnianych i najpoważniejszych błędów.
Pamiętaj, że strona to taki specyficzny dokument, który nie wygląda tak samo na każdym komputerze. Różnice w wyglądzie, a nawet działaniu strony, zależą w głównej mierze od dwóch czynników - rodzaju przeglądarki oraz rozmiaru ekranu. Jak więc zoptymalizować stronę, by zawsze (lub niemal zawsze) wyglądała ona dobrze?
Przeglądarki
- Używaj kilku przeglądarek stron internetowych podczas pisania strony. Najpopularniejszymi są od długiego czasu konkurujące ze sobą Internet Explorer oraz Netscape Navigator. Sam zauważysz, że jeżeli obejrzysz utworzoną stronę używając obu programów, w każdym z nich może ona wyglądać inaczej. Staraj się więc do każdego elementu tekstu dodawać jak najwięcej parametrów (które z resztą często są oczywiste). Tak więc ustawiaj wymiary i grubość ramki obrazka, krój i wielkość czcionki, itp. Odrębnym zagadnieniem jest pisanie stron dla przeglądarek tekstowych, których możliwości są bardzo obcięte. Dobrą radą jest używanie parametru ALT. Wtedy to właśnie napis w sekcji ALT zostanie wyświetlony w takiej przeglądarce zamiast nazwy pliku. Oto przykład:
Multimedia
- Nie przesadzaj z multimediami (grafika, dźwięk, itp.)! To jeden z najczęstszych, a zarazem najbardziej podstawowych błędów popełnianych przez początkujących webmasterów. Strona (wraz z grafiką) nie powinna mieć więcej niż 100 kB! Pamiętaj, że tworząc obszerną multimedialnie stronę masz ją na dysku - choć u Ciebie może ona działać perfekcyjnie i szybko, internauta ściągając ją z sieci przez 10 minut będzie Cię przeklinać pod nosem.
Formaty graficzne
- Najpopularniejszymi formatami graficznymi są .jpg i .gif. Pierwszy jest o wiele bardziej popularny, gdyż jest on mocno skompresowany (czyli mało zajmuje miejsca, a więc szybko się otwiera). Zapisywanie obrazków w formacie .jpg opiera się na kompresji ze stratą jakości lecz wykorzystano tu małe niedociągnięcie w budowie ludzkiego oka. Większość programów graficznych pozwala Ci na wybranie stopnia kompresji (czyli - większy i wyraźniejszy, czy mniejszy i z odrobinę gorszą jakością). Obejrzyj ten sam fragment kreskówki 'The Pinky and The Brain', zapisany w formacje .jpg z różnym stopniem kompresji ze stratą jakości.
Niski stopień kompresji, obrazek ma 20 kB. 
Średni stopień kompresji, obrazek ma 10 kB. 
Wysoki stopień kompresji, obrazek ma 5 kB!
Ten sam obrazek zapisany bez jakiejkolwiek kompresji miałby rozmiar ponad 100 kB i ściągałby się z sieci za pośrednictwem modemu przez ok. 40 sekund!
Skalowanie
- Nie skaluj obrazków w przeglądarce za pomocą parametru Obecnie, przeglądarki internetowe nie stosują tzw. anti-aliasingu, czyli proporcjonalnego uśredniania kolorów w pikselu wyjściowym, na który przypada więcej niż jeden piksel wejściowy. Ponadto nie należy znacząco zmniejszać rozmiaru dużego obrazka - przykładowo, jeżeli wstawiasz obrazek 800x600 (1) i zmniejszasz go do rozmiaru 400x300 (2), przeglądarka odwiedzającego Twoją stronę ściąga obrazek (1) który zajmuje czterokrotnie więcej pamięci niż (2), a więc czterokrotnie dłużej trwa jego otwarcie. Zamiast tego, przeskaluj obrazek w programie graficznym. Jakość uzyskanego w ten sposób obrazka będzie o wiele lepsza. Może brzmi to może dosyć skomplikowanie, ale zobaczysz poniżej jak to wygląda w praktyce oglądając znaną Ci scenę ze znanej Ci kreskówki:
Obrazek przeskalowany za pomocą przeglądarki, bez anti - aliasingu.
Obrazek przeskalowany za pomocą programu graficznego z użyciem anti - aliasingu.
Miniaturki
- Twórz miniaturki plików graficznych, jeżeli tworzysz katalog zdjęć. Miniaturki stwórz za pomocą programu graficznego, a nie zmniejszaj początkowych obrazków parametrami WIDTH i HEIGHT. Następnie, stwórz linki tak, by każda miniaturka odnosiła do obrazka w normalnej wielkości. Pozwoli to oglądającemu stronę na wybranie interesującego go obrazka i otwarcie tylko wybranego .jpg-a. Praktyczne zastosowanie tej metody znajdziesz na dowolnej stronie zawierającej pornografię.
Wymiary
- Zawsze ustawiaj wielkość obrazka zgodną z wielkością rzeczywistą. Jest to o tyle istotne, że przy większej ilości obrazków obok siebie lub tekstu obok obrazków, do momentu wczytania początkowej części pliku grafiki (co nierzadko trwa kilka sekund), dla obrazka rezerwowane jest na ekranie miejsce tylko dla jego alternatywnego tekstu (ALT) oraz znaku 'x'. Dlatego, przy dłuższym ładowaniu strony, w niezbyt przyjazny dla oka sposób jej układ graficzny zmienia się z postępem ładowania. Rzeczywisty rozmiar obrazka najłatwiej uzyskasz klikając prawym przyciekiem na niego na stronie i wybierając 'Właściwości'. Uwaga - jeżeli na siłę przeskalujesz obrazek przy użyciu parametrów WIDTH i HEIGHT, otrzymasz wielkość po przeskalowaniu.
Przeźroczyste obrazki
- Format .gif udostępnia Ci możliwość tworzenia przeźroczystego lub animowanego obrazka. W zasadzie po wprowadzeniu .jpg, .gif-ów używa się jedynie do tych dwóch celów, bowiem stopień kompresji takich plików jest o wiele niższy niż .jpg (w tym przypadku jest to kompresja bez straty jakości). Ponadto, .gif pozwala Ci na tworzenie jedynie 256-kolorowych obrazków. Jeden z tych kolorów, najczęściej pierwszy (czarny) może zostać wybrany jako przeźroczysty. Jak to wygląda w praktyce? Zobacz poniżej. Efekt przeźroczystości obrazka (z prawej) jest możliwy tylko przy użyciu formatu .gif.
Tak wygląda nasze tło.
Tu wstawiłem obrazek 01.jpg na naszym tle.
Tu wstawiłem obrazek 01.gif na naszym tle.
Scany
- Nie wprowadzaj na stronę zdjęć 'prosto' ze skanera! Taki obrazek może zajmować nawet powyżej 300 kB (w skrajnych wypadkach kilka MB), a co za tym idzie ściągać się za pośrednictwem ciągle popularnych w Polsce łącz modemowych ponad dwie minuty. Programy obsługujące skaner nastawione są na obsługę urządzenia, a nie na optymalizację kompresji. Zeskanowane zdjęcię należy otworzyć w programie graficznym i zapisać je ponownie, wybierając taki stopień kompresji, aby było ono dostatecznie małe. Zdjęcie wielkośći 800x600 pikseli zajmować powinno do 150kB - a nawet mniej, gdyż przy zdjęciach możesz pozwolić sobie na gorszą jakość (jest ona mniej zauważalna, patrz - 'Pinky and The Brain', zdjęcie w środku. Jeżeli prosta strona nie jest katalogiem zdjęć, ani obszernym zbiorem innych danych, przyjmij że musi luzem zmieścić się na dyskietce (lub, lepiej, na jednej dziesiątej dyskietki).
Kropka 1x1
- Przezroczysty .gif o wymiarach 1x1 bywa niekiedy bardzo przydatny. Poprzez skalowanie niewidocznego obrazka, możesz osiągnąc min. odstęp (często ten element HTML szwankuje) lub też pustą komórkę w tabeli. Oczywiście obie te rzeczy można zrobić w inny sposób, ale przyznasz że to rozwiązanie jest ciekawe.
Kolor tła
- Zawsze ustawiaj kolor tła, nawet gdy tłem jest jakiś obrazek. Zdarza się bowiem, przy ustawieniu np. kolor tekstu i linków biały oraz ciemny obrazek w tle, że ładowanie obrazka tła się nie powiedzie. Wtedy kolor tła jest biały (standardowe ustawienie), a biały tekst jest siłą rzeczy niewidoczny.
Linki
Oto i porady dotyczące usprawniania i poprawiania pracy odnośników na stronie:
Dokumentacja
- Przejrzyj dział umieszczanie stron w internecie. Zastosuj się do najistotniejszych porad tam umieszczonych. Musisz też ujednolicić system plików, nie stosuj dużych liter w nazwach plików i katalogów (analogicznie w linkach) oraz długich nazw.
Kolory
- Kolor linków ustawiasz w sekcji BODY. Konstrukcja jest następująca (przy pominięciu pozostałych parametrów): . Oczywiście zamiast C1, C2 i C3 nalezy wstawić kolor odpowiednio: linka, linka odwiedzonego i linka aktywnego.
Podkreślenie
- Podkreślenia pozbyć się możesz tylko przy zastosowaniu styli. Ale więcej o nich dowiesz się w dziale style.
Podświetlenie
- Podświetlić link po najechaniu na niego kursorem możesz uzyskać przy zastosowaniu styli (gdy link jest tekstem) lub JavaScript (gdy link jest obrazkiem). Obejrzyj działy: style oraz skrypty.
Rodzaje
- Linkiem może być cokolwiek, np. obrazek. Wystarczy jego deklaracje umieścić między znacznikiem .
Ramka
- Jeżeli linkiem jest obrazek, pojawia się wokół niego ramka. Całość nierzadko wygląda niezbyt przyjaźnie. Wystarczy dodać parametr BORDER=0, aby usunąć obramowanie.
E-mail
- Link może wskazywać adres e-mail, a konkretnie jego naciśnięcie może uruchomić program umożliwiający Ci napisanie e-maila do wskazanej osoby. Wysłanie listu pod adres jez@z.pl uzyskamy wstawiając kod:
http://
- Jeżeli link odnosi do strony w internecie i nie zawiera na początku ciągu znaków http://, to deklaracja odnośnika jest błędna! Poprawna deklaracja linku przenoszącego na stronę www.z.pl wyglądałaby (wbrew pozorom, nie jest to takie oczywiste) następująco:
FTP
- Link może też wskazywać na plik do pobrania przez FTP. Plik /strona/index.htm z serwera FTP o adresie 123.456.789.1 i porcie FTP 100 przy loginie użytkownika: abc i jego haśle def uzyskasz wstawiając kod:
Nowe okno
- Link może spowodować otwarcie strony w nowym oknie przeglądarki. Aby to zrobić, do znacznika
Mrówki
- Standartowo po kliknięciu na odnośnik, pojawiają się mrówki (przerywane obramowanie). Usuniesz je poprzez dodanie do znacznika kodu: onFocus="blur(this)"
Style
Style CSS (Cascade Style Sheets) to jeden z najbardziej rewolucyjnych kroków w standardach WWW. Pozwalają one na bardzo łatwe i przejrzyste modyfikowanie własności obiektów znajdujących się na stronie (tekst, grafika, tabele, etc.). Jednorazowe zadeklarowanie stosowania stylu w pewnym rodzaju obiektu na stronie, daje możliwość każdorazowego wykorzystania takich własności obiektu, jeżeli tylko na stronie wystąpi. Jak więc wygląda to w praktyce?
W nagłówku strony (HEAD) Umieszczamy deklaracje:
Konstrukcja oznacza, że styl jest komentarzem (nie wpływa na zawartość strony i jest pomijany przez przeglądarke). Stosujemy ją tylko z tego powodu, że starsze przeglądarki nie akceptują styli.
Obiekt (lub ich lista) oznacza rodzaj obiektu na stronie. Przykładowo, jeżeli wpiszemy P, to każdy tekst mieszczący się między znacznikami będzie miał atrybuty określone między nawiasami klamrowymi. Jeżeli ustawimy konkretną wielkość czcionki, ustawienie w przeglądarce wielkości czcionki nie będzie już miało żadnego znaczenia - strona zawsze wyglądać będzie tak samo. Właśnie z tego powodu (oraz dzięki łatwości ich pisania), stosowanie styli stało się tak popularne i powszechne.
Oczywiście style można wstawić także na kilka innych sposobów. Możesz wstawić je tak, by działały na tylko jeden akapit, wtedy konstrukcja będzie wyglądać następująco:
Teraz cały akapit (ten jeden, a nie wszystkie), będą zawierały czcionki o wielkości 10 pikseli.
Jest jeszcze jednen sposób wstawiania styli, który ma bardzo powszechne zastosowanie. Mianowicie, można je wczytać z zewnętrznego pliku. Jest to o tyle wygodne, że jeżeli tworzysz witrynę składającą się z dziesięciu podobnych podstron, bezsensowne byłoby każdorazowe wstawianie styli. Problem ten zlikwidujesz tworząc plik o nazwie np. style.css (przyjęto, że pliki z definicjami styli mają rozszerzenie CSS), a następnie w nagłówku (HEAD) każdej ze stron umieścisz tylko jedną linię:
Oczywiście, musisz pamiętać o tym, aby plik style.css był w tym samym katalogu co strona, w której wpisywałeś deklarację wczytania styli. Oczywiście, możesz używać ścieżek względnych.
Poniżej obejrzyj podstawowe atrybuty, jakie możesz stosować przy wykorzystaniu styli:
Oczywiście, lista jest o wiele dłuższa. Mój wybór jest sybiektywny i zawiera jedynie te style, których sam często używam. Nie zapominaj jednak, że style są niezwykle ważnym elementem dla twórców stron, w miarę nabierania doświadczenia w tej materii sam docenisz potęgę tego narzędzia.
Skrypty
Skrypty, czyli krótkie programy umożliwiające Ci poszerzenie możliwości strony możesz pisać, gdy oczywiście znasz choć jeden ze stosownych języków (C, ActiveX, Java, JavaScript i inne). Ja jednak zakładam że nie znasz żadnego z nich i jesteś laikiem, dlatego podam Ci poniżej kilka ciekawych zastosowań JavaScript (jednego z języków, w którym można pisać skrypty, umieszczając ich tekst bezpośrednio w kodzie strony).
Rollover
- Podstawowym i bardzo często wykorzystywanym skryptem jest tzw. efekt rollover. Stosujemy go przy linkach, które reprezentowane są przez obrazki (pamiętamy, że dodajemy parametr BORDER=0). Zasada jego działania jest prosta. Jeżeli kursor znajduje się nad obrazkiem, wyświetlana zostaje jego alternatywna (podświetlona) wersja, a w przeciwnym wypadku jego wersja standardowa. Aby taki efekt uzyskać, tworzymy obrazek podświetlony i nazywamy go on.jpg oraz obrazek standardowy, nazywając go off.jpg. Oto przykład działania skryptu wraz z gotowym kodem HTML:
- tak wygląda uprzednio przygotowany plik.
- tak wygląda uprzednio przygotowany plik.
Aby obejrzeć efekt, najedź kursorem myszki na obrazek po lewej.
Zegar
- Kolejnym skryptem, który może uatrakcyjnić Twoją stronę jest prosty zegar. Aby wstawić go na stronę, musisz część jego kodu wstawić do sekcji HEAD. Tak więc:
Do sekcji HEAD wstaw kod:
W miejsce, w którym ma pojawić się zegar w sekcji BODY, wstaw kod:
A oto i efekt:
Pasek statusu
- Najechanie na link (bez względu na to, czy reprezentuje go grafika, czy tekst), może skutkować zmianą treści paska statusu. Jeżeli pragniesz, by taki efekt uatrakcyjnił działanie linków na Twojej stronie, znacznik wzbogać o poniższe parametry:
Oto przykład działania takiego skryptu - najedź kursorem myszki na tekst 'Powróć' i obserwuj pasek statusu:
Powróć
Przycisk 'Powrót'
- Kolejnym, bardzo często stosowanym 'miniskryptem' jest bardzo typowe wykorzystanie JavaScript przy powracaniu do poprzedniej strony. Poprzez wstawienie zamiast nazwy pliku, kodu , po kliknięciu na link powrócisz do poprzednio oglądanej strony dokładnie tak, jakbyś nacisnął przycisk 'Wstecz' (Back) na przeglądarce. Jest to o tyle wygodne, że przeglądarka nie ściąga wtedy całego kodu z sieci, lecz ze swojego cache'u. Ponadto, powracasz w dokładnie to miejsce na poprzedniej stronie, z którego wszedłeś na stronę aktualną, a nie na początek strony poprzedniej. Nie będę podawał odrębnego przykładu, gdyż każdy przycisk 'Powrót' na tych stronach napisany jest właśnie w ten sposób.Ramki
Zapewne już wielokrotnie spotkałeś się z pojeciem ramek, podobnie jak i wielokrotnie widzieliście ich praktyczne zastosowanie na stronie www. Na czym polega więc istota ramek? Pokrótce, na podzieleniu ekranu na kilka części. Każda taka część ekranu, zwana ramką, będzie odrębnym plikiem HTML.
Uprzedzam, że ten dział będzie miał charakter nieco inny niż pozostałe działy tego dokumentu - jest on raczej skromnym kompedium dotyczącym zagadnienia ramek, a nie zbiorem trickow z nimi związanych.
Dlaczego?
Choć od ramek obecnie odchodzi się przy bardziej profesjonalnych stronach, za ich stosowaniem przemawia kilka istotnych argumentów:
- Funkcjonalność - częstym zastosowaniem ramek jest umieszczenie menu po jednej stronie ekranu. Nawigacja jest wtedy nieco ułatwiona, gdyż menu jest widoczne w każdej chwili i nie zmienia swojego położenia na ekranie.
- Estetyka - Może ten argument jest dosyć wyszukany, ale strony oparte na ramkach dają większe pole do popisu w zakresie grafiki (można pozwolić sobie na większy rozmiar obrazków ładowanych jednorazowo).
- Szybkość ładowania strony - co jest w zasadzie najistotniejszą przyczyną rozpowszechnienia się ramek. Strony ładują się szybko, gdyż każda ramka to odrębny plik, dla przykładu - ta strona jest wykonana w - ze względów objętościowych - w niezbyt optymalny sposób. Gdyby nagłówek był odrębną ramką, ładowana byłaby jedynie pozostała część strony (przykład nie jest najfortunniejszy, bo stałe menu w takiej sytuacji nie jest pożądane - zajmowałoby zbyt dużo miejsca na ekranie), a nagłówek nie.
Jak wyglądają ramki?
Jak więc wygląda przykładowy dokument z zastosowaniem ramek? Kliknij tutaj, aby obejrzeć efekt. I jak, podobało się? Być może przykład nie posiada wygórowanej grafiki, ale sam przyznasz że zastosowanie jest dobre zwłaszcza dla użytkowników internetu korzystających z wolnych łącz modemowych.
Jak widzisz, oglądanie efektu napisanej strony jest równoznaczne z każdorazowym klikaniem na link. Ja więc będę przedstawiać Ci zawartość ekranu tak, by nie było to konieczne (w formie zmniejszonej tabelki).
Parametry FRAMESET
FRAMESET powoduje podzielenie strony na ramki. Tak więc:
- COLS="x1,x2" - powoduje podzielenie ekranu na dwie kolumny, pierwsza o szerokości x1 pikseli, a druga o szerokości x2 pikseli. Można podzielić stronę na więcej kolumn, np. COLS="x1,x2,x3,x4".
- BORDER=x - powoduje, że obramowanie rozdzielające ramki będzie miało szerokość x pikseli.
- BORDERCOLOR=x - powoduje, że obramowanie rozdzielające ramki będzie koloru x.
- FRAMEBORDER=0 - dzięki temu parametrowi, obramowanie rozdzielające ramki nie będzie wyświetlane. W przeciwieństwie do 0, FRAMEBORDER="1 powoduje, że obramowanie zostanie wyświetlone (jest to standardowe ustawienie). Można też zamiast liczb stosować parametry: yes oraz no (polecam jednak liczby). UWAGA - aby usunąć obramowanie w IE, zalecane jest dodanie parametru FRAMESPACING=0
Wielkości ramek możemy podawać w jeden ze sposobów, opisanych na poniższych przykładach. Znaczenie poszczególnych parametrów oznaczyłem kolorami.
- Dzieli stronę na dwie kolumny o szerokości odpowiednio: 100 i 200 pikseli.
- Dzieli stronę na dwa wiersze o wysokości 10% i 90% wielkości ekranu.
- Dzieli stronę na dwie kolumny. Pierwsza o szerokości 100 pikseli, a druga, o szerokości pozostałej części ekranu. Gwiazdka to bardzo użyteczny parametr!
Parametry oczywiście można łączyć, np.:
- Ten dziwoląg wymyślony na potrzeby poradnika podzieliłby stronę na cztery kolumny, pierwsza będzie miała szerokość 10% ekranu, druga: 100 pikseli, czwarta: 50 pikseli, a trzecia - to, co zostanie.
Parametry FRAME
FRAME powoduje wstawienie ramki w miejsce podzielone znacznikiem FRAMESET. Każdą ramkę musisz w ten sposob wstawić, gdyż tylko w ten sposób możesz określić niezbędne parametry, o których dowiesz sie więcej w dalszej części poradnika.
Oto lista niezbędnych parametrów:
- SRC="plik.htm" - po załadowaniu strony ze szkieletem ramek, plikiem źródłowym dla tej ramki będzie plik plik.htm.
- NAME="nazwa" - ustalisz w ten sposób, że ta ramka będzie nosić nazwę nazwa. Jak bardzo jest to istotne, zauważysz później.
Oto lista pozostałych parametrów:
- SCROLLING="x" - dotyczy to możliwości użycia suwaków w ramce. X może przyjąć jedną z wartości: yes (suwaki będą wyświetlone), no (suwaki nie będa wyświetlone), auto (suwaki będą wyświetlone, jeśli plik nie mieści się cały w ramce).
- NORESIZE - jeżeli użyjesz tego parametru, obramowania nie będzie można przesuwać myszką (czyli skalowanie ramek zostanie wyłączone).
- MARGINWIDTH="x" i/lub MARGINHEIGHT="y" - powoduje wstawienie marginesu do ramki - MARGINWIDTH to margines lewy i prawy (równocześnie), a MARGINHEIGHT to margines górny i dolny.
Nawigacja w ramkach
Tworzenie stron z ramkami nie miałoby większego sensu, gdyby nie istniała tu sensowna nawigacja. Oczywiście, dotyczy to linków - których w większości przypadków uzywamy w nieco inny sposób. Przykładowo:
- Taki link, jest całkowicie poprawny. Jednak jeżeli jest on częścią strony otwartej w ramce, kliknięcie na odnośniku spowoduje otwarcie pliku nazwa.htm nie na pełnym ekranie, lecz w aktualnej ramce! Wyobraź sobie, że plik nazwa.htm zawiera kolejną deklarację ramek. Po kliknięciu ramki otworzą się w naszej ramce, po kliknięciu ponownym, otworzą się w aktualnej ramce poparzedniej ramki itd.
- Dzięki zastosowaniu parametru TARGET, poznałeś właśnie sens tworzenia ramek, prostej nawigacji i szybszego ładownia strony. W tym przykładzie, wszystkie ramki poza ramką strona, pozostaną bez zmian. Natomiast w ramce strona, otworzy się plik nazwa.htm. Dlatego, każda ramka, której treść będzie w jakikolwiek sposób zmieniana, musi mieć nadaną nazwę (o tym wyżej).
- Wpisanie parametru TARGET="_top" spowoduje, że link otworzy się na pełnym ekranie przeglądarki, a istniejące ramki zostaną usunięte.
- Wpisanie parametru TARGET="_parent" spowoduje, że link otworzy się w ramce, będącej ramką 'nadrzędną' w stosunku do ramki aktualnej.
- Ten parametr spowoduje wyświetlenie pliku nazwa.htm w nowym oknie przeglądarki.
Uwagi
Dozwolone jest zagnieżdżanie ramek. W praktyce wygląda to tak, że pomiędzy znacznikami FRAMESET, wstawiamy kolejne znaczniki FRAMESET. To pozwala nam na wielokrotne dzielenie ekranu na kolumny i wiersze.
Ramki znacznie poszerzają możliwości w tworzeniu stron WWW. Jednak należy tu zachować bezwzględny umiar, pamiętając o elementarnym poczuciu estetyki. Podobnie, przeładowanie stron ramkami sprawi, że strona stanie się nieczytelna, a nawigacja pomiędzy kolejnymi podstronami będzie znacznie utrudniona - a przecież jest to sprzeczne z podstawowymi założeniami specyfikacji. Zdecydowanie lepiej jest napisać stronę bez użycia ramek, a z użyciem np. odpowiednio określonych tabelek, a wtedy mimo nieco wolniejszego ładowania strony, będzie ona znacznie bardziej przyjazna dla użytkownika.
Strony godne polecenia
W tym dziale polecę Ci kilka stron o tematyce podobnej do mojej oraz kilka programów, które pomogą Ci przy tworzeniu stron.
Strony
* www.pckurier.pl - Znajdziesz tutaj Kurs Języka HTML autorstwa p. Pawła Wimmera.
* portal.republika.pl - Republika WWW - portal społeczności internetowych.
* wwwfaq.prv.pl - Webmasterstwo - Najczęściej Zadawane Pytania (FAQ).
Programy
* www.corel.com - Strona producenta jednego z najlepszych pakietów graficznych, Corel Draw. Pakiet nie jest dostępny do pobrania.
* www.adobe.com - Strona producenta jednego z najlepszych pakietów graficznych, Adobe PhotoShop. Stąd także nie pobierzesz pakietu.
* www.ipswitch.com - Strona producenta najpopularniejszego programu umożliwiającego skopiowanie strony na serwer - WS_FTP. Stąd ściągniesz jego darmową 30-dniową wersję.
* www.jgsoft.com - Stąd ściągniesz program EditPad. Jest to rozszerzona wersja notatnika, obsługująca m.in. wiele plików jednocześnie i pliki większe niż 64kB.
* www.ezhtml.bydnet.com.pl - Strona darmowej wersji ezHTML, ciekawego generatora stron. Stąd ściągniesz jego darmową wersję.
* www.editplus.com - Strona programu EditPlus 2, jednego z najwygodniejszych a zarazem najprostszych w użyciu tekstowych generatorów HTML (i nie tylko). Program godny polecenia, stąd ściągniesz jego darmową wersję.
Jest kilka informacji, jakie powinieneś poznać aby Twoja strona była dla wszystkich bardziej przejrzysta, a które w normalnych warunkach poznawałbyś na długiej drodze zdobywania doświadczenia w pisaniu stron. Bowiem właśnie grafika na stronie jest często przyczyną najczęściej popełnianych i najpoważniejszych błędów.Umieszczanie strony
Na zajęciach z informatyki - i być może z wykorzystaniem moich porad - stworzyłeś już swoją pierwszą stronę WWW. Być może nagrałeś ją już na dyskietkę, lecz pragniesz aby i ktoś inny mógł ją obejrzeć. Być może byłeś na wspaniałej wycieczce, a zdjęcia chciałbyś opublikować, zamiast robić odbitki dla każdego jej uczestnika. To tylko jedno z zastosowań prywatnych i niekomercyjnych stron WWW, które akurat, nie wiedzieć czemu, wpadło mi do głowy.
Jak więc to zrobić?
Aby umieścić swoją stronę w internecie musisz wykonać następujące kroki:
- Po pierwsze, musisz znaleźć miejsce na dowolnym serwerze internetowym. W przypadku stron komercyjnych będzie to trochę kosztowało, ale na szczęście dla niekomercyjnych zastosowań dostępne są darmowe serwery. Stosuj te polskie - dostęp do nich będzie dla rodzimych internautów o wiele szybszy. Mogę Ci dwie z nich polecić (kliknij na adres, aby przenieść się na stronę odpowiedniej firmy): www.republika.pl, www.polbox.com. Ponoć Radio Maryja od dwóch lat także zakłada darmowe konta, ale z wiadomych przyczyn nie będę go propagował.
- Umieścić swoją stronę na serwerze. Najczęściej dostęp do konta jest za pośrednictwem FTP (File Transfer Protocol, jeśli jesteś laikiem to nie będzie Cię interesować co to jest). Jak to dokładnie zrobić, przeczytasz na stronie firmy, która jest właścicielem serwera. Z programów, które Ci to umożliwią, polecić Ci mogę jeden - według mnie zdecydowanie najlepszy - WS_FTP Pro (kliknij na nazwę aby przenieść się na stronę jego producenta, skąd ściągniesz darmową 30-dniową wersję).
- Twoja strona ma zapewne dosyć skomplikowany adres. Zapisz go sobie, a następnie pomyśl, jak można byłoby go uprościć. Możesz to zrobić, stosując tzw. alias. Aliasy oferowane są za darmo przez dwie firmy (kliknij na adres aby przenieść się na ich strony i stworzyć aliasy): www.z.pl oraz www.prv.pl. Jeżeli skorzystasz z ich usług, alternatywny adres Twojej strony będzie wyglądał tak: www.nazwa.z.pl, lub też www.nazwa.prv.pl. Oczywiście, ten krok możesz pominąć.
- Teraz możesz już obejrzeć swoją stronę za pomocą przeglądarki internetowej, wpisując już adres w internecie (jak dokładnie będzie on wyglądał, dowiesz się na stronie firmy na której serwerze ją umieszczałeś). I jeżeli jest to Twoja pierwsza strona, daję Ci głowę, że spotka Cię wielkie rozczarowanie. Linki nie działają, strona otwiera się wolno, połowy obrazków nie widzisz. Stronę należy więc gruntownie przebudować stosując poniższe porady:
Wielkość liter
- Serwery internetowe rozróżniają wielkość liter! Dlatego, dla ujednolicenia naszego systemu robienia stron, w nazwach plików będziemy stosowali tylko małe litery. Przykładowo, jeżeli mamy plik index2.htm (1) i chcemy, aby link w pliku index.htm (2) odnosił do pliku (1), to konstrukcje:oraz są niepoprawne! Choć na Twoim komputerze działającym pod systemem Windows strona będzie działać, aby działała ona w internecie musisz dokładnie podawać nazwy. A więc poprawnie będzie:. Oczywiście to samo dotyczy nazw katalogów oraz innych plików, np. obrazków.
Polskie znaki
- Nie używaj polskich znaków w nazwach plików! Jest to przyczyną wielu błędów, które omyłkowo łatwo jest popełnić. Zwłaszcza, gdy stronę sporządzamy na kilku komputerach, na których stosowane są różne standardy polskich znaków. Czyli:
Nie stosujemy: zdjęcie.jpg, a zamiast tego stosujemy: zdjecie.jpg
Długie nazwy
- Nie używaj długich nazw plików! To także przyczyna wielu błędów. Oczywiście, możesz używać długich nazw - ale dobrą radą jest, abyś się od tego powstrzymał, przynajmniej na początku, gdy o błąd łatwo. Choćby dlatego, że długie nazwy są obcinane przy przenoszeniu/kopiwaniu plików za pomocą ciągle popularnego dosowego Norton Commandera (który z resztą także zamienia część dużych liter na małe i odwrotnie). Dla przypomnienia, krótka nazwa zawiera do 8 znaków nazwy i do 3 znaków rozszerzenia. Czyli:
Nie stosujemy: mojezdjecie.jpg, a zamiast tego stosujemy: zdjecie.jpg lub mojezdje.jpg
Długie rozszerzenia
- W nazwach plików używaj trzyliterowych rozszerzeń, na przykład htm a nie html, jpg a nie jpeg. Pamiętaj, że nazwa pliku rzeczywistego i jego nazwa w linku muszą być takie same. Dlatego, pozamieniaj nazwy html i jpeg na ich trzyliterowe odpowiedniki. Dlaczego to polecam? Bowiem, priorytet nad czteroliterowym rozszerzeniem ma trzyliterowe. Plik index.html jest standartowym plikiem otwieranym po podaniu katalogu. Jeśli jednak istnieje tam plik index.htm, jest on otwierany zamiast index.html. Dlatego, dla ujednolicenia naszego systemu stosujemy trzyliterowe rozszerzenia. Czyli:
Nie stosujemy: grafika.html, a zamiast tego stosujemy: grafika.htm
Odstępy w nazwach
- W nazwie żadnego pliku nie może byc spacji! To już powinieneś wiedzieć z zajęć z zakresu systemu Linux, gdzie nie może w normalnych warunkach istnieć plik zawierający spację. Czyli:
Nie stosujemy: ja 1.jpg, a zamiast tego stosujemy: ja_1.jpg lub ja1.jpg
Slash i backslash
- W nazwach plików używaj znaku slash (/), a nie backslash (\)! To także wynika wprost ze specyfikacji systemów unixowych. Choć strona zawierająca backslash (\) będzie działać na Twoim komputerze, nie będzie działał żaden obrazek czy link jeżeli będziesz ściągał ją z internetu. Czyli:
Nie stosujemy:, a zamiast tego stosujemy:
O ile druga, trzecia i czwarta porada są poradami które ułatwią Ci życie, a nie musisz ich stosować (pod warunkiem że nie popełnisz głupiego błędu), to pierwszej i dwóch ostatnich zasad musisz trzymać się bezwarunkowo, bowiem bez ich zastosowania strona nie będzie działać poprawnie.
Przejrzystość kodu
Zastanawiasz się zapewne, dlaczego na zajęciach informatyki prowadzący owe zajęcia tłuczą Ci do głowy informacje o znacznikach, parametrach - HTML. Postaram Ci się wyjaśnić, dlaczego to ma sens. Strony www można generalnie tworzyć na trzy sposoby:
1. Tworzenie stron za pomocą graficznych generatorów. Przykładem takiego generatora jest Netscape Composer. Cała praca jest prosta i przyjemna. Efekt także jest miły dla oka, jednak na dłuższą metę stosowanie takich programów jest równoznaczne z, jak to się kolokwialnie określa, 'pójściem na łatwiznę'.
2. Tworzenie stron za pomocą tekstowych generatorów. Praca polega tu na pisaniu kodu strony, zaś generator ułatwia nam wstawianie fragmentów gotowego kodu - np. kodu obrazków, czy tabeli. Przykładem połączenia takiego programu i generatora graficznego jest Pajączek.
3. Tworzenie stron w czystym HTML. Jestem zwolennikiem tej metody. Polega ona oczywiście na pisaniu kodu strony w edytorze tekstu, np. Notatniku. Osoba tworząca stronę ma całkowitą kontrolę nad jej wyglądem, lecz musi znać język HTML w co najmniej podstawowym stopniu.
Napisałem powyżej, że trzecia metoda jest najlepsza. Różnice w ich działaniu możesz zaobserwować w prosty sposób - zrób identyczną stronę w każdy z powyższych sposobów. Następnie obejrzyj efekt Twojej pracy w przeglądarce (najlepiej kilku przeglądarkach). Największa różnica jest jednak w źródle strony. Generatory graficzne tworzą niezwykle nieefektywny i długi kod, zawierający mnóstwo sieci. Sam zadecydujesz którą będziesz stosować, jednak polecam zaznajomienie się z językiem HTML i stosowanie ostatniej metody. Tylko w ten sposób możesz zapewnić sobie, że za miesiąc będziesz się orientować jak zaktualizować stronę.
Przedstawiam Ci poniżej kilka kosmetycznych porad, które pozwolą Ci na lepszą orientacje w kodzie dokumentu HTML. Aby kod Twojej strony był przejrzysty, pisz go według poniższych wytycznych:
- Tekst w znacznikach pisz dużymi literami. Kod tak pisany jest nieco bardziej przejrzysty.
, a nie
- Tabele pisz w taki sposób, abyś nie miał problemu z wyóżnieniem fragmentu tekstu odpowiedzialnego za daną kolumnę. To samo oczywiście tyczy sie każdego składnika HTML. Przykładowo:
Nie
,
lecz
- Wyrażnie oddziel część HEAD od BODY. Nie zaszkodzi nawet kilka linii odstępu.
- Bardzo ważne jest, abyś wyrobił sobie styl pisania stron. Pisz stronę według takiej konwencji, która zapewni Ci że za jakiś czas będziesz się doskonale orientował, jak zmodyfikować stronę oraz sprawi, że będziesz wiedział, jak strona wygląda w przeglądarce na podstawie kodu.
HEAD i BODY
W tym dziale poznasz fragmenty kodu, gotowe do wstawienia podczas tworzenia strony. Tak więc, na samym początku tworzenia witryny wstawiamy do czystego jeszcze pliku kod:
HEAD
Skupmy się teraz na sekcji HEAD. Jak Ci wiadomo, zawiera ona podstawowe wiadomości o stronie, które w większości nie są wyświetlane w żaden sposób na ekranie podczas przeglądania strony. Mimo to, powinnieneś wstawić tam kilka znaczników:
- oznacza to, że twój dokument jest zgodny ze specyfikacją 4.0 języka HTML. Jest to przydatne przy testowaniu poprawności kodu Twojej strony za pomocą programów do tego celu napisanych (parserów).
- Jest to tytuł strony. Zostanie on wyświetlony na pasku u góry ekranu.
- Określa standard polskich znaków, jakie stosujesz. Ten w przykładzie, stosowany jest przez systemy zgodne z Windows. Dostępny jest jeszcze standard ISO-8859-2, lecz odradzam jego stosowanie.
- To język, w jakim jest pisana strona (oczywiście nie chodzi tutaj o język programowania). To informacja przydatna w wyszukiwarkach internetowych, gdy poszukujesz stron w wybranym języku. Dla angielskiego - en, amerykańskiego - en-us, niemieckiego - de.
- W ten sposób zaznaczasz autorstwo swojej strony. Myślę, że do tego znacznika nie muszę Cię specjalnie przekonywać, choć jest on z punktu widzenia wyszukiwarek mało istotny.
- Tutaj wypisujesz słowa kluczowe, czyli te, które porównywać będzie wyszukiwarka internetowa z szukanymi przez internautę słowami. Wpisuj wszystko co Ci przychodzi do głowy i co jest związane z tematem strony. Możesz wpisać to samo słowo bez polskich znaków oraz w różnych przypadkach i liczbach (cóż, język polski się niestety odmienia).
- To bardzo ważna część strony. Bowiem właśnie ten tekst zostanie wyświetlony przez wyszukiwarkę internetową, gdy Twoja strona trafi na listę odnalezionych dokumentów w sieci o żądanym temacie. Staraj się więc zachęcić internautę do odwiedzenia jej - ale nie prostackimi sformuowaniami jak 'Super strona!', 'Tylko tutaj!', etc. Bo właśnie takie strony okazują się najmniej ciekawe.
- Już opisywałem to w dziale style. Jest to polecenie importu styli z pliku zewnętrznego na aktualną stronę.
- Ty możesz się poszczycić brakiem tego znacznika, co oznacza że pisałeś samodzielnie swoją stronę w języku HTML.
- Ten znacznik nie jest wymagany. Oznacza on, że po czasie czas mierzonym w sekundach, otworzy się strona o adresie adres. Nie musisz stosować opcji adres, wtedy co czas sekund, Twoja strona będzie się automatycznie odświeżać. Pamiętaj, aby nie działo się to zbyt często.
BODY
Znacznik zawiera kilka bardzo istotnych parametów, których znajomość może pomóc Ci w udzieleniu odpowiedzi na kilka istotnych pytań.
- w ten sposób ustalisz kolor tła. Możesz podać jego nazwę lub jego składowe RGB (czerwony - zielony - niebieski) w systemie szesnastkowym (najmniejsza liczba to 00, a największa ff). Dla przykładu, kolor czerwony to #ff0000, biały #ffffff, a szary (średnia bieli i czerni) #888888.
- tak ustlisz obrazek, który będzie stanowił tło. Oczywiście, zamiast tekstu obrazek wstaw nazwę pliku który go stanowi lub jego adres.
- w ten sposób przyporządkujesz tekstowi na stronie kolor kolor1, linkom kolor2, odwiedzonym linkom kolor3, a linkom aktywnym kolor4. Podkreślenia linków pozbędziesz się tylko za pomocą styli, ale o tym już w dziale style.
- Ustalenie marginesu lewego na x pikseli, a górnego na y pikseli. Dostępne są jeszcze parametry RIGHTMARGIN (margines lewy) i BOTTOMMARGIN (margines prawy). Niestety, nie są one akceptowane przez Netscape Communicator, tak więc aby przy przeglądaniu nim stron wyglądały one dobrze, należy stosować parametry: MARGINHEIGHT (wysokość marginesu, czyli równocześnie margines górny i dolny) oraz MARGINWIDTH. Ustawienie marginesów na 0 powoduje maksymalne przybliżenie treści strony do krawędzi okna.
Grafika
Zapewne poznałeś już podstawowe polecenia pozwalające na wstawienie obrazków na stronę WWW. Jednak jest kilka informacji, jakie powinieneś poznać aby Twoja strona była dla wszystkich bardziej przejrzysta, a które w normalnych warunkach poznawałbyś na długiej drodze zdobywania doświadczenia w pisaniu stron. Bowiem właśnie grafika na stronie jest często przyczyną najczęściej popełnianych i najpoważniejszych błędów.
Pamiętaj, że strona to taki specyficzny dokument, który nie wygląda tak samo na każdym komputerze. Różnice w wyglądzie, a nawet działaniu strony, zależą w głównej mierze od dwóch czynników - rodzaju przeglądarki oraz rozmiaru ekranu. Jak więc zoptymalizować stronę, by zawsze (lub niemal zawsze) wyglądała ona dobrze?
Przeglądarki
- Używaj kilku przeglądarek stron internetowych podczas pisania strony. Najpopularniejszymi są od długiego czasu konkurujące ze sobą Internet Explorer oraz Netscape Navigator. Sam zauważysz, że jeżeli obejrzysz utworzoną stronę używając obu programów, w każdym z nich może ona wyglądać inaczej. Staraj się więc do każdego elementu tekstu dodawać jak najwięcej parametrów (które z resztą często są oczywiste). Tak więc ustawiaj wymiary i grubość ramki obrazka, krój i wielkość czcionki, itp. Odrębnym zagadnieniem jest pisanie stron dla przeglądarek tekstowych, których możliwości są bardzo obcięte. Dobrą radą jest używanie parametru ALT. Wtedy to właśnie napis w sekcji ALT zostanie wyświetlony w takiej przeglądarce zamiast nazwy pliku. Oto przykład:
Multimedia
- Nie przesadzaj z multimediami (grafika, dźwięk, itp.)! To jeden z najczęstszych, a zarazem najbardziej podstawowych błędów popełnianych przez początkujących webmasterów. Strona (wraz z grafiką) nie powinna mieć więcej niż 100 kB! Pamiętaj, że tworząc obszerną multimedialnie stronę masz ją na dysku - choć u Ciebie może ona działać perfekcyjnie i szybko, internauta ściągając ją z sieci przez 10 minut będzie Cię przeklinać pod nosem.
Formaty graficzne
- Najpopularniejszymi formatami graficznymi są .jpg i .gif. Pierwszy jest o wiele bardziej popularny, gdyż jest on mocno skompresowany (czyli mało zajmuje miejsca, a więc szybko się otwiera). Zapisywanie obrazków w formacie .jpg opiera się na kompresji ze stratą jakości lecz wykorzystano tu małe niedociągnięcie w budowie ludzkiego oka. Większość programów graficznych pozwala Ci na wybranie stopnia kompresji (czyli - większy i wyraźniejszy, czy mniejszy i z odrobinę gorszą jakością). Obejrzyj ten sam fragment kreskówki 'The Pinky and The Brain', zapisany w formacje .jpg z różnym stopniem kompresji ze stratą jakości.
Niski stopień kompresji, obrazek ma 20 kB. Średni stopień kompresji, obrazek ma 10 kB. Wysoki stopień kompresji, obrazek ma 5 kB!Ten sam obrazek zapisany bez jakiejkolwiek kompresji miałby rozmiar ponad 100 kB i ściągałby się z sieci za pośrednictwem modemu przez ok. 40 sekund!
Skalowanie
- Nie skaluj obrazków w przeglądarce za pomocą parametru Obecnie, przeglądarki internetowe nie stosują tzw. anti-aliasingu, czyli proporcjonalnego uśredniania kolorów w pikselu wyjściowym, na który przypada więcej niż jeden piksel wejściowy. Ponadto nie należy znacząco zmniejszać rozmiaru dużego obrazka - przykładowo, jeżeli wstawiasz obrazek 800x600 (1) i zmniejszasz go do rozmiaru 400x300 (2), przeglądarka odwiedzającego Twoją stronę ściąga obrazek (1) który zajmuje czterokrotnie więcej pamięci niż (2), a więc czterokrotnie dłużej trwa jego otwarcie. Zamiast tego, przeskaluj obrazek w programie graficznym. Jakość uzyskanego w ten sposób obrazka będzie o wiele lepsza. Może brzmi to może dosyć skomplikowanie, ale zobaczysz poniżej jak to wygląda w praktyce oglądając znaną Ci scenę ze znanej Ci kreskówki:
Obrazek przeskalowany za pomocą przeglądarki, bez anti - aliasingu.Obrazek przeskalowany za pomocą programu graficznego z użyciem anti - aliasingu.Miniaturki
- Twórz miniaturki plików graficznych, jeżeli tworzysz katalog zdjęć. Miniaturki stwórz za pomocą programu graficznego, a nie zmniejszaj początkowych obrazków parametrami WIDTH i HEIGHT. Następnie, stwórz linki tak, by każda miniaturka odnosiła do obrazka w normalnej wielkości. Pozwoli to oglądającemu stronę na wybranie interesującego go obrazka i otwarcie tylko wybranego .jpg-a. Praktyczne zastosowanie tej metody znajdziesz na dowolnej stronie zawierającej pornografię.
Wymiary
- Zawsze ustawiaj wielkość obrazka zgodną z wielkością rzeczywistą. Jest to o tyle istotne, że przy większej ilości obrazków obok siebie lub tekstu obok obrazków, do momentu wczytania początkowej części pliku grafiki (co nierzadko trwa kilka sekund), dla obrazka rezerwowane jest na ekranie miejsce tylko dla jego alternatywnego tekstu (ALT) oraz znaku 'x'. Dlatego, przy dłuższym ładowaniu strony, w niezbyt przyjazny dla oka sposób jej układ graficzny zmienia się z postępem ładowania. Rzeczywisty rozmiar obrazka najłatwiej uzyskasz klikając prawym przyciekiem na niego na stronie i wybierając 'Właściwości'. Uwaga - jeżeli na siłę przeskalujesz obrazek przy użyciu parametrów WIDTH i HEIGHT, otrzymasz wielkość po przeskalowaniu.
Przeźroczyste obrazki
- Format .gif udostępnia Ci możliwość tworzenia przeźroczystego lub animowanego obrazka. W zasadzie po wprowadzeniu .jpg, .gif-ów używa się jedynie do tych dwóch celów, bowiem stopień kompresji takich plików jest o wiele niższy niż .jpg (w tym przypadku jest to kompresja bez straty jakości). Ponadto, .gif pozwala Ci na tworzenie jedynie 256-kolorowych obrazków. Jeden z tych kolorów, najczęściej pierwszy (czarny) może zostać wybrany jako przeźroczysty. Jak to wygląda w praktyce? Zobacz poniżej. Efekt przeźroczystości obrazka (z prawej) jest możliwy tylko przy użyciu formatu .gif.
Tak wygląda nasze tło.Scany
- Nie wprowadzaj na stronę zdjęć 'prosto' ze skanera! Taki obrazek może zajmować nawet powyżej 300 kB (w skrajnych wypadkach kilka MB), a co za tym idzie ściągać się za pośrednictwem ciągle popularnych w Polsce łącz modemowych ponad dwie minuty. Programy obsługujące skaner nastawione są na obsługę urządzenia, a nie na optymalizację kompresji. Zeskanowane zdjęcię należy otworzyć w programie graficznym i zapisać je ponownie, wybierając taki stopień kompresji, aby było ono dostatecznie małe. Zdjęcie wielkośći 800x600 pikseli zajmować powinno do 150kB - a nawet mniej, gdyż przy zdjęciach możesz pozwolić sobie na gorszą jakość (jest ona mniej zauważalna, patrz - 'Pinky and The Brain', zdjęcie w środku. Jeżeli prosta strona nie jest katalogiem zdjęć, ani obszernym zbiorem innych danych, przyjmij że musi luzem zmieścić się na dyskietce (lub, lepiej, na jednej dziesiątej dyskietki).
Kropka 1x1
- Przezroczysty .gif o wymiarach 1x1 bywa niekiedy bardzo przydatny. Poprzez skalowanie niewidocznego obrazka, możesz osiągnąc min. odstęp (często ten element HTML szwankuje) lub też pustą komórkę w tabeli. Oczywiście obie te rzeczy można zrobić w inny sposób, ale przyznasz że to rozwiązanie jest ciekawe.
Kolor tła
- Zawsze ustawiaj kolor tła, nawet gdy tłem jest jakiś obrazek. Zdarza się bowiem, przy ustawieniu np. kolor tekstu i linków biały oraz ciemny obrazek w tle, że ładowanie obrazka tła się nie powiedzie. Wtedy kolor tła jest biały (standardowe ustawienie), a biały tekst jest siłą rzeczy niewidoczny.
Linki
Oto i porady dotyczące usprawniania i poprawiania pracy odnośników na stronie:
Dokumentacja
- Przejrzyj dział umieszczanie stron w internecie. Zastosuj się do najistotniejszych porad tam umieszczonych. Musisz też ujednolicić system plików, nie stosuj dużych liter w nazwach plików i katalogów (analogicznie w linkach) oraz długich nazw.
Kolory
- Kolor linków ustawiasz w sekcji BODY. Konstrukcja jest następująca (przy pominięciu pozostałych parametrów): . Oczywiście zamiast C1, C2 i C3 nalezy wstawić kolor odpowiednio: linka, linka odwiedzonego i linka aktywnego.
Podkreślenie
- Podkreślenia pozbyć się możesz tylko przy zastosowaniu styli. Ale więcej o nich dowiesz się w dziale style.
Podświetlenie
- Podświetlić link po najechaniu na niego kursorem możesz uzyskać przy zastosowaniu styli (gdy link jest tekstem) lub JavaScript (gdy link jest obrazkiem). Obejrzyj działy: style oraz skrypty.
Rodzaje
- Linkiem może być cokolwiek, np. obrazek. Wystarczy jego deklaracje umieścić między znacznikiem .
Ramka
- Jeżeli linkiem jest obrazek, pojawia się wokół niego ramka. Całość nierzadko wygląda niezbyt przyjaźnie. Wystarczy dodać parametr BORDER=0, aby usunąć obramowanie.
- Link może wskazywać adres e-mail, a konkretnie jego naciśnięcie może uruchomić program umożliwiający Ci napisanie e-maila do wskazanej osoby. Wysłanie listu pod adres jez@z.pl uzyskamy wstawiając kod:
http://
- Jeżeli link odnosi do strony w internecie i nie zawiera na początku ciągu znaków http://, to deklaracja odnośnika jest błędna! Poprawna deklaracja linku przenoszącego na stronę www.z.pl wyglądałaby (wbrew pozorom, nie jest to takie oczywiste) następująco:
FTP
- Link może też wskazywać na plik do pobrania przez FTP. Plik /strona/index.htm z serwera FTP o adresie 123.456.789.1 i porcie FTP 100 przy loginie użytkownika: abc i jego haśle def uzyskasz wstawiając kod:
Nowe okno
- Link może spowodować otwarcie strony w nowym oknie przeglądarki. Aby to zrobić, do znacznika
Mrówki
- Standartowo po kliknięciu na odnośnik, pojawiają się mrówki (przerywane obramowanie). Usuniesz je poprzez dodanie do znacznika kodu: onFocus="blur(this)"
Style
Style CSS (Cascade Style Sheets) to jeden z najbardziej rewolucyjnych kroków w standardach WWW. Pozwalają one na bardzo łatwe i przejrzyste modyfikowanie własności obiektów znajdujących się na stronie (tekst, grafika, tabele, etc.). Jednorazowe zadeklarowanie stosowania stylu w pewnym rodzaju obiektu na stronie, daje możliwość każdorazowego wykorzystania takich własności obiektu, jeżeli tylko na stronie wystąpi. Jak więc wygląda to w praktyce?
W nagłówku strony (HEAD) Umieszczamy deklaracje:
Konstrukcja oznacza, że styl jest komentarzem (nie wpływa na zawartość strony i jest pomijany przez przeglądarke). Stosujemy ją tylko z tego powodu, że starsze przeglądarki nie akceptują styli.
Obiekt (lub ich lista) oznacza rodzaj obiektu na stronie. Przykładowo, jeżeli wpiszemy P, to każdy tekst mieszczący się między znacznikami będzie miał atrybuty określone między nawiasami klamrowymi. Jeżeli ustawimy konkretną wielkość czcionki, ustawienie w przeglądarce wielkości czcionki nie będzie już miało żadnego znaczenia - strona zawsze wyglądać będzie tak samo. Właśnie z tego powodu (oraz dzięki łatwości ich pisania), stosowanie styli stało się tak popularne i powszechne.
Oczywiście style można wstawić także na kilka innych sposobów. Możesz wstawić je tak, by działały na tylko jeden akapit, wtedy konstrukcja będzie wyglądać następująco:
Teraz cały akapit (ten jeden, a nie wszystkie), będą zawierały czcionki o wielkości 10 pikseli.
Jest jeszcze jednen sposób wstawiania styli, który ma bardzo powszechne zastosowanie. Mianowicie, można je wczytać z zewnętrznego pliku. Jest to o tyle wygodne, że jeżeli tworzysz witrynę składającą się z dziesięciu podobnych podstron, bezsensowne byłoby każdorazowe wstawianie styli. Problem ten zlikwidujesz tworząc plik o nazwie np. style.css (przyjęto, że pliki z definicjami styli mają rozszerzenie CSS), a następnie w nagłówku (HEAD) każdej ze stron umieścisz tylko jedną linię:
Oczywiście, musisz pamiętać o tym, aby plik style.css był w tym samym katalogu co strona, w której wpisywałeś deklarację wczytania styli. Oczywiście, możesz używać ścieżek względnych.
Poniżej obejrzyj podstawowe atrybuty, jakie możesz stosować przy wykorzystaniu styli:
Oczywiście, lista jest o wiele dłuższa. Mój wybór jest sybiektywny i zawiera jedynie te style, których sam często używam. Nie zapominaj jednak, że style są niezwykle ważnym elementem dla twórców stron, w miarę nabierania doświadczenia w tej materii sam docenisz potęgę tego narzędzia.
Skrypty
Skrypty, czyli krótkie programy umożliwiające Ci poszerzenie możliwości strony możesz pisać, gdy oczywiście znasz choć jeden ze stosownych języków (C, ActiveX, Java, JavaScript i inne). Ja jednak zakładam że nie znasz żadnego z nich i jesteś laikiem, dlatego podam Ci poniżej kilka ciekawych zastosowań JavaScript (jednego z języków, w którym można pisać skrypty, umieszczając ich tekst bezpośrednio w kodzie strony).
Rollover
- Podstawowym i bardzo często wykorzystywanym skryptem jest tzw. efekt rollover. Stosujemy go przy linkach, które reprezentowane są przez obrazki (pamiętamy, że dodajemy parametr BORDER=0). Zasada jego działania jest prosta. Jeżeli kursor znajduje się nad obrazkiem, wyświetlana zostaje jego alternatywna (podświetlona) wersja, a w przeciwnym wypadku jego wersja standardowa. Aby taki efekt uzyskać, tworzymy obrazek podświetlony i nazywamy go on.jpg oraz obrazek standardowy, nazywając go off.jpg. Oto przykład działania skryptu wraz z gotowym kodem HTML:
- tak wygląda uprzednio przygotowany plik. - tak wygląda uprzednio przygotowany plik. Aby obejrzeć efekt, najedź kursorem myszki na obrazek po lewej.Zegar
- Kolejnym skryptem, który może uatrakcyjnić Twoją stronę jest prosty zegar. Aby wstawić go na stronę, musisz część jego kodu wstawić do sekcji HEAD. Tak więc:
Do sekcji HEAD wstaw kod:
W miejsce, w którym ma pojawić się zegar w sekcji BODY, wstaw kod:
A oto i efekt:
Pasek statusu
- Najechanie na link (bez względu na to, czy reprezentuje go grafika, czy tekst), może skutkować zmianą treści paska statusu. Jeżeli pragniesz, by taki efekt uatrakcyjnił działanie linków na Twojej stronie, znacznik wzbogać o poniższe parametry:
Oto przykład działania takiego skryptu - najedź kursorem myszki na tekst 'Powróć' i obserwuj pasek statusu:
Powróć
Przycisk 'Powrót'
- Kolejnym, bardzo często stosowanym 'miniskryptem' jest bardzo typowe wykorzystanie JavaScript przy powracaniu do poprzedniej strony. Poprzez wstawienie zamiast nazwy pliku, kodu , po kliknięciu na link powrócisz do poprzednio oglądanej strony dokładnie tak, jakbyś nacisnął przycisk 'Wstecz' (Back) na przeglądarce. Jest to o tyle wygodne, że przeglądarka nie ściąga wtedy całego kodu z sieci, lecz ze swojego cache'u. Ponadto, powracasz w dokładnie to miejsce na poprzedniej stronie, z którego wszedłeś na stronę aktualną, a nie na początek strony poprzedniej. Nie będę podawał odrębnego przykładu, gdyż każdy przycisk 'Powrót' na tych stronach napisany jest właśnie w ten sposób.Ramki
Zapewne już wielokrotnie spotkałeś się z pojeciem ramek, podobnie jak i wielokrotnie widzieliście ich praktyczne zastosowanie na stronie www. Na czym polega więc istota ramek? Pokrótce, na podzieleniu ekranu na kilka części. Każda taka część ekranu, zwana ramką, będzie odrębnym plikiem HTML.
Uprzedzam, że ten dział będzie miał charakter nieco inny niż pozostałe działy tego dokumentu - jest on raczej skromnym kompedium dotyczącym zagadnienia ramek, a nie zbiorem trickow z nimi związanych.
Dlaczego?
Choć od ramek obecnie odchodzi się przy bardziej profesjonalnych stronach, za ich stosowaniem przemawia kilka istotnych argumentów:
- Funkcjonalność - częstym zastosowaniem ramek jest umieszczenie menu po jednej stronie ekranu. Nawigacja jest wtedy nieco ułatwiona, gdyż menu jest widoczne w każdej chwili i nie zmienia swojego położenia na ekranie.
- Estetyka - Może ten argument jest dosyć wyszukany, ale strony oparte na ramkach dają większe pole do popisu w zakresie grafiki (można pozwolić sobie na większy rozmiar obrazków ładowanych jednorazowo).
- Szybkość ładowania strony - co jest w zasadzie najistotniejszą przyczyną rozpowszechnienia się ramek. Strony ładują się szybko, gdyż każda ramka to odrębny plik, dla przykładu - ta strona jest wykonana w - ze względów objętościowych - w niezbyt optymalny sposób. Gdyby nagłówek był odrębną ramką, ładowana byłaby jedynie pozostała część strony (przykład nie jest najfortunniejszy, bo stałe menu w takiej sytuacji nie jest pożądane - zajmowałoby zbyt dużo miejsca na ekranie), a nagłówek nie.
Jak wyglądają ramki?
Jak więc wygląda przykładowy dokument z zastosowaniem ramek? Kliknij tutaj, aby obejrzeć efekt. I jak, podobało się? Być może przykład nie posiada wygórowanej grafiki, ale sam przyznasz że zastosowanie jest dobre zwłaszcza dla użytkowników internetu korzystających z wolnych łącz modemowych.
Jak widzisz, oglądanie efektu napisanej strony jest równoznaczne z każdorazowym klikaniem na link. Ja więc będę przedstawiać Ci zawartość ekranu tak, by nie było to konieczne (w formie zmniejszonej tabelki).
Parametry FRAMESET
FRAMESET powoduje podzielenie strony na ramki. Tak więc:
- COLS="x1,x2" - powoduje podzielenie ekranu na dwie kolumny, pierwsza o szerokości x1 pikseli, a druga o szerokości x2 pikseli. Można podzielić stronę na więcej kolumn, np. COLS="x1,x2,x3,x4".
- BORDER=x - powoduje, że obramowanie rozdzielające ramki będzie miało szerokość x pikseli.
- BORDERCOLOR=x - powoduje, że obramowanie rozdzielające ramki będzie koloru x.
- FRAMEBORDER=0 - dzięki temu parametrowi, obramowanie rozdzielające ramki nie będzie wyświetlane. W przeciwieństwie do 0, FRAMEBORDER="1 powoduje, że obramowanie zostanie wyświetlone (jest to standardowe ustawienie). Można też zamiast liczb stosować parametry: yes oraz no (polecam jednak liczby). UWAGA - aby usunąć obramowanie w IE, zalecane jest dodanie parametru FRAMESPACING=0
Wielkości ramek możemy podawać w jeden ze sposobów, opisanych na poniższych przykładach. Znaczenie poszczególnych parametrów oznaczyłem kolorami.
- Dzieli stronę na dwie kolumny o szerokości odpowiednio: 100 i 200 pikseli.
- Dzieli stronę na dwa wiersze o wysokości 10% i 90% wielkości ekranu.
- Dzieli stronę na dwie kolumny. Pierwsza o szerokości 100 pikseli, a druga, o szerokości pozostałej części ekranu. Gwiazdka to bardzo użyteczny parametr!
Parametry oczywiście można łączyć, np.:
- Ten dziwoląg wymyślony na potrzeby poradnika podzieliłby stronę na cztery kolumny, pierwsza będzie miała szerokość 10% ekranu, druga: 100 pikseli, czwarta: 50 pikseli, a trzecia - to, co zostanie.
Parametry FRAME
FRAME powoduje wstawienie ramki w miejsce podzielone znacznikiem FRAMESET. Każdą ramkę musisz w ten sposob wstawić, gdyż tylko w ten sposób możesz określić niezbędne parametry, o których dowiesz sie więcej w dalszej części poradnika.
Oto lista niezbędnych parametrów:
- SRC="plik.htm" - po załadowaniu strony ze szkieletem ramek, plikiem źródłowym dla tej ramki będzie plik plik.htm.
- NAME="nazwa" - ustalisz w ten sposób, że ta ramka będzie nosić nazwę nazwa. Jak bardzo jest to istotne, zauważysz później.
Oto lista pozostałych parametrów:
- SCROLLING="x" - dotyczy to możliwości użycia suwaków w ramce. X może przyjąć jedną z wartości: yes (suwaki będą wyświetlone), no (suwaki nie będa wyświetlone), auto (suwaki będą wyświetlone, jeśli plik nie mieści się cały w ramce).
- NORESIZE - jeżeli użyjesz tego parametru, obramowania nie będzie można przesuwać myszką (czyli skalowanie ramek zostanie wyłączone).
- MARGINWIDTH="x" i/lub MARGINHEIGHT="y" - powoduje wstawienie marginesu do ramki - MARGINWIDTH to margines lewy i prawy (równocześnie), a MARGINHEIGHT to margines górny i dolny.
Nawigacja w ramkach
Tworzenie stron z ramkami nie miałoby większego sensu, gdyby nie istniała tu sensowna nawigacja. Oczywiście, dotyczy to linków - których w większości przypadków uzywamy w nieco inny sposób. Przykładowo:
- Taki link, jest całkowicie poprawny. Jednak jeżeli jest on częścią strony otwartej w ramce, kliknięcie na odnośniku spowoduje otwarcie pliku nazwa.htm nie na pełnym ekranie, lecz w aktualnej ramce! Wyobraź sobie, że plik nazwa.htm zawiera kolejną deklarację ramek. Po kliknięciu ramki otworzą się w naszej ramce, po kliknięciu ponownym, otworzą się w aktualnej ramce poparzedniej ramki itd.
- Dzięki zastosowaniu parametru TARGET, poznałeś właśnie sens tworzenia ramek, prostej nawigacji i szybszego ładownia strony. W tym przykładzie, wszystkie ramki poza ramką strona, pozostaną bez zmian. Natomiast w ramce strona, otworzy się plik nazwa.htm. Dlatego, każda ramka, której treść będzie w jakikolwiek sposób zmieniana, musi mieć nadaną nazwę (o tym wyżej).
- Wpisanie parametru TARGET="_top" spowoduje, że link otworzy się na pełnym ekranie przeglądarki, a istniejące ramki zostaną usunięte.
- Wpisanie parametru TARGET="_parent" spowoduje, że link otworzy się w ramce, będącej ramką 'nadrzędną' w stosunku do ramki aktualnej.
- Ten parametr spowoduje wyświetlenie pliku nazwa.htm w nowym oknie przeglądarki.
Uwagi
Dozwolone jest zagnieżdżanie ramek. W praktyce wygląda to tak, że pomiędzy znacznikami FRAMESET, wstawiamy kolejne znaczniki FRAMESET. To pozwala nam na wielokrotne dzielenie ekranu na kolumny i wiersze.
Ramki znacznie poszerzają możliwości w tworzeniu stron WWW. Jednak należy tu zachować bezwzględny umiar, pamiętając o elementarnym poczuciu estetyki. Podobnie, przeładowanie stron ramkami sprawi, że strona stanie się nieczytelna, a nawigacja pomiędzy kolejnymi podstronami będzie znacznie utrudniona - a przecież jest to sprzeczne z podstawowymi założeniami specyfikacji. Zdecydowanie lepiej jest napisać stronę bez użycia ramek, a z użyciem np. odpowiednio określonych tabelek, a wtedy mimo nieco wolniejszego ładowania strony, będzie ona znacznie bardziej przyjazna dla użytkownika.
Strony godne polecenia
W tym dziale polecę Ci kilka stron o tematyce podobnej do mojej oraz kilka programów, które pomogą Ci przy tworzeniu stron.
Strony
* www.pckurier.pl - Znajdziesz tutaj Kurs Języka HTML autorstwa p. Pawła Wimmera.
* portal.republika.pl - Republika WWW - portal społeczności internetowych.
* wwwfaq.prv.pl - Webmasterstwo - Najczęściej Zadawane Pytania (FAQ).
Programy
* www.corel.com - Strona producenta jednego z najlepszych pakietów graficznych, Corel Draw. Pakiet nie jest dostępny do pobrania.
* www.adobe.com - Strona producenta jednego z najlepszych pakietów graficznych, Adobe PhotoShop. Stąd także nie pobierzesz pakietu.
* www.ipswitch.com - Strona producenta najpopularniejszego programu umożliwiającego skopiowanie strony na serwer - WS_FTP. Stąd ściągniesz jego darmową 30-dniową wersję.
* www.jgsoft.com - Stąd ściągniesz program EditPad. Jest to rozszerzona wersja notatnika, obsługująca m.in. wiele plików jednocześnie i pliki większe niż 64kB.
* www.ezhtml.bydnet.com.pl - Strona darmowej wersji ezHTML, ciekawego generatora stron. Stąd ściągniesz jego darmową wersję.
* www.editplus.com - Strona programu EditPlus 2, jednego z najwygodniejszych a zarazem najprostszych w użyciu tekstowych generatorów HTML (i nie tylko). Program godny polecenia, stąd ściągniesz jego darmową wersję.
Brak komentarzy:
Prześlij komentarz