Webmaster

              



Witam Was w następnym odcinku Webmastera. Jak powiedziałem ostatnio, w tym odcinku się bedzie dużo dziać. Zajmiemy się dzisiaj meta-tagami, formatowaniem czcionki, wstawianiem obrazków. A więc: do dzieła!

NA POCZĄTEK

Najpierw umówmy się za pomocą jakich kolorów, co będziemy oznaczać. Tak więc:

PODSTAWOWE TAGI


Teraz przypomnijmy sobie podstawowe tagi HTMLa!
<HTML></HTML> - w tych tagach zamknięty jest cały dokument
<HEAD></HEAD> - w tych tagach zamknięte są wiadomości nagłówkowe
<BODY></BODY> - w tych tagach zamknięta jest główna część strony

Podsumowując - jeśli chcesz, aby strona była HTMLem to musi być wpisane:

<HTML>
<HEAD>

<!--Miejsce na informacje nagłówkowe-->
</HEAD>
<BODY>

<!--Sekcja główna strony-->
</BODY>
</HTML>


Przy tej okazji warto też wspomnieć jak wstawiać komentarze do dokumentu. Mianowicie między znacznikami <!-- a --> wpisujemy jakiś tekst (patrz wyżej).
Bym zapomniał: większość tagów HTMLa rozpoczyna się od <COŚ> a kończy się na </COŚ> (będę to nazywał zamknięciem)

META-TAGI

Meta-tagi są to specyficzne tagi, które umożliwiają np. opisanie strony w wyszukiwarce. Umieszcza się je w sekcji HEAD. Meta-tagów się nie "zamyka". Jest ich tak mało, że wymienię je wszystkie:

<TITLE>Tytuł strony</TITLE>
Ten znacznik właściwie nie jest meta-tagiem, ale spełnia podobną rolę. Co tu dużo pisać. Służy do nadawania stronie tytułu (w pasku na górze).

<META HTTP-EQUIV="Content-type" CONTENT="text/html;charset=ISO-8859-2">
Ten tag służy do określenia strony kodowej dokumentu. Jeśli chcesz używać innej niż ISO-8859-2 (nie polecam), to zmień po prostu na np. windows-1250 i po kłopocie!

<META HTTP-EQUIV="Refresh" CONTENT="x">
Jeśli strona ma być często aktualizowana to dzięki temu tagowi będzie się odświeżała co x milisekund.

<META HTTP-EQUIV="Refresh" CONTENT="x ; plik">
Jeśli przeniosłeś stronę na inny adres, to zamiast wstawiać link do nowego adresu wpisz ten tag. Przeniesie on odwiedzającego po x milisekundach na stronę 'plik'.

<META HTTP-EQUIV="Creation-date" CONTENT="Tue, 10 Feb 2001 22:30:29 GMT">
Informuje o dacie utworzenia dokumentu.

<META HTTP-EQUIV="Reply-to" CONTENT="adres@email">
Chyba wiadomo, nie?

<META NAME="Author" CONTENT="PELE">
Aż mi głupio tłumaczyć :) Informuje o autorze strony.

<META NAME="Description" CONTENT="Opis strony">
Pozwala wyszukiwarkom wyświetlić krótki opis strony.

<META NAME="Keywords" CONTENT="tu, wpisz, słowa, kluczowe">
Słowa kluczowe pozwalają wyszukiwarkom odnaleźć twoją stronę w gąszczu innych.

<META NAME="Generator" CONTENT="Twój edytor">
Informuje o używanym przez ciebie edytorze do HTMLa.

TŁO

Teraz nauczymy się jak zmienić kolor tła. Co wy na to? (I tak nic nie macie do tego:)

Aby ustawić kolor tła dokumentu wystarczy do BODY dopisać parametr BGCOLOR. W praktyce wygląda to tak:
<BODY BGCOLOR="kolor">
W miejsce 'kolor' trzeba podstawić nazwę angielską koloru lub wpisać wartość w systemie heksadecymalnym np. #FFEE22, gdzie FF to nasycenie koloru czerwonego, EE - zielonego, 22 - niebieskiego (jednym słowem system RGB).
BTW: W każdym przypadku, gdzie trzeba wpisać jakiś kolor, można wpisywać nazwę lub hexy.

Zamiast koloru tła, można też wstawić obrazek. Aby to zrobić należy do BODY dopisać parametr BACKGROUND. W praktyce:
<BODY BACKGROUND="plik_z_obrazkiem">
Opis: W miejsce 'plik_z_obrazkiem' trzeba wpisać ścieżkę dostępu do pliku z obrazkiem. Trzeba pamiętać, że obrazek umieszcza się sąsiadująco. Co zrobić, żeby tak nie było? To dowiecie się na jednej z następnych lekcji ;).

