Aby stworzyć własną stronę internetową w Notepad++, potrzebujesz tylko tego edytora tekstu oraz podstawowej wiedzy o HTML i CSS. Poniżej znajdziesz kompletny poradnik, który przeprowadzi Cię przez proces tworzenia, zapisu i testowania swojej pierwszej strony, z przykładami oraz podpowiedziami do rozbudowy projektu.
1. Czym jest Notepad++ i dlaczego warto go używać?
Notepad++ to bezpłatny, lekki i bardzo funkcjonalny edytor tekstu, przeznaczony głównie do tworzenia i edycji kodu. Zapewnia kolorowanie składni, numerowanie linii oraz możliwość łatwego zarządzania wieloma plikami, co zdecydowanie ułatwia pracę nad kodem HTML i CSS.
2. Przygotowanie do pracy
- Pobierz i zainstaluj program Notepad++.
- Przygotuj folder na pliki swojej strony (np. „mojastrona” na pulpicie).
3. Tworzenie pierwszego pliku HTML
Struktura podstawowa strony HTML
W Notepad++ otwórz nowy plik i wpisz poniższy kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest mój pierwszy projekt w Notepad++.</p>
</body>
</html>
Wyjaśnienie kluczowych elementów –
- <!DOCTYPE html> – informuje przeglądarkę, że strona używa HTML5;
- <html lang=”pl”> – określa początek dokumentu oraz język strony;
- <head> – zawiera metadane strony, tytuł i ustawienia kodowania;
- <body> – tu umieszczasz całą widoczną treść swojej strony.
4. Zapis pliku i podgląd w przeglądarce
- Z menu wybierz Plik > Zapisz jako…;
- Nazwij plik np.
index.html(nazwa „index” jest domyślną nazwą strony startowej); - Jako „Zapisz jako typ” wybierz „Wszystkie pliki” i dopilnuj, by rozszerzenie było
.html; - Otwórz zapisany plik dwuklikiem lub kliknij prawym i wybierz „Otwórz za pomocą” i wskaż swoją przeglądarkę (np. Chrome, Firefox).
5. Rozbudowa strony – prosty przykład z CSS
Dodanie stylów CSS bezpośrednio do pliku HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona z CSS</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
color: #222;
}
h1 {
color: #0057b7;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Moja kolorowa strona</h1>
<p>Teraz moja strona wygląda znacznie ciekawiej!</p>
</body>
</html>
Efekt – po zapisaniu i odświeżeniu strony w przeglądarce zauważysz zmienione kolory oraz styl nagłówka i tekstu.
6. Przykłady zastosowań – praktyczne rozbudowy
Formularz kontaktowy –
<form>
<label for="email">Adres e-mail:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="wiadomosc">Wiadomość:</label><br>
<textarea id="wiadomosc" name="wiadomosc"></textarea><br><br>
<input type="submit" value="Wyślij">
</form>
Menu nawigacyjne –
<nav>
<ul>
<li><a href="index.html">Strona główna</a></li>
<li><a href="o-mnie.html">O mnie</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
Galeria zdjęć –
<div class="galeria">
<img src="zdjecie1.jpg" alt="Opis zdjęcia 1">
<img src="zdjecie2.jpg" alt="Opis zdjęcia 2">
</div>
7. Dobre praktyki kodowania
- Stosuj wcięcia – porządkują kod, ułatwiają zrozumienie struktury;
- Często zapisuj plik po każdej większej zmianie;
- Używaj rozszerzenia .html – tylko wtedy przeglądarka zinterpretuje plik jako stronę WWW;
- Podglądaj efekty na bieżąco w przeglądarce;
- Twórz kopie zapasowe plików.
8. Przykład małej strony – projekt startowy
W Notepad++ stwórz nowy plik index.html i wklej poniższy kod, aby zacząć rozbudowywać swoją prostą wizytówkę:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Wizytówka Jana Kowalskiego</title>
<style>
body {
background: #e9ecef;
color: #1a1a1a;
font-family: 'Segoe UI', Arial, sans-serif;
padding: 2em;
}
.wizytowka {
background: #fff;
padding: 2em;
max-width: 600px;
margin: auto;
border-radius: 8px
}
h1 {
color: #0d6efd;
}
.kontakt {
font-size: 1.1em;
margin-top: 1em;
}
</style>
</head>
<body>
<div class="wizytowka">
<h1>Jan Kowalski</h1>
<p>Web Developer | Grafik | Pasjonat technologii</p>
<div class="kontakt">
<p>Email: [email protected]</p>
<p>Telefon: 555-123-456</p>
</div>
</div>
</body>
</html>
9. Co dalej? Rozszerzanie projektu
- Podziel kod na kilka plików (np. osobny plik CSS),
- Stwórz podstrony i menu do nawigacji,
- Naucz się podstaw JavaScript, by dodać interaktywność,
- Kiedy Twoja strona jest gotowa, umieść ją na serwerze lub hostingu, korzystając z klienta FTP.
Tworzenie stron w Notepad++ to świetny sposób na naukę podstaw HTML i CSS oraz szybkie testowanie nowych pomysłów. Wszystko, czego potrzebujesz to edytor, przeglądarka i trochę kreatywności!
