Aby zapisanie pliku HTML w Notatniku przebiegło poprawnie, wystarczy wykonać kilka prostych kroków. Tak przygotowany plik będzie gotowy do otwarcia w dowolnej przeglądarce internetowej. Poniżej znajdziesz szczegółowy poradnik, praktyczne przykłady oraz wskazówki, jak wykorzystać takie pliki w różnych zastosowaniach.
Krok po kroku – jak zapisać plik HTML w Notatniku
- Uruchom Notatnik
Otwórz program Notatnik na komputerze. Najłatwiej znaleźć go, wpisując „Notatnik” w menu Start. - Wpisz (lub wklej) kod HTML
Przykład podstawowego kodu HTML:
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona HTML</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest przykładowy plik HTML zapisany w Notatniku.</p>
</body>
</html>
Każdy element HTML otoczony jest nawiasami kątowymi (< i >), a większość znaczników posiada swoje wersje zamykające, np. <p> i </p>.
- Zapisz plik jako HTML
- Kliknij Plik w menu Notatnika i wybierz Zapisz jako…;
- W polu Nazwa pliku wpisz nazwę swojego pliku z rozszerzeniem .html, np.
mojastrona.html; - W polu Zapisz jako typ wybierz Wszystkie pliki;
- Ustaw Kodowanie na UTF-8, aby poprawnie wyświetlały się polskie znaki;
- Wybierz folder i kliknij Zapisz.
- Otwórz plik w przeglądarce
Przejdź do miejsca zapisu pliku, a następnie kliknij dwukrotnie na plik. Powinien on otworzyć się w domyślnej przeglądarce internetowej i pokazać przygotowaną zawartość strony.
Typowe zastosowania plików HTML zapisanych w Notatniku
- Nauka podstaw tworzenia stron internetowych – Notatnik to idealne narzędzie na start dla osób uczących się HTML, ponieważ pozwala w praktyce zrozumieć budowę i działanie kodu;
- Tworzenie własnych stron lub wizytówek online – plik HTML utworzony w Notatniku może posłużyć jako własna strona domowa, wizytówka lub portfolio, które można wysłać np. mailem lub udostępnić online;
- Testowanie fragmentów kodu – gdy chcesz szybko sprawdzić działanie jakiegoś fragmentu HTML, możesz go wpisać i zapisać jako osobny plik w Notatniku;
- Edycja i poprawa własnych projektów webowych – proste narzędzia typu Notatnik są często wykorzystywane do szybkiej edycji plików źródłowych w niewielkich projektach lub do szybkich poprawek;
- Przygotowywanie szablonów e-maili w HTML – wielu pracowników działów marketingu czy komunikacji przygotowuje w Notatniku szablony e-maili promocyjnych zapisane jako HTML.
Problemy najczęściej popełniane przez początkujących
- Zapisywanie z niewłaściwym rozszerzeniem – plik nazwany „mojastrona.html.txt” nie zostanie rozpoznany przez przeglądarkę jako strona internetowa;
- Niewybranie „Wszystkie pliki” przy zapisie – domyślna opcja „Dokument tekstowy (*.txt)” powoduje, że Notatnik dodaje rozszerzenie .txt do nazwy, nawet jeśli ręcznie wpiszesz „.html”;
- Brak ustawienia kodowania na UTF-8 – może prowadzić do błędnego wyświetlania polskich liter.
Przykład – twój pierwszy plik HTML w Notatniku
- Skopiuj poniższy kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wizytówka</title>
</head>
<body>
<h1>Jan Kowalski</h1>
<p>Web developer, pasjonat nowych technologii.</p>
<a href="mailto:[email protected]">Wyślij e-mail</a>
</body>
</html>
- Wklej go do okna Notatnika.
- Zapisz jako „wizytowka.html”, wybierając „Wszystkie pliki” i kodowanie UTF-8.
- Otwórz w przeglądarce, aby zobaczyć swoją nową stronę-wizytówkę.
Zapisywanie plików HTML w Notatniku to najprostszy sposób na poznanie świata tworzenia stron WWW. Dzięki tej metodzie, każdy może stworzyć swoją pierwszą stronę internetową używając wyłącznie podstawowych narzędzi dostępnych w systemie Windows.
