Formatowanie tekstu, linki i obrazki w HTML

Formatowanie tekstu w HTML

W tej lekcji wyjaśnimy, jak formatować tekst w HTML przy użyciu różnych tagów, aby nadać mu odpowiedni wygląd.

Tekst na stronie internetowej nie musi być jednolity. Dzięki HTML możesz łatwo zmieniać jego wygląd i wyróżniać różne fragmenty. Oto kilka popularnych tagów do formatowania tekstu:

 – Używany do wyróżnienia tekstu pogrubieniem (czyli tworzy mocno wyeksponowany tekst).
 – Używany do zaznaczenia tekstu kursywą (czyli tekst pochylony).
 – Alternatywny sposób pogrubienia tekstu, jednakże w nowoczesnym HTML bardziej zaleca się używanie tagu , który lepiej komunikuje się z wyszukiwarkami i narzędziami dla osób niedowidzących.
 – Podobnie jak , ten tag zmienia tekst na kursywę, ale zalecamy korzystanie z  z podobnych powodów.
 – Służy do podkreślania tekstu.

Przykładowy kod:

<p>To jest <strong>pogrubiony tekst</strong>, a to jest <em>tekst kursywą</em>.</p>
<p>Możemy również <b>pogrubić</b> tekst, <i>pochylić</i> go lub <u>podkreślić</u>.</p>

Jako wynik zobaczymy:

Te tagi pozwalają wyróżnić różne fragmenty tekstu, co sprawia, że staje się on bardziej przejrzysty i estetyczny.

Tworzenie linków w HTML

eraz możemy nauczyć użytkowników, jak dodawać linki, które pozwalają przenosić się między stronami internetowymi.

Linki (hiperłącza) są podstawą nawigacji po Internecie. Używając tagu <a>, możemy utworzyć link do innej strony internetowej. Oto, jak to zrobić:

Tag <a> – Służy do tworzenia hiperłączy. Atrybut href oznacza “hypertext reference” i określa adres strony, do której prowadzi link.

Przykładowy kod:

<a href="https://itek.pl">Kliknij tutaj, aby przejść do strony</a>

W tym przypadku, gdy użytkownik kliknie tekst “Kliknij tutaj”, zostanie przeniesiony na stronę itek.pl. Możemy też tworzyć linki do innych sekcji tej samej strony czyli w wybrane miejsce na tej samej stronie:

<a href="#sekcja1">Przejdź do sekcji 1 na tej stronie</a>

Linki to bardzo ważny element HTML, który umożliwia połączenie różnych stron internetowych w sieci.

Wstawianie obrazków w HTML

Kolejnym krokiem będzie dodanie obrazków do strony. Wyjaśnimy, jak to zrobić przy użyciu tagu <img>.

Obrazki mogą wzbogacić każdą stronę internetową. W HTML używamy do tego tagu <img>. Jest on samodzielny, więc nie potrzebuje tagu zamykającego. Oto, jak wstawić obrazek:

Tag <img> – Aby dodać obrazek, używamy atrybutu src, który wskazuje ścieżkę do pliku graficznego. Dodatkowo, warto używać atrybutu alt, który opisuje obrazek (ważne dla osób niedowidzących oraz dla wyszukiwarek).

Przykładowy kod:

<img src="obrazek.jpg" alt="Opis obrazka">

Atrybut src może wskazywać na plik lokalny (jeśli obrazek znajduje się na serwerze) albo na obrazek dostępny w Internecie, np.:

<img src="https://example.com/obrazek.jpg" alt="Przykładowy obrazek">

Obrazki dodają wizualny kontekst do strony i mogą uatrakcyjnić jej wygląd.

Ćwiczenie – Dodajemy linki i obrazki do strony

Teraz czas na kolejne ćwiczenie, które połączy naukę o linkach i obrazkach.

Zadanie: Spróbuj dodać do swojej strony link oraz obrazek. Oto przykład, który możesz dostosować do swoich potrzeb:

<!DOCTYPE html>
<html>
<head>
  <title>Moja strona z obrazkiem</title>
</head>
<body>
  <h1>Witaj na mojej stronie!</h1>
  <p>To jest moja strona z obrazkiem i linkiem.</p>
  <img src="https://example.com/obrazek.jpg" alt="Przykładowy obrazek">
  <p>Odwiedź <a href="https://example.com">tę stronę</a>, aby dowiedzieć się więcej.</p>
</body>
</html>

Wstaw obrazek oraz link, a następnie sprawdź w przeglądarce, czy wszystko działa poprawnie. Pamiętaj, aby dopasować ścieżkę do obrazka i adres URL linku do swoich potrzeb.

Gratulacje! Ukończyłeś lekcję 2.
Przejdź teraz do lekcji 3 >> Listy, tabele i formularze w HTML