Zadanie: Strona CERN

Twoim zadaniem jest stworzenie strony informacyjnej o CERN zgodnie z poniższymi wymaganiami i pdf makietą.

PDF - makieta
Przykładowe rozwiązanie Kod

Ustawienia HTML i HEAD

  • Ustaw język dokumentu: pl-PL
  • Kodowanie znaków: UTF-8
  • Tytuł strony: CERN - Strona Główna
  • Meta-opis: Strona informacyjna o CERN
  • Słowa kluczowe: CERN, fizyka cząstek, akceleratory, LHC, detektory, nauka, badania
  • Autor: Imie
  • Dołączyć plik CSS: style.css
  • Ustawić favicon: fav.ico
  • Bazowy adres URL: https://home.cern/

Wymagania dotyczące BODY

Strona ma być podzielona na bloki z użyciem semantycznych tagów HTML5.

Nagłówek

  • Tytuł główny: CERN European Organization for Nuclear Research
  • Podtytuł: Prowadzimy badania w fizyce cząstek
  • Paragraf: Założone: 1954 r. | Dyrektor: Mark Thomson

Nawigacja

  • Lista nieuporządkowana z 2 elementami
  • Linki do sekcji: #aktualnosci (Aktualności) i #kierunki (Kierunki)

Sekcja PROGRAM (id="program")

  • Nagłówek: Program badań
  • Akapit opisujący działalność CERN od 1954 roku
  • Akapit z kierunkami badań z użyciem <br>
  • Nagłówki: Fizyka cząstek, Specjalizacje, Badania eksperymentalne, Projekty dodatkowe
  • Tekst z <strong> i <em>: nowoczesne badania w akceleratorach i detektorach
  • Pozioma linia <hr> oddzielająca sekcje
  • Akapit z prawami autorskimi używając encji HTML: &copy; &reg; &lt; &gt; &amp; &trade; &euro;
  • Dwa bloki <div> z kolorowym tłem: Faza pierwsza i Faza druga
  • Obraz: logo_cern.jpg

Artykuł (id="wpis")

  • Header artykułu: nagłówek Pierwsze kroki w fizyce cząstek, autor: Naukowiec CERN
  • Treść: Fizyka cząstek dla początkujących.
  • Footer artykułu: Kategoria: Badania

Aside

  • Treść poboczna o odkryciu bozonu Higgsa w 2012 roku

Sekcje listowe

  • Etapy badań — lista OL z typem rzymskim: Faza pierwsza, Faza druga
  • Kierunki — lista UL: Fizyka cząstek, Akceleratory
  • Struktura programu — zagnieżdżone listy:
    • Faza pierwsza → Podstawy fizyki, Matematyka → Algebra, Geometria

Pojęcia fizyczne

  • Lista definicji <dl>:
  • LHC — Wielki Zderzacz Hadronów
  • Higgs — Bozon Higgsa

Plan eksperymentów

  • Lista OL: Run 3 – LHC, HL-LHC (z podelemnetem), LS3 – Shutdown (z <dl> Temat: Modernizacja)

Tabele

Tabela 1 — Lista eksperymentów

  • Tytuł: Status eksperymentów LHC
  • Wiersze: ATLAS – Aktywny, CMS – Aktywny

Tabela 2 — Plan shutdowns

  • LS3: Modernizacja / Instalacja, Rok 2030: Run 4
  • Użyj rowspan i colspan

Tabela 3 — Projekty badawcze

  • Rok 2026: HL-LHC (5 lat), ATLAS Upgrade (4 lata), CMS Upgrade (4 lata) — wszystkie Planowane
  • Użyj rowspan dla roku 2026

Multimedia HTML5 — 10 elementów

  1. <img> — zdjęcie tunelu LHC
  2. <picture> + <source> — obraz responsywny (3 rozmiary)
  3. <figure> + <figcaption> — detektor ATLAS z opisem
  4. <audio> + <source> — plik MP3 i OGG, atrybut controls
  5. <video> + <source> + <track> — wideo z napisami .vtt
  6. <iframe> — osadzenie filmu z YouTube
  7. <embed> — starsza metoda osadzania wideo
  8. <object> + <param> — starsza metoda z fallback tekstem
  9. <svg> — wektorowy rysunek z tekstem CERN
  10. <canvas> — płótno do rysowania z JS