Podstawowe przykłady HTML
W tym rozdziale pokażemy kilka podstawowych przykładów HTML.
Nie martw się, jeśli używamy tagów, o których jeszcze nie wiesz.
Dokumenty HTML
Wszystkie dokumenty HTML muszą zaczynać się od deklaracji typu dokumentu: <!DOCTYPE html>
.
Sam dokument HTML zaczyna się <html>
i kończy na </html>
.
Widoczna część dokumentu HTML znajduje się pomiędzy <body>
i </body>
.
Przykład
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Deklaracja <!DOCTYPE>
Deklaracja <!DOCTYPE>
reprezentuje typ dokumentu i pomaga przeglądarkom w prawidłowym wyświetlaniu stron internetowych.
Musi pojawić się tylko raz, u góry strony (przed tagami HTML).
W <!DOCTYPE>
deklaracji nie jest rozróżniana wielkość liter.
Deklaracja <!DOCTYPE>
dla HTML5 to:
<!DOCTYPE html>
Nagłówki HTML
Nagłówki HTML są definiowane za pomocą znaczników <h1>
to .<h6>
<h1>
definiuje najważniejszy nagłówek. <h6>
definiuje najmniej ważny nagłówek:
Przykład
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Akapity HTML
Paragrafy HTML są definiowane za pomocą <p>
tagu:
Przykład
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Linki HTML
Linki HTML są definiowane za pomocą <a>
tagu:
Przykład
<a href="https://www.w3schools.com">This is a link</a>
Miejsce docelowe łącza jest określone w href
atrybucie.
Atrybuty służą do dostarczania dodatkowych informacji o elementach HTML.
Więcej o atrybutach dowiesz się w kolejnym rozdziale.
Obrazy HTML
Obrazy HTML są definiowane za pomocą <img>
tagu.
Plik źródłowy ( src
), tekst alternatywny ( alt
),
width
i height
są dostarczane jako atrybuty:
Przykład
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Jak wyświetlić źródło HTML?
Czy kiedykolwiek widziałeś stronę internetową i zastanawiałeś się "Hej! Jak oni to zrobili?"
Wyświetl kod źródłowy HTML:
Kliknij prawym przyciskiem myszy stronę HTML i wybierz „Wyświetl źródło strony” (w Chrome) lub „Wyświetl źródło” (w Edge) lub podobnie w innych przeglądarkach. Otworzy się okno zawierające kod źródłowy HTML strony.
Sprawdź element HTML:
Kliknij prawym przyciskiem myszy element (lub pusty obszar) i wybierz „Sprawdź” lub „Sprawdź element”, aby zobaczyć, z czego składają się elementy (zobaczysz zarówno kod HTML, jak i CSS). Możesz także edytować kod HTML lub CSS w locie w panelu Elementy lub Style, który się otworzy.