Creating a Web Page HyperText Markup Language

HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor, save as “text only with line breaks”  WYSIWYG  Front Page  HomeSite

Tags Explained  HTML tags mark elements of a file  i.e. titles, paragraphs, tables, lists  tags are usually paired to start and end the tag instruction  My Home Page  HTML is not case sensitive

Minimal HTML Document An HTML document is composed of a single element:... that is, in turn, composed of head and body elements:... and...

 Elements usually placed in the head element:... Specify a document title which will appear in the blue title bar of your page  Elements usually placed in the body element: text and formatting tags, hyperlinks, images Minimal HTML Document

Example: A Simple Example Welcome to the world of HTML!

Other Formatting tags  Headings  h1 largest - h6 smallest  Paragraphs  Alignment  Text Styles  Forced Line Breaks  Horizontal Rules

Attributes  Some tags may include attributes  Alignment (use with paragraphs, images, etc.)  Background, text, and link colors This creates a window with a black background (bgcolor), white text (text), and silvery hyperlinks (link).  Graphics Background

Inline Images  To include graphics on a page, use the img src tag.  Use image files with.gif or.jpg extensions  Example:  URL of image file can be substituted for name of file  Size the image with height and width atributes

Adding Links  start with:  follow with the text that will serve as the hypertext link in the document  end with the ending anchor tag  Example: My Resume

Additional Information  A Beginner’s Guide to HTML  HTML Quick Reference

Web Page Homework  Create a Web page with:  title  graphic  link to something  varying type sizes with some bold or italic  background color besides gray or white  horizontal rule  These are the minimum requirements. You may add more if you want.

Steps  create your file in Notepad  save file as index.html in h:\Personal  all images and link files should also be in h:\Personal  use Explorer or Netscape to view the file  Choose menu item File, then Open, and Browse to find your file  Edit the notepad file and view with the browser until web page is complete

Design Tips  Use restraint with colors and backgrounds  Avoid big stuff  Don’t use blinking messages  Make reading easy on the eyes  Keep offensive content off your page  Keep it simple  Edit your pages