Właściwości Elementów HTML

Atrybuty

Atrybuty w HTML pełnią ważną rolę, dostarczając dodatkowe informacje lub modyfikując zachowanie poszczególnych elementów na stronie. Są one nieodłącznym elementem każdego tagu i umożliwiają nam dostosowanie elementów do specyficznych potrzeb naszej strony.

Aby zilustrować to na praktycznym przykładzie, wyobraźmy sobie, że obserwujemy piramidy w Egipcie. Możemy zauważyć, że jedna piramida jest wyższa od drugiej, a podstawa jednej jest szersza niż drugiej. Te różnice można porównać do atrybutów

width

(szerokość) i

height

(wysokość) w HTML.

Spójrzmy na przykład:

1<div width="200" height="300">
2  <p>Element</p>
3</div>

W powyższym fragmencie kodu, zdefiniowaliśmy element

<div>

i nadaliśmy mu konkretne wymiary za pomocą atrybutów

width

i

height

.

Częstym elementem, który widzimy na stronach internetowych, są linki. Linki tworzymy za pomocą znacznika

<a>

i atrybutu

href

, który definiuje cel linku.

Oto przykład:

1<a href="https://www.google.pl/">Link</a>

Atrybut

href

określa, do jakiego adresu URL prowadzi link. Może to być dowolny adres strony internetowej lub odnośnik do innej części tej samej strony.

Elementy HTML mogą posiadać wiele atrybutów. Na przykład, przyjrzyjmy się znacznikowi

<a>

z dodatkowym atrybutem

target

. Atrybut

target

określa, gdzie ma zostać otwarty link - w tym samym oknie, czy w nowym.

1<a href="https://www.google.pl/" target="_blank">Link</a>

W tym przykładzie, po kliknięciu w link, strona otworzy się w nowym oknie przeglądarki.

Atrybut title można dodać do linku, aby dostarczyć dodatkowe informacje, które pojawią się jako dymek podczas najechania na link myszą.

1<a href="https://www.example.com" title="Przejdź do Example.com">Odwiedź stronę Example.com</a>

Można także utworzyć link, który otworzy program pocztowy użytkownika i wstępnie wypełni adres e-mail. W tym celu używa się protokołu

mailto

w atrybucie

href

.

1<a href="mailto:example@example.com">Wyślij mi e-mail</a>

Podsumowując, atrybuty są kluczowym elementem struktury HTML. Dzięki nim możemy definiować różne właściwości elementów, takie jak ich wymiary, odnośniki, sposób otwierania stron, i wiele innych. Dzięki nim, możemy dostosować naszą stronę internetową do specyficznych potrzeb, sprawiając, że staje się ona bardziej funkcjonalna i użyteczna dla użytkowników.

Wstawianie Obrazków

Wstawianie obrazków na stronie internetowej odbywa się za pomocą znacznika

<img>

. Podstawowa składnia wygląda tak:

1<img src="galaktyka.jpg" alt="Widok na galaktykę" />

• Atrybut

  src

  (źródło) określa ścieżkę do pliku obrazka, który ma zostać wyświetlony.
• Atrybut

  alt

  (alternatywny tekst) dostarcza opis obrazka, który może być wyświetlony, jeśli obrazek nie zostanie załadowany, oraz jest czytany przez czytniki ekranowe dla osób niedowidzących.

Rozmiar i Wygląd

Możesz kontrolować rozmiar obrazka za pomocą atrybutów

width

(szerokość) i

height

(wysokość):

1<img src="image.jpg" alt="Planeta" width="300" height="200">

Obrazki z Linkami

Możesz połączyć obrazek z linkiem, umieszczając znacznik

<img>

wewnątrz

<a>

. To tak, jakby hieroglif na ścianie piramidy był jednocześnie portalem do innej komnaty:

1<a href="https://www.example.com">
2  <img src="piramida.jpg" alt="Piramida Cheopsa" width="300">
3</a>

Po kliknięciu na obrazek, użytkownik zostanie przekierowany pod wskazany adres URL.

Element

<figure>

i

<figcaption>

HTML5 wprowadza semantyczne znaczniki do grupowania obrazków z ich podpisami. Element

<figure>

opakowuje obraz, a

<figcaption>

dodaje do niego podpis - tak jak starożytni Egipcjanie dodawali hieroglificzne opisy obok malowideł ściennych:

1<figure>
2  <img src="sfinks.jpg" alt="Wielki Sfinks w Gizie">
3  <figcaption>Wielki Sfinks, stróż piramid w Gizie</figcaption>
4</figure>

Atrybuty globalne: id i class

Dwa szczególnie ważne atrybuty, które można dodać do prawie każdego elementu HTML to

id

i

class

. Będą one niezbędne, gdy zaczniemy pracować z CSS i JavaScript:

• id

  - unikalny identyfikator elementu na stronie (jak imię faraona - niepowtarzalne)

• class

  - klasa, którą może współdzielić wiele elementów (jak tytuł "kapłan" - wielu może go nosić)

1<h2 id="faraonowie">Znani faraonowie</h2>
2<p class="opis">Cheops był budowniczym Wielkiej Piramidy.</p>
3<p class="opis">Tutanchamon zasłynął ze złotej maski.</p>

Pamiętaj:

id

musi być unikalny na całej stronie, podczas gdy

class

może powtarzać się wielokrotnie.