Lekcja 3: Dodawanie obrazów i linków – Bo kto chce nudną stronę internetową?

Lekcja 3

Lekcja 3: Dodawanie obrazów i linków – Bo kto chce nudną stronę internetową?

Witamy na Lekcji 3! Do tej pory twoja strona internetowa mogła przypominać wypracowanie z języka polskiego, ale już wkrótce ją rozruszamy. Dziś dodamy obrazy i linki — bo nic tak nie krzyczy „profesjonalizm”, jak strona pełna zdjęć kotów i memów do klikania. Zróbmy twoją stronę mniej „meh” a bardziej „wow” z pomocą kilku prostych znaczników!

Dodawanie obrazów: Obraz mówi więcej niż tysiąc słów (i mniej nudzi)

Obrazy to jak keczup na frytkach – niby można bez niego, ale czy naprawdę? Aby dodać obraz, użyjemy znacznika <img>. Jest on samozamykający, bo obraz nie potrzebuje towarzystwa, żeby wyglądać dobrze.

Jak to zrobić:

Wariant 1: Używanie obrazu z internetu

Znalazłeś świetne zdjęcie w internecie? Świetnie! Kliknij na nie prawym przyciskiem myszy, otwórz w nowej karcie, skopiuj URL i wklej go do atrybutu src, jak poniżej:

<img src="https://example.com/your-image.jpg" alt="Opis obrazu">
  • src: To jest link do twojego obrazu (tak jak GPS mówi przeglądarce, gdzie znaleźć obraz).
  • alt: Krótki opis na wypadek, gdyby obraz nie chciał się załadować lub gdy twój znajomy używa internetu na korbkę.

Wariant 2: Używanie lokalnego obrazu

Masz zdjęcie na swoim komputerze? Świetnie! Zapisz je w folderze swojego projektu (np. w folderze images) i wskaż do niego ścieżkę w atrybucie src, tak jak tutaj:

<img src="images/my-local-image.jpg" alt="Opis lokalnego obrazu">

Przykład:

<!-- Obraz z internetu -->
<img src="https://example.com/super-kot.jpg" alt="Super kot wylegujący się na leżaku na plaży">

<!-- Lokalny obraz -->
<img src="images/moj-kot.jpg" alt="Lokalny kot patrzący na ciebie z góry">

Zadanie: Dodaj obraz do swojej strony

Znajdź obraz – śmieszny, inspirujący albo po prostu dziwny – i dodaj go do swojej strony. Możesz użyć adresu URL z internetu lub lokalnego pliku. Nie zapomnij o tekście alt, bo nic nie mówi „profesjonalista” tak jak dobrze opisany obraz.

Dodawanie linków: Daj ludziom gdzieś pójść

Co to za strona bez linków? Za pomocą znacznika <a> możesz sprawić, że tekst stanie się klikalny i wyślesz odwiedzających na interesujące miejsca w internecie – cokolwiek wybierzesz.

Oto magiczna formuła:

<a href="https://www.example.com">Kliknij tutaj, aby zobaczyć coś niesamowitego!</a>
  • href: To miejsce, do którego prowadzi link (żaden GPS nie jest potrzebny, ale to coś w rodzaju adresu internetowego).
  • Tekst pomiędzy <a> a </a> to to, co twoi odwiedzający zobaczą i na co klikną – więc spraw, by był kuszący!

Przykład:

<a href="https://www.koty.com">Zobacz najbardziej urocze zdjęcia kotów!</a>

Zadanie: Stwórz kilka linków

Dodaj link do swojej ulubionej strony – to może być blog, kanał na YouTube albo najnowsza sensacja TikToka. Pamiętaj tylko, żeby było ciekawie (albo przynajmniej pouczająco).

Otwieranie linków w nowej karcie

Jeśli nie chcesz, aby twoi odwiedzający całkowicie opuścili twoją stronę, możesz ustawić otwieranie linków w nowej karcie za pomocą atrybutu target="_blank". Dzięki temu będą mogli zobaczyć nową stronę i wrócić do twojej, kiedy skończą.

Oto jak to zrobić:

<a href="https://www.koty.com" target="_blank">Zobacz te urocze koty w nowej karcie!</a>

Teraz odwiedzający mogą cieszyć się niekończącymi się zdjęciami kotów, nie tracąc z oczu twojej strony. Wszyscy wygrywają!

Hostowanie zaktualizowanej strony za pomocą Caddy

Twoja strona wygląda teraz znacznie ciekawiej. Skorzystajmy ponownie z Caddy, aby pokazać ją światu (albo przynajmniej znajomym).

Krok 1: Otwórz terminal

Przejdź do folderu, gdzie zapisałeś swój plik HTML:

cd ~/my-website

Krok 2: Uruchom Caddy

Użyj tej komendy, aby hostować stronę lokalnie na porcie 8080:

caddy file-server --listen :8080

Krok 3: Sprawdź swoją stronę

Otwórz przeglądarkę i wejdź na http://localhost:8080, aby podziwiać swoją zaktualizowaną stronę. Teraz ma obrazy, linki i cały ten blask, na który zasługuje!

Podsumowanie:

W tej lekcji nauczyłeś się:

  • Dodawać obrazy do strony internetowej za pomocą znacznika <img> (zarówno z internetu, jak i z lokalnych plików).
  • Tworzyć klikalne linki za pomocą znacznika <a>.
  • Otwierać linki w nowej karcie za pomocą atrybutu target="_blank" (bo kto lubi tracić odwiedzających?).

Twoja strona internetowa oficjalnie przeszła od zwykłego tekstu do multimedialnego arcydzieła! W następnym kroku zajmiemy się formularzami, dzięki czemu będziesz mógł zacząć interakcję z odwiedzającymi. Przygotuj się na jeszcze więcej magii HTML!

HTML  Początkujący  Projektowanie stron  Caddy 

Zobacz też