Beruflich Dokumente
Kultur Dokumente
Module I
Changing font Sizes and Colors, Using Background Image, Marquee Tag.
Module II
Tables and frames, Creating Tables, Table Element, Adding Border, Adding
Column Headings, Adding Spacing and Padding, Adding a Caption, Setting the
table Width and Height, Add Row Headings, Aligning Cell contents, Setting
Column Width, Centering a Table, Inserting and Image, Spannig Columns,
Spanning Rows Assigning Backgroung Colors, Frame Elements, Creation of
Frame Based Pages, Noframes Element.
Module III
Forms and Java Script Introduction to Forms, Form Elements, Front level
validations using JavaScript
Module IV
Cascading style sheets, Overview of style sheets, Different ways to use style
sheets, Selectors DIV and SPAN Elements, Adding style to a Document, Use id
Classes and Ids, Style Sheet Properties.
Module V: XML
Introduction to XML, XML Basics, XML Structure, Developing a DTD from XML
code, Viewing XML, Viewing XML using the XML Data Source Object, Viewing
XML using Style Sheets.
References:
Internet for everyone, Alexis Leon and Mathew Leon, Leon Tech world.
Module I
Introduction to HTML
Basic Web Design
This hands-on workshop introduces you to the basic principles of Web site design and
authoring using HTML. You will then use FrontPage to create your web page or site and
publish it to the World Wide Web for viewing.
Objectives
Understand and apply design principles when creating and modifying a Web site.
Recognize HTML and Web terminology such as hypertext, tags, browser, and
HTML.
Identify the basic structure of an HTML document and create a simple Web page
using HTML.
Create a new Web site or modify an existing website using FrontPage.
Use tables to design the layout of a Web page.
Understand how typography works on the Web and format fonts and paragraphs..
Set Web page properties such as background colors and images.
Understand graphic formats for Web pages; insert graphics, modify picture
properties
Web files and folders should not have any spaces and be in lowercase.
Use the underscore (_) to connect words in file names.
File names cannot contain colons (:), asterisks (*), questions marks
(?), or other special characters.
Use sticky notes to organize your navigation structure. Use one sticky
note per page and arrange them on a wall or table till you achieve
your desired hierarchy. Index cards can be used in a similar manner.
Sketch page layouts and content layouts to create appropriate page design.
Assess sketches for appropriateness, placement, consistency and usability, and
revise if necessary.
Site ID.
Global navigation bar.
―You are here‖ indicator.
Local navigation bar.
Breadcrumb trail
Small text version of navigation bars (optional)
Source: Don’t Make Me Think, Steve Krug
Site ID Global Navigation
Breadcrumb Trail
“You are here” indicator
Local Navigation
You will know you have succeeded if your site navigation helps users answer these basic
questions:
Where am I? (Site ID)
Where page am I on? (Indicator)
Where can I go? (Navigation)
Page Design
With web pages, the layout design process accounts for the arrangement of text and
graphics elements on the page. These elements can be broadly divided into:
Page Header: Located at the top of the page, it includes the page banner or title
and the navigation bars.
Page Footer: Located at the bottom of the page, this is where you insert copyright
and authoring information, the date of the most recent update, institutional
affiliation.
Side Navigation: This is usually a rail along the side of the page that displays the
global or local navigation.
It is usually a good policy to sketch out the page layout and identify the position of
each element on that page as demonstrated in the diagram below.
Page
Header
Navigation
Panel
Page
Footer
Has to convey site identity and mission: what it is and what it’s
for.
Has to provide an overview of what the site has to offer, and how
it’s organized.
Should provide a way to search the site.
Has to appeal to diverse interests.
Source: Don’t Make Me Think, Steve Krug
Design Concepts
When designing a web site, you need to consider four basic design elements:
Appropriateness
o Does it match with the site’s target audience?
o Do the graphics mesh with the site’s intended purpose?
o Do the tone and style of the language complement the site’s objectives?
Placement
o Place the most important information at the top of the page.
o Use white space to create breaks between page elements.
Consistency
o Place page elements like titles, banners, logos, and navigation elements in
the same spot on every page.
o Consistent visual cues provide the user with a reference point, making it
easier for them to navigate the site.
Usability
o Make the site self-explanatory. Don’t make your users think!
o Make your ―clickables‖ obvious.
o Follow conventions.
o Keep your text brief and to the point. The less there is to scan, the easier it
will be for your users to find their information.
o Design for the lowest common denominator of 800x600 pixels in screen
resolution.
o Screen-size page banners and navigation bars should not exceed 760
pixels in width, and 410 pixels in height.
Introduction to HTML
What is HTML?
An acronym for Hypertext Markup Language, HTML is the language used to create web
documents. Contrary to popular notion, HTML is not a programming language. It is
simply a set of codes that define the layout and content of a web page so that they can be
read and displayed by a web browser. A non-proprietary language, HTML can be created
by a simple text editor as well as a sophisticated web authoring tool like FrontPage.
The World Wide Web Consortium, also know as the W3C, monitors the development of
HTML. As new features are added and obsolete ones deprecated (removed), it is assigned
version numbers. The most recent version is HTML 4.01.
HTML Documents
HTML documents are made up of tags or angled brackets (<>) that contain an element
within them to determine the layout and formatting of the web page. For example, <B> is
the tag used to define text in bold where ―B‖ is the element contained within the tag.
Elements can also include attributes, or additional information for that element.
Attributes are included inside the start tag. For example, you can specify the alignment of
images (top, middle, or bottom) by including the appropriate attribute with the image
source HTML code.
Structure
The basic HTML document is contained within the <HTML> </HTML> tags and
comprises two sections: Head and Body.
The Head contains the page title and meta-tags within the <HEAD> </HEAD> tags. Any
JavaScript code that is used, as well as Cascading Style Sheet information is also
contained within the Head. This section will not be displayed on the web page.
The Body holds the actual content of the page (text, graphics, lists, etc.) contained within
the <BODY> </BODY> tags. The <HTML>, <HEAD>, <TITLE>, and <BODY> tags
are also referred to as document tags.
A basic HTML document would look something like this:
<HTML>
<HEAD>
<TITLE>A Simple HTML Example</TITLE>
</HEAD>
<BODY>
Welcome to the world of HTML. This is the first paragraph.
</BODY>
</HTML>
Tags are case insensitive, i.e. <B> will work as well as <b>.
Not all tags work with all web browsers. If a browser does not
recognize a tag, it simply ignores it. It will display the
information contained within the tags however.
Markup Tags
The information contained in the Body section of an HTML document is formatted using
markup tags. These tags allow us to create paragraphs, line breaks, headings, lists, etc.
They can also be used to set the position of the content using alignment attributes. The
most common markup tags are:
Heading
These tags are used to highlight text by making them bigger and bolder than normal text.
There are six levels of headings numbered 1 through 6, where 1 is the biggest and 6 is the
smallest heading. Headings are specified as <Hy> </Hy> where H stands for heading and
y is the level number (1 to 6).
E.g.:
<HTML>
<HEAD>
<TITLE> Headings</TITLE
</HEAD>
<BODY>
<H1>Level 1 heading</H1>
<H2>Level 2 heading</H2>
</BODY>
</HTML>
Paragraph
These tags, denoted by <P> </P>, are used to define paragraphs. Since HTML does not
recognize carriage returns, it is especially important to use these tags to indicate
paragraphs, or you will end up with as one long block of text.
E.g.:
<HTML>
<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
<P>This is the opening paragraph for this page. It does not have much information at
the moment, but it indicates how a paragraph is constructed in HTML.
</P>
<P>This is the second paragraph on this page.
</P>
</BODY>
</HTML>
Paragraphs can be positioned or aligned relative to the sides of the page by using the
ALIGN=―alignment‖ attribute within the opening tag where the value for alignment is
left, right, center, or justified. The default alignment for a paragraph tag is left.
E.g.
<HTML>
<HEAD>
<TITLE> Working with Paragraphs </TITLE
</HEAD>
<BODY>
<P align = ―center‖>This is the opening paragraph for this page. I have used the
attribute align with the value center to put it in the middle of the page.
</P>
<P align = ―right‖>This is the second paragraph on this page and it is right aligned.
</P>
</BODY>
</HTML>
Line Break
The line break tag <BR> is used to simulate the effect of creating a line break by pressing
the Enter key on the keyboard. It is one of the few HTML tags that is not paired with a
closing tag.
E.g.
<HTML>
<HEAD><TITLE> Page with Line Breaks </TITLE
</HEAD>
<BODY>
Trinity University<BR>
One Trinity Place<BR>
San Antonio, TX 78212<BR>
USA
</BODY>
</HTML>
Comments
Comments are one of the most useful tools in HTML as they can be used to explain and
clarify the structure of the HTML code to other readers. They can also be used to include
information such as the name of the person editing a file or the software and version used
in creating a file. Comments do not appear on the web page. To include a comment in
your HTML file, enter:
<!-- Your comment goes here -->
Introduction to FrontPage
What is FrontPage?
FrontPage is an application used to create web pages. As an authoring tool, FrontPage
includes tools that allow you to design, create, manage, and publish web pages without
needing prior knowledge of HTML. However, a basic grounding in HTML allows you to
tweak and optimize the HTML code that FrontPage generates.
Creating a New Web Page
To launch FrontPage 2002, click on the shortcut on your desktop
(see image on the right). If no icon is available on the desktop, click
on the Start button in the lower left corner of the screen, then
Programs, and then on Microsoft FrontPage.
Unlike previous versions of FrontPage where a new page
automatically appeared on launching the application, when you first launch FrontPage
2002, it displays an empty screen (grey area). To create your first web page click File
New Page or Web or on the Create a new normal page icon.
Your screen should now look like this.
Page Views
FrontPage allows you to work on your page in three views:
Normal View or the WYSIWYG (What You See Is
What You Get) editor. This is the most commonly
used view.
HTML View, which displays the HTML code generated for the page. This is
useful if you want to modify or tweak the HTML code.
Preview Page View displays the page as it would appear on a web browser. You
cannot make any modifications in this view.
To select a specific view, click on the appropriate tab in the lower left hand corner of the
Page View window.
Use the Reveal Tags (Ctrl+/) option under View in the Menu Bar to
display HTML tags in the Normal View. These tags are for
information only and cannot be edited or changed in this view.
Page Properties
The page properties option allows you to change the default look (white) of your
webpage by adding a background images or color, page titles, and even sound and
animation.
You should now see the Page Properties screen shown below.. As you can see, you can
set a number of page options here. For this class, we will only work with title, and
background color and image.
General
In the title box, type in a new
page title, appropriate to your
page. It is not a good idea to
have background sounds on
your web page as it slows the
download.
Background
Click on the Background tab
to change screen options. To
add a background image, click
on the Browse button and
navigate to the location of the
desired image.
Formatting Text
You can format text to be in different fonts, sizes, styles, and colors using the lists and
buttons on the toolbar or the Format Font option in the Menu Bar.
Font List
Size List
Font Type
It is best to select a simple, san-serif font that is easily available on most computers to
avoid variations in how the page is displayed. Choose fonts such as Arial, Verdana, or
Helvetica that are easy to read and available on most computers.
Font Style
This usually refers to setting text as bold, italics, headers, lists, etc.. An easy method to
convert text to bold or italics is to select the text and then click on the Bold ( ) or
Italics ( ) button.
Don’t use the underline style as it will look like a hyperlink and
confuse the reader.
Font Size
In web documents, font sizes have different values from the point sizes used in word
processors. The latter are indicated in parentheses next to the HTML sizes for a sense of
proportion. A point size of 2 or 3 works the best for paragraph text. Select the desired
size from the list or the Font dialog box.
The Font dialog box offer allows you to set text effects such as
superscripts, subscripts, strikethrough, etc. Not all of them are
supported by browsers, and some, like Blink, can also be annoying.
Avoid using them.
Font Color
You can select font color along with other options in the
Font dialog box. You can also use the Font Color button
on the Tool Bar.
Formatting Paragraphs
Paragraphs are aligned or positioned relative to the sides of the web page as Left, Right,
Centered, or Justified. You can align a paragraph with any of the following methods:
Right-click in the paragraph and select the Paragraph command from the menu.
Select Format Paragraph
Use the Align Left ( ), Align Right ( ), Center ( ), or Justify ( ) buttons
on the Tool Bar.
The first two methods will open a dialog box where you can set the alignment as well
other options such as text indents and line spacing.
Inserting a Picture
Graphics for web documents should be in one of the following formats:
GIF (Graphic Interchange Format): Limited to 256 colors, therefore, best suited for
logos and clip art (non-photo images)
JPEG (Joint Photographic Experts Group): This format supports millions of colors
and is ideal for photographs. Save scanned photos in this format.
In order for the page to load correctly, all the ―parts‖ of the web page
(graphics, animations, video files, photos, sounds, etc.) have to be located
in the ―same place‖. If the web ―page‖ can’t find items, you will not be
able to see them in your page.
Make sure you put your image files in the same location as your web
page.
For precise sizing as well as to set other options, right-click on the image and select
Picture Properties from the menu to display the Picture Properties dialog box.
Cropping Graphics
You can also resize an image by cropping it so that you only retain the details you want.
Basic cropping can be done in FrontPage itself as follows:
Select View Toolbars Pictures to bring up the Pictures toolbar.
Click on the Crop button ( ) to display the cropping box on the graphic.
Drag the cropping box handles to size the box and click on the Crop button again
to crop the graphic.
In the Insert Hyperlink dialog box, click on the Hyperlink button at the top of the
dialog box.
Hyperlink
button
A Text Help will appear indicating that this button will ―Browse to the web.‖ You will
then be taken to the default page in your browser. In the Address Area, type in the
address of the web page or site you would like to link to and tap the Enter key to go to
that page. When you see the web site, click on the Front Page button at the bottom of
your screen in the task bar.
This will take you back to FrontPage 2002 and the Insert Hyperlink dialog box.
Click on the Browsed Pages button and select your site from the list of choices that
appears. The Address area at the bottom of the menu screen will also indicate the web
address to which you browsed. Click on OK to complete placing the hyperlink.
Web address
Bookmark Links
Bookmark links are used to link to a section within the same document. It is particularly
useful with long documents that would require the user to scroll up and down. There are
two steps to adding a bookmark link:
Create the bookmark.
Create a link to the bookmark.
To create the hyperlink to the bookmark, select the text to be hyperlinked, then select
Insert Hyperlink from the Menu Bar or use the shortcut Ctrl+K. You can also click
on the Hyperlink button on the Tool Bar.
This will open up the Insert Hyperlink dialog box. Click on the
Bookmark… button and select the appropriate bookmark. The
hyperlinked text will now appear as blue underlined on the page.
To test your link, hold down the Ctrl key and click on the link.
Email Links
Email links are used so that users can email webmasters or other contact individuals their
comments and feedback. To create an email link, select Insert Hyperlink from the
Menu Bar or use the shortcut Ctrl+K. You can also click on the Hyperlink button on
the Tool Bar. In the Insert Hyperlink dialog box, click on Email Address and fill out
the email address.
More locations
Location name
File name
FrontPage will try to use your title for the name of the web page.
If it is more than 8 characters long, some older computer systems and
servers might not work well with the name.
Also, the name should not have an apostrophe (’) as this is a reserved
Java character and could cause later problems as well.
Tables
A table on a web document is essentially a grid of rows and columns. Each intersection
of a row and a column creates a cell. Tables make it easier to design page layouts because
they allow you to display information in a formatted tabular form.
Table properties for each web page should be determined and sketched out as early as
possible. Several small tables will load faster than one long table. Sometimes,
depending on the content, you may need to tables within tables. These are called nested
tables.
Creating a Table
To create a table on your page, place the cursor at the point you want the table to be and
select Table Insert Table from the Menu
Bar. This will display the Insert Table dialog box
shown below.
Table Properties
Specify width sets the width of the table by a distinct number of pixels or by a
percentage of the screen width. Use the In pixels option, when you want the table to be a
certain width and avoid horizontal size changes.
Alignment refers to the table's position on the page as in centered, left, right, or justified.
The default is usually left alignment.
Cell padding is the number of pixels between the text and the cell walls.
Specify height is usually not necessary to set since the height depends on the number of
rows in the table.
Border size indicates the thickness of the border around each cell. Tables used for
content layout should have a border of 0 to hide the borders. Tables that are used to
display tabular information can have their borders set to higher values.
E.g.
Border color defines the color used for the border. For example, the border color in the
table above is grey.
Within a cell, the formatting options are the same as within the document. Therefore,
pressing the Enter key will create a paragraph break, while pressing Shift+Enter will
create a line break.
Pressing the Down Arrow (↓) key will move the cursor out of the table and to a new
paragraph below.
Cell Properties
To modify cells properties, first select the cells to be changed, then select Tables
Properties Cell from the Menu Bar. You can also right-click within a cell and select
Cell Properties from the menu. Either option will bring up the Cell Properties dialog
box.
Horizontal alignment defines the position of the content within the cell. The default
is the Left side of the table cell. You can change this to Centered, Right, or
Justified.
Vertical alignment refers to the position of the contents relative to the top and
bottom of the cell. The default is at the Middle.
Specify width and specify height defines the width and height of the cells. Percentages
refer to the portion of the table, not the entire screen.
The Header cell option will automatically bold and center the cell content.
Border color changes the color of the cell border as demonstrated below.
Spanning Cells
Sometimes, you may need to create a cell that spans rows or columns; a cell that carries
the page banner or title for example. In such situations, you will need to span that cell
across columns or rows as the case may be. Using the table used in the above examples, it
would work like this:
You can also insert a row or column right-clicking in the cell the new row or
column will be adjacent to. Select Insert Row or Insert Column from the
popup menu.
Creating a Website
In this section, you will learn to create a small web site using FrontPage. It is
recommended that you familiarize yourself with the basic concepts of web design, and
learn to use FrontPage to create and edit web pages prior to creating a web site.
In the chapter Introduction to FrontPage, you learnt to hyperlink to other web pages
and sites. When creating a web site, FrontPage automatically creates the links to the other
pages in your web site.
If you still have your single web page on the screen, select File Close in the
Menu Bar. If you are prompted to save your changes, select Yes.
To create a new web site, select File New Page or Web in the Menu Bar. This
will bring up a ―Task Pane‖ on the
right hand side of your screen.
The Task Pane is Office 2002’s alternative to the dialog box. It is a Web-style
command area that you can dock along the right or left edge of your screen or
float anywhere on the screen.
Source: Microsoft Office SP Inside Out
First (1) , make sure that the upper left icon One Page Web is highlighted. If
it is not, click on it.
Second (2), in the ―white area‖ under Options, specify the location of your
new web by typing in c:\webtest.
If your Web Site Templates dialog box should looks like the one on the following
page, click OK. This will take you back to the FrontPage 2002 main screen.
It may appear that nothing has happened. However, if you look at the upper left
corner of your screen you will see that the web site c:\webtest has been created (se
image below).
Since this is a web site, and the Views Bar on the left of the screen is set on Page,
you will have to select another button in the Views Bar to be able to see and work
with your web site.
1
.
2
.
The Folder List will now appear on the left side of your screen to the right of the
Views Bar. The Folder List indicates that your new web site is located on the C: drive in
the Folder webtest. Notice also that two new folders have been created by FrontPage:
private and images. FrontPage has also created your initial home page called index.htm
To create our web site we’ll want to be in the Navigation View, so click on the
Navigation button on the View Bar. When this process is complete
you will see your initial Home Page of the web site in the center of
the screen.
Take a few minutes to look at all of the “stuff” on the screen. Take note of the words
below the Home Page (index.htm), they’re important.
To see this, select File Exit in the Menu Bar. FrontPage will close. Now open
FrontPage as you did at the beginning of this tutorial. Your new web site will shows up
just as you had left it. This is a new feature of FrontPage 2002.
First, click on the Home or Index Page in the middle of the screen. Prior to your click,
it will appear as a light yellow icon, when you click on it, it will turn blue. This indicates
to FrontPage which page you desire to work on. In this case you will add, and
automatically link, three additional pages below your main home page.
Again, make sure the Home Page icon is blue. To add the first page
under your home page, click on the New Page button (looks like a sheet
of paper) in the upper left corner of the screen. As soon as you click,
your screen will change to reflect that you have just created New Page 1 below your
Home Page (index.htm).
This is where FrontPage really does its work. When you add a new
page, FrontPage automatically hyperlinks it to the corresponding
page. Your screen should now look like the one at the right.
Add two more pages under your Home Page (index.htm). Each
time, click on the Home Page (index.htm) to turn it blue, and then
click on the New Page button. Your screen should now look like
the one below:.
Next, we’ll add two pages under New Page 3. The process is similar to what we just did.
First, click on New Page 3, to turn it blue, and then click on the New Page button. Do
this twice. Your web site should now look like the one below.
If you make a mistake as you are adding new pages, simply
click-on the erroneous new page and tap the Delete key.
Or right click on the page and select Delete from the popup
menu.
Before you can look at it however, you need to do a very important task. You need to
tell FrontPage what you want to see on your web pages in your web site. To do this,
select Format Shared Borders in the Menu Bar. This will bring up the Shared
Borders dialog box.
To make the titles and the links of each web page visible, select All Pages. Also check
the squares to the left of Top and Include navigation buttons, and Left, and Include
navigation buttons.
Your Shared Borders screen should look exactly like the one on the following page.
When it does, select OK.
To see what your site looks like at this point, double click on the Home Page
(index.htm) icon. You can also right-click on the Home Page (index.htm) icon and
select Open from the popup menu. This will load the Home Page in the Editor (Page
View).
Take a few moments to look at the top of the page in the Editor (Page View). It should
look like the view below.
Observe that the title to the Home Page (index.htm) appears at the top of the page in the
Editor (Page View) – just as it did when FrontPage created it.
Also, New Page 1, 2 and 3 on the left side of the page are links to the pages that you
created one level below the Home Page (index..htm).
As indicated earlier, you will return to the Navigation View and re-name these pages so
that they make more sense to your web site. Don’t worry about the dashed lines, these
are simply there to assist you later in the Page View. They will disappear when you view
your web site in a browser.
Your initial view of your Home Page (index.htm) should look like the image below.
In the browser, your ―blank‖ website will respond like any other website. When you
move the cursor over the titles New Page 1, New Page 2, and New Page 3, you will
notice that the pointing hand appears, indicating a hyperlink.
It does not matter if there are more than three pages above, or on the same level as the
current page, all the pages will show with their names. These are part of the automatic
hyperlinks that FrontPage creates.
Now click on New Page 3 in the browser. Your browser should now look like the image
below.
Pages
Below
New
Page 3 Pages Above and
at the Same Level
as New Page 3
Remember the two new pages you created below New Page 3? These now show up as
New Page 4 and New Page 5 on the left side of the page. The line below New Page 3
now contains the text links for pages above or on the same navigation level as New Page
3.
The Name column on the left side of the screen displays the file names (index.htm,
new_page_1, etc.) for each page. The Title column displays the actual page names as
they appear on the Navigation View boxes (index.htm, New Page 1, etc.). When you
rename the page titles, the new titles will appear in the Title column.
Return to the Navigation View in the View Bar to give your pages new titles.
In a Windows program this indicates that you can edit the text. You can start typing
immediately to replace index.htm, or you can delete the text and then type in the new
page title.
For now, type in First Name’s Home Page where First Name’s is
your first name, and tap the Enter key when you are finished. Select
View Refresh on the Menu Bar to update your changes. You
will see the page title is now the one you entered.
Place the following titles for the other pages in your website in a similar manner. Once
you get the hang of this, you can change the titles to anything you desire, add more pages,
etc.
New Page 1: About Me
New Page 2: About My Family
New Page 3: My Hobbies
New Page 4: Type-in the name of a hobby
New Page 5: Type-in the name of another hobby
In Page View, click on the browser button in the Tool Bar, or select
File Preview in Browser in the Menu Bar.
Click around your web site. You will notice that FrontPage has automatically changed
all of your pages and buttons.
Themes
For a website to be effective, it needs to have consistent design. FrontPage allows you to
create this easily by using themes, or consistent formatting features that are applied to all
the elements of a page. Applying the same theme to all the pages gives the entire website
a consistent look. (You can change them page by page later if you so desire).
If you are not there already, return to FrontPage by clicking on the FrontPage button in
the Task Bar at the bottom of the screen. It does not matter which view (Page,
Navigation, etc.) you are in when you return to FrontPage.
Select Format Theme in the Menu Bar. This will take you to the Themes dialog
box.. When it first appears, you will notice that the
display area is blank. this is because at this point, you
have not yet selected a theme to view.
When you have decided on a theme, make sure you select one of the options under Apply
Theme to:.
If you select All pages, the theme will be applied to all the pages in your website.
If you choose Selected page(s), FrontPage will apply the theme to only those
pages.
Remember the consistency rule while making your choice! Click OK when you are
ready.
This will bring up the following message screen:
It indicates that all of your formatting will be changed to the theme you selected. Click
Yes.
To see if your theme has been applied to the website, click on the Navigation button in
the Views Bar. When you see your website organization chart, double-click on your
home page at the top of the chart. As before, this will take you to the Page view and
your home page. You will notice that the theme you chose has been applied to this
page.
You are now ready to save your website and view it in a web browser. To save your
pages, select File Save All in the Menu Bar.
You are now ready to view your updated website in the browser. Click on the Preview in
Browser button, or select File Preview in Browser in the Menu Bar to open your
website in the browser. Browse around to see how everything works.
Trinity’s web server is indicated by Web on TUCC-Web’ (W:):. You can access it by
clicking on the My Computer icon on the desktop, or by right-clicking the Start button
and selecting Explore from the popup menu.
As you can see, there are two parts to the Web server.
The trinity folder is used to allocate web space
to campus departments so they can publish
departmental websites.
The users folder is the personal web space allocated to faculty and staff to publish
non-departmental websites. This space is available on request.
To publish your website, select File Publish Web from the Menu Bar. This will
display the Publish Destination dialog box as shown below.
In the Enter publish destination box, type the full URL (address) of the location you
want to publish to as indicated in the picture.
Don’t use the Browse button to navigate to the W: drive! You need to enter the
complete URL.
You will now be prompted to enter your username and password as shown below. When
typing in your username, make sure you use the following format: trinity\username.
Once you connect, you will see the Publish Web dialog box displayed on the following
page.
local remote
view view
The top part of the dialog box indicates the location you are publishing from and the one
you are publishing to. Use the Change button to change the publishing location if you
need to.
The middle area of the dialog box is divided into two parts:
The local view is on the left.
The remote view is on the right.
If you are publishing for the first time, simply click on the Publish button to copy your
files to the specified web location. If your website has subwebs (websites within
websites), make sure you have checked off on the Include subwebs option. In fact, it is a
good policy to check this off always before publishing.
BASIC TAGS
<html>...</html>
Creates the html document
<head>...</head>
Contains the head information, such as the title and meta tags which are not visible to the
user
<title>...</title>
Contains the title of the document which appears at the top of the browser window
BODY
<body>...</body>
Contains the viewed portion of the document
<body bgcolor="?">
Sets the color of the background in hexadecimal code
<body background="filename.xxx">
Sets an image as a page's background (wallpaper)
<body text="color">
Specifies the color of normal text in hexadecimal code
<body link="color">
Specifies the default color of unvisited links in hexadecimal code
<body alink="color">
Specifies the color of links on click in hexadecimal code
<body vlink="color">
Specifies the color of followed links in hexadecimal code
FORMATTING
<p>...</p>
Creates a new paragraph
<p align=?>
Aligns a paragraph to the left, right, or center
<br>
Inserts a line break
<blockquote>...</blockquote>
Indents text from both sides
LISTS
<dl>...</dl>
Creates a definition list
<dt>
Precedes each definition term
<dd>
Precedes each definition
<ol>...</ol>
Creates a numbered list
<li>...</li>
Precedes each list item, and adds a number
<ul>...</ul>
Creates a bulleted list
<div align=?>
A generic tag used to format large blocks of HTML, also used for stylesheets
TEXT ATTRIBUTES
<pre>...</pre>
Creates preformatted text
<hl>...</hl> to <h6>...</h6>
Creates headings – H1 largest, H6 smallest
<b>...</b>
Creates bold text
<i>...</i>
Creates italic text
<tt>...</tt>
Creates teletype, or typewriter-style text
<cite>...</cite>
Creates a citation, usually italic
<em>...</em>
Emphasizes a word (with italic or bold)
<strong>...</strong>
Emphasizes a word (with italic or bold)
<sub>...</sub>
Subscript - text is lower than baseline
<sup>...</sup>
Superscript - text is higher than basline
FONT ATTRIBUTES
<font>...</font>
Changes font attributes for text within the tags
<font size="value">...</font>
Sets the font to a size from 1 to 7, with 1 the smallest and 7 the largest
<font face="name">...</font>
Sets the font face
<font color="color">...</font>
Sets the font color using hexadecimal code or ―color‖ <font color=‖blue‖>
IMAGES
<img>
Embeds an image in the document at the location of the tag
IMAGE FORMULA
<IMG SRC=”filename.xxx”>
<img src="url" alt="text">
Adds an image with a text description
LINKS
URL FORMULA
<A HREF=”URL”>LinkText</A>
<a>...</a>
Designates the origin and destination of a hyperlink
<a href="#name">...</a>
Links to a target location in the current page
<a href="URL#name">...</a>
Links to a target location in a page outside the current page
<a name="name">...</a>
Sets a target location within a document
<a href="mailto:email@something.com">...</a>
Creates a mailto link
TABLES
<table>...</table>
Generates a table
<table border="pixels">
Sets the size of cell borders
<table cellspacing="pixels">
Sets the amount of space between cells
<table cellpadding="pixels">
Sets the amount of space between a border and cell content
<td>...</td>
Defines a table data cell
<td colspan="columns">
Sets a cell to span columns
<td rowspan="rows">
Sets a cell to span rows
<td nowrap>
Prevents the lines within a cell from wrapping
<th>...</th>
Defines a table header with bold, centered table data
<tr>...</tr>
Defines a table row
FRAMES
<frameset>...</frameset>
Specifies the layout of subsections in the main browser window
<frameset rows="value,value">
Defines the rows within a frameset
<frameset cols="value,value">
Defines the columns within a frameset
<noframes>...</noframes>
Provides alternate content for browsers that do not support frames
<frame src="?">
Defines the appearance and content of a single frame
<frame name="name">
Labels the frame for targeting by other frames
<frame marginwidth="#">
Sets the margin width of a frame
<frame marginheight="#">
Sets the margin height of a frame
<frame scrolling="value">
Creates a frame scrollbar
<frame noresize>
Prevents the resizing of a frame
It is best to not use frames for usability reasons and so that search engines can spider the
site effectively
HORIZONTAL RULES
<hr>
Inserts a horizontal rule
<hr size=?>
Sets size (height) of rule
<hr width=?>
Sets width of rule, in percentage or absolute value
<hr noshade>
Creates a rule without a shadow
FORMS
<form>...</form>
Generates a container for all form elements
<form action="url">
Designates the path of the script to process input from the form
<form method="get|post">
Instructs the browser how to interact with the form URL
<form accept-charset="text">
Defines which character sets are supported by the server processing the form
<option>
Defines each menu item
<select name="name">...</select>
Generates a pull-down menu
<input type="checkbox">
Generates a check box
<input type="hidden">
Conceals a field from view
<input type="image">
Generates an image that acts like a Submit button
<input type="password">
Generates a one-line password box
<input type="radio">
Generates a radio button
<input type="text">
Generates a one-line text box
<input type="submit">
Generates a Submit button (send form)
<input type="reset">
Generates a Reset button (clear form)
SPECIAL CHARACTERS
&
&
Ampersand
™
™
Trademark
®
®
Registered trademark
©
©
Copyright
"
"
Double quote marks
“
―
Left quote
”
‖
Right quote
⁄
/
Forward slash
<
<
Less than arrow
>
>
Greater than arrow
»
»
Right pointing double angle quotation mark
«
«
Left pointing double angle quotation mark
—
—
Em-dash
£
£
Pound sign (GBP currency)
°
30°
Degree
¼
¼
Quarter
½
½
Half
¾
¾
Three quarters
·
·
Middle dot
¡
¡
Inverted exclamation mark
♠
?
Black spade suit
♣
?
Black club suit
♥
?
Black hearts suit
♦
?
Black diamond suit
MODULE
This document covers most commonly used HTML elements and attributes, but not
all. For an excellent source of information regarding available HTML 4.0 elements and
attributes, refer to the Web Design Group's web page, HTML 4.0 Reference section.
Used in combination with information from the Web Design Group and the World
Wide Web Consortium web pages (See the links section or "Recommended Reading"
section of this document for URL) this document should provide a thorough
introduction to HTML.
HTML Support
You should also know that many of the element tags are being depreciated in favor
of cascading style
sheets. This means that some of the attributes with regard to text fonts and color
are being depreciated and these values are to be controlled using the style sheets.
This makes it easier to control the attributes of multiple HTML documents such as the
HTML in this document from one cascading file sheet file. You should learn at least
minimal control of attributes using style sheets before writing great quanties of
documents and thereby being forced to go back and change your files. Some
examples in this document demonstrate the use of style sheet and inline style
commands. Many of the elements not supported by the strict HTML 4.0 document
type definition (DTD) will be noted with the word "depreciated" where they are
presented.
One other consideration to be aware of is that various client web browsers have
various support for various methods of setting attributes and displaying information
that is contained in web pages. For instance, not all older web browsers support
frames, but most clients should have web browsers today that support frames. Also
some style sheet properties may be supported by some browsers but not by others.
The best way to determine what will work is to read referenced documentation and
experiment.
Directory Structure
You will want to create your web pages in a separate directory on your computer and
as you link deeper into your web pages you will want to create more sub-directories.
Normally, I use the following structure:
mainpage - The main folder for your web page, name it an appropriate name for
your web site. Your HTML files for your home page will go here.
gifs - Where I put all gif files to be used in common with the mainpage and other
pages such as buttons used to provide links to other parts of my web page. I
usually place all backgrounds here. I do not put pictures for specific sections
here. For example, all pictures that are used in "The CTDP Networking Guide" are
placed with the HTML files in that folder.
subject1 - In the case of the CTDP, this may be "Linux". Your html and graphics files
for a particular web page subsection will go here. Subject1/sub1 - Sub subjects of
subject 1.
subect1/sub2
The additional element allowed by the HTML 4.0 transitional standard is:
ISINDEX (Depreciated) - Allows a single line of text input. Use the INPUT
element rather than ISINDEX.
An example:
<link href="style.css" rel="stylesheet" type="text/css">
The <TITLE> Element
The text between the <title> and </title> tags is the title of the document.
An example:
<title>The CTDP HTML Guide</title>
The <SCRIPT> Element
Used to embed script in the header of an HTML document. Attributes:
CHARSET - The character encoding of the script such as "ISO-8859-1".
DEFER - The script will not be parsed until the document is loaded.
LANGUAGE - Describes the name of the script language.
SRC - The external location where the script may be. In this case the script in
not includes in between the SCRIPT tags, but an external file is loaded.
TYPE - Describes the content type of the script language.
If this element is used an external style sheet is not used as can be done using the
LINK element, above. The style sheet information is embedded between the <style>
and </style> tags.
HTML Body
The Body
The body will define the rest of the HTML page which is the bulk of your document. It
will include headers, paragraphs, lists, tables, and more. These elements are
described fully in the rest of this document.
An example body section:
<body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000080"
alink="#FF0000"><h1 style="text-align: center">HTML Document
Structure</h1><p>This is a sample HTML file.</p></body></html>
The above example is similar to the body section in the example in the "HTML
Document Structure" section with the exception that this example controls the body
background, wallpaper, and link color directly rather than using style sheets. As you
can see below many of the attributes to control the BODY are depreciated in favor of
style sheet use.
The BODY Element Tags and Attributes
The <body> tag is used to start the BODY element and the </body> tag ends it. It
is used to divide a web page within one or more sections. Its tags and attributes are:
<body> - Designates the start of the body. ONLOAD - Used to specify the
name of a script to run when the document is loaded.
ONUNLOAD - Used to specify the name of a script to run when the document
exits.
BACKGROUND="clouds.gif" - (Depreciated) Defines the name of a file to use
for the background for the page. The background can be specified as in the following
line. <body text="#000000" bgcolor="#FFFFFF" link="#0000EF" vlink="#51188E"
alink="#FF0000" background="clouds.gif">
BGCOLOR="white" - (Depreciated) Designates the page background color.
TEXT="black" - (Depreciated) Designates the color of the page's text.
LINK="blue" - (Depreciated) Designates the color of links that have not
been visited.
ALINK="red" - (Depreciated) Designates the color of the link currently being
visited.
VliNK="green" - (Depreciated) Designates the color of visited links.
For the depreciated attributes noted above, see the "Setting document
style" section for an example of how to set the same attributes using a style
sheet. If the colors are defined with "#FFFFFF" as done in the above example, the
values indicate the intensity of the colors, red, green, and blue in hexadecimal. The
leftmost two "FF" indicate the strength of the color red, the center indicates the
strength of the color green, and the rightmost two indicate the strength of the color
blue. The values may be a hexadecimal value from 0 through FF which in decimal is
0 through 255. The highest value being the highest strength of the respective color.
This format is "RRGGBB". You can also specify the color with one of the following
standard colors.
1 black
2 white
3 red
4 green
5 blue
6 yellow
7 magenta or fuschia
8 cyan or aqua
9 purple
10 gray
11 lime
12 maroon
13 navy
14 olive
15 silver
16 teal
When I start an html document, I typically call the first page in the document
"index.html". This is because it is a standard name used by web servers for the
home page, and it is easy to remember that most html documents start with the
name "index.html". The "index.html" file and all associated html files it will link to
which are a part of the document are contained in the same sub directory on the
computer. Therefore, when writing this document I started with the following HTML
file as my "index.html" file. Note: Some experts would argue the wisdom of naming
your file "index.html", in favor of a more descriptive title that would show up on
search engines. What you do should depend on your needs.
<!DOCTYPE HTML PUBliC "-//W3C//DTD HTML Frameset 4.01//EN"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9"> <meta
name="keywords" content="Documentation, networking, howto, routing,
information, routers, firewalls, firewall, IP, masquerading, masquerade, arp, rarp,
tcp, udp, protocol, protocols"> <title>The CTDP HTML
Guide</title><head><frameset border="1" cols="200,*" frameBorder="0"
frameSpacing="4"><noframes><body><p>You should include HTML here to
support webcrawlers and browsers that don't support frames. You may want to
include a second copy of your index, and set your wallpaper and colorsin the BODY
statement above the same as you would in your index
file.</p></body></noframes><frame name="left" src="htmlindex.html"><frame
name="right" src="htmlintroduction.html"></frameset></html>
Notice that in this example there are initially no <body> tags. The only <body> tags
occur inside the NOFRAMES section which supports browsers that are not frames
capable. The <body> tag is replaced by the <frameset> tags. The <frame> tags are
used to define each element in the FRAMESET. Notice that there is no </frame> to
end the FRAME element. You should also note that rather than setting the document
type (in the first line, above) to Transitional, it is set to Frameset in order to
support frames.
Tags and associated attributes for FRAMES
<FRAMESET> - Used to divide the browser window into separate frames that
can display multiple documents ROWS="10" - Splits the window vertically into a
number of rows specified by one of: A number of rows.
A percentage of the total window height. EX: ROWS="10%".
An asterisk means the frame will occupy all the remaining space. It will divide
the space evenly between frames if multiple frames are specified with the asterisk.
ColS="10" - Splits the window horizontally into a number of columns specified
by one of: A number of columns.
A percentage of the total window width. EX: ColS="10%".
An asterisk means the frame will occupy all the remaining space. It will divide
the space evenly between frames if multiple frames are specified with the asterisk.
ONLOAD - Used to specify the name of a script to run when the document is loaded.
ONUNLOAD - Used to specify the name of a script to run when the document exits.
FRAMESPACING="12" - (Depreciated) Defines the space between the frames in
pixels.
FRAMEBORDER="NO" - (Depreciated) Defines whether a border for the frames
should be displayed. The choices are YES or NO.
BORDER="5" - (Depreciated) The size of the frame border in pixels.
<NOFRAMES> - Used for web browsers that don't support FRAMESETs. It provides
an alternate body in documents that are FRAMESET documents. The <BODY> and
</BODY> tags which define the BODY element are normally inside the
<NOFRAMES>...</NOFRAMES> tags.
</NOFRAMES> - Ending tag for the NOFRAMES element..
</FRAMESET> - Used to end a frameset.
Another example
Another, slightly more complicated example is:
<frameset rows="10%, *"> <frame name="top" src="topselect.html">
<frameset cols="10%, 30%, 30%, 30%"> <frame name="leftbar"
src="myindex.html"> <frame name="mleft" src="mleft.html"> <frame
name="mmiddle" src="mmiddle.html"> <frame name="mright" src="mright.html">
<frameset></frameset>
This example uses two framesets. The first divides a top section and a bottom
section. The second frame set divides the rest of the window (90%) into four
sections, the first composing the leftmost 10%, and each of the other three sharing
30%.
How to get new information into the frame
To make frames useful, you will need to use anchor links to direct the contents of
HTML files to them. This is done using the TARGET attribute with the anchor tag as
follows:
<a href="htmlstructure.html" target="right">HTML Document Structure</a>
In my first example, I defined a frame with the name "right". When the user clicks
on this link with their web browser, the HTML file pointed to by the link will be
directed to the target named "right" which is defined on the right side of the browser
window. The anchor statements shown above are placed in the file called
htmlindex.html which resides on the left side of the browser window. This allows the
user to control the contents of the right side of the browser with the index file, full of
anchor links, which resides in the left side of the browser window. A sample
abbreviated index file is listed below:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1"> <meta name="GENERATOR" content="Arachnophilia 3.9"> <meat
name="FORMATTER" CONTENT="Arachnophilia 3.9"> <title>The CTDP HTML
Guide</title></head><body><h3>HTML Index</h3><hr><ol><li><a
href="htmlintroduction.html" target="right">Introduction</a><h3>Structure</h3>
<li><a href="htmlstructure.html" target="right">HTML Document
Structure</a><li><a href="htmlhead.html" target="right">The Header
Section</a><li><a href="htmlbody.html" target="right">The Body
Section<a><li><a href="htmlframes.html" target="right">Using
Frames</a><h3>Layout Mechanisms<h3><li><a href="htmlparagraphs.html"
target="right">Headers and Paragraphs<a><li><a href="htmllists.html"
target="right">Lists</a><li><a href="htmltables.html"
target="right">Tables</a></ol><center><a href="../index.html" target="_top"
onMouseOver="window.status='To Computer Tech Home Page' ;return true"
onMouseOut="window.status='';return true"><img src="../greenhomebutton.gif"
alt="Home" vspace=3 border=0 height=33
width=115<a></center></body></html>
Categories
HTML Guide Contents Page
TABLE Used to present an ordered set of data. Table Includes table sub
subelements work as block elements. elements
See the section called "HTMLElement Categories" for a list of block and inline
elements with short descriptions.
In HTML there are specific rules with regard to what elements a specific element may
contain. For example some elements may only be contained in the HEAD header
element. The paragraph element may not contain block elements. The table below
lists elements and what they may contain:
Q inline elements
S inline elements
SAMP inline elements
SELECT OPTION, OPTGROUP
SCRIPT none (script program)
SMALL inline elements
SPAN inline elements
STRIKE inline elements
STRONG inline elements
STYLE none (A style sheet)
SUB inline elements
SUP inline elements
TBODY TR
TD inline elements, block elements
TFOOT TR
TH inline elements, block elements
THEAD TR
TR TH,TD
TEXTAREA none (text)
TITLE none
TT inline elements
U inline elements
UL LI
VAR inline elements
HTML Headers and Paragraphs
HTML Headings
There are 6 levels (H1 through H6). H1 is the largest. Headings are always displayed
as bold text (Unless modified using the STYLE attribute or style sheets). Headings
with numbers above the <h3> tag such as <h4><h5> and <h6> are not normally
used since they are so small.
<h1> - Start heading of level 1.</h1> - End level 1 heading.
Heading attributes are the same as the paragraph attributes, below. No attributes
are supported by strict HTML 4.0 other than common attributes such as STYLE which
are used to set color and position.
HTML Paragraph
The paragraph element begins with the <P> tag and ends with the </P> tag. It
should not contain tables and other block elements. A sample is shown below.
<p>This is a sample paragraph element. Any text in a paragraph goes here.</p>
Paragraph Attributes
ALIGN="CENTER" - (Depreciated) Sets the alignment of the paragraph with
respect to the page size. Values are LEFT, RIGHT, and CENTER.
STYLE="font: 16pt courier" - Sets the style or color of the text. This
statement starts a paragraph with color, blue: <p style="color: green">. The STYLE
attribute is common to most HTML elements (See the "Common Attributes" section).
Paragraph Examples
This is the HTML code for a paragraph demonstrating use of the STYLE attribute
along with the SPAN element.
<p style="text-align: 'center'; font: '16pt'; courier; color: 'blue'">The color of the
sky is blue, but if you look at the <span style="color: 'green'">trees, they are
green</span>. This effect is produced using the <span> element with the
style ="color: 'green'" attribute set.</p>
This is how it looks:
The color of the sky is blue, but if you look at the trees, they are green. This effect is
produced using the <SPAN> element with the STYLE ="color: 'green'" attribute set.
An example HTML document using Headers and Paragraphs
This example is from "The CTDP Linux User's Guide":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"><html><head><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"><meta name="GENERATOR"
content="Arachnophilia 3.9"><meta name="description" content="Comprehensive
Documentation and information about Linux."><title>The CTDP Linux User's
Guide</title></head><body><center><h1>Logging in, Logging Out, and Shutting
down</h1></center><h3>Logging in</h3><p>Once you have completed your
system install and booted your system, you should see a login prompt on your
monitor. When you did your Linux install you should have set a root password. You
may have also created a user with a password. Therefore to log in, you will want to
type the name of a user or "root" for the login name and enter the appropriate
password. If you logged in as a normal user and know the root password and want
to use administration commands, you may use the command "su" to become a
"super user". Some systems also support the "sudo" command, which allows
administrative privileges on a command by command basis.</p>
<h3>Logging out</h3><p>Use the command "logout" to exit a given session. If
you have logged in, then typed "su" to become a super user or another user, you
may need to type "exit" until your SHLVL environment value is 1. Then you can type
"logout" to exit your session. The "exit" command will take you back to previous
shell levels.</p><h3>Shutting Down</h3><p>The system is intended to be
shutdown by the system administrator using the shutdown command in one of the
forms shown below. Many systems are set up to capture the
<CTRL><ALT><DEL> keystroke combination to issue the
shutdown command through the init program. This will work on most systems if the
root user is logged in. Examples of using the shutdown command are shown
below.<blockquote>shutdown -h now<br>shutdown -r +10 "Rebooting in 10
minutes"<BR>shutdown -r 13:00<BR></blockquote>The first command will
shutdown and halt the system immediately. The second will reboot the system in 10
minutes and send the message to all users. The third command will shut the system
down and do a reboot at 1:00 in the afternoon.</p></body></html>
Although this document is about paragraphs and headers, there are a few
things worth noting here.
1 In the last paragraph, there is a <blockquote>...</blockquote> element
embedded. Although this works, the use of BLOCKQUOTE in this instance is
improper. Not only should it be done using style sheets, as follows, the use of
BLOCKQUOTE inside the paragraph element, P, is also not proper. The text where
the blockquote is should be changed to: <p class="indent">shutdown -h
now<br>shutdown -r +10 "Rebooting in 10 minutes"<br>shutdown -r
13:00<br></p> Of course the previous paragraph would need to be terminated with
the </p> tag and the following paragraph started with the <p> tag. The style sheet
should contain:
<ol type="I" start="5"><li>This is the Roman number for 5.<li>This is the Roman
number for 6.<li>This is the Roman number for 7.<li tyle="A" value="10">This is
the letter J, the tenth letter in the alphabet.<li type="1">This is the number
11.<li>This is the Roman number for 12.</ol>
This is the HTML Code using style attributes (CSS has no substitute for the START or
VALUE attributes):
<ol style="list-style-type='upper-roman'" start="5"><li>This is the Roman number
for 5.<li>This is the Roman number for 6.<li>This is the Roman number for 7.<li
style="list-style-type='upper-alpha'" value="10">This is the letter J, the tenth letter
in the alphabet.<li style="list-style-type='decimal'">This is the number 11.<li>This
is the Roman number for 12.</ol>
And this is how it looks:
1 This is the Roman number for 5.
2 This is the Roman number for 6.
3 This is the Roman number for 7.
4 This is the letter J, the tenth letter in the alphabet.
5 This is the number 11.
6 This is the Roman number for 12.
Unordered Lists
Tags and Attributes
<UL> - Designates the start of an unordered list TYPE=DISC - Designates the
shape used for the bullet. Values are CIRCLE, DISC, and SQUARE. The default of the
first embedded list is CIRCLE.
If these items show up as the same on your browser, it is probably because your
browser is too old to support these type shapes which were added with HTML 3.2.
Definition Lists
Tags and Attributes
<DL> - Designates the start of a definition list. COMPACT - (Depreciated)
The list is displayed with less room between elements.
<CAPTION> - Must be first in the table before other elements. Must have the
</CAPTION> closing tag.
<COLGROUP> - Sets the table up in column groups essentially dividing one or
more columns into several groups. Use after CAPTION and before THEAD. Does not
have a closing tag. Attributes: ALIGN - Possible values are center, left, right, char
(Aligns the cell contents on the character specified by the CHAR attribute), and
justify.
CHAR - Alignment character for cells. The character the cell is to be aligned
to.
CHAROFF - Offset alignment character. Default is a period.
SPAN - Defines how many columns are in the group.
VALIGN - Values are baseline, bottom, middle, and top.
WIDTH - The column width in pixels or a percent of the table width.
<THEAD> ALIGN - Possible values are center, left, right, char (Aligns the cell
contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned
to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.
<TBODY> ALIGN - Possible values are center, left, right, char (Aligns the cell
contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned
to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.
<TFOOT> ALIGN - Possible values are center, left, right, char (Aligns the cell
contents on the character specified by the CHAR attribute), and justify.
CHAR - Alignment character for cells. The character the cell is to be aligned
to.
CHAROFF - Offset alignment character. Default is a period.
VALIGN - Values are baseline, bottom, middle, and top.
<TH> - Designates the start of a table header. Table headers use the same
attributes as data cells. ABBR="SHORT" - Text is entered for this attribute that
contains a short version of the cell content for when space is limited.
AXIS - A categorization of a table cell. This is a list of categories separated by
commas.
ALIGN="RIGHT" - Sets horizontal alignment of the contents of the cell as
LEFT, RIGHT, or CENTER. The default is LEFT.
VALIGN="TOP" - Sets the vertical alignment of the contents of the cells in the
row as TOP, MIDDLE, or BOTTOM. The default is MIDDLE.
CHAR - Alignment character for cells. The character the cell is to be aligned
to.
CHAROFF - Offset alignment character. Default is a period.
ROWSPAN="3" - Sets the number of rows this cell will occupy.
COLSPAN="2" - Sets the number of columns this cell will occupy.
HEADERS - A list of header cells separated by spaces that define the headers
that apply to the TH element.
SCOPE - Values are column, row, colgroup, and rowgroup.
NOWRAP="NOWRAP" - Depreciated Sets the data cell so the contents will
not wrap to another line.
HEIGHT Depreciated - Cell height in pixels.
WIDTH="10%" - Depreciated Sets the width of this column of cells
expressed as a percentage of the table width or as a number of pixels.
BGCOLOR="white" - Depreciated Sets the background color of this cell.
An example table
This is the HTML code using depreciated attributes:
<table cellspacing="5"><tr align="center" bgcolor="#B0B0FF"><td>ROW 1, COL
1</td><td>ROW 1, COL 2</td><td>ROW 1, COL 3</td></tr><tr align="center"
bgcolor="#B0B0FF"><td colspan="3">ROW 2, COL 1-3</td></tr><tr
align="center" bgcolor="#B0B0FF"><td colspan="2">ROW 3, COL 1-
2</td><td>ROW 3, COL 3</td></tr><tr align="center" bgcolor="#B0B0FF"><td
rowspan="3">ROW 4-6, COL 1</tdD><td>ROW 4, COL 2</td><td>ROW 4, COL
3</td></tr><tr align="center" bgcolor="#B0B0FF"><td>ROW 5, COL
2</td><td>ROW 5, COL 3</td></tr><tr align="center"
bgcolor="#B0B0FF"><td>ROW 6, COL 2</td><td>ROW 6, COL
3</td></tr></table>
This is the HTML code using style attributes:
<table cellspacing="5"><tr style="text-align='center'; background-
color='#B0B0FF'"><td>ROW 1, COL 1</td><td>ROW 1, COL 2</td><td>ROW 1,
COL 3</td></tr><tr style="text-align='center'; background-color='#B0B0FF'"><td
colspan="3">ROW 2, COL 1-3</td></tr><tr style="text-align='center';
background-color='#B0B0FF'"><td colspan="2">ROW 3, COL 1-2</td><td>ROW 3,
COL 3</td></tr><tr style="text-align='center'; background-color='#B0B0FF'"><td
rowspan="3">ROW 4-6, COL 1</tdD><td>ROW 4, COL 2</td><td>ROW 4, COL
3</td></tr><tr style="text-align='center'; background-
color='#B0B0FF'"><td>ROW 5, COL 2</td><td>ROW 5, COL 3</td></tr><tr
style="text-align='center'; background-color='#B0B0FF'"><td>ROW 6, COL
2</td><td>ROW 6, COL 3</td></tr></table>
This is how it looks:
ROW 1, COL 1 ROW 1, COL 2 ROW 1, COL 3
ROW 2, COL 1-3
ROW 3, COL 1-2 ROW 3, COL 3
ROW 4-6, COL 1 ROW 4, COL 2 ROW 4, COL 3
This table uses the nowrap="nowrap" attribute to keep the first cell in each row from
wrapping. It also used a width attribute with value of 20 and no text in the cell to allocate
some blank space between column 1 and column 3.
TBODY Tag
Technically the TBODY tag is to be used one or more times inside each occurance of
the TABLE element. However, in many cases it may not be used. The THEAD and
TFOOT tags may be optionally used one time inside a TABLE element.
HTML Attributes
Common attributes are applicable to many or most HTML elements. These attributes
allow additional setting of style or other characteristics to the element. The attributes
outlined on this page are common in many HTML elements.
ID attribute
Used as a unique identifier for elements for style sheets. In HTML page:
<hr id="firsthr">
In style sheet:
hr#firsthr { color: #80b0ff; height: 15; width: 100% }
CLASS attribute
Used to specify similar attributes for dissimilar elements by putting them in the same
class. In HTML page:
<p class="indent">
In style sheet:
.indent { margin-right: 5%; margin-left: 5%; color: #0000ff }
STYLE attribute
Used to set various element attributes to specific values. Example:
<h1 style="text-align: center">Common Attributes</h1>
TITLE attribute
A tool tip on visual browsers.
LANG attribute
An international attribute which is used to set the international language type.
lang="en"
DIR attribute
An international attribute which is used to set whether text is read left to right or
right to left.
dir="ltr"
Reserved Attributes
There are also reserved attributes used with the following elements. Reserved
attributes may be used to bind HTML documents to XML documents. Elements that
use reserved attributes:
BUTTON
DIV
INPUT
OBJECT
SELECT
SPAN
TABLE
TEXTAREA
The BR element
An example of use of the BR element
The BR element has no ending tag. Here are two lines as they may be written
without using a <br> tag.
This is line 1.This is line 2.
This is what you would see:
This is line 1. This is line 2.
Here are the same two lines as they are written with a <br> tag.
This is line 1.<br>This is line 2.
This is what you would see:
This is line 1.This is line 2.
The HR element
HR Element Attributes
Examples
Here's the HTML code:
This is an example of the <b><b> tag </b>.<br>This is an example of the
<big><big> tag</big>.<br>This is an example of the
<em><em> tag</em><br>This is an example of the <i><i>
tag</i>.<br>This is an example of the <small><small>
tag</small>.<br>This is an example of the <strike><strike>
tag</strike>.<br>This is an example of the <strong><strong>
tag<strong>.<br>This is an example of the <sup><sup>
tag<sup>.<br>This is an example of the <sub><sub>
tag<sub>.<br>This is an example of the <tt><tt> tag<tt>.<br>This is an
example of the <u><u> tag</u><br>This is an example of the
<var><var> tag</var><br>
Here's how it looks:
This is an example of the <b> tag.This is an example of the <big> tag.This is an
example of the <em> tag.
This is the HTML code for a paragraph demonstrating use of the STYLE attribute
along with the SPAN element.
<p style="text-align: 'center'; font: '16pt courier'; color: 'blue'">The color of the sky
is blue, but if you look at the <span style="color: 'green'">trees, they are
green</span>. This effect is produced using the <span> element with the
style ="color: 'green'" attribute set.</p>
Here is how it looks:
The color of the sky is blue, but if you look at the trees, they are green. This effect is
produced using the <span> element with the style ="color: 'green'" attribute set.
HTML Characters
There are some characters in HTML that must be displayed using a string of
characters. The string may be a name string or numeric string as in the table below.
Although these special characters may displayed without the semicolon at the end, it is the
proper standard to use the semicolon.
Style Sheets
Purpose of Style Sheets
The purpose of style sheets is to separate the content of the HTML documents from
their style. This makes control over the style much easier and group efforts easier
since content of an entire set of HTML pages can be easily controlled using one or
more style sheets.
STYLE sheets or the inline STYLE element will allow you to set custom margin sizes,
and the text font, color and sizes of various elements that are used on your web
page. Size of margins can be set in inches (in), pixels(px), percentages (%),
centimeters (cm) or the (em). The unit of em is the em is the height of the font. Two
em units is twice the height of the font. When the em units are used, everything is
scaled relative to the font so the scaling will remain the same regardless of the font
used.
Methods of Including Style
Methods of including style content in an HTML document:
Embedding - Use the STYLE element in the HEAD element to create a style
sheet that is embedded in the header. Example: <style type="text/css"
MEDIA=screen><!-- body {background-color: "#ffffff"; color: "#000000";
background: url('../../../../gifs/flowers.gif') } a:link { color: "#0000ff" } a:visited {
color: "#7f007f" } a:active { color: "#ff0000" } h3 { color: "#600060" }--></style>
Linking - Use the link element in the HTML header to link an external text file
style sheet to the HTML document. Example: <link href="style.css" rel="stylesheet"
type="text/css">
Importing - One style sheet may be imported from another by using the
"@import" command in
The section "CSS Properties" contains a more complete list of parameters and the
elements they work with.
Setting an HTML Page with a Style Sheet
To set an HTML page up to use a style sheet, a link must be provided in the header
section as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"><html><head><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"><meta name="GENERATOR"
content="Arachnophilia 3.9"><meta name="description" content="The Computer
Technology Documentation HTML Guide - Setting Document Style"><meta
name="keywords" content="Documentation, HTML, html document style, style,
setting document style, setting html document style"><title>The CTDP HTML Guide
- Setting Document Style</title><link href="style.css" rel="stylesheet"
type="text/css"></head><body>...</body>
The Style Sheet File (style.css)
body {background-color: #ffffff; color: #000000; background:
url('../../../../gifs/flowers.gif') }a:link { color: #0000ff }a:visited { color: #7f007f }
a:active { color: #ff0000 }h1, H2 { text-align: center }h3 { color: #600060
}blockquote { color: #0000ff }pre { color: #0000ff }.indent { margin-right: 5%;
margin-left: 5%; color: #0000ff }.center { text-align: center }.firstindent { text-
indent: 2em}div.outline { border-top: solid medium navy }hr { color: #80b0ff;
height: 5; width: 50%; text-align: center }hr#firsthr { color: #80b0ff; height: 15;
width: 100% }
This style sheet is used to set the style for various HTML elements on every page of
this document. To change the style, only the style sheet needs to be changed. Note
that the style sheet sets the wallpaper for the HTML page along with the background
color, foreground color, active link color, visited link color, and unvisited link
color(A:link). It also sets colors for the BLOCKQUOTE and PRE elements along with
defining some CLASS characteristics and one ID characteristic.
Using the CLASS Attribute
The CLASS and ID attributes allow very convenient and precise control of the style of
specific elements in HTML documents. The CLASS attribute allows attributes to be
assigned to almost any element based on a class name. Class style information is
specified in the style sheet with the period, ".", followed by the class name as in the
following example:
.indent { margin-right: 5%; margin-left: 5%; color: #0000ff }
Note that this same line is used in the example style sheet above. To use this in the
HTML file, when the beginning tag of the element is declared, the class is specified as
in the following statement:
<p class="indent">
This causes the paragraph element to have the style characteristics assigned to the
class "indent" so long as those style characteristics are appropriate to the element
they are being applied to. In this case the paragraph element is indented much like
the blockquote element and its color is also set to blue. Classes may also be
assigned to specific elements so they can only be used with that elements.
Assingments in the style sheet to specific elements similar to "PRE.center { text-
align: center }".
Pseudo Classes
Some elements have specific automatially assigned classes. For example the anchor
(A) element has the classes link, visited, and active. The following lines in the style
sheet assign color style characteristics to these classes.
a:link { color: #0000ff }a:visited { color: #7f007f }a:active { color: #ff0000 }
Note that the element is separated from the pseudo name using a colon. Also a
"first-line" and a "first-letter" pseudo class exists for each block element.
CSS Properties
This section only provides a quick reference for the CSS properties, for complete
details refer to the Web Design Group's web page CSS section.
Application of these properties are based on the element type as described earlier in
the "Element Categories" section.
Box Properties
Name Description Possible Element Example inherited
Values Types
border Sets border See border All {border: No
width, style and width, style, medium solid
color. and color green}
list-style Sets list style type See list-style-type List- {list-style: Yes
and/or position. and list-style- item circle}
position
Font Properties
Name Description Possible Values Element Example inherited
Types
font Used to define See font-family, All {font: Yes
font properties font-size, font-style, 20pt}
font-variant, and
font-weight.
font- Used to define font normal, italic, oblique All {font-style: Yes
style style to use italic}
font- Sets font weight. normal, bold, bolder, All {font- Yes
weight lighter, 100, 200, 300, weight:
400, 500, 600, 700, 800, 600}
900
Text Properties
Name Description Possible Element Example inherited
Values Types
letter- Sets the space normal or All {letter- Yes
spacing between length value spacing:
characters. 0.2em}
line-height Sets the height normal, a All {line- Yes
of lines. number, a height: 2}
percent of the
element font
size,
text-align Sets the left, right, Block {text-align: Yes
alignment of center, justify center}
text.
text- Sets the none, overline, All {text- No
decoration special underline, line- decoration:
decoration through, blink blink}
attributes of
text.
text- Sets the length or Block {text- Yes
indent element's first percentage indent: 5%}
line amount of value
indentation.
text- Transforms none, All {text- Yes
transform text to one of capitalize, transform:
the set values. uppercase, uppercase}
lowercase
vertical- Sets vertical baseline, sub. Inline {vertical- No
align position. super, top, align: sub}
middle, bottom,
text-top, text-
bottom, or
percent value
The line break element, <BR> and the horizontal rule element <HR> may be placed
inside the <IMG> element.
Example 1
The following code will display a gif file:
<img src="MyPicture.gif" alt="Outdoor Scene">
This code sets an alternate text of "Outdoor Sceen" in the event the "MyPicture.gif"
file is not
displayable. This usually occur if it cannot be found or if the user has their browser
controls set not to display pictures.
Example 2
In this example the additional feature is added that sets the size of the picture
relative to the size of the browser window. The size of the picture is set to 20% of
the height of the browser window and 40% of the width.
<img src="MyPicture.gif" alt="Outdoor Scene" height="20%" width="40%">
Example 3
If you are interested in displaying pictures that are of significant size which may be
accessed for possible download for sharing with friends or family, this example gives
some valuable advice. If you are interested in making several graphic files
accessable from one page such as files scanned from pictures, it would be worthwhile
to make a file of about one fifth the height and width of the original file, then make it
a link to the original file for viewing or download. This is because the download time
of your web page with many large graphic files may be excessive. In this example
two smaller files are placed on a page next to each other. These files are links to the
larger files to be viewed or downloaded.
<div style="text-align: center"<a href="Picture1.gif"><img src="SmallPicture.gif"
ALT="Picture1" height="20%" width="40%"></a><a href="Picture2.gif"><img
srcC="SmallPicture2l.gif" ALT="Picture2" height="20%" width="40%"></a></div>
In this example the style attribute "text-align: center" is set. See the section on style
and style sheet attributes for more information about this attribute.
Example 4
In this example some JavaScript code is added so the name or description of the
picture is displayed when the viewer places their mouse cursor on the link.
<div style="text-align: center"><a href="Picture1.gif"
onMouseOver="window.status='Picture1' ;return true"
onMouseOut="window.status='';return true"><img src="SmallPicture.gif"
alt="Picture1" height="20%" width="40%"></a><a href="Picture2.gif"
onMouseOver="window.status='Picture2' ;return true"
HTML Sound
The BGSOUND element is used to play sounds on a web page. There is no end tag
for the <bgsound> element. To play sounds all that is required is to put a line like
the following on your web page:
<bgsound src="1234usmc.wav" loop="-1">
This line is used on this page to play sound.
BGSOUND element attributes
SRC="1234usmc.wav" - The location or the URL of the WAV, MIDI, or AU file
to play.
LOOP="-1" - The number of times the file will will loop. A value of INFINATE
or -1 will loop indefinitely.
HTML Links
HTML Anchors and Links
Anchors are used to specify link locations or to set anchors for locations to link to.
This enables the person using the browser to click on a link (anchor) and their
browser will go to the location pointed to by the anchor. Anchors begin with the <A>
tag and end with the </A> tag.
Anchor Attributes
NAME - Sets an anchor at a named location in the document for later use by
an anchor tag.
HREF="hw.html" - A hypertext reference which defines the name of the
document or the named location in the document for the anchor link to send the web
browser to.
TARGET - Specifies the frame target the referenced page will be put into. The
target may me a named window or one of the special reserved names below. If the
target is a named window that exists the web page the link points to will be loaded
into that window. If a window by that name does not exist, a new window with that
name will be created. _blank - The web linked page loads in a new window and does
not name the window.
_parent - The new page will load in the parent frame or window.
_self - The new page will load in the same window that the link is in. If the
link is in a frame, it will load inside the frame. This is the default target.
_top - The new page will load into the top window reguardless of how many
framesets deep the link is embedded.
Examples
Example 1 - Named Anchor
At the top of this page is a named anchor which is used for other examples on this
page. Its text is:
<a name="top"></a>
Example 2 - Link to another page
It will take you to the graphics page of this document. The JavaScript part includes
the "onMouseOver" and onMouseOut" definitions. They are event handlers for the
MouseOver and MouseOut events. The "window.status" definition is an attribute of
the window object. You can read about JavaScript in the JavaScript Manual.
Example 5 - Local Page Link
Here's an example of HTML source code that will take you to the top of the page:
<a href="#top">Take me to the top of this page.</a>
Here's how it looks and works:
Take me to the top of this page.
Example 6 - Non-Underlined Link
Here's an example of HTML source code that will take you to the top of the page, but
it is not underlined:
<a href="#top" style="text-decoration: none" >Take me to the top of this
page.</a>
Here's how it looks and works:
Take me to the top of this page.
Example 7 - Hidden Link
Here's an example of HTML source code that will take you to the top of the page, but
it is not underlined, nor is the color changed for a normal link color. It is also
embedded with other text to make it harder to find. This link is essentially hidden
and can only be found by placing the mouse directly over
the link.
Take me to the <a href="#top" style="text-decoration: none" style="color='black'"
>top</a> of this page.
Here's how it looks and works:
Take me to the top of this page.
Example 8 - Target set to top
Take me to the <a href="index.html" target = "_top">main HTML</a> page.
Here's how it looks and works:
Take me to the main HTML page.
Example 9 - Target set to self
Take me to the <a href="index.html" target = "_self">main HTML</a> page.
Here's how it looks and works (Use the BACK button on your browser to return):
Take me to the main HTMLpage.
Example 10 - Target set to blank
Take me to the <a href="index.html" target = "_blank">main HTML</a> page.
Here's how it looks and works:
Take me to the main HTML page.
If you continue clicking on this link, it will continue making new pages.
HTML Forms
Forms allow those who come to your website to provide input to your webserver.
Some reasons to use forms are to allow visitors to partake in polls or sign up as a
member. Also orders for merchandise may be placed using forms. Usually the forms
are supported by a client side script program which will be sure the form is properly
filled out before it is sent to the server. Also the form will invoke a script program
which runs on the server. This script program will receive the data and store it on
the server, then respond with a message to the user telling them that the form was
submitted.
This document is not intended to teach script writing, so it will concentrate on the
HTML side of form writing.
Form tags and attributes
<FORM> - Starts an input form. </FORM> - Ends an input form.
ACTION="..." - The address of the script to process this form input.
METHOD="POST" - The method used to send the data from the form to the
server. The options are POST and GET. Normally POST is used.
<SELECT> - Creates a list of items that can be selected. </SELECT> ends the
select area. Attributes: DISABLED - A boolean value that makes the select object
unavailable for use.
MULTIPLE - Allows more than one selection from the scrolling list.
NAME="state" - The name of the selection item that is passed to the script
running on the server.
ONBLUR - Sets a script program to run when the element loses focus.
ONCHANGE - Script to run when the element is changed.
ONFOCUS - Sets a script program to run when the element gets focus.
ONSELECT - Script to run when the element text is selected.
SIZE="1" - The number of selections that will be displayed. If a value of SIZE
is set, the selection will be a scrolling list. If no SIZE value is set the selection will be
a pop-up menu.
http://www.comptechdoc.org/guides/htmlguide/htmlforms.html (2 of 6)7/21/2003 7:45:08 AM HTML Forms
TABINDEX - Sets the tabbing order of the element.
An example Form
<h2 style="text-align: center">Computer Technology Documentation
Project</h2><h2 style="text-align: center">Member Registration</h2><hr
style="height: 5" WIDTH=90%> <div style="text-align:
center"><table><td><pre><form name="RegistrationForm" method="post"
action="/cgi-bin/response.pl"><b>First Name: </b><input type="text"
name="firstname"><b>Last Name: </b><input type="text"
name="lastname"><b>Address1: </b><input type="text"
name="addr1"><b>Address2: </b><input type="text" name="addr2"><b>City:
</b><input type="text" name="city"><b>State: </b><select name="state"
size="1"> <option value="1">AL <option value="2">AK <option value="3">AR
<option value="4">AS <option value="5">AZ <option value="6">CA <option
value="7">CO <option value="8">CT
<option value="9">DC <option value="10">DE <option value="11">FL <option
value="12">FM <option value="13">GA <option value="14">GU <option
value="15">HI <option value="16">ID <option value="17">IA <option
value="18">IL <option value="19">IN <option value="20">KS <option
value="21">KY <option value="22">LA <option value="23">MA <option
value="24">MD <option value="25">ME <option value="26">MH <option
value="26">MI <option value="28">MN <option value="29">MO <option
value="30">MP <option value="31">MS <option value="32">MT <option
value="33">NC <option value="34">ND <option value="35">NE <option
value="36">NH <option value="37">NJ <option value="38">NM <option
value="39">NV <option value="40">NY <option value="41">OH <option
value="42">OK <option value="43">OR <option value="44">PA <option
value="45">PR <option value="46">PW <option value="47">RI <option
value="48">SC <option value="49">SD <option value="50">TN <option
value="51">TX
The NOSCRIPT element is used to provide alternate content when a browser does
not support script.
Scripting Events
ondblclick
onclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
An example Script
How the script looks:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><head><title>New
CTDP Member Registration</title><scrypt type="text/javascript" for="cmdSubmit"
event="onclick" language=JavaScript><!--var MemSubForm;MemSubForm =
document.RegistrationForm;if (MemSubForm.firstname.value.length == 0) {
MemSubForm.firstname.value = prompt("Please enter your first name."); if
(MemSubForm.firstname.value.length != 0) MemSubForm.lastname.focus();}if
(MemSubForm.lastname.value.length == 0) { MemSubForm.lastname.value =
prompt("Please enter your last name."); if (MemSubForm.lastname.value.length !=
0) MemSubForm.addr1.focus();}if (MemSubForm.addr1.value.length == 0) {
MemSubForm.addr1.value = prompt("Please enter your address."); if
(MemSubForm.addr1.value.length != 0) MemSubForm.addr1.focus();}if
(MemSubForm.city.value.length == 0) { MemSubForm.city.value = prompt("Please
enter your city of residence.");
if (MemSubForm.city.value.length != 0) MemSubForm.city.focus();}if
(MemSubForm.state.value == 0) { alert("Please select a 2-letter state
abbreviation."); MemSubForm.state.focus();}else if (MemSubForm.code.value.length
!= 3 || isNaN(MemSubForm.code.value)) { alert("Please enter a valid telephone area
code."); MemSubForm.code.focus(); MemSubForm.code.select( );}else if
(MemSubForm.phone.value.length != 7 || isNaN(MemSubForm.phone.value)) {
alert("Please enter a valid phone number."); MemSubForm.phone.focus();
MemSubForm.phone.select();}else if (MemSubForm.zip.value.length < 5) {
MemSubForm.zip.value = prompt("Please enter a valid zip code."); if
(MemSubForm.zip.value.length != 0) MemSubForm.zip.focus();}// --
></script></head><body>
The Form HTML Code
<h2 style="text-align: center">Computer Technology Documentation
Project</h2><h2 style="text-align: center">Member Registration</h2><hr
size="5" width="90%"> <div style="text-align: center"><table><td><pre>
First Name: Last Name: Address1: Address2: City: State: Zip: Area
Code/Phone:
Using Applets
Putting an Applet on a Web Page
<html><head><title>An Applet Example</title></head><body><p>The Applet
example is: <br><applet code="MyApplet.class" width="200" height="50"><param
name="font" value="TimesRoman"><param name="size" value="16">You see this
if your browser does not include Java support.</applet></p></body></html>
If the OBJECT tag is used rather than the APPLET tag, use CLASSID in place of CODE
to specify the file name. A JAR (JAVA Archive) file is a package of the applet (or
application) along with all required supporting class files. The "jar" command is used
to create these JAR files from class and gif files.
Applet Attributes
The APPLET element is depreciated in favor of the OBJECT element for those
browsers that support it. The OBJECT element is described below.
ALT - Alternate text if the applet is not loadable.
CLASS="..." - The name of the applet.
CODE - The name of the applet main class file.
CODEBASE - Specifies a different folder for the browser to look for the applet
file.
WIDTH - The width of the applet output area in pixels.
HEIGHT - The height of the applet output area in pixels.
ALIGN - ALIGN="TOP "- Indicates how the applet should be aligned with any
text that follows it. Values: LEFT
RIGHT
PARAM - Used to pass parameters to applets. Parameters expected but not passed
are passed as a NULL. Your program needs to test for NULL parameters and set a
default for any expected parameters. The "getParameter" function is used to get the
passed parameters in the applet.
SRC="..." - The URL of the directory where the compiled applet can be found (should
end in a slash / as in "http://mysite/myapplets/"). Do not include the actual applet
name, which is specified with the CLASS attribute.
HSPACE - Space in pixels between the applet and the text around it.
VSPACE - Vertical space between the applet and other text.
The Object Element
Example
<html><head><title>An Applet Example</title></head><body><p>The Applet
example is: <br><object classid="java:MyApplet.class" codetype="application/java"
width="200" height="50"><param name="font" value="TimesRoman"><param
name="size" value="16">You see this if your browser does not include Java
support.</applet></p></body></html>
Object Attributes
ALIGN - (Depreciated) - Sets alignment to middle, top, bottom, left, or right.
ARCHIVE - Lets the browser download several archive files at once.
BORDER - (Depreciated) - The width of the border.
CLASSID - Determines how the object is implemented.
CODEBASE - Sets relative URI locations.
CODETYPE - Specifies whether it is an application and program language.
DATA - The embedded object Universal Resource Indicator (URI).
DECLARE - The object is not instantiated until a link is later clicked on or an
object uses it.
HEIGHT
NAME
STANDBY - Text to be displayed while the object is loading.
TABINDEX - A numerical value that sets the tabbing order of the object.
TYPE - Sets the media type such as screen, printer, TV.
USEMAP
See the "Recommended Reading" section for sources of a more complete list.
The PARAM Element
Used to set up parameters for the OBJECT and APPLET elements. (Occurs inside
<applet> or <object> tags.) There is no ending tag for this element. Attributes
include:
NAME="..." - The type of information being given to the applet or ActiveX
control.
TYPE - The MIME content type of the resource.
VALUE="..." - The actual information to be given to the applet or ActiveX
control.
VALUETYPE - Sets the type for the VALUE attribute. Possible values include
data, ref, and object.
XHTML
XHTML is the latest World Wide Web Consortium standard as of this writing. It stands
for XML Hypertext Markup Language (XHTML). It replaces HTML but is much like
HTML with some additional rules to add better structure to the language. It, like
HTML, has a strict, transitional, and frameset DTD.
XHTML Rules
The XHTML document must be well formed. This means: There must be one
and only one top level element.
All elements must have a starting and an ending tag with matching starting
and ending names. For instance documents that normally have no closing tag are
normally written: <br><hr><li> Now must be written: <br /><hr /><li />
Element names are case sensitive.
Elements must be nested properly.
This module explains how to use JavaScript to work with XML data. It starts by demonstrating
techniques for obtaining XML data: loading it from the network, parsing it from a string, and
obtaining it from XML data islands within an HTML document. After this discussion of obtaining
XML data, the chapter explains basic techniques for working with this data.
This coverage of basic XML techniques is followed by two sections that demonstrate applications of
those techniques. First, you’ll see how it is possible to define HTML templates and automatically
expand them, using the DOM and XPath, with data from an XML document. Second, you’ll see how
to write a web services client in JavaScript using the XML techniques from this module.
Chapter 2
XML
2.1 Introduction
XML stands for Extensible Markup Language. XML is a public standard developed and
maintained by the World Wide Web Consortium (W3C). The W3C develops inter operable
technologies (specifications, guidelines, software and tools) to increase the potential of
the Web as a forum for information, commerce, communication and collective
understanding. XML is a text-based markup language that is fast becoming
the standard for data interchange on the Web. It was designed to describe data.
XML is a markup language much like HTML. As with HTML, we identify data using tags
(identifiers enclosed in angle brackets). XML tags are not predefined in XML. We must
define our own tags. XML is self describing. XML uses a DTD (Document Type Definition)
to formally describe the data. XML was designed to describe data and to focus on what
data is. HTML was designed to display data and to focus how data looks. HTML is about
displaying information, XML is about describing information.
The tags used to markup HTML documents and the structure of HTML documents are
predefined. For example the HTML tag <B> ... </B> renders the text in bold font style.
The author of HTML documents can only use tags that are defined in the HTML standard.
XML allows the author to define his own tags and his own document structure.
XML can keep data separated from our HTML. XML can be used to store data inside
HTML documents. XML can be used as a format to exchange information.
XML can be used to store date in files or in databases. Thus we can use XML to create an
unlimited number of our own custom tags and attributes, assign a data type to each tag
and attribute, access values associated with the tags, and accomplish all of this in a
custom structured format that we have also created.
As described above, HTML pages are used to display data. Data are often stored inside
HTML pages. With XML this data can now be stored in a separate XML file.
This way we can concentrate on using HTML for formatting and display, and be sure that
changes in the underlying data will not force changes to any of our HTML code.
However, XML can store data inside HTML documents as so-called data islands.
Computer systems and databases contain data in incompatible formats. One of the
big problems is to exchange data between such systems over the Internet. Converting
data to XML can greatly reduce this complexity and create data that can be read by
different types of applications.
XML can also be used to store data in files or in databases. Applications can be written
to store and retrieve information from the store, and generic applications can be used to
display the data.
An XML document is an ordered, labeled tree: character data leaf nodes contain the
actual data (text strings) where usually, character data nodes must be non-empty and
non-adjacent to other character data nodes elements nodes, are each labeled with a
name (often called the element type), and a set of attributes, each consisting of a name
and a value. These nodes can have child nodes.
In addition, XML trees may contain other kinds of leaf nodes: processing instructions
- annotations for various processors
comments - as in programming languages
document type declaration.
There are three commonly used end-of-line delimiters, namely carriage-return (CR),
line-feed (LF) or carriage-return + line-feed (CR+LF). To simplify processing, XML
parsers were required to replace all end-of-line delimiters with a single line feed.
The following conditions for an XML document must be satisfied.
1) All XML elements must have a closing tag.
2) XML tags are case sensitive. Opening and closing tags must therefore be written
with the same case. For example, an XML parser interprets <BOOK> and <book> as
two different tags. Recall that HTML tags are not case sensitive.
3) All XML elements must be properly nested.
4) All XML documents must have a root tag. Recall that an XML document is an
ordered, labeled tree.
5) Attributes must always be quoted. XML elements can have attributes in name/value
pair just like in HTML. In XML the attribute value must always be quoted. XML attributes
are normally used to describe XML elememts, or to provide additional information about
elements.
XML names may only start with a letter, an underscore character or a colon. The
subsequent characters may include the latter plus numerals, dashes and full-stops.
Colons should, however, be used for namespace delimiters. Furthermore, XML
names should not start with the three letters XML in any case (xml, Xml, xmL, ...).
Names starting with these characters are reserved for W3C use only. Note that
XML names are case-sensitive.
Since spaces are not allowed in elements names, the underscore (_) is a common
symbol used to add space between words. Capitalizing the first letter of each word in
the element is another way to delineate separate words. Our tags can be composed
of almost any string of characters, with certain limitations: The first character of
an XML tag must be an upper or lower case letter, the underscore, or a colon. The
remaining characters can be composed of any combination of upper or lower case
letters, colons, hyphens, numbers, periods, or underscores.
The very first line of every XML document must be the XML declaration. For
example
<?xml version="1.0" standalone="yes" encoding="ISO-8859-1"?>
where <? begins a processing instruction. xml declares this to be an XML instruction.
version identifies the version of XML specification in use. Version 1.0 is the
only current version so the value must be 1.0. The markup standalone states if
this file is completely by itself. A no value signals the parser that it should import
other mark-up files, such as an external DTD (Document Type Definition).
Since well-formed XML docs are complete by itself, this attribute value would be
yes. The command encoding indicates which international character set is used.
ISO-8859-1 is the default and is essentially the English character set. The markup
?> terminates the processing instruction.
A comment is given by
<!-- This is a comment -->
XML documents require a root element. The root element appears only once and
encapsulates the entire XML elements and data in the document, in the same way
<HTML> ... </HTML> contains the contents of an HTML document.
Since XML uses certain characters for its own syntax, these characters must be supplied
in another way. For this reason XML introduces five standard entity references
< >
These entity references must be used for literal left and right angle brackets which
are used in XML as element tag delimiters.
' "
These entity references must be used for single and double quotes which are used in
XML as element tag delimiters.
&
& must be used for literal ampersands. Ampersands are used in XML for entity
references.
In the following we give an example. The first line is the XML declaration. It
defines the XML version of the document. Furthermore library is the root element
appearing only once and containing all the other elements. We save the XML with
any filename and an .xml extension. Then we load the file onto an XML-parser
such as IE 6, NetScape 6, Opera 4+, Ice Browser, or Mozilla.
<?xml version="1.0" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="library.xsl"?>
<!-- File name: library.xml -->
<!-- address: file://c:\books\java\library.xml -->
<library>
<book>
<title> SymbolicC++ </title>
<subtitle> An Introduction to Computer Algebra </subtitle>
<author> Tan Kiat Shi, Willi Hans Steeb, Yorick Hardy </author>
<ISBN> 1852332603 </ISBN>
<publisher> Springer </publisher>
<city> London </city>
<year> 2000 </year>
</book>
<book>
<title> Classical and Quantum Computing </title>
<subtitle> with C++ and Java Simulations </subtitle>
<author> Yorick Hardy and Willi Hans Steeb </author>
<ISBN> 3764366109 </ISBN>
<publisher> Birkhauser Publishing </publisher>
<city> Basel </city>
<year> 20001 </year>
</book>
</library>
If we consider the XML file from an SQL table point of view then each
<book> ... </book>
block would be one row in the table library.
The following example shows how to use an attribute. The attribute is sex.
<?xml version="1.0" standalone="yes"?>
<people>
<person sex="male">
<lastname> Steeb </lastname>
<firstname> Willi Hans </firstname>
<profession> Professor </profession>
</person>
<person sex="female">
<lastname> de Sousa </lastname>
<firstname> Nela </firstname>
<profession> Lecturer </profession>
</person>
</people>
We can rewrite it without using an attribute.
<?xml version="1.0" standalone="yes"?>
<people>
<person>
<sex> male </sex>
<lastname> Steeb </lastname>
<firstname> Willi Hans </firstname>
<profession> Professor </profession>
</person>
<person>
<sex> female </sex>
<lastname> de Sousa </lastname>
<firstname> Nela </firstname>
<profession> Lecturer </profession>
</person>
</people>
The polynomial
p(x; y) = 2x3y2 ¡ 4y5
could be encoded in XML as
<?xml version="1.0"?>
<polynomial>
<term>
<factor> 2 </factor>
<variable>
<name> x </name>
<exponent> 3 </exponent>
</variable>
<variable>
<name> y </name>
<exponent> 2 </exponent>
</variable>
</term>
<term>
<factor> -4 </factor>
<variable>
<name> x </name>
<exponent> 0 </exponent>
</variable>
<variable>
<name> y </name>
<exponent> 5 </exponent>
</variable>
</term>
</polynomial>
2.2 Schema
A schema is a formal way of defining and validating the content of an XML document.
A well-formed XML document that conforms to its schema is said to be valid.
The schema is how we assign the data types to each tag and any attributes that are
contained in the XML document. A schema is a structured document which must
obey XML syntax rules. It is composed of a series of predefined tags and attributes
that are part of the XML language and are used to set the data types for the values
associated with our custom tags. Not only do we get to create custom XML tags,
but we can also denote that an XML data value is, for example, an integer data
type. Thus we can assign specific data types to specific XML data values. A schema
can be part of the XML document or a separate file.
The XML tags and attributes to create a schema are:
The Schema tag serves as a container element that delimits the beginning and end
of the schema. This tag must be closed.
The xmlns attribute is used to declare the data types of the schema XML namespace.
The value is a URL or URN address that the browser will access to get information
on the data types to allow code validation.
The xmlns:dt attribute is used to declare the data types of the schema XML namespace.
The value is a URL (Uniform Resource Locator) or URN (Uniform Resource
Name) address that the browser will access to get information on the data types to
allow code validation. If we are using IE 5 to view our XML document, then we
must include the xmlns and the xmlns:dt attributes exactly as displayed below
<Schema xmlns="urn:schema-microsoft-com:xml-data"
xmlns:dt="urn:schemas-microsoft-com:datatypes">
...
</Schema>
The AttributeType tag is used to declare the data type for an attribute of an XML
tag. This tag must be closed.
The name attribute provides the name of the attribute.
The dt:type attribute dictates the data type of the attribute.
<HTML>
<TITLE> Data Binding </TITLE>
<BODY>
<xml id="xmlLibrary" src="file://c:\books\java\library.xml">
</xml>
<B> Use the buttons to scroll up and down the library </B>
<BR><BR>
TITLE: <span datasrc="#xmlLibrary" datafld="title"></span>
<BR>
SUBTITLE: <span datasrc="#xmlLibrary" datafld="subtitle"></span>
<BR>
AUTHOR: <span datasrc="#xmlLibrary" datafld="author"></span>
<BR>
ISBN: <span datasrc="#xmlLibrary" datafld="ISBN"></span>
<BR>
PUBLISHER: <span datasrc="#xmlLibrary" datafld="publisher"></span>
<BR>
CITY: <span datasrc="#xmlLibrary" datafld="city"></span>
<BR>
YEAR: <span datasrc="#xmlLibrary" datafld="year"></span>
<BR>
<input type="button" value="Previous" onclick="Previous()">
<input type="button" value="Next" onclick="Next()">
<SCRIPT LANGUAGE="JavaScript">
function Previous()
{
if(xmlLibrary.recordset.AbsolutePosition > 1)
xmlLibrary.recordset.movePrevious();
}
function Next()
{
if(xmlLibrary.recordset.AbsolutePosition <
xmlLibrary.recordset.RecordCount)
xmlLibrary.recordset.moveNext();
}
</SCRIPT>
</BODY>
</HTML>
XSL is not a large language. It is composed of twenty tag-like elements and associated
attribute-like methods. Like XML, all XSL elements must have an opening
and closing tag. All XSL tags have the same namespace prefix, xsl:, to denote
that this is an XSL element. Notice the use of the colon. After the prefix, the suffix
designates the tag’s purpose.
In order to display our XML document, we only need three of the XSL elements.
xsl:template
The xsl:template element is used to define a template. It can also be used as a
container element to declare the start and stop of an XSL coding sequence. We use
it in this manner in our example. In order for this to work in IE 6, we must use the
following code exactly
<xsl:template xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
The next element we use is
xsl:for-each
This element is used to create a for ... each loop which allows looping through
all the values for an XML data field. We use the select attribute to specify the
name of the XML data element.
xsl:value-of
The xsl:value-of element is used to insert the value of the XML data field into
the template. We use the select attribute to specify the name of the XML data
field. The xsl:value-of element allows us to display the data value for an XML
tag.
To put an conditional if test against the content of the file, we simply add an
xsl:if element to our document. In the example we consider the table for a sporting
competition
name points
======================
Snowbird John 6234
Adler Jack 3234
Eagle Carl 134
======================
Each row of the table is identified as a
<result> ... </result>
block for the xml-file. We only want the display the table for the participants who
have more than 200 points.
The file if.xml is given by
<?xml version="1.0"?>
<!-- File name: If.xml -->
<!-- address: file://c:\books\java\if.xml -->
<?xml-stylesheet type="text/xsl" href="if.xsl"?>
<ranking>
<result>
<name> Snowbird John </name>
<points> 6234 </points>
</result>
<result>
<name> Adler Jack </name>
<points> 3234 </points>
</result>
<result>
<name> Eagle Carl </name>
<points> 134 </points>
</result>
</ranking>
42 CHAPTER 2. XML
The if.xsl-file is given by
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!-- address: file://c:\books\java\if.xsl -->
<xsl:template match="/">
<HTML>
<BODY>
<TABLE border="2">
<TR>
<TH> Name </TH>
<TH> Points </TH>
</TR>
<xsl:for-each select="ranking/result">
<xsl:if test="points > 200">
<TR>
<TD><xsl:value-of select="name"/></TD>
<TD><xsl:value-of select="points"/></TD>
</TR>
</xsl:if>
</xsl:for-each>
</TABLE>
</BODY>
</HTML>
</xsl:template>
</xsl:stylesheet>
Chapter 3
JavaScript
3.1 Introduction
The HTML language used to create pages for the World Wide Web was originally
designed to produce plain and static documents, stuff like engineering notes and
long-winded arguments by scientist types. When the Web first started, the only
browsing software available for it was text-based.
JavaScript makes HTML come alive. JavaScript is a scripting language for HTML
and the Netscape Navigator browser, version 2.0 and later. JavaScript is a
crossplatform,
object-oriented language. Core JavaScript contains a core set of objects
as Array, Date, and Math, and a core set of language elements such as operators,
control structures, and statements. JavaScript “scripts” are small programs that interact
with Netscape and the HTML content of a page. We can create a JavaScript
program to add sound or simple animation, pre-validate a form before the user’s
response
is sent to our company’s server, search through a small database, set options
based on user preferences, and much more. JavaScript performs the same function
as a macro in a word processor or electronic spreadsheet program. A macro is a
small program designed solely to run inside a program, automating some task or
enhancing a feature of the program. The difference here is that instead of a word
processor or electronic spreadsheet application, JavaScript is designed for use with
Netscape and surfing on the World Wide Web.
JavaScript is used in Netscape 2.0 and later versions, as well as in Microsoft Internet
Explorer 3.0 and later versions. As the co-developer of JavaScript, Netscape has
wanted to make JavaScript an open’standard, meaning that other companies can
use and implement JavaScript in their own Internet products. When JavaScript
was first announced in December of 1995, over two dozen companies jumped on the
bandwagon, promising to support it in future products.
Thus JavaScript is an authoring language for the typical Web page designer. It
is a scripting language in which the program is embedded as part of the HTML
document retrieved by the browser.
A JavaScript program consists of one or more instructions (also referred to as code
or commands) included with the HTML markup tags that form our Web documents.
When Netscape encounters a JavaScript instruction, it stops to process it.
For example, the instruction might tell Netscape to format and display text and
graphics on the page. Unlike a program witten in Java, JavaScript programs are
not in separate files (though this is an option using Netscape 3.0 and later). Instead,
the JavaScript instructions are mixed together with familiar HTML markup tags
such as <H1>, <P>, and <IMG>.
Because JavaScript is embedded in HTML documents, we can use any text editor
or Web page editor to write our JavaScript programs. The only requirement is that
the editor must allow direct input.
Netscape needs to be told that we are giving it JavaScript instructions, and these
instructions are enclosed between
<SCRIPT> ... </SCRIPT>
tags. Within the script tag we can have only valid JavaScript instructions. We
cannot put HTML tags for Netscape to render inside the <SCRIPT> tags, and we
cannot put JavaScript instructions outside the <SCRIPT> tags.
JavaScript is designed on a simple object-based paradigm. An object is a construct
with properties that are JavaScript variables or other objects. An object also has
functions associated with it that are known as the object’s methods. In addition to
objects that are predefined in the Navigator client and the server, we can define or
own objects. A JavaScript object has properties associated with it. We access the
properties of an object with a simple notation
objectName.propertyName
Note that JavaScript is case-sensitive. Comments in JavaScript are the same as in
C, C++ and Java, namely
// ...
and
/* ... */
Core JavaScript can be extended for a variety of purposes by supplementing it with
additional objects; for example: Client-side JavaScript extends the core language
by supplying objects to control a browser and its Document Object Model. Serverside
JavaScript extends the core language by suppling objects relevant to running
JavaScript on a server.
3.2. DOCUMENT OBJECT 49
3.2 Document Object
The document object contains information about the current document, such as its
title, when it was last modified, and the color of the background.
The document methods interact with the document. The most commonly used
document method is
document.write("text");
and
document.writeln("text");
which writes text to the browers window. The document objects is itself a property
of the window object. JavaScript assumes that we mean the current window when
we use the syntax given above. Thus the write and writeln methods insert text
into the document. The two methods are identical, except that writeln appends a
new line character to the end of the string.
The command
document.bgColor = "red";
sets the background color to red. As an exmple of these two commands consider
<HTML>
<HEAD>
<TITLE> document.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
document.write("Hello Egoli");
document.write("\n");
str1 = "willi";
str2 = "hans";
document.write("<P> str1 = " + str1 + " str2 = " + str2);
document.bgColor = "red";
</SCRIPT>
</BODY>
</HTML>
JavaScript also has a for ... in statement. It uses it to manipulate objects. The
form is
for(varname in objname)
{ forbody }
The following program shows an example of the for ... in statement.
<HTML>
<TITLE> forin.html </TITLE>
<BODY>
<SCRIPT>
languages = ["C++", "Java", "C", "Lisp"];
var language = "C";
var label = 0;
for(var i in languages)
{
if(language == languages[i])
{
document.write("language in list on position: " + i,"<BR>");
label = 1;
}
}
document.write("label = " + label,"<BR>");
if(label == 0)
{ document.write("language not in list"); }
</SCRIPT>
</BODY>
</HTML>
3.10 Recursion
Recursion plays a central role in computer science. A recursive function is one whose
definition includes a call to itself. More generally, a recursive method is a method
that calls itself either directly or indirectly through another method. A recursion
needs a stopping condition. JavaScript allows recursion.
The following program shows how to use recursion for the generatimg of the Fibonacci
numbers.
<HTML>
<COMMENT> recursion.html </COMMENT>
<SCRIPT>
x = prompt("Enter the position of the Fibonacci number","");
n = Number(x);
function fib(n)
{
if(n<=2) return 1;
else return (fib(n-1)+fib(n-2));
}
result = fib(n);
document.write("Fibonacci number is: " + result,"<BR>");
</SCRIPT>
</HTML>
3.11 Other JavaScript Constructs
The new operator creates a new copy of an object. We can use the new operator
to create an instance of a user-defined object type or one of the predefined object
types
Arrays, Boolean, Date, Functions, Image, Number, Object,
Option, RegExp, String
An example is
mystring = new String("xxyy");
now = new Date();
JavaScript also has the this pointer which refers to the current object. In general,
this refers to the calling object in a method. The syntax is
this
this.object
The object name helps to disambiguate what this means. The this keyword is
also often used to define a new property in a user-defined object. When combined
with the FORM property, this can refer to the current object’s parent form.
We use the var statement to explicitly declare a variable. We may also define a
value for the variable at the same time we declare it, but this is not necessary. The
var statement also sets the scope of a variable when a function is defined inside a
function. For example
var name1 = "value";
name1 = "value";
Used outside of a user-defined function, both of these do exactly the same. Both
create a global variable. A global variable can be accessed from any function in any
window or frame that is currently loaded. If we use var name1 inside a user-defined
function it is local in scope, we only can see it inside the function.
The void operator specifies an expression to be evaluated without returning a value.
The delete operator deletes an object, an object’s property, or an element at a
specified index in an array.
3.12 Functions
JavaScript allows the use of functions indicated by the keyword function. The var
statement inside a function makes the variable local, i.e. it goes out of scope when
we leave the function.
The following HTML file show how functions are used within JavaScript. The
program opens a window where we see
Type something here
a textbox and a button called ClickMe. We enter some text in the textbox, for
example Egoli-Gauteng. Then we click at the Button ClickMe. The method alert
opens a dialog box and displays
The value of the textbox is: Egoli-Gauteng
Then click OK to close the dialog box.
<HTML>
<COMMENT> MyForm.html </COMMENT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function testMe(form)
{
Ret = form.box.value;
alert("The value of the textbox is: " + Ret);
}
</SCRIPT>
<FORM>
Type something here <INPUT TYPE="text" NAME="box"><P>
<INPUT TYPE="button" NAME="button" VALUE="ClickMe"
onClick = "testMe(this.form)">
</FORM>
</BODY>
</HTML>
In the following example we show the use of two functions. The HTML commands
to display a table of the square roots of the integers from 1 to 20 are embedded in
the JavaScript code.
<HTML>
<COMMENT> Function.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function sqrttable(myWindow)
{
myWindow.document.write("<B> Square Root Table </B><BR>");
myWindow.document.write("<HR>");
myWindow.document.write("<TABLE BORDER=1 CELLSPACING=5>");
myWindow.document.write("<TR><TD>Number</TD><TD>Squareroot</TD></TR>");
for(var i=1;i<=20;i++)
{
myWindow.document.write("<TR><TD>" + i + "</TD><TD>" + Math.sqrt(i) +
"</TD></TR>");
}
myWindow.document.write("</TABLE>");
myWindow.document.write("<HR>");
}
function display()
{
var dynWindow = window.open("","Title","width=200,height=300,scrollbars",
+ "resizable");
sqrttable(dynWindow);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="Show it">
<input type=button value="show table" onClick="display()">
</FORM>
</BODY>
</HTML>
The String object is a wrapper around the string primitive data type. We should
not confuse a string literal with the String object. For example
s1 = "egoli"; // creates a string literal value
s2 = new String("egoli"); // creates a String object
We can call any of the methods of the String object on a string literal value.
JavaScript automatically converts the string literal to a temporary String object,
calls the method, and then discards the temporary String object.
The following program shows an application of several methods of the String object.
<HTML>
<HEAD>
<TITLE> String.html </TITLE>
</HEAD>
<BODY>
<SCRIPT>
mystring = new String("Hello Egoli");
lgth = mystring.length;
document.write("lgth = " + lgth,"<BR><BR>"); // => 11
ch = mystring.charAt(3);
document.write("ch = " + ch,"<BR><BR>"); // => l
chcode = mystring.charCodeAt(3);
document.write("chcode = " + chcode,"<BR><BR>"); // => 108
sub = mystring.substring(2,6);
document.write("sub = " + sub,"<BR><BR>"); // => llo
lower = mystring.toLowerCase();
document.write("lower = " + lower,"<BR><BR>"); // => hello egoli
yourstring = new String("willi-hans");
upper = yourstring.toUpperCase();
document.write("upper = " + upper,"<BR><BR>"); // => WILLI-HANS
string1 = new String("carl-");
string2 = new String("otto");
string3 = string1.concat(string2);
document.write("string3 = " + string3,"<BR><BR>"); // => carl-otto
function checkDatabase()
{
var Found = false;
var Item = document.testform.color.value.toLowerCase();
Count = 1;
while(Count <= Colour[0])
{
if(Item == Colour[Count])
{
Found = true;
alert("The hex triplet for '" + Item + "' is #" + Data[Count]);
break;
}
Count++;
} // end while
if(!Found)
alert("The color '" + Item +"' is not listed in the database");
}
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Specify a color name, then click the
"Find" button to see its hex triplet:
<BR>
<INPUT TYPE="text" NAME="color" VALUE="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" VALUE="Find"
onClick="checkDatabase()">
</FORM>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> DataBase2.html </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
Names = new Object()
Names[0]=6
Names[1]="cooper"
Names[2]="smith"
Names[3]="jones"
Names[4]="michaels"
Names[5]="avery"
Names[6]="baldwin"
Data = new Object()
Data[1]="Olli|Cooper|44 Porto Street|666-000"
Data[2]="John|Smith|123 Main Street|555-1111"
Data[3]="Fred|Jones|PO Box 5|555-2222"
Data[4]="Gabby|Michaels|555 Maplewood|555-3333"
Data[5]="Alice|Avery|1006 Pike Place|555-4444"
Data[6]="Steven|Baldwin|5 Covey Ave|555=5555"
function checkDatabase()
{
var Found = false; // local variable
var Item = document.testform.customer.value.toLowerCase();
for(Count=1;Count<=Names[0];Count++)
{
if(Item == Names[Count])
{
Found = true;
var Ret = parser(Data[Count], "|");
var Temp = "";
for(i=1;i<=Ret[0];i++)
{
Temp += Ret[i] + "\n";
}
alert(Temp);
break;
}
}
if(!Found)
alert("Sorry, the name '" + Item +"' is not listed in the database.")
3.15. OBJECT OBJECT 81
} // end function checkDatabase()
function parser(InString,Sep)
{
NumSeps=1;
for(Count=1;Count<InString.length;Count++)
{
if(InString.charAt(Count)==Sep)
NumSeps++;
}
parse = new Object();
Start=0; Count=1; ParseMark=0;
LoopCtrl=1;
while(LoopCtrl==1)
{
ParseMark = InString.indexOf(Sep,ParseMark);
TestMark = ParseMark+0;
if((TestMark==0) || (TestMark==-1))
{
parse[Count]= InString.substring(Start,InString.length);
LoopCtrl=0;
break;
}
parse[Count] = InString.substring(Start,ParseMark);
Start=ParseMark+1;
ParseMark=Start;
Count++;
}
parse[0]=Count;
return (parse);
} // end function parser()
</SCRIPT>
<FORM NAME="testform" onSubmit="checkDatabase()">
Enter the customer's name, then click the "Find" button:
<BR>
<INPUT TYPE="text" NAME="customer" VALUE="" onClick=0> <P>
<INPUT TYPE="button" NAME="button" VALUE="Find"
onClick="checkDatabase()">
</FORM>
</BODY>
</HTML>
There are a large number of special characters in regular expressions. In the following
we list some of them.
The backslash \ indicates that the next character is special and not to be interpreted
literally. For example, /b/ matches the character b. However /\b/ means match a
word boundary.
The character ^ indicates matches at the beginning of input or line. For example,
/^X/ does not match the X in "in X" but does match it in "Xenia".
The character $ indicates matches at end of input or line. For example, t$ does not
match the t in "otto", but does match it in "art".
Using the asterisk * we can test whether the preceding characters matches 0 or more
times.
The + indicates matches of the preceding characters 1 or more times.
Using ? we can find the matches of the preceding characters 0 or 1 time. For example,
/el?le?/ matches the "el" in "angel" and "le" in "angle".
The command (x) matches "x" and remembers the match. Thus including parentheses
in a regular expression pattern causes the corresponding submatch to be
remembered. For example, /x(y)x/ matches the string "xyx" and remembers y.
The commmand x | y matches either x or y.
Let n be a positive integer. Then {n} matches exactly n occurrences of the preceding
character.
[xyz] is a character set. It matches any one of the enclosed characters. We can
specify a range of characters by using a hyphen. For example, [abcd] is the same
as [a-d]. The expression [^xyz] is a negated or complemented character set. It
matches anything that is not included in the brackets. Again we can specify a range
of characters by using a hyphen.
The command [\b] matches a backspace and \b matches a word boundary such
as space. The command \d matches a digit character. This is equivalent to [0-9].
With the command \D we match any non-digit character. This is equivalent to
[^0-9]. The command \f matches a form-feed, \n a line-feed, \r a carriage return,
\t a tab.
With \w we can match any alphanumeric character including underscore. It is
equivalent to [A-Za-z0-9_].
<HTML>
<COMMENT> RegExp.html </COMMENT>
<BODY>
<SCRIPT>
re0 = /xyx/
result0 = re0.exec("czxyyyxer")
document.writeln(result0)
// => null
re1 = /xyx/
result1 = re1.exec("czxyxer")
document.writeln(result1)
// => xyx
re2 = /^X/
result2 = re2.exec("Xylon")
document.writeln(result2)
// => X
re3 = /^X/
result3 = re3.exec("ylonX")
document.writeln(result3)
// => null
re4 = /t$/
result4 = re4.exec("art")
document.writeln(result4)
// => t
re5 = /t$/
result5 = re5.exec("otto")
document.writeln(result5)
// => null
re6 = /le?/
result6 = re6.exec("angle")
document.writeln(result6)
// => le
re7 = new RegExp("a+")
result7 = re7.exec("Cbaabbaxc")
document.writeln(result7)
// => aa
re8 = /xy+x/
result8 = re8.exec("czxyyyxer")
document.writeln(result8)
// => xyyyx
re9 = /x(y+)x/
result9 = re9.exec("czxyyyxer")
document.writeln(result9)
// => xyyyx, yyy
re10 = /xx aa$\n/
result10 = re10.test("yybb ++")
document.writeln(result10)
// => false
// \w matches any alphanumeric characters
// \s matches a single character other than white space
re11 = /(\w+)\s(\w+)/
str1 = "willi hans"
result11 = str1.replace(re11,"$2,$1")
document.writeln(result11)
// hans willi
re12 = new RegExp("[a-z]")
result12 = re12.exec("12345ac")
document.writeln(result12)
// => a
</SCRIPT>
</BODY>
</HTML>
3.18 Prompts
The prompt is a special method of the window object. It displays a dialog box with
a single-text box and Cancel and OK buttons
prompt(message,defaultText)
The word prompt tells JavaScript that a dialog box will appear on the screen. The
word message is the text that is displayed in the prompt box. Lastly, the word
defaultText is the text displayed in the text box.
<HTML>
<HEAD>
<COMMENT> prompt.html </COMMENT>
</HEAD>
<BODY bgcolor=yellow text=black>
<SCRIPT LANGUAGE="JavaScript">
var i;
var j;
var k;
i = 1;
j = 1;
document.write("<H4>");
var m = prompt("enter the number of Fibonacci numbers:",0);
document.write(i + "<BR>");
document.write(j + "<BR>");
k = i + j;
document.write(k + "<BR>");
for(var n=3;n<=m-1;n++)
{
i = j;
j = k;
k = i + j;
document.write(k + "<BR>");
}
</SCRIPT>
</BODY>
</HTML>
3.19 Events
JavaScript programs are typically event-driven. Events are actions that occur on
the Web page, usually of something the user does. Examples are: a button click is
an event, giving focus to a form element, resizing the page, submitting a form.
An event, then, is the action which triggers an event handler. The event handler
specifies which JavaScript code to execute. Often, event handlers are placed within
the HTML tag which creates the object on which the event acts. For example, a
hyperlink is subject to a mouseover event, meaning that its event handler will be
triggered when a mouse passes over the link. The JavaScript which is called by the
event handler may be any valid JavaScript code: a single statement or a series of
statements, although most often it is a function call.
The set of all events which may occur, and the particular page elements on which
they can occur, is part of the Document Object Model (DOM), and not of JavaScript
itself. Thus, Netscape and Microsoft do not share the exact same set of events, nor
are all page elements subject to the same events between browsers.
The table below displays some of the most commonly used events supported in both
DOM’s.
Event Occurs when ... Event Handler
========== =========================== =============
click User clicks on form or link onclick
change User changes value of text, onchange
textarea, or select element
focus User gives form element onfocus
input focus
blur User removes input focus onblur
from form element
mouseover User moves mouse pointer onmouseover
over a link or anchor
mouseout User moves mouse pointer onmouseout
off of link or anchor
select User selects form element's onselect
input field
submit User submits a form onsubmit
resize User resizes the browser onresize
window
load User loads the page in the onload
Navigator
In the following example we demonstrate the onBlur event and can see how it is
possible to force a user to enter valid information into a form. The user is forced to
enter a number from 0 to 9.
<HTML>
<COMMENT> onblur.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function isDigit(c)
{
return ((c >= "0") && (c <= "9"))
}
function checkValue(field)
{
if(!isDigit(field.value))
{
alert("You must enter a digit from 0 to 9.");
field.focus();
}
if((field.value.length < 0) || (parseInt(field.value) >= 10))
{
alert("You did not enter a digit from 0 to 9");
field.focus();
}
}
</SCRIPT>
<FORM>
Please enter a number from 0 to 9:
<INPUT TYPE=TEXT NAME="number" SIZE=3 onBlur="checkValue(this);">
<BR><BR>
Please enter your name:
<INPUT TYPE=TEXT NAME="name" SIZE=25>
</FORM>
</BODY>
</HTML>
The following example demonstrates the onChange event. We built a pulldown menu
that allows users to jump to different websites or URLs.
<HTML>
<COMMENT> onchange.html </COMMENT>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function jumpTo(URL_List)
{
var URL = URL_List.options[URL_List.selectedIndex].value;
window.location.href = URL;
}
</SCRIPT>
<FORM>
<SELECT NAME="site" onChange="jumpTo(this);">
<OPTION VALUE="http://www.fhso.ch/~steeb"> Applied University Solothurn
<OPTION VALUE="http://issc.rau.ac.za"> ISSC
</SELECT>
</FORM>
</BODY>
</HTML>
Knowing the exact structure of the DOM tree, we can walk through it in search of
the element we want to find using the commands
parentNode, childNodes[0], childNodes[1], ... , firstChild, lastChild
The following HTML-file with the embedded JavaScript code finds elements in the
tree structure of the polynomial.
<!-- polynomials -->
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">
Document = polynom.XMLDocument;
factor1.innerText=
Document.documentElement.firstChild.firstChild.text;
name1.innerText=
Document.documentElement.firstChild.childNodes[1].firstChild.text;
factor2.innerText=
Document.documentElement.lastChild.firstChild.text;
</SCRIPT>
</HEAD>
<BODY>
<xml id="polynom" src="file://c:\books\java\poly.xml"></xml>
Factor 1: <span id="factor1"></span>
<BR>
Name 1: <span id="name1"></span>
<BR>
Factor 2: <span id="factor2"></span>
</BODY>
</HTML>
The output is:
Factor 1: 2
Name 1: x
Factor 2: -4