left =

mid =

right =

leftselected =

midselected =

rightselected =

Problem 2 (10 points) Create an HTML file p2.html and its corresponding CSS file p2.css, which will create a set of tabs that appear like this on Windows 10 with Chrome 71.0: Inventory Order Information Accounts Shippers Suppliers In your solution for this problem you must use images in conjunction with the background-image CSS attribute to create the appearance of the tabs. We have generated 6 images for you to use. For tabs that are not selected there are three images, one for the left edge of the tab, one for the middle, and one for the right edge. There are three different images to use for the selected tab. The images which are shown below Left.gif Mid.gif Right.gif Left-selected.gif Mid-selected.gif Right-selected.gif Here are some additional details and requirements for this problem: . . . Use the Tahoma font in a 13-pixel size. The text in the selected tab should be displayed in bold. When the mouse moves over a tab the text color should change to #cc6600. In addition, the mouse cursor should appear as a pointing hand (cursor type pointer) when the mouse moves over a tab. In the screen dump above the mouse is over the "Shippers" tab; unfortunately the screen dump does not display the mouse cursor. The text in each tab should be a link that will switch to a different page when clicked. The URLS for the links should be, from left to right, "inventories", "orders", "accounts", "shippers", and "suppliers". You do not have to implement the Web pages corresponding to these links. Thus, when you click on a tab you will get a "missing page" error; in a real application each of these pages would display the same set of tabs, but with a different tab selected. The color of the horizontal line separating the tabs from the rest of the page is #cccccc. The line should extend from the rightmost tab to the right edge of the window, except for a small margin at the right side; the line length should adjust as the window is resized. The tabs should automatically resize both horizontally and vertically. If you replace the text in a tab with longer or shorter text, the tab should automatically get wider or narrower. If you change the font size for the tab text, the tabs should automatically get taller or shorter. Note that the images are taller than you will need in most cases, you should only display as much of each image as needed for the actual font size. You do not need to handle fonts that are too tall for the images we have provided. There may not be any formatting information in the HTML file other than class and id attributes. You may not use JavaScript for this assignment; you can solve this problem entirely with HTML and CSS. . Note: browsers sometimes behave badly if a contains nothing; for example, they may not display a background or border in this case. You can use an empty

inside the to get around this problem. Hints It is OK (and encouraged) to specify cellspacing="0" in each element. This eliminates spacing between cells that the browser provides by default and which is usually a nuisance. You have to specify this attribute on the element because there are no CSS style attributes that correspond exactly to this feature (border-spacing and border- collapse come close, but they have unpleasant side effects and are not portable). You may find some of the following CSS style attributes useful for this project (check w3schools for details): o width: 100%; white-space: nowrap; text-decoration: none; The margin style attribute is ignored for td elements (a strange exception to the uniformity of CSS). If you need a margin around the contents of a table cell, place a div inside the td and specify margin for the div. Problem 2 (10 points) Create an HTML file p2.html and its corresponding CSS file p2.css, which will create a set of tabs that appear like this on Windows 10 with Chrome 71.0: Inventory Order Information Accounts Shippers Suppliers In your solution for this problem you must use images in conjunction with the background-image CSS attribute to create the appearance of the tabs. We have generated 6 images for you to use. For tabs that are not selected there are three images, one for the left edge of the tab, one for the middle, and one for the right edge. There are three different images to use for the selected tab. The images which are shown below Left.gif Mid.gif Right.gif Left-selected.gif Mid-selected.gif Right-selected.gif Here are some additional details and requirements for this problem: . . . Use the Tahoma font in a 13-pixel size. The text in the selected tab should be displayed in bold. When the mouse moves over a tab the text color should change to #cc6600. In addition, the mouse cursor should appear as a pointing hand (cursor type pointer) when the mouse moves over a tab. In the screen dump above the mouse is over the "Shippers" tab; unfortunately the screen dump does not display the mouse cursor. The text in each tab should be a link that will switch to a different page when clicked. The URLS for the links should be, from left to right, "inventories", "orders", "accounts", "shippers", and "suppliers". You do not have to implement the Web pages corresponding to these links. Thus, when you click on a tab you will get a "missing page" error; in a real application each of these pages would display the same set of tabs, but with a different tab selected. The color of the horizontal line separating the tabs from the rest of the page is #cccccc. The line should extend from the rightmost tab to the right edge of the window, except for a small margin at the right side; the line length should adjust as the window is resized. The tabs should automatically resize both horizontally and vertically. If you replace the text in a tab with longer or shorter text, the tab should automatically get wider or narrower. If you change the font size for the tab text, the tabs should automatically get taller or shorter. Note that the images are taller than you will need in most cases, you should only display as much of each image as needed for the actual font size. You do not need to handle fonts that are too tall for the images we have provided. There may not be any formatting information in the HTML file other than class and id attributes. You may not use JavaScript for this assignment; you can solve this problem entirely with HTML and CSS. . Note: browsers sometimes behave badly if a

contains nothing; for example, they may not display a background or border in this case. You can use an empty

inside the

to get around this problem. Hints It is OK (and encouraged) to specify cellspacing="0" in each element. This eliminates spacing between cells that the browser provides by default and which is usually a nuisance. You have to specify this attribute on the element because there are no CSS style attributes that correspond exactly to this feature (border-spacing and border- collapse come close, but they have unpleasant side effects and are not portable). You may find some of the following CSS style attributes useful for this project (check w3schools for details): o width: 100%; white-space: nowrap; text-decoration: none; The margin style attribute is ignored for td elements (a strange exception to the uniformity of CSS). If you need a margin around the contents of a table cell, place a div inside the td and specify margin for the div