Brief Overview of HTML

HTML is based on Logical Formatting Tags

1. Tags are written in all caps
2. Tags are contained within < and > signs
3. As you look over this web page, compare it with the source file. By examining the source file you will see how all of the tags are used to create it.
4. Sample tags:
   • P = paragraph
   • HR = Horizontal Rule
   • BR = Line Break
   • IMG = Image
   • LI = List Item

Many tags function as containers

• Beginning tag: <CODE>
• Ending tag: </CODE>

1. HTML
2. HEAD
   1. TITLE
3. BODY
   1. Headings, levels 1 through 6 (H1, H2, H3 . . . H6)
   2. FONT
   3. Bold, Italic, Underline (B, I, U)
   4. Strong emphasis (STRONG), Emphasis (EM)
   5. LISTS
      • Ordered List (OL, numbered)
      • Unordered List (UL, bulleted)
   6. A = Anchor (specifies target to go to when the link is clicked)
   7. ADDRESS

Tags have characteristics which are specified by parameters with designated values

1. Parameters are written in all caps; their values are usually written after an equal sign, within quotes, and in lower case.
2. ALIGN = left, right, middle, top, bottom
3. WIDTH, HEIGHT (values in pixels or percent of window)
4. SIZE
5. COLOR
6. Image address
   1. <IMG SRC="address">
   2. Images must be in either ".gif" or ".jpg" format
      (Claris Home Page will convert to gif automatically when an image of another format is pasted into it.)
   3. Images are stored in an "images" subdirectory of the "natsci" directory.
   4. Gifs are scaled to the size of the browser window unless WIDTH and HEIGHT are specified; this produces unwanted distortion. (Claris Home Page automatically specifies the size of the image for you.)
7. Text address
   1. <A HREF="address">text</A>
   2. Web page (page.htm or page.html)
      HyperNote
   3. Named section of web page (page.htm#name or page.html#name)
      Internet Links section of the Division of Natural Sciences and Mathematics
   4. Case matters: be sure to match the case with the actual page name.
      That is, don't use "Page.htm" if the actual page is titled "page.htm"
   5. For the convenience of Windows 3.1 users, we prefer ".htm" to ".html"
8. Address location
   1. Natural Sciences Division website directory structure:
      • The "Academics" directory on the OBU server includes a "natsci" directory for our Division. Our Division's home page address is:
        http://www.okbu.edu/Academics/natsci/index.htm
      • Within the "natsci" directory are the following Department subdirectories: biology, chemistry, mathematics, general (for miscellaneous pages such as this one), earth (earth sciences), ed (science eduction), planet (planetarium), histsci (history of science), us (unified studies natural sciences), and "images." An example is the chemistry home page:
        • http://www.okbu.edu/Academics/natsci/chemistry/index.htm
      • Directories within each of these are determined by department webmasters. An example is the Basic Celestial Phenomena home page within the Planetarium website:
        • http://www.okbu.edu/Academics/natsci/planet/bcp/index.htm
   2. To link to an address in the same directory: "page.htm"
   3. To link to an address in a lower directory: "subdirectory/page.htm"
      • This page is located in a "general" subdirectory with this address:
        http://www.okbu.edu/Academics/natsci/general/webdev.htm
      • Link from Division page to this page: "general/webdev.htm"
      • Include as many subdirectories as necessary, separated by slashes.
   4. Go up as many directories as needed by adding "../" per step.
      • To link to an address up one directory: "../page.htm"
      • Up two directories: "../../page.htm"
      • Link from this page to Division page goes up one directory: "../index.htm"
      • Links from Basic Celestial Phenomena home page:
        • Up one directory to Planetarium home page:
          "../index.htm"
        • Up two directories to Division home page:
          "../../index.htm"

Graphical and layout consistency are gradually and incrementally achieved

All of the following suggestions are optional guidelines, not rules. Academic pages are not subject to the same design criteria as public relations pages. Many can be implemented gradually and on an incremental basis.

General document guidelines

1. Frames are unpredictable. With frames it is harder to ensure proper navigation in complicated and constantly evolving websites; moreover, Netscape and Internet Explorer do not support them in the same way with reproducible results.
2. Tables are acceptable, since they are supported by most browsers used on this campus (e.g., Netscape and Internet Explorer).
3. Use the following information in the BODY element:
   <BODY LINK="#146D37" VLINK="#3204FB" BACKGROUND="images/white.jpg">
   1. The LINK parameter specifies a bison green color for hypertext links.
   2. The VLINK parameter specifies a blue color for used links.
   3. The BACKGROUND parameter specifies a quick-loading, white, textured image that is tiled as a background. It is stored in the "natsci/images/" directory, so use "../images/white.jpg" to use it from a page located in a natsci subdirectory (such as this page; see "Address Location" discussion above).
4. Organize the page with Headings levels 1 through 5. Minimize extra formatting of headings.
5. Place a green sphere to the left of level 2 headings ("images/greensphere.gif").
6. Minimize use of "click here," "home page," and wordy link text.
7. Pictures are a thousand times slower than words. Minimize the use of them (or use thumbnails) on parent pages.
8. Break up a long page into multiple shorter pages.

Top of page

1. Title (Heading level 1) centered at top between two horizontal rules (or between special bars specific to each department).
2. For navigational convenience include a link to the Division page, to the Department page, and to the parent page in a text navigation bar at the top. (H6)
3. The navigational bar may also include significant sections in the web page (but consider breaking up a multi-sectioned web page into several smaller pages).

Bottom of page

1. Green back arrow and OBU Bison gifs.
2. Put email contact at the bottom of each page with "mailto" anchor.
3. Link from bottom of each page to Division Home Page and to Oklahoma Baptist University.
4. Date most recently updated.

Student Portfolios

• Template for OBU Science Division Student Portfolio.
• Use this template to help you get started creating your own professional web-based portfolio. Save it as a source file by choosing Save As from the File menu in Netscape.
• Make desired changes in any text editor.
• Submit your complete student professional portfolio on a floppy disk to Kerry Magruder (Mac or PC) or Mark Hemric (PC). Or simply paste your HTML document into an email note and email it. We will post it on the Division website. Update it as often as you wish.
• Print the page to use as your curriculum vita, or simply refer potential employers to your web address. Use it as a reference for summer research, grant applications, or applications for graduate school.
• Each student portfolio is placed in the "portfolios" directory of the "natsci" website, within a subdirectory named according to each student's surname.
  • Thus, a link from the Division home page to Jane Doe's portfolio entry page would be written like this:
    <A HREF="portfolios/doe/index.htm">Jane Doe</A>
  • A link from the Chemistry Department home page to Jane Doe's portfolio entry page would be written like this:
    <A HREF="../students/doe/index.htm">Jane Doe</A>
• From the entry page you may link to scanned or HTML versions of essays, project reports, or other documentation of your professional experiences at OBU.
  • A link from your entry page to supporting documentation in your own subdirectory would be written like this:
    <A HREF="report.htm">Project Report</A>
  • Provide photographs to be scanned to Kerry Magruder or Mark Hemric. A link from your entry page to a scanned image would be written like this:
    <IMG SRC="photo.gif">
  • A link from your entry page to a Departmental home page would be written like this:
    <A HREF="../../chemistry/index.htm">Chemistry</A> home page

HTML web links and reference

1. HTML Sourcebook, by Ian S. Graham. This easy-to-understand printed book is available for reference in the Division Office.
2. Use web page editing software to generate web pages and to manage links and images within a website.
   • Edit a document in either HTML code or as What-you-see-is-what-you-get (nearly; images don't always display precisely as in Netscape).
   • Switch from WYSIWYG mode to HTML mode with the click of a button. (A great way to learn code in the first place.)
   • Conveniently insert links in multi-directory websites.
   • Conveniently manage images and confirm that all necessary images are present.
   • Since many of us use Claris Home Page, a manual is available for reference in the Division Office.
3. HTML helps:
   1. Bare Bones Guide to HTML
   2. HTML Language (excellent)
   3. Ten Commandments of HTML (excellent)
   4. Dark Side of HTML (what not to do)
4. Layout tips and page design principles:
   1. Web Weaving: Composing Good HTML
   2. Pug's Guide to Creating a Successful Web Page
   3. The Home Page Home Page
5. Bells and whistles:
   1. HTML Goodies
   2. Web Developer's Virtual Library (packed!)
6. Miscellaneous:
   1. The Home Page Maker (automated create-your-own web page)
   2. Web Etiquette
   3. World-Wide Web Guide

Page made with HyperNote and Claris Home Page
Kerry Magruder, Email