Post on 29-Dec-2015
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.
July 1998 Thane B. Terrill
The Web
The Web is a graphically-oriented system for distributing information over the infrastructure provided by the
Internet.
July 1998 Thane B. Terrill
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.)
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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
July 1998 Thane B. Terrill
HTML Body
July 1998 Thane B. Terrill
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>
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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)
July 1998 Thane B. Terrill
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>
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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>
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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
July 1998 Thane B. Terrill
HTML Table
July 1998 Thane B. Terrill
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>
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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>
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.
July 1998 Thane B. Terrill
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.