Scribd
Upload
3 views

HTML Images and Background

The document provides an introduction to web design focusing on HTML images, detailing how to insert images using the <img> tag with essential attributes like src and alt. It explains how to set image dimensions, borders, and alignment, as well as how to customize webpage backgrounds with colors and images. The document emphasizes best practices for image handling to ensure proper display and layout on web pages.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML Images and Background

The document provides an introduction to web design focusing on HTML images, detailing how to insert images using the <img> tag with essential attributes like src and alt. It explains how to set image dimensions, borders, and alignment, as well as how to customize webpage backgrounds with colors and images. The document emphasizes best practices for image handling to ensure proper display and layout on web pages.

Uploaded by

nalumansitheresa
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

INTRODUCTION TO WEB DESIGN

DCIS1204
SEMISTER TWO
YEAR ONE
HTML Images

Inserting Images into Web Pages


Images enhance visual appearance of the web pages by making them more interesting and colorful.
The <img> tag is used to insert images in the HTML documents. It is an empty element and
contains attributes only. The syntax of the <img> tag can be given with:
<img src="url" alt="some_text">
Each image must carry at least two attributes: the src attribute, and an alt attribute.
The src attribute tells the browser where to find the image. Its value is the URL of the image file.
Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or cannot be
displayed for some reason. Its value should be a meaningful substitute for the image.
Tip: The required alt attribute provides alternative text description for an image if a user for some
reason cannot able to view it because of slow connection, image is not available at the specified
URL, or if the user uses a screen reader or non-graphical browser.
HTML Images

Set Image Location


Usually we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a
subdirectory images inside the home directory where we will keep our image test.png.
Example
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "path/url" alt = "Test Image" />
</body>
</html>
HTML Images

Setting the Width and Height of an Image


The width and height attributes are used to specify the width and height of an image.
The values of these attributes are interpreted in pixels by default.
<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Balloons" width="200" height="200">
NOTE:You can also use the style attribute to specify width and height for the images. It prevents
style sheets from changing the image size accidently, since inline style has the highest priority.
<img src="kites.jpg" alt="Flying Kites" style="width: 300px; height: 300px;">
<img src="sky.jpg" alt="Cloudy Sky" style="width: 250px; height: 150px;">
<img src="balloons.jpg" alt="Balloons" style="width: 200px; height: 200px;">
HTML Images

Note: It's a good practice to specify both the width and height attributes for an image, so that browser can allocate that much of space for
the image before it is downloaded. Otherwise, image loading may cause distortion or flicker in your website layout.You can use PNG,
JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always
case sensitive.The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed.
Set Image Border
By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0
means, no border around the picture.
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>
HTML Images

Set Image Alignment


By default, image will align at the left side of the page, but you can use align attribute to set it in the center or
right.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>
HTML Background

By default, your webpage background is white in color. You may not like it, but no worries. HTML
provides you following two good ways to decorate your webpage background.
HTML Background with Colors
HTML Background with Images
Html Background with Colors
The bgcolor attribute is used to control the background of an HTML element, specifically page
body and table backgrounds.
Note − The bgcolor attribute deprecated in HTML5. Do not use this attribute.
The syntax to use bgcolor attribute with any HTML tag.
<tagname style=”background-color:color_value"...> It deprecated insteady use the following
syntax that is supported
HTML Background

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body style="background-color: yellow;" >
<!-- Format 1 - Use color name -->
<table width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
</body>
</html>
HTML Background

Html Background with Images


The background attribute can also be used to control the background of an HTML element,
specifically page body and table backgrounds. You can specify an image to set background of your
HTML page or table.
The most frequently used image formats are JPEG, GIF and PNG images.
Example
HTML Background

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table style=”background :/images/html.gif" width = "100%" height = "100">
<div style="background-image: url('img_girl.jpg');">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>

You might also like