WWW: landing page

Strona wakacyjna

1.Kod HTML bez stylów

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Wakacje Marzeń</title>
</head>
<body>

<h1>Wakacje Marzeń</h1>

<h2>Moje plany na wakacje</h2>
<ol>
  <li>Wyjazd nad morze</li>
  <li>Zwiedzanie zamków</li>
  <li>Wyprawa rowerowa z rodziną</li>
</ol>

<h2>Co zabieram ze sobą?</h2>
<ul>
  <li>Krem z filtrem</li>
  <li>Aparat fotograficzny</li>
  <li>Przewodnik turystyczny</li>
</ul>

<h2>Porównanie miejsc</h2>
<table border="1">
  <tr>
    <th>Miejsce</th>
    <th>Typ wypoczynku</th>
    <th>Ocena (1–5)</th>
  </tr>
  <tr>
    <td>Hel</td>
    <td>Plażowanie</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Zakopane</td>
    <td>Góry</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Malbork</td>
    <td>Zabytki</td>
    <td>4</td>
  </tr>
</table>

<h2>Moje ulubione miejsce</h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Morze_Ba%C5%82tyckie.jpg" alt="Morze Bałtyckie">

<h2>Galeria z wakacji</h2>
<img src="https://picsum.photos/id/1015/300/200" alt="Galeria 1">
<img src="https://picsum.photos/id/1016/300/200" alt="Galeria 2">
<img src="https://picsum.photos/id/1018/300/200" alt="Galeria 3">

<hr>
<p>&copy; 2025 Moja Wakacyjna Strona</p>

</body>
</html>

2. Stylowanie

<style>
  /* Styl całej strony: czcionka i tło */
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff; /* Jasnoniebieskie tło wakacyjne */
    margin: 0;
  }

  /* Styl nagłówka – wyróżnienie kolorem i centrowanie tekstu */
  header {
    background-color: #008cba; /* Kolor morski */
    color: white;
    padding: 20px;
    text-align: center;
  }

  h1 {
    margin: 0;
  }

  /* Stylowanie głównej treści strony */
  main {
    padding: 20px;
  }

  /* Styl stopki – spójny kolor z nagłówkiem */
  footer {
    background-color: #004466;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
  }

  /* Styl zdjęcia głównego: zaokrąglenie rogów i skalowanie */
  img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Delikatne zaokrąglenie */
  }

  /* Galeria obrazów – układ w wierszu z odstępami */
  .gallery {
    display: flex;
    gap: 10px; /* Odstępy między zdjęciami */
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .gallery img {
    width: 180px; /* Stała szerokość miniaturek */
    border: 2px solid #ccc; /* Ramka wokół zdjęcia */
  }

  /* Stylowanie tabeli – obramowanie i wyrównanie */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  table, th, td {
    border: 1px solid #008cba; /* Niebieskie linie jak nagłówek */
  }

  th, td {
    padding: 10px;
    text-align: center;
  }

  /* Stylowanie list wypunktowanych i numerowanych */
  ul, ol {
    margin-left: 20px;
  }
</style>

3. Źródło kodu całej strony

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>Wakacje Marzeń</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      background-color: #f0f8ff;
    }
    header {
      background-color: #008cba;
      color: white;
      padding: 20px;
      text-align: center;
    }
    h1 {
      margin: 0;
    }
    main {
      padding: 20px;
    }
    footer {
      background-color: #004466;
      color: white;
      text-align: center;
      padding: 10px;
      margin-top: 20px;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }
    .gallery {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .gallery img {
      width: 180px;
      border: 2px solid #ccc;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    table, th, td {
      border: 1px solid #008cba;
    }
    th, td {
      padding: 10px;
      text-align: center;
    }
    ul, ol {
      margin-left: 20px;
    }
  </style>
</head>
<body>

<header>
  <h1>Wakacje Marzeń</h1>
</header>

<main>
  <h2>Moje plany na wakacje</h2>
  <ol>
    <li>Wyjazd nad morze</li>
    <li>Zwiedzanie zamków</li>
    <li>Wyprawa rowerowa z rodziną</li>
  </ol>

  <h2>Co zabieram ze sobą?</h2>
  <ul>
    <li>Krem z filtrem</li>
    <li>Aparat fotograficzny</li>
    <li>Przewodnik turystyczny</li>
  </ul>

  <h2>Porównanie miejsc</h2>
  <table>
    <tr>
      <th>Miejsce</th>
      <th>Typ wypoczynku</th>
      <th>Ocena (1-5)</th>
    </tr>
    <tr>
      <td>Hel</td>
      <td>Plażowanie</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Zakopane</td>
      <td>Góry</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Malbork</td>
      <td>Zabytki</td>
      <td>4</td>
    </tr>
  </table>

  <h2>Moje ulubione miejsce</h2>
  <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/Morze_Ba%C5%82tyckie.jpg" alt="Morze Bałtyckie">

  <h2>Galeria z wakacji</h2>
  <div class="gallery">
    <img src="https://picsum.photos/id/1015/300/200" alt="Galeria 1">
    <img src="https://picsum.photos/id/1016/300/200" alt="Galeria 2">
    <img src="https://picsum.photos/id/1018/300/200" alt="Galeria 3">
  </div>
</main>

<footer>
  &copy; 2025 Moja Wakacyjna Strona
</footer>

</body>
</html>

Mój pierwszy landing page (L6)

Cel: stworzenie prostej strony HTML z tytułem, akapitem i listą.
Temat: Moje zainteresowania lub Lubię grać w Minecrafta

Kod HTML:

htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <title>Moje zainteresowania</title>
  </head>
  <body>
    <h1>Witaj na mojej stronie!</h1>
    <p>Interesuję się grami komputerowymi. Najbardziej lubię:</p>
    <ul>
      <li>Minecraft</li>
      <li>Gry logiczne</li>
      <li>Parkour w grach</li>
    </ul>
  </body>
</html>

Efekt:

Po otwarciu pliku w przeglądarce zobaczysz stronę z tytułem, krótkim tekstem i listą.

2. Landing page z grafiką i linkiem (L7)

Cel: dodanie do strony obrazka i aktywnego odnośnika
Temat: Moja ulubiona gra / pasja / kanał YouTube

Kod HTML (fragment):

htmlCopyEdit<h1>Gram w Minecrafta</h1>
<p>To moja ulubiona gra. Lubię budować zamki i farmy.</p>
<img src="images/minecraft.jpg" alt="Logo Minecrafta" width="300">
<p>Zobacz więcej na <a href="https://minecraft.net" target="_blank">oficjalnej stronie</a>.</p>

Wskazówka:

Utwórz folder images, zapisz tam plik minecraft.jpg, a następnie połącz wszystko z plikiem HTML.

3. Stylowanie strony landing page (L8)

Cel: połączenie HTML z plikiem CSS i estetyczne formatowanie
Temat: Counter-Strike – strona gracza

Struktura pliku HTML (index.html):

htmlCopyEdit<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Strona gracza CS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>CS:GO – Mój profil</h1>
    </header>
    <main>
      <p>Gram na mapach: Mirage, Dust2, Inferno.</p>
    </main>
    <footer>
      <p>Kontakt: gracz@csgo.pl</p>
    </footer>
  </body>
</html>

Styl (style.css):

cssCopyEditbody {
  background-color: #121212;
  color: #e0e0e0;
  font-family: 'Segoe UI', sans-serif;
}

header {
  background-color: #1f1f1f;
  padding: 20px;
  text-align: center;
}

main {
  margin: 20px;
  font-size: 18px;
}

footer {
  background-color: #1f1f1f;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

Efekt:

Strona w stylu „gamingowym” – ciemne tło, jasna czcionka, wyraźna struktura.

Co dalej?

Każdy z tych projektów może być rozwijany – np. przez dodanie przycisku Start, formularza kontaktowego, czy osadzenie wideo.
Zachęcam uczniów, by rozwijali swoje strony o to, co ich interesuje – pasje, gry, sport, ulubione zespoły czy seriale.

Opublikowano

w

przez

admin

Tagi: