Elementarz09 MI 11 2004

background image

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

INTERNET.listopad.2004

74

podstawy

Dziêki lekturze poprzednich odcinków naszego
elementarza Czytelnicy zdobyli wiedzê niezbêdn¹
do szeroko pojêtego u¿ytkowania globalnej sieci.
Ale korzystanie z istniej¹cych zasobów to nie wszystko,
ka¿dy z nas mo¿e bowiem wspó³tworzyæ Internet, czyli zmieniæ siê z biernego u¿ytkownika
w aktywnego kreatora. Najprostszym sposobem jest uruchomienie w³asnej strony WWW.

Elementarz

Internetu

Czêœæ 9:

stronê WWW ka¿dy mo¿e mieæ

Ka¿da strona WWW jest w rzeczywistoœci zwyk³ym dokumentem tek-
stowym, w którym w³aœciwa treœæ (tekst, obrazki itd.) przeplata siê
z poleceniami jêzyka HTML. Polecenia HTML nazywane s¹ znaczni-
kami lub tagami (ang. tags), zaœ skrót HTML rozwija siê jako Hyper-
Text Markup Language (jêzyk znaczników hipertekstu) i oznacza spe-
cjalny jêzyk opisu dokumentu. Dodajmy od razu dla œcis³oœci, ¿e cho-
dzi o opis wygl¹du dokumentu, czyli np. formatowania tekstu, rozmiesz-
czenia poszczególnych elementów itd.

Gdy ogl¹damy za pomoc¹ przegl¹darki (np. Internet Explorera) stro-

ny WWW w Internecie, nie widzimy oczywiœcie znaczników HTML,
a jedynie efekty ich dzia³ania. Znaczniki pe³ni¹ bowiem rolê rozkazów,
dziêki którym przegl¹darka „wie” jak ma wyœwietlaæ na ekranie po-
szczególne elementy strony. Np. raz tekst bêdzie wyœwietlany ma³¹
czcionk¹, innym razem du¿¹, raz obrazek pojawi siê z lewej strony,
innym razem z prawej itd. Znaczników jest doœæ du¿o, a ka¿dy ma œci-
œle okreœlone dzia³anie.

Przyk³adowa, bardzo prosta strona WWW wygl¹da np. tak:

<HTML>
<HEAD>
<TITLE>Moja strona WWW</TITLE>
</HEAD>
<BODY>
<H1>Moja strona WWW</H1>
<P>Wreszcie mam swoj¹ stronê w sieci.</P>
</BODY>
</HTML>

Gdybyœmy to przepisali za pomoc¹ zwyk³ego notatnika Windows,

zapisali na dysku w pliku o dowolnej nazwie z rozszerzeniem .htm lub
.html (takie rozszerzenie maj¹ zwyczajowo strony WWW, czyli inaczej
mówi¹c pliki HTML), np. test.html, i otworzyli w przegl¹darce, na-
szym oczom ukaza³aby siê strona jak na ilustracji na nastêpnej stronie.

W przyk³adzie od razu widaæ charakterystyczn¹ dla jêzyka HTML

strukturê, która polega na tym, ¿e znaczniki wystêpuj¹ w parach. Pierw-
szy znacznik to znacznik otwieraj¹cy, drugi zamykaj¹cy. W zapisie ró¿-
ni¹ siê tylko znakiem ukoœnika, np.:

<H1> ... </H1>

Zasiêg dzia³ania znaczników jest wiêc œciœle okreœlony. Warto wie-

dzieæ, ¿e istnieje kilka znaczników, które wystêpuj¹ tylko w jednej po-
staci, tzn. nie wymagaj¹ zamkniêcia. S¹ to np. <BR> czy <HR>.

Ponadto poszczególne znaczniki mog¹ byæ zagnie¿d¿one, czyli nie-

jako wewn¹trz jednego mo¿e siê znaleŸæ kilka innych. W powy¿szym
przyk³adzie znaczniki <H1> ... </H1> i <P> ... </P> s¹ zagnie¿d¿one
w znaczniku <BODY> ... </BODY>, jak równie¿ znacznik <TITLE>
... </TITLE> w znaczniku <HEAD> ... </HEAD>.

W powy¿szej ramce zaprezentowano kilkanaœcie najczêœciej u¿y-

wanych znaczników i opisano ich dzia³anie.

Niektóre znaczniki maj¹ dodatkowe parametry, tzw. atrybuty. Okre-

œlaj¹ one dok³adnie ró¿ne aspekty formatowania. Przyk³adowo:

<P align=”center”>Tekst na œrodku.</P>

UWAGA!

Wszystkie poprzednie części

tego kursu są na płycie CD!

Co to jest strona WWW? Co to jest HTML?

1

Najczêœciej u¿ywane znaczniki HTML

<HTML></HTML> otwiera i zamyka ca³y dokument HTML; znacz-

nik obowi¹zkowy

<HEAD></HEAD> sekcja nag³ówka

<BODY></BODY> definiuje tzw. cia³o dokumentu; znacznik obo-

wi¹zkowy

<TITLE></TITLE> tytu³ strony (wyœwietlany w górnym pasku

przegl¹darki); znacznik ten musi siê znajdowaæ
w sekcji nag³ówka

<A HREF=”...”></A> odnoœnik (link, odsy³acz)

<IMG SRC=”...”> wstawienie grafiki

<BR> „z³amanie” wiersza tekstu

<H1></H1> ustawienie czcionki nag³ówkowej (du¿ej, po-

grubionej), znacznik ten wystêpuje w szeœciu
wersjach (H1, H2...H6), przy czym H1 oznacza
czcionkê najwiêksz¹, a H6 – najmniejsz¹

<P></P> akapit

<B></B> pogrubienie tekstu

<I></I> pochylenie tekstu (kursywa)

<U></U> podkreœlenie tekstu

<TABLE></TABLE> tabela

Kompletna lista znaczników i atrybutów znajduje siê w Kursie HTML na
do³¹czonej p³ycie lub w sieci pod adresem http://web.reporter.pl/html/.

background image

INTERNET.listopad.2004

WARSZTAT

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

75

podstawy

Czytaj¹c powy¿szy tekst mo¿na dojœæ do wniosku, ¿e tworzenie stron
WWW jest strasznie trudne i wymaga ogromnej wiedzy. Któ¿ bowiem
spamiêta³by te wszystkie znaczniki, ich atrybuty oraz to, które znaczni-
ki u¿ywaj¹ których atrybutów...

Na szczêœcie odpowiedŸ na pytanie nr 2 brzmi: nie. Znajomoœæ

wszystkich znaczników i ich atrybutów jest mile widziana, ale nie ma
racjonalnych podstaw. Zawsze gdy nie jesteœmy pewni jakiego znacz-
nika u¿yæ, mo¿emy siê „podeprzeæ” rozmaitymi kursami i samouczka-

Proœciutka strona WWW (czyli plik HTML) – wynik dzia³ania kodu
HTML z przyk³adu we wczeœniejszym tekœcie

Atrybutem jest tu align, który okreœla sposób wyrównywania (w tym

wypadku tekstu). Align mo¿e przyjmowaæ nastêpuj¹ce wartoœci: left, cen-
ter, right, justify i inne (odpowiednio: wyrównanie do lewej, do prawej,
wyœrodkowanie, wyjustowanie).

Inny przyk³ad:

<table width=”100%” cellpadding=”0"
cellspacing=”5" border=”0">

Znacznik <TABLE> ma tu kilka atrybutów: width (szerokoœæ),

cellpadding (odleg³oœæ akapitu od krawêdzi komórki tabeli), cell-
spacing (szerokoœæ krawêdzi komórek tabeli), border (szerokoœæ
ramki tabeli).

Nie ma regu³y jeœli chodzi o u¿ywanie atrybutów. Niektóre atrybuty

stosuj¹ siê do wiêkszoœci znaczników, inne tylko do niektórych, jesz-
cze inne tylko do okreœlonego, pojedynczego znacznika.

Czy muszę znać wszystkie znaczniki HTML, żeby tworzyć dobre strony WWW?

2

mi internetowymi (adresy w ramce), jak równie¿ skorzystaæ z Kursu
HTML autorstwa Dariusza Majgiera, co miesi¹c zamieszczanego na
p³ycie do³¹czonej do MI. Poza tym obecne edytory HTML s¹ tak wy-
godne, ¿e aby tworzyæ strony WWW, w ogóle nie trzeba znaæ zasad
kodowania w jêzyku HTML – programy te same wstawiaj¹ do doku-
mentów wszystkie niezbêdne znaczniki, a tak¿e dbaj¹ o poprawnoœæ
kodu (np. ¿eby znacznik zosta³ w odpowiednim miejscu zamkniêty, ¿eby
u¿yæ prawid³owego atrybutu itd.).

Istot¹ jêzyka HTML s¹ przede wszystkim odnoœniki (linki, odsy³acze)
– nie bez powodu mówi siê „hipertekst”, czyli tekst wbogacony o od-
noœniki. U¿ycie odnoœników sprawia, ¿e ka¿dy dokument w sieci mo¿e
wystêpowaæ w postaci rozproszonej. Np. czêœæ tekstu jest na jednym
serwerze, odnoœnik w tym tekœcie prowadzi do fragmentu tekstu bêd¹-
cego na innym serwerze, obrazek jest ³adowany spod jeszcze innego
adresu (z innego serwera) itd.

Znacznikiem okreœlaj¹cym odnoœnik jest <A> ... </A> i najczêœciej

wystêpuje on z atrybutem href:

<A HREF=”http://www.mi.com.pl”>Kliknij tu</A>

Napis „Kliknij tu” w przegl¹darce zostanie wyœwietlony kolorem

