Name and Section: _____________________
HTML Reference Sheet
Common Tags
<a href="url"> link name </a> Create a link to another page or website
<img src="[Link]"> Show an image
Text Formatting
<h?> ... </h?> Heading (?= 1 for largest to 6 for smallest, eg h1)
<b> ... </b> Bold Text
<i> ... </i> Italic Text
<u> ... </u> Underline Text
Section Divisions
<div> ... </div> Division or Section of Page Content
<span> ... </span> Section of text within other content
<span style="color:red"> text </span> Use CSS style to change text color
<p> ... </p> Paragraph of Text
<br> Line Break
<hr> Basic Horizontal Line
Lists
<ol> ... </ol> Ordered List
<ul> ... </ul> Un-ordered List
<li> ... </li> List Item (within ordered or unordered)
Tables
<table> ... </table> Define a Table
<table> Tag Attributes:
border="?" Thickness of outside border
bordercolor="#??????" Border Color
cellspacing="?" Space between cells (pixels)
cellpadding="?" Space between cell wall and content
align="??" Horizontal Alignment: left, center, right (*)
bgcolor="#??????" Background Color (*)
width="??" Table Width (pixels or %) (*)
height="??" Table Height (pixels or %) (*)
<tr> ... </tr> Table Row within table
<th> ... </th> Header Cell within table row
<td> ... </td> Table Cell within table row
CSS Style Sheets
Example1 (in head) Example3 (external file): [Link]
<head> body {
<meta charset = "UTF-8" /> background-color: lightblue;
<title> Preferred Customers </title> }
<!--Add your information here: name, section, dates --> h1 {
<style> color: white;
body {background-color: cadetblue; font-family: optima; text-align: center;
color: MidnightBlue; text-align: center} }
p { font-size: 30px} p{
button {font-size: 20px; background-color: coral} font-family: verdana;
input { font-size: 20px} font-size: 20px;
</style> }
</head> CSS format:
Example2 (inline) Selector Declaration Declaration
<b style = “color:red”> h1 { color:white; font-size:12px; }
Property:Value Property:Value
Page 9 of 9