CBSE Notes for Class 10 Foundation of Information Technology – Inserting Images and Links in HTML
INSERTING AN IMAGE IN A WEB PAGE
HTML can be used to insert images in the following formats:
(i) GIF(Graphics Interchange Format)
(ii) XBM(X Bitmap)
(iii) JPG or JPEG 0oint Photographic Experts Group)
(iv) PNG (Portable Network Graphics)
The <img> tag is used to insert an image in a Web page. It is very important to know that images are not technical part of the Web page file, they are separate files which are inserted into the Web page, when it is viewed by a browser.
So, a simple Web page with one image is actually two files. When an HTML file is displayed in a browser, it requests the image file and places it on the page where the tag appears.
Syntax <img src = "image URL" [various attributes]>
Here, src attribute is used because it provides the information about the path of an image file to the Web browser.
Attributes of <img> Tag
An attribute is an extra piece of information associated with a tag that provides further details about the tag.
Following are the various attributes of <img> tag:
The src Attribute
The src (source) attribute takes URL (Universal Resource Locator) of an image file as value, which points to the direct location of an image to be displayed.
The image that you specify in your <img> tag should be in your computer otherwise the image will not be displayed and in place of image a cross mark in a box 0 will appear.
Example 1. To display an image.
<html> <head> <title> Image </ti tl e></head> <body> <h l > Look at the image </hl><br> <img src = "D:\image.jpg"> </body> </html>
The alt Attribute
This attribute of <img> tag is used to provide alternate text when an image on a Web page cannot be displayed.
The alternative text is the text associated with an image that serves the same purpose and conveys the same essential message. As per HTML standard, alt attribute is optional but is highly recommended.
Sometimes, the Web browser you are using does not display an image that is inserted in the Web page because of slow connection, error in src attribute or if the user uses a screen reader. In such cases, this attribute is specified to provides alternative information for an image. Generally, it is a short description of an image. The value for alt attribute is a text string of upto 1024 characters including spaces and punctuation. The string must be enclosed in quotation marks.
Example 2. To display an image with some alternate text.
<html> <head> <title> Image </title> </head> <body> <hl > Look at the image </hl><br> <img src = ''D:\image.jpg" alt ="It is a beautiful flower" > </body> </html>
When mouse pointer is moved on the image, the text specified in alt attribute displayed as a tooltip in Internet Explorer only. If you want to provide a tooltip for other browsers such as Mozilla Firefox, Google Chrome etc., use title attribute in place of alt attribute, since it is supported in most of the browsers.
The align Attribute
This attribute is used to set the position of an image in a Web page according to the user’s requirements. In HTML, images appear inline with a single line of the text. But, HTML standard does not define a default alignment for the images with respect to other text and images in the same line.
Hence, the absolute output regarding the placement of image cannot be predicted in advance. So, to control the image alignment, align attribute is used. The alignment of the image depends upon the Web browser that you are using to view the Web page. This implies that the Web page can be different according to the Web browser such as Internet Explorer and Mozilla Firefox. There are some values of image alignment attribute as follows:
1. Top Alignment
This alignment aligns the top of an image with the top edge of the tallest item in the text line. If there are no other images in the current line, then the image is aligned to top of the text. Both Internet Explorer and Mozilla Firefox treat this alignment in same manner.
Example 3. To show top alignment of an image.
<html> <head> <ti 11 e> Alignment </ti tl e> </head> <body> <hl> Top Alignment </hl> <img src="flower2.jpg" align="top"> A flower, sometimes known as a bloom or blossom, is the reproductive
structure found in flowering plants. The biological function of a flower is to
effect reproduction, usually by providing a mechanism for the union of sperm with eggs.
</body> </html>
2.Middle Alignment
This alignment is different in both Internet Explorer and Mozilla Firefox. In Internet Explorer, this alignment aligns the image to the middle of the tallest item in the current line. While in Mozilla Firefox, this alignment aligns the image to the baseline of the current line in which it is placed.
Example 4. To show middle alignment of an image.
<html> <head> <ti tl e> Alignment </title> </head> <body> < h l > Middle Alignment < / h 1 > <img src="flower2.jpg" align="middle"> A flower, sometimes known as a b'oom or blossom, is the reproductive
structure found in flowering plants. The biological function of a flower is to
effect reproduction, usually by providing a mechanism for the union of sperm with eggs. </body> </html>
3. Bottom Alignment
This alignment aligns the bottom edge of the image, to the same horizontal plane as the baseline of the text. Both Internet Explorer and Mozilla Firefox treat this alignment in the same manner.
Example 5. To show bottom alignment of an image.
<html> <head> <ti tl e> Alignment </ti tl e> </head> <body> <hl> Bottom Alignment </hl> <img src="flower2.jpg" alt="flower" align="bottom"> A flower, sometimes known as a bloom or blossom, is the reproductive
structure found in flowering plants. The biological function of a flower is to
effect reproduction, usually by providing a mechanism for the union of sperm with eggs. </body> </html>
4.Left Alignment
This alignment aligns the image to the left on the Web page respectively of the browser window.
Example 6. To show left alignment of an image.
<html> <head> <ti11 e> Alignment </title> </head> <body> < h 1 > Left Alignment < / h 1 > <img src="flower2.jpg" align="1eft">. A flower, sometimes known as a bloom or blossom, is the reproductive
structure found in flowering plants. The biological function of a flower is to
effect reproduction, usually by providing a mechanism for the union of sperm with eggs. </body> </html>
5 Right Alignment
This alignment aligns the image to the right on the Web page respectively of the browser window.
Example 7. To show right alignment of an image.
<html> <head> <title> Alignment </title> </head> <body> < h 1 > Right Alignment < / h 1 > Cimg src="f1ower2.jpg" align="right"> A flower, sometimes known as a bloom or blossom, is the reproductive
structure found in flowering plants. The biological function of a flower is to
effect reproduction, usually by providing a mechanism for. the union of sperm with eggs. </body> </html>
The width and height Attributes
When an image is added to a Web page, it is not mandatory to specify width and height of the image. At the time of loading an image, a box will appear on the place where the image will be loaded.
This box may be of any size and often of the wrong size. Then, when the image finally begins to load, it is suddenly found to be too big for the given space.
So, everything shifts around to make place for the image and this cause obstruction.
To prevent this situation, height and width attributes are used. The width and height attributes tell the dimension of an image to the browser.
If height and width are set, the space required for image is reserved before loading the page.
Both (height and width) attributes require integer values (dimension of image in terms of either pixels or percentage of its actual size). It is also noticeable that the order in which these attributes appear, is not important.
Example 8. To illustrate the use of width and height attributes.
<html> <head> <ti tl e> Resize </title> </head> <body> < h 1 > Height and Width < / h 1 > Original Image <img src ="pi cturel. jpg"> After Resizing <img src="pi cturel .jpg"
height = "50" width = "50">
</body> </html>
The border Attribute
You can set the border of an image that you want to use in your Web page. The border attribute of the <img> tag specifies the width of the border around an image. By default, an image has no border in HTML.
Example 9. To set the border around an image using border attribute.
<html> <head><ti tl e> Setting Image Border </title></head> <body> < h 1 > Setting Image Border < / h 1 > <center> <img src="flowerl.jpg" height="120" width="200" border="5"> </center> </body> </html>
LINKING
A key feature of the HTML is its ability7 to link text and/or an image to another document or within a document. If you are on a Web page and see the colored and/or an underlined text, it is a hyperlink. It is also known as hypertext link or just link. The main objectives of linking are as follows:
- To add more pages to the Website and link them together.
- Using internal links (anchors) to save scrolling for visitors.
- To indirect the user to Web page of different Website.
In other words, hyperlinks are the links that carry user from one Web page to another Web page (within or on another Website).
It is activated by clicking on an underlined text or image. And, when the mouse pointer is brought over a hyperlink, the pointer changes to a hand. In HTML, links can be created by using <a> anchor tag. <a> tag is a container tag that means it requires a starting as well as ending tags.
To include an anchor in your document, you should do the following:
- Start the anchor tag with <a.
- Specify the document you are linking to, by entering the parameter href = “file name”.
- Place closing right angle bracket (>).
- Enter the text that will serve as the hypertext link after the opening <a> tag.
- Enter the closing anchor tag </a>.
More precisely, it can be seen as:
<a href ="mypage. html ">My another page</a>
Here, it is noticeable that the finale/a> tag is required. If it is not included, everything following that link will also be linked to another document, until the tag is closed.
Types of Linking
There are two types of linking in a Web page, which are as follows:
1. External Linking
This leads to a link that go to another Website. In other words, it refers to a different page on a different Website. When a user click on a hyperlink on a Web page, user is directed on the location, which is specified in that hyperlink. To create an external link with <a> tag and its href attribute (to define URL of target document), a title attribute also needed.
The href Attribute
The href stands for Hypertext Reference. The href attribute is used to specify the URL of the target document. It is used to specify the destination of Web page, which is linked. Notice, the pages on Internet should give a complete URL, i.e. alongwith http://.
Example 10. To show external linking.
<html> <head> <title> Creating a Hyperlink </1i 11 e> </head> <body> <hl> Look at the image </hl> <br)<img sre ="D:\images.jpg" alt = "It is a beautiful picture") <a href = "http://www.google.com"> Click Here < / a > to get more flower images. </body> </html>
Images as Links
Images can also be used as hyperlinks. To create image as a link, following syntax is used:
<a href = "URL"> <img src="imagel.jpg"> </a>
Example 11. To show image as link.
<html> <head> < t i 11 e> Image as Link< /title) </head> <body> <a href " Lp://en.wikipedia.org/wiki /Tweety") <img src="D:\C1asslO\computer \tweetyl. j pg"X/a> </body> </html>
Listed Hyperlinks
It is noticeable that <a> tag can also be used for more complex task (as with images or with lists etc.)
Example 12. To show listed hyperlinks.
<html> <head> <title> List </title> </head> <body> <hl>List </hl> <ul > <li> <a href="l inkl. html "Xitng src = ”F: ' \Fruits-wallpaper-91.jpg" align="middle" height="75" width="75"> Fruit Chart </a)</l i><br><br> <li> <a href= "link2.html") <img src="F:\vegetable.jpg" align="middle" width="75" height="75"> Vegetable Chart </a> < /1 i > </ul> </body> </html>
The title Attribute
The title attribute of anchor <a> tag is used to specify the title of the document to which, we are linking. The value of the title attribute can be any string enclosed within double (or single) quotes.
It is used for referencing an unlabeled resource (like an image or a non-HTML document). The value specified for this attribute appears as a tooltip when the mouse pointer is placed over the hyperlink. The title attribute can also be used by the browser, when adding the link to the user’s hotlist.
Example 13. To illustrate the use of title attribute.
<html> <head><titl e>Creating Hyperlink</1i tl e></head> <body> <a href = " http://www.google.com" title ="It is a hyperlink"> ClickHere </a> </body> </html>
2. Internal Linking
This is a type of HTML linking that links pages within a single Website, various sections of same document or different document.
Linking on the Same Web Page
To create an internal link, you need to use a pair of <a> tags. The first <a> tag is used to specify the name of the target location for identification purpose. It is known as target fragment. You can use the <a> tag with its name or id attribute to identify a fragment. This type of anchor is commonly called as named anchor.
The first step is to make the target fragment. The simple syntax to do so is written below:
<a name ="aa"> Part A </a>
Where, “aa” is the name of fragment/segment you want to refer (like top, bottom etc.). The second <a> tag is used to create a link to the target fragment. The simple syntax to link to the target segment is written below:
<a href = "#aa"> ClickHere </a>
In the second <a> tag, the value of href attribute with # symbol is to be specified.
Example 14. To show the internal linking in an HTML document.
<html> CheadXti tl e>Internal LinkingC/1i 11 eX/head> <body> <hl>Linking in a page </hl> <h3>Click here to go to the <a href="#bottom">bottom</a> of the page.</h3> <br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <a name="bottom"<h3> You are at the bottom of the page.</h3></a> </body> </html>
Linking Sections of Different Web Pages
Internal linking enables us to link sections of different Web pages also. It can be done by specifying the name of the Web page and the section which is to be linked. To link two Web pages, you first need name to the section by using name attribute of <a> tag that you want to link. Suppose, we need to link a section of HTMLl.html to HTML2.html. Create a named anchor in HTMLl.html.
The syntax is given below:
<a name ="link"> Different Page </a>
After this, you have to write the code to refer to it, from Web page HTML2.html. Following is the code to do so:
<a href ="HTML1. html#! ink">
Here, HTMLl.html is the name of html file to the section of which you want to link and # link is the segment name you want to link in that html file.
Significance of Linking
Links on a Web page allow user to jump to another document. It is a very useful feature of HTML as when you click on a hypertext, it carries you to other document.
It enables the Web page writer to refer to other documents and thus prevent the need of creating large document.
e.g. if you are reading an F,-Book, where many chapters are explained. Now, if you want to read the last chapter of the book, then by using hyperlink, you can go to that chapter directly without scrolling down to whole book.
SENDING E-MAIL FROM A BROWSER
Sending and receiving E-mails is the quickest and economical means of communication. The mailto attribute of anchor <a> tag is used to serve the purpose of sending E-mails through a Website. It enables emailing, which helps visitors to send feedback through the Website.
The mailto value when used alongwith an E-mail address in href attribute of anchor tag, will create a link. When this link will be clicked, it will open default E-mail client.
You can also add a header to E-mail sent from a mailto link. Using “ISubject = Subject line”, we can add subject line of the E-mail window.
Example 15. To illustrate the use of mailto function.
<html> <head>titl e> Mailto Attribute </ti tl e></head> <body> Send to <a href="mai1 to:[email protected] ace.com? Subject='Sent from ABC'"> [email protected] </a> </body> </html>
SUPERSCRIPT AND SUBSCRIPT IN HTML
<sup> Tag
The text which is elevated slightly above the baseline to appear above the surrounding text is known as superscript, e.g. In a , the superscript is 2. In HTML, the <sup> and </sup> tags turns the enclosed text into superscript. In its simplest form, <sup> tag may be specified as: <sup> aaa </sup>
Where, aaa is the text, which is to be superscripted.
Example 16. To show the use of superscript.
<html> <head><ti tl e> Superscripted </ti tl e></head> <body> < h l > Some Examples of Superscript are < / h 1 > 2<sup>3</sup>=8<br> 14<sup>x</sup>=8<br>e<sup>x</sup>=8<br> </body> </html>
<sub> Tag
The text which is lowered slightly below the baseline to appear below the surrounding text is known as subscript, e.g. in H2 O, 2 is the subscripted text.
In HTML, the <sub> and </sub> tags turn the enclosed text into subscript. In its simplest form, <sub> tag may be specified as:
<sub> aaa </sub>
Where, aaa is the text, which is to be subscripted.
Example 17. To show the use of subscript.
<html> <head><title> Subscripted </ti tl eX/head> <body> < hl> Some Examples of Subscript are < / h 1 > <p>H<sub>2</sub>0 - Water </p> <br><p>log <sub>2</sub>x</pXbr> <p>CO<sub>2</sub> - CarbonDioxide</p> </body> </html>
Attributes of <a> Tag
| Attributes | Description | Syntax |
| href | Specifies the URL of the page link goes to. | <a href=”URL”> Some Text</a> |
| name | Specifies the name of an anchor. Used to link to different segments within the same html document or of different html document. | <a name=”name of segment”> Some Text </a> |
| title | To give title to the document to which you are linking. | <a href =”URL” title=”text”>Some Text</a> |
| mailto | This function is used in href which creates a mail link upon clicking at which the mail software gets opened. | <a href-‘mailto: emailaddress?Subject=”Subject Line”> Some Text </a> |
Attributes of <img> Tag
| Attributes | Description | Syntax |
| src | Takes the URL of the image file that you want to insert in the Web page. | <img src=”path/file name”> |
| alt | Provides an alternative text to an image, in the case of someone using a text-only browser or using a graphical browser with images turned OFF. | <img src=”path/file name” alt=”text”> |
| align | Allows to position an inline image relative to the line of the text that it is ON. Values that align attribute can have: top aligns image at the top. middle aligns image in the middle. bottom aligns image at bottom, left image is aligned to the left, right image is aligned to the right. |
<imgsrc=”path/filename”align=”left/right/middle/top/bottom”> |
| height | Specifies the height of an image. | <img src=”path/file name”height=”pixels/percentage“> |
| width | Specifies the width of an image. | <img src=”path/file name” width=”pixels/percentage“> |
| border | Specifies the width of an image border. | <img src=”path/file name” border=”number”> |