Scribd
Upload
28 views

Images&Links

This document discusses six main factors to consider when creating images for the web: format, color, size and resolution, speed, transparency, and animation. The most common formats are GIF, JPG, and PNG. Images on the web are generally smaller in size than printed images to improve download speed. Transparency and animation can add visual interest to web pages.

Uploaded by

khairitkr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
28 views

Images&Links

This document discusses six main factors to consider when creating images for the web: format, color, size and resolution, speed, transparency, and animation. The most common formats are GIF, JPG, and PNG. Images on the web are generally smaller in size than printed images to improve download speed. Transparency and animation can add visual interest to web pages.

Uploaded by

khairitkr
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

Creating Web Images

Creating Web Images


A bit different from creating images for output on paper Six main factors distinguish them:
1.

2.
3. 4.

5.
6.

Format Colour Size/resolution Speed Transparency Animation

6 factors that you keep in


mind as you create Web pages

Format
Web accessed by Macs, Window-based PCs, Unix machines and etc Two most widely used formats are on the Web

GIF
JPG PNG

Netscape and Explorer can view all three format

Color
24-bit @ true color monitor 16,777,216 colors 16-bit monitor 65, 536 colors 8-bit monitor 256 colors

Size & Resolution


Computer images are measured in PIXELS 640x480 pixels how BIG is that?

Printer at 200 ppi (pixels per inch) 3.2x2.4 inches Web the image depend on monitor 86 ppi 7.5x5.5 inches (19x14 cm)

The higher the resolution, the more pixels

Web page designers, tend to keep their pages under 600 pixels wide, so that viewers can see the entire contents of the page without scrolling horizontally

Speed
How can you keep download time to a minimum??? small picture The larger an images file size the longer it takes

Transparency

Important for 2 reasons:


You can create complex layouts by making one image move behind another 2. You can take advantage of transparency to give an image a non-rectangular outline, adding visual interest to your pages
1.

Animation
Moving images GIF Flash

Images

Images are placed in Web documents using the img tag This tag is empty, and therefore has no closing tag The tag is < img >, < img > by itself is pointless-- it will do nothing At the very least, you need to let the browser know where to find the image that it's supposed to place in the document. In order to make the img tag work, you need to use an src attribute src stands for "source," as in, "the source of this graphic. The value of src is the URL of the graphic you want to have displayed on your Web page. Thus, a typical image tag will take the form: <

img src ="URL of graphic">

images.ht m

Inserting Images on a Page

The location of the image


<img src="Winter.jpg"/>

Offering alternate text


Add

descriptive text that will appear of the image does not

<img src="Water lilies.jpg" alt="water lilies"/>

Specify SIZE of the image

Within img tag, after src attribute, type width=x height=y (in pixels)
<img src="Sunset.jpg" alt="sunset" width="150" height="100"/>

Links

Starts with <a> and ends with </a> Cannot use the <a> tag by itself, because it doesn't do anything.

You'll need to enhance the <A> tag with attributes like..

href

Stands for hypertext reference, A way of saying, "The location of the file I want to load." Most anchors are in the form <a href="URL">, where URL is the location of the resource to which you want the link to point.

Linking Thumbnails to Images


If you have a particularly large image, you can create a miniature versions or thumbnail of it That link leads the visitor to the full size image

<a href="C:\Documents and Settings\hanamunira\ My Documents\2007-S1\IP-ICT 1083-DSN4\mystuff \week two\Sunset.jpg"> <img src="ss.jpg" alt=sunset /> <br />

Making Images Float

Image float along side of your web page, with text and other elements wrapping around the other
<img src="Blue hills.jpg" align="right" alt="bluehills" width="150" height="100"/>

as

default LEFT align RIGHT or LEFT

<!-- making image float --> <p> <img src="Blue hills.jpg" align="right" alt="bluehills" width="150" height="100"/> <img src="Blue hills.jpg" align="left" alt="bluehills" width="150" height="100"/>

</p>
<center> <img src="Blue hills.jpg" alt="bluehills" width="150" height="100"/> </center>

Stopping Element from Wrapping

Image will appear at the end of the image

<br clear=right />

Adding Space around an Image

Use deprecated vspace and hspace attributes to add a buffer around the image

<body> <h1> MAIN TITLE </h1> <img src=image1.jpg align=right width=200 height=350 alt=an IMAGE vspace=15/> <br clear=right /> <p>This IMAGE1 are align to the RIGHT of this text</p> </body>

Aligning Images

align attribute is for aligning images with text

<img src=tall.jpg alt=tall image />default <img src=square.jpg align=texttop alt=square /> texttop <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=top alt=square /> top</p> <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=middle alt=square /> middle</p> <p><img src=tall.jpg alt=tall image />default <img src=square.jpg align=absmiddle alt=square /> absmiddle</p> <p><img src=tall.jpg align=texttop alt=tall image />texttop <img src=square.jpg align=bottom alt=square /> bottom</p> <p><img src=tall.jpg align=texttop alt=tall image />texttop <img src=square.jpg align=absbottom alt=square /> absbottom</p>

1. 2. 3. 4.

5.
6.

Texttop aligns the square with the highest text in the line Top align the square with the highest element in the line Middle aligns the middle of the square with the middle of the text Absmiddle aligns the middle of the square with the middle of the largest item in the line Bottom aligns the bottom of the square with the baseline of the text Absbottom aligns the bottom of the square with the bottom of the largest item in the line

Adding Horizontal Rules

One graphic element that is completely supported by the majority of the browsers is the horizontal rule

<body> <hr size=20 width=80% align=center noshade=noshade /> </body>

Break 5 !
links

You might also like