Moje ulubione owoce (lista nieuporządkowana):
 
Jabłka
 
Banany
 
Pomarańcze
 
Kroki do sukcesu (lista uporządkowana):
 
Ucz się HTML
 
Ucz się CSS
 
Ucz się JavaScript

Wygląd ma znaczenie: pierwsze kroki ze stylami CSS w Notepad++

Sam HTML to tylko struktura. Aby Twoja strona wyglądała estetycznie i nowocześnie, potrzebujesz CSS (Cascading Style Sheets). CSS odpowiada za kolory, czcionki, marginesy, układ elementów i wiele więcej. W Notepad++ możesz pisać zarówno kod HTML, jak i CSS, korzystając z podświetlania składni dla obu języków.

Trzy drogi do stylowania: poznaj CSS inline, wewnętrzny i zewnętrzny

Istnieją trzy główne sposoby dodawania stylów CSS do Twojej strony HTML:

• CSS inline: Style są dodawane bezpośrednio w tagu HTML za pomocą atrybutu style. Jest to najmniej zalecana metoda, ponieważ miesza strukturę z prezentacją i utrudnia zarządzanie stylami.

  Ten tekst jest niebieski i większy.
  

• CSS wewnętrzny: Style są umieszczane w sekcji pliku HTML, wewnątrz tagów . Lepsze niż inline, ale nadal ogranicza style do jednej strony.

• CSS zewnętrzny: Style są przechowywane w osobnym pliku z rozszerzeniem .css (np. style.css), a następnie linkowane do pliku HTML. To jest najlepsza praktyka, którą zawsze polecam. Pozwala na oddzielenie struktury od prezentacji i łatwe zarządzanie stylami na wielu stronach.

Tworzymy osobny plik style.css: dlaczego to najlepsze rozwiązanie?

Tworzenie osobnego pliku style.css to standard i najlepsza praktyka w web developmentcie, i ja również ją gorąco polecam. Dlaczego? Przede wszystkim, zapewnia lepszą organizację kodu. Masz jeden plik dla struktury (HTML) i jeden dla wyglądu (CSS), co znacznie ułatwia zarządzanie projektem. Po drugie, ułatwia zarządzanie zmianami. Jeśli chcesz zmienić kolor nagłówków na całej stronie, wystarczy edytować jedną linię w pliku CSS, zamiast szukać i zmieniać każdy nagłówek w plikach HTML. Po trzecie, umożliwia wielokrotne użycie tych samych stylów na wielu stronach, co oszczędza czas i zapewnia spójny wygląd Twojej witryny.

Jak połączyć plik HTML z arkuszem stylów CSS?

Aby połączyć swój plik HTML z zewnętrznym arkuszem stylów CSS, musisz użyć tagu w sekcji pliku HTML. Atrybut rel="stylesheet" informuje przeglądarkę, że linkowany plik jest arkuszem stylów, a atrybut href wskazuje ścieżkę do pliku CSS.

Upewnij się, że plik style.css znajduje się w tym samym folderze co plik HTML, lub podaj poprawną ścieżkę, jeśli jest w innym miejscu (np. href="css/style.css").

Praktyczny przykład: zmień kolor tła, czcionkę i rozmiar tekstu

Teraz stwórzmy prosty plik style.css. Otwórz nowy plik w Notepad++, zapisz go jako style.css w tym samym folderze co Twój plik HTML i wklej poniższy kod:

/* style.css */
body { background-color: #f0f0f0; /* Jasnoszare tło strony */ font-family: Arial, sans-serif; /* Ustawienie czcionki */ color: #333; /* Ciemny kolor tekstu */
} h1 { color: #0056b3; /* Niebieski kolor dla nagłówka h1 */ text-align: center; /* Wyśrodkowanie nagłówka */
} p { font-size: 16px; /* Rozmiar czcionki dla paragrafów */ line-height: 1.6; /* Wysokość linii dla lepszej czytelności */ margin-bottom: 10px; /* Dolny margines dla akapitów */
}

Po zapisaniu pliku CSS i odświeżeniu strony w przeglądarce, zobaczysz, że Twoja strona nabrała zupełnie nowego wyglądu! To pokazuje, jak potężne jest CSS w kontrolowaniu prezentacji.

Najczęstsze błędy początkujących i jak ich unikać

Każdy początkujący popełnia błędy, ja również je popełniałem. Ważne jest, aby wiedzieć, jak je identyfikować i naprawiać. Oto kilka najczęstszych pułapek.

Pułapka niezamkniętych tagów: jak Notepad++ pomaga je znaleźć?

Jednym z najczęstszych błędów jest zapominanie o zamknięciu tagu HTML (np.

Problem ze ścieżkami: dlaczego moje obrazki się nie wyświetlają?

To klasyczny problem! Wyobraź sobie, że chcesz wstawić obrazek, ale na stronie widzisz tylko małą ikonkę z uszkodzonym obrazkiem. Najczęściej winne są nieprawidłowe ścieżki do plików. Ścieżka to adres, który mówi przeglądarce, gdzie znaleźć dany plik (obraz, CSS, JS). Rozróżniamy ścieżki względne (odnoszące się do aktualnego położenia pliku HTML) i bezwzględne (pełny adres URL).

• Błędna ścieżka: , gdy obrazek jest w folderze images/.
• Poprawna ścieżka (względna): .
• Błędna ścieżka do CSS: , gdy plik CSS jest w folderze css/.
• Poprawna ścieżka do CSS: .

Zawsze upewnij się, że ścieżki są dokładnie takie, jak struktura Twoich folderów. Małe literówki lub brak ukośnika mogą zrujnować cały układ.

Biały ekran rozpaczy: co zrobić, gdy strona w ogóle się nie ładuje?

Widzisz tylko biały ekran? To frustrujące, ale zazwyczaj oznacza prosty błąd. Oto, co możesz sprawdzić:

• Sprawdź nazwę pliku i rozszerzenie: Upewnij się, że plik ma rozszerzenie .html (np. index.html), a nie .txt.
• Podstawowa struktura HTML: Czy masz deklarację </code>, tagi , i ? Czy wszystkie są poprawnie zamknięte?
• Błędy w kodzie: Nawet mała literówka w tagu lub atrybucie może spowodować, że przeglądarka nie będzie w stanie poprawnie zinterpretować strony.
• Narzędzia deweloperskie przeglądarki: Naciśnij F12 w przeglądarce (lub prawy przycisk myszy > "Zbadaj element"). Otwórz zakładkę "Konsola" (Console) i "Elementy" (Elements). Konsola często wyświetla komunikaty o błędach JavaScript lub problemach z ładowaniem zasobów, a zakładka "Elementy" pozwala zobaczyć, jak przeglądarka zinterpretowała Twój HTML. To nieocenione narzędzie do debugowania!

Twoja strona jest gotowa! Co dalej? Prosta droga do publikacji w internecie

Gratulacje! Stworzyłeś swoją pierwszą stronę internetową. Teraz naturalnym krokiem jest pokazanie jej światu. Nie musisz od razu kupować drogiego hostingu.

Hosting dla początkujących: gdzie umieścić swoją pierwszą stronę za darmo?

Dla początkujących istnieje wiele świetnych, darmowych opcji hostingu, które pozwolą Ci opublikować swoją stronę bez żadnych kosztów. Oto kilka z nich, które sam polecam:

• GitHub Pages: Jeśli znasz podstawy Git'a, GitHub Pages to doskonały wybór. Pozwala na hostowanie statycznych stron internetowych bezpośrednio z repozytoriów GitHuba. Jest to świetny sposób na naukę kontroli wersji i jednoczesne publikowanie projektów.
• Netlify: Netlify to bardzo popularna platforma do hostowania statycznych stron. Jest niezwykle prosta w obsłudze, oferuje darmowy plan z wieloma funkcjami (np. automatyczne wdrożenia z GitHuba, darmowe certyfikaty SSL) i jest idealna dla osób, które chcą szybko opublikować swoją stronę.
• Vercel: Podobnie jak Netlify, Vercel oferuje szybkie i proste wdrożenia statycznych stron. Jest również bardzo przyjazny dla deweloperów i ma hojny darmowy plan.

Wszystkie te platformy są świetne do nauki i prezentowania portfolio, a ich darmowe plany są wystarczające dla większości początkujących projektów.

Przeczytaj również: Odkryj DOM: Jak działa serce dynamicznych stron web?

Krok po kroku: jak wgrać pliki na serwer i pokazać stronę światu?

Proces wgrywania plików na serwer różni się w zależności od wybranego hostingu, ale ogólna idea jest podobna. Oto uproszczone kroki:

1. Wybierz platformę: Zdecyduj się na jeden z darmowych hostingów, np. GitHub Pages lub Netlify.
2. Załóż konto: Zarejestruj się na wybranej platformie.
3. Przygotuj pliki: Upewnij się, że wszystkie pliki Twojej strony (HTML, CSS, obrazy) są w jednym, dobrze zorganizowanym folderze.
4. Wgraj pliki:
   • Dla GitHub Pages: Utwórz nowe repozytorium na GitHubie, wgraj do niego swoje pliki, a następnie w ustawieniach repozytorium aktywuj GitHub Pages.
   • Dla Netlify/Vercel: Zazwyczaj łączysz swoje konto z GitHubem (lub innym systemem kontroli wersji), wybierasz repozytorium z plikami strony, a platforma automatycznie wdraża Twoją stronę. Możesz też po prostu przeciągnąć i upuścić folder z plikami na stronę Netlify/Vercel.
5. Opublikuj: Po wgraniu plików, platforma wygeneruje dla Ciebie unikalny adres URL, pod którym Twoja strona będzie dostępna dla każdego w internecie.

Pamiętaj, że to dopiero początek Twojej przygody z tworzeniem stron. Kontynuuj naukę, eksperymentuj z nowymi tagami i stylami, a Twoje umiejętności będą rosły z każdym kolejnym projektem!