Knight Digital Media Center Multimedia Training

Tutorial: HTML 101

By Scot Hacker, Lisa Pickoff-White

For updates and discussion on this tutorial, visit:
http://kdmc.berkeley.edu/tutorials/html/

Introduction

Hyper Text Markup Language (HTML) is the lingua franca of the Web – a simple document syntax in which all of the web's 63 billion pages are written.

HTML is not a programming language per se', but a markup language – a way of marking up plain text documents so that Web browsers know which parts of a page are paragraphs, which parts are bold or italic, which parts are tables, etc.

Even if a web site is driven by a complicated database-backed content management system, it still must return simple HTML (and media files) to the end user's web browser for display. Thus, it's valuable to know some HTML even if your day job involves working with a content management system – knowing HTML will help you do more within the constraints of your system, and will help you fix things that are broken.

Don't be intimidated – it's simple to learn basic HTML, and you can pick it up as you go, building up your skills to eventually include more advanced formatting and styling with Cascading Style Sheets.

What You Need

All you need to get started is a plain text editor and a web browser (such as Firefox, Safari, or Internet Explorer). For learning purposes, you can work directly from your desktop, without access to a web server (though we'll cover uploading to a web server in a separate tutorial).

HTML is plain text. Therefore, you need to start with a basic text editor, such as Notepad for Windows or TextEdit for the Mac, both of which come with their respective operating systems.

Note: If you're using TextEdit for the Mac, note that it wants to save documents as "rich text" by default. But HTML is always plain text, so the default setting will result in documents that can't be displayed in a browser. Before you begin, go into TextEdit's preferences and select the "Plain Text" radio button, as shown here: 

 TextEdit preferences

However, you'll find that you can work much more cleanly and efficiently with an advanced text editor (also called a "programmer's editor"), such as :

High-quality text editors make the HTML editing process much easier by providing a wealth of shortcuts that prevent you from having to write every scrap of code manually.

When shopping for a text editor, be sure to get one that supports "syntax highlighting," which renders your HTML tags in a different color – this makes the editing process much easier. A good text editor will also greatly help with proper code indentation, which will make your code more readable.

Syntax highlighting

You'll find many more text editors for your operating system with a simple Google search.

You can also use a Web site creation and management application such as NVU (free), or Adobe Dreamweaver. These programs, known as WYSIWYG (what you see is what you get) editors, allow you to create Web sites without typing in the actual HTML. They can also help when working with the more advanced aspects of HTML, such as tables, forms, and cascading style sheets. WYSIWYG applications let you toggle back and forth between "code mode" and "visual mode" – in code mode you can write HTML directly.

Do not use a word processing application such as Microsoft Word to edit plain text files – word processors work on binary documents, not text. Yes, you could take care to "Save as Plain Text" from your word processor, but we feel you'll be better served with a dedicated text editor than a word processor. Whatever you do, never use Word's "Save as HTML" feature – it'll create a rat's nest of tag soup you'll never be able to edit manually.

Set Up a Workspace

When you create a document in a word processor, you can embed media such as images or movies directly into it. No matter how much you embed, you still end up with a single document. But that's not now HTML works. An HTML document is plain text, and that's it. If you want images or other media to show up on your site, you'll need to put them on the same server (or in the same folder, for our purposes) and reference the external media from the HTML.

Therefore, it's important to make sure all your HTML documents and media files live together under a single folder (or in sub-folders of a parent "site" folder). It's also a good idea to create a parallel "source" folder for files and documents you use to create your site, but that aren't actually part of the site (for example, uncompressed images and video, Word documents, etc.) Before you begin, please take time to create a "site" folder on your desktop, into which you'll place all of the files that make up your page or site.

Workspace foldersFor more on this topic, please have a quick look at the first section of our Dreamweaver tutorial, titled "Getting Ready" then return here.

Before getting to work, set up a logical structure for your site, as well as a place to keep original source materials related to the site. Don't put non-web-ready media (such as uncompressed video, Word docs, etc.) into your site folder!

HTML Tags Explained

HTML "tags" are bits of code that surround plain text. Tags give the Web browser instructions on how to display elements of a Web page, whether it's text, pictures, video clips, or hyperlinks to other Web pages.

Tags are always surrounded by a set of angle brackets:

Most tags function as "containers" that wrap around an "element" on a page. For example:

Note: In this tutorial, tags and code samples will be shown with line numbers at the left margin. These are just present so we can refer to line numbers during instruction - they are not meant to be typed into your own code.

In this example, the whole sentence is wrapped in paragraph (<p>) "container" tags, and the word "hovercraft" is wrapped in the "strong" (bold) "container" tags. In other words, you're simply turning certain "rendering modes" on and off. Here's an equivalent example in plain English:

[start the paragraph] My [turn bold text on] hovercraft [turn bold text off] is full of eels. [end the paragraph]

There are a hundred or so different HTML tags available , but you'll find yourself using only a dozen or so over and over again – most HTML tags are for somewhat obscure purposes.

Note that tags end with another copy of the same tag, but this time including a forward slash:

In a very few cases, tags are not containers, and don't "surround" anything. For example, the HTML to insert an image in a page is not a container – it doesn't "wrap around" anything. In those cases, you must still finish the tag with a closing slash, like this:

HTML Attributes Explained

In that last example, you saw something a bit funny:

What's that "src=" business all about? Most HTML tags can take additional parameters that tell them how to behave, or how to display. These additional parameters are called "attributes." The img tag, which is used to insert an image in a page, is meaningless unless you tell it which image to insert! In the case of the img tag, the src attribute is required.

In other cases, attributes are optional. For example, the <hr /> tag creates a horizontal rule across the page. But what if you only want the rule to go  halfway across the page? In that case, you could use the "width" attribute on the hr tag:

Note that the value of each attribute is always enclosed in double quotes.

In many cases, you'll be putting multiple attributes on a tag. In that case, simply separate them with spaces. It does not matter what order attributes come in. For example:

There are many attributes, and not all of them apply to all tags. Until you get comfortable with the range of available attributes, you'll want to refer to an official listing, such as this one hosted by w3schools. Click on any tag name in that list to see that tag's available attributes.

In this tutorial, we'll work a bit with the "style" attribute, which takes this form:

Stylistic declarations like this are generally handled by an external CSS stylesheet, but for the sake of simplicity, we'll be placing styles directly into our tags as attributes.

Starting an HTML Document

While the content inside most tags is displayed on-screen, some is not. For starters, every HTML document must include some "meta" information at the top – information about the page itself that is critical to the web browser, but not shown to the reader.

Let's create a Web page that has the tags you will always need to include, along with some of the other more common tags and attributes used to design a page.

Note: The "meta" information described in this section is generally inserted for you automatically when you use an advanced HTML editor such as Dreamweaver or TextMate. However, we cover it here because you may be using a simple text editor such as Notepad or TextEdit that doesn't insert the meta information for you. Also, it's important to do it manually just once, so you know what's going on.

First, launch your text editor and and create a new, blank document (File | New).

We need to tell the browser that this is an HTML document. At the top of your blank text page type:

Press the Return or Enter key on your keyboard a few times to give yourself some breathing room, then add the closing HTML tag:

Everything else you do in this document will be "nested" between these two "container" tags, so put your cursor somewhere between the two tags.

Note: HTML is "whitespace-agnostic" – that means it ignores all line breaks, tabs, and series of spaces you enter. To add specific formatting to your document, you'll need to use HTML tags. For example, you can put one hard return or 100 hard returns between your paragraphs, and it won't matter a bit – all that matters is that you surround your paragraphs with

tags

.

Tip: Remember to close every tag! Failure to close tags properly can lead to confusing problems down the line.

Page Header

To continue creating the HTML "skeleton" of your document, we will create a "header" section by entering this code:

Nothing inside the "head" container tag will be displayed to the user. Later, as you learn more, you will use this section to define document properties, include external JavaScript and CSS files, add document keywords, and more. For now, within the head section, enter a title for your page, surrounded by opening and closing title tags. Your document should now look like this:

The title is not displayed on the page, but it will show up in the very top bar of a Web browser window. More importantly, the document title becomes the name by which your page will be bookmarked, and also the name search engines will use to refer to your site. Don't forget to add a unique title tag to every page of your site. For example, these might be the titles for three pages of your site:

Joe's Donuts - Home Joe's Donuts - About Joe's Donuts – Products

That way your pages will stand out as distinct entries in search engine results and in people's bookmarks.

The Page Body

The next critical tag in your document is the "body" tag. Everything that comes between the opening and closing tags will be displayed to the user. Put your cursor at the end of the tag and hit Return a couple of times, then type:

At the end of your document, but before the closing tag, you need the closing body tag:

Now go ahead and put a simple paragraph with a bit of formatting information in between the two body tags. At this point, your document should look something like this:

Now, let's give our page a background color. Because we want to style the entire body section of the page, we're going to put some attributes on the tag:

"Beige" is nice and friendly, but most of the time, you won't be referring to colors by their friendly names - there are only 150 of them, and most of the time you'll want more nuance than that. More commonly, you'll see HTML/CSS colors referenced by hexadecimal values, like this:

Looks hairy? Don't worry about it. There are tons of online tools (such as this one) that will help you find hexadecimal color values easily. In addition, the color picking tools in Photoshop, Flash, Dreamweaver, and virtually any tool that deals with the web will let you copy and paste hexadecimal color values – this lets you easily match background colors to image colors, for example.

Color picker

There are many HTML "hexadecimal" color pickers available – some on the web, others as desktop applications, others built into common multimedia applications and text editors. Pictured: colorblender.com.

Previewing Your Work

Time to see how your code looks in a real web browser. Start by saving your document into the "site" folder you created at the beginning of this tutorial. If this is your imaginary homepage, you'll probably want to save it with the filename "index.html" (we'll explain why that filename is important in another tutorial).

Now go to your favorite web browser and pull down File | Open. Navigate to the HTML document you just created, and open it up to see how it looks (in many cases, you can also simply drag the HTML document onto an open browser window or onto its icon).

Some HTML editing tools (such as Dreamweaver and TextMate) have preview options built in, usually in the toolbar.

Leave this browser window open. To continue reviewing your code changes, you'll be toggling back and forth between your web browser and text editor. Make a change, save your HTML document, toggle to your browser, click Reload/Refresh to see your changes, toggle back to your editor, and so forth.

Previewing your work

Headings

Now let's give our page a title that people can read.

To add headings in a larger size at the top of a page, or to add subheads to break up the text further down on a page, you use the heading tag:

Where for ? you substitute a number from 1 - 6 that appears to control the font size of the heading text.

Note: HTML tags, or elements, fall into two categories: "Block-level elements," which by default create an empty line above and below them, and "inline elements," which do not. Headings are a good example of block-level elements, which means they'll automatically get a line break above and below. The <strong> tag, in contrast, works in the middle of text without creating linebreaks above and blow. For this reason, heading levels cannot be used in the middle of a paragraph.

The largest size is h1, and the smallest size is h6. In each case, after you type the text you want, you need to add the corresponding closing heading tag.

Headling levels

Heading levels 1-6 as rendered by a browser, without specifying any font size at all.

So why do we say above "appears to control the font size" rather than "controls the font size?" Because we haven't actually specified a font size. Technically speaking, heading levels should be used to specify the relative importance of the heading on the page, much as you would when using heading levels to create outlines in MS Word. Without stylistic information, the Web browser will render the heading levels with its default settings, which use a hierarchy of sizes. Later, when you learn to style documents with CSS (cascading style sheets), you'll find that you have total control over the way heading levels are styled and sized.

The most important thing is this: Use heading levels to represent the relative importance of headings on a page in a hierarchical fashion. Do not think of them simply as font sizing options.

Working With Text

You insert normal text by using the paragraph tag: . Because it's a block-level element, the paragraph tag automatically creates an empty line above and below itself. Let's create a new paragraph in the section, under the heading:

Paragraph textNotice that the text aligns to the left, because it is not contained in the div tag that aligns center.

Emphasizing text

We can emphasize text by using the <strong> and <em> tags. <strong> makes text stand out as bold by default, and <em> emphasizes (italicizes) text.

Let's use these two tags – strong and em – in our sentence:

Emphasis text
Now let's write a new sentence inside the same paragraph, while putting some space in between the lines by using the break tag: which is the equivalent of holding down Shift while you hit Enter/Return in a word processor – you get a line break, but not a new paragraph.

Line break
Notice that your second sentence is on a new line, but still contained within the same paragraph.

Creating Links

Let's create a link so the user can easily navigate to the favorite Web site. In HTML, links are created with the "anchor" tag, represented by <a/>. But as with the img tag, an anchor without an accompanying URL is meaningless, so you'll need an attribute to go with it – the "href" attribute. The value of the href attribute will be the URL of the page you're linking to. Therefore, a hyperlink/anchor tag looks like this:

Remember to put double quote marks around all attribute values, and to close your link with <a/>.

It's important to include the full URL when linking to an external site – that means you must include the http:// portion of the URL in your href.

Tip: To avoid typos that will break links, always copy/paste URLs into your links, rather than trying to type them by hand.

Linking to External Sites

We're going to use Google at http://www.google.com as an example and use "Web sites" as the linkable text. So we'll type:

Your document should now look like this:

External linksLinking to Another Page on The Same Site

Links can point either to external sites, or to other pages on your own site.

To link to another page on the same site, you don't need the full http://domain.com portion of the href attribute – you can simply refer to the destination page by filename (or by foldername/filename if the file is in another folder). If the other page is in the same folder as your main page, just enter the file name for that page. Assuming you had another page in your "site" folder named otherpage.html that you wanted to link to, on your main Web page you would type:

If the file is in another folder you would include that path:

However, working with relative paths like this can be tricky if you've never done it before. To learn more, search for information on "relative links." Here's a good reference.

Horizontal Rules

Another way to break up a page is to insert a horizontal rule. You do that by adding the horizontal rule tag:

This tag just adds a horizontal line to the page. Since <hr /> is a block-level element, it will break any text preceding it to a line above, and any text after it to a line below. Let's add a horizontal rule right after the paragraph we've been working with. On a new line just below the hyperlink, type in <hr />.

Your page should now look like this:

Horizontal rules

Inserting Images

You can insert images into a page by using the img tag with the src attribute, like this:

Wherever you type this tag on your Web page is where the image you specified will appear in the browser.

The image itself is a separate graphic file in.jpg, .gif, or .png format (use JPGs for photographs, and GIFs or PNGs for line art or most screenshots).

The graphic file should be stored in the same folder as the Web page you are creating, or in a subfolder called "images."

Let's put an image tag on a Web page. Here's an image (named computerlab.jpg) that you can download onto your desktop to use on your page:

Computer lab

To download the image above, simply drag it from the browser window and into your "site" folder. To insert this image into your Web page, below the horizontal rule type:

Your code should now look like this:

Your page now should look like this:

Basic imageImage spacing and alignment

Let's add some descriptive text. Type in "Here is the computer lab where I learned HTML" directly after the close of the img tag.

Notice that the text butts up against the edge of the image and wraps around the bottom. To make the text wrap correctly, we need to add an "align" attribute to the image. You can align things to the left or right by using align="left/right".

Here is the computer lab where I learned HTML.

Left-aligning images

Now the text aligns to the top of the photo and takes up all of the available space on the right. You'll also probably want to create some space around the image, to give it some breathing room. Do this with the "hspace" and "vspace" attributes:

Horizontal spacing on images

We've added some extra text here to demonstrate the effects of both align="left" and hspace="7".

hspace sets the horizontal spacing around an image (a corresponding vspace attribute sets the vertical spacing, but you'll find it's rarely useful). Both attributes are measured in pixels. Again, the order of attributes on a tag is irrelevant.

Note: Rather than using align=left/right and hspace/vspace, it's preferable to address design and layout problems such as these with Cascading Style Sheets. The techniques shown here are for educational purposes.

Because images can't be "read" by search engines, nor can they be seen by blind users, you also need to give images an attribute for "alternative text." Notice when you mouse over an image in Safari or Internet Explorer that a small text balloon appears. This is an image's "alt text."

In your img tag, add it like this:

Lists

Lists are an important way of organizing content. They're commonly used not just to set off displays of important information on your page, but also (when used in combination with CSS) to create navigation menus.

There are three types of lists: unordered, ordered, and definition. Unordered lists use the tag and look like this:

Unordered list

Ordered lists use the

tag and look like this:

Both types of lists use the tag to create the bullet or numbered points.

Ordered list

Notice that when you enter a new list item, the list re-numbering will be taken care of for you. Never hard-code numbered lists – let the HTML do it for you!

The final list type is a "definition list," which involves a main phrase, and then a definition for that phrase that appears indented and on a separate line.

The tag defines the definition list. The tag is used for the main phrase The tag is for the definition itself (think "dd = Data Definition").

Definition lists

You can also "nest" your lists. For extra credit, try this: Place your cursor anywhere you might insert a normal list item. But instead of inserting an

start a whole new list instead, complete with or containers. Notice how the nested list is rendered by the browser, with logical indentation reflecting the hierarchy you've created. This can be a very powerful tool!

Nested lists

Working with Tables

Tables can be used to arrange "columnar" data, anywhere you have multiple rows and columns of text. An HTML table is a series of nested tags for identifying rows and cells (columns are implied, never declared). A table cell can contain any type of data – plain text, images, video, etc. Table rows and cells can have independent background colors, which gives you a great deal of formatting potential.

First we have the outer tag, which can take several attributes. Much like the tag, you can give the table a background color using style="background-color:#99ccff". You can also specify the table's width, using width="number" where the number is a pixel value.

The cellpadding attribute creates space within cells. The cellspacing attribute creates space outside of the border of a cell. You can give a table a visible border using border="number" (set the border attribute to 0 for a borderless table).

Let's see an example of table attributes in action.

Basic tables

In this example, we have a <table> container tag with some attributes. Within the <table> tag, we have two sets of <tr> container tags ("tr" stands for "table row"). And within each <tr> container, we have two sets of <td> containers ("td" stands for "table data," but you should think "cell"). Inside each <td> container we place the content we want to appear in that cell.

Working with more advanced tables can become tricky. For example, you may want the top two cells to be merged into a single wide cell that spans two or more columns. You may want to specify table header rows that appear with a different background color and font size, and so on. While it's important to learn about table tags and what they do, this is definitely an area where graphical HTML tools such as Dreamweaver make life a lot easier (just try moving all of column 13 over to column 16 in a big complicated table when editing HTML by hand!).

To learn more about HTML tables, see the tables section of the W3Schools tutorial.

Note: For years, web developers used tables to create entire Web site layouts. Rather than just putting tabular data into cells, a developer might use one cell to contain the top banner image, another to hold the left navigation sidebar, another to hold the main content, and another the footer. This is a simple solution to basic page layout, but it has many problems, especially as tables become complex and sites grow large. Cascading Style Sheets were introduced to get around these problems, and are now used to lay out most web sites. You might want to start with table-based layout when learning HTML because it's easy. But keep in mind that table-based layouts will almost certainly cause you heartache down the road. If you don't have time to learn CSS layout, consider downloading a pre-fab CSS layout, which you can then modify to suit your needs. Just keep in the back of your mind: "Tables are for displaying columnar data, not page layout!"

Being Semantic

