Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created August 5, 2020 07:33
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/71f523a5804e146f6bad116cc41c9924 to your computer and use it in GitHub Desktop.
Save codecademydev/71f523a5804e146f6bad116cc41c9924 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CheatSheet</title>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<header>
<h1>HTML CHEATSHEET</h1>
</header>
<body>
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="head">
<td class="a" id="heading"><strong>Tag Name</strong></td>
<td class="b" id="heading"><strong>Tag Format(Opening,Closing)</strong></td>
<td class="c" id="heading"><strong>Tag Use</strong></td>
</tr>
<tr>
<td class="a">Html</td>
<td class="b"><strong>&lthtml&gt, &lt/html&gt</strong></td>
<td class="c">The &lthtml&gt element, the root of an HTML document, should be added after the !DOCTYPE declaration.</td>
</tr>
<tr>
<td class="a">Head</td>
<td class="b"><strong>&lthead&gt, &lt/head&gt</strong></td>
<td class="c">The &lthead&gt element contains general information about an HTML page that isn’t displayed on the page itself. </td>
</tr>
<tr>
<td class="a">Title</td>
<td class="b"><strong>&lttitle&gt, &lt/title&gt</strong></td>
<td class="c">The title is displayed in the browsers title bar or tab in which the HTML page is displayed.</td>
</tr>
<tr>
<td class="a">Body</td>
<td class="b"><strong>&ltbody&gt, &lt/body&gt</strong></td>
<td class="c">The &ltbody&gt element represents the content of an HTML document.</td>
</tr>
<tr>
<td class="a">Paragraph</td>
<td class="b"><strong>&ltp&gt, &lt/p&gt</strong></td>
<td class="c">To write a paragraph</td>
</tr>
<tr>
<td class="a">Division</td>
<td class="b"><strong>&ltdiv&gt, &lt/div&gt</strong></td>
<td class="c">To division or a section in an HTML document.</td>
</tr>
<tr>
<td class="a">Header</td>
<td class="b"><strong>&lth1&gt, &lt/h1&gt</strong></td>
<td class="c">Heading of the document</td>
</tr>
<tr>
<td class="a">Span</td>
<td class="b"><strong>&ltspan&gt, &lt/span&gt</strong></td>
<td class="c">The &ltspan&gt element is an inline container for text and can be used to group text for styling purposes.</td>
</tr>
<tr>
<td class="a">Emphasis</td>
<td class="b"><strong>&ltem&gt, &lt/em&gt</strong></td>
<td class="c">Emphasizes text and browsers will usually italicize the emphasized text by default.</td>
</tr>
<tr>
<td class="a">Strong</td>
<td class="b"><strong>&ltstrong&gt, &lt/strong&gt</strong></td>
<td class="c">Highlights important, serious, or urgent text and browsers will normally render this highlighted text in bold by default.</td>
</tr>
<tr>
<td class="a">Break</td>
<td class="b"><strong>&ltbr&gt, no closing tag</strong></td>
<td class="c">Line break element will create a line break in text and is especially useful where a division of text is required, like in a postal address.</td>
</tr>
<tr>
<td class="a">Unordered list</td>
<td class="b"><strong>&ltul&gt,&lt/ul&gt</strong></td>
<td class="c">Unordered list element is used to create a list of items in no particular order.Each individual list item will have a bullet point by default.</td>
</tr>
<tr>
<td class="a">Ordered list</td>
<td class="b"><strong>&ltol&gt,&lt/ol&gt</strong></td>
<td class="c">Ordered list element creates a list of items in sequential order. Each list item appears numbered by default.</td>
</tr>
<tr>
<td class="a">List</td>
<td class="b"><strong>&ltli&gt, &lt/li&gt</strong></td>
<td class="c">Used mention an item in the list</td>
</tr>
<tr>
<td class="a">Image</td>
<td class="b"><strong>&ltimg&gt, no closing tag</strong></td>
<td class="c">HTML image tag embed images in documents. The src attribute contains the image URL and is mandatory. </td>
</tr>
<tr>
<td class="a">Video</td>
<td class="b"><strong>&ltvideo&gt, &lt/video&gt</strong></td>
<td class="c">It embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.</td>
</tr>
<tr>
<td class="a">Anchor</td>
<td class="b"><strong>&lta&gt, &lt/a&gt</strong></td>
<td class="c">The anchor element is used to create hyperlinks in an HTML document.</td>
</tr>
<tr>
<td class="a">Table</td>
<td class="b"><strong>&lttable&gt, &lt/table&gt</strong></td>
<td class="c">In HTML,the element has content that is used to represent a two-dimensional table made of rows and columns.</td>
</tr>
<tr>
<td class="a">Table row</td>
<td class="b"><strong>&lttr&gt, &lt/tr&gt</strong></td>
<td class="c">The table row element,is used to add rows to a table before adding table data and table headings.</td>
</tr>
<tr>
<td class="a">Table data</td>
<td class="b"><strong>&lttd&gt, &lt/td&gt</strong></td>
<td class="c">The table data element,can be nested inside a table row element, &lttr&gt, to add a cell of data to a table.</td>
</tr>
<tr>
<td class="a">Table head</td>
<td class="b"><strong>&ltthead&gt, &lt/thead&gt</strong></td>
<td class="c">The table head element,defines the headings of table columns encapsulated in table rows.</td>
</tr>
<tr>
<td class="a">Table body</td>
<td class="b"><strong>&lttbody&gt, &lt/tbody&gt</strong></td>
<td class="c">The table body element,is a semantic element that will contain all table data other than table heading and table footer content.</td>
</tr>
<tr>
<td class="a">Table foot</td>
<td class="b"><strong>&lttfoot&gt, &lt/tfoot&gt</strong></td>
<td class="c">The table footer element,uses table rows to give footer content or to summarize content at the end of a table.</td>
</tr>
<tr>
<td class="a">Table Heading</td>
<td class="b"><strong>&ltth&gt, &lt/th&gt</strong></td>
<td class="c">The table heading element,is used to add titles to rows and columns of a table and must be enclosed in a table row element,&lttr&gt</td>
</tr>
<tr>
<td class="a">Form</td>
<td class="b"><strong>&ltform&gt, &lt/form&gt</strong></td>
<td class="c">The HTML &ltform&gt element is used to collect and send information to an external source.</td>
</tr>
<tr>
<td class="a">Input</td>
<td class="b"><strong>&ltinput&gt, no closing tag</strong></td>
<td class="c">Input element is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc. </td>
</tr>
<tr>
<td class="a">Label</td>
<td class="b"><strong>&ltlabel&gt, &lt/label&gt</strong></td>
<td class="c">Label element provides identification for a specific input based on matching values of the input id attribute and the label‘s for attribute.</td>
</tr>
<tr>
<td class="a">Select</td>
<td class="b"><strong>&ltselect&gt, &lt/select&gt</strong></td>
<td class="c">The select element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more option elements.</td>
</tr>
<tr>
<td class="a">DataList</td>
<td class="b"><strong>&ltdatalist&gt, &lt/datalist&gt</strong></td>
<td class="c">When using an HTML input, a basic search/autocomplete functionality can be achieved by pairing an &ltinput&gt with a &ltdatalist&gt.</td>
</tr>
<tr>
<td class="a">Option</td>
<td class="b"><strong>&ltoption&gt, &ltoption/&gt (or) &ltoption /&gt</strong></td>
<td class="c">Options that used to display in datalist or select etc.</td>
</tr>
<tr>
<td class="a">Textarea</td>
<td class="b"><strong>&lttextarea&gt, &lt/textarea&gt</strong></td>
<td class="c">The textarea element is used when creating a text-box for multi-line input (e.g. a comment section).</td>
</tr>
<tr>
<td class="a">Figure</td>
<td class="b"><strong>&ltfigure&gt, &lt/figure&gt</strong></td>
<td class="c">The &ltfigure&gt element is used to encapsulate media such as an image, diagram. or code snippet.</td>
</tr>
<tr>
<td class="a">Figure Caption</td>
<td class="b"><strong>&ltfigcaption&gt, &lt/figcaption&gt</strong></td>
<td class="c"> The &ltfigcaption&gt element is used to describe the media encapsulated within the &ltfigure&gt element.</td>
</tr>
<tr>
<td class="a">Section</td>
<td class="b"><strong>&ltsection&gt, &lt/section&gt</strong></td>
<td class="c">&ltsection&gt defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.</td>
</tr>
<tr>
<td class="a">Article</td>
<td class="b"><strong>&ltarticle&gt, &lt/article&gt</strong></td>
<td class="c">&ltarticle&gt holds content that makes sense on its own such as articles, blogs, and comments. </td>
</tr>
<tr>
<td class="a">Aside</td>
<td class="b"><strong>&ltaside&gt, &lt/aside&gt</strong></td>
<td class="c">The &ltaside&gt element is used to mark additional information that can enhance another element but isnt required in order to understand the main content.</td>
</tr>
<tr>
<td class="a">Frameset</td>
<td class="b"><strong>&ltframeset&gt, &lt/frameset&gt</strong></td>
<td class="c">Used to define a frameset</td>
</tr>
<tr>
<td class="a">Frame</td>
<td class="b"><strong>&ltiframe&gt, &lt/iframe&gt</strong></td>
<td class="c">The &ltiframe&gt tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.</td>
</tr>
</table>
<h2>For Attributes References<a href="https://www.w3schools.com/tags/ref_attributes.asp" target="_blank"> click here</a></h2>
</body>
</html>
Raw
styles.css
body{
background-image: url("https://image.freepik.com/free-photo/white-cloth-fabric-texture-background_1017-18219.jpg");
}
table {
border-right: 4px solid black;
border-left: 4px solid black;
font-size: 18px;
}
h1{
text-align: center;
}
h3{
text-align: center;
}
.a{
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#heading{
font-family: bold;
border-top: 4px solid black;
border-bottom: 4px solid black;
}
.b{
border-right: 2px solid black;
border-bottom: 2px solid black;
}
.c{
border-bottom: 2px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment