Twoje Centrum Szkoleniowe

Atrybuty i komentarze w kodzie HTML

Do tej pory nauczyliśmy się, jak korzystać z podstawowych elementów HTML, takich jak nagłówki, akapity, linki i obrazy. Dziś zagłębimy się w bardziej szczegółowe aspekty języka HTML, które pozwolą Ci tworzyć jeszcze bardziej funkcjonalne i elastyczne strony.

Naszym celem jest zrozumienie, czym są atrybuty i komentarze w kodzie HTML, jak je poprawnie stosować i jakie korzyści niesie ich użycie. Te dwa elementy, choć często niewidoczne dla użytkownika końcowego, są kluczowe dla tworzenia przejrzystego i efektywnego kodu.

Czym są atrybuty w HTML?

Definicja atrybutu

Atrybuty w HTML to dodatkowe informacje umieszczane w znacznikach, które precyzują ich działanie lub dodają im nowych funkcji. Pozwalają one na:

• Określenie właściwości elementu, takich jak identyfikator, klasa czy styl.
• Dostarczanie dodatkowych danych, np. tekstu alternatywnego dla obrazów.
• Konfigurowanie zachowania elementów, np. otwieranie linku w nowej karcie.

Struktura atrybutu

Atrybuty są umieszczane wewnątrz znacznika otwierającego i składają się z:

1. Nazwy atrybutu
2. Znaku równości (=)
3. Wartości atrybutu ujętej w cudzysłów (podwójny " lub pojedynczy ')

Przykład:

<a href="https://www.przyklad.pl">Kliknij tutaj</a>

• href to nazwa atrybutu.
• "https://www.przyklad.pl" to wartość atrybutu.

Najczęściej używane atrybuty

1. href w znaczniku <a>

Służy do określenia adresu URL, do którego prowadzi link.

<a href="https://www.przyklad.pl">Strona przykładowa</a>

2. src w znaczniku <img>

Określa źródło (ścieżkę) pliku graficznego.

<img src="obrazy/zdjecie.jpg" alt="Opis zdjęcia">

3. alt w znaczniku <img>

Dostarcza tekst alternatywny dla obrazka, wyświetlany gdy obraz nie może być załadowany.

<img src="obrazy/zdjecie.jpg" alt="Opis zdjęcia">

4. id i class

Służą do identyfikacji elementów na stronie, co jest szczególnie przydatne przy stylowaniu za pomocą CSS lub manipulacji za pomocą JavaScript.

• id powinno być unikatowe w obrębie strony.

<div id="naglowek">...</div>

• class może być używane wielokrotnie dla grupowania elementów.

<p class="wazne">To jest ważny akapit.</p>

5. title

Wyświetla dodatkową informację (np. w formie dymka) po najechaniu kursorem na element.

<a href="https://www.przyklad.pl" title="Przejdź do strony przykładowej">Strona przykładowa</a>

6. target w znaczniku <a>

Określa, gdzie ma zostać otwarty link.

• target="_blank" – otwiera link w nowej karcie.

<a href="https://www.przyklad.pl" target="_blank">Otwórz w nowej karcie</a>

Przykłady zastosowania atrybutów

Obraz z określoną szerokością i wysokością

<img src="obrazy/zdjecie.jpg" alt="Opis zdjęcia" width="300" height="200">

Link e-mail z tematem wiadomości

<a href="mailto:kontakt@przyklad.pl?subject=Zapytanie">Napisz do nas</a>

Formularz z polem tekstowym

<input type="text" name="imie" placeholder="Wpisz swoje imię">

Wskazówki dotyczące używania atrybutów

• Poprawność składni: Upewnij się, że używasz cudzysłowów wokół wartości atrybutów.
• Unikalność id: Każdy atrybut id powinien być unikalny w obrębie jednej strony.
• Znaczenie atrybutów: Używaj atrybutów zgodnie z ich przeznaczeniem, aby zapewnić poprawne działanie strony i ułatwić jej późniejszą edycję.

Komentarze w kodzie HTML

Co to są komentarze?

Komentarze to fragmenty kodu, które są ignorowane przez przeglądarkę i nie są wyświetlane na stronie. Służą one do:

• Dodawania notatek i uwag dla siebie lub innych programistów.
• Tymczasowego wyłączania fragmentów kodu bez ich usuwania.
• Organizacji kodu poprzez dodawanie nagłówków i oddzielaczy.

Jak tworzyć komentarze?

Komentarz w HTML rozpoczyna się od <!-- i kończy -->.

Przykład:

<!-- To jest komentarz i nie będzie widoczny na stronie -->

Przykłady zastosowania komentarzy

Dodawanie notatek

<!-- Sekcja nagłówka strony -->
<header>
  <h1>Witaj na mojej stronie</h1>
</header>

Tymczasowe wyłączanie kodu

Jeśli chcesz na chwilę usunąć element ze strony bez kasowania kodu:

<!--
<nav>
  <ul>
    <li><a href="index.html">Strona główna</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>
-->

Organizacja kodu

<!-- Początek sekcji głównej -->
<main>
  <h2>O nas</h2>
  <p>Jesteśmy firmą z wieloletnim doświadczeniem...</p>
</main>
<!-- Koniec sekcji głównej -->

Wskazówki dotyczące używania komentarzy

• Nie nadużywaj komentarzy: Staraj się pisać kod w sposób czytelny, aby nie było potrzeby nadmiernego komentowania.
• Aktualizuj komentarze: Jeśli zmieniasz kod, upewnij się, że komentarze są nadal aktualne.
• Nie umieszczaj wrażliwych informacji w komentarzach, ponieważ mogą one być widoczne dla innych osób przeglądających kod strony.

Praktyczne ćwiczenia

Ćwiczenie 1: Dodaj atrybuty do elementów

Weź fragment swojej strony i spróbuj dodać do niego różne atrybuty.

1. Dodaj identyfikatory do nagłówków:

   <h2 id="o-nas">O nas</h2>

2. Dodaj klasy do akapitów:

   <p class="wazne">To jest ważna informacja.</p>

    

3. Ustaw obrazowi alternatywny tekst i rozmiar:

   <img src="obrazy/logo.png" alt="Logo firmy" width="150">

    

Ćwiczenie 2: Użyj komentarzy w kodzie

1. Dodaj komentarze opisujące sekcje strony:

   <!-- Sekcja stopki -->
   <footer>
     <p>Prawa autorskie &copy; 2023 Firma XYZ</p>
   </footer>

    

2. Tymczasowo wyłącz fragment kodu:

   Jeśli chcesz usunąć formularz z testowej wersji strony:

   <!--
   <form action="wyslij.php" method="post">
     <label for="email">E-mail:</label>
     <input type="email" id="email" name="email">
     <input type="submit" value="Wyślij">
   </form>
   -->

Dobre praktyki

Używanie atrybutów

• Minimalizm: Dodawaj tylko te atrybuty, które są niezbędne.
• Spójność: Używaj spójnych nazw klas i identyfikatorów, co ułatwi stylowanie i zarządzanie kodem.
• Dostępność: Pamiętaj o atrybutach wpływających na dostępność, takich jak alt dla obrazów czy aria-label dla elementów interaktywnych.

Używanie komentarzy

• Czytelność: Komentarze powinny być zwięzłe i jasno opisywać, co dzieje się w kodzie.
• Organizacja: Używaj komentarzy do oddzielania logicznych części kodu.
• Bezpieczeństwo: Unikaj umieszczania w komentarzach informacji, które nie powinny być publicznie dostępne.

Częste błędy i jak ich unikać

• Brak cudzysłowów wokół wartości atrybutów: Zawsze używaj cudzysłowów, aby uniknąć błędów parsowania.

Niepoprawnie:

<img src=obrazy/logo.png alt=Logo>

Poprawnie:

<img src="obrazy/logo.png" alt="Logo">

• Powtarzanie identyfikatorów id: Upewnij się, że każdy id jest unikalny.
• Komentarze w komentarzach: Unikaj umieszczania znaczników <!-- lub --> wewnątrz komentarzy, co może spowodować błędy.

Podsumowanie

Dziś nauczyliśmy się:

• Czym są atrybuty w HTML i jak je poprawnie stosować.
• Jakie są najczęściej używane atrybuty i do czego służą.
• Jak tworzyć i używać komentarzy w kodzie HTML.
• Dlaczego atrybuty i komentarze są ważne dla tworzenia przejrzystego i funkcjonalnego kodu.

Te umiejętności są niezbędne w dalszej nauce tworzenia stron internetowych. Pozwalają na bardziej precyzyjną kontrolę nad elementami strony i ułatwiają zarządzanie kodem, zwłaszcza w większych projektach.

Zadania do samodzielnego wykonania

1. Rozszerz swoją stronę:

   • Dodaj atrybuty id do głównych sekcji strony (<header>, <main>, <footer>).
   • Użyj atrybutu class do grupowania podobnych elementów, np. wszystkie przyciski z klasą btn.

2. Stwórz nawigację z linkami:

   • Użyj atrybutu href w linkach.
   • Dodaj atrybut title z opisem linku.

3. Dodaj komentarze opisujące strukturę strony:

   • Wstaw komentarze przed każdą główną sekcją, opisujące jej przeznaczenie.
   • Tymczasowo wyłącz wybrany fragment kodu i sprawdź, jak wpływa to na stronę.

Ciekawostka

Czy wiesz, że w 2019 roku opublikowano raport, który wykazał, że około 30% stron internetowych ma błędy wynikające z niepoprawnego użycia atrybutów? Poprawne stosowanie atrybutów nie tylko zapewnia prawidłowe działanie strony, ale również wpływa na jej pozycję w wynikach wyszukiwania i dostępność dla wszystkich użytkowników.