 Wysłany: Pią 23:56, 22 Cze 2007 Temat postu: Moja pierwsza strona WWW w 15 minut |
|||||||||
| Moja pierwsza strona WWW w 15 minut Tworzenie stron WWW jest zajęciem w miarę prostym i bardzo przyjemnym. Podstaw języka HTML można nauczyć się w kilka godzin, a dosłownie po chwili zbudować prostą witrynę. Trzeba tylko pamiętać o przestrzeganiu kilku podstawowych zasad. Aby wprawnie posługiwać się językiem HTML niezbędna jest praktyka. Identyczną stronę można wykonać na bardzo wiele sposobów, więc tylko doświadczony webmaster będzie w stanie stworzyć ją lepiej, szybciej, tak aby dobrze prezentowała się identycznie w każdej przeglądarce.Polecam więc eksperymentowanie, testowanie,sprawdzanie efektów w różnych przeglądarkach i ciągłe podnoszenie swoich umiejętności. Pierwsza strona Aby tworzyć strony WWW nie musisz mieć dostępu do Internetu. Wystarczy przeglądarka stron WWW zainstalowana Twoim komputerze. Stronę musisz zapisać w zwykłym pliku tekstowym i odpowiednio go nazwać. Do pisania stron WWW nadaje się każdy, nawet najbardziej banalny edytor tekstowy - od prostego Notatnika w systemie Windows czy Pico w Unixie, aż do specjalistycznych edytorów HTML. Dokument zawierający HTML powinien mieć rozszerzenie .html lub .htm - co sugeruje, że to jest strona WWW. Przyjęło się, że główna strona serwisu ma zwykle nazwę index.html (czasem może się jednak nazywać inaczej). Pozostałe strony, do których można dotrzeć z index.html mogą mieć dowolne nazwy. Niech będą jednak czytelne i niezbyt długie. W nazwach stron ważna jest wielkość liter - najlepiej stosować tylko małe litery bez polskich znaków. Strona Kontakt.html nie jest tą samą stroną co kontakt.html (zwróć uwagę na wielkość pierwszej litery K). Nie powinno się też używać polskich znaków w nazwach stron, uważaj też na znaki specjalne (np. %^&#$@). Nie stosuj też spacji (odstępów). Lepiej nadać nazwę: pokarm-dla-zolwia.html niż pokarm dla żółwia.html. Każda strona ma pewne elementy wspólne. Musisz poinformować przeglądarkę, że ma do czynienia z językiem HTML, a nie zwykłym tekstem. W dodatku napisanym z polskimi znakami w standardzie ISO8859-2. Warto też nadać stronie tytuł. Oto szablon każdej strony WWW, który możesz skopiować i modyfikować w zależności od dalszych potrzeb. Mając prostego "gotowca" szybko stworzysz dowolną inną stronę.
Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony WWW. Są także strony, których budowa może być inna, ale dla większości wszystkich witryn w Internecie wspomniana konstrukcja jest standardem. !DOCTYPE określa wariant języka HTML (Transitional w wersji 4.0 jest stosowany najczęściej). Następnie informujemy przeglądarkę, że jest to dokument HTML umieszczając całą treść dokumentu w parze elementów: <HTML> i </HTML>. Każda strona ma nagłówek znajdujący się pomiędzy elementami <HEAD> i </HEAD>. Umieszczamy w nim tytuł strony w elementach <TITLE> i </TITLE> i informację o kodowaniu polskich znaków w ISO-8859-2. Po nagłówku znajduje się część, którą widzimy w oknie przeglądarki - określają ją elementy <BODY> i </BODY>. Tu znajduje się tekst, grafika, odnośniki, tabele i inne rzeczy. Skopiuj zawartość do edytora tekstu, zapisz wszystko na dysku pod nazwą index.html i zobacz jak wygląda strona w przeglądarce. W zasadzie już masz swoją stronę... Kilka zasad Jak widzisz, większość elementów HTML to pary poleceń. Jest element otwierający i zamykający, np. tytuł został otoczony parą <TITLE> i </TITLE>. Dzięki temu przeglądarka wie, co ma wyświetlić na belce przeglądarki jako tytuł strony. Jeżeli w treści strony jakiś wyraz otoczysz parą elementów <B> i </B> zostanie on pogrubiony (B to skrót od angielskiego słowa Bold). Znając pary poleceń możesz z tekstem robić dowolne rzeczy. Tak na prawdę nie musisz uczyć się par - wystarczy pamiętać nazwę polecenia, bo konstrukcja jest zwykle taka sama: <POLECENIE> ... </POLECENIE>. Polecenia (w kursie sąto elementy HTML) mogą mieć jeszcze atrybuty. Oznacza to, że możesz zmieniać właściwości tych poleceń. Jeżeli chcesz utworzyć połączenie z inną stroną WWW wystarczy, że do polecenia A dohref określadasz atrybut jący adres innej strony. W praktyce wygląda to następująco:
Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona WWW. Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno).
Będzie to wyglądało tak: http://www.cdkeycronos.fora.pl Polecenia i atrybuty mogą być pisane dużymi lub małymi literami, nie ma to znaczenia. Wyłącznie na potrzeby kursu stosuję duże litery dla elementów (poleceń), a małe litery dla atrybutów ponieważ taki sposób jest bardziej czytelny. Ale równie dobrze powyższy odnośnik mógłby zostać zapisany tak:
Pewnie domyślasz się, że aby wstawić na stronę jakiś obrazek, trzeba użyć elementu odpowiedzialnego za grafikę i wskazać mu, który obrazek ma wstawić. Element IMG odpowiada za obrazki (IMG to skrót od słowa Image). Ma wiele atrybutów, a jednym z nich jest src (czyli source - źródło obrazka). Użyjmy ich więc... Niech dodatkowo obrazek będzie na środku strony (polecenie centrujące nazywa się CENTER).
I oto mamy obrazek. Pamiętaj jeszcze, że wartości atrybutów powinno się umieszczać w cudzysłowach. Dzięki temu przeglądarka może je prawidłowo zidentyfikować. Pewnie chcesz mieć "klikalny" obrazek, który jest odnośnikiem do innego serwisu? Połączmy więc dotychczasową wiedzę:
Nie jest to skomplikowane, choć pojawiły się kolejne atrybuty: width to szerokość obrazka, height określa wysokość, a border="0" powoduje, że znika ramka oznaczająca, że obrazek jest odnośnikiem. Nie chcę ramki, bo tylko szpeci obraz - dlatego prawie zawsze element IMG na stronach WWW ma wyłączoną ramkę... Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego:
Element S definiuje przekreślenie, ale zanim został on zamknięty, otworzyłem element B (pogrubienie), a następnie zamknąłem S zamiast B. Są one założone "na krzyż". Wygląda to mało czytelnie i nie jest zgodne z regułami, pomimo tego, że przeglądarka pokazała efekt dobrze... Oto prawidłowa kolejność:
Wiem, że trzeba było użyć kilka razy S, ale opłaciło się. Przykład jest bardziej czytelny. W skomplikowanych dokumentach ma to ogromne znacznie. Dlatego podczas tworzenia strony zwracaj uwagę na jej czytelność. Nie przez przypadek wiele autorów robi charakterystyczne wcięcia w kodzie HTML. Ułatwia to odczytanie kodu po latach, gdy sam autor nie pamięta co miał na myśli robiąc stronę... Zauważ, że już potrafisz tworzyć odnośniki i wstawiać grafikę. Każdy akapit (blok tekstu) rozpoczyna się od polecenia P (akurat on nie wymaga stosowania elementu zamykającego, choć warto go użyć). Te informacje wystarczają aby pokusić się o eksperymenty z Twoją pierwszą stroną WWW. Podczas tworzenia stron WWW trafisz też na wiele niedogodności. Ponieważ istnieje kilka przeglądarek stron WWW, niektóre polecenia mogą w nich dawać odmienny efekt. Czasem strona z niezamkniętymi poleceniami lub tabelami (co jest oczywiście błędem) będzie wyglądała poprawnie pod Internet Explorerem. Zdarzy się i tak, że poprawna strona, wykorzystująca standard języka HTML zalecany przez organizację W3C mimo wszystko nie będzie dobrze pokazywana przez przeglądarkę Netscape. Ludzie będą chcieli stronę drukować, wysyłać mailem, zapisywać na dysku. O wszystkich potrzebach użytkownika musisz pomyśleć! |
|||||||||