<!DOCTYPE html> <html Lang=\"en\"> <head> <title>October</title> <meta charset=\
ID: 3799071 • Letter: #
Question
<!DOCTYPE html>
<html Lang="en">
<head>
<title>October</title>
<meta charset="utf-8">
<style>
body {background-color = blue; color=black;
font-family: Arial; Verdana; sans-serif;
background-image: url(city.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;}
.float {float: left;
margin-right: 10px;
border: 1px solid black;}
.clearleft {clear: left;}
div {background-color: #F3F1BF;
overflow: auto;
width: 100%}
</style>
</head>
<body>
<h1>Welcome to October!</h1>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="page2.html">Page 2</a> </li>
<li> <a href="page3.html">Page 3</a> </li>
<li> <a href="page4.html">Page 4</a> </li>
<li> <a href="http://google.com">Google</a> </li>
</ul>
</nav>
<ol>
<li> Vertical Navigation using an ordered list</li>
<li> Background image for the header</li>
<li> Boxes around images and text</li>
<li> Float and clear command</li>
<li>Float and text next to it</li>
<li>2 columns with Float</li>
<li>embedd youtube videos</li>
</ol>
<embed type="application/x-shockwave-flash"
src="lighthouse.swf"
width="640"
height="100"
quality="high"
title="Lighthouse">
</body>
<h1> I love Halloween!</h1>
<div>
<img class="float" src="jack.jpg" alt="Jack-o-lantern" height="100"
width="100">
<p>The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows.</p>
<br class="clearleft">
</div>
</html>
You have been given this code from a website and you can tell that this website needs to be structured and improved. You have been asked to do the following tasks:
*Make the website 2 columns with vertical navigation in one of the columns
*Put a border around the main heading and center the title
*Create a box in the second column in which you add the left float picture and text. Make sure you have a border
*Put a footer on all pages
*Add a css page that is used in home page, page 1 and page2
*Add a form in page to for someone to add their name, phone and email address. Make sure to validate email and phone for format
*Page 1 should have a video and pictures (thumb nails when clicked enlarge the photo)
*Make sure navigation between all 3 pages works.
*upload it to your website
*Add a favicon
Explanation / Answer
hi,
I am confused with some questions:
Where to add the form and on which page?
Please specify what footer i need to add?
<!DOCTYPE html>
<html Lang="en">
<head>
<title>October</title>
<meta charset="utf-8">
<style>
body {background-color = blue; color=black;
font-family: Arial; Verdana; sans-serif;
background-image: url(city.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;}
.float {float: left;
border: 1px solid black;}
.clearleft {clear: left;}
#content {
float:right;
width:1000px;
}
#navbar {
float:left;
width:250px;
}
#pic
{
border: 2px solid green;
}
html, body {
margin:0;
padding:0;
background-color: #F3F1BF;
overflow: auto;
}
footer
{
position: relative;
margin-top: -180px; /* negative value of footer height */
height: 180px;
clear: both;
text-align:center;
}
</style>
</head>
<body>
<h1 align="center">Welcome to October!</h1>
<div id="navbar">
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="page2.html">Page 2</a> </li>
<li> <a href="page3.html">Page 3</a> </li>
<li> <a href="page4.html">Page 4</a> </li>
<li> <a href="http://google.com">Google</a> </li>
</ul>
</nav>
</div>
<div id="content">
<ol>
<li> Vertical Navigation using an ordered list</li>
<li> Background image for the header</li>
<li> Boxes around images and text</li>
<li> Float and clear command</li>
<li>Float and text next to it</li>
<li>2 columns with Float</li>
<li>embedd youtube videos</li>
</ol>
<video controls poster="/images/w3html5.gif">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<h1> I love Halloween!</h1>
<div id= "pic">
<div>
<img class="float" src="jack.jpg" alt="Jack-o-lantern" height="100" width="100">
</div>
<p>The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows. The pumpkin when carved into a scary face is called a Jack-o-lanter
and a candle is lit inside the pumpkin so the face glows.</p>
<br class="clearleft">
</div>
<link rel="icon"
type="image/png"
href="/somewhere/myicon.png" />
</div>
<footer align="center">
<p>This is my footer</p>
</footer>
</body>
</html>
For favicon i have used some image. Please change accordingly.
Please naswer all the questions so that i can modify the code accordingly.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.