czwartek,
Znacznik HTML
Fundamentalnymi elementami konstrukcyjnymi stron internetowych są znaczniki HTML (HyperText Markup Language) – służą do tworzenia struktury dokumentu i nadawania znaczenia zawartości strony.
Znaczenie znacznika
Struktura dokumentu
Znaczniki HTML definiują i organizują strukturę treści na stronie internetowej. Na przykład, <h1> do <h6> to znaczniki nagłówków, <p> definiuje paragrafy, a <ul> i <ol> służą do tworzenia list.
Semantyka
Znaczniki HTML nadają semantyczne znaczenie treści, pomagając w rozróżnianiu między różnymi typami informacji, takimi jak nagłówki, akapity, listy, linki, obrazy itp. Dzięki temu przeglądarki i narzędzia pomagające, takie jak czytniki ekranu dla osób niewidomych, mogą poprawnie interpretować treść strony. W HTML5 wprowadzono znaczniki semantyczne, takie jak m.in. <header>, <footer>, <nav>, <article>, i <section>, które jeszcze dokładniej określają znaczenie treści.
Budowa znacznika
Otwieranie i zamykanie znacznika
Początek znacznika składa się z nazwy znacznika otoczonej nawiasami ostrokątnymi. Na przykład: <p>, <div>, <a>. Koniec znacznika to nazwa znacznika poprzedzona ukośnikiem i otoczona nawiasami ostrokątnymi. Na przykład: </p>, </div>, </a>. Nie wszystkie znaczniki wymagają znacznika zamykającego, np. znaczniki samozamykające jak <img> czy <br>.
Znacznik tworzący nagłówek:
<h1>Tytuł dokumentu</h1>
Atrybuty znaczników
Znaczniki mogą zawierać atrybuty, które dostarczają dodatkowych informacji o elemencie, takich jak styl, identyfikatory, klasy, typy danych itp. Atrybuty znajdują się w znaczniku otwierającym i zwykle mają format nazwa="wartość".
Na przykład:
<a href="http://example.com">example.com</a>
gdzie href jest atrybutem, a http://example.com jego wartością. Część atrybutów jest typowa dla danego znacznika, np. href nie dotyczy akapitów (<p>). Niektóre atrybuty mogą występować w każdym znaczniku, np. identyfikator:
<h1 id="tytul">Tytuł dokumentu</h1>
<p id="pierwszy-akapit">Pierwszy akapit</p>
Treść znacznika
Treść to zawartość umieszczona pomiędzy znacznikiem otwierającym a zamykającym. Treść może zawierać tekst, inne znaczniki HTML, a czasami może być pusta (w zależności od typu znacznika). Na przykład, w przykładzie:
<p>To jest paragraf.</p>
"To jest paragraf." jest treścią.
Przykład znacznika z atrybutem i treścią
<a href="http://example.com" title="Przykładowa strona">Odwiedź Example.com</a>
W tym przykładzie:
<ato początek znacznika otwierającego.href="http://example.com"ititle="Przykładowa strona"to atrybuty znacznika.>kończy znacznik otwierający.Odwiedź Example.comto treść znacznika.</a>to znacznik zamykający.
Zagnieżdżanie znaczników
Zagnieżdżanie znaczników polega na umieszczaniu jednych znaczników wewnątrz innych. Ważne jest, aby zachować właściwą kolejność otwierania i zamykania, aby struktura była poprawna.
Przykład poprawnego zagnieżdżenia
<div>
<h1>Nagłówek strony</h1>
<p>To jest <strong>ważny</strong> paragraf.</p>
</div>
Błędy zagnieżdżania
Niewłaściwe zagnieżdżanie może prowadzić do błędów w wyświetlaniu strony. Przykład błędnego zagnieżdżenia:
<p>To jest <strong>ważny paragraf.</p></strong>
W powyższym przykładzie znacznik <strong> jest otwarty wewnątrz <p>, ale zamykany poza nim, co jest błędem.
Wielopoziomowe zagnieżdżanie
Można zagnieżdżać wiele poziomów znaczników, aby utworzyć złożone struktury, na przykład:
<div>
<ul>
<li>Element 1</li>
<li>Element 2</li>
</ul>
</div>
