Osadzenie pliku

(interpretuje: Internet Explorer, Netscape/Mozilla/Firefox, Opera, Chrome)

W przypadku materiałów dźwiękowych (muzyka) i wideo (filmy) korzystniej jest użyć odpowiednio elementów: AUDIO, VIDEO.

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

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!

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

Odsyłacz do podstrony

(w obrębie tego samego serwisu)

Praktycznie na każdej stronie WWW spotyka się odsyłacze (inaczej: odnośniki lub hiperłącza). Najczęściej stanowi je specjalnie wyróżniony krótki tekst (lub obrazek), po kliknięciu którego, następuje przeniesienie do innej strony. Tak jak każda książka składa się z rozdziałów, tak samo serwisy internetowe składają się zwykle z podstron. Każda podstrona jest osobnym plikiem HTML (z rozszerzeniem *.html lub *.htm) i zawiera treść, która dość znacznie różni się tematycznie od pozostałych (tworzy się ją w taki sam sposób jak stronę główną). Taka organizacja ułatwia użytkownikowi nawigację oraz zapobiega niepotrzebnemu wczytywaniu całego serwisu od razu (co trwałoby prawdopodobnie bardzo długo). Umieszczenie wszystkiego w jednym pliku (index.html), absolutnie nie jest wskazane (chyba że Twoja strona jest naprawdę krótka)!

Aby umożliwić użytkownikowi swobodne przechodzenie pomiędzy podstronami naszego serwisu, trzeba je w jakiś sposób połączyć między sobą. Należy umieścić w wybranym miejscu odsyłacze do wszystkich podstron. Zwykle przeznacza się na to osobną stronę, która stanowi spis treści i zawiera ułożone kolejno odsyłacze do wszystkich podstron serwisu.

Składnia odsyłacza do podstrony (w obrębie tego samego serwisu) jest następująca:

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

Za pomocą tego typu odsyłacza można się odnosić do dowolnego pliku znajdującego się na koncie FTP razem ze stroną. Dzięki temu można zbudować dział download, tzn. odsyłacze do pobierania plików.

Struktura tabeli

<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 Edytuj na żywo

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

Edytory 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).

<h1>

Wyobraźmy sobie, że jesteśmy dziennikarzami i piszemy artykuły do gazety. Każdy artykuł musimy zaopatrzyć w nagłówek, oraz przynajmniej jeden akapit. Podobnie jest ze stroną internetową, dłuższy tekst zazwyczaj będziemy poprzedzali ciekawym nagłówkiem, który przyciągnie wzrok czytelnika.

Nagłówki tworzymy używając elementów od <h1> do <h6>. Litera h jest skrótem od ang. słowa heading, czyli nagłówek. Cyfry od 1 do 6 oznaczają hierarchię nagłówków, zaczynając od 1 jako najważniejszego w hierarchii. Może łatwiejsze do wytłumaczenia będzie to jeżeli nagłówek nazwiemy tytułem.

Artykuł zazwyczaj składa się z tytułu głównego i kilku podtytułów. Może się również przydarzyć, że wystąpią podtytuły podtytułów i w tym przypadku potrzebna nam będzie hierarchia. Możemy ją uzyskać poprzez zastosowanie cyfr. Elementem <h1> opatrzymy główny tytuł, elementy <h2> posłużą nam jako tytuły drugiego rzędu, a elementy <h3> jako tytuły trzeciego rzędu.

W ten sposób możemy posługiwać się tytułami, aż do elementu <h6>, jednak w praktyce najczęściej używa się elementów od <h1> do <h3>. Różnice pomiędzy nagłówkami dostrzeżemy nie tylko w kodzie, ale również na ekranie. Domyślnie nasze nagłówki będą różniły się rozmiarem czcionki.

Tekst, który uprzednio napisaliśmy na naszej stronie możemy teraz zamieścić jako nagłówek <h1> i zobaczyć co się stanie, otwierając naszą stronę w przeglądarce. Natomiast zapis w naszym dokumencie będzie wyglądał następująco:

<!DOCTYPE html>
<html>
     <head>
     </head>
     <body>
         <h1>Moja pierwsza strona internetowa.</h1>
     </body>
</html>