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

Demystifying Basic HTML

Inserting the Home Page Banner Graphic

Print This Procedure ( doc :: pdf )

After inserting the logo, inserting the home page’s banner graphic will be a piece of cake. This step entails inserting an image in the second cell of the first table row. You won’t have to link this graphic, so the procedure is fairly straightforward. The only twist to inserting the banner graphic is that you’ll want to center the graphic within the table cell by nesting the <img> tag within the <div align=”center”></div> tag set. To insert a banner graphic on the home page, perform the following steps:

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

2.      In the second cell of the first row, click after the <td valign="top" width="*"> tag, press Enter, press Tab, and then type the following:

<div align=”center”><img src="images/t_home.gif" alt="Chris Soll's Music Instruction" width="415" height="62" border="0" align="middle"></div>


3.      Save index.html. Your HTML code should display as shown in the following figure.

Banner image code

4.      Open index.html in your browser. (If index.html is already open in your browser, click the Refresh button to update your view.) The browser should display your version of index.html as shown in the next figure. In the figure, notice that the table borders for the first row display around the inserted graphics. Hold your cursor over the logo or banner graphic to display the image’s ALT text.

note ALT text displays like ToolTip text, in a small pop-up window when the mouse cursor hovers over an image or button


tip You must save your HTML document before you can view the document’s changes in a browser window. If your most recent changes aren’t displaying in your browser, ensure that you’ve saved your HTML document. If you still aren’t seeing the changes, click the Refresh button in your browser to ensure that you’re viewing the most up-to-date version of your page.


Previewing index.html with the linked logo and home page banner graphic (which were positioned using a table)

In the , you’ll see how to create a navigation bar that you can use throughout the music site.

Next section

top of page