Cześć! Wiem, że czasem zadania z informatyki mogą wydawać się skomplikowane, ale stworzenie prostej strony internetowej w HTML na zaliczenie jest naprawdę w zasięgu ręki. Pomyśl o tym jak o budowaniu z klocków zaczynasz od podstaw, a potem krok po kroku dodajesz kolejne elementy, aż powstanie coś fajnego. Twój nauczyciel pewnie chce zobaczyć, czy rozumiesz, jak działają strony internetowe, a nie czy potrafisz od razu stworzyć kolejnego Facebooka. Dlatego właśnie skupimy się na absolutnych podstawach, które wystarczą, by zrobić dobre wrażenie i zdobyć wysoką ocenę.

Zanim zaczniesz: Co musisz przygotować, by stworzyć stronę na informatykę?

Zanim zaczniemy budować Twoją pierwszą stronę, upewnijmy się, że masz wszystko, co potrzebne. Dobra wiadomość jest taka, że nie potrzebujesz do tego żadnych specjalistycznych, drogich programów. Wystarczy Ci zwykły Notatnik, który znajdziesz w każdym komputerze z systemem Windows. Jeśli używasz innego systemu, poszukaj podobnego, prostego edytora tekstu. Drugim niezbędnym narzędziem jest przeglądarka internetowa Chrome, Firefox, Edge, Safari, cokolwiek masz zainstalowane. To właśnie w przeglądarce będziesz podglądać, jak wygląda Twoja strona. Zazwyczaj na informatyce nauczyciele proszą o stworzenie strony na jakiś konkretny temat może to być Twoje hobby, ulubiony sport, opis miasta, w którym mieszkasz, albo po prostu coś, co Cię interesuje. Chodzi o to, żebyś pokazał, że potrafisz ułożyć informacje w logiczną całość i przedstawić je w internecie. HTML, czyli HyperText Markup Language, to język, którym „piszemy” te strony. Nie jest to język programowania w ścisłym tego słowa znaczeniu, a raczej język znaczników, który opisuje strukturę i zawartość strony. Jest bardzo intuicyjny, zobaczysz!

Krok 1: Tworzymy fundament, czyli szkielet Twojej pierwszej strony HTML

Zaczynamy od najważniejszego pliku strony głównej, która zwykle nazywa się `index.html`. Po pierwsze, stwórz na pulpicie lub w Dokumentach nowy folder dla swojego projektu. Nazwij go jakoś sensownie, na przykład „Moja_strona_projekt”. Następnie otwórz Notatnik. Teraz skopiuj poniższy kod i wklej go do Notatnika:

Ten kod to absolutna podstawa każdej strony HTML. Omówmy go krótko:

• </code>: Ta linia informuje przeglądarkę, że mamy do czynienia z dokumentem HTML5, czyli najnowszą wersją języka.
• i : To znaczniki, które obejmują całą zawartość strony. Wszystko, co znajduje się na Twojej stronie, musi być między nimi.
• i : Sekcja nagłówka. Znajdują się tu informacje o stronie, które nie są bezpośrednio widoczne dla użytkownika, ale są ważne dla przeglądarki i wyszukiwarek.
• : To bardzo ważna linia! Dzięki niej polskie znaki, takie jak ą, ę, ć, ł, ó, ś, ź, ż, będą wyświetlać się poprawnie. Bez tego mogą pojawić się „krzaczki”.
• : Tekst umieszczony tutaj pojawi się na karcie przeglądarki, gdy otworzysz swoją stronę. Zmień „Tytuł Twojej strony” na coś bardziej pasującego do tematu Twojego projektu.
• i : Sekcja ciała. Tutaj umieścisz całą treść, którą zobaczą użytkownicy tekst, obrazki, linki itp.

Teraz najważniejsze: zapisz ten plik. Kliknij w Notatniku „Plik” -> „Zapisz jako...”. W oknie zapisu, w polu „Nazwa pliku”, wpisz index.html. Bardzo ważne: w polu „Zapisz jako typ” wybierz „Wszystkie pliki (*.*)”. Upewnij się, że zapisujesz plik w folderze, który wcześniej utworzyłeś („Moja_strona_projekt”). Po zapisaniu możesz zamknąć Notatnik.

Aby zobaczyć efekt, znajdź swój folder „Moja_strona_projekt”, a w nim plik `index.html`. Kliknij go dwukrotnie. Powinien otworzyć się w Twojej domyślnej przeglądarce internetowej. Na razie zobaczysz pustą stronę z tytułem, który wpisałeś na karcie przeglądarki. Ale to już jest Twoja pierwsza strona internetowa!

Krok 2: Czas na treść! Najważniejsze znaczniki HTML, które musisz znać

Teraz dodamy do naszej strony coś więcej niż tylko pustą przestrzeń. Otwórz ponownie plik `index.html` w Notatniku. Pamiętaj, że wszystkie znaczniki, które dodasz, muszą znaleźć się wewnątrz sekcji i .

Nagłówki

Nagłówki służą do tworzenia tytułów i podtytułów na stronie. HTML ma sześć poziomów nagłówków, od

Dodajmy przykładowy nagłówek pierwszego stopnia:

 
Witaj na mojej stronie o kotach!

Akapity

Zwykły tekst umieszczamy w znacznikach akapitu

Dodajmy jakiś tekst:

 
Witaj na mojej stronie o kotach!
 
Koty to wspaniałe zwierzęta. Są niezależne, ale potrafią też być bardzo kochające. Na tej stronie dowiesz się więcej o różnych rasach kotów i ich potrzebach.

Obrazki

Żadna strona nie jest kompletna bez obrazków! Do wstawiania obrazków służy znacznik . Ma on dwa ważne atrybuty:

• src: Określa ścieżkę do pliku obrazka. Jeśli obrazek jest w tym samym folderze co plik HTML, wystarczy podać jego nazwę (np. `kot.jpg`).
• alt: To tekst alternatywny, który wyświetli się, jeśli obrazek z jakiegoś powodu się nie załaduje. Jest też ważny dla wyszukiwarek i czytników ekranu.

Załóżmy, że masz obrazek o nazwie `kot_perski.jpg` w tym samym folderze co `index.html`. Dodaj go tak:

 
Witaj na mojej stronie o kotach!
 
Koty to wspaniałe zwierzęta. Są niezależne, ale potrafią też być bardzo kochające. Na tej stronie dowiesz się więcej o różnych rasach kotów i ich potrzebach.
 

Pamiętaj: Nazwa pliku obrazka musi być wpisana dokładnie tak samo, jak się nazywa, z uwzględnieniem wielkości liter i rozszerzenia (np. `.jpg`, `.png`).

Linki

Linki, czyli hiperłącza, pozwalają na nawigację między stronami lub przenoszenie do innych witryn. Używamy do tego znacznika z atrybutem href.

Link do zewnętrznej strony:

Więcej informacji o kotach znajdziesz na stronie: Wikipedia o kotach.

Link do innej strony w Twoim projekcie (o tym więcej w Kroku 4):

Zobacz też moją stronę o rasach kotów: Rasy kotów.

Listy

Listy pomagają uporządkować informacje. Mamy dwa główne typy:

• Listy nienumerowane (punktory): tworzone za pomocą
  (unordered list) i elementów listy
• (list item).
• Listy numerowane: tworzone za pomocą
  (ordered list) i elementów listy
• .

Przykład listy nienumerowanej:

Popularne rasy kotów
 
Kot perski
 
Kot syjamski
 
Kot maine coon

Po dodaniu tych elementów do pliku `index.html` i zapisaniu go, odśwież stronę w przeglądarce, aby zobaczyć zmiany. Twój projekt zaczyna nabierać kształtów!

