Rozdział 1 · Zadanie 8

Obrazki

Obrazek z internetu — a potem i własne zdjęcie z komputera.

Krok 1. Obrazek z internetu

Dodaj poniżej wszystkiego, co już jest:

index.html
<p>Mój obrazek:</p>
<img src="https://picsum.photos/300/200">
  
Jak to działa

<img> nie zamyka się (jak i <br>). Adres obrazka podaje się w atrybucie src.

Krok 2. Własny obrazek zamiast internetowego

1. Kliknij prawym przyciskiem myszy na obrazek → «Zapisz obraz jako» — zapisz go na komputerze.

2. Obok pliku index.html stwórz nowy folder i nazwij go images.

3. Przenieś zapisany obrazek do tego folderu.

4. Kliknij na obrazek w folderze prawym przyciskiem → «Zmień nazwę» → nazwij go photo.jpg.

5. Wróć do Notatnika i zmień linijkę z obrazkiem:

index.html
<img src="images/photo.jpg">
  
Zwróć uwagę

images/ oznacza «wejdź do folderu images», a photo.jpg — nazwa pliku wewnątrz niego.

Krok 3. Rozmiar obrazka

Jeśli obrazek jest za duży, ustaw mu rozmiar atrybutami width i height — liczby oznaczają rozmiar w pikselach:

index.html
<img src="images/photo.jpg" width="300" height="200">
  
Spróbuj

Zmień te liczby i zobacz, jak obrazek zmienia rozmiar na stronie.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska