|
Lekcja 2 - podstawowe elementy sk�adowe strony WWW.
W tej lekcji zaczniemy ju� tworzy� pierwsz� stron� naszej witryny. W tym celu musimy
dokona� edycji przygotowanego w poprzedniej lekcji pliku index.html. Uruchamiany Notatnik+
i z menu wybieramy PLIK-OTW�RZ, zmieniamy opcj� PLIKI TYPU na WSZYSTKIE PLIKI. (*.*)
wskazujemy interesuj�cy nas plik i wciskamy przycisk OTW�RZ.
Ka�dy plik, kt�ry ma sta� si� stron� internetow� powinien zawiera� trzy odpowiednio
rozmieszczone pary znacznik�w:
<HTML>...</HTML> - odpowiednio na pocz�tku i na ko�cu dokumentu;
<HEAD>...</HEAD> - cz�� nag��wkowa dokumentu zawieraj�ce informacje istotne m.
in. dla przegl�darki wy�wietlaj�cej stron�, informacje te nie s� bezpo�rednio widoczne na
stronie, ale mog� wp�ywa� na spos�b jej wy�wietlania;
<BODY>...</BODY> - cz�� g��wna dokumentu, wewn�trz tych znacznik�w umieszcza
si� odpowiednio zakodowan� w�a�ciw� tre�� dokumentu, b�dzie ona widoczna na stronie.
Nie ma znaczenia czy znaczniki b�d� wpisywane ma�ymi czy wielkimi literami i tak b�d�
dzia�a� poprawnie. Jednak dla wprowadzenia pewnego porz�dku i zwi�kszenia czytelno�ci kodu
w naszych lekcjach b�d� one zapisywane wielkimi literami.
Opisane wy�ej znaczniki nale�y wpisa� wg przedstawionego schematu:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Zobacz
Zapisujemy dokonane zmiany (PLIK - ZAPISZ). Teraz spr�bujemy obejrze� nasze dzie�o. Przy
pomocy Exploratora Windows odnajdujemy nasz plik index.html i klikamy na niego dwukrotnie.
Je�li dokument zosta� prawid�owo nazwany efektem powinno by� uruchomienie si� przegl�darki
internetowej wy�wietlaj�cej nasz� stron�. Strona ta oczywi�cie b�dzie na razie pusta.
Przedstawione powy�ej znaczniki to tzw. "pojemniki", aby dzia�y prawid�owo powinny
wyst�powa� parami. Na par� sk�adaj� si� znacznik otwieraj�cy, np. <BODY> i znacznik
zamykaj�cy z dodanym znakiem slash "/" np. </BODY>. Jak za chwil� si� przekonamy nie
wszystkie znaczniki to pojemniki.
Uzupe�nimy teraz szkielet naszej strony o kolejne znaczniki oraz wpiszemy pierwszy tekst:
<TITLE>...</TITLE> - tekst wpisany pomi�dzy te znaczniki b�dzie wy�wietlany na pasku
tytu�owym przegl�darki;
<META > - ten znacznik nie jest pojemnikiem, wewn�trz jego nawias�w wpisujemy informacje
istotne dla przegl�darki i innego oprogramowania internetowego np.: znacznik
<META HTTP-EQUIV="Content-type" CONTENT=" text/html; charset=iso-8859-2"> informuje
przegl�dark� o standardzie kodowania polskich liter.
Wpisujemy:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<TITLE>Biblioteka XVI L.O. w Koz�owej G�rze</TITLE>
</HEAD>
<BODY>
Tu b�dzie tre�� naszej strony
</BODY>
</HTML>
W tym miejscu musimy znowu wr�ci� do problemu kodowania polskich liter. W znaczniku META
zdeklarowali�my standard ISO podczas gdy w rzeczywisto�� tekst: "Tu b�dzie..." zapisali�my
w standardzie Windows (w takim standardzie kodowania pracuje nasz Notatnik). Polskie litery na
stronie mog� by� wy�wietlane nieprawid�owo.
Aby zmieni� kodowanie na prawid�owe z menu Notatnika wybieramy: EDYCJA-KONWERSJA
TEKSTU-WIN-->ISO lub wciskaj�c klawisz F11. Teraz z kolei niekt�re litery b�d� dziwnie
wygl�da� w naszym kodzie �r�d�owym, ale na stronie wszystko b�dzie w porz�dku.
Zapisujemy zmiany, prze��czamy si� do przegl�darki i od�wie�amy widok wciskaj�c przycisk
OD�WIE� lub F5 (ewentualnie Ctrl+R). Po tej operacji na stronie powinien pojawi� si� tekst:
"Tu b�dzie tre�� naszej strony", a na pasku tytu�owym przegl�darki
pojawi si� napis "Biblioteka XVI L.O. w Koz�owej G�rze".
W�a�nie utworzyli�my nasz� pierwsz� stron� internetow�.
Zobacz
Wiele znacznik�w pozwala na dopisywanie parametr�w precyzuj�cych spos�b ich dzia�ania.
Parametry takie wpisujemy zawsze wewn�trz nawias�w danego znacznika i oddzielamy je spacjami.
W dalszej cz�ci lekcji zajmiemy si� ustaleniem wybranych parametr�w znacznika <BODY> b�d�
to ustalenia niezb�dne dla zbudowania prawid�owej struktury naszej strony.
BGCOLOR="white"- ustalenie koloru t�a strony na bia�y; ten sam efekt mo�na uzyska� wpisuj�c
oznaczenie koloru podaj�c warto�� koloru w trybie szesnastkowym BGCOLOR="#FFFFFF"
(standard RGB). Liczba kolor�w, kt�re mo�na wpisa� przy pomocy s��w jest ograniczona,
zapis szesnastkowy daje wi�ksze mo�liwo�ci wyboru odcienia interesuj�cego nas koloru.
TEXT="black" lub TEXT="#000000" - ustalenie koloru tekstu wy�wietlanego na stronie na
czarny,
LEFTMARGIN="0" - ustalenie lewego marginesu strony na warto�� "0" - znacznik interpretowany
przez Internet Explorera,
TOPMARGIN="0" - ustalenie prawego marginesu strony na warto�� "0" - znacznik interpretowany
przez Internet Explorera,
MARGINWIDTH="0" - ustalenie szeroko�ci marginesu strony (prawego i lewego r�wnocze�nie) na
warto�� "0" - znacznik interpretowany przez przegl�darki Netscape,
MARGINHEIGHT="0" - ustalenie wysoko�ci marginesu strony (g�rnego i dolnego r�wnocze�nie)
na warto�� "0" - znacznik interpretowany przez przegl�darki Netscape.
Wpisujemy:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" TOPMARGIN="0"
MARGINWIDTH="0" MARGINHEIGHT="0">
Efektem wprowadzonych zmian b�dzie przesuni�cie tekstu do lewego g�rnego rogu. Czarny
tekst oraz bia�e t�o strony prawdopodobnie by�o ju� wy�wietlane jako domy�lne, tak wi�c
nie zobaczymy �adnego dodatkowego efektu.
�wiczenia:
W ramach �wicze� mo�na poeksperymentowa� z kolorami tekstu i t�a. Np.
TEXT="yellow" BGCOLOR="green".
|
