Jak działa strona internetowa? (HTML, CSS, przeglądarka, serwer)

Preview Mode

You're viewing this material in preview mode. Sign up to track your progress and access all features.

Sign Up Free Login
Jak działa strona internetowa? (HTML, CSS, przeglądarka, serwer)
In Progress

Strona internetowa — co to jest?

Strona internetowa to dokument (lub zestaw dokumentów) napisany w języku HTML (HyperText Markup Language) i często wsparty arkuszami stylów CSS (Cascading Style Sheets). HTML definiuje strukturę i zawartość strony – określa, co jest nagłówkiem, akapitem, listą, obrazkiem itp. CSS opisuje wygląd tych elementów – kolory, czcionki, rozmiary, układ na stronie i inne aspekty prezentacji.

Jak działa strona WWW?

  1. Wpisanie adresu (URL): użytkownik wprowadza adres strony w przeglądarce.
  2. Żądanie do serwera: przeglądarka wysyła żądanie do serwera, na którym znajdują się pliki strony.
  3. Odpowiedź serwera: serwer przesyła plik HTML (a często także pliki CSS, skrypty i obrazy).
  4. Parsowanie HTML: przeglądarka czyta kod HTML i tworzy model DOM (Document Object Model).
  5. Pobranie zasobów: przeglądarka pobiera dodatkowe zasoby wskazane w HTML, np. arkusze stylów CSS.
  6. Renderowanie: CSS jest interpretowany i stosowany do elementów w DOM, a przeglądarka renderuje stronę i wyświetla ją użytkownikowi.

Podstawowa struktura pliku HTML

Plik HTML powinien mieć rozszerzenie .html (np. index.html). Poniżej znajduje się przykład minimalnej strony HTML z nagłówkiem i akapitem: 

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Witamy na naszej stronie!</h1>
    <p>To jest pierwszy akapit naszej przykładowej strony.</p>
</body>
</html>

Wyjaśnienie elementów z przykładu

  • <!DOCTYPE html> — deklaracja typu dokumentu informująca przeglądarkę, że użyty jest HTML5.
  • <html lang="pl"> — główny element dokumentu z atrybutem języka.
  • <head> — sekcja nagłówkowa dokumentu (np. kodowanie znaków, tytuł strony).
  • <meta charset="UTF-8"> — określa kodowanie znaków dokumentu.
  • <title> — tytuł strony wyświetlany na karcie przeglądarki.
  • <body> — część dokumentu zawierająca elementy widoczne na stronie (nagłówki, akapity, obrazy itp.).
  • <h1> — nagłówek pierwszego poziomu; <p> — akapit tekstu.

Po zapisaniu takiego pliku i otwarciu go w przeglądarce zobaczysz stronę z dużym tytułem "Witamy na naszej stronie!" oraz poniżej tekstem akapitu — to najprostszy przykład działania strony internetowej.

Sign up to track your progress