Week 3 Summary – Part 2: Notes

Image tags:

<IMG src=”file.jpg”> or <IMG src=”www.file.com”>

You can add attributes to an image tag: SRC, Alt (text that will show if image fails to load in browser), Vspace/Hspace (margin space surrounding an image), Border (image outline), width/height (dimensions of image, in pixels).

It is not necessary to include the dimensions of the image in the tag, but it is a good idea because if the browser knows that info it can lay out the page before the images load. This will avoid having the page jump around as the images are loading.

Include align=”left” in the IMG tag to align the image to the left. Include hspace=”10″ in the IMG tag to cause a 10 pixel border around the image so if text is flowing around the image there will be a margin between the image and text.

<br clear=”left” /> Text will break around a floating object on the left hand side and start again after clearing the object.

<br clear=”right” /> Text will break to the right of the object and begin again after it.

<br clear=”all” /> Text will break no matter which side the object is on and begin again after it.

Image as a link:

<a hrefc=”www.link.com”><IMG src'”image.jpg” alt=”text” width=”24″ height=”24″ />

The image link will as a default have a blue box outlining the link. To get rid of the box add the attribute border=”0″

Selector Declarations – CSS Rules

The selector indicates the element being styles. The declaration is the instructions on how to style.

Separate declarations with semi colons.

CSS can target a single element of an entire document. Style attribute applies to a single element withing a document. Style tag affects the entire document.

CSS rules are a separate file from your html document. You place a tag linking to the CSS file within the heading of your html file. (Both files must be saved in the same location)

Span tag = inline

div tag = blocklevel

Class selectors have a period in front of them. Can be applied to any part of the document, and used as many times as you want.

ID selectors have a # sign. Can only be used once in a document.

It is easy to mix up the punctuation marks you use in HTML (=) and CSS (:). Be careful you are using the correct rules.


Avoid simultaneous contrast (using complimentary colors for foreground and background together).

Achromatic color scheme- only contains black, white, and gray.

Editing in Photoshop:

North America General Purpose 2 is a good color setting for working with images for the web.

SRGB is best color workspace for web.

To optimize files for web:

Instead of just saving as a certain file type, go to file –> save for web and devices.

The color picker provides a hexadecimal code at the bottom of the menu.

File–>File info: click to add metadata like copyright info.

To reduce file size, reduce contrast and saturation. You can make these adjustments without altering the original file by adding adjustment layers, and changing the contrast/saturation/etc on the adjustment layer.

This entry was posted in ART 170: Web Design 1. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s