Alt Tag dalam HTML

Teg img HTML mengandungi atribut alt. Atribut ini menentukan maklumat tentang imej seperti nama imej, pautan imej, pengarang imej, spesifikasi imej, dll. Tujuan utama atribut ini ialah apabila sambungan internet perlahan, imej mungkin tidak dimuatkan tetapi dimuatkan tanpa sebarang masalah. Jadi daripada pengguna kembali daripada mereka, jika pengguna mengalihkan kursornya dari halaman, ia akan memaparkan beberapa teks mengenai imej; oleh itu, dia dapat memahami bahawa terdapat beberapa kandungan pada halaman ini dan menunggu beberapa lama sehingga halaman tersebut dimuatkan.

Senario Masa Nyata: Semasa kami memaparkan sebarang imej di web, ia tidak adil kepada pengguna akhir tanpa mengetahui tentang maksud imej itu. Jadi kita perlu menentukan beberapa kandungan pada imej dengan menggunakan atribut alt.

Bagaimanakah Alt Attribute berfungsi dalam HTML?

Atribut Alt menyediakan maklumat alternatif untuk imej mengenali tujuan imej itu. Atribut ini membenarkan teks sahaja. Atribut ini tersedia dalam teg:

Atribut alt 3 tag ini hanya untuk menunjukkan teks di atas imej.

Sintaks #1 – tag

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text">

Sintaks #2 – tag

<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="text" usemap="#name">
//usemap name and map name attribute name must be same
<map name="name">
<area coords="specify 4 coordinates" href="file.htm" alt="text">
</map>
<input> tag

Sintaks #3 – tag

<input type="image" alt="text">

Contoh untuk Melaksanakan Alt Tag dalam HTML

di bawah adalah contoh yang dinyatakan:

Contoh #1

Kod:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: blue;
text-align: center;
}
p {
color: fuchsia;
font-size: 20px;
border: 2px solid red;
}
/*Aligning images side by side*/
* {
box-sizing: border-box;
}
.column {
width: 33.33%;
padding: 5px;
float: left;
}
.row::after {
clear: both;
display: table;
content: "";
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-img-tag-and-alt-attribute">Images with img tag and alt attribute</h1>
<div class="row">
<div class="column">
<img src="/static/imghw/default1.png" data-src="3.jpg" class="lazy" alt="First Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="4.jpg" class="lazy" alt="Second Bird"   style="max-width:90%">
</div>
<div class="column">
<img src="/static/imghw/default1.png" data-src="5.jpg" class="lazy" alt="Third Bird"   style="max-width:90%">
</div>
</div>

Output:

Jika sumber imej tersedia:

Jika sumber imej tidak tersedia:

Contoh #2

Kod:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-area-tag-and-alt-attribute">Images with area tag and alt attribute</h1>
<img src="/static/imghw/default1.png" data-src="d2.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Alt Tag dalam HTML" usemap="#dog">
<map name="dog">
<area shape="rect" coords="0,0,81,125" href="https://www.educba.com/category/software-development/software-development-tutorials/python-tutorial/" alt="Python">
<area shape="circle" coords="91,59,4" href="https://www.educba.com/category/software-development/software-development-tutorials/java-tutorial/" alt="Java">
<area shape="circle" coords="125,59,9" href="https://www.educba.com/category/software-development/software-development-tutorials/bootstrap-tutorial/" alt="Bootstrap">
</map>

Output:

Jika sumber imej tersedia:

Jika sumber imej tidak tersedia:

Contoh #3

Kod:

<meta charset="ISO-8859-1">
<title>Alt Attribute</title>
<style type="text/css">
h1 {
color: green;
text-align: center;
}
p {
color: navy;
font-size: 20px;
border: 2px solid orange;
}
label, input {
color: green;
font-size: 20px;
}
</style>


<h1 id="Alt-Attribute-Introduction">Alt Attribute Introduction</h1>
<p>HTML img tag contains alt attribute. This attributes specifies
the information about the image like image name, image link, image
author, image specification etc. The main purpose of this attribute is
when the internet connection is slow the image may not load but is
loaded without any problem. So instead of user go back from the if
user moved his cursor from the page it will display some text
regarding image therefore he can understand that there is some content
in this page and wait for some time until page is loaded.</p>
<h1 id="Images-with-input-tag-and-alt-attribute">Images with input tag and alt attribute</h1>

First name:

Output:

Jika sumber imej tersedia:

Jika sumber imej tidak tersedia:

Kesimpulan

Alt ialah atribut yang tersedia dalam teg kawasan, img dan input. Atribut alt ini digunakan untuk memberikan maklumat tentang imej seperti imej atau koordinat imej, pengarang imej, dll.

Atas ialah kandungan terperinci Alt Tag dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!