Podstawy HTML

HTML jest podstawowym językiem znaczników do tworzenia stron. Każdy dokument HTML musi zaczynać się od deklaracji typu dokumentu <!DOCTYPE html>. Właściwa część dokumentu HTML zaczyna się znacznika <html> i kończy </html>. Natomiast widoczna dla użytkowników część dokumentu HTML, czyli zawartość strony internetowej mieście się w znacznikach <body></body>.

W tej części dowiesz się jak wygląda podstawowa struktura strony internetowej. Poznasz nagłówki, akapity, linki i obrazy.

<!DOCTYPE html>
<html>
 <head>
  <title>Tytuł strony</title>
 </head>
 <body>
  <h1>Nagłówek pierwszego stopnia</h1>
   <p>Treść pierwszego akapitu</p>
    <a href="https://selectors.pl/">Zawartość odnośnika</a>
  <h2>Nagłówek pierwszego stopnia</h2>
   <p>Treść pierwszego akapitu</p>
    <img src="selectors.jpg" alt="Opis obrazka, tekst alternatywny" width="168" height="100">
 </body>
</html>

Nagłówki HTML

Nagłówki stanowią praktycznie podstawę każdej strony internetowej. Definiowane są za pomocą znaczników od <h1> do <h6>.

<h1>Nagłówek pierwszego stopnia</h1>
<h2>Nagłówek drugiego stopnia</h2>
<h3>Nagłówek trzeciego stopnia</h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6>
Uwaga! Nagłówek pierwszego stopnia <h1> powinien występować tylko raz na stronie, na samym początku. Większa liczba nagłówków pierwszego stopnia może mieć negatywny wpływ na SEO strony.

Akapity HTML

Akapity podobnie jak nagłówki stanowią podstawę każdej strony internetowej.  Definiowane są za pomocą znaczników <p>. Mogą występować wielokrotnie w dokumencie.

<p>To jest pierwszy akapit</p>
<p>To jest drugi akapit</p>

Linki HTML

Linki inaczej odsyłacze stanowią podstawę każdej strony i całej sieci Internet. Dzięki nim możliwe jest odsyłanie do innej strony w obrębie witryny lub do innych stron internetowych dostępnych w Internecie. Linki HTML są definiowane za pomocą <a>.

<a href="https://selectors.pl/">Zawartość odnośnika</a>

Uwaga! Powyższy przykład <a href="#"> </a> stanowi ogólną strukturę odnośnika. Odnośniki HTML mogą zawierać znacznie więcej informacji. Więcej dowiesz się w dziale Linki HTML.

Obrazy HTML

Obrazy stanowią nieodłączną część praktycznie każdej strony internetowej. Obrazy HTML są definiowane za pomocą <img>.

<img src="selectors.jpg" alt="Opis obrazka, tekst alternatywny" width="168" height="100">

Atrybut alt określa alternatywny tekst dla obrazu, jeśli obraz nie może zostać wyświetlony. Wykorzystywany jest kiedy użytkownik korzysta z wolnego połączenia, podczas błędnie zadeklarowanej ścieżki obrazu lub jeśli użytkownik korzysta z czytnika ekranu.

Uwaga! Każdy otwarty element należy zamknąć <a href="#"> </a> z wyjątkiem pustych elementów HTML, które nie mają znacznika końcowego! Więcej dowiesz się w dziale Elementy HTML.

Jak zobaczyć kod strony HTML?

Przeglądając strony internetowe czasami trafiamy na taką perełkę, że chętnie zobaczylibyśmy jak została napisana. Aby sprawdzić kod źródłowy strony w przeglądarkach takich jak ChromeOperaMozilla lub Edge wystarczy wcisnąć kombinację klawiszy Ctrl+U. Kod źródłowy wyświetli się w nowym oknie. Możesz też nacisnąć prawy przycisk myszy i wybrać opcję z menu „Wyświetl źródło strony“.

Czy ten poradnik był pomocny?

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.


Używamy plików cookie. Jeśli chcesz dowiedzieć się więcej zobacz —