HTML Dla Bardzo Początkujących

HTML dla bardzo początkujących
Osnowa dokumentu | Tytuły | Akapit i wiersz Pozioma linia | Wykazy | Atrybuty czcionki |
Odsyłacze| Wielkość i kolor czcionki | Grafika na stronie |Edytor | Co dalej?
Osnowa dokumentu
Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków łacińskich objętym
nawiasami ostrymi. Wielkość liter jest obojętna - znaczniki wpisane małymi i wielkimi
literami są interpretowane w ten sam sposób.
Cały dokument powinien być objęty parą znaczników <HTML> </HTML>. Między nimi
powinna zaś się znaleźć para znaczników <HEAD> </HEAD>, która stanowi ramy dla
informacji nagłówkowych. Pozostałe informacje powinny być objęte z kolei znacznikami
<BODY> </BODY>. Wygląda to następująco:
<HTML>
<HEAD>informacje nagłówkowe</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE>

</TITLE>.
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
TITLE nie oznacza wcale tytułu na stronie. Zawarta między tymi znacznikami treść ukaże się
w pasku tytułowym przeglądarki, a nie w dokumencie.
Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.

Zalecamy usilnie stosowanie strony kodowej ISO-8859-2 (czyli ISO Latin 2). Jest to
międzynarodowy standard, a "przy okazji" także Polska Norma. Powinieneś sporządzać
dokument w tym standardzie i zarazem opatrywać go informacją typu META. Jest ona
umieszczana w ramach znaczników HEAD i wygląda następująco:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
Ostatecznie więc, stosuj na początku standardową osnowę:
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<TITLE>Tytuł strony</TITLE>
</HEAD>
<BODY>
właściwa treść (ciało) dokumentu
</BODY>
</HTML>
Jak uzyskać polskie znaki w edytorach?
Problem konwersji już istniejących dokumentów można załatwić "hurtowo" za pomocą

specjalnych programów konwertujących. Polecamy przede wszystkim program Ogonki 97
(228 KB), Michała Jaskólskiego - Michał oferuje ją wszystkim za darmo i warto podkreślić,
że jego program stał się jednym z najważniejszych narzędzi w "dziecięcym" okresie
polskiego Internetu. Niezliczone tysiące osób konwertowały już nim swoje strony,
dostosowując je do zalecanego standardu.
Gdy z jakichś powodów zechcesz używać w swojej witrynie internetowej strony kodowej
Windows-1250 (co odradzamy), wpisz koniecznie odpowiednią informację META:
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy

zdefiniować kolor tła dokumentu. Gdybyśmy tego nie uczynili, tło będzie miało taki kolor,
jaki został domyślnie przyjęty w przeglądarce WWW (zazwyczaj szary). Możemy wstawić
polecenie:
<BODY BGCOLOR="kolor">
przy czym "kolor" może być podany imiennie (np. red, green, black, white) lub za pomocą
wartości heksadecymalnych (szesnastkowych), tak jak w przypadku koloru czcionki -
#FF0000, #008000, #000000, #FFFFFF. Sugerujemy używanie wartości heksadecymalnych,
jako bardziej uniwersalnych - zapoznaj się przy okazji z lista kolorów w naszym kursie, gdzie
są w praktyczny sposób pokazane kolory i sposób ich kodowania (tabelę sporządził Paweł
Stokowski).
POWRÓT
Tytuły
W dokumentach często wprowadzamy tytuły. Służy do tego polecenie <Hn> </Hn>. Znak H
oznacza header, natomiast cyfra n to stopień tytułu (mamy ich sześć). Polecenie
wprowadzające tytuł stopnia pierwszego składa się ze znacznika otwierającego <H1> i
zamykającego </H1>. Ten drugi zawiera dodatkowo ukośnik (ang. slash). Większość poleceń
zawiera znacznik otwierający i zamykający, aczkolwiek stosuje się też polecenia zawierające
jedynie znacznik otwierający.
Dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością

znaków. Wprowadzamy je za pomocą poleceń H1, H2 itd.
Tytuł stopnia pierwszego

Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
POWRÓT
Akapit i wiersz
Jak wprowadzać do dokumentu "zwykły" tekst? W zasadzie każdy tekst, który nie jest objęty
specjalnym znacznikiem, jest interpretowany jako "masa tekstowa". Gdybyśmy jednak
wpisali dłuższy fragment tekstu, rozdzielając w edytorze akapity za pomocą klawisza Enter,
przeglądarka zignoruje znaki końca wierszy i akapitów i wyświetli jednolity blok tekstu. Aby
naprawdę rozdzielić akapity, należy się posłużyć poleceniem (P = paragraph), które
wstawi interlinie między poszczególne fragmenty tekstu. Zalecamy także konsekwentne
stosowanie znacznika zamykającego .
Przykład:
To jest treść pierwszego akapitu
To jest treść drugiego akapitu
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając przy tym znaku końca
akapitu. Możemy wówczas zastosować pojedyncze polecenie , które przenosi tekst o
jeden wiersz w dół, choć nie wprowadza dodatkowej interlinii.
To jest pierwszy wiersz 

To jest drugi wiersz 
To jest trzeci wiersz 
To jest czwarty wiersz 
Ponadto polecenie ma jeszcze jedną zaletę. Napisanie kilku kolejnych pozwala
poszerzyć pionowy odstęp między elementami.
Pozioma linia
Następnym, często spotykanym elementem jest pozioma linia, którą wstawiamy za pomocą
polecenia <HR> (ang. horizontal rule). Pozwala ono wyświetlić w dokumencie poziomą linię,
na szerokość całej strony, rozdzielając nią logiczne fragmenty tekstu, dzięki czemu strona jest
bardziej przejrzysta. Zauważ, że w tym dokumencie bloki informacji są rozdzielane właśnie
poziomymi liniami.
POWRÓT
Wykazy
Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne

wyliczenia jakichś punktów, które w przeciwieństwie do tekstu o charakterze opisowym w
skondensowany sposób prezentują jakąś myśl czy zespół zagadnień. Użytkownicy edytorów
tekstów spotykają się z tym elementem - np. w polskiej wersji edytora Word są one znane pod
nazwą list numerowanych i list wypunktowanych.
Aby utworzyć szkielet wykazu wypunktowanego, należy użyć polecenia <UL> </UL> (ang.
unordered list). W ramach szkieletu znajdą się poszczególne punkty wykazu, które
wprowadzamy za pomocą polecenia <LI>
Dlaczego zajmuję się UFO?
<UL>
<LI>Uważam, że UFO istnieje</LI>
<LI>Uważam, że pozaziemskie cywilizacje mogą nam pomóc</LI>
<LI>Uważam, że należy się przygotować na spotkanie</LI>
</UL>
W efekcie uzyskamy:
Dlaczego zajmuję się UFO?
 Uważam, że UFO istnieje

 Uważam, że pozaziemskie cywilizacje mogą nam pomóc
 Uważam, że należy się przygotować na spotkanie
Jest w zasadzie obojętne, czy użyjemy pojedynczego znacznika <LI>, czy też zastosujemy
dodatkowo znacznik zamykający </LI>. Autorzy edytorów HTML stosują różne konwencje, a
wynik w przeglądarce WWW w obu przypadkach jest identyczny. Generalnie jednak zaleca
się zamykanie znaczników.
Gdy chcemy utworzyć wykaz numerowany, wówczas zamiast <UL> i </UL> możemy
zastosować <OL> i </OL> (ang. ordered list). Uzyskamy wówczas listę numerowaną za
pomocą liczebników arabskich (w dalszej części podręcznika pokażemy inne sposoby
numerowania).
1. Uważam, że UFO istnieje

2. Uważam, że pozaziemskie cywilizacje mogą nam pomóc
3. Uważam, że należy się przygotować na spotkanie
POWRÓT
Atrybuty czcionki
Aby tekst w przeglądarce nie wyglądał wszędzie tak samo, stosuje się dodatkowe atrybuty
czcionki - pogrubienie (bold), pochylenie (italic) i podkreślenie (underlined).
To jest tekst normalny
To jest tekst pogrubiony (bold)
To jest tekst pochylony (italic, kursywa)
To jest tekst podkreślony (underlined)
Efekt działania tych poleceń:
To jest tekst normalny
To jest tekst pogrubiony
To jest tekst pochylony

To jest tekst podkreślony
Choć wszystkie przeglądarki akceptują atrybuty czcionki, warto zauważyć, że np. Netscape
Navigator 2 i 3 ignoruje podkreślenie, natomiast Netscape Communicator 4 już je widzi.
POWRÓT
Odsyłacze
Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do

innych stron, które znajdują się w światowej sieci. Czytelnik jakiegoś dokumentu będzie po
prostu za pomocą kliknięć myszką na odsyłaczach przenosić się do różnych miejsc w
Internecie, skacząc np. z Polski do Japonii, z Japonii do USA, a stamtąd do Francji. Z jego
punktu widzenia jest zupełnie obojętne, gdzie strony się znajdują. Dla niego ważny jest łatwy
dostęp do informacji.
W tym miejscu przedstawimy dwa szczególnie ważne odsyłacze: odsyłacze do innych stron
WWW i odsyłacz uruchamiający pocztę elektroniczną. Są one bowiem najpowszechniej
stosowane.
Odsyłacz do innej strony jest tworzony za pomocą polecenia:
<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>
Przykładowy adres mógłby wyglądać następująco:
<A HREF="http://www-mag.com.pl">Magazyn WWW</A>
czyli,
Magazyn WWW
to tam, gdzie zarabiam na swoją miskę ryżu :-)
Ukośnik (slash) na końcu adresu wymusza wczytanie strony domyślnej, zazwyczaj o nazwie
index.html (lub index.htm - zależy to od typu serwera WWW).
Uwaga: zalecamy nadawanie stronie głównej serwisu nazwy index.htm lub index.html. Jest
to powszechnie przyjęta praktyka w Internecie. W ostatnich latach stosuje się także
default.htm lub default.html
Na ekranie przeglądarki jest wyświetlany tekst, który znajduje się między znacznikami <A
HREF="... "> i </A>. Jest on domyślnie wyświetlany na niebiesko z podkreśleniem (możemy
to jednak zmienić). Gdy przesuniemy kursor myszki nad odsyłacz, w pasku stanu
przeglądarki zobaczymy kryjący się pod tekstem adres internetowy. Kliknięcie na nim
spowoduje skok do strony.
Zwróćmy uwagę na to, że adres internetowy jest podawany w cudzysłowie. Dla działania
odsyłacza nie jest to wprawdzie absolutnie konieczne, ale wymaga tego formalna poprawność
składni. Edytory HTML na ogół respektują ten wymóg (choć nie wszystkie).
Drugim ważnym odsyłaczem jest adres poczty elektronicznej. Bardzo często autorzy stron,
którzy dysponują przecież zazwyczaj swoim własnym adresem, wstawiają go na stronie,
prosząc o uwagi czytelnika . Jest to dobry obyczaj, który daje czytelnikowi łatwy kontakt z
autorem.
Stosujemy tutaj na przykład następujące polecenie:
<A HREF="mailto:autor@jego.adres">Imię i nazwisko</A>
Na przykład:
<A HREF="mailto:pwimmer@www-mag.com.pl.">Redaktor</A>
Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną.

Navigator wywoła swój własny moduł pocztowy Mail, Internet Explorer zaś skorzysta z
Outlook Express (albo np. z Outlook 98, jeśli jest on domyślnym programem pocztowym).
Także i tutaj stosujmy konsekwentnie w adresie cudzysłów. Fragment w postaci:
Jeśli masz jakieś uwagi, napisz do <A HREF="mailto:pwimmer@www-

mag.com.pl.pl">autora strony</A>
zostanie przedstawiony w przeglądarce następująco:
Jeśli masz jakieś uwagi, napisz do autora strony
Przesunięcie kursora myszki nad tekst "autora strony" wyświetli w pasku stanu adres poczty
elektronicznej, kliknięcie myszką natomiast spowoduje uruchomienie modułu pocztowego, w
którym czytelnik strony będzie mógł zredagować list do autora.
POWRÓT
Wielkość i kolor czcionki
Gdyby autorowi strony znudził się tekst, w którym czcionka ma ten sam kolor i wielkość,
zawsze może się posłużyć dodatkowymi poleceniami, zmieniającymi obie cechy. W
dokumentach HTML stosuje się nieco inną definicję wielkości czcionki niż przyjęta w
edytorach tekstów. Podstawowa czcionka ma wielkość 3 jednostek i jest zazwyczaj
wyświetlana w przeglądarkach WWW jako czcionka 10-12-punktowa. Przeglądarki
pozwalają na ogół zdefiniować, jaka wartość punktowa odpowiada czcionce o wielkości 3. W
dokumencie możemy stosować czcionkę o wielkości od 1 do 7. Im większa wartość, tym
większa czcionka w przeglądarce.
Oto przykłady odmiennych wielkości czcionki w przeglądarce World Wide Web.
To jest czcionka o wielkości 7

