Full Skeleton

The full skeleton of an html file that includes a title, an external style sheet, internal styles, an external JavaScript file, and internal JavaScript code would look like this. 
<!DOCTYPE html>
<html>
  <head>
    <title>TITLE OF WEB PAGE</title>
    <link rel="stylesheet" href="style.css">
    <style>INTERNAL STYLE INFORMATION</style>
    <script src="script.js"></script>
    <script>INTERNAL JAVACRIPT CODE</script>
  </head>
  <body>
    PAGE CONTENT
  </body>
</html>

Headings

You can use headings to divide your web page in a way that will make it easier for readers to skim.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6 
<h1> Heading 1 </h1>
<h2> Heading 2 </h1>
<h3> Heading 3 </h1>
<h4> Heading 4 </h1>
<h5> Heading 5 </h1>
<h6> Heading 6 </h1>

Paragraphs

All paragraphs should be contained within paragraph tags <p>...</p>. This allows each paragraph to be styled (if so desired) later with indentation, margins, padding, etc.

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe.

Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. 

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. 
This is a paragraph. 
</p>

<p>
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. 
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. 
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. 
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. 
Ceci est un paragraphe. Ceci est un paragraphe. Ceci est un paragraphe. 
Ceci est un paragraphe. Ceci est un paragraphe.
</p>

<p>
Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. 
Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. 
Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. 
Este es un parrafo. Este es un parrafo. Este es un parrafo. Este es un parrafo. 
Este es un parrafo.
</p>

Breaking Lines

HTML ignores most new lines or carriage returns. To force a new line (within a paragraph) use the <br> tag.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. <br>
This is some text. This is some text. This is some text.
The <hr> tag will break a line and place a horizontal rule across the page between lines. The size of this rule can be adjusted later with css.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. <hr>
This is some text. This is some text. This is some text.

Formatting Text

Basic text formatting can be accomplished with tags. For anything fancier, we will use css later. Italic text can be created with the <i>...</i> tag. Text can be made bold with the <b>...</b> tag.
This is italics, and this is bold. 
This is <i>italics</i>, and this is <b>bold</b>.

Pre-Formatted Text

HTML ignores most white space. Most linefeeds and tabs have to be performed with tags. This can make displaying code difficult. Inside the <pre>...</pre> tag, HTML honors all white space. Here is some text displayed without the pre tag. Notice how you do not see the formatting.
This text is preformatted. 
This text
     is 
          preformatted.
Here is the same text displayed with the pre tag. Notice how you do see the formatting. 
This text
     is 
          preformatted.
<pre>This text
     is 
          preformatted.</pre>

Lists

HTML supports numbered lists and bulleted lists.
  1. One
  2. Two
  3. Three
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>
  • One
  • Two
  • Three
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
Notice how each entry in a list is enclosed in <li>...</li> tags. The method of numbering (or lettering) and the shape of the bullet can be changed with css.

Images

Images can be included with the <img src="URL OR PATH TO IMAGE" height="NUMBERpx" width="NUMBERpx"> tag. 
<img src="png/wombat.png" width="150px">
Notice here how we only specified the width of the image. We could specify one, both, or none of width and height. Also, the image is apparently in a directory called "png" wherever the web page lives.

ID

For the sake of JavaScript, links, and styles, an element in a web page can be "named" with an id. 
<h1 id="chapter1">Chapter One</h1>
<ol id="theList'>...</ol>
<p id="aParagraph">...</p>

Links

To create a link, use the <a href="URL">...</a> tag. Any text or html can go inside the tag. The URL in the href attribute is the address of the web page you are linking. That url can be a directory path to file that lives on the same server as the current web page, or it can be a full url "http://..." to another web page.
This is a link to the CUNE website. 
This is a link to the <a href="http://www.cune.edu">CUNE website</a>.
The <a...">...</a> tag can also be used to creat "anchors" in a web page so that links can be made from one section of a web page to another.
This is an anchor in a web page.
This is a link to that anchor.
This is an <a id="theAnchor">anchor</a> in a web page.
<hr>
This is a <a href="#theAnchor">link</a> to that anchor.
Any HTML element that has an id can be linked in this manner.

Tables

Tables can be displayed with the <table>...</table> tag.
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
<table>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
<table border="1">
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2 
<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>
Note that <tr>...</tr> delineates a table row and <td>...</td> a table cell. The border attribute can be used to specify borders between cells. Column headers are given by <th>...</th>.

SPAN

A span is a container like a div, except it is intended to display content inline with elements around it.
This text is not in the span. All of the text in this span is red. This text is not in the span. 
This text is not in the span.
<span style="color:red;">
 All of the text in this span is red.
</span>
This text is not in the span.

Box Model

All HTML elements can be thought of as boxes or containers with special wrappers.