Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created March 25, 2020 05:29
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/96a5a3f3c1fa7634d33ec56b73ce968e to your computer and use it in GitHub Desktop.
Save codecademydev/96a5a3f3c1fa7634d33ec56b73ce968e to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Terrell's Reference Sheet</title>
<link href="./styles.css" rel="stylesheet" type="text/css">
</head>
<!--start of body-->
<body>
<!--this where the header starts-->
<div class="header" id="header">
<img src="https://www.sololearn.com/Uploads/html-css.jpg" alt="banner for HTML and CSS">
<h1 class="title">HTML & CSS Reference Sheet</h1>
<h2 class="name"><a href="https://www.linkedin.com/in/terrell-lee-00976428/" target="_blank">Terrell Lee</a></h2>
<p class="caption">Studying to improve skills in HTML and CSS. On a 7 day free trial and attempting to have current employer to pay for the full version.</p>
</div>
<!--Start of Table of Contents-->
<div class="toc">
<h3>Table of Contents</h3>
<ui>
<li><a href="#html-terms">HTML Terms</a></li>
</ui>
</div>
<br>
<br>
<!--HTML Terms Table-->
<div class="html-terms" id="html-terms">
<table>
<thead>
<tr>
<th colspan="2" id="terms-title">HTML Terms</th>
</tr>
<tr>
<th>Term</th>
<th>Definition</th>
</tr>
</thead>
<tbody>
<tr>
<th class="th">HTML</th>
<td><strong>HyperText Markup Language</strong>; when enclosed in brackets it <strong>identifies the document as an html file</strong></td>
</tr>
<tr>
<th class="th">!DOCTYPE html</th>
<td>When enclosed in brackets, it <strong>informs the computer to read as the standard html language which is HTML5</strong></td>
</tr>
<tr>
<th class="th">head</th>
<td>When enclosed in brackets it <strong>represents the metadata of the document</strong></td>
</tr>
<tr>
<th class="th">body</th>
<td>When enclosed in brackets it <strong>identifies what will be seen</strong> </td>
</tr>
<tr>
<th class="th">attributes</th>
<td>term used for <strong>identifiying factors in code</strong> i.e. <em>class, alt, target,</em> and <em>id.</em></td>
</tr>
<tr>
<th class="th">element</th>
<td>line of code containing <strong>opening tag, content, and closing tag</strong></td>
</tr>
<tr>
<th class="th">opening tag</th>
<td><strong>brackets containing a HTML trait</strong></td>
</tr>
<tr>
<th class="th">closing tag</th>
<td><strong>brackets containg a / followed by a HTML trait</strong></td>
</tr>
<tr>
<th class="th">class</th>
<td>An attribute used in opening tag to <strong>group codes together</strong></td>
</tr>
<tr>
<th class="th">alt</th>
<td>An attribute mainly <strong>used for images/media as a descriptive phrase incase the media doesn't work</strong></td>
</tr>
<tr>
<th class="th">target</th>
<td>An attribute <strong>used with anchor trait "<em>a</em>" and "<em>href</em>" to indicate where the link would open</strong>. To open in new tab/window place attribute <strong><em>target="_blank"</em></strong></td>
</tr>
<tr>
<th class="th">id</th>
<td>An attribute used to <strong>identify codes to be later referenced specifically</strong></td>
</tr>
<tr>
<th class="th">href</th>
<td>An attribute used to <strong>reference locations for code</strong></td>
</tr>
<tr>
<th class="th">a</th>
<td>When enclosed in brackets it is used to <strong>ANCHOR content, i.e. media, url, etc.</strong></td>
</tr>
<tr>
<th class="th">p</th>
<td>When enclosed in brackets it is used to <strong>identify a paragrahph</strong> </td>
</tr>
<tr>
<th class="th">span</th>
<td>When enclosed in brackets it is <strong>used to break in a paragraph</strong> </td>
</tr>
<tr>
<th class="th">div</th>
<td>When enclosed in brackets it is <strong>used to seperate sections</strong></td>
</tr>
<tr>
<th class="th">h1 - h6</th>
<td><strong>Headings/Subheadings from highest priority to least</strong></td>
</tr>
<tr>
<th class="th">em</th>
<td>When enclosed in brackets it is used to <strong>stylize text in an <em>Italic format</em></strong></td>
</tr>
<tr>
<th class="th">strong</th>
<td>When enclosed in brackets it is used to <strong>stylize text in a Bold format</strong></td>
</tr>
<tr>
<th class="th">ol</th>
<td>When enclosed in brackets it is used to <strong>create ordered list</strong></td>
</tr>
<tr>
<th class="th">ul</th>
<td>When enclosed in brackets it is used to <strong>create unordered list</strong></td>
</tr>
<tr>
<th class="th">li</th>
<td>When enclosed in brackets it is used to <strong>list items in an <em>OL</em> or <em>UL</em></strong></td>
</tr>
<tr>
<th class="th">table</th>
<td>When enclosed in brackets it is used to <strong>create tables</strong></td>
</tr>
<tr>
<th class="th">thead</th>
<td>When enclosed in brackets it is used to <strong>create/label table head</strong></td>
</tr>
<tr>
<th class="th">tbody</th>
<td>When enclosed in brackets it is used to <strong>create/label table body</strong></td>
</tr>
<tr>
<th class="th">tfoot</th>
<td>When enclosed in brackets it is used to <strong>create/label table footer</strong></td>
</tr>
<tr>
<th class="th">tr</th>
<td>When enclosed in brackets it is used to <strong>create table row</strong></td>
</tr>
<tr>
<th class="th">th</th>
<td>When enclosed in brackets it is used to <strong>create row header</strong></td>
</tr>
<tr>
<th class="th">td</th>
<td>When enclosed in brackets it is used to <strong>create table data</strong></td>
</tr>
<tr>
<th class="th">image</th>
<td>When enclosed in brackets it is a trait used to <strong>insert images</strong></td>
</tr>
<tr>
<th class="th">video</th>
<td>When enclosed in brackets it is a trait used to <strong>inster videos</strong></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2"><a href="#header">Return to Top of Page</a></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Raw
styles.css
body{
text-align: center;
background-color: azure;
}
td{
text-align: left;
}
.title{
font-family: copperplate;
font-weight: bold;
color: chocolate;
}
.caption{
color: white;
font-family: didot;
}
.name{
font-family: optima;
font-size: 20px;
}
.toc{
text-align: left;
}
tfoot{
text-align: center;
}
img{
opacity: 0.75;
}
.header{
background-color: Darkgray;
}
thead{
background-color: darkgray;
}
#terms-title{
font-size: 30px;
Font-family: Impact;
}
table{
font-family: Book Antiqua;
}
.th{
background-color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment