Orvado Technologies is your one-stop shop for custom web site solutions, quality work at affordable rates
 
orvado side
Support
What Is HTML?
Jan 14, 2005 - Kenneth W. Richards

HTML is an acronym for Hypertext Markup Language. It is the underlying language that web pages are written in. It primarily consists of tags that are formed by enclosing words in angle brackets like this: <html>. If you have little or no experience in writing HTML, then this article is for you.

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

Islander Gifts

Islander gifts is an online e-commerce site for rare and unique Hawaiian Gifts suitable for the entire family.
Site Map   Terms of Service   Privacy Policy