Page 2
 |
|
¶ Page 2
|
¶ Preface
<=== Click
¶ to align to this heading.
Click
§ to align to TOP.
This course outline is designed for producing documents in HTML, the hypertext
markup language used on the World Wide Web. This outline is intended to be an
introduction
to using HTML and creating files for the Web.
Printablility of this material.
¶
This outline is an HTML file.
It is not a word processor file designed for printing.
The course presentation is intended to be done with the use of your browser.
The printing of this document is not the intent of the author,
and doing so may produce unpredictable results.
This reason is due to the dependency on the capability of your browsers and printers.
Also, the material is always under inhancements, thus a printed versions will always be
out-of-date, incomplete and in a few cases ... incorrect.
Having stated this, you may still obtain a satisfactory printed output.
¶ Page 2
|
Links
are provided to additional information. You should also check your local bookstore;
there are many volumes about the Web and HTML that could be useful.
Remember you can print a copy of this outline for your personal use by using the
Save As or Print feature in your browser.
¶ Page 2
|
Mouse-drive Textual Alignment Techniques ¶
Note: Our presentation is coded to permit the alignment of the text
by clicking on the
Red Section Headings, Labels, Captions and other Wording
. Clicking "Preface" and "Table of Contents" will align the text to the top of the screen.
Also, the ¶ character
found following or within a paragraph of text, text graphics, or examples
will align to a paragraph label, current position or a heading above.
Use the § character
to align to the Top Page (page 1);
Use the Right Margin Column to align to Next Page;
Use the very far Left Margin Column will align to Prior Page;
Use the near Left Margin Column aligns the top of the Current Page.
¶ Page 2
|
|
|
|
Page 3
Page 4
Page 5
|
|
|
|
¶ Page 5
|
-
¶ Getting Started
§
Course Pre-requisites
Absolute Prerequites:
- A proficiency in Windows 95 or later Operating system.
- An indepth knowledge of the functionality of either the Internet Explorer
or Netscape/FireFox Mozilla browser.
- A proficiency with a text editor.
The course does not require knowledge
of nor the use of an HTML editor.
- The willingness to READ this material,
- The ability to edit and create some HTML files, and
- The ability to utilize your browser to view your files.
¶ Page 5
- Are you Ready?
To determine if you have the pre-requisites and knowledge of the elementary
use, structure, and content of HTML files on the internet, and thus prepared for the presentation
of the course we will administer a one question quiz.
Your response will be compared with the author's expected answer.
Your response will be emailed to yourself and the author (thus your valid email address is necessary).
From your evaluation of your response
you will have to determine if you wish to continue.
¶ Page 5
|
Question:
| |
Response: |
|
This is the single question. Take a moment to scroll down though
the remainder of Part 1 of this outline, counting the graphics.
Then determine the approximate
number of visual graphic icons in this Part 1 file alone.
There is a method to determine the
exact number of images in this file.
¶ Page 5
|
|
Only if you provide a valid email address
will you get results. Check your mail.
|
This Quiz may be disabled due to use by spam mailers.
|
|
The Answer is "None". All the visual images are generated via HTLM coding. |
*** If you got no response e-mail, then you entered an invalid e-mail address. ***
|
How did you do on the Quiz?
I hope you answered with the correct answer?
If you did not, I hope you understand why the answer was what it was.
And, if you did not take the quiz,
I presume you will quit right now.
|
|
|
|
|
Page 6
Page 7
Page 8
|
|
|
|
¶ Page 8
|
-
¶ Terms to Know
§
- WWW --- World Wide Web
"It was 1969 and a busy year for making history: Woodstock, the Miracle Mets,
men on the moon -- and something less celebrated but arguably more significant,
the birth of the Internet.
On October 29 of that year, for perhaps the first time, a message was sent over the
network that would eventually become the Web. Leonard Kleinrock, a professor of computer
science at the University of California-Los Angeles, connected the school's host
computer to one at Stanford Research Institute, a former arm of Stanford University."
--- http://www.cnn.com/2009/TECH/10/29/kleinrock.internet/index.html
By Philip Rosenbaum, CNN
October 29, 2009 1:00 p.m. EDT
- SGML --- Standard Generalized Markup Language--a standard for
describing markup languages
¶ Page 8
-
HTML
--- Click topic to align
HyperText Markup Language--HTML has a SGML standard.
In practical terms, HTML is a collection of markup tags that define
the various components of a World Wide Web document.
HTML was invented by Tim Berners-Lee while at CERN,
the European Laboratory for Particle Physics in Geneva.
¶ Page 8
- ( more terms to be added )
|
|
|
|
Page 9
Page 10
Page 10.1
Page 11
|
|
|
|
¶ Page 11
|
-
¶ HTML Editors
§
Some WYSIWYG editors are also available (e.g., Claris Home Page or Adobe
PageMill, both for Windows and Macintosh). You may wish to try one of
them after you learn some of the basics of HTML tagging.
WYSIWYG is an
acronym for "what you see is what you get"; it means that you design
your HTML document visually, as if you were using a word processor,
instead of writing the markup tags in a plain-text file and imagining
what the resulting page will look like.
It is useful to know enough HTML to code a document before you determine the usefulness of a WYSIWYG
editor, in case you want to add HTML features that your editor doesn't support.
¶
It is the author's recommendation to NEVER use an HTML editor.
Especially NEVER use an HTML editor on a file generated by any HTML
editor, even another version of the same HTML Editor. Also, NEVER use an HTML
editor on a file generated by a plain text editor. Thus,
the best rule to follow is
"Never Use An HTML Editor"
It is equivalent to learning a foreign language with only a dictionary.
-
¶ Getting Your Files on a Server
§
If you have access to a Web server at school or work, contact your
webmaster (the individual who maintains the server) to see how
you can get your files on the Web.
If you do not have access to a server
at work or school, check to see if your community operates a
freenet; a community-based network that provides free access to
the Internet.
Lacking a freenet, you may need to contact a local
Internet Service Provider (called an ISP ) that will post your files on
a server for a fee. This is called "hosting" your site.
(Check your local newspaper for advertisements or with your Chamber of
Commerce for the names of companies.)
The subject of Internet Service Providers, domains, networks, DSL and
cable service are not topics covered in this course outline.
11 | | | |
|
|
|
|
Page 12
|
|
|
|
¶ Page 12
|
-
¶ Tags Explained
§
-
An element is a fundamental component of the structure of a text
document. Some examples of elements are heads, tables, paragraphs, and
lists. Elements can contain plain text, other elements, or both.
To denote the various elements in an HTML document, you use tags.
Think of it this way: you use HTML tags to mark the elements of a
file for your browser to process.
¶
-
HTML
tags consist of a left angle bracket (<), a tag name,
and a right angle bracket (>). Tags are usually paired
(e.g., the start tag <H1> and
the end tag </H1>) to start and end
the tag instruction. The end tag looks just like the start tag except a
slash (/) precedes the text within the brackets.
¶
-
HTML Tag Blocks
The majority of HTML tags are block structures. Of course, there are
exceptions, and these are referred to as HTML tag statements.
It must be noted that block structured means one block must/may be contained
within another block.
Think of it as "boxes within boxes". If there are two boxes then
they may be side-by-side (serial blocks, meaning one after another),
or one box may be inside the other box (nested blocks).
Note that there are no other situations. (See Fig 1.)
¶
Fig 12.
"Think of it as Blocks within Blocks within Blocks"
<HTML>
<HEAD>
<TITLE> ......... text ........... </TITLE>
|
</HEAD>
|
<BODY ..... arguments .............>
</BODY>
|
</HTML>
|
- Either you have a series
of boxes (blocks) one after another, or you have "boxes within boxes" (nested blocks).
Look for this condition in the coding examples that follow.
¶
12 | | | |
|
|
|
|
Page 13
Page 14
|
|
|
|
¶ Page 14
|
-
HTML File Analysis Techniques.
§
Not all tags are supported by all World Wide Web browsers. If a browser
does not support a tag, it will simply ignore it.
Any text placed between a pair of unknown tags will still be displayed, however.
This is also true for any unknown attributes within
a tag, and the browser will simply ignore them.
This fact can be used to an author's advantage in the development or
analysis of HTML coding. This will be depicted in examples below.
¶
Fig 14a.
Using invalid attributes for diagnosis.
<TABLE 1>
<TABLE 4>
........
|
........
|
<TABLE 5>
|
</TABLE 4> |
</TABLE 1>
|
|
|
Fig 14b. Carried to extremes.
<TABLE 1>
<TABLE 4>
<TR 4 BGCOLOR=black >
<TD 4>...........</TD 4>
<TD 4>...........</TD 4>
</TR 4>
<TR 4> <TD 4 COLSPAN=2>
<TABLE 5> <TR 5>
<TD 5>
<TABLE 6><TR 6>
<TD 6>...........</TD 6>
</TR 6> </TABLE 6>
</TD 5> </TR 5> </TRADE 5>
</TD 4>
</TR 4></TABLE 4>
|
</TABLE 1>
|
Border= element HTML code text not shown
|
- HTML Code Function
What does the HTML code do for us?
¶
The HTML code is never seen! Generally,
only the textual and graphic icons are shown on the monitors. The HTML
code controls how we view these materials. HTML coding controls borders
around icons and tables, backgrounds, text fonts and
their colors and many many other features seen on web pages.
-
Author's Tip:
"Links that Work, Sometimes",
http://www.netmechanic.com/news/vol4/html_no18.htm
Browser incompatibility represents a huge challenge for all webmasters.
Incompatibility issues can affect your images, JavaScript functions, style sheets, and page layout.
But you may not realize that browser compatibility problems can also affect your links.
But The Links Work - Or Do They?
Have you ever gotten a bad link report --- and found that the link works
just fine in your browser?
The problem is usually due to your choice of Web browser.
Some
links on your site that work fine in Internet Explorer may be broken in
`Mozilla Browsers`
like `Firefox`, Netscape Navigator and other browsers.
This is just one more way that minor errors in the way you write your
HTML code
can make a big difference in the way your Web page displays on different browsers.
In particular,
Internet Explorer often corrects invalid URLs used in your links,
allowing them to work correctly.
`Mozilla` and all other browsers don't make these corrections,
so visitors get broken links.
14 | | | |
|
|
| |
Page 15
Page 16
Page 17
Page 18
Page 19
Page 20
Page 21
Page 22
Page 23
Page 23.1
Page 24
Page 25
Page 26
Page 27
Page 28
|
|
|
|
Page 28
|
-
Preformatted Text
Use the<PRE> tag (which stands for "preformatted") to
generate text in a fixed-width font. This tag also makes spaces, new
lines, and tabs significant -- multiple spaces are displayed as multiple
spaces, and lines break in the same locations as in the source HTML
file. This is useful for program listings, among other things. For
example, the following lines:
Sample Preformatted Tag Coding (ab)
|
N |
preformatted.htm - Notepad
|
<< |
>> |
X |
<!---- Note blank line following this comment -->
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
<!---- Note blank line prior to this comment -->
|
Preformatted Tag Block Output (ac)
|
N |
preformatted.htm HTML Example - Netscape
|
<< |
>> |
X |
<!---- Note blank line following this comment (due to PRE tag) -->
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
<!---- Note blank line prior to this comment (due to /PRE tag) -->
|
The <PRE> tag can be used with an optional WIDTH
attribute that specifies the maximum number of characters for a line.
WIDTH also signals your browser to choose an appropriate font
and indentation for the text.
Hyperlinks can be used within <PRE> sections. You should
avoid using other HTML tags within <PRE> sections,
however.
Note that because <, >, and & have special meanings in HTML,
you must use their escape sequences (<,
>, and &, respectively) to enter these
characters. See the section
Escape Sequences
for more information.
28 | | | |
|
|
|
|
Page 29
|
|
|
|
Page 29
|
-
¶ Extended Quotations
§
Fig 29a. Extended Quotations (ad)
|
N |
simple.htm - Notepad
|
<< |
>> |
X |
<P>Omit needless words.</P>
<BLOCKQUOTE>
<P>Vigorous writing is concise. A sentence should
contain no unnecessary words, a paragraph no unnecessary
sentences, for the same reason that a drawing should have
no unnecessary lines and a machine no unnecessary parts.
</P>
<P>--William Strunk, Jr., 1918 </P>
</BLOCKQUOTE>
|
Fig 29b. Extended Quotations Output (ae)
|
N |
Extended Quotations - Netscape
|
<< |
>> |
X |
Omit needless words.
Vigorous writing is concise. A sentence should contain no unnecessary words,
a paragraph no unnecessary sentences, for the same reason that a drawing
should have no unnecessary lines and a machine no unnecessary parts.
--William Strunk, Jr., 1918
|
Note the "break" of the line and blank line after the first period (due to the </P> tag). Then, the indentation due
the BLOCKQUOTE tag. Also, the sequence of the </P> and <P> tags results in a single "break" and one blank line.
29 | | | |
|
|
|
|
Page 29.1
Page 30
Page 31
|
|
|
|
Page 31
|
-
¶ Last Page - Part 1
§
Correspondence and Permission Response
Request
To: Webmaster@ncsa.unic.edu
From: Ron Reed
Subject: Seeking Permission
Dear Webmaster;
I am developing 4 to 6 sessions of 2-hour classes for a course on
web page development for seniors.
Since the page below is no longer maintained, I am seeking permission
to use portions of the textual material for a course outline.
http//archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
Regards,
Ronald Reed
Instructor, Ewing Senior Center http//www.ewingsnet.com
Response
To: Ron Reed <fmt@passco.com>
From: Steven J Kleinvehn <stevek@ncsa.uiuc.edu>
Date: Wed, 15 Aug 2001 09:53:46 -0500
Subject: Re: Seeking Permission
You may copy the Beginner's Guide for your non-profit, educational use,
provided you give the following credit:
"Created by the National Center for Supercomputing Applications (NCSA),
http://www.ncsa.uiuc.edu/. Copyright 1997, University of Illinois Board of Trustees."
Please also include the URL for the NCSA HTML Beginner's Guide,
http://archive.ncsa.uiuc.edu/General/Internet/WWW/index.html.
Remember, you can neither reproduce the Beginner's Guide on your server nor
sell it.
Link to Part 2
Link to Part 3
31 | | | |
|
|
|
|
Page BASE
|