We
have a couple of options as to how to insert images into our web pages.
We can use the <img> tag in the html or we can use CSS Style Rules to
insert background images.
We can also use CSS Style Rules to create class styles and apply those styles to certain img's.
However, before you insert your images, you must optimize or compress each image file in order to decrease the file size. This will ensure that your images load quickly.
This is one of the most frequently asked questions. The answer is the float property.
For instance, we can set three icons side by side on the same line just by floating each icon to the left or to the right. We can also add dimensions and margins to each icon to control the consistency of the size of each icon.
We can use one class style, yet apply the style to many different icons. The style below can be used to style and position each icon, one at a time.
1. Using CSS to float images:
Create a New Style: make the selector .img-floatleft (this is a class selector which means we can apply this style to many different images on the same web page.)
Now let's add some properties to this selector:
.img-floatleft {
border-width: 0px;
float: left;
margin: 8px;
}}
Apply the above style to each image, one at a time. Each image will float left, and end up side by side.
Insert Images Using the HTML <img> tag and Picture Properties / Inserting images with the <img> tag is just one way to place images on your pages. I do want to point out, any time you insert an image this way, you will be prompted to complete some alternate text. It's actually called the "Alt tag". Please always complete the alt tag, as it will improve the accessibility of your web pages.
You will enter text into the alt tag. This text should describe the image being inserted. This only requires a few words, not a paragraph or a book. Simply describe the image as you would to another person. Folks with screen readers (the visually impaired) cannot see your images or read images, so the alt text is used to describe the image to the visually impaired.
LLikewise, search engines cannot read images. So the alternate text can help your seo.
How
to Insert Background Images With CSS This video teaches you how to insert a background image with Expression Web's Style Builder. (The style builder is used to create css styles) Learn how to take a slice, and repeat it across the width of a div.
Modify
and optimize an Image in Adobe Fireworks and Insert it into your web
page using CSS. Here we use a graphics program to modify a very large image and save it directly to our web site.
Buy
Expression Web Video