Atrybuty w HTML

Atrybuty w HTML odgrywają kluczową rolę w definiowaniu zachowań i właściwości elementów na stronie internetowej. Umożliwiają one dodawanie dodatkowych informacji do znaczników HTML, takich jak adresy URL w linkach czy wymiary w obrazkach. W tej lekcji przyjrzymy się bliżej atrybutom na przykładzie linków (definiując różnice między linkami absolutnymi i relatywnymi) oraz obrazków (koncentrując się na atrybutach wysokości i szerokości).

Atrybuty linków w HTML

Linki w HTML są definiowane za pomocą znacznika <a>, a ich najważniejszym atrybutem jest href, który określa docelowy adres URL. Linki mogą być absolutne lub relatywne:

  • Link absolutny zawiera pełny adres URL, wskazując na konkretną lokalizację w internecie, włącznie z protokołem (np. https://).
  • Link relatywny odnosi się do lokalizacji w obrębie tej samej domeny lub struktury katalogów i nie zawiera pełnego adresu URL.

Atrybuty obrazków w HTML

Obrazki są umieszczane na stronach za pomocą znacznika <img>, który wykorzystuje atrybuty src do określenia ścieżki do pliku obrazka, oraz alt, który dostarcza tekst alternatywny. Atrybuty width i height pozwalają na określenie szerokości i wysokości obrazka, co jest szczególnie ważne dla zachowania proporcji i optymalizacji ładowania strony.

Przykładowy kod HTML

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atrybuty w HTML: Linki i Obrazki</title>
</head>
<body>
    <h3>Przykład linku absolutnego:</h3>
    <p><a href="https://www.example.com">Odwiedź Example.com</a></p>

    <h3>Przykład linku relatywnego:</h3>
    <p><a href="/about.html">O nas</a></p>

    <h3>Przykład obrazka z atrybutami wysokości i szerokości:</h3>
    <img src="example-image.jpg" alt="Przykładowy obrazek" width="500" height="300">
</body>
</html>

Podsumowanie

Atrybuty w HTML pozwalają na dostosowanie działania elementów na stronie internetowej, takich jak linki i obrazki. Rozróżnienie między linkami absolutnymi a relatywnymi jest kluczowe dla prawidłowego kierowania użytkowników, podczas gdy odpowiednie użycie atrybutów wysokości i szerokości obrazków może znacząco wpłynąć na wydajność i estetykę strony. Zrozumienie i efektywne wykorzystanie tych atrybutów jest fundamentalne dla każdego webdevelopera.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni
Następny
Scroll to Top