codecademydev/index.html Secret

## index.html
<!DOCTYPE html>

<html>
    <head>
        <title>HTML Tag Cheat Sheat</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>


    <body>
        <header>
            <h1>Basic HTML Tags</h1>
            <p>A table containing a few of the basic HTML tags I have come across and a table containin a couple of attributes. (<i>please note this is far from an exhaustive list</i>)</p>
            <nav>
                <ul>
                    <li><a href="#htmltag">HTML Tags</a></li>
                    <li><a href="#htmlattribute">HTML Attributes</a></li>
                </ul>
            </nav>
        </header>
        <div id="htmltag">
            <h2>HTML Tags</h2>
            <Table>
                <thead>
                    <tr class="head">
                        <th>Tag</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="tags"> &lt;!DOCTYPE html&gt;</td>
                        <td>Document type</td>
                        <td>Defines the document type</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;html&gt;</td>
                        <td>html element</td>
                        <td>Defines the root of a html document, the html element will contain all your code</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;head&gt;</td>
                        <td>Document head</td>
                        <td>Defines information about the document, allows links to css, titles etc</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;title&gt;</td>
                        <td>Document title</td>
                        <td>Defines a document title which is displayed on the tab in some browsers</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;header&gt;</td>
                        <td>Header section</td>
                        <td>Defines the header for a document</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;body&gt;</td>
                        <td>Body section</td>
                        <td>Defines the body of the document</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;footer&gt;</td>
                        <td>Footer section</td>
                        <td>Defines the footer for a document</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;h1&gt; to &lt;h6&gt;</td>
                        <td>HTML headings</td>
                        <td>Defines headings in HTML, h1 for the largest down to h6 for the smallest</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;p&gt;</td>
                        <td>Paragraph</td>
                        <td>Defines a paragraph in the document</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;div&gt;</td>
                        <td>Divide</td>
                        <td>Defines a section in a document</td>
                    </tr>
                    <tr>
                        <td class="tags">&lt;a&gt;</td>
                        <td>Anchor</td>
                        <td>Anchor tags are used to link to internal pages, external pages or content on the page</td>
                    </tr>
                </tbody>
            </Table>
        </div>
        <div id="htmlattribute">
            <h2>HTML Attributes</h2>

            <table>
                <tr class="head">
                    <th>Attribute</th>
                    <th>Description</th>

                </tr>
                <tr>
                    <td class="attributes">href</td>
                    <td>Specifies a link address</td>
                </tr>
                <tr>
                    <td class="attributes">src</td>
                    <td>Specifies the url (web address) for an image</td>
                </tr>
                <tr>
                    <td class="attributes">class</td>
                    <td>Can be used on any HTML element, the class name can be used by css to perform tasks for the element with the specified class name</td>
                </tr>
                <tr>
                    <td class="attributes">alt</td>
                    <td>Specifies alternative text for an image, when the image can't be displayed</td>
                </tr>
            </table>


        </div>

        <footer>
            <img src="https://cdn.pixabay.com/photo/2014/07/08/09/58/html5-386614_960_720.jpg" height="200" width="200" alt="Image of HTML keyboard">
        </footer>


    </body>


</html>

## styles.css
body{
    background-color: gainsboro;
}

header{
    text-align: center;
    Margin-top: 50px;

}

h2{
    text-align: center;
    margin-top: 100px;
}
nav{
    text-align: left;
}

th{
    border:2px solid grey;
    text-align: center;
    color: burlywood;
    background-color: black;
    font-family: fantasy;
}

table{
    margin: 20px auto;
    text-align: left;
    border-collapse: collapse;
}

td{
    border: 2px solid grey;
}

.tags{
    color: green;
    font-family: 'Courier New', Courier, monospace;
    background-color: darkorange;
}
.head{
    font-weight: bold;
}
.attributes{
    color: blue;
    font-family: monospace;
    background-color: yellow;

}

footer{
    text-align: center;
}
	<!DOCTYPE html>

	<html>
	<head>
	<title>HTML Tag Cheat Sheat</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
	</head>


	<body>
	<header>
	<h1>Basic HTML Tags</h1>
	<p>A table containing a few of the basic HTML tags I have come across and a table containin a couple of attributes. (<i>please note this is far from an exhaustive list</i>)</p>
	<nav>
	<ul>
	<li><a href="#htmltag">HTML Tags</a></li>
	<li><a href="#htmlattribute">HTML Attributes</a></li>
	</ul>
	</nav>
	</header>
	<div id="htmltag">
	<h2>HTML Tags</h2>
	<Table>
	<thead>
	<tr class="head">
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="tags"> <!DOCTYPE html></td>
	<td>Document type</td>
	<td>Defines the document type</td>
	</tr>
	<tr>
	<td class="tags"><html></td>
	<td>html element</td>
	<td>Defines the root of a html document, the html element will contain all your code</td>
	</tr>
	<tr>
	<td class="tags"><head></td>
	<td>Document head</td>
	<td>Defines information about the document, allows links to css, titles etc</td>
	</tr>
	<tr>
	<td class="tags"><title></td>
	<td>Document title</td>
	<td>Defines a document title which is displayed on the tab in some browsers</td>
	</tr>
	<tr>
	<td class="tags"><header></td>
	<td>Header section</td>
	<td>Defines the header for a document</td>
	</tr>
	<tr>
	<td class="tags"><body></td>
	<td>Body section</td>
	<td>Defines the body of the document</td>
	</tr>
	<tr>
	<td class="tags"><footer></td>
	<td>Footer section</td>
	<td>Defines the footer for a document</td>
	</tr>
	<tr>
	<td class="tags"><h1> to <h6></td>
	<td>HTML headings</td>
	<td>Defines headings in HTML, h1 for the largest down to h6 for the smallest</td>
	</tr>
	<tr>
	<td class="tags"><p></td>
	<td>Paragraph</td>
	<td>Defines a paragraph in the document</td>
	</tr>
	<tr>
	<td class="tags"><div></td>
	<td>Divide</td>
	<td>Defines a section in a document</td>
	</tr>
	<tr>
	<td class="tags"><a></td>
	<td>Anchor</td>
	<td>Anchor tags are used to link to internal pages, external pages or content on the page</td>
	</tr>
	</tbody>
	</Table>
	</div>
	<div id="htmlattribute">
	<h2>HTML Attributes</h2>

	<table>
	<tr class="head">
	<th>Attribute</th>
	<th>Description</th>

	</tr>
	<tr>
	<td class="attributes">href</td>
	<td>Specifies a link address</td>
	</tr>
	<tr>
	<td class="attributes">src</td>
	<td>Specifies the url (web address) for an image</td>
	</tr>
	<tr>
	<td class="attributes">class</td>
	<td>Can be used on any HTML element, the class name can be used by css to perform tasks for the element with the specified class name</td>
	</tr>
	<tr>
	<td class="attributes">alt</td>
	<td>Specifies alternative text for an image, when the image can't be displayed</td>
	</tr>
	</table>


	</div>

	<footer>
	<img src="https://cdn.pixabay.com/photo/2014/07/08/09/58/html5-386614_960_720.jpg" height="200" width="200" alt="Image of HTML keyboard">
	</footer>




	</body>




	</html>
	body{
	background-color: gainsboro;
	}

	header{
	text-align: center;
	Margin-top: 50px;

	}

	h2{
	text-align: center;
	margin-top: 100px;
	}
	nav{
	text-align: left;
	}

	th{
	border:2px solid grey;
	text-align: center;
	color: burlywood;
	background-color: black;
	font-family: fantasy;
	}

	table{
	margin: 20px auto;
	text-align: left;
	border-collapse: collapse;
	}

	td{
	border: 2px solid grey;
	}

	.tags{
	color: green;
	font-family: 'Courier New', Courier, monospace;
	background-color: darkorange;
	}
	.head{
	font-weight: bold;
	}
	.attributes{
	color: blue;
	font-family: monospace;
	background-color: yellow;

	}

	footer{
	text-align: center;
	}