Zadanie domowe 1
Pierwsza próbna strona w HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strona o pieskach</title>
</head>
<body>
<!-- Header - tytuł, logo linkujące do strony głównej, nawigacja, ukryte audio -->
<header role="banner">
<h1>Świat piesków</h1>
<a href="index.html">
<img src="/js2/pics/logo1.JPG"
alt="Świat piesków - logo"
loading="eager"
fetchpriority="high">
</a>
<h3>Nasi najlepsi przyjaciele i my</h3>
<!-- Nav dla głównej nawigacji strony -->
<nav role="navigation" aria-label="Główna nawigacja strony">
<ul id="main-menu">
<li>
<button aria-expanded="false" aria-haspopup="true"
aria-controls="main-menu">
<a href="#main-menu" aria-current="page" title="Wróć do menu">Meny główne</a>
</button>
</li>
<li>
<button aria-expanded="false" aria-haspopup="true"
aria-controls="top-photos">
<a href="#top-photos" title="Zobacz hity ostatniego tygodnia!">Najpopularniejsze zdjęcia tygodnia</a>
</button>
</li>
<li>
<button aria-expanded="false" aria-haspopup="true"
aria-controls="about-us">
<a href="#about-us" title="Poczytaj o twórcach strony">O nas</a>
</button>
</li>
<li>
<button aria-expanded="false" aria-haspopup="true"
aria-controls="contact-us">
<a href="#contact-us" title="Wyślij nam zdjęcie swojego pupila!">Kontakt</a>
</button>
</li>
<li>
<button aria-expanded="false" aria-haspopup="true"
aria-controls="partners">
<a href="https://google.com" target="_blank" rel="noopener noreferrer" title="Odwiedź stronę naszych partnerów">Nasi partnerzy</a>
</button>
</li>
</ul>
</nav>
<!-- Ukryte audio z muzyką w tle -->
<figure hidden>
<audio controls autoplay loop>
<source src="/js2/audio/background_music.mp3" type=" audio/mpeg " />
<!-- Fallback dla starszych przeglądarek -->
Twoja przeglądarka nie obsługuje elementu audio.
<a href="/js2/audio/background_music.mp3">Pobierz plik audio</a>
</audio>
</figure>
</header>
<!-- Main zawiera główną treść strony (tylko jeden na stronę) -->
<main role="main">
<section aria-labelledby="top-photos">
<h2 id="top-photos">Najpopularniejsze zdjęcia tygodnia</h2>
<dl>
<dt><h3>Fafik z Opola</h3></dt>
<dd><a href="https://fastly.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" target="_blank" rel="noopener noreferrer">
<img src="/js2/pics/fafik-200x300.jpg" width="200" height="300">
</a>
<p>
Opublikowano: <time datetime="2025-09-20">20 września 2025</time>
przez <span class="author">Jan Kowalski</span>
</p>
</dd>
</dl>
<dl>
<dt><h3>Geralt z Rumi</h3></dt>
<dd><a href="https://static0.polygonimages.com/wordpress/wp-content/uploads/chorus/uploads/chorus_asset/file/24760452/1503387119.jpg?q=50&fit=crop&w=1140&dpr=1.5" target="_blank" rel="noopener noreferrer">
<img src="/js2/pics/witcher.JPG" width="200" height="300">
</a>
<p>
Opublikowano: <time datetime="2025-09-21">21 września 2025</time>
przez <span class="author">Jaskier</span>
</p>
</dd>
</dl>
<dl>
<dt><h3>Misiek z Zielonej Góry</h3></dt>
<dd><a href="https://media.istockphoto.com/id/1482199015/photo/happy-puppy-welsh-corgi-14-weeks-old-dog-winking-panting-and-sitting-isolated-on-white.jpg?s=612x612&w=0&k=20&c=ACqzLeU69k4_SEPvQvdYgwjhcta5v2WxeqUIg1uMoDc=" target="_blank" rel="noopener noreferrer">
<img src="/js2/pics/misiek.jpg" width="200" height="300">
</a>
<p>
Opublikowano: <time datetime="2025-09-23">23 września 2025</time>
przez <span class="author">Grzegorz Brzęczyszczykiewicz</span>
</p>
</dd>
</dl>
<p>
<button aria-expanded="false" aria-haspopup="true" aria-controls="return-top">
<a href="#main-menu" title="Wróć do menu">Menu</a>
</button>
</p>
</section>
</main>
<!-- Aside dla treści pobocznej -->
<aside role="complementary" aria-labelledby="about-us">
<h2 id="about-us">O nas</h2>
<section>
<h3>Kim jesteśmy?</h3>
<figure>
<video controls width="720" height="405">
<source src="/js2/video/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
Wideo niedostępne w Twojej przeglądarce.
</video>
</figure>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<details>
<summary>Rozwiń aby zobaczyć nasze media społecznościowe</summary>
<figure>
<section>
<h3>Media społecznościowe</h3>
<nav aria-label="Media społecznościowe">
<ul>
<li><a href="https://twitter.com" rel="external" target="_blank">Twitter</a></li>
<li><a href="https://facebook.com" rel="external" target="_blank">Facebook</a></li>
<li><a href="https://linkedin.com" rel="external" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</section>
</figure>
</details>
<p>
<button aria-expanded="false" aria-haspopup="true" aria-controls="return-top">
<a href="#main-menu" title="Wróć do menu">Menu</a>
</button>
</p>
</aside>
<!-- Footer-->
<footer role="contentinfo">
<section>
<h2 id="contact-us">Kontakt</h2>
<address>
<p>Beata Donasz</p>
<p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
<p>Telefon: <a href="tel:+48123456789">+48 123 456 789</a></p>
</address>
<p>
<button aria-expanded="false" aria-haspopup="true" aria-controls="return-top">
<a href="#main-menu" title="Wróć do menu">Menu</a>
</button>
</p>
</section>
<p><small>© 2025 Świat Piesków. Wszystkie prawa zastrzeżone.</small></p>
</footer>
</body>
</html>