Tworzenie projektu HTML/CSS: przewodnik

Do tworzenia projektów możesz używać narzędzi online, takich jak CodeSandbox. Jednakże, profesjonalniejszym podejściem jest przechowywanie wszystkich plików projektu lokalnie na swoim dysku.

1. Budowa HTML

HTML, czyli język HyperText Markup Language, jest językiem znaczników, który służy do definiowania struktury strony internetowej. Umożliwia organizację i formatowanie tekstu, obrazów i innych elementów na stronie.

Przykładowa struktura dokumentu HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Moja Strona</title>
</head>
<body>
  <header>
    <h1>Nagłówek Strony</h1>
  </header>
  <main>
    <p>Treść strony...</p>
  </main>
  <footer>
    <p>Stopka strony</p>
  </footer>
</body>
</html>

2. Stylizacja CSS

CSS (Cascading Style Sheets) jest językiem, który pozwala na stylizację elementów strony internetowej. Dzięki niemu możemy kontrolować wygląd tekstów, kolorów, tła, układu oraz innych aspektów strony.

Przykładowe style CSS:

body {
    background-color: lightblue;
}

h1 {
  color: navy;
}

p {
  font-size: 16px;
}

main {
  padding: 20px;
}

3. Integracja HTML i CSS

Istnieją różne metody łączenia kodu HTML i CSS:

a) Wewnętrzne style CSS

Style CSS mogą być umieszczone bezpośrednio w dokumencie HTML, wewnątrz sekcji <head>, używając znacznika <style>. Ten sposób sprawdza się przy pojedynczej stronie albo szybkim eksperymencie, ale tych stylów nie użyjesz na innych stronach projektu.

<head>
  <style>
    h1 {
      color: navy;
    }
  </style>
</head>

b) Zewnętrzne pliki CSS

Zalecana metoda, polegająca na przechowywaniu stylów CSS w osobnym pliku (np. style.css). Plik ten jest następnie dołączany do dokumentu HTML za pomocą znacznika <link>.

<head>
  <link rel="stylesheet" href="style.css">
</head>

c) Atrybut style

Atrybut style może być również używany bezpośrednio w znacznikach HTML, umożliwiając zastosowanie stylów bezpośrednio do wybranych elementów. Lepiej jednak unikać tej metody, ponieważ utrudnia to zarządzanie stylami i utrzymanie kodu.

<h1 style="color: navy;">Nagłówek Strony</h1>

Projekt krok po kroku w Visual Studio Code

Teraz przenieśmy to na Twój komputer. Wystarczą darmowy edytor kodu i przeglądarka - poniżej znajdziesz wszystkie kroki.

1. Instalacja Visual Studio Code

Pobierz i zainstaluj Visual Studio Code z oficjalnej strony code.visualstudio.com.

2. Tworzenie nowego projektu

• Otwórz VSCode.
• Wybierz File > New Window (lub użyj skrótu Ctrl+Shift+N), aby otworzyć nowe okno VSCode.
• Wybierz File > Open Folder i wybierz folder, w którym chcesz przechowywać swój projekt.

3. Tworzenie pliku HTML

• W lewym pasku narzędzi kliknij prawym przyciskiem myszy na folder projektu i wybierz New File.
• Nazwij plik z rozszerzeniem .html, np. index.html.

4. Tworzenie pliku CSS

• Kliknij prawym przyciskiem myszy na folder projektu i wybierz New File.
• Nazwij plik z rozszerzeniem .css, np. style.css.

5. Łączenie plików HTML i CSS

• Otwórz plik index.html.
• W sekcji <head> dodaj link do pliku CSS, jak pokazano poniżej:

<head>
  <title>Twoja strona</title>
  <link rel="stylesheet" href="style.css">
</head>

6. Podgląd strony

• Aby zobaczyć, jak wygląda twoja strona, otwórz plik index.html w przeglądarce internetowej.
• Możesz również zainstalować rozszerzenie takie jak "Live Server" w VSCode, które automatycznie odświeży twoją stronę po każdej zmianie.

7. Zapis i testowanie

• Zapisz wszystkie zmiany (File > Save All lub Ctrl+K S).
• Testuj swoją stronę, dokonując różnych modyfikacji i obserwując rezultaty.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mój Projekt HTML/CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Moja Pierwsza Strona</h1>
        <nav>
            <a href="#about">O mnie</a>
            <a href="#projects">Projekty</a>
            <a href="#contact">Kontakt</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>O mnie</h2>
            <p>Witaj! Uczę się tworzenia stron internetowych.</p>
        </section>

        <section id="projects">
            <h2>Projekty</h2>
            <p>Tu będą moje przyszłe projekty.</p>
        </section>

        <section id="contact">
            <h2>Kontakt</h2>
            <p>Email: example@example.com</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Moja Strona</p>
    </footer>
</body>
</html>

Pamiętaj: HTML to szkielet świątyni, a CSS w osobnym pliku to farby - trzymaj je osobno, a połączy je jeden znacznik <link>.