HTML: Znaczniki, atrybuty, komentarze
Znaczniki HTML
Większość znaczników HTML składa się z dwóch części: znacznika otwierającego oraz zamykającego. Pomiędzy nimi znajduje się zawartość danego znacznika.
Danym elementem HTML jest wszystko począwszy od początku do końca danego znacznika.
Istnieją również elementy nie posiadające treści, które nie posiadają znacznika zamykającego, np. przejście do nowej linii <br>.
Znacznik otwierający | Treść | Znacznik zamykający |
---|---|---|
<p> | Mój paragraf | </p> |
<h1> | Mój nagłówek pierwszego stopnia | </h1> |
<br> |
W powyższym przykładzie element html zawiera body, w którym umieszczony jest div zawierający kilka paragrafów. W jednym z paragrafów umieszczona została lista nienumerowana.
Zagnieżdżanie znaczników
Znaczniki HTML mogą być zagnieżdżone. Oznacza to, że możemy jednych znaczników użyć w obrębie innych.
Cały dokument HTML zagnieżdżony jest w znacznikach.
<html></html>
Dla czytelności kodu kolejny poziom zagnieżdżenia elementów będziemy oznaczać zwiększającą się ilością tabulatorów poprzedzających kod danej linijki.
<html> <body> <div> <p>Paragraf 1</p> <p>Paragraf 2</p> <p> Paragraf 3 <ul> <li>Punktor 1</li> <li>Punktor 2</li> <li>Punktor 3</li> </ul> </p> </div> </body> </html>
Atrybuty
- Wszystkie elementy HTML mogą posiadać atrybuty
- Atrybuty są to dodatkowe informacje o znaczniku
- Atrybuty zawsze umieszczane są w znaczniku otwierającym
- Atrybut składa się z pary nazwa = “wartość”
Przykłady:
<a href="https://tinf.pl">Kursy online</a>
Atrybutem href odnośnika jest adres strony docelowej.
<img src="obrazek.jpg">
Adres obrazka zapiszemy w atrybucie src znacznika img.
<img src="obrazek.jpg" alt="Super obrazek" width="100" height="200">
Znacznik może posiadać więcej niż jeden atrybut. Nasz przykładowy obrazek uzyskał teraz, dzięki atrybutowi alt, tekst alternatywny na wypadek niewyświetlenia grafiki oraz informację o jego szerokości i wysokości.
Komentarze
Komentarz jest dodatkową informacją, bądź fragmentem kodu, który nie ma być wyświetlony w treści strony.
Komentarze nie wyświetlają się w treści strony, jednak są widoczne w kodzie źródłowym strony.
<!-- to jest komentarz --> <p>Treść wyświetlana w przeglądarce</p> <!-- a tu znowu komentarz -->
Znaczniki komentarza języka HTML umożliwiają zakomentowanie wielu linii naraz:
<!-- Treść komentarza -->
Pamiętaj, aby nie zawierać jednego komentarza w drugim. Spowoduje to zakończenie komentowanego kodu wraz z końcem zagnieżdżonego komentarza.
<!-- tego nie widać na stronie <!-- tego nadal nie widać na stronie --> A to już będzie widoczne na stronie --> Ten znacznik zakończenia komentarza zresztą też