Question

In: Computer Science

Step 1) Following the steps from prior weeks, add a new page to your website. Save...

Step 1) Following the steps from prior weeks, add a new page to your website. Save this new page as AboutUs.html. Make sure that the name of the page does not have a space (see the screenshot below of the Save dialogue box).

Step 2) Add the <body> tag, navigation, and <header> tag. The header <h1> text should say “About Us”.

Hint: Refer to Week Three, Steps 3, 4, and 5 for a refresher on how to add these elements.

Step 3) Add a link to the external CSS page.

Hint: Refer to Week Three, Step 8 for a refresher on how to add the link to the MyStyle.css page.

Step 4) Save your page and open it in a web browser, such as IE or Chrome. Your page should render like the image below with the header and the navigation on the top right of the page.

Step 5) Add a <div> tag between the closing </header> and closing </body> tags. To avoid confusion with <div> tags that you will add later, name this tag “div1”.

<div name="div1">

</div>

Step 6) Add a new file folder named media to the folder where you’ve chosen to save your Week Five files (the screenshot below shows your file structure with the media folder in the same place as your HTML and CSS files).

Step 7) Copy the file named Swiss_Mountain_House.mp4 to the “media” folder.

Note: It’s important that you have the legal right to use any and all media files you add to web pages; you automatically own all rights to media files you created yourself, most other files you must obtain permission from the owner of the file. Some copyright owners grant free use of their work just for asking. Websites that offer free media files will state on their site that the files are royalty free. Never use someone else’s work without being sure you have the right to do so. In this case, your instructor has ensured you have the right to use these files.

Step 8) Within the opening <div> and closing <div> tags for “div1”, add the following code to add a video clip to your AboutUs.html page:

<video width="400px" controls>

   <source src="media/Swiss_Mountain_House.mp4" type="video/mp4">

   Use a browser (such as IE or Chrome) that supports the HTML5 video tag for mp4 files.

</video>

Note: The source “src” tag for the path is pointing to the media folder. The line under the <source> tag is verbiage that the user may see if the browser is not compatible with the HTML5 video tag, or if the file is missing. All browsers behave differently, but it is a good practice to provide the alternate text.

Step 9) Add the following HTML comment on the line above the beginning <video> tag. Note the syntax that delineates the start and stop of the HTML comment. The HTML interpreter will ignore everything between the opening and closing comment tags so you only see this comment when you look at the source. Notice that the HTML comment syntax is different from the JavaScript® comment syntax.

<!-- Royalty-free video loops are from https://www.freeloops.tv/ -->

Step 10) Save and refresh the browser. Your page should render like the image below with an embedded video file below the header.

Step 11) Click the play arrow to test the 5-second video.

Note: There is no audio with this video.

Step 12) Copy the files named Cow-SoundBible.mp3 and Cow-SoundBible.wav to the “media” folder.

Step 13) Add a second <div> tag (named “div2”) after the closing </div> tag for “div1”, but before the closing </body> tag. Insert the <article> and <audio> element code below. Note that the source “src” tag for the path is pointing to the media folder and there is also a comment above the opening <audio> tag.

        <div name="div2">

<article >

Our cheese products come from the finest farms in Switzerland. Click the audio play button below to hear our happy cows!

</article>

<!-- Royalty-free sound clips are from http://soundbible.com/ -->

<audio controls >

   <source src="media/Cow-SoundBible.mp3" type="audio/mpeg">

   <source src="media/Cow-SoundBible.wav" type="audio/wav">

   <source src="media/Cow-SoundBible.ogg" type="audio/ogg">

   Your browser does not support the audio tag.

</audio>

        </div>

Step 14) Save and refresh the browser. The page will render like the image below with text and the embedded sound file below the video. Press the audio play arrow to test the audio.

  

Note:In Step 14, the line under the <source> tag is verbiage that users may see if their browsers are not compatible with the HTML5 audio tag, or if the audio files are missing. To simulate this situation, comment out the two lines for the MP3 and WAV files. When your interpreter cannot see the two commented-out lines, it will only read the file for the OGG file. Since that file is missing, your browser will either show the alternate text, or disable the audio control. All browsers behave differently, but providing these options allows different browsers to handle the situation gracefully. Without these options, a browser might display a broken link to a sound file with no explanation, which would confuse your users and give them the impression that your site is poorly constructed. Remember that in HTML the beginning comment tag is <!-- and the closing comment tag is -->. If you tested the missing file scenario above, be sure to uncomment the lines that point to the MP3 and WAV files.

Step 15) To float “div1” and “div2” side-by-side, use the "myColumns" CSS class from Week One to both <div> tags. Save your file after you are finished. The modified opening <div> tags will look like this:

<div name="div1" class="myColumns">

<div name="div2" class="myColumns">

Step 16) Open the MyStyle.css page in NotePad++. Add the following code to the end of the existing code, right after the closing curly brace } for the myColumns block, as follows:

.aboutUsMedia {

            width: 250px;

}

Step 17) Back in the AboutUs.html page, modify the opening <video>, opening <article> tag, and opening <audio> tags.

Note: The “aboutUsMedia” class will replace the “width” attribute for the <video> tag.

  1. Remove the width="400px" statement from the opening <video> tag and replace it with the class="aboutUsMedia" statement. The code will look like the example line below:

<video class="aboutUsMedia" controls>

  1. Add the class="aboutUsMedia" statement to the opening <article> and opening <audio> tags, as follows:

<article class="aboutUsMedia">

<audio class="aboutUsMedia" controls >

Step 18) Save and refresh the browser. The <video> tag, <article> tag, and <audio> tag are all resized to a width of 250px, and the two <div> tags are now floating side-by-side as shown in the image below.

Step 19) Add the following <footer> code between the closing </body> tag and the closing </html> tag:

<footer>

Click

<a href="https://www.nationalgrocers.org/" target="_blank">here</a>

to learn more about the National Grocers Association.

</footer>

Step 20) To push the <footer> to the bottom of the page, and to stop the floating of the footer to the right, add the following to the end of your MyStyle.css page.

footer {

            clear:both; /* this clears the float */

            display: block;

            position: absolute;

            bottom: 0;

            left: 0;

            right: 0;

background-color: lightgray;

text-align: center;

}

Step 21) Save your file and refresh it in the browser window. Your page should render like the image below with a formatted footer at the bottom of the page that includes a link. To test the external link, click the “here” hyperlink in the footer at the bottom of the page. The external page will open in a new window.

Note: Be sure to save all the files, as you modified the AboutUs.html and MyStyle.css files in the prior steps.

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "AboutUs.html" is created, which contains following code.

NOTE :Make required changes in the navigation and class=myColumns

AboutUs.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>About Us</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- <link> is used to refer external css -->

<link href="MyStyle.css" rel="stylesheet">

</head>

<body>

<header>

<h1>About Us</h1>

</header>

<div name="div1" class="myColumns">

<!-- Royalty-free video loops are from https://www.freeloops.tv/ -->

<video class="aboutUsMedia" controls>

<source src="media/Swiss_Mountain_House.mp4" type="video/mp4">

Use a browser (such as IE or Chrome) that supports the HTML5 video tag for mp4 files.

</video>

</div>

<div name="div2" class="myColumns">

<article class="aboutUsMedia">

Our cheese products come from the finest farms in Switzerland. Click the audio play button below to hear our

happy cows!

</article>

<!-- Royalty-free sound clips are from http://soundbible.com/ -->

<audio class="aboutUsMedia" controls>

<source src="media/Cow-SoundBible.mp3" type="audio/mpeg">

<source src="media/Cow-SoundBible.wav" type="audio/wav">

<source src="media/Cow-SoundBible.ogg" type="audio/ogg">

Your browser does not support the audio tag.

</audio>

</div>

<footer>

Click

<a href="https://www.nationalgrocers.org/" target="_blank">here</a>

to learn more about the National Grocers Association.

</footer>

</body>

</html>

************************************

MyStyle.css :

/* style for class=myColumns */

.myColumns{

float: left;

padding: 20px;

}

/* style for class=aboutUsMedia */

.aboutUsMedia {

width: 250px;

}

/* style for footer */

footer {

clear:both; /* this clears the float */

display: block;

position: absolute;

bottom: 0;

left: 0;

right: 0;

background-color: lightgray;

text-align: center;

}

======================================================

Output : Compile and Run AboutUs.html in the browser and will get the screen as shown below

Screen 1 :AboutUs.html

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 1 day ago
Next > < Previous

Related Solutions

Complete the following steps: Step 1: State your topic and dependent variable. Start with a simple...
Complete the following steps: Step 1: State your topic and dependent variable. Start with a simple question that you want to know the answer to: “What do (your selected population) think about _____________?” Fill in the blank, and you have your topic, as well as your dependent variable: “opinion about ________________.” Step 2: Define and describe your target population – the people you want to participate in your survey. Step 3: Describe your sampling approach. Will it be probability or...
Create a Home Page: Part 1 • Contain an image or logo about your website. •...
Create a Home Page: Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat Password - Input Password...
QBO What steps need to be followed to add a new product or service? What steps...
QBO What steps need to be followed to add a new product or service? What steps need to be followed to record a new sales receipt? What steps need to be followed to record a new invoice? What steps need to be followed to record a new payment from a customer? What steps need to be followed to record a new deposit to the bank? What steps need to be followed to record a new product and adding a new...
choose one pharmacy website and answer these questions below. 1) What were your expectations prior to...
choose one pharmacy website and answer these questions below. 1) What were your expectations prior to going to the pharmacy site? 2) Were you positive or negative on your experience and WHY? 3) If you could change anything about the site, what would it be and why?
Add a 1- to 2-page section to your Playbook/Runbook. Create a prescriptive section of your playbook...
Add a 1- to 2-page section to your Playbook/Runbook. Create a prescriptive section of your playbook providing guidelines to secure each of these areas: Network connections Mobile devices Cloud services
Minimum Requirements: Your website must include appropriate and understandable page titles for each page. These titles...
Minimum Requirements: Your website must include appropriate and understandable page titles for each page. These titles display at the top of the browser when users view your pages Must have a minimum of three sub-pages excluding the homepage. Additional pages MUST be subpages linked off the homepage Homepage: This page will include a brief introduction of the site, links to the other pages, pictures, etc. Name the Homepage file ‘index.html’ About me page: this page tells about yourself and everything...
Modify program 4-27 on page 219 as follows: 1) Add a new membership category for STUDENTS...
Modify program 4-27 on page 219 as follows: 1) Add a new membership category for STUDENTS with a monthly rate of $90.00. The menu should have one more choice, and the switch statement should implement one more case. 2) The input for the number of months should be validated for 1 -36 months. No charges should be displayed for incorrect number of months. Instead, an error should be displayed similar with the one for wrong menu choice. // This menu-driven...
1. Please explain which rules of calculus lead from step 1 below to steps 2 and...
1. Please explain which rules of calculus lead from step 1 below to steps 2 and 3, and from step 3 to step 5: Step 1: RSS = sum from i = 1 to n (yi - b0 - b1xi)^2 Step 2: deltaRSS/deltab0 = (- 2) sum from i = 1 to n (yi b0 - b1xi) = 0 Step 3: deltaRSS/deltab1 = (- 2) sum from i = 1 to n (xi(yi - b0 - b1xi)) = 0 Step...
A market analyst wants to know if the new website he designed is showing increased page...
A market analyst wants to know if the new website he designed is showing increased page views per visit. A customer is randomly sent to one of two different​ websites, offering the same​ products, but with different designs. Assume that the data come from a distribution that is Normally distributed. The data is shown in the table to the right. Complete parts a through c below. Website 1 Website 2 n 80 95 ybar 6.5 6.3 s 4.9 5.4 Calculate...
A market analyst wants to know if the new website he designed is showing increased page...
A market analyst wants to know if the new website he designed is showing increased page views per visit. A customer is randomly sent to one of two different​ websites, offering the same​ products, but with different designs. The accompanying table shows the data from five randomly chosen customers from each website. Assume that the data come from a distribution that is Normally distributed. Complete parts a through c below. Website 1 Website 2 11 8 6 12 14 4...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT