<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Basics Cheat Sheet</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>
The html represents the whole document, the head section is information about the document
and the body is the contents of the document. Space and line returns are ignored, with one space
between words. Comments are also ignored and are designated by using <!-- comment here -->
where you want the comment to be.
HTML is made up of tags which can be thought of as commands inside < > symbols with the end of the tag being designated with another copy of that tag but starting with a /. Some tags don't have text in them, so don't need a closing tag. Such tags optionally will end with a / before the > such as <br />. These can be nested so tags can be inside other tags. An example would be
<p>This is an example of a paragraph. <b>It can have bold, <i>bold and italic,
<u>bold and italic that is underlined</u></i></b> text.
We can have <i>Italic</i> and <u>underlined</u> by themselves. We can also <mark>mark text</mark> and
can show <del>deleted text</del>.
<sub>Subscripts</sub> and <sup>superscripts</sup> can also be used.</p>
This would result in:
This is an example of a paragraph. It can have bold, bold and italic,
bold and italic that is underlined text.
We can have Italic and underlined by themselves. We can also mark text and
can show deleted text.
Tags can have additional commands inside of them. These are known as attributes. The most important tag when we get to JavaScript is the id attribute which gives a tag a unique identifier. Tags are separated by spaces. An example of such a tag would be for displaying images. <img src="CSS3_and_HTML5_logos_and_wordmarks.svg" width="300" height="250" id="logo" /> which is an image provided by daPhyre, CC BY 3.0. The img tag displays the image located at the src attribute (more on specifying file locations later) with a specified width and height and an id so we can manipulate the image with JavaScript, a topic we will be covering in the future.
Astute readers will notice that the < and > symbols are part of tags, so how do we get them in a document? the & is used to insert symbols by using the HTML symbol name or by using #unicode with unicode being the unicode value. The table below shows a sample of some of these symbols.
| Symbol | HTML | Unicode | Description |
|---|---|---|---|
| < | < | 60 | Less than |
| > | > | 62 | Greater than |
| & | & | 38 | Ampersand |
| © | © | 169 | Copyright |
| ® | ® | 174 | Registered Trademark |
| ™ | ™ | 8482 | Trademark |
| ≠ | ≠ | 8800 | Not equals |
| ∞ | ∞ | 8734 | infinity |
To organize your documents, you can have headers. Headers are assigned numbers from h1 for the most important header to h6 for the lowest level. The look of the headers can be controlled through CSS which we will cover later
When Sir Tim Berners-Lee was creating the world-wide web, the idea was based around the concept of hyperlinks. The idea here is that you have links that lead to other parts of the document, other pages on the site, or even other sites. This is done through the URL (Uniform Resource Locator) which looks like http://www.spelchan.com/articles/cheatsheets/html.html . The “http://” specifies the protocol that is being used. The “www.spelchan.com” is the site you wish to go to, and “articles/cheatsheets/html.html” is the directory on the site where the page is (with “html.html” being the file you want to load). Relative links are just the path relative to the page you are on. For example, if I was at the URL above, then to have a link to the css.html page, I could use “css.html” for the path. To go back a directory, we use two dots.
To add a link, we use the <a> tag, which stands for anchor. The tag uses a href attribute to indicate where to link to and optionally a target attribute which defaults to "_self" which replaces the current page with the new page. Setting the target to "_blank" will open the link in a new window or tab. For example, if we wanted a link to 2600Dragons.com to open in a new page, we would use <a href="http://2600Dragons.com" target="_blank">2600 Dragons</a>.
There are two main types of lists. Ordered Lists number items and Unordered Lists just use bullet points. This is a composite tag, meaning that you have tags within the tags to clarify things. In the case of our lists, this consists of the type of list and the items in the list. To indicate an ordered list, we use <ol> and for unordered lists we use <ul>. Each item in the list, and this is the same for both types of lists, is denoted with a <li> tag.
Unordered list example:
<ul>
Ordered list example:
<ol>
Lists can be nested with either type of list being an item of another list.
Nested list example:
<ol>
Tables, like lists, are composite tags with additional tags inside the table tag to set things up. We start with the <table> tag. Unfortunately, borders are depreciated, but we will use them for now until we cover CSS. If we want a caption for the table we use the <caption> tag with the caption between the open and closing tags. A table is made up of rows and columns. We build the table row by row using <tr> tags. Between the opening and closing of the tr tag, we can have two different types of cells. <th> tags indicate a header cell, while <td> indicates a normal data cell. Cells can span multiple rows and/or columns using the colspan and rowspan attributes. Here is a sample table combining these:
<table border="1">
| <tr><th>Column 1</th> | <th>Column 2</th> | <th>Column 3</th></tr> |
|---|---|---|
| <tr><td>R1C1</td> | <td>R1C2</td> | <td>R1C3</td></tr> |
| <tr><td colspan="2" rowspan="2"> Multi-row/col data</td> | <td>R2C3</td></tr> | |
| <td>R3C3</td></tr> | ||
| <tr><td>R4C1</td> | <td>R4C2</td> | <td rowspan="2">Multi-row data |
| <tr<td colspan="2">Multi-column</td> | ||