QuestionQuestion

Transcribed TextTranscribed Text

Training Module 1 5 points Directions: You will be creating a basic webpage to share your favorite animal or hobby. You are expected to do everything from scratch. When you are finished, turn the assignment in to OnCourse and upload the page to the mercury server. Create the website template (1 pts): 1. Create a file called tm1.html a. In this file, construct the 4 basic tags, common to all websites: i. <html> ii. <head> iii. <title> iv. <body> [Hint: See “Under the Hood of a Web Page” in your textbook] b. You will also need a <style> tag. [Hint: See “Configure Embedded Css” in your textbook] Add the body content (3 pts): 2. In the body section, you will need to have a heading (<hx>) where x is a number from 1-6, with acoupleofwordsdescriptiveofyourpage. [Hint:See“HeadingElement”inyourtextbook] 3. Also in the body, make a short paragraph explaining your favorite animal or hobby. Be sure to close the paragraph element. [Hint: See “Paragraph Element” in your textbook] 4. Make another paragraph telling why the animal or hobby is your favorite. [See “Paragraph Element” in your textbook] Insert comments (1 pts): 5. In a comment, tell us what your least favorite animal or hobby is. You can put this comment anywhere in the document. Turning it in: 6. To turn in tm1.html, upload it to: a) The OnCourse assignment folder tm1, and b) The www folder in your mercury account Training Module 3 15 points Directions: Create the basic elements of a website to submit to OnCourse by creating the website template, adding the body content, and finally the style. This one is a little more complex than the previous two, so good luck. Before you begin, save to your desktop: Bloomington.txt, Btown.jpg. Make sure that you do not keep these files in the zip folder while working on them. Save often and check your work. Create the website template (3 pts): 1. Create a file named tm3.html; add the four basic tags and the style tag. [Hint: See “Under the Hood of a Webpage” in your text book] 2. Create a structured webpage by creating <div> tags as follows. [Hint: See “Structural Elements” in your textbook] a) Create an outer <div> labeled “page” for all of the body content. b) Inside the page <div>, create the following four tags: <header>, <nav>, <div> (labeled id or class selector “content”), and <footer>. 3. The title tag (in the head), should read “Bloomington, Indiana”. [Hint: See “HTML Overview” in your textbook] Add the body content (6 pts): 4. Today we will make a page about Bloomington, Indiana. In the <header>, type “Welcome to Bloomington” using <h1>. [Hint: See “Heading Element” in your textbook] 5. In the <nav> add hyperlinks as follows: [Hint: See “Anchor Element” and “Unordered List” in your textbook] a) First, make an empty unordered list; b) To the unordered list, add three list items, each with a different hyperlink: hyperlink text Points to City of Bloomington http://www.bloomington.in.gov Map of Bloomington http://goo.gl/maps/VQkJV Indiana University http://www.iub.edu c) Make sure to close all of your tags. 6. Copy the text from the file Bloomington.txt, and paste it into the <div> labeled “content” in the file tm3.html. Insert proper paragraph tags where indicated by comments, and insert the image btown.jpg using the image tag. [Hint: See “Paragraph Element” and “Image Element” in your textbook] 7. In the <footer> element, type © 2013, yourname, <a href="http://en.wikipedia.org/wiki/Bloomington,_Indiana"> Credit Wikipedia </a> (Please replace “yourname” above with your name.) Add the style (6 pts): When modifying the style, it is a good idea to save your work, and then refresh your browser to verify your progress. End each property with a semicolon (;). [Hint: See “Css Selectors and Declarations” in your textbook] 8. Make the background of the body #06266F and the color of the text white. 9. Set the width of the <div> labeled “page” to 750px; the background color to #2A4480; add 20px padding. 10. The header, nav, “content” <div>, and footer tags should have: a) background of #4671D5 b) padding of 10px c) black, solid, 3px border 11. The image should be 500px wide. Bonus (3 pts): 12. Make the hyperlinks white 13. When hovering over the hyperlinks, they should turn black 14. Make the font-size of the footer 70% of the default font size Turning it in: 15. To turn in tm3.html, upload it to: a) the OnCourse assignment folder tm3, and b) the www folder in your mercury account. Training Module 4 15 points Directions: For this training module, you have been given a copy of the code from tm3.html. Save both tm3.html and btown.jpg to your desktop, and save your work often. Rename tm3.html to tm4.html. You will create a new file, places.html, and link the two files (tm4.html and places.html) to each other. The places.html file will contain a table with the names, photos, and ratings of your top three restaurants in Bloomington. Create the new file (4 pts): 1. Create a new file named places.html 2. Edit places.html with the codes for a website template. Make sure you have all of your necessarytags,andthenadd <header>,<div> (labeledidorclassselector“content”), and <footer>. [Hint: See “Under the Hood of a Webpage” and “Structural Elements” in your textbook] Add a table (6 pts): 3 In the content div, construct a table to share your favorite places to eat in Bloomington. The table should have three columns and three rows. The three columns will contain: the restaurant name, a picture of the restaurant (doe not have to be the actual restaurant), and public rating (or link to rating, if a rating is available). [Hint: See “Table Overview” in your textbook] 4 In a paragraph below the table, explain your choices above. [Hint: See “Paragraph Element” in your textbook] Finish up (5 pts): 5 For the footer, copy the footer information from tm3.html, and paste it into places.html, substituting your name for the text “YOURNAMEHERE”. 6 Insert appropriate hyperlinks to link the two pages together so that when you click the link text “Home” (in places.html), you will go to the file tm4.html and when you click the link text “Restaurants” (in tm4.html) you will go to places.html. [Hint: Don’t forget to rename tm3.html to tm4.html, and edit tm4.html to include a hyperlink to places.html; See “Anchor Element” in your textbook] 7 Make the style in places.html match the style that is in the file tm4.html. 8 Zip your files to username.zip (where username is your username). Include: tm4.html, places.html, and any pictures used. Turning it in: 9 To turn in this assignment, a) upload your zip file to your OnCourse assignment folder tm4, and b) upload tm4.html, places.html, and any pictures used to the www folder in your mercury account.

Solution PreviewSolution Preview

These solutions may offer step-by-step problem-solving explanations or good writing examples that include modern styles of formatting and construction of bibliographies out of text citations and references. Students may use these solutions for personal skill-building and practice. Unethical use is strictly forbidden.

<!DOCTYPE html>
<html>
<head>
<title>Bloomington, Indiana</title>
<meta charset = "utf-8">
<style>
body { background-color: #06266F;
color: white;}
#page { width: 750px;
background-color: #2A4480;
padding: 20px;}
header,
nav,
#content,
footer { background-color: #4671D5;
padding: 10px;
border: 3px solid black;}
img { width: 500px;}
a:link { color: white;}
a:hover { color: black;}
footer { font-size: 70%;}
</style>
</head>
<body>
<div id = "page">
<header>
<h1> Welcome to Bloomington</h1>
</header>
<nav>
<ul>
<li><a href = "http://www.bloomington.in.gov/">City of Bloomington</a>
</li>
<li><a href = "http://goo.gl/maps/VQkJV">Map of Bloomington</a>
</li>
<li><a href = "http://www.iub.edu/">Indiana University</a>
</li>
</ul>
</nav>
<div id = "content">
<p> Bloomington is a city in and the county seat of Monroe County in the southern region of the U.S. state of Indiana.
According to the Monroe County History Center, Bloomington is known as the "Gateway to Scenic Southern Indiana."
The city was established in 1818 by a group of settlers from Kentucky, Tennessee, the Carolinas and Virginia who were so impressed
with "a haven of blooms" that they called it Bloomington.
</p>

<p> The population was 80,405 at the 2010 census.</p>

<p> Bloomington is the home to Indiana University Bloomington. Established in 1820, IU Bloomington has approximately 40,000 students
and is the original and largest campus of Indiana University. In the 1991 book entitled The Campus as a Work of Art,
author Thomas Gaines named the Bloomington campus one of the five most beautiful in America.
Most of the campus buildings are built of Indiana limestone.
</p>

<p> Bloomington is also the home of the Indiana University School of Public and Environmental Affairs, Indiana University Maurer School of Law,
the Jacobs School of Music, the Kelley School of Business, the Kinsey Institute, the Indiana University School of Optometry,
and the Midwest Proton Radiotherapy Institute.
</p>

<p> Bloomington has been designated a Tree City for more than 20 years. The city was the site of the Academy Award-winning movie Breaking Away,
featuring a reenactment of Indiana University's annual Little 500 bicycle race; Monroe County's famous rock quarries, (Rooftop),
also figure in the movie.
</p>
</br>
<img src = "Images/btown.jpg" alt = "Bloomington Town">
</div>
<footer>
© 2013, yourname, <a href="http://en.wikipedia.org/wiki/Bloomington,_Indiana"> Credit Wikipedia </a>
</footer>
</div>
</body>
</html>...

By purchasing this solution you'll be able to access the following files:
solution.zip.

$60.00
for this solution

or FREE if you
register a new account!

PayPal, G Pay, ApplePay, Amazon Pay, and all major credit cards accepted.

Find A Tutor

View available Web Development (HTML, XML, PHP, JavaScript, Adobe, Flash, etc.) Tutors

Get College Homework Help.

Are you sure you don't want to upload any files?

Fast tutor response requires as much info as possible.

Decision:
Upload a file
Continue without uploading

SUBMIT YOUR HOMEWORK
We couldn't find that subject.
Please select the best match from the list below.

We'll send you an email right away. If it's not in your inbox, check your spam folder.

  • 1
  • 2
  • 3
Live Chats