Przejdź do głównej zawartości

1 klasa. Temat 20. Projekt strony internetowej

 

Krok 1. Projektowanie stron internetowych – wprowadzenie do języka HTML
Co to jest HTML?
  • HTML (HyperText Markup Language) to hipertekstowy język znaczników. Ważne jest, aby zrozumieć, że HTML nie jest językiem programowania (nie zawiera logiki, pętli czy obliczeń). 
  • Służy on do opisu struktury strony – mówi przeglądarce, co jest nagłówkiem, co akapitem, a co obrazkiem.
Wyobraź sobie budowę domu:

  • HTML to fundamenty i ściany (szkielet).

  • CSS to elewacja, farba na ścianach i dekoracje (wygląd).

  • JavaScript to instalacja elektryczna i inteligentne systemy (działanie).

Krok 2. Podstawowa struktura dokumentu

  • Każdy plik HTML musi mieć określoną strukturę, aby przeglądarka mogła go poprawnie odczytać. 
  • Znaczniki zazwyczaj występują w parach: otwierający <tag> i zamykający </tag>.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Moja pierwsza strona</title>
</head>
<body>
    <h1>Witaj w świecie webu!</h1>
    <p>To jest mój pierwszy krok w stronę zostania developerem.</p>
</body>
</html>

Kluczowe elementy:

  • <!DOCTYPE html> – informuje przeglądarkę, że używamy najnowszej wersji HTML5.

  • <html> – główny kontener całej strony.

  • <head> – "głowa" strony, zawiera informacje niewidoczne bezpośrednio dla użytkownika (metadane, tytuł karty).

  • <body> – "ciało" strony, tutaj trafia wszystko, co widzimy w oknie przeglądarki.

Krok 3. Najważniejsze znaczniki (Twój przybornik)

  • Nagłówki: <h1>, <h2>, ..., <h6> (h1 jest najważniejszy).

  • Akapit: <p> (tekst ciągły).

  • Linki: <a href="url">Opis</a>.

  • Obrazy: <img src="sciezka_do_pliku.jpg" width="300" height="200"

  •  alt="opis_obrazka">.

  • Listy:

    • <ul> + <li> – lista punktowana (nieuporządkowana).

    • <ul>
  <li>Element listy 1</li>
  <li>Element listy 2</li>
  <li>Element listy 3</li>
</ul>

    • <ol> + <li> – lista numerowana.

Krok 4.  Zadania praktyczne 
Zadanie 1. Przygotowanie warsztatu

  1. Otwórz prosty edytor tekstowy (np. Notatnik, Notepad++ lub Visual Studio Code).

  2. Utwórz nowy plik i wklej do niego strukturę podstawową z kroku 2.

  3. Zapisz plik w swoim folderrze pod nazwą index.html (ważne: rozszerzenie musi być .html, a nie .txt).

  4. Otwórz ten plik za pomocą dowolnej przeglądarki internetowej.

Zadanie 2. Moja wizytówka

Zmodyfikuj plik index.html tak, aby zawierał:

  1. Nagłówek pierwszego stopnia (<h1>) z Twoim imieniem i nazwiskiem.

  2. Krótki opis Twoich celów (np. "Chcę zostać ekspertem od aranżacji wnętrz").

  3. Listę punktowaną (<ul>) pt. "Moje Skille / Supermoce", w której wymienisz min. 3 rzeczy, w których jesteś dobry (np. montaż wideo, szybkie pisanie na klawiaturze, znajomość Pythona czy granie w szachy, tworzenie grafiki i t.d).

  4. Link prowadzący do Twojego ulubionego portalu technologicznego lub kanału na YouTube, z którego czerpiesz wiedzę.

Zadanie 3. Praca z obrazem

Dodaj pod listą obrazek związany z Twoim hobby. Pamiętaj o atrybucie alt, który wyświetli się, gdyby obrazek nie mógł zostać wczytany.

Wskazówka: Jeśli obrazek jest w internecie, wklej link do niego w src. Jeśli masz go na komputerze, musi znajdować się w tym samym folderze co plik index.html.

Zadanie 4. Podsumowanie i praca domowa
Sprawdź, czy Twoja strona wyświetla się poprawnie. Jeśli tekst ma dziwne znaki zamiast polskich liter, upewnij się, że w sekcji <head> masz znacznik <meta charset="UTF-8">.

Dla chętnych: Spróbuj użyć znacznika <b> (pogrubienie) oraz <i> (kursywa) wewnątrz swoich akapitów.

Labels:

Komentarze

Prześlij komentarz