HTML Reference

Sample web page

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
ALL page content goes here
</body>
</html>

Headings

<h1> Big Heading </h1>

<h2> Medium Heading </h2>

<h3> Small Heading </h3>

Paragraphs

<p> This is the first paragraph. </p>

<p> This is the second paragraph. </p>

Breaks

Everything after this line break <br/> appears on the next line.

Everything after this horizontal line break <hr/> appears below a horizontal line.

Emphasis

Emphasize text with <b>boldface</b> or <i>italics</i>.

Centering

<center> This text is centered. </center>

(Note: This is the easiest way to center content, but there is a better and more reliable way.)

Images

There is an image <img src="someimage.jpg"/> in the middle of this text.

This image
<img src="anotherimage.png" width="200" height="100"/>
has been resized (but it's usually better to resize the original file).

Lists

Here is an unordered list, in which list items are bulleted.

<ul>

<li>respect</li>

<li>honesty</li>

<li>integrity</li>

</ul>

Here is an ordered list, in which list items are numbered.

<ol>

<li>Turn right on Cherry Bottom</li>

<li>Turn left on Morse</li>

<li>turn right on 270</li>

</ol>

Tables

<tr> <th>Block</th> <th>Class</th> </tr>

</table>

Use border="0" to show a table without a border.

Text Color

Use color names, RGB values (with red, green, and blue values ranging from 0 to 255), or hex codes.
Here is a complete list of HTML color names.

<p style="color:red;"> The text in this paragraph is red. </p>

<p style="color:rgb(255,0,0);"> The text in this paragraph is red. </p>

<h1 style="color:#ff0000;"> The text in this heading is red. </h1>

You can use the body tag (the one you already have) to set the text color for the entire page.
(Do not create a new body tag. Remember there is only one body in a web page.)

Background

You can use the body tag (the one you already have) to set the background for the entire page.
(Do not create a new body tag. Remember there is only one body in a web page.)

<body style="background-color:green;"> ALL page content </body>

<body style="background-image:url('myimage.jpg');"> ALL page content </body>

This example sets both the text color and background color for the entire page:

<body style="color:white;background-color:black;"> ALL page content </body>

Fonts

Links

Here is a link to <a href="https://www.columbusacademy.org"> my school </a>.

Click <a href="page2.html"> here </a> to see another page in my web site.

This whole picture is a link:

External Style Sheets

Use an external style sheet to define styles for one or more web page. For example, here is an external style sheet, saved in a text file named style.css. Any web page that uses this external style sheet will have a black background, red h1 headings, and paragraphs with 20-point Arial font.

body

{

background-color:black;

}

{

color:red;

}

{

font-family:Arial;

font-size:20px;

}

And here is a blank web page that uses that external style sheet.

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

ALL page content goes here
</body>

</html>

Link Styles

Using the link styles below (defined in a style sheet), links will appear in red text without underline (regardless of whether they've been visited before). When the user hovers over a link, an underline will appear and the link's background will turn yellow.

a:link

{

color:red;

text-decoration:none;

}

a:visited

{

color:red;

text-decoration:none;

}

a:hover

{

background-color:yellow;

text-decoration:underline;

}

Image Maps

Use a map to identify parts of an image to link to other pages. The map lists the coordinates of rectangular and circular areas in the image, along with the pages they link to. The map is given a name (mymap, in the example below), and the image is told to use the map with that name. Notice that name associated with the img tag's usemap attribute begins with a pound sign (#), but the name associated with the map tag's name attribute does not have a pound sign. For reading ease, the opening map tag should immediately follow the relevant img tag, as shown in the example below.

The diagram below shows the 3 areas identified by the map above. Dashed blue lines outline the 3 areas in the diagram, but these outlines do not appear on a web page. Use shape="rect" to identify a rectangular region, and shape="circle" to identify a circular region.

In this example, the right rectangle links to a page named tread.html, the left rectangle links to a page named body.html, and the circle links to a page named eye.html. In the coordinate system, (0,0) is the upper left corner of the image. x values increase when moving to the right, and y values increase when moving down.

The coordinates of a rectangular area identify the region's LeftX,TopY,RightX,BottomY. For example, the right rectangle's coordinates "300,0,400,400" indicate that the rectangle's upper left corner appears at x=300 and y=0, and its lower right corner appears at x=400 and y=400.

The coordinates of a circular area identify the region's CenterX,CenterY,Radius. In the example, the circle's coordinates "225,175,25" indicate that the circle's center appears at x=225 and y=175, and its radius is 25.

Text Input

The following example shows a text field followed by a button labelled Enter. Normally, pressing this button does nothing. However, if the text 1234 is entered in the text field, then pressing the button opens the correct.html page.

<button onclick="if (document.getElementById('text').value == '1234') window.location.href = 'correct.html';">Enter</button>