Twoje Centrum Szkoleniowe

Nauczmy się dziś czegoś nowego!

Kurs tworzenia stron - HTML + CSS

Podstawowe elementy HTML: nagłówki, akapity, linki, obrazy

Ostatnio stworzyliśmy nasz pierwszy dokument HTML i dodaliśmy do niego podstawowe treści. Teraz nadszedł czas, aby zgłębić wiedzę na temat podstawowych elementów HTML, które pozwolą Ci tworzyć bardziej złożone i atrakcyjne strony internetowe. Dziś skupimy się na nagłówkach, akapitach, linkach i obrazach – fundamentach każdej witryny.

 

Dlaczego te elementy są ważne?

    • Nagłówki pomagają strukturyzować treść i ułatwiają nawigację zarówno użytkownikom, jak i wyszukiwarkom.
    • Akapity pozwalają na czytelne prezentowanie tekstu.
    • Linki tworzą połączenia między stronami i zasobami, czyniąc internet siecią.
    • Obrazy dodają wizualnego zainteresowania i pomagają przekazać informacje w atrakcyjny sposób.

Poznanie i umiejętne wykorzystanie tych elementów jest kluczowe dla tworzenia przejrzystych i funkcjonalnych stron.

 

Nagłówki

Co to są nagłówki?

Nagłówki w HTML służą do oznaczania tytułów i podtytułów w treści strony. Pomagają one hierarchicznie zorganizować informacje.

Dostępne poziomy nagłówków

Istnieje sześć poziomów nagłówków, od <h1> do <h6>:

    • <h1> – najważniejszy nagłówek, zwykle używany dla tytułu strony lub głównego nagłówka.
    • <h2> – podtytuł, używany dla głównych sekcji.
    • <h3> do <h6> – kolejne podpoziomy nagłówków.

Jak używać nagłówków?

Przykład zastosowania nagłówków:

<h1>Moja strona o podróżach</h1>

<h2>Europa</h2>
<h3>Włochy</h3>
<p>Opis podróży do Włoch...</p>

<h3>Hiszpania</h3>
<p>Opis podróży do Hiszpanii...</p>

<h2>Azja</h2>
<h3>Japonia</h3>
<p>Opis podróży do Japonii...</p>

 

Wskazówki:

    • Hierarchia jest ważna: Nie pomijaj poziomów nagłówków (np. nie używaj <h4> bez wcześniejszego <h3>).
    • Jeden <h1> na stronę: Zwykle stosuje się tylko jeden główny nagłówek <h1>.

 

Akapity

Czym są akapity?

Akapity oznaczane znacznikiem <p> służą do grupowania tekstu w logiczne jednostki, ułatwiając czytanie i zrozumienie treści.

Jak tworzyć akapity?

Przykład:

<p>Podróże poszerzają horyzonty i pozwalają poznać nowe kultury.</p>
<p>Każda wyprawa to nowe doświadczenia i niezapomniane wspomnienia.</p>

 

Wskazówki:

    • Oddzielaj myśli: Każdy akapit powinien zawierać jedną główną myśl lub temat.
    • Czytelność: Krótkie akapity są łatwiejsze do czytania, zwłaszcza w internecie.

 

Linki

Czym są linki?

Linki (hiperłącza) tworzone za pomocą znacznika <a> pozwalają na przechodzenie do innych stron lub zasobów.

Struktura linku

Podstawowy link wygląda tak:

<a href="adres_URL">Tekst linku</a>

 

    • href – atrybut określający adres docelowy.
    • Tekst między znacznikami <a> i </a> jest klikalny.

Przykłady linków

Link do innej strony

<p>Odwiedź moją ulubioną stronę z kursami: <a href="https://www.egzaminator.pl">Egzaminator.pl</a>.</p>

 

Link do strony w tym samym serwisie

<a href="kontakt.html">Skontaktuj się z nami</a>

 

Link do adresu e-mail

<a href="mailto:kontakt@egzaminator.pl">Wyślij do mnie e-mail</a>

 

Link otwierający się w nowej karcie

Dodając atrybut target="_blank", link otworzy się w nowej karcie przeglądarki:

<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>

 

Wskazówki:

    • Opisowy tekst linku: Unikaj ogólnych sformułowań jak "kliknij tutaj". Lepiej użyć np. "Dowiedz się więcej o naszych usługach".
    • Dostępność: Upewnij się, że linki są zrozumiałe również poza kontekstem (ważne dla osób korzystających z czytników ekranu).

 

Obrazy

Jak dodawać obrazy?

Do wstawiania obrazów używamy znacznika <img>.

Podstawowa składnia:

<img src="ścieżka_do_obrazka" alt="Opis alternatywny">

 

    • src – atrybut określający ścieżkę do pliku graficznego.
    • alt – tekst alternatywny wyświetlany, gdy obraz nie może być załadowany; ważny dla dostępności i SEO.

Przykład

Dodajmy obrazek przedstawiający krajobraz:

<img src="obrazy/krajobraz.jpg" alt="Piękny górski krajobraz">

 

Atrybuty dodatkowe

    • width i height – określają szerokość i wysokość obrazu w pikselach lub procentach.
<img src="obrazy/krajobraz.jpg" alt="Piękny górski krajobraz" width="600" height="400">

 

    • Uwaga: Lepiej kontrolować rozmiar obrazów za pomocą CSS, ale na tym etapie możemy użyć atrybutów HTML.

Wskazówki:

    • Optymalizacja obrazów: Używaj obrazów o odpowiedniej rozdzielczości i formacie, aby nie spowalniać ładowania strony.
    • Organizacja plików: Przechowuj obrazy w dedykowanym folderze, np. obrazy lub img.

 

Praktyczne ćwiczenie

Tworzymy sekcję "O mnie" z linkami i obrazem

Spróbujmy zastosować zdobytą wiedzę w praktyce.

    1. Dodaj nagłówek drugiego poziomu:

      <h2>O mnie</h2>

       

    2. Napisz akapit z krótkim opisem:

      <p>Nazywam się Anna Nowak i pasjonuję się fotografią oraz podróżami.</p>

       

    3. Dodaj obrazek swojego zdjęcia:

      <img src="obrazy/anna.jpg" alt="Zdjęcie Anny Nowak">

       

    4. Dodaj link do swojego profilu na Instagramie:

      <p>Zapraszam na mój profil na <a href="https://www.instagram.com/anna_nowak" target="_blank">Instagramie</a>.</p>

       

    5. Dodaj listę ulubionych miejsc do odwiedzenia:

      <h3>Moje ulubione miejsca:</h3>
      <ul>
          <li>Japonia</li>
          <li>Nowa Zelandia</li>
          <li>Norwegia</li>
      </ul>

       

Sprawdź efekty

Zapisz plik i odśwież stronę w przeglądarce. Powinieneś zobaczyć nową sekcję z nagłówkiem, tekstem, obrazkiem i linkiem.

 

Dobre praktyki

    • Semantyka: Używaj odpowiednich znaczników do ich przeznaczenia. Nagłówki dla tytułów, akapity dla tekstu itp.
    • Dostępność: Zawsze dodawaj tekst alternatywny do obrazów (alt) i używaj opisowych tekstów linków.
    • Struktura: Dbaj o logiczny układ treści. Ułatwi to nawigację i zrozumienie strony przez użytkowników.

 

Częste błędy i jak ich unikać

    • Brak zamykających znaczników: Pamiętaj, że większość znaczników wymaga zamknięcia, np. <p>...</p>.
    • Niepoprawne zagnieżdżanie: Upewnij się, że znaczniki są poprawnie zagnieżdżone i nie nachodzą na siebie.
    • Zapomniane atrybuty: Nie pomijaj ważnych atrybutów, takich jak href w linkach czy src i alt w obrazach.

 

Podsumowanie

Dziś nauczyliśmy się:

    • Wykorzystywać nagłówki do strukturyzacji treści.
    • Tworzyć akapity dla czytelnego prezentowania tekstu.
    • Dodawać linki, które łączą naszą stronę z innymi zasobami.
    • Wstawiać obrazy, aby wzbogacić wizualnie naszą stronę.

Te podstawowe elementy są fundamentem każdej strony internetowej. Opanowanie ich pozwoli Ci tworzyć bardziej złożone i atrakcyjne witryny.

 

Zadania do samodzielnego wykonania

    1. Stwórz własną stronę hobby:

      • Wybierz temat, który Cię interesuje (np. sport, muzyka, gotowanie).
      • Użyj nagłówków, akapitów, linków i obrazów, aby przedstawić informacje na ten temat.
      • Dodaj linki do zewnętrznych źródeł lub stron związanych z Twoim hobby.
    2. Przetestuj linki wewnętrzne:

      • Jeśli Twoja strona składa się z kilku podstron, utwórz linki między nimi.
      • Przykład: z index.html dodaj link do kontakt.html.
    3. Eksperymentuj z różnymi poziomami nagłówków:

      • Stwórz strukturę strony z użyciem wszystkich poziomów nagłówków od <h1> do <h6> i zobacz, jak wpływają one na wygląd i hierarchię treści.

 

Ciekawostka

Czy wiesz, że tekst alternatywny w obrazach (alt) jest nie tylko ważny dla osób niewidomych korzystających z czytników ekranu, ale również dla wyszukiwarek internetowych? Pomaga on zrozumieć zawartość obrazu, co może poprawić pozycjonowanie Twojej strony w wynikach wyszukiwania.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się
Aby widzieć ocenę lekcji - Zaloguj się