Wprowadzenie — HTML

HTML opisuje strukturę treści strony internetowej.

Jak to działa?

HTML nie jest językiem programowania. Znaczniki mówią przeglądarce, co jest nagłówkiem, akapitem, linkiem lub innym elementem. Zwykły plik index.html otworzysz w przeglądarce.

Przykład 1 — poznaj zapis

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Moja strona</title>
</head>
<body>
  <h1>Cześć!</h1>
</body>
</html>

lang="pl" deklaruje język dokumentu, a meta charset kodowanie znaków.

Przeczytaj kod linijka po linijce

<!doctype html>Przygotowujemy środowisko i deklarujemy element potrzebny programowi.
<html lang="pl">Tworzymy nagłówek porządkujący treść strony.
<head>Tworzymy nagłówek porządkujący treść strony.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Widoczny duży nagłówek „Cześć!”. Tytuł karty przeglądarki: „Moja strona”.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

<!doctype html><html lang="pl"><body><p>Cześć!</p></body></html>

Wynik drugiego przykładupo uruchomieniu przykładu

Widoczny akapit: „Cześć!”.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Utwórz plik index.html i dodaj własny nagłówek.