1. Jakimi znacznikami wstawiamy grafikę na stronie i jakie formaty graficzne przyjmuje HTML?
<img src="źródło obrazka" alt="tekst alternatywny" />
Obsługa formatów: gif, png, jpg; embedując - svn i swf.
2. Jakim znacznikiem wstawiamy pliki audio i w jakich formatach możemy wstawić plik audio?
<audio controls autobuffer preload autoplay loop> <source src="plik.mp3" /> <source src="plik.ogg" /> <source src="plik.wav" /> </audio>
Argumenty przy tagu <audio> oznaczają:
- controls – wyświetlanie kontrolek do odtwarzania plików audio
- autobuffer – buforowanie pliku audio
- preload – ładowanie pliku audio po załadowaniu się strony
- autoplay – odtwarzanie pliku audio po załadowaniu się strony
- loop – zapętlanie utworu audio
Obsługa formatów dźwięku przez przeglądarki:
| Przeglądarka | Ogg | MP3 | WAV |
|---|---|---|---|
| Firefox 3.6+ | + | - | + |
| Safari 5+ | - | + | + |
| Chrome 6+ | + | + | - |
| Opera 10.5+ | + | - | + |
| Internet Explorer 9+ | - | + | + |
3. Jakim znacznikiem i w jaki sposób wstawiamy plik wideo i jakiego typu?
<video width="640" height="480" controls autoplay loop preload> <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'"></source> <source src="video.ogv" type="video/ogg; codecs='theora, vorbis'"></source> </video>
Oznaczenie argumentów tagu <video>:
- controls - wyświetla kontrolki video na ekranie
- autoplay - uruchamia video po załadowaniu strony
- loop - odtwarza video w pętli
- preload - wczytywanie pliku po załadowaniu się strony
Obsługa formatów:
| Przeglądarka | Theora/Vorbis/Ogg | H.264/AAC/MP4 | WebM |
|---|---|---|---|
| Firefox 3.5+ | + | - | - |
| Safari 3+ | - | + | - |
| Chrome 5+ | + | + | + |
| Opera 10.5+ | + | - | + |
| Internet Explorer 9+ | - | + | - |
Dzięki, człowieku!
4. Utwórz stronę zawierającą:
- mały i duży obrazek
- plik wideo
- plik audio
<!DOCTYPE html> <html> <head> <title>Ćwiczenie piąte</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <img src="http://modmyi.com/images/Messany/NovellLogo.jpg" width="50px" height="50px" /><br /> <img src="http://modmyi.com/images/Messany/NovellLogo.jpg" /> <hr /> <video controls> <source src="http://www.w3schools.com/tags/movie.mp4" /> </video> <hr /> <audio controls> <source src="http://www.kontestacja.net/audio/35/Odcinek%20128%20-%20Plain%20Porter.mp3" /> </audio> </body> </html>