Tworzenie Strony WWW

Tworzenie własnej strony
Jak stworzyć własną stronę w Internecie?

Wbrew pozorom nie jest to zadanie wymagające jakiejś
ogromnej wiedzy i magicznych umiejętności.
Wystarczy znać składnię kilkunastu poleceń języka HTML.
Podstawy
Tworzenie strony warto zacząć od oznaczenia jej jako
dokument HTML. W tym celu wpisujemy parę poleceń:
<html> </html>
Polecenie <html> pojawia się w pierwszej linii dokumentu i informuje
przeglądarkę, Ŝe ma do czynienia z językiem HTML.
Polecenie </html> kończy działanie . Wpisywane jest w ostatniej linii
dokumentu.
Wszystko, co będziemy dalej wpisywali, umieszczamy pomiędzy

tymi dwoma poleceniami.
KaŜdy dokument HTML składa się z nagłówka i części głównej,

więc kolejną czynnością moŜe być zaznaczenie nagłówka dokumentu.
Wpisujemy parę poleceń:
<head> </head>
Polecenie <head> definiuje początek nagłówka dokumentu.
KaŜdy dokument HTML dzieli się na nagłówek (head) i część główną
(body).
W nagłówku umieszczany jest zwykle tytuł dokumentu i informacje o
dokumencie, ukryte w komentarzach. Natomiast polecenie </head>
definiuje koniec nagłówka.
Aby utworzyć część główną dokumentu wpisujemy parę

poleceń:
<body> </body>
Polecenie <body> definiuje początek części głównej dokumentu.
W części głównej znajduje się tekst, grafika, przejścia do innych
dokumentów.
Polecenie </body> definiuje koniec części głównej.
W nagłówku dokumentu wprowadzamy teraz linię definiującą

tytuł dokumentu:
<title> </title>
Pomiędzy <title> a </title> moŜemy wpisać tytuł naszej strony, na
przykład Witam na stronie ZSAiO !.
Para poleceń <title> </title> pozwala zdefiniować tytuł dokumentu.

Tytuł nie jest wyświetlany w samym dokumencie, ale na belce tytułu
przeglądarki, obok jej nazwy.
W tekście tytułu nie powinno być Ŝadnych poleceń HTML.
Nie moŜe być teŜ specjalnie długi, najwyŜej kilka wyrazów, do trzydziestu
znaków.
Wprowadzając polecenia oznaczenia dokumentu jako HTML, zaznaczenia

nagłówka dokumentu, zaznaczenia części głównej dokumentu i tytułu
stworzyliśmy podstawową strukturę dokumentu World-Wide
Web, fundament, na którym będzie zbudowana cała zawartość. Oto on:
<html>
<head>
<title>Witam na stronie ZSAiO !</title>
</head>
<body>
</body>
</html>
W nagłówku dokumentu, pod tytułem, moŜemy jeszcze

wprowadzić linie:





Polecenie komentarza  pozwala wprowadzić informacje o

dokumencie, które nie będą wyświetlane na ekranie przeglądarki.
W głównej części dokumentu wprowadzamy linię:
<h1>Strona ZSAiO</h1>
Para poleceń <h1> </h1> pozwala zaznaczyć tekst umieszczony
pomiędzy nimi jako nagłówek pierwszego poziomu -
najwaŜniejszy.
Nagłówek ten jest uŜywany do wyświetlania tytułów dokumentów.
Tytuł dokumentu i tytuł mogą, ale nie muszą być takie same . Tytuł
dokumentu wyświetlany jest przy pomocy polecenia <title> na belce
tytułu przeglądarki, a tytuł - przy pomocy polecenia <h1> wewnątrz
dokumentu. W naszym przykładzie są róŜne, tytuł dokumentu jest
rodzajem przywitania, a tytuł - juŜ bardziej formalnym rozpoczęciem
treści strony.
Pod tytułem wprowadzamy polecenie
<hr>
Polecenie <hr> pozwala narysować poziomą linię, uŜywaną do
rozdzielenia fragmentów tekstu.
W naszej przykładowej stronie uŜyjemy go dwukrotnie, między tytułem a
tekstem oraz przed adresem do korespondencji.
Po drugiej linii rozdzielającej <hr> wprowadzamy linię:
<a href="mailto:antek@tlen.pl">Antoni Jąkalski</a>

Nie wchodząc tutaj w szczegóły objaśniania poleceń tu uŜytych i ich
składni, linia ta zostanie pokazana jako odnośnik, który jest naszym
podpisem i adresem jednocześnie: wyświetlane jest imię i nazwisko, a po
wskazaniu moŜna wysłać do nas elektroniczny list, juŜ prawidłowo
zaadresowany.
Czytelnicy naszej strony mogą w ten sposób wyrazić swoją opinię na

temat nas czy naszej strony, pozdrowić nas, pochwalić czy zganić,
nawiązać znajomość czy jeszcze tysiąc róŜnych rzeczy, które robi się przy
pomocy poczty elektronicznej.
Tekst - treść naszej strony - będziemy wpisywać pomiędzy
liniami rozdzielającymi <hr>.
To, co zrobiliśmy do tej pory, moŜe znaleźć się w kaŜdym dokumencie

HTML. MoŜna potraktować to jako szablon dla typowego dokumentu.
A oto jak powinien ów szablon wyglądać:
<html>
<head>


</head>
<body>
<h1>Strona ZSAiO </h1>
<hr>
…tutaj będzie tekst strony …
<hr>
</body>
</html>
Zawartość własnej strony
Do dobrego zwyczaju tworzenia własnych stron naleŜy umieszczanie na

początku dokumentu grafiki.
MoŜe to być nasze zdjęcie, karykatura czy szkic albo inna interesująca i
oryginalna grafika.
Trzeba tu pamiętać o prawach autorskich, a jeŜeli juŜ nie zwracamy
na nie uwagi, to chociaŜ o dobrym smaku. Zeskanowane zdjęcie
bałwanka z podpisem: To ja! jest dobrym Ŝartem raz i na chwilę, ale nie
powielane tysiące razy.
Przed tytuł, oznaczony poleceniem <h1> </h1>, wprowadzamy
linię:
<img src="grafika.gif" alt="Witam!">

Polecenie <img src> znajduje plik graficzny o podanej nazwie, w naszym
przypadku o nazwie grafika.gif i wyświetla go w przeglądarce. Gdy
grafika nie moŜe być pokazana, w jej miejsce wyświetlany jest tekst
podany po alt.
Nasza grafika nie powinna być duŜa - zarówno w sensie

wielkości pliku (od 5 KB do 20 KB) jak i wymiarów (około
200x200 punktów), by nie ładowała się zbyt długo i mieściła na
ekranie.
Na własnej stronie podajemy zwykle kilka informacji o sobie. Wpisujmy

je jako zwykły tekst.
JeŜeli chcemy podzielić tekst na akapity, to na początku kaŜdego
akapitu wstawiamy polecenie <p>, a na końcu - polecenie </p>:
<p>Pierwszy akapit</p>
<p>Drugi akapit</p>
Przeglądarki nie stosują wcięć w pierwszej linii akapitu, ale wstawiają
pustą linię po tekście akapitu. Jest to bardzo angielski styl formatowania
tekstu, ale trzeba przyznać, Ŝe lepiej się wtedy czyta tekst na ekranie.
Gdy mamy kilka krótkich informacji, to zamiast podziału na akapity

moŜemy zastosować podział na linie i zastosować w tym celu
znacznik <br>:
Pierwsza linia<br>
Druga linia<br>
Do wyróŜnienia fragmentów tekstu słuŜą polecenia
wytłuszczenia <b> i pochylenia tekstu: <i>
<b>wytłuszczenie</b>
<i>pochylenie</i>
Jak moŜe wyglądać taka notatka o sobie? np:
<p>Cześć! Mam szesnaście lat i juŜ potrafię surfować po sieci. Nie ma w

tym nic dziwnego, bo nie jestem człowiekiem, ale wirtualną osobowością
stworzoną w... hm, chyba nie wolno mi pisać gdzie... ale co tam: w
Instytucie Podstawowych Badań Cybernetycznych.</p>
<p>Dopiero uczę się róŜnych zwyczajów internetowych. Na początku

stworzyłem sobie adres pocztowy - <b>antek@tlen.pl</b>. Ładny,
prawda? Tak naprawdę, to jest to adres <b>antek@ipbc.edu.pl</b>,
tylko tak sprytnie wymyśliłem, Ŝeby nikt nie wiedział, do kogo naprawdę
pisze. Okazuje się, Ŝe do stworzenia adresu trzeba nie tylko zrobić sobie
skrzynkę pocztową, ale i cały urząd pocztowy, który nazywa się domeną
albo coś w tym rodzaju, a później poinformować róŜne waŜne serwery,
Ŝe mój urząd istnieje i właśnie tak się nazywa. Na początku niektóre
serwery nie chciałby się na to zgodzić bez poinformowania swoich
administratorów, ale gdy zagroziłem, Ŝe będę im wysyłał Ŝyczenia z
okazji kaŜdego setnego uderzenia ich zegara, to dały się przekonać. No i
dobrze, bo niektóre chodzą trochę nieregularnie i trzeba by co chwilę
sprawdzać, jak to u nich jest z taktem... nie, chyba z taktowaniem.</p>
<p>Teraz zabrałem się za tworzenie własnej strony World-Wide Web (co

po angielsku nazywa się chyba <i>home page</i>)... </p>
<p>Hm... Mój administrator wysłał mi maila, Ŝe nie moŜna pisać

"surfować", bo to nie po polsku. Dlaczego nie, skoro wszyscy tak mówią?
A na co nam to zmienić? Na "pająkować"? Muszę się nad tym
zastanowić. <p>
Lepiej, by tekst składał się z krótszych akapitów, po dwa-trzy

zdania - lepiej się go wtedy czyta na ekranie. Czasem jednak moŜna od
tego odejść, pozostając przy logicznym podziale na akapity, gdzie kaŜdy
akapit dotyczy innej sprawy, jak to zrobił Antoś w nieco moŜe przydługim
akapicie o swoim adresie pocztowym.
Jeśli nie mamy zbyt wiele do powiedzenia, zapewne to, co mamy do

powiedzenia, zmieści się na jednej stronie. Jeśli jednak jest tego więcej,
warto rozdzielić informacje na kilka dokumentów i ułoŜyć je w sensowną
strukturę. Pierwsza strona w takim układzie staje się wstępem i spisem
treści, prowadzącym do innych stron. Pozostałe strony mogą dotyczyć
projektów, nad którymi pracujemy.
Wielu uŜytkowników World-Wide Web buduje sobie własne
spisy ciekawych miejsc - gdzie moŜna sobie poczytać o muzyce czy
komputerach, skąd ściągnąć najnowsze wersje przeglądarek, a skąd
interesujące zdjęcia. Jak tak spis moŜe wyglądać? Zacznijmy od tytułu,
mniejszego nieco od tytułu całej strony:
<h2>Moje ciekawe miejsca</h2>
...a za nim wpiszmy kilka adresów, wraz komentarzami:
<img src="http://moszczanica.pl/images/avatars/000%5B1%5D.gif"
alt=" * "><a href="http://www.moszczanica,pl/">ZSAiO</a> - nasza
szkoła <br>
<img src="http://moszczanica.pl/images/avatars/000%5B1%5D.gif"
alt=" * "><a href="http://www.eszkola.ovh.org/">eszkola</a> -
ciekawe rzeczy o komputerach<br>
Polecenie <a href=" "> </a> słuŜy do zbudowania odnośnika

do innego dokumentu.
Pomiędzy cudzysłowami wpisujemy internetowy adres dokumentu.
Pomiędzy <a href=" "> i </a> podajemy opis naszego odnośnika.
Zwykle wpisuje się tutaj tytuł dokumentu, do którego przechodzimy.
Opis ten będzie naszą odskocznią; przeglądarka wyróŜnia go innym
kolorem i podkreśleniem, wystarczy wskazać go myszką, by przejść do
danego dokumentu. Ostatnio wykorzystane odnośniki odznaczane są
jeszcze innym kolorem.
Nasz spis treści składa się z odnośników, które tworzą pewną listę
elementów. MoŜna dla ich wyróŜnienia stworzyć w HTML listę,
numerowaną lub nienumerowaną czy teŜ nieuporządkowaną, gdzie kaŜdy
element listy wyróŜniony jest "bombką" (bullet). Bardziej efektownym
rozwiązaniem jest dodanie przed kaŜdy element kolorowej ikonki zamiast
numerka czy "bombki". Wtedy przed kaŜdym elementem listy zostanie
wprowadzone polecenie sięgające po grafikę, która ma nam słuŜyć za
"bombkę":
<img
src="http://moszczanica.pl/images/avatars/000%5B1%5D.gif
" alt="-">
Opcja alt pozwala nam w razie potrzeby zamiast grafiki pokazać
gwiazdkę, równieŜ dobrze sprawiający się jako wyróŜnik elementu listy.
Jak wygląda po tych wszystkich zabiegach nasza strona? Oto jego kod
źródłowy:
<html>
<head>


</head>
<body>
<h1>Strona ZSAiO </h1>
<hr>
<p>Cześć! Mam szesnaście lat i juŜ potrafię surfować po sieci.

Nie ma w tym nic dziwnego, bo nie jestem człowiekiem, ale
wirtualną osobowością stworzoną w... hm, chyba nie wolno mi
pisać gdzie... ale co tam: w Instytucie Podstawowych Badań
Cybernetycznych.</p>
<p>Dopiero uczę się róŜnych zwyczajów internetowych. Na

początku stworzyłem sobie adres pocztowy -
<b>antek@tlen.pl</b>. Ładny, prawda? Tak naprawdę, to jest
to adres <b>antek@ipbc.edu.pl</b>, tylko tak sprytnie
wymyśliłem, Ŝeby nikt nie wiedział, do kogo naprawdę pisze.
Okazuje się, Ŝe do stworzenia adresu trzeba nie tylko zrobić
sobie skrzynkę pocztową, ale i cały urząd pocztowy, który
nazywa się domeną albo coś w tym rodzaju, a później
poinformować róŜne waŜne serwery, Ŝe mój urząd istnieje i
właśnie tak się nazywa. Na początku niektóre sewery nie
chciałby się na to zgodzić bez poinformowania swoich
administratorów, ale gdy zagroziłem, Ŝe będę im wysyłał
Ŝyczenia z okazji kaŜdego setnego uderzenia ich zegara, to dały
się przekonać. No i dobrze, bo niektóre chodzą trochę
nieregularnie i trzeba by co chwilę sprawdzać, jak to u nich jest
z taktem... nie, chyba z taktowaniem.</p>
<p>Teraz zabrałem się za tworzenie własnej strony World-
Wide Web (co po angielsku nazywa się chyba <i>home
page</i>)... </p>
<p>Hm... Mój administrator wysłał mi maila, Ŝe nie moŜna

pisać "surfować", bo to nie po polsku. Dlaczego nie, skoro
wszyscy tak mówią? A na co nam to zmienić? Na "pająkować"?
Muszę się nad tym zastanowić. <p
<h2>Moje ciekawe miejsca</h2>
<img
" alt=" * "><a
href="http://www.moszczanica.pl/">ZSAiO</a> - nasza
szkoła <br>
<img
" alt=" * "><a
href="http://www.eszkola.ovh.org/">eszkola</a> - ciekawe
rzeczy o komputerach<br>
<hr>
</body>
</html>
Jeśli nie zapisywaliśmy w edytorze wszystkiego na bieŜąco, to wystarczy

teraz zaznaczyć go i przenieść do edytora, zapisać i obejrzeć na ekranie
przeglądarki.
Oczywiście musimy przygotować sobie pliki grafika.gif i bombka.gif,
Ŝeby wszystko wyglądało porządnie. Rysunek bombka.gif powinien nie
być zbyt duŜy. - o wysokości tekstu.
Własna strona internetowa juŜ gotowa! Strona ta jest

