Create a folder called 4Lab . Inside that folder, create the following folders:

ID: 3814134 • Letter: C

Question

Create a folder called 4Lab. Inside that folder, create the following folders: Ships, Secrets.

In the Exam4Lab folder, create an HTML file called DockingBay.html.

Proper <head>, <body>, <html> tags will need to be inserted to make it HTML recognizable to the browser.

The phrase "Docking Port 4" should appear in the window/tab title bar.

The base background color should be set to some form of a gray for all pages in this series of web pages (both main and all ships pages).

For this page an all other pages, you are to replicate the header, footer, 3 column look from the text as seen throughout chapter 12.

The expectation is to see the HTML elements that appear in that chapter for the various parts of the page.

The Header
There will be a phrase in this section of the page. The phrase is to begin "Ships of" and end with the name of a show or other entity from the list below:

Babylon 5

Star Trek

Star Wars

The United States Navy

For example, if I was to chose ships of Firefly then the phrase would read "Ships of Firely" (note, Firefly is not one of the choices valid for this lab, it is given for an example only)

The phrase should be the largest text on the page and easily read by the instructor for grading purposes. All other text on the page should be smaller but still yet readable.

The background color should be slight darker than the base background color but is still a shade of gray.

The text must be readable on this darker background color so make it a readable color.

2 additional lines of text are to be in this section underneath the main line. The first will be "Exam 4 Lab" and the 2nd line is your name. Both of these lines are to be the same font size but smaller than the main line as mentioned.

All lines should be centered and the centering is to adjust as the window size changes.

The Navigation Bar
This bar should contain the name for each "class" of ship used in this lab. As there are a minimum of 5 ships, this should have 5 ship class names.

An example, using the Firefly show example again, Firefly happens to be the class of the ship, Serenity is the name of the ship. I would want to see Firefly Class.

Each class of ship name is to be separated by some symbol of your choice.

Each class of ship name is to link to the top of the page for each class's individual page.

Put a box around this section but keep the background the same color as the base background.

Left justify the text in this section.

The Footer

Center the text in this section

no box or other color changes to the background for this section

text needs to be in italics and the smallest text on the page but still readable.

There is to be 2 lines of text.

Line one is to be ITD 1353 - Web Programming and Development

Line Two is to be the copyright symbol followed by 2016

The Left most colum

A list of the various ship class pages here.

Separate this with "Good Guys" and "Bad Guys" ships
Depending on the show, that will determine the Good Guys and the Bad Guys. Use the information from the show to separate them out

Example: If I was doing the Firefly again, one category would be the Browncoats and another would be Alliance. Both groups from the series that have ships.

Use the types as a grouping name as they did in the text, don't use Good Guys and Bad Guys

Each group title should be bold text

group title should be a different color than the Ship Class names

If you are doing the United States Navy, separate into some kind of size category or mission category. We do not have bad guy ships in the Navy.

Left Align the text in this section

Each ship class link here links to the appropriate web page.

There is to be a box around this section

The background color should be the same as the background color chosen for the Header

Be sure to have a link to the top of the DockingBay web page.

The Right Most column

Link to the offical website or other online source for the Show or the United States Navy

The link is to be active and live, if clicked, open in a new window the link.

Design the content to be attractive

There muse be an image to display

Do not use any of the ships images in this section.

Background color for this section should be a lighter version of the base background

A thin border should be around this section also

The Middle column

For the main page here, the middle colum will have the name of the class of the ship and a short description of each class. No more than 2 or 3 sentences each separated by some space between the various ships.

At least 5 different ships are needed.

No links needed to the pages, those are covered with the menus

Background is the same as the base so no need to change it.

Thin border is needed around the section.

Text is to be normally done with left and right borders and spacings

Ship Class Pages

The Window Title should change to the ship class for each of the ship class pages.

The Header:

The "Ships of " line changes to "Ship Class - " Class name

Otherwise it remains the same

Navigation Bar, Footer, Right Most column and Left Most Column all remain the same as the DockingBay page.

Middle Colum

First line - Ship Class Name.

Then an image of an example of the ship class

On my Firefly example, I could have an image of Serentiy

Use the correct image paramters to make the images all a reasonable size that fits into the column width. Do not distort the images.

Then at least 5 facts about the ship that you can pull from the web and other sources

These facts could range from crew size to speed or purpose or length of service, etc. There is usually a lot of information about these ships out there on the web to pull down

After each fact in a set of parantheses, a link to where you pulled the infromation from

If you happen to pull all the information from one web source, only one link is needed

The links have to be active and lead to real web pages

Last item in the column, find a video pertaining to the ship class

Set up the video to play in the column

Do NOT autoplay

Have it provide the controls

Have a poster image for the video

Set the video size so it shows up in the column correctly. Be consistent on all pages so the video is the about same size

Set the Preload to none

Check out youtube for videos that might be useful, the videos do not have to come from youtube though, other sources are acceptable

Explanation / Answer

Hello,

I am explaining html and javascript working with two example you can add more for your project ..

<html>
<head>
<script>
//Function to show one page and hide others (take and array of all the divsand user for loop to hide all others) and will change the headercontent as per the menu selection
function show(shown, hidden,content) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
document.getElementById('header').innerHTML=content;
return false;
}
</script>
<style>
div.container {
width: 100%;
border: 1px solid gray;
}

header, footer {
padding: 1em;
color: white;
background-color: gray;
clear: left;
text-align: center;
}

nav {
float: left;
max-width: 160px;
margin: 0;
padding: 1em;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul a {
text-decoration: none;
}

article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
</style>
</head>
<body>

<header>
<h1 id="header">Ships Information</h1>
</header>

<nav>
<ul>
<li>Ships</li>
<li><a href="#">Firefly</a></li>
<li><a href="#">Star Wars</a></li>
</ul>
</nav>

<article>
<div id="Page1" >
Ships of Firefly:

<p>Put required content about firefly...</p>


<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls></video>
</div>

</article>

</div>

</body>
</html>

Navigate

Create a flowchart using Visual Logic to represent the logic of a program that w

Create a folder called Week3Lab Add a file called startup.txt Edit this file and

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create a folder called 4Lab . Inside that folder, create the following folders:

Question

Explanation / Answer

Related Questions

Navigate