Twoje Centrum Szkoleniowe

Nauczmy się dziś czegoś nowego!

Kurs tworzenia stron - HTML + CSS

Tworzenie pierwszego dokumentu HTML

Skoro poznaliśmy już podstawy teoretyczne – wiemy, czym jest strona internetowa, jaka jest rola HTML i CSS oraz jakie narzędzia są nam potrzebne – nadszedł czas na praktykę. Dziś zrobimy pierwszy krok w kierunku tworzenia własnych stron internetowych. Czy jesteś gotowy na swoją pierwszą przygodę z kodowaniem w HTML? Zanurzmy się w świat znaczników i stwórzmy razem Twój pierwszy dokument HTML!

 

Zanim zaczniemy

Przygotowanie środowiska pracy

    1. Wybór edytora kodu: Jeśli jeszcze tego nie zrobiłeś, zainstaluj jeden z polecanych edytorów kodu, np. Visual Studio Code lub Sublime Text. Te narzędzia ułatwią Ci pisanie i organizację kodu.

    2. Przeglądarka internetowa: Upewnij się, że masz zainstalowaną nowoczesną przeglądarkę, taką jak Google Chrome, Mozilla Firefox czy Microsoft Edge. Będziemy w niej podglądać efekty naszej pracy.

Zakładamy folder projektu

Aby utrzymać porządek, stwórz na swoim komputerze folder, w którym będziesz przechowywać pliki związane z tym kursem. Możesz nazwać go np. MojaPierwszaStrona.

 

Tworzenie pierwszego pliku HTML

Krok 1: Utwórz nowy plik

Otwórz swój edytor kodu i utwórz nowy plik. Zapisz go jako index.html w folderze MojaPierwszaStrona. Nazwa index.html jest standardowo używana dla głównej strony w folderze – dzięki temu przeglądarka automatycznie ją wykryje.

Krok 2: Podstawowa struktura dokumentu HTML

Każdy dokument HTML powinien mieć określoną strukturę. Nie martw się, jeśli na początku wydaje się to skomplikowane – zaraz wszystko wyjaśnimy.

Wpisz poniższy kod w swoim edytorze:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>

</body>
</html>

 

Wyjaśnienie krok po kroku:

      • <!DOCTYPE html> – Deklaracja typu dokumentu informująca przeglądarkę, że używamy HTML5.
      • <html lang="pl"> – Otwierający znacznik html z atrybutem lang określającym język dokumentu (w tym przypadku polski).
      • <head> – Sekcja nagłówkowa dokumentu, zawierająca informacje meta i tytuł strony.
      • <meta charset="UTF-8"> – Ustawienie kodowania znaków na UTF-8, co pozwala poprawnie wyświetlać polskie znaki.
      • <title>Moja pierwsza strona</title> – Tytuł strony wyświetlany na karcie przeglądarki.
      • <body> – Sekcja ciała dokumentu, w której umieszczamy widoczną treść strony.
      • </body> i </html> – Zamykające znaczniki body i html.

Krok 3: Dodajmy treść do strony

Czas wypełnić naszą stronę treścią. Między znacznikami <body> i </body> dodaj następujący kod:

<h1>Witaj na mojej pierwszej stronie!</h1>
<p>To jest mój pierwszy akapit na stronie stworzonej w HTML.</p>

Co tu się dzieje?

      • <h1> – Znacznik nagłówka pierwszego poziomu. Używamy go do tytułów i ważnych nagłówków.
      • <p> – Znacznik akapitu. Służy do umieszczania zwykłego tekstu.

Krok 4: Zapisz i otwórz plik w przeglądarce

      1. Zapisz zmiany w edytorze kodu (Ctrl+S lub Cmd+S).
      2. Otwórz przeglądarkę.
      3. Otwórz plik:
        • Możesz przeciągnąć plik index.html bezpośrednio do okna przeglądarki.
        • Lub kliknąć prawym przyciskiem myszy na plik i wybrać "Otwórz za pomocą" -> "Twoja przeglądarka".

Powinieneś zobaczyć swoją pierwszą stronę z tytułem i akapitem!

 

Eksperymentujemy z kodem

Dodajmy więcej elementów

Spróbujmy dodać kolejne elementy do naszej strony. Dodaj poniższy kod pod istniejącym akapitem:

<h2>O mnie</h2>
<p>Nazywam się Jan Kowalski i uczę się tworzenia stron internetowych.</p>

<h2>Moje zainteresowania</h2>
<ul>
    <li>Programowanie</li>
    <li>Grafika komputerowa</li>
    <li>Muzyka</li>
</ul>

Wyjaśnienie nowych znaczników:

    • <h2> – Nagłówek drugiego poziomu, używany dla podtytułów.
    • <ul> – Lista nieuporządkowana (wypunktowana).
    • <li> – Element listy.

Sprawdź efekty

Zapisz plik i odśwież stronę w przeglądarce (F5). Zobaczysz nowe nagłówki i listę z Twoimi zainteresowaniami.

 

Ważne wskazówki

Używanie komentarzy

Komentarze są fragmentami kodu, które nie są interpretowane przez przeglądarkę. Służą do notowania uwag czy tymczasowego wyłączania kodu.

Przykład komentarza:

<!-- To jest komentarz i nie będzie widoczny na stronie -->

 

Spróbuj dodać komentarz w swoim kodzie, np.:

<!-- Poniżej znajduje się lista moich zainteresowań -->

 

Zachowanie odpowiedniej struktury

    • Wcięcia i formatowanie: Stosuj wcięcia (najczęściej 2 lub 4 spacje) dla lepszej czytelności kodu.
    • Zamykające znaczniki: Pamiętaj, aby każdy otwierający znacznik miał swój zamykający odpowiednik, np. <p>...</p>.

 

Twój pierwszy obrazek

Dodajmy obrazek do naszej strony. Znajdź dowolne zdjęcie (np. zdjęcie krajobrazu) i skopiuj je do folderu MojaPierwszaStrona. Nazwij je krajobraz.jpg.

Dodaj poniższy kod w miejscu, w którym chcesz, aby pojawił się obrazek:

<img src="krajobraz.jpg" alt="Piękny krajobraz">

 

Wyjaśnienie:

    • <img> – Znacznik obrazu.
    • src – Atrybut określający ścieżkę do pliku z obrazem.
    • alt – Tekst alternatywny wyświetlany, gdy obraz nie może być załadowany; ważny dla dostępności.

Zapisz plik i odśwież stronę. Obraz powinien się pojawić.

 

Dodawanie linków

Chcemy teraz dodać link do innej strony, np. do wyszukiwarki Google.

Dodaj poniższy kod:

<p>Odwiedź moją ulubioną wyszukiwarkę: <a href="https://www.google.com">Google</a>.</p>

 

Wyjaśnienie:

    • <a> – Znacznik linku (kotwica).
    • href – Atrybut określający adres URL, do którego prowadzi link.

 

Podsumowanie

Gratulacje! Stworzyłeś swoją pierwszą stronę internetową w HTML. Nauczyłeś się:

    • Tworzyć podstawową strukturę dokumentu HTML.
    • Dodawać nagłówki, akapity, listy, obrazki i linki.
    • Korzystać z atrybutów i komentarzy.

To dopiero początek Twojej przygody z tworzeniem stron WWW. W kolejnych lekcjach rozszerzymy Twoją wiedzę o bardziej zaawansowane elementy HTML oraz zaczniemy stylizować stronę za pomocą CSS.

 

Zadania praktyczne

    1. Zmodyfikuj swoją stronę:

      • Dodaj dodatkowy akapit opisujący Twoje hobby.
      • Stwórz listę uporządkowaną (numerowaną) z filmami lub książkami, które polecasz.
      • Dodaj link do innej strony, która Cię interesuje.

    2. Eksperymentuj z obrazkami:

      • Dodaj kolejny obrazek i ustaw jego szerokość na 300 pikseli za pomocą atrybutu width, np. <img src="obrazek.jpg" alt="Opis" width="300">.

    3. Bądź kreatywny:

      • Spróbuj użyć innych znaczników, takich jak <strong> (pogrubienie) czy <em> (kursywa), aby wyróżnić fragmenty tekstu.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się
Aby widzieć ocenę lekcji - Zaloguj się
Następna lekcja: Podstawowe elementy HTML: nagłówki, akapity, linki, obrazy →
← Poprzednia lekcja: Czym jest strona internetowa i jak działa?