Przy tej okazji chciałbym też wspomnieć, że parametry wpisuje się wszystkie do jednego znacznika, tzn. nie wpisujemy
<BODY BGCOLOR="cos"><BODY BACKGROUND="cos">
tylko piszemy wtedy:
<BODY BGCOLOR="cos" BACKGROUND="cos"> KPW?


CZCIONKA

Teraz przyszła pora na czcionkę i wszystko co z nią związane.

Ogólnie do zmiany koloru czcionki w dokumencie służy parametr BODY - TEXT.
<BODY TEXT="kolor">
Pod 'kolor' podstawiamy nazwę koloru lub wartość w hexach (tak jak w przypadku tła strony).

Jeśli nie chcemy jednak, aby cały dokument miał czcionkę tego samego koloru, to wpisujemy:
<FONT COLOR="kolor">jakiś tam tekst</FONT>
Pod 'kolor' wiadomo co podstawiamy :)

Do zmiany kroju czcionki służy parametr FACE znacznika FONT, czyli:
<FONT FACE="Arial CE">
W miejsce 'Arial CE' można oczywiście wstawić inną czcionkę, pamiętając jednak o tym, że jeśli ktoś nie ma na swoim komputerze czcionki, którą ty użyłeś, będzie użyta domyślna czcionka.



Teraz przyszła pora na znaczniki fizyczne czcionki, takie jak: pogrubienie, podkreślenie, kursywa i inne.

Jest oczywiście jeszcze kilka znaczników fizycznych, jednak te są najczęściej używane. Jeśli chcecie się czegoś więcej dowiedzieć, to piszcie do mnie!

AKAPITY

Do wprowadzenia akapitu z interlinią służy zawsze polecenie <P>

Do tego taga, a także do każdego innego (oprócz HTML i HEAD) można wstawić parametry: ALIGN i VALIGN.
ALIGN służy do wyrównania poziomego tekstu, np:
<P ALIGN="rodzaj">
Pod 'rodzaj' należy podstawić left, center, right lub justify (wyrównanie do lewej, wycentrowanie, do prawej, justowanie)

<P VALIGN="rodzaj">
Pod 'rodzaj' należy podstawić top, middle lub bottom (wyrównanie do góry, do środka, do dołu)

Do wprowadzenia wcięcia z lewej służy tag DIR. Przykład:
<DIR>jakiś tekst</DIR>

Do wycentrowania obrazka lub tekstu można użyć taga CENTER, np.
<CENTER>jakiś tekst lub obrazek</CENTER>

A niech cię, ale mam sklerozę ;) Zapomniałem o najważniejszym: mianowicie znaku końca linii. Szybko nadrabiam zaległość: ten znak to <BR> (nie wymaga on zamknięcia)

OBRAZKI

No i wreszcie doszliśmy do wstawiania obrazków do dokumentu. Wstawić obrazek do dokumentu jest bardzo łatwo (no chyba, że dla was włączenie komputera jest trudne ;D). Wszystko, co związane z obrazkiem obraca się wokół znacznika IMG. Od razu też wspomnę, że IMG jest jednym z niewielu tagów, które nie wymagają zamknięcia

<IMG SRC="ścieżka">
Za pomocą tego polecenia wstawiliśmy obrazek do dokumentu (proste, no nie?)

Teraz pora na uregulowanie rozmiarów naszego obrazka. Służą do tego parametry HEIGHT (wysokość) i WIDTH (szerokość). Czyli:
<IMG SRC="ścieżka" HEIGHT="x" WIDTH="y">
Pod 'x' należy podstawić wysokość obrazka (w pikselach), a pod 'y' szerokość.

Teraz przypuśćmy, że umieszczamy fotkę jakiegoś sportowca. Skąd do jasnej ciasnej ten kto ogląda to zdjęcie ma wiedzieć, kto to jest? Ano służy do tego parametr ALT.
<IMG SRC="ścieżka" HEIGHT="x" WIDTH="y" ALT='tekst'>
Pod 'tekst' podstawiamy opis obrazka. Dla sprawdzenia, jak to wygląda, najedź kursorem na tytuł tego kącika.

Przydatnym parametrem jest też parametr BORDER. Służy on do ustalenie obramowania obrazka.
<IMG SRC="ścieżka" BORDER="x">
Ustalamy obramowanie obrazka na 'x' pikseli.

Innymi parametrami znacznika IMG są HSPACE i VSPACE. Służą one do ustalenia odległości obrazka od tekstu.
<IMG SRC="ścieżka" HSPACE="x" VSPACE="y">
Oznacza to, że obrazek zostanie oddalony od tekstu na 'x' pikseli w poziomie i na 'y' pikseli w pionie.

KONIEC

W następnym odcinku zajmiemy się bardzo dokładnie odsyłaczami, a także będzie niespodzianka. Zainteresowanych moim kursem proszę o uwagi na maila: amwebmaster@poland.com
              

Copyright © 2001 by Pele for Action Mag