ABC Języka HTML

Zalecany podręcznik

ABC – języka HTML

Maria Sokół

Wydawnictwo HELION, Gliwice 2002

rok.

ISBN: 83-7197-835-9

World Wide Web i strona

WWW

• World Wide Web (w skrócie WWW) to sieć komputerów

nazywana popularnie Internet. Tworzą ją komputery z

całego świata. Komputery te porozumiewają się za

pośrednictwem protokołu HTTP.

• Wszelkie informacje umieszczane w sieci zapisane są w

dokumentach zwanych stronami WWW. Strona WWW to

dokument utworzony za pomocą języka HTML.

• Gotowe strony WWW zapisywane są na komputerze

zwanym serwerem. Serwer jest odpowiedzialny za

realizację żądania przesłania dokumentu do tego

komputera w sieci, który wystąpił z takim żądaniem.

• Aby przesłać strony WWW, konieczne jest uzyskanie

połączenia z Internetem i uruchomienie specjalnego

programu zwanego przeglądarką. Przeglądarkę należy

poinformować, gdzie szukać danych podając adres

Internetu URL.

Znaczniki języka HTML

• Znaczniki występują w HTML w zasadzie w

parach:

</znacznik zamykający>

• Od zasady występowania znaczników w parach

istnieją wyjątki. Przykładowo:

<p> - znacznik akapitu. Wprawdzie istnieje

znacznik zamykający </p>, ale pominięcie go nie

spowoduje błędu w działaniu strony. Stosuj ten

znacznik, aby rozpocząć nowy akapit.

• <br> - znacznik nowego wiersza.
• <hr> - znacznik umożliwiający dodanie linii

poziomej w tekście strony.

Przeglądarka

• URL – to skrót od Uniform Resource Locator, co

można przetłumaczyć jako „uniwersalny
identyfikator zasobów”.

• Przykład adresu URL to:

http://www.eu.edu.pl/

• Adres URL wpisujemy w polu adresowym

przeglądarki. Przeglądarka wysyła do komputera
(serwera), którego adres został wpisany, wiadomość
– żądanie prz esłania strony.

• Serwer pobiera odpowiednie dane i przekazuje je do

występującego – o te dane komputera. Dane te
zakodowane są w języku HTML.

• Przeglądarka interpretuje otrzymany kod HTML, a

następnie wyświetla tekst na ekranie komputera.

Elementy i atrybuty

• Parę znaczników (lub znacznik pojedynczy, jeśli

nie ma on znacznika zamykającego) nazywa się

także elementem.

• Element pozbawiony znacznika zamykającego

nazywa się elementem pustym.

• Element pusty może zawierać jedynie atrybuty.
• Atrybuty znaczników dostarczają dodatkowych

informacji o elementach strony, definiowanych

poprzez znaczniki.

• Jeśli chcemy, aby strona miała tło w kolorze

zielonym, wystarczy że poinformujemy o tym

przeglądarkę dodając do znacznika <body>

odpowiedni atrybut <body bgcolor=”green”>,

Podstawowa struktura

strony

<html>
<head>
<title>
Próba
</title>
</head>
<body>
To jest nasza pierwsza wspólna strona!!!
</body>
</html>

Elementy dokumentu HTML

• Pierwszym znacznikiem w naszym dokumencie HTML, jest

<html>. Informuje on przeglądarkę, że jest to początek

strony HTML. Ostatnim znacznikiem dokumentu jest

znacznik </html>. Jest to znacznik zamykający dokument –

informujący przeglądarkę, że na nim kończy się strona.

• Pierwszym elementem strony jest nagłówej. Jego ramy

wyznacza para znaczników <head> </head>. Pomiędzy

tymi znacznikami jest umieszczony kod definiujący tytuł

strony. W żadnym przypadku, nie należy pomiędzy tymi

znacznikami umieszczać treści strony.

• Zawartość nagłówka nie jest wyświetlana na stronie WWW.

Tekst umieszczony pomiędzy znacznikami <title> </title>,

pojawia się na pasku tytułu okna. Oczywiści tytuł nie może

być zbyt długi.

• Strona WWW ma swoją zawartość, umieszczaną pomiędzy

znacznikami <body> </body>. Jest to tzw. obszar treści.

Element meta

• Element head zawiera ogólne informacje na temat dokumentu.

Umieszczone są one między innymi w znaczniku <meta>.

Najczęściej są to informacje przydatne przeglądarkom lub słowa

kluczowe wykorzystywane przez serwisy wyszukujące.

• W znaczniku <meta> można przykładowo umieścić adres URL,

pod który przeglądarka ma się skierować, aby wyświetlić nową

wersję strony WWW lub opis dokumentu.

• Jak wiemy atrybuty opisują dokument i dostarczają słów

kluczowych. Przykładowo atrybut name określa sposób opisu

dokumentu dostarczony w atrybucie content.

• Oto przykład elementu meta, który definiuje opis strony:

poświęcona kotom”>

•

Element meta umożliwia również umieszczanie

informacji o autorze strony, dacie ostatniej

modyfikacji, stosowanym oprogramowaniu, itp.

Inne zastosowania atrybutu

meta

•

Kierowanie użytkownika pod nowy adres URL

<html><head><meta http-equiv=”Refresh”

content=”5;url=http://www.adres.com </head>

<body><p>Przepraszam! Już mnie tu nie ma! Nowy

URL to: <a href=

http://www.adres.com

>http://www.adres.com</a></p>

<p>Za kilka sekund zostaniesz skierowany pod

nowy adres.</p>

<p>Jeśli komunikat wyświetlany jest dłużej niż 5

sekund, kliknij to połączenie</p></body></html>

•

Kodowanie polskich znaków. Definiujemy stronę kodową:

content=”text/html; charset=ISO-8859-2”>

• Należy korzystać z edytora, który prawidłowo koduje

polskie litery. Takim edytorem jest Webber.

Utrwalenie

World Wide Web (w skrócie WWW) to sieć komputerów

nazywana popularnie Internet.

Informacje dostępne są w Internecie w postaci

dokumentów HTML, zwanych stronami WWW.

Strony WWW umieszczane są na komputerach zwanych

serwerami.

Aby przeglądać strony WWW, koniecznym jest nawiązanie

połączenia z Internetem i następnie uruchomienie

specjalnego programu nazywanego przeglądarką.

URL – to skrót od Uniform Resource Locator, co

tłumaczymy jako „uniwersalny identyfikator zasobów”.

Przykładem adresu URL jest

http://www.dobrastrona.com/

Dane które trafiają do przeglądarki, są zakodowane w

języku HTML, który informuje przeglądarkę informacjami

zawartymi w znacznikach – jak ma obsłużyć pobrane

dane.

Utrwalenie

7. Znaczniki to polecenia języka HTML umieszczone w tzw.

nawiasach francuskich. Ich postać jest następująca:

<znacznik otwierający> tekst </znacznik zamykający>

8. Wielkość liter przy pisaniu znaczników w HTML nie ma

znaczenia. W przypadku języka XHTML znaczniki należy

pisać małymi literami.

9. Dokument HTML otwiera znacznik <html>, a zamyka

znacznik </html>.

10. Podstawowe elementy strony WWW to obszar nagłówka

oraz obszar treści (sekcja head i sekcja body).

11. Obszar nagłówka wyznaczają znaczniki <head> i

</head>.

12. Zawartość strony WWW, czyli tekst, obrazy, połączenia

itp., jest umieszczony pomiędzy znacznikami <body> i

</body>.

Utrwalenie

13. Element head zawiera ogólną informację na temat

dokumentu. Umieszczone są one w znaczniku <meta>.

Najczęściej są to informacje przydatne przeglądarkom lub

słowa kluczowe wykorzystywane przez serwisy

wyszukujące. W znaczniku <meta> można na przykład

umieścić adres URL, pod który przeglądarka ma się

skierować, aby wyświetlić nową wersję strony WWW lub

opis dokumentu. Można także umieścić nowy adres URL,

pod który użytkownik zostanie automatycznie skierowany

po określonym czasie.

14. Stronę kodową ISO-8859-2 (polskie litery!) definiuje się w

elemencie meta:

charset=ISO-8859-2”>

Znaczniki HTML

• Nagłówki, ta jak w dokumencie utworzonym w

edytorze Word, dzielą tekst na części, a dzięki temu,
że nadają tekstowi rzucający się w oczy wygląd,
zwracają uwagę czytelnika.

• Aby przekształcić fragment tekstu w nagłówek,

wystarczy zawrzeć go między znacznikami
nagłówka, tak jak w tym przykładzie:
<h1> To jest nagłówek pierwszego poziomu </h1>

• Do dyspozycji mamy sześć rozmiarów nagłówka,

czyli obok pary <h1></h1>, mamy jeszcze:
<h2></h2>, <h3></h3>, <h4></h4>,
<h5></h5>, <h6></h6>.

• Omówimy z kolei przykład używania znaczników

nagłówkowych.

Znaczniki HTML

• Nagłówek jest wyrównany do lewego marginesu. Żeby

umieścić nagłówek na środku strony, należy użyć
znacznika <center> lub dodać atrybut w znaczniku
align=”center”
<center><h2>Twój nagłówek</h2></center>
<h2 align=”center”>Twój nagłówek</h2>

• Akapit jest definiowany za pomocą pary znaczników

<p></p>.

• Zróbmy ćwiczenie z wpisywaniem tekstu, na stronie

WWW.

• Pamiętaj o zasadach stosowania kilku znaczników do tego

samego tekstu:
poprawnie <b><i><tt>text</tt></i></b>
niepoprawnie <b><i><tt>text</tt></b></i>

Trzy rodzaje list

• Lista wypunktowana – definiuje ją para znaczników

<ul></ul> pomiędzy które wstawia się pozycje listy

ograniczane parą znaczników <li></li>. Kropka to

domyślny typ wypunktowania, żeby ją zmienić należy

użyć atrybut type znacznika <ul> równy ”circle” albo

”square”.

• Lista numerowana – definiuje ją para znaczników

<ol></ol> pomiędzy które wstawia się pozycje listy

ograniczone parą znaczników <li></li>. Cyfra to

domyślny typ wypunktowania, żeby ją zmienić należy

użyć atrybut type znacznika <ol> równy: ”a” dla małych

liter alfabetu, ”A” dla dużych liter alfabetu, itp.

• Lista definicji służy do prezentacji terminów wraz z

definicjami. Listę otwiera znacznik <dl> i zamyka

znacznik </dl>. Terminy wstawia się za pomocą pary

<dt></dt>, zaś ich definicje za pomocą pary <tt></tt>.

Utrwalenie

1. Atrybuty opisują właściwości elementów strony WWW.

Definiuje się je za pomocą par: atrybut=”wartość” i

umieszcza zawsze w znaczniku otwierającym danego

elementu HTML. Wartość należy podawać w

cudzysłowie – pojedynczym (‘ ’) lub podwójnym (” ”).

2. Aby przekształcić tekst w nagłówek, należy zawrzeć go

między znacznikami nagłówka, <hn> - </hn> (n –

oznacza poziom nagłówka), umieszczonymi w sekcji

body dokumentu.

3. W języku HTML istnieje sześć poziomów nagłówka: h1,

h2, h3, h4, h5 i h6. Poziom ważności nagłówka maleje

wraz ze wzrostem jego numeru.

4. Nagłówek może być dowolnie długi.
5. Aby wyśrodkować nagłówek, znacznik nagłówka należy

zagnieździć w obrębie znacznika <center>, lub dodać

atrybut w znaczniku nagłówka align=”center”.

Utrwalenie

6. Akapit tekstu definiowany przez parę znaczników <p> -</p>

umieszczamy w obrębie znaczników <body> - </body>.

