HTML Reference

Created by Amy Nguyen


Structure of an HTML Document

<html>
  <head>
    <title>[Title of Page]</title>
  </head>
  <body>
    [Content goes here!]
  </body>
</html>

Useful HTML Tags

HTML Syntax Result Notes
<p>Hello!</p>
<p>Let’s learn to make websites!</p>

Hello!

Let's learn to make websites!

Use <p> to create separate paragraphs!
<div>First division</div>

<div>Second division</div>
First division
Second division
"div"s are used to separate sections of HTML content.
<h1>My h1 Header<h1>
<h2>My h2 Header<h2>
<h3>My h3 Header<h3>
<h4>My h4 Header<h4>
<h5>My h5 Header<h5>
<h6>My h6 Header<h6>

My h1 Header

My h2 Header

My h3 Header

My h4 Header

My h5 Header
My h6 Header
<b>Bold text!<b>
Bold text!
<u>Underlined text!<u>
Underlined text!
<i>Italicized text!<i>
Italicized text!
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>
  1. First item
  2. Second item
  3. Third item
"ol" stands for ordered list.
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
  • First item
  • Second item
  • Third item
"ul" stands for unordered list.
<table>
 <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3
"tr" stands for table row. "th" stands for table header. "td" stands for table data.
<hr>

Create a horizontal divider.
<a href="http://www.stanford-bogazici.com/">Homepage</a>
Homepage
<img src="http://i.imgur.com/cvMOfgw.jpg"></img>

Styling your website with CSS

Getting Started

At the top of your HTML page, you need to include your CSS file:

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

Note that styles.css is the name of your CSS file, so it should be changed if you have multiple CSS files.

Editing your HTML

Add a class tag to your HTML elements. For example:

<p class="class-name">Merhaba!</p>

Adding CSS

In your CSS file, you can use the name of the class you wrote for your HTML tag to add styles:

.class-name {
  color: white;
  font-size: 20px;
  text-align: center;
  background-color: black;
}

Call a section leader over if you need more details.