HTML

<embed src="/ścieżka dostępu do pliku" width="x" height="y" />

Polecenie <embed /> jest przydatne jeśli chcemy wstawić na stronę jeden z plików multimedialnych:

• *.wav - plik dźwiękowy typu "wav"
• *.mid - plik dźwiękowy typu "midi"
• *.avi - plik typu "avi"
• *.ra - plik Real Audio Player
• *.mp3 - plik dźwiękowy typu "mp3" (MPEG Layer-3)
• *.mpeg - plik typu "mpeg"
• *.mov - plik typu "mov"
• *.asf - plik typu "asf"
• i inne

Polecenie to współpracuje z różnymi wtyczkami (atrybut pluginspage="..."), dzięki którym teoretycznie może odtwarzać nowe formaty plików multimedialnych. Wtyczka (czyli plug-in) to specjalny niewielki program, który można doinstalować do przeglądarki, zwiększając jej możliwości. Po wywołaniu polecenia, wprost na stronie powinno zostać wyświetlone okno (o podanych rozmiarach), w którym będzie odtwarzany wskazany plik.

Należy pamiętać, że pliki multimedialne mają zwykle duże rozmiary, dlatego najlepiej na początku strony umieścić tekst, a dopiero na końcu polecenie <embed />. W takim przypadku w pierwszej kolejności wczyta się tekst.

W przypadku niektórych plików można dodatkowo użyć atrybutów:

1. Automatyczny start odtwarzania:

   <embed src="/ścieżka dostępu do pliku" autostart="typ" />

   gdzie jako "typ" należy podać:

   • "true" - plik zostanie automatycznie odtworzony, zaraz po wczytaniu strony
   • "false" - plik nie zostanie odtworzony po wczytaniu (trzeba go uruchomić "ręcznie" - poprzez wyświetlony panel kontrolny)
2. Ukrycie obrazu:

   <embed src="/ścieżka dostępu do pliku" hidden="typ" />

   gdzie jako "typ" należy podać:

   • "true" - obraz zostanie ukryty
   • "false" - obraz będzie wyświetlony na ekranie.
3. Ukrycie panelu kontrolnego:

   <embed SRC="ścieżka dostępu do pliku" showcontrols="typ" />

   gdzie jako "typ" należy podać:

   • "0" - panel zostanie ukryty
   • "1" - panel będzie wyświetlony na ekranie
4. Ukrycie paska wyświetlania informacji:

   <embed src="/ścieżka dostępu do pliku" showdisplay="typ" />

   gdzie jako "typ" należy podać:

   • "0" - pasek zostanie ukryty
   • "1" - pasek będzie wyświetlony na ekranie
5. Powtarzanie:

   <embed src="/ścieżka dostępu do pliku" loop="typ" />

   gdzie jako "typ" należy podać:

   • "true" - powtarzanie w nieskończoność
   • lub "false" - brak powtarzania
6. Poziom głośności (w przypadku plików dźwiękowych):

   <embed src="/ścieżka dostępu do pliku" volume="v" />

   gdzie "v" oznacza poziom głośności (od "-10000" do "0").
7. Balans głośników (w przypadku stereofonicznego pliku dźwiękowego):

   <embed src="/ścieżka dostępu do pliku" balance="b" />

   gdzie "b" oznacza balans między głośnikami (od "-10000" do "+10000").
8. Adres do pobrania wtyczki (ang. plug-in):

   <embed src="/ścieżka dostępu do pliku" pluginspage="adres wtyczki" />

   gdzie jako "adres wtyczki" należy podać adres internetowy, gdzie znajduje się wtyczka, pozwalająca odtworzyć wybrany rodzaj pliku, dzięki czemu użytkownik będzie ją mógł zainstalować, np.:

   • "http://www.apple.com/quicktime/download/" - wtyczka *.mov (QuickTime)
   • "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" - wtyczka *.swf (Macromedia Flash)
   • "http://www.microsoft.com/Windows/MediaPlayer/" - wtyczka Windows Media Player Plug-In for Netscape - dla posiadaczy Netscape (*.wav, mid, mp3, asf, wma, wmv, avi itp.).

Polecenie <embed /> sprawia wiele kłopotów nawet w przeglądarkach, które je interpretują! Ponadto należy pamiętać, że pliki multimedialne mają zwykle bardzo duże rozmiary, a więc wczytywanie takiej strony w Internecie, może trwać potwornie długo!

Aby umożliwić dotarcie do plików multimedialnych w przeglądarkach, które nie obsługują polecenia <embed />, wskazane jest umieszczenie na stronie znaczników:

<noembed>Treść alternatywna</noembed>

Wewnątrz nich wpisuje się treść, która powinna pojawić się, jeśli polecenie EMBED nie może zostać zinterpretowane. Można tam umieścić np. odsyłacz do pliku:

Zaznacz kod

<noembed>
Niestety Twoja przeglądarka nie odtwarza plików multimedialnych,
ale <a href="/ścieżka dostępu do pliku">tutaj</a>
możesz zobaczyć ten plik!
</noembed>

Możliwe jest również bezpośrednie osadzenie na stronie dokumentu PDF. Jest to format, który stał się powszechnym standardem publikacji elektronicznych. Umożliwia m.in. różnorodne formatowanie tekstu, wstawianie grafiki i inne. Dokumenty PDF można stworzyć np. przy użyciu programu wbudowanego w pakiet biurowy WordPerfect Office 2000, natomiast aby przeglądać pliki PDF, trzeba dysponować darmowym programem Adobe Reader.

Aby można było osadzić na stronie WWW plik PDF, użytkownik oglądający nasz serwis musi mieć zainstalowany program Adobe Reader.

Dodatkowo należy pamiętać o podaniu rozmiarów obiektu EMBED (atrybuty width="..." oraz height="..."), ponieważ jeśli tego nie zrobimy, w MSIE otrzymamy zbyt małe okienko (uniemożliwiające czytanie), natomiast w Netscape Navigatorze trzeba będzie kliknąć prawym przyciskiem myszki i wybrać polecenie "Open".

Drugim sposobem umieszczenia na stronie pliku PDF jest użycie po prostu odsyłacza do pliku w postaci:

Zaznacz kod

<a href="/dokument.pdf">...</a>

W takim przypadku dokument zostanie wczytany bezpośrednio w oknie przeglądarki (MSIE 4, NC 4.5)

Odsyłacze

<a href="/względna ścieżka dostępu do podstrony">opis odsyłacza</a>

<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.

Zwracam uwagę, że w obrębie tabeli tekst i inne elementy można wstawiać tylko wewnątrz znaczników komórek i ewentualnie tytułu tabeli, a nie poza nimi! Poza obrębem tych znaczników można umieszczać tylko ściśle określone elementy, które zostaną szczegółowo opisane w tym rozdziale. Zatem poniższy kod będzie nieprawidłowy:

Zaznacz kod Wypróbuj kod

<table>
Tabela...
<tr>
	<b><td>...</td></b>	<td>...</td>
</tr>
<br />
<tr>
	<b><td>...</td>	<td>...</td></b>
</tr>
<br />
</table>

Edytory (X)HTML posiadają często specjalny generator tabel, który może ułatwić i znacznie przyspieszyć pracę. Niestety edytory tekstowe zwykle nie pozwalają na powtórną edycję kodu, tzn. raz wstawioną tabelę, można modyfikować już tylko ręcznie. Wady tej nie posiadają edytory graficzne (np.: FrontPage).

PRZYKŁAD:

Po wpisaniu:

Zaznacz kod Wypróbuj kod

<table>
<tr>
	<td>komórka1</td>	<td>komórka2</td>
</tr>
<tr>
	<td>komórka3</td>	<td>komórka4</td>
</tr>
</table>

Otrzymamy:

Jak widać, taka tabela nie ma obramowania, dlatego jest mało czytelna. O tym, jak dodać obramowanie do tabeli, przeczytasz w następnym rozdziale.

Dla większej czytelności kodu można umieścić każdy znacznik <td> w nowej linii. Jest to przydatne zwłaszcza w przypadku dość obszernej treści w komórkach. Powyższa tabela jest równoznacza z:

Zaznacz kod Wypróbuj kod

<table>
<tr>
	<td>komórka1</td>
	<td>komórka2</td>
</tr>
<tr>
	<td>komórka3</td>
	<td>komórka4</td>
</tr>
</table>

Oczywiście wcięcia w tekście nie są obowiązkowe, ale zwiększają przejrzystość kodu. Dzięki takiemu sposobowi zapisu, tworzenie i modyfikacja tabeli może przebiegać dużo sprawniej. Na tej stronie w większości została użyta pierwsza metoda wpisywania znaczników, w Internecie najczęściej spotyka się drugą z ewentualnymi dodatkowymi wcięciami przez znacznikami <tr> i </tr>. Możesz oczywiście opracować również własną metodę. Wybierz tą, która najbardziej Ci odpowiada i stosuj ją konsekwentnie.

Odcięcia

Microsoft Internet Explorer 7.0 niepoprawnie interpretuje białe znaki (spacje, tabulatory, znaki nowej linii) w komórkach tabeli w przypadku tworzenia tzw. odcięć, czyli wstawiania do komórek tabeli poszczególnych kawałków pociętego, zwykle większego obrazka. Odcięcia obsługuje wiele programów graficznych, a są one przydatne np. w celu ustalenia różnego stopnia kompresji graficznej poszczególnych kawałków, co zmniejsza rozmiar wynikowy pliku. W takim przypadku wewnątrz komórek tabeli nie powinniśmy umieszczać białych znaków wraz ze znacznikiem <img />! Jeśli nie dotrzymamy tego warunku, w MSIE pojawią się przerwy poniżej każdego kawałka.

Poprawnie:

Zaznacz kod Wypróbuj kod

<td><img src="/..." alt="..." /></td>

Niepoprawnie:

Zaznacz kod Wypróbuj kod

<td><img src="/..." alt="..." /> </td>
<td>
<img src="/..." alt="..." />
</td>
<td>
	<img src="/..." alt="..." />
</td>

Rozmiar i wielkość czcionki (oraz jej rodzaj w Netscape 6) zdefiniowane poza tabelą mogą nie mieć wpływu na tekst wewnątrz niej!

Aby to zmienić, należy zdefiniować w każdej komórce osobno rozmiar czcionki. Jednak lepszym rozwiązaniem jest wstawienie w nagłówku dokumentu:

Zaznacz kod Wypróbuj kod

<style type="text/css">
/* <![CDATA[ */
td { font-size: wielkośćpx; color: kolor; font-family: rodzaj }
/* ]]> */
</style>

Inne zastosowania tabel

Tabele na stronach WWW są używane nie tylko do prezentacji zbioru uporządkowanych danych, lecz również do określonego ustawienia elementów strony. Na przykład za pomocą tabeli bez obramowania możemy ustawić w jednej linii dwa elementy w ten sposób, że pierwszy znajdzie się przy lewej krawędzi strony, a drugi przy prawej:

Zaznacz kod Wypróbuj kod

<table border="0" width="100%">
<tr>
	<td align="left">LEWA</td>	<td align="right">PRAWA</td>
</tr>
</table>

Struktura strony

Innym częstym zastosowaniem tabel jest tworzenie struktury strony. Można np. w lewej kolumnie umieścić spis treści serwisu, a w prawej - zawartość tekstową strony. Na górze można przeznaczyć miejsce na animowany banner lub/i logo serwisu:

Zaznacz kod Wypróbuj kod

<table width="100%" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj można umieścić logo serwisu</td>
</tr>
<tr>
<td bgcolor="kolor menu" width="Tutaj wpisz szerokość menu (np.: 150)" valign="top">
Tu umieszcza się odsyłacze spisu treści
</td>
<td bgcolor="kolor strony" valign="top">

Tu wpisuje się treść strony

</td>
</tr>
</table>

Tworzenie struktury strony opartej o tabele nie jest zalecane. Pierwotnym przeznaczeniem tabel była i jest prezentacja serii danych o różnych powtarzających się typach. Do układania zwykłych elementów na stronie lepiej nadaje się CSS i takie własności jak: pozycjonowanie, ustawienie, przyleganie, rozmiary, marginesy i inne. Zobacz: Szablon strony na DIV-ach.

Wadą powyższego rozwiązania jest to, że taką samą strukturę musimy umieścić na każdej pojedynczej podstronie naszego serwisu, co znacznie utrudnia późniejszą modyfikację szaty graficznej. Na szczęście wiele edytorów HTML obsługuje tzw. szablony. Jest to mechanizm, pozwalający modyfikować jednocześnie wiele stron, na których umieszczono taki sam fragment kodu (chodzi tutaj o spis treści, banner itp.). Zwykle szablony pracują poprzez wklejenie na każdej ze stron takiego samego nagłówka (na początku) oraz stopki (na końcu). W kodzie powyżej nagłówek został napisany kolorem niebieskim, natomiast stopka - zielonym. Kolor czarny oznacza tekstową zawartość konkretnej strony, którą wpisujemy bez użycia szablonu.

Strona niezależna od rozdzielczości ekranu

W powyższym kodzie ustalono szerokość tabeli równą 100%, czyli będzie ona zajmowała zawsze całą szerokość okna przeglądarki (minus marginesy) bez względu na rozdzielczość, w jakiej pracuje użytkownik. Takie podejście powoduje jednak, że tekst i inne elementy strony są inaczej ustawione w różnych rozdzielczościach ekranu. W niektórych przypadkach może to zupełnie popsuć całą estetykę serwisu. Dlatego bardzo często szerokość głównej tabeli strony ustala się nie w procentach ale w pikselach, przy czym dopasowuje się ją tak, aby w najniższej z popularnych rozdzielczości (800x600) nie pojawiał się poziomy suwak do przewijania strony. Należy przy tym zauważyć, że wartość 800 jest zbyt duża, ponieważ w oknie przeglądarki musi się jeszcze zmieścić pionowy suwak oraz miejsce na marginesy strony, które można z resztą ustalić "na zero", jednak i tak zaleca się pewien niewielki zapas bezpieczeństwa. Zwykle największą możliwą szerokością przy zerowych marginesach jest 770 pikseli. Tabelkę taką można wyśrodkować i wtedy w wyższych rozdzielczościach (np. 1024x768) pojawią się puste przestrzenie po bokach strony, jednak wszystkie elementy treści będą poukładane dokładnie tak samo, a więc otrzymamy stronę "niezależną" od rozdzielczości ekranu. To dużo efektywniejsze rozwiązanie niż budowa osobnych wersji serwisu dla każdej rozdzielczości.

Do uzyskania takiego efektu, lepszym rozwiązaniem od tabel jest użycie bloków, np.:

Zaznacz kod Wypróbuj kod

<body style="text-align: center; margin: 0; padding: 0">
<div style="width: 770px; margin: 0 auto; text-align: left">

Tu wpisuje się treść strony

</div>
</body>

Stosowanie tabel ma jedną zasadniczą wadę: Microsoft Internet Explorer 7.0 wyświetla zawartość tabeli dopiero kiedy zostanie ona całkowicie wczytana. Oznacza to, że zanim nie załaduje się cała treść strony, w oknie przeglądarki nic nie zobaczymy. Wczytywanie może trwać długo i użytkownicy mogą się zniechęcić. Problem ten nie występuje na zwykłych stronach, gdzie najpierw wyświetlany jest początek strony, a dalsza część jest doczytywana w czasie, kiedy użytkownik czyta wstęp. Identyczny efekt uzyskamy w każdej przeglądarce, jeżeli zbudujemy stronę opierając się na możliwościach CSS, a nie na tabelach. Zarówno Netscape/Mozilla/Firefox jak i Opera potrafią ładować treść tabeli stopniowo, ale Microsoft Internet Explorer 7.0 niestety nie.

Niedogodności tej są pozbawione ramki (i to niezależnie od przeglądarki). Pozwalają one uzyskać podobną strukturę strony, ale nie posiadają szeregu wad związanych z tabelami, takich jak: zwiększenie objętości stron (wydłużenie wczytywania), problemy z treścią która nie mieści się w szerokości ekranu (psuje to całą estetykę strony), zależność przewijania treści menu oraz zawartości strony, kłopoty z szablonami (nie potrafią modyfikować różniącej się treści), zawiła struktura strony. Jednak niektóre osoby uważają ramki za "niemodne". W takim przypadku rozwiązaniem może okazać się kompromis - połączenie tabelek i ramek w jednym szablonie (ostatnio bardzo popularne rozwiązanie, stosowane na wielu stronach):

Zaznacz kod Wypróbuj kod

<table width="750" align="center" cellspacing="0" cellpadding="10">
<tr>
<td bgcolor="kolor góra" colspan="2" align="center" valign="middle">Tutaj można umieścić logo serwisu</td>
</tr>
<tr>
<td bgcolor="kolor menu" width="150" valign="top">
<!-- MENU -->
<a target="strona" href="/home.html">Strona główna</a><br />
<a target="strona" href="/strona1.html">Rozdział 1</a><br />
<a target="strona" href="/strona2.html">Rozdział 2</a><br />
<a target="strona" href="/linki.html">Linki</a><br />
<a href="mailto:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.">Kontakt</a><br>
<!-- MENU koniec -->
</td>
<td bgcolor="kolor strony" valign="top"><iframe name="strona" src="/home.html" width="560" height="440" frameborder="0"></iframe></td>
</tr>
</table>

Taki sposób budowania struktury strony jednak też nie jest pozbawiony wad. Na ekranie mogą pojawić się dwa pionowe suwaki do przewijania strony, co sprawia kłopoty w mniejszych rozdzielczościach, a w większych okienko do wczytywania treści kolejnych stron może mieć niewystarczającą wysokość. Problem można jednak w całości rozwiązać za pomocą skryptu AutoIFRAME.

Przy tworzeniu własnego szablonu WWW o bardziej skomplikowanej strukturze może Ci pomóc generator zamieszczony tutaj.

Ramki

Innym ciekawym zastosowaniem tabel jest tworzenie "ramek" z zaokrąglonymi bądź ściętymi rogami.

Lepszym rozwiązaniem będzie użycie CSS, ponieważ tabele nie zostały zaprojektowane z myślą o tworzeniu efektów graficznych na stronach.

Aby wstawić na stronę taki element trzeba najpierw narysować w dowolnym programie graficznym wszystkie cztery narożniki, np.:

Warto również wykonać przezroczysty obrazek GIF o rozmiarach 1x1 piksel, który posłuży nam do usunięcia efektu nieestetycznie wyglądających pustych komórek tabeli. Brak zawartości komórki może spowodować jej błędne wyświetlenie, a wstawienie tam tekstu - zbyt duże jej rozciągnięcie!

Tutaj jest obrazek:  (w celu ułatwienia skopiowania jest sztucznie powiększony oraz dodano obramowanie).

Następnie tworzymy tabelę z trzema kolumnami i trzema wierszami. W komórkach narożnych wstawiamy narysowane wcześniej obrazki, natomiast w pozostałych komórkach ustalamy kolor tła, taki sam jak kolor rysunków narożników i umieszczamy przezroczysty obrazek. W komórce centralnej wpisujemy właściwą treść tabelki:

Zaznacz kod Wypróbuj kod

<table cellpadding="0" cellspacing="0">
<tr><td style="line-height: 1px"><img src="/lg.gif" alt="" /></td><td bgcolor="#426B9C" style="line-height: 1px"><img src="/0.gif" alt="" /></td><td style="line-height: 1px"><img src="/pg.gif" alt="" /></td></tr>
<tr><td bgcolor="#426B9C"><img src="/0.gif" alt="" /></td><td bgcolor="#426B9C">

<font color="#C0FFFF"><b>Tabelka z zaokrąglonymi rogami</b></font>

</td><td bgcolor="#426B9C"><img src="/0.gif" alt="" /></td></tr>
<tr><td style="line-height: 1px"><img src="/ld.gif" alt="" /></td><td bgcolor="#426B9C" style="line-height: 1px"><img src="/0.gif" alt="" /></td><td style="line-height: 1px"><img src="/pd.gif" alt="" /></td></tr>
</table>

Efekt:

	Tabelka z zaokrąglonymi rogami

To samo z obramowaniem - dla pokazania zasady:

	Tabelka z zaokrąglonymi rogami

Zauważ, że aby otrzymać taki efekt wystarczy narysować cztery małe obrazki (w przykładzie o rozmiarach 10x10 pikseli), dzięki czemu nie spowalniają one zbytnio ładowania strony, a tabelka może mieć dowolne wymiary, zależne od długości wpisanego w niej tekstu.

Ustalając różne kolory tła w odpowiednich komórkach tabeli, można również uzyskać np. taki efekt:

	Dwukolorowa tabelka z zaokrąglonymi rogami

Inne ciekawe przykłady:

	Tylko dwa narożniki zaokrąglone

<table cellpadding="0" cellspacing="3">