HTML - slajady w wordzie, HTMLW2, Narzędzia komputerowe

Tabele

Definicja tabeli:
<TABLE>...</TABLE>
Znaczniki w tabeli:
<TR>...</TR> wiersz (table row)
<TD>...</TD> komórka (table data)
<TH>...</TH> nagłówek tabeli (domyślnie
czcionka pogrubiona)
W komórkach tabeli można umieszczać dowolne obiekty (także tabele)

Ogólny schemat tabeli

<TABLE>

<TR>

<TD>...</TD> <TD>...</TD>

</TR>

<TR>

<TD>...</TD> <TD>...</TD>

</TR>

</TABLE>

Parametry znacznika <TABLE>

BORDER=n grubość obramowania tabeli
BORDERCOLOR kolor obramowania tabeli
CELLSPACING=n odległość między komórkami
tabeli (domyślnie n=2)
CELLPADDING=n odległość zawartości komórki
od obramowania
(domyślnie n=1)
ALIGN wyrównanie tabeli do tekstu
(jak dla znacznika IMG)

Parametry znacznika <TABLE>

HEIGHT="n%" wysokość tabeli
(w procentach wysokości okna)
HEIGHT=n wysokość tabeli (w pikselach)
WIDTH="m%" szerokość tabeli
(w procentach szerokości okna)
WIDTH=m szerokość tabeli (w pikselach)
BGCOLOR="kolor" kolor tła komórek tabeli
BACKGROUND="URL" rysunek, który będzie
tłem dla komórek tabeli

Szerokość komórek tabeli

Szerokość komórek tabeli automatycznie dopasowuje się do tekstu
Ustalenie szerokości w stosunku do szerokości całej tabeli

<TH WIDTH="n%">

<TD WIDTH="n%">

Ustalenie szerokości w liczbach bezwzględnych

<TH WIDTH=n>

<TD WIDTH=n>

Przykład tabeli

<CENTER>

<H3> Ramowy program konferencji </H3><BR><BR>

<TABLE BORDER=1 WIDTH="80%" BGCOLOR=”aqua”>

<TR> <TH WIDTH="10%"> Data </TH>

<TH WIDTH="50%"> Tematyka </TH>

<TH WIDTH="40%"> Prowadzący </TH></TR>

<TR> <TD> 24.05 </TD>

<TD> Komputery w medycynie </TD>

<TD> prof. Apolinary Kowal (AM) </TD></TR>

<TR> <TD> 25.05 </TD>

<TD> Informatyka w rolnictwie </TD>

<TD> prof. Wincenty Nowak (AR) </TD></TR>

</TABLE>

</CENTER>

Widok przykładowej tabeli

Przykłady marginesów tabeli

<TABLE BORDER CELLSPACING=8>

<TABLE BORDER CELLPADDING=15>

Określanie wyglądu komórek

Wyrównanie danych w komórkach

poziome wyrównanie danych - parametr ALIGN, np.
<TD ALIGN=”center”>...</TD>
pionowe wyrównanie danych - parametr VALIGN, np. <TD VALIGN=”top”>...</TD>
wyrównanie danych jednakowo w całym wierszu, np.
<TR ALIGN=”right”> ...</TR>

Określanie tła komórek lub wierszy, np.

<TR BGCOLOR=”kolor”>

<TD BGCOLOR=”kolor”>

<TD BACKGROUND=”rysunek”>

Tytuł tabeli

Podpis tabeli można zdefiniować:
<CAPTION ALIGN="położenie">Tekst
</CAPTION>
Położenie - np. "top", "bottom" (domyślnie "top")
Znacznik <CAPTION> musi występować wewnątrz znaczników
<TABLE>...</TABLE>

Tabela z tytułem

<TABLE BORDER=1>

<CAPTION>Sprzedaż w mln $</CAPTION>

<TR>

<TH></TH><TH>1999</TH>

<TH>2000</TH><TH>2001</TH></TR>

<TR ALIGN="CENTER">

<TH>Czechy</TH><TD>60</TD>

<TD>99</TD><TD>100</TD></TR>

<TR ALIGN="CENTER">

<TH>Węgry</TH><TD>100</TD>

<TD>164</TD><TD>150</TD></TR>

</TABLE>

Łączenie komórek

Komórki danych i nagłówków można ze sobą łączyć

rozciągnięcie komórki na x wierszy: <TD ROWSPAN=x>
rozciągnięcie komórki na y kolumn: <TD COLSPAN=y>

Przykład (fragment poprzedniej tabeli)

<TR ALIGN="center">

<TH>Czechy</TH>

<TD ROWSPAN=2>160</TD>

<TD>99</TD><TD>100</TD></TR>

<TR ALIGN="CENTER">

<TH>Węgry</TH><TD>164</TD>

<TD>150</TD></TR>

Ramki

Ramki (frames) dzielą ekran na kilka obszarów - w każdym może być osobny dokument HTML
Definicja ramki - w specjalnym pliku HTML (szablonie ramek)
Szablon ramek zamiast znacznika <BODY> ma blok <FRAMESET>...</FRAMESET>
Definicja <FRAMESET> określa wielkość ramki
Ilość ramek zależy od ilości wystąpień znacznika <FRAME>

Ramki

Sposób podziału ramki ustalają parametry znacznika <FRAMESET>

ROWS podział w pionie
COLS podział w poziomie

Parametrami COLS i ROWS mogą być

liczby bezwzględne (ilość pikseli)
liczby względne (procent zajętego ekranu)
znak gwiazdki (*) - pozostała część ekranu

W obrębie bloku <FRAMESET> - tylko znacznik <FRAME> i zagnieżdżone bloki <FRAMESET>

Ramki

Inne parametry znacznika <FRAMESET>

FRAMEBORDER=1/0 włączenie/wyłączenie
obramowania
BORDER=n grubość obramowania
BORDERCOLOR="kolor" kolor obramowania

Blok <NOFRAME>...</NOFRAME>
określa dokument, który jest wyświetlany przez przeglądarkę, która nie obsługuje ramek
Znacznika <NOFRAME> używa się tylko w bloku <FRAMESET>

Parametry znacznika <FRAME>

SRC="URL" URL pliku w ramce
NAME="ramka" nazwa ramki (do komunikacji
między ramkami)
SCROLLING="typ" typ wyświetlania pasków
przewijania w ramkach:
"auto" - w razie potrzeby
"yes" - zawsze
"no" - bez pasków
NORESIZE zakaz skalowania ramki

Struktura dokumentu z ramkami

<HTML>

<HEAD>...</HEAD>

<FRAMESET ROWS="25%,50%,*">

<FRAME SRC="plik3.html">

</FRAMESET>

</HTML>

Widok dokumentu z ramkami

Przykład ramek zagnieżdżonych

<HTML>

<FRAMESET ROWS="50%,*">

<FRAMESET COLS="25%,25%,*">

<FRAME SRC="test.html">

<FRAME SRC="test.html"></FRAMESET>

<FRAMESET COLS="35%,*">

<FRAME SRC="test.html">

<FRAME SRC="test.html"></FRAMESET>

</FRAMESET>

</HTML>

Widok ramek zagnieżdżonych

Odnośniki w ramkach

Parametr TARGET znacznika <A> pozwala załadować dokument w oknie ramki o danej nazwie (NAME w znaczniku <FRAME>)
<A HREF="URL" TARGET="ramka"> ... </A>
Specjalne nazwy parametru TARGET

"_blank" nowe, puste okno
"_self" okno aktywne
"_parent" okno nadrzędne
"_top" całe okno przeglądarki

Przykład - odnośniki w ramkach

Szablon ramek

<HTML>

<TITLE> Konferencja LAFI </TITLE>

<FRAMESET COLS="25%,*">

<FRAME SRC="spis.htm">

<FRAME SRC="tytul.htm"

NAME="home">

</FRAMESET>

</HTML>

Plik spis.htm

<HTML>

<BODY BGCOLOR="white">

<B><I> Konferencja LAFI </I>

</B><P>

<A HREF="program.htm"

TARGET="home"> Program

</A><BR>

<A HREF="opis.htm"

TARGET="home"> Opis </A>

</BODY>

</HTML>

Widok dokumentu z ramkami

Pływające ramki

Ramka pływająca (inline frame, ramka lokalna) - ramka umieszczana w dowolnym miejscu strony
Ramki pływające definiuje znacznik
<IFRAME WIDTH=n HEIGHT=n SRC=”URL”> Twoja przeglądarka nie akceptuje pływających ramek!</IFRAME>
Możliwość ustawiania pozostałych parametrów ramek (SCROLLING, FRAMEBORDER itp.)
Ramki pływające interpretuje tylko Explorer

Przykład pływającej ramki

Formularze

Blok formularza: <FORM>...</FORM>
Obsługa formularzy - skrypty CGI
W „czystym” HTML można tylko przesłać formularz pocztą elektroniczną
Schemat formularza

<FORM>

<INPUT> pole wejściowe (element formularza)

<TEXTAREA> wielowierszowe pole tekstowe

<SELECT> lista z wybieranymi argumentami

</FORM>

Parametry znacznika <FORM>

ACTION URL do pliku CGI, który ma opracować
dane lub MAILTO:adres@e-mail
METHOD metoda przesyłania danych
GET -domyślna
POST -lepsza dla dużych formularzy
ENCTYPE określenie programu obsługującego typ
danych przesłanych w formularzu -np.
"text/plain", "image/jpeg"
NAME nazwa formularza
TARGET ramka z wynikiem działania skryptu

Rodzaje formularzy

Element formularza tworzy i wyświetla znacznik <INPUT>
Rodzaj elementu określa parametr TYPE, np. <INPUT TYPE="TEXT">
Sposób określenia wartości pola, np.
<INPUT TYPE="RADIO"> student

Typy elementów formularzy

TEXT

pole tekstowe jednowierszowe

(domyślny typ elementu)

<INPUT TYPE="TEXT">

PASSWORD

pole tekstowe jednowierszowe,

gwiazdki zamiast znaków

<INPUT TYPE="PASSWORD">

Typy elementów formularzy

RESET

specjalny przycisk, kasuje dane wprowadzone do formularza

<INPUT TYPE="RESET">

SUBMIT

specjalny przycisk, wysyła formularz do serwera

<INPUT TYPE="SUBMIT">

Typy elementów formularzy

CHECKBOX

pole wyboru

(można wybrać kilka elementów)

<INPUT TYPE="CHECKBOX">HTML<P>

<INPUT TYPE="CHECKBOX">XML<P>

<INPUT TYPE="CHECKBOX">XHTML<P>

Typy elementów formularzy

RADIO

pole wyboru

(można wybrać tylko jeden element)

<INPUT TYPE="RADIO">HTML<P>

<INPUT TYPE="RADIO">XML<P>

<INPUT TYPE="RADIO">XHTML<P>

Typy elementów formularzy

HIDDEN element niewidoczny (zwykle
z informacjami dodatkowymi -
np. opis formularza)
BUTTON przycisk
FILE plik dołączany do formularza
IMAGE obiekt graficzny, naciśnięcie klawisza
myszy w obrębie rysunku wysyła do
serwera współrzędne kursora myszy

Parametry znacznika <INPUT>

NAME etykieta elementu
(widoczna np. w e-mailu)
TYPE rodzaj elementu
SIZE dla TEXT i PASSWORD
- długość pola tekstowego
MAXLENGTH dla TEXT i PASSWORD
- maksymalna długość
wprowadzanego tekstu

Parametry znacznika <INPUT>

VALUE - dla CHECKBOX i RADIO - określa,
czy wartość pola ma być
wysłana z formularzem ("on" -
wartość domyślna) czy nie ("off")
- dla RESET i SUBMIT - określa treść
napisu na przycisku
CHECKED dla CHECKBOX i RADIO
- domyślne zaznaczenie pól

Listy rozwijane

Listę rozwijaną z wybieranymi pozycjami tworzy znacznik <SELECT> ...</SELECT>
Definiowanie listy

SELECT>

<OPTION> pozycja listy

.....

<OPTION>

</SELECT>

Listy rozwijane

Przykład listy rozwijanej

<SELECT>

<OPTION>HTML

<OPTION>XML

<OPTION>XHTML

</SELECT>

Listy rozwijane

Parametry znacznika <SELECT>

NAME nazwa pola wyboru
SIZE rozmiar czcionki (od 1 do7, domyślnie 3)
MULTIPLE umożliwia wybranie kilku elementów
jednocześnie

Parametry znacznika <OPTION>

SELECTED domyślne zaznaczenie elementu listy
VALUE wartość, która ma zostać przesłana
z formularzem

Pola tekstowe

Wielowierszowe pole tekstowe tworzy znacznik:

<TEXTAREA>

ewentualny

domyślny tekst

</TEXTAREA>

Parametry znacznika <TEXTAREA>

NAME nazwa pola tekstowego
ROWS liczba wierszy w polu
COLS liczba kolumn w polu

Przykładowy formularz zamówienia

<HTML><BODY><H4> Dane zamawiającego </H4)

<FORM ACTION="MAILTO:xx@pluton.pol.lublin.pl">

<P> Imię i nazwisko <BR>

<INPUT TYPE="TEXT" NAME="name"> </INPUT><P>

<P> Pełny adres <BR>

<TEXTAREA NAME="adres" ROWS="2"></TEXTAREA><P>

<BR><U> Zamówione książki </U> <BR>

<INPUT TYPE="CHECKBOX" NAME="ksiazka" VALUE="html">

HTML i Java Script </INPUT> <BR>

<INPUT TYPE="CHECKBOX" NAME="ksiazka" VALUE="java11">

Java 1.1 </INPUT> <BR>

<INPUT TYPE="CHECKBOX" NAME="ksiazka" VALUE="jcp">

Java dla programistów C i C++ </INPUT><BR>

<BR> <INPUT TYPE="SUBMIT" VALUE="Wyślij"> </INPUT>

<INPUT TYPE="RESET" VALUE="Wyczyść"> </INPUT>

</FORM></BODY></HTML>

Widok formularza zamówienia

Treść e-maila z zamówieniem

name=Jan Kowalski

adres=00-950 Warszawa

ul. Krucza 56/8

ksiazka=html

ksiazka=java11

Multimedia

Odsyłacze do plików multimedialnych

dźwiękowych
wideo
VRML

Odsyłaczy brak w standardzie HTML 4.0
Dwa odrębne typy odsyłaczy

styl Netscape
styl Microsoft

Znacznik <EMBED>

Znacznik <EMBED> umożliwia osadzanie w dokumencie rysunków, sekwencji wideo, plików dźwiękowych
Obsługiwany przez obie przeglądarki

Netscape Navigator (standardowo przez wtyczkę LiveAudio)
Internet Explorer (korzysta z instalowanego z przeglądarką ActiveMovie)

Znacznik <EMBED>

Parametry znacznika

HEIGHT=n wysokość obiektu-piksele
WIDTH=n szerokość obiektu-piksele
SRC="URL" nazwa pliku

Przykład
<EMBED SRC="music.au" HEIGHT=50 WIDTH=250>

Wstawianie apletów Javy

Specjalnie do wstawiania apletów Javy służy blok <APPLET>...</APPLET>
Od wersji 4.0 HTML - blok
<OBJECT>...</OBJECT>
do osadzania

apletów
kontrolek ActiveX
innych plików związanych z odpowiednimi plug-inami

Przykład dokumentu z apletem

<HTML>

<BODY>

<APPLET CODE="Prace/Zegar.class"

WIDTH=600 HEIGHT=200>

</APPLET>

</BODY>

</HTML>

Parametry znacznika <APPLET>

CODE nazwa pliku z apletem (*.class)
HEIGHT wysokość apletu (piksele)
WIDTH szerokość apletu (piksele)
ALT alternatywny tekst
ALIGN wyrównanie pola z apletem
CODEBASE adres bazowy apletu (= SRC)
HSPACE poziomy odstęp od reszty strony
VSPACE pionowy odstęp od reszty strony
NAME nazwa apletu

Parametry znacznika <OBJECT>

BORDER=n grubość obramowania
CLASSID nazwa pliku z obiektem
TYPE typ obiektu
DATA adres danych dla obiektu
STANDBY komunikat wyświetlany przy
ładowaniu obiektu
ALIGN, CODEBASE, HEIGHT, WIDTH, HSPACE, VSPACE, NAME

Przyszłość HTML

Konsorcjum W3C nie przewiduje dalszego rozwoju języka HTML
Miejsce HTML zajmuje XHTML (Extensible HyperText Markup Language)
Pierwszy standard - XHTML 1.0 (styczeń 2000)

DHTML

DHTML (Dynamic HTML, dynamiczny HTML) - zbiorczy termin określający język opisu strony HTML wraz z jego rozszerzeniami umożliwiającymi tworzenie interaktywnych i zmieniających się dynamicznie stron WWW
Rozszerzenia np.