Introduction to - Synthcom



Introduction to

HTML

by Valerie Wolff

13 July 1997

Table of Contents

Getting Started 3

Scripting Style 3

HTML Tag Structure 3

Document tags 4

Basic Text Structures 6

Images and Colors 9

Lists 14

Tables 19

Hyperlinks 25

References 7

Getting Started

Before getting into the details of writing HTML pages, I’d like to make a point… THIS IS EASY STUFF! Most people believe it is difficult to create Web pages, but once you learn the basics you’ll see that it is very easy. I believe that within a week of playing around on your own, you’ll be ready to begin creating pages you’ll be proud to show everyone.

To create Web pages, you will need a plain text editor like notepad, DOS’s edit, or vi (for any UNIX people out there). Using something like Microsoft Word will not work because it uses special control characters what will confuse the Web browsers. These files should be saved with a “.htm” or “.html” extension to indicate that they’re HTML pages. You will also need a web browser with which you can preview your pages, to make sure they’re doing what you want them to do.

Scripting Style

It is important that you structure the HTML of your page in a logical manner. This will make editing them much easier. Think of your HTML file as a program. It is considered bad programming practice to write code that is unstructured and hard to read. Keep this in mind when writing your own HTML pages. I will keep my examples neat and tidy to help reinforce this practice.

HTML Tag Structure

Web pages are created using HTML - HyperText Markup Language. HTML consists of a set of tags which tell the browser how to display the information in the file. The tags are sets of pairs, a beginning tag and an ending tag. The beginning tag is placed before the text to be formatted, and the ending tag is placed after the text to be formatted. Tags are keywords between a less-than sign and a greater-than sign. Ending tags also have a backslash before the keyword to signify that this is the end of that formatting.

For example, let’s say we have tags to specify boldfaced text: . To make a sentence appear in boldface text, we would place it between those tags:

The quick brown fox jumped over the lazy dog.

That’s the secret behind HTML… tags! It’s really as simple as that. Now, we’re going to look at the different tags you’ll need to create a great Web page.

Document Tags

These are the tags which define a HTML page. Most browsers today require that they by present in your HTML file. Some browsers will still display the page with them missing, but many will either fail to display the page or will not display it properly.

These tags specify this as a HTML page. The tag will always be the first tag in your file, and the tag will always be the last tag in your file.

These tags mark the header of the page. Within this header is where you can put the page’s title (which is displayed in the title bar of the browser), any meta information which webcrawlers use (which I will not cover here), and comments on the author of the page.

This tag specifies the title of the page and is used within the and tags. This title is usually the same as the title which is displayed for the user in the page body.

This tag specifies the start and end of the page’s main body (i.e., everything you see on the screen). Options to this tag can alter the pages appearance, such as adding a background color or image. Using the tag without any options will display a page with the default grey background and black text. I’ll discuss this in more detail later.

This is a comment. You can put whatever text you want between the tags, it will not be interpreted or displayed by the browser.

Example

We’ll look at an example using all of these tags. This is the standard layout I use with my pages. Please note the formatting I’ve used, this is an example of the scripting style I mentioned before.

Sample 1:

Sample Page!

Sample page! This is where the body of the page will go.

This is how it would look on a browser:

[pic]

Basic Text Structures

These tags will allow you to format the text displayed on the page.

The following tags change the style of the text:

These tags will create boldfaced text.

These tags will create italicized text.

These tags will create underlined text. (This is different from a hyperlink. Those will be discussed later.)

The following tags control the flow of the text across the screen:

This tag inserts a line break (a newline) into the text. It is one of the few tags which does not consist of a set of two, a beginning and an ending.

This tag signifies the end of a paragraph. It is another one of the tags which is not part of a set of two.

This tag creates a horizontal rule, or line, across the screen.

These tags will center whatever lies between them on the screen.

The following tags change the size of the text. They are called Header tags. They produce text which is already boldfaced, and a newline is automatically added to the end of the line. They come in sizes 1-6, where 1 is the largest and 6 is the smallest. They are:

Here is sample HTML which demonstrates all of the tags introduced above.

Sample 2:

Sample Page #2

This demonstrates the strong tags.

This demonstrates the italics tags.

This demonstrates the underline tags.

This is a combination of all three!

This uses header #1

This uses header #2

This uses header #3

This uses header #4

This uses header #5

This uses header #6

This is how it would look on a browser.

[pic]

Images and Colors

This is the part that most people like the best… adding in their own colors and images to their pages. Granted, this really is the most fun-filled part of Web page design. However, I caution you on the use of images in your Web page. Do not fill your pages with images because they will take a very long time to download. Thoughtful and discreet usage of images will create a good look while maintaining a reasonable download time. For example, I will often use a background image, a title image, and perhaps a few small images as horizontal rules or as bullets. (As an example, look at this site I created: The EMU Homepage at .) Sites maintained by companies such as Microsoft, The Weather Channel, and Intel make heavy use of images, and can take a very long time to download.

Putting an image in your page

The tag to add an image to your screen is one which does not have an “ending” counterpart.

This is called an inline image. It is important to remember the quotation marks around the file name. Most browsers require that they be there, otherwise the image will not be displayed at all. The image can be centered on your page by simply enclosing it within the tags described before.

In both these cases, the width (and subsequently the height) of the image is being directly controlled by the page author. In the first example, the width is limited to 50% the width of the browser’s screen. In the second example, the width is limited to 240 pixels. It is usually a better idea to specify the size as a percentage so that it will always be displayed properly on every browser on every screen resolution across the world. However, that is left to the author’s discretion. It is also possible to specify the image’s height, just add height=xx to the tag above (where xx is the height you’re specifying for the image, in either a percentage or in pixels).

This will let you change the alignment of the image on the screen. “XX” is replaced with one of these keywords:

|top |This will align any following text with the top of the image. However, the next line will be underneath the |

| |picture instead of directly under the previous line. |

|middle |This will align any following text with the middle of the image. However, the next line will be underneath the |

| |picture instead of directly under the previous line. |

|bottom |This will align any following text with the bottom of the image. However, the next line will be underneath the |

| |picture instead of directly under the previous line. |

|right |This will align the picture to the right of the screen and any text will be to the left of the image. |

With the “alt” parameter, you can specify text will be displayed in the image’s place while it is being loaded, and will serve as a way to identify what should be there if the image can’t be downloaded or if it is missing from the directory. Once again, be sure to use quotation marks around the text otherwise some older browsers may become confused. Also, if you are wanting to have a blank “alt”, use at least one space between the quotes. Some older versions of Netscape become confused if nothing appears between the quotation marks.

It is possible to have the image located in a directory other than the one in which the page resides, you just have to tell it where to look. So, for example, let’s say you’re in directory C:\mystuff and you have a file “stuff.html” and a directory for your images, say C:\mystuff\images. To use the image “stuff.gif” in the images directory, simply use this as your filename: . USE A FORWARD SLASH INSTEAD OF THE BACKSLASH WHICH DOS USES. This is because the Web is based off UNIX systems, which use the forward slash in directory paths.

Note: You must use relative paths here! You cannot do something like this:

This will not be interpreted correctly by the browser. Instead, if you need to go up directories, you can do something like this:

Putting a background image on your page

It is a simple thing to add a background image to your page. It is specified within the tag introduced to you earlier. Here’s how to do it:

The same rules about image file location apply here, too. They can reside in a different directory, just make sure the directory path is included in the filename.

Changing the background color

Sometimes, people wish to simply have a colored background instead of a background image on their page. This is also accomplished within the tag.

The color is specified by a hexidecimal number representing a color. The first two digits of the hexidecimal number represent RED, the next two digits represent GREEN, and the last two digits represent BLUE. For example, to have a pure red background image, the hexidecimal digit would be “FF0000”. Similarly, for yellow the digit would be “FFFF00”. (Remember, with light RED + GREEN = YELLOW.) In the references section, I have listed a URL for the Colour Selector Page. It can help you see how those numbers work.

Changing the color of your text

There are two different ways to do this. You can either change the color of a small portion of your text, or you can change the default color for ALL the text on your page.

This will change the default text color of the entire page to the specified color, here white.

Any text appearing between these tags will appear in the specified color, here white.

Here are some sample pages to demonstrate the discussed tags.

Sample 3: This page will have a white background and will demonstrate inline images.

Sample Page #3

Here is some text to demonstrate

what happens when you use "align=top". Notice how it

doesn't scroll the way you might expect it to.

Here is some text to

demonstrate what happens when you use "align=middle".

Notice how it doesn't scroll the way you might expect it

to.

Here is some text to

demonstrate what happens when you use "align=bottom".

Notice how it doesn't scroll the way you might expect it

to.

Here is some text to

demonstrate what happens when you use "align=right".

This is how it would look on a browser.

[pic]

Sample 4: This page will have a background image and will demonstrate the use of “alt” parameters and colored text.

Sample Page #4

Default text color set to BLACK.

This image is missing on purpose to demonstrate the "alt" parameter.

This text is in RED!

This text is in GREEN!

This text is in BLUE!

This is how it would look on a browser.

[pic]

Lists

Lists are a great way to organize data on the page. There are many different kinds of lists which can be created. I’ll be discussing three of them here.

Ordered Lists

Ordered lists are the same as numbered lists, meaning that each data item is uniquely identified by a number. There are tags to indicate the beginning and the ending of the list, and there are also tags to indicate individual data items. Those tags which indicate individual data items go between the list beginning and list ending tags.

These are the beginning and ending tags for your ordered list.

This is the tag which indicates a particular data item. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

Unordered Lists

Unordered lists are structured the same as ordered lists, however, they simply have a bullet at the beginning of each data item, not a unique identifier. There are tags to indicate the beginning and the ending of the list, and there are also tags to indicate individual data items. These are the same tags as used with the ordered lists.

These are the beginning and ending tags for your unordered list.

This is the tag which indicates a particular data item. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

Definition Lists

Definition lists are different from both ordered and unordered lists. They do have beginning and ending tags similar to the ordered and unordered lists. However, unlike the unordered and ordered lists, definition lists are not based on list items. They are instead based on term-definition pairs.

These are the beginning and ending tags for your definition list.

This is the tag which indicates the definition term, the item you are defining. There is no ending tag for this one.

This is the tag which indicates the term’s definition, the actual explanation of the definition term. There should be one of these tags for every tag you use. There is no ending tag for this one.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

It is possible to nest lists within lists. It is very simple, you just have to make sure you keep track of all the beginning and ending list tags. I suggest you use indentation to help keep track of nested lists.

Here are some sample pages to demonstrate the discussed tags.

Sample 5: This page will have an ordered and an unordered list.

Sample Page #5

This is an unordered list of pizza topings.

Cheese

Pepperoni

Mushrooms

Sausage

This is an ordered list of steps to make a peanut butter sandwich.

Get bread and peanut butter

Lay out two pieces of bread

Cover one piece with peanut butter

Put other piece on top of peanut butter

Eat

This is how it would look on a browser.

[pic]

Sample 6: This page will have a definition list and some nested lists.

Sample Page #6

This is an definition list of some French terms.

Bonjour

This is French for "Hello".

Au revoir

This is French for "Good bye".

D'accord

This is French for "OK".

These are several nested lists.

This is in list 1.

This is in list 2.

This is in list 3.

This is in list 2.

This is in list 1.

This is how it would look on a browser.

[pic]

Tables

Tables are a very useful formatting method for Web pages. They can organize data in a very straightforward manner and are very flexible.

These are the beginning tag and an ending tag which define a table. (Note that by default, a table does not have a visible border. I will explain how to add one below.)

These tags indicate a table row. These tags must surround all data items which will be present in that row of data.

These tags indicate a table heading. This tag creates text which is in boldfaced print. It is typically used for the text along the top row, the leftmost column, or both.

These tags indicate a piece of table data. These tags must surround each piece of data which will be in the table.

There will be an example of this at the end of this section, it’s easier to wait until then to show you how this will look.

There are many different ways to change the look of your table. They are found both within the “table” tag and within the “td” tag. I will explain them now.

attributes

There are many different attributes which can be specified table-wide.

This specifies that the table should have a border around it. If X = 0, then no table will be displayed. Simply using the word “border” will act the same as “border=1”. The larger the number, the thicker the border around the table.

This specifies that there should be empty space left between individual cells of the table. “X” indicates the amount of space to be left between the cells.

This specifies that there should be space around the text within the individual cells. This keeps it from getting too close to the sides of the cells. “X” indicates the amount of space which should surround the text.

This specifies how wide the table should be. It is similar to the width tag used with images. “X” is usually a percentage of the available screen width.

This sets a background color for the entire table. It is often useful for tables on pages with outrageous background images (makes it easier to read) or if you just want to spice up the table in some way. It uses the same color format as discussed on page 11.

attributes

There are many different attributes which can be specified on a per-data-item basis.

It is possible for a table cell to span more than one column’s width. This specifies how many columns the cell should span. “X” is the number of columns to span.

It is possible for a table cell to span more than one row’s width. This specifies how many rows the cell should span. “X” is the number of rows to span.

This specifies where the data should be situated within the cell. “X” can be one of these values:

|top |Aligns the text along the top of the cell. Text scrolls as necessary. |

|middle |Aligns the text through the middle of the cell. Text scrolls as necessary. |

|bottom |Aligns the text along the bottom of the cell. Text scrolls as necessary. |

This sets a background color for the current data cell. It is useful for highlighting important data, for example. It uses the same color format as discussed on page 11.

Other Attributes

These tags indicate a caption to be displayed with the table. The text of the caption is placed between the caption tags. Note that all keystrokes you use between the tags will be used, so if you have hit “enter” and split the caption onto two lines within your HTML file, it will appear as two lines on the Web page. “X” indicates where the caption will be placed with respect to the table.

|top |This will center the caption above the table. |

|bottom |This will center the caption below the table. |

* Note that the caption tags must be put between the and tags.

Here are some sample pages to demonstrate the discussed tags.

Sample 7: This page will have a simple table with a border, a caption, and colored cells.

Sample Page #7

Figure 4.12. Attendance at and

Ratings of the last two seminars.

City

Attendance

Rating

Chicago

75

Excellent

Indianapolis

1254

Good

This is how it would look on a browser.

[pic]

Sample 8: This page will have two simple tables, one demonstrating COLSPAN and the other demonstrating ROWSPAN.

Sample Page #8

This example uses COLSPAN.

City

Attendance

Rating

Chicago

75

Excellent

Indianapolis

1254

Good

Detroit

No Data Available

This example uses ROWSPAN.

City

Attendance

Rating

Chicago

75

Excellent

1254

Good

420

Excellent

This is how it would look on a browser.

[pic]

Hyperlinks

This is the part you’ve been waiting for! This section is going to talk about hyperlinks.

References

HTML References

CS 190W - Introduction to the Internet and the World Wide Web (Purdue University)



HTML Resources



Introduction to HTML



Carlos’ FORMS Tutorial



Editing and Image Creation Tools

Colour Selector Page



Pixelsite (need to register for a username and password)



Images, Clipart, etc.

IconBAZAAR



Texture Land



The Clip Art Connection



................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download