Forum CronosGames Strona Główna
 Forum
¤  Forum CronosGames Strona Główna
¤  Zobacz posty od ostatniej wizyty
¤  Zobacz swoje posty
¤  Zobacz posty bez odpowiedzi
CronosGames
Cd-key'e , Gry , Filmy , Download
 FAQFAQ   SzukajSzukaj   UżytkownicyUżytkownicy   GrupyGrupy   GalerieGalerie  RejestracjaRejestracja 
 ProfilProfil   Zaloguj się, by sprawdzić wiadomościZaloguj się, by sprawdzić wiadomości   ZalogujZaloguj 
 
Moja pierwsza strona WWW w 15 minut

Napisz nowy temat   Odpowiedz do tematu    Forum CronosGames Strona Główna -> Tworzenie stron WWW Zobacz poprzedni temat :: Zobacz następny temat  
Moja pierwsza strona WWW w 15 minut
Autor Wiadomość
Cronos160
Administrator


Dołączył: 11 Mar 2007
Posty: 64
Przeczytał: 0 tematów

Pomógł: 1 raz
Ostrzeżeń: 0/5

PostWysł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 [link widoczny dla zalogowanych] 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ę.

Kod:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
  <meta http-equiv="content-type"
    content="text/html; charset=iso-8859-2">
  <title>Tu wstaw tytuł strony</title>
</head>
<body>

  Moja pierwsza strona www!

</body>
</html>



Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony [link widoczny dla zalogowanych] 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:

Kod:

<A href="http://www.cdkeycronos.fora.pl/">odnośnik do CdKeyCronos</A>



Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona [link widoczny dla zalogowanych] Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno).

Kod:

<A href="http://www.cdkeycronos.fora.pl/" target="_blank">Zobacz CdKeyCronos.pl</A>



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:

Kod:

<a HrEf="http://www.cdkeycronos.fora.pl/" tarGET="_BLaNk">Zobacz cdkeycronos.fora.pl</a>



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).

Kod:

<center>
  <img src="../p/logo.gif">
</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ę:

Kod:

<center>
<a href="http://www.cdkeycronos.fora.pl" target="_blank">
<img src="../p/logo.gif" width="120" height="60" border="0"></a>
</center>



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:

Kod:

<s>kilka <b>przykładowych</s> wyrazów</b>



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ść:

Kod:

<s>kilka</s> <b><s>przykładowych</s> wyrazów</b>



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ą [link widoczny dla zalogowanych]

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ć!



Post został pochwalony 0 razy
Powrót do góry Zobacz profil autora
Wyświetl posty z ostatnich:   

Napisz nowy temat   Odpowiedz do tematu    Forum CronosGames Strona Główna -> Tworzenie stron WWW Wszystkie czasy w strefie EET (Europa)
Strona 1 z 1

 
Skocz do:  
 
Możesz pisać nowe tematy
Możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach

 
fora.pl - załóż własne forum dyskusyjne za darmo

Powered by phpBB © 2004 phpBB Group
Galaxian Theme 1.0.2 by Twisted Galaxy