Easy Web Design, 3rd Edition
  EWD Projects :: Oldschool
 


Demystifying Basic HTML

Inserting and Linking the Logo

Print This Procedure ( doc :: pdf )

We’re creating a standard page design, so we opted to insert the logo in the top-left (prime real estate) corner. We plan to use the home page as a template for all subpages, so we’re going to link the logo to the home page. That way, when you use the home page as a template, all subpages will automatically include a logo that links to the site’s index.html home page.

When you insert a logo, you’re basically inserting an image. To insert an image in an HTML document, you use the <img> tag with the src attribute, which points to a particular graphic. For example, to specify the music site’s logo, you’d type <img src="images/logo.gif">. Similarly, when you insert your logo and format it as a hyperlink, you use the same HTML codes that you use to link any graphic. So pay attention to the following steps you’ll find yourself using these commands quite a bit. First, let’s insert the logo graphic (we take care of linking the graphic in just a bit):

note src is an abbreviation for source, as in the source of the image.

1.      If necessary, open your text editor and open index.html.

2.      In the first cell in the first row, click after the <td valign="top" width="170"> tag, press Enter, press Tab, and type the following HTML tag, which points to the logo image:

<img src="images/logo.gif" alt="Chris's Music Instruction" width="170" height="68" border="0">

 

tip Adding spaces and returns in your HTML code won’t affect your Web page’s appearance, so you don’t need to add returns in your HTML document to match the examples in this walkthrough.

With the exception of the src attribute, the <img> tag’s attributes used in the music site are optional (but very useful) and are defined as follows:

·      src specifies the filename of the image (the source of the image) to be displayed.

·      alt enables you to provide descriptive text that displays when the cursor is placed over the image area, displays when browsers are set to not display images, or is read by a text reader.

·      width and height specify the image’s width and height. You should specify the sizes of your images because doing so helps browsers display your Web page’s layout faster. Keep in mind that any actual image resizing (as in making an image larger or smaller) should be done in your image editing program and not by using width and height attributes in your HTML document ideally, you want your images to be sized as closely as possible to the size you’ll display the images on your Web pages.

·      border specifies the thickness of the border around the image. By default, a 1-pixel border appears around graphics that are formatted as hyperlinks. Generally, designers change the default by setting the border attribute to "0".

Next you’ll format the logo.gif image to serve as a hyperlink to the home page. Basically, creating a hyperlink entails marking some text or a graphic as an anchor by using the <a></a> tag set around the text or image you want to serve as a hyperlink, and then specifying to the browser what should be displayed after the anchor element is clicked. To make the logo a hyperlink, follow these steps:

lingo An anchor is either the clickable text or graphic component of a hyperlink or a specified target area within a document. Most notably, anchor text is surrounded by the <a></a> tag set in HTML documents.

3.      Click before the <img...> tag and type <a href="index.html"> to specify that when users click the logo, they will be taken to the home page. (As mentioned earlier, this linking information will come in handy when you copy the home page to create subpages.)

4.      Click after the closing > of the <img...> tag and type </a> to specify the end of the anchor’s contents.

tip If you’re using Notepad and your code goes beyond the edge of the window, open the Format menu and choose Word Wrap. When Word Wrap is activated, Notepad automatically wraps your text and displays all your text in the current window.

5.      Save index.html. Your HTML code should look similar to the code shown in the following figure.

Inserting and linking the logo image to the home page


Next section

top of page