-
-
Save codecademydev/1c9d3cf8d27744f9dacace9dd8f315a1 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment