codecademydev/index.html Secret

## index.html
<!DOCTYPE HTML>
<head>
  <link href="styles.css" type="text/css" rel="stylesheet">
  <title>This is a Challenge Project!</title>
</head>
<header>
  <nav>
    <a href="">Home</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </nav>
</header>
<br/>
<br/>
<main>
  <h1>Tables and Attributes</h1>
  <section id="tables">
    <table>
      <thead>
          <th height="70"> Tag</th>
          <th height="70"> Name</th>
          <th height="70"> Description</th>
      </thead>
      <tbody>
        <tr>
          <td class="code">&lt;thead&gt;</td>
          <td>Table Head</td>
          <td>This is the placeholder for column titles</td>
        </tr>
        <tr>
          <td class="code">&lt;th&gt;</td>
          <td>Table Head</td>
          <td>How titles are seperated within&lt;thead&gt;</td>
        </tr>
        <tr>
          <td class="code">&lt;tbody&gt;</td>
          <td>Table Body</td>
          <td>The actual Data of the table</td>
        </tr>
        <tr>
          <td class="code">&lt;tr&gt;</td>
          <td>Table Row</td>
          <td>This seperates the data in rows</td>
        </tr>
        <tr>
          <td class="code">&lt;td&gt;</td>
          <td>Table Data</td>
          <td>This designates within the rows what information goes into which column</td>
        </tr>
      </tbody>
    </table>
    <p>This <span><strong>information</strong></span> is in order in terms of application in an <strong>HTML</strong> Setting</p>
  </section>
    <br/>
  <section id="elemattributes">
    <table>
      <thead>
        <th height=70>Attribute</th>
        <th height=70>Name</th>
        <th height=70>Description</th>
      </thead>
      <tbody>
        <tr>
          <td class="attribute">colspan</td>
          <td>Column Span</td>
          <td>The Width of Columns the data will span in a table</td>
        </tr>
        <tr>
          <td class="attribute">rowspan</td>
          <td>Row Span</td>
          <td>The Heigh of rows a data cell will span in a table.</td>
        </tr>
        <tr>
          <td class="attribute">class</td>
          <td>Class or family</td>
          <td>Specifies which class a dataset belongs to. considered a global attribute can be used with any element</td>
        </tr>
        <tr>
          <td class="attribute">id</td>
          <td>Identifier</td>
          <td>Places an identifier on an element to be easily located when referencing in CSS or another portion of the HTML document</td>
        </tr>
        <tr>
          <td class="attribute">controls</td>
          <td>Controller</td>
          <td>Displays controls for starting or stopping an audio or video files</td>
        </tr>
        <tr>
          <td class="attribute">type</td>
          <td>Input type</td>
          <td>Used to determine methods of input for user-gathered data, "radio," "text,""checkbox."</td>
        </tr>
        <tr>
          <td class="attribute">method</td>
          <td>Method</td>
          <td>Used to determine the method used in form posting onto the website, either 'GET,' or 'POST'</td>
        </tr>
        <tr>
          <td class="attribute">min</td>
          <td>Minimum</td>
          <td>Specifies the required minimum character count for user-input data for a specific form field or textarea</td>
        </tr>
        <tr>
          <td class="attribute">max</td>
          <td>Maximum</td>
          <td>used to determine the maximum number of characters that can be input into user-input data for a specific form field or text area</td>
        </tr>
        <tr>
          <td class="attribute">href</td>
          <td>Hyperlink Reference</td>
          <td>Determines the URL that is being linked via; link, base, area, a</td>
        </tr>
        <tr>
          <td class="attribute">for</td>
          <td>For</td>
          <td>Determines which form element a label is bound to</td>
        </tr>
        <tr>
          <td class="attribute">src</td>
          <td>Source</td>
          <td>Source is used for external-data input into a main body of work. (i.e. images, videos, audios, and website urls)</td>
        </tr>
      </tbody>
    </table>
    <br/>
    <p>These are just a handful of <strong>attributes</strong> I can recall when using HTML elements. The list will be expanded in due time.</p>
  </section>
  <br/>
  <section id="html&CSS">
    <article>
      <h2>Elements of HTML</h2>
      <p>There are certain things I will be listing in an unordered list! Most of these things thus far contain basic <strong>elements</strong> that I have acquired thus far in my studies of HTML. Later on this page I will be discussing things like CSS selectors and specificities as they relate to color, image, borders, padding, etc..</p>
      <br/>
      <p>Common HTML Elements Include:</p>
      <ul id="elements1">
        <li><span>&lt;html&gt;</span></li>
        <li><span>&lt;header&gt;</span></li>
        <li><span>&lt;head&gt;</span></li>
        <li><span>&lt;title&gt;</span></li>
        <li><span>&lt;nav&gt;</span></li>
        <li><span>&lt;div&gt;</span></li>
        <li><span>&lt;main&gt;</span></li>
        <li><span>&lt;section&gt;</span></li>
        <li><span>&lt;form&gt;</span></li>
        <li><span>&lt;article&gt;</span></li>
        <li><span>&lt;a&gt;</span></li>
        <li><span>&lt;textarea&gt;</span></li>
        <li><span>&lt;input&gt;</span></li>
      </ul>
      <ul id="elements2">
        <li><span>&lt;br&gt;</span></li>
        <li><span>&lt;table&gt;</span></li>
        <li><span>&lt;p&gt;</span></li>
        <li><span>&lt;ul&gt;</span></li>
        <li><span>&lt;ol&gt;</span></li>
        <li><span>&lt;li&gt;</span></li>
        <li><span>&lt;footer&gt;</span></li>
        <li><span>&lt;video&gt;</span></li>
        <li><span>&lt;audio&gt;</span></li>
        <li><span>&lt;img&gt;</span></li>
        <li><span>&lt;embed&gt;</span></li>
        <li><span>&lt;label&gt;</span></li>
        <li><span>&lt;body&gt;</span></li>
      </ul>
    </article>
  </section>
</main>

## styles.css
thead {
  color: black;
  background-color: Bisque;
  padding: 5px;
  text-align: center;
}

header {
  color: Yellow;
  background-image: url("https://comps.canstockphoto.com/distressed-cheat-sheet-grunge-stamp-clipart_csp53698111.jpg");
  width: 100%;
  height: 235px;
  text-align: center;
  opacity: 0.75;
  background-color: #FAF0E6;
}

th, td {
  border: 1px dotted black;
}
th {
  color: DarkRed;
  font-weight: 700;
}

td {
  color: black;
}

table {
  border: 2px solid black
  width: 100%;
}

tbody {
  background-color: Ivory;
}

.code, .attribute {
  display: wrap;
  color: DarkRed;
  background-color: DodgerBlue;
  font-weight: 525;
  text-align: center;
}

main {
  background-color: #FAF0E6;
  font-family: Arial;
}

#elements1 {
  float: left;
  text-align: left;
}

#elements2 {
  float: right;
  width: 50%;
}

#elements1 span, #elements2 span {
  color: DarkRed;
  background-color: DodgerBlue;
}
	<!DOCTYPE HTML>
	<head>
	<link href="styles.css" type="text/css" rel="stylesheet">
	<title>This is a Challenge Project!</title>
	</head>
	<header>
	<nav>
	<a href="">Home</a>
	<a href="">About</a>
	<a href="">Contact</a>
	</nav>
	</header>
	<br/>
	<br/>
	<main>
	<h1>Tables and Attributes</h1>
	<section id="tables">
	<table>
	<thead>
	<th height="70"> Tag</th>
	<th height="70"> Name</th>
	<th height="70"> Description</th>
	</thead>
	<tbody>
	<tr>
	<td class="code"><thead></td>
	<td>Table Head</td>
	<td>This is the placeholder for column titles</td>
	</tr>
	<tr>
	<td class="code"><th></td>
	<td>Table Head</td>
	<td>How titles are seperated within<thead></td>
	</tr>
	<tr>
	<td class="code"><tbody></td>
	<td>Table Body</td>
	<td>The actual Data of the table</td>
	</tr>
	<tr>
	<td class="code"><tr></td>
	<td>Table Row</td>
	<td>This seperates the data in rows</td>
	</tr>
	<tr>
	<td class="code"><td></td>
	<td>Table Data</td>
	<td>This designates within the rows what information goes into which column</td>
	</tr>
	</tbody>
	</table>
	<p>This <span><strong>information</strong></span> is in order in terms of application in an <strong>HTML</strong> Setting</p>
	</section>
	<br/>
	<section id="elemattributes">
	<table>
	<thead>
	<th height=70>Attribute</th>
	<th height=70>Name</th>
	<th height=70>Description</th>
	</thead>
	<tbody>
	<tr>
	<td class="attribute">colspan</td>
	<td>Column Span</td>
	<td>The Width of Columns the data will span in a table</td>
	</tr>
	<tr>
	<td class="attribute">rowspan</td>
	<td>Row Span</td>
	<td>The Heigh of rows a data cell will span in a table.</td>
	</tr>
	<tr>
	<td class="attribute">class</td>
	<td>Class or family</td>
	<td>Specifies which class a dataset belongs to. considered a global attribute can be used with any element</td>
	</tr>
	<tr>
	<td class="attribute">id</td>
	<td>Identifier</td>
	<td>Places an identifier on an element to be easily located when referencing in CSS or another portion of the HTML document</td>
	</tr>
	<tr>
	<td class="attribute">controls</td>
	<td>Controller</td>
	<td>Displays controls for starting or stopping an audio or video files</td>
	</tr>
	<tr>
	<td class="attribute">type</td>
	<td>Input type</td>
	<td>Used to determine methods of input for user-gathered data, "radio," "text,""checkbox."</td>
	</tr>
	<tr>
	<td class="attribute">method</td>
	<td>Method</td>
	<td>Used to determine the method used in form posting onto the website, either 'GET,' or 'POST'</td>
	</tr>
	<tr>
	<td class="attribute">min</td>
	<td>Minimum</td>
	<td>Specifies the required minimum character count for user-input data for a specific form field or textarea</td>
	</tr>
	<tr>
	<td class="attribute">max</td>
	<td>Maximum</td>
	<td>used to determine the maximum number of characters that can be input into user-input data for a specific form field or text area</td>
	</tr>
	<tr>
	<td class="attribute">href</td>
	<td>Hyperlink Reference</td>
	<td>Determines the URL that is being linked via; link, base, area, a</td>
	</tr>
	<tr>
	<td class="attribute">for</td>
	<td>For</td>
	<td>Determines which form element a label is bound to</td>
	</tr>
	<tr>
	<td class="attribute">src</td>
	<td>Source</td>
	<td>Source is used for external-data input into a main body of work. (i.e. images, videos, audios, and website urls)</td>
	</tr>
	</tbody>
	</table>
	<br/>
	<p>These are just a handful of <strong>attributes</strong> I can recall when using HTML elements. The list will be expanded in due time.</p>
	</section>
	<br/>
	<section id="html&CSS">
	<article>
	<h2>Elements of HTML</h2>
	<p>There are certain things I will be listing in an unordered list! Most of these things thus far contain basic <strong>elements</strong> that I have acquired thus far in my studies of HTML. Later on this page I will be discussing things like CSS selectors and specificities as they relate to color, image, borders, padding, etc..</p>
	<br/>
	<p>Common HTML Elements Include:</p>
	<ul id="elements1">
	<li><span><html></span></li>
	<li><span><header></span></li>
	<li><span><head></span></li>
	<li><span><title></span></li>
	<li><span><nav></span></li>
	<li><span><div></span></li>
	<li><span><main></span></li>
	<li><span><section></span></li>
	<li><span><form></span></li>
	<li><span><article></span></li>
	<li><span><a></span></li>
	<li><span><textarea></span></li>
	<li><span><input></span></li>
	</ul>
	<ul id="elements2">
	<li><span><br></span></li>
	<li><span><table></span></li>
	<li><span><p></span></li>
	<li><span><ul></span></li>
	<li><span><ol></span></li>
	<li><span><li></span></li>
	<li><span><footer></span></li>
	<li><span><video></span></li>
	<li><span><audio></span></li>
	<li><span><img></span></li>
	<li><span><embed></span></li>
	<li><span><label></span></li>
	<li><span><body></span></li>
	</ul>
	</article>
	</section>
	</main>
	thead {
	color: black;
	background-color: Bisque;
	padding: 5px;
	text-align: center;
	}

	header {
	color: Yellow;
	background-image: url("https://comps.canstockphoto.com/distressed-cheat-sheet-grunge-stamp-clipart_csp53698111.jpg");
	width: 100%;
	height: 235px;
	text-align: center;
	opacity: 0.75;
	background-color: #FAF0E6;
	}

	th, td {
	border: 1px dotted black;
	}
	th {
	color: DarkRed;
	font-weight: 700;
	}

	td {
	color: black;
	}

	table {
	border: 2px solid black
	width: 100%;
	}

	tbody {
	background-color: Ivory;
	}

	.code, .attribute {
	display: wrap;
	color: DarkRed;
	background-color: DodgerBlue;
	font-weight: 525;
	text-align: center;
	}

	main {
	background-color: #FAF0E6;
	font-family: Arial;
	}

	#elements1 {
	float: left;
	text-align: left;
	}

	#elements2 {
	float: right;
	width: 50%;
	}

	#elements1 span, #elements2 span {
	color: DarkRed;
	background-color: DodgerBlue;
	}