HTML Introduction Thane Terrill Summer 1998 July 1998Thane B. Terrill The Internet The Internet is world-wide system of inter-connected computer systems.

HTML Introduction

Thane Terrill

Summer 1998

July 1998 Thane B. Terrill

The Internet

The Internet is world-wide system of inter-connected computer systems. It's similar to the design of the international telephone system. National telephone systems vary tremendously, but through a system of international agreements and standards, all telephone systems appear as a unified whole.


The Web

The Web is a graphically-oriented system for distributing information over the infrastructure provided by the

Internet.


Web Site & Web Page

A web site is a collection of web pages.

A web page is an individual HTML file and its linked component files (like images, sound, PDF, video, etc.)


Web Browsers

Web browsers (like Netscape's Navigator or Microsoft's Internet Explorer) are software programs that help the user to navigate and display web documents. The interesting thing to remember is that the browser controls many aspects of displaying HTML documents. Not only will different brands of browsers display the same web page differently, but browsers of the same brand may display differently based on user-configurable preferences.


HTML

HTML (HyperText Markup Language) is a set of coded tags that instruct a web browser how to handle text, images, sound, and any other form of computer data. Though programming languages are now being added to HTML documents, like Java, HTML is not a programming language.


Frames

A new trend in web design is to design a single screen presentation using multiple web pages. The designer divides the screen into areas (i.e. frames) and then loads different documents into each area. This is especially useful if one wants to keep an index or a list on the screen at all times while the user reads the contents in another area of the screen. The class web site uses frames. In this case, a group of web pages are not considered a web site.


Terms Wrap-up

In other words, the Internet is the infrastructure, the web is the service, and HTML is the method by which the service is constructed. The popularity of the web is due to the vast audience provided by the Internet, the graphical nature of web design, and the ease and cheapness of building web sites.


HTML Basics

The easiest way to think of HTML design is to think of an HTML document as simply a modified text file. One starts off with text and then adds HTML structure and tags.

Of course there are many programs on the market that will let you simply type away and drag-and-drop images, if you like. It’s still a good idea, however, to learn basic HTML.


HTML Header

Every HTML document starts with a few HTML tags that lets the Web browser know it’s looking at an HTML document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>TU5510: Group Work -- Assignment</TITLE>

</HEAD>

Doctype tells the browserthe version of HTML code

you are using. It is not required. The title goes into the browser bar. It does not show up in the browserwindow as text.

Most HTML tags needa closing tag. This marksthe end of the header.


HTML Body

Most of the contents of an HTML document are placed in the body section.

<BODY bgcolor="White" text="Maroon" leftmargin=10 topmargin=20>

<Blockquote>

<p align="center"><font face="Arial Black" size="+1" color="Red">Group Work -- Assignment</font></p>

The purpose of the group work is to promote the ability to create and evaluate computer-related proposals.

Therefore, the class will be split between two groups. Group A will create a proposal for one of the project models listed


HTML Body


HTML Ending

At the end of every HTML document are two tags that let the browser know to stop.

Anything after these tags will be ignored.

</BODY>

</HTML>


HTML Section Wrap-up

Once the structure has been established -- and it is as easy as it sounds -- the next task is to format the text so that it displays in the desired way. Of course, one must remember that web design cannot be as precise as when one prints to paper. The user's browser has a lot of control over how the HTML tags are followed.

Web browsers are given this control because the wide variety of computer hardware found around the world requires it.


Character Formatting

It is possible to control basic character attributes, like bold, italics, and underlining. However, control over font type styles and font sizes are just coming available with the 4.0 HTML standard.

Bold <B></B>

Italic <I></I>

Subscript <SUB></SUB>

Superscript <SUP></SUP>

Typewriter <TT></TT> (displays in a monospaced font)


HTML Text Handling

Most simple forms of controlling the flow of text are easily handled by HTML.

Center <Center></Center> Align left, justify or

right Align images (top, left,

right, middle, etc.) Blockquote

<Blockquote></Blockquote>


HTML Text Limitations

1. no way to automatically indent a new paragraph;

2. no graceful way to handle a large initial capital letter;

3. few options regarding line spacing; and

4. accurate text placement is quite difficult. The good news is that the new 4.0 HTML standard fixes these issues. It should

be another year before the 4.0 standard becomes common.


HTML Organization

One of the strongest tools of HTML is its ability to display organized information -- like lists and outlines.

Unordered List <UL><LI></UL>

Ordered List <OL><LI></OL>

Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)

Menu List <MENU><LI></MENU>

Directory List

<DIR><LI></DIR>


HTML Tables

Tables in HTML are used for much more than they are in other software programs. Tables are often used in HTML to precisely control the screen position of text and images. In other words, a table can be used as an invisible grid.

Text bodygoes in thistable cell.

The othersare used formargins.


HTML Tables

Define Table <TABLE></TABLE>

Table Border <TABLE BORDER></TABLE>

Table Border <TABLE BORDER=?></TABLE> (you can set the value)

Cell Spacing <TABLE CELLSPACING=?>

Cell Padding <TABLE CELLPADDING=?> Desired Width <TABLE WIDTH=?>

Width Percent <TABLE WIDTH=%> (percentage of page)

Table Row <TR></TR>

Alignment <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>

Table Cell <TD></TD> (must appear within table rows) Alignment


HTML Table


Table Code

<table width="50%" border="1" align="CENTER" bordercolor="Maroon">

<tr>

<td align="CENTER" valign="TOP" nowrap><font size="+1" color="Navy">July 6th: </font><br>

Introdution

to the course</td>

<td align="CENTER" valign="TOP" nowrap><font size="+1" color="Navy">July 8th:</font><br>

Network fundamentals </td>

</tr>

</table>


HTML Linking

One of the main features of HTML is its Hyper-Text abilities. "Hyper-Text" just means that you can link one thing to another thing. This link may be inside of a document (like linking to an image) or it may be a link to another web site. Images may be linked to other images, text to sounds, text to text, or any other combination of HTML elements. So, instead of just writing about something, one can link the word to a picture, which links to a sound or video. The possibilities are endless. It's this flexibility and power that makes web design so potentially powerful.


Linking

Link Something <A HREF="URL"></A> Link to Target <A HREF="URL#***"></A> (if in another document) <A HREF="#***"></A> (if in current document)N2.0

Target Window <A HREF="URL" TARGET="***"></A>

Define Target <A NAME="***"></A>

Display Image <IMG SRC="URL">

Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>

<a href="http://features.yahoo.com/comptop10/">Yahoo Buyer Guide</a>


Educational Advantages

Information can be "published” instantly. Excellent for information that cannot wait to be printed in book form.

The Internet's low cost of access and wide-reach makes it an excellent delivery vehicle.

Text can be combined with almost any form of data (i.e. images, sound, video, etc.).

Web sites can be interactive with the user -- including testing of knowledge.

Easily links to other sources of information.


Educational Advantages

The graphical nature of web presentations makes them user-friendly.

Web pages can support forms that allow for feedback from the user.

Web security features can allow for private web sites.

Web sites can be displayed on virtually any computer system in the world -- not just on the computer system used to create it.

Multiple people can work on building/maintaining the site at the same time from virtually anywhere.


Educational Advantages There is no practical limit to the number of people who can

use the web site.

There is no time limit on when a web site can be used.

Web sites can easily lead to CD-ROM presentations.

The hyper-text nature of web design allows the user to cut through vast amounts of data quickly.

It's easy to advertise the existence of a web site with little or no money.

Data on a web site can be downloaded into the user's computer for further study.

HTML Introduction Thane Terrill Summer 1998 July 1998Thane B. Terrill The Internet The Internet is world-wide system of inter-connected computer systems.

Documents