ABC jezyka HTML.pdf

SPIS TREŚCI

WSTĘP...............................................................................................................................................................................3

ROZDZIAŁ 1. INFORMACJE PODSTAWOWE.........................................................................................................4

Z ACZNIJMY OD A.............................................................................................................................................................4

O D HISTORII DO TERAŹNIEJSZOŚCI ...................................................................................................................................5

D EFINICJA TYPU DOKUMENTU , DTD................................................................................................................................6

Z APISYWANIE DOKUMENTÓW HTML W EDYTORZE I OTWIERANIE W PRZEGLĄDARCE ....................................................6

T ROCHĘ TRENINGU ..........................................................................................................................................................8

N AJWAśNIEJSZE INFORMACJE ..........................................................................................................................................9

ROZDZIAŁ 2. INTERNET, STRONA WWW I ZNACZNIKI HTML.....................................................................10

W ORLD W IDE W EB I STRONA WWW............................................................................................................................10

Z NACZNIKI .....................................................................................................................................................................11

E LEMENTY DOKUMENTU HTML ......................................................................................................................................11

K ODOWANIE POLSKICH ZNAKÓW ...................................................................................................................................14

N AJWAśNIEJSZE INFORMACJE ........................................................................................................................................15

ROZDZIAŁ 3. ZNACZNIKI HTML FORMATUJĄCE TEKST I NADAJĄCE STRUKTURĘ

DOKUMENTOWI HTML.............................................................................................................................................16

N AGŁÓWKI I AKAPITY TEKSTU .......................................................................................................................................16

T RZY RODZAJE LIST .......................................................................................................................................................27

N AJWAśNIEJSZE INFORMACJE ........................................................................................................................................35

ROZDZIAŁ 4. KASKADOWE ARKUSZE STYLÓW...............................................................................................37

O GÓLNA POSTAĆ KASKADOWEGO ARKUSZA STYLÓW ....................................................................................................37

K OMENTARZE CSS........................................................................................................................................................40

S TYL WPISANY ...............................................................................................................................................................41

O SADZONY ARKUSZ STYLÓW .........................................................................................................................................42

Z EWNĘTRZNY ARKUSZ STYLÓW .....................................................................................................................................48

R OZCIĄGANIE STYLU .....................................................................................................................................................50

W YDZIELONE BLOKI ......................................................................................................................................................53

P RZYKŁADY STYLÓW CSS DLA TŁA STRONY WWW.....................................................................................................55

A TRYBUTY STYLU ODNOSZĄCE SIĘ DO TEKSTU ..............................................................................................................60

N AJWAśNIEJSZE INFORMACJE ........................................................................................................................................67

ROZDZIAŁ 5. OBRAZY W DOKUMENCIE HTML................................................................................................70

N AJWAśNIEJSZE INFORMACJE ........................................................................................................................................80

ROZDZIAŁ 6. POŁĄCZENIA......................................................................................................................................81

U NIFORM R ESOURCE L OCATOR .....................................................................................................................................81

U LOKOWANIE DOKUMENTU A ŚCIEśKA DOSTĘPU ...........................................................................................................81

D EFINIOWANIE POŁĄCZEŃ .............................................................................................................................................83

D EFINIOWANIE POŁĄCZENIA DO INNEJ STRONY .............................................................................................................85

O DNOŚNIKI ....................................................................................................................................................................91

W IĘCEJ O OBRAZACH PEŁNIĄCYCH FUNKCJĘ POŁĄCZEŃ ................................................................................................95

P OŁĄCZENIA DO ARCHIWÓW FTP................................................................................................................................101

N AJWAśNIEJSZE INFORMACJE ......................................................................................................................................101

ROZDZIAŁ 7. TABELE HTML.................................................................................................................................103

E LEMENTY KONSTRUKCYJNE TABELI ...........................................................................................................................118

N AJWAśNIEJSZE INFORMACJE ......................................................................................................................................119

ROZDZIAŁ 8. RAMKI I UKŁADY RAMEK...........................................................................................................121

N AJWAśNIEJSZE INFORMACJE ......................................................................................................................................132

ROZDZIAŁ 9. HTML A XHTML..............................................................................................................................134

DODATEK A. ZNACZNIKI HTML I ICH FUNKCJE............................................................................................140

DODATEK B. PODSTAWOWE MODUŁY KODU HTML....................................................................................161

DODATEK C. ATRYBUTY STANDARDOWE .......................................................................................................165

DODATEK D. KOLORY W HTML...........................................................................................................................166

Wstęp

HTML to język hipertekstowego znakowania ( Hypertext Markup Language ), który stanowi ustanowioną przez

konsorcjum World Wide Web Consortium ( W3C ) specyfikację nakreślającą postać dokumentów prezentowanych w

Internecie. Twórcą języka HTML jest Tim BernersLee.

HTML pozwala publikować w Internecie dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze,

pobierać za pośrednictwem „połączeń hipertekstowych” informacje z Internetu, projektować formularze oraz

umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje. Niewątpliwie jest to język

prezentacji XXI wieku. Nie moŜna się po prostu bez niego obejść!

KsiąŜka poświęcona jest podstawom języka HTML. Jest w niej ABC tworzenia dokumentów HTML. Obok wyjaśnień

podstawowych terminów, znajdziesz tu takŜe praktyczne wprowadzenie w świat języka HTML. Poszczególne

zagadnienia ilustrowane są zestawem prostych przykładów. Przechodząc od przykładu do przykładu nawet nie

zauwaŜysz, kiedy przestałeś być nowicjuszem i zacząłeś świadomie i z wyczuciem posługiwać się tym narzędziem.

Co będzie Ci potrzebne do pracy? Komputer – to oczywiste, przeglądarka – na przykład Internet Explorer lub Netscape

Navigator (lub inna, najlepiej jednak graficzna, czyli taka, która obsługuje obrazy) i edytor tekstu – wystarczy nam

prosty edytor typu Notepad lub Wordpad, polecam jednak bezpłatny edytor Webber, który ma tę zaletę, Ŝe udostępnia

numerację wierszy. Edytor ten znajdziesz na stronie WWW Radka Sokoła http://magsoft.com.pl/~rsokol/ .

KsiąŜka napisana została w konwencji pytań i odpowiedzi, a zagadnienia zostały podzielone na 9 rozdziałów.

Rozdział 1. zawiera informacje podstawowe.

Z rozdziału 2. dowiesz się czym jest Internet, strona WWW i znaczniki HTML.

Rozdział 3. poświęcony jest znacznikom HTML formatującym tekst i nadającym strukturę dokumentowi HTML.

W rozdziale 4. znajdziesz dość obszerne omówienia kaskadowych arkuszy stylów. Specyfikacja HTML 4.01, a do niej

chcemy się dostosować, kładzie wielki nacisk na to, aby niemal wszystko, co dotyczy stylów, definiowane było za

pomocą arkuszy CSS. Z tego względy w ksiąŜce ani razu nie pojawił się tak popularny znacznik <font> . To prawda,

Ŝe przyzwyczajenie jest drugą naturą, więc zacznijmy się przyzwyczajać do stylów CSS, tym bardziej, Ŝe ich

stosowanie nie jest trudne, a bardzo ułatwia Ŝycie.

Rozdział 5. pokazuje róŜne sposoby korzystania z obrazów w dokumentach HTML, rozdział 6. zajmuje się

połączeniami, takŜe tymi nietypowymi, na bazie obrazu – ikonami, które moŜna klikać, i mapami odnośników.

W rozdziale 7. pojawiają się tabele HTML. Tabele to nie tylko sposób prezentacji danych, lecz takŜe sposób na

prezentację dokumentu (choć CSS teŜ tu sięga!).

W rozdziale 8. dominują ramki i układy ramek.

WaŜny jest takŜe rozdział 9., który wskazuje róŜnice między obecnie najbardziej popularną wersją języka HTML, a

nową specyfikacją, XHTML. Warto przeczytać ten rozdział, bowiem stosowanie się do zasad obowiązujących przy

tworzeniu dokumentów XHTML pomoŜe tworzyć poprawne dokumenty HTML.

KaŜdy z rozdziałów zawiera krótkie podsumowanie, w którym zebrane zostały najwaŜniejsze informacje, warte

przypomnienia od czasu do czasu.

Do ksiąŜki dołączone zostały cztery dodatki. Dodatek A to obszerny zestaw znaczników i ich atrybutów (wg.

specyfikacji HTML 4.01). Znajdziesz w nim takŜe podstawowe zasady korzystania z tych elementów. Mam nadzieję, Ŝe

będzie to uŜyteczna ściągawka.

Dodatek B to podstawowe moduły kodu HTML. Nie musisz więc kartkować całej ksiąŜki, aby na przykład dowiedzieć

się, jak zapisać kod HTML tabeli!

Dodatek C prezentuje tabele atrybutów standardowych, które mogą być stosowane niemal ze wszystkimi znacznikami,

a w dodatku D znajdziesz tabelkę kodów i nazw podstawowych kolorów.

śyczę powodzenia w tworzeniu ciekawych dokumentów HTML.

Rozdział 1. Informacje podstawowe

KsiąŜka poświęcona jest podstawom języka HTML – H yper T ext M arkup L anguage. Utworzą one solidny fundament,

który pozwoli Ci budować nawet skomplikowane strony WWW. Jeśli absolutnie nie masz pojęcia o znacznikach i

wyraŜeniach przez nie tworzonych, tutaj dowiesz się tego wszystkiego, co w niezbędne.

Zaawansowani twórcy stron WWW takŜe powinni znaleźć w ksiąŜce swego pomocnika – omawia ona bowiem

poszczególne znaczniki (a pamięć bywa zawodna!) oraz prezentuje szereg przydatnych przykładów ich zastosowania.

Zacznijmy od A

Co będzie Ci potrzebne?

¦ Komputer – to oczywiste.

¦ Przeglądarka – na przykład Internet Explorer lub Netscape Navigator (lub inna, najlepiej jednak graficzna,

czyli taka, która obsługuje obrazy).

¦ Edytor plików tekstowych – wystarczy nam prosty edytor typu Notepad lub Wordpad, polecam jednak

bezpłatny edytor Webber, który ma tę zaletę, Ŝe udostępnia numerację wierszy (a jak się przekonasz, jest to

rzecz niezwykle przydatna) oraz automatycznie dokonuje konwersji kodów polskich znaków diakrytycznych

ze standardu Windows na standard uŜywany w Internecie. Edytor ten znajdziesz na stronie WWW Radka

Sokoła http://www.magsoft.com.pl/~rsokol/ .

Brak podłączenia do Internetu, w Ŝaden sposób nie ogranicza Twoich moŜliwości tworzenia kodu HTML. Fazy pisania

i wstępnego testowania kodu moŜna przeprowadzać bez łączenia się z Internetem.

Czy HTML to język programowania?

HTML – H yper T ext M arkup L anguage nie jest językiem programowania, takim jak C++ czy Pascal. A czym jest?

H yper oznacza, Ŝe HTML nie jest językiem liniowym. Języki programowania mają zazwyczaj strukturę liniową –

innymi słowy struktura programu określa kolejność jego wykonania. W przypadku strony WWW uŜytkownik ma

moŜliwość skorzystania z dowolnej opcji strony w dowolnym czasie. Drugi człon nazwy, T ext, to narzędzie, którym się

posługujesz, a jest nim zwykły (no, moŜe nie całkiem zwykły) tekst. „Niezwykłość” tekstu bierze się stąd, Ŝe

umieszczany jest on w specjalnych znacznikach, „< >”, „</>”, i one właśnie są odpowiedzialne za kolejny człon nazwy:

M arkup. Dzięki znacznikom przeglądarka wie, Ŝe ma do czynienia z kodem strony WWW, a nie ze zwykłym tekstem.

Znaczniki nadają specjalne atrybuty i instruują przeglądarkę jak interpretować wygląd tekstu. Format znacznika jest

następujący: <ZNACZNIK>To jest zawartość</ZNACZNIK> (jest parę wyjątków, na przykład przy wstawianiu

obrazu niezbędny jest tylko znacznik otwierający).

Ostatnia litera w skrócie HTML to L – od L anguage, co oznacza „język”. HTML jest bowiem językiem publikowania

w sieci WWW, a co najwaŜniejsze, językiem niezaleŜnym od stosowanej platformy sprzętowej, czyli rodzaju

komputera, z jakiego korzystasz.

Co HTML umoŜliwia?

HTML pozwala:

¦ Publikować dokumenty zawierające nagłówki, tekst, tabele, listy, zdjęcia, formularze, itp.

¦ Pobierać za pośrednictwem „połączeń hipertekstowych” informacje z Internetu (mówiąc w skrócie polega

to na klikaniu „połączeń”, co uaktywnia pobieranie danych).

¦ Projektować formularze pozwalające na korzystanie ze zdalnych usług, takich jak na przykład

wyszukiwanie informacji, dokonywanie rezerwacji oraz zamawianie produktów.

¦ Umieszczać w dokumentach arkusze kalkulacyjne, klipy wideo oraz inne aplikacje.

Jak HTML działa?

Aby lepiej zrozumieć funkcjonowanie języka HTML, spróbuj potraktować znaczniki HTML jako przymiotniki. Kolor

obiektu, na przykład piłki, moŜna opisać korzystając z takich przymiotników jak niebieska , czerwona czy Ŝółta .

Relację względem innego obiektu moŜna z kolei wyrazić za pomocą słów takich jak: z lewej , z prawej , w centrum .

Podobnie HTML pomaga opisać wygląd i ulokowanie tekstu, obrazów i innych obiektów na Twojej stronie WWW.

Od historii do teraźniejszości

Kto zaczął i gdzie to zmierza?

Twórcą języka HTML jest Tim BernersLee. Język pomyślany jako narzędzie ułatwiające komunikowanie się

naukowców w sieci szybko zyskał ogromną popularność. Przyniósł ją w latach 90tych szalony rozwój Internetu. Wraz

z rozwojem sieci globalnej zmieniał się teŜ sam język. W 1995 roku zatwierdzono specyfikację HTML 2, natomiast

specyfikacja HTML 3, takŜe z tego roku, nie doczekała się rekomendacji. W 1996 roku powstała specyfikacja HTML

3.2, która uzyskała rekomendację w 1997 roku. W kolejnych specyfikacjach wprowadzano zmiany, których zadaniem

było poprawić przenośność dokumentów HTML między róŜnymi platformami i przeglądarkami. Zdano sobie bowiem

sprawę, Ŝe jedynie pełna kompatybilność zagwarantuje prawidłowy rozwój Internetu, a jej brak będzie oznaczał lawinę

formatów, która utrudni lub wręcz uniemoŜliwi powszechne wykorzystanie sieci. Wprowadzane modyfikacje

rozszerzały potencjał języka nie naruszając jego dotychczasowych moŜliwości. Chodziło o to, aby juŜ utworzone strony

były nadal dostępne.

Inne waŜne kwestie, które zadecydowały o kierunku rozwoju to potrzeba umoŜliwienia korzystania z informacji

sieciowych za pomocą róŜnych urządzeń, takich jak telefony komórkowe czy komputerowe urządzenia słuŜące do

komunikacji głosowej, oraz uniezaleŜnienia się od konfiguracji sprzętowej (a więc na przykład od ustawień takich jak

rozdzielczość czy głębokość barw) i parametrów łączy sieciowych.

Wersja 4 (z 1998 r.) rozszerzyła moŜliwości języka HTML o arkusze stylów, skrypty, ramki i osadzanie obiektów.

Poprawiono obsługę tekstu, rozbudowano opcje tabel i formularzy wprowadzając ułatwienia dla osób

niepełnosprawnych.

W wersji 4.01, wprowadzonej w 1999 roku, poprawiono błędy i wprowadzono drobne zmiany.

Kto dba o standaryzację?

Definiowaniem standardu języka HTML zajmuje się World Wide Web Consortium (W3C). Konsorcjum W3C

utworzone zostało w 1994 roku przez 500 organizacji. Dba ono o rozwój technologii, wyznacza kierunki rozwoju,

tworzy i zatwierdza specyfikacje, udostępnia oprogramowanie i narzędzia, a wszystko to w celu wyzwolenia pełnych

moŜliwości Internetu jako forum wymiany informacji i usług oraz centrum komunikacji między ludźmi.

Czy W3C przewiduje opublikowanie kolejnej specyfikacji, HTML 5.0? I tak, i nie. Na początku 2000 roku pojawiła się

specyfikacja XHTML 1.0 (e X xtensible H ypertext M arkup L anguage) – oznacza się ją takŜe jako xHTML, Xhtml,

XML/HTML lub właśnie jako HTML 5.0. XHTML, wyznaczony na „oficjalnego” następcę języka HTML 4.0, to

hybryda językowa wyrastająca z języka XML, posiadająca jednocześnie wiele cech wspólnych z językiem HTML.

A co to takiego ten XML?

XML – e X tensible M arkUp L anguage – to rodzina technologii, słuŜąca do definiowania formatu i struktury

dokumentów. Stanowi ona uproszczoną wersję języka SGML, a dokładniej jego podzbiór. No tak, z deszczu pod rynnę.

Wyjaśnijmy sobie więc najpierw skrót SGML. SGML – S tandard G eneralized M arkUp L anguage, to przemysłowy

standard obróbki dokumentów elektronicznych zgodny z ISO 8879 . Jest on nadrzędny zarówno w stosunku do XML,

jak i języka HTML. Oba te języki mają swoje miejsce pod ogromnym parasolem SGML –XML jest aplikacją SGML, a

XHTML aplikacją XML. Za pomocą znaczników oraz deklaracji typu dokumentów aplikacje te ustalają jednolite

formatowanie danych uwzględniające ich specyfikę i zakres zastosowań. Sam SGML nie zawiera natomiast Ŝadnych

instrukcji formatujących.

Dokumenty SGML przechowywane są w plikach tekstowych.

Więcej informacji na temat języka XHTML znajdziesz w rozdziale 9.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: