• 
  Wstęp

  Jak wstawić na swojej stronie widżet (widget) - np. filmik z YouTube'a albo post z Facebooka czy Twittera?

• 
  Ramki lokalne <iframe>

  Jak wstawić ramkę (okienko, widżet) bezpośrednio w treści strony WWW?

• 
  Wczytywanie strony do ramki lokalnej <a target>

  Co zrobić, aby strony z menu wczytywały się do ramki umieszczonej bezpośrednio w treści?

• 
  Ostrzeżenie przed ramką

  Jak poinformować użytkownika, że spis treści ramek znajduje się na innej stronie? Jak nie dopuścić do wczytania niekompletnych ramek?

• 
  Szablon strony bez ramek

  Jak umieścić menu serwisu w osobnym pliku, tak aby w przypadku modyfikacji nie trzeba było go zmieniać na każdej podstronie?

• 
  Powtórka

  HTML

• 
  Quiz i certyfikat ukończenia

  HTML

• 
  Ćwiczenia

  HTML

Ramka to dodatkowe okienko, często z własnymi suwakami do przewijania jego zawartości, umieszczone bezpośrednio na stronie, w którym jest wyświetlana inna strona. Można powiedzieć, że jest to taka strona w stronie. W jednym dokumencie HTML możemy umieścić wiele tego typu okienek. Jednak należy pamiętać, że każde z nich wczytuje wewnątrz pełną stronę - razem ze wszystkimi multimediami, które mogą być na niej osadzone. Może to oznaczać bardzo długi czas ładowania całego dokumentu z wstawionymi zbyt wieloma takimi ramkami.

Do czego mogą się przydać ramki? Strony wyświetlane wewnątrz nich nie przejmują sposobu formatowania (koloru, rozmiaru ani kroju czcionki itp.) z dokumentu, w którym zostały osadzone. Dzięki tej własności są szczególnie chętnie używane przez twórców różnego rodzaju widżetów, czyli specjalnych gotowych wstawek, które można osadzić na swojej stronie. W ten właśnie sposób osadza się np. filmiki z YouTube'a, a także posty z Facebooka czy Twittera. Każdy z tych serwisów udostępnia do użycia gotowe widżety. Przygotowany do wstawienia krótki kod takiego widżetu można pobrać najczęściej wybierając opcję "Umieść", "Osadź" lub "Zamieść". Właścicielom tych witryn zależy na tym, aby ich widżety wyglądały tak samo, nieważne na jakiej stronie zostaną osadzone - a to właśnie zapewniają ramki. Natomiast właścicielom stron ramki dają bezpieczeństwo: taki zewnętrzny widżet nie popsuje strony, ponieważ nie może on nic zmienić poza obrębem ramki, w której jest wyświetlany.

Tego typu widżety oczywiście możemy również projektować samodzielnie i udostępniać do wstawienia na innych stronach. Możemy je jednak tworzyć nawet tylko na własny użytek. Jak być może czytelnik zdążył już zauważyć, w standardowym, statycznym serwisie internetowym menu nawigacyjne powinno być powtórzone na każdej podstronie. W przeciwnym razie przemieszczając się po witrynie użytkownik straci możliwość szybkiego przejścia do innych podstron bądź powrotu na stronę główną. Jeżeli menu nawigacyjne umieścimy tylko na stronie głównej, użytkownik bardzo łatwo może się pogubić, a co za tym idzie szybko opuścić naszą stronę. Niestety jeśli wstawimy to samo menu nawigacyjne na każdej podstronie, możemy mieć w przyszłości sporo pracy, gdy do naszej witryny będziemy chcieli dodać nowe podstrony. Wtedy trzeba będzie mozolnie zmieniać menu w każdym istniejącym dotąd dokumencie, w celu dodania do niego odsyłacza do nowej podstrony. Aby wyeliminować tę niedogodność, a jednocześnie nie utrudniać naszym użytkownikom nawigacji w serwisie, możemy stworzyć jeden wspólny widżet zawierający odnośniki menu, a następnie osadzić go na każdej podstronie. To samo dotyczy innych stałych elementów witryny: nagłówka (wraz z logotypem) i stopki serwisu.

Podobny efekt do ramek pozwalają uzyskać dynamiczne skrypty działające po stronie serwera - np. PHP lub SSI [zobacz: Szablon strony bez ramek]. Dzięki nim menu nawigacyjne tak samo możemy umieścić w pojedynczym pliku, a skrypt sam automatycznie powieli go na wszystkich podstronach naszego serwisu. Uzyskujemy wtedy wszystkie zalety tradycyjnych stron, a jednocześnie wygodę wprowadzania zmian w serwisie. Niestety nie każdy serwer obsługuje tego typu skrypty. Poza tym takie rozwiązanie może być bardziej skomplikowane w użyciu, ale zdecydowanie jest warte zachodu.

pływające (ang. inline)

Ramki lokalne <iframe>

<iframe src="lokalizacja">
	<a href="lokalizacja">Tekst alternatywny</a>
</iframe>

Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o różnych rozmiarach. Dzięki temu możemy do takiej ramki wczytywać inne dokumenty [zobacz: Wstęp].

Jeśli nie określimy koloru tła dokumentu wczytywanego do ramki lokalnej, przeglądarka może przyjąć dla niego kolor tła strony, na której wstawiona jest ramka.

Pomiędzy znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod, który wyświetli się tylko w sytuacji, jeśli przeglądarka nie obsługuje ramek lokalnych. Najłatwiej podać po prostu odsyłacz do tej samej strony, którą wczytujemy do ramki. Wtedy użytkownicy niekompatybilnych przeglądarek będą mogli przynajmniej bezpośrednio do niej przejść. Oczywiście zamiast odnośnika można również wstawić jakąś alternatywną treść, przeznaczoną do przeglądania bez ramek.

Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy wstawianiu ramek lokalnych na stronach internetowych, zobacz rozdział HTML5: Wstępne ładowanie, Leniwe ładowanie, Piaskownica zabezpieczająca, Osadzenie kodu HTML w ramce lokalnej.

Rozmiar ramki <iframe width height>

<iframe src="lokalizacja" width="x" height="y">...</iframe>

<iframe src="lokalizacja" width="x%" height="y%">...</iframe>

Jeżeli zawartość ramki będzie większa niż jej rozmiary, przeglądarka wyświetli suwaki do przewijania jej treści.

Przykład <iframe width height>

width="50%" height="200"

Nazwa ramki <iframe name>

<iframe src="lokalizacja" name="Tu wpisz nazwę ramki">...</iframe>

Nadanie nazwy ramce umożliwia później wczytywanie do niej innych stron [zobacz: Wczytywanie strony do ramki lokalnej].

Nazwa ramki musi rozpoczynać się od litery Lepiej również nie używać: wielkich liter, znaków specjalnych (np.: \ / : * ? " < > |), spacji (w zamian używaj podkreślnika "_", ale nie na początku), polskich liter.
W pojedynczym dokumencie HTML nie mogą się znajdować dwie ramki o takiej samej nazwie.

Wczytywanie strony do ramki lokalnej <a target>

<a target="cel" href="lokalizacja">opis</a>

Jak widać powyższe polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut target="..." pozwalający wczytać stronę do wybranej przez nas ramki - w szczególności innej niż ta, w której znajduje się odnośnik. Dzięki temu treść w takiej ramce (okienku) może się zmieniać, nawet już po załadowaniu strony.

Atrybuty target="_top" i target="_parent" działają bardzo podobnie. Różnice można zauważyć dopiero w przypadku większej liczby zagnieżdżonych ramek - np. strona w stronie w stronie. Załóżmy, że mamy plik "index.html", w którym umieszczamy taką ramkę:

<iframe src="ramka1.html"></iframe>

Jak widać, spowoduje to osadzenie na stronie ramki i załadowanie do niej dokumentu "ramka1.html". Załóżmy teraz, że w pliku "ramka1.html" znajduje się m.in. taki kod:

<iframe src="ramka2.html"></iframe>

Tutaj znowu osadzamy ramkę, ale tym razem z innym dokumentem. W pliku "ramka2.html" możemy umieścić następujące odsyłacze:

<a target="_top" href="...">Ten link załaduje się w miejsce pliku "index.html"</a>
<a target="_parent" href="...">Ten link załaduje się w miejsce pliku "ramka1.html"</a>
<a href="...">Ten link załaduje się w miejsce pliku "ramka2.html"</a>

Przykład <a target>

Zobacz powyższy przykład

Wczytanie stron do dwóch ramek

Jak łatwo zauważyć, za pomocą pojedynczego odsyłacza można wczytać nową stronę tylko do jednej ramki jednocześnie. Jeśli chcielibyśmy aby po kliknięciu odnośnika zmieniła się zawartość dwóch (lub więcej) ramek, można w tym celu użyć JavaScriptu:

<a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a>

gdzie "nazwaramki1" i "nazwaramki2" to wartości atrybutów name="..." nadane znacznikom IFRAME.
Natomiast "adres1.html" oraz "ades2.html" to adresy (lub względne ścieżki dostępu) stron, które chcemy wczytać do wskazanych ramek.

W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki albo self.nazwaramki (patrz powyżej).

Możliwe jest oczywiście załadowanie więcej niż dwóch ramek. Należy wtedy wpisać dalsze polecenia typu: parent.nazwaramki.location.href = 'adres.html' oddzielone średnikami (";").

Surfując w Internecie możemy czasem natrafić na stronę, która wygląda jakoś dziwnie: nie posiada żadnego menu ani spisu treści, w którym można wybrać interesujący nas temat i swobodnie nawigować w całym serwisie. Strona taka jest jakby wyrwana z szerszej całości, ponieważ prawdopodobnie wchodzi w skład struktury ramek, lecz użytkownik wczytał ją bezpośrednio, a nie przez stronę startową. Dzieje się tak dlatego, ponieważ wyszukiwarki sieciowe indeksują wszystkie strony, bez względu czy wchodzą one w skład ramek czy nie. Aby zapobiec takim sytuacjom, można na każdej stronie, która ma zostać wyświetlona wewnątrz ramki, wstawić bezpośrednio po znaczniku otwierającym BODY [zobacz: Ramy dokumentu] następujący kod:

<script>
if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY&nbsp;GŁÓWNEJ</b></a></div><hr><br><br>');
</script>

W efekcie, jeśli strona zostanie wczytana poza ramkami, na ekranie zostanie wyświetlony tekst z odsyłaczem: "UWAGA! To jest tylko ramka - wróć do STRONY GŁÓWNEJ", po kliknięciu którego nastąpi przejście do strony głównej (startowej). W przypadku poprawnego załadowania strony na ekranie nie pojawi się żaden tekst.

Możliwe jest również automatyczne przekierowanie użytkownika od razu do strony głównej, jeśli tylko wczyta dokument poza ramką. Aby to zrobić, w treści nagłówkowej (w ramach HEAD) dokumentu, który powinien się wyświetlać tylko w ramce, należy wkleić następujący kod:

<script>
if (self == parent) location.href = "index.html";
</SCRIPT>

Wstęp

Załóżmy, że Twój serwis składa się z kilkudziesięciu podstron. Na każdej podstronie trzeba będzie wstawić jakieś powtarzające się elementy, jak np. nagłówek, menu nawigacyjne, stopka itd. W każdym pliku podstrony trzeba za każdym razem powtórzyć te elementy. Wyobraź sobie teraz, że chcesz dodać do menu nowy link. Aby to zrobić, musisz otworzyć osobno każdy dokument i ręcznie dodać tam link. Oczywiście jest to ogromnie niewygodne, do tego stopnia, że po jakimś czasie można się wręcz zniechęcić do robienia jakichkolwiek aktualizacji serwisu :-(

Rozwiązaniem tego problemu mogłyby być ramki lokalne (<iframe>...</iframe>). W takim przypadku teoretycznie można stworzyć jedną stronę index.html, na której umieszcza się menu i inne stałe elementy, a w miejsce właściwej treści strony wstawia się ramkę lokalną, gdzie wczytuje się zawartość poszczególnych podstron. Taki sposób niestety posiada poważną wadę: na pasku adresu przeglądarki wyświetla się cały czas taki sam adres. Powoduje to problemy z dodaniem wybranej podstrony do ulubionych oraz choćby przekazaniem wprost jej adresu znajomemu. Ponadto odświeżenie takiej strony zawsze powoduje powrót na stronę główną serwisu.

Istnieje jednak alternatywny sposób, który nie posiada tych wad. Z każdego szkieletu strony można wydzielić powtarzające się fragmenty w postaci nagłówka oraz stopki szablonu. Na przykład, jeśli Twoja strona główna wygląda tak:

<!doctype html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Tytuł strony</title>
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>

Właściwa zawartość strony...

</body>
</html>

Kolorem czerwonym zaznaczono nagłówek szablonu (jak widać nie jest to wprost odpowiednik nagłówka dokumentu - <head>...</head>), a niebieskim - stopkę szablonu. Ponadto na zielono oznaczony został fragment nagłówka, który powinien być różny na każdej podstronie - każdy dokument powinien posiadać swój osobny tytuł. Wstawienie tego samego tytułu na wszystkich podstronach to bardzo zły pomysł, ponieważ jest niewygodne dla użytkownika (tytuł dokumentu wyświetla się na belce tytułowej przeglądarki internetowej) i niekorzystnie wpływa na pozycję serwisu w wyszukiwarkach sieciowych. Oczywiście oprócz tytułu w tej części nagłówka można umieścić inne elementy, które powinny być różne na każdej podstronie. Może, a nawet powinien, to być np. opis zawartości strony - różne wartości tego znacznika w każdym dokumencie również mogą przyczynić się do poprawienia pozycji serwisu w wyszukiwarkach.

Koncepcja jest taka, aby nagłówek i stopkę szablonu zapisać w osobnych plikach. Dzięki temu dodanie nowego linka do menu nawigacyjnego lub jakakolwiek inna zmiana w powtarzających się elementach strony, będzie wymagała modyfikacji tylko jednego lub dwóch plików, a zmiany będą widoczne od razu na wszystkich podstronach. Czy coś takiego w ogóle jest możliwe? W czystym języku HTML raczej nie, ale z pomocą przychodzą języki skryptowe obsługiwane po stronie serwera, np. PHP lub SSI. Bardziej popularnym, a zarazem dającym zdecydowanie większe możliwości, jest PHP. Niestety nie wszystkie serwery obsługują ten język, dlatego przedstawione zostanie również identyczne rozwiązanie oparte o SSI.

Obsługa skryptów PHP oraz SSI wymaga specjalnej konfiguracji serwera WWW. Włączyć ich obsługę może tylko administrator serwera. O tym, czy Twój serwer WWW obsługuje PHP lub SSI możesz się zwykle przekonać odwiedzając stronę domową danego serwera lub kontaktując się z administratorem serwera. Możesz też po prostu przetestować bezpośrednio na serwerze przedstawione tutaj skrypty - jeżeli zadziałają, o nic nie musisz się już martwić.

Ponadto zwracam uwagę, że skrypty PHP ani SSI nie będą działały na Twoim dysku lokalnym. Działanie będzie widoczne dopiero po wprowadzeniu strony na serwer WWW, o ile obsługuje tego rodzaju skrypty.

Szablon PHP

W swoim edytorze HTML utwórz nowy plik i wklej do niego zawartość nagłówka szablonu, a następnie zapisz w katalogu głównym konta WWW pod nazwą head.php. Dla przedstawionego wcześniej przykładu, w pliku tym powinna się znaleźć następująca zawartość:

<!doctype html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>

Zwróć uwagę na wyróżniony fragment. Stanowi on tę część nagłówka, która powinna być różna na każdej podstronie. W naszym przypadku będzie to po prostu: <title>Tytuł strony</title>. Musisz wyciąć z nagłówka wszystkie takie elementy i zastąpić je jednym specjalnym kodem.

Następnie w analogiczny sposób utwórz drugi plik - foot.php - również zapisz go w głównym katalogu konta WWW:

</body>
</html>

Mamy już nagłówek oraz stopkę szablonu zapisane w osobnych plikach. Nagłówek zawiera m.in. całe menu nawigacyjne, więc jeśli w przyszłości będzie trzeba dodać w nim nowy link, wystarczy zmodyfikować tylko ten jeden plik. Aby było to jednak możliwe, wszystkie podstrony serwisu trzeba tworzyć w specjalny sposób. Z każdej z nich wydzielamy właściwą zawartość. Może być to po prostu treść tekstowa, prawdopodobnie ze znacznikami formatującymi, takimi jak pogrubienie lub pochylenie, akapity itp. Ważne jest, aby do plików head.php i foot.php wydzielić jak największy fragment kodu źródłowego - ten, który powtarza się na wszystkich podstronach serwisu.

Aby wykorzystać szablon PHP, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.php, a nie *.html, czyli np. podstrona.php. Plik strony głównej serwisu musi się nazywać index.php, a nie index.html ani index.htm.

Każdy plik podstrony musi mieć następującą postać (np. podstrona.php):

<?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?>
Właściwa zawartość strony...
<?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>

Zwróć uwagę, że nie umieszcza się już tutaj nagłówka ani stopki szablonu, ponieważ zostały one zapisane w osobnych plikach. Wystarczy tylko wstawić odwołanie do tych plików - w powyższym kodzie odpowiednie fragmenty zostały wyróżnione. W szczególności na takich podstronach nie wstawia się deklaracji strony kodowej, ale koniecznie należy zadbać, aby treść była zapisana przy użyciu takiego samego kodowania znaków, jak strona kodowa zapisana w pliku head.php (UTF-8). Edytory HTML pozwalają wybrać kodowanie znaków w pliku bez potrzeby wstawiania deklaracji <meta>. Zwracam uwagę, że w ten sam sposób należy przygotować stronę główną serwisu, czyli plik index.php.

Jeżeli ustawisz nieprawidłowe kodowanie znaków, po wyświetleniu strony w przeglądarce internetowej polskie znaki diakrytyczne mogą się nie pojawić.

Ostatnim krokiem będzie przygotowanie różniącego się kodu nagłówkowego. W naszym przykładzie będzie to znacznik <title>...</title> z tytułem poszczególnych podstron. Nie można go po prostu wstawić w pliku head.php, ponieważ wtedy byłby identyczny na wszystkich podstronach, a zależy nam na tym, aby tak nie było. Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać przyrostek .html. Przykładowo: dokument podstrona.php musi posiadać w tym samym katalogu plik podstrona.php.html, którego zawartość może być następująca:

<title>Tytuł strony</title>

UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.

To już koniec. W tej chwili możesz wprowadzić wszystkie dokumenty na serwer. Nie zapomnij, że pliki head.php i foot.php należy umieścić w głównym katalogu publicznym konta WWW, czyli w tym samym miejscu co strona główna, a sama strona główna musi się nazywać index.php, a nie index.html. Po wprowadzeniu wszystkich plików na konto FTP, możesz już wpisać w dowolnej przeglądarce internetowej adres strony i sprawdzić, czy skrypt szablonu działa prawidłowo. Jeżeli skrypt nie działa, a masz stuprocentową pewność, że wszystko zostało wykonane prawidłowo (radzę to sprawdzić), tzn. na ekranie nie wyświetlają się żadne komunikaty błędów (ang. error) ani ostrzeżeń (ang. warning), spróbuj skorzystać z szablonu SSI, przedstawionego w następnym podpunkcie.

Szablon SSI

Szablon SSI tworzy się analogicznie jak PHP. Różnice pojawiają się tylko w nazwach rozszerzeń plików oraz poleceniach dołączających pliki nagłówka i stopki szablonu. Poniżej przedstawiony zostanie tylko skrócony opis, a po szczegóły odsyłam do opisu szablonu PHP.

W katalogu głównym konta WWW umieść plik head.shtml, w którym wstawiamy powtarzający się kod nagłówkowy szablonu:

<!doctype html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<!--#include virtual="${SCRIPT_NAME}.html" -->
</head>
<body>
<ul>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
<li><a href="...">Link</a></li>
</ul>

Następnie w analogiczny sposób utwórz drugi plik - foot.shtml - również zapisz go w głównym katalogu konta WWW:

</body>
</html>

Aby wykorzystać szablon SSI, wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.shtml, a nie *.html, czyli np. podstrona.shtml. Plik strony głównej serwisu musi się nazywać index.shtml, a nie index.html ani index.htm.

Każdy plik podstrony musi mieć następującą postać (np. podstrona.shtml):

<!--#include virtual="/head.shtml" -->
Właściwa zawartość strony...
<!--#include virtual="/foot.shtml" -->

Pamiętaj o ustawieniu w edytorze HTML odpowiedniej strony kodowej, aby polskie znaki diakrytyczne zostały prawidłowo zapisane!

Każdy dokument podstrony musi posiadać odpowiadający sobie plik z różniącym się kodem nagłówkowym. Plik ten musi znajdować się w tym samym katalogu co podstrona i nazywać się identycznie, tylko do nazwy trzeba na końcu dodać przyrostek .html. Przykładowo: dokument podstrona.shtml musi posiadać w tym samym katalogu plik podstrona.shtml.html, którego zawartość może być następująca:

<title>Tytuł strony</title>

UWAGA!
Jeżeli zapomnisz utworzyć takiego pliku albo pomylisz jego nazwę, w szablonie strony wyświetlą się błędy, a nawet w ogóle może się on nie wyświetlić.

Sprawdź, czy pamiętasz, za co odpowiadają poniższe fragmenty kodu źródłowego HTML. W razie wątpliwości kliknij odnośnik "Zobacz więcej..." pod wybraną grupą przykładów.

Jak wstawić ramkę (okienko, widżet) bezpośrednio w treści strony WWW?

<iframe src="lokalizacja">
	<a href="lokalizacja">Tekst alternatywny</a>
</iframe>

<iframe src="lokalizacja" width="x" height="y">...</iframe>

<iframe src="lokalizacja" width="x%" height="y%">...</iframe>

<iframe src="lokalizacja" name="Tu wpisz nazwę ramki">...</iframe>

Zobacz więcej...

Co zrobić, aby strony z menu wczytywały się do ramki umieszczonej bezpośrednio w treści?

<a target="cel" href="lokalizacja">opis</a>

Zobacz więcej...

Sprawdź swoją wiedzę, nabytą w tym rozdziale i zdobądź imienny certyfikat ukończenia ^* , rozwiązując testowy QUIZ (online).

✅ Rozpocznij quiz HTML

* Aby otrzymać certyfikat, wybierz opcję: Wszystkie pytania z rozdziału.

1. Otwórz w edytorze HTML stronę (plik index.html) stworzoną w ramach ćwiczeń z poprzedniego rozdziału.
2. Znajdź w serwisie YouTube przynajmniej jeden ciekawy film powiązany tematycznie z Twoją stroną.
3. Użyj funkcji "Udostępnij / Umieść", aby skopiować kod HTML widżetu z wybranym filmem.
4. Wstaw film bezpośrednio w treści swojej strony.
5. Otwórz Twoją stronę w przeglądarce i sprawdź, czy można uruchomić odtwarzanie filmu.