`: To deklaracja typu dokumentu. Informuje przeglądarkę, że ma do czynienia z dokumentem HTML5. Zawsze umieszczaj ją na samym początku pliku.
Minimalny szablon HTML5
Oto minimalny szablon HTML5, który możesz wkleić do swojego pliku `index.html`. To będzie Twoja baza do dalszych eksperymentów:
Kluczowe metadane: `charset` i `title`
W sekcji `` zwróć szczególną uwagę na dwa znaczniki. `` jest absolutnie kluczowy, zwłaszcza dla stron polskojęzycznych. Określa on kodowanie znaków, co gwarantuje, że polskie znaki diakrytyczne (ą, ę, ć, ł, ń, ó, ś, ź, ż) będą wyświetlane poprawnie, a nie jako "krzaczki". Z kolei znacznik `
Zapisywanie i otwieranie pliku HTML
Krok po kroku: Jak prawidłowo zapisać `index.html`
Prawidłowe zapisanie pliku to jeden z najważniejszych kroków, który często sprawia początkującym najwięcej problemów. Postępuj zgodnie z poniższymi instrukcjami, aby uniknąć błędów:
- W otwartym pliku Notatnika (z wklejonym szablonem HTML) wybierz "Plik" -> "Zapisz jako...".
- W oknie "Zapisz jako" przejdź do folderu projektu, który utworzyłeś wcześniej (np. "MojaPierwszaStrona").
- W polu "Nazwa pliku" wpisz dokładnie `index.html`.
- W polu "Typ pliku" (zazwyczaj znajduje się pod polem "Nazwa pliku") wybierz "Wszystkie pliki (*.*)". To jest kluczowe, aby Notatnik nie dodał domyślnego rozszerzenia `.txt`.
- W polu "Kodowanie" wybierz "UTF-8". To zapewni poprawne wyświetlanie polskich znaków.
- Kliknij przycisk "Zapisz".
Unikanie typowych błędów przy zapisie
Najczęstszym błędem jest zapisanie pliku jako `index.html.txt`. Dzieje się tak, gdy nie zmienisz "Typu pliku" na "Wszystkie pliki (*.*)". Taki plik nie zostanie rozpoznany jako strona internetowa. Innym problemem jest pominięcie kodowania UTF-8, co skutkuje "krzaczkami" zamiast polskich liter. Zawsze upewnij się, że plik ma rozszerzenie `.html` i jest zapisany z kodowaniem UTF-8.
Otwieranie strony w przeglądarce
Po prawidłowym zapisaniu pliku `index.html`, możesz go otworzyć w przeglądarce internetowej. Przejdź do folderu "MojaPierwszaStrona", znajdź plik `index.html` i po prostu kliknij go dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce (Chrome, Firefox, Edge itp.). Na razie zobaczysz pustą stronę z tytułem, który ustawiłeś w znaczniku `
Dodawanie treści do strony
Nagłówki i akapity
Teraz, gdy masz już podstawową strukturę, możesz zacząć dodawać treść do sekcji ``. Nagłówki służą do hierarchizacji treści, podobnie jak w książkach. Mamy ich sześć poziomów, od ` ``
(najważniejszy, największy) do ``
(najmniej ważny, najmniejszy). Akapity tworzysz za pomocą znacznika `
Witaj na mojej stronie!
To jest mój pierwszy akapit na nowo stworzonej stronie HTML. Uczę się kodować w Notatniku!
O mnie
Nazywam się Emil Borowski i jestem pasjonatem tworzenia stron internetowych.
Obrazki
Dodawanie obrazków jest proste. Najpierw umieść plik obrazka (np. `moj-obrazek.jpg`) w tym samym folderze co `index.html`. Następnie użyj znacznika ``. Jest to znacznik samozamykający się, co oznacza, że nie ma znacznika zamykającego ``. Kluczowe atrybuty to `src` (ścieżka do pliku obrazka) i `alt` (tekst alternatywny, ważny dla dostępności i SEO). Możesz również dodać atrybuty `width` i `height`, aby przeglądarka mogła zarezerwować miejsce na obrazek, co zapobiega przesuwaniu się layoutu (CLS). Przykład:
To jest obrazek, który właśnie dodałem do mojej strony.
Linki
Linki tworzymy za pomocą znacznika `` (anchor) i atrybutu `href`, który określa adres URL, do którego link prowadzi. Możesz tworzyć linki zewnętrzne (do innych stron w internecie) lub wewnętrzne (do innych stron w Twoim projekcie). Przykład:
Odwiedź Google, aby dowiedzieć się więcej.
Przeczytaj także stronę o nas (jeśli ją stworzysz).
Listy uporządkowane i nieuporządkowane
HTML pozwala na tworzenie dwóch typów list: uporządkowanych (numerowanych) i nieuporządkowanych (punktowanych). Listy uporządkowane tworzy się za pomocą znacznika ``
(ordered list), a nieuporządkowane za pomocą ``
(unordered list). Każdy element listy umieszcza się w znaczniku `
Moje ulubione języki programowania:
Kroki do stworzenia strony:
Wprowadzenie do stylizacji CSS
Oddzielenie struktury od prezentacji
Jedną z najważniejszych zasad w webmasteringu jest oddzielenie struktury strony (HTML) od jej wyglądu (CSS). Dzięki temu kod jest bardziej czytelny, łatwiejszy w utrzymaniu i modyfikacji. Aby połączyć nasz plik `style.css` z `index.html`, musimy dodać specjalny znacznik w sekcji `` w pliku HTML. Upewnij się, że plik `style.css` znajduje się w tym samym folderze co `index.html`.
Ten znacznik `` informuje przeglądarkę, że ma załadować zewnętrzny arkusz stylów o nazwie `style.css`.
Podstawowe style CSS w `style.css`
Teraz otwórz plik `style.css` w Notatniku. Możesz dodać proste reguły, które zmienią wygląd całej strony. Na przykład, aby zmienić kolor tła i krój czcionki dla całej strony, możesz użyć następującego kodu CSS:
body {
background-color: #f0f0f0; /* Jasnoszare tło */
font-family: Arial, sans-serif; /* Krój czcionki */
margin: 20px; /* Marginesy wokół treści */
}
Pamiętaj, aby zapisać plik `style.css` po każdej zmianie (Plik -> Zapisz). Odśwież stronę w przeglądarce, aby zobaczyć efekty.
Stylizowanie konkretnych elementów
Możesz również stylizować konkretne elementy, używając selektorów tagów. Na przykład, aby zmienić kolor nagłówka ` ``
i akapitów `
h1 {
color: #333333; /* Ciemnoszary kolor tekstu */
text-align: center; /* Wyśrodkowanie tekstu */
}
p {
color: #555555; /* Nieco jaśniejszy szary */
line-height: 1.6; /* Wysokość linii dla lepszej czytelności */
}
Zapisz `style.css` i odśwież stronę. Zobaczysz, jak Twoja strona zaczyna nabierać charakteru!
Dalsze kroki w nauce webmasteringu
Gdzie szukać dalszej wiedzy?
Gratuluję! Właśnie stworzyłeś swoją pierwszą stronę internetową w Notatniku. To dopiero początek ekscytującej podróży. Aby kontynuować naukę i rozwijać swoje umiejętności, polecam następujące zasoby:
- MDN Web Docs (Mozilla Developer Network): To kompleksowe i wiarygodne źródło dokumentacji HTML, CSS i JavaScript.
- W3Schools: Oferuje interaktywne samouczki i przykłady, idealne dla początkujących.
- Kursy online: Platformy takie jak Udemy, Coursera czy bezpłatne kursy na YouTube oferują strukturyzowane ścieżki nauki.
- Fora i społeczności programistyczne: Stack Overflow, grupy na Facebooku czy Discordzie to świetne miejsca do zadawania pytań i rozwiązywania problemów.
Przeczytaj również: HTML: Co to jest, jak działa i dlaczego to podstawa internetu?
Kiedy przesiąść się na zaawansowany edytor kodu?
Notatnik jest fantastyczny do nauki podstaw, ale w pewnym momencie poczujesz potrzebę przesiadki na bardziej zaawansowane narzędzie. Edytory kodu takie jak VS Code, Sublime Text czy Notepad++ oferują szereg udogodnień, które znacznie przyspieszają pracę. Mówię tu o kolorowaniu składni, automatycznych podpowiedziach, wtyczkach rozszerzających funkcjonalność, automatycznym zamykaniu tagów czy wbudowanych terminalach. Kiedy zaczniesz czuć, że Notatnik Cię ogranicza, to znak, że nadszedł czas na kolejny etap rozwoju Twoich narzędzi.
