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 our everyday
lives',</p>
<p align="right">so we want to share our love
of</p>
<p align="right">bicycles to all of our
wonderful</p>
<p align="right">customers! We offer bike
rentals,</p>
<p align="right">repairs and custom bicycles
that</p>
<p align="right">can fit everyone and anyone's
needs.</p>
<br>
<br>
<center>Come back soon! We will have bike listings and prices
shortly. </center>
</body>
<html>
</div>
<div id="footer">
<p>© 2019 Chadesbicyclecompany.com. All rights
reserved. Last updated February 16,
2019.</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
- Contact Us
<!DOCTYPE html>
<html>
<head>
<img src="Chade'sLogo.png">
<center>Contact us</center>
</head>
<body bgcolor= "white">
<center> Chade's Bicycle Company </center>
<center>2900 Bicycle Ave.</center>
<center>Seattle, Washington</center>
<center>98101</center><center>
<br>
<center><img src="chade'smap.jpg" alt="Map of our
business"></center>
<br>
<p align="left">Hours of service:</p>
<p align="left">Monday: 8 am - 6 pm</p>
<p align="left">Tuesday: 8 am - 6 pm</p>
<p align="left">Wednesday: 8 am - 6 pm</p>
<p align="left">Thursday: 8 am - 6 pm</p>
<p align="left">Friday: 8 am - 7 pm</p>
<p align="left">Saturday: 10 am - 8 pm</p>
<p align="left">Sunday: 10 am - 5 pm</p>
<br>
<p align="left">Customer Service:</p>
<br>
<p align="left">Call us: 678-999-8212</p>
<p align="left">E-mail us:
[email protected]</p>
</body>
<html>
</div>
<div id="footer">
<p>© 2019 Chadesbicyclecompany.com. All rights
reserved. Last updated February 16,
2019.</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
- Calender
<!DOCTYPE html>
<html>
<head>
<title>calender</title>
<style>
body{
background:white;
}
.container{
max-width: 800px;
margin:auto;
Font-family:sans-serif;
}
.month{
text-align: center;
Background:light blue;
font-size:2.5em;
letter-spacing:1px;
color:black;
padding:25px;
border:1px navy;
}
table, th, td {
margin:0 auto;
width:60%;
table-layout:fixed;
text-align:center;
font-size:17px;
border-collapse:collapse;
border:1px solid skyblue;
}
tr, th, td{
padding:15px;
}
th{
background:white;
color:black;
}
td{
background:light blue;
}
td.imp-date{
color:blue;
font-weight: bold;
background:red;
}
</style>
</head>
<body>
<div class ="container">
<div class ="month">
<strong>
January</strong>
<br>
<strong>
2019</strong>
</div>
<table>
<tr>
<th> Sun</th>
<th> Mon</th>
<th> Tue</th>
<th> Wed</th>
<th> Thu</th>
<th> Fri</th>
<th> Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="imp-date">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td class="imp-date">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="imp-date">26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
Homework Answers
Solution of your requirement is given below -
Note :- I have not modified anything in the content which is provided by you. But I have corrections which I see in your content. I don't have the image you used so it displays default image.
////--------------Your web page code with script and css--------------------////
<!DOCTYPE html>
<html>
<head>
<img src="Chade'sLogo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Body style */
body {
font-family: Arial;
background:white;
}
/* For tab style */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* For tab button style */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Below all style is for Calender tab */
.container {
max-width: 800px;
margin:auto;
Font-family:sans-serif;
}
.month {
text-align: center;
Background:light blue;
font-size:2.5em;
letter-spacing:1px;
color:black;
padding:25px;
border:1px navy;
}
table, th, td {
margin:0 auto;
width:60%;
table-layout:fixed;
text-align:center;
font-size:17px;
border-collapse:collapse;
border:1px solid skyblue;
}
tr, th, td {
padding:15px;
}
th {
background:white;
color:black;
}
td {
background:light blue;
}
td.imp-date {
color:blue;
font-weight: bold;
background:red;
}
</style>
</head>
<body>
<!-- For tabs we need to put all thing in div tag.
Then display only that div which is selected by user through tab button click using script.
In tab button's onclick event I called a function openPage(event, <pageName>)
-->
<div class="tab">
<button class="tablinks" onclick="openPage(event, 'Chade')" id="defaultOpen">Chade's Bicycle Company</button>
<button class="tablinks" onclick="openPage(event, 'Contact')">Contact Us</button>
<button class="tablinks" onclick="openPage(event, 'Calender')">Calender</button>
</div>
<div id="Chade" class="tabcontent">
<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" ></center>
<br>
<p align="right">Our mission statement:</p>
<p align="right">Bicycles have always been a </p>
<p align="right">positive part of our everyday lives',</p>
<p align="right">so we want to share our love of</p>
<p align="right">bicycles to all of our wonderful</p>
<p align="right">customers! We offer bike rentals,</p>
<p align="right">repairs and custom bicycles that</p>
<p align="right">can fit everyone and anyone's needs.</p>
<br>
<br>
<center>Come back soon! We will have bike listings and prices shortly. </center>
</div>
<div id="Contact" class="tabcontent">
<center> Chade's Bicycle Company </center>
<center>2900 Bicycle Ave.</center>
<center>Seattle, Washington</center>
<center>98101</center><center>
<br>
<center><img src="chade'smap.jpg" ></center>
<br>
<p align="left">Hours of service:</p>
<p align="left">Monday: 8 am - 6 pm</p>
<p align="left">Tuesday: 8 am - 6 pm</p>
<p align="left">Wednesday: 8 am - 6 pm</p>
<p align="left">Thursday: 8 am - 6 pm</p>
<p align="left">Friday: 8 am - 7 pm</p>
<p align="left">Saturday: 10 am - 8 pm</p>
<p align="left">Sunday: 10 am - 5 pm</p>
<br>
<p align="left">Customer Service:</p>
<br>
<p align="left">Call us: 678-999-8212</p>
<p align="left">E-mail us: [email protected]</p>
</div>
<div id="Calender" class="tabcontent">
<div class ="container">
<div class ="month">
<strong> January</strong>
<br>
<strong> 2019</strong>
</div>
<table>
<tr>
<th> Sun</th>
<th> Mon</th>
<th> Tue</th>
<th> Wed</th>
<th> Thu</th>
<th> Fri</th>
<th> Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="imp-date">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td class="imp-date">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="imp-date">26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
<p>© 2019 Chadesbicyclecompany.com. All rights reserved. Last updated February 16, 2019.</a>.</p>
</div>
<!-- end #footer -->
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function openPage(evt, pageName) {
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(pageName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Output -
Note :- I have commented wherever it is required to make you understand the html code, still you find any difficulty in understanding anything in the html code then let me know. If you are happy with my response then please give positive feedback. Thanks
Solution of your requirement is given below -
Note :- I have not modified anything in the content which is provided by you. But I have corrections which I see in your content. I don't have the image you used so it displays default image.
////--------------Your web page code with script and css--------------------////
<!DOCTYPE html>
<html>
<head>
<img src="Chade'sLogo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Body style */
body {
font-family: Arial;
background:white;
}
/* For tab style */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* For tab button style */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
/* Below all style is for Calender tab */
.container {
max-width: 800px;
margin:auto;
Font-family:sans-serif;
}
.month {
text-align: center;
Background:light blue;
font-size:2.5em;
letter-spacing:1px;
color:black;
padding:25px;
border:1px navy;
}
table, th, td {
margin:0 auto;
width:60%;
table-layout:fixed;
text-align:center;
font-size:17px;
border-collapse:collapse;
border:1px solid skyblue;
}
tr, th, td {
padding:15px;
}
th {
background:white;
color:black;
}
td {
background:light blue;
}
td.imp-date {
color:blue;
font-weight: bold;
background:red;
}
</style>
</head>
<body>
<!-- For tabs we need to put all thing in div tag.
Then display only that div which is selected by user through tab button click using script.
In tab button's onclick event I called a function openPage(event, <pageName>)
-->
<div class="tab">
<button class="tablinks" onclick="openPage(event, 'Chade')" id="defaultOpen">Chade's Bicycle Company</button>
<button class="tablinks" onclick="openPage(event, 'Contact')">Contact Us</button>
<button class="tablinks" onclick="openPage(event, 'Calender')">Calender</button>
</div>
<div id="Chade" class="tabcontent">
<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" ></center>
<br>
<p align="right">Our mission statement:</p>
<p align="right">Bicycles have always been a </p>
<p align="right">positive part of our everyday lives',</p>
<p align="right">so we want to share our love of</p>
<p align="right">bicycles to all of our wonderful</p>
<p align="right">customers! We offer bike rentals,</p>
<p align="right">repairs and custom bicycles that</p>
<p align="right">can fit everyone and anyone's needs.</p>
<br>
<br>
<center>Come back soon! We will have bike listings and prices shortly. </center>
</div>
<div id="Contact" class="tabcontent">
<center> Chade's Bicycle Company </center>
<center>2900 Bicycle Ave.</center>
<center>Seattle, Washington</center>
<center>98101</center><center>
<br>
<center><img src="chade'smap.jpg" ></center>
<br>
<p align="left">Hours of service:</p>
<p align="left">Monday: 8 am - 6 pm</p>
<p align="left">Tuesday: 8 am - 6 pm</p>
<p align="left">Wednesday: 8 am - 6 pm</p>
<p align="left">Thursday: 8 am - 6 pm</p>
<p align="left">Friday: 8 am - 7 pm</p>
<p align="left">Saturday: 10 am - 8 pm</p>
<p align="left">Sunday: 10 am - 5 pm</p>
<br>
<p align="left">Customer Service:</p>
<br>
<p align="left">Call us: 678-999-8212</p>
<p align="left">E-mail us: [email protected]</p>
</div>
<div id="Calender" class="tabcontent">
<div class ="container">
<div class ="month">
<strong> January</strong>
<br>
<strong> 2019</strong>
</div>
<table>
<tr>
<th> Sun</th>
<th> Mon</th>
<th> Tue</th>
<th> Wed</th>
<th> Thu</th>
<th> Fri</th>
<th> Sat</th>
</tr>
<tr>
<td></td>
<td></td>
<td class="imp-date">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td class="imp-date">21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td class="imp-date">26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="footer">
<p>© 2019 Chadesbicyclecompany.com. All rights reserved. Last updated February 16, 2019.</a>.</p>
</div>
<!-- end #footer -->
<script>
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function openPage(evt, pageName) {
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(pageName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
Output -
Note :- I have commented wherever it is required to make you understand the html code, still you find any difficulty in understanding anything in the html code then let me know. If you are happy with my response then please give positive feedback. Thanks
Add Answer to:
How do I make these sheets into three different tabs for one
website? This is all...
<!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...
<!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...
Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically,...
Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically, there is code for a multiplication table and i need to change it to support the following. Make the page background (not table background) to change among three colors of your choice. Use the drop-down list to specify the size of the multiplication table to be 8, 10, 12, and 14 Put the multipliers in the first column and the multiplicand on the first...
How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...
How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...
You will use your text editor to create a table and apply table styles. First, you...
You will use your text editor to create a table and apply table styles. First, you insert a table element. Next, you add a table caption, table rows, table headers, and table data. Then, you create style rules to format the table. Work with the apply08.html file and the applystyles08.css file. You will also use professional web development practices to indent, space, comment, and validate your code. 3. In the apply08.html file, add a table element within the main element....
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...
Question are based on THML code below. Read the code and then answer questions after it...
Question are based on THML code below. Read the code and then answer questions after it <html> <head><title>First Web Page</title></head> <body bgcolor="#310AFC" > <table border="1" width="700" height="600" bgcolor="#1A88BC" align="right"> <tr> <td ><font size="4" color="blue">This is Cell 1</font> </td> <td bgcolor="#FCBB8C"><h2 align="left">This is a heading</h2></td> <td><font size="4" color="red">There is a list below</font> <ul><li>Item 1</li><li>item 2</li></ul> </td> <td><img src="2.jpg" width="100" height="100" border="1" /></td> </tr> <tr> <td>This is <a href="http://www.yahoo.ca">a link to Yahoo</a></td> <td><table border = "1" width="190" height="110" bgcolor="#FD8B08"> <tr><td>inside 1</td><td>inside 2</td></tr>...
i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...
i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...
Hey I am having an issue with my HTML5 document. Everything is working fine except that...
Hey I am having an issue with my HTML5 document. Everything is working fine except that I am not sure how to make my <h1> Objective </h1> to align towards the left. I have tried for instance <p align = "Left"> <h1> <strong>Objective </strong> </h1> </p> Any help would be great. Thanks <!DOCTYPE html> <html> <!-- Do I need to use <head> right here? I tried it without head or urf-8 and it worked--> <!-- I'm still a bit confused...
Does my css style sheet look okay? /* Author: Your Name --> Natasha Strange /*...
Does my css style sheet look okay?
/* Author: Your Name -->
Natasha Strange
/* Date: Today's
Date --> September 22, 2019
/* Description: Lab Number --> Lab04
/*doctype css*/
@import url(fonts/chuckfive.css);
@import url(fonts/merriweather.css);
body { background-color: rgb(199,201,191);
}
div { border: 1px solid black;
padding: 100px 100px 100px
100px;
background-color: gray;
}
nav { text-align: center;
color: rgb( 7,20,138);
}
header,
footer { background-color: rgb(199,201,199);
color:...
Overview The purpose of this assignment is to explore the manner in which CSS styles can...
Overview The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file. Assignment You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are...
Most questions answered within 3 hours.
-
The condensate from a steam distillation contains 12.0 g of
compound A and 18.0 g of...
asked 2 hours ago -
A major economic benefit of fixed exchange rates compared to
floating rates is that
a. the...
asked 2 hours ago -
1) For this reaction,
SiCl4 (l)+ 2H2O(g) <->
SiO2 (s) + 4HCl (g) DeltaH = -127 KJ...
asked 2 hours ago -
Which of the following does NOT add to US GDP? A. Saudi Arabia
buys fighter jets...
asked 3 hours ago -
2. Describe market equilibrium in terms of the following
characteristics
d.
How supply and demand interactions...
asked 3 hours ago -
1a. Create a class named Computer
- Separate declaration from implementation (i.e. Header and CPP
files)...
asked 3 hours ago -
A medical researcher
believes that a drug changes the body's temperature. Seven test
subjects are randomly...
asked 4 hours ago -
A call option on Project Cash Flow Consulting Inc.'s stock (PCF)
has a market price of...
asked 4 hours ago -
A study on the latest fad diet claimed that the amounts of
weight lost by all...
asked 4 hours ago -
give examples of how gene expression is inherited to the next
generation?
asked 4 hours ago -
If a project has _________ IRR(s), we should __________ . Assume
this project is competing with...
asked 4 hours ago -
In the figure, a sound of wavelength 0.700 m is emitted
isotropically by point source S....
asked 4 hours ago