Tworzenie stron www – HTML w praktyce (Notepad ++)

Poziom: podstawowy
Zakres: HTML, hiperłącza, obrazy, tabele, kolory, Notepad++

1. Jak działa strona internetowa – przypomnienie podstaw

Co się dzieje, gdy otwieramy stronę WWW?

1. Użytkownik wpisuje adres strony w przeglądarce.
2. Przeglądarka wysyła zapytanie do serwera.
3. Serwer wysyła plik HTML.
4. Przeglądarka:
   • odczytuje kod HTML,
   • interpretuje znaczniki,
   • wyświetla stronę.

👉 Bardzo ważne:
Przeglądarka nie pokazuje kodu, tylko efekt działania kodu.

2. Czym jest HTML i jak wygląda plik HTML

HTML – co to właściwie jest?

HTML to język znaczników, a nie język programowania.

Znacznik:

• mówi przeglądarce, jaką rolę ma dany fragment tekstu,
• np. „to jest nagłówek”, „to jest akapit”, „to jest obraz”.

Plik HTML

• jest zwykłym plikiem tekstowym
• ma rozszerzenie .html lub .htm
• można go otworzyć:
  • w edytorze tekstu (kod),
  • w przeglądarce (efekt)

3. Podstawowa struktura pliku HTML (szkielet)

Każda strona HTML ma tę samą logikę:

• informację o typie dokumentu,
• część opisową (niewidoczną),
• część widoczną dla użytkownika.

Co jest gdzie?

• nagłówek strony <head> – informacje techniczne
  Co tam się znajduje?
  -tytuł strony (ten na karcie przeglądarki),
  -kodowanie znaków (np. polskie litery),
  -inne informacje „dla przeglądarki”, a nie dla człowieka.
• ciało strony <body>
  Co tam trafia?
  -tekst,
  -nagłówki,
  -obrazy,
  -tabele,
  -listy,
  -linki.

4. Notepad++ – podstawowe narzędzie do pracy z HTML

Co to jest Notepad++?

Notepad++ to:

• darmowy edytor tekstu,
• przeznaczony m.in. do HTML,
• wyświetla kod kolorami, co bardzo pomaga.

Notepad++ obsługuje bardzo wiele języków, m.in.:

🌐 Strony internetowe

• HTML – struktura strony
• CSS – wygląd strony
• JavaScript – interakcje

💻 Języki programowania

• C, C++
• Python
• Java
• PHP
• Pascal
• SQL

Notepad++:

• nie uruchamia programów,
• ale pozwala pisać ich kod.

📄 Pliki tekstowe i konfiguracyjne

• .txt
• .ini
• .cfg
• .json
• .xml

Używane np. do:

• ustawień programów,
• zapisu danych,
• prostych baz informacji.

5. Notepad++ – instrukcja krok po kroku (WAŻNE)

Link do pobrania programu: https://notepad-plus-plus.org/downloads/v8.9.1/
⚠️ Uwaga:
Nie pobieramy Notepad++ z losowych stron typu „download”, „softy”, „chomikuj” itp.
Tylko strona oficjalna gwarantuje bezpieczeństwo.

5.1. Tworzenie pliku HTML

1. Uruchom Notepad++
2. Kliknij Plik → Nowy
3. Wpisz kod strony
4. Kliknij Plik → Zapisz jako
5. Wpisz nazwę: index.html
6. Typ pliku: Wszystkie typy
7. Kodowanie: UTF-8

👉 Dlaczego UTF-8?
Żeby poprawnie wyświetlały się polskie znaki.

5.2. Ustawienie języka HTML

• Menu Składnia → H → HTML

Dzięki temu:

• znaczniki są kolorowe,
• łatwiej znaleźć błędy.

5.3. Otwieranie strony w przeglądarce

• Kliknij prawym przyciskiem na plik index.html
• Wybierz przeglądarkę
• Po każdej zmianie:
  • zapisz plik,
  • odśwież stronę (F5)

6. Akapity, nagłówki i linie poziome

Akapit <p></p>

• oddziela tekst,
• powoduje odstęp między fragmentami.

Nagłówki od <h1> do <h6>

• służą do tytułów,
• mają różne poziomy ważności (od największego h1 do najmniejszego h6).

Linia pozioma <hr>

• wizualnie oddziela części strony,
• często używana między sekcjami.

7. Listy – porządkowanie informacji

Rodzaje list:

1. Lista wypunktowana – bez numerów <ul></ul>
2. Lista numerowana – z numerami <ol></ol>

Listy:

• porządkują treść,
• są bardzo czytelne,
• można je zagnieżdżać (lista w liście).

8. Hiperłącza – serce Internetu

Co to jest hiperłącze?

Hiperłącze to:

• tekst lub obraz,
• po kliknięciu przenosi do:
  • innej strony,
  • pliku,
  • podstrony,
  • miejsca na stronie.

Do czego służą hiperłącza?

• nawigacja,
• łączenie stron,
• powrót do strony głównej.

9. Kotwice – przechodzenie do miejsca na stronie

Kotwice pozwalają:

• przejść do konkretnego fragmentu,
• tworzyć spisy treści.

Stosowane są na długich stronach.

Pełny przykład kotwicy (najprostrzy):

10. Podstrony – rozbudowa serwisu

Co to są podstrony?

Podstrony to:

• osobne pliki HTML,
• połączone linkami ze stroną główną.

Zasada:

• strona główna → link do podstrony,
• podstrona → link powrotny.

11. Wstawianie obrazów

Obrazy na stronie:

• uatrakcyjniają treść,
• pomagają zrozumieć temat.

Formaty obrazów:

• JPG
• PNG
• GIF

Obraz:

• musi być w odpowiednim folderze, najlepiej tam gdzie pliki html strony
• powinien mieć opis alternatywny (gdy się nie wyświetli).

Analiza znacznika <img>

<img src="foto.jpg" alt="Zdjęcie">

Ten znacznik służy do wstawiania obrazu na stronę internetową.

Co oznaczają poszczególne elementy?

🔹 <img>

• Jest to znacznik obrazu.
• Informuje przeglądarkę:
  👉 „w tym miejscu wstaw obraz”.
• Nie ma znacznika zamykającego.

🔹 src="foto.jpg"

• src to skrót od source (źródło).
• Określa skąd ma zostać pobrany obraz.
• W tym przypadku:
  • obraz nazywa się foto.jpg,
  • znajduje się w tym samym folderze co plik HTML.

👉 Jeśli obraz jest w innym folderze, trzeba podać ścieżkę, np.
src="obrazy/foto.jpg"

🔹 alt="Zdjęcie"

• alt to tekst alternatywny.
• Wyświetla się:
  • gdy obraz się nie załaduje,
  • gdy korzysta z czytnika ekranu (np. osoby niewidome).
• Opisuje, co znajduje się na obrazie.

👉 alt jest obowiązkowy i bardzo ważny.

Jak ustawić rozmiar obrazu?

Rozmiar obrazu ustawia się za pomocą atrybutów width i height.

📌 Przykład – ustawienie szerokości

<img src="foto.jpg" alt="Zdjęcie" width="300">

• width="300" oznacza:
  • szerokość obrazu = 300 pikseli
• wysokość dopasuje się automatycznie (bez zniekształceń).

📌 Przykład – szerokość i wysokość

<img src="foto.jpg" alt="Zdjęcie" width="300" height="200">

• obraz ma:
  • szerokość 300 px
  • wysokość 200 px

12. Tabele – dane w wierszach i kolumnach

Do czego służą tabele?

• prezentacja danych liczbowych,
• porównania,
• statystyki.

Tabela składa się z:

• wierszy,
• komórek.

Możemy:

• ustawić szerokość,
• dodać obramowanie,
• łączyć komórki.

Podstawowy znacznik tabeli

🔹 <table>

<table>
    ...
</table>

Co robi?

• Tworzy całą tabelę.
• Jest „ramą”, w której znajdują się wszystkie pozostałe elementy tabeli.

👉 Bez znacznika <table> tabela nie istnieje.

Z czego składa się tabela?

1️⃣ Wiersze tabeli

🔹 <tr> – wiersz tabeli

<tr>
    ...
</tr>

Co robi?

• Tworzy jeden poziomy wiersz w tabeli.
• W każdym wierszu znajdują się komórki.

👉 Liczba <tr> = liczba wierszy w tabeli.

2️⃣ Komórki tabeli

🔹 <td> – zwykła komórka

<td>Dane</td>

Co robi?