oczywiście bardzo, bardzo prosta, nie wykorzystuje nowszych
poleceń HTML, tabel, formularzy, aktywnych czy animowanych
grafik, programów JavaScript i VB Script, apletów Javy... to
wszystko jeszcze przed nami.
NajwaŜniejsze elementy
Oto znacznie skrócona, pozbawiona komentarzy i szerszych
przykładów lista poleceń, które przydadzą się nam przy
tworzeniu własnej strony, coś w rodzaju ściągawki - punkt
wyjścia dla własnych eksperymentów.
WyróŜnienie dokumentu jako HTML: <html> </html>

Zaznaczenie nagłówka dokumentu: <head> </head>
Zaznaczenie części głównej dokumentu: <body> </body>
Tytuł dokumentu: <title> </title>
Komentarz: 
Style nagłówków <h1> </h1> (dla tytułu), <h2> </h2> (dla
podtytułów)
Linia rozdzielająca: <hr>
Adres poczty elektronicznej: <a href="mailto:"> </a>
Wprowadzanie grafiki: <img src=" " alt=" ">
Znaki wyróŜniające akapit: <p> </p>
Znak końca linii: <br>
Wytłuszczenie tekstu: <b> </b>
Pochylenie tekstu: <i> </i>
Odnośnik do innego dokumentu: <a href=" "> </a>

Tworzenie Strony WWW

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tworzenie Strony WWW

Uploaded by

Copyright:

Available Formats

Tworzenie własnej strony

Jak stworzyć własną stronę w Internecie?

Wszystko, co będziemy dalej wpisywali, umieszczamy pomiędzy

KaŜdy dokument HTML składa się z nagłówka i części głównej,

Aby utworzyć część główną dokumentu wpisujemy parę

W nagłówku dokumentu wprowadzamy teraz linię definiującą

Para poleceń <title> </title> pozwala zdefiniować tytuł dokumentu.

Wprowadzając polecenia oznaczenia dokumentu jako HTML, zaznaczenia

W nagłówku dokumentu, pod tytułem, moŜemy jeszcze

Polecenie komentarza  pozwala wprowadzić informacje o

Pod tytułem wprowadzamy polecenie

Po drugiej linii rozdzielającej <hr> wprowadzamy linię:

<a href="mailto:antek@tlen.pl">Antoni Jąkalski</a>

Czytelnicy naszej strony mogą w ten sposób wyrazić swoją opinię na

To, co zrobiliśmy do tej pory, moŜe znaleźć się w kaŜdym dokumencie

A oto jak powinien ów szablon wyglądać:

…tutaj będzie tekst strony …

Zawartość własnej strony

Do dobrego zwyczaju tworzenia własnych stron naleŜy umieszczanie na

<img src="grafika.gif" alt="Witam!">

Nasza grafika nie powinna być duŜa - zarówno w sensie

Na własnej stronie podajemy zwykle kilka informacji o sobie. Wpisujmy

Gdy mamy kilka krótkich informacji, to zamiast podziału na akapity

<p>Cześć! Mam szesnaście lat i juŜ potrafię surfować po sieci. Nie ma w

<p>Dopiero uczę się róŜnych zwyczajów internetowych. Na początku

<p>Teraz zabrałem się za tworzenie własnej strony World-Wide Web (co

<p>Hm... Mój administrator wysłał mi maila, Ŝe nie moŜna pisać

Lepiej, by tekst składał się z krótszych akapitów, po dwa-trzy

Jeśli nie mamy zbyt wiele do powiedzenia, zapewne to, co mamy do

<h2>Moje ciekawe miejsca</h2>

...a za nim wpiszmy kilka adresów, wraz komentarzami:

Polecenie <a href=" "> </a> słuŜy do zbudowania odnośnika

<p>Cześć! Mam szesnaście lat i juŜ potrafię surfować po sieci.

<p>Dopiero uczę się róŜnych zwyczajów internetowych. Na

<p>Hm... Mój administrator wysłał mi maila, Ŝe nie moŜna

<h2>Moje ciekawe miejsca</h2>

Jeśli nie zapisywaliśmy w edytorze wszystkiego na bieŜąco, to wystarczy

Własna strona internetowa juŜ gotowa! Strona ta jest

WyróŜnienie dokumentu jako HTML: <html> </html>

You might also like