Rezultat wyświetlany po wykonaniu kodu HTML zależy od tego, jak skonstruowany jest dany kod – każda przeglądarka interpretuje tagi HTML zgodnie ze standardami i prezentuje na ekranie odpowiednie elementy, takie jak tekst, obrazy, tabele czy formularze. Ostateczny efekt działania można szybko zobaczyć, wklejając kod do narzędzia do podglądu HTML online lub otwierając plik .html w przeglądarce.
Jak działa wyświetlanie kodu HTML?
Każdy plik HTML to zestaw znaczników (tagów), które przeglądarka interpretuje i przekłada na czytelny wizualnie układ strony. Tagi mają różne funkcje:
- Strukturalne (
<html>,<head>,<body>); - Nagłówki (
<h1>,<h2>…<h6>); - Tekstowe (
<p>,<strong>,<em>); - Listy (
<ul>,<li>,<ol>); - Obrazki (
<img>); - Linki i przyciski (
<a>,<button>); - Tabele, formularze, multimedia itd.
Po wpisaniu lub wklejeniu kodu HTML oraz zapisaniu go jako plik z rozszerzeniem .html, efekt działania kodu można zobaczyć po jego otwarciu w przeglądarce lub za pomocą narzędzi typu podgląd online – natychmiast wyświetli się rezultat działania ukryty za kodem.
Przykłady kodu i prezentowany rezultat w przeglądarce
Przykład 1 – Prosty akapit z nagłówkiem
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest pierwszy akapit tekstu.</p>
</body>
</html>
Efekt w przeglądarce –
- wyświetlony duży nagłówek: „Witaj na mojej stronie!”,
- poniżej zwykły tekst: „To jest pierwszy akapit tekstu.”
Przykład 2 – Lista i obrazek
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
</ul>
<img src="obrazek.jpg" alt="Opis obrazka">
</body>
</html>
Efekt –
- widzisz wypunktowaną listę składającą się z dwóch pozycji,
- poniżej zostaje wyświetlony obrazek (jeśli plik obrazka znajduje się w odpowiednim miejscu). Jeśli nie, pojawi się tekst alternatywny „Opis obrazka”.
Przykład 3 – Formatarowanie tekstu
<p>To jest <strong>wytłuszczony</strong> tekst oraz <em>pochylony</em> tekst.</p>
Efekt –
fragment „wytłuszczony” będzie pogrubiony, a fragment „pochylony” pojawi się kursywą.
Sposoby podglądu efektów kodu HTML
- Bezpośrednio w przeglądarce – zapisz kod jako plik .html, a następnie otwórz go w dowolnej przeglądarce internetowej;
- Narzędzia online – wiele serwisów pozwala na natychmiastowy podgląd kodu. Wklejasz kod w jedno pole, a w drugim od razu widzisz rezultat działania – świetne podczas nauki i szybkich testów fragmentów kodu;
- Konsola deweloperska – kliknij prawym przyciskiem na stronie i wybierz „Zbadaj element” lub „Wyświetl źródło strony”, aby zobaczyć, jak Twój kod HTML został zinterpretowany przez przeglądarkę.
Przykładowe zastosowania wyświetlanych wyników HTML
- Tworzenie stron wizytówek;
- Projektowanie sklepów internetowych i blogów;
- Budowanie aplikacji i prototypów (elementy formularzy, przyciski, pola tekstowe);
- Testowanie i nauka podstaw web developmentu;
- Szybki podgląd efektu zmian – np. podczas nauki CSS czy JavaScript, gdzie HTML stanowi bazę do dalszego stylowania i programowania interakcji.
Najczęściej używane tagi – skrócona tabela
| Znacznik | Efekt w przeglądarce |
|---|---|
<h1> |
Największy nagłówek |
<p> |
Akapit tekstu |
<img src="..."> |
Wyświetlenie obrazka |
<ul><li>...</li></ul> |
Lista wypunktowana |
<a href="..."> |
Link klikany |
<strong> |
Pogrubiony tekst |
<em> |
Pochylony tekst |
HTML to fundament każdej strony WWW – zrozumienie, jak przeglądarka wyświetla kod, pozwala na budowanie zarówno prostych, jak i zaawansowanych projektów internetowych. Warto testować różne fragmenty kodu i obserwować na bieżąco efekty, by szybko rozwijać praktyczne umiejętności.
