Authoring Tools

There are a wide variety of authoring tools available for coding HTML. Among these are professional tools like Macormedia DreamWeaver™ and Microsoft FrontPage™. While these tools offer a nice WYSIWYG (what-you-see-is-what-you-get) interface with a nice visual designer, it is often best to use just a plain text editor to code your HTML.

Experienced web authors typically avoid products such as Microsoft FrontPage. The reason is that the program will add a lot of extraneous and Microsoft-specific tags that only support Internet Explorer. These extra tags will make your page unnecessarily big and cumbersome. In our experience, a good text editor works just fine. My personal pick is UltraEdit 10.20c.

File Naming Conventions

Before we talk about writing your first HTML page, we need to discuss file name extensions. These are the few characters that appear at the end of the filename starting with the last period (.) character. For a static web page, the extension will usually look something like .html. Here are all of the most commonly-used file extensions for a web site:

html - standard web page
htm - standard web page
css - Cascading Style Sheet (CSS) page
js - JavaScript page
gif - GIF (Graphics Interchange Format) image file
jpg - JPG image file
png - PNG (Portable Network Graphic) image file
asa - Active Server Pages configuration file
asp - Active Server Pages web page
php - PHP Scripting page
cgi - CGI (Common Gateway Interface) file
pl - PERL Scripting page

Please don't feel too overwhelmed by all of the different file extensions that are available. Suffice it to say, the first two extensions are all you need to worry about for now. The standard web page allows you to do a simple web page with text content and graphic links which is all we will be dealing with here.

Your First Web (HTML) Page

Your first web page will consist of a rather boring looking page with a heading and some content. You will need to create this file and store it on your web server. If you don't have a web server available to you, you will have to get one setup. The process of doing this is not covered in this article.

So copy or type the following HTML code into your web authoring tool. A simple text editor like notepad (built into Windows) will suffice if the web server is running on your local computer:

<html>
<body>
<h1>My First Page</h1>

<p>
Hello World!
</p>
</body>
</html>

After you type in this code into a new file, you will need to save the file using the standard web page file extension. A good choice would be something like mypage.html. Make sure you save this in the location where your web site is setup. If you are running a Windows web server, the location will typically be something like C:\InetPub\wwwroot\yoursite.

You will notice a lot of HTML tags in this code in the format <tagname>. Every bit of HTML code takes on this form. Tags are generally used for formatting elements on a page and determining the appearance of content on the page. This will output a page that looks like the following:

My First Page

Hello World!

You will notice that the entire contents of the page are enclosed in html tags. The entire content of the page is also enclosed in a body tag. These two sets of tags are always required on a web page so make sure you always include them.

The h1 tag is shorthand for header. An h1 is the biggest heading you can make on a page. Additional heading exist all the way down to h7. Most web page authors only use the first three or so, but how you use it is up to you.

The p tag encloses an entire paragraph. The text enclosed by the starting tag <p> and ending tag </p> comprise a single paragraph. Line spacing will be placed before and after a paragraph (when rendered through a browser) so that it is separated as a paragraph should be.

Commonly Used HTML Tags

Below is a list of commonly used HTML tags. This is simply a subset of the complete set of HTML tags. For a more complete set of tags, please refer to the HTML tag reference.

Tag	Close?	Description / Example
`h1`	Y	Used to declare a text heading. This tag ranges in size from one to seven. So you should use tag names `h1` through `h7`. *Example* `<h1>Expense Report</h1>`
`p`	Y	Paragraph tag used to enclose a paragraph section. *Example* `<p>This is a very short paragraph.</p>`
`b`	Y	Create bolded text *Example* `<b>I'm bold text</b>`
`i`	Y	Create italicized text *Example* `<i>I'm italicized text</i>`
`u`	Y	Create underlined text *Example* `<u>I'm underlined text</u>`
`s`	Y	Create strike-through text *Example* `<s>I'm strike-through text</s>`
`li`	N	Create a list item for a ordered or unordered list. *Example* `<li>Apples</li>`
`ul`	Y	Unordered list. This type of list is typically rendered as a bulleted list of items. *Example* `<ul> <li>Apples</li> <li>Oranges</li> </ul>`
`ol`	Y	Ordered list. This type of list is rendered with numbered headings instead of bullets like: `1.` *Example* `<ol> <li>Apples</li> <li>Oranges</li> </ol>`
`hr`	N	Create a horizontal rule. This is typically rendered as a horizontal line with white space above and below to create a separator. *Example* `<hr>`
`blockquote`	Y	Create a section of text that is indented relative to the content above. *Example* `<blockquote>This is a callout</blockquote>`
`dl`	Y	Create a definition list. Along with data term (`dt`) tags and data definition (`dd`) you can create a glossary of terms. *Example* `<dl> <dt>Cat</dt> <dd>Four-legged lazy furball</dd> </dl>`

Featured Clients

Linux Docs
A complete resource site for the Linux operating system. Find out how we supercharged the Linux experience with this handy reference guide.