Hypertext Markup Language (HTML) is a syntax used to format a text document on the web. These documents are interpreted by web browsers such as Internet Explorer and Netscape Navigator.
HTML can be created as standard ASCII text with "tags" included to pass on extra information about character formatting and page layout to a web browser. The fact that HTML is, in essence, ASCII text is what makes it so universally compatible. This fact also makes it easy to edit: almost all computers are equipped with a text editor that can be used to edit HTML.
HTML pages can be created in a number of ways. An HTML page is essentially a text document. You can create one in the simplest of text editors such as Microsoft Notepad in Windows, SimpleText in Mac OS, or Pico in Unix. Using these tools, you will need to edit the HTML code and insert HTML tags where necessary. You can also create pages using WYSIWYG (What You See Is What You Get) editors which do most of the work of coding for you. With WYSIWYG editors, such as Macromedia Dreamweaver and Adobe GoLive, you can type in a page as you would in a word processor, and the software adds formatting tags where necessary. You can then look into the code for fine-tuning.
Note: There are some WYSIWYG editors that do not create good HTML code. For instance, Microsoft FrontPage and particularly Microsoft Word will add extra tags that can make an HTML document quite large. Larger documents take longer to download. While you may not notice this much while on campus at NIH, modem users at home can be inconvenienced by long waits.
To save a file as HTML, open the text you wish to edit or type it into Notepad, and choose "File...Save As..." from the menu bar. Under "File name" give your file a name and change its extension from ".txt" to ".html." Under "Save as type" switch to "All Files" then click "OK." Notepad will save your file as ASCII text, and the ".html" or ".htm" extension will allow your browser to recognize it as an HTML file. (Hint - When naming an HTML file, it is a good idea to use a name without any spaces or uppercase letters. So, if you wanted to name a file Test page, some options would be testpage or test_page.)
To open your file in Netscape, choose "File...Open Page..." from Netscape's menu bar, and click "Choose File." Navigate to the drive and directory in which you saved your HTML, and double click on the file.
To edit your HTML, go back to Notepad, make your changes, and choose "File...Save" from the menu bar. Then go back to Netscape, and click the "Reload" button to bring in your latest changes.
Tags are what we use to structure an HTML page. Tags start with a '<', then the command, and end with a '>'. For example, the center tag is '<center>'. To stop centering something, we need an ending, or closing tag. Closing tags look exactly like opening tags, except after the first '<' there is a '/'. In other words, the closing tag for center is '</center>'.
An HTML document has a definite structure that must be specified to the browser. The HTML's beginning and end must be defined, as well as the document's HEAD (which contains information for the browser that does not appear in the browser's main window) and its BODY (which contains the text that will appear in the browser's main window). The use and order of tags that define the HTML structure are described below.
| <html> | Marks the beginning of your HTML |
| <head> | Begins the heading section of an HTML document |
| <title> ... </title> | Gives an HTML document a title that appears on the browser menu bar, also will appear on search engines or bookmarks referencing your site (must appear between the <HEAD> ... </HEAD> tags; should be straight text, no tags |
| </head> | Defines the end of the heading |
| <body> | Defines the body of an HTML document (text contained within the <BODY> … </BODY> tags appears in the main browser window). Can be used with "BGCOLOR", "TEXT", "LINK", and "VLINK" attributes |
| </html> | Defines the end of your HTML document |
The following tags are used for character formatting (bold, italicized or underlined text, for instance) and page layout (where and in what context that text appears on the page). These tags are used in the body of an HTML document only.
| <!--...--> | Comment. This is a note for you. It will not be visible on the web page. |
| <h1> ... </h1> | Heading tag. <H1> through <H6> are valid. Can be used with the "ALIGN" attribute. |
| <p> ... </p> | Sets a paragraph apart from other text. Adds a line break after. </P> is optional. Can be used with the "ALIGN" attribute. |
| <br> | Line break (new line). Can be used with the "CLEAR" attribute. |
| <hr> | Horizontal rule. Can be used with "SIZE", "WIDTH" and "NOSHADE" attributes. |
| <ol> ... </ol> | Defines the beginning and end of an ordered list (numbered). |
| <ul> ... </ul> | Unordered list (bulleted). |
| <li> | List Item. Must appear before each item in any of the above lists to set it apart from other items. |
| <center> ... </center> | Centers any item or group of items |
| <em> ... </em> | Emphasized text (usually italic). |
| <strong> ... </strong> | Strong emphasis (usually bold). |
| <code> ... </code> | A sample of code (usually courier font). |
| <font> ... </font> | Changes the appearance of the text in your page. Can be used with "SIZE", "COLOR" and "FACE" attributes. |
| <table> ... </table> | Creates Table. Can be used with "BORDER", "ALIGN", and "WIDTH" attributes. |
| <tr> ... </tr> | Table row |
| <th> ... </th> | Table header. Can be used with "ALIGN", "VALIGN", "COLSPAN", "ROWSPAN", and "WIDTH" attributes. |
| <td> ... </td> | Table data. Can be used with "ALIGN", "VALIGN", "COLSPAN", "ROWSPAN", and "WIDTH" attributes. |
<A HREF="http://some.web.server/Document.html"> ... </A>
Creates a hypertext link to another page.
<A HREF="http://some.web.server/Document.html#AnchorName"> ... </A>
Creates a link to an anchor in another web page.
<A HREF="AnchorName"> ... </A>
Creates an anchor within a document that can be linked to.
<IMG SRC="filename.ext">
Inserts a graphic into the web page. "SRC" is a required attribute. "HEIGHT", "WIDTH", "ALT", "BORDER" and "ALIGN" are optional attributes.
Some characters that have special uses or meanings for browsers may not always appear as you intend in your browser. To get a browser to display a character without applying that character's special use, "escape sequences" are used. Below are a few frequently used sequences.
| Character | Numeric Entity | Character Entity | Description |
|---|---|---|---|
| " | " | " | Double Quotation Mark |
| # | # | Number Sign | |
| % | % | & | Ampersand |
| < | < | < | Less Than |
| > | > | > | Greater Than |
|   | | Blank Space |