Polecenie, które określa wielkość czcionki, ma następującą postać:
Tekst objęty definicją
x = 1...7
Gdy w taki właśnie sposób definiujemy wielkość czcionki, nadajemy jej wartość absolutną.
Możemy jednak także nadać wartość relatywną, czyli względną, podając wielkość zmiany.
Skoro czcionka standardowa ma wielkość 3, możemy dodać do niej co najwyżej 4 jednostki
lub odjąć co najwyżej 2. Gdyby czcionka podstawowa miała wielkość 1, moglibyśmy dodać
6, ale już niczego nie moglibyśmy odejmować.
Tekst objęty definicją 
Tekst objęty definicją 
x = 1...6
Gdy jakiś fragment tekstu obejmiemy definicją , będzie on miał
wielkość 5, gdyż dodajemy 2 jednostki do wielkości podstawowej. Gdy użyjemy polecenia
 , tekst będzie miał wielkość 2.
W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś

fragmenty. Jest to wygodne, gdyż możemy zmienić wielkość czcionki wewnątrz akapitu, do
czego nie nadaje się definicja tytułu.
W analogiczny sposób możemy zmieniać kolor czcionki. Posługujemy się tutaj poleceniem:
Tekst objęty poleceniem
Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości

szesnastkowych (np. kolor biały ma wartość #FFFFFF, a czarny #000000), albo za pomocą
ich nazw. Wszystkie popularne przeglądarki akceptują wartości heksadecymalne (w formacie
RRGGBB, gdzie RR - składowa czerwona, GG - składowa zielona, BB - składowa niebieska),
aczkolwiek ich wprowadzanie wymaga wspomagania w edytorze HTML.
Oto lista szesnastu podstawowych barw:
black silver gray white (koloru white nie widać na białym tle)
maroon red purple fuchsia
green lime olive yellow

navy blue teal aqua
POWRÓT
Grafika na stronie
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich czytanie - pod
warunkiem oczywiście, że korzystamy z graficznego systemu operacyjnego. Niektórzy
autorzy stron tak się zatracają w ozdabianiu stron, że zapominają o przepustowości łączy
internetowych. Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji wczytywania
grafiki, może stracić dużo czasu i nerwów, oczekując na wczytanie tak spreparowanej strony.
Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych -

GIF i JPG (JPEG) - które są z założenia skompresowane (często nawet dziesięciokrotnie w
stosunku do innych popularnych formatów), a więc zajmują znacznie mniej miejsca grafiki w
innych formatach. Dzięki temu transmisja strony trwa znacznie krócej.
Grafikę możemy wprowadzić za pomocą polecenia:
<IMG SRC="nazwa_pliku">
W najprostszym przypadku, gdy obrazek znajduje się w tym samym katalogu co dokument,
wystarczy podać jego nazwę. Gdy grafiki gromadzimy na serwerze w odrębnym katalogu,
konieczne jest podanie ścieżki dostępu. Na przykład:
<IMG SRC="../gambler/gambler.gif">
POWRÓT
Edytor
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML.
Wynika stąd, że dokument taki można utworzyć za pomocą najprostszego edytora tekstów,
ręcznie dodając znaczniki. Metoda taka, choć skuteczna, byłaby jednak zbyt uciążliwa.
Dlatego na rynku pojawiło się już wiele specjalizowanych edytorów, które wydatnie ułatwiają
konstruowanie dokumentu, wspomagając wprowadzanie poleceń.
Osobiście polecam używanie edytorów tekstowych, a nie graficznych, gdyż mamy wtedy
lepszą kontrolę nad tworzonym dokumentem.
W środowisku Windows 95/98/ME/2000/NT możesz używać m.in.:
 HomeSite, w wersjach od 2.x do 4.x - najlepszy amerykański edytor w tym

środowisku
 Pajączek 2000 - w tej chwili wybór numer 1 dla polskiego webmastera, program
komercyjny
 Tiger98 - także polski, bardzo silny edytor, komercyjny
 Tiger II Millenium Mini - młodszy brat Tigera
 HotDog - silny amerykański edytor, komercyjny
 WebPager Xpress - polski edytor, darmowy
 ezHTML - polski edytor, także darmowy
 Kicia - kolejny darmowy edytor polskiego programisty
 HTML-owiec - polski, komercyjny program
 Hedit - polski program, w wersjach darmowej i shareware'owej
 Website Pro - polski, darmowy edytor
 HTML-Kit - bardzo silny amerykański edytor, darmowy
 1'st Page 2000 - jeden z najpotężniejszych programów webmasterskich, darmowy
Oczywiście możesz się także posłużyć graficznymi edytorami, a dla początkujących polecam
szczególnie darmowe edytory dołączone do przeglądarek Internet Explorer 4 i Netscape
Communicator (lub Sylaba Komunikator). Ponieważ jednak uczysz się języka HTML, warto
się posługiwać edytorami tekstowymi.
POWRÓT
Co dalej?
Nie po to uczymy się języka HTML, aby bawić się nim w domu. W końcu każdy zechce
wystawić swoją stronę w Internecie, aby podzielić się z innymi swoimi wiekopomnymi
dokonaniami czy przemyśleniami. Dlatego trzeba sobie zapewnić miejsce na jakimś serwerze.
Możesz wykupić kilka megabajtów miejsca u dowolnego dostawcy usług internetowych, ale
to oczywiście kosztuje nieco grosza. Możesz także skorzystać z jakiejś darmowej oferty -
wiele polskich serwisów, w tym i portale, udostępnia miejsce na swoich serwerach.
POWRÓT

HTML Dla Bardzo Początkujących

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Dla Bardzo Początkujących

Uploaded by

Copyright:

Available Formats

HTML dla bardzo początkujących

właściwa treść (ciało) dokumentu

Między znacznikami <HEAD> i </HEAD> powinno się znaleźć polecenie <TITLE>

Drugim bardzo ważnym elementem jest informacja stronie kodowej dokumentu.

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

Ostatecznie więc, stosuj na początku standardową osnowę:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">

właściwa treść (ciało) dokumentu

Jak uzyskać polskie znaki w edytorach?

Problem konwersji już istniejących dokumentów można załatwić "hurtowo" za pomocą

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

Gdy w dokumencie znajduje się para znaczników <BODY> i </BODY>, możemy

Dysponujemy sześcioma stopniami tytułów, różniącymi się w przeglądarce wielkością

Tytuł stopnia pierwszego

Tytuł stopnia czwartego

Tytuł stopnia piątego

Tytuł stopnia szóstego

<P>To jest treść pierwszego akapitu</P>

<P>To jest treść drugiego akapitu</P>

To jest pierwszy wiersz<BR>

Na stronach WWW powszechnie stosuje się wykazy. Są to po prostu systematyczne

<P>Dlaczego zajmuję się UFO?</P>

Dlaczego zajmuję się UFO?

 Uważam, że UFO istnieje

1. Uważam, że UFO istnieje

To jest tekst normalny

<B>To jest tekst pogrubiony (bold)</B>

<I>To jest tekst pochylony (italic, kursywa)</I>

<U>To jest tekst podkreślony (underlined)</U>

Efekt działania tych poleceń:

To jest tekst normalny

To jest tekst pogrubiony

To jest tekst pochylony

Charakterystyczną cechą Internetu jest obecność na stronach hipertekstowych odsyłaczy do

Odsyłacz do innej strony jest tworzony za pomocą polecenia:

<A HREF="adres.strony.internetowej">Jakaś nazwa tej strony</A>

Przykładowy adres mógłby wyglądać następująco:

<A HREF="http://www-mag.com.pl">Magazyn WWW</A>

Stosujemy tutaj na przykład następujące polecenie:

<A HREF="mailto:autor@jego.adres">Imię i nazwisko</A>

Napis mailto daje sygnał przeglądarce WWW, że ma uruchomić pocztę elektroniczną.

Jeśli masz jakieś uwagi, napisz do <A HREF="mailto:pwimmer@www-

zostanie przedstawiony w przeglądarce następująco:

Jeśli masz jakieś uwagi, napisz do autora strony

Wielkość i kolor czcionki

Oto przykłady odmiennych wielkości czcionki w przeglądarce World Wide Web.

To jest czcionka o wielkości 7

Polecenie, które określa wielkość czcionki, ma następującą postać:

<FONT SIZE="x">Tekst objęty definicją</FONT>

<FONT SIZE="+x">Tekst objęty definicją </FONT>

<FONT SIZE="-x">Tekst objęty definicją </FONT>

W ten sposób możemy manipulować wysokością czcionki w tekście, uwypuklając jakieś

<FONT COLOR="kolor">Tekst objęty poleceniem</FONT>

Kolory możemy definiować w postaci tradycyjnej, a więc za pomocą wartości

Oto lista szesnastu podstawowych barw:

maroon red purple fuchsia

green lime olive yellow

Na stronach WWW są stosowane dwa podstawowe formaty bitowych plików graficznych -

Grafikę możemy wprowadzić za pomocą polecenia:

W środowisku Windows 95/98/ME/2000/NT możesz używać m.in.:

 HomeSite, w wersjach od 2.x do 4.x - najlepszy amerykański edytor w tym

You might also like