Although there are a number of ways to make HTML look nice with divs tables borders backgrounds and other styling images do play a big part in how your site looks not to mention that adding images within your content is an important way to convey ideas.
So, what types of images can you use?
Web browsers can understand a variety of media types but for images there are 3 basic file types that you can place or link to in your pages.
Jpeg – This file type is a compressed image able to display 16 million colors in a lossy or dithered image. It is best used for photographic images but it can be used anyplace within your design where transparency isn’t necessary.
GIF – This is one of the very first image file types it has a lower number of colors only 256 that it can use to represent your images so it is not so great for photographs but it is good for graphs, text or images that need transparent areas. It is often used for logos, buttons or corners where you want the background behind the image to show through making round or complex shapes. You can also use Gif Files to create animations.
PNG – This is a relatively new image file type and combines the two properties of GIF and Jpeg image files. PNG has a large number of colors so it is good for photographs. It is also good for images that require transparent regions. In addition to transparent regions that are totally see through PNG can also have levels of transparency. You can overlap a bottom yellow png file with a 50% transparent blue file and endup with green. About 60% of the browsers out there support the full properties of PNG files and this includes most browsers of the latest version however many users still use old browsers because they have not or can not update their browser due to the operating system they use on their computer. Yes people still use Windows 95 but also many other OS’s.
ICO – This is a format that is used primarily for making icons for your desktop applications. When you see a Icon on your desktop that you use to launch your word processor that is an ICO file … The ICO format is also used in websites for the icon that shows up in your browser location bar and when you drag that url shortcut to your desktop. There are websites that will convert your jpeg or gif file to an ICO file and it is best that you use one of these services when you need to generate your favicon.ico file.
Note because of browser incompatibility it is important to double check your site in a variety of browsers and versions of browsers based on your site’s visitor stats. View your weblogs and check what your visitors are using then visit a site like www.browsershots.com and get a preview of what your visitors are seeing. However don’t remake your site into a text only site just because you get 10 visitors a month browsing your site with a WebTv browser.
.
.
Adding Images to your Content
When you want to add an image within the text of your main content you use the <img> Tag.
This is one of only a few html tags that have no closing tag.
To add an image find the place within your HTML that you want to insert the file.
Then for an image on your local server in your /images/ directory
add <img src=”/images/flowers.jpg”>
For an image that is hosted on another server use http://
add <img src=”http://www.website.com/images/flowers.jpg”>
As you can see in this example we are inserting a <img> tag at the beginning of our text.
| <html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
 This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
.
.
Here we will apply an alignment to force the image to the right side of the text <img align=”right”>. Alignment can also be placed in your CSS Styles either on the image tag or on a container surrounding it.
| <html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg” align=”right”>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
.
.
Here we will wrap the <img> tag with an anchor or hyperlink so if you click on the money you are brought to another page. <a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>
| <html> <head> <title>Lesson 3</title> </head> <body><a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
Most browsers today will ignore the border around images if they are used for a button Hyperlink but you can use the border property in any hyperlinked image to insure that you do not get a blue border around your linked images.
<a href=”place”><img src=”imageurl” border=”0″></a>
.
.
In this example we will set the background for our page to be an image.
| <html> <head> <title>Lesson 3</title> </head> <body background=”/base/images/blkgreen-10x60px.jpg”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
.
To fix the background image and make it only repeat in the x direction and not down the page in the y direction we need to use CSS Styles.
<body Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>
| <html> <head> <title>Lesson 3</title> </head> <body Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file. As you can see it is pretty plain.</body> </html> |
This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
To complete the green color down the page we can apply a background color.
<body bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>
If the visitors browser isn’t able to use CSS styles they will simply see a solid green background.
Here you can see we also changed the text to white and replaced the cash jpg image with a transparent Gif image so you can see the background through the white area.
| <html> <head> <title>Lesson 4</title> </head> <body bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.gif“><font color=”#ffffff”>This is a line of text that we are adding to our html file. As you can see it is pretty plain.</font> </body> </html> |
 This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
.
.
There are a variety of other uses and methods to include images on your pages menus and in your content. As you can see we are starting to use more CSS Styles to add more features. Some things you just can’t do in basic HTML unless you are willing to go through a lot of work.
You should now understand how to add images into your content and apply images as backgrounds for your pages.
The same methods of adding images as backgrounds can be applied to Tables Divs and other containers.
You can use images as links to other pages within your content or as menus or buttons for forms such as a search form.
There are a variety of uses and the limits are endless if you are willing to understand the basic concepts and apply them creatively.
.
.
Because we talked about it earlier and it is so simple to do.
Linking to a Favorites ICO file
Favorites icons are linked to in the <head></head> area at the top of your html file
<link rel=”Shortcut Icon” href=”/images/favicon.ico” type=”image/x-icon” />
