Jak wstawić MP4 do HTML? - Kurs HTML i CSS
Jak wstawić MP4 do HTML?
Warto pamiętać, że np. ze względów licencyjnych nie każda przeglądarka będzie potrafiła odtworzyć film MP4. Dlatego dodatkowo dobrze jest użyć dowolnej aplikacji do konwersji wideo i przekształcić plik MP4 również do otwartego formatu OGV. Następnie jeśli tak przygotowane pliki będą się znajdować w tym samym katalogu na dysku co dokument *.html, w którym będziemy chcieli je wstawić, a same pliki będą się nazywać odpowiednio np.: "film.mp4" i "film.ogv", to do ich umieszczenia na stronie można się posłużyć następującym kodem: <video> <source src="film.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="film.ogv" type='video/ogg; codecs="theora, vorbis"'> Pobierz film w formacie: <a href="film.mp4">MP4</a>, <a href="film.ogv">OGV</a> </video>.
HTML5 / Filmy i dźwięk <video, audio, source>...odmienne lub w ogóle nieobsługiwane w niektórych przeglądarkach. Nie istniało standardowe API, dzięki któremu można by w prosty sposób wstawić na stronie odtwarzacz z własną skórką, realizować dynamiczne listy odtwarzania itp. Wymagały do działania zainstalowanych wtyczek (np. Adobe Flash Player), przez co czasem nadmiernie obciążały procesor, a przy tym nie były w ogóle obsługiwane przez wiele urządzeń mobilnych (smartfony, tablety). Dodatkowo wymagały od webmastera znajomości...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
...gdzie znajduje się nasz obrazek, który chcemy umieścić na stronie. Jeżeli obrazek znajduje się w tym samym katalogu co strona, na której chcemy go wstawić, wystarczy wpisać tutaj samą nazwę pliku obrazka, nie zapominając przy tym o podaniu rozszerzenia (".jpg" lub ".gif"). Natomiast w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony (np. jeśli użytkownik wyłączy wyświetlanie grafiki w swojej przeglądarce...
- Widżety HTML / Szablon strony bez ramek
...treści Wstęp Szablon PHP Szablon SSI 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...
- XHTML / Typy MIME dokumentów XHTML
...dokumentu</title> </head> <body> <p>Treść dokumentu...</p> </body> </html> Natomiast, aby w określonym dokumencie lub kilku dokumentach wstawić dodatkowe arkusze stylów CSS - inne niż dla całości serwisu - użyj następującej składni: <?php // Dodatkowe arkusze CSS rozdzielone spacjami: define('CSS', 'css/style3.css css/style4.css'); require_once 'mime/mime.inc.php'; ?> <title>Tytuł dokumentu</title> </head> <body> <p>Treść dokumentu...</p> </body> </html> Można również podać...
- HTML dla zielonych / Ramy dokumentu HTML <!doctype, html, head, meta charset "description", title, body>
...Jak ustawić polskie znaki w HTML? Aby polskie znaki diakrytyczne poprawnie się wyświetlały, w sekcji nagłówkowej dokumentu HTML należy wstawić deklarację strony kodowej: <meta charset="utf-8">. Ponadto konieczne jest użycie odpowiedniego edytora HTML. Jak zrobić podstrony w HTML? Serwisy internetowe zwykle składają się z wielu podstron. Aby stworzyć podstronę, otwórz dowolny edytor HTML i utwórz w nim nowy plik - dokładnie w taki sam sposób, jak przy tworzeniu strony...
- Podcast HTML / #7 Widżety HTML
...takim sytuacjom, możemy poinformować użytkownika, że spis treści znajduje się na innej stronie. Wyświetlenie ostrzeżenia z odsyłaczem Należy wstawić kod JavaScript bezpośrednio po znaczniku otwierającym BODY: <script>if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY GŁÓWNEJ</b></a></div><hr><br><br>');</script> Jeśli strona zostanie wczytana poza ramkami, wyświetli się tekst z odsyłaczem do strony...
- Nagłówek i treść HTML / Język strony <html lang, link hreflang>
...innego języka. Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden znacznik <head>. Dlatego powyższy element <link hreflang> należy wstawić wewnątrz istniejącego znacznika nagłówka dokumentu, a nie dodawać kolejnego. Ze znacznika <link hreflang> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić wersja strony zgodna z językiem aktualnie ustawionym w przeglądarce użytkownika. W przypadku gdy strona zawiera alternatywne wersje językowe, zaleca się, aby...
- Odsyłacze HTML / Do etykiety <a id>
...stronie znaczniki. Idealnym przykładem są tytuły. Zwykle naturalnie wyznaczają on ważne miejsca na stronie, do którym prawdopodobnie możemy chcieć wstawić bezpośrednie odsyłacze. UWAGA! Bardzo ważne: w nazwach etykiet lepiej nie używać: wielkich liter znaków, np.: \ / : * ? " < > | spacji (jeśli musisz, w zamian używaj podkreślnika "_") polskich liter (ą, ć, ę, ł, ń... itd.) Dodatkowo należy bezwzględnie pamiętać, że na tej samej stronie nie mogą się znajdować dwie identyczne...
Indeks, wyszukiwarka / Skrypt indeksu, wyszukiwarki...wiedza Odsyłacze do podstrony Wczytywanie stron do ramki lokalnej Podstawy stylów CSS (m.in. arkusze stylów) Skrypt indeksu, wyszukiwarki Aby wstawić na swoją stronę indeks z dodatkową funkcją wyszukiwarki, postępują według poniższych instrukcji: Utwórz w swoim edytorze HTML nowy dokument. Wklej do niego poniższy kod i zapisz w pliku indeks.js (koniecznie użyj kodowania utf-8): /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego...
Dobre praktyki / Przykazania webmastera...barwy zdecydowanie nie są polecane. Opublikowanie strony po prostu z czarnym tekstem na białym tle to naprawdę nie jest wstyd 🙂 Jeśli już musisz wstawić tło obrazkowe pod tekstem, unikaj grafik zawierających mocno kontrastujące obszary koloru lub ostre krawędzie. Staraj się nie wstawiać tekstu w zbyt szeroką kolumnę, gdyż jest to niewygodne w czytaniu. Przy przenoszeniu wzroku z końca jednej linijki na początek następnej, można wtedy łatwo się pogubić. Pamiętaj, że coraz popularniejsze są...