How to add and size an image, put a border around it, and make it a link!

I made this tutorial because we were assigned to research something about HTML & CSS that we didn’t know how to do. So, in this we lesson we are going to learn how to add an image, size it, put a border on it, and also make the image a link.

For this tutorial you will need the following items: a text editor program, a web connection and a photo that you would like to put on your webpage.

Step 1:

Set up a simple html document complete with head and body tags. You can add a paragraph if you want.

Below shows text edit and browser shots of what it should look like.

Step 2:

Lets add an image. Use the image tag to add a picture to the body of your webpage.

Like this:

Step 3:

Size the image and put a border around it using the attribute tags width, height and border. It should look like this:

Step 4:

Now make the image a link by adding the href attribute tag to the picture. In order to do this correctly, you must place the opening tag before the picture and put the closing tag after the picture.

Step 5:

Now you can see that clicking the picture linked us to another page.

To see some working examples of the things you just learned visit:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_imglink

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage

This is all for our tutorial on pictures. You now know how to add pictures, size them, put borders around them and turn the pictures into links. Good luck building your own websites.

If you have questions about this tutorial send an email to: daviche8@yahoo.com

Site Critique

Website #1 http://www.snickers.com/default.htm

1. The center of attention is the candy-bar. When we look at the page we are looking into the candy-bar and that is where we view information about the product. The images across the top of the candy-bar are very interactive. When you roll the mouse over them they come alive and move, light up or make sound. It feels like I have the control. Rolling the mouse over the mans head I can make his eyebrow move up and down over and over.

2. The navigation is pretty easy. Everywhere you can go is sitting on top of the candy-bar. Just clicking on each picture brings up the information you need to decide if you want to navigate to the page. Most of the pictures do not have words so the picture has to inform you what it is all by itself. If you still don't get it, then you click on it and it tells you what it is. There is another way to navigate the site. There are sub-menus at the bottom of the page. It includes information that you would not generally use when looking at the website but is there if you really want it. There is also a main menu at the bottom of the page. There is no site map to tell you where you have been or when you navigate away from the page.

3.
a. The color of the site is mainly brown in reference to the snickers candy-bar. It communicates the chocolaty feeling. I think the extra pictures that rest on top of the candy-bar convince the viewer that it is more than just a candy-bar. It is part of life.
b. The chocolate on the outside layer of the candy-bar looks realistic as if you could eat it. It is good to see the real product. The inside however is where information pops up so it is just smooth.
c. This site uses motion to communicate when you are selecting something. As you roll over pictures on the page they move. Then you know that you can select it to navigate to another part of the site.
d. Only some of the pictures have sound. There is also the option to turn off some sounds or all sounds. This is handy because it can be annoying to hear the same sounds over and over again. But if you are just navigating for a short time they are very helpful in reassuring you that you have selected what you are pointing at.
e. The typography of the page matches the typography of the product.
f. The candy-bar is the biggest object on the page. Other than that, most of the images are all in the same size category. I didn't realize this at first but nothing seems to really stand out as much.
g.
h. The main menu or navigation points are aligned along the top of the candy-bar. They are all similar is size so none of them stand out more than any other picture. There are two pictures on the sides of the candy-bar that do not do anything as far as navigation goes so I don't know why they put them on. It only confuses the viewer.

4. Most of the content on the site is visual. The candy-bar acts as a screen where images and video can be played. I think most of the content is to amuse people. There is not much you really need from the site except to see the products. So everything else is simply there to entertain guests and make them happy.

5. The sites audience is geared towards young adult audience I think. There is a facebook function called snickers translator. This lets you change English words into snicker words. There is also a audience for super bowl fans and people who want to help the hungry. So maybe the audience covers 18-35 years of age.

Website #2 http://www.youtube.com/

1. This site is successful because everyone can use it and everyone can access it. The content is from real people who have made their own videos. I think that it is content based. The layout of the site is simple and pretty plain but it is effective and easy to use. People are attracted to this site because they can interact with it and view videos from all over the world.

2. A simple bar at the top of the screen allows you to search for anything you want. Then a list of options are available to choose from. There are also related links you can navigate to. Fonts are basic and easy to read. Not very stylized. There are many options of navigating on this site. It is easy to go anywhere. There is no real list of everywhere you have been but it is easy to go back or just start over at the top of the page.

3.
a. The background is just white. I think it is effective because what we are looking for is the video images. This allows us to focus on the content. It does not get lost or hidden in the page.
b.
c. After watching a video, similar videos pop up that you can navigate to. You can also search for more videos along the right hand side of the site. As you roll over different videos they change color to let you know you are selecting them.
d. No sound until you select a video to watch. Then it depends on the quality of the video.
e. Typography is simple. Nothing fancy, just plain and simple. I think this is good because it does not distract from the content of the site.
f. The video of your selection is the largest on the screen. Other videos are smaller and in menu type format. You can scroll through it to select other videos.
g.
h. There is not much contrast between the content. They all have the same format and layout. This makes it easy to search and find what you are looking for.

4. The sites purpose is to allow users to post their own movies to the world. It is a site for entertainment, music, information and also stupidity. It is a pretty strictly visual site. You go here to watch clips. That is the main purpose.

5. The sites audience is the world. It is connecting people from all around the globe. They have made it possible to view work from any one who is willing to post it online.


First Project Ideas:
website for USU clubs such as country dancing or wrestling
Some of the clubs don't have very good information available online and I think they should.
I'm not really sure this is the best idea since it would just be improving the clubs information. Maybe I could just make them with no association to USU. I'm not really sure. So I will think about it. :)