Aby wstawić obrazek w HTML używając Notatnika, wystarczy zastosować odpowiedni znacznik <img>, podać ścieżkę do pliku graficznego oraz zadbać o dodatkowe atrybuty (np. opis alternatywny). Poniżej znajdziesz szczegółowy poradnik krok po kroku, przykłady zastosowań oraz praktyczne wskazówki, dzięki którym umieścisz zdjęcie na stronie internetowej – nawet jeśli jesteś osobą początkującą.
Przygotowanie obrazu
- Wybierz grafikę w odpowiednim formacie (najczęściej JPG, PNG lub GIF).
- Upewnij się, że plik nie jest zbyt duży – zbyt ciężkie zdjęcia mogą spowalniać ładowanie strony.
- Skopiuj plik obrazu do tego samego folderu co plik HTML (lub zapisz jego pełną ścieżkę, jeśli znajduje się gdzie indziej).
Podstawowy kod HTML do wstawiania obrazu
Najważniejsze jest użycie znacznika <img>. Jest on samozamykający, czyli nie wymaga znacznika kończącego.
Oto najprostszy przykład:
<img src="nazwa_pliku.jpg" alt="Opis obrazka">
- src – ścieżka do grafikę (np.
"zdjecie.png","img/logo.jpg","https://adres-strony/obrazek.png"); - alt – opis alternatywny, ważny dla dostępności i SEO.
Umieszczanie kodu w Notatniku i zapis pliku
- Otwórz Notatnik.
- Wklej kod sekcji
<body>, na przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład obrazka w HTML</title>
</head>
<body>
<h1>To jest mój obrazek:</h1>
<img src="kotek.jpg" alt="Zdjęcie kotka" title="Mój ulubiony kotek">
</body>
</html>
- Zapisz plik jako
index.html(ważne: wybierz „Wszystkie pliki” i kodowanie UTF-8). - Otwórz plik dwuklikiem, aby zobaczyć swoją stronę w przeglądarce.
Najważniejsze atrybuty znacznika <img>
- src – wskazuje lokalizację obrazka;
- alt – tekst alternatywny, wyświetlany gdy obraz się nie załaduje (ważny dla osób korzystających z czytników ekranu);
- title – dymek pojawiający się po najechaniu myszą.
Przykład z atrybutami:
<img src="logo.png" alt="Logo firmy" title="Logo firmy XYZ">
Zaawansowane przykłady i zastosowania
Zmiana rozmiaru obrazka
Za pomocą atrybutów width i height można łatwo zmienić wielkość wyświetlania obrazka:
<img src="pies.jpg" alt="Pies na trawie" width="300" height="200">
Obrazek jako link
Obrazki mogą być także klikalne – wystarczy owinąć je znacznikiem <a>:
<a href="https://przykladowastrona.pl">
<img src="reklama.jpg" alt="Kliknij tutaj!">
</a>
Obrazek z zewnętrznego adresu
Możesz korzystać z grafik dostępnych w internecie:
<img src="https://domena.pl/obrazki/zima.jpg" alt="Zima w górach">
Stylizowanie obrazów za pomocą CSS
Obrazki można dodatkowo stylizować – np. dodać ramkę, zaokrąglić rogi albo ustawić marginesy. Przykład:
<img src="avatar.png" alt="Avatar użytkownika" style="border-radius: 50%; border: 2px solid #333; margin: 10px;">
Możliwości CSS są bardzo szerokie i pozwalają w pełni dostosować wygląd zdjęcia do projektu strony.
Najczęstsze błędy i wskazówki
- Sprawdź, czy nazwa pliku obrazu dokładnie zgadza się z wpisaną w kodzie (wielkość liter ma znaczenie w niektórych systemach!).
- Upewnij się, że ścieżka do pliku jest poprawna.
- Zawsze stosuj atrybut alt – to wzmacnia dostępność i SEO.
- Testuj swoją stronę w przeglądarce po każdej zmianie.
Podsumowując – wstawianie obrazka w HTML z pomocą Notatnika jest proste i wymaga tylko kilku podstawowych kroków. Opanowanie znacznika <img> i atrybutów takich jak src, alt, title to fundament budowania stron internetowych z treściami graficznymi. Opisane przykłady możesz dowolnie modyfikować i rozszerzać o dodatkowe funkcjonalności oraz style.
