Strona HTML: jak ją zrobić krok po kroku w Notatniku (z gotowym kodem)

Czym jest strona HTML i z czego się składa?

Strona HTML to dokument tekstowy zapisany w języku HTML (HyperText Markup Language), który przeglądarka zamienia na widoczną stronę internetową. Kod opisuje strukturę treści: gdzie jest nagłówek, akapit, lista, obraz czy link. Wygląd, czyli kolory, czcionki i układ, dodaje się osobno, najczęściej w języku CSS.

Do utworzenia takiego pliku nie potrzebujesz żadnego specjalnego programu, tylko edytora tekstu i przeglądarki. Plik zapisujesz z rozszerzeniem .html, a Chrome, Firefox, Edge czy Safari odczytują go lokalnie, bez internetu i bez serwera. Dlatego HTML to najprostszy sposób, żeby zrozumieć, jak zbudowana jest każda strona www.

Zasady języka opisuje standard HTML Living Standard, a przystępne wprowadzenie dla początkujących znajdziesz w dokumentacji MDN Web Docs. Przy tworzeniu strony spotkasz trzy technologie, które mają różne zadania.

Jaka jest struktura dokumentu HTML?

Każdy dokument HTML ma stały szkielet. Zaczyna się od deklaracji DOCTYPE, która informuje przeglądarkę, że plik jest w standardzie HTML5. Cały kod mieści się w elemencie html, a ten dzieli się na dwie części: head z informacjami technicznymi i body z treścią widoczną na stronie.

• <!DOCTYPE html>: deklaracja typu dokumentu, zawsze w pierwszej linii pliku.
• <html lang="pl">: element główny, atrybut lang wskazuje język strony.
• <head>: tytuł strony, kodowanie znaków, opis i inne dane dla przeglądarki oraz wyszukiwarek. Ta część nie jest wyświetlana w oknie strony.
• <body>: wszystko, co widzi użytkownik, czyli nagłówki, akapity, obrazy i linki.

Najczęstsze elementy w body to nagłówki od h1 do h6, akapity p, listy ul i ol, linki a oraz obrazy img. Na stronie powinien być jeden nagłówek h1, a pod nim logicznie ułożone h2 i h3, bo taka hierarchia ułatwia czytanie i porządkuje treść.

Jak zrobić stronę HTML w Notatniku krok po kroku?

Prostą stronę internetową zrobisz w Notatniku w pięciu krokach i zajmie to kilka minut. Niczego nie instalujesz. Na komputerze z macOS użyj programu TextEdit w trybie zwykłego tekstu (menu Format, Utwórz zwykły tekst), bo domyślnie zapisuje on tekst sformatowany, który nie zadziała jako HTML.

Jeśli po otwarciu pliku widzisz kod zamiast strony, najpewniej zapisał się on jako index.html.txt. Włącz w Eksploratorze plików widok rozszerzeń nazw plików i popraw nazwę tak, żeby kończyła się na .html.

Prosta strona HTML: gotowy kod do skopiowania

Poniższy szablon to kompletna, prosta strona wizytówka, którą możesz skopiować, zapisać jako index.html i dostosować do siebie. Zawiera wszystkie elementy z poprzednich sekcji. Zamień treści przykładowe na własne, a plik zdjecie.jpg umieść w tym samym folderze co index.html.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pracownia Stolarska Kowalski, meble na wymiar</title>
  <meta name="description" content="Meble na wymiar i naprawy mebli. Zobacz ofertę i skontaktuj się z pracownią.">
</head>
<body>
  <header>
    <h1>Pracownia Stolarska Kowalski</h1>
    <p>Meble na wymiar wykonane ręcznie, z naturalnego drewna.</p>
  </header>

  <main>
    <section>
      <h2>Oferta</h2>
      <ul>
        <li>Meble kuchenne i szafy na wymiar</li>
        <li>Stoły, krzesła i regały</li>
        <li>Renowacja i naprawa mebli</li>
      </ul>
      <img src="zdjecie.jpg" alt="Drewniany stół wykonany w pracowni" width="600">
    </section>

    <section>
      <h2>Kontakt</h2>
      <p>Napisz do nas: <a href="mailto:kontakt@example.com">kontakt@example.com</a></p>
    </section>
  </main>

  <footer>
    <p>Pracownia Stolarska Kowalski</p>
  </footer>
</body>
</html>

Taka strona działa, ale wygląda bardzo surowo, bo przeglądarka stosuje domyślne style. Wygląd poprawisz stylami CSS, które na początek możesz wpisać w elemencie style w sekcji head. Poniższy fragment dodaj tuż przed zamknięciem znacznika </head>.

<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    color: #222;
  }
  h1, h2 {
    color: #c2570a;
  }
  img {
    max-width: 100%;
    height: auto;
  }
</style>

Gdy strona rośnie, style przenosi się do osobnego pliku .css i podłącza elementem link w sekcji head. Wtedy kilka podstron może korzystać z tego samego wyglądu, a zmiana koloru w jednym miejscu działa na całej witrynie.

Jak opublikować stronę HTML w internecie?

Plik zapisany na komputerze widzisz tylko Ty. Żeby strona była dostępna dla innych, musisz umieścić ją na serwerze, czyli wykupić hosting, i skierować na niego adres domeny. Hosting przechowuje pliki, a domena to adres, pod którym użytkownicy je znajdą.

Pliki wgrywasz przez panel hostingu albo program FTP. Nazwa index.html ma znaczenie, bo serwer domyślnie wyświetla ten plik jako stronę główną. Przy małych projektach możesz skorzystać z darmowego hostingu stron statycznych, na przykład GitHub Pages. Darmowe rozwiązania mają zwykle ograniczenia, o których piszemy w artykule o tym, czy darmowa strona internetowa to dobry pomysł.

Taka prosta strona w zupełności wystarczy, jeśli potrzebujesz cyfrowej wizytówki z ofertą i kontaktem. Więcej o tym, komu opłaca się strona wizytówka, przeczytasz w osobnym poradniku.

Po publikacji strona nie pojawi się w wynikach wyszukiwania od razu. Jeśli mimo upływu czasu jej nie ma, sprawdź, czy nie blokuje jej plik robots.txt albo znacznik noindex. Szczegółowo opisujemy to w poradniku, co zrobić, gdy Google nie widzi mojej strony.

Kiedy sam HTML przestaje wystarczać?

Ręcznie pisany HTML dobrze sprawdza się przy jednej, rzadko zmienianej stronie. Problem zaczyna się, gdy treści ma edytować kilka osób, podstron jest kilkanaście, a firma potrzebuje formularzy, bloga, sklepu albo analityki. Wtedy każda zmiana oznacza ręczną edycję kodu.

Nauka HTML to dobra inwestycja niezależnie od wybranej drogi. Pozwala szybko poprawić drobiazgi na stronie i rozmawiać z wykonawcą w jednym języku.

Komentarz MaxiMedia

Strona, która ma pozyskiwać klientów, potrzebuje zwykle więcej niż pojedynczego pliku index.html: szybkiego ładowania, poprawnej struktury treści, formularzy i możliwości łatwej edycji bez wchodzenia w kod. Dlatego przy stronie firmowej bezpieczniej oprzeć ją na CMS, a HTML i CSS traktować jako umiejętność, która pozwala ją świadomie rozwijać.

Jeśli strona ma pracować na wyniki firmy, a nie tylko istnieć, rozważ profesjonalną stronę internetową wykonaną na CMS, z responsywnym układem i przygotowaną pod SEO.

FAQ: strona HTML