Images



Images

Theory

• The web and internet have grown and become so successful because of it’s ability to display easy GUI

• images are an important feature of the GUI aspect

• images help make data retrieval very easy for the data and text based behind it

Image Formats

• images can be:

o icons

o scanned photographs

o animations

o drawings

o etc…

• quality of the image can be:

o lossless (compression)

▪ data for EVERY pixel in picture, some compression if the same color

▪ bigger files

o lossy (compression)

▪ data for every pixel is grouped, and compressed, loose SOME quality, but usually not enough to tell

• there are many different formats that images can be created as

o GIF

▪ Graphics Interchange Format

▪ supports color

▪ lossless

▪ most commonly used

▪ BEST TO USE

▪ Three types of GIFS!!!

• Plain GIF

o picture looks like a snapshot

• Transparent GIF

o background is invisible, so the image appears to be directed painted to the page

• Animated GIF

o in which a SERIES of still GIF images are quickly changed to create simple animation

o JPEG

▪ Joint Photographic Expert Group

▪ better than GIF

▪ has both 8 bit and 24 bit color support

▪ BEST TO USE

▪ smaller than a GIF file

• lossy

o PNG

▪ portable networks graphics

▪ newer

▪ supports 8 bit and 24 bit graphics

▪ lossless

▪ supported by most browsers, but not all

• especially older versions

o SVG

▪ Scalar Vector Graphic

▪ made a format in 2001

▪ vector graphics is based on mathematically, rather than a grid of pixels

▪ small file size

▪ can also be animated

▪ good for faster machines since the browser actually has to perform math calculations

o PDF

▪ Portable Data Format

▪ created by Adobe Acrobat

▪ the browser needs to have the Adobe plug in to view any of these files

o TIFF

▪ Tagged Image File Format

▪ used to exchange documents between different computer platforms

▪ not used much

o BMP

▪ Bit Mapped Picture

▪ supports 1,4,8,24 bits

▪ created by Paint

▪ lossless

Image Sizes

• this is simple math and common sense

• Theory

o the bigger the picture, the bigger the file

o the more bits per pixel, the bigger the file

• Why worry about this?

o Those that use modems will take much longer to download images

|Bits Per Pixel (BPP) Chart |

|Bits per pixel | |Range of Colors |

|1 |21 |2 color (black and white) |

|4 |24 |16 colors |

|8 |28 |256 colors |

|16 |216 |32,768 colors |

|24 |224 |16,777,216 colors |

Graphics Tips to reduce download time

1. Simplify your graphics

a. the less colors

2. Divide up large pages

a. put several large pictures on several different pages

3. Keep large graphics on their own page

a. much like above

b. have a LINK to the image, instead of the image loading

4. Reuse the images on your page

a. since most browsers have a cache, so if you use the SAME image in other files, it will use the cache to reload that same image

5. Preload images if you are going to use them in rollovers

a. rollovers – images that change when a mouse cursor rolls over it

The IMG tag

• There are three aspects to think about when placing an image

o file OUTSIDE the home server

▪ using another website (outside of your own) to load the image using a link

o file INSIDE the home server, all in the same directory

▪ if you have a larger website, you know exactly where everything is

o file INSIDE the home server, in it’s own directory with related material

▪ like my website

▪ depending on where you want the file, the DIRECTORY will change for many of the images

• One oddity

o /> closes the tag

• Attributes of the Image Tag

o src

▪ source of where the image file resides

▪ MANDATORY

▪ again think of our aspects above

▪ “/” at end of tag IS MANDATORY

▪ make sure you have “src” not “scr”

|Source Attribute Example |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #1 |

| | |

| | |

| |Here is an example: |

| | |

| | |

| | |

Get “Rotating disk” from Website. Then copy the code of the Images webpage. Place the rotating disk JUST before the link to the file “disk_anim.gif”.

o alt

▪ provides a text based description of the image

▪ NOT mandatory

▪ text appears after a few seconds

|Alt Attribute Example |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #2 |

| | |

| | |

| |Here is an example: |

| | |

| | |

| | |

Go to the 147 Website, copy the code where all of the buttons are located called “leftside.html”, and for each button, give the full chapter that I will provide. Email the file when you complete it.

o longdesc

▪ same idea as the “alt” attribute

▪ it uses a FILE that contains the description

▪ can be combined with an “alt” attribute

Height and Width

• defining the height and width of a image may also help reduce the time to download

• both are defined by PIXEL value (not by inches, etc…)

• can both spread and shrink an image

o use this WISELY!!

|Height and Width Attribute Example |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #3 |

| | |

| | |

| |Here is an example: |

| | |

| |And another: |

| | |

| | |

| | |

Horizontal Alignment

• uses the “float” style, which places the picture AMONG text, which would not happen if you did not

• PUT TEXT BELOW the tag in order for it to work!!

• two attribute values

o float: left

o float: right

|Left and Right Alignment Attribute Example |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #4 |

| | |

| | |

| | |

| |Here is an example: |

| | |

| |And another: |

| | |

| | |

Using the previous file we created using the spinning disk, set the image to “float left” with the rest of the text.

Vertical Alignment

• determine placement ALONG the line it is coded with

• three attribute values

o top

o middle

o bottom

|Vertical Attribute Examples |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #5 |

| | |

| | |

| |Aligning at TOP |

| | |

| |of line: |

| |Aligning at MIDDLE |

| | |

| |of line: |

| |Aligning at BOTTOM |

| | |

| |of line: |

| | |

| | |

The “Clear” Line Breaks

• this line break stops the flow AROUND an image

• if you want the paragraph to return to the normal position AFTER the picture, we use

o // if picture on left side, break next paragraph left

o // if picture on right side, break next paragraph right

o // best on to use since it covers BOTH

Centering Images (and text!!)

• uses the Paragraph tag

• MUST HAVE CLOSING TAG!!

• works for images AND text

| | |

|… |… |

|… |… |

| | |

Image Borders

• three properties to think about

o border-style

o border-width

▪ only works if you have a border-style

o border-color

▪ use the color combo

▪ only works if you have a border-style

o ALL are coded TOGETHER in a “style” property

|Possible attributes for border-style and border-width |

|border-style |border-width |

|dotted |thin |

|dashed |medium |

|solid |thick |

|double |absolute |

|groove |inherit |

|ridge | |

|inset | |

|outset | |

|hidden | |

|none | |

Using my ugly mug from my website, create a page that would display the different border-styles on pg 157. Email me when completed.

Image Margins

• This feature set a margin AROUND THE PICTURE, and gives separation between the picture and any surrounding text

[pic]

| |

| |

|Images Example #5 |

| |

| |

|No MARGINS |

| |

|Say Move Right 1 up to Move Right 40 to select words in columns to the right of the selected word. |

|Say Move Left 1 up to Move Left 40 to select words in columns to the left of the selected word. |

|Say Move Up 1 up to Move Up 40 to select words above the selected word. Say Move Down 1 up to Move |

|Down 40 to select words below the selected word. You can also say Home Key, End Key, Page Up, and |

|Page Down to select words. |

| |

| |

|10 pixel MARGIN |

| |

|Say Move Right 1 up to Move Right 40 to select words in columns to the right of the selected word. |

|Say Move Left 1 up to Move Left 40 to select words in columns to the left of the selected word. |

|Say Move Up 1 up to Move Up 40 to select words above the selected word. Say Move Down 1 up to Move |

|Down 40 to select words below the selected word. You can also say Home Key, End Key, Page Up, and |

|Page Down to select words. |

| |

| |

|20 pixel MARGIN |

| |

|Say Move Right 1 up to Move Right 40 to select words in columns to the right of the selected word. |

|Say Move Left 1 up to Move Left 40 to select words in columns to the left of the selected word. |

|Say Move Up 1 up to Move Up 40 to select words above the selected word. Say Move Down 1 up to Move |

|Down 40 to select words below the selected word. You can also say Home Key, End Key, Page Up, and |

|Page Down to select words. |

| |

| |

| |

Images as Bullets and Definitions

• as bullets, images are right beside the text

• as definitions, there is some separation between the image and the text

|Images as Bullets and Definitions Example |

|HTML Example |Code |

|[pic] | |

| | |

| |Images Example #7 |

| | |

| | |

| |Mr. L gives us too much work |

| |Unordered lists example |

| | |

| | He talks too much |

| | He's ugly |

| | He picky about EVERYTHING |

| | |

| | |

| | |

| |He needs to: |

| |Example of definition lists and images |

| | |

| | |

| |Chill out |

| | |

| | |

| |Take a vacation |

| | |

| | |

| |Stop using this spinning disk as an example!!! |

| | |

| | |

| | |

| | |

Images as links

• The image itself can act as a link

• example was the “leftside.html”

• watch for borders

|Image as Links example with borders |

| |

| |

| |

|[pic] |

Creating your own GIFS

• several webpages on how to construct your own

o

o

o

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download