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.
- 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:
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Moja Strona</title>
5</head>
6<body>
7 <header>
8 <h1>Nagłówek Strony</h1>
9 </header>
10 <main>
11 <p>Treść strony...</p>
12 </main>
13 <footer>
14 <p>Stopka strony</p>
15 </footer>
16</body>
17</html>- 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:
1body {
2 background-color: lightblue;
3}
4
5h1 {
6 color: navy;
7}
8
9p {
10 font-size: 16px;
11}
12
13main {
14 padding: 20px;
15}- 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>.
1<head>
2 <style>
3 h1 {
4 color: navy;
5 }
6 </style>
7</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>.
1<head>
2 <link rel="stylesheet" href="style.css">
3</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.
1<h1 style="color: navy;">Nagłówek Strony</h1>VIDEO - codesandbox
- wyjaśnienia
VIDEO - od zera VSC
- obsługa programu
Instalacja Visual Studio Code Pobierz i zainstaluj Visual Studio Code z oficjalnej strony link.
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.
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.
Tworzenie Pliku CSS Kliknij prawym przyciskiem myszy na folder projektu i wybierz New File. Nazwij plik z rozszerzeniem .css, np. styles.css.
Łączenie Plików HTML i CSS Otwórz plik index.html. W sekcji <head>, dodaj link do pliku CSS, jak pokazano poniżej:
1<head>
2 <title>Twoja strona</title>
3 <link rel="stylesheet" href="styles.css">
4</head>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.
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.