Enhancing a Website with Links and Images Exercise

BMIS235 Web Design Assignment NAME: ______

Professor Chen Due Date: ______

Enhancing a Website with Links and Images [exercise]

Instructions for exercise HTML#3: html03 (fitness03.html)(exercise: pp. 84-123)

Do NOT work on the assignment until you complete readings of the text book and powerpoint file.

0. File name to be changed: index.html (p.93) should be changed to fitness03.html (why?)

Read the instructions listed in the HTML text listed on pp.84-123along with this handout.

1. Create a new folder of html03 under public_html directory. Next, create additional two folders under html03: exercise and hw. Finally, createan imagesfolderunder exercise and hw respectively.

a)exercisefolder and the associated images folder will be used for text book exercise (e.g., fitness03.html and others)

b)hwfolder and the associated images folder will be used for your homework assignment (e.g., ski03.html and others)

Therefore, the Web Design Directory Structure for html03 shall be: public_html/html03/exercise (for fitness03.html)and public_html/html03/hw(for ski03.html) plus images and css folders under each one.

Your Web Page directory structure should be organized as in Figure 2.

2. Download the following (7) data files, fitness03.html, about.html, contact.html and four image from Bb (available under Assignments Web Assignments and Resources) to your PC. Save three *.html files in /html03/exercise/ folder and four image files in public_html/html03/exercise/images/ folder.

3. Open the fitness03.html by right clicking the file then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++”.

4. Modify the three *.html files as follows (and read the text book):

a) modify three *.html files as shown in Figure 3-a, 3-b, 3-c respectively.

b) upload/save *.html files to the right folder (i.e., public_html/html03/exercise/

c) upload/save the four image files to the right folder (public_html/html03/exercise/images/)

5. When done, test fitness03.html from your local drive, then upload to your web repository and finally entering your URL (html03/exercise/fitness03.html) on the Web Browser. You also can check the result of your program on the following URL html03/exercise/fitness03.html

6. A sample Web Page (fitness03.html) is shown in Figure 1 (also on p.85 – Figure 3-1 of the text)

7. It is required to “Validate” and “View” your HTML code and debug/correct the code before you submit the assignment (see HTML pp.67-69,123, 241, 294.

8. What/How you should turn in: Fail to provide me with ALL information, you will losemajor points:

Notifying your instructor by uploading HTML#3 message (fitness03.html) to the Blackboard (not via email). See detailed instruction on the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Enter the following information in the “2. Assignment Submission” window:

Dr. Chen,

Hereismy HTML#3(fitness03.html) assignment.

html03/exercise/fitness03.html

<Your Full Name> bmis235-02 (or bmis235-03 or bmis235-05)

so that I can record/grade your homework directly on the Bb.

Figure 0. Three Major Web Pages for html03 ‘exercise’

Figure 1. The following is the Web Design Directory Structure for html03 Assignment

Figure 2. How to open the data file of fitness03.html

Figure 3-a. A Complete Version offitness03.html for exercise

<!DOCTYPE html>

head

title>Forward Fitness Club</title>

meta charset="utf-8">

</head>

body

header

</header>

nav

<a href="about.html">About Us</a>    

<a href="class.html">Classes</a>    

<a href="nutrition.html">Nutrition</a>    

<a href="contact.html">Contact Us</a>

</nav

main

<p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness and nutrition goals.</p>

<p> If you have struggled with getting healthy and need the motivation and resources to make a healthy lifestyle change, contact us today. Our facility includes state-of-the-art equipment, convenient group training classes, and nutrition tips and information to keep you healthy.</p>

<p>We provide a FREE, one-week membership to experience the benefits of our equipment and facility. This one-week trial gives you complete access to our equipment, training classes, and nutrition planning. Contact us today to start your free trial!</p>

</main>

footer

a href="mailto:"></a>

</footer>

</div>

br/> <br />

iThis document was last updated on:

</script>

by Jason Chen (replaced by Your Name)

</i

</body>

</html>

Figure 3b. A complete version of about.html for exercise

<!DOCTYPE html>

head

title>Forward Fitness Club</title>

meta charset="utf-8">

</head>

body

header

</header>

nav

<a href="about.html">About Us</a>    

<a href="class.html">Classes</a>    

<a href="nutrition.html">Nutrition</a>    

<a href="contact.html">Contact Us</a>

</nav

main

<h1>Weights</h1>

img class="equip" src="images/equipment1.jpg" alt="Weight Equipment" height="195" width="260">

<p>Our facility includes a weight training area with several weight options. Build lean muscle with weights and improve your core with weight training.</p>

li>Dumbbells</li>

li>Kettle bells</li>

li>Barbells</li>

</ulbr

<h1>Cardio</h1>

img class="equip" src="images/equipment2.jpg" alt="Cardio Equipment" height="195" width="260">

<p>Burn fat through cardio workouts. If you need to lose 20 lbs or more, include at least 30 minutes of cardio each day. We have several equipment choices for your workout.</p>

li>Treadmills</li>

li>Elliptical Machines</li>

li>Exercise Bikes</li>

</ulbr

<h1>Personal Training</h1>

img class="equip" src="images/equipment3.jpg" alt="Personal Training" height="195" width="260">

<p>Our certified personal trainers work with you one on one to help you obtain your fitness goals. Our personal trainers keep you motivated and push you farther than you would push yourself. When you feel like you cannot do one more rep, they tell you that you can. Personal training has many benefits.</p>

li>Accountability</li>

li>Personalized Program</li>

li>Consistent Support and Motivation</li>

</ulbr

<h1>Common Exercises</h1>

<p>The following are common exercises that we encourage our clients to do as part of their daily exercise routine.</p>

dtBurpee</dt

ddBurpees are a great, full body exercise to increase your strength and endurance. Begin in a standing position, drop into a squat and extend your hands forward, kick your feet back and then forward again quickly, and then jump up from a squatted position.

br</dd

dtPlank</dt

ddPlanks build your core strength. To perform a plank, get in a push up position and rest your forearms on the floor. Hold the position as long as you can.

br</dd

dtMountain Climber</dt

ddMountain climbers are a good cardio exercise. Place your hands on the floor in a push up position, then bring one knee up to your chest and then switch as quickly as you can (as though you are climbing a mountain).

br</dd

</dl>

<p>For more information about how to stay active, visit <a href="

</main>

footer

a href="mailto:"></a>

</footer>

</div>

br/> <br />

iThis document was last updated on:

</script>

by Jason Chen (replaced by Your Name)

</i

</body>

</html>

Figure 3-c. A complete version of contact.html for exercise

<!DOCTYPE html>

head

title>Forward Fitness Club</title>

meta charset="utf-8">

</head>

body

header

</header>

nav

<a href="about.html">About Us</a>    

<a href="class.html">Classes</a>    

<a href="nutrition.html">Nutrition</a>    

<a href="contact.html">Contact Us</a>

</nav

main

<h2>Ready to get started? Contact us today.</h2>

<p>We are located at:br

25743 Bloom Court<br

Locket, GA 85524</p>

<p>Phone Number<br

<p>Email Address<br

a href="mailto:"></a</p>

brbr

</main>

footer

a href="mailto:"></a>

</footer>

</div>

br/> <br />

iThis document was last updated on:

</script>

by Jason Chen (replaced by Your Name)

</i

</body>

</html>

HTML#3 (exercise);Page-1