In the Heading Levels section of this tutorial, we discussed the importance of using specific heading levels because they describe the outline/hierarchy of headings in the document, not just because you like the size they display at by default. You should extend this principle to all aspects of the HTML you write.

In other words, don't use the <blockquote> tag just because it makes text indented by default - use it because you're quoting something or someone and need it set off from the main text (there are better ways to indent text). Don't use HTML tables to lay out your pages - use tables if you have tabular data to display.  In other words, choose HTML tags according to their logical meaning in the structure of the document, not because you happen to like the way the browser displays that tag by default. You can take full control over how things are displayed with CSS. The point of HTML is to give a document a logical markup structure.

In ideal circumstances, every tag in your document should adequately describe the piece of content it surrounds, and there should be little to no formatting-related information in it. All display and formatting problems should be handled with CSS. A good HTML document should be stripped free of all or most formatting data. 

This practice is known as "semantic" HTML and is the core of best practices in modern web development. 


Congratulations! This has been a whirlwind tour of basic HTML concepts. It's by no means complete, and there's still much to learn, but now that you've gotten your feet wet, the sky's the limit.

Please see some of the sites referenced in the Related Links section of this tutorial to learn more. If pressed for time, we highly recommend the official W3Schools HTML tutorial.

Appendix A: TextMate Shortcuts

While you can use any plain text editor you like for HTML and CSS work, here at the Knight Digital Media Center we're partial to TextMate for Mac OS X. Here's a quick guide to some of TextMate's most useful hotkeys for HTML/CSS authors.

General HTML/CSS hotkeys

Ctrl-Shift-W
Wrap block of text in HTML tags. Defaults to <p>, but you can then type the name of the tag you want and it will take care of the opening and closing tags.

Ctrl-Shift-Cmd-W
Same as above but for multiple lines of text. Excellent for creating lists, or pre-processing lots of paragraphs. Defaults to <li> but can be changed immediately after (same as above).

Ctrl-Return
Quickly insert a <br /> tag. 

Ctrl-Shift-L
Copy a link from a web browser, putting it on the clipboard. Then select text or an image and hit this key combo to insert a link to that URL.

Ctrl-Opt-Cmd-P
View the current document in a web browser preview window (uses Safari's WebKit rendering engine). The nice thing about this built-in previewer is that you never need to reload it - the preview updates in real-time as you type.

Cmd-Shift-C
Make sure your cursor is in a "context" (place) where a color value can be inserted. Then hit this key combo to bring up the OS X color picker for quick hexadecimal color values.

Ctrl-Shift-V
Run document through the W3C validation service.

Ctrl-Shift-H
Run document through the HTML Tidy engine to clean up messy code. Tip: Select a portion of code first, and Tidy will only run against the selected code, not the whole document.

Ctrl-Cmd-T
Perhaps the greatest TextMate hotkey of them all - raises a small panel into which you can type a search term for quick reference to all of TextMate's built-in hotkeys and code completion snippets. Try it!

Tag inserts/snippets

TextMate can fill out "template" code for many common tasks. Try typing any of these words at the left margin of an HTML document and hitting the Tab key:

lorem --> Creates filler lorem ipsum text
table --> Creates a basic HTML table
div --> Creates a basic div, ready to take an ID name
style --> Creates a CSS style block in the document context
link --> Creates a link tag reference for attaching an external stylesheet (not for creating clickable links!)
movie --> Creates embed code for QuickTime movies

You can create your own snippets for any kind of text you need to insert on a regular basis - see TextMate's "Bundle Editor" for examples.

CSS code completion

In the context of a CSS document or a CSS block, type a property name then hit Tab to see a list of available properties or property sets. For example, from within a CSS block, type border and then hit the Tab key. You'll get a panel showing a bunch of pre-fab border options. Select one to insert appropriate code.

About this Tutorial

This tutorial was written by Paul Grabowicz, Lisa Pickoff-White, and Scot Hacker.

Republishing Policy

This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.