czwartek, 2024-02-15

Pierwsza strona HTML

Naukę tworzenia stron internetowych można rozpocząć od praktyki, stworzenie swojej pierwszej strony HTML nie jest przesadnie trudne i wymaga jedynie kilku kroków.

Jak wykonać stronę HTML?

Przygotowanie edytora tekstu

Możesz użyć prostego edytora tekstu jak Notatnik (Windows) lub TextEdit (Mac). Dla bardziej zaawansowanych funkcji, takich jak kolorowanie składni, możesz użyć edytora kodu jak Visual Studio Code, Sublime Text czy Brackets.

Struktura HTML

HTML (HyperText Markup Language) to język znaczników używany do tworzenia stron internetowych. Struktura HTML zaczyna się od deklaracji typu dokumentu i podstawowych znaczników. Oto przykładowa struktura:

 <!DOCTYPE html>
    <html lang="pl">
    <head>
        <meta charset="UTF-8">
        <title>Tytuł Strony</title>
    </head>
    <body>
        <h1>Witaj na mojej stronie!</h1>
        <p>To jest paragraf na mojej pierwszej stronie HTML.</p>
    </body>

Wyjaśnienie struktury:

<!DOCTYPE html> – deklaruje, że dokument jest stroną HTML5.
<html lang="pl"> – główny element, zawierający całą zawartość strony, atrybut lang="pl" określa, że główny język dokumentu to polski, co jest przydatne dla czytników ekranu i wyszukiwarek.
<head> – sekcja zawierająca metadane, w tym tytuł strony, nie są wyświetlane bezpośrednio na stronie.
- `<meta charset="UTF-8"> – ten tag ustawia kodowanie znaków na UTF-8, co zapewnia poprawne wyświetlanie polskich znaków i innych symboli z różnych języków.
- `<title>Tytuł Strony – określa tytuł strony wyświetlany na karcie przeglądarki.
<body> – główna część strony, zawierająca treść, którą widzą użytkownicy.
<h1> – nagłówek, największy i najbardziej dominujący.
<p> – akapit – podstawowy blok tekstu.

Zapisanie pliku i podgląd

Skopiuj powyższy kod do Notatnika lub innego edytora tekstu.
Zapisz plik, używając nazwy z rozszerzeniem .html, na przykład mojastrona.html. Jeśli używasz Notatnika, upewnij się, że wybrałeś opcję "Wszystkie pliki" w typie pliku podczas zapisywania.
Otwórz plik HTML w przeglądarce internetowej.
Zobaczysz swoją stronę, która wyświetla nagłówek i paragraf.

Modyfikowanie kodu strony

Aby zobaczyć zmiany wprowadzone w kodzie strony, należy odświeżyć stronę otwartą w przeglądarce. Dla osoby początkującej podstawową metodą jest ręczne odświeżanie.

zapisz zmiany w pliku HTML – użyj funkcji zapisywania w edytorze tekstu;
przejdź do przeglądarki, w której otworzyłeś swój plik HTML (warto stosować skrót klawiszowy alt+tab);
możesz to zrobić naciskając F5 na klawiaturze lub klikając przycisk odświeżania w przeglądarce;
w niektórych środowiskach F5 nie zadziała, możesz wtedy użyć skrótu klawiszowego ctrl+r lub command+r w systemie macOS;
istnieją możliwości automatyzowania odświeżania, ale to trochę bardziej skomplikowane zagadnienie.

Dalsze eksperymenty

Eksperymentuj z dodawaniem różnych elementów HTML, takich jak listy (<ul>, <ol>, <li>), obrazy (<img>), linki (<a>) itp. Oto przykład, jak dodać link i obraz:

<a href="https://www.przykladowa-strona.com">Odwiedź moją stronę
<img src="obrazek.jpg" alt="Opis obrazka">

Kontynuacja nauki

HTML to tylko początek. Możesz nauczyć się CSS, aby dodać style do swojej strony, i JavaScript, aby dodać interaktywność. Istnieje wiele zasobów online, takich jak kursy, tutoriale i dokumentacja, które mogą pomóc w dalszej nauce.

Jak zapisać stronę HTML w Notatniku?

Osoby całkowicie początkujące mogą mieć z tym problem, ale nie jest to trudne. Aby zapisać stronę HTML w Notatniku, wykonaj poniższe kroki.

Otwórz Notatnik – możesz to zrobić, wpisując "Notatnik" w menu start systemu Windows i klikając na ikonę programu.
Wpisz kod HTML – w oknie Notatnika wpisz swój kod HTML. Jeśli korzystasz z kodu z poradnika, możesz go po prostu skopiować i wkleić.
Zapisz plik:
- kliknij "Plik" w lewym górnym rogu okna Notatnika,
- wybierz "Zapisz jako...",
- w oknie dialogowym, które się pojawi, wybierz folder, w którym chcesz zapisać plik,
- w polu "Nazwa pliku" wpisz nazwę swojego pliku z rozszerzeniem .html na końcu, na przykład strona.html,
- w polu "Typ pliku" wybierz "Wszystkie pliki (.)",
- kliknij "Zapisz".

Teraz twój plik HTML jest zapisany i możesz go otworzyć w przeglądarce internetowej, aby zobaczyć, jak wygląda twoja strona. Pamiętaj, że Notatnik to bardzo podstawowy edytor tekstu, więc nie oferuje funkcji specyficznych dla edycji HTML, takich jak kolorowanie składni czy automatyczne uzupełnianie kodu. Do bardziej zaawansowanej pracy z HTML warto rozważyć użycie dedykowanego edytora kodu jak Visual Studio Code, Sublime Text, czy Brackets.

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie