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.
Problem 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).
Problem 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".
Our Introduction to Web Development Assignment Help service can even provide you the tailor-made assignment paper, as per requisites of the student's at the most viable prices that no other online service provider organizations can offer.
Tags: Introduction to Web Development Assignment Help, Introduction to Web Development Homework Help, Introduction to Web Development Coursework, Introduction to Web Development Solved Assignments
Attachment:- Web Development.rar