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). 10 min - Wstawianie widżetów (iframe) Wyjaśnienie tagu <iframe>, jego zastosowanie i sposób osadzania zewnętrznych treści (np. YouTube). 10 min - Ćwiczenie praktyczne: strona z obrazkami, wideo i audio Uczniowie tworzą stronę, na której wstawiają wideo z YouTube i...
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: #2 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
Oprawa graficzna / "Duszki" CSS...serwis, jeśli w rozsądnym czasie nie doczeka się na załadowanie pełnej treści. "Najcięższymi" elementami stron internetowych są wszelkiego rodzaju multimedia - grafika, animacje Flash itp. - nie należy więc przesadzać z ich liczbą, bo dużo nie zawsze znaczy lepiej. Tworząc galerię zdjęć zadbaj, aby miniatury były fizycznie pomniejszonymi grafikami, a nie tymi samymi plikami co duże zdjęcia, a jedynie zmniejszone za pomocą atrybutów HTML lub CSS. Weź pod uwagę, że użytkownik niekoniecznie...
- Menu rozwijane, otwierane, wysuwane / Przykład menu rozwijanego
Kliknij poniższe nagłówki menu myszką: HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno
- Menu rozwijane, otwierane, wysuwane / Menu wysuwane
Normalnie pozycje menu są rozwijane począwszy od pierwszej do ostatniej, a zwijane od ostatniej do pierwszej. Można odwrócić te kolejności, dzięki czemu uzyskamy efekt wysuwania: <script> new Menu('menu0', '', false, true); </script> Przykład HTML Dla zielonych BODY i META Tekst Odsyłacze Tabele Multimedia Ramki Formularze CSS Kaskadowe Arkusze Stylów Definicje Wstawianie stylów Skrypty Aktywne przyciski Aktualizacja Nowe okno