waszkiewicz.media

506 566 920
Formularz

Agencja interaktywna | Strony WWW | Pozycjonowanie | Social Media

Projektujemy i budujemy strony internetowe, pozyskujemy klientów, zwiększamy sprzedaż i promujemy Twoją markę w sieci Internet.

Wszystkie usługi

2.3. Wstawianie obrazów na stronie

W dzisiejszej lekcji zajmiemy się umieszczaniem obrazów na stronach internetowych. Obrazy są nie tylko wizualnie atrakcyjne, ale także potrafią wzbogacić treść i przyciągnąć uwagę odwiedzających. Nauczysz się, jak w prosty sposób dodawać i dostosowywać obrazy w swoich projektach HTML, a także zobaczysz praktyczne przykłady ich zastosowania.

Używanie znacznika <img>

Zacznijmy od podstaw. Aby dodać obraz do strony, używamy znacznika <img>. Oto prosty przykład:

<img src="obraz.jpg" alt="Opis obrazu">

W powyższym przykładzie użyliśmy atrybutu src do określenia źródła obrazu oraz atrybutu alt do dodania tekstu alternatywnego.

Atrybut src – źródło obrazu

Atrybut src jest niezwykle ważny, ponieważ wskazuje, skąd przeglądarka powinna pobrać obraz. Może to być lokalna ścieżka lub adres URL. Spróbujmy zastosować go w naszym dokumencie:

<img src="obraz.jpg" alt="Opis obrazu">

Atrybut alt – tekst alternatywny

Atrybut alt jest równie istotny. Zapewnia tekst alternatywny, który jest wyświetlany, gdy obraz nie może być załadowany lub dla użytkowników korzystających z czytników ekranu. Pamiętajmy o dostępności:

<img src="obraz.jpg" alt="Widok pięknej plaży">

Atrybut width – szerokość obrazu

Atrybut width pozwala dostosować szerokość obrazu. Przykładowo:

<img src="obraz.jpg" alt="Widok gór" width="800">

Zobacz inne atrybuty rozmiarów obraz:

Atrybut title – Tekst podręczny

Atrybut title dodaje tekst podręczny. Gdy najedziemy myszką na obraz, pojawi się podpowiedź:

<img src="obraz.jpg" alt="Niezwykły zachód słońca" title="Zachód nad morzem">

Wyrównanie obrazów

Możemy wyrównać obrazy za pomocą atrybutu align. Na przykład, aby umieścić obraz po prawej stronie:

<img src="obraz.jpg" alt="Kwiaty w ogrodzie" align="right">

Zobacz inne wartości atrybutu align:

Obrazy jako linki

Kombinując znaczniki <img> i <a>, możemy stworzyć obraz będący linkiem:

<a href="https://www.przykladowastrona.pl">
  <img src="logo.png" alt="Logo naszej strony">
</a>

Przykładowy dokument HTML z dodanym obrazem i tekstem

Oto przykład prostego dokumentu HTML z omawianą strukturą oraz umieszczonym obrazem między tekstem:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykładowa Strona</title>
</head>
<body>
    <h1>Witaj na Przykładowej Stronie!</h1>
    <p>To jest pierwsza lekcja kursu HTML. Nauczysz się tutaj podstaw tworzenia stron internetowych.</p>
    <img src="obraz.jpg" alt="Przykładowy Obrazek" width="300">
    <p>Tutaj umieściliśmy obrazek w tekście. To może być np. zdjęcie krajobrazu.</p>
    <p>Możesz również <a href="https://www.example.com">kliknąć tutaj</a>, aby odwiedzić przykładową stronę.</p>
</body>
</html>

W powyższym przykładzie:

  • Skorzystaliśmy z atrybutu charset w znaczniku <meta> w sekcji <head>, aby określić kodowanie znaków jako UTF-8.
  • Użyliśmy atrybutu lang w znaczniku <html>, aby oznaczyć język strony jako polski.
  • Zdefiniowaliśmy tytuł strony przy użyciu znacznika <title> w sekcji <head>.
  • Utworzyliśmy nagłówek pierwszego poziomu <h1> oraz paragrafy <p>.
  • Wstawiliśmy obrazek przy użyciu znacznika <img> z atrybutami src, alt i width.
  • Stworzyliśmy link <a>, który prowadzi do przykładowej strony internetowej.

Pamiętaj, że wartości takie jak obraz.jpg i https://www.example.com to przykładowe ścieżki i adresy URL. W rzeczywistym przypadku powinieneś użyć rzeczywistych ścieżek i adresów URL.

Zadzwoń