Scribd
Upload
20 views14 pages

HTML - Iii

Uploaded by

anshumanpatra664
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views14 pages

HTML - Iii

Uploaded by

anshumanpatra664
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Html-iii

Prepared By-
Biswa Mohan Mohanty
DAV Public School, Pokhariput
Learning Objectives:-
The learner will be able to :

 Understand the need of images in webpages

 Design webpages using <img> tag.

 Appreciate the need of Src, Height, Width, Border, Align and alt attributes with

<img> tag.
Activity:- PAGE NO-73

The Thirsty Crow The Cap Seller and the Monkey Fox and the Grapes

The Monkey and The Crocodile LION AND RABBIT


Activity-2
Answer the followings:
• Spot the difference between the two stories.

• Which presentation is better and why?


<IMG> tag
 The HTML <img> tag is used to embed an image in a web page.
 Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced
image.
 The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
 There are three types of image files which can be used in HTML
indicated by file name extensions-.jpg,.gif, and .png.
Extension Features

• Developed in 1992 by a consortium of large tech companies


JPEG (or JPG) – • JPEG images use what is known as a “lossy compression” to approximate image
Joint Photographic details and reduce the file size by up to 90%.
Experts Group

• PNG has the feature of “lossless compression” that perfectly preserves the details
but may shrink, enlarge, or maintain the file size depending on what’s shown in the
PNG – Portable image.
Network Graphics • The main upside of PNG files is the ability to have transparency channels, giving it
great flexibility for layered images.

• This animated image file format was created way back in 1987 by CompuServe, the
first US-based ISP.
• It excels in portraying low-quality animated slideshows, which serve as extremely
GIF – Graphics portable video files. Yet, GIF is a fairly limited format in terms of color as it is only
Interchange Format able to display at most, 256 different colors at a time.
• Similar to PNG, GIF files also use lossless compression, resulting in varying file
sizes depending on the image content.
Required Attributes:-
 The <img> tag has two required attributes:
 src - Specifies the path to the image(Absolute path/Relative Path)
 alt - Specifies an alternate text for the image

 Source Code to Insert an image:-


<HTML>
<BODY>
<IMG SRC=“ANIMAL.JPG” ALT=“IMAGE IS NOT SUITABLE”>
</BODY>
</HTML>
Spot the difference in two code:-
 Source Code to Insert an image:-
<HTML>
<BODY>
<IMG SRC=“ANIMAL.JPG” ALT=“IMAGE IS NOT FOUND”>
</BODY>
</HTML>

 Source Code to Insert an image:-


<HTML>
<BODY>
<IMG SRC=“C:\DESKTOP\WEBPAGE\ANIMAL.JPG” ALT=“IMAGE IS
NOT FOUND”>
</BODY>
</HTML>
Optional Attributes of IMG Tag
Attributes Values Description

Align Top, bottom, middle, left, Specifies the alignment for the image
right
Border Pixels Specifies the width of the image border

Height Pixels or %ge Specifies the height of the image


border
Width Pixels or %ge Specifies the width of the image border

HANDS ON
ANCHOR TAG
Anchor tag is used to create hyperlink in a webpage.
Syntax :- <a href=“URL”> Link Text</a>
 The HREF (Hypertext Reference) attribute is used to specify the
URL(Web Address of the page) to be displayed when the user
clicks on the link text.
 The text between <a> </a> is known as Link Text.
 An unvisited link is underlined and blue.
 A visited link is underlined and purple.
 An active link is underlined and red.
Types of linking
1. Internal Linking : When one part of a webpage is linked to
another section on the same page.
 To create Internal Linking we will create a Book mark using name
attribute in <A> tag.
 <a name=“Value”>
 <a href=“#Value”>Link Text</a>
2. Eternal Linking: When one page is linked to another webpage
on same or another website.
E-Mail Linking
1. In order to send email from the website designed by us we can
provide a special link using the <a red> tag called mailto.
<a href=mailto:[email protected]>contact Me</a<

You might also like