Do stworzenia naszej strony internetowej możemy użyć zwykłego edytora tekstu
jaki standartowo jest dostępny w każdym systemie operacyjnym oraz przeglądarki,
w której będziemy mogli oglądać efekty naszej pracy.
Edytory HTML możemy
podzielić na dwie grupy. Pierwszą z nich są edytory tekstowe jak Notatnik w
systemie Windows, czy Pico lub Joe w systemie Linux. Natomiast do drugiej grupy
zaliczają się edytory graficzne WYSIWYG. Właśnie dzięki edytorom graficznym
jesteśmy wstanie stworzyć stronę bez znajomości kodu HTML, rozmieszczając
elementy na stronie za pomocą "kliknięć myszką". Osobiście polecam Notepad
++ wspiera takie języki programowania jak C, C++ , Java, C#, XML, HTML,
PHP, Javascript , CSS, Pascal, Perl, Python i Lua.
Pliki które będziemy zapisywać powinny mieć rozszerzenie *.html lub *.html ,
główny plik naszej strony powinniśmy nazwać index.html lub index.htm. Jeżeli
już poruszyliśmy temat zapisywania plików to pamiętaj aby zapisywane
dokumenty nie posiadały polskich znaków jak : ą, ę, ć, ź, ł, ż, ń, ó,
ś oraz znaków @,#,$,%,&, itp, w zapisywanych plikach rozpoznawalna jest
wielkość liter. Kolejnym ważnym elementem jest kodowanie strony, to my musimy
wysłać przeglądarce informacje o języku strony, polski standard to iso-8859-2.
Rozpoczynając budowę naszej strony powinniśmy nawyknąć do pewnych
standardów, pierwszym z nich będzie podstawowa budowa strony. Większość
edytorów HTML podczas tworzenia nowego dokumentu automatycznie dodają
pewien szablon zbliżony do poniższego.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2">
<META NAME="Description" CONTENT="Opis strony">
<META NAME="Keywords" CONTENT="słowa, kluczowe, na,
temat, naszej, strony">
<META NAME="Author" CONTENT="Twoję imię i
nazwisko">
<META HTTP-EQUIV="Content-Language" CONTENT="pl">
<TITLE>Tytuł naszej strony</TITLE>
</HEAD>
<BODY>
Zawartość naszej strony
</BODY>
</HTML>
|
Najlepiej uczyć się modyfikując podane przykłady, tak więc zachęcam
do skopiowania podanego przykładu i wstawienie go do naszego edytora, a następnie
wyświetlenie go w przeglądarce.
No dobra a teraz co to wszystko znaczy i po co o wszystko!?!? Zacznijmy od początku... Pomiędzy znacznikami
<HTML>....
</HTML> znajduje się cała zawartość naszego pliku, to tutaj
umieszczamy całą zawartość naszej strony WWW. Następnie pomiędzy znacznikami
<HEAD>....
</HEAD> mieści się tak zwany "nagłówek dokumentu",
w którym znajdują się informacje na temat naszej strony. Znaczniki META niech
chwilowo zostaną tajemnicą, nimi zajmiemy się szczegółowo w innym rozdziale
nim poświęconym.
Kolejno jak widzimy mamy wyrażenia <TITLE>...<TITLE> , tutaj
wpisujemy "tytuł" naszej strony jaki jest wyświetlany na górnym
pasku przeglądarki. Tekst jaki tam wpiszesz posłuży też wyszukiwarką do
zatytułowania naszej strony w wynikach wyszukiwania, dlatego zadbajmy aby
"tytuł" strony był atrakcyjny i zachęcał potencjalnego internautę
do odwiedzenia naszej strony.
Tytuł strony jest ważny dla pozycjonowania strony i słowa zawarte w
tytule mają nadal dość duże znaczenie. Tytuł powinien być interesujący,
ponieważ jest to jeden z widocznych elementów
strony oraz nie zawierał więcej niż 75 znaków.
O znacznikach <META ...> porozmawiamy w kolejnym dziale, teraz
skupmy się na tym co najważniejsze.
<BODY>...</BODY> jak widzisz na przykładzie pomiędzy tymi
znacznikami jest wpisana "Zawartość naszej strony" tutaj
umieszczasz treść swojej strony WWW, dodatkowo w tych znacznikach możemy umieścić
kolor naszej strony, oraz kolor tekstu.
Domyślnie kolor tekstu jest ustawiony na kolor czarny, natomiast kolor tła
strony będzie szary. Pamiętaj aby projektowana przez Ciebie strona była
czytelna i przejrzysta, tak więc podczas dobierania kolorów zadbaj o to aby
kolory tła, oraz czcionki wyróżniały się i były miłe dla oka.
Tak więc aby zmienić kolor tła strony definiujemy :
<BODY BGCOLOR="kolor">
Gdzie "kolor" może zostać wpisany wg. odpowiedników angielskich
np. blue (niebieski), black (czarny), orange (pomarańczowy), lub za pomocą wartości heksadecymalnych
np. #FFFFFF (kolo biały), #000000 ( kolor czarny) czy #FF0000 (kolor żółty).
Nasza stronę WWW możemy ożywić, i zamiast zwykłego koloru na tło strony
możemy wstawić dowolny plik graficzny, pamiętajmy jednak o przejrzystości
strony, gdyż po dodaniu pliki graficznego często strona traci cenne walory
wizualne i staje się nieczytelna. Wcześniej napisałem że możemy wstawić
dowolny plik graficzny, lecz należy pamiętać o tym aby te pliki były lekkie
i szybko się ładowały, dlatego NIE powinniśmy wstawiać takich plików jak
*.bmp, raczej coś lżejszego jak *.jpg czy *.gif.
Poniżej przedstawiam jak należy wstawić obrazek w tło strony:
<BODY BACKGROUND="ścieżka dostępu do obrazka">...</BODY>
lub
<BODY BACKGROUND="ścieżka dostępu do obrazka" BGPROPERTIES="fixed">...</BODY>
(dostepnie tylko pod IE)
Ważnym elementem jest "ścieżka dostępu do obrazka",
to tutaj definiujemy dostęp do pliku graficznego na naszym serwerze. Pamiętaj,
aby plik graficzny znajdował się w tym samym katalogu co reszta strony, oraz
nie rób odwołań do swojego dysku.
|
