Scribd
Upload
7 views5 pages

Lab 05 Instruction-1

Lab 5 focuses on web development, emphasizing the importance of pre-designing content structure before implementing CSS. It guides students through creating a structured webpage using HTML5 and CSS, including tasks like folder creation, webpage design, and applying CSS rules for layout and styling. The lab concludes with instructions for testing and validating the HTML and CSS files on the Mercury server.

Uploaded by

birlaaryan420
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views5 pages

Lab 05 Instruction-1

Lab 5 focuses on web development, emphasizing the importance of pre-designing content structure before implementing CSS. It guides students through creating a structured webpage using HTML5 and CSS, including tasks like folder creation, webpage design, and applying CSS rules for layout and styling. The lab concludes with instructions for testing and validating the HTML and CSS files on the Mercury server.

Uploaded by

birlaaryan420
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

COS10005- Web Development Lab 05

Lab 5 – Content Structure and CSS Page Layout


Aims:
 To understand the importance of designing prior to CSS implementation.
 To mark up a document using HTML5 content models for presentation using CSS.
 To learn the techniques and skills required for assignment 1.

Task 1: Structure and Present a Webpage


Step 1: Folder Creation
1.1 Create a lab05 folder on the Mercury server and upload and test your work from there.

1.2 Download the file surveyhome.html from Canvas and use it as a template for this lab work.
Step 2: Webpage Design
2.1 Using the home page designed Figure 1, identify the HTML elements required to structure
surveyhome.html. Determine if an “id” or “class” attribute is needed for the HTML elements.

1. Logo and slogan Element id / class / not required


1.
2. Horizontal navigator
2.
3. Main content 6. Ads
sidebar 3.
4. Article 1 4.
7. Ads 1
5.
5. Article 2
8. Ads 2 6.
7.
8.
9. Copyright notices and contact info
9.
Figure 1: Mock Up of Home Page
Step 3: Basic HTML
Use Notepad++ (or Sublime Text for Mac users) to open and edit surveyhome.html.

3.1 Add the HTML general structure below to the document to construct the webpage.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Service</title>
<meta charset="utf-8" />
<meta name="description" content="Web Development" >
<meta name="keywords" content="HTML and CSS" >
<meta name="author" content="put your name here" >
</head>
<body>
…
</body>
</html>

3.2 Structure the webpage according to the mock up presented in Figure 1 using HTML5 structural elements,
e.g., <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> and other
appropriate HTML structural elements.
3.3 Mark up the document within each HTML structural element using appropriate HTML content elements,
e.g., <h#>, <p>, <ul>, <a>, <img> and other appropriate elements. Specify “id” or “class” attribute
as needed.

Page 1
COS10005- Web Development Lab 05
Step 4: Folder and CSS File Creation
4.1 Create a new CSS file named surveyhome.css.
4.2 Create a folder named css and save surveyhome.css in that folder.

Note: A website might have more than one CSS file, so it is a good practice to store all CSS files in a
separate folder. See Figure 2 for example.

Folder for the entire website


survey service website

surveyhome.htm

Subfolders
surveyweb

survey01.htm
survey02.htm
survey03.htm
survey04.htm
survey05.htm

images

logo.gif

css

surveyhome.css
Figure 2: Directory structure

4.3 Add the following code into the head section (below the title element) of surveyhome.html. This will link
surveyhome.css to surveyhome.html.

<link href="css/surveyhome.css" rel="stylesheet" type="text/css" />

Step 5: CSS Positioning


Complete and apply the CSS rules below applicable HTML structural elements shown in Figure 3.

Note: You might need to specify the id or the class attributes of applicable HTML elements so that they
can be properly selected in the CSS file for CSS application.

1. Logo and slogan


Regular Flow
2. Horizontal navigator
Float to the left
3. Main content
4. Article Float to the right

5. Article Disallow float

6. Ads sidebar
7. Ad 1

8. Ad 2

8. Copyright notice and contact info Figure 3. Webpage structure

Page 2
COS10005- Web Development Lab 05
5.1 For the <main> element:
 Float to the left;
 Set width to be 65%;

______________ { /*CSS Selector*/


float : ____________;
width : ____________;
}

5.2 For the <aside> element:


 Float to the right;
 Set width to be 30%;
 Set font size to be 8px;
 Set font style to b italic;
 Set font color to be green;

______________ { /*CSS Selector*/


float : ____________;
width : ____________;
font-size : ____________;
font-style : ____________;
color : ____________;
}

5.3 For the <footer> element:


 Disallow other floating elements on both the left and right sides.

______________ { /*CSS Selector*/


clear: : ____________;
}
Step 6: CSS Web Typography and Coloring
6.1 Create and apply CSS rules to HTML elements as indicated in Figure 4.

Note: You might need to specify the id or the class attributes of applicable HTML elements so that
they can be properly selected in the CSS file for CSS application.

s White text on navy blue


1. Logo and slogan background.
2. Horizontal navigator
Dark grey background.
3. Main content
Black text on light grey
4. Article
background.
Must be applied to all article.
5. Article

Green text on light grey


6. Ads sidebar background.
7. Ad 1
Green text on light blue
8. Ad 2 background.
Must be applied to all ads.

8. Copyright notice White text on navy blue


background.
Figure 4. Webpage structure

Page 3
COS10005- Web Development Lab 05

Step 7: More CSS


Apply more CSS to surveyhome.html as instructed below.

Note: You might need to specify the id or the class attributes of applicable HTML elements so that they
can be properly selected in the CSS file for CSS application.

7.1 Complete and apply the following CSS rule to the list element in the <nav> part of surveyhome.html
using an appropriate selector:
 Float the list element to the left;
 Remove all bullet point symbols;
 Eliminate padding and margin; and
 Make the list occupy the entire width.

______________ { /*CSS Selector*/


float : ____________;
list-style-type : ____________;
padding : ____________;
margin : ____________;
width : ____________;
}

7.2 Complete and apply the following CSS rule to all the <a> elements in the <nav> part of
surveyhome.html using an appropriate selector:
 Float those <a> elements to the left;
 Set width to be 6 times the current font size;
 Remove the underline;
 Set font color to be white;
 Set background color to be blue;
 Set the top and bottom padding to be 0.2em;
 Set the right and left padding to be 0.6 em;
 Set the border to be 1px, solid and white;

______________ { /*CSS Selector*/


float : ____________;
width : ____________;
text-decoration : ____________;
color : ____________;
background-color : ____________;
padding : ____________;
border-right : ____________;
}

7.3 Complete and apply the following CSS rule to all the <a> elements in the <nav> part of survyhome.html
using an appropriate pseudo class selector:
 Set the background color of the <a> elements to be brown on mouse over

______________ { /*CSS Selector*/


background-color : ____________;
}

7.4 Complete and apply the following CSS rule to all the <article> elements on survyhome.html using an
appropriate selector:
 Set appropriate width and height; and
 Set the text box shadow to be 3px 3px 3px 2px #797979;

______________ { /*CSS Selector*/


width : ____________;
height : ____________;
box-shadow : ____________;

Page 4
COS10005- Web Development Lab 05
}

7.5 Complete and apply the following CSS rule to all the <h#> elements in all the <article> elements on
survyhome.html using an appropriate an appropriate selector:
 Set the text shadow to be #aaa 2px 2px 2px;

______________ { /*CSS Selector*/


text-shadow : ____________;
}

Step 8: Webpage Testing


8.1 Using WinSCP, upload your files, including HTML, css files and images (if any), onto Mercury.
8.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 webpages.

Folder on Mercury Web Server URL

~/cos10005/www/htdocs/index.html http://mercury.swin.edu.au/cos10005/s1234567/index.html

~/cos60002/www/htdocs/lab05/surveyhome.html http://mercury.swin.edu.au/cos60002/s1234567/lab05/surveyhome.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 webpages on Mercury.

[IMPORTANT] When the browser authorization request dialog pops up, use your SIMS username and
password to confirm access.

Step 9: HTML and CSS Validation


To validate the HTML file use the validator at http://validator.w3.org

To validate the CSS file use the CSS validator at http://jigsaw.w3.org/css-validator/

Page 5

You might also like