HTML and the basic tools of Web publishing

Many of the tools Web publishers use to build and run Web sites work directly with Hypertext Markup Language (HTML). This means you'll need a basic knowledge of HTML to understand this section. If you're already familiar with HTML, skip ahead to the text editors page.

Let's start with an introduction. Go to the top of your browser and click the "View" menu, then scroll down to the "Source" option. A new window should pop up displaying a jumble of text that looks similar to this:

What you're looking at is the HTML code of TheIndependentPublisher.com. HTML is the building block of Web sites. With it, you can assemble thousands of pages teeming with content and images. Without it, the Web would be a sea of boring text and complicated commands.

HTML code is made up of specific tags that tell a Web browser how to display content. It's the job of the editor or producer to insert these tags in the proper place. In a way, these people are interpreters -- they look at content and translate it into a form that can be understood by the browser.

The basic tags are easy to remember because they're intuitive. Here's a few examples:

Tag	Use	Code example	End result
<p>	Paragraph break	Welcome to my site. <p> Click around for information about Web publishing.	Welcome to my site. Click around for information about Web publishing.
<b>	Bold text	Welcome to my <b>site</b>	Welcome to my site.
<font>	Set font size, type, color	<font size="3" face="serif" color="red">Welcome to my site.</font>	Welcome to my site.
<img>	Inserts an image	<img src="happy_face.gif">

Notice in the bold (<b>) and font (<font>) examples that these tags come in pairs (<b> and </b>). The first tag in the pair is known as the "opening" tag. It tells the browser that the text following the tag should be altered. The second tag -- the "closing" tag -- instructs the browser to stop altering text. If you forget to insert a closing tag, the browser will think you want everything on the page altered. It's pretty easy to notice this type of mistake because the entire page looks wrong. For example, a page that's supposed to include a bolded sentence like this:

Ends up looking like this:

At this point you've got a rudimentary understanding of what HTML is and how it works. There's more to it, but for our purposes you should be able to read the Build section without problems. If you're interested in learning more about HTML, consult the sites and references listed below.

Now that you've got a handle on HTML, let's take a look at the Web tools that use it to create pages. We'll start with text editors.

Related links

Name	Type	Notes
Introduction to HTML	Tutorial	Webmonkey covers the basics of HTML.
HTML Cheatsheet	Resource	A list of common HTML tags from Webmonkey.
HTML Primer	Tutorial	This tutorial from HTML Goodies goes into significant depth on using tags, manipulating text and adding images.
Table Tips	Tutorial	Learn how to construct tables in HTML documents with this Webmonkey guide.
HTML & XHTML: The Definitive Guide	Book	This O'Reilly book is one of the most comprehensive HTML resources you'll find. It covers the basics and digs deep into advanced techniques.
XHTML Tutorial	Tutorial	XHTML, the next generation of Web markup, provides more usability and functionality than HTML. This W3Schools.com tutorial provides an introduction.
Got a recommendation? Send it to: editor@theindependentpublisher.com.