Node.js dla początkujących - Uzupełnienie do kursu

Witajcie w kolejnym wpisie z kursu JavaScript dla początkujących! Dziś jako uzupełnienie kursu porozmawiamy o HTML i CSS, dwóch technologiach, które są niezbędne dla każdego front-end developera, a w szczególności dla tych, którzy chcą sprawnie operować na DOM (Document Object Model). Dzisiaj w odróżnieniu od poprzednich części kursu skupimy się na klienckiej stronie JavaScriptu i nie będziemy używać Node.JS. Choć skupiamy się na JavaScript, zrozumienie HTML i CSS jest kluczowe, ponieważ to one definiują strukturę i wygląd strony internetowej, którą później będziemy dynamicznie modyfikować za pomocą JavaScriptu.

Czym właściwie jest HTML?

HTML (HyperText Markup Language) to język znaczników, który służy do tworzenia struktury strony internetowej. Wyobraź sobie, że to szkielet budynku – definiuje on, gdzie znajdują się ściany, okna, drzwi, ale nie zajmuje się ich wyglądem. W HTML używamy tagów, aby oznaczyć różne elementy strony, takie jak nagłówki, akapity, obrazy czy linki.

Struktura dokumentu HTML

Każdy dokument HTML ma określoną strukturę. Najważniejsze elementy to:

<!DOCTYPE html> – deklaracja typu dokumentu (mówi przeglądarce, że to dokument HTML5).
<html> – element główny, obejmujący całą zawartość strony.
<head> – sekcja nagłówkowa, zawierająca metadane o stronie (np. tytuł, kodowanie znaków, linki do arkuszy stylów).
<title> – tytuł strony, wyświetlany na karcie przeglądarki.
<body> – sekcja ciała, zawierająca właściwą treść strony, widoczną dla użytkownika.

Przykład:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Mój pierwszy HTML</title>
</head>
<body>
    <h1>Witaj świecie!</h1>
    <p>To jest mój pierwszy akapit.</p>
</body>
</html>

Podstawowe tagi HTML, które musisz znać

<div> (division) – element blokowy, służący do grupowania innych elementów. Jest to bardzo uniwersalny kontener.
<span> – element liniowy, służący do oznaczania fragmentów tekstu wewnątrz innych elementów.
<p> (paragraph) – akapit tekstu.
<h1> do <h6> (heading) – nagłówki różnych poziomów ważności (od najważniejszego <h1> do najmniej ważnego <h6>).

Przykład użycia:

<div>
    <h1>Tytuł artykułu</h1>
    <p>To jest krótki wstęp.</p>
    <div>
        <h2>Podtytuł</h2>
        <p>A to dalsza część tekstu.</p>
        <span>Fragment tekstu wewnątrz akapitu.</span>
    </div>
</div>

CSS – Ubieramy nasz szkielet

CSS (Cascading Style Sheets) to język stylów, który odpowiada za wygląd elementów HTML. Dzięki CSS możemy kontrolować kolory, czcionki, marginesy, układ elementów i wiele więcej. To tak, jakbyśmy ubierali nasz szkielet w ubrania i dodawali mu detale.

Sposoby dodawania stylów CSS

Style inline (w linii) – style dodawane bezpośrednio do elementu HTML za pomocą atrybutu style. Unikamy tego podejścia w większych projektach, ponieważ utrudnia zarządzanie stylami.
Przykład:
```
<p style="color: blue; font-size: 16px;">Ten tekst jest niebieski i ma rozmiar 16px.</p>
```
Style internal (wewnętrzne) – style umieszczane w sekcji <head> dokumentu HTML wewnątrz tagu <style>. Przydatne dla stylizowania pojedynczej strony.
Przykład:
```
<head>
    <style>
        p {
            color: green;
        }
    </style>
</head>
```
Style external (zewnętrzne) – style zapisane w osobnym pliku z rozszerzeniem .css, a następnie dołączane do dokumentu HTML za pomocą tagu <link>. To najczęściej stosowane i najbardziej polecane podejście, ponieważ pozwala na oddzielenie struktury od prezentacji i ułatwia zarządzanie stylami w całym projekcie.
Przykład:
W pliku style.css:
```
body {
    background-color: #f0f0f0;
}
h1 {
    font-family: sans-serif;
}
```
W dokumencie HTML:
```
<head>
    <link rel="stylesheet" href="style.css">
</head>
```

Selektory CSS – Jak wybierać elementy do stylizacji?

Selektory CSS pozwalają nam precyzyjnie określić, które elementy HTML mają zostać ostylowane. Najważniejsze selektory to:

Selektor tagu (elementu) – wybiera wszystkie elementy danego typu.
Przykład:
```
p { /* Stylizuje wszystkie akapity */
    line-height: 1.5;
}
```

Selektor klasy (.) – wybiera elementy z daną klasą. Klasy są atrybutami, które możemy dodawać do elementów HTML. Możemy przypisać wiele klas do jednego elementu.

Przykład:

<p class="wazny-tekst">Ten akapit jest ważny.</p>
<div class="kontener glowny">...</div>

.wazny-tekst {
    font-weight: bold;
}
.kontener {
  border: 1px solid black;
}
.glowny {
  width: 100%;
}

Selektor ID (#) – wybiera element o danym ID. ID powinno być unikalne w obrębie dokumentu HTML.

Przykład:

<div id="stopka">To jest stopka strony.</div>

#stopka {
    text-align: center;
    background-color: #333;
    color: white;
    padding: 10px;
}

Połączenie HTML, CSS i JavaScript – Manipulacja DOM

Teraz dochodzimy do sedna – jak te trzy technologie współpracują ze sobą? Otóż, przeglądarka internetowa, po otrzymaniu pliku HTML, przetwarza go i tworzy tzw. DOM (Document Object Model). DOM to reprezentacja struktury dokumentu w postaci drzewa obiektów. Dzięki temu JavaScript może „rozmawiać” z elementami strony, czyli je modyfikować, dodawać, usuwać, zmieniać ich treść i style.

Przykładowo, za pomocą JavaScriptu możemy zmienić kolor tekstu akapitu o danym ID:

<!DOCTYPE html>
<html>
<head>
    <title>Przykład manipulacji DOM</title>
</head>
<body>
    <p id="moj-akapit">Ten tekst zostanie zmieniony.</p>

    <script>
        const akapit = document.getElementById('moj-akapit');
        akapit.style.color = 'red';
    </script>
</body>
</html>

W tym przykładzie:

Używamy document.getElementById('moj-akapit'), aby pobrać element <p> o ID moj-akapit.
Następnie, za pomocą akapit.style.color = 'red', zmieniamy jego kolor na czerwony.

To bardzo prosty przykład, ale pokazuje potęgę połączenia tych trzech technologii.

Praca domowa

Stwórz prostą stronę HTML z nagłówkiem, kilkoma akapitami i obrazkiem.
Dodaj style CSS (zewnętrzne) do swojej strony, zmieniając kolory, czcionki i układ elementów.
Za pomocą JavaScriptu zmień treść jednego z akapitów po załadowaniu strony.
Dodaj przycisk, po kliknięciu którego zmieni się kolor tła strony.

Zachęcam Cię do samodzielnego eksperymentowania z kodem.

Pomocne artykuły

Jeśli interesuje Cię bardziej szczegółowy opis jak pisać kod HTML, CSS polecam następujące artykuły:

Dlaczego powstał ten post?

Post ten jest powstał jako uzupełnienie do kursu dotyczącego stricte Node.js, ponieważ w następnych częściach będziemy korzystać z bibliotek takich jak Express.js, które są zależne od HTML, CSS i JavaScript po stronie klienta. Jeśli masz jakieś pytania lub chcesz dalej rozwijać swoje umiejętności, to zapraszam do dyskusji w komentarzach. Do następnej części!