Skip to content

Instantly share code, notes, and snippets.

@codecademydev
Created June 22, 2020 13:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/35a2b3356221d1865ff0e6bff5a5b3cb to your computer and use it in GitHub Desktop.
Save codecademydev/35a2b3356221d1865ff0e6bff5a5b3cb to your computer and use it in GitHub Desktop.
Codecademy export
<!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>&lt;html&gt;</h3>
<p><em>&lt;html&gt;</em> is the outermost element in a document.
It comes right after the &lt;!DOCTYPE html&gt;
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">&lt;head&gt;</a></li>
<li><a href="#">&lt;body&gt;</a></li>
</ul>
<a class="TOP" href="#tag-list">TOP</a>
</article>
<article id="head" class="article article2">
<h3>&lt;head&gt;</h3>
<p><em>&lt;head&gt;</em> contains the <span>metadata</span>.
Whatever goes within &lt;head&gt; wil <em>NOT</em> show in the Browser.</p> <!-- description -->
<h4>Parents:</h4> <!-- parents -->
<ul>
<li><a href="#html">&lt;html&gt;</a></li>
</ul>
<h4>Known atributes:</h4> <!-- atributes -->
<ul>
<li>None</li>
</ul>
<h4>Usual children:</h4>
<ul>
<li><a href="#">&lt;link&gt;</a></li>
<li><a href="#">&lt;title&gt;</a></li>
</ul>
<a class="TOP" href="#tag-list">TOP</a>
</article>
<article id="new" class="article article1">
<h3>&lt;&gt;</h3>
<p><em>&lt;&gt;</em></p> <!-- description -->
<h4>Parents:</h4> <!-- parents -->
<ul>
<li><a href="#">&lt;&gt;</a></li>
</ul>
<h4>Known atributes:</h4> <!-- atributes -->
<ul>
<li><a href="#"></a></li>
</ul>
<h4>Usual children:</h4>
<ul>
<li><a href="#">&lt;&gt;</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>&lthtml&gt</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>&lta&gt</code> </a>,
<a href="#"> <code>&lt&gt</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>&ltimput&gt</code> </a>
<a href="#"> <code>&ltstyle&gt</code> </a>
<a href="#"> <code>&lt&gt</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>&lt&gt</code> </a>
</td>
</tr>
</tbody>
</table>
<a class="TOP" href="#tag-list">TOP</a>
</section>
</main>
</body>
</html>
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