1. Introduction HTML (Hypertext Markup Language) is a programming language for creating World Wide Web documents. Because these documents must be kept small in order to be transferred over the Web, and because Web documents should be device-independent (able to be read by any platform or browser), HTML is based on document structure and not on specific text formatting. The structure of a document is defined using tags. For example, rather than assigning a specific set of formatting instructions (font, size, style, alignment) to a headline, you assign a tag, such as (for Heading, level 1). Using HTML is like using style sheets in a word processing or page layout program. All text in a Web document is assigned a tag (or style). Knowing basic HTML code is valuable, even if you create your Web pages using a graphic user interface (GUI) such as FrontPage or Dreamweaver. HTML is the foundation of every web page and a good understanding of it may be required to “tweak” the HTML code generated by your GUI program. Introduction to HTML Handout by Karen Rohne and Allen Crean, 2000 HTML IntroductionIntroduction

2. A Brief History of HTML Interest in and use of the World Wide Web has been expanding at a phenomenal rate. As the Web grows, so must its vehicle of communication, HTML. The HTML 2.0 specification is dated November, 1995. Since then, the HTML 3.0 draft specification expired on September 28, 1995, without becoming recommended, and HTML 3.2 became a W3C (World Wide Web Consortium) Recommendation on January 14, 1997. Now we have the public draft for HTML 4.0, announced on July 8, 1997. This draft is almost certain to undergo changes before being accepted by the W3C as a Proposed Recommendation--if it does, indeed, ever become a recommendation. In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers' versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively. Designing for the Web can be a confusing activity, indeed. Brief History History

3. Structure Web Document Structure A Web presentation is made of one or more Web pages that are linked together. Web pages can also be referred to as Web documents. A Home Page is the first, or top, Web page. Web presentations are organized either linearly or hierarchically, although often Web pages are a combination of theses two types. If you have a linear structure, each page follows sequentially from the page before. For example, if you created a “how-to” site for planting begonias, you would create a Home Page generally defining the process, then the next page would be Step 1 of the planting process, the next Step 2, etc. A hierarchy is a more common way of organizing a Web presentation. If you defined the begonia-planting page as a hierarchy, then the Home Page might describe the general planting process and have a menu of the various stages and features of planting. For example, one page may describe the soil, another the types of begonias, and a third the actual planting process, step-by-step. Introduction to HTML Handout by Karen Rohne and Allen Crean, 2000 Structure

4. Writing Writing HTML Writing HTML Documents HTML documents are written in plain ASCII text. ASCII (American Standard Code for Information Interchange) is the standard for code numbers used by computers to represent all the upper and lower-case Latin letters, numbers, punctuation, etc. There are 128 standard ASCII codes each of which can be represented by a 7 digit binary number: 0000000 through 1111111. You can use any text editor to create HTML documents. For example… Word Notepad Works Word Perfect Word Pad When saving your Web document you must use the extension.htm or.html.

5. Tags HTML Tags HTML tags are enclosed in angle brackets and are not case sensitive. or There are two types of tags container and empty. Container tags have both an opening and a closing and are used to surround the text within your document for presentation by the tag. The closing tag name is preceded by a forward slash. Welcome to my homepage Empty tags use only an opening and tell the browser to perform an instruction such as breaking to the next line, inserting a horizontal line or inserting an image.,,

6. Basic Tags Creates an HTML document Sets off the title and other information that isn't displayed on the Web page itself Sets off the visible portion of the document Header Tags Puts the name of the document in the title bar Body Attributes Sets the background color, using name or hex value Sets the text color, using name or hex value Sets the color of links, using name or hex value Sets the color of followed links, using name or hex value Sets the color of links on click Tags

7. Text Tags Creates preformatted text Creates the largest headline Creates the smallest headline Creates bold text Creates italic text Creates teletype, or typewriter-style text Creates a citation, usually italic Emphasizes a word (with italic or bold) Sets size of font, from 1 to 7) Sets font color, using name or hex value TagsTags

8. Tags Links Creates a hyperlink Creates a mailto link Creates a target location within a document Links to that target location from elsewhere in the document Formatting Creates a new paragraph Aligns a paragraph to the left, right, or center Inserts a line break ndents text from both sides Creates a definition list Precedes each definition term Precedes each definition Creates a numbered list Precedes each list item, and adds a number Creates a bulleted list A generic tag used to format large blocks of HTML, also used for stylesheets TagsTags

9. Tags Graphical Elements Adds an image Aligns an image: left, right, center; bottom, top, middle Sets size of border around an image Inserts a horizontal rule Sets size (height) of rule Sets width of rule, in percentage or absolute value Creates a rule without a shadow You can find a listing of these tags and more at… http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ Ta gs

10. Welcome to my home page This is an example homepage for you to modify This is an example of where you could put the body of you text. Type away and see what you could do. Blah, blah, blahhhh, bla, blah, blah, blah, blahhhh, bla, blah, blah, blahhhh, bla, blah, blah, blah, blahhhh, bla, blahhhhhhhhhh! Example Code Code

11. This is an example of an unordered list You can add as many items as you would like List away! Here is an ordered list For the money For the show <!-- img src is tag to insert an image, alway insure your image is on the server or else the link will appear broken to the viewer--> Last modified January 1, 2002 Send your questions or comments to: Me at my email address Go to UM-St. Louis Home Page Example Code Code

12. Example Example Code