Znaczniki (tagi) i atrybuty
Znaczniki, potocznie zwane — tagi — są kluczowymi elementami języka HTML, które definiują strukturę i treść strony internetowej. Natomiast atrybuty to dodatkowe informacje, które są dodawane do znaczników, aby wpłynąć na zachowanie lub wygląd elementów HTML.
Znaczniki
Znaczniki są używane do określenia elementów HTML, takich jak nagłówki, akapity, listy, obrazy, linki itp. Znacznik otwierający składa się z nazwy elementu umieszczonej wewnątrz nawiasów ostrych < i >, na przykład <p>. Znacznik zamykający jest podobny, ale zawiera ukośnik / przed nazwą elementu, na przykład </p>.
Przykład użycia znaczników:
<h1>Tytuł strony</h1>
<p>To jest przykładowy akapit.</p>
<ul>
<li>Element listy 1</li>
<li>Element listy 2</li>
</ul>Przykład przedstawia użycie elementów HTML takich jak nagłówek <h1>, akapit <p> oraz nieuporządkowaną listę <ul> z dwoma elementami listy <li>.
Atrybuty
Atrybuty to dodatkowe informacje dodawane do znaczników, które wpływają na sposób działania lub wygląd elementów HTML. Atrybuty są umieszczane wewnątrz znacznika otwierającego i mają postać pary klucz-wartość, oddzielone znakiem równości =. Wartość atrybutu powinna być umieszczona w cudzysłowach "wartość".
Przykład użycia atrybutów:
<a href="https://example.com" target="_blank">Odwiedź naszą stronę</a>
<img src="obraz.jpg" alt="Przykładowy obraz" width="300" height="200">
<table border="1">
<!-- zawartość tabeli -->
</table>
W powyższym przykładzie, element <a> ma atrybuty href i target, które określają adres URL docelowy oraz sposób otwierania linku. Element <img> ma atrybuty src, alt, width i height, które określają źródło obrazu, tekst alternatywny oraz szerokość i wysokość obrazu. Element <table> ma atrybut border, który określa szerokość obramowania tabeli.
Znaczniki i atrybuty
Znaczniki i atrybuty są niezbędne do tworzenia struktury i treści strony internetowej oraz do modyfikowania jej wyglądu i zachowania elementów. Stosując odpowiednie znaczniki i atrybuty, możemy tworzyć różnorodne elementy HTML, takie jak nagłówki, akapity, listy, linki, obrazy, formularze, multimedia i wiele innych.
Przykład użycia znaczników i atrybutów na przykładzie prostego formularza kontaktowego:
<!DOCTYPE html>
<html>
<head>
<title>Przykład znaczników i atrybutów</title>
</head>
<body>
<header>
<h1>Przykład znaczników i atrybutów</h1>
</header>
<main>
<section>
<h2>Formularz kontaktowy</h2>
<form action="/submit" method="POST">
<label for="name">Imię i nazwisko:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Adres e-mail:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="message">Wiadomość:</label>
<textarea id="message" name="message" rows="5" cols="30" required></textarea>
<br>
<input type="submit" value="Wyślij">
</form>
</section>
</main>
</body>
</html>W powyższym przykładzie możemy zauważyć użycie różnych znaczników, takich jak <form>, <label>, <input> i <textarea>, oraz atrybutów, takich jak action, method, type, id, name, rows, cols i required. Wszystkie te elementy zostały połączone, aby stworzyć prosty formularz kontaktowy.
Warto zapamiętać
Dobrze dobrana kombinacja znaczników i atrybutów pozwala tworzyć rozbudowane i funkcjonalne strony internetowe. Jednak, aby osiągnąć najlepsze rezultaty w projektowanie stron WWW, warto poznać różne rodzaje znaczników i atrybutów oraz sposoby ich użycia.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
