Here is the third and final Part Three of my Introduction to HTML
Check out Lesson 1 at http://activerain.com/blogsview/1298501/introduction-to-html-and-task-1-create-a-simple-web-page-in-5-minutes
Check out Lesson 2 at http://activerain.com/blogsview/1300690/introduction-to-html-part-two-create-a-simple-web-page-in-5-minutes-or-less
This third lesson disscusses an introduction to Images, and coming soon I will do a lesson on anchor tags and hyper links
This lesson assumes you understand file management, that is when you save a file on your computer you know how and where you stored it. (Coming soon, how to save and retreve files on your computer.)
Images:
There are currently only three file formats or picture types that a Web browser can interpret, these are:
GIF files, all picture files with the extension ".gif"
JPG files, all picture files with the extension ".jpg"
PNG files, all picture files with the extension ".png"
Two of these formats, that is gif and jpg are very common, but you will find and can also use files with the extension png. Older browsers do not support png files. These, will not be able to show picture files in png format.
GIF and JPEG Images are very popular because:
1. They will work across platforms ( any computer and operating system).
2. Web browsers will be able to display images in GIF and JPEG formats on their web pages.
3. They compress the size of the image file. The size of your image is not directly related to the size of its file. The file size is related to the "depth" which basically means how much detail is in the picture and how many different colors are included.
Remember:
*small image file = *quick download time = *happier visitors
GIF means Graphics Interchange Format. We use GIF's when not more then 256 colors are required. Therefore, they do not work well for photographs. GIF's are commonly used for simple line drawings, logo's and graphics. A later version of the GIF format GIF89A developed two years after the 87 GIF includes several enhancement featuresthat are not available in JPEG.
One enhancement feature is transparency, which allows you to blend your background with the picture you are working with, and lets you remove the picture's original background. EX: a picture of me against a white wall on a web page with a purple background would be enhanced by the transparency feature which would remove the white wall background on the original picture and you would only see me against the purple of the web page.
lnterlacing is another feature of GIF89A which has the picture download as very blurry at first and then gradually grows more focused through the download process. The old format will only download a picture from top to bottom line by line one row of picture at a time.
The third and most popular feature for GIF89A is animation. GIF89A files can contain many images and when dialed in by the browser they appear in sequence. You simply put the name of your animation file in the appropriate location for an image file in the image tag and the browser executes the file beautifully. The trick is to know how to sequence your images for effective animation.
Additional URL's for many animated GIF collections and pointers to GIF animation construction sets are listed on http://www.1stsitefree.com/graphics.htm
JPEGmeans Joint Photographic Experts Group named after the engineering standards committee that defined it. JPEG's can represent the full 16.7 million colors available, which makes them ideal for photographs and other High color pictures! However JPEG will not have GIF89a enhancement features.
Image maps are also used in web pages. When one image links to many web pages we create a map file associated with the image which will designate which regions of the Image will specifically allow us to link to what sites, with any undefined regions going to a default link.
You may add images to your page, located on some distant computer on the Internet or you may want to make use of your own artwork (more likely!). For this particular purpose, always locate your masterpieces within the same folder as your HTML web document.
To insert an image onto your page you would have to make use of the <IMG> tag. This tag has a number of properties (additional information) of which we will review a couple. Consider the following <IMG> tag:
<IMG SRC="image_file.jpg" BORDER=0>
*Note that the <IMG> tag is one of those tags that does not come in pairs.
Also notice that the first <IMG> tag attribute shown here is the "SRC" or Source attribute. SRC tells the browser where to look for your image. SRC is just the file name of your image, if your image is in the same folder as your HTML document, or, SRC can be the exactInternet address of where the image is found on the net. There are many host servers and you must store your images on the site and then direct your webpage SRC to the correct location of your image. Recently I accidently moved the Image folderto a different location on one of my sites and all the images were gone. Luckily I located where I had unknowingly moved the Image folder for my images so the host server could find those pictures and know where to display them on the site. Most Web sites are constructed with a main index page that has the images stored in an image folder, and all the SRC tag attributes on the site must direct that browser to go to the Image folder. This would be accomplished in the example above as follows:
<IMG SRC="Images/image_file.jpg" BORDER=0> (This is telling the web browser to load an image located one directory up from the Indexed page in the folder named Images, on the host server and with a file name of image_file.jpg
The other attribute shown in the example above is the "BORDER" attribute. Using the Border attribute we can create a frame around an image. In order to create a thin frame we would set border=1, for a slightly thicker frame I would set border=2 and so forth. Set border=0 not to display any frame around my image.
Note with CSS you would be able to create a wider variety of border features and more options in image placement on your pages.
Continuing on with this project, Steps 1-12 are located in Lesson 1 and Lesson 2
•13. Create a new folder called Web stuff on your desktop
Step 1. Right click the mouse in the white space of the Window in which you wish to create this folder.
Step 2. Select the New and then Folder commands to display this shortcut menu.
Step 3. Key the name of your folder Web stuff
•14. Right Click on the image below, choose the Save Picture As... command and save this picture as goat.jpg IN THE Web stuffFolder on your destop.
•15. Create a copy of the web template text file (with the four basic container tags from lesson 1 and notepad icon) name this file "add image". and also save this to the same folder Web stuff
•16. Open add image.txt (text file) and insert <img src="goat.jpg" border="0"> between the body tags on your page. Once again save this file as "Examples of add image.html". Open the html file to view your image.
Let's see what happens to our image when we add some common attributes to the Image tag.
The basic image tag <IMG SRC="goat.jpg"> can have many attributes nested with it such as vspace and hspace. These allow you to allot a region of space around your image (v representing the vertical and h the horizontal).
*17. Open the text file "add image". Locate your image tag and add the following html exactly as shown:
<IMG SRC="goat.jpg" boder="0" hspace="20" vspace="20">
Once again save your file as html and view the changes to your graphic image.
The numbers in quotes use pixels for their unit of measurement. A pixel is short for picture element and refers to the dots that make up the screen image.
(So one pixel is very small.)
Another attributefor the IMG tag is align; this will determine how the text on your page will align to your image.
•18. Edit the Image tag in your text file so that the following changes are made exactly as shown:
<IMG SRC="goat.jpg" align="right" hspace="20" vspace="20" border="5">
View the changes made to your mountain goat photo by resaving the file as html and opening this file. Notice how your text now aligns to the right of your image and puts the image under the left margin.
What will the align="left" attribute do?
You can frame your picture with a border using the border attribute as follows:
<IMG SRC="goat.jpg" border="5">
This will place a narrow frame around the image. (Again the border is in pixels.)
If you want to provide an alternative to your image for those not able or wanting to view images you can provide an alt attribute. This will show text for text only browsers.
Example<IMG SRC="goat.jpg" alt="Mountain Goat in Winthrop Washington">
Tips to speed up the image download time:
Recall that the length of time it takes to download a published web page on the net is critical. By adding the height and width attributes your browser will not try to measure your images and then down load text, you have done the work for them so include the height and width of your image in the IMG tag for speedy downloading times.
EX: <IMG src="goat.jpg" height="206 width="300">
By adding LOWSRC attributeto the IMG tag we can specify a lower resolution picture to download first which allows the browser to quickly load a picture of low resolution. After the page is fully loaded and formatted then and only then does the more detailed image develop.
Now that you have learned the basic HTML concepts here is a summary of important key points:
There are four main container tags that must be used in every HTML web document. We have created a template (in lesson one) that can be used over and over for the fun learning process of adding new components to your page.
To see other pages HTML simply go to View on the File Menu and then select Source command to see other website HTML. By seeing how other sites are created you will quickly learn much more HTML.
There are numerous Websites that provide lessons on HTML. Visit many of them to see which sites are teaching you in a mannor that equates to your specific learning style.
For Advanced Web Designers there are a host of Free online resources. Stay tuned for future blogs on HTML and I can show you some great spots to visit.
Mary
Lockman is a realtor with John L. Scott Methow Valley..
Email Mary or visit her website at www.methowrealestateservices.com(created in notepad) for the most comprehensive and best Methow Valley real estate online resource.