Https Pl Khanacademy Org Computing Computer Programming Html Css

Written by Margaret Weigel
Updated at: 05 June 2025

Zajmiemy się teraz stroną Khan Academy poświęconą programowaniu w HTML i CSS.

Czym jest HTML?

HTML, czyli HyperText Markup Language, to język znaczników. Służy do tworzenia struktury stron internetowych.

Wyobraź sobie budynek. HTML to jego szkielet i mury. Określa, gdzie będą nagłówki, paragrafy, obrazy czy linki.

HTML używa tagów. Tag to element otoczony nawiasami kątowymi: <tag>. Większość tagów występuje w parach: otwierający <tag> i zamykający </tag>.

Przykładowo, paragraf tekstu: <p>To jest paragraf.</p>. Nagłówek: <h1>To jest nagłówek.</h1>.

Khan Academy oferuje interaktywne lekcje. Pozwalają pisać kod HTML i od razu zobaczyć efekt.

Podstawowe tagi HTML

Kilka podstawowych tagów:

<html>: Główny tag, otacza całą stronę.
<head>: Zawiera informacje o stronie (tytuł, style).
<title>: Tytuł strony, wyświetlany w karcie przeglądarki.
<body>: Zawartość strony, widoczna dla użytkownika.
<h1> do <h6>: Nagłówki różnej wielkości.
<p>: Paragraf tekstu.
<a>: Link (hiperłącze).
<img>: Obraz.
<ul>: Lista nieuporządkowana (wypunktowana).
<ol>: Lista uporządkowana (numerowana).
<li>: Element listy.

Przykład kodu HTML:


<!DOCTYPE html>
<html>
<head>
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj świecie!</h1>
  <p>To jest moja pierwsza strona internetowa.</p>
</body>
</html>

Czym jest CSS?

CSS, czyli Cascading Style Sheets, to język stylów. Określa wygląd strony internetowej.

Wróćmy do przykładu budynku. CSS to farby, meble i dekoracje. Nadaje stronie kolor, układ i estetykę.

CSS pozwala kontrolować czcionki, kolory, marginesy, odstępy i wiele innych aspektów wizualnych.

CSS używa selektorów, właściwości i wartości. Selektor wskazuje element HTML, który ma być ostylowany. Właściwość określa, co chcemy zmienić (np. kolor tekstu). Wartość definiuje nową wartość właściwości (np. czerwony).

Przykład: p { color: blue; }. To oznacza, że wszystkie paragrafy (<p>) będą miały niebieski kolor tekstu.

Jak dodać CSS do HTML?

Są trzy sposoby:

Inline CSS: Styl wewnątrz tagu HTML, używając atrybutu style. Przykład: <p style="color: green;">Ten paragraf jest zielony.</p>. Nie jest to zalecane dla większych projektów.
Internal CSS: Style wewnątrz tagu <style> w sekcji <head>. Dobre dla pojedynczej strony.
External CSS: Style w oddzielnym pliku .css. Najlepsze rozwiązanie dla większych projektów. Pozwala na łatwe zarządzanie stylem całej strony.

Przykład External CSS. Plik style.css:


body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

A w HTML:


<!DOCTYPE html>
<html>
<head>
  <title>Moja strona z CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>To jest nagłówek!</h1>
  <p>To jest paragraf.</p>
</body>
</html>