Strona internetowa HTML – szablon

Netido > Blog > Strona internetowa HTML – szablon
Strona internetowa HTML

Strona internetowa HTML w notatniku

Tworzenie stron internetowych może wydawać się zadaniem skomplikowanym, zwłaszcza dla osób rozpoczynających swoją przygodę z programowaniem. Jednak HTML (HyperText Markup Language) jest językiem, który stanowi fundament większości stron internetowych i w tym artykule przyswoimy jego podstawy. Poza tym omówimy jak krok po kroku wygląda proces powstawania strony internetowej HTML, tworzonej od podstaw w edytorze tekstowym np. Notatnik. Następnie przygotujemy funkcjonalny szablon strony internetowej HTML oraz opiszemy jego wygląd w pliku CSS.

Spis treści

  1. Do czego używa się HTML?
  2. Czym jest HTML?
  3. Gotowy szablon strony internetowej HTML z podstronami
  4. Style CSS
  5. Testowanie strony

1

Do czego używa się HTML?

Znajomość HTML jest niezbędna dla każdego, kto chce sprawnie działać w internecie. Poza tym to jedna z pierwszych umiejętności, które warto opanować przy budowaniu obecności online. Poniżej kilka przykładów, gdzie wiedza z zakresu HTML będzie bardzo pomocna:

  • Tworzenie stron internetowych: HTML jest podstawowym językiem do tworzenia struktur stron internetowych. Znając HTML, możesz projektować i tworzyć własne witryny www, obejmujące różnorodne treści, od tekstu po multimedia.
  • Edycja treści online: Wiedza z zakresu HTML może być przydatna, gdy musisz edytować treści na stronach internetowych, na przykład przy aktualizacji treści na blogu, czy stronie firmowej.
  • Tworzenie newsletterów i e-maili: Wiele systemów do wysyłania newsletterów i e-maili wymaga znajomości HTML do dostosowywania wyglądu i układu wiadomości.
  • Blogowanie: Platformy do tworzenia blogów często pozwalają na korzystanie z HTML do dostosowywania treści i układu wpisów.
  • E-commerce: W przypadku sklepów internetowych znajomość HTML pozwala dostosować wygląd produktów, strony kategorii, koszyka itp.
  • CMS: Popularne systemy CMS, takie jak WordPress, często pozwalają na edytowanie treści za pomocą HTML, co daje większą kontrolę nad wyglądem strony.
  • Analiza i optymalizacja strony: Znając HTML, można zrozumieć strukturę strony internetowej, co jest przydatne podczas analizy i optymalizacji pod kątem SEO (optymalizacji dla wyszukiwarek internetowych) i wydajności.

2

Czym jest HTML?

HTML, to język znaczników używany do tworzenia i strukturyzowania zawartości stron internetowych. Przede wszystkim HTML definiuje elementy i ich atrybuty, które określają, jak treść ma być wyświetlana w przeglądarce internetowej. Poza tym jest jednym z podstawowych języków używanych do budowy stron internetowych, a jego składnia opiera się na znacznikach, które są umieszczane w kodzie źródłowym strony.

Poniżej przedstawię kilka kluczowych cech HTML:

  1. Znaczniki: HTML opiera się na użyciu znaczników, które definiują różne elementy strukturalne dokumentu. Znaczniki zazwyczaj występują w parach, zaczynając od znacznika otwierającego i kończąc na znaczniku zamykającym. Przykładowo, <p> to znacznik paragrafu, a </p> to znacznik kończący paragraf.
  2. Struktura dokumentu: HTML definiuje podstawowe elementy struktury dokumentu, takie jak nagłówek, paragrafy, listy, obrazy, linki, formularze itp. Struktura ta pomaga organizować i prezentować treść w sposób logiczny.
  3. Atrybuty: Znaczniki mogą mieć atrybuty, które dostarczają dodatkowych informacji o danym elemencie. Na przykład, znacznik obrazu może mieć atrybut „src” określający źródło obrazu.
  4. Wersje HTML: HTML rozwija się, i istnieje wiele wersji tego języka. Obecnie najnowszą wersją jest HTML5, która wprowadza nowe funkcje, tagi i usprawnienia, takie jak obsługa multimediów, lokalizacja geograficzna, a także poprawiona semantyka struktury dokumentu.
  5. Zastosowanie w WWW: HTML jest kluczowym elementem World Wide Web, umożliwiając strukturyzację i prezentację treści na stronach internetowych. Najczęściej używany jest w połączeniu z CSS (Cascading Style Sheets) do określania wyglądu witryny.
  6. Semantyka: HTML5 wprowadza bardziej semantyczne znaczniki, co ułatwia zrozumienie struktury dokumentu zarówno dla przeglądarek, jak i dla programistów. Przykładowe tagi takie jak <header>, <nav>, <article>, <section>, <footer>, które precyzyjnie opisują różne części dokumentu.
