Pierwsza strona internetowa nie wymaga skomplikowanego środowiska ani płatnego programu. Jeżeli chcesz wiedzieć, jak zrobić stronę internetową HTML w Notepad++, pokażę Ci prosty proces od utworzenia pliku, przez napisanie kodu, aż po testowanie i przygotowanie projektu do dalszej rozbudowy.
Najkrótsza droga od pustego pliku do działającej strony
- Notepad++ wystarczy do nauki podstaw HTML i tworzenia prostych stron.
- Plik zapisz jako index.html i wybierz kodowanie UTF-8.
- Efekt sprawdzisz, otwierając dokument w przeglądarce.
- HTML odpowiada za strukturę, a CSS za wygląd strony.
- Do publikacji w internecie potrzebujesz później hostingu i domeny.
Od czego zacząć i czy Notepad++ wystarczy
Notepad++ jest edytorem tekstu z kolorowaniem składni, numerami linii i podstawowymi funkcjami ułatwiającymi pisanie kodu. Do pierwszego projektu nie potrzebujesz jeszcze serwera, domeny ani specjalnego kreatora. Wystarczy komputer, przeglądarka i jeden plik z rozszerzeniem .html.
Sam traktuję Notepad++ jako dobre narzędzie startowe, ponieważ nie ukrywa kodu za graficznym interfejsem. Od razu widać, które elementy odpowiadają za nagłówki, akapity czy linki. To pomaga zrozumieć HTML, choć przy większych projektach wygodniejszy może być edytor z rozbudowanym autouzupełnianiem.
Na początku przygotuj osobny folder, na przykład moja-strona. W przyszłości umieścisz w nim plik HTML, arkusz stylów CSS, obrazy i kolejne podstrony. Taki porządek szybko zaczyna mieć znaczenie, nawet jeśli pierwsza witryna składa się tylko z kilku linijek.
Pierwszy plik HTML krok po kroku
Utworzenie i zapis dokumentu
- Otwórz Notepad++ i wybierz nowy dokument.
- Wpisz lub wklej kod strony.
- Wybierz Plik, Zapisz jako.
- Nadaj dokumentowi nazwę index.html.
- Ustaw typ pliku na wszystkie typy i wybierz kodowanie UTF-8.
Rozszerzenie jest bardzo ważne. Plik zapisany jako index.html.txt nadal będzie zwykłym dokumentem tekstowym, nawet jeśli system ukrywa końcówkę nazwy. Gdy masz wątpliwości, włącz w Eksploratorze Windows wyświetlanie rozszerzeń znanych typów plików.
Przeczytaj również: Jak zrobić stronę WWW w Notatniku? Prosty tutorial krok po kroku
Minimalna zawartość strony
Moja pierwsza strona
To jest mój pierwszy tekst zapisany w HTML.
Uczę się tworzyć strony internetowe w Notepad++.
Zapisz plik skrótem Ctrl+S, a potem otwórz go dwukrotnym kliknięciem. Przeglądarka odczyta znaczniki i pokaże ich efekt, a nie sam kod. Po każdej zmianie zapisz dokument i odśwież stronę klawiszem F5.
Element tworzy główny nagłówek, natomiast oznacza akapit. W HTML większość elementów ma znacznik otwierający i zamykający, dlatego brak jednego nawiasu lub literówka potrafi zmienić wygląd całej strony.
Jak dodać treść, linki, listę i obraz
Gdy podstawowy plik działa, możesz rozbudować go o elementy spotykane na każdej stronie. Najlepiej dodawać je pojedynczo i od razu sprawdzać efekt. Dzięki temu łatwo ustalisz, która zmiana spowodowała problem.
O mnie
Interesuję się nowymi technologiami i uczę się programowania.
Moje zainteresowania
- Tworzenie stron
- Grafika komputerowa
- Bezpieczeństwo cyfrowe
Lista punktowana korzysta z . Atrybut href wskazuje miejsce docelowe linku, natomiast alt opisuje obraz osobom korzystającym z czytników ekranu i pojawia się, gdy grafika nie zostanie załadowana.
Obraz musi znajdować się w odpowiednim folderze. Jeżeli zapiszesz zdjęcie w folderze obrazy, ścieżka w kodzie również musi zawierać tę nazwę. Najczęstszy błąd początkujących polega na wpisaniu poprawnej nazwy pliku, ale wskazaniu niewłaściwej lokalizacji.
Jak połączyć HTML z podstawowym CSS
HTML opisuje strukturę, ale sam z siebie tworzy raczej surowy dokument. Kolory, odstępy, szerokości i krój pisma ustawisz za pomocą CSS, czyli języka stylów. Ja polecam od początku trzymać style w osobnym pliku, bo późniejsze poprawki są wtedy znacznie prostsze.
Utwórz w tym samym folderze plik style.css i wpisz do niego:
body {
font-family: Arial, sans-serif;
max-width: 760px;
margin: 40px auto;
padding: 0 20px;
line-height: 1.6;
color: #222;
}
h1 {
color: #1769aa;
}
a {
color: #c0392b;
}Połączenie arkusza z dokumentem wymaga dodania odwołania do pliku stylów w części technicznej dokumentu. W Notepad++ możesz skorzystać z gotowego szablonu HTML albo dodać odwołanie zgodnie z podpowiedziami edytora. Najważniejsze jest, aby style.css znajdował się w tej samej lokalizacji co plik strony, chyba że używasz innej, poprawnie wskazanej ścieżki.
Nie przesadzaj z CSS na początku. Lepiej ustawić czytelną szerokość, kontrast i odstępy niż wprowadzać kilkadziesiąt efektów, których później trudno będzie szukać i poprawiać.
Testowanie strony i naprawianie typowych błędów
Najprostszy test polega na otwarciu pliku w dwóch przeglądarkach, na przykład Chrome i Firefox. Jeżeli strona wygląda podobnie w obu programach, podstawowa składnia jest prawdopodobnie poprawna. Przy bardziej rozbudowanych projektach sprawdzaj też widok na wąskim ekranie, ponieważ szerokie elementy mogą powodować przewijanie poziome.
| Problem | Najczęstsza przyczyna | Rozwiązanie |
|---|---|---|
| Przeglądarka pokazuje kod | Plik ma rozszerzenie .txt | Zapisz go ponownie jako index.html |
| Polskie znaki są nieczytelne | Niewłaściwe kodowanie | Wybierz UTF-8 w Notepad++ i zapisz plik ponownie |
| Obraz się nie wyświetla | Błędna ścieżka lub nazwa pliku | Sprawdź folder, rozszerzenie i wielkość liter |
| CSS nie działa | Arkusz nie został poprawnie podłączony | Sprawdź nazwę pliku i jego lokalizację |
Warto też używać narzędzi deweloperskich przeglądarki. Po naciśnięciu F12 możesz podejrzeć strukturę strony i zobaczyć komunikaty o brakujących plikach. Taki komunikat często rozwiązuje problem szybciej niż wielokrotne przepisywanie całego kodu.
Nie ignoruj czerwonych podkreśleń ani ostrzeżeń w edytorze, ale też nie zakładaj, że każda uwaga oznacza awarię. HTML bywa wyświetlany mimo błędów, jednak niepoprawna struktura może później zaszkodzić dostępności, pozycjonowaniu i działaniu strony na telefonach.
Plik na komputerze to jeszcze nie publikacja w internecie
Strona otwierana z dysku działa lokalnie. Oznacza to, że widzisz ją Ty, ale nie inni użytkownicy. To idealny etap do nauki, ponieważ kosztuje 0 zł i pozwala spokojnie poprawiać kod bez konfigurowania serwera.
| Etap | Co jest potrzebne | Kto widzi stronę |
|---|---|---|
| Nauka lokalna | Notepad++, plik HTML i przeglądarka | Tylko Ty na swoim komputerze |
| Publikacja | Hosting, domena i przesłanie plików | Każdy użytkownik internetu |
Do pierwszych ćwiczeń nie kupowałbym domeny ani hostingu. Najpierw sprawdź, czy potrafisz samodzielnie zbudować kilka podstron, połączyć je linkami i poprawić wygląd za pomocą CSS. Dopiero później wybierz usługę hostingową i naucz się przesyłać pliki na serwer.
Co warto zrobić po pierwszej działającej stronie
Najlepszym kolejnym krokiem jest mały projekt, na przykład wizytówka, strona hobby albo proste portfolio. Utwórz stronę główną, podstronę kontaktową, folder na obrazy i osobny arkusz CSS. Taki układ jest wystarczająco prosty dla początkującego, a jednocześnie uczy zasad stosowanych w większych witrynach.
Jeżeli coś nie działa, wróć do ostatniej zapisanej wersji i zmieniaj jedną rzecz naraz. Właśnie ta cierpliwa metoda daje największy postęp, bo zamiast kopiować gotowy kod, zaczynasz rozumieć, dlaczego strona wygląda i zachowuje się w określony sposób.
