Scribd
Upload
7 views19 pages

Unit 3

This document is a comprehensive guide on using images, colors, and backgrounds in HTML for web design. It covers key HTML tags for images, various image formats, and best practices for styling and aligning images, as well as methods for setting text and background colors. The document emphasizes the importance of using CSS for enhanced styling control and optimizing images for performance.

Uploaded by

sonali bhabad
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
7 views19 pages

Unit 3

This document is a comprehensive guide on using images, colors, and backgrounds in HTML for web design. It covers key HTML tags for images, various image formats, and best practices for styling and aligning images, as well as methods for setting text and background colors. The document emphasizes the importance of using CSS for enhanced styling control and optimizing images for performance.

Uploaded by

sonali bhabad
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/ 19

UNIT3:Web Design: Images,

Colors, and Backgrounds in HTML


A comprehensive guide to working with images, text, and backgrounds in HTML.
Prepare by,
S.C.Bhabad
CONTENTS
 Images in HTML
 Colors and Backgrounds in HTML
 Code Examples and Best Practices
Images in HTML – Introduction
 Overview: Images are vital for creating engaging and visually appealing web
pages.
 Key Tags:
 <img>: For embedding images in a webpage.
 Key attributes: src, alt, width, height.
Image Formats
 Common Image Formats:
 JPG: Great for photos and detailed images.
 PNG: Supports transparency and high quality.
 GIF: Supports animation, limited color palette.
 BMP: Less common, large file size.
 Example: Insert images of each format to visually show their differences.
: The <img> Tag and Attributes
 Basic Syntax:
 <img src="image.jpg" alt="Description of the image">
 Attributes:
 src: Path or URL to the image.
 alt: Text to display if the image fails to load.
 Example:
 <img src="logo.png" alt="Company Logo">
Sizing Images
 Width and Height Attributes:Used to control image size.
 <img src="image.jpg" width="300" height="200" alt="Resized Image">
Image Alignment
 Aligning Images:
 Use the align attribute to align the image on the page.
 <img src="image.jpg" align="left" alt="Aligned Image">
 Visual: Examples of aligned images (left, right, center).
HSPACE & VSPACE
 Adding Space Around Images
 hspace: Horizontal space around the image.
 vspace: Vertical space around the image.
 <img src="image.jpg" hspace="20" vspace="10" alt="Image with spacing">
Images as Links
 Making an Image a Link:
 Wrap the <img> tag in an <a> tag.
 Example: <a href="https://www.example.com">
<img src="image.jpg" alt="Clickable Image">
</a>
Styling Images with CSSExample
 Styling images for size, border, and alignment.
 Code: <img src="image.jpg" alt="Styled Image" style="width: 300px;
height: 200px; border: 2px solid red; float: right;">
Colors and Backgrounds – Introduction
 Colors and backgrounds enhance the look and feel of a webpage.
 Key Concepts: Text color, link color, background color, background images.
Text Colors
 Changing Text Color with <font> Tag (deprecated):
 Code:<font color="blue">This text is blue.</font>
 Recommended CSS Method:
 <p style="color: red;">This text is red.</p>
Background Color and Text Color in <body>
 Setting Page Background and Text Color:
 HTML code: <body text="black" bgcolor="lightblue"> <h1>Welcome to
My Page</h1></body>
Link Colors
 Changing Link Colors:
 link: Color of unvisited links.
 alink: Color of an active link.
 vlink: Color of visited links.

 HTML CODE:
 <body link="blue" alink="red" vlink="purple"> <a
href="https://www.example.com">Visit Example</a> </body>
Setting a Background Image
 Background Image with <body>:
 Code:
 <body background="background.jpg">
 <h1>Welcome to My Page</h1>
 </body>
Solid Background Color
 Solid Color Background:
 Code:
 <body bgcolor="lightgreen">
 <h1>Welcome to My Page</h1>
 </body>
Using CSS for Backgrounds
 CSS Background Image and Colors:
 Code:
 <body style="background-color: lightgray;">
 <h1>Welcome to My Page</h1>
 </body>
 CSS for Background Image
 Code
 <body style="background-image: url('background.jpg'); background-repeat: no-repeat;
background-size: cover;"> <h1>Welcome to My Page</h1> </body>
Summary
 Images:
 Use appropriate formats (JPG, PNG, GIF).
 Optimize images for performance.
 Align and size images correctly for layout.
 Colors and Backgrounds:
 Use CSS for better control over text and background styling.
 Choose colors that ensure readability and good contrast.
THANK YOU

You might also like