Twoje Centrum Szkoleniowe

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.