Travel Website With Html And Css

Written by Margaret Weigel
Updated at: 08 June 2025

Wyobraź sobie, że budujesz dom. Najpierw potrzebujesz fundamentów.

W świecie stron internetowych, HTML to fundament.

HTML: Szkielet strony

HTML (HyperText Markup Language) to język znaczników.

Mówi przeglądarce, co ma wyświetlić.

Na przykład, nagłówki, akapity, obrazy.

Spójrz na ten kod:


    <h1>Witaj na mojej stronie podróżniczej!</h1>
    <p>Odkryj najpiękniejsze miejsca na świecie.</p>
    <img src="obrazek.jpg" alt="Piękny krajobraz">

To proste, prawda?

<h1> to nagłówek.

<p> to akapit.

<img> to obrazek.

Każdy element ma swój początek i koniec.

Oznaczony odpowiednimi znacznikami.

Jak książka z rozdziałami i akapitami.

Teraz, gdy mamy szkielet, potrzebujemy go upiększyć.

CSS: Makijaż strony

CSS (Cascading Style Sheets) to stylizacja.

To makijaż naszej strony.

Decyduje o kolorach, czcionkach, układzie.

Wyobraź sobie, że malujesz ściany w domu.

CSS mówi przeglądarce, jak ma wyglądać HTML.

Spójrz na ten kod:


    h1 {
      color: blue;
      font-size: 3em;
      text-align: center;
    }

    p {
      font-family: Arial, sans-serif;
      line-height: 1.5;
    }

To też jest proste!

h1 { ... } stylizuje wszystkie nagłówki.

Ustawia kolor na niebieski, rozmiar czcionki i wyśrodkowuje tekst.

p { ... } stylizuje wszystkie akapity.

Ustawia czcionkę i odstępy między wierszami.

CSS działa kaskadowo.

Oznacza to, że style mogą się nakładać.

Style zdefiniowane później mają pierwszeństwo.

Jak ubrania nałożone na siebie.

Budujemy stronę podróżniczą

Teraz zbudujmy prostą stronę podróżniczą.

Z użyciem HTML i CSS.

Krok 1: HTML


    <!DOCTYPE html>
    <html>
    <head>
      <title>Moje podróże</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header>
        <h1>Witaj w moim blogu podróżniczym!</h1>
      </header>
      <main>
        <article>
          <h2>Podróż do Włoch</h2>
          <img src="wlochy.jpg" alt="Włochy">
          <p>Wspaniała podróż do słonecznej Italii...</p>
        </article>
        <article>
          <h2>Wyprawa do Japonii</h2>
          <img src="japonia.jpg" alt="Japonia">
          <p>Niesamowita kultura i krajobrazy Japonii...</p>
        </article>
      </main>
      <footer>
        <p>© 2023 Moje podróże</p>
      </footer>
    </body>
    </html>

Zauważ: używamy znaczników <header>, <main>, <article>, <footer>.

Pomagają one uporządkować strukturę strony.

Krok 2: CSS

Utwórz plik style.css i dodaj:


    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 1em 0;
      text-align: center;
    }

    main {
      padding: 20px;
    }

    article {
      margin-bottom: 20px;
      border: 1px solid #ddd;
      padding: 10px;
      background-color: #fff;
    }

    article img {
      width: 100%;
      height: auto;
    }

    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 1em 0;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

To tylko podstawowe style.

Możesz je dowolnie modyfikować.

Aby strona wyglądała jeszcze lepiej.