W tej lekcji nauczysz się, jak wstawiać różne rodzaje mediów na stronę HTML: obrazy, pliki audio, wideo oraz osadzać odtwarzacze YouTube.
Materiały do nauki: Kliknij tutaj, aby zapoznać się z tematem
Poniżej znajdują się ćwiczenia. Kliknij "Skopiuj kod", aby pobrać gotowy szablon i uzupełnij brakujące fragmenty. **Pliki audio i wideo należy pobrać z internetu we własnym zakresie**.
Wstaw obrazek z atrybutami alt, width oraz height. Dodaj styl obramowania wokół obrazka.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie 1: Obrazek</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
img {
border: 2px solid #333;
border-radius: 8px;
max-width: 90%;
}
</style>
</head>
<body>
<h1>Ćwiczenie 1: Obrazek</h1>
<p>Dodaj obrazek poniżej i zastosuj odpowiednie atrybuty.</p>
<!-- Wstaw obrazek tutaj -->
</body>
</html>
Dodaj odtwarzacz audio z atrybutami controls, autoplay, i loop. Plik audio pobierz z internetu we własnym zakresie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie 2: Audio</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
audio {
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<h1>Ćwiczenie 2: Audio</h1>
<p>Dodaj odtwarzacz audio poniżej i zastosuj odpowiednie atrybuty.</p>
<audio controls autoplay loop>
<source src="twoja_sciezka_do_pliku.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Dodaj odtwarzacz wideo z atrybutami controls, poster, i loop. Plik wideo pobierz z internetu we własnym zakresie.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie 3: Wideo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
video {
display: block;
margin: 20px auto;
max-width: 90%;
border: 2px solid #333;
border-radius: 8px;
}
</style>
</head>
<body>
<h1>Ćwiczenie 3: Wideo</h1>
<p>Dodaj odtwarzacz wideo poniżej i zastosuj odpowiednie atrybuty.</p>
<video controls loop poster="poster_image.jpg">
<source src="twoja_sciezka_do_pliku.mp4" type="video/mp4">
</video>
</body>
</html>
Osadź odtwarzacz wideo z YouTube na swojej stronie. Skorzystaj z odpowiedniego kodu iframe, a następnie zastosuj atrybuty width, height oraz allowfullscreen.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Ćwiczenie 4: YouTube</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
iframe {
display: block;
margin: 20px auto;
border: none;
max-width: 100%;
}
</style>
</head>
<body>
<h1>Ćwiczenie 4: YouTube</h1>
<p>Dodaj odtwarzacz YouTube poniżej i ustaw odpowiednie atrybuty.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/twój_id_filmu" allowfullscreen></iframe>
</body>
</html>