Web|Loyola University Chicago

Web

searchform
This siteLUC.edu

Creating an HTML Document

 

What is HTML?

HTML (Hypertext Mark-up Language) is a coding system that formats documents so they can be viewed on the Web. Web pages are made of text files, with extra HTML tags placed in and around the text. You can use HTML to specify the appearance of your text or to insert elements such as tables, graphics, or links to other Web pages. Web browsers, such as Netscape or Internet Explorer, interpret the HTML tags and render the file as a formatted page.

For an explanation of some common HTML tags, visit Basic HTML Tags.


WYSIWYGs

Some commercial software products can add HTML codes to a document for you. These products are called WYSIWYGs (What You See Is What You Get). Some popular WYSIWYGs are FrontPage,Netscape Composer, and Dreamweaver. These programs allow you to format your pages as you normally would in the Windows environment. For example, you can block a line of text, then click a button for bold or italics. The HTML code is added behind the scenes by the software.

These programs speed up the HTML coding process, because they don't require you to know or understand the coding itself. However, This may hinder your ability to troubleshoot your code should problems arise. WYSIWYGs are not officially supported by Loyola, which means Information Technology & Services' staff will not be able to answer questions about or provide training for them.


Creating an HTML Document

HTML documents must be saved as "text only" files, which means they cannot include any of the formatting codes that word processors routinely add to documents. While Word and WordPerfect can save files as text only, it is more straightforward to simply type the text in Notepad, which saves files exclusively in text format.

 

  1. To open Notepad, click Start on the task bar. Select Programs, Accessories, Notepad.
  2. To keep your text from running off the screen, select Edit, Word Wrap from the menu bar. Engaging word wrap does not make a difference to Web browsers, but it does simplify editing your text later.
  3. Type (or cut and paste) the following document. Try personalizing it with your own information and links. HTML tags are not case sensitive, so you do not have to capitalize them. Capitalized tags are easier to find when editing, however.

    <HTML>
    <HEAD>
    <TITLE>My First Web Page</TITLE>
    </HEAD>
    <BODY>
    <A NAME="top"><CENTER><H1>Welcome To My First Web Page!</H1></CENTER></A>                  
    <P>
    <EM>Hi!</EM> My name is Regina and I am a Psychology major at <A HREF="http://www.luc.edu">Loyola University Chicago</A>. This is my first Web page ever, and I think it's great! I'll be updating my page once a month, so be sure to come again.</P>
    <HR>
    <H2>Groovy Links</H2>
    <P>
    <UL>
    <LI><A HREF="http://www.apa.org">The American Psychological Association</A></LI>
    <LI><A HREF="http://www.usmint.gov">The United States Mint</A></LI>
    <LI><A HREF="http://www.ci.chi.il.us/Tourism">Exploring Chicago</A></LI>
    </UL></P>
    <HR>
    <H2>My Summer Vacation</H2>
    <P>
    <IMG SRC="vacation1.jpg" ALIGN=left ALT="me being chased by a crab! WIDTH=100 HEIGHT=133>
    This summer my entire family traveled to Florida for vacation. We relaxed on the beach for the first few days. I enjoyed lounging on the beach after my hectic week of finals. By the middle of the week, though, we were all eager to get to our real destination: Disney World! </P>
    <BR clear=left>
    <HR>
    <P>
    Return to <A HREF="#top">the top</A>.<BR>
    Questions? Comments? Suggestions? <A HREF="mailto: rjones@luc.edu">E-mail me!</A><BR>                  
    Revised: March 20, 2001</P>
    </BODY>
    </HTML>

  4. Select File, Save from the menu bar, and save the document as index.html.
  5. To view the page, open Netscape and choose File, Open Page. (In Internet Explorer, choose File, Open.)
  6. Click Choose File (or Browse), find the directory and folder where you saved the document, and double click index.html. Click Open.
  7. If you added your own image to the "vacation" section, be sure you saved it in the same folder as your HTML file, or it will not appear. Follow the various links to make sure they work.

What's Next?

After you've coded a document, you need to transfer the file to a Web server. This step is explained in Using Filezilla.

Edit this page