HTML Reference Sheet
Note: We are accessing your mastery of the concepts taught in this course. Use the
structures/formatting that is included on the reference guide. Use of concepts that are not listed below
may result in a loss of points
Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>website title</title>
</head>
<body>
content of website ...
</body>
</html>
Common Tags
<a href="url"> link name </a>
<img src="filename.jpg">
Create a link to another page or website
Show an image
Text Formatting
<h?> ... </h?>
<b> ... </b>
<i> ... </i>
<u> ... </u>
Heading (?= 1 for largest to 6 for smallest, eg h1)
Bold Text
Italic Text
Underline Text
Section Divisions
<div> ... </div>
<span> ... </span>
<span style="color:red"> text </span>
<p> ... </p>
<br>
<hr>
Division or Section of Page Content
Section of text within other content
Use CSS style to change text color
Paragraph of Text
Line Break
Basic Horizontal Line
Lists
<ol> ... </ol>
<ul> ... </ul>
<li> ... </li>
Ordered List
Un-ordered List
List Item (within ordered or unordered)
Tables
<table> ... </table>
Define a Table
<table> Tag Attributes:
border="?"
bordercolor="#??????"
cellspacing="?"
cellpadding="?"
align="??"
bgcolor="#??????"
width="??"
height="??"
<tr> ... </tr>
<th> ... </th>
<td> ... </td>
Thickness of outside border
Border Color
Space between cells (pixels)
Space between cell wall and content
Horizontal Alignment: left, center, right (*)
Background Color (*)
Table Width (pixels or %) (*)
Table Height (pixels or %) (*)
Table Row within table
Header Cell within table row
Table Cell within Table Row
<td> Tag Attributes
colspan = “?”
rowspan = “?”
Number of columns the cell spans across (cell merge)
Number of rows the cell spans across (cell merge)
Other
<pre>…</pre>
Preformatted text
CSS Style Sheets
Example1 (in head)
<head>
<meta charset = "UTF-8" />
<title> Preferred Customers </title>
<!--Add your information here: name, section, dates -->
<style>
body {background-color: cadetblue; font-family: optima;
color: MidnightBlue; text-align: center}
p { font-size: 30px}
button {font-size: 20px; background-color: coral}
input { font-size: 20px}
</style>
</head>
Example2 (inline)
<b style = “color:red”>
Example3 (external file): filename.css
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
CSS format:
Selector
h1
Declaration
{ color:white;
Property:Value
Declaration
font-size:12px; }
Property:Value
NOTE:
USE ONLY CONCEPTS TAUGHT IN THIS COURSE when writing solutions to your assignments. DO NOT
use HTML forms or JQuery calls in any graded assignment. Do not use HTML DOM property
innerHTML.