1

IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

1. Create the HTML Page names “Home”

2. In the Title Tag Write the following (IST152- Lab 9)

1|Page
2
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

3. Create a div section with a header tag and a h1 tag inside:

4. Use <ul> tag for the navigation bar and style it so that the links in the avigation are under a class
button which we will style later

2|Page
3
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

5. Create a main tag with h2 and paragraph data and another h2 and an unordered list as seen below
for the K-tech location details
6. Inside the main tag add another tag for a table shown below
Network System Maintainenance and Security
Network Design Technical
IST Department
Software Application and Programming
Web Applications and Programming

3|Page
4
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

7. Add a footer section tag with the copy right information seen below

Without any CSS styling, the html file, will look as follows:

4|Page
5
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

5|Page
6
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

Lets Add the design Style Sheet and the link to the html file:
Link in the HTML file :

Create the design css file

6|Page
7
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

In the CSS file, the following tag formats are done:

*(all) Box-sizing: border-box
body background-color:#00005D;
font-family:Verdana, Arial,sans-serif;
#wrapper margin:0 auto;
width: 80%;
min-width:960px; max-height: 1200px;
background-color:#b3c7e6;
color: #000066;
header background-color: #2c347d;
color: #8692d2;
font-size: 150%;
padding: 120px 20px 10px 155px;
background-repeat: no-repeat;
background-image:
url(https://pbs.twimg.com/profile_images/1350840388454666240/ICrHE1LX.jpg);
h1 text-align:right;
h2 color:#869dc7
nav float: right;
width: 2000px;
font-weight: bold;
letter-spacing:0.1em;
main background-color:#ffffff;
color: #000000;
padding: 10px 20px;
display: block;
overflow: auto;
footer font-size:70%;
text-align:center;
padding: 10px;
background-color: #869dc7;
clear:both;
nav float:right;
width:200px;
font-weight:bold;
letter-spacing:0.1em;
nav ul list-style-type:none;
margin:0;
padding:0;
nav a text-decoration:none;
padding: 20px;
display:block;
background-color: #B3C7E6;
border-bottom:1px solid #FFFFFF;

7|Page
8
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

table margin:auto;
border:5px solid #000066;
width:600px;
td, th border:1px solid #000066;
padding:0.5em;
font-family:Arial,sans-serif;
nav a:link {color:#FFFFFF;}
nav a:visited {color:#EAEAEA;}
nav a:hover {color:#869DC7;
background-color:#EAEAEA;
}

8|Page
9
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

9|Page
10
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

OUTPUT

10 | P a g e
11
IST152 – HTML
Chapter 6 and 8 (Navigations and Tables)
Lab 8

11 | P a g e