Inserting image

-
Images always make content presentation more more attractive and communicate. Now versions of HTML come with many web development feature, but the code required for adding images is simple. HTML provides a tag <IMG> to insert images in HTML pages. The following is the simple way of using this tag:
<IMG SRC ="picture1.jpg">


 The <IMG> tag is an empty tag and it has many attributes. SRC is the main attribute and it specifies the file name of the image to be inserted. We can use JPEG, PNG or GIF image files based on our needs, but make sure that the correct filename with the extension is specified using SRC attribute. If the image file is not in the current working directory, we have to specify the path of the file or the URL where the file is available.

Setting space for the image

We can set the space in web page for the image by specifying the values for the Width and Height attributes. The value are given in terms of either pixels or percentage of its actual size. If these attributes are not specified, the browser will display the image in its actual size.

Now let us discuss how to set space between images. We know that there are two types of space between the images when they are placed in a window  - vertical space and horizontal space. HTML offers to attributes Vspace and Hspace for providing vertical spacing and horizontal spacing between the images in the web page.

The HTML code in example demonstrates the two types of spacing discussed above the figure shows the web page obtained from the code.






Figure shows that the images are placed within the given width and height, and the distance between the images is according to the specified horizontal and vertical spacing.

Now let us discuss another important attribute, Align for <IMG> tag, which aligns the image with respect to the base line of the text. The possible values for this attribute are the following:

Bottom : Aligns the bottom of the image with the base line of the                   text and this is the default setting.
Middle  : Align the middle of the image (vertically) with the.                           baseline of the text.
 Top        :Align the image with the top of the text.

Setting border around an image

Suppose we want to give a border to an image inserted in a web page. It is possible with the border can be set by giving appropriate value to this attribute.
we have learnt various attributes of <IMG> tag and their effects on the image. If the image file specified with the Src attribute is not fount in the given path, how will the web page look  the specified place in the web page for the image will be left blank. Due to some other reasons also,the web browser may not be able to display the image. In such situation, we can provide an alternative text in the browser in the absence of image. HTML provides the attribute Alt to specify an alternate text for an image, if the browser cannot display the image. 

Comments

Post a Comment

Popular posts from this blog

List in HTML

-
Image
While presenting information, the facility of listing can make it more communicative. List are of different types. We are familiar with numbered lists and bulleted lists.  HTML offers several mechanisms for specifying lists of information. All lists must contains one or more list elements. There are three kinds of list in HTML- unordered lists, ordered lists and definition lists. Unordered list Unordered lists or bulleted lists display a bullet or other graphic in front of each item in the list. We can created an unordered list with the tag pair <UL> and </UL> . Each item in the list is presented by using the tag pair <LI> and </LI> . Unordered lists are used when a set of items can be placed in any order. The code in example presents some hardware components of a computer in bulleted list. The corresponding web page is showing in figure. We can customise unordered lists by setting the Type attribute to three diffrent values: Disc (default valu
Read more

Basic concept of HTML documents

-
Image
Basic structure of an HTML document Sample HTML document to illustrate the structure of a web page <HTML>       <HEAD>           <TITLE> This is the title of web page </TITLE>       </HEAD>       <BODY>            Hello, Welcome to the world of web page!       </BODY> </HTML> You can see some of the words in the upper case within a pair of angle brackets < and >. These are HTML tags. It is not necessary that tags be written in the upper case. HTML is not case sensitive. We can use either the upper or lower case or even a mix of the two. In this book, we follow the style of using the upper case for HTML tags and sentence case for attributes to distigush them from other words or text. All HTML pages begin with the tag <HTML>  and end with tag </HTML> . There are mainly two sections in an HTML document namely head section and body section. The <HEAD>  tag  is used to define the head section.
Read more