multimedia - Kurs HTML i CSS
Podcast HTML / #6 Multimedia HTML...do przeglądarki, aby umożliwić odtwarzanie danego pliku. Znacznik <embed src="ścieżka" width="x" height="y"> współpracuje z różnymi plikami multimedialnymi: Pliki dźwiękowe: *.wav, *.mid, *.mp3 (MPEG Layer-3). Pliki wideo/animacje: *.avi, *.ra, *.mpeg, *.mov, *.asf. Dokumenty PDF: element <embed> może służyć do bezpośredniego wyświetlenia pliku PDF w oknie przeglądarki, pod warunkiem, że użytkownik ma zainstalowany program Adobe Reader. Ostrzeżenia dotyczące <embed>: polecenie...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...multimediów w stronach internetowych i ich znaczenia. 10 min - Wstawianie wideo i audio Omówienie tagów <video> i <audio>, wstawianie plików multimedialnych na stronę oraz ich atrybuty - np. controls, autoplay, loop (możesz się posłużyć podcastem). 10 min - Wstawianie widżetów (iframe) Wyjaśnienie tagu <iframe>, jego zastosowanie i sposób osadzania zewnętrznych treści - np. YouTube (możesz się posłużyć podcastem). 10 min - Ćwiczenie praktyczne: strona z obrazkami, wideo i audio...
- Podcast HTML / #9 HTML5
...Language), służący do tworzenia stron internetowych. Głównymi celami HTML5 było wprowadzenie nowych elementów w celu zwiększenia interaktywności, multimedialności i semantyczności dokumentów. Ważne cechy ewolucji języka obejmują: Zachowanie kompatybilności wstecz, tak aby użytkownicy starszych przeglądarek mogli korzystać ze stron napisanych w nowym języku. Bardziej szczegółowe określenie sposobu obsługi błędów. Wprowadzenie nowych znaczników semantycznych, aby uczynić sieć bardziej...
Menu rozwijane, otwierane, wysuwane / Wygląd menu rozwijanego, otwieranego, wysuwanegoJeżeli nie odpowiada nam podstawowy wygląd menu, można go zmienić wykorzystując polecenia CSS. W tym celu w pliku menu.css należy wkleić np.: #menu0 { width: 200px; margin: 10px; padding: 0; } #menu0 dt { background-color: #888; color: #fff; font-weight: bold; text-align: center; cursor: pointer; margin: 10px 0 0 0; padding: 2px; } #menu0 dd { background-color: #eee; color: #000; border-width: 0 1px 1px 1px; border-style: solid; border-color: #888...
- HTML dla zielonych / Wstawienie obrazka HTML <img src alt>
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"> Zamiast tekstu: "Tu podaj względną ścieżkę dostępu do obrazka", należy podać miejsce na dysku, 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...
- HTML dla zielonych / Ustawienie obrazka HTML <img src alt "float">
<img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="float: ustawienie"> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Natomiast jako: "ustawienie" należy wpisać: left Obrazek będzie ustawiony po lewej stronie względem...
- HTML dla zielonych / Wyśrodkowanie obrazka HTML <div "center", img src alt>
<div style="text-align: center"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny"></div> gdzie zamiast: "Tu podaj względną ścieżkę dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się żądany obrazek, a w miejsce "Tu podaj tekst alternatywny" wpisuje się krótką informację, która pojawi się w przypadku, kiedy obrazek nie zostanie wyświetlony. Polecenie pozwala wyśrodkować obrazek, czyli ustawić go na środku ekranu. Dla...
Multimedia HTML / Podcast HTMLZanim przejdziesz do właściwej treści tego rozdziału, posłuchaj krótkiego wprowadzenia w formie podcastu: #6 Multimedia HTML (online). Pomoże Ci to lepiej zrozumieć, czego się nauczysz w tej części kursu: Wstawiaj grafikę (img), dźwięk (MP3, WAV) i wideo (embed) na swoje strony WWW. Odkryj najlepsze formaty (GIF, JPG, PNG) oraz uniwersalne metody osadzania i pobierania plików (a, object). Zadbaj o dostępność i wydajność multimediów na stronie. 🔊 Posłuchaj podcastu HTML
- HTML5 / Podcast HTML
...Odkryj HTML5: uproszczona składnia, nowe elementy semantyczne (section, article), ulepszone formularze (nowe typy input, walidacja) i natywne multimedia (video, audio). Zoptymalizuj wydajność (preload, async) i bezpieczeństwo (sandbox, popover). 🔊 Posłuchaj podcastu HTML
- Podcast HTML / #7 Widżety HTML
...W jednym dokumencie HTML można osadzić wiele takich okienek. Należy jednak pamiętać, że każde okienko wczytuje pełną stronę wraz ze wszystkimi multimediami, co może prowadzić do bardzo długiego czasu ładowania dokumentu, jeśli ramek jest zbyt wiele. Zastosowanie ramek i widżetów Ramki są szczególnie użyteczne dla twórców różnego rodzaju widżetów (ang. widgets), czyli specjalnych gotowych kodów. Przykładami takich widżetów mogą być filmiki z YouTube’a lub posty z Facebooka czy Twittera...