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
FAQ
Szukaj
Użytkownicy
Grupy
Galerie
Rejestracja
Profil
Zaloguj się, by sprawdzić wiadomości
Zaloguj
Forum CronosGames Strona Główna
->
Tworzenie stron WWW
Napisz odpowiedź
Użytkownik
Temat
Treść wiadomości
Emotikony
Więcej Ikon
Kolor:
Domyślny
Ciemnoczerwony
Czerwony
Pomarańćzowy
Brązowy
Żółty
Zielony
Oliwkowy
Błękitny
Niebieski
Ciemnoniebieski
Purpurowy
Fioletowy
Biały
Czarny
Rozmiar:
Minimalny
Mały
Normalny
Duży
Ogromny
Zamknij Tagi
Opcje
HTML:
NIE
BBCode
:
TAK
Uśmieszki:
TAK
Wyłącz BBCode w tym poście
Wyłącz Uśmieszki w tym poście
Kod potwierdzający: *
Wszystkie czasy w strefie EET (Europa)
Skocz do:
Wybierz forum
Administracja
----------------
Regulamin forum
Ogłoszenia
FAQ
CronosGames
----------------
Cd-key'e
Filmy - Download
Webmajster
----------------
Upload
Tworzenie stron WWW
Linki
----------------
Stronki z grami i filmami do pobrania
Stronki z grami i filmami do pobrania
Cracki, seriale, spolszczenia...
Przegląd tematu
<table border="0" cellpadding="3" cellspacing="1" width="500" bgcolor="#636363" align="center"> <tr> <td width="22%" height="26" bgcolor="#0F0F0F" align="center"><span class="medium">Autor</span></td> <td bgcolor="#0F0F0F" align="center"><span class="medium">Wiadomość</span></td> </tr> <tr><td colspan="2" height="10" bgcolor="#000000" background="http://picsrv.fora.pl/Galaxian/images/announce_1a.gif"></td></tr> <tr> <td bgcolor="#0F0F0F" width="22%" align="left" valign="top"><span class="medium"><a name=""></a><b>Cronos160</span></td> <td bgcolor="#0F0F0F" height="28" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><img src="http://picsrv.fora.pl/Galaxian/images/icon_minipost.gif" width="12" height="9" alt="Post" title="Post" border="0" /><span class="small">Wysłany: Pią 23:56, 22 Cze 2007 Temat postu: Moja pierwsza strona WWW w 15 minut</span></td> </tr> <tr> <td colspan="2" height="1" bgcolor="#636363"></td> </tr> <tr> <td colspan="2"><span class="medium"> <br><span style="color: orange"><span style="font-size: 18px; line-height: normal">Moja pierwsza strona WWW w 15 minut</span></span> <br /> <br />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. <br /> <br />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. <br /> <br /><span style="font-weight: bold">Pierwsza strona</span> <br />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. <br /> <br />Dokument zawierający HTML powinien mieć rozszerzenie .html lub .htm - co sugeruje, że to jest strona <a href="http://WWW." target="_blank">WWW.</a> 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. <br /> <br />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. <br /> <br />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ł. <br /> <br />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ę. <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <br /><html> <br /><head> <br /> <meta http-equiv="content-type" <br /> content="text/html; charset=iso-8859-2"> <br /> <title>Tu wstaw tytuł strony</title> <br /></head> <br /><body> <br /> <br /> Moja pierwsza strona www! <br /> <br /></body> <br /></html> <br /> </span></td></tr></table> <br /> <br />Powyższy szablon to niezbędne minimum, więc powinien znajdować się w treści każdej strony <a href="http://WWW." target="_blank">WWW.</a> Są także strony, których budowa może być inna, ale dla większości wszystkich witryn w Internecie wspomniana konstrukcja jest standardem. <br /> <br />!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. <br /> <br />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ę... <br /> <br /><span style="font-weight: bold">Kilka zasad</span> <br /> <br />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>. <br /> <br />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: <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><A href="http://www.cdkeycronos.fora.pl/">odnośnik do CdKeyCronos</A> <br /> </span></td></tr></table> <br /> <br />Jeżeli dodasz jeszcze atrybut target, możesz określić okno, w którym otwarta zostanie strona <a href="http://WWW." target="_blank">WWW.</a> Niech to będzie nowe okno przeglądarki, a więc target będzie miał wartość _blank (blank to czyste, nowe okno). <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><A href="http://www.cdkeycronos.fora.pl/" target="_blank">Zobacz CdKeyCronos.pl</A> <br /> </span></td></tr></table> <br /> <br />Będzie to wyglądało tak: <br /><a href="http://www.cdkeycronos.fora.pl" target="_blank">http://www.cdkeycronos.fora.pl</a> <br /> <br />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: <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><a HrEf="http://www.cdkeycronos.fora.pl/" tarGET="_BLaNk">Zobacz cdkeycronos.fora.pl</a> <br /> </span></td></tr></table> <br /> <br />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). <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><center> <br /> <img src="../p/logo.gif"> <br /></center> <br /> </span></td></tr></table> <br /> <br />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ę: <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><center> <br /><a href="http://www.cdkeycronos.fora.pl" target="_blank"> <br /><img src="../p/logo.gif" width="120" height="60" border="0"></a> <br /></center> <br /> </span></td></tr></table> <br /> <br />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ę... <br /> <br />Kolejna istotna zasada to kolejność otwierania i zamykania poleceń. Nie powinno się robić czegoś takiego: <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><s>kilka <b>przykładowych</s> wyrazów</b> </span></td></tr></table> <br /> <br />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ść: <br /> <br /><table width="90%" bgcolor="#636363" cellspacing="1" cellpadding="3" border="0" align="center"><tr> <td bgcolor="#202020"><span class="medium"><b>Kod:</b><p><s>kilka</s> <b><s>przykładowych</s> wyrazów</b> <br /> </span></td></tr></table> <br /> <br />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ę... <br /> <br />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ą <a href="http://WWW." target="_blank">WWW.</a> <br /> <br />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ć!</span></td> </tr> </table> </td> </tr> </table>
fora.pl
-
załóż własne forum dyskusyjne za darmo
Powered by
phpBB
© 2004 phpBB Group
Galaxian Theme 1.0.2 by
Twisted Galaxy
Regulamin
FAQ
Szukaj
Użytkownicy
Grupy
Galerie
Rejestracja
Zaloguj się, by sprawdzić wiadomości
Zaloguj