Working with Images and HTML Web Page Design & Development.
Post on 29-Mar-2015
217 Views
Preview:
Transcript
Working with Images and Working with Images and HTMLHTMLWeb Page Design & Development
Inserting a Background Image
The background attribute allows an image file for the background of a Web page.
The syntax for inserting a background image is: <body background=“URL”>
URL is the location and filename of the graphic file you want to use for the background of the Web page.
for example, to use an image named “bricks.gif” as a background image, you would use the tag:
<body background=“brick.gif”>
Background Image
In choosing a background image, you should remember the following:
use an image that will not detract from the text on the Web page, making it hard to read
do not use a large image file (more than 20 kilobytes)
large and complicated backgrounds will increase the time it takes a page to load
be sure to take into consideration how an image file looks when it is tiled in the background
Web Page Backgrounds
Background overwhelms the foreground text
Background shows distracting seams between image tiles
Background doesn’t overwhelm the foreground text and seams are not evident
This figure shows some examples of well-designed and poorly designed Web page backgrounds.
Images The two image file formats supported by
most Web browsers are GIF and JPEG.
Choosing the appropriate image format is an important part of Web page design.
Balance the goal of creating an interesting and attractive page against the need to keep the size of your page small and easy to receive.
Each file format has its advantages and disadvantages, and you will probably use a combination of both formats in your Web page designs.
Working with GIF Files
GIF Graphics Interchange Format Most commonly used image format on the WWW Compatible with almost any browser
GIF Colors Limited to 256 colors Clipart Logos Icons
Interlaced and Noninterlaced GIFs
Interlacing Refers to the way a GIF file is saved by
the graphics software Graphic image is retrieved as it was saved Blurry and then comes into focus
Noninterlaced The image is saved one line at a time,
starting from the top and moving downward
Example
Transparent GIFs
Transparent color is a color from the image that is NOT displayed when the image appears in the browser
Animated GIFs
Composed of several images Easier and better than video images Available in JASC Paint Shop Pro
Let's talk about images…
When you use an image, basically you are linking to it.
It is wise to upload the image to your site.
If an image is uploaded to your web site, you do not have to link the entire web address, only the picture name.
Tags for Images
The tag to insert an image is the <img> tag
<img> is the ELEMENT and does nothing by itself
You must use attributes with this tag
You add the src attribute to insert the image
<img src=“picture.gif”>
Let's go over a few codes height - the height of the image
width - the width of the image
align - the horizontal alignment of the image top----------aligns the text with the top of the picture bottom-------aligns text with bottom of picture middle-------aligns the text with the middle of the image right--------aligns image at right margin, and text will wrap on the left side of
it left---------aligns picture at the left margin, and text will wrap on the right of
it
hspace should be the amount of space you want on the sides your picture in pixels (image margins)
vspace should be the amount of space you want on the top and bottom of your picture in pixels
Using the alt Attribute
The alt attribute specifies text to display in place of an inline image.
The syntax for specifying alternate text is: <img src=“URL” alt=“alternate text”>
Using the border Attribute
The border attribute specifies what type of line, if any, is around your picture.
If your picture is a link, you may want to turn off the border by setting it to “0.”
The syntax for specifying a border is:
<img src=“URL” border=“0”>
Alignment
<img src="monkey.gif" align="left">
Here are some examples
Aligned left. Notice how the text hugs the image, instead of starting under it.
Aligned right. The image hops over to the side, and if the text reaches it, it just drops down beside it and continues.
Today’s Assignment
Using the HTML file provided in your “hand out” folder, you must insert images into the code.
Use the directions provided.
top related