HTML

HTML wraps "tags" around content to describe it. Tags mostly come in pairs.

Example of a paragraph: 

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

Some types of content can't be wrapped around. In these cases the pair of tags collapses.

Example of a line break collapsing:

<br></br> → collapses to → <br />

Tags can have attributes that further describe the content. These attributes and matching values go in the first tag.

<p id="intro" class="fancy">This is a paragraph that we're calling an intro.</p>

Some notes on tags:

  1. tags and attributes are always lowercase
  2. values must always be in quotes (avoid spaces for values)
  3. tags are closed with a slash

All HTML documents must have the following tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title goes here</title>
	</head>
	<body>
	</body>
</html>

Some notes:

Content tags default to these main stylistic flavors:

Important block tags
h1 headline, first importance; limit to one per page
h2 headline
h3 headline
h4 headline
h5 headline
h6 headline
p paragraph
ul unordered list, i.e. bullet list
ol ordered list, i.e. numbered list
li list item, an item in the list; must be wrapped with ul or ol
div generic block item
Important inline tags
a anchor tag, mostly used to create hyperlinks
br adds a line break, don't use for paragraph breaks, use p instead
em emphasize, i.e. italicized
strong strong, i.e. bolded
img image, holds an image
span generic inline item
Important table tags
table table
tr table row, must be wrapped with table
td table data, i.e. one cell of the table, must be wrapped with tr

A basic page

A basic page would look like this using our basic tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Title goes here</title>
	</head>
	<body>
		<h1>My Todo List</h1>
		<p>Things I have to do before I launch my website.</p>
		<ul>
			<li>Write my content</li>
			<li>Design my web page</li>
			<li>Code my web page</li>
		</ul>
	</body>
</html>

How it displays.

My Todo List

Things I have to do before I launch my website.

Creating your webpage

A webpage is really just a text file with HTML. You can use any text editor to make HTML pages like TextEdit or Notepad. Of course you can always use something fancier like Dreamweaver.

The benefit of fancier applications is that you can preview your pages easier and they give you tools to make writing the code easier, like WYSIWYG editing.

The benefit of writing (or editing) code by hand is that you can use special or newer techniques that the WYSIWYG editors haven't implemented yet.

All that being said, at the end of the day, what you end up with is a text file.

Saving your webpage

To make your HTML show up in a browser, you need to save your HTML document as a basic text file and open it up in your browser.

When naming your file, use these guidelines:

If you are given the option, save your text file with "UTF-8" encoding.

Organizing your files

Typically all your webpages will be in one directory or folder. It helps to organize your folder so it's easy to find things.

This is a common way of organizing your files. HTML pages are at the top of the directory. CSS files are in a "css" directory. Images are in an "images" directory.

File Structure

URLs, filepaths, and linking

Anytime we want to point to another file in HTML we have to use a filepath or URL (Uniform Resource Locator). Files you may want to point to include images, other pages on your own website, or external websites.

Filepaths are written in UNIX style, so use forward slashes, and everything is case sensitive.

Example paths (using directory structure above)
"about.html" pointing to about.html from index.html
"images/product_01.jpg" pointing to product_01.jpg from index.html
"../images/logo.gif" pointing to logo.gif from main.css; .. means go up a directory
"http://example.com/webpage.html" pointing to webpage.html at a website called example.com; always use http:// or https:// to go to another website

Adding images to a web page

To add an image to an HTML page as content use the img tag. You can also add images through CSS as stylistic elements as shown later.

<img src="directory/filename.jpg" />

Notice how the img tag has the attribute src which points to a path to an image file.

Typically you will also include the width, height, and alternative (alt) text.

<img src="directory/filename.jpg" width="250" height="100" alt="Photo of my cat"/>

Linking to another web page

To link to another webpage, use the anchor tag a. Note how the anchor tag wraps around the text you click on. 

<p><a href="contact_us.html">Contact Us</a></p>
<p><a href="http://www.google.com/">Search Google</a></p>

How it displays.

Contact Us

Search Google

You can also use an image to click on. Again, the a tag must wrap around the thing to click on, this time an img tag.

<a href="example.html"><img src="images/btn_learn_more.gif" width="150" height="33" alt="Learn More"/></a>

How it displays.

Learn More

Images

The web uses 3 main image formats: GIF, JPEG, PNG (in 2 flavors)

Format Filename Pros Cons
GIF example.gif
  • Good for images with solid blocks of colors like logos or text
  • Lightweight for these types of images
  • Allows 1-bit transparency
  • Supported by all browsers
  • Not good with photos
  • 255 color maximum or will dither
JPEG example.jpg
  • Good for photos
  • Lightest weight for photos
  • Supported by all browsers
  • Not good for solid graphics
  • May shift colors
  • Lossy (data is lost when saved)
  • Gets "crunchy" if compressed too much
PNG-8 example.png
  • Good for images with solid blocks of colors like logos or text
  • Allows 1-bit transparency
  • Not compatible with IE 5.5 or 6 without trickery
  • 255 color maximum or will dither
PNG-24 example.png
  • Allows 24-bit transparency (alpha mask)
  • Preserves every detail and color in photos and graphics
  • Is not lossy (data is preserved)
  • Not compatible with IE 5.5 or 6 without trickery
  • Heavier weight compared to JPG for photos

Making a "click through" of your designs

Typically when presenting designs, we like to link up images of webpages together to get a feel for what it's like to click from page to page.

Start by making an empty text file for each page of your clickthrough. Name each file with the name of the page. For example:

home.html
products.html
contact-us.html

On each document, copy and paste this code and replace the text in red.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Home</title>
	
	<style type="text/css" media="screen">
		body { margin: 0; }
		img { border: none; }
	</style>
	
</head>

<body>

	<a href="next-page.html"><img src="images/home.png" width="960" height="640" /></a>

</body>
</html>

Using the home.html → products.html → contact-us.html example:

In home.html you should replace next-page.html with products.html. Additionally, you should replace the image path with your screenshot and use the appropriate dimensions.

Testing and Debugging