11 – HTML and CSS Comments (Komentarze HTML i CSS) – film i zadanie

Obejrzyj film:

https://www.w3schools.com/css/css_comments.asp

 

Zadania dotyczące komentarzy w HTML

1. Podstawowy komentarz

W pliku HTML dodaj komentarz z opisem autora i datą, np.:

<!-- Author: Jan Kowalski, Date: 2025 -->

2. Ukrywanie elementu za pomocą komentarza

Wstaw akapit <p>, a następnie go skomentuj, aby przestał się wyświetlać.

3. Podzielenie pliku HTML na sekcje

Dodaj komentarze nad sekcjami:

  • <!-- Header Section -->

  • <!-- Main Content -->

  • <!-- Footer -->

4. Komentarz jako tymczasowa instrukcja

Napisz komentarz:

<!-- TODO: Add navigation menu here -->

5. Wyjaśnienie fragmentu kodu

Dodaj komentarz wyjaśniający, do czego służy znacznik <meta charset="UTF-8">.


🎨 Zadania dotyczące komentarzy w CSS

6. Podstawowy komentarz w CSS

Dodaj komentarz:

/* Main color variables */

7. Zakomentowanie właściwości

W stylach elementu h1 zakomentuj (wyłącz) jedną właściwość, np.:

/* color: red; */

8. Uporządkowanie stylów

Podziel CSS na sekcje za pomocą komentarzy:

/* === Typography === */
/* === Layout === */
/* === Colors === */

9. Komentarz obok właściwości

Dodaj komentarz na końcu linii:

margin: 20px; /* spacing around element */

10. Komentarz jako notatka projektowa

Dodaj w CSS komentarz:

/* TODO: Add responsive styles */

💡 Zadania praktyczne łączone (HTML + CSS)

11. Oznaczanie ważnych elementów

W pliku HTML (w <head>) zakomentuj linię, która ładuje styl zewnętrzny.

12. Testowanie zmian

W CSS zakomentuj wszystkie style dla .container, aby zobaczyć różnicę wizualną.

13. Układ z komentarzami

Zbuduj prostą stronę z 3 sekcjami i oznacz każdą komentarzem w HTML i CSS.

14. Notatka w projekcie

Dodaj w kodzie komentarz informujący, jakiego koloru jeszcze brakuje w designie.