html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
tag, and should not distract from page content. Borders, spacing, alignment, and hyperlinks can be applied to images as well. Animated GIF files can be created by saving multiple frames in Photoshop or similar programs.">

Chapter 5

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 10

Inserting Graphics into a Web Page

Furnishing your Web page with design doesn’t end in typography, it only starts from there. Another
good way of making your webpage attractive is thru the use of images or pictures. You can insert a
picture in your Web page through the empty tag <img>. To display the image on the page, you have
to use the src attribute.

Attribute Table for <img>


Attribute Definition Values
Name
src Indicates the source of the image to be filename (path could be
inserted. This attribute must be present included) of the image file
at all times.
ex: <img src=”Zapotec.bmp”>
alt Indicates the alternative text or the text any text
that appears when the mouse hovers
over the image and/or when the image
can not be displayed.
ex: <img src=”Zapote.bmp” alt=”Can
not display”>
name Assigns a name to the image. The name any text
can be used for various purposes.
ex: <img src=”Zapotec.bmp”
name=”Zapotec”>
border Indicates the width of the border around number of pixels
the image in pixels. By default, the value
is zero (doesn’t have a border) however,
images used as hyperlinks have borders
by default; use border=”0” to remove it.
ex: <img src=”Zapotec.bmp”
height Indicates the height of the image in number of pixels or
pixels. If the actual height is not number expressed as
specified, the image will be scaled to fit. percent
ex: <img src=”Zapotec.bmp”
height=”300”>
width Indicates the width of the image in number of pixels or
pixels. If the actual width is not number expressed as
specified, the image will be scaled to fit. percent
ex: <img src=”Zapotec.bmp”
width=”300”>
align Indicates the horizontal alignment of left, right, center
image.
ex: <img src=”Zapotec.bmp”
align=”center”>
vspace Sets the vertical space in pixels above number of pixels
and below the image.
ex: <img src=”Zapotec.bmp”
vspace=”6”>
hspace Sets the horizontal space in pixels beside number of pixels
the image.
ex: <img src=”Zapotec.bmp”
hspace=”6”>
lowsrc Indicates the image to be loaded before filename (path could be
the actual image is loaded. Smaller included) of the image file
images or of lower resolution is usually
used here.
ex: <img src=”Zapotec.bmp”
lowsrc=”ZapotecLow.jpg">

HTML supports various image formats or file types namely:

 Joint Photographic Experts Group or JPEG (or JPG) – Supports a million of colors and has the
file name extension of either jpeg or jpg. This file format is commonly used.
 Compuserve Graphics Interchange Format or GIF – Supports up to 256 colors and has the file
name extension of gif. This format is commonly used and can be animated.
 Portable Network Graphics or PNG – Supports a million of colors and has the file name
extension of png.
 Bitmap or BMP – Supports a million of colors and has the file name extension of bmp. This
type of image is not compressed that’s why it provides the best quality for image at the cost of
file size.

Specifying the Background Image of a Page


You can specify the background image of the page by using the background
Attribute inside the body tag <body background=”value”>…</body>. However when using an image
as a background of a Web page you must keep in mind not to make your background image stronger
than your Web page or it will be hard to read the text of your Web page. You can also add a
background color that matches the color of the image.

In choosing a background image, you should remember the following:

1. Use an image that will not distract the text and main content of the page.
2. Do not use large image file because it will take a long time to load your page.
3. The background should not show boundaries and grids when tiled.
Adding Borders around Images
You can add border around your image and specify the border width to your image with <img
arc=”. . .” border=n>.
Adding Spaces around Images
You can add spacing between and around the images by specifying the horizontal
space using the attribute hspace=”n” and the vertical space using the attribute
vspace=”n”.
Aligning graphic to text

You can align text on the top, center of bottom of the image.

<html>
<header>
<tittle>Jemma Inc</tittle>
</header>
<body>
<font face=’’tahoma” size”5”>
<img src=”My Picture/InDesign.jpg”
Align top align=”top”>
Creative Design With Adobe Photoshop,
Illustrator, InDesign
<p>
<img src=”My Picture/InDesign.jpg”
Align top Align=”middle”>
Creative Design With Adobe Photoshop,
Illustrator, InDesign
<p>
<img src=”My Picture/InDesign.jpg”
Align top Align=”bottom”>
Creative Design With Adobe Photoshop,
Illustrator, InDesign
</font>
</body>
</html>
Wrapping text around Graphic

You can align the image to the left, right or specified portion of the picture.

<html>
<header>
<tittle>Jemma Inc</tittle>
<body>
<font face=”Tahoma” size=”3”>
<img src=”My Picture/InDesign.jpg”
Align left align=”left”>
type the contents here… . .
<br><br><br><br><br><p align=”right”>
<img src=”My Picture/InDesign.jpg”
Align right align=”right”>
type the cotents here… . .
<p>
<img src=”My Pictures/InDesign.jpg”
Align center align=”center”><br>
type the contents here… . .
</fonts>
</body>
</html>

Using Graphic as a Hyperlink

Before you can use graphic as hyperlink you have to create the image first in Photoshop, Paint or other
program.

Graphic hyperlink is commonly used as follow:

1. Link to the website’s home page.


2. Link to the next page, previous page or top of the current page.
3. Link to large full-sized graphics.
4. Link to all pages in a website.

<html>
<header>
<tittle>Jemma Inc</tittle>
</header>
<body>
<img src=”My Pictures /JEMMA BANNER .jpg”<br>
<p>
<a href=”#”><img src=”My
Pictures/ inpg_about.jpg”></a><p>
<a href=”#”><img src=”My
Pictures/ inpg_contact.jpg”></a><p>
<a href=”#”><img src=”My
Graphic hyperlink Pictures/ inpg_downloads.jpg”></a><p>
<a href=”#”><img src=”My
Pictures/ inpg_faqs.jpg”></a><p>
<a href=”#”><img src=”My
Pictures/ inpg_inquiry.jpg”></a><p>
</body>
</html>
Creating Animated GIF Files

Before you can create animated GIF files you should create your animated image in Photoshop or other
programs that can animate images. Save the animated image as GIF and save to My Pictures.

1. Get an image or create your own image using MS paint, Photoshop or any photo editing program. In
this example, we used Photoshop.
2. Open the first image in Photoshop.
3. Drag the second image into the first image.
4. Fit the second image into the first image.
5. On the Menu Bar, click Window and click Animation.
6. The Animation window will appear at the bottom of the screen.
7. Click the Panel menu to show the menus and click Make Frames from Layers. The Animation
window will show the two images.
8. Click the first image and click the Tween icon and on the dialog box type 5 on the Frames to Add
number box and click OK.
9. On the Animation window click the second image and click the Tween icon and on the dialog box
type 5 on the Frame to Add number box and click OK.
10. Drag the first image back to the first frame.
11. Click Play to test the animation and then click Stop.
12. On the Menu Bar, click File and click Save for Web & Devices.
13. On the dialog box, click Save.
14. On the Save Optimized As dialog box, type your file name and click Save.

<html>
<header>
<tittle>Jemma Inc</tittle>
</header>
Animated GIF <body>
image <img src=”My Pictures/ JEMMA BANNER. jpg”>
<p>
<center> <img src=”My Pictures/Driggor.gif”></center>
</body>
</html>
PRACTICE
Practice adding and formatting images. Place background image and animated GIF image. Copy the
codes below. Use your own images.

I.Add image <html>


<head>
</head>
<body>
<font face=’tahoma’ size =‘8’>
<img src=’ E: \ Crtv_Dsgn_cover. Png’ align=’left’>
Visual Guide
<br>Creative Design
<br>by Jemma Dev’t Group
</font>
</body>
</html>

II.Add <html>
background <head>
</head>
image
<body background = ‘E: \Crayons. Jpg’>
<font face=’arial bold’ size =‘7’ color=’white’>
CRAYONS
<br>RED
<br>BLUE
<br>WHITE
<br>GREEN
<br>VIOLET
<br>PINK
<br>ORANGE
<br>YELLOW
<br>BLACK
</font>
</body>
</html>

II.Add <html>
animated GIF <head>
image </head>
<img src=’E:\crayons.gif’>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy