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 finished, place both files or the underlying directory structure you have created into a single, zipped folder and attach it to this
This is my Weekly Assignment #02 in Notepad++:
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>HTML Table Markup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--embedded style sheet -->
<style>
.monthcalender{
float:left;
padding: 20px;
}
.calender{
float: left;
padding: 20px;
}
.calender table,th,tr,td{
border: 1px solid red;
border-collapse: collapse;
}
.calender th{
background-color: orange;
padding: 10px;
color: green;
font-size: 20px;
font-weight: bold;
}
.calender td{
background-color: yellow;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div class="monthcalender">
<!--multiplication table -->
<h1>Multiplication table</h1>
<table border="1">
<tr>
<th>NO</th>
<th>Multiply By</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>125</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>36</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>49</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>81</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>121</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>144</td>
</tr>
</table>
</div>
<div class="calender">
<!-- Month calender -->
<h1>Month Calender</h1>
<table>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THR</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
Please find the content of each file below.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>HTML Table Markup</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--embedded style sheet -->
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<div class="monthcalender">
<!--multiplication table -->
<h1>Multiplication table</h1>
<table border="1">
<tr>
<th>NO</th>
<th>Multiply By</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>125</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>36</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>49</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>81</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>121</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>144</td>
</tr>
</table>
</div>
<div class="calender">
<!-- Month calender -->
<h1>Month Calender</h1>
<table>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THR</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
mystyle.css
.monthcalender{
float:left;
padding: 20px;
}
.calender{
float: left;
padding: 20px;
}
.calender table,th,tr,td{
border: 1px solid red;
border-collapse: collapse;
}
.calender th{
background-color: orange;
padding: 10px;
color: green;
font-size: 20px;
font-weight: bold;
}
.calender td{
background-color: yellow;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: blue;
}
Overview The purpose of this assignment is to explore the manner in which CSS styles can...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
<!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 {...
HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px;...
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....
Assignment Recall the W3 Schools website JavaScript example on the following topics from last assignment for this problem (http://www.w3schools.com/js/default.asp): · JS Home · JS Introduction · JS Where To · JS Output · JS Syntax · JS Statements · JS Comments · JS Variables · JS Operators · JS Arithmetic · JS Assignment Additionally, review the W3 Schools website JavaScript examples on the following topics: · JS Data Types · JS Functions · JS Where To · JS Objects ·...
HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...
Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...
Hi, can someone explain to me why my image is not in the middle but all the way to the top of the page? <!DOCTYPE html> <html lang=”en”> <head> <title> Pacific Trails Resort :: Yurts </title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="pacific.css"> <div id="yurthero"></div> </head> <body> <div id="wrapper"></div> <header> <h1 id="hh"> Pacific Trails Resort </h1> </header> <div id=”navbar”></div> <b><a href=”index.html”> Home </a> <a href=”yurt.html”> Yurt </a> <a href=”activities.html”> Activities</a> <a href=”reservation.html”> Reservation </a> </ul> </b> <div> <img src="images/yurts.jpg" alt="Yurt" height="250"...
Can you please assist me with this HTML? Below is what I have but it isn't working. Filename: jpf_sudoku.css /* Table Styles */ table.spuzzle { border-collapse: collapse; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; width: 90%; } table.spuzzle td { border: 5px outset gray; width: 33.3%; } table.spuzzle th { font color: gray; padding-right: 10px; padding-bottom: 10px; } /* Inner Table Styles */ table.subTable { border-collapse: collapse; width: 100%; } table.subTable td { box-shadow: 0px 0px 15px inset; border:...
The code below modifies the CSS style on button click. Give the output of the code and modify the code such that background color of title should also be modified . <!DOCTYPE html> <html lang="en"> <head> <title>JavaScript and HTML</title> <meta charset="utf-8"/> <style> h1 { color:blue; background-color:lightGreen; border:12px solid green; padding: 5px; border-radius: 15px; text-align: center; } p, h1 { } } </style> <script> function changeTitleCSSStyle() { var title = document.querySelector("#mainTitle"); title.style.color = 'black'; title.style.border = "5px dashed red"; } </script>...