HTML Basics
Table of Contents
- Course Description
- Definitions
- Creating and Saving the File
- Basic Structure Elements
- Header Elements
- Basic Block Elements
- Text Level Elements
- Special Markups
- Page Signature and Disclaimer
- Action: Add Signature
- Putting Home Page on People
- Accessing your Home Page
- Publishing your Home Page
- General Comments
Course Description
Creating a Web Page with HTML (Basic)(Prerequisite: Basic knowledge of Windows/Macintosh, Web Browser (i.e. Netscape, Internet Explorer) and the World Wide Web) Topics include basic components of hypertext markup language (HTML) needed to create documents for the World Wide Web. Topics will include the structure of a web page and an introduction to various markup tags including basic text formatting, lists, hypertext links, and inline graphics.
Definitions
- WWW
- stands for the World Wide Web. Commonly referred to as the
Web. An Internet client-server hypertext distributed information
retrieval system which originated from the CERN High-Energy Physics
laboratories in Geneva, Switzerland.
- Hypertext
- A term coined by Ted Nelson around 1965 for a collection
of documents (or "nodes") containing cross-references or "links" which,
with the aid of an interactive browser program, allow the reader to move
easily from one document to another.
- Hypertext link.
- A reference from some point in one hypertext
document to (some point in) another document or another place in the
same document. A browser usually displays a hyperlink in some
distinguishing way, e.g. in a different color, font or style. When the user
activates the link (e.g. by clicking on it with the mouse) the browser will
display the target of the link.
- Hypertext Transfer Protocol
- (HTTP) The client-server TCP/IP
protocol used on the World Wide Web for the exchange of HTML documents.
It conventionally uses port 80.
- HTML
- stands for HyperText Markup Language. HTML is a collection
of styles (indicated by markup tags) that define the various components of
a WWW document. HTML is a subset of the Standard Generalization Markup
Language.
- Browser
- A program which allows a person to read hypertext. The
browser gives some means of viewing the contents of nodes and of
navigating from one node to another. Netscape and Lynx are browsers for
the World Wide Web. They act as clients to remote servers.
- Uniform Resource Locator
- (URL) A draft standard for specifying an
object on the Internet, such as a file or newsgroup. URLs are used
extensively on the World Wide Web. They are used in HTML documents to
specify the target of a hyperlink. Note: Also known as Uniform Resource
Indicator (URI).
- Markup
- In computerized document preparation, a method of adding
information to the text indicating the logical components of a document,
or instructions for layout of the text on the page or other information
which can be interpreted by some automatic system.
- Markup Tags
- are used by HTML to tell the Web browser (e.g.
Netscape) how to display the text.
The tags are paired
<TAG></TAG>. They consist of a left angle bracket (<) followed by the name of the tag and closed by a right angle bracket (>). Tags are usually paired, e.g. <TITLE> and </TITLE>. The ending tags is similar to the beginning tag except for a slash (/) that precedes the text within the bracket. For example, <TITLE> tells the Web browser the beginning of the document title and </TITLE> tells the Web browser the ending of the document title. Note: HTML is not case sensitive. <TITLE> is equivalent to <title> or <TiTle>. Not all tags are supported by all Web browsers. If a browser does not support a tag, it just ignores it.
Creating and Saving the File
You can create your file with a simple word processor (like Notepad or WordPad for Windows or TeachText for the Macintosh) or an on-line text editor (like penove, jove or vi in UNIX). You can also use a more powerful word processor (like Word or WordPerfect) or an HTML Editor (like Navigator Composer, Microsoft FrontPage), but it's not necessary. When you save your file, it's critical that you do the following:-
Save your Web file with the extension .html or .htm
-
Save your file as Text Only. Notepad, TeachText,
and UNIX editors automatically save files as Text Only. If you use other
types of word processors, you'll have to specify this format under the
Save As options.
Basic Structure Elements
A web document consists of two parts: Head and Body. The HEAD primarily contains information about the document, including the TITLE of the document. All of the remaining contents of the web document are contained in the BODY.
The following is the skeleton of a basic web document.
Example:
<HTML>
<HEAD>
<TITLE>Title of the Document</TITLE>
</HEAD>
<BODY>
Contents of the Document
</BODY>
</HTML>
The following three (3) tags are used to create the basic structure of a web document.
HTML: <HTML>
The HTML tag indicates to the web browser that this is a readable HTML
file. This will be your first and last tags in your page source file.
<HTML>Your entire document</HTML>
The HEAD primarily contains one piece of information: the TITLE of the
document.
<HEAD>Information about the Document</HEAD>
All of the remaining contents of the web document are contained in the
BODY.
<BODY>Document Content</BODY>
Example:
Head: <HEAD>
Example:
Body: <BODY>
Example:
Header Elements
Title: <TITLE>Every HTML document should have a title. The title is displayed separately from the document in the browser window title bar and is used primarily for document identification in other context (e.g. Bookmarks). Note: Please limit your title of 6 words or less.
Example:Action: Start Home Page<TITLE>Joe Smith's Home Page</TITLE>
Basic Block Elements
HTML has six (6) levels of headings, numbered 1 (largest) through 6 (smallest). Headings are displayed in larger and/or bolder fonts than normal body text. Note: H5-H6 are smaller than regular text. Also, a blank line is inserted above and below each header.
Example:
<H1>Joe Smith's Home Page</H1>
Note: See all headings
A paragraph tag is used to separate one paragraph from another. A paragraph tag inserts a blank line between the text prior to paragraph tag and the text following the paragraph tag.
In general, the browser ignores any indentations, multiple spaces or blank lines in the source text. One noted exception is "pre-formatted" text which we will cover later. Therefore, HTML relies entirely on the tags for formatting instructions and without the <P> tags, the document would be one large paragraph. The ending paragraph tags </P> is optional.
Example:
Welcome to HTML. This is the first paragraph<P>Now youClick to see Results
are reading the second paragraph.
Note: multiple paragraph tags are ignored. In other words, <P> has the same affect as <P><P><P>.
Line Break: <BR>
A line break is used to start a new line of text or to break a line at a specific point. A line break, like the paragraph tag, is usually a single tag, i.e. There is no </BR>.
Example:
This part of the sentence is on the first line<BR>and this part is on the second line.Click to see Results
Action #2: Add Basic Block Elements
Horizontal Rule: <HR>
Horizontal Rules are used to visually separate text and can be place almost anywhere in the document.
Example:
Here are the items above the line.<HR>And here are the
items below the line.
Pre-formatted Text: <PRE>
The pre-formatted text tag <PRE> is used to preserve the tabs, indentations, and line spacing in your original source text. Netscape and other graphical browsers display pre-formatted text in fixed font, such as Courier; other text appears is a proportional font, such as Geneva or Times.
Example:<PRE> Medal Standings -- 2000 Olympics Sydney Country G S B T USA 25 15 23 63 CHN 22 14 14 50 RUS 17 14 20 51 AUS 12 20 12 44 FRA 12 13 7 32 Date: Sep 26, 2000 </PRE>
Block Quotes: <BLOCKQUOTE>
Block quotes tags are used to set paragraphs apart from the text. This tag set indents a block of text from the left and right margins, and inserts a single line space above and below the block.
Example:
In May, Virginia Commonwealth University's School of Business unveiled its professional Direct Marketing Certification program. It delivers graduate-level studies that businesses are demanding to keep pace with this contemporary marketplace phenomenon. The new modular weekend program -- offered through VCU's Interactive Marketing Institute -- combines elements of a traditional M.B.A. program with direct marketing tools and techniques that professionals need as this strategy expands.
<BLOCKQUOTE>
"To do marketing well today, it needs to be direct," said Pamela Kiecker, Ph.D., executive director of the Interactive Marketing Institute. A 15-year veteran marketer, Kiecker also chairs the school's Department of Marketing and Business Law.
</BLOCKQUOTE>
"We're moving away from broadcast messages to one-on-one communications," she said. "People don't want to be a number, an account. People want to be addressed as individuals, and direct marketing is the way businesses can do so effectively and efficiently."
Action #3: Add Basic Block Elements (part 2)
Lists
HTML supports three (3) types of lists: unnumbered, numbered, and definition. It should be noted that lists are indented and can be nested.Unordered: <UL>
Unordered lists are commonly referred to as bullet lists. Use the <UL> tag to begin an unordered list and </UL> tag to end the list. Individual items in the lists are specified with the <LI> or "list item" tag. Note: there is no corresponding </LI> tag.
Example:
Here are things that I need to do this weekendClick to see results
<UL>
<LI>Do some outside work (between the rain drops) such as wash the car, rake gum balls, and spread some mulch in my flower beds
<LI>Organize my toolshed
<LI>Do my taxes
</UL>
I hope I have time to finish them.
Ordered Lists: <OL>
To create a ordered list use the <OL> tag at the beginning of the list and the </OL> at the end of the list. Again, items within the list are specified by the <LI> tag.
Examples:Ordered List
My four favorite sports are <OL> <LI>professional baseball <LI>college football <LI>college basketball <LI>golf </OL> Enjoy the games!!!Click to see resultsNested List
My four favorite sports are <OL> <LI>professional baseball <LI>college football <LI>college basketball <UL> <LI>VCU <LI>Penn State <LI>Wake Forest </UL> <LI>golf </OL> Enjoy the games!!!Click to see results
Definition Lists: <DL>
Definition Lists are usually used, as stated in the name, for definitions. The list is made up of alternating a term (identified by the <DT> tag) and a definition (identified by the <DD> tag). Web browsers generally format the definition on a new line.
Example:
<DL>Click to see results
<DT> Browser
<DD> A program which allows a person to read hypertext. The browser gives some means of viewing the contents of nodes and of navigating from one node to another. Netscape and Lynx are browsers for the World Wide Web. They act as clients to remote servers.
<DT> Hypertext
<DD> A term coined by Ted Nelson around 1965 for a collection of documents (or "nodes") containing cross-references or "links" which, with the aid of an interactive browser program, allow the reader to move easily from one document to another.
</DL>
Action #4: Add Lists
Text Level Elements
Boldface Text: <B>
Most, but not all, browsers display text as bold when you use the <B></B> tag set.Example:I like Disneyworld, but I <B>do not like</B> standing in line.
Italics: <I>
Many, but not all, browsers display text in italics when you use the <I></I> tag set.
Example:
My favorite place in Disneyworld is <I>Adventureland</I>.Click to see results
Fixed Width Font: <CODE>
The <CODE> tag defines text that should be shown in a fixed width font. Many browsers use the same font for the CODE and TT tags. For many lines of fixed width text, with the line breaks and other whitespace specified by the page author, use the PRE tag.
Example:
<CODE>This is text displayed in a fixed width font.</CODE> <BR>This is text displayed in a variable width font.
Action #5: Character Formatting
Special Markups
Linking to Remote or Local Files
Anchor: <A>
The anchor tag is used to link one resource (i.e. text, graphic) to another resource (i.e. web page). The anchor tag has the format:<A HREF=URL>...text or graphic...</A>Absolute Address
To link to an external web page (i.e. one that is on a different web server), the URL should contain to the absolute address.
Example:<A HREF="HTTP://www.vcu.edu/index.html">VCU Home Page</A>Results in:
Example: VCU Home Page
To link to a local file (i.e. one that is on the same web server), you may use either the absolute address or a relative address. The relative address is the address of the document relative to the page that you are linking from.
Example:www.vcu.edu | |- index.html | |- [math] | |- index.html | |- faculty.html | |- [courses] | |- mat505.htmlTo link from the Math Department Home Page to the Math faculty home page,
<A href="faculty.html">Math Faculty Home Page<A>To link from the VCU Home Page to the Math Department home page,<A href="math/index.html">Math Dept Home Page<A>To link from the mat505.html page to the VCU Home Page,<A href="../../index.html">VCU Home Page<A>Example #2: To link a local file (called localfile.html) from this page,<A href="localfile.html">local file>/a>Results in:
local file
Action #6: Add HTTP Link
Linking to a Section within a Document
You may link a particular section within a document. First you need to set the target using the anchor tag along with the name attribute.<a name="target_name"></a>To set a link to that target from somewhere else in that document you would use the html code:
<a href="#target_name">visible text</a>
You can also link to a target that is defined in another document, using the following HTML code:
<a href="computer/file/#target_name">visible text</a>
Example:<a href="sample.html#rams">VCU Rams </a>
Electronic Mail
The "mailto" URL allows electronic mail to be sent directly from a HTML document. As a web author adding an e--mail link to your home page 1) tells visitors to your page who is responsible for its content and 2) enables visitors to contact them with questions or suggestions about their pages. The form for adding an e-mail link to your page is:
The URL scheme is as follows:
mailto:<e-mail address>?<subject=text>Here are two ways to have e-mail sent to the VCU Webmaster.
Example #1: No predefined subject
<A HREF="MAILTO:webmaster@www.vcu.edu">VCU Webmaster</A>Results in:
Example #2: Predefined subject
<A HREF="MAILTO:webmaster@www.vcu.edu?subject=HTML1 Class">VCU Webmaster</A>Results in:
Action #7: Add E-mail Link
Inline Images
An "in-line" image is a graphics file (e.g. gif, jpeg) that displays as part of your HTML document. It appears automatically if the user turns on "Auto-Load images" in the Options menu. If that option isn't turned on, a place holder appears instead, and the graphics file can be downloaded later. To add an in-line image, you specify the image source using this format:
where "graphics filename" is the name of the graphics file and
"alternate text" is displayed if graphics is turned off of if the pages is
being viewed by a non-graphical browser like lynx.
<IMG SRC="graphics filename" ALT="alternate text">
The alt attribute, which is optional, is vital for interoperability with speech-based and text-only user agents. For disabled people, the alt attribute can provide a brief description of what the image is. For text-ony bowsers, it is the only indication that the user is missing any content.
Be sure to include the quotation marks around the file names.
Action #8: Add an Image
Page Signature and Disclaimer
A typical page signature will contain the following information:
- An e-mail link to the web page author, e.g., webmaster@www.vcu.edu
- The date of last update.
Date Last Modified: September 26, 2000
Expiration Date: June 30, 12000
Updated each business day.
You are expected to update each page on a yearly basis. If you have
a page that does not need to be changed yearly, (e.g. Policy Page), then
your signature should contain an additional line:
Date Last Reviewed: September 26, 2000
All VCU Personal Home Pages must include a disclaimer, such as:
This page does not reflect an official position of Virginia
Commonwealth University.
If links to commercial sites are necessary, then the page must include
the following disclaimer:
Virginia Commonwealth University does not endorse the following
commercial provider or its products.
Action #9: Add Disclaimer and Date
Putting Home Page on People
Note: People is an IBM RS/6000 multi-user, timesharing computer running the AIX (UNIX based) operating system.
Initial People Setup
In order to create a "home page" in your People account, you must create a "Web" directory to contain your HTML documents and allow the WWW server "read" access to the documents. While this will slightly relax the security of your account area, if you follow these instructions your exposure will be minimized.
You will need to modify the permission on your "home directory" and
create the "public_html"
directory before you can start creating Web pages. We have created a
program to do this for you.
Simply enter the command
makeweb
from the Unix prompt on People. If you use the UCS-AC menu, you need to "quit" the menu (type 'q') to get to this prompt. After you are done, type "menu" to get back into the menu or logout, as desired.
Uploading a file to People
If you created your homepage on a Macintosh or a PC, you will then need to upload the homepage to People with Fetch or Winsock FTP respectively. These applications are available from the Software Downloads page.
Setting Permissions on your Documents
Your "home page" (the initial entry point to your Web documents) should be named "index.html" to keep people from looking at all documents in your Web directory without following your specific links. After you have created a new document you must enter the command
chmod 644 [filename]
before you or anyone else can view it using the Web server.
Accessing your Web Page
There are certain standards in the way the WWW server operates that dictate the way you must set things up. The server runs as a standard "user" on the system so it uses the "other" permissions on your directory and files. It will look for Web documents ONLY in a directory called "public_html" in your home directory (or in sub-directories under that directory). The URL address for these documents is
http://www.people.vcu.edu/~[userid]/[filename]
where "[userid]" is your login id on the system and "[filename]" is the actual name of the file (do not include the brackets "[ ]" in your actual address). Remember, in order for browsers to process HTML documents properly, the "filename" must end in ".html". If no filename is included then the browser looks for a file named index.html.
Publishing your Home Page
Once you have completed your home page and you are satisfied with its appearance, you can submit your URL to be included in the VCU Faculty and Staff Homepage Directory.
General Comments:
- Please remember to follow
VCU's Web Guidelines
when creating your Web documents.
- Organizational homepages must
- contain a link back to the VCU homepage and a link back to their parent organization (if any).
- include the street address, U.S. Mail address (if different), and telephone number of the organization's main office or an obvious link to this information.
- contain the name of the University (completely spelled out).
- incorporate the official university colors of black and gold into their design. The official color of VCU Gold in hexidecimal is FFCC00. This equates to Red=255, Green=204, and Blue=0.
- adhere to the graphic standard guidelines outlined in the VCU Identity web site.
- Personal Home Pages must include a
disclaimer.
- All Web Pages should include a
signature file.
- Avoid overlapping tags, such as
<B><I>Title</B></I>
