Comp25: HTML: Company Logo

Learning Objectives

1. To create a logo for your business that will be used throughout your website and on all future assignments including Excel and Access.
2. To embed that logo at the top of each page in your site.

Before You Start

A company's primary sense of identity is its logo.  Think for a moment of some of the greatest logos that have been designed.  They are not just the company's name in a fancy font; in fact, sometimes the logo doesn't include the company's name at all.

Consider logos from some of our largest corporations and how quickly they are recognized, even from a distance: Nike, Apple, Amazon, Subway, BMW, Hertz, Hyatt, General Mills, Intel, MTV, and NBC.

Special Note about Image Transparency:  Read the notes on image transparencies in the Reading Section Week 6

Steps to Take:

1. Create a new graphic. For ideal appearance, make the background color match the background of your website (see notes on transparency).  Size your logo appropriately so it doesn't overwhelm the page. Smaller is better.
2. Design your logo.  Add your company name if possible and be creative with the font, color, and style.
3. Save your new logo to your web-docs folder as a .jpg or .gif file called logo (logo.jpg or logo.gif).  Note that this does not just mean giving it the proper file type extension.  Most programs will require you to specify the filetype in a drop-down menu of some kind. 
4. Edit your index (home) page and incorporate your new fancy logo using an image tag such as:

   <p align="center"> <img src="logo.jpg" alt="My Company Name"></p>

   The <p> tag insures that your image is centered, if you so choose.  Customize the "alt" text in your <img> tag to display your company name.  This is what appears if your visitor has images turned off or is using a screen reader.

5. Now add an anchor tag so that the image links back to your home page as follows:

   <p align="center"><a href="index.html"><img src="logo.jpg" border=0 alt="My Company Name"></a></p>

   The <a> element creates the link, and since it surrounds the <img> element, the image becomes part of that link.  By default, many web browsers will put an ugly blue border around image links.  To turn that off, we insert "border=0" as an attribute/value into our <img> element.

6. Now edit the remaining pages of your website by copying the new HTML code into each one.  You should be able to highlight the new code, choose copy (Ctrl-C) then open up each page and paste (Ctrl-V) the code into the appropriate location.  Save each one as you go along.
7. Preview your website pages and make sure your logo appears as you intended, and that the links work properly.
8. Upload your logo image file to Sakai to insure the lab assignment was completed on time.

Helpful Links

CoolText

Samples of Logos

Flaming Text

Paint.Net

Grading Guidelines

This assignment will be graded using the following guidelines: