HTML Images
 |
Try it Yourself - Examples |
Insert images
How to insert images into an HTML document.
Insert images from different
locations
How to insert an image from another folder or another
server.
(You can find more examples at the bottom of this page).
HTML The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes
only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to
display.
Syntax for defining an image:
<img src="url" alt="some_text"/>
|
The URL points to the location where the image is stored. An image named "boat.gif", located in the
"images" directory on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph.
HTML
The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the
image cannot be displayed.
The value of
the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
|
The alt attribute provides alternative information for an image if a user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
Basic Notes - Useful Tips
Note: If an HTML file contains ten images - eleven files are required to display the page
right. Loading images take time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment,
that actually gets the image from a web server and inserts it into the page.
Therefore, make sure that the images actually stay in the same spot in relation
to the web page, otherwise your visitors will get a broken link icon. The broken
link icon is shown if the browser cannot find the image.
 |
More Examples |
Aligning images
How to align an image within the text.
Let the image float
How to let an image float to the left or right of a
paragraph.
Make a hyperlink of an image
How to use an image as a link.
Create an image map
How to create an image map, with clickable regions. Each of the regions is a hyperlink.
HTML Image Tags
Tag |
Description |
<img /> |
Defines an image |
<map> |
Defines an image-map |
<area /> |
Defines a clickable area inside an image-map |
Stylus Studio® 2010 XML Enterprise Suite raises the bar for productivity in XML development tools.
Millions of XML developers and data integration specialists turn to Stylus Studio's comprehensive and intuitive
XML toolset to tackle today's advanced XML data transformation and aggregation challenges.
|
- XML Pipeline Editor, Debugger and Code Generator
- DataDirect XML Converters
- XQuery Mapper, Editor, Debugger, and Profiler
- XSLT Mapper, Editor, Debugger, Designer, and Profiler
- Java and C# for .Net Code Generation
- XML Schema Designer With Documentation Generator
- XML Editor With Full XPath Integration
Download a free trial now
|
|