niebieskim, a po jego klikniêciu na ekranie pojawi siê strona WWW
Magazynu INTERNET (www.mi.com.pl).

Inne wersje odnoœnika to np.:

<A HREF=”ftp://ftp.icm.edu.pl/pub/tekst.txt”> ...
</A>

(link do pliku tekst.txt na serwerze FTP)

<A HREF=”../katalog1/”> ... </A>

(link do katalogu „katalog1”)

Tematyka odnoœników zosta³a bardzo szczegó³owo opisana w arty-

kule pt. Hiper³¹cza w rubryce Warsztat.

3

Jak wstawić na stronę WWW odnośnik i grafikę?

Aby wstawiæ na stronê obrazek, pos³ugujemy siê znacznikiem

<IMG SRC=”...”>:

<img src=”images/obrazek.jpg” border=”0"
width=”137" height=”137" align=”right”
alt=”Buy it!”>

Jak widaæ, w sekcji SRC definiujemy po prostu œcie¿kê dostêpu do

obrazka, która mo¿e byæ wzglêdna (jak w przyk³adzie powy¿ej) lub
bezwzglêdna:

<img src=”http://www.mi.com.pl/images/
obrazek.jpg”>

Poza tym znacznik <IMG SRC> mo¿e mieæ liczne atrybuty:

border (gruboϾ obramowania),

width (szerokoϾ obrazka),

height (wysokoϾ obrazka),

alt (tekst alternatywny, wyœwietlany po naprowadzeniu wskaŸnika

myszki na obrazek lub w sytuacji, gdy obrazek nie mo¿e byæ
wyœwietlony) itp.

Obrazek na stronie WWW mo¿e z powodzeniem pe³niæ rolê odno-

œnika, nale¿y jedynie umieœciæ go wewn¹trz znacznika <A HREF=”...”>
</A>:

<A HREF=”http://www.mi.com.pl”><img src=”images/
obrazek.jpg”></A>

background image

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

INTERNET.listopad.2004

76

podstawy

Czy na stronę WWW nadaje się każdy obrazek?

4

Nie, nie ka¿dy. Przede wszystkim istotny jest format, bo przegl¹darki
internetowe wskutek uwarunkowañ historycznych akceptuj¹ przede
wszystkim dwa formaty graficzne: GIF i JPEG. Pierwszy umo¿liwia
zapis obrazu najwy¿ej w 256 kolorach i idealnie nadaje siê do prostych
klipartów, ma³ych obrazków z niewielk¹ iloœci¹ kolorów. Natomiast
format JPEG s³u¿y do zapisu obrazu w pe³nej palecie barw i jest zaleca-
ny przede wszystkim do kolorowych zdjêæ z wieloma szczegó³ami.
Obydwa formaty stosuj¹ kompresjê, z tym ¿e GIF bezstratn¹, a JPEG
stratn¹ (por. Elementarz Internetu cz. 7, MI 9/04).

Obecnie przegl¹darki internetowe potrafi¹ te¿ wyœwietliæ format

PNG – jest to odpowiednik JPEG-a, nadaje siê dobrze do fotografii,
choæ ma kompresjê (bezstratn¹) gorsz¹ ni¿ JPEG, a wiêc ten sam obraz
zapisany w JPEG-u i PNG utworzy pliki ró¿ni¹ce siê wielkoœci¹ – plik
JPEG bêdzie mniejszy ni¿ plik PNG. Dlaczego tak siê na ten temat
rozwodzimy? Bo naczeln¹ zasad¹ w sieci jest, aby strony WWW

Jakie programy służą do tworzenia stron WWW?

5

i wszystkie sk³adaj¹ce siê na nie pliki (obrazki, dŸwiêki, filmy itd.)
by³y jak najmniejsze objêtoœciowo. Im mniej bajtów zajmuje plik HTML
i zlinkowane z nim inne pliki, tym szybciej siê to wszystko za³aduje
w przegl¹darce. Internauci nie bêd¹ czekali d³u¿ej na za³adowanie stro-
ny ni¿ ok. 15–30 sekund. Poza tym projektuj¹c strony WWW nale¿y
mieæ na uwadze ogólny ruch generowany w sieci. Jeœli nasza strona ma
1 kB, to za³adowanie jej nawet przez tysi¹c u¿ytkowników nie spowo-
duje zatkania ³¹cza. Ale jeœli bêdzie mia³a 1 MB i zacznie j¹ pobieraæ
stu u¿ytkowników, korek na ³¹czu murowany.

A wiêc grafiki na strony WWW powinny byæ z za³o¿enia jak naj-

mniejsze. Jeœli koniecznie chcemy zaprezentowaæ internautom du¿y
obraz, to zróbmy z niego miniaturkê i wstawmy na stronê jako odno-
œnik do du¿ego orygina³u. W ten sposób wraz ze stron¹ bêdzie ³adowa-
na tylko miniaturka, a jeœli ktoœ bêdzie chcia³ obejrzeæ obraz w natural-
nej wielkoœci, to sobie j¹ kliknie.

Do tworzenia stron WWW s³u¿¹
tzw. edytory HTML. Dzieli siê je
na dwie kategorie: edytory dzia-
³aj¹ce w trybie tekstowym i gra-
ficznym. Dla pocz¹tkuj¹cych web-
masterów zalecane s¹ edytory
graficzne, zwane te¿ edytorami
WYSIWYG (What You See Is
What You Get), poniewa¿ pro-
jektowanie za ich pomoc¹ stron
WWW jest bardzo ³atwe i czêsto
sprowadza siê do odpowiedniego
u³o¿enia gotowych elementów
(które mo¿na oczywiœcie w pew-
nym zakresie modyfikowaæ), przy
czym ca³y czas na ekranie kom-
putera widaæ edytowany doku-
ment w postaci ostatecznej, tzn.
takiej, w jakiej zostanie wyœwie-
tlony przez przegl¹darkê. Trady-
cjonaliœci i bardziej zaawansowa-
ni webmasterzy preferuj¹ edyto-
ry tekstowe, które s¹ trudniejsze
w obs³udze (m.in. wymagaj¹ od
u¿ytkownika doœæ dobrej znajo-
moœci jêzyka HTML), ale za to
pozwalaj¹ na uzyskanie pe³nej
kontroli nad tworzonym doku-
mentem.

W za³¹czonej ramce podano

najpopularniejsze polskie edytory HTML (Paj¹czek jest komercyjny,
pozosta³e darmowe). Na pocz¹tkowym etapie projektowania stron
WWW zaleca siê korzystanie w³aœnie z polskich edytorów, poniewa¿
nie sprawiaj¹ one k³opotów przy kodowaniu polskich znaków (o któ-
rym ni¿ej). Zagranicznych edytorów HTML, g³ównie angielskojêzycz-
nych, jest bardzo du¿o (na pewno ponad 100) i jeœli ktoœ chcia³by
mieæ mo¿liwoœæ ich porównania, powinien poszukaæ ich w katalo-
gach oprogramowania, np. http://www.download.com, http://www.tucows.com,
http://www.snapfiles.com, lub za pomoc¹ wyszukiwarek internetowych.

Polskie edytory HTML

Paj¹czek

http://www.pajaczek.pl

WebSite PRO

http://website.e-clipse.org

Zaj¹czek

http://amigo.pop.pl

Extra Page

http://www.extra.page.prv.pl

EzHTML

http://ezhtml.bydnet.com.pl

Paj¹czek, najpopularniejszy polski edytor HTML, ma wyj¹tkowo du¿e mo¿liwoœci. Nadaje siê
zarówno dla pocz¹tkuj¹cych, jak i zaawansowanych webmasterów

background image

INTERNET.listopad.2004

WARSZTAT

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

77

podstawy

Oznacza to, ¿e wyst¹pi³ problem z tzw. kodowaniem polskich zna-
ków. Standardowy zestaw znaków obejmuje cyfry i litery jêzyka an-
gielskiego, natomiast dodatkowe znaki narodowe (jak np. polskie ¹,
ê, æ, œ itd.) s¹ wyœwietlane w zale¿noœci od tzw. strony kodowej. Daw-
niej wspó³istnia³y dwa standardy kodowania polskich znaków – Win-
dows-1250 (lansowany przez Microsoft) i ISO-8859-2. Obecnie ten
drugi jest powszechnie przyjêt¹ norm¹.

W przeglądarce nie wyświetlają się polskie znaki na mojej stronie. Co jest nie tak?

6

Internet Explorer mo¿e wyœwietlaæ polskie litery w standardzie

Windows-1250 (pozosta³oœæ z dawnych czasów) i ISO-8859-2.

Norm¹, któr¹ powinien stosowaæ ka¿dy webmaster,

jest ten drugi standard

Jeœli wiêc przegl¹darka wyœwietla „krzaczki” zamiast literek ¹, ê, æ

itd., to oznacza, ¿e prawdopodobnie podczas tworzenia strony WWW
zosta³ u¿yty standard kodowania polskich znaków Windows-1250. Na-
le¿y w takim razie wpisaæ tekst jeszcze raz ustawiaj¹c poprawne kodo-

wanie w edytorze HTML lub dokonaæ konwersji z Windows-1250 na
ISO-8859-2 (zazwyczaj edytory HTML oferuj¹ tak¹ opcjê).

Obecnie wiêkszoœæ edytorów HTML ma zestaw opcji, za pomoc¹ któ-
rych mo¿na edytowaæ obrazki. Niektóre oferuj¹ tak¿e podstawowe
opcje do rysowania i malowania, co pozwala tworzyæ grafiki od zera.
W zakres najwa¿niejszych opcji edycyjnych wchodzi skalowanie,
zmiana palety barw (np. ograniczenie kolorów z 16,7 mln do 256),
regulacja kontrastu i jasnoœci. Bardzo istotne s¹ te¿ opcje zapisu ju¿
gotowego obrazu, które powinny uwzglêdniaæ ró¿ne sposoby opty-
malizacji, czyli zmniejszania rozmiarów pliku przy zachowaniu ak-
ceptowalnej jakoœci.