• Tworzy jedną komórkę w tabeli.
• Zawiera dane, np. tekst lub liczby.

👉 <td> używamy w wierszach z danymi.

🔹 <th> – komórka nagłówka

<th>Nagłówek</th>

Co robi?

• Tworzy komórkę nagłówkową.
• Tekst jest zazwyczaj:
  • pogrubiony,
  • wyśrodkowany.

👉 <th> najczęściej znajduje się w pierwszym wierszu tabeli.

Przykład prostej tabeli

<table border="1">
    <tr>
        <th>Imię</th>
        <th>Klasa</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>1A</td>
    </tr>
</table>

Co jeszcze możemy zrobić z tabelą?

1️⃣ Dodać obramowanie

🔹 border

<table border="1">

Co robi?

• Dodaje ramkę wokół tabeli i komórek.
• Ułatwia naukę i sprawdzanie struktury tabeli.

2️⃣ Ustawić szerokość tabeli

🔹 width

<table width="400">

Co robi?

• Ustala szerokość tabeli w pikselach.
• Można też użyć procentów, np. width="100%".

3️⃣ Łączyć komórki

🔹 colspan – łączenie kolumn

<td colspan="2">Połączone kolumny</td>

Co robi?

• Jedna komórka zajmuje kilka kolumn.

🔹 rowspan – łączenie wierszy

<td rowspan="2">Połączone wiersze</td>

Co robi?

• Jedna komórka zajmuje kilka wierszy.

Podsumowanie – co uczeń powinien zapamiętać

Zadanie – tworzenie tabeli w HTML

Utwórz prostą stronę internetową w języku HTML, na której znajdzie się tabela spełniająca następujące warunki:

1. Tabela ma mieć 2 kolumny i 3 wiersze z danymi.
2. W pierwszym wierszu tabeli umieść nagłówki kolumn:
   • Przedmiot
   • Ocena
3. Tabela ma mieć widoczne obramowanie.
4. W jednym z wierszy połącz dwie kolumny w jedną komórkę.
5. Nad tabelą umieść nagłówek strony z tytułem:
   „Moje oceny”

13. Kolory na stronie WWW

Jak określa się kolory?

Kolory w HTML ustawia się:

• bezpośrednio w znacznikach HTML,
• albo za pomocą CSS.

1. Nazwami (np. red, blue)
2. W systemie RGB
3. W zapisie szesnastkowym

Kolory można stosować do:

• tekstu,
• tła,
• obramowań.

1️⃣ Kolory określane NAZWAMI (najprostszy sposób)

HTML rozpoznaje nazwy kolorów w języku angielskim.

Przykłady nazw:

• red – czerwony
• blue – niebieski
• green – zielony
• black – czarny
• white – biały
• yellow – żółty

Przykład – kolor tekstu

<p style="color: red;">To jest czerwony tekst</p>

Co tu się dzieje?

• style – pozwala ustawić styl
• color – kolor tekstu
• red – nazwa koloru

👉 Najprostszy i najczęściej używany sposób na początku.

2️⃣ Kolory w zapisie SZESNASTKOWYM (HEX)

To najczęściej używany sposób w praktyce.

Jak wygląda zapis?

#RRGGBB

• RR – ilość czerwieni
• GG – ilość zieleni
• BB – ilość niebieskiego

Każda wartość jest zapisana od 00 do FF.

Przykłady:

• #000000 – czarny
• #FFFFFF – biały
• #FF0000 – czerwony
• #00FF00 – zielony
• #0000FF – niebieski

Przykład – kolor tła

<body style="background-color: #eeeeee;">

3️⃣ Kolory w modelu RGB

Kolor określa się przez ilość trzech barw:

• czerwonej,
• zielonej,
• niebieskiej.

Zakres:

• od 0 do 255

Przykład:

<p style="color: rgb(0, 0, 255);">Niebieski tekst</p>

👉 rgb(0,0,0) – czarny
👉 rgb(255,255,255) – biały

4️⃣ Gdzie w HTML ustawia się kolory?

Kolory ustawia się najczęściej przez atrybut style w znacznikach HTML.

Najczęściej używane właściwości:

Przykłady w znacznikach HTML

🔹 Tekst (<p>)

<p style="color: green;">Zielony tekst</p>

🔹 Nagłówek (<h1>)

<h1 style="color: blue;">Niebieski nagłówek</h1>

🔹 Tło strony (<body>)

<body style="background-color: yellow;">

🔹 Tabela (<table>)

<table style="background-color: #dddddd;">

5️⃣ Kolory w tabelach

Przykład – kolor nagłówka tabeli

<th style="background-color: lightgray;">
    Nagłówek
</th>

14. Ćwiczenia praktyczne (poziom podstawowy)

Najważniejsze znaczniki HTML – tabela

Ćwiczenie 1 – pierwsza strona

Utwórz stronę:

• z tytułem,
• jednym akapitem,
• listą wypunktowaną,
• linią poziomą.

Ćwiczenie 2 – podstrona

• Utwórz podstronę
• Dodaj link ze strony głównej
• Dodaj link powrotny

Ćwiczenie 3 – obrazy

• Dodaj jeden obraz
• Ustaw jego rozmiar
• Sprawdź efekt w przeglądarce

Ćwiczenie 4 – tabela

• Utwórz prostą tabelę 2×3
• Dodaj nagłówki
• Ustaw obramowanie

15. Podsumowanie

• HTML to język znaczników
• Strona WWW to plik HTML
• Notepad++ to narzędzie do pisania kodu
• Internet działa dzięki hiperłączom
• Porządek w plikach jest kluczowy
• Każdą zmianę trzeba zapisać i odświeżyć

16. Zadania praktyczne

Ćwiczenie 1. Utworzenie krótkiej podstrony „Moje hobby”

Polecenie

Utwórz prostą podstronę internetową w HTML. Plik zapisz jako:
moje_hobby.html

Wymagania obowiązkowe

1. Poprawna struktura dokumentu: <html>, <head>, <title>, <body>.
2. Tytuł strony w zakładce przeglądarki: „Moje hobby”.
3. Nagłówek główny <h1> – nazwa hobby.
4. Jeden akapit <p> (2–4 zdania opisu).
5. Lista punktowana <ul> z min. 3 elementami <li>.
6. Pozioma linia <hr> oddzielająca sekcje.
7. Hiperłącze <a> do strony związanej z hobby.
8. Jedno użycie znacznika <br>.

Kryteria oceniania (10 pkt)

• Struktura dokumentu – 2 pkt
• Nagłówek i tytuł – 2 pkt
• Akapit – 2 pkt
• Lista – 2 pkt
• Link + <hr> + <br> – 2 pkt

Instrukcja wykonania

1. Otwórz edytor tekstu.
2. Utwórz plik HTML z odpowiednią strukturą.
3. Zapisz plik z rozszerzeniem .html (kodowanie UTF-8).
4. Otwórz plik w przeglądarce.
5. Sprawdź, czy wszystkie elementy wyświetlają się poprawnie.

Przykładowe rozwiązanie:

Ćwiczenie 2. Utworzenie krótkiej podstrony „Moje miasto”

Polecenie

Utwórz prostą podstronę internetową w HTML. Plik zapisz jako:
moje_miasto.html

Wymagania obowiązkowe

1. Poprawna struktura dokumentu HTML (<html>, <head>, <title>, <body>).
2. Tytuł strony: „Moje miasto”.
3. Nagłówek <h1> – nazwa miasta.
4. Dwa nagłówki niższego poziomu (np. <h2> lub <h3>) – np. „Zabytki”, „Ciekawe miejsca”.
5. Jeden akapit <p> opisujący miasto (2–4 zdania).
6. Lista numerowana <ol> z min. 3 elementami <li> (np. atrakcje turystyczne).
7. Jedno hiperłącze <a> do oficjalnej strony miasta lub Wikipedii.
8. Ustawienie kursywy przy nagłówku pierwszego stopnia <h1>.

Kryteria oceniania (10 pkt)

• Struktura dokumentu – 2 pkt
• Nagłówki – 2 pkt
• Akapit – 2 pkt
• Lista numerowana – 2 pkt
• Link + kursywa – 2 pkt

Instrukcja wykonania

1. Otwórz edytor tekstu.
2. Utwórz plik HTML z odpowiednią strukturą.
3. Zapisz plik z rozszerzeniem .html (kodowanie UTF-8).
4. Otwórz plik w przeglądarce.
5. Sprawdź, czy wszystkie elementy wyświetlają się poprawnie.