7. Aby zwiększyć odstęp między akapitami lub wprowadzić

odstęp w danym akapicie, można użyć znacznika <br>.

8. Aby zachować istniejący układ tekstu, w którym użyto

dodatkowych odstępów i łamań wierszy, można skorzystać z
pary znaczników <pre> Tekst preferowany </pre>.

9. Aby zastosować do tekstu formatowanie, takie jak

pogrubienie, kursywa, indeks dolny lub górny, można
formatowany tekst umieścić między parą znaczników
formatujących.

10. Do tego samego fragmentu tekstu można zastosować

jednocześnie różne style, pamiętając jednak o znacznikach
zamykających i poprawnej kolejności znaczników.

Utrwalenie

11.

Znacznik definiujący linię poziomą to <hr>. Nie ma on

znacznika zamykającego.

12.

Listy numerowane to listy, których elementy są

numerowane. Takie listy są objęte znacznikami <ol> -

</ol>, a każdy element listy zaczyna się od znacznika

<li>.

13.

Listy wypunktowane to listy, których elementy są

poprzedzane znakiem wypunktowania. Takie listy są

objęte znacznikami <ul> - </ul>, a każdy element listy

zaczyna się od znacznika <li>.

14.

Listy definicji to listy, w których mamy parę składowych:

pojęcie – definicja. Takie listy są objęte znacznikami

<dl> - </dl>, a każde pojęcie znajduje się między

znacznikami <dt> - </dt>, zaś definicja znajduje się

pomiędzy znacznikami <dd> - </dd>.

Kaskadowe arkusze stylów

• Kaskadowe arkusze stylów CSS (Cascading Style Sheets)

służą do definiowania sposobu wyświetlania elementów

HTML. Pozwalają między innymi, określać rozmiar i kolor

czcionki czy też definiować odstępy i rozmieszczenia

tekstu oraz obrazów na stronie.

• Znaczniki HTML zostały pierwotnie zaprojektowane jako

narzędzia definiujące zawartość dokumentu. Znacznik

nagłówka określał „To jest nagłówek”, znaczni akapitu

stwierdzał „To jest akapit tekstu”, znacznik tabeli mówił:

„To jest tabela”, itd.

• Wraz z rozbudową możliwości przeglądarek zaczęły

pojawiać się nowe znaczniki i atrybuty, co utrudniało w

szczególności wprowadzanie aktualizacji stylów w

istniejących stronach WWW.

• Z tego powodu konsorcjum W3C wprowadziło CSS w

specyfikacji HTML 4.0. Z kaskadowymi arkuszami stylów

wiążą się dwa istotne pojęcia: dziedziczenie stylów i ich

kaskadowy charakter.

CSS i ich rodzaje

• Kaskadowe arkusze stylów to mechanizm definiujący

formatowanie dla danej strony WWW przy zastosowaniu
złożonych stylów, które przeglądarka zinterpretuje w
określonym porządku – zwanym kaskadą.

• Rozróżniamy trzy rodzaje arkuszy stylów:

– Definicja stylu pojawia się w konkretnym elemencie

strony WWW, wówczas mówimy o stylu wpisanym w
element dokumentu.

– Definicja stylu pojawia się w obrębie elementu head

strony, taki arkusz stylów nazywamy osadzonym w
dokumencie HTML.

– Definicja styli zawarta jest w oddzielnym dokumencie

- pliku zewnętrznym typu .css.

Stylów wpisany

• Oto przykład rzeczywistej definicji stylu

<!—

body {font-family: Verdena, Arial, Helvetica:}

-->

</style>

• Selektorem nazywamy znacznik lub element, zaś

własnością jego atrybut, któremu zmieniamy

przypisując mu nową wartość, np.:

body {color: black}

• Jeżeli wartość ma postać wielowyrazową, np. sans

serif, umieszczamy ją w cudzysłowie

p {font-family: ”sans serif”}

• Styl wpisany jest wprowadzony w wybranym

znaczniku i nie ma wpływu na pozostałe znaczniki

dokumentu.

Osadzony arkusz stylów

• Osadzony arkusz stylów jest zapisywany według tych

samych zasad co styl wpisany.

• W jednej definicji stylu można określić wiele

właściwości:
p
{
text-align: center;
color: black;
font-family: Arial
}

• Jedną właściwość można przypisać wielu elementom:

h1, h2, h3, h4, h5, h6
{
color: red
}

Dalej o arkuszu stylów

•

Atrybut id pozwala oznaczyć elementy, ale nazwa musi być
jednoznaczna. W dokumencie może istnieć tylko jeden
element o danym id:
<p id=”wstep”> Do tego akapitu zostaną zastosowane
ustawienia stylu zdefiniowanego w definicji id o nazwie
wstep.</p>

•

Styl zostanie zastosowany tylko do elementu p o
id=”wstep”
p#wstep
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Zewnętrzny

arkusz

stylów

/* Wartości domyślne dla całego dokumentu */

recipe

{

font-family: "Times New Roman", serif;
font-size: 18pt
}

/* Tworzenie nagłówka z nazwą dania */

dish

{
display: block;
font-family: Arial, sans-serif;
font-size: 20pt;
font-weight: bold;
text-align: center
}

/* Lista punktowania */

ingredient

{display: list-item}

/* Formatowanie obu pozycji jako akapitów */

directions

story

{

display: block;
margin-top: 12pt;
margin-left: 4pt
}

Utrwalenie

1. Kaskadowe arkusze stylów CSS służą do definiowania

sposobu wyświetlania elementów dokumentu HTML.

Pozwalają korzystać ze złożonych, które przeglądarka

zinterpretuje w określonym porządku, zwanym kaskadą.

2. Arkusze stylów mogą być stosowane w odniesieniu do

konkretnego elementu HTML (mówimy wówczas o stylu

wpisanym), w odniesieniu do całego dokumentu HTML

(takie arkusze nazywamy osadzonymi) lub mogą

rezydować w pliku zewnętrznym (wtedy jest to

zewnętrzny arkusz stylów).

3. Atrybut style pozwala zastosować arkusz stylów do

konkretnego elementu. Ogólna postać stylu wpisanego

jest następująca: <zncznik style=”właściwość: wartość;

”>.

4. Styl wpisany jest wprowadzany w wybranym znaczniku i

nie ma wpływu na pozostałe znaczniki.

Utrwalenie

5. Osadzony arkusz stylów to definicja stylu umieszczona

między znacznikami <style> i </styl>. Element style

powinien znaleźć się w nagłówku dokumentu:

<head>

<--!

Selektor{właściwość: wartość}

-->

</style>

</head>

6. Selektorem nazywa się definiowany znacznik lub element;

właściwość to jego atrybut. Właściwość i wartość

rozdzielone są dwukropkiem oraz zawarte w nawiasach

klamrowych.

7. Aby określić w definicji stylu kilka właściwości, należy je

rozdzielić średnikami, na przykład:

p {text-align: center; color: red}

Utrwalenie

8. Znaczniki komentarza html obejmują wszystkie

znaczniki i właściwości CSS – dzięki temu
przeglądarki, które nie potrafią obsługiwać arkuszy
stylów, potraktują kod jako komentarz.

9. W definicji stylu elementy (selektory) można

grupować. Selektory w grupie oddzielone są
przecinkami, na przykład: h1, h2 {color: red}

10. Komentarze CSS są bardzo przydatne przy

ewentualnej edycji arkusza stylów. Oto ich
postać: /* To jest komentarz CSS */

11. Plik .css można utworzyć w dowolnym edytorze. Plik

nie powinien zawierać znaczników HTML.

Tabele HTML

• Tabela HTML za pomocą wierszy i kolumn komórek

pozwala na sterowanie między innymi układem:

– Danych
– Formularzy

• Każda tabela może mieć swój podpis, który jest

umieszczany pomiędzy parą znaczników: <caption>

</caption>.

• Dłuższe opisy możemy dołączać do tablicy za

pomocą pary znaczników: <summary> </summary>.

• Konsorcjum W3C zaleca co prawda unikania używania

tabel jako szablonu układu dokumentu, niemniej

jednak w pewnych sytuacjach, jak np. w formularzach

stosowanych w PHP5 rola jako szablonu formularza

jest niezastąpiona.

Przykład prostej tabeli HTML

<html>

<head>

<title>Tabela</title>

<h1>Prosta tabela w HTML</h1>

</head>

<body>

<caption><h2>Przykład

tabeli</h2></caption>

<tr>

<th>Nagłówek - komórka1</th>

<th>Nagłówek - komórka2</th>

</tr>

<tr>

<td>Wiersz1 - komórka1</td>

<td>Wiersz1 - komórka2</td>

</tr>

<tr>

<td>Wiersz2 - komórka1</td>

<td>Wiersz2 - komórka2</td>

</tr>

</table>

</html>

Przykład prostej tabeli w HTML

Nagłówek -

komórka1

Nagłówek -

komórka2

Wiersz1 - komórka1

Wiersz1 - komórka2

Wiersz2 - komórka1

Wiersz2 - komórka2

Formularze HTML

• Formularze HTML są jednym z podstawowych sposobów

gromadzenia przez skrypty PHP5 informacji od
użytkowników odwiedzających dany serwis.

• Skrypty PHP5 odbierają informacje nadesłane z

formularza HTTP i na ich podstawie potrafią podjąć
odpowiednie działania.

• W dokumencie HTML formularze są definiowane za

pomocą znaczników: <form> </form>. Cała zawartość
formularza musi się mieścić pomiędzy powyższymi
znacznikami.

• Element form posiada kilka atrybutów, które między

innymi określają, w jaki sposób dane z formularza
zostaną przekazane przez przeglądarkę oraz jaka akcja
powinna być podjęta w trakcie przekazywania
formularza.

Podstawowe atrybuty elementu

form

• Atrybut action – atrybut obowiązkowy. Informuje

przeglądarkę, jaką akcję należy podjąć. W naszym

przypadku atrybut ten zawiera nazwę skryptu PHP5, który

będzie odpowiadał za przetworzenie danych z

formularza.

• Atrybut method – atrybut może przyjmować wartość GET

(domyślna) lub POST, w zależności w jaki sposób chcemy

przekazać dane z formularza.

• Atrybut enctype – atrybut określa rodzaj przekazanej z

formularza zawartości, jeżeli dane przekazywane są

metodą POST.

<form action=‘

akcja_do_wykonania

’ method=‘

sposób-

przekazywania

’ enctype=‘

sposób_kodowania

’>

…….

</form>

Pola formularza

• Formularz, którego definicję w kodzie HTML rozpoczynamy

elementem form, musi posiadać pola, do których osoba

obsługująca formularz będzie wprowadzała dane.

• Element input jest uniwersalnym elementem formularza.

• W zależności od wartości atrybutu type w kodzie HTML,

element input - może opisywać różne rodzaje pól

formularza.

• Wartość atrybutu type elementu input - pozwala na

tworzenie jednego z ośmiu dostępnych typów pól

formularza.

• Jeżeli elementy input typu text, password, hidden

posiadają wartości domyślne, czyli takie które są

wyświetlane w polach, gdy formularz zostanie

wyświetlony na stronie WWW, powinny też zawierać

atrybut value.

• W przypadku elementów input typu submit oraz reset,

wartość atrybutu value oznacza tekst, który zostanie

wyświetlony na elementach.

Różne wartości atrybutu

type elementu input

• < input type=‘checkbox’/>

• < input type=‘text’/>

• < input type=‘hidden’/>

• < input type=‘file’/>

• < input type=‘password’/>

• < input type=‘ratio’/>

• < input type=‘reset’/>

• < input type=‘submit’/>

<html>

<head><h1>Przykład różnych elementów typu

input</h1></head><br/><br/>

<body>

<table>