Jennifer Clarkson Photography Logo> </div> <div align=
    Photo Galleries            

Creating Your First HTML File

Writing HTML code involves placing tags around regular text to format the document. Almost every start tag has a corresponding end tag, so that the computer knows exactly which text is affected by the command.

Start tags involve angled brackets around the tag name, while end tags have an additional forward slash after the first angled bracket. For example, to make a section of text boldface, the opening tag would be <B> and the end tag would be </B>.

Many HTML editors, such as Microsoft FrontPage or Macromedia Dreamweaver, help people by converting formatted text to HTML for them. In fact, Microsoft Word has an option to let you Save As HTML. In effect, these applications can write the HTML tags in for you, so that what you see is what you get. Unfortunately, these applications cost money. They also restrict the control you have over your document, in terms of displaying things that, say Microsoft Word, cannot, such as flashing text, moving banners, or pick lists.

A free alternative to these applications is to write the HTML tags yourself - that is what we'll do below. All you need is a text editor, such as Notepad (which comes with all Windows operating systems) in which to write your desired text and tags. Be careful to save Notepad files as filename.html; otherwise, your file will be saved as filename.txt, which will not be read by a browser. The .html file extension is key.

Regardless of which method you choose, it is wise to keep your filenames short and to leave out spaces. Now, let's review some HTML terms in the glossary below to make sure we're on the same page.

Glossary

Browser Application

 used to view HTML code on the internet (e.g. Netscape, IE)

HTML

 HyperText Markup Language

HTML Editor

 A software application that writes the HTML tags for you, based on your formatted text

ISP

 Internet Service Provider

OS

 Operating System

Tag

A word that is surrounded by angled brackets, such as <TITLE>, specially recognized by web browsers as a command

URL

 Uniform Resource Locator (i.e. the address of a web site)

WYSIWYG

 Pronounced “why-zee-wig”, an acronym for “what you see is what you get”

Creating HTML Documents

Using Microsoft Word

  • create the document in Microsoft Word with the formatting you would like to see
  • from the File menu, select Save As... and choose HTML
  • drawback: what you see is what you get - i.e. you cannot use pick lists, moving images, dynamic content, scrolling marquees, or frames since Word does not support such things

Using Notepad (or another basic text editor)

  • create the document in Notepad using HTML tags to indicate the desired formatting
  • from the File menu, select Save As... and manually change your filename to filename.html
  • drawback: you cannot see what your HTML file will look as you edit - you must use a browser application offline at a later time to verify your work; also, when saving, if you aren't careful, you may accidentally revert your filename to filename.txt by default

Basic HTML Tags

<HTML> Begin each document with this tag
</HTML> End each document with this tag

<HEAD> Begin the header section with this tag – the header contains information that does not appear in the main window of your browser
</HEAD> End the header section with this tag

<TITLE> Begin the title of the page (to appear in the title bar of the browser) with this tag
</TITLE> End the title of the page with this tag

<BODY> Begin the main section with this tag – this section will appear in the main window of your browser
</BODY> End the main section with this tag

The above tags have a specific order throughout the document, typically with indentation to make the code easily readable for future corrections or modifications.

Hello World

Yes, it's time. Let's make your first HTML file using a basic text editor such as Notepad.

  1. Open your basic text editor of choice (e.g. Notepad).
  2. Add in the basic document tags as follows:
    <html>
        <head>
             <title>Text to appear in the title bar</title>
       </head>
       <body>
             <p>Main text of document. For example, <b> this text is boldface</b>.</p>
              <H1>Hello World!</H1>
              <hr>
              <p align="center">And now my work is done</p>
       </body>
    </html>
  3. Save your file with a short filename such as hello_world.html
  4. Locate your file and open it in your browser (usually double-clicking will open the file in your default browser application, but you may need to open the browser application and Select File -> Open).
  5. Edit hello_world.html and change the content slightly. Save changes and refresh your browser display to see the changes.