- HTML Image Code
- HTML Size Of Image
- HTML Image Mouseover Tag
- Image Border HTML Code
- HTML Image Code Generator
However, as far as web design goes, it is always handy to know the HTML image code because sometimes it it just a lot easier to quickly add it in by hand.
HTML Image CodeThe following HTML code will display an image into a web page. The path to the image in this example is an absolute (full URL) path defined by the src attribute.
This is one of the most simple image HTML tags available because it has no other attributes other than the src attribute. When using this Tag, as-is, it is important to remember the actual size of the image will display on the page.
HTML Code For Adding A Image
If you right mouse click on the above image and select "properties" from the menu, you will notice that the "Address" URL is the same as the value of the src attribute.
HTML Size Of ImageIn order to display a size other than the actual size of the image, it is necessary to add width and height attributes to the image tag.
The code below will reduce the display size of the above image by 20%. I have used a calculator to subtract 20% from the original size of image which is 360 x 240.
HTML Image Size Code
<img src="http://www.goldcoastwebdesigns.com/web.jpg" width="288" height="192">
Tip: It is not a good idea to resize an image to a greater dimension of the original size because it will not display properly. This method seems to work best when reducing the size of image.
HTML Image Mouseover TagAdding the alt attribute to the inline image Tag will enable you to add a description to the image. The description will be displayed when the mouse pointer hovers over the image.
<img src="http://www.goldcoastwebdesigns.com/web.jpg" width="288" height="192" alt="Sample Image">
Hover your mouse over the above image to display mouseover text. The alt attribute value in the above image is "Sample Image". Insert any value which makes sense to your web site visitors.
Image Border HTML CodeIn order to add a border to the image, we will need to add the border attribute to the Inline Image Tag.
Image Border Code
<img src="http://www.goldcoastwebdesigns.com/web.jpg" width="288" height="192" alt="Sample Image" border="1">
The above image border size is "1" defined by the border attribute. Increase the size as desired by your web design eye.
HTML Image Code Generator
1stPage 2000 Screen Shot
This button is located on the Standard Palette in Expert Mode. Selecting this button will enable you to browse your hard drive to select an image.
The software will insert the image into your web page with all the above attributes included within the Tag.
The default border value is "0" and the default alt value is "". Insert your own values into these as required.
HTML Code For Linking To This Page
<a href="http://www.goldcoastwebdesigns.com/12.shtml">Simple Image HTML Tags</a>
Webmaster Headline Feed