Planowanie i podstawowa struktura strony

Cele:
Uczeń:

• zna etapy pracy nad stroną WWW,
• potrafi utworzyć folder projektu (WWW),
• tworzy pierwszą stronę z nagłówkiem i akapitem.

Ćwiczenia:

• Ćw. 1 – Przeglądamy i porównujemy strony WWW
• Ćw. 2 – Planujemy zawartość i układ strony

Mini-kompilator HTML Live

Poniżej możesz zmodyfikować i przetestować swój kod on-line.

Ćw. 3 – Tworzymy podstawową strukturę strony „Podróże po stolicach Europy”

Pliki:
index.html

Efekt:
Strona główna z tytułem, akapitem, nagłówkiem i opisem projektu.

Dodawanie elementów na stronę – listy, tabele, obrazy

Cele:
Uczeń:

• zna znaczniki <ul>, <ol>, <table>, <img>,
• potrafi dodać wypunktowanie, tabelę i obrazek do strony,
• zapisuje stronę lokalnie i poprawnie wyświetla w przeglądarce.

Zdjęcie

<img src="skate.jpg" alt="skate" width="500" height="600">

Tabela

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Rozbudowa projektu „Podróże po stolicach Europy”

• Ćw. 4 – Wprowadzamy wypunktowanie
• Ćw. 5 – Tworzymy tabelę
• Ćw. 6 – Wstawiamy zdjęcie na stronę

Pliki:
index2.html (kopiowany z index.html i rozbudowywany)

Wskazówki:
– Możecie pobrać z Internetu obraz (np. Wieża Eiffla) lub użyć gotowego pliku paryz.jpg.
– Pokazujesz różnice między border="0" a border="1".
– Dodatkowy atrybut do przetestowania align.

Efekt:
Strona z listą miast, tabelą państw i zdjęciem jednej, lub kilku stolic.

Przykładowy projekt sportowy

Projekt ten może posłużyć za wzór do stworzenia Twojego własnego projektu nt. „Podróże po stolicach Europy”

Kod do projektu:

<!DOCTYPE html>
<html>
<head>
  <title>Moja ulubiona dyscyplina sportu</title>
</head>
<body>

  <h1>Moja ulubiona dyscyplina sportu</h1>
  
  <img src="skate.jpg" alt="skate" width="500" height="300">
  
  <h2>Urban skating</h2>
  
  <p>Urban skating to styl jazdy na rolkach po mieście, który łączy swobodne przemieszczanie się z wykonywaniem trików, takich jak skoki czy slajdy.</p>
  <p>W tym stylu użytkownicy korzystają z rolek freeskate, mających twardą skorupę i krótką szynę, co zapewnia lepszą kontrolę podczas jazdy po miejskich przeszkodach.</p>
  
  <p><b>Najważniejsze zasady:</b></p>
  <ul>
    <li>Bezpieczeństwo – zawsze zakładaj ochraniacze i kask.</li>
    <li>Kultura jazdy – szanuj pieszych i innych użytkowników przestrzeni.</li>
    <li>Umiejętność – naucz się podstawowych technik: hamowania, skręcania i jazdy po nierównościach.</li>
  </ul>
  
  <h2>Tabela sportów rolkarskich</h2>
  <table border="1" width="100%">
    <tr>
      <th>Fitness</th>
      <th>Urban</th>
      <th>Slalom</th>
    </tr>
    <tr>
      <td>Styl rekreacyjny, skupiony na długich przejazdach po ścieżkach i parkach. Idealny do poprawy kondycji i relaksu.</td>
      <td>Dynamiczna jazda po mieście z wykorzystaniem krawężników, schodów i ramp. Często łączona z trikami.</td>
      <td>Precyzyjna jazda między pachołkami, wymagająca doskonałej równowagi i kontroli ruchów.</td>
    </tr>
    <tr>
      <td>Rolki lekkie, wygodne, z dużymi kołami (80–100 mm), dobre do jazdy po gładkich trasach.</td>
      <td>Rolki freeskate z twardą skorupą i sztywną cholewką – zapewniają stabilność przy skokach i zwrotach.</td>
      <td>Rolki z krótką szyną i mniejszymi kołami (76–84 mm), idealne do szybkich manewrów i figur.</td>
    </tr>
    <tr>
      <td>Najlepsze dla osób początkujących i średniozaawansowanych, które chcą jeździć dla zdrowia i przyjemności.</td>
      <td>Dla doświadczonych rolkarzy lubiących adrenalinę i szybkie reakcje w miejskim otoczeniu.</td>
      <td>Dla pasjonatów techniki i rytmu – często łączony z muzyką i pokazami.</td>
    </tr>
  </table>

</body>
</html>

Łączenie stron (hiperłącza) i tworzenie podstron

Cele:
Uczeń:

• potrafi tworzyć hiperłącza (<a href="">),
• umie połączyć strony w zestaw (strona główna ⇄ podstrona),
• rozumie, jak nawigować między plikami lokalnymi.

Ćwiczenia:

• Ćw. 7 – Dodajemy hiperłącze prowadzące do innej strony
• Ćw. 8 – Tworzymy podstronę

Pliki:
index.html – strona główna
warszawa.html, paryz.html – podstrony

Efekt:
Zestaw 2–3 połączonych stron z odsyłaczami „Strona główna ↔ Warszawa ↔ Paryż”.

Rozbudowa strony i tworzenie tła

Z sekcji:
– „Zadania” (s. 74)
– „Dla zainteresowanych”

Cele:
Uczeń:

• potrafi zmienić kolor tła lub wstawić tło graficzne,
• umie korzystać z dodatkowych znaczników stylu (inline CSS),
• projektuje własną stronę tematyczną.

Ćwiczenia:

• Zadanie 1 – rozbuduj stronę o pozostałe stolice, dodaj hiperłącza
• Zadanie 2 – ostrzeżenie o wirusach – ćwiczenie z grafiką klikalną
• Zadanie 3 – strona o pływaniu / pasji ucznia
• Dla zainteresowanych 1 – ustaw tło za pomocą CSS
• Dla zainteresowanych 2 – stwórz własny projekt strony z podstronami

Efekt:
Własny mini-serwis HTML z kilkoma podstronami i grafiką w tle.

Przykładowa zawartość folder ucznia po zakończeniu projektu:

Dokumenty\7K_ImieN\WWW_Stolice\
│
├── index.html
├── index2.html
├── paryz.html
├── warszawa.html
├── dublin.html
├── grafikaParyz.jpg
├── grafikaWarszawa.jpg
├── grafikaDublin.jpg
└── tlo.jpg

Dodatkowe modyfikacje:

Nowa struktura (z podfolderem na obrazy)

Dokumenty\7K_ImieN\WWW_Stolice\
│
├── index.html
├── index2.html
├── paryz.html
├── warszawa.html
├── dublin.html
└── img\
    ├── paryz.jpg
    ├── warszawa.jpg
    ├── dublin.jpg
    └── tlo.jpg

Obraz na stronie:

<img src="img/paryz.jpg" alt="Wieża Eiffla w Paryżu" width="320">

Obraz wyrównany w prawo (jak w podręczniku):

<img src="img/warszawa.jpg" alt="Panorama Warszawy" align="right" width="280">

Tło strony (inline – jedna linijka):

<body style="background-image:url('img/tlo.jpg');">

Podsumowanie

Nauczyliście się tworzenia:

1. struktury dokumentu,
2. dodawania treści,
3. łączenia stron,
4. projektowania wyglądu.

Umiesz stosować:

• border="1" w tabelach,
• align="right" w obrazach,
• style="background-image:url('...')" dla tła,
• width="300" dla obrazków,
• bgcolor (choć przestarzały, może być w celach dydaktycznych).

ciekawostka (dla chętnych):

Na końcu projektu, np. w lekcji podsumowującej, można pokazać uczniom, że:

<p style="color:darkgreen; font-family:Verdana;">
To jest przykładowy tekst ze stylem CSS.
</p>