IUPUI integrated images

Web by Design logo
Home Tutorials Resources Kudos CV

 

 

HTML Basics

Table of Contents

Getting Assistance at IUPUI

On the IUPUI campus there are two types of Web home pages: personal and institutional (for our purposes, "institutional" refers to faculty course and research pages, departments, IUPUI schools, and university sanctioned organizations).

This handout, while it may contain information beneficial to anyone creating home pages, is written to support IUPUI faculty in their Web endeavors. Other IUPUI sources for training in Web page creation and HTML include the Center for Teaching & Learning, the Community Learning Network, which provides both credit and non-credit courses, and the UITS Education Program.

Back to Top

Setting Up A Home Page

Personal home pages, sometimes including syllabi and course pages, are housed in your personal account on the personal home page server. The URL for personal pages is http://mypage.iu.edu/~networkid. Institutional home pages, including course and research interests, schools and departments, may be housed on the Champion server under an institutional Network ID. The URL for institutional Web pages housed on Champion is: http://www.iupui.edu/~networkid. In addition, your school or department may provide space on its Web server for your use.

You must have an account on the machine that will house your Web page(s). To see the network services you currently have, go to the Account Management home page. Click in the line to note your IU status and what you need to do, then click Continue. NOTE: You will need your IUPUI Network ID and password to continue. For assistance, visit the The Support Center's Web site, E-mail a consultant, or phone the Support Center at (317) 274-5357 (274-HELP). IUPUI faculty can also obtain assistance through the Center for Teaching and Learning, (317) 274-1300, UL 1125, or your local support provider.

To request access (either as a new account or as additional services on an existing Network ID) to either the Champion or Personal Home Page server, use your Web browser and go to the Account Management Web page and follow the prompts.

After you have created your HTML and graphics files and tested them on your local workstation (for more information, see testing your Web page), upload them via ftp to the Web server. At that time you can consider the process like an unlisted phone number. You, and those you tell your URL to, will know how to reach your home page, but others will not. Then, after you are satisfied that the page(s) are ready for "public consumption," your department or school may, at their discretion, place a link on their pages to point to your course page(s).

Back to Top

Educational Home Page Examples

DISCLAIMER: With any written documentation giving net addresses, you should try the address and if you do not find the file for which you are searching, be bold and explore a little. It may be that the site has simply renamed a file or directory or released a newer version than that which was documented.

TIP: Try deleting sections (within the forward slash—/ ) of the URL from right to left to see if the file name or directories have been changed.

Back to Top

HTML Editors

Many HTML editors can be found on the Internet and most computer applications now come with HTML editors built into the application itself, allowing you to create your document, then "Save as HTML" or "Save as Web Page". HTML editors allow you to create your documents in a word processing-like environment, generally in WYSI–A–WYG (What You See Is –Almost– What You Get) mode so that you seldom need to directly add HTML codes or understand exactly how they are working.

FrontPage is the Microsoft HTML editor. You can read a tutorial on creating Web pages using FrontPage 2000, FrontPage XP, or FrontPage 2003—since they are Microsoft products, they have a familiar interface if you are already used to working in Word. If you are using Word 97, you can use the online tutorial How to Create Web Pages with Word 97 HTML Editor that describes the tool bars, how to perform basic Web page creation, and links to additional resources.

NOTE: Word 2000 creates eXtended Markup Language (XML) with Cascading Style Sheets (CSS) rather than HTML. It also embeds Office specific tags. The effect of this that the character count of your document is nearly doubled. Particularly if you are going to use Oncourse, you should NOT use Word 2000 to convert a word processed document into a Web file. Used, instead, FrontPage.

DISCLAIMER: Editors are simply computer programs and are only as good as their creator(s). While most HTML editors are good, if your document is complex with a number of specially formatted sections (especially tables and/or columns), you will most likely find that you need to go directly to the HTML code and "clean-up" sections in order to have it display as good as possible or to correct codes that may have become "confused" during translation or use a stand-alone HTML editor such as FrontPage.

Some URLs to check out (in no order of recommendation, whatsoever):

Back to Top

About HTML

HyperText Markup Language (HTML) is a formatting "language" that World Wide Web browsers (such as Netscape, Internet Explorer and Lynx) read in order to correctly display home pages. Text files are embedded with "tags" that cause the browsers to display text in certain ways. There is a complete example to which you may refer as we discuss a simple HTML document. You may also use Web By Design as a resource for any of your HTML/Web work.

An HTML document is created by placing tags within a text document. The tags tell a Web browser how to display a given home page. Tags are always found within angle brackets, < >, and are generally used in pairs— "containers"—<open tag>…some text…</close tag>. Tags are closed by placing a forward slash (/) in front of the second tag.

For example,

<B>some text written here</B>

would cause the following display:

some text written here

or

<I>some more text written here</I>

would cause the following display:

some more text written here

You may type a file using your favorite word processor (any one will do, even SimpleText or Notepad) and apply the tags as you go (either manually or with an editor's assistance), or you may open an existing text or word processed file within a word processing program or HTML editor and apply the tags manually or with the assistance of the editor.

You may occasionally find HTML documentation where some tags are opened but not closed. While this generally does not effect the page display, as browsers and the HTML "language" itself become more sophisticated, it may not remain true. For best results throughout the lifespan of your document, use both opening and closing tags.

HTML documents always follow this pattern:

<HTML>
<HEAD>
<TITLE>some title text here</TITLE>
</HEAD>
<BODY>
lots of stuff here
</BODY>
</HTML>

The <HTML> tag indicates the document type and all the pieces of the given HTML document are found within the <HTML>…</HTML> container tags.

The <HEAD>…</HEAD> container tags incorporate background information, such as editor-specific information, the title information, and other pieces of information used by search engines, documentation, and background information useful to the developers or users of the presentation.

The <TITLE>…</TITLE> container tags contain information that will appear in the colored ribbon at the very top of the browser window. It should contain a short, concise descriptor of your page.

The <BODY>…</BODY> container tags contain all the information you wish to present to your audience.

Back to Top

Heading Tags

There are six levels of headings that you can use in an HTML document: <H1>…</H1> through <H6>…</H6>. Headings tags always embed a line of space preceding and following the heading text to set it off from the body text and are always presented as bold. <H1> tags are the largest (about 14 pt.) and <H6> tags are the smallest (about 8 pt).

This text is written with an H1 tag.

This text is written with an H2 tag.

This text is written with an H3 tag.

This text is written with an H4 tag.

This text is written with an H5 tag.
This text is written with an H6 tag.

Back to Top

Body Tags

Since browsers read from HTML tag to HTML tag, you must be very specific in indicating when you wish to start (and when you wish to stop!) any given formatting type. These type of tags are referred to as "container tags" since the text "contained" within the starting and stopping tags is the information affected.

The paragraph container tags start and stop paragraphs: <P>…</P>. Within the paragraph container you can type text, embed other tags, display images or tables, or create links to other files or locations. The paragraph tag <P> causes a blank line to separate paragraphs.

The horizontal rule line does not have to be closed. Whenever you use the <HR> tag, a "shadowy" horizontal rule line is placed in your document. Rule lines are useful for separators within your document but should be used minimally since they often indicate to the reader: "stop reading here."

The second tag that does not have to be closed is the <BR> tag. The break tag functions like a hard return.

Special emphasis tags include <B>…</B> (for bold emphasis) and <I>…</I> (to create italics). You can create underline by using the container tags <U>…</U>. Keep in mind, though, that many users associate underlining with a link and may attempt to "click" on underlined text.

To create indented lists with either bullets or numbers, you will use tags for unordered (bulleted) and ordered (numbered) lists in combination with the list item <LI> tag.

An unordered list example:

<UL>
<LI>Apples<LI>
<LI>Pears<LI>
<LI>Bananas<LI>
</UL>

will result in:

An ordered list example:

<OL>
<LI>Introduction<LI>
<LI>Objectives<LI>
<LI>Conclusion<LI>
</OL>

will result in:

  1. Introduction
  2. Objectives
  3. Conclusion

You may also "nest" tags within one another to create "sub-lists."

For example,

<OL>
<LI>Chapter One<LI>
<LI>Chapter Two<LI>
<UL>
<LI>Part A<LI>
<LI>Part B<LI>
<LI>Part C<LI>
</UL>
<LI>Chapter Three<LI>
</OL>

would result in:

  1. Chapter One
  2. Chapter Two
  3. Chapter Three

It is important when nesting tags that they be closed in the reverse order opened. For example if you created bold italics, the code would be <B><I>bold italics</I></B>. Notice that the emphasis tag was the last one opened and, therefore, was the first one closed. This is one area where most of the popular HTML editors "fall down on the job." Invariably, the tags are closed in the same order as they were opened, rather than the reverse order. Most times, this does not cause any problems; however, occasionally, you will find browsers that will simply ignore all but one of the tags since it is "confused" or will continue to display text in one or the other attribute even past the closing tag.

Back to Top

Hypertext Links

To add functionality to your home page, you will want to create hypertext links ("click-able areas") that your users can select to easily move to other locations, files and graphics.

There are three types of links: within the same document; to another document that resides in the same location as your main HTML document; and to an external site.

Let's assume the following home page scenario (NOTE: links to external sources do not exist):

Topics Covered in My Home Page:

 …(lots of stuff on page)…

About the Professor:

Back to Topics

 

And the HTML code that created the sample:

<A NAME="topics"></A>TopicsCovered in My Home Page:<BR>
<UL>
<LI><A HREF="#about">About the Professor</A><LI>
<LI><A HREF="syllabus.html">Course Syllabus</A><LI>
<LI><A HREF="members.html">Class Members</A><LI>
</UL>
<P>…(lots of stuff on the page)…</P>
<P><A NAME="about">About the Professor:</A></P>
<UL>
<LI><A HREF="resume.html">Resume</A><LI>
<LI><A HREF="publish.html">Published Works</A><LI>
<LI><A HREF="http://spcup.org/home.html">Society for Prevention of Cruelty to University Professors</A> Home Page<LI>
</UL>
<A HREF="#topics">Back to Topics</A>

Back to Top

About Images

Most of you will want to add at least an image or two to enhance your Web page. Images can cause your page to load more slowly, so you should take special care to choose them carefully so that they enhance and explain your textual information rather than just adding special effects to your page, and are ideally formatted and created for use on the Web.

Images used on the Web must be in ".jpg," ".gif," or ".png" format (This tutorial will focus on the gif and jpg formats). Each of the two graphics formats has its own special use—.gif formats are used with line art, images with large blocks of the same color, and black and white non-blended images; .jpg formats are used for four-color photographic images or those images with shades of gradient (such as a black and white or sepia photograph). Both formats compress your image into a smaller size, but it's important to use the one best suited for the image type. Because of the way the compression occurs, using the .gif compression, for example, to compress a photograph will actually INCREASE, rather than decrease, the file size.

The toughest part of using graphics is deciding exactly what type of image you want to include in your page.

The more time you spend with pencil and paper in designing the look and feel of your home page, the faster and more accurate the actual creation/finding of your graphic images will be. You should read through your text and decide where you would like to place images AND WHY. Just because you CAN use images in your home pages, doesn't mean that you necessarily SHOULD. Make sure that images enhance and supplement your text and are not just there because it's possible.

Back to Top

Inserting Images

Many users quickly become uninterested in your page if it takes too long to load, and images are the primary culprits. Images should be kept small unless you have a special one (and for something that needs to be large in order for detail to display, there are techniques such as creating a thumbnail—a click-able smaller photo that will link to the larger one, that will still enable your page to load quickly). It is useful to specify within the HTML document the size of the image (in pixels) that you want it to display. By including the size parameters, the browser knows "ahead of time" the amount of space it will need to retain in order to correctly display the image; therefore, the page loads faster.

NOTE: Although this is a way to "re-size" an image within the HTML document, rather than physically resizing images within a graphics package, keep in mind that the physical file size is still the same and it will take, therefore, the same amount of time to download and display as if you had left the display size large.

NOTE: If you use a large image on a page, Web courtesy dictates that you identify both the graphic type and the size so that the user can decide whether he or she wishes to view it!

To insert an image in your document, use the <IMG> tag. The file must be located in the same directory as the HTML file that is calling it or you must include coding for the path to locate the image file. You may also simply point to someone else's image.

For example, if you have a file "hibiscus.gif" in the same directory as your HTML file, to show the photograph, include the tag:

<IMG WIDTH=75 HEIGHT=125 SRC="hibiscus.gif">

This example shows the <IMG> tag with options WIDTH, HEIGHT, and SRC (source, the file name). Options may be placed within the tag in any order.

If the photograph belongs to me and resides in my directory, then you might consider simply pointing to my existing image file. To do this, rather than supplying the file name alone, you supply the URL where the file resides. Your tag would read:

<IMG WIDTH=75 HEIGHT=125 SRC="http://www.iupui.edu/~webtrain/Graphics/Photos/daisy.jpg">

Keep in mind that this option will involve the browser "going to" the location where this file resides in order to display the image; the result is increased load time of your page.

Remember, the "upside" is: if the image is modified, your page will automatically be updated. Ironically, that is also the "downside."

Many users use text-based browsers such as Lynx, turn off the automatic loading of images, or use text readers due to physical impairments. In any of these instances, images can not be displayed, resulting in a placeholder being displayed or the text reader attempting to interpret the image. To avoid these problems, you should specify an alternate text explanation of the image. To do so, include the option ALT within the IMG tag (the text alternate should be enclosed in quotes):

<IMG SRC="http://www.iupui.edu/~webtrain/Graphics/Photos/cow.jpg" WIDTH=89 HEIGHT=90 ALT="This is a picture of a Holstein cow">

Back to Top

Locating Images

The possibilities for locating images are not endless—but there are quite a few!

If you enjoy the "hunt," you may choose to surf the Internet for images. You will find that images on the 'Net range from buttons to personal line art to full color photographs. I have included a "starter" list in the Web by Design Resources for you. If you choose to surf for files, try using a keyword and the word "image."

For example, to search for images of eagles, I might use Dogpile and the search terms "eagle image." Google has an "Images" tab that will allow you to easily search just for images.

If you find an image on a home page that you wish to use, point your mouse cursor to the image. If you are using Windows, right click; if you are using a Mac, point and hold the mouse button. Then choose "Save File as"—Now it's yours to use!

CAUTION! You MUST be aware of copyright issues when using other people's work. You will find that some sites clearly explain that their images are for use in home pages. Others will state that you can use the images but must leave (or place) a copyright statement with/on the image. More often than not, however, you are on your own when it comes to retrieving images or other work from the 'Net. Just because it is easy to get and use, doesn't mean it is ethical to do so.

Back to Top

Creating Images

One of the most time-consuming, but personal, solutions is to create a digital image using a graphics application. There are many possibilities if you choose this route: PhotoShop®, Illustrator®, Freehand®, Painter®, Paintbrush®, MacDraw Pro®, etc.

If the artist in you (or in someone else you know) is better suited to paper, pen and ink or some other medium (such as photographs or slides), you may use a scanner to scan your image into a digital format that can be used on your home page.

With flatbed and slide scanners for both Macs and PCs, you can preview your scans, zoom and do other simple manipulations before choosing the final scan and saving the image in the desired graphic format.

Once your image is in a digital format, you may choose to manipulate the image. Suppose, for example, that you find an old photograph of your childhood pets, Dog and Cat. Unfortunately, Bossie the Cow is also in the photograph and your home page is only about dogs and cats. By using a graphics application, you can erase Bossie from the picture, paint the barn a brighter red, and erase the clouds on the horizon!

Back to Top

Converting Graphics

Most graphics packages allow you to save images in .gif or .jpg format. However, if yours does not, there are packages to do conversions for you. For example, PhotoShop, not only allows you do save the file in the necessary format, but will also allow you to "clean-up" the image if desired. In a pinch, you can even use FrontPage; just insert the image, then right-click the image and choose Picture Properties. Select either .gif or .jpg as the format to convert to.

Back to Top

Finishing Your HTML Document

Just as books have appendices, indices, forewords and glossaries, it is important to include a type of "footer" section in your Web page for your user's benefit. This type of information can be included in the <ADDRESS>…</ADDRESS> tag. The address tag is used for citing author information. I encourage this series at the bottom of each and every HTML document:

<ADDRESS>
Author's Name (or Issuing Department)<BR>
Creation Date (or Last Revision Date) (in form of: January 6 1989)<BR>
URL: http://www.your.org<BR>
</ADDRESS>

Back to Top

Saving Your HTML File

After you have typed your document, you must save the file. (Be sure also to save your file periodically as you are working on it. This will prevent your work from being lost in the event your computer loses power.)

If you are creating your HTML document by manually coding the tags:

  1. Choose FILE : Save As (NOT just SAVE—this would save the file in a word processing format). (NOTE: After the first time when the Save As command has recorded the location, file type and file name, you can safely use the Save button or menu option.)

  2. Change to the drive and directory in which you wish the file saved.

  3. Change the file type to "TEXT WITH LINE BREAKS (ASCII)" ("Text Only" also works, but your code, when viewed in the browser's view source will continue past the right margin).

  4. The file name must:
  1. Close the document.

If you are creating your HTML document in an HTML editor that inserts the tags for you, choose the "Save As HTML" option.

Back to Top

Testing The HTML File

Testing your file using Web browsers (e.g., Netscape, Internet Explorer, Firefox), allows you to see a more realistic representation of what your page visitors will see when they view your page on the Web.

NOTE: in the instructions below, "Web Browser," means Internet Explorer, Netscape, or Firefox. Sometimes menu choices are worded slightly differently in the various browsers. Alternate wording choices are in parentheses.

  1. To test an HTML Web file, start your Web browser.

  2. Choose FILE : Open (or Open Page).

  3. Click Browse (or Choose File).

  4. Change to the drive and directory where you saved your Web page file. When you see your file, click once on the file name to select it, then click Open.

  5. You will see that the browser has placed the file information in the text box. Click Open (or OK).

Now you will see a "working" copy of your Web page. If you have correctly placed your images in the same folder / directory, the images will display correctly in the working copy.

Remember, at this point, your HTML document is simply a file on your local computer (hard drive, floppy disk, or other removable storage media). No one can see your "goof-ups" except you (of course, they can't see your triumphs either!).

To test your file, start your Web browser and choose FILE : File Open.

By changing to the drive and directory where you saved your home page file, you can select your file and see a "working" copy of your home page. Later, after you have placed your graphic file(s) in the same directory, your graphics will also correctly display in the working copy.

Back to Top

Sample HTML Tagged File

Resulting Home Page

<HTML>
<HEAD>
<TITLE>Welcome to HTML 101</TITLE>
</HEAD>
<BODY>

<H1>
<IMG WIDTH=125 HEIGHT=100 SRC="../images/tutorial_images/basics_fall.jpg" ALT="Fall in Indiana">WELCOME TO HTML 101
</H1>

<HR>

<P>
This tutorial will instruct you in creating simple Web pages by manually coding the HTML tags. In addition to this resource there are many HTML guides and primers available on the World Wide Web including:
</P>

<UL>
<LI><A HREF="http://werbach.com/barebones/">The Bare Bones Guide to HTML</A><LI>
</UL>

<HR>

<P>
<B>Bits &amp; Bytes</B>
</P>

<P>
<A HREF="http://www.opd.iupui.edu/Units/CTL/index.asp">The Center for Teaching &amp; Learning</A> is dedicated to helping faculty learn, incorporate into the classroom and use technology. The Center is part of the <A HREF="http://www.opd.iupui.edu/">Office for Professional Development</A>
</P>

<HR>

<P>
<A HREF="http://www.iupui.edu/~webtrain">Return to Web by Design</A>
</P>

<ADDRESS>
Cynthia D. Hollingsworth<BR>
Last updated: May 3, 2007<BR>
URL: http://www.iupui.edu/~webtrain/tutorials/sample.html<BR>
</ADDRESS>
</BODY>
</HTML>

 

HomeReturn Home

alid HTML 4.01 Transitional Valid CSS