www-2425

Organizacyjne

• Tego zadania nie trzeba pokazywać osobie prowadzącej.
• Zadanie dotyczy wyłącznie HTML, bez użycia CSS.

Cel

• Celem zadania jest przygotowanie strony internetowej w formacie HTML. Dobrze by było, gdyby strona dotyczyła tematyki związanej z tematyką wybraną na laboratorium pierwszym.
• Ważnym fragmentem zadania jest instalacja npm i https://www.npmjs.com/package/html-validate

Wymagania

1. Struktura strony:
   • Należy dodać do strony nagłówek, artykuł i stopkę (elementy <header>, <article> i <footer>).
   • Użyć tagów <h1> i <h2> do wyróżnienia nagłówków.
2. Tabela:
   • Stworzyć tabelkę <table> z danymi (mogą być wymyślone).
   • Tabela powinna zawierać nagłówek <thead>, wiersze <tr> i kolumny <th> z danymi.
   • Należy nadać tabeli tytuł <caption>.
3. Lista:
   • Stworzyć listę <ol> numerowaną cyframi rzymskimi.
4. Wyróżnienia:
   • Użyć tagów do wyróżnienia tekstu (np. <strong>, <em>).
5. Obrazek:
   • Dodać do strony obrazek (element <img>).
6. Formularz:
   • Stworzyć formularz (element <form>) zawierający między innymi:
     • Pole tekstowe (element <input>).
     • Pole wyboru (element <select>) z optgroup.
     • Przycisk (element <button>).
7. Rozwijany opis:
   • Użyć tagów <details> i <summary> do stworzenia rozwijanego opisu.
8. Pasek postępu:
   • Użyć elementu <progress> do stworzenia paska postępu (np. dla postępu zrobienia zadania).
9. Mapa:
   • Stworzyć sensowną mapę za pomocą elementów <map> i <area>. Mapa powinna zawierać co najmniej 3 obszary (<area>).

Udostępnianie

Stronę należy udostępnić tak, jak w zadaniu z laboratorium pierwszego.

Weryfikacja poprawności strony

Strona powinna być zweryfikowana za pomocą narzędzia html-validate. W tym celu należy zainstalować narzędzie za pomocą npm na jeden z dwóch sposobów:

• globalnie: npm install -g html-validate. Dzięki temu można weryfikować pliki .html wpisując html-validate [plik] lub html-validate [folder] (rekurencyjnie weryfikuje wszystkie pliki .html w folderze).
• lokalnie: Tworząc projekt komendą npm init -y, następnie w tym samym katalogu instalując narzędzie komendą npm install html-validate. Teraz do weryfikacji wystarczy komenda npx html-validate [plik/folder]. Alternatywnie można dodać pole scripts do pliku package.json:

   "scripts": {
      "validate": "html-validate ."
   }
  

  i wtedy weryfikacja całego projektu odbywa się komendą npm run validate.

Materiały pomocnicze

• HTML
• HTML - tabele

Uwagi

1. Skup się na poprawnym użyciu tagów HTML, a nie na estetyce strony.
2. Zadbaj o czytelność i poprawność kodu.
3. W razie problemów skorzystaj z materiałów pomocniczych lub skontaktuj się z prowadzącym.

Dodatkowe informacje

Możesz rozszerzyć zadanie o dodatkowe elementy, np.:

• Dodanie linków do innych stron.
• Umieszczenie filmu na stronie.
• Użycie stylów inline do formatowania tekstu.

GLHF! 🚀