Obrazy HTML

Obrazy mogą sprawić, że Twoje witryny są bardzo urzekające i okazać się bardzo korzystne w poprawie wrażenia użytkownika. Są najczęstszym i wygodnym sposobem przyciągania uwagi użytkownika, ponieważ ludzka natura preferuje obrazy przez tekst. Ten post został zaprojektowany w celu szczegółowego oświecenia czytelników o obrazach HTML. Ten post obejmuje następujące tematy:

1. Dodaj obrazy do swojej witryny
2. Zmień wysokość i szerokość obrazów
3. Dodawanie obrazów z subfoltera
4. Dodawanie obrazów z innej strony internetowej
5. Używanie obrazów jako linku

Zaczynajmy.

1. Dodaj obrazy do swojej witryny

Obrazy mogą być zawarte na stronie internetowej za pomocą znacznika. Tag jest pusty i składa się tylko z atrybutów i nie ma znacznika zamykania.

Składnia
Znacznik ma poniżej wspomnianą składnię.

Atrybuty znacznika są wyjaśnione poniżej.

Atrybut src
Ten atrybut opisuje ścieżkę obrazu.

Atrybut alt
Zapewnia alternatywną nazwę obrazu. Ta alternatywa pojawia się, gdy z jakiegoś powodu obraz nie ładuje się. Alternatywna nazwa powinna opisać obraz.

Przykład
W poniższym przykładzie dodajemy obraz północnych świateł na stronie internetowej za pomocą znacznika. Po prostu podaliśmy ścieżkę obrazu do atrybutu SRC i alternatywną nazwę obrazu w przypadku, gdy obraz się nie ładuje.

Uczenie się obrazów HTML

Wyjście

Obraz północnych świateł został osadzony na stronie internetowej.

W przypadku, gdy obraz nie ładuje się z powodu pewnego błędu W ten sposób alternatywna nazwa pojawia się na stronie internetowej zamiast obrazu.

2. Zmień wysokość i szerokość obrazów

Atrybuty wysokości i szerokości są używane do zmiany wysokości i szerokości obrazów.

Przykład
Załóżmy, że chcesz zmienić wysokość i szerokość obrazu HTML.

Uczenie się obrazów HTML

Ustawiliśmy szerokość obrazu na 300 i wysokość na 400.

Wyjście

Szerokość obrazu i wysokość zostały dostosowane.

Innym sposobem dostosowania szerokości i wysokości obrazów HTML jest użycie atrybutu stylu.

Przykład
W poniższym przykładzie atrybut stylu jest używany do ustawienia szerokości i wysokości obrazu.

Uczenie się obrazów HTML

Ustawiliśmy szerokość obrazu na 300px i wysokość na 150px.

Wyjście

Szerokość obrazu i wysokość zostały zmienione.

3. Dodawanie obrazów z subfoltera

Jeśli twoje obrazy są zapisywane w innym folderze, musisz dodać ścieżkę tego folderu w atrybucie SRC znacznika.

Przykład
W tym przykładzie obraz „ptak.jpg ”jest umieszczony w podfolderu„ obrazy ”, więc podajemy ścieżkę tego folderu w atrybucie SRC znacznika.

Uczenie się obrazów HTML

Obraz jest obecny w podgadniku, jak pokazano poniżej.

Wyjście

Obraz został osadzony na stronie internetowej, która była obecna w subfolderze.

4. Dodanie z innej strony internetowej

Aby osadzić obrazy z innej strony internetowej, po prostu podałeś adres URL obrazu w atrybucie SRC znacznika.

Przykład
W poniższym przykładzie obraz jest wbudowany z Google.Witryna COM za pomocą adresu URL.

Uczenie się obrazów HTML

Wyjście

Obraz z Google.Witryna COM została osadzona.

5. Używanie obrazów jako linku

Obrazy HTML mogą być używane jako linki i do tego celu zawierają znacznik wewnątrz znacznika.

Przykład
W poniższym przykładzie obraz jest używany jako link do innej strony internetowej.

Uczenie się obrazów HTML

Wyjście

Kliknij obraz, a strona internetowa otworzy się, czyj link został podany w atrybucie HREF znacznika.

Witryna została otwarta po kliknięciu obrazu.

Wniosek

Obrazy mogą być osadzone na stronach internetowych za pomocą znacznika HTML. Jest to pusty znacznik z tylko dwoma atrybutami; SRC i Alt. Atrybut SRC przejmuje ścieżkę obrazu, a Alt służy jako alternatywna nazwa w przypadku, gdy obraz nie ładuje się, ponadto szerokość i wysokość obrazu można dostosować zgodnie z pożądaniem. Obrazy mogą być osadzone z innych stron internetowych i mogą być używane jako linki. W tym poście szczegółowo omawia obrazy HTML za pomocą przykładów.