
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:
- Tym kolorem będziemy oznaczać tagi HTMLa
- Tym kolorem będziemy oznaczać komentarze
- W miejsce tego koloru powinieneś wpisać jakiś tekst lub ścieżkę dostępu
- W miejsce tego koloru podstaw wartość liczbową
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.
Do zmiany rozmiaru czcionki możemy użyć:
- taga <FONT> z parametrem SIZE, np.:
<FONT SIZE="x">
W miejsce 'x' podstawiamy wartość od 1 do 7.
- tagów od <H1> do <H7>, gdzie H1 to rozmiar największy a H7 najmniejszy.
Teraz przyszła pora na znaczniki fizyczne czcionki, takie jak: pogrubienie, podkreślenie, kursywa i inne.
- Pogrubienie
<B></B>
- Podkreślenie
<U></U>
- Kursywa
<I></I>
Przekreślenie
<STRIKE></STRIKE>
- Czcionka w indeksie górnym
<SUP></SUP>
- Czcionka w indeksie dolnym
<SUB></SUB>
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