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<img src="piramida.jpg" alt="Piramida Cheopsa" width="300" height="200">

W powyższym fragmencie kodu nadaliśmy obrazkowi konkretne wymiary za pomocą atrybutów width i height. Te atrybuty działają tylko w niektórych elementach, np. <img>, <video> i <iframe>. Na <div> przeglądarka je zignoruje, a jego rozmiar ustawisz w CSS.

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="piramida.jpg" alt="Piramida Cheopsa o zachodzie słońca">

• 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="Wielki Sfinks" 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.

1<!-- Linki -->
2<a href="https://www.google.pl/" target="_blank" title="Otwórz Google w nowym oknie">Google</a>
3<a href="mailto:example@example.com" title="Wyślij e-mail">E-mail do nas</a>
4
5<!-- Obrazki -->
6<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg" alt="Piramida Cheopsa w Gizie" width="300" height="184">
7
8<!-- Lista z atrybutem style -->
9<ul style="list-style-type:circle;">
10<li><a href="#punkt1" title="Przejdź do punktu 1">Punkt 1</a></li>
11<li><a href="#punkt2" title="Przejdź do punktu 2">Punkt 2</a></li>
12</ul>
13