In this lesson you will modify the home page for your game. You will learn about more tags and attributes. 

HTML has many tags and attributes.  Tags are used to add images, tables, buttons, lists, and many other features to web pages.  For example, the <img> tag is used to add an image to a page.  Tags are also used to format pages and elements on pages.  The <h1> tag is used to make text larger as a heading. 

Most tags have attributes.  Attributes are just properties of the tags.  For example, the <img> tag has a src attribute that is used to define the file that contains the image.  Line 6 in the example below illustrates the <img> tag with the src attribute set to "images/balls.gif".  The expression images/balls.gif is the path to the file balls.gif.  This path is relative to this page.  The folder images is in the same folder as this page.  So in order to link to the balls.gif page, the folder needs to be specified.  If the balls.gif file was in the same folder as this page then the src attribute would be set to balls.gif.

Lines 6 and 7 illustrate three other attributes associated with the <img> tag: width, height, and alt.  Width and height specify the dimensions of the image so that the browser knows how big the image is. The alt attribute specifies the text that is displayed when the user moves the mouse over the image.  The alt attribute is used by special software for visually impaired to indicate what the image is.

In line 3, the attribute background is used to set the background image of the page.  Background images are repeated on the page.  In this example, the file jeans.jpg is in the same folder as this page.  Notice that the value of the attribute is between quotations.  The quotation marks are optional.

The figure illustrates how attributes are nested within the tags.  The attributes and their values are in the orange blocks.  The values for the attributes are in the purple blocks.

In line 4 the <h1> tag is defines a heading.  <h1> tags make the text larger.  There are six other heading tags, from <h2> to <h7>.  Experiment with these tags by changing the opening and closing <h1> tags to <h2> to  <h7>.  Line 4 also demonstrates the use of the align attribute to center the text in the <h1> tag.  The align tag can be used in a variety of tags and can take on other values such as left and right.  If the attribute is not specified then by default its value is left.

Modify your home page for your game.