Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following:...
Complete a SIX webpage using notepad or notepad++ about your favorite hobby that contains the following:
The project should include the following pages:
home page
form page
4 or more additional pages to render complete coverage
a site map – three levels or more (not included in the page count)
The pages should contain:
a two- or three-column layout
CSS must be used for layout
one external CSS file will contain formatting for the site (the bulk of css goes here)
individual page elements will be formatted with embedded CSS
inline css can also be used, if desired
a navigation structure using an unordered list
header and footer
subheadings, bullets as needed (proper writing for the web)
images / graphics as appropriate (minimum one per page) relating to the topic
at least one Java applet, JavaScript, or jQuery
a form; text fields, radio buttons, check boxes, a select list, submit and reset buttons, fieldset and legend
accessibility coding
a multimedia element
external links must open in a new window/tab
Homework Answers
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - Home </title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
text-align: center;
}
.column {
float: left;
width: 50%;
padding: 10px;
border-bottom: 2px solid black;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark justify-content-md-center bg-dark">
<a href="form.html" target="_blank" class="btn btn-primary m-5">Forms</a>
<a href="javapplet.html" target="_blank" class="btn btn-primary m-5">JavaApplet</a>
<a href="javascript.html" target="_blank" class="btn btn-primary m-5">JavaScript</a>
<a href="jQuery.html" target="_blank" class="btn btn-primary m-5">jQuery</a>
<a href="table.html" target="_blank" class="btn btn-primary m-5">Tables</a>
</nav>
</header>
<br>
<br>
<br>
<div class="row">
<div class="column">
<h2>Hobbies</h2>
<ul>
<li>Running</li>
<li>Blogging</li>
<li>Bowling</li>
<li>Computer Programming</li>
<li>Digital Art</li>
</ul>
</div>
<div class="column">
<h2>Favorite Movies</h2>
<ul>
<li>Avengers</li>
<li>The Lion King</li>
<li>Captain Marvel</li>
<li>Hobbs & Shaw</li>
<li>Iron Man</li>
</ul>
</div>
</div>
<img src="http://res.publicdomainfiles.com/pdf_view/17/13504603217567.png" width="80%" class="m-5">
<br>
<audio controls>
<source src="https://www.bensound.com/bensound-music/bensound-clearday.mp3">
</audio>
<br>
<footer class="footer mt-auto py-3">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>
//form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wvalueth=device-wvalueth, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - Forms</title>
<style>
body {
text-align: center;
}
.btn {
display: inline-block;
padding: 9px 12px;
padding-top: 7px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #5e5e5e;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #d1dade;
-webkit-border-radius: 3px;
-webkit-border-radius: 3px;
-webkit-border-radius: 3px;
background-image: none !important;
border: none;
text-shadow: none;
box-shadow: none;
transition: all 0.12s linear 0s !important;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}
a {
text-decoration: none;
}
nav {
background: black;
padding: 50px;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
}
</style>
</head>
<body>
<header>
<nav class="">
<a href="index.html" target="_blank" class="btn btn-primary m-5">Home</a>
<a href="javapplet.html" target="_blank" class="btn btn-primary m-5">JavaApplet</a>
<a href="javascript.html" target="_blank" class="btn btn-primary m-5">JavaScript</a>
<a href="jQuery.html" target="_blank" class="btn btn-primary m-5">jQuery</a>
<a href="table.html" target="_blank" class="btn btn-primary m-5">Tables</a>
</nav>
</header>
<br><br>
<form action="#" method="post">
<fieldset>
<legend>Information</legend>
<input type="text" name="name"><br>
<input type="checkbox" name="Bike" value="Bike">Bike<br>
<input type="checkbox" name="Car" value="Car">Car<br>
<input type="checkbox" name="Truck" value="Truck">Truck<br>
<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<select name="frutis">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Banana">Banana</option>
</select>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>
//javaapplet.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - JavaApplet</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark justify-content-md-center bg-dark">
<a href="index.html" target="_blank" class="btn btn-primary m-5">Home</a>
<a href="form.html" target="_blank" class="btn btn-primary m-5">Forms</a>
<a href="javascript.html" target="_blank" class="btn btn-primary m-5">JavaScript</a>
<a href="jQuery.html" target="_blank" class="btn btn-primary m-5">jQuery</a>
<a href="table.html" target="_blank" class="btn btn-primary m-5">Tables</a>
</nav>
</header>
<applet code="HelloWorld" width=200 height=60>
</applet>
</body>
</html>
//HelloWorld.java
// A Hello World Applet
// Save file as HelloWorld.java
import java.applet.Applet;
import java.awt.Graphics;
// HelloWorld class extends Applet
public class HelloWorld extends Applet
{
// Overriding paint() method
@Override
public void paint(Graphics g)
{
g.drawString("Hello World", 20, 20);
}
}
//javascript.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - JavaScript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark justify-content-md-center bg-dark">
<a href="index.html" target="_blank" class="btn btn-primary m-5">Home</a>
<a href="form.html" target="_blank" class="btn btn-primary m-5">Forms</a>
<a href="javapplet.html" target="_blank" class="btn btn-primary m-5">JavaApplet</a>
<a href="jQuery.html" target="_blank" class="btn btn-primary m-5">jQuery</a>
<a href="table.html" target="_blank" class="btn btn-primary m-5">Tables</a>
</nav>
</header>
<h1> Alert box Example</h1>
<button onclick="myfunc()">Click Me</button>
<br><br>
<form onsubmit="return validate()">
<h2>Email Validation through JavaScript</h2>
<input type="text" name="email" required><br>
<input type="submit" value="register">
</form>
<script>
function myfunc() {
alert("This is an alert box For Alert");
}
function validate() {
var result = true;
var e = document.getElementsByName("email")[0].value;
var atindex = e.indexOf('@');
var dotindex = e.lastIndexOf('.');
if (atindex < 1 || dotindex >= e.length - 2 || dotindex - atindex < 3)
result = false;
return (result);
}</script>
</body>
</html>
//jquery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - jQuery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").toggle();
});
});
</script>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark justify-content-md-center bg-dark">
<a href="index.html" target="_blank" class="btn btn-primary m-5">Home</a>
<a href="form.html" target="_blank" class="btn btn-primary m-5">Forms</a>
<a href="javapplet.html" target="_blank" class="btn btn-primary m-5">JavaApplet</a>
<a href="javascript.html" target="_blank" class="btn btn-primary m-5">JavaScript</a>
<a href="table.html" target="_blank" class="btn btn-primary m-5">Tables</a>
</nav>
</header>
<p>Click the Button to Toggle hide and Show</p>
<button>Toggle</button>
</body>
</html>
//table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Six Page Project - Table</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
text-align: center;
}
table {
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 15px;
}
tr:nth-child(even) {
background-color: #57557448;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-expand navbar-dark justify-content-md-center bg-dark">
<a href="index.html" target="_blank" class="btn btn-primary m-5">Home</a>
<a href="form.html" target="_blank" class="btn btn-primary m-5">Forms</a>
<a href="javapplet.html" target="_blank" class="btn btn-primary m-5">JavaApplet</a>
<a href="javascript.html" target="_blank" class="btn btn-primary m-5">JavaScript</a>
<a href="jQuery.html" target="_blank" class="btn btn-primary m-5">jQuery</a>
</nav>
</header>
<h2>HTML Table</h2>
<table>
<tr>
<th>Item Name</th>
<th>Manufacturer</th>
<th>Price</th>
</tr>
<tr>
<td>Processes</td>
<td>AMD</td>
<td>$150</td>
</tr>
<tr>
<td>HardDisk</td>
<td>Seagate</td>
<td>$50</td>
</tr>
<tr>
<td>Ram</td>
<td>Samsung</td>
<td>$60</td>
</tr>
<tr>
<td>KeyBoard</td>
<td>Microsft</td>
<td>$20</td>
</tr>
<tr>
<td>Graphics Card</td>
<td>GTX</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
Add Answer to:
Complete a SIX webpage using notepad or notepad++ about your
favorite hobby that contains the following:...
Create a website on a topic of your choosing. Site should include the following: Design: Site...
Create a website on a topic of your choosing. Site should include the following: Design: Site Map (Task 7) Page-layout for each page (Task 8) Homepage . . o Title o Navigation Links o Footer o Minimum of 1 graphic 4 additional pages that are linked to home page o o o Navigation Links (link back to homepage) Minimum of 1 graphic per page Footer (matching homepage) CSS should be used for formatting visual aspects of site. Use either external...
code a website in html about vacational about atleast 3 vacational spots. the requirements are as...
code a website in html about vacational about atleast 3 vacational spots. the requirements are as follows Home page and at least 5 content pages A single external CSS file controlling styles across the site (internal and embedded styles may also be used when appropriate) Consistent "look and feel" throughout the site (logo, color scheme, layout, navigation) Consistent navigation throughout the site Use at least three images in addition to the logo (images should have alternate text) Include at least...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...
Design an original, professional web site following the specifications listed below. This web sit...
Design an original, professional web site following the specifications listed below. This web site will be for a business you plan to set up for yourself or for someone else. The following is a detailed list of the requirements for your web site. READ them carefully. Instructions - Web Site Requirements for the web site: General: You will thoroughly test all your pages in more than one browser. All links MUST work. All graphics must show on the page. All...
Code for the movies page: <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />...
Code for the movies page:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
For milestone #1, we will start the CARIT site with three static HTML pages and a...
For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work. Function/content requirements: A home page named “index.html”, which include these contents at least: Description of the center. You may reference the example sites. Latest news: use list tags; make up some...
Create a website on a topic of your choosing. Site should include the following: Design: Site Map (Task 7) Page-layout for each page (Task 8) Homepage . . o Title o Navigation Links o Footer o Minimum of 1 graphic 4 additional pages that are linked to home page o o o Navigation Links (link back to homepage) Minimum of 1 graphic per page Footer (matching homepage) CSS should be used for formatting visual aspects of site. Use either external...
2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...
Code for the movies page:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="style.css"
/>
<title>Daniel's Movie Page</title>
</head>
<body>
<a href="hobbies.html">Hobbies</a>
<h1>Movies and Actors</h1>
<ol>
<li class="ol-list1">Gravity</li>
<li>Avenger</li>
<li>Marshal</li>
<li>Interstellar</li>
<li>Dark Knight</li>
<li>Superman</li>
</ol>
<ul>
<li class="ul-list1">Robet Downey jr.</li>
<li>Sharuk Khan</li>
<li>Ranbir Kapoor</li>
<li>Sidhhart Malhotra</li>
<li>Angela Joli</li>
<li>Leonardo DiCaprio/li>
</ul>
<h2>Favorite Movie</h2>
<p>
<b>Gravity:</b> The movie portrayed what happens to
an astronaut if he/she
is pushed away from spaceship.It was terrifying how much...
Most questions answered within 3 hours.
-
A point charge with charge q1 = 4.00 μC is held stationary at
the origin. A...
asked 1 minute from now -
describe conditions and outcomes of boiling
pasteurization and surfacing. which of these treatment can be
considered...
asked 49 seconds ago -
In a poll of 504 human resource professionals, 46.4% said that
body piercings and tattoos were...
asked 1 minute ago -
AdrenalineAdrenaline
Sports Company makes snowboards, downhill skis, cross-country
skis, skateboards, surfboards, and in-line skates. The company...
asked 3 minutes ago -
Compare the Forfaiting and Factoring forms of export
financing
asked 6 minutes ago -
Europe in the 19th century was not dominated by:
a. the scientific quest
b. economic collectivism...
asked 15 minutes ago -
"The economic theory suggests that consumers will not shop at or
spend their money with a...
asked 19 minutes ago -
In your opinion, which provides the most benefit to an
organization, a budget or the budgeting...
asked 30 minutes ago -
What features are centralized in your web application by master
pages? How are master pages implemented...
asked 26 minutes ago -
Write the expression for the molecular wavefunction of (i) a
s-pz sigma bond and (ii) a...
asked 34 minutes ago -
It costs Crane Company $28 of variable costs and $10.00 of
allocated fixed costs to produce...
asked 48 minutes ago -
Explain the following basis of electron configuration i) the
electron affinity of S is +200kJ mol-1
asked 58 minutes ago