Mariusz Chmielewski - ISI WAT

por. mgr inż. Mariusz Chmielewski

Instytut Systemów Informatycznych

Wydział Cybernetyki

Wojskowa Akademia Techniczna

Techniki Internetowe

Mariusz Chmielewski - ISI WAT

Plan wykładu

• Języki znaczników

• Odmiany języków znaczników

• SGML (ang. Standard Generalized

Markup Language)

• HTML (ang. HyperText Markup

Language)

– Komponenty języka HTML

– Struktura dokumentu HTML

– Charakterystyki przeglądarek

internetowych

– Formularze

• Przeglądarki internetowe

Mariusz Chmielewski - ISI WAT

Języki znaczników

• Język znaczników (ang. markup

language) - format dokumentu, który
obok treści zawiera także opisujące ją
informacje. Informacje te dotyczą
danych na temat znaczenia lub wyglądu
dokumentu i są wyrażane poprzez
umieszczone w tekście znaczniki.

• Języki znaczników są także

wykorzystywane w przemyśle publikacji
do wymiany dokumentów pomiędzy
autorami, redaktorami oraz drukarniami.

Mariusz Chmielewski - ISI WAT

Odmiany języków znaczników

• Języki znaczników zwyczajowo dzielone są na trzy

klasy:

– prezentacyjne,
– proceduralne,
– opisowe.

• W rzeczywistości różne odmiany znakowania

mogą wystąpić w danym systemie jednocześnie:

– język HTML zawiera elementy

• czysto proceduralne (znacznik b odpowiadający za

pogrubienie)

• czysto opisowe (znacznik strong oznaczający ważny fragment

tekstu).

– HTML zawiera ponadto element pre, wyróżniający

obszary znakowania prezentacyjnego, których

zawartość ma zostać wyświetlona na ekranie dokładnie

tak, jak została umieszczona w dokumencie.

Mariusz Chmielewski - ISI WAT

Znakowanie prezentacyjne

• Znakowanie prezentacyjne usiłuje wywnioskować strukturę dokumentu

wyłącznie ze sposobu rozmieszczenia jego zawartości.

• Przykładowo tytuł dokumentu może zostać poprzedzony kilkoma znakami

nowej linii lub spacji, co ma sugerować marginesy oraz efekt

centrowania.

• Procesory tekstu oraz oprogramowanie przygotowujące dokumenty do

druku podejmuje niekiedy próby wywiedzenia struktury dokumentu za

pomocą podobnych konwencji, lecz ogromne zróżnicowanie stylów

znakowania sprawia, że starania te pozostają bezskuteczne.

Tytuł dokumentu

Streszczenie dokumentu

przedstawiające jego tematykę

oraz zastosowanie

Mariusz Chmielewski - ISI WAT

Znakowanie proceduralne

• Znakowanie proceduralne także definiuje

prezentację tekstu, lecz jego znaczniki są

zazwyczaj widoczne dla osoby edytującej plik

tekstowy.

• Oprogramowanie interpretuje tokeny w

kolejności ich pojawienia się. Formatowany

tytuł byłby bezpośrednio poprzedzony

ciągiem dyrektyw, nakazujących aplikacji

przejście w tryb centrowania, następnie

powiększenie oraz wytłuszczenie czcionki.

• Po tytule następuje kolejna seria rozkazów

usuwających zastosowane efekty. W bardziej

zaawansowanych systemach procedura ta

zostaje uproszczona poprzez zastosowanie

makr lub stosu.

Mariusz Chmielewski - ISI WAT

Znakowanie proceduralne

• W większości przypadków mechanizmy umożliwiające znakowanie

proceduralne są wyposażone w języki programowania spełniające
kompletność Turinga.

Przykłady:

nroff, troff, TeX, Lout oraz PostScript.

• Znakowanie proceduralne jest często używane w profesjonalnych

systemach publikacji, gdzie od specjalistów w dziedzinie typografii
oczekiwana jest znajomość odpowiednich języków.

Mariusz Chmielewski - ISI WAT

Znakowanie proceduralne

Mariusz Chmielewski - ISI WAT

Znakowanie opisowe

• Znakowanie opisowe (inaczej semantyczne) także

opatruje fragmenty tekstu znacznikami, jednak

narzucają im one żadnego wyglądu ani szczególnego

traktowania podczas interpretowania dokumentu.

• Przykładowo język syndykacji treści Atom posiada

znacznik updated, który określa datę ostatniej

modyfikacji fragmentu dokumentu. Specyfikacja

Atomu omawia znaczenie znacznika updated i

określa format jego zapisu, nie zawiera jednak

wskazówek dotyczących tego, w jaki sposób i czy w

ogóle prezentować go użytkownikowi końcowemu.

• Oprogramowanie może użyć tego znacznika na

rozmaite sposoby, w tym takie, które nie zostały

przewidziane przez twórców języka Atom. SGML oraz

XML to metajęzyki zaprojektowane specjalnie pod

kątem tworzenia języków opisowych.

Mariusz Chmielewski - ISI WAT

Znakowanie opisowe

• Za główną zaletę znakowania opisowego uznaje

się jego elastyczność.

• Fragmenty tekstu znakuje się zgodnie z rolą, którą

spełniają w dokumencie, zamiast określać ich

oczekiwany wygląd.

• Oprogramowanie obsługujące dokument przetwarza je

na wiele użytecznych sposobów, które nie muszą być

zaplanowane przez projektantów języka.

• Odnośniki w języku HTML, początkowo przeznaczone do

opisu metadanych, są obecnie szeroko używane przez

wyszukiwarki internetowe, które na ich podstawie

odkrywają nowy materiał do zaindeksowania oraz

oceniają popularność sieciowych zasobów. (dodatkowe

mechanizmy klasyfikacji i oceny zawartości)

• Znakowanie opisowe ułatwia także zmianę formatowania

dokumentu zgodnie ze zmieniającymi się potrzebami

użytkowników, ponieważ specyfikacja wyglądu

dokumentu nie jest przemieszana z jego zawartością.

Mariusz Chmielewski - ISI WAT

Znakowanie opisowe

• Przykład:

– Zastosowanie znacznika kursywy może zostać

zastosowana w tekście zarówno w celu nadania

emfazy, jak i wyróżnienia słów obcego pochodzenia.

– Jednak jeżeli oba przypadki są oznaczone

(prezentacyjnie lub proceduralnie) jedynie jako

pochyła czcionka, ta wieloznaczność treści może nie

zostać w łatwy sposób rozróżniona.

– Rodzi to konieczność rozróżnienia znaczenia

semantycznego interpretacji fragmentów

dokumentu.

• Jeżeli te dwa przypadki zostaną opisane za

pomocą odmiennych znaczników, każdy z nich

może zostać w przyszłości przeformatowany

bez zmian w sposobie prezentacji drugiego.

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - SGML

• SGML (ang. Standard Generalized Markup Language) -

uogólniony język znaczników ujednolicający struktury

i format różnego typu danych. Pozwala zapisać je w

formie dokumentu tekstowego i w związku z tym jest

łatwo przenoszalny renderowalny w różnych

systemach elektronicznego przekazu danych.

• SGML w przeciwieństwie od języków znaczników

dedykowanych (takich jak np. HTML):

– nie jest określonym zbiorem znaczników i reguł ich

użytkowania,

– nadrzędnym językiem służącym do definiowania dowolnych

znaczników i ustalania zasad ich poprawnego użytkowania.

• Języka SGML używa się praktycznie do dwóch celów:

– precyzyjnego definiowania zbiorów znaczników

przeznaczonych do konkretnych zastosowań – przykładem

jest język HTML;

– ujednolicania zasad pisania i przekazywania dokumentów

tekstowych w obrębie dużych firm lub instytucji.

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - SGML

• W obydwu przypadkach dokument w języku SGML

składa się z trzech części:

– deklaracji dokumentu, która definiuje ogólne reguły

stosowane w zapisie dokumentu

– np. maksymalna długość nazwy elementu, znak

używany jako początek znacznika (domyślnie jest to

znak < );

– DTD – definicji typu dokumentu, czyli definicji

wszystkich znaczników i reguł ich stosowania;

– właściwego dokumentu – tekst wraz ze znacznikami.

• SGML jest złożonym językiem, co jest powodem bardzo

mało narzędzi implementuje pełen standard. Zwykle

edytory SGML obsługują większość powszechnie

używanych elementów języka i interpretują jedynie część

pliku deklaracyjnego.

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - SGML

• W związku z trudnościami implementacyjnymi

powstał język i standard XML będący początkowo
podzbiorem reguł SGML (pierwsza wersja powstała
w 2000 roku).

• Standard XML można obsługiwać narzędziami

SGML-owymi modyfikując odpowiednio plik
deklaracyjny.

• Ponieważ w praktyce zarówno deklaracja

dokumentu SGML jak i DTD "zaszyte" są najczęściej
w oprogramowaniu (np. w przypadku języka HTML
w przeglądarkach i programach do pisania stron
WWW), użytkownicy końcowi, nie mają
bezpośredniej styczności z DTD tej odmiany języka
SGML, z której właśnie korzystają.

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - HTML

• HTML (ang. HyperText Markup Language, pol.

hipertekstowy język znaczników) – język

wykorzystywany do tworzenia stron internetowych.

Opisuje strukturę danych zawartych w dokumencie

nadając znaczenie poszczególnym fragmentom

tekstu formując elementy dokumentu oraz osadzając

w tekście dodatkowe obiekty obrazy, interaktywne

formularze, dynamiczne animacje.

• W składni języka HTML wykorzystuje się znaczniki

opatrzone z obu stron nawiasami ostrokątnymi.

Język HTML umożliwia, zdefiniowanie sposobu
wizualnej prezentacji dokumentu w przeglądarce
internetowej, a także osadzanie ciągów instrukcji
języków skryptowych, wpływających na
zachowanie przeglądarek lub innych
parserów HTML.

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - HTML

• Wykorzystując HTML zaleca się zrezygnowanie z

wykorzystywania znaczników opisujących wygląd

strony na rzecz kaskadowych arkuszy stylów CSS.

• Ważną cechą języka, która przyczyniła się do

rozpowszechnienia usługi WWW jest niezależność od

systemu operacyjnego oraz parametrów sprzętowych

komputera, na którym strony te będą oglądane.

• HTML został napisany w oparciu o język SGML, jednak

nie posiadał formalnej definicji w SGML-u.

• W 1993 r., organizacja IETF opublikowała pierwszą

propozycję specyfikacji języka HTML autorstwa

Bernersa-Lee i Dana Connolly - Hypertext Markup

Language (HTML) Internet-Draft (pol. szkic) -

zawierającą opis gramatyki w postaci SGML Document

Type Definition (pol. definicja typu dokumentu).

Mariusz Chmielewski - ISI WAT

Języki znacznikowe - HTML

• Opierając się na tym dokumencie twórcy

przeglądarek eksperymentowali z HTML-
em modyfikując atrybuty istniejących już
znaczników oraz dodając całkowicie nowe.

• Podobnie Dave Raggett pod koniec roku

1993. w swoim szkicu HTML+ (Hypertext
Markup Format) sugerował standaryzację
już zaimplementowanych znaczników np.
związanych z tworzeniem tabel i
formularzy

Mariusz Chmielewski - ISI WAT

Komponenty języka HTML

• Język HTML składa się z kilku kluczowych komponentów:

– znaczników (i ich atrybutów),
– typów danych,
– referencji znakowych,
– odwołań w postaci encji,
– deklaracji typu dokumentu.

• Słowami znacznik i tag określa się znacznik otwierający

(wraz z zamykającym) w znaczeniu elementu składni

języka HTML

• Słowa element używa się zamiennie ze słowami

znacznik lub tag.

• Niektóre elementy nie wymagają znaczników końcowych

(np. <p> odpowiadający za nowy akapit) lub ich nie

mają (<img> wstawiający obrazek lub <br> łamiący

linię).

Mariusz Chmielewski - ISI WAT

HTML zalety oraz wady

• Zalety:

– Prostota użycia oraz nauki języka
– Technologia zorientowana na warstwę

prezentacji

– Technologia ogólnie dostępna

• Wady:

– Nie jest to język reprezentacji danych
– Słabe właściwości przeszukiwania
– Nie zawiera mechanizmów rozróżnienia

znaczenia oraz zawartości

– Dane nie mogą być organizowane w hierarchię
– Ograniczony zbiór znaczników

Mariusz Chmielewski - ISI WAT

Struktura dokumentu HTML

<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>

Mariusz Chmielewski - ISI WAT

<HTML> dokument HTML </HTML>

Tag oznaczający dokument HTML, wewnątrz
znacznika znajdują się tagi nagłówka <HEAD>
oraz tagi części głównej dokumentu <BODY>.
Również wewnątrz tagu <HTML> powinny się
znaleźć tagi dokumentów z ramkami.
Tag ten może występować z parametrem
oznaczającym wersję HTML użytą w danym
dokumencie, jadnak zamiast tego parametru,
używa się tagu <!DOCTYPE>:

– VERSION="wersja" - wartość parametru podobna

jest do składni DTD, praktycznie parametr ten nie
jest używany

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<HEAD> nagłówek dokumentu HTML

</HEAD>

• Tag nagłówka dokumentu. Zawiera informacje o

tytule dokumentu, metainformacjach czy
bazowych odwołaniach.

• Powyższe informacje wprowadza się za pomocą

tagów: <BASE>, <ISINDEX>, <LINK>, <META>,
<NEXTID>, <TITLE> umieszczonych wewnątrz
tagu <HEAD>.

• W jego wnętrzu można umieścić również kody

źródłowe skryptów JavaScript za pomocą tagu
<SCRIPT>.

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<BASE>

Tag służy do adresowania względnego zbiorów, bez podawania pełnej

ścieżki dostępu. Pozwala to na umieszczenie danego dokumentu HTML

w dowolnym miejscu na serwerze ponieważ dokument będzie się

odwoływał do linku bazowego bez podawania pełnej ścieżki dostępu do

dokumentu.

Parametr tagu:

• HREF="URL" - Tag definiuje domyślny adres, który stanowi podstawę

adresowania dokumentów podrzędnych, standardowo adres domyślny

jest taki jak dokumentu bieżącego.

• TARGET="nazwa" - parametr jest stosowany przy tworzeniu

dokumentów dzielonych, tak zwanych

ramek

, pozwala na załadowanie

danego dokumentu określonego przez parametr HREF do ramki o

"nazwie" zdefiniowanej w tagu <FRAME>, parametr ten przyjmuje

również predefiniowane wartości:

– _blank - wartość ta spowoduje, że dany dokument będzie załadowany do

nowego okna bez nazwy

– _self - wartość ta spowoduje, że dany dokument będzie załadowany do

właśnie aktywnego okna

– _parent - wartość ta spowoduje, że dany dokument będzie załadowany do

okna na wyższym poziomie zagnieżdżenia, stosuje się przy zagnieżdżaniu

ramek

– _top - wartość ta spowoduje, że dany dokument będzie załadowany w cały

obszar roboczy przeglądarki

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<ISINDEX>
• Tag generuje specjalne pole do

wyszukiwania słów kluczowych. Tag służy
do komunikacji ze skryptami CGI.

• Obecnie tag jest rzadziej używany,

ponieważ tą funkcję przejęły formularze.

• Parametr tagu:

– PROMPT="tekst" - parametr określa tak

zwany tekst zachęty do wpisania hasła,
zamiast standardowego tekstu
wyświetlanego przez przeglądarkę.

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<LINK>
• Tag opisujący powiązania z innymi dokumentami

HTML lub obiektami HTML, może mieć takie same

parametry jak tag <A>. Obecnie tag ten jest

rzadko używany.

Pozostałe parametry tagu:

–

HREF="URL" - parametr określający adres

definiowanego obiektu

–

ID - parametr jest odpowiednikiem parametru ID

języka SGML

–

REL - parametr określa zależność pomiędzy danym

dokumentem HTML a dokumentem, który jest

określany poprzez tag <LINK>

–

REV - parametr definiuje relację zwrotną

–

TITLE - parametr definiujący tytuł zakładki

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<META>

• Tag pozwalający na tworzenie metadanych. Podczas

przesyłania dokumentu HTML do przeglądarki przez

protokół obsługujący hipertekst HTTP, przesyłane są

również dodatkowe informacje, takie jak np: typ pliku.

• Tag <META> pozwala na dołączanie właśnie dodatkowych

informacji - metadanych. Tymi informacjami mogą być

między innymi: nazwisko autora dokumentu, data

utworzenia dokumentu, słowa kluczowe, czy dokument ma

być co jakiś czas przeładowany automatycznie, standard

kodowania liter jaki został użyty w danym dokumencie.

• Parametry tagu:

– CONTENT="metawartość" - parametr nadaje wartość metainformacjom i

metaelementom

– HTTP-ENQIV="metainformacja" - parametr nadaje nazwę metainformacjom

– NAME="metaelement" - parametr określa nazwę metaelementów

– URL="metaadres" - adres metadokumentu, wymagane jest podanie całego

adresu, w obrębie tagu <META> nie działa adresowanie względne

dokumentów HTML, tag <BASE>

Mariusz Chmielewski - ISI WAT

Blok Nagłówka Dokumentu - <HEAD>

<NEXTID>
• Tag przyporządkowujący danemu

dokumentowi HTML następny dokument,
tworząc listę. Obecnie rzadko stosowany.

• Parametr tagu:

– N="numer" - alfanumeryczne oznaczenie

kolejnych dokumentów HTML

<TITLE> tytuł dokumentu HTML </TITLE>
• Tag nadaje tytuł dokumentowi HTML, który

widoczny jest w górnym pasku tytułu okna
przeglądarki.

Mariusz Chmielewski - ISI WAT

Blok Główny Dokumentu - <BODY>

<BODY> część główna dokumentu HTML </BODY>

• Tag, który określa główną cześć dokumentu, prezentowaną

przez przeglądarkę. Wewnątrz tagu umieszcza się:

Odwołania (linki), Informacje o Typie Formatowanych

Elementów, Informacje o Charakterze Formatowanych

Elementów, Blokowe Elementy Formatujące, Listy, Grafikę,

Tabele, Formularze.

• Parametry tagu:

– BACKGROUND="plik" - parametr określa ścieżkę dostępu do pliku

zawierającego grafikę jaka ma być wyświetlana jako tło dokumentu, jeśli

będzie ona mniejsza niż wielkość okna, to będzie ona powtarzana

– BGCOLOR="#rrggbb" - parametr określa kolor tła dokumentu według

szesnastkowego kodu wartości kolorów RGB, wszystkie dostępne kolory są

zawarte w tabeli kolorów HTML

– ALINK="#rrggbb" - parametr określa kolor tekstu odwołania (linku)

dokumentu właśnie ładowanego, kolory jak wyżej

– LINK="#rrggbb" - parametr określa kolor tekstu odwołania (linku), kolory

jak wyżej

– VLINK="#rrggbb" - parametr określa kolor tekstu odwołania (linku)

dokumentu już przeczytanego, kolory jak wyżej

– TEXT="#rrggbb" - parametr określa kolor podstawowego tekstu

wyświetlanego w dokumencie, kolory jak wyżej

Mariusz Chmielewski - ISI WAT

Odwołania (hiperlinki)

<A> tekst lub obiekt tworzący hiperodwołanie </A>

• Tag realizujący powiązania informacji tak zwane hiperlinki lub

linki. Tag <A> (ang. anchor - kotwica) jest esencją HTML.

Zaznacza wybrany fragment tekstu lub obiekt jako

hiperodwołanie (hiperlink) do innego dokumentu, który ma być

powiązany z danym dokumentem HTML. Tag można podzielić

na dwa rodzaje: odwołanie źródłowe, które zaznacza tekst lub

obiekt tworzący odwołanie oraz odwołanie docelowe, które jest

miejscem do którego tworzymy hiperodwołanie. Tag posiada

kilka parametrów ale najczęściej stosowane są dwa: HREF i

NAME.

• Tag występuje z niżej przedstawionymi parametrami:

– HREF="URL" - parametr określa miejsce do którego się odwołujemy,

dopuszcza się adresowanie względne i bezwzględne dokumentów, parametr

przyjmuje następujące wartości:

• #etykieta - wartość określa odwołanie do obiektu o nazwie "etykieta",

zdefiniowanego w bieżącym dokumencie HTML, pod warunkiem, że jest on w nim

zdefiniowana

• plik - wartość określa adres lub ścieżkę dostępu do zbioru, do którego tworzymy

hiperodwołanie, gdy nie podamy nazwy zbioru domyślnie zostanie załadowany

zbiór index.html, jeśli taki istnieje

• plik#etykieta - wartość określa adres lub ścieżkę dostępu do zbioru, do którego

chcemy się odwołać oraz ustawienie dokumentu na obiekcie o nazwie "etykieta",

pod warunkiem, że jest ona zdefiniowana w tym dokumencie

Mariusz Chmielewski - ISI WAT

Odwołania (hiperlinki)

– NAME="etykieta" - parametr, który pozwala oznaczyć dany obiekt

w dokumencie HTML o nazwie "etykieta"

– REL="relacja" - parametr określa relację pomiędzy

hiperodwołaniem znajdującym się w dokumencie a miejscem jego

skoku

– REV="relacja" - parametr określa relację odwrotną do określonej

przez parametr REL

– TITLE="tytuł" - parametr opisuje obiekt wskazywany przez

parametr HREF i jest podawany jedynie w celach informacyjnych

– TARGET="nazwa" - parametr jest stosowany przy tworzeniu

dokumentów dzielonych, tak zwanych ramek, pozwala na

załadowanie danego dokumentu określonego przez parametr HREF

do ramki o "nazwie" zdefiniowanej w tagu <FRAME>, parametr ten

przyjmuje również predefiniowane wartości:

• _blank - wartość ta spowoduje, że dany dokument będzie załadowany

do nowego okna bez nazwy

• _self - wartość ta spowoduje, że dany dokument będzie załadowany do

właśnie aktywnego okna

• _parent - wartość ta spowoduje, że dany dokument będzie załadowany

do okna na wyższym poziomie zagnieżdżenia, stosuje się przy

zagnieżdżaniu ramek

• _top - wartość ta spowoduje, że dany dokument będzie załadowany w

cały obszar roboczy przeglądarki

Mariusz Chmielewski - ISI WAT

Informacje o typie formatowanych elementów

• <CITE> tekst </CITE>

Tag zaznaczający dany

tekst jako cytat,

standardowo czcionka

Italic.

• <CODE> tekst </CODE>

Tekst programu,

standardowo czcionka

Italic.

• <EM> tekst </EM>

Dany tekst zostanie

wyróżniony, standardowo

Italic.

• <KBD> tekst </KBD>

Tag określa wygląd tekstu

wprowadzanego z

klawiatury, standardowo

Bold + Courier.

• <SAMP> tekst </SAMP>

Dany tekst zostanie

zaznaczony jako przykład,

standardowo Courier.

• <STRONG> tekst

</STRONG>
Dany tekst zostanie mocno

wyróżniony, standardowo

Bold.

• <VAR> tekst </VAR>

Dany tekst jest słowem

kluczowym, standardowo

Italic.

• 

Tekst wewnątrz tagu zostanie

potraktowany jako komentarz

i nie zostanie wyświetlony na

ekranie przeglądarki.

Mariusz Chmielewski - ISI WAT

Informacje o charakterze formatowanych

elementów

• <B> tekst </B>

Czcionka pogrubiona

Bold.

• <BIG> tekst </BIG>

Zwiekszenie czcionki o

jeden stopień.

• <BLINK> tekst

</BLINK>
Tekst migający.

• <I> tekst </I>

Czcionka pochyła,

kursywa Italic.

• <SMALL> tekst

</SMALL>
Zmniejszenie czcionki o

jeden stopień.

• <STRIKE> tekst

</STRIKE>
Przekreślenie tekstu.

• <SUB> tekst

</SUB>
Dolny indeks.

• <SUP> tekst

</SUP>
Górny indeks.

• <TT> tekst </TT>

Czcionka o stałej

szerokości Courier.

• <U> tekst </U>

Podkreślenie tekstu.

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

•

<ADDRESS> tekst </ADDRESS>
Tag zaznaczający dany blok tekstu jako: adres,

sygnatura lub dane autora. Najczęściej zostaje on

umieszczony na początku lub końcu dokumentu.

Standardowo tekst informacji jest wyświetlany czcionką

Italic.

•

<BASEFONT>
Tag ustawia parametry czcionki bazowej w dokumencie

i powinien się znaleźć na jego początku.
Parametry tagu:

– COLOR=#rrggbb - parametr ustala kolor czcionki bazowej,

według szesnastkowego kodu wartości kolorów RGB, wszystkie

dostępne kolory są zawarte w tabeli kolorów HTML

– NAME="nazwa" - parametr ustala wygląd czcionki bazowej

np:Arial, będzie ona odczytana pod warunkiem, że jest ona

zainstalowana na terminalu użytkownika przeglądającego

dokument

– SIZE=n - parametr ustala wielkość czcionki bazowej

dokumentu, standardowo n=3, (n=1,2,3,4,5,6,7)

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <BLOCKQUOTE> tekst </BLOCKQUOTE>

Tag powodujący, że dany blok tekstu będzie "wcięty" z lewej

strony. Tag ten można zagnieżdzać, pamiętając, że każde

otwarcie tagu musi być domknięte, aby dany tekst nie był

"wciety" aż do końca bloku <BODY>.

• <BR>

Tag pozwalający na przejście do nowej lini w miejscu, w

którym został wywołany.
Parametr tagu:

– CLEAR="położenie" - wywołanie parametru jest istotne wtedy gdy

chcemy załamać akapit w momencie kiedy tekst oblewa rysunek, nie

użycie parametru spowoduje przejście do miejsca określonego przez

krawędź wstawionej grafiki, a nie margines, parametr przyjmuje

wartości:

– all - przejście niżej dla obu marginesów, a dalszy tekst nie będzie

oblewał danego rysunku

– left - przejście do lewego marginesu dokumentu, jeśli grafika jest

dosunięta do lewego marginesu dokumentu, dalszy tekst nie bedzie jej

oblewał

– right - efekt podobnie jak dla wartości left, z tą różnicą, że dla prawego

marginesu dokumentu

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <CENTER> tekst </CENTER>

Tag centrowania, wszystko co się znajdzie

wewnątrz tagu będzie wycentrowane do lewego

i prawego marginesu dokumentu.

• <COMMENT> tekst </COMMENT>

Tag komentarza, tekst znajdujący się wewnątrz

tego tagu zostanie potraktowany jako

komentarz i nie zostanie wyświetlony przez

przeglądarkę. Działa podobnie jak tag <!--

komentarz -->.

• <DFN> tekst </DFN>

Tag zaznaczający określony tekst, jako

objaśnienie definiowanego pojęcia.

Standardowo informacja jest wyświetlana

czcionką Italic.

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <FONT> tekst </FONT>

Tag sterujący wyświetlanym tekstem, może mieć

parametry:

– COLOR=#rrggbb - parametr ustala kolor wyświetlanej,

czcionki według szesnastkowego kodu wartości kolorów

RGB, wszystkie dostępne kolory są zawarte w tabeli

kolorów HTML

– FACE="nazwa" - parametr ustala wygląd czcionki

bazowej np: Arial, będzie ona odczytana pod

warunkiem, że jest ona zainstalowana na terminalu

użytkownika przeglądającego dokument

– SIZE=wartość - parametr sterujący zmianą ustawienia

wielkości czcionek, może mieć następujące wartości:

• n - wartość ta ustawia wielkość na n-ty stopień (n=1,2,3,4,5,6,7),

standardowo n=3.

• +n - parametr zmienia wielkość czcionki o n stopni w górę
• -n - parametr zmienia wielkość czcionki o n stopni w dół

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <Hn> tekst </Hn>

Tag nagłówkowy, może mieć 6 wielkości określonych
przez liczbę n, gdzie n=1,2,3,4,5,6.
Parametr tagu:

– ALIGN="położenie" - parametr określa położenie nagłówka w

dokumencie i może przyjmować wartości:

• center - nagłówek wycentrowany
• left - nagłówek dosunięty do lewej strony dokumentu
• right - nagłówek dosunięty do prawej strony dokumentu

• <LISTING> tekst </LISTING>

Tag pozwala na wstawienie wstępnie formatowanego
bloku tekstu, przy czym ilość znaków we wstępnie
formatowanej linii jest stała i wynosi 132.
Standardowo tekst jest wyświetlany czcionką Courier.

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <HR>

Wyświetlenie poziomej linii, standardowo linia ma

szerokość całego okna. Parametry tagu:

– ALIGN="położenie" - parametr określa położenie poziomej

linii i może przyjmować następujące wartości:

• left - linia będzie dosunięta do lewej strony okna
• center - linia będzie wycentrowana
• right - linia będzie dosunięta do prawej strony okna

– NOSHADE - wyświetlenie poziomej linii bez cienia
– SIZE="n" - wyświetlenie poziomej linii o podanej grubości n

pikseli

– WIDTH="długość" - wyświetlenie poziomej linii o podanej

długości, linia jest standardowo centrowana:

• n - wyświetlenie poziomej linii o długości n w pikselach, nie

zależnie od szerokości okna

• n% - wyświetlenie poziomej linii o długości n% w procentach

szerokości okna

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <NOBR> tekst </NOBR>

Tag informujący o tym, że tekst zawarty pomiędzy

początkiem tagu i jego końcem nie będzie łamany.

• <P> tekst </P>

Tag rozpoczynający akapit. Może być zagnieżdżany oraz

w jego wnętrzu mogą znajdować się inne elementy

języka HTML.
Parametr tagu:

– ALIGN="położenie" - parametr tagu, określa sposób

formatowania danego akapitu i posiada wartości:

• center - tekst będzie centrowany aż do końca akapitu, to jest aż do

następnego akapitu lub jego odwołania

• indent - pierwsza linia akapitu będzie miała wcięcie z lewej strony
• justify - tekst będzie justowany czyli wyrównany do obu marginesów
• left - tekst będzie łamany w tak zwaną chorągiewkę, jest to wartość

standardowa

• right - tekst będzie dosunięty do prawego marginesu

Mariusz Chmielewski - ISI WAT

Blokowe elementy formatujące

• <PRE> tekst </PRE>

Tag zaznaczający dany blok tekstu jako wstępnie

formatowany. Wewnątrz tagu nie są realizowane polecenia

języka HTML, jednak dopuszczalne jest stosowanie tagu

<A>. Tekst wewnątrz bloku jest wyświetlany czcionką

Courier, akceptowane są spacje, przejścia do nowej linii, oraz

LF i CR.
Parametr tagu:

– WIDTH="n" - parametru określa maksymalną ilość znaków w wstępnie

formatowanej linii, gdy tag zostanie wywołany bez tego parametru,

ilość znaków w lini wynosi 80, zalecane szerokości kolumn to: 40, 80,

132

• <WBR> tekst </WBR>

Tag ten zezwala na złamanie tekstu między wyrazami, wtedy

gdy dany akapit został zaznaczony jako niełamany przez tag

<NOBR>.

• <XMP> tekst </XMP>

Tag używany do prezentowania krótkich bloków tekstu

wstępnie formatowanego, tekst jest wyświetlany czcionką

Courier. Jest podobny do tagów: <PRE> oraz <LISTING>.

Mariusz Chmielewski - ISI WAT

Listy numerowane

• <OL> elementy listy </OL>

Tag listy numerowanej. Standardowo lista jest numerowana liczbami

arabskimi. Parametry tagu:

– COMPACT - zmniejszenie odstępu między wierszami listy

– START="n" - parametr określa numerowanie kolejnych pozycji

począwszy od wartości n, wartość n zawsze podajemy dziesiętnie bez

względu na to jaki sposób oznaczenia listy wybraliśmy, domyślnie

przyjmowana jest wartość n=1

– TYPE="symbol" - parametr określa sposób numerowania listy i może

przyjmować następujące wartości:

• A - oznaczenie kolejnych elementów listy, kolejnymi dużymi literami

• a - oznaczenie kolejnych elementów listy, kolejnymi małymi literami

• I - oznaczenie kolejnych elementów listy, kolejnymi dużymi liczbami rzymskimi

• i - oznaczenie kolejnych elementów listy, kolejnymi małymi liczbami

rzymskimi

• 1 - oznaczenie kolejnych elementów listy, kolejnymi liczbami arabskimi

• <LI> tekst

Kolejne elementy listy numerowanej. Parametry tagu:

– TYPE="symbol" - od tego elementu listy, kolejne jej pozycje będą

numerowane w sposób określony przez wartość "symbol"

– VALUE=n - od tego elementu listy, kolejne pozycje będą numerowane

począwszy od numeru n

Mariusz Chmielewski - ISI WAT

Lista nie numerowana

• <UL> elementy listy </UL>

• Tag listy nie numerowanej. Standardowo kolejne

pozycje listy są znaczone kołem. Parametry tagu:

– PLAIN - kolejne elementy listy nie są oznaczane żadnymi

znakami wyróżniającymi

– SRC="plik" - w miejsce znaku oznaczającego element listy, jest

umieszczana grafika ze zbioru plik

– TYPE="nazwa" - parametr typ określa sposób znakowania listy

i może przyjmować następujace wartości:

• square - oznaczenie kolejnych elementów listy zapełnionym

kwadratem

• disc - oznaczenie kolejnych elementów listy kołem

• circle - oznaczenie kolejnych elementów listy pustym kołem

• <LI> tekst

Kolejne elementy listy nie numerowanej.
Parametr tagu:

– TYPE="nazwa" - od tego elementu listy, kolejne jej pozycje

będą oznaczone w sposób określony przez wartość "nazwa",

podobnie jak tag <UL TYP="nazwa">

Mariusz Chmielewski - ISI WAT

Lista menu

• <MENU> elementy listy </MENU>

Tag przewidziany do listowania pozycji
opisanych jednym zdaniem. Parametry
tagu:

– COMPACT - zmniejszenie odstępu między

wierszami listy

– PLAIN - kolejne elementy listy nie są

oznaczane żadnymi znakami wyróżniającymi

• <LI> tekst

Kolejne elementy listy menu.

Mariusz Chmielewski - ISI WAT

Lista katalog

• <DIR> elementy listy </DIR>

Tag przewidziany do listowania krótkich

tekstów (20 znaków). Lista <DIR>

powinna być rozmieszczona w dwóch

kolumnach. Parametry tagu:

– COMPACT - zmniejszenie odstępu między

wierszami listy

– PLAIN - kolejne elementy listy nie są

oznaczane żadnymi znakami wyróżniającymi

• <LI> tekst

Kolejne elementy listy katalog.

Mariusz Chmielewski - ISI WAT

• <DL> elementy listy </DL>

Tag listy opisowej. Parametry tagu:

– COMPACT - zmniejszenie odstępu

między wierszami listy

• <DT> tekst nagłówka

Nagłówek pozycji, nie jest
obowiązkowy.

• <DD> tekst

Kolejne elementy listy opisowej.

Mariusz Chmielewski - ISI WAT

Grafika

• <AREA> - Tag do tworzenia aktywnych pól odwołań (hiperlinków) na tak zwanych IMAGE

MAP. Tag musi znajdować się wewnątrz tagu <MAP>. Parametry tagu:

– COORDS="współrzędne" - parametr określa współrzędne obszaru aktywnego, którego kształt

określa parametr SHAPE, parametr przyjmuje następujące wartości:

– X, Y, R - środek, promień dla circle

– X1, Y1, X2, Y2, ... Xn, Yn, X1, Y1 - kolejne wierzchołki dla poly

– X1, Y1, X2, Y2 - lewy górny róg, prawy dolny róg dla rect

– HREF="URL" - parametr określa miejsce do którego się odwołujemy, dopuszcza się adresowanie

względne i bezwzględne dokumentów, parametr przyjmuje następujące wartości:

– #etykieta - wartość określa odwołanie do obiektu o nazwie "etykieta", zdefiniowanego w bieżącym

dokumencie HTML, pod warunkiem, że jest on w nim zdefiniowana

– plik - wartość określa adres lub ścieżkę dostępu do zbioru, do którego tworzymy hiperodwołanie,

gdy nie podamy nazwy zbioru domyślnie zostanie załadowany zbiór index.htmll, jeśli taki istnieje

– plik#etykieta - wartość określa adres lub ścieżkę dostępu do zbioru, do którego chcemy się

odwołać oraz ustawienie dokumentu na obiekcie o nazwie "etykieta", pod warunkiem, że jest ona

zdefiniowana w tym dokumencie

– NOHREF - parametr określa obszar, który nie jest obszarem aktywnym na IMAGE MAP

– SHAPE="obszar" - parametr określa kształt obszaru aktywnego dla współrzędnych podanych przez

parametr COORDS, może przyjmować wartości (circle – koło, poly – wielokąt, rect – prostokąt)

– TARGET="nazwa" - parametr jest stosowany przy tworzeniu dokumentów dzielonych, tak zwanych

ramek, pozwala na załadowanie danego dokumentu określonego przez parametr HREF do ramki o

"nazwie" zdefiniowanej w tagu <FRAME>, parametr ten przyjmuje również predefiniowane

wartości:

• _blank - wartość ta spowoduje, że dany dokument będzie załadowany do nowego okna bez

nazwy

• _self - wartość ta spowoduje, że dany dokument będzie załadowany do właśnie aktywnego

okna

• _parent - wartość ta spowoduje, że dany dokument będzie załadowany do okna na wyższym

poziomie zagnieżdżenia, stosuje się przy zagnieżdżaniu ramek

• _top - wartość ta spowoduje, że dany dokument będzie załadowany w cały obszar roboczy

przeglądarki

Mariusz Chmielewski - ISI WAT

Grafika

•

<IMG> Tag ten pozwala dołączyć grafikę do dokumentu HTML. Dana grafika zostanie

umieszczona w aktualnym miejscu w dokumencie. Parametry tagu:

– ALIGN="położenie" - parametr ten określa położenie danej grafiki w dokumencie HTML,

może przyjmować następujące wartości: bottom, middle, left , right, top

– ALT="tekst" - parametr pozwala na wyświetlenie tekstu w miejsce grafiki wtedy gdy

używamy przeglądarki tekstowej, np: LYNX

– BORDER="n" - dana grafika będzie otoczona ramką o grubości n pikseli, ramka jest

wyświetlana automatycznie wtedy gdy dana grafika służy jako hiperodwołanie, aby

usunąć ramkę należy ustawić parametr BORDER="0"

– HEIGHT="wysokość" - parametr określa wysokość grafiki w pikselach, przy dużych

elementach graficznych podanie tego parametry może przyspieszyć wczytywanie danego

dokumentu, można również przeskalować daną grafikę do żądanej wysokości

– HSPACE="n" - parametr ustala odległość tekstu od rysunku o n pikseli w lewo i prawo

– ISMAP - parametr pozwala na tworzenie map graficznych, oznacza to, że daną grafikę

możemy podzielić na kilka obszarów, które będą odwołaniem do innych dokumentów,

współrzędne punktów są przesyłane do skryptów na serwerze, jego funkcję przejął

parametr USEMAP, pozwalający na tworzenie map graficznych po stronie użytkownika

– SRC="plik" - parametr określa scieżkę dostępu do pliku z grafiką, którą chcemy dołączyć

do dokumentu HTML, obecnie akceptowane są między innymi następujące formaty plików

z grafiką: jpg, jpeg, gif

– USEMAP="#nazwa" - parametr pozwala w prosty sposób na tworzenie map graficznych

IMAGE MAP po stronie użytkownika, parametr ten jest stosowany wraz z tagami: <AREA>

zawierającym koordynaty XY poszczególnych punktów mapy i kształt obszaru aktywnego

oraz <MAP> przekazującym wartość "nazwa", parametru USEMAP określającego nazwę

mapy graficznej i jest nią najczęściej nazwa pliku z grafiką, która ma służyć jako IMAGE

MAP

– VSPACE="n" - parametr ustala odległość tekstu od rysunku o n pikseli w górę i w dół

– WIDTH="szerokość" - parametr określa szerokość grafiki w pikselach, przy dużych

elementach graficznych podanie tego parametry może przyspieszyć wczytywanie danego

dokumentu, można również przeskalować daną grafikę do żądanej szerokości

Mariusz Chmielewski - ISI WAT

Grafika

• <MAP> parametry IMAGE MAP </MAP>

Tag służy do definicji IMAGE MAP.
Wewnątrz tagu musi znajdować się tag
<AREA>, który definiuje kształt obszaru
aktywnego oraz jego koordynaty XY.

Parametr tagu:

– NAME="nazwa" - parametr określa nazwę

IMAGE MAP, nazwa musi być taka sama jak
dla parametru USEMAP tagu <IMG>

Mariusz Chmielewski - ISI WAT

Tabele

• <CAPTION> tekst </CAPTION>
Tag pozwalający na umieszczenie

podpisu nad lub pod tabelą, musi być
umieszczony wewnątrz tagu <TABLE>.

Parametr tagu:

– ALIGN="położenie" - parametr określa

gdzie ma być umieszczony podpis i
przyjmuje wartości:

• top - podpis zostanie umieszczony nad tabela
• bottom - podpis zostanie umieszczony pod

tabela

Mariusz Chmielewski - ISI WAT

Tabele

• <TABLE> zawartość tabeli </TABLE>
Tag definiujący tabelę. Wszelkie dane zawarte w tabeli są umieszczane

wewnątrz tagu <TD> tak zwane "dane tabeli (table data)" lub tagu

<TH> tak zwany "nagłówek tabeli (table header)" przy czym tekst

wyświetlany jest czcionką pogrubioną Bold. Poszczególne wiersze tabeli

są oddzielone tagiem <TR>. Wewnątrz komórek można umieszczać

zarówno tekst, grafikę oraz inne elementy jezyka HTML np: formularze.

Parametry tagu:

• BORDER - pole wokół tabeli będzie otoczone ramką, standardowo tabela nie jest

otoczona ramką

• BORDER="n" - pole wokół tabeli będzie otoczone ramką o grubości n pikseli

• CELLPADDING="n" - parametr określa odległość między brzegiem a zawartością

komórki

• CELLSPACING="n" - parametr określa odległość między komórkami tabeli w

pionie i poziomie

• HEIGHT="wysokość" - parametr określa wysokość tabeli i może mieć wartości:

– "n%" - wysokość tabeli w procentach wysokości okna

– "n" - wysokość tabeli w pikselach

• WIDTH="szerokość" - parametr określa szerokość tabeli i może mieć wartości:

– "n%" - szerokość tabeli w procentach szerokości okna

– "n" - szerokość tabeli w pikselach

Mariusz Chmielewski - ISI WAT

Tabele

• <TD> zawartość komórki </TD>
Tag komórki z danymi tabeli. Standardowo tekst w komórce

jest dosunięty do lewej krawędzi. Parametry tagu:

– ALING="położenie" - parametr ten określa sposób formatowania danych w

komórce tabeli i może przyjmować wartości:

• center - dane będą wycentrowane

• left - dane będą dosunięte do lewej krawędzi komórki

• right - dane będą dosunięte do prawej krawędzi komórki

– COLSPAN="n" - parametr pozwalający na połączenie n kolumn tabeli w jedną

– NOWRAP - dane w komórce nie podlegają "łamaniu" i będą stanowić jedną linie

– ROWSPAN=n - parametr pozwalający na połączenie n wierszy tabeli w jeden

– VALING="położenie" - parametr ten określa położenie danych w komórce w

pionie i przyjmuje wartości:

• bottom - zawartość komórki będzie wyrównana do jej dolnej krawędzi

• baseline - zawartość komórki będzie wyrównana do lini bazowej sąsiedniej

komórki

• middle - zawartość komórki będzie wyśrodkowana

• top - zawartość komórki będzie wyrównana do jej górnej krawędzi

– WIDTH="szerokość" - parametr określa szerokość komórki i może mieć

wartości:

• "n%" - szerokość komórki w procentach szerokości tabeli

• "n" - szerokość komórki w pikselach

Mariusz Chmielewski - ISI WAT

Tabele

• <TH> zawartość komórki </TH>
Tag komórki z danymi tabeli. W przeciwieństwie do tagu <TD>

tekst w komórce jest wyświetlany czcionką pogrubioną Bold.

– Parametry tagu są takie same jak tagu <TD>.

• <TR> zawartość komórki </TR>
Tag definiuje kolejne wiersze tabeli. Parametry tagu:

– ALING="położenie" - parametr ten określa sposób

formatowania danych w wierszu tabeli i może przyjmować

wartości:

• center - dane będą wycentrowane

• left - dane będą dosunięte do lewej krawędzi

• right - dane będą dosunięte do prawej krawędzi

– VALING="położenie" - parametr ten określa położenie

danych w pionie i przyjmuje wartości:

• bottom - dane będą wyrównane do dolnej krawędzi

• baseline - dane będą wyrównane do lini bazowej

• middle - dane będą wyśrodkowane

• top - dane będą wyrównane do górnej krawędzi

Mariusz Chmielewski - ISI WAT

Formularze

• <FORM> pola formularza </FORM>
Tag służy do tworzenia interaktywnych formularzy do przesyłania

danych bezpośrednio ze strony WWW do serwera gdzie zostaną one

przetworzone przez odpowiednie skrypty obsługujące dany formularz

lub do dynamicznego tworzenia dokumentów. Do definiowania

odpowiednich pól formularza służą tagi: <INPUT>, <OPTION>,

<TEXTAREA>, <SELECT> i powinne się one znaleźć wewnątrz tagu

<FORM>. Parametry tagu:

– ACTION="URL" - parametr określa gdzie mają zostać przesłane dane z

formularza, parametr może przyjmować wartości:

• http://domena.pl/skrypt.rozszerzenie - adres URL, w którym dane wpisane do

formularza zostaną odpowiednio przetworzone. Dane z formularza są dołączone

do adresu URL. Przetworzeniem tych danych zajmują się odpowiednie skrypty,

najczęściej są to skrypty CGI (Comon Gateway Interface)

• mailto:osoba@domena.pl - wartość ta pozwala na przesłanie danych z

formularza przez pocztę elektroniczną za pomocą usługi MAILTO

– METHOD="metoda" - parametr ten określa sposób w jaki mają zostać

przekazane informacje z formularza do skryptu CGI i może mieć wartości:

• POST - program pobiera informacje ze strumienia stdin, natomiast długość

danej informacji jest określona przez zmienną środowiska serwera (enviroment)

o nazwie CONTENT_LENGTH

• GET - wartości są przekazywane w postaci ciągu znaków przedstawionych jako

wartość zmiennej QUERY_STRING zdefiniowanej w środowisku serwera

(enviroment)

Mariusz Chmielewski - ISI WAT

Formularze - INPUT

•

<INPUT> opis pola

•

Tag pozwala na tworzenie pól tekstowych, pól

wyboru checkbox oraz pól przycisków radio

button. Parametry tagu:

– CHECKED - parametr pozwala na ustawienie danego

pola opcji checkbox lub radio jako domyślne

– MAXLENGTH="n" - parametr określa maksymalna

dlugość n tekstu, który ma zostać wprowadzony w

dane pole

– NAME="nazwa" - parametr ten jest nazwą pola i

zmiennej, pod którą będzie podstawiona

wprowadzana lub wybrana wartość, która zostanie

przesłana do skryptu przetwarzającego dane

– SIZE="n" - parametr określa długość pola

tekstowego, domyślnie n=20 znaków, natomiast

informacja wpisywana w to pole może być dłuższa,

ponieważ wprowadzany tekst będzie przewijany.

Mariusz Chmielewski - ISI WAT

Formularze - INPUT

– TYPE="typ" - parametr określa rodzaj danego pola i może mieć

wartości:

• text - typ standardowy i oznacza pole tekstowe

• checkbox - pole wyboru checkbox, zmianę jego stanu możemy zmienić poprzez

"kliknięcie" w to pole, można ustawić tzw stan aktywny pola poprzez

zastosowanie parametru CHECKED, możliwe jest wybranie kilku pól jednocześnie

• hidden - dane pole jest traktowane jako tekstowe przy czym nie jest

wyświetlane, a wartości tego pola nie można zmienić, może służyć w celu

przesłania specjalnych informacji do skryptu przetwarzającego dane formularza

• password - jest to specjalne pole tekstowe, w którym wprowadzane znaki są

zastępowane gwiastkami, pole to może służyć do wprowadzania haseł

• radio - pole radio jest podobne w działaniu po pola wyboru checkbox z tą

różnicą, że jeśli jest zdefiniowanych w formularzu kilka pól radio to tylko jedno z

nich może zostać wybrane, są również przedstawiane trochę inaczej niż pola

wyboru checkbox

• reset - wartość ta generuje przycisk, którego naciśnięcie spowoduje

zresetowanie wprowadzonych danych we wszystkich polach i ustawienie

wartości standardowych, jego nazwę można zmienić za pomocą parametru

VALUE="wartość"

• submit - wartość ta generuje przycisk, którego naciśnięcie spowoduje wysłanie

danych z formularza do skryptu w celu ich przetworzenia, pole to musi pojawić

się na końcu każdego formularza, jego nazwę można zmienić za pomocą

parametru VALUE="wartość"

– VALUE="wartość" - parametr ten definiuje domyślną wartość w polu

tekstowym lub nazwę na przyciskach

Mariusz Chmielewski - ISI WAT

Formularze

• <OPTION> opis pozycji
Tag opcji, musi zostać wywołany wewnątrz tagu

<SELECT>. Pozwala on zdefiniować jedną
pozycję menu.

Parametry tagu:

– DISABLED - parametr oznacza, że wybór tego pola

jest zalecany

– SELECTED - parametr pozwala oznaczyć dane pole

jako domyślne, a jego ustawienie może zmienić
użytkownik

– VALUE - parametr definiuje wartość pola, która

zostanie przesłana do skryptu jeśli dana pozycja
została wybrana

Mariusz Chmielewski - ISI WAT

Formularze

• <SELECT> opcje menu </SELECT>
Tag służy do budowy rozwijanego menu. Ma podobną

budowę do listy. W jego wnętrzu definiowane są

pozycje menu za pomocą tagu <OPTION>,

odpowiadającego za informacje w rozwijanym

menu.

Parametry tagu:

– NAME="nazwa" - parametr ten jest nazwą opcji i

zmiennej, pod którą będzie podstawiona wprowadzana

lub wybrana wartość, która zostanie przesłana do

skryptu przetwarzającego dane

– MULTIPLE - parametr umożliwia wybranie kilku pól
– SIZE="n" - parametr określa ilość rozwijanych wierszy,

n=1 oraz brak parametru SIZE spowoduje, że menu

zajmie jeden wiersz i będzie rozwijane dopiero po jego

wybraniu

Mariusz Chmielewski - ISI WAT

Formularze – potrzeba wykorzystania

• Formularz ma formę elektronicznej ankiety, którą

wypełnia się wprost na stronie.

• Możliwe jest przy tym wpisywanie tekstu,

odpowiadanie na zadane pytania, czy zaznaczanie

jednej bądź kilku z podanych możliwości wyboru.

• Formularz może być przesłany pocztą elektroniczną

e-mail (prosty formularz pocztowy) a następnie

odebrany przez adresata.

• Istnieje wiele programów wspomagających

odbieranie formularzy i grupowe wysyłanie listów

na ich podstawie, przez co czynność ta może stać

się mniej żmudna.

• Aplikacje w postaci programów instalowanych, jak i

specjalne skrypty wykonywane bezpośrednio w

przeglądarce (np. skrypty PHP, JSP).

Mariusz Chmielewski - ISI WAT

Formularze - budowa

• Formularz składa się z różnych typów pól

wykorzystywanym do wprowadzenia przez
użytkownika danych (pola do wpisywania
tekstu, pola wyboru jednej z opcji itp.

• Pomiędzy znacznikami <form> </form>,

mieszczą się wszystkie inne polecenia,
dotyczące formularza (pola do
wprowadzania danych).

• Każdy formularz musi rozpoczynać się

znacznikiem otwierającym <form>, a kończy
się znacznikiem zamykającym </form>.

Mariusz Chmielewski - ISI WAT

Formularze - budowa

• Wewnątrz formularza muszą się znaleźć:

– element edytowalny przez użytkownika (INPUT)

– przycisk powodujący wysłanie formularza (SUBMIT).

• Kolejnym ważnym punktem jest akcja, która jest

wykonywana przez komputer, gdy czytelnik strony zechce

przesłać do autora jakieś informacje.

• Formularz wysyła dane definiowane przez specjalne

polecenie action=wybrana_akcja. Należy również określić

sposób komunikowania się przeglądarki z serwerem, a

więc czy przesyła ona jakieś informacje, czy też je pobiera

• Wybieramy zatem jedną z dwóch możliwych metod - post

lub get.

• Ustawienie metody GET – wymagane przez

skomplikowane serwisy korzystające z mechanizmu

wyszukiwania

• Ustawienie metody POST – poleca przeglądarce przesłać

dane formularza pod adresem wskazanym parametrem

ACTION.

Mariusz Chmielewski - ISI WAT

Przykłady elementów formularzy

TextField

RadioButto

CheckBox

Mariusz Chmielewski - ISI WAT

Przykłady elementów formularzy

ComboBox

TextArea

Mariusz Chmielewski - ISI WAT

Przykłady elementów formularzy

Mariusz Chmielewski - ISI WAT

Przykłady formularzy

<html>
<body>
<form action="MAILTO:someone@w3schools.com" method="post"

enctype="text/plain">

<h3>This form sends an e-mail to W3Schools.</h3>
Name:<br>
<input type="text" name="name" value="yourname" size="20"><br>
Mail:<br><input type="text" name="mail" value="yourmail" size="20"><br>
Comment:<br> <input type="text" name="comment" value="yourcomment"

size="40">

</form>
</body>
</html>