Co to są tagi graficzne HTML?
Poniższy artykuł zawiera zarys tagów graficznych HTML. Wiem, że to frazes, ale zacznę od powiedzenia, że obraz jest wart tysiąca słów. W przypadku stron internetowych jest to szczególnie prawdziwe. Obraz może sprzedać odwiedzającemu Twój pomysł, przekonać kogoś do zakupu Twojego produktu i może pomóc stronie wyglądać znacznie lepiej. W tym przewodniku przyjrzymy się, jak możemy dodać IMG do stron internetowych i odpowiednio je wyrównać, a także dodać do nich linki.
Dodawanie obrazów do stron internetowych
Możesz dodać IMG do strony HTML za pomocą tag w dokumencie HTML, oto składnia:
Tutaj IMG informuje przeglądarkę, że znacznik dotyczy dodawania IMG do dokumentu, a „src =” określa, skąd pobrać obraz.
Przykład strony z obrazem
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Oto wynik kodu:
Ciekawym faktem na temat tych stron HTML jest to, że kiedy używasz znacznika IMG, obraz nie jest wstawiany do wspomnianej strony internetowej, zamiast tego tworzy miejsce przechowywania, w którym obraz jest umieszczany po pobraniu.
Obsługa przeglądarki i zgodność z atrybutami
Jak można się spodziewać, wszystkie nowoczesne przeglądarki obsługują obrazy i użycie tagów IMG. Czasami przeglądarki mobilne zmieniają rozmiar obrazu, aby dopasować go do ekranu, jeśli obraz nie jest ustawiony jako responsywny.
Jeśli chodzi o zgodność atrybutów z HTML 4.01 i nowszym HTML5, większość znaczników będzie działać, z wyjątkiem wyrównania, obramowania, hspace i vspace, które po prostu nie są obsługiwane w tym ostatnim.
Obrazy jako link:
Będą chwile, kiedy będziesz chciał, aby obraz działał jako link do innej strony. Możesz to zrobić, dodając wewnątrz tagu IMG.
Ustawianie obrazu jako tła strony internetowej
Możesz przypisać obraz jako obraz tła strony internetowej, używając właściwości CSS background-image w elemencie Body strony.
Zdjęcie w tle
Ustawienie pływającego obrazu w przeglądarce
Możemy użyć właściwości CSS „float”, aby ustawić obraz tak, aby unosił się w dowolnym miejscu okna przeglądarki. Rzućmy okiem na przykład, który pomoże ci zrozumieć.
Tutaj obraz samochodu unosi się po prawej stronie tekstu.
Tutaj obraz samochodu unosi się po lewej stronie tekstu.
Atrybuty tagu obrazu
Poniżej przedstawiono atrybuty znacznika obrazu.
1) Wyrównaj
Możliwe wartości: góra, dół, środek, lewo lub prawo.
Atrybut alight służy do określenia wyrównania obrazu na stronie internetowej.
2) Alt
Typ wartości: tekst
Alt służy do określania alternatywnego tekstu obrazu strony internetowej. W przypadkach, w których wyświetlenie IMG nie jest możliwe, przeglądarka wyświetla ten tekst użytkownikowi. Wyszukiwarki takie jak Google i Bing używają tego tekstu alternatywnego do wyświetlania wyników w Wyszukiwarce grafiki.
3) Granica
Typ wartości: piksele
Służy do tworzenia granicy zdefiniowanej przez użytkownika grubości wokół obrazu. Nie działa w HTML5.
4) Pochodzenie krzyżowe
Typ wartości: Anonimowe poświadczenia użytkowania
Ten atrybut jest używany, gdy chcemy określić, w jaki sposób należy traktować zdjęcia z różnych źródeł. Jest to najczęściej stosowane w przypadkach, w których używane są elementy canvas aplikacji internetowych JavaScript.
5) Wysokość
Typ wartości: procenty lub piksele
Oczywiście ten jest używany do oznaczenia wysokości obrazu na stronie HTML.
6) hspace
Typ wartości: piksele
Nieobsługiwany w HTML5, atrybut hspace służy do określania w pikselach, ile białej przestrzeni ma zostać dodane po lewej i prawej stronie wstawionego obrazu.
7) ismap
Typ wartości: URL strony
ismap użyliśmy do zdefiniowania tego obrazu jako mapy obrazu po stronie serwera. Gdy użytkownik kliknie (lub puknie) wewnątrz obrazu, przeglądarki wysyłają współrzędne kliknięcia (lub puknięcia) do serwera WWW jako adres URL.
8) Longdesc
Typ wartości: URL
Longdesc służy do szczegółowego opisu obrazu za pomocą adresu URL. Adres URL użyty w tym atrybucie służy jako opis obrazu.
9) src
Typ wartości: URL
src oznacza źródło i służy do określenia adresu, z którego przeglądarka pobierze obraz, ten adres URL można zastosować do obrazu w katalogu na tym samym serwerze, a także może przechowywać obraz na serwerze innej firmy z inna nazwa domeny.
10) usemap
Typ wartości: #mapname
Atrybut usemap służy do definiowania obrazu mapy obrazu po stronie klienta. Mapa użycia jest zawsze używana z tagami HTML mapy i obszaru.
11) vspace
Typ wartości: piksele
Nieobsługiwany w HTML5 atrybut Vspace służy do ustawiania liczby pikseli, które mają być użyte jako białe znaki na górze i na dole obrazu na stronie.
12) Szerokość
Typ wartości: piksele
Tak jak sugeruje nazwa, atrybut width służy do określania szerokości obrazu na stronie HTML.
Wniosek - tagi graficzne HTML
Teraz, gdy przyjrzeliśmy się, jak obrazy są dodawane na stronach HTML i jak ustawiać ich atrybuty, możemy tworzyć atrakcyjnie wyglądające strony internetowe w projekcie internetowym.
Oprócz dodania wizualnego stylu do strony, obrazy są cenne, ponieważ pomagają również w optymalizacji wyszukiwarek. Dodanie odpowiednich znaczników alt i opisów do zdjęć pomaga wyszukiwarkom lepiej zrozumieć treść strony internetowej i poprawić ranking strony w wielu przypadkach.
Polecane artykuły
To jest przewodnik po tagach HTML. Tutaj omawiamy atrybuty tagu obrazu wraz z obsługą przeglądarki i kompatybilnością z atrybutami. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -
- Prosty przewodnik po poleceniach HTML
- Wprowadzenie do tego, czym jest XHTML?
- Samouczki na temat atrybutów HTML
- Aplikacje i najważniejsze zastosowania HTML
- Różne style list w HTML
- Ramki HTML
- Bloki HTML