Search the Whole World Here.,.,

Archive for 09/26/16
Image Size - Width and Height

Image Size - Width and Height

Add Comment

You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):

Example

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
Alternatively, you can use the width and height attributes. Here, the values are specified in pixels by default:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Try it Yourself »
Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads.
The alt Attribute

The alt Attribute

Add Comment

The alt attribute provides an alternate text for an image, if the 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).

If a browser cannot find an image, it will display the value of the alt attribute:

Example

<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
The alt attribute is required. A web page will not validate correctly without it.
HTML Images Syntax

HTML Images Syntax

Add Comment

In HTML, images are defined with the img tag.

The img tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text" style="width:width;height:height;">
HTML Images

HTML Images

Add Comment

JPG Images

Mountain View

GIF Images









                                                                    PNG Images

Graph





























Example

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
Try it Yourself »

HTML Links - Create a Bookmark

HTML Links - Create a Bookmark

Add Comment

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:

Example

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Try it Yourself »

HTML Links - Image as Link

HTML Links - Image as Link

Add Comment

It is common to use images as links:

Example

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself »
Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).
Subscribe to: Posts (Atom)

Ads by Google