Introduction to HTML Programming

(1)

Introduction to

HTML Programming

Objectives

This course is designed give you a basic working knowledge of Hypertext Markup Language (HTML), including effective use of tags, proper syntax, and current standards. Throughout the 2 day course, we will examine the code behind several web pages as well as create a few of our own. Topics will include:

• The structure of an HTML document • Tags • Attributes • Syntax • Some HTML standards • Hyperlinks/Anchors • Images • Tables • (Forms) • (Frames) • File Management

(2)

Introduction

The World Wide Web (WWW) – an open community of hypertext-enabled document servers and readers on the Internet – is made up of pages, or documents written with HTML (as well as a combination of other programming and scripting languages like JavaScript).

Web pages can include text, images, sound, video, links to other HTML documents, etc. All of these elements are defined within the Hypertext Markup Language of a document so that client side browsers (like Internet Explorer and Netscape Navigator) can display the given information. The HTML is not displayed in a browser (unless Viewÿ Source is invoked), but rather gives the browser instructions on how to display the information. For example, a line of HTML code: <center><b><i>Happy Birthday!</i></b></center> would display the following in a browser:

Happy Birthday!

A system of paired tags and attributes give display information to a web browser. In the above example, the <center> tag indicates that the text (in this case, “Happy Birthday!”) will be centered on-screen; the <b> tag makes the text appear in bold type, while the <i> tag is used for italics. Each of these three tags has a corresponding closing tag: </i>, </b> and </center>. All closing tags begin with the forward slash (/) character. Any formatting or other instructions will be applied to the text, image, etc. between the corresponding opening and closing tags.

Also notice the order in which the closing tags appear. According to the HTML standard, you must close “nested” tags (tags that appear within other tags) by starting with the most recent and working your way back outward. While most HTML tags need to include their corresponding end tags, there are several that DO NOT require closing tags, such as the <br>, <hr>, <input>, <col> and <frame> tags. In most cases, web browsers will ignore an unnecessary closing tag.

A word of warning: HTML has definite limitations. While many tags will affect formatting and other display elements, HTML is not a word processing tool, a desktop publishing tool, or even strictly speaking, a programming language. HTML’s basic purpose is to define the structure and appearance of a document so that it may be viewed quickly and easily over a network. In fact, formatting should be only a secondary

consideration, given the fact that Microsoft and Netscape sometimes add their own nonstandard extensions to the HTML standards. So, it is a good practice to view all of the web pages you create in BOTH Internet Explorer and Netscape Navigator before posting them on a web server.

Tools

(3)

or Corel’s WordPerfect. They can also be designed with editors specifically designed for HTML composition, such as Note Tab (PC) or BBEdit (Mac). This last level of editors contain tools specifically designed for HTML editing. There are also several free and licensed graphical , or WYSIWYG (“what-you-see-is-what-you-get”) HTML editors available that will not be discussed in this class.

Once created (or edited), an HTML document can be opened or previewed in any Web Browser installed on your local machine. So, while your eventual goal (in most cases) will be to post your created web pages on a server so that anyone with Internet access can view them, it is not necessary for testing purposes.

Getting Started

Once you become familiar with HTML, creating and editing pages will become fairly simple. One step that goes a long way in simplifying this process is to use good file management techniques from the start.

• Create a new folder on your desktop and name it “public_html.” All web pages and associated files in this class will be stored inside this folder. *Note - web materials can be stored in folders with other names; we use public_html because of the web folders already in place on the Mailer server.

• To avoid problems later, use only lowercase letters, avoid using spaces or special characters (e.g. # ! * / \ ). These are generally reserved by various servers and operating systems for file paths, etc.

• Inside the public_html folder, create another folder called “images.” This will hold any graphics or other pictures we add to our web pages.

*Note - if you plan on adding other types of objects or documents to your web site (e.g. .wav files, Word or PDF documents for download or display, etc.), you may want to consider creating a folder for each category, such as “waves” or “word_docs.” When saving actual pages, use the same naming conventions (no spaces, all lowercase, avoid special characters).

The Structure of an HTML Document

In its simplest form, an HTML document contains these three sections: 1) head, 2) body, both nested inside an overall 3) html document. Thus, a simple HTML document would include the following sets of tags:

<html>

(4)

The <html> … </html> tags define the start and end of the HTML document. Although the HTML standard requires the inclusion of these tags, most browsers will still properly display HTML encoding in a document without these tags.

The <head> … </head> section contains information about the document (its title, for example).

The <body> … </body> section includes everything you want to be displayed by a web browser (text, images, etc.). This is where we’ll be doing most of our work.

If you open a web browser to any page on the Internet, you can see the HTML behind the page by using the VIEWÿ SOURCE menu option. Viewing the source code of existing web pages is a good way to familiarize yourself with the structure and syntax of HTML. Within the body of an HTML document, you can choose to be simple or complex with your content. For example, you may decide to add images, hyperlinks to other web pages, or simply text. The following example will display a paragraph of plain text in a web browser.

<title>Plain Text Example</title> </head>

<body>

This is a very basic example of an HTML document. It contains no formatting, no images, and no hyperlinks. The size of the browser window will determine where line breaks will appear.

</body> </html>

(5)

Here are a few things to observe from this simple example:

1. The title given in the head of the HTML code appears in the title bar of the browser.

2. Because there are no HTML instructions for formatting, line breaks, etc., the size of the browser window will affect the display of the page. This is an important consideration in designing web pages. What looks good on full-screen may look bad when viewed in a smaller window.

By applying some simple formatting tags to our example, we can have some control over the final display of the web page.

<body>

This is a very basic example of an <i>HTML</i> document.<br> It contains minimal formatting, no images, and no hyperlinks. The size of the browser window may still affect line breaks.

</body> </html>

This is a preview in Netscape Navigator:

(6)

In the following example, the first-level heading (<h1>), bold (<b>), underline (<u>) and paragraph (<p>) tags have been added (as well as new content).

<body>

<h1>Introduction</h1>

This is a very basic example of an <i>HTML</i> document.<br> It contains minimal <b>formatting,</b> no images, and no hyperlinks.

<p>

The <u>size</u> of the browser window may still affect line breaks. </body>

</html>

There are six levels of headings in HTML, <h1> through <h6>. Most browsers use a diminishing character point sizes for each heading level, making <h1> very large and <h6> very small. Some browsers may even use center, bold, italics, underlining and even different colors to display the various headings.

*Note: Even the same version of a browser (e.g., Internet Explorer 4.5) on different platforms may display HTML differently. Again, this makes it important to preview your web pages in different browsers before posting them on the Internet.

Any text within the <b> tags is presented in bold type. Similarly, anything between the <u> and </u> tags is underlined, including spaces and punctuation.

(7)

Attributes

Many tags can contain attributes, or additional definitions or modifications to the tag in which it is contained. For example, the <body> tag can contain extra information about the HTML document in the form of attributes. In the following example, two attributes are included within the <body> tag.

<title>Negative</title> </head>

This page displays as white text on a black background. </body>

</html>

Some things to notice about the above example:

1. Each attribute is contained within the tag that it modifies. 2. Some tags contain several attributes, each separated by a space.

3. The “text” and “bgcolor” attributes, when placed inside the <body> tag will modify the colors of the text and background of an HTML document.

4. Each attribute value should be placed inside double or single quotes.

*Note: The colors used above are denoted in hexadecimal values; the first pair of

(8)

Lists

HTML allows for the grouping of text in lists. A list can be either ordered <ol> or unordered <ul>. Ordered Lists contain numbers or letters while Unordered Lists contain bullets.

Each item in a list (ordered or unordered) must begin with the <li> tag. While the <ol> and <ul> tags require the appropriate closing tag, the <li>, or “list item” tag does not.

<html> <head> <title>Ordered List</title> </head> <body> Shopping List <ol> <li>Item 1 <li>Item 2 <li>Item 3

</ol> ordered list

</body> </html> <html> <head> <title>Unordered List</title> </head> <body> Shopping List <ul> <li>Item 1 <li>Item 2 <li>Item 3

</ul> unordered list

</body> </html>

*Note the inherent indent in both the ordered and unordered list items.

(9)

Other Common Attributes

The anchor tag <a> is seldom seen without the “href” attribute. This combination makes use of the heart of the hypertext linking system. An <a href=””> tag defines the URL (Uniform Resource Locator) of another web document. Any text or image between the <a> and closing </a> tag becomes an active hyperlink. In other words, by clicking on the link, your browser will open a destination web page.

In the following example, clicking on the “FSU” text will take your browser to FSU’s home page, orhttp://www.fsu.edu.

<title>Hyperlinks</title> </head>

<body>

By clicking on <a href=”http://www.fsu.edu”>FSU</a>, you can visit Florida State’s home page.

</body> </html>

(10)

In the following example, a hyperlink will be displayed as red (underlined) text, will momentarily change to green when clicked, then will become maroon upon returning to the page.

</body> </html>

These attributes can also be used in combination with the text and body attributes from the “Negative” example, giving us 5 separate attributes within one tag. Just be sure to put spaces between each attribute and surround each value with quotes.

</body> </html>

Images

Inserting images into an HTML document also involves using attributes within a tag. The <img> tag is used to insert an image “in-line” with text, and its required “src” attribute references the location of the image.

<title>Images</title> </head>

<body>In-line image #1: <img src="images/seal.gif"> </body>

(11)

In this example, the image named “seal.gif” is located in the “images” folder. Thus, the attribute/value src=”images/seal.gif” will reference the desired image from the desired folder.

The default position of an in-line image is “bottom.” In other words, the bottom of the image is aligned with surrounding text. This can be changed by adding the “align” attribute to the <img> tag along with the “top” or “middle” value:

<body>In-line image #2: <img src="images/seal.gif" align=”top”> </body>

(12)

OR

<body>In-line image #3: <img src="images/seal.gif" align="middle"> </body>

</html>

An image’s size can also be affected by the use of attributes, though the results may not be very effective.

<body>In-line image #4: <img src="images/seal.gif" width="50" height="50"> </body>

</html>

(The width and height are measured in pixels)

(13)

Tables

Tables are an important tool for managing document layout in HTML. Almost anything can be placed inside a table cell: text, images, forms, headings, and even other tables. Several attributes may be used inside the <table> tag, including “align,” “bgcolor,” “border,” “cellpadding,” and “cellspacing.” These last two define space between cells and space within cells.

Also associated with the <table> tag are table row (<tr>), table data (<td>) and table header (<th>). These tags may also include a variety of formatting and other attributes.

(14)

<title>Table 1</title> </head>

<body>

By omitting the “border” attribute, you can display an “invisible table.” This is useful for keeping text and objects together in one area of the screen. The two tables displayed below are identical, with the exception of the “border” attribute.

<title>Table 2 & 3</title> <title>Table 2 & 3</title>

</head> </head>

(15)

The <img> tag can be placed within a table cell. Notice how the table expands to fit around the image.

The “align” and “valign” (verticle align) attributes may be used within the <td> tag, giving alignment options within each cell. The align attribute can have the values “left” (default), “center,” and “right,” while the valign values can be “top,” “middle” (default), or “bottom.”

Forms

Form elements may be placed within the <form> and </form> tags that allow users to send information over the Internet. Within a form, several input types are available. The “type” attribute (within the <input> tag) can contain a variety of values, including “text” (a simple text field), “checkbox” (multiple-choice, square box), and “radio” (circular radio button). The name attribute is added to label the input data (this is NOT an on-screen label; those must be added manually as plain text outside the tag).

<body>

Please fill out the following form.

<form method=”post” action=mailto:[email protected] enctype=”text/plain”> First Name:<input type="text" name="firstname" size="10" maxlength="10"><br> Male:<input type="radio" name="gender" value="male"> Female:<input type="radio" name="gender" value="female"><br>

Are you a:<br>

PC User<input type="checkbox" name="computer" value="PC"><br> Mac User<input type="checkbox" name="computer" value="Mac"><br> Unix User<input type="checkbox" name="computer" value="Unix"><br> Linux User<input type="checkbox" name="computer" value="Linux"><br> (check all that apply)

(16)

Some things to note about this form:

1. There is no submit button (which is required in order to send the input to a specific URL or email address).

2. The <form> tag contains 2 required attributes: ”method” and “action.” These attributes give instructions concerning how and where to send the collected input. 3. The “size” and “maxlength” attributes of the text input tell how large the text box

is and how many characters can be entered into the field.

4. The radio buttons share the same “name,” as do the checkboxes. This serves as a “group name.” In the case of the group of radio buttons named “gender,” only one item may be selected. Multiple items may be selected from a group of check boxes with the same name.

5. The final attribute within the <form> tag, enctype=”text/plain” ensures the readability of the form data in all types of email client (whether Outlook, Eudora, Pine, Elm or other Unix/text-based email clients).

6. Simply placing form elements between the <form> and </form> tags leaves a lot to be desired in the way of formatting. A table can be placed within a form to impose some formatting options.

(17)

<body>

Please fill out the following form.

<tr>

<td>First Name:<input type="text" name="firstname" size="10" maxlength="10">

</td>

<td>Male:<input type="radio" name="gender" value="male"> Female:<input type="radio"name="gender" value="female">

</td> </tr> <tr>

PC User<input type="checkbox" name="computer" value="PC"> Mac User<input type="checkbox" name="computer" value="Mac"> Unix User<input type="checkbox" name="computer" value="Unix"> Linux User<input type="checkbox" name="computer" value="Linux"> (check all that apply)

</td> </tr> <tr>

(18)

Frames

A frame set layout lets you display a browser’s main window into independent window frames, each displaying a different HTML document. Here is an example of a frames web page.

In this example, the left and top frame will always display the same information (a set of hyperlinks and a title), while following one of the links will cause the main frame to display a new web page.

To create a similar layout, you need to make use of the <frame> and <frameset> tags. A frameset is a collection of frames (and their initial sizes) that will make up the browser’s window. The “rows” and “cols” attributes define the size of each frame within a set. The <frame> tag, along with the “src” attribute indicates which HTML document will be initially displayed within each frame.

Frame layout is similar to table layout. The <frameset> tag is used to arrange frames into rows and columns. It is also used to control the spacing and borders of your frames. Also, the <frameset> tag will replace the <body> tag in a frame document.

(19)

absolute (measured in pixels) or relative (measured as a %) width or height for the frames. The number of values in this list will determine the number of rows or columns that will be displayed. For more flexibility, you will often want to use % values rather than pixels.

For example, this line of code: <frameset rows=”25%,50%,25%”>

will create three rows of frames that fill the width of the browser window, but are 25%, 50% and 25% (respectively) of the height of the window.

There is also the “*” measurement attribute, which will fill the remainder of a window. For example:

will create 3 rows of 22%, 45% and 33% (the remaining% of the window).

In the following example, The browser window is divided into 6 separate frames, each displaying one of our previous example documents.

<title>Frameset Example</title> </head>

(20)

Notice the name=”targetframe” attribute in the example4.html frame. Once named, a hyperlink can fill a target frame when followed.

For example, by adding the following hyperlink anywhere in our frameset: <a href=”example12.html” target=”targetframe”>

(21)

Common HTML tags

DESCRIPTIONS

<html> … </html>...marks the entire html document

<head> … </head>...marks the head, or prologue of an html document

<body> … </body>...includes all other content of an html document

<title> … </title>...title of the page

<p> … </p>...paragraph (beginning of a new paragraph)

<br>...line break

<ol> … </ol>...ordered (numbered) list – each list item must begin

with the <li> tag

<ul> … </ul>...unordered (bulleted or otherwise marked) list – each

list item must begin with the <li> tag

<li> … </li>………...individual list items

<! -- … -->……….comment – nothing within the comment tags will be

displayed on an html document

<a> … </a>………“anchor” or link tag (generally used with the “href”

attribute)

<b> … </b>………...bold

<strong>…</strong>………….emphasize/bold

<i> … </i>……….italic

<em>…</em>………...

emphasis (italic)

(22)

Hexadecimal Color Values

color name: hexadecimal value:

aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff gray #808080 green #008000 lime #00ff00 maroon #800000 navy #000080 olive #808000 purple #800080 red #ff0000 silver #c0c0c0 teal #008080 yellow #ffff00 white #ffffff

*Each of the above color names can be used in HTML instead of the corresponding hexadecimal value. Thus, <body text=”red”> produces the same result as <body text=”ff0000”>.

Introduction to HTML Programming

HTML Programming

Common HTML tags

TAGS

DESCRIPTIONS

<html> … </html>...marks the entire html document

<head> … </head>...marks the head, or prologue of an html document

<body> … </body>...includes all other content of an html document

<title> … </title>...title of the page

<p> … </p>...paragraph (beginning of a new paragraph)

<br>...line break

<ol> … </ol>...ordered (numbered) list – each list item must begin

<ul> … </ul>...unordered (bulleted or otherwise marked) list – each

<li> … </li>………...individual list items

<! -- … -->……….comment – nothing within the comment tags will be

<a> … </a>………“anchor” or link tag (generally used with the “href”

<b> … </b>………...bold

<strong>…</strong>………….emphasize/bold

<i> … </i>……….italic

<em>…</em>………...

Hexadecimal Color Values