-
-
Save codecademydev/35a2b3356221d1865ff0e6bff5a5b3cb 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> | |
<html lan="en"> | |
<head> | |
<title>My Cheatsheet</title> | |
<link href="styles.css" type="text/css" rel="stylesheet"> | |
</head> | |
<body> | |
<header> | |
<h1>My <span>HTML</span> cheatsheet:</h1> | |
</header> | |
<nav> | |
<ul> | |
<li><a href="#tag-list">Tags</a></li> | |
<li><a href="#atributes">Atributes</a></li> | |
<li><a>CSS</a></li> | |
<li></li> | |
</ul> | |
</nav> | |
<main> | |
<section id="tag-list"> | |
<h2>These are the <span>HTML</span> tags we know so far:</h2> | |
<ul> | |
<li><a href="#html">html</a></li> | |
<li><a href="#head">head</a></li> | |
<li><a href="#new">new</a></li> | |
</ul> | |
</section> | |
<article id="html" class="article article1"> | |
<h3><html></h3> | |
<p><em><html></em> is the outermost element in a document. | |
It comes right after the <!DOCTYPE html> | |
declaration and everything else goes inside of it.</p> <!-- description --> | |
<h4>Parents:</h4> <!-- parents --> | |
<ul> | |
<li>None</li> | |
</ul> | |
<h4>Known atributes:</h4> <!-- atributes --> | |
<ul> | |
<li><a href="#lang">lang:</a></li> | |
</ul> | |
<h4>Usual children:</h4> | |
<ul> | |
<li><a href="#head"><head></a></li> | |
<li><a href="#"><body></a></li> | |
</ul> | |
<a class="TOP" href="#tag-list">TOP</a> | |
</article> | |
<article id="head" class="article article2"> | |
<h3><head></h3> | |
<p><em><head></em> contains the <span>metadata</span>. | |
Whatever goes within <head> wil <em>NOT</em> show in the Browser.</p> <!-- description --> | |
<h4>Parents:</h4> <!-- parents --> | |
<ul> | |
<li><a href="#html"><html></a></li> | |
</ul> | |
<h4>Known atributes:</h4> <!-- atributes --> | |
<ul> | |
<li>None</li> | |
</ul> | |
<h4>Usual children:</h4> | |
<ul> | |
<li><a href="#"><link></a></li> | |
<li><a href="#"><title></a></li> | |
</ul> | |
<a class="TOP" href="#tag-list">TOP</a> | |
</article> | |
<article id="new" class="article article1"> | |
<h3><></h3> | |
<p><em><></em></p> <!-- description --> | |
<h4>Parents:</h4> <!-- parents --> | |
<ul> | |
<li><a href="#"><></a></li> | |
</ul> | |
<h4>Known atributes:</h4> <!-- atributes --> | |
<ul> | |
<li><a href="#"></a></li> | |
</ul> | |
<h4>Usual children:</h4> | |
<ul> | |
<li><a href="#"><></a></li> | |
</ul> | |
<a class="TOP" href="#tag-list">TOP</a> | |
</article> | |
<section id="atributes-table"> | |
<table> | |
<caption>Atributes, their function, Values and corresponding Elements.</caption> | |
<thead> | |
<tr> | |
<th scope="colgroup" colspan="4" class="header">HTML Atributes</th> | |
</tr> | |
<tr> | |
<th scope="col" colspan="1">Name</th> | |
<th scope="col" colspan="1">Function</th> | |
<th scope="col" colspan="1">Possible Values</th> | |
<th scope="col" colspan="1">Corresponding Elements</th> | |
</tr> | |
</thead> | |
<tbody> | |
<!--**********new row**********--> | |
<tr class="r-impar" id="lang"> | |
<th scope="row"><code>lang:</code></th> | |
<td> | |
Declares for screen-readers | |
in which language the content | |
of the page is written. | |
</td> | |
<td> | |
"en", "por", "es", "fr"... | |
</td> | |
<td> | |
<a href="#html"> <code><html></code> </a> | |
</td> | |
</tr> | |
<!--**********new row**********--> | |
<tr class="r-par" id="href"> | |
<th scope="row"><code>href:</code></th> | |
<td> | |
Declares the absolute or relative | |
path or URL to the desired file. | |
</td> | |
<td> | |
"./image.jpg" "" | |
</td> | |
<td> | |
<a href="#a"> <code><a></code> </a>, | |
<a href="#"> <code><></code> </a> | |
</td> | |
</tr> | |
<!--**********new row**********--> | |
<tr class="r-impar" id="type"> | |
<th scope="row"><code>type:</code></th> | |
<td> | |
Declares what type of file should be | |
expected by the browser for efficient | |
rendering reasons. | |
</td> | |
<td> | |
"text", "text/css", "video/mp4", "audio/mp3"...\ | |
</td> | |
<td> | |
<a href="#"> <code><imput></code> </a> | |
<a href="#"> <code><style></code> </a> | |
<a href="#"> <code><></code> </a> | |
</td> | |
</tr> | |
<!--**********new row**********--> | |
<tr class="r-par" id=""> | |
<th scope="row"><code>new</code></th> | |
<td> | |
Description | |
</td> | |
<td> | |
Values | |
</td> | |
<td> | |
<a href="#"> <code><></code> </a> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<a class="TOP" href="#tag-list">TOP</a> | |
</section> | |
</main> | |
</body> | |
</html> |
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
html { | |
font-size: 100%; | |
} | |
body { | |
font-family: Arial ; | |
font-family: Helvetica ; | |
} | |
header { | |
color: skyblue; | |
font-size: 2rem; | |
border-bottom: 1px solid; | |
padding : 5% 0 0 2%; | |
} | |
a { | |
color: inherit; | |
} | |
nav { | |
color: skyblue; | |
border-bottom: 1px solid; | |
} | |
nav li { | |
display: inline-block; | |
padding-right: 4%; | |
} | |
#tag-list { | |
color: gray; | |
} | |
em { | |
font-style: normal; | |
font-weight: bold; | |
} | |
p, li { | |
line-height: 1.5rem; | |
padding-left: 2%; | |
} | |
.article h3 { | |
font-size: 1.8rem; | |
} | |
.article1 li a { | |
background-color: gray; | |
font-family: monospace; | |
padding: 5px; | |
} | |
.article2 li a { | |
background-color: white; | |
font-family: monospace; | |
padding: 5px; | |
} | |
.article1 { | |
background-color: skyblue; | |
color: white; | |
} | |
.article2 { | |
background-color: lightgray; | |
color: gray; | |
} | |
.TOP { | |
margin-left: 50%; | |
} | |
header, article{ | |
padding:5px 2%; | |
} | |
table { | |
width: 100%; | |
margin: 5% 0 5% 0; | |
} | |
caption { | |
text-align: left; | |
padding-left: 1%; | |
padding-bottom: .5%; | |
} | |
.header { | |
font-size: 2.5rem; | |
line-height: 4rem; | |
padding: 2%; | |
text-align: left; | |
} | |
th { | |
background-color: skyblue; | |
color: white; | |
font-size: 1.3rem; | |
padding: 1%; | |
} | |
.r-impar td{ | |
background-color: lightgray; | |
color: gray; | |
font-size: 1rem; | |
padding: 1%; | |
} | |
.r-par td{ | |
background-color: gray; | |
color: white; | |
font-size: 1rem; | |
padding: 1%; | |
} | |
code { | |
background-color: gray; | |
color: white; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment