Techniki internetowe

Prowadzący: Jacek Korniak

Program wykładów:

I semestr

- organizacja prezentacji WWW,

- język HTML,
- arkusze stylów CSS,
- projektowanie i tworzenie stron WWW

II semestr

- podstawy kursu PHP,

- bazy danych – monitor MySQL,
- współpraca PHP z bazą MySQL,
- zaawansowane techniki PHP i MySQL
 Kurs HTML

Zagadnienia do wykładów w I semestrze

1) wykład 1 – anatomia prezentacji WWW, organizacja i

struktury stron WWW, podstawowe znaczniki
HTML,
2) wykład 2 – tworzenie hiperpołączeń, anatomia adresu
– URL, rodzaje adresów URL,
3) wykład 3 – grafika na stronie WWW, wykorzystywanie
obrazów, kolorów i tła, animacja Marquee, pliki
dźwiękowe i wideo,
4) wykład 4 – tworzenie tabel na stronie WWW, umieszczanie
grafiki w komórkach tabel,
5) wykład 5 – tworzenie ramek i połączeń do nich, ramki
lokalne,
6) wykład 6 – mapy odsyłaczy działające po stronie klienta i
serwera, tworzenie formularzy, układy
formularzy,
7) wykład 7 – idea używania stylów, arkusze stylów w
dokumencie HTML,
8) wykład 8 – przykłady, propozycje
 Kurs HTML
Literatura

HTML 4. Biblia Tworzenie stron WWW. Tworzenie stron WWW.

Biblia Almanach
Bryan Pfaffenberger, David Crowder,
Bill Karow Rhoda Crowder Jennifer Niederst

Profesjonalny serwis Po prostu tworzenie stron Tablice informatyczne.

WWW WWW HTML
Jonathan Price, Krzyszto
Lisa Price f Pikoń Radosław Sokół
 Kurs HTML

Wykład 1

Czym jest World Wide Web (WWW) ?

World Wide Web jest globalnym, interaktywnym,
dynamicznym, wieloplatformowym, rozproszonym, graficznym,
hipertekstowym systemem informacyjnym działającym na bazie
sieci Internetu.

Czym jest hipertekst ?

Hipertekst umożliwia czytanie i poruszanie się po tekście
lub innego rodzaju informacji wizualnej w sposób nieliniowy,
zależny od tego, czego w dalszej kolejności chcemy się
dowiedzieć. W ten sposób, zamiast czytać tekst po kolei, linia
po linii, uzyskuje się informacje na dany temat, „przeskakując”
(poprzez linki) do innych tematów, w sposób, który w danej
chwili wydaje się najlepszy.
Przykładem hipertekstu może być kontekstowy system
pomocy, taki jak Pomoc Microsoft System lub HyperCard dla
komputerów Macintosh.

System informacyjny WWW jest:

globalny – umożliwia dostęp do informacji poprzez sieć na
całym świecie;
interaktywny – umożliwia wymianę informacji (np. dzięki
formularzom) pomiędzy użytkownikiem a serwerem WWW,
umożliwia komunikację z użytkownikami publikującymi strony;
 Kurs HTML

dynamiczny – umożliwia prezentowanie informacji aktualnej

(np. najnowsza wersja oprogramowania); sens istnienia
dynamicznych witryn przedstawiają gazety internetowe, nieraz
aktualizowane kilkakrotnie w ciągu dnia; ponadto zwykłe
zaprezentowanie aktualnej godziny lub daty już czyni stronę
WWW dynamiczną;
wieloplatformowy – oznacza to prosty dostęp do WWW,
używając dowolnego sprzętu, dowolnego systemu
operacyjnego i dowolnego typu ekranu;
rozproszony – oznacza to, że informacja, szczególnie
wzbogacona o grafikę i cechy multimedialne, nie jest
dostarczana przez jeden serwer WWW, lecz przez wiele takich
serwerów, w przeciwnym przypadku musiałaby zaistnieć
konieczność posiadania niewyobrażalnie dużych dysków;
graficzny – oznacza to, że WWW oprócz tekstu umożliwia
integrację z grafiką, dźwiękiem, sekwencjami wideo,
multimediami i wbudowanymi aplikacjami, przez co system
zmienia się z hipertekstowego na hipermedialny; grafika na
stronach WWW ułatwia dodatkowo nawigację (przekierowania)
do innych stron;

Czym są przeglądarki sieciowe ?

Przeglądarka sieciowa jest programem, który służy do
oglądania i poruszania się po stronach; czasem nazywana
klientem WWW;
 Kurs HTML

Jak pracuje przeglądarka sieciowa ?

Praca każdej przeglądarki jest dwutorowa: po otrzymaniu
adresu informacji, znajdującej się w sieci (URL), przeglądarka
musi uzyskać dostęp do tej informacji; aby odbierać
hipertekstowe dokumenty WWW, przeglądarka musi być zdolna
do komunikacji z serwerem za pomocą odpowiedniego
protokołu (HTTP, FTP, itd.); dodatkowo w zależności od
rodzaju, przeglądarki mogą odtwarzać pliki multimedialne,
oglądać i pracować z apletami Javy, odbierać pocztę
elektroniczną, itd.; jednak najważniejszą pracą przeglądarki jest
tłumaczenie, formatowanie i wyświetlanie dokumentu WWW,
czyli pliku zapisanego w języku HTML;

Jak pracuje serwer WWW ?

Serwer WWW to program działający na komputerze w
sieci Internet, który jest odpowiedzialny za odpowiedź na
żądania przeglądarki i wysyłanie jej odpowiednich plików; jest
on niezbędny do publikowania dokumentów w sieci; kiedy
przeglądarka wysyła żądanie pobrania pliku z serwera, najpierw
nawiązuje ona z serwerem połączenie za pomocą protokołu
http; serwer akceptuje to połączenie, wysyła zawartość
żądanych plików i przerywa łączność, wówczas przeglądarka
formatuje otrzymywane dane; serwer może jednocześnie
otrzymywać wiele żądań pobrania tych samych informacji od
wielu przeglądarek i z tym problemem musi sobie poradzić;
 Kurs HTML

Anatomia prezentacji WWW

Z anatomią prezentacji WWW wiążą się następujące
pojęcia:

 Prezentacja WWW (zbiór składający się z jednej lub wielu

stron; każda prezentacja WWW znajduje się na określonej
witrynie WWW, czyli na komputerze, którą tę prezentację
przechowuje; niektórzy twórcy stron WWW traktują
prezentację i witrynę jako jedno pojęcie),

 Witryna WWW (to system informacyjny w Internecie

zawierający jedną lub więcej prezentacji),

 Strona WWW (jest pojedynczym elementem prezentacji

WWW i zawarta jest w jednym pliku – dokumencie WWW),

 Strona główna (zwana z ang. home page, to strona, która

automatycznie ładuje się po uruchomieniu witryny,
prezentacji, wreszcie samej przeglądarki, a więc pojęcie
strony głównej ma wiele znaczeń; przyjmuje się jednak, że
strona główna jest punktem wyjścia do pozostałej części w
prezentacji WWW)
Strona
główna

Strony Prezentacja
wewnątrz
prezentacji
 Kurs HTML

Struktura organizacji dokumentów WWW

Struktura liniowa prezentacji WWW (sekwencyjna)

Strona
główna

Struktura liniowa prezentacji WWW z alternatywą

Strona
główna

Struktura mieszana prezentacji WWW (lin. - hierarchiczna)

Strona
główna
Struktura sieciowa prezentacji WWW (pajęczyna)
Nie jest zalecana !

Kurs HTML

Projektowanie prezentacji WWW

Projektowanie prezentacji WWW powinno opierać się na
dobrej organizacji przy realizacji poszczególnych etapów
projektowania, co zapewni wysoką efektywność przy pobieraniu
prezentacji, szybkość pobierania, przejrzystą nawigację,
dostępność do naprawdę potrzebnych informacji, a w
konsekwencji zadowolenie ze strony użytkownika, który
zapewne powróci do niej, jak i zareklamuje ją innym
użytkownikom.
Zatem przy projektowaniu prezentacji należy:
 zapytać siebie, do czego ma służyć prezentacja?; ze
względu na treść mogą to być: informacje osobiste, hobby
i zainteresowania, publikacje, prezentacje firm,
dokumentacje elektroniczne, katalogi towarów, wirtualne
sklepy, sondaże opinii publicznej, forum publiczne i inne;
 wyznaczyć cel prezentacji (co ma dać prezentacja? czy
jest przeznaczona do poszukiwania konkretnych
informacji? czy ma to być prezentacja komercyjna? czy ma
przynosić zyski? itd.);
 podzielić treść na główne tematy bądź rozdziały, grupując