Krok 3: Niech Twoja strona nabierze kolorów! Absolutne podstawy CSS

Obecnie Twoja strona wygląda bardzo prosto czarny tekst na białym tle. Aby ją uatrakcyjnić, użyjemy CSS (Cascading Style Sheets), czyli języka stylów. CSS pozwala nam kontrolować wygląd elementów na stronie: kolory, czcionki, rozmiary, rozmieszczenie i wiele więcej.

Najlepszym sposobem na dodanie stylów jest stworzenie osobnego pliku CSS. W tym samym folderze, w którym masz `index.html`, utwórz nowy plik tekstowy (np. w Notatniku) i nazwij go style.css. Zapisz go jako „Wszystkie pliki (*.*)”.

Teraz musimy „połączyć” nasz plik HTML z plikiem CSS. Otwórz `index.html` w Notatniku i dodaj poniższą linię wewnątrz sekcji (tuż pod lub ):

Teraz możemy zacząć dodawać style do pliku `style.css`. Oto kilka prostych przykładów, które możesz dodać do tego pliku:

/* Styl dla całej strony */
body { background-color: #f0f8ff; /* Jasny niebieski kolor tła */ font-family: Arial, sans-serif; /* Ustawienie czcionki */ color: #333; /* Ciemnoszary kolor tekstu */ text-align: center; /* Wyśrodkowanie tekstu na stronie */
} /* Styl dla nagłówka pierwszego stopnia */
h1 { color: #8a2be2; /* Fioletowy kolor nagłówka */ font-size: 36px; /* Większy rozmiar czcionki */
} /* Styl dla akapitów */
p { font-size: 16px; /* Standardowy rozmiar czcionki dla tekstu */ line-height: 1.5; /* Odstęp między liniami tekstu */
} /* Styl dla obrazków */
img { max-width: 100%; /* Obrazek nie będzie szerszy niż jego kontener */ height: auto; /* Zachowanie proporcji obrazka */ border: 5px solid #dda0dd; /* Ramka wokół obrazka */ margin-top: 20px; /* Odstęp od góry */
}

Po zapisaniu obu plików (`index.html` i `style.css`) i odświeżeniu strony w przeglądarce, zobaczysz, jak bardzo zmienił się jej wygląd! Pamiętaj, że to tylko podstawy. CSS ma mnóstwo możliwości, ale te przykłady wystarczą, żeby Twoja strona wyglądała znacznie lepiej.

Krok 4: Struktura na piątkę, czyli jak stworzyć stronę z kilkoma podstronami

Większość projektów szkolnych wymaga więcej niż jednej strony. Stworzenie kilku podstron i połączenie ich w spójną całość jest kluczowe. Wyobraź sobie, że chcesz mieć stronę główną, stronę „O mnie” i stronę „Kontakt”.

Tworzenie nowych podstron

Najprostszym sposobem jest skopiowanie istniejącego pliku `index.html`. Nazwij nowe pliki w sposób opisowy, np. `o-mnie.html` i `kontakt.html`. Umieść je w tym samym folderze co `index.html`.

Teraz otwórz każdy z tych nowych plików w Notatniku i zmodyfikuj ich zawartość:

• W o-mnie.html zmień tytuł w na „O mnie” i dodaj tekst opisujący Ciebie.
• W kontakt.html zmień tytuł w na „Kontakt” i dodaj informacje kontaktowe.

Przeczytaj również: Kolor tła w HTML i CSS - Jak to zrobić dobrze i efektywnie?

Tworzenie nawigacji (menu)

Aby użytkownicy mogli przechodzić między stronami, potrzebujesz menu. Najczęściej umieszcza się je na górze każdej strony. Możesz użyć listy nienumerowanej, aby stworzyć menu:

Dodaj ten kod do sekcji każdego pliku HTML (index.html, o-mnie.html, kontakt.html):