CSC106 Intermed PC Appls and Programming

Introduction to HTML

HTML

A web page is a document written in HTML, or Hypertext Markup Language. HTML consists of instructions to the browser that describe the elements of a document and the formatting of the document. These instructions are used by the browser to format the page. HTML tags are added to your text to describe document elements. Tags are commands inside angle brackets (< and >).

Tags can be in upper case or lower case, and can be on a separate line or the same line as the text. Extra white space within text is ignored; one blank will have the same effect as 20 consecutive blanks. One or more newlines is treated as one white space character. The browser will use word wrap to join and split lines when necessary to fit text into the browser window.

Many tags come in pairs of starting and ending tags. Ending tags have the same name as their starting tag but they start with a /. Every HTML document has two parts: the head and the body. The head contains information about the document; the body contains the document itself. The outline of a document looks like:

This contains three pairs of tags. The <html> and </html> tags must surround everything in the document. The <head> and </head> tags surround the head of the document and the <body> and </body> tags surround the body of the document.

The tag most commonly used in the head of the document is the <title> tag, which puts text in the title bar of the browser window.

Some of the tags you can use in the body of the document are:

<p> (paragraph)
<hr> (draw a line across the page (there is no ending tag for <hr>))
<br> (create a line break (end the previous line of text); also has no ending tag)
<h1> … <h6> (heading - the lower the number, the larger the heading)
(any text inside this tag is a comment)
<ul> (unordered list; each item in the list is preceded by a bullet)
<ol> (ordered list; each item in the list is preceded by a number)
<li> (list item; used to add an item to an ordered or unordered list)
<em> (emphasis; the text it surrounds will be emphasized (usually italicized))
<strong> (strong; the text it surrounds will stand out (usually bold))
<b> (bold; the text it surrounds will be bold)
<i> (italic; the text it surrounds will be italicized)
<tt> (teletype; the text it surrounds will be formatted in a fixed width font)

Tag Attributes

Some tags contain attributes, which modify or help to specify the meaning of the tag. Like tag names, attribute names are not case sensitive. Tag attributes appear inside the < and >, after the tag name. If an attribute has a value, the attribute name is followed by an equal sign (=), and then the value. Spaces around the equal sign are acceptable but optional. If an attribute value is a number or a single word, it can be added after the equal sign. Any other values should be enclosed in quotes ("). For example, a heading tag can contain the align attribute, which tells the browser where to place the header within the line -- left aligned, right aligned, centered, or justified (spread out to fill the entire line):

     <h1 align=center>This Heading Will Be Centered</h1>

Adding an Image to Your Page

Use an image tag in your document if you want to include an image. The image tag looks like:

     <img src="URL of your image file">

The image tag has no ending tag. For example, if you have a file on your disk called mypic.gif, you can include it in your web page with the following tag:

     <img src="mypic.gif">

The location of the image in the document depends on where you put the image tag. All text before the image tag will appear before the image. All text after the image tag will appear after the image.

Adding a Link to Your Page

Use an anchor tag to create a link. To create a link you must include two pieces of information: where the browser should jump when the user clicks on the link, and the text (or image) that the user clicks on to jump to the link. The anchor tag looks like:

     <a href="URL of the page to jump to">text user will see</a>

For example, you can create a link to the New York Times web page (http://www.nytimes.com) where users will see the words "The New York Times" with the following anchor tag:

     <a href="http://www.nytimes.com">The New York Times</a>

Here is what the link looks like if you actually include this anchor tag in your page. The New York Times Try clicking on the link and see what happens.

Creating and Viewing Your Page

To create a web page you must create a file which contains your information and the HTML tags that tell the web browser how to format the information. There are two ways to do this: use a general editor, and type in your text and your tags, or use an HTML editor that adds the tags for you. For now, we will add our tags manually. For this you can use any edit program that allows you to create text files. In the lab you can use the notepad program or the textpad program to create your HTML document.

Once you have created your page in notepad or textpad, save it on your A: disk. Make sure that the extension for your file is html or htm. Also make sure that you change the Save As type to All Files. For example, you could name your file first.html or mypage.htm, or any other name that ends with html or htm.

After you have saved your file you can view your page in Firefox or Internet Explorer (IE). To view your page in Firefox, choose Open File... from the File menu. An open file window will appear. You can choose your file in this window. To view your page in IE, choose Open... from the File menu. An Open dialog box will appear; click on Browse... and a window will appear that will allow you to choose your file.