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