COS10005 - Web Development Lab 04
Lab 4 – HTML Page Structure and CSS Presentation
Aims:
Understand and use HTML structural elements
Present a web document using CSS
Gain skills and knowledge to complete Assignment 1.
Task 1: Structure and Present a Webpage
In this lab, you will structure a webpage named wis.html and style it as presented in Figure 1:
header
nav
aside
main
footer
Figure 1. Styled webpage wis.html
Step 1:
1.1 Create a lab04 folder on the server and upload and test your work from there.
1.2 Download file wis.html from Canvas. Use wis.html as a template for today’s lab work.
Step 2:
The text enclosed in <body>…</body> tags represents a partial article that contains two sections about
creating a Wireless Information Service (WIS) using a mobile phone and a PC.
2.1 Using NotePad++ (or Sublime Text for Mac users), structure wis.html using appropriate HTML5
structural elements, including:
Page 1
COS10005 - Web Development Lab 04
<header>…</header>, <nav>…</nav>, <header>…</header>
<article>…</article>,
<section>…</section>, <aside>…</aside>, <nav> … </nav>
<footer>…</footer>
Other structural elements may also be used. such as <article>
<summary>…</summary>, <time>…</time>, <section>
<div>…</div>, and <span>…</span> …
</section>
2.2 Use other HTML elements as needed:
<section>
Heading <h#>…</h#>, paragraph <p>…</p>, horizontal
…
rule <hr /> </section>
List <ol>…</ol> or <ul>…</ul>, table
</article>
<table>…</table>, Image <img … /> and anchor
<a … >…</a> <aside>…</aside>
Special characters
<footer>…</footer>
An example web page structure is presented in Figure 1 for
Figure 1. Webpage Structure
your reference.
Step 3:
3.1 Add the following content into the correct position within the webpage.
Title in <header>…</header> of the webpage
Mobile World
A menu list in <nav>…</nav> as navigator of the webpage. Do not forget to use <a>…</a> to
create hyperlinks that direct users to other webpages on your web site. The navigator should have at
least the following hyperlinks.
Home
WIS
About
Copyright notice in <footer>…</footer> as footer of the webpage.
Copyright 2009 – 2014
Extra notes in <aside>…</aside> on the webpage
Step 4:
Create and save a new file named style.css. In style.css, specify the CSS rules that will style wis.html
as shown in Figure 2.
<header>…</header>
4.1 Using Notepad++ (or Sublime Text for Mac users), add the <nav> … </nav>
following CSS code into the style.css file
<article> <aside>
main { …
overflow:auto; <section>
… </aside>
}
</section>
nav {
height:1em; <section>
line-height:1em; …
margin:20px 0px; </article>
}
</article>
<footer>…</footer>
Page 2
Figure 2. Web Page Structure
COS10005 - Web Development Lab 04
header, nav {
border-style:dotted;
}
article {
float:left;
width:75%;
border-style:dotted;
}
aside{
float:right;
width:20%;
border-style:dotted;
}
footer {
clear:both;
border-style:dotted;
margin-top: 20px;
}
Note: You can modify the percentages used in those CSS rules and see the differences made to the web
page structure.
4.2 To link the CSS to the wis.html, add the following code into the <head> … </head> section of the
web page
<link href="style.css" rel="stylesheet" type="text/css" />
4.3 View the web page in a browser and see if the presentation of the web page has been changed.
Step 5:
5.1 Using Notepad++ (or Sublime Text for Mac users), open style.css and add the CSS rules presented
below that will present the menu list as a horizontal navigation bar, similar to the one in Figure 3.
Home WIS About
Figure 3. Horizontal Menu
ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:blue;
border-right: 1px solid white;
}
a:hover {
background-color: #2288ff;
}
header h1 {
text-align:center;
}
Page 3
COS10005 - Web Development Lab 04
Note: You can modify the above CSS rules and see what those changes will do to the presentation of the
web page. This way, you can find out what each CSS rule is used for.
Step 6: Test and view web pages.
6.1 Using WinSCP (or Filezilla for Mac users), upload your files, including wis.html and style.css, onto
Mercury.
6.2 To view the pages through http, use any Web browser and type in the following address,
http://mercury.swin.edu.au/<your unit code>/s<your Swinburne ID>/<folder>/<filename>
Please refer to the following examples to identify the URLs of your web pages.
Folder on Mercury Web Server URL
~/cos10005/www/htdocs/index.html http://mercury.swin.edu.au/cos10005/s1234567/index.html
~/cos60002/www/htdocs/lab04/wis.htm http://mercury.swin.edu.au/cos10005/s1234567/lab04/wis.html
Note: You can copy the URLs in the table, but remember to replace the unit codes and student id in the
above examples with yours to obtain the URLs of your web pages on Mercury.
[IMPORTANT] When the browser authorization request dialog pops up, use your SIMS username and
password to confirm access.
Step 7: HTML and CSS Validation
To validate the HTML file use the online validator at http://validator.w3.org.
To validate the CSS file use the CSS validator at http://jigsaw.w3.org/css-validator/.
Page 4
