Aby zrobić stronę internetową w Notatniku, wystarczy prosty edytor tekstu oraz podstawowa wiedza o HTML. To świetny sposób na naukę podstaw web developmentu i zrozumienie działania stron WWW od podszewki. Poniżej znajdziesz szczegółowy poradnik krok po kroku, przykłady kodu oraz praktyczne zastosowania.
Krok 1 – Otwórz Notatnik
- Notatnik – uruchom Notatnik (lub inny prosty edytor tekstu, np. Notepad++);
- możesz go znaleźć, wpisując w menu Start „Notatnik” i uruchamiając program.
Krok 2 – Poznaj podstawowe składniki HTML
HTML (HyperText Markup Language) to język służący do budowy struktury stron internetowych. Oto najważniejsze elementy, które wykorzystasz:
<!DOCTYPE html>– deklaruje wersję HTML;<html>– główny kontener strony;<head>– sekcja z metadanymi (np. tytuł, kodowanie);<title>– tytuł strony wyświetlany na karcie przeglądarki;<meta charset="utf-8">– ustawienie kodowania znaków;<body>– główna treść strony;- Nagłówki (
<h1>,<h2>, itd.) – służą do organizowania treści; <p>– paragraf, czyli akapit tekstu.
Krok 3 – Napisz pierwszy kod HTML
Zacznij od podstawowego szkieletu strony internetowej:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja pierwsza strona internetowa</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy projekt stworzony w Notatniku.</p>
</body>
</html>
Krok 4 – Zapisz plik jako stronę internetową
- Plik → Zapisz jako – wybierz tę opcję w Notatniku;
- index.html – ustaw nazwę pliku;
- w polu „Zapisz jako typ” wybierz „Wszystkie pliki (.)”;
- UTF-8 – jako kodowanie wybierz UTF-8, aby poprawnie obsługiwać polskie znaki;
- wybierz miejsce zapisu, najlepiej utwórz osobny folder, np. na pulpicie: HTML/.
Krok 5 – Otwórz stronę w przeglądarce
- przejdź do folderu, w którym zapisałeś plik index.html;
- kliknij dwukrotnie plik – strona otworzy się automatycznie w domyślnej przeglądarce internetowej;
- możesz też użyć opcji „Otwórz za pomocą” i wybrać konkretną przeglądarkę.
Przykłady zastosowań
Możesz stworzyć różne typy stron w Notatniku, np.:
- Strona osobista / wizytówka
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Jan Kowalski - Wizytówka</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Programista, webdeveloper, pasjonat IT.</p>
<h2>Kontakt</h2>
<ul>
<li>Email: [email protected]</li>
<li>Telefon: 123-456-789</li>
</ul>
</body>
</html>
- Lista zadań do wykonania
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Lista zadań</title>
</head>
<body>
<h1>Moje zadania na dziś</h1>
<ul>
<li>Napisanie artykułu</li>
<li>Przygotowanie materiałów</li>
<li>Spotkanie z zespołem</li>
</ul>
</body>
</html>
- Prosta galeria zdjęć – zakładając, że zdjęcia są w tym samym folderze:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Galeria zdjęć</title>
</head>
<body>
<h1>Moja galeria</h1>
<img src="zdjecie1.jpg" alt="Zdjęcie 1" width="300">
<img src="zdjecie2.jpg" alt="Zdjęcie 2" width="300">
<img src="zdjecie3.jpg" alt="Zdjęcie 3" width="300">
</body>
</html>
Rady dla początkujących
- Notatnik – nie podpowiada składni, więc warto zachować szczególną uwagę podczas pisania kodu (literałowe wpisywanie znaczników!);
- jeżeli pojawią się błędy, sprawdź dokładność użytych znaczników oraz poprawność zapisania pliku (czy na pewno z rozszerzeniem
.html); - po każdej zmianie kodu należy zapisać plik i odświeżyć stronę w przeglądarce, aby zobaczyć nowe efekty.
Rozwijanie strony
Po opanowaniu podstaw możesz:
- Style CSS – wystarczy dodać w sekcji
<head>:
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
p {
font-size: 18px;
}
</style>
- dodawać linki, obrazy, tabele, formularze i inne elementy HTML,
- uczyć się JavaScript, aby ożywić stronę i dodać interaktywność.
Podsumowanie
Tworzenie stron internetowych w Notatniku to podstawowy, a jednocześnie bardzo pouczający sposób na naukę HTML i zrozumienie funkcjonowania WWW. Wystarczy kilka minut i proste polecenia, aby zbudować własną, działającą stronę od podstaw. To doskonała baza do dalszego rozwoju umiejętności webmasterskich.
