Obrazy są bardzo ważną częścią strony internetowej, ponieważ poprawiają wygląd strony internetowej i zwiększają interakcję z klientem. Cechą charakterystyczną wielu witryn internetowych jest sposób, w jaki organizują one różne obrazy na swoich stronach internetowych i dodają do nich smaki. W tym W artykule o obrazach, zrozumiemy, jak osadzać obrazy na stronie internetowej za pomocą HTML w następującej kolejności:
Jak dodać obraz w formacie HTML
HTML umożliwia osadzenie obrazu na stronie internetowej etykietka. Kolejną ważną kwestią do zapamiętania jest
nie ma tagu zamykającego. scr atrybut służy do określenia ścieżki do obrazu, która może być adresem URL lub ścieżką obrazu z systemu / serwera. Zacznijmy od podstawowej składni osadzania obrazu na stronie internetowej za pomocą HTML.
Składnia
img src = 'img / front-end-web-development / 50 / what-are-html-images.png'>Przykładowy kod
Obraz HTML Osadzanie obrazów na stronie internetowej
Podobnie jak w przypadku innych tagów, są powiązane różne atrybuty etykietka. Przyjrzyjmy się każdemu z nich po kolei, zrozummy ich potrzeby i jak ich używać.
Tagi obrazów HTML
- alt Atrybut
Atrybut alt jest tekstem zastępczym obrazu. Powodem wprowadzenia atrybutu alt jest to, że z jakiegoś powodu obraz nie mógł się załadować, powinien pojawić się tekst zastępczy dający wyobrażenie o obrazku. Przyczyną nie ładowania obrazu może być wolne połączenie internetowe lub obraz nie znajduje się w podanym źródle itp.
Jeśli obraz znajduje się w tym samym folderze, w którym znajduje się plik HTML, możesz bezpośrednio określić nazwę pliku. W przeciwnym razie musisz podać bezwzględną ścieżkę do pliku obrazu.
Wartość atrybutu alt powinna opisywać obraz.
Przykład
Obraz HTML Osadzanie obrazów na stronie internetowej
uczenie głębokie vs uczenie maszynowe vs rozpoznawanie wzorców
- Szerokość i wysokość obrazu
Atrybut stylu służy do ustawiania wysokości i szerokości obrazu. W atrybucie style określasz styl CSS.
Obraz HTML Osadzanie obrazów na stronie internetowej
Niektóre z ważnych punktów podczas osadzania obrazu na stronie internetowej za pomocą HTML to:
- Atrybuty szerokości i wysokości są zdefiniowane w pikselach.
- Możesz także określić procentową szerokość i wysokość obrazu. Uwzględni procent według całej strony internetowej.
- Jeśli określisz tylko jeden z nich, drugi zostanie odpowiednio dostosowany.
- Osadzanie obrazów za pomocą adresu URL
HTML zapewnia również elastyczność, w której możesz wybrać obraz z innego serwera, po prostu określając adres URL. Możesz użyć oddzielnego serwera do hostowania obrazów, a następnie osadzić te obrazy za pomocą adresu URL.
Obraz HTML Osadzanie obrazów na stronie internetowej
- Obraz jako łącze
Możesz również użyć obrazu jako łącza, w którym użytkownik może kliknąć obraz i przejść do nowej strony internetowej. Aby to zrobić, wystarczy umieścić plik dzień w etykietka.
Obraz HTML Osadzanie obrazów na stronie internetowej
- Obraz pływający
Możesz również dostosować wyrównanie obrazu za pomocą właściwości CSS float. Cała właściwość CSS musi być określona w atrybucie style.
Obraz HTML
- Mapy obrazu
Jest to jedna z ważnych funkcji udostępnianych przez HTML. tag pomaga w definiowaniu mapy obrazu. Pewnie się zastanawiasz, czym jest mapa obrazu. Mapa obrazu to obraz z klikalnymi obszarami
Obraz HTML
- Zdjęcie w tle
Możesz także dodać obraz tła na stronie internetowej. Wystarczy użyć właściwości CSS, tj. Obraz tła w tagu style i dodać go do elementu HTML.
jak korzystać z usługi teraz
Obraz HTMLZdjęcie w tle
Element BODY
W ten sposób dochodzimy do końca tego bloga HTML Images.Teraz, po wykonaniu powyższych fragmentów, zrozumiałbyś, jak wstawić obraz w HTML. Mam nadzieję, że ten blog jest dla Ciebie pouczający i stanowi wartość dodaną.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Obrazy HTML”, a my skontaktujemy się z Tobą.