KURS HTML #1



Kto ma dostep do internetu ten wie, ile frajdy daje przegladanie stron WWW, czy pobyt na wirtualnych pogawedkach, ewentualnie IRC`u. A moze ktos chce stworzyc swoj wlasny serwis, nawet, jesli nie ma on dostepu do i.netu ? Dla obu rodzajow tych ludzi jest przeznaczony ten kurs.

KEZLOCK
No to zaczynamy, ale od razu mowie, ze jesli ktos czegos nie rozumie, to niech się mnie pyta. Jesli bede znal wlasciwa odpowiedz, to pomoge Wam na pewno.

EDYTOR

Bardzo waznym, a nawet najwazniejszym narzedziem jest edytor jezyka HTML. Jesli ktos takowego nie posiada, to musi pracowac w notatniku. Niestety, co za tym idzie traci rowniez wiele przydatnych funkcji. Wybór należy do Was.


Najbardziej popularnym programem w naszym kraju jest chyba Pajaczek. Sam takowy posiadam, i jak na razie pracuje mi sie z nim najlepiej. Pełna wersje tego programu znajdziecie w ktoryms z CD-Action, lub na jednym ze starszych krazkow magazynu CHIP. Dobrym programem, a co nalezy wspomniec - FREEWAROWYM, jest rowniez Kicia, ale raczej takowego rozwiazania dla poczatkujacych nie polecam. Pajaczek jest po prostu przyjemniejszy w obsludze. Oba programy posiadaja ten sam kurs HTML, z ktorego ja korzystalem, zeby się troche nauczyc. Z zagranicznych pozycji wartym polecenia jest edytor NAMO, a także Caffe Cup. Znany jest też Hot Dod, Hippie, Spider itp... Wiec zacznijmy projektowanie naszej strony!

JEDZIEMY !!!

HTML - czyli Hyper-Tekst Markup Language. Jezyk ten sluzy do projektowania stron WWW w interecie. Aby mozna bylo sprawnie i bezproblemowo odczytywac strony przez przegladarki, wymyslono standard HTML. Najnowszym jest 4.1, ale ja zajme sie wersja 4.0. Dlaczego? Po prostu ja lepiej znam, a najnowsza wersja i tak ma niewiele zmian. Caly dokument HTML sklada sie z tzw. znacznikow i z wlasciwego tekstu. To, co widzimy na ekranie kompa w oknie przegladarki wyglada bardzo ladnie, ale gdy spojrzymy na zrodlo tego pliku, to widac wyraznie, ze troche sie trzeba napracowac... Ale koniec tego gadania, jesli nie macie wlaczonych edytorow HTML, to zrobcie to teraz, a jesli ich nie macie, to pozostaje tylko korzystac z notatnika. Oto glowne znaczniki, ktore widza szczesliwi posiadacze edytora:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//PL">

<HTML>

<HEAD>

Tu wstawiamy znaczniki <META> i </META> - opis troszke nizej.

</HEAD>

<BODY>

Tutaj wstawiamy wlasciwy tekst naszej strony i to, czego bedziemy sie uczyc

</BODY>

</HTML>


Jak widzicie caly szkielet strony znajduje sie miedzy znacznikami <HTML> i </HTML>. Coz jest ta pochyla kreseczka - (/) ? - Jest to tzw. Slash - zakancza on jakis znacznik - o tym musicie pamietac, bo to jest podstawa i wiecej o tym przypominal nie bede. To, co widzicie przed glownymi znacznikami (<HTML> i jego zakonczeniem) okresla nam typ i wersje jezyka, w ktorym piszemy.

Zapewne zauwazyliscie, ze miedzy znacznikami <HEAD> i </HEAD> moga, a nawet musza byc znaczniki <META> i </META>. Po co one sa ? Zapewne wchodziliscie kiedys na witryne jaiejs wyszukiwarki i.netowej, np Wirtualnej Polski. Chcielismy cos wyszukac i udalo nam sie - ponizej mamy spis kategorii tematycznej, lub wyrazenia, na jakie stron szukalismy. To ci widzimy, bylo wlasnie stworzone dzieki tym dwom znacznikom. A wiec jesli chcecie, zeby Wasza strona byla odwiedana przez jak najwieksza liczbe osob, to te znaczniki nalezy wstawic. Ale tu uwaga - znaczniki te wstawiamy TYLKO na stronie index.htm (tak nazwijcie plik, ktory wlasnie tworzycie) - jest to glowna strona naszego serwisu, na ktorej, jesli maja byc, powinnismy umiescic ramki. Jesli umiescimy taki wpis na wszystkich stronach, wowczas w wyszukiwarce zrobi sie balagan - pelno naszych wpisow. Jest to irytujace, wiec watpie, zeby ktos w takim przypadku kliknal na odnosnik. Ale przejdzmy juz do znacznikow <META>

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso-8859-2"> - jest to standard kodowania polskich znakow.

<META HTTP-EQUIV="Creation-date" CONTENT="data_utworzenia"> - daa utworzenia strony.

<META HTTP-EQUIV="Reply-to" CONTENT="wiatraczek1@poczta.wp.pl"> - e-mail autora.

<META NAME="language" CONTENT="pl"> - jezyk, w ktorym piszemy.

<META NAME="Keywords" CONTENT="slowa_kluczowe"> - slowa, ktore beda wyszukiwane przez wyszukiwarke, a ktore maja odnosic sie do Twojej strony.

<META NAME="Description" CONTENT="opis_zawartosci"> - opis zawartosci witryny.

<META NAME="Author" CONTENT="autor_strony"> - autor strony

<META NAME="Generator" CONTENT="Pajączek 2.0"> - program, ktorym robimy strone.

Jak widzicie, pierwszy znacznik jest o kodowaniu. Tam wpisane jest wlasciwe kodowanie iso, ale jednak jesli ktos chce z jakichs powodow uzyc tego gorszego, to wpisuje tam: Windows-1250. To juz wszystkie znaczniki typu <META> - pamietajcie, ze nie nalezy zakanczac kazdego z osbna, jedynie caly zbior tych polecen / znacznikow.

Ponizej tych znacznikow mozemy umiescic takie oto polecenie: <TITLE> jakis_tam_tekst </TITLE> - jesli wpiszemy to ponizej znacznika, ktory ostatnio omawialismy i wpiszemy w polu jakis_tam_tekst tytul naszej strony, lub cokolwiek innego, to pojawi sie to u gory okna przegladarki - Kliknij, aby zobaczyc przyklad.

Ponizej tego wszystkiego znajduja sie kolejne znaczniki: <BODY> i </BODY>. To miedzy nimi bedzie sie miescic wszystko, co chcemy, aby bylo widoczne na stonie. W tej czesci kursu nauczymy sie tylko jak zmieniac kolor, wysokosc i typ czcionki, oraz kolor tla.

CZCIONKA

Na poczatek zajmiemy sie wielkoscia czcionki, oto jest przyklady. Nizej dowiecie sie, jak to zrobic.

Czcionka stopnia pierwszego,

Czcionka stopnia drugiego

Czcionka stopnia trzeciego

Czcionka stopnia czwartego

Czcionka stopnia piatego
Czcionka stopnia szostego

Jak widzicie, im mniejszy stopien czczionki, tym wiekszy jej rozmiar. Oto znacznik: <H1> - kazdy tego typu musimy zakonczyc wiadomym poleceniem. Jesli ktos juz bardzo przyzwyczil sie do pisania w edytorach tekstu i woli tamte wielkosci czcionek, to ustawiamy je poleceniem: <FONT SIZE="12">. Wiecej o rozmiarach pisal Wam nie bede - bo nie ma co. Ale - aby zmienić kolor czcionki piszemy przed tekstem, któremu chcemy zmienić barwe: <FONT COLOR="jakis_tam_kolor"> Znacznik ten musimy zakonczyc. Uwaga: oto spis standardowych 16 kolorow, ktore mamy do dyspozycji (nazwe jego wstawiamy w znaczniku miedzy cudzyslow {"tu!!!"}).

KOLORY: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua,

Kolory, oprocz standardowych szesnastu, mozemy zapisywac w postaci heksadecymalnej, czyli: <FONT COLOR="#00001"> - ale tym chyba nikomu nie bedzie potrzeba sie poslugiwac. Zobaczycie, ze kolory standardowe wystarcza. Aha, nie zapomnijacie zakonczyc znacznika !!!

ZAKONCZENIE

To juz koniec zmagan z jezykiem HTML. Mam nadzieje, ze moj kurs przypadl Wam do gustu, i ze nauczyliscie sie czegos. W kolejnym numerze zajmiemy sie troche dokladniej czcionka i powiemy sobie powierzchownie o odnosnikach. A tymczasem poprobujcie w domu robic proste witryny - to naprawde wciaga. Pozdrawiam.

Witrak - Internetowy Magazyn Niekulturalny
e-mail