Obrazy: dodawanie grafik do strony
Wstawianie i formatowanie obrazów na stronie internetowej
Obrazy: dodawanie grafik do strony to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Obrazy: dodawanie ilustracji do strony
Witamy w następnej lekcji! Dziś nauczymy się dodawać obrazy do stron internetowych. Obrazy sprawiają, że strony są ciekawsze i przyjemniejsze!
Czym są obrazy w HTML?
Obrazy dodaje się do stron internetowych za pomocą znacznika <img>. Jest to znacznik samozamykający, co oznacza, że nie wymaga znacznika zamykającego, takiego jak </img>.
Dowiedzmy się, jak go używać!
Dodawanie obrazu
Aby dodać obraz, użyj atrybutu src, aby określić lokalizację pliku obrazu.
Przykład:
W tym przykładzie:
src: Określa plik obrazu.alt: Zawiera tekst alternatywny wyświetlany, gdy obrazu nie można wyświetlić.
<img src="https://www.w3.org/html/logo/img/html5-display.png"
alt="A beautiful view" />
Tekst alternatywny (atrybut alt)
Atrybut alt opisuje obraz. Jest ważny z punktu widzenia dostępności i pomaga wyszukiwarkom zrozumieć zawartość obrazu.
Przykład:
Jeśli obraz się nie załaduje, zamiast niego pojawi się tekst "A beautiful sunset over the ocean".
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A beautiful sunset over the ocean" />
Dodawanie wymiarów obrazu
Rozmiar obrazu można określić za pomocą atrybutów width i height.
Przykład:
W tym przykładzie szerokość obrazu ustawiono na 300 pikseli, a wysokość na 200 pikseli.
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A red flower" width="300" height="200" />
Tworzenie odnośników z obrazów
Można zmienić obraz w klikalny odnośnik, umieszczając go wewnątrz znacznika <a>.
Przykład:
Po kliknięciu obrazu użytkownik zostanie przeniesiony do adresu https://example.com.
<a href="https://example.com">
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Example Logo" />
</a>
Używanie obrazów z internetu
Można używać obrazów hostowanych w internecie, podając ich adres URL w atrybucie src.
Przykład:
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="Online Image" />
Wypróbuj samodzielnie
Utwórzmy prostą stronę internetową z obrazami. Oto przykład:
<!DOCTYPE html>
<html>
<head>
<title>My Image Page</title>
</head>
<body>
<h1>Welcome to My Gallery</h1>
<img src="cat.jpg" alt="A cute cat" width="400" />
<p>This is my adorable cat!</p>
<img src="https://www.w3.org/html/logo/img/html5-display.png" alt="A playful dog" />
<p>This is a friendly dog from the internet!</p>
</body>
</html>
Świetna robota!
Gratulacje! Wiesz już, jak dodawać obrazy do stron internetowych, ustawiać ich wymiary, a nawet tworzyć z nich odnośniki do innych stron. Obrazy sprawiają, że strony są ciekawsze i atrakcyjniejsze wizualnie. W następnej lekcji nauczymy się tworzyć tabele do porządkowania danych. Przygotuj się, aby nadać swoim stronom jeszcze większą funkcjonalność!
Często zadawane pytania
Czy lekcja „Obrazy: dodawanie grafik do strony” jest bezpłatna?
Tak — pełny tekst „Obrazy: dodawanie grafik do strony” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.
Co nauczysz się w „Obrazy: dodawanie grafik do strony”?
Wstawianie i formatowanie obrazów na stronie internetowej Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Obrazy: dodawanie grafik do strony”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Nagłówki i akapity
- Listy: uporządkowane i nieuporządkowane
- Odnośniki: łączenie sieci
- Obrazy: dodawanie grafik do strony