Reference no: EM132488377 , Length: 2 pages

BIT207 Introduction to Web Development - Emirates College of Technology

Exercise:

You are considered to make advertising for health and fitness. The government has asked you to create a web page for the title "Health & Fitness".

Figure (1) show you the wireframe for the web page you will create and figure (2) show you the final look for the fitness page.

Question 1

The following instructions will help you to create fitness page:

1. Wrapper: It's the framework of the page.
2. Logo:
i. Insert h1 with the title of "Healthy Life Fitness".
ii. Construct navigation area (nav) that contains the following links.
• Text "Food" to hyperlink pointing to "food.html"
• Text "Diet" to hyperlink pointing to "diet.html"
• Text "Sport" to hyperlink pointing to "sport.html"

3. leftcolumn:
i. This area contains the paragraph "student name".

4. rightcolumn:
4.1 Content:
i. Insert the image "health.jpg" with 250 pixels width, 200 pixels height, and apply the style "floatright".
ii. Add h1 with the title "Health & Fitness".
iii. Add the paragraph that shown in the figure (2).
iv. Add h3 with the title " "One Life, Live it Well" ".
4.2 footer: (0.5 for the area)
i. Add copyrights details that shown in the figure (2).

Question 2

1. Use external cascading style sheet to apply the following styles:

selector	Property	Value
#wrapper	Background-color	#eebb66
	Color	blue
#leftcolumn	Float	left
	Width	150 px
	padding	5px
#rigthcolumn	margin-left	150px
	background-color:	#ffffff
#logo	background-color	#eeeeee
	Color	#B33322
	font-size	x-large
	border-bottom	1px solid #000000
	padding	10px 100px
.content	Color	#ee3333
	padding	20px 20px 0 20px
#floatright	margin	10px
	Float	left

#footer	Color	blue
	font-size	small
	text-align	center
	padding	10px
	background-color	#eeeeee
.nav	margin	15px
	display	inline

2. Save the XHTML file as "fitness.html" and save the external CSS file as "fstyle.css".

Attachment:- Web Development.rar