HTML Learning:
The HTML Elements reference.
"img" - html element
- This element specifies an inline image to be drawn in the place.
- Starttag <img> is Required and endtag </img> is forbidden
- The required SRC attribute specifies the location of the image.
- Browsers that support the img - element :
Element "img" example:
<html>
<head>
<title>Inserting Images</title>
</head>
<body>
<img src='images/Trophy.png' width='100' height='100'
alt='this is my Trophy' border='5' />
<p>
<font face='Arial, Helvetica, sans-serif' size='2'>
<b>I won this trophy in my last marathon contest.</b>
</font>
</p>
</body>
</html>
Attributes:
align (deprecated), alt (required), border (deprecated), class , dir , height (deprecated), hspace (deprecated), id , ismap , lang , longdesc , name , src (required), style , title , usemap , vspace (deprecated), width (deprecated)
Attribute "align" value(s): depend on which element bottom, middle, top, left or right
Attribute "alt" value(s): text
Attribute "border" value(s): pixels
Attribute "class" value(s): A list of style class names that must be separated by white space characters.
Attribute "dir" value(s): ltr or rtl
Attribute "height" value(s): length
Attribute "hspace" value(s): pixels
Attribute "id" value(s): unique name
Attribute "ismap" value(s): ismap
Attribute "lang" value(s): language-code
Attribute "longdesc" value(s): uri uri
Attribute "name" value(s): sequence of characters
Attribute "src" value(s): uri
Attribute "style" value(s): style
Attribute "title" value(s): text
Attribute "usemap" value(s): uri
Attribute "vspace" value(s): pixels
Attribute "width" value(s): length
align (deprecated), alt (required), border (deprecated), class , dir , height (deprecated), hspace (deprecated), id , ismap , lang , longdesc , name , src (required), style , title , usemap , vspace (deprecated), width (deprecated)
Attribute "align" value(s): depend on which element bottom, middle, top, left or right
- Specifies the horizontal alignment of its element with respect to the surrounding context.
- You should use styles (CSS) instead.
Attribute value | description |
---|---|
bottom | Means that the bottom of the image should be vertically aligned with the current baseline. This is the default value. |
middle | Means that the center of the image should be vertically aligned with the current baseline. |
top | Means that the top of the image should be vertically aligned with the top of the current text line. |
left | Cause the image to float to the current left margin. |
right | Cause the image to float to the current right margin. |
Attribute "alt" value(s): text
- A short description. For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
Attribute "border" value(s): pixels
- Specifies the width of the frame around a table or the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent.
- It is deprecated for the IMG and OBJECT element
Attribute "class" value(s): A list of style class names that must be separated by white space characters.
- This attribute assigns a style class name or set of style class names to an element. Any number of elements may be assigned the same class name or names.
- You will find more about this in the CSS learning on this site.
Attribute "dir" value(s): ltr or rtl
- Specifies the base direction of directionally neutral text in an element's content and attribute values. It also specifies the directionality of tables.
Attribute value | description |
---|---|
ltr | Left-to-right text or table. |
rtl | Right-to-left text or table. |
Attribute "height" value(s): length
- This attribute specifies the height of the rule. Override height of the image
- You should use styles (CSS) instead. (except for the object and iframe element)
Attribute "hspace" value(s): pixels
- Specifies the amount of white space to be inserted to the left and right of an IMG, APPLET, or OBJECT.
- The default value is not specified, but is generally a small, non-zero length.
Attribute "id" value(s): unique name
- This attribute assigns an identification name to an element. This name must be unique in a document
- Id is often used when one wants to search for an item using javascript or vbscript.
Attribute "ismap" value(s): ismap
- Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.
- It is only possible to define a server-side image map for the IMG and INPUT elements. In the case of IMG, the IMG must be inside an A element and the boolean attribute ismap ([CI]) must be set. In the case of INPUT, the INPUT must be of type "image".
Attribute "ismap" example:
<html>
<body>
<form name="myform" action="#" target='_top' >
<input type="image" name="Trophy"
src="images/Trophy.png"/>
</form>
<a href="#" target='_top' >
<img src="images/Trophy.png" border="0"
alt="The sun image" ismap="ismap" target='_blank' />
</a>
</body>
</html>
Attribute "lang" value(s): language-code
- Specifies the base language of an element's attribute values and text content.
Lang code | Name of Language |
---|---|
aa | Afar |
ab | Abkhazian |
af | Afrikaans |
ak | Akan |
sq | Albanian |
am | Amharic |
ar | Arabic |
an | Aragonese |
hy | Armenian |
as | Assamese |
av | Avaric |
ae | Avestan |
ay | Aymara |
az | Azerbaijani |
ba | Bashkir |
bm | Bambara |
be | Belarusian |
bn | Bengali |
bh | Bihari languages |
bi | Bislama |
bo | Tibetan |
bs | Bosnian |
br | Breton |
bg | Bulgarian |
my | Burmese |
ca | Catalan; Valencian |
cs | Czech |
ch | Chamorro |
ce | Chechen |
zh | Chinese |
cu | Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic |
cv | Chuvash |
kw | Cornish |
co | Corsican |
cr | Cree |
cy | Welsh |
cs | Czech |
da | Danish |
de | German |
dv | Divehi; Dhivehi; Maldivian |
nl | Dutch; Flemish |
dz | Dzongkha |
el | Greek, Modern (1453-) |
en | English |
eo | Esperanto |
et | Estonian |
eu | Basque |
ee | Ewe |
fo | Faroese |
fa | Persian |
fj | Fijian |
fi | Finnish |
fr | French |
fr | French |
fy | Western Frisian |
ff | Fulah |
ka | Georgian |
de | German |
gd | Gaelic; Scottish Gaelic |
ga | Irish |
gl | Galician |
gv | Manx |
el | Greek, Modern (1453-) |
gn | Guarani |
gu | Gujarati |
ht | Haitian; Haitian Creole |
ha | Hausa |
he | Hebrew |
hz | Herero |
hi | Hindi |
ho | Hiri Motu |
hr | Croatian |
hu | Hungarian |
hy | Armenian |
ig | Igbo |
is | Icelandic |
io | Ido |
ii | Sichuan Yi; Nuosu |
iu | Inuktitut |
ie | Interlingue; Occidental |
ia | Interlingua (International Auxiliary Language Association) |
id | Indonesian |
ik | Inupiaq |
is | Icelandic |
it | Italian |
jv | Javanese |
ja | Japanese |
kl | Kalaallisut; Greenlandic |
kn | Kannada |
ks | Kashmiri |
ka | Georgian |
kr | Kanuri |
kk | Kazakh |
km | Central Khmer |
ki | Kikuyu; Gikuyu |
rw | Kinyarwanda |
ky | Kirghiz; Kyrgyz |
kv | Komi |
kg | Kongo |
ko | Korean |
kj | Kuanyama; Kwanyama |
ku | Kurdish |
lo | Lao |
la | Latin |
lv | Latvian |
li | Limburgan; Limburger; Limburgish |
ln | Lingala |
lt | Lithuanian |
lb | Luxembourgish; Letzeburgesch |
lu | Luba-Katanga |
lg | Ganda |
mk | Macedonian |
mh | Marshallese |
ml | Malayalam |
mi | Maori |
mr | Marathi |
ms | Malay |
mk | Macedonian |
mg | Malagasy |
mt | Maltese |
mn | Mongolian |
mi | Maori |
ms | Malay |
my | Burmese |
na | Nauru |
nv | Navajo; Navaho |
nr | Ndebele, South; South Ndebele |
nd | Ndebele, North; North Ndebele |
ng | Ndonga |
ne | Nepali |
nl | Dutch; Flemish |
nn | Norwegian Nynorsk; Nynorsk, Norwegian |
nb | Bokmål, Norwegian; Norwegian Bokmål |
no | Norwegian |
ny | Chichewa; Chewa; Nyanja |
oc | Occitan (post 1500) |
oj | Ojibwa |
or | Oriya |
om | Oromo |
os | Ossetian; Ossetic |
pa | Panjabi; Punjabi |
fa | Persian |
pi | Pali |
pl | Polish |
pt | Portuguese |
ps | Pushto; Pashto |
qu | Quechua |
rm | Romansh |
ro | Romanian; Moldavian; Moldovan |
ro | Romanian; Moldavian; Moldovan |
rn | Rundi |
ru | Russian |
sg | Sango |
sa | Sanskrit |
si | Sinhala; Sinhalese |
sk | Slovak |
sk | Slovak |
sl | Slovenian |
se | Northern Sami |
sm | Samoan |
sn | Shona |
sd | Sindhi |
so | Somali |
st | Sotho, Southern |
es | Spanish; Castilian |
sq | Albanian |
sc | Sardinian |
sr | Serbian |
ss | Swati |
su | Sundanese |
sw | Swahili |
sv | Swedish |
ty | Tahitian |
ta | Tamil |
tt | Tatar |
te | Telugu |
tg | Tajik |
tl | Tagalog |
th | Thai |
bo | Tibetan |
ti | Tigrinya |
to | Tonga (Tonga Islands) |
tn | Tswana |
ts | Tsonga |
tk | Turkmen |
tr | Turkish |
tw | Twi |
ug | Uighur; Uyghur |
uk | Ukrainian |
ur | Urdu |
uz | Uzbek |
ve | Venda |
vi | Vietnamese |
vo | Volapük |
cy | Welsh |
wa | Walloon |
wo | Wolof |
xh | Xhosa |
yi | Yiddish |
yo | Yoruba |
za | Zhuang; Chuang |
zh | Chinese |
zu | Zulu |
Attribute "longdesc" value(s): uri uri
- This attribute specifies a link to a long description of an Element Specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute.
Attribute "name" value(s): sequence of characters
- A control's "control name" is given by its name attribute. Names the element so that it may be referred to from style sheets or scripts.
Attribute "src" value(s): uri
- This attribute specifies resources for an element. Specifies the location of the image resource. Examples of widely recognized image formats include GIF, JPEG, and PNG.
- Look at details for each element.
Attribute "style" value(s): style
- Specifies style sheet (CSS) information for the current element.The syntax of the value of the style attribute is determined by the default style sheet language.
- You will find more about this in the CSS learning on this site.
Attribute "title" value(s): text
- This attribute offers advisory information about the element for which it is set.
Attribute "title" example:
<html>
<head>
<title>title attribute</title>
</head>
<body >
<h1 title="Heading 1">This is a Heading 1</h1>
<h2 title="Heading 2">This is a Heading 2</h2>
<h3 title="Heading 3">This is a Heading 3</h3>
<h4 title="Heading 4">This is a Heading 4</h4>
<h5 title="Heading 5">This is a Heading 5</h5>
<h6 title="Heading 6">This is a Heading 6</h6>
</body>
</html>
Attribute "usemap" value(s): uri
- Associates an image map with an element. The image map is defined by a MAP element.
- The value of usemap must match the value of the name attribute of the associated MAP element.
Attribute "vspace" value(s): pixels
- Specifies the amount of white space to be inserted above and below an IMG, APPLET, or OBJECT.
- The default value is not specified, but is generally a small, non-zero length.
Attribute "width" value(s): length
- This attribute specifies the width of the rule. The default width is 100%, i.e., the rule extends across the entire canvas. Overrides width of the image
- You should use styles (CSS) instead. (except for the object and iframe element)
Events:
onclick , ondblclick , onkeydown , onkeypress , onkeyup , onmousedown , onmousemove , onmouseout , onmouseover , onmouseup
Event "onclick" value(s): One or more script statements each ended with a semicolon.
Event "ondblclick" value(s): One or more script statements each ended with a semicolon.
Event "onkeydown" value(s): One or more script statements each ended with a semicolon.
Event "onkeypress" value(s): One or more script statements each ended with a semicolon.
Event "onkeyup" value(s): One or more script statements each ended with a semicolon.
Event "onmousedown" value(s): One or more script statements each ended with a semicolon.
Event "onmousemove" value(s): One or more script statements each ended with a semicolon.
Event "onmouseout" value(s): One or more script statements each ended with a semicolon.
Event "onmouseover" value(s): One or more script statements each ended with a semicolon.
Event "onmouseup" value(s): One or more script statements each ended with a semicolon.
onclick , ondblclick , onkeydown , onkeypress , onkeyup , onmousedown , onmousemove , onmouseout , onmouseover , onmouseup
Event "onclick" value(s): One or more script statements each ended with a semicolon.
- The onclick event occurs when the pointing device button is clicked over an element.
Attribute "onclick" example:
<html>
<head>
<title>onclick Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onclick="alert('you click on th body text')" >
The onclick event occurs when the pointing device
button is clicked over an element.
</body>
</html>
Event "ondblclick" value(s): One or more script statements each ended with a semicolon.
- The ondblclick event occurs when the pointing device button is double clicked over an element.
Attribute "ondblclick" example:
<html>
<head>
<title>ondblclick Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
ondblclick="alert('you double-click on th body text')" >
The ondblclick event occurs when the pointing
device button is double clicked over an element.
</body>
</html>
Event "onkeydown" value(s): One or more script statements each ended with a semicolon.
- The onkeydown event occurs when a key is pressed down over an element.
Attribute "onkeydown" example:
<html>
<head>
<title>onkeydown Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeydown="alert('you have pressed a key down')" >
The onkeydown event occurs when a
key is pressed down over an element.
</body>
</html>
Event "onkeypress" value(s): One or more script statements each ended with a semicolon.
- The onkeypress event occurs when a key is pressed and released over an element.
Attribute "onkeypress" example:
<html>
<head>
<title>onkeypress Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeypress="alert('you have pressed and released a key')" >
The onkeypress event occurs when a key is
pressed and released over an element.
</body>
</html>
Event "onkeyup" value(s): One or more script statements each ended with a semicolon.
- The onkeyup event occurs when a key is released over an element.
Attribute "onkeyup" example:
<html>
<head>
<title>onkeyup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeyup="alert('A key is released over an element')" >
The onkeyup event occurs when a key is
released over an element.
</body>
</html>
Event "onmousedown" value(s): One or more script statements each ended with a semicolon.
- The onmousedown event occurs when the pointing device button is pressed over an element.
Attribute "onmousedown" example:
<html>
<head>
<title>onmouseup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseup="alert('The mouse button is pressed down')" >
The onmouseup event occurs when the pointing
device button is released over an element.
</body>
</html>
Event "onmousemove" value(s): One or more script statements each ended with a semicolon.
- The onmousemove event occurs when the pointing device is moved while it is over an element.
Attribute "onmousemove" example:
<html>
<head>
<title>onmousemove Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmousemove="document.body.text='red'" >
The onmousemove event occurs when the
pointing device is moved while it is over an element.
</body>
</html>
Event "onmouseout" value(s): One or more script statements each ended with a semicolon.
- The onmouseout event occurs when the pointing device is moved away from an element.
Attribute "onmouseout" example:
<html>
<head>
<title>onmouseover and onmouseout Event attributes</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseover="document.body.text='red'"
onmouseout="document.body.text='black'" >
The onmouseover event occurs when the
pointing device is moved onto an element.<br>
The onmouseout event occurs when the
pointing device is moved away from an element.
</body>
</html>
Event "onmouseover" value(s): One or more script statements each ended with a semicolon.
- The onmouseover event occurs when the pointing device is moved onto an element.
Attribute "onmouseover" example:
<html>
<head>
<title>onmouseover and onmouseout Event attributes</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseover="document.body.text='red'"
onmouseout="document.body.text='black'" >
The onmouseover event occurs when the
pointing device is moved onto an element.<br>
The onmouseout event occurs when the
pointing device is moved away from an element.
</body>
</html>
Event "onmouseup" value(s): One or more script statements each ended with a semicolon.
- The onmouseup event occurs when the pointing device button is released over an element.
Attribute "onmouseup" example:
<html>
<head>
<title>onmouseup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseup="alert('The mouse button is released')" >
The onmouseup event occurs when the
pointing device button is released over an element.
</body>
</html>
The img element cannot contain any element!
The img element can be contained in the following element(s):
Elements | Description |
---|---|
a | The A element denotes an anchor; a hypertext link or the destination of a link. |
abbr | This element allows authors to clearly indicate a sequence of characters that define an abbreviation for a word. |
acronym | Indicates an acronym abbreviation. |
address | ADDRESS is used to supply contact information for a web document. |
applet | (deprecated) This element is used to embed Java applets. |
b | This element renders the text betweeen the start and end tag in bold. |
bdo | This element overrides the bidirectional algorithm for the enclosed text. |
big | The big element is a text formatting control that increments the enclosed text by one size. |
blockquote | This element is used to format the text as a block quote, which means the right and left margins are indented from the text before and after the quote. |
body | The <BODY> tag contains the body of the document. It must come after the </$'head'> (if a header is specified). # Everything between the <BODY> and </BODY> is considered part of the document body. # It is the part of the document that is visible to the user. |
button | This element defines a submit button, reset button, or push button. |
caption | The CAPTION element's text should describe the nature of the table. # The CAPTION element is only permitted immediately after the $'table' start tag. |
center | (deprecated) This element defines a block whose contents are centered horizontally on visual browsers. |
cite | This element is used to markup citations, such as titles of magazines or newspapers, ship names, references to other sources, and quotation attributions. |
code | This element shows text that is intended to be shown in a monospaced font. #This is useful for programming code. |
dd | This element provides the definition of a term in a definition list. |
del | This element is used to markup sections of the document that have been deleted with respect to a different version of a document. |
dfn | This element denotes the defining instance of a term. #Visual browsers typically render enclosed text as italic. |
div | This element offer a generic mechanism for adding structure to documents. # The <DIV> tag is used to divide a document up into artificial sections such as chapters, sections, appendix and so on. |
dt | This element defines a term in a definition list. |
em | This element is used to indicate emphasis. #Browsers typically renders enclosed text in italic. |
fieldset | Groups related form controls. |
font | (deprecated) This element is used to change the size, color and face of the enclosed text. |
form | This element defines an interactive form. |
h1 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
h2 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
h3 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
h4 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
h5 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
h6 | The elements H1 through H6 are used to define header levels within a document. # H1 element is the most significant header and H6 is the least significant. |
i | This element suggests that enclosed text shall be rendered as italic text. |
iframe | This element defines an inline frame for the inclusion of other HTML documents. |
ins | This element is used to markup sections of the document that have been inserted with respect to a different version of a document. |
kbd | This element denotes text to be entered by the user. #Browsers will typically render text as monospaced. |
label | This element associates a label with a form control. |
legend | This element is used to provide the caption text for grouped form controls and text contained in a fieldset. |
li | This element defines a list item. |
noscript | This element provides alternate content for a client-side script that was not executed. |
object | This element is used to include objects such as images, audio, videos, Java applets, and Flash animations. |
p | This element defines a paragraph of text. |
q | This element is used for short, inline quotations. |
s | (deprecated) Render strike-through style text. |
samp | This element's purpose is to identify a sample of characters that form the output or result of some process. |
small | This element suggests that the enclosed text must be rendered in a smaller font. |
span | This element is a generic inline container. |
strike | (deprecated) Render strike-through style text. |
strong | The STRONG element gives strong emphasis to its contents. Browsers typically renders enclosed text in bold. |
sub | This element is used for subscripts. |
sup | This element is used for superscripts. |
td | This element defines a data cell in a table. |
th | This element defines a header cell in a table. |
tt | This element suggests that the text should be rendered as teletype or monospaced text. |
u | (deprecated) This element suggests that the text should be rendered as underlined text. |
var | This element is used to markup variables or program arguments. Browsers will typically render enclosed text as italic type. |
© 2010 by Finnesand Data.
All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the
correctness in the pages or source codes.
The risk of using this web-site pages or any program
codes from this website is entirely at the individual user.