Jeœli edytor HTML, którym siê pos³ugujemy, nie ma modu³u edycji

grafiki, trzeba wykorzystaæ dowolny (zale¿nie od potrzeb) edytor gra-
ficzny. Najpopularniejsze tego rodzaju programy podano w ramce. Ka¿-

Czym najlepiej edytować obrazki na strony WWW?

7

dy z nich mo¿e zapisywaæ grafiki w formatach GIF, JPEG, PNG, oferu-
je z regu³y mnóstwo opcji edycyjnych, efekty specjalne oraz zawiera
modu³ optymalizacyjny.

Najpopularniejszy
edytor graficzny
Photoshop
ma bardzo
rozbudowane opcje
optymalizacji obrazów
przeznaczonych
na strony WWW

Najpopularniejsze edytory graficzne

GIMP

http://www.gimp.org (darmowy)

Photoshop

http://www.adobe.com

Paint Shop Pro

http://www.jasc.com

Ulead PhotoImpact

http://www.ulead.com

background image

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

INTERNET.listopad.2004

78

podstawy

JavaScript jest jêzykiem skryptowym, dziêki któremu strony WWW
mog¹ siê zmieniaæ w zale¿noœci od czynnoœci wykonywanych przez
u¿ytkowiników. Najczêœciej spotykanym efektem dzia³ania JavaScrip-
tu jest zmiana wygl¹du odnoœnika (tekstowego, obrazka) po napro-
wadzeniu na niego wskaŸnika myszy, a tak¿e po klikniêciu go. Innym
przejawem u¿ycia JavaScriptu s¹ np. atrakcyjne, rozwijane menu.

Kod JavaScriptu jest wstawiany bezpoœrednio do dokumentu

HTML, ewentualnie mo¿e byæ do³adowywany z pliku zewnêtrzne-
go (z rozszerzeniem .js) podczas ³adowania strony WWW. JavaScript
ma swoj¹ w³asn¹ sk³adniê i polecenia, których nauczenie siê wyma-
ga sporo czasu. Zainteresowanych odsy³amy do licznych ksi¹¿ek

PHP jest skryptowym jêzykiem programowania s³u¿¹cym do rozsze-
rzania mo¿liwoœci stron internetowych. Jego podstawow¹ cech¹ jest to,
¿e dzia³a po stronie serwera, tzn. wszystkie funkcje PHP wykonuje ser-
wer, natomiast klient (przegl¹darka WWW), otrzymuje jedynie wynik
dzia³ania skryptów PHP w postaci np. tekstów wstawionych na stronê,
formularzy, elementów aktywnych itd.

Pocz¹tkuj¹cy webmaster nie musi znaæ PHP, ale powinien rozró¿-

niaæ statyczne strony WWW od dynamicznych. Strony statyczne s¹
napisane w czystym HTML-u i nic siê w nich nie zmienia, dopóki web-
master nie wprowadzi do nich jakichœ zmian. Natomiast strony dyna-
miczne s¹ generowane na ¿¹danie i w ogóle nie istniej¹ w tradycyjnej
postaci. Gdy internauta ³¹czy siê z dynamiczn¹ stron¹, serwer ³¹czy siê
z baz¹ danych, w której znajduj¹ siê poszczególne komponenty strony.

Gotowe strony WWW wysy³a siê zazwyczaj na konto FTP na serwerze.
Jest to konto administracyjne, dziêki któremu webmaster mo¿e aktuali-
zowaæ pliki, modyfikowaæ ju¿ istniej¹ce, dodawaæ nowe itd. Dok³adne
parametry konta FTP (adres, login, has³o) otrzymuje siê w momencie
zak³adania konta WWW.

Wiêkszoœæ edytorów HTML ma wbudowane opcje umo¿liwiaj¹ce

komunikacjê z serwerem poprzez protokó³ FTP. Dziêki temu od razu

Mam już gotową stronę WWW. Jak ją wysłać na serwer?

8

po zakoñczeniu pracy nad stron¹ mo¿na j¹ umieœciæ (opublikowaæ)
w sieci. Ewentualnie mo¿na siê pos³u¿yæ dowolnym klientem FTP, któ-
rych ca³¹ masê mo¿na znaleŸæ pod adresem http://www.snapfiles.com/free
ware/network/fwftp.html (wszystkie darmowe).

Publikuj¹c witrynê w sieci nale¿y pamiêtaæ, aby plik ze stron¹ g³ówn¹

(t¹, która ma siê za³adowaæ najpierw po po³¹czeniu z danym adresem)
nazywa³ siê index.html – jest to wymagane przez serwer.

Co to jest PHP?

9

Kursy PHP w sieci

http://bsd.kam.pl/~swlasik/php
http://php.webhelp.pl/kursy/php
http://www.leon.w-wa.pl/texts/kurs

Z tej bazy danych serwer po-
biera odpowiednie, skojarzo-
ne z dan¹ stron¹ materia³y
(np. artyku³y, newsy) i wsta-
wia je „w locie” we wczeœniej
zaznaczone miejsca w kodzie HTML. Dopiero tak spreparowana strona
pojawia siê na ekranie komputera u¿ytkownika.

Dynamiczne generowanie stron uniezale¿nia treœæ od formy. Redakto-

rzy mog¹ dowolnie zmieniaæ, uaktualniaæ dane, które s¹ nastêpnie natych-
miast prezentowane w sieci bez koniecznoœci dokonywania zmian w samej
strukturze strony WWW. Jednak opanowanie PHP jest trudne i wymaga
du¿o czasu. W ramce podajemy adresy kilku kursów PHP, które bardzo
przydadz¹ siê osobom zainteresowanym poszerzaniem swojej wiedzy.

Co to jest JavaScript?

10

Kursy JavaScriptu

http://js.webhelp.pl
http://web.reporter.pl/javascript/
http://cpw.netax.info/javascript.php3
http://www.ipts.m4u.pl
http://www.dhtml.helion.pl/workshop/java/lekcja1.html
http://kursy.skryptoteka.pl/kurs.php?id=1&strona=0

oraz kursów JavaScriptu online (adresy niektórych podano w ram-
ce). Bardzo dobry kurs znajduje siê te¿ na p³ycie CD do³¹czanej do
ka¿dego numeru MI.

Co to jest Flash?

11

Flash to technologia tworzenia i zapisu obiektów graficznych przezna-
czonych na strony WWW. G³ównym celem, który przyœwieca³ firmie
Macromedia – twórcy Flasha, by³o upakowanie jak najwiêkszej iloœci
grafiki w jak najmniejszej objêtoœci. Dlatego pliki flash (z rozszerze-
niem .swf) s¹ z regu³y bardzo ma³e, rzêdu kilku, kilkunastu kB, mimo
¿e zawieraj¹ du¿o efektownej grafiki animowanej. Innymi s³owy s¹ to
krótkie filmy. Jak to mo¿liwe? Otó¿ Flash to przede wszystkim grafika
wektorowa, której opis (matematyczny) zajmuje bardzo niewiele miej-
sca. Oprócz niej w plikach flash znajdziemy tak¿e tekst i (rzadziej)
zwyk³¹ grafikê rastrow¹ (czyli np. zdjêcia). Flash jest obecnie bardzo
popularny, w sieci jest wiele stron, na których zamiast tradycyjnych
GIF-ów czy JPEG-ów umieszczono grafiki w formacie SWF. Czasem
zdarzaj¹ siê tak¿e strony wykonane w ca³oœci we Flashu. Do wyœwie-
tlania w przegl¹darce plików flash niezbêdna jest wtyczka firmy Ma-

Kursy Flasha

http://otljarocin.sisco.pl/webmaniak/kurs.php
http://www.retsat1.com.pl/grzegorz/kurs/kurs.html
http://www.netdesign.wroclaw.pl/flash_kurs.shtml

cromedia. W starszych Windows nale¿a³o j¹ po prostu dograæ z sieci
(za darmo), natomiast w Windows XP jest ju¿ instalowana domyœlnie
razem z Internet Explorerem.

Pliki flash tworzy siê za pomoc¹ specjalizowanych programów. Naj-

popularniejszy to Macromedia Flash MX dostêpny pod adresem http://
www.macromedia.com. Aby nauczyæ siê jego obs³ugi, wystarczy skorzystaæ
z jednego z kursów online (patrz ramka na poprzedniej stronie). Warto
te¿ kupiæ jak¹œ ksi¹¿kê – bogat¹ ofertê znajdziemy w ka¿dej ksiêgarni
informatycznej.

background image

INTERNET.listopad.2004

WARSZTAT

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

79

podstawy

Co to jest CSS?

12

CSS (Cascading Style Sheets), czyli tzw. arkusze stylów, to rozszerze-
nie standardowego jêzyka HTML (rozbudowany zestaw nowych pole-
ceñ), które pozwala na ³atwiejsze i dok³adniejsze formatowanie stron
WWW. Wiêkszoœæ dostêpnych stylów s³u¿y do formatowania tekstu,
ale s¹ te¿ style do formatowania tabel, grafiki czy nawet okreœlania
parametrów dŸwiêku.

Zazwyczaj najpierw definiujemy styl w sekcji nag³ówkowej

(<HEAD> ... </HEAD>) dokumentu HTML, a potem odwo³ujemy siê
do niego w momencie u¿ycia konkretnego znacznika:

<HEAD>
<style type=”text/css”>
<!--
P.big { font-size: 18px; font-weight: bold; text-
align: left; }
-->
</style>
</HEAD>
...
<P class=”big”>To jest styl o nazwie big.<P>

W tym przyk³adzie napis „To jest styl o nazwie big” zostanie wy-

œwietlony du¿¹ czcionk¹ (o rozmiarze 18 pikseli) i pogrubion¹, a ca³y
akapit bêdzie wyrównany do lewego marginesu.

CSS

http://web.reporter.pl/html
http://www.webhelp.pl/kursy/css/index.php?roz=html
http://www.css.webdiary.vel.pl
http://css.webinside.pl
http://cpw.netax.info/css.php3
http://www.netdesign.wroclaw.pl/css_kurs.shtml

Jeœli strona u¿ywa wiêkszej iloœci stylów, dobr¹ praktyk¹ jest wy-

dzielenie ich do oddzielnego pliku (z rozszerzeniem .css) i umieszcze-
nie w dokumencie HTML jedynie odwo³ania do niego:

<LINK REL=”stylesheet” HREF=”style.css”
TYPE=”text/css”>

Podobnie jak znaczniki HTML maj¹ swoje atrybuty, tak posz-

czególne style maj¹ swoje wartoœci. Stylów jest kilkadziesi¹t i mniej
wiêcej tyle samo wartoœci (np. font-size, text-align itd.). W sumie
daje to potê¿n¹ dawkê teorii, której opanowanie wymaga czasu
i samozaparcia.

Znacznie proœciej jest korzystaæ podczas pracy z serwisów online

dotycz¹cych CSS. Kilka przyk³adowych podajemy w ramce. Przypo-
minamy jednoczeœnie, ¿e kurs CSS jest zawarty w kursie HTML publi-
kowanym co miesi¹c na naszej p³ycie CD.

Co to są szablony i skąd mogę je wziąć?

13

Szablony s¹ to gotowe strony WWW lub
ca³e serwisy (zazwyczaj strona g³ówna
i jedna lub kilka stron dodatkowych),
w których nale¿y jedynie wstawiæ swój
tekst i ju¿ mo¿na je opublikowaæ w In-
ternecie. Szablony s¹ idealnym tworzy-
wem dla osób, które nie maj¹ czasu œlê-
czeæ nad projektowaniem wygl¹du stro-
ny czy w ogóle nad tworzeniem strony
od zera.

W sieci istnieje wiele serwisów, z któ-

rych mo¿na za darmo œci¹gn¹æ wiele sza-
blonów – do wyboru, do koloru. Prze-
wa¿nie jedynym warunkiem u¿ywania
szablonów jest pozostawienie informacji
o autorze. Niekiedy autor wymaga reje-
stracji. S¹ te¿ serwisy z szablonami p³at-
nymi – po jednorazowym zakupie mo¿-
na z nich korzystaæ do woli. W ramce po-
dajemy adresy kilku popularnych pol-

Szablony stron WWW

http://www.szablony.pl
http://www.webinside.pl/webdesign/szablony
http://webpark.pl/szablony.html
http://republika.onet.pl (w dziale Webmajster)
http://tymex.punkt.pl
http://www.szablon.pl (p³atne)

W serwisie Szablony.pl (www.szablony.pl) znajdziemy
sporo darmowych szablonów stron WWW

skich serwisów z szablonami. Serwisów zagranicznych nale¿y szukaæ
pod has³em „web templates” lub „free web templates” w dowolnej wy-
szukiwarce, najlepiej Google.

background image

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WARSZTAT

INTERNET.listopad.2004

80

podstawy

Na pocz¹tek najlepiej za³o¿yæ stronê w jednym z portali: Wirtualna
Polska, Onet.pl, Interia.pl, które oferuj¹ darmowe konta WWW. Proces
zak³adania konta trwa kilka minut i w ka¿dym serwisie przebiega
z grubsza tak samo. Przeœledzimy go na przyk³adzie serwisu Webpark.pl
Wirtualnej Polski (patrz ilustracje). Wiêcej adresów serwisów z darmo-
wymi kontami podano w ramce.

£¹czymy siê z adresem http://webpark.pl;

Klikamy odnoœnik „Starter” (u do³u strony);

Pojawia siê formularz jak na rys. 1. Wype³niamy go i klikamy

przycisk „Za³ó¿ takie konto”. Jeœli wybrany przez nas login jest
ju¿ zajêty, system zaproponuje inny (rys. 2);

Nastêpnie pojawi siê kolejny formularz (rys. 3), w którym nale¿y

podaæ swoje dane osobowe – raczej nie jest zalecane podawanie
prawdziwych danych. Pod spodem znajduje siê regulamin,
który warto przeczytaæ zanim podejmie siê ostateczn¹ decyzjê
o za³o¿eniu konta;

Pojawia siê krótkie podsumowanie (rys. 4) i po klikniêciu

„PrzejdŸ do podsumowania” informacja o adresach i serwerach
(dla konta WWW, dostêpu FTP i poczty) – rys. 5. Te informacje
warto sobie gdzieœ zachowaæ, bo mog¹ siê jeszcze nie raz przydaæ;

Jak i gdzie mogę sobie założyć stronę WWW?

14

Teraz system proponuje zalogowanie siê (rys. 6) – wpisujemy

swoje dane i klikamy „Zaloguj”;

Przy pierwszym logowaniu trzeba wybraæ domenê dla

przysz³ej strony WWW. System przypomina o tym wyœwietlaj¹c
napis „Uwaga! Nie posiadasz jeszcze domeny...” (rys. 7).
Klikamy wiêc odnoœnik „Dodaj” i w wyœwietlonym oknie
wybieramy domenê – dla konta darmowego mo¿e to byæ tylko
www.twoja_nazwa.webpark.pl. Potem jeszcze wybieramy
kategoriê i koñczymy zak³adanie konta klikaj¹c przycisk
„Zapisz”. Teraz (lub przy nastêpnym logowaniu) mo¿emy
natychmiast przyst¹piæ do stworzenia strony wybieraj¹c
odnoœnik „Chcê zbudowaæ swoj¹ stronê”, który przeniesie nas
do bogatego zbioru darmowych szablonów.

1

2

3

4

background image

INTERNET.listopad.2004

WARSZTAT

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

81

podstawy

Nale¿y pamiêtaæ, ¿e darmowe konta WWW maj¹ najgorsze para-

metry i s¹ oferowane przez portale przede wszystkim w celu zachêce-
nia do zakupienia kont p³atnych. Czytelnicy, którzy zechc¹ skorzystaæ
z p³atnej oferty, powinni wybraæ taki serwis, który zapewni:

mo¿liwie du¿¹ pojemnoœæ (np. 50 lub 100 MB),

mo¿liwie du¿y limit transferu (np. 5 lub 10 GB),

najni¿sz¹ cenê.

Warto te¿ zwracaæ uwagê na dodatki do konta, takie jak darmowe

aliasy, szablony stron WWW, narzêdzia edytorskie, panel administra-
cyjny, dostêp do PHP i baz danych (to dla tych, którzy bêd¹ tworzyæ
strony dynamiczne) itd.

Co zrobić, żeby mieć krótki i ciekawy adres strony WWW?

15

Serwisy z darmowymi
aliasami WWW

http://www.prv.pl
http://www.o7.pl
http://www.glt.pl
http://www.dodaj.sobie.to
http://www.free.pl
http://www.xt.pl
http://www.xu.pl
http://skocz.pl

Darmowe konta WWW maj¹ to do siebie, ¿e narzucaj¹ w³asne domeny.
Jeœli ktoœ chce mieæ w³asn¹, unikatow¹ nazwê dla strony WWW, musi
zarejestrowaæ sobie domenê lub skorzystaæ z us³ug serwisów z darmo-
wymi aliasami WWW. Rejestracjê domeny oferuje teraz praktycznie
ka¿dy serwis z darmowymi kontami WWW. Wystarczy klikn¹æ odpo-
wiedni¹ opcjê.

Jest to jednak us³uga p³atna, w zale¿noœci od rodzaju domeny zap³a-

cimy od ok. 70 z³ do 250 z³ rocznie. Alternatywnie mo¿na wiêc przej-
rzeæ ofertê serwisów z darmowymi aliasami – kilka wybranych prezen-
tujemy w ramce.

Serwery darmowych
kont WWW

http://republika.onet.pl
http://miasto.interia.pl
http://www.friko.pl
http://www.of.pl
http://www.wif.pl

Szczegó³ow¹ listê takich

serwisów opublikowaliœmy
w numerze sierpniowym MI
z tego roku.

6

5

7


Wyszukiwarka

Podobne podstrony:
Elementarz03 MI 05 2004
Podstawy geografii fizycznej z elementami astronomii  11 10
PHP Co nowego w PHP 5 (cz 3) 11 2004
1466205 2100SRM0735 (11 2004) UK EN
ogrody, Referat z antropologii-ogolny opis ogrodnictwa-25[1].11.2004, Referat z antropologii - 25
Biegi sztafetowe, KONSPEKT ZABAW I GIER RUCHOWYCH Z ELEMENTA-MI LEKKIEJ ATLETYKI
Podstawy geografii fizycznej z elementami astronomii $ 11 10
HTML hiperłącza 11 2004
11 2004 jak to dzialaid 12737 Nieznany (2)
1554636 8000SRM1080 (11 2004) UK EN
Elementy prawa, 11-prawo
43 ROZ aprobaty techniczne [M I ] [8 11 2004][Dz U 2014
Lekkoatletyka, Skok wzwyż, KONSPEKT ZABAW I GIER RUCHOWYCH Z ELEMENTA-MI LEKKIEJ ATLETYKI
mi 03 2004
homework for 10 11 2004
Elementy językoznawstwa 11 12
Elementy prawa" 11
W 12.11.2004. MNI, Studia, Pedagogika
MT 11 2004 Citroen Bucefał

więcej podobnych podstron