powiązane ze sobą informacje pod jednym hasłem lub
pojęciem;
 zorganizować nawigację i dobrać odpowiednią strukturę
prezentacji tak, aby poruszanie się po niej było przejrzyste,
klarowne i nie dezorientowało użytkownika;
 zaplanować scenopis prezentacji poprzez określenie, jaka
treść znajdzie się na poszczególnych stronach; istnieje
wiele narzędzi i pakietów, które mogą być pomocne w
 tworzeniu scenopisu i zarządzaniu połączeń, pokazując w
sposób graficzny wszelkie związki pomiędzy stronami.

Kurs HTML

Czym jest HTML ?

HTML to skrót od angielskiego HyperText Markup
Language. Powstał on w oparciu o język SGML (ang. Standard
Generalized Markup Language), który jest poważnym
systemem tworzenia dokumentów. Tworząc strony WWW, nie
musisz wiedzieć zbyt wiele o SGML-u, ale znajomość
najistotniejszej jego cechy, czyli faktu, iż jest to język opisu
struktury strony a nie wyglądu konkretnych jej elementów.
Idea HTML-a polega na tym, że większość dokumentów
posiada pewne cechy wspólne, takie jak nagłówki, akapity czy
listy. Stąd też przed rozpoczęciem pisania można określić,
jakiego typu elementy będą używane i nadać im odpowiednie
nazwy.
Obecnym standardem HTML-a jest wersja 4.01 (patrz
strona internetowa http://www.w3.org/MarkUp/).
 Kurs HTML

HTML jest językiem znaczników

HTML jest językiem znaczników (ang. markup). Pisanie w
tego typu języku oznacza tyle, że praca rozpoczyna się od
napisania tekstu, do którego następnie dodawane są specjalne
znaczniki, umieszczane wokół słów, zdań i akapitów. Znaczniki
określają różne elementy strony i dają różny efekt w różnych
przeglądarkach.

Czym jest plik(dokument) HTML ?

Strony, stworzone w HTML-u to zwykłe pliki tekstowe
(ASCII), co oznacza, że nie zawierają one żadnych informacji
właściwych dla konkretnej platformy systemowej czy progra-
mowej. Mogą być odczytywane praktycznie przez każdy edytor
tekstów (co w praktyce oznacza, że mogą je odczytywać
wszystkie edytory tekstów). Plik HTML zawiera następujące
elementy:
 właściwy tekst strony,

 znaczniki HTML, określające elementy strony, jej strukturę,

sposoby formatowania i hiperpołączenia do innych stron lub

informacji innego rodzaju.

Większość znaczników ma następującą postać:

<NazwaZnacznika>tekst</NazwaZnacznika>
lub
<NazwaZnacznika>tekst

Nazwa znacznika (tu NazwaZnacznika) ujęta jest w nawiasy

kątowe.

Kurs HTML

Tworzenie strony WWW w języku HTML

Do rozpoczęcia pisania kodu w HTML-u nie jest potrzebny
serwer WWW, dostawca usług internetowych ani nawet
podłączenie do Internetu. Wystarczy tylko jakiś edytor, w którym
pisany będzie kod oraz przeglądarka, aby można było ujrzeć
efekty pracy. Cała witryna WWW, czyli strony i połączenia
między nimi, może powstać z dala od jakiejkolwiek sieci.
W najprostszym przypadku potrzebny będzie edytor
tekstów, czyli programu, który zapisuje pliki w formacie ASCII.
Ten format to zwykły tekst, niezawierający żadnego
formatowania czcionek i znaków specjalnych. W systemie
Windows dobrymi, prostymi (i darmowymi, bo dołączanymi do
systemu operacyjnego!) edytorami są takie programy, jak
Notatnik, WordPad oraz DOS Edit.
 Po utworzeniu pliku HTML należy zachować go na dysku.
W przypadku edytora typu Microsoft Word, należy pamiętać,
aby wybrać opcję „Zapisz jako” i zapisać plik w formacie
tekstowym. Wybierając nazwę pliku, zastosuj się do poniższych
reguł.
 plik powinien posiadać rozszerzenie .html (.htm), na
przykład, mojplik.html, tekst.html lub index.htm.
Większość oprogramowania wykorzystywanego do pracy
w sieci WWW wymaga tego rozszerzenia, tak więc dobrze
jest od razu wyrobić sobie nawyk używania go;
 nazwy powinny być krótkie i proste; nie używaj spacji i
znaków specjalnych, cyfry i litery w zupełności wystarczą;
 zwykle plik index.html opisuje stronę WWW, która jest
odczytywana przez przeglądarkę (serwowana przez
serwer automatycznie w pierwszej kolejności).

Kurs HTML

Oglądanie strony WWW

Po uruchomieniu przeglądarki, należy poszukać opcji
menu lub przycisku o nazwie „Otwórz plik”, „Otwórz lokalny” lub
po prostu „Otwórz”. Wybór tej opcji pozwoli na przeglądanie
lokalnego dysku. Polecenie „Otwórz plik” (lub jego odpowiednik)
powoduje, że przeglądarka odczytuje plik HTML z dysku
lokalnego, a następnie przetwarza go i wyświetla tak samo, jak
pliki otrzymywane z sieci WWW. Opcja ta umożliwia tworzenie i
testowanie stron HTML.
Jeżeli na stronie WWW czegoś brakuje lub, jeżeli cały
tekst będzie wyglądał w sposób niezamierzony, należy wrócić
do edytora tekstów (lub uruchomić opcję „Źródło”) i dokonać
odpowiednich poprawek. Należy upewnić się, czy wszystkie
znaczniki mają swoje zakończenia i czy każdy znak < posiada
swój odpowiedni znak >, a następnie zachować plik ponownie
pod tą samą nazwą.

Programy pomocne w tworzeniu plików HTML

Na rynku freeware i shareware istnieje mnóstwo
programów do edycji plików HTML. Większość z nich to edytory
tekstu, wzbogacone o przyciski lub opcje menu, które umożli-
wiają wstawianie do tekstu odpowiednich znaczników.
Programy te są bardzo pożyteczne z następujących względów:
dzięki nim nie trzeba pamiętać wszystkich znaczników i nie
trzeba tracić czasu na ich wpisywanie.
Warto zapoznać się z graficznymi edytorami stron WWW
typu WYSIWYG (ang. What You See Is What You Get), chociaż
czasami programy tego typu okazują się niewystarczające i
trzeba jednak skorzystać ze zwykłego edytora ASCII.

Kurs HTML

Podstawowe znaczniki formatujące

W HTML-u zdefiniowane są trzy znaczniki, które opisują
ogólną strukturę strony oraz dostarczają podstawowych
informacji nagłówkowych. Znaczniki te to <HTML>, <HEAD>
oraz <BODY>. Identyfikują stronę WWW w przeglądarkach lub
w innych narzędziach HTML. Mogą także zawierać
najistotniejsze informacje o stronie, na przykład, tytuł lub
nazwisko autora. Znaczniki, opisujące strukturę strony, nie mają
wpływu na jej wygląd w przeglądarce, istnieją tylko po to, aby
pomóc przeglądarkom w przetwarzaniu plików HTML.
Poniżej przedstawiono bardzo prosty przykład pliku HTML-
owego zawierającego podstawowe znaczniki:
<HTML>
 <HEAD>
<TITLE> To jest tytuł strony </TITLE>
</HEAD>
<BODY>
.... a to jest treść strony ....
</BODY>
</HTML>

A oto wynik działania przeglądarki:

Kurs HTML

Znacznik <HTML>

Pierwszym znacznikiem struktury, znajdującym się na

każdej stronie jest <HTML>. Mówi on o tym, że zawartość
odczytywanego właśnie pliku to kod, napisany w HTML-u. Cała
zawartość pliku, czyli treść i znaczniki powinny znajdować się
pomiędzy początkowym <HTML> i końcowym znacznikiem
</HTML>, tak jak w poniższym przykładzie:

<HTML>
...twoja strona....
</HTML>
Znacznik <HEAD>

Para znaczników <HEAD> ... </HEAD> wyznacza

nagłówek strony. W obrębie nagłówka znajduje się tylko kilka
innych znaczników (najczęściej tytuł strony, opisany w dalszej
części). W żadnym wypadku nie należy umieszczać w tym
miejscu treści strony. Oto typowy przykład poprawnego użycia
znacznika <HEAD>:

<HTML>
<HEAD>
<TITLE> To jest tytuł strony </TITLE>
</HEAD>
....
</HTML>

Kurs HTML

Znacznik <BODY>

Pozostała część strony (w przykładzie przedstawiona jako

„....a to jest treść strony ....”), znajduje się pomiędzy początko-
wym i końcowym znacznikiem <BODY>.

<BODY>
.... a to jest treść strony ....
</BODY>

W powyższym przykładzie widać wyraźnie, że znaczniki

<HTML> są w sobie nawzajem zagnieżdżone. Obydwa
znaczniki <BODY> i </BODY> znajdują się pomiędzy
początkowym i końcowym znacznikiem <HTML>, podobnie
sprawa ma się w przypadku znaczników <HEAD>. Wszystkie
znaczniki HTML-a działają właśnie w ten sposób — formatują
zagnieżdżone fragmenty tekstu.

Znacznik <TITLE>

Znacznik <TITLE> znajduje się zawsze w obrębie

nagłówka strony (znaczniki <HEAD>) i jego zadaniem jest
skrótowe opisanie jej treści:

<HEAD>
<TITLE> To jest tytuł strony </TITLE>
</HEAD>

Tytuł określa temat, o którym traktuje strona WWW i on

właśnie wielu przeglądarkach pojawia się na pasku tytułowym
okna programu (m.in. Netscape i Microsoft Internet Explorer).

Kurs HTML

Nagłówki: znaczniki <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

Nagłówki służą do podziału tekstu na części, tak jak

książka dzielona jest na rozdziały. Liczby określają poziom
nagłówka (od H1 do H6). Nagłówki nie są numerowane
podczas wyświetlania. Różnią się między sobą wielkością i
atrybutami czcionki (pogrubienie, podkreślenie, wielkie litery) i w
ten sposób odróżniają się od reszty tekstu. A oto przykład:
 Kurs HTML

… i kod dokumentu HTML:

<HTML>
<HEAD>
<TITLE> To jest tytuł strony </TITLE>
</HEAD>
<BODY>
<H1> Nagłówek H1 </H1>
<H2> Nagłówek H2 </H2>
<H3> Nagłówek H3 </H3>
 <H4> Nagłówek H4 </H4>
<H5> Nagłówek H5 </H5>
<H6> Nagłówek H6 </H6>
</BODY>
</HTML>

Akapity: znacznik <P>

W pierwszej wersji HTML-a znacznik <P> był zdefiniowany

jako pojedynczy. Nie było znacznika zamykającego (</P>), a
<P> oznaczał koniec, nie początek akapitu. Przykład:
…
<BODY>
<H3> To będzie nowy akapit </H3>
<P>W pierwszej wersji HTML-a znacznik
akapitu był zdefiniowany jako
pojedynczy. Nie było znacznika
zamykającego. A to ci heca! </P>
<P>A oto kolejny akapit, czy widać o co tu
chodzi?</P>
</BODY>
</HTML>

Kurs HTML

… i efekt w przeglądarce:
Listy: znaczniki <UL>, <OL>, <LI>, <DD>, <DT>, <MENU>,
<DIR>

W HTML 4.01 zdefiniowane są cztery typy list:

 listy numerowane, oznaczane kolejnymi liczbami,
 listy wypunktowane, oznaczone kropkami lub innymi
symbolami,
 listy definicji, gdzie każdy element składa się z pojęcia
oraz definicji, a pojęcie jest w jakiś sposób wyróżnione,
 listy menu i katalogów

Kurs HTML
Listy numerowane
 Listy numerowane są objęte znacznikami <OL>...</OL>
(OL oznacza skrót od ang. Ordered List, lista uporządkowana),
a każdy element listy rozpoczyna się od znacznika <LI>
(ang. List Item, element listy). Przykład:

… i kod dokumentu HTML:

...
<BODY>
<H3> Lista numerowana </H3>
<OL>
<LI> element pierwszy
<LI> element drugi
<LI> element trzeci
</OL>
</BODY>
</HTML>

Kurs HTML
 Listy numerowane można dopasować do własnych potrzeb
na dwa sposoby: można określić schemat numeracji oraz
liczbę, od której ma się ona rozpocząć. W HTML-u 3.2 został
zdefiniowany atrybut TYPE, który umożliwia wybór jednego z
pięciu możliwych schematów numerowania:
 "1": standardowa numeracja za pomocą liczebników
arabskich (1, 2, 3 itd.),
 "a": numeracja za pomocą kolejnych, małych liter alfabetu
(a, b, c, d itd.),
 "A": numeracja za pomocą kolejnych, wielkich liter
alfabetu (A, B, C, D itd.),
 "i": numeracja za pomocą kolejnych liczb alfabetu
rzymskiego, zapisanych małymi literami (i, ii, iii, iv itd.),
 "I": numeracja za pomocą kolejnych liczb alfabetu
rzymskiego, zapisanych wielkimi literami (I, II, III, IV itd.).

Schemat numeracji zapisuje się wewnątrz znacznika <OL>

w następujący sposób: <OL TYPE= "a">. W sytuacji, gdy
atrybut TYPE nie zostanie określony, przyjmowana jest standar-
dowa wartość "1". Przykład:
...
<BODY>
<H3> Lista numerowana </H3>
<OL TYPE="a" START=3>
<LI> element pierwszy
<LI> element drugi
<LI> element trzeci
</OL>
</BODY>
</HTML>

Kurs HTML
… i efekt w przeglądarce:

Listy wypunktowane

W listach wypunktowanych kolejność występowania

elementów nie ma najmniejszego znaczenia. Z punktu widzenia
HTML-a lista wypunktowana wygląda prawie tak samo jak lista
numerowana, z tym, że ta pierwsza zawarta jest pomiędzy
znacznikami <UL>…</UL>, a nie <OL>. Elementy listy
oznaczone są znacznikiem <LI>, dokładnie tak jak w listach
numerowanych. Przykład:
...
<UL>
<LI> element pierwszy
<LI> element drugi
<LI> element trzeci
</UL>
 Kurs HTML

… i efekt w przeglądarce:

Atrybut TYPE pozwala na zmianę tego symbolu w części

przeglądarek. Zgodnie ze specyfikacją HTML 3.2. atrybut TYPE
może przyjmować trzy następujące wartości:
 "disc": kółko lub kropka, jest to wartość przyjmowana
standardowo,
 "square": mały kwadrat,
 "circle": większość przeglądarek wyświetla ”disc”
jako wypełnione kółko, ale w tym wypadku powinno
pojawić się puste.

Na przykład:

<UL TYPE="square">
spowoduje pojawienie się w liście małych kwadratów.

Kurs HTML

Listy definicji

Listy definicji różnią się nieznacznie od pozostałych. Każdy

element listy składa się bowiem z dwóch, a nie jednej części:
 pojęcia,
 definicji.

Każda część elementu listy definicji posiada swój

znacznik: <DT> oznacza pojęcie (skrót od ang. definition
term), a <DD> definicję (skrót od ang. definition definition).
Obydwa te znaczniki są pojedyncze i występują zazwyczaj
parami, chociaż większość przeglądarek radzi sobie bez
problemów z samym pojęciem czy też samą definicją. Cała
lista definicji objęta jest znacznikami <DL>…</DL> (skrót od
ang. definition list).

A oto przykład:
...
<DL>
<DT>Bazylia</DT>
<DD>Roślina jednoroczna. Osiąga wysokość
czterech stóp, jej drobne białe kwiatki
pachną bosko.</DD>
<DT>Oregano</DT>
<DD>Roślina wieloletnia. Wypuszcza dużo
podziemnych pędów i trudno ją przesadzić w
inne miejsce.</DD>
<DT>Kolendra</DT>
<DD>Roślina jednoroczna. Lubi łagodną aurę
wiosny i jesieni.</DD>
</DL>
...

Kurs HTML

… i efekt w przeglądarce:

Listy menu i katalogów

Listy menu <MENU> i katalogów <DIR> to listy lub krótkie

akapity, niepoprzedzone żadnymi znakami lub numerami.
Niestety producenci przeglądarek nie zaimplementowali dotąd
tego rozwiązania. Oto przykłady:

<H3> Listy menu </H3> <H3> Listy katalogów

<MENU> </H3>
<LI> Zupa <DIR>
 <LI> Stek <LI> Zupa
<LI> Ziemniaki <LI> Stek
<LI> Surówka <LI> Ziemniaki
</MENU> <LI> Surówka
</DIR>

Kurs HTML

Listy zagnieżdżone

Zagnieżdżanie list w HTML-u działa bardzo sprawnie —

wystarczy wstawić całą listę jako element innej. Lista zagnież-
dżona w ten sposób staje się elementem listy macierzystej i jest
wyświetlana z odpowiednim wcięciem.

<UL>
<LI>gruba</LI>
<LI>cienka</LI>
<UL>
<LI>ciągła</LI>
<LI>kreskowa</LI>
<LI>punktowa</LI>
<LI>dwupunktowa</LI>
<LI>falista</LI>
</UL>
<LI>bardzo gruba</LI>
</UL>

… i efekt
 Kurs HTML

Komentarze
Istnieje możliwość wstawiania komentarzy do kodu
napisanego w języku HTML. Mogą one służyć opisowi
elementów strony, mogą również w pewien sposób określać jej
status. Tekst zawarty w komentarzach jest ignorowany przez
przeglądarkę, co oznacza, że ich treść nigdy nie pojawia się na
ekranie. Składnia komentarza jest następująca:

<!-- To jest komentarz -->

Style znaków
Style znaków to znaczniki, które służą do zmiany wyglądu
pojedynczych wyrazów czy nawet znaków, będących częściami
składowymi innych elementów HTML-a. Ponadto:
  określają wygląd czcionki (pogrubiona, kursywa, czcionka
maszynowa),
 wstawiają do tekstu znaki specjalne (znak praw autorskich,
litery akcentowane itp.),
 tworzą tekst preformatowany (z zachowaniem spacji i
tabulacji),
 wyrównują tekst do lewej, prawej i środkują go,
 zmieniają rodzaj i rozmiar czcionki,
 tworzą inne elementy stron w HTML-u, jak, na przykład,
linie poziome, adresy i cytaty.

Do zmiany wyglądu zbioru znaków, znajdujących się w

tekście, służą dwa rodzaje znaczników: style logiczne i fizyczne.

Kurs HTML
Style logiczne

Znaczniki z grupy stylów logicznych określają, w jaki

sposób dany fragment tekstu ma zostać w dokumencie
wykorzystany, a nie wyświetlony. Są one w zasadzie bardzo
podobne do znaczników akapitu czy nagłówków, nie wskazują
bowiem konkretnie, w jaki sposób tekst ma zostać
sformatowany, ale jaka jest jego rola w dokumencie. Oto one:

<EM> Znacznik ten mówi, że tekst powinien być w jakiś

sposób wyróżniony, czyli sformatowany inaczej niż
reszta dokumentu. W przeglądarkach graficznych
zwykle do tego celu wykorzystywana jest kursywa.

<STRONG> Znaki objęte tym znacznikiem powinny być

wyróżnione jeszcze wyraźniej, niż ma to miejsce w
wypadku <EM>. Większość przeglądarek
wykorzystuje do tego celu pogrubienie.
<CODE> Tekst objęty taką parą znaczników to fragment
kodu (na przykład, programu lub po prostu HTML-a)
i powinien być wyświetlony czcionką o stałej
szerokości znaku (w graficznych przeglądarkach
jest to Courier).

<SAMP> Ten znacznik oznacza tekst przykładowy, który jest

wyświetlany bardzo podobnie do <CODE>.

<KBD> W tym wypadku chodzi o tekst, który powinien być

wpisany przez użytkownika z klawiatury (stąd
nazwa znacznika, która jest skrótem od
ang. keyboard — klawiatura).

Kurs HTML

<VAR> Ten znacznik wskazuje nazwę zmiennej lub innego

elementu, który powinien zostać zastąpiony przez
jakąś wartość. Z reguły jest wyświetlany kursywą
lub podkreślony.

<DFN> Znacznik definicji. Jest on wykorzystywany do

oznaczania słowa, które będzie lub właśnie zostało
zdefiniowane.

<CITE> Za pomocą tego znacznika oznacza się krótkie

cytaty.

Style fizyczne
 Obok stylów logicznych, opisanych w poprzednim punkcie,
funkcjonuje także inna grupa znaczników, które pozwalają na
ściśle określoną zmianę wyglądu danego fragmentu tekstu
(pogrubienie, kursywa, jednakowa szerokość liter). Znaczniki te
noszą nazwę stylów fizycznych. Oto one:

<B> pogrubienie,
<I> kursywa,
<TT> czcionka maszynowa (znaki o jednakowej
szerokości),
<U> podkreślenie (zarzucony w wersji 4.0),
<S> przekreślenie (zarzucony w wersji 4.0),
<BIG> czcionka większa od reszty tekstu,
<SMALL> czcionka mniejsza od reszty tekstu,
<SUB> indeks dolny,
<SUP> indeks górny

Kurs HTML

Tekst preformatowany
Tekst preformatowany jest wyświetlany (przynajmniej
przez przeglądarki graficzne) za pomocą czcionki o stałej
szerokości znaku (Courier). Tego typu formatowanie nadaje się
doskonale do prezentacji fragmentów kodu programu, gdy
chcemy zachować wszystkie wcięcia i komentarze. Przykład:

<PRE>
( )
Muu (oo)
\/-------\
|| | \
||---W|| *
 || ||
</PRE>

A oto efekt ...

Kurs HTML

Linie poziome
Znacznik <HR> występuje w HTML-u 2.0 bez znacznika
zamykającego, jak również bez żadnych atrybutów, jednakże w
wersji 3.2 poszerzono nieco możliwości kontroli wyglądu
poziomej linii, oddzielającej od siebie fragmenty strony WWW,
dodając kilka nowych atrybutów.

Atrybut SIZE określa grubość linii, podawaną w pikselach.

Standardową wartością jest 2 i jest to również najmniejsza
możliwa grubość.
 Atrybut WIDTH określa długość linii w poziomie. Może ona
zostać podana w pikselach, ale też jako określony procent
aktualnej szerokości ekranu (30 procent, 50 procent), co ozna-
cza, że jej faktyczna długość będzie się zmieniała wraz ze
zmianą rozmiarów okna.

Jeżeli linia nie będzie wypełniała całej szerokości ekranu,

można określić jej położenie, służy do tego atrybut ALIGN.
Można więc dosunąć linię do lewej strony ekranu
(ALIGN="left"), do prawej (ALIGN="right") lub też ją
wyśrodkować (ALIGN="center"). Standardowo linie poziome
są wyśrodkowane.

<H2>2 piksele</H2>
<HR size="2" />
<H2>4 piksele</H2>
<HR size="4" />
<H2>8 pikseli</H2>
<HR size="8" />

Kurs HTML

… i efekt w przeglądarce:
Łamanie linii
Znacznik <BR> powoduje przełamanie linii, co oznacza, że
tekst następujący po nim jest wyświetlany przez przeglądarkę
od nowej linii, czyli od lewego marginesu, przy czym jest to
margines odpowiedni dla elementu strony, w którym wystąpił
<BR>.

Kurs HTML

Czcionki i ich rozmiar

 Najpowszechniejszym zastosowaniem znacznika <FONT>
jest zmiana rozmiaru czcionki pojedynczego znaku. Wybrany
tekst znajduje się pomiędzy znacznikami <FONT> i </FONT>, a
atrybut SIZE przy pierwszym z nich określa żądany rozmiar.
SIZE może przyjmować wartości od 1 do 7, gdzie 3 jest
wartością standardową. Wartością atrybutu FACE jest zbiór
nazw czcionek, zapisanych w cudzysłowach i oddzielonych
przecinkami. Przeglądarka, po napotkaniu takiego znacznika,
będzie przeglądać swój lokalny system operacyjny w
poszukiwaniu czcionki o podanej nazwie. Jeżeli nie znajdzie
pierwszej z nich, zacznie szukać drugiej, potem trzeciej, aż
znajdzie tę, która rzeczywiście będzie w systemie
zainstalowana. Aby uzyskać taki efekt:

należy umieścić w dokumencie następujący kod:

<P>Znudził Cię stary wygląd czcionki?

<FONT SIZE=5>Zmień go.</FONT></P>
<P><FONT FACE="Futura,Helvetica">Sans
Serif, to czcionka bez małych dodatków
na zakończeniach każdego znaku.
</FONT></P>
Treść wykładu została sporządzona na podstawie:

Lemay L., HTML 4, Wyd. HELION, W-wa 1998.