ZuoTi.Pro
Question

I have to create a website (using html) with three different tabs that consists of: -...

I have to create a website (using html) with three different tabs that consists of:

- Home page

- Contact Us

- Calender

I was wondering how I go about doing so. I already have made the home page, contact us, and calender but I'm not sure how to put it onto one website and how to make tabs for contact us, calender, and the home page.

Also, my professor asked us to do this as well:

  • You will provide a footer on all pages
    • in Arial, small font containing the company name, a copyright symbol, and the words "Last Updated:" followed by the date (you type in the date in the html)
    • Below the above line add a second line with the words: Email. Then Add an email graphic (do a search with your favorite search engine) on all pages in the footer.

I was wondering how to go about doing that as well. Any help is greatly appreciated!

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Below is the tab menu:

index.html:

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>Home</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="logo">

<h1><a href="#">ABC</a></h1>

</div>

</div>

<!-- end #header -->

<div id="menu">

<ul>

<li class="current_page_item"><a href="index.html" onclick="openCity(event, 'Paris')">Home</a></li>

<li class="current_page_item1"><a href="contact.html" onclick="openCity(event, 'Tokiyo')">Contact Us</a></li>

<li class="current_page_item1"><a href="calander.html" onclick="openCity(event, 'London')">Calender</a></li>

</ul>

</div>

<!-- end #menu -->

<div id="page">

<div id="page-bgtop">

<div id="page-bgbtm">

<div id="content">

<div class="post">

<h2 class="title"><a href="#">Homepage content</a></h2>

<hr>

<div class="entry">

<p>Home</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

</div>

</div>

</div>

<div style="clear: both;">&nbsp;</div>

</div>

</div>

</div>

<!-- end #page -->

</div>

<div id="footer">

<p>&copy; 2019 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"

rel="nofollow">Your Name</a>.</p>

<div class="search-container">

<form action="/action_page.php">

<input type="text" placeholder="Search.." name="search">

<button type="submit">Submit</button>

</form>

</div>

</div>

<!-- end #footer -->

</body>

</html>

contact.html:

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>Contact</title>

<link href="style.css" rel="stylesheet" />

<script>

function openCity(evt, cityName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " active";

}

</script>

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="logo">

<h1><a href="#">ABC Company</a></h1>

</div>

</div>

<!-- end #header -->

<div id="menu">

<ul>

<li class="current_page_item"><a href="index.html" onclick="openCity(event, 'Paris')">Home</a></li>

<li class="current_page_item1"><a href="contact.html" onclick="openCity(event, 'Tokiyo')">Contact Us</a></li>

<li class="current_page_item1"><a href="calander.html" onclick="openCity(event, 'London')">Calender</a></li>

</ul>

</div>

<!-- end #menu -->

<div id="page">

<div id="page-bgtop">

<div id="page-bgbtm">

<div id="content">

<div class="post">

<h2 class="title"><a href="#">Contact content</a></h2>

<hr>

<div class="entry">

<p>contact</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

</div>

</div>

</div>

<div style="clear: both;">&nbsp;</div>

</div>

</div>

</div>

<!-- end #page -->

</div>

<div id="footer">

<p>&copy; 2019 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"

rel="nofollow">Your Name</a>.</p>

</div>

<!-- end #footer -->

</body>

</html>

calander.html:

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>Calander</title>

<link href="style.css" rel="stylesheet" />

<script>

function openCity(evt, cityName) {

var i, tabcontent, tablinks;

tabcontent = document.getElementsByClassName("tabcontent");

for (i = 0; i < tabcontent.length; i++) {

tabcontent[i].style.display = "none";

}

tablinks = document.getElementsByClassName("tablinks");

for (i = 0; i < tablinks.length; i++) {

tablinks[i].className = tablinks[i].className.replace(" active", "");

}

document.getElementById(cityName).style.display = "block";

evt.currentTarget.className += " active";

}

</script>

</head>

<body>

<div id="wrapper">

<div id="header">

<div id="logo">

<h1><a href="#">ABC Company</a></h1>

</div>

</div>

<!-- end #header -->

<div id="menu">

<ul>

<li class="current_page_item"><a href="index.html" onclick="openCity(event, 'Paris')">Home</a></li>

<li class="current_page_item1"><a href="contact.html" onclick="openCity(event, 'Tokiyo')">Contact Us</a></li>

<li class="current_page_item1"><a href="calander.html" onclick="openCity(event, 'London')">Calender</a></li>

</ul>

</div>

<!-- end #menu -->

<div id="page">

<div id="page-bgtop">

<div id="page-bgbtm">

<div id="content">

<div class="post">

<h2 class="title"><a href="#">Calander content</a></h2>

<hr>

<div class="entry">

<p>calander</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

pariatur. </p>

</div>

</div>

</div>

<div style="clear: both;">&nbsp;</div>

</div>

</div>

</div>

<!-- end #page -->

</div>

<div id="footer">

<p>&copy; 2019 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"

rel="nofollow">Your Name</a>.</p>

</div>

<!-- end #footer -->

</body>

</html>

styles.css:

body {

    margin: 0;

    padding: 0;

    background: #FFFFFF url(images/img01.jpg) repeat-x left top;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #787878;

}

h1, h2, h3 {

    margin: 0;

    padding: 0;

    font-weight: normal;

    color: #32639A;

}

h1 {

    font-size: 2em;

}

h2 {

    font-size: 2.4em;

}

h3 {

    font-size: 1.6em;

}

p, ul, ol {

    margin-top: 0;

    line-height: 180%;

}

a {

    text-decoration: none;

    color: #4486C7;

}

#wrapper {

    width: 960px;

    margin: 0 auto;

    padding: 0;

}

/* Header */

#header {

    width: 940px;

    height: 148px;

    margin: 0 auto;

    background: url(images/img04.jpg) no-repeat left 20px;

}

/* Logo */

#logo {

    float: left;

    margin: 0;

    padding-top: 30px;

    color: #000000;

}

#logo h1{

    margin: 0;

    padding: 0;

}

#logo h1 {

    float: left;

    padding-left: 80px;

    letter-spacing: -1px;

    text-transform: uppercase;

    font-size: 3.8em;

}

#logo a {

    border: none;

    background: none;

    text-decoration: none;

    color: #FFFFFF;

}

/* Menu */

#menu {

    width: 940px;

    height: 49px;

    margin: 0 auto;

    padding: 0;

}

#menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

    line-height: normal;

}

#menu li {

    float: left;

}

#menu a {

    display: block;

    width: 155px;

    height: 33px;

    padding-top: 16px;

    text-decoration: none;

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: bold;

    color: #FFFFFF;

    border: none;

}

#menu a:hover, #menu .current_page_item a {

    background: #659CEF url(images/img03.jpg) repeat-x left bottom;

    text-decoration: none;

}

#menu .current_page_item a{

    background: #FBFBFC url(images/img02.jpg) repeat-x left bottom;

    padding-left: 0;

    color: #30476A;

}

/* Page */

#page {

    width: 940px;

    margin: 0 auto;

    padding: 0;

}

#page-bgtop {

    padding: 20px px;

}

/* Content */

#content {

    float: left;

    padding: 30px 0px 0px 0px;

}

.post {

    margin-bottom: 15px;

}

.post .title {

    margin-bottom: 10px;

    padding: 12px 0 0 0px;

    letter-spacing: -.5px;

    color: #000000;

}

.post .title a {

    color: #32639A;

    border: none;

}

.post .meta {

    height: 30px;

    background: #D8E7FE;

    margin: 0px;

    padding: 0px 0px 0px 0px;

    text-align: left;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: bold;

}

.post .meta .date {

    float: left;

    height: 24px;

    padding: 3px 15px;

    color: #4A81DE;

}

.post .meta .posted {

    float: right;

    height: 24px;

    padding: 3px 15px;

    background: #A8CF64;

    color: #FFFFFF;

}

.post .meta a {

    color: #FFFFFF;

}

.post .entry {

    padding: 0px 0px 20px 0px;

    padding-bottom: 20px;

    text-align: justify;

}

.links {

    padding-top: 20px;

    font-size: 12px;

    font-weight: bold;

}

/* Calendar */

#calendar_wrap {

    padding: 20px;

}

#calendar table {

    width: 100%;

}

#calendar tbody td {

    text-align: center;

}

#calendar #next {

    text-align: right;

}

/* Footer */

#footer {

    height: 50px;

    margin: 0 auto;

    padding: 0px 0 15px 0;

    background: #D8E7FE;

    border-top: 1px solid #D3DEF0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 8px;

}

#footer p {

    margin-left: 13%;

    padding-top: 20px;

    line-height: normal;

    font-size: 10px;

    text-transform: uppercase;

    float: left;

    color: #A0A0A0;

}

#footer a {

    color: #5389E0;

}

.search-container {

    float: left;

}

input[type=text] {

    margin-top: 8px;

    font-size: 17px;

    padding: 6px;

}

.search-container button {

    float: right;

    padding: 6px;

    margin-top: 8px;

    margin-right: 16px;

    background: #ddd;

    font-size: 17px;

    cursor: pointer;

}

output:

img01.jpg

img02.jpg

img03.jpg

img03.jpg

0 0
Add a comment
Know the answer?
Add Answer to:
I have to create a website (using html) with three different tabs that consists of: -...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • How do I make these sheets into three different tabs for one website? This is all...

    How do I make these sheets into three different tabs for one website? This is all using HTML. - Chade's Bicycle Company <!DOCTYPE html> <html> <head> <img src="Chade'sLogo.png"> </head> <body bgcolor= "white"> <center> Welcome to Chade's Bicycle Company!</center> <center> We aim towards making our customers happy. </center> <br> <center> Chade's Bicycle Company </center> <center>2900 Bicycle Ave.</center> <center>Seattle, Washington</center> <center>98101</center> <br> <center><img src="HappyCustomer.png" alt="Satisfied customers"></center> <br> <p align="right">Our mission statement:</p> <p align="right">Bicycles have always been a </p> <p align="right">positive part of...

  • Could you create a website based on html and css? Details in the below: Note: You...

    Could you create a website based on html and css? Details in the below: Note: You can put link that I can download that folder Based on Project 2-1, do the necessary changes to have a webpage structure of a header, main, and footer sections. Then: •Set the width of the page to 700px •Use the font family starting with Verdana •Move one of the images from your Project 2-1 to the header. •Set the width of the header image...

  • 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...

  • PHP, HTML, CSS I have to make a website for a health club. Or a spa. Or some other kind of business where you have a mem...

    PHP, HTML, CSS I have to make a website for a health club. Or a spa. Or some other kind of business where you have a membership and keep track of transactions for those customers. First I need to create a page where the customer is signed up for a membership. The fields should include: First name Last name Street Address City State Zip Code Email Phone Number I should create a table that has all of that data as...

  • 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...

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

  • i need help with this web page project and i need the code too for this web page Include two or three HTML features that...

    i need help with this web page project and i need the code too for this web page Include two or three HTML features that make the website more robust, dynamic, and professional. Which features you opt to add can be discussed in the discussions. Some ideas might be to have all three types of links (internal to the page, links to your other pages, or links to other websites). Complete a Contact Us page which includes a form. Try...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • You've been hired to create a website for Eating Well in Season, a business in Glover,...

    You've been hired to create a website for Eating Well in Season, a business in Glover, Vermont, that delivers produce from local farms to its customers. Another team member has created a style sheet for the site but has been unable to resolve some errors in the code. You continue your work on the site by linking to and debugging the style sheet, incorporating a color scheme, and aligning the page content. index.html <!DOCTYPE html> <html lang="en"> <head> <title>Eating Well...

  • 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...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT