Scribd
Upload
5 views

Embedded Content

Uploaded by

osnol4829
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Embedded Content

Uploaded by

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

Lesson 7 EMBEDDED CONTENT

Inserting Graphics
The Web page becomes more interesting if pictures are added. Graphics
enhance the appearance of your Web page. You can place small or large images.
You can even use an image as a link to other pages.
To insert a graphics file, you have to create inline images. This can be done
by identifying the URL reference. You have to identify exactly where image can
be found; otherwise, it will not be displayed on the Web page. Graphics should
be GIF, JPG, BMP or PNG files.
File Format Application
GIF Line art and animation
JPEG Photographic
BMP Most common graphics
used in Web pages and
made up of pixels
PNG Line art and photographs

The easiest place to save the image is in the same folder or directory as your
HTML source file, where the browser will automatically search. If you have
many images to organize, you may want to place them in a single folder. You
can name this folder as image or pictures. Then place that folder in the same
directory as your HTML file.

You have to use the IMG (image) format tag when inserting a graphics file.
The IMG tag has several attributes. The primary attribute is the
src=graphicsname. SRC means source and refers to the location of the image.

You should be careful with the way you write the filename. Filenames are
case sensitive. If the filename is in capital letters, then the attribute must
also be in capital letters inside quotation marks. If it is in small letters, then
the attribute should also be in small letters.
Name Tag Function Syntax
Image tag Inserts images under <img src =
the same folder “image_URL”>
<img src = “filename”>
Inserts images in a <img src –
separate folder and “picture/filename”>
includes the exact
location of the file.
To insert a picture
1. Open Notepad
2. Type the following:
<html>
<head><title>Inserting Picture</title></head>
<body>
<img src="C:\Users\lealynn\Desktop\Staysafe.jpg">
</body>
</html>
3. Save it as image1.html

The Align Attribute


You will notice that when you view the image on a browser, the image is
aligned towards the left margin. Images are treated like a character in the line of
text. Don’t wrap text alongside the graphics. Specify where the image can align
in relation to the text.
Syntax:
<img align=”position” src=”image_URL”>
Attribute Function
Top The text is aligned on the top of the image
Middle The text is aligned at the middle of the image
Bottom The text is aligned at the bottom of the image

To align the text to the Top, Bottom and Middle of the image.
(You can use any picture or graphics available in your computer.)
1. Open Notepad.
2. Type the following:
<html>
<head><title>Image Position</title></head>
<body>
<img align="top" src="C:\Users\lealynn\Desktop\Computer.jpg">
This text is aligned at the TOP of the image.
<br>
<br>
<img align="middle"
src="C:\Users\lealynn\Desktop\Computer.jpg">
This text is aligned at the MIDDLE of the image.
<br>
<br>
<img align="bottom"
src="C:\Users\lealynn\Desktop\Computer.jpg">
This text is aligned at the BOTTOM of the image.
<br>
<br>
</body>
</html>
3. Save it as image2.html

To align the text to the Left or Right of an image.


1. Open Notepad.
2. Type the following:
<html>
<head><title>Image Alignment</title></head>
<body>
<img src="C:\Users\lealynn\Desktop\covid19.png" align="left">
<p>Coronavirus disease (COVID-19) is an infectious disease caused by a
newly discovered coronavirus.
Most people who fall sick with COVID-19 will experience mild to
moderate symptoms and recover without special treatment.</p>

<img src="C:\Users\lealynn\Desktop\covid19.gif" align="right"


width="150" height="150">
HOW IT SPREADS
<p>The virus that causes COVID-19 is mainly transmitted through
droplets generated when an infected person coughs, sneezes, or exhales.
These droplets are too heavy to hang in the air, and quickly fall on floors
or surfaces.
You can be infected by breathing in the virus if you are within close
proximity of someone who has COVID-19, or by touching a contaminated
surface and then your eyes, nose or mouth.</p>

</body>
</html>
3. Save it as image3.html

Specifying the Image Height and Width


The height and width of the image can be specified within the <img> tag
when you display it on your Web page.

Identifying the size makes the Web page display faster. If there are size hints
for your inline images, the browser can display the formatted HTML document.
If size hints are not used, the user will see a small icon in place of the image.
It can resort to a distortion on the way the Web page was formatted.

The height and width of the image is measured in pixels. Use the <img>
tag’s HEIGHT attribute to tell the browser how many pixels tall the graphic
display is. Use the WIDTH attribute to tell the browser how many pixels wide the
graphic display is.
Syntax:
<img src=”filename” width=”value” height=”value”>
To add width and height to an image
1. Open Notepad
2. Type the following:
<html>
<head>
<title>Graphics4</title>
</head>
<body>
<font size = “4” color = “green”>
IMAGE WIDTH = 100 and HEIGHT = 100
<img src="C:\Users\user9\Desktop\SocialDistancing.jpg" width="100"
height="100">

IMAGE WIDTH = 200 and HEIGHT = 200


<img src="C:\Users\user9\Desktop\SocialDistancing.jpg" width="200"
height="200">

</body>
</html>
3. Save it as Graphics4.html

You can determine the exact width and height of an image by using a
computer graphics program such as Adobe Photoshop. Open the image file
in a graphics program to determine its exact width and height. You can
easily reduce or enlarge the image by changing ethe values of the width and
height.

Providing Text Alternative to Images


When a viewer encounters slow Internet connection and wants to view the
text and images on the screen, he/she can provide a text alternative using HTML.
Instead of the image being displayed, it can be replaced with text that tells
something about the image. It’s just like a brief description of what are missing.
This can be done by using the <img> tag’s ALT attribute.
Syntax:
<img src=”filename” ALT=”description”>
The effect of this code is that when user’s browser isn’t displaying the
images, the alternative text is seen in the image’s place. For the user whose
browser can display images, the alternative text is seen first while waiting for the
image to be fully displayed on the screen. Once the images are displayed, the
text will appear every time the user hovers the mouse on the image.
To display an alternative text
1. Open Notepad.
2. Type the following:
<html>
<head>
<title>Graphics5</title>
</head>
<body>
<h1><center>Alternative Text to an Image</center></h1>
<img src="C:\Users\user9\Desktop\stayhomestaysafe.jpg" width="374"
height="470" alt=”Stay Home, Stay Safe”>

</body>
</html>
3. Save it as Image5.html

Aligning Image
The placement of the image on the page can be controlled by using the
image Align tag. Here are the different attributes of alignments.
Attribute Function
left or right Aligns to the side and wraps the text above, around
and below it.
top Aligns with the tallest item available
text top Aligns with the tallest text character available
middle Aligns the baseline of the current line with the middle
of the image
absmiddle Aligns the middle of the current line with the middle of
the image
baseline Aligns the bottom of the image with the baseline of the
current line
bottom Aligns the bottom of the image with the baseline of the
current line
absbottom Aligns the bottom of the image with the bottom of the
current line

Syntax:
<img src=”name of image” align=”type of alignment”>
To display the image on the left side
1. Open Notepad
2. Type the following:
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<img src="C:\Users\user9\Desktop\cat.png" align="left" width="100"
height="100">
<font size=”5” color=”blue” face=”Times New Roman”>
Cat on the Left side
</body>
</html>
3. Save it as Image6.html

To display the image on the Right side


1. Open Notepad
2. Type the following:
<html>
<head>
<title>Image Alignment</title>
</head>
<body>
<img src="C:\Users\user9\Desktop\cat.png" align="right" width="100"
height="100">
<font size=”5” color=”red” face=”Times New Roman”>
Cat on the Left side
</body>
</html>
3. Save it as Image7.html
Centering an image is a little tricker, because <img align=”center”>
doesn’t work on most browsers. Instead, you’ll have to center the paragraph
first, with <p align=”center”> (even if you don’t have any text), then place
the image.
To Center the “Cat”
1. Open Notepad
2. Type the following:
<html>
<head>
<title>Image Alignment-center</title>
</head>
<body>
<p align=”center”>
<img src="C:\Users\user9\Desktop\cat.png" width="100"
height="100">
<br>
<font size=”5” color=”violet” face=”Times New Roman”>
Cat on the Left side
</body>
</html>
3. Save it as Image8.html

You might also like