Edytor html online  Kurs HTML

1. Trzy filary nowoczesnej strony (Front-end)

Każda strona internetowa, którą widzisz w przeglądarce, składa się zazwyczaj z trzech głównych technologii. Można je porównać do budowy domu:

• HTML (szkielet): odpowiada za treść i strukturę strony. Decyduje o tym, gdzie znajdzie się nagłówek, tekst, obrazek czy tabela.
• CSS (wygląd): odpowiada za styl, kolory, czcionki i układ elementów. Sprawia, że "surowy" tekst z HTML wygląda nowocześnie i atrakcyjnie.
• JavaScript (działanie): odpowiada za interakcję i ruch. Sprawia, że na stronie działają wyskakujące okienka, animacje, kalkulatory czy gry.

2. Podstawowe znaczniki HTML

W HTML używamy tzw. znaczników, które wkładamy w nawiasy ostre < >. Większość z nich ma swój początek i koniec (zamknięcie z ukośnikiem /).

<h1> do <h6> – nagłówki. <h1> to najważniejszy i największy nagłówek na stronie.

<p> – akapit tekstu.

<a href="link"> – hiperłącze (link) prowadzące do innej strony.

<img src="obrazek.jpg"> – wstawienie obrazka (ten znacznik nie potrzebuje zamknięcia).

<ul> oraz <li> – tworzenie listy punktowanej.

3 Podstawy CSS (Stylowanie)

Aby zmienić wygląd elementu HTML, musimy go wskazać (użyć selektora) i przypisać mu odpowiednią cechę:

color: red; – zmienia kolor tekstu na czerwony.

background-color: blue; – zmienia kolor tła elementu.

font-size: 20px; – zmienia wielkość czcionki.

text-align: center; – wyrównuje tekst do środka.

4. Gdzie i jak pisać kod?

Do tworzenia stron nie potrzebujesz drogich programów. Wystarczą proste i darmowe narzędzia:

Edytory kodu: najpopularniejszy to darmowy Visual Studio Code (VS Code) lub Notepad++.

Zapisywanie plików: główny plik strony HTML musi zawsze nazywać się index.html. Z kolei plik ze stylami nazywamy zazwyczaj style.css.

Przeglądarka internetowa: dowolna przeglądarka (Chrome, Edge, Firefox) służy do uruchamiania i testowania Twojego pliku .html.

5. Ważne zasady tworzenia stron (Warto zapamiętać na sprawdzian!)

Responsywność (RWD): strona musi dobrze wyglądać zarówno na dużym monitorze komputera, jak i na małym ekranie smartfona.

Znaki w nazwach plików: w nazwach plików (np. obrazków czy podstron) nigdy nie używaj spacji ani polskich znaków (ą, ę, ć itp.). Zamiast spacji używaj myślnika (np. moj-obrazek.jpg).

Struktura folderów: wszystkie pliki strony (HTML, CSS, zdjęcia) najlepiej trzymać w jednym, dedykowanym folderze, aby linki między nimi poprawnie działały.

przykładowy szablon 

1. Plik ze strukturą: index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja Pierwsza Strona</title>

<!-- Połączenie z plikiem stylów CSS -->
<link rel="stylesheet" href="style.css">

</head>
<body>

<!-- Nagłówek strony -->

<header>
<h1>Witaj na mojej stronie internetowej!</h1>
<p>Projekt stworzony na lekcję informatyki w szkole podstawowej.</p>
</header>

<!-- Główna treść strony -->
<main>

<section>
<h2>O mnie</h2>
<p>Cześć! Uczę się właśnie podstaw HTML i CSS. To jest mój pierwszy samodzielny szablon strony.</p>
</section>

<section>
<h2>Moje ulubione przedmioty</h2>
<ul>
<li>Informatyka</li>
<li>Matematyka</li>
<li>Wychowanie fizyczne</li>
</ul>
</section>

<section>
<h2>Ważne linki</h2>
<!-- Pamiętaj, aby zawsze wpisywać pełny adres z https:// -->
<p>Odwiedź moją stronę : <a href="https:/zygmunt.ovh" target="_blank">Kliknij tutaj</a></p>
</section>

</main>

<!-- Stopka strony -->
<footer>
<p>&copy; 2026 Twój Autor. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>

2. Plik z wyglądem: style.css

W tym samym folderze, w którym znajduje się plik index.html, stwórz drugi plik o nazwie style.css i wklej do niego ten kod:

/* Styl dla całej strony (tło i domyślna czcionka) */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
margin: 0; padding: 20px;
}
/* Styl dla nagłówka strony */
header {
background-color: #4A90E2;
color: white;
text-align: center;
padding: 20px;
border-radius: 8px;
}
/* Styl dla głównego kontenera z treścią */
main {
margin-top: 20px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Styl dla nagłówków sekcji */
h2 {
color: #4A90E2;
border-bottom: 2px solid #f4f4f9;
padding-bottom: 5px;
}
/* Styl dla linków */
a {
color: #4A90E2;
text-decoration: none;
font-weight: bold;
}
/* Zmiana koloru linku po najechaniu myszką */
a:hover {
text-decoration: underline;
color: #357ABD;
}
/* Styl dla stopki na samym dole */
footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: #777;
}

6. Domena i Hosting – jak to działa?

Hosting - stale włączony komputer (serwer) podłączony do internetu, na który wgrywasz pliki swojej strony (index.html, zdjęcia itp.)

Domena -  adres domowyUnikalna, łatwa do zapamiętania nazwa, którą użytkownicy wpisują w przeglądarkę, aby trafić na Twoją stronę.google.pl, wikipedia.org, stronaszkoly.edu.pl.

Każda domena składa się z nazwy głównej i rozszerzenia (końcówki), które często mówi nam, z jaką stroną mamy do czynienia:

.pl – domena narodowa Polski

.com – domena komercyjna (globalna, dla firm)

.org – dla organizacji pozarządowych i społecznych

.edu.pl – dla placówek oświatowych (szkół, uczelni)

7. Prawo w internecie i bezpieczeństwo strony

Tworząc stronę internetową, stajesz się twórcą, ale też podlegasz przepisom prawa.
Oto 3 najważniejsze zasady, o których musi pamiętać uczeń:

1. Prawa autorskie (Nie kradnij zdjęć z Google!)

Wszystko, co znajdziesz w internecie (teksty, zdjęcia, muzyka, grafiki), ma swojego autora.

Zasada: Nie możesz bez zgody autora skopiować czyjegoś zdjęcia i wrzucić na swoją stronę.

Rozwiązanie: Korzystaj z darmowych banków zdjęć (np. Pixabay, Pexels, Unsplash) na licencjach Creative Commons (CC) lub CC0 (domena publiczna) – te materiały możesz legalnie pobierać i wykorzystywać w swoich szkolnych projektach.

2. Kłódka przy adresie, czyli protokół HTTPS

Na pewno kojarzysz małą kłódkę obok adresu strony w przeglądarce.

HTTP – stary, niezaszyfrowany protokół. Wszystko, co wpisujesz na takiej stronie (np. hasło), może być podglądane przez hakerów.

HTTPS – bezpieczna wersja protokołu (litera S oznacza Secure). Dane są szyfrowane za pomocą tzw. certyfikatu SSL. Przeglądarki oznaczają dziś strony bez HTTPS jako „Niebezpieczne”.

3. Ciasteczka (Cookies) i RODO

Cookies (ciasteczka): Małe pliki tekstowe zapisywane przez stronę na komputerze użytkownika (np. po to, by zapamiętać, że jesteś zalogowany albo co masz w koszyku sklepu). Prawo nakazuje informować użytkowników o ich używaniu (stąd te wszystkie wyskakujące banery).

RODO / Dane osobowe: Jeśli na swojej stronie zrobisz np. formularz kontaktowy, w którym zbierasz imiona, nazwiska czy adresy e-mail użytkowników, musisz chronić te dane i napisać tzw. Politykę Prywatności.