Strona internetowa HTML - mockup
Strona internetowa HTML – mockup

Podstawowa struktura strony HTML

Pierwszym krokiem w tworzeniu strony jest utworzenie ram szablonu w HTML.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Strona</title>
    <meta name="description" content="Opis strony.">
</head>
<body>
    <!-- Treść strony będzie tutaj -->
</body>
</html>
  • <!DOCTYPE html>: Określa wersję HTML.
  • <html>: Najwyższy poziom elementu reprezentujący całą stronę.
  • <html lang="pl">: Język strony.
  • <head>: Zawiera informacje o dokumencie, takie jak tytuł, metadane, itp.
  • <meta charset="UTF-8">: Określa zestaw znaków używany w dokumencie.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Zapewnia responsywność na różnych urządzeniach.
  • <title>: Określa tytuł strony, który będzie widoczny w pasku przeglądarki.
  • <meta name="description">: Zwięzły opis strony, wyświetla się w wynikach wyszukiwania pod tytułem.
  • <body>: Zawiera widoczną treść strony.

Podstawowe elementy HTML

Dodajmy teraz kilka podstawowych elementów HTML do sekcji <body>:

<body>
    <header>
        <h1>Witaj na Mojej Stronie</h1>
        <nav>
            <ul>
                <li><a href="#section1">Sekcja 1</a></li>
                <li><a href="#section2">Sekcja 2</a></li>
                <li><a href="#section3">Sekcja 3</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Sekcja 1</h2>
            <p>To jest treść sekcji 1.</p>
        </section>

        <section id="section2">
            <h2>Sekcja 2</h2>
            <p>To jest treść sekcji 2.</p>
        </section>

        <section id="section3">
            <h2>Sekcja 3</h2>
            <p>To jest treść sekcji 3.</p>
            <div>
                <h3>Nagłówek elementu blokowego div</h3>
                <p>To jest paragraf w elemencie blokowym div.</p>
            </div>
        </section>
    </main>

    <footer>
        <p>© 2023 Moja Strona. Wszelkie prawa zastrzeżone.</p>
    </footer>
</body>
  • <header>: Nagłówek strony zawierający tytuł.
  • <nav>: Nawigacja, zazwyczaj zawierająca menu z linkami do różnych sekcji strony.
  • <ul> i <li>: Listy nieuporządkowane i ich elementy, używane do stworzenia menu.
  • <section>: Sekcje strony, które można nazwać i odnosić się do nich poprzez identyfikatory.
  • <div>: Służy do definiowania bloku, jest także często używany do grupowania innych elementów HTML w jednym bloku, który można stylizować za pomocą arkuszy stylów (CSS).
  • <h1>, <h2>: Nagłówki na stronie. W przypadku każdej strony zaleca się używanie tylko jednego nagłówka <h1>. Inne nagłówki <h2>, <h3>, itd., mogą być używane do podziału zawartości na podsekcje. Ponadto Upewnij się, że nagłówek <h1> jest unikalny dla każdej strony i jasno odzwierciedla jej zawartość. Dobrze, aby zawierał główne słowa kluczowe związane z tematem strony.
  • <p>: Używany jest do definiowania bloku tekstu jako paragraf.
  • <footer>: Stopka strony, zawierająca informacje o autorze, prawach autorskich itp.

Dodawanie grafiki i linków

Umieścimy teraz obraz i link do sekcji 1 (section1):

<section id="section1">
    <h2>Sekcja 1</h2>
    <p>To jest treść sekcji 1.</p>
    <img src="obraz.jpg" alt="Opis obrazu">
    <a href="https://www.example.com">Link do strony zewnętrznej</a>
</section>
  • <img>: Dodaje obraz do strony. src to ścieżka do pliku obrazu, a alt to tekst zastępczy dla obrazu.
  • <a>: Dodaje hiperłącze. href to adres, do którego prowadzi link.

Tabela w HTML

Tworzenie tabel za pomocą tagów <table>, <tr>, <td>.

<table>
  <tr>
    <td>Wiersz 1, Komórka 1</td>
    <td>Wiersz 1, Komórka 2</td>
  </tr>
  <tr>
    <td>Wiersz 2, Komórka 1</td>
    <td>Wiersz 2, Komórka 2</td>
  </tr>
</table>

Formularz na stronie HTML

Służą do zbierania danych od użytkownika.

<form action="/submit" method="post">
  <label for="username">Nazwa użytkownika:</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Wyślij">
</form>

3

Gotowy szablon strony internetowej HTML z podstronami

Teraz zajmiemy się przygotowaniem struktury szablonu dla strony głównej index.html. Oto przykład i wzór prostego szablonu gotowej strony w HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Moja Strona</title>
    <meta name="description" content="Opis strony.">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <a href="index.html"><img src="../ścieżka-do-grafiki-z-logo.jpg" alt="Logo"></a>
        <nav>
            <ul>
                <li><a href="index.html">Strona główna</a></li>
                <li><a href="o-mnie.html">O mnie</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h1>Strona główna</h1>
            <p>Witaj na stronie głównej mojej witryny!</p>
            <img src="obraz.jpg" alt="Opis obrazu">
            <a href="https://www.example.com">Link do strony zewnętrznej</a>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 Moja Strona</p>
    </footer>
</body>
</html>

Aby stworzyć podstrony, utwórz pliki HTML dla każdej z nich (np. o-mnie.html i kontakt.html) i dodaj odpowiednie linki w menu nawigacyjnym. W każdej podstronie umieść treść zgodnie z ich przeznaczeniem. Ogólnie szablon będzie podobny dla każdej z podstron, natomiast zmianie będzie podlegać zawartość w sekcji <main>. Zmodyfikuj również linki w menu nawigacyjnym, aby wskazywały na odpowiednie pliki HTML podstron.

4

Style CSS

Jeśli mamy już przygotowaną strukturę strony w HTML, to możemy zająć się nadaniem im indywidualnego wyglądu w CSS. W skrócie HTML definiuje strukturę strony, a CSS nadaje wygląd i układ elementom HTML. Dlatego wprowadzając reguły stylów możemy zdecydować m.in. o kolorach, fontach, marginesach, animacjach, rozmieszczeniu poszczególnych sekcji nadając indywidualny charakter witrynie internetowej.

Poza tym głównym celem CSS jest oddzielenie struktury dokumentu od jego stylizacji, co umożliwia bardziej elastyczne i efektywne zarządzanie wyglądem witryny.

Poniżej wskażę kluczowe cechy CSS:

  1. Zastosowanie do HTML: CSS jest używane do określania stylów prezentacji dla elementów HTML. Dzięki temu możemy kontrolować takie właściwości jak kolor, czcionka, odstępy, marginesy, układ strony, animacje, przejścia i wiele innych.
  2. Znaczniki i selektory: W CSS stosuje się znaczniki i selektory, aby wybrać konkretne elementy HTML i zastosować do nich określone style. Na przykład, selektor h1 odnosi się do wszystkich nagłówków pierwszego poziomu, a #id odnosi się do unikalnego elementu o konkretnym identyfikatorze np. <section id="section1"> i w CSS będzie to #section1. Dodatkowo jeśli chcemy nadać styl kilku elementom na stronie, to możemy posłużyć się klasą .class i w HTML będzie to np. <section class="black">, a w CSS odniesiemy się za pomocą .black.
  3. Kaskadowość: Styl CSS może być dziedziczony i nadpisywany, co oznacza, że można zdefiniować ogólne style dla pewnego rodzaju elementów i dostosowywać je bardziej szczegółowo dla konkretnych elementów.
  4. Media i urządzenia: CSS umożliwia dostosowywanie stylów do różnych mediów, co pozwala na przygotowanie responsywnej strony internetowej. Można definiować style dla ekranów komputerów, czy urządzeń mobilnych.
  5. Animacje i przejścia: CSS oferuje możliwość dodawania animacji i efektów przejścia do elementów strony. Dzięki temu możemy dodawać elementy interaktywne i tworzyć atrakcyjne wizualnie witryny.
  6. Flexbox i Grid: CSS3 wprowadziło nowe układy jak Flexbox i Grid, które ułatwiają projektowanie elastycznych i responsywnych sekcji strony.
Strona internetowa HTML - mobile
Strona internetowa HTML – mobile

Przykładowa zawartość pliku CSS

Teraz jeszcze w pliku HTML w sekcji head strony podajemy ścieżkę do zewnętrznego pliku CSS, w którym zdefiniujemy wygląd strony.

<head>
    <!-- ... -->
    <link rel="stylesheet" href="style.css">
</head>

Przykładowy plik CSS również możesz przygotować w notatniku. Stwórz zatem plik style.css i dodaj stylizacje:

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
}

header, nav, section, footer {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ccc;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 10px;
}

footer {
    text-align: center;
    color: #777;
}

5

Testowanie strony

Zapisz swój plik ze stroną główną jako index.html i otwórz go w przeglądarce internetowej, aby zobaczyć efekty swojej pracy.

Gratulacje! Stworzyłeś stronę internetową przy użyciu HTML. To tylko podstawy, ale już teraz możesz zacząć eksperymentować i rozwijać swoje umiejętności przerabiając kurs HTML CSS. Pamiętaj, że HTML to tylko fundament – możesz też poszerzyć swoją wiedzę o CSS i JavaScript, aby dodać styl i interakcję do swojej strony. Powodzenia!

Przeczytaj także