Aby zrobić własną stronę internetową w Notatniku, wystarczy komputer, podstawowa znajomość HTML i postępowanie według kilku prostych kroków. Poniżej znajdziesz szczegółowy poradnik, wzbogacony o przykłady i praktyczne wskazówki – od planowania po gotową stronę w przeglądarce.
Przygotowanie środowiska pracy
- Stwórz folder na komputerze – nazwij go np. „Moja_strona”;
- W folderze utwórz dwa pliki:
- index.html – główna strona;
- style.css – plik stylów, opcjonalny, pozwala na zmianę wyglądu strony.
Uruchom Notatnik i utwórz szkielet strony
- Otwórz Notatnik – znajdziesz go w menu Start: wpisz „Notatnik”;
- Skopiuj poniższy kod – to absolutne minimum dla każdej strony HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja Pierwsza Strona www</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest moja pierwsza własnoręcznie napisana strona internetowa w Notatniku.</p>
</body>
</html>
- Zapisz plik jako „index.html”, wybierz „Wszystkie pliki”, kodowanie UTF-8.
Przeglądanie w przeglądarce
- Znajdź „index.html” na dysku i kliknij dwukrotnie – plik otworzy się w domyślnej przeglądarce internetowej;
- Jeśli chcesz zobaczyć zmiany po edycji, po prostu odśwież stronę.
Rozbudowa strony krok po kroku
Dodawanie elementów HTML
- Nagłówki –
<h1> ... </h1>,<h2> ... </h2>itd.; - Akapity –
<p> ... </p>; - Listy wypunktowane –
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
</ul>
- Listy numerowane –
<ol>
<li>Pierwszy</li>
<li>Drugi</li>
</ol>
- Obrazy –
<img src="obrazek.jpg" alt="Opis obrazka">- Linki –
<a href="https://twoja-domena.pl">Kliknij tutaj</a>Przykład rozbudowanej sekcji treści
<body>
<h1>Portfolio</h1>
<p>Cześć! Mam na imię Anna i tworzę strony www.</p>
<h2>Moje Projekty</h2>
<ul>
<li>Blog kulinarny</li>
<li>Strona dla fotografa</li>
</ul>
<img src="zdjecie.jpg" alt="Moje zdjęcie">
<a href="kontakt.html">Kontakt</a>
</body>
Dodawanie stylów CSS dla lepszego wyglądu
- Utwórz plik „style.css” w tym samym folderze;
- Dodaj przykładową zawartość:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #222;
}
h1 {
color: #0066cc;
}
ul {
list-style-type: square;
}
- Połącz plik ze stroną HTML – w sekcji
<head>dodaj:
<link rel="stylesheet" href="style.css">Tworzenie podstron
- Dodaj nowy plik HTML np. „kontakt.html” w tym samym folderze;
- Użyj podobnego szablonu jak „index.html”;
- Dodaj linki nawigacyjne, np.:
<nav>
<a href="index.html">Strona główna</a> | <a href="kontakt.html">Kontakt</a>
</nav>
Przykłady zastosowań
- Strona osobista – prezentacja umiejętności, portfolio, CV;
- Prosta strona firmowa – dane kontaktowe, podstawowa oferta;
- Blog – lista artykułów w formie statycznych podstron;
- Strona z galerią zdjęć – prezentacja projektów lub albumów.
Najczęstsze błędy i wskazówki
- Pamiętaj, aby wszystkie znaczniki HTML były poprawnie zamknięte;
- Stosuj czytelną strukturę folderów – obrazy do folderu „img”, style do „css” itd.;
- Regularnie zapisuj pliki i testuj stronę w przeglądarce;
- Jeśli strona nie wyświetla się poprawnie, sprawdź literówki w znacznikach i plikach.
Podsumowanie
Tworzenie strony internetowej w Notatniku to świetny sposób na naukę podstaw HTML i CSS. Pozwala zrozumieć, jak działa internet i jak krok po kroku powstają profesjonalne witryny. Poprzez dodawanie kolejnych elementów i eksperymentowanie ze stylami, można samodzielnie zaprojektować własną stronę i rozwinąć swoje umiejętności programistyczne.
