Choosing a layout method is often very personal.

One person might prefer absolute positioning while another only uses floats with relative sized blocks. - Mr. Nishant Rai

Syllabus
Course Contents: Module I Introduction to html programming History of HTML, Structure of HTML, Adding Comments, Formatting Text, Creating List, Creating Definition List, Creating Hyper Text Links, Creating Link Lists, Inserting Inline Images, Creating Image Links, Horizontal Rules, Address Tag, Working with Text 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. Text & References:

Text: HTML, DHTML, JavaScript, Perl, CGI, Ivan Bayross, BPB Publication.

References: HTML Complete Reference, BPB Publication. Internet for everyone, Alexis Leon and Mathew Leon, Leon Tech world.

Module I Introduction to HTML .

Understand how typography works on the Web and format fonts and paragraphs. the first phase in creating a new web site is planning. o How it will be organized.Basic Web Design This hands-on workshop introduces you to the basic principles of Web site design and authoring using HTML. Take advantage of conventions. and page layout. Use tables to design the layout of a Web page. Minimize noise. You will then use FrontPage to create your web page or site and publish it to the World Wide Web for viewing. tags. Categorize information rather than defining categories and filling them.)? o What computers (PC/Mac) and browsers Source: (IE. etc. browser. It is only after this has been accomplished that HTML coding or authoring tools like FrontPage can be used effectively to actually create the site. Make it obvious what’s clickable. Steve Define content Krug o What you have and what you need. Recognize HTML and Web terminology such as hypertext.) do they use? Don’t Make Me Think. This involves determining the site’s navigation structure. Build the site structure around content organization. Create a new Web site or modify an existing website using FrontPage. and HTML. The planning process involves: The Five Golden Rules Create a clear visual hierarchy on each page. modify picture properties Developing a Web Site As with any other project. Netscape. Set Web page properties such as background colors and images. Opera. Identify the basic structure of an HTML document and create a simple Web page using HTML. etc. broadband. Objectives Understand and apply design principles when creating and modifying a Web site. . network.. Understand graphic formats for Web pages. content. insert graphics. Break pages into clearly defined areas. Define site purpose o What are the web site’s objectives? o Who is the target audience? o What is their connectivity (dial up.

o What graphics are required and how many? Remember, the larger the number of graphics, the longer the page will take to download. Develop a file naming convention and stick to it. 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. Avoid spaces in file or folder names. If necessary use an underscore between words. Determine site architecture and navigation. A simple flowchart-style sketch usually works best. Hierarchical models are best suited to the web. 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.

Designing Navigation Bars
The main goal of your website should be to make it easy for users to perform useful tasks. Develop a clear information architecture that is simple, consistent, and follows convention. Key Elements of Navigation 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

Home Page Layout 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.

01. Usability o Make the site self-explanatory. Structure The basic HTML document is contained within the <HTML> </HTML> tags and comprises two sections: Head and Body. o Design for the lowest common denominator of 800x600 pixels in screen resolution. as well as Cascading Style Sheet information is also contained within the Head. This section will not be displayed on the web page. HTML can be created by a simple text editor as well as a sophisticated web authoring tool like FrontPage. For example. The most recent version is HTML 4. HTML is the language used to create web documents. A non-proprietary language. Attributes are included inside the start tag. also know as the W3C. 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. and 410 pixels in height. 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. As new features are added and obsolete ones deprecated (removed). o Follow conventions. Any JavaScript code that is used. the easier it will be for your users to find their information. monitors the development of HTML. o Screen-size page banners and navigation bars should not exceed 760 pixels in width.o Consistent visual cues provide the user with a reference point. Elements can also include attributes. making it easier for them to navigate the site. <B> is the tag used to define text in bold where ―B‖ is the element contained within the tag. it is assigned version numbers. The less there is to scan. you can specify the alignment of images (top. middle. . o Keep your text brief and to the point.   Introduction to HTML What is HTML? An acronym for Hypertext Markup Language. HTML is not a programming language. Don’t make your users think! o Make your ―clickables‖ obvious. or additional information for that element. or bottom) by including the appropriate attribute with the image source HTML code. The Head contains the page title and meta-tags within the <HEAD> </HEAD> tags. Contrary to popular notion. For example. The World Wide Web Consortium.

or HTML hand coding applications like Home Site. Markup Tags The information contained in the Body section of an HTML document is formatted using markup tags. You can also the HTML view in authoring systems like FrontPage or Dreamweaver. If a browser does not recognize a tag. 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.e. it simply ignores it. <HEAD>. any basic text editor like Notepad WordPad can be used to create one.</BODY> </HTML> and it would still display in exactly the same manner in the browser. linefeeds. </BODY> </HTML> Tags are case insensitive. <B> will work as well as <b>. They can also be used to set the position of the content using alignment attributes. It will display the information contained within the tags however. This is the first paragraph. and carriage returns. and <BODY> tags are also referred to as document tags. The <HTML>. lists. etc. Not all tags work with all web browsers.htm or. Creating an HTML Document Since HTML documents are essentially text files with the extension . i. However. This is the first paragraph. graphics. Consequently.html. the HTML code in the example above can also be written out as <HTML> <HEAD><TITLE>A Simple HTML Example</TITLE></HEAD> <BODY>Welcome to the world of HTML. etc. it is best to structure the document using carriage returns and indents.The Body holds the actual content of the page (text. These are automatically compressed into a single space when the page is displayed in the browser. it is harder to read and edit in this format. headings. The most common markup tags are: . for clarity in reading and editing HTML. <TITLE>. For instance. line breaks.) contained within the <BODY> </BODY> tags. These tags allow us to create paragraphs. HTML documents do not recognize white spaces created by formatting tools such as spaces. lists.

right.: <HTML> <HEAD> <TITLE> Headings</TITLE </HEAD> <BODY> <H1>Level 1 heading</H1> <H2>Level 2 heading</H2> </BODY> </HTML> Paragraph These tags. It does not have much information at the moment. </P> <P>This is the second paragraph on this page.Heading These tags are used to highlight text by making them bigger and bolder than normal text. denoted by <P> </P>. where 1 is the biggest and 6 is the smallest heading.g. E. or you will end up with as one long block of text. The default alignment for a paragraph tag is left.g. E. Since HTML does not recognize carriage returns. E. or justified. it is especially important to use these tags to indicate paragraphs.g. center. </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.: <HTML> <HEAD> <TITLE> Working with Paragraphs </TITLE </HEAD> <BODY> <P>This is the opening paragraph for this page. Headings are specified as <Hy> </Hy> where H stands for heading and y is the level number (1 to 6). are used to define paragraphs. but it indicates how a paragraph is constructed in HTML. There are six levels of headings numbered 1 through 6. <HTML> <HEAD> <TITLE> Working with Paragraphs </TITLE </HEAD> .

Comments do not appear on the web page. As an authoring tool. </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.Your comment goes here -->  Introduction to FrontPage What is FrontPage? FrontPage is an application used to create web pages. 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. manage. create. and publish web pages without needing prior knowledge of HTML. FrontPage includes tools that allow you to design. E. However. 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. To include a comment in your HTML file. <HTML> <HEAD><TITLE> Page with Line Breaks </TITLE </HEAD> <BODY> Trinity University<BR> One Trinity Place<BR> San Antonio. It is one of the few HTML tags that is not paired with a closing tag.<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. a basic grounding in HTML allows you to tweak and optimize the HTML code that FrontPage generates. </P> <P align = ―right‖>This is the second paragraph on this page and it is right aligned. enter: <!-.g.

Unlike previous versions of FrontPage where a new page automatically appeared on launching the application. and then on Microsoft FrontPage. when you first launch FrontPage 2002. then Programs. Your screen should now look like this. it displays an empty screen (grey area).Creating a New Web Page To launch FrontPage 2002. To create your first web page click File  New  Page or Web or on the Create a new normal page icon. click on the shortcut on your desktop (see image on the right). Source: Microsoft Office XP Inside Out . If no icon is available on the desktop. click on the Start button in the lower left corner of the screen.

Notice that the topmost button titled Page seems to be ―depressed. These tags are for information only and cannot be edited or changed in this view. Folders. shows you your web site in ―file‖ form. The lines connecting the boxes (as shown in the Navigation icon button). HTML View.‖ This indicates that you are in the Editor view. Use the Reveal Tags (Ctrl+/) option under View in the Menu Bar to display HTML tags in the Normal View. This is useful if you want to modify or tweak the HTML code. click on the appropriate tab in the lower left hand corner of the Page View window. a little organization chart. To select a specific view. Preview Page View displays the page as it would appear on a web browser. Tasks is a little word processor that lets you maintain a ―To Do” list once you begin creating your web site.The Views bar. on the left of the screen. You can’t see anything at the moment because we haven’t created a web site. Navigation will show you. which displays the HTML code generated for the page. You cannot make any modifications in this view. This is the most commonly used view. Click back on the Page view to begin building your web page. . as you create your web site pages. indicate the hyperlinks between the pages. 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. in many different ways. This view is primarily used when creating and editing a web page or site. Reports will show you the status of all the pages in your web site as you create them. allows you to view your web page or site.

You can also right-click on the page and select Page Properties in the pop-up menu. and even sound and animation. To view the Page Properties screen. we will only work with title. For this class. To add a background image. you can set a number of page options here. type in a new page title.. Background Click on the Background tab to change screen options. and background color and image.Page Properties The page properties option allows you to change the default look (white) of your webpage by adding a background images or color. appropriate to your page. click on the Browse button and navigate to the location of the desired image. It is not a good idea to have background sounds on your web page as it slows the download. You should now see the Page Properties screen shown below. page titles. To change the default background and text colors. click on the little arrow to drop down the menu. select Format  Background in the Menu Bar. . As you can see. General In the title box.

it is best to view the formatting marks. Working with Text To place content in a new page simply start typing in the information onto the page. like you would in a word processor. Formatting Text You can format text to be in different fonts. and colors using the lists and buttons on the toolbar or the Format  Font option in the Menu Bar. click on the Page button again. you should see the indicator new_page_1.You can also change hyperlink colors in the same manner. Font List Size List . Use them sparingly.to display formatting marks. Type in a heading for your page (E. styles. If you don’t.g. To insert a line break (<BR>) instead of a paragraph break.. Use the Show All button . Every time you press the Enter key. Bright colors are eye-catching. Purple for a page that has been viewed.e. but needs a bright text color for contrast. When modifying a web page. above the white area. Check that you are in the Page View (the Page button in the View bar will have a square around it) and that your cursor is flashing on the left hand side of the white area. it is advisable to stay with the convention i. Light colored backgrounds with dark text work well together.htm. FrontPage automatically generates a paragraph tag (<P> </P>) with a blank line after it. but can tire a reader. sizes.: Blue for a page that has not been visited yet. My First Web Page) and then press the Enter key. A dark background can add drama. Red is the color of the link as it is being pressed. Use background images that have subtle patterns and textures. use the Shift-Enter combination. A busy background image makes it harder for the user to read the content. However. At the upper left corner.

The Font dialog box offer allows you to set text effects such as superscripts. etc. or Helvetica that are easy to read and available on most computers. Avoid using them. Select the desired size from the list or the Font dialog box. You can also use the Font Color button on the Tool Bar. etc. like Blink. with 1 as the largest and 6 as the smallest. Choose fonts such as Arial. strikethrough. Font Style This usually refers to setting text as bold. select the appropriate option from the Style menu on the Tool Bar. Font Color You can select font color along with other options in the Font dialog box. . ) or Don’t use the underline style as it will look like a hyperlink and confuse the reader. headers. To set text as a header or list. can also be annoying. Not all of them are supported by browsers. and some. This will display the page in whatever font the user has set as default. Font Size In web documents.Font Type It is best to select a simple. A point size of 2 or 3 works the best for paragraph text. subscripts. italics. An easy method to convert text to bold or italics is to select the text and then click on the Bold ( Italics ( ) button. Header sizes range from 1 to 6. Verdana. san-serif font that is easily available on most computers to avoid variations in how the page is displayed. lists. The latter are indicated in parentheses next to the HTML sizes for a sense of proportion. font sizes have different values from the point sizes used in word processors.. Avoid leaving the font setting at Normal or Default.

. all the ―parts‖ of the web page (graphics. and then click Insert to place it on the page.Formatting Paragraphs Paragraphs are aligned or positioned relative to the sides of the web page as Left. therefore. You can align a paragraph with any of the following methods: Right-click in the paragraph and select the Paragraph command from the menu. sounds. select it. Select From File or Clip Art to specify the file location. etc. animations. you can change its size and positioning on the screen. Centered. photos. To insert your picture. Align Right ( ). Make sure you put your image files in the same location as your web page. Center ( ). Modifying Picture Properties Once you have inserted the image. 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. video files. Inserting a Picture Graphics for web documents should be in one of the following formats: GIF (Graphic Interchange Format): Limited to 256 colors. If the web ―page‖ can’t find items. Save scanned photos in this format. click on Insert  Picture in the Menu Bar. or Justified. 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. In order for the page to load correctly.) have to be located in the ―same place‖. Select Format  Paragraph Use the Align Left ( ). Right. When the Picture menu screen appears. navigate to the location of the desired image. you will not be able to see them in your page. or Justify ( ) buttons on the Tool Bar.

Cropping Graphics You can also resize an image by cropping it so that you only retain the details you want. Dragging on a corner handle sizes the graphic proportionately. right-click on the image and select Picture Properties from the menu to display the Picture Properties dialog box.To resize an image. enter a value (in pixels) in the Border Thickness box. the thicker your border will be. bottom. Dragging the middle handle will distort the image. Click on the Crop button ( ) to display the cropping box on the graphic. It is highly recommended that you use an image editing application like Adobe Photoshop to resize and crop images. Drag the cropping box handles to size the box and click on the Crop button again to crop the graphic. . both above and below (vertical) or on both sides (horizontal). Change the Alignment of the image depending on how you want it positioned on the page. Use these handles to change image proportions. This prevents text from running into the image. For precise sizing as well as to set other options. To add a border. and side edges). and then insert the modified images into your web page. The higher your value. click on it once to select and display the sizing handles (small ―squares‖ at each of the corners and in the middle of the top. The default value is 0 or No Border. Use the Horizontal spacing and Vertical spacing options to add white space around the picture. Basic cropping can be done in FrontPage itself as follows: Select View  Toolbars  Pictures to bring up the Pictures toolbar.

‖ You will then be taken to the default page in your browser. You can also click on the Hyperlink button on the Tool Bar. Select the text or graphic that will function as the hyperlink. In the Address Area. 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. When you see the web site. Text hyperlinks are underlined and highlighted in blue to make it easy for the reader to pick them out while scanning the page. In the Insert Hyperlink dialog box.Hyperlinks A web page’s power lies in its ability to link text and/or an image to another document or section of a document. . 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. then select Insert  Hyperlink from the Menu Bar or use the shortcut Ctrl+K. click on the Front Page button at the bottom of your screen in the task bar.

Click on OK to complete placing the hyperlink. To create the hyperlink to the bookmark. To create a bookmark. Create a link to the bookmark. It is particularly useful with long documents that would require the user to scroll up and down. a bookmark will show with a dashed underline. There are two steps to adding a bookmark link: Create the bookmark. select the text to be hyperlinked. The Address area at the bottom of the menu screen will also indicate the web address to which you browsed. Web address Bookmark Links Bookmark links are used to link to a section within the same document.This will take you back to FrontPage 2002 and the Insert Hyperlink dialog box. . In the Normal Page View. position the cursor by the first word of the section you want to bookmark and select Insert  Bookmark from the Menu Bar. Give the bookmark a suitably descriptive name and select OK. Click on the Browsed Pages button and select your site from the list of choices that appears. You can also click on the Hyperlink button on the Tool Bar. then select Insert  Hyperlink from the Menu Bar or use the shortcut Ctrl+K.

hold down the Ctrl key and click on the link. In the Insert Hyperlink dialog box. the Save As dialog box will appear. When the Save In box displays the desired location. Click on the arrow on the right hand corner of the box to display more locations. FrontPage will automatically add the extension . type in the file name in the File name box and click the Save button. To create an email link. You can save your file by selecting the Save option from the File menu (File  Save). click on Email Address and fill out the email address. Location name More locations File name FrontPage will try to use your title for the name of the web page. . some older computer systems and servers might not work well with the name.htm to the file name. If it is more than 8 characters long.This will open up the Insert Hyperlink dialog box. the name should not have an apostrophe (’) as this is a reserved Java character and could cause later problems as well. Saving Your Web Page It’s wise to save your web page periodically so that you don’t lose your work. You can also click on the Hyperlink button on the Tool Bar. select Insert  Hyperlink from the Menu Bar or use the shortcut Ctrl+K. The hyperlinked text will now appear as blue underlined on the page. Click on the Bookmark… button and select the appropriate bookmark. or by clicking the Save button. When you save a web page for the first time. The Save In box displays the location name. Email Links Email links are used so that users can email webmasters or other contact individuals their comments and feedback. To test your link. Also.

Tables A table on a web document is essentially a grid of rows and columns. . Table properties for each web page should be determined and sketched out as early as possible. place the cursor at the point you want the table to be and select Table  Insert  Table from the Menu Bar. depending on the content. Sometimes. Use the Rows and Columns options to determine the number of rows and columns in the table. Tables make it easier to design page layouts because they allow you to display information in a formatted tabular form. This will display the Insert Table dialog box shown below. These are called nested tables. Creating a Table To create a table on your page. Several small tables will load faster than one long table.) Select OK once you have entered your options. you may need to tables within tables. (This is where having a sketch becomes handy. Each intersection of a row and a column creates a cell.

Background color adds a colored background to the table cells. left. Click the button and drag the mouse over the grid. Specify height is usually not necessary to set since the height depends on the number of rows in the table.g. right. Tables that are used to display tabular information can have their borders set to higher values. The default is usually left alignment. Table Properties Specify width sets the width of the table by a distinct number of pixels or by a percentage of the screen width. Table with no border The same table with a border of 5 pixels Border color defines the color used for the border. Cell spacing is the number of pixels between each table cell. or justified.You can create a basic table using the Table button ( ) on the Tool Bar. click the mouse button again. E. when you want the table to be a certain width and avoid horizontal size changes. highlighting the cells that should appear on the table. For example. the border color in the table above is grey. Border size indicates the thickness of the border around each cell. E.g. . Alignment refers to the table's position on the page as in centered. Cell padding is the number of pixels between the text and the cell walls. When the table size has been selected. Use the In pixels option. Tables used for content layout should have a border of 0 to hide the borders.

Cell Properties To modify cells properties. the formatting options are the same as within the document. You can also right-click within a cell and select Cell Properties from the menu. then type to enter text or insert the graphic. then select Tables  Properties  Cell from the Menu Bar. E. click in the cell to place the cursor there. 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. first select the cells to be changed. Within a cell. Either option will bring up the Cell Properties dialog box. Working with Cells To add content (text or graphic) to a cell.g. .Use background picture add a background image to the table. Therefore. pressing the Enter key will create a paragraph break.

. Border color changes the color of the cell border as demonstrated below. Spanning Cells Sometimes. it would work like this: Insert a new row at the top of the table. you will need to span that cell across columns or rows as the case may be. Type the text of the row that will be spanned across the columns into the first cell. You can change this to Centered. Specify width and specify height defines the width and height of the cells. Vertical alignment refers to the position of the contents relative to the top and bottom of the cell. The Header cell option will automatically bold and center the cell content. a cell that carries the page banner or title for example. you may need to create a cell that spans rows or columns. The default is at the Middle. Background image adds a graphic to the background of each cell.Horizontal alignment defines the position of the content within the cell. The default is the Left side of the table cell. In such situations. Using the table used in the above examples. Percentages refer to the portion of the table. Background color changes the cell's background color. or Justified. Right. not the entire screen.

. You can also right-click and select it from the popup menu.Highlight both cells in the top row and select Table  Merge Cells from the Menu Bar.

select Rows and enter the Number of Rows. You can also insert a row or column right-clicking in the cell the new row or column will be adjacent to. In the chapter Introduction to FrontPage. If you still have your single web page on the screen. If you are prompted to save your changes. Then select the Location of the new row by selecting Above selection or Below selection from where you placed the cursor in step 1. and learn to use FrontPage to create and edit web pages prior to creating a web site. you will learn to create a small web site using FrontPage. and then on Microsoft FrontPage. FrontPage automatically creates the links to the other pages in your web site. If no icon is available on the desktop. Click Columns to insert a new column and the choices will change. Then select Table  Insert  Rows or Columns from the Menu Bar to open the Insert Rows or Columns dialog box. select Yes. When creating a web site. To insert a row.Inserting Rows and Columns To add rows or columns to a table. Click OK. then Programs. Select Insert Row or Insert Column from the popup menu. Launch FrontPage by clicking on the shortcut on your desktop (see image on the right). click on the Start button in the lower left corner of the screen. .  Creating a Website In this section. select File  Close in the Menu Bar. Take a few moments to review what the screen should look like and re-familiarize yourself with the various buttons on the top and left side of the screen. It is recommended that you familiarize yourself with the basic concepts of web design. Enter the Number of columns and the Location left or right of the selected point. you learnt to hyperlink to other web pages and sites. place a cursor in the cell that the new row or column will be adjacent to.

Source: Microsoft Office SP Inside Out Place your cursor over the small yellow folder with an ―earth‖ on it or on the text Empty Web. specify the location of your new web by typing in c:\webtest. in the ―white area‖ under Options. To create a space for your web site. you need to do the following in the dialog box: First (1) . .To create a new web site. You will also notice that your cursor will change to the ―small pointy hand‖ hyperlink icon. Since this is a web site. make sure that the upper left icon One Page Web is highlighted. you will have to select another button in the Views Bar to be able to see and work with your web site. You will notice that the words Empty Web are now underlined in blue. click on it. It may appear that nothing has happened. click OK. Click on Empty Web to display the Web Site Templates dialog box. Second (2). select File  New  Page or Web in the Menu Bar. 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. 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). If it is not. If your Web Site Templates dialog box should looks like the one on the following page. However. This will bring up a ―Task Pane‖ on the right hand side of your screen. and the Views Bar on the left of the screen is set on Page. The Task Pane is Office 2002’s alternative to the dialog box. This will take you back to the FrontPage 2002 main screen.

To visually see/confirm that your web site has been created by FrontPage. click on View in the Menu Bar. FrontPage has also created your initial home page called index.htm . click on Folder List . The Folder List indicates that your new web site is located on the C: drive in the Folder webtest.1 . In the drop-down menu. The Folder List will now appear on the left side of your screen to the right of the Views Bar. 2 . Notice also that two new folders have been created by FrontPage: private and images.

simply click on the small ―X‖ in the upper right corner of the Folder List view area. Saving Your Web Site If you haven’t already. One of the neat things in FrontPage 2002 is that it automatically saves your web site as you make a change. FrontPage will close. When this process is complete you will see your initial Home Page of the web site in the center of the screen.To create our web site we’ll want to be in the Navigation View. Your new web site will shows up just as you had left it. . Working on Your Web Site To begin working on your web site pages. you’ll notice that the Save option under File in the Menu Bar is grayed out. Take note of the words below the Home Page (index. select index. This is a new feature of FrontPage 2002. Navigate to your saved Web (webtest). they’re important. select File  Open and click on the small triangle to the right of the Look in area.htm). and click on Open. so click on the Navigation button on the View Bar. Take a few minutes to look at all of the “stuff” on the screen. To see this. select File  Exit in the Menu Bar. Then switch to the Navigation View so you can get started creating your web site If your Folder List view area is still visible. as is the Save button in the Tool Bar. Now open FrontPage as you did at the beginning of this tutorial.htm (or the file you want to work on). You will still have to save individual web page changes as you work on them.

Again. FrontPage automatically hyperlinks it to the corresponding page. to turn it blue.htm). In this case you will add. First. FrontPage will assume you want to edit the page and load it in the Editor. When you add a new page.htm). and then click on the New Page button. Add two more pages under your Home Page (index. . As soon as you click. it will appear as a light yellow icon. when you click on it. and automatically link.htm) to turn it blue. Your web site should now look like the one below. The process is similar to what we just did. Next.Creating Web Site Structure You should be in Navigation View at this point. we’ll add two pages under New Page 3. it will turn blue. Your screen should now look like the one below:. Do this twice. and then click on the New Page button. To add the first page under your home page. This is where FrontPage really does its work. If you accidentally double-clicked on the Home/Index Page icon. three additional pages below your main home page. Each time. Your screen should now look like the one at the right. click on the New Page button (looks like a sheet of paper) in the upper left corner of the screen. This indicates to FrontPage which page you desire to work on. make sure the Home Page icon is blue. your screen will change to reflect that you have just created New Page 1 below your Home Page (index. Simply click on the Navigation button in the View Bar and you’ll be back where you want to be. Prior to your click. First. click on the Home Page (index. click on New Page 3. click on the Home or Index Page in the middle of the screen.

This will bring up the Shared Borders dialog box. and Left. If you add or edit an element in a shared border in one page. Or right click on the page and select Delete from the popup menu. select All Pages. the left another navigation bar. Your Shared Borders screen should look exactly like the one on the following page. simply click-on the erroneous new page and tap the Delete key. etc. Also check the squares to the left of Top and Include navigation buttons. copyright notice. and Include navigation buttons. it will affect the content in all the pages that display that shared border. Shared borders allow you to display content that is identical to all pages without having to repeat the process for each page. a top shared border will contain a page banner and navigation bar. Typically. You can also click on the Undo button. You now have the beginning of a small web site. Before you can look at it however. To make the titles and the links of each web page visible. To do this. . select Format  Shared Borders in the Menu Bar.If you make a mistake as you are adding new pages. and the bottom. select OK. information such as email. you need to do a very important task. When it does. You need to tell FrontPage what you want to see on your web pages in your web site.

htm) icon. You can also right-click on the Home Page (index. Don’t worry about the dashed lines. these .htm) appears at the top of the page in the Editor (Page View) – just as it did when FrontPage created it. Observe that the title to the Home Page (index.htm). New Page 1.htm) icon and select Open from the popup menu. 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.To see what your site looks like at this point. As indicated earlier. It should look like the view below. Also. double click on the Home Page (index. Take a few moments to look at the top of the page in the Editor (Page View).. you will return to the Navigation View and re-name these pages so that they make more sense to your web site. This will load the Home Page in the Editor (Page View).

are simply there to assist you later in the Page View. They will disappear when you view your web site in a browser. it is recommended that you view the site in other browsers such as Netscape and AOL to ensure compatibility. . and New Page 3. However. Click on New Page 1. When you choose Preview in Browser. New Page 2. Your initial view of your Home Page (index. Or select File  Preview in Browser from the Menu Bar. you will notice that the pointing hand appears.htm) should look like the image below. your ―blank‖ website will respond like any other website. in Page View. Internet Explorer is the default browser at Trinity University. Viewing Your Website in a Browser To see what the site would look like on the Web. when possible. click on the browser button in the Tool Bar. FrontPage will ask you to choose a browser available on your computer. When you move the cursor over the titles New Page 1. indicating a hyperlink. it should look like the image below. In the browser.

) for each page. etc. Now click on New Page 3 in the browser. or on the same level as the current page. new_page_1. 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 Title column displays the actual page names as . 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. all the pages will show with their names. Your browser should now look like the image below. You should now see the following screen: The Name column on the left side of the screen displays the file names (index. It does not matter if there are more than three pages above. click on the Folders button in the View Bar. These are part of the automatic hyperlinks that FrontPage creates.htm. When you created your Shared Borders. you set it up so that links to pages that are above or on the same level as the current page (New Page 1 in this example) show below the page title.The text buttons on the line below the title New Page 1 are hyperlinks back to the Home Page and to pages 2 and 3. Creating Titles for Website Pages To get an idea of how page titles are displayed in FrontPage.

Click once on the Home Page (index. Select View  Refresh on the Menu Bar to update your changes. the new titles will appear in the Title column.htm in this example). Once you get the hang of this. select Rename. Remember the file name conventions outlined earlier in this book when renaming files. you can change the titles to anything you desire. add more pages. Place the following titles for the other pages in your website in a similar manner. and type in the desired file name. Then click on the title (index. should look similar to this one.they appear on the Navigation View boxes (index. 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 When you are done. Your screen should look like the image on the right.htm. etc.htm. .htm) box to turn it blue. You will see the page title is now the one you entered.htm) and wait a few moments till the title is highlighted in blue. For now. You can start typing immediately to replace index.). type in First Name’s Home Page where First Name’s is your first name. To rename a file name (new_page_1. rightclick on the file name in the Folder View in the View Bar. Return to the Navigation View in the View Bar to give your pages new titles. New Page 1. Your Title column. and tap the Enter key when you are finished. etc. When you rename the page titles. or you can delete the text and then type in the new page title. In a Windows program this indicates that you can edit the text. select View  Refresh on the Menu Bar to update your changes Now return to the Folder view by clicking on the Folder button on the View Bar.

click on the browser button in the Tool Bar. look at the Task Bar at the bottom of your screen. Navigation. and images used in page banners and navigation bars. Applying the same theme to all the pages gives the entire website Themes affect the following web page characteristics: Background color or image.To see what your updated site looks like in the browser. Your browser button should be flashing blue. Images used for bullets in bulleted lists. return to FrontPage by clicking on the FrontPage button in the Task Bar at the bottom of the screen. it needs to have consistent design. Themes For a website to be effective. Text colors and fonts used with paragraph styles (Normal and Heading 1 to Heading 6). or it looks like your browser hasn’t opened. Text color and font. FrontPage allows you to create this easily by using themes. Images used for horizontal rules. first return to the Navigation view by clicking on the Navigation button in the View Bar.) you are in when you return to FrontPage. If you are not there already. You will notice that FrontPage has automatically changed all of your pages and buttons. . or select File  Preview in Browser in the Menu Bar. In Page View. Double-click on your home page icon (ABC’s Home Page) or rightclick on the home page icon and select Open from the popup menu. If nothing seems to happen. Source: Microsoft Office XP Inside Out a consistent look. This will load the page in the Page View. or consistent formatting features that are applied to all the elements of a page. It does not matter which view (Page. (You can change them page by page later if you so desire). Table border colors. If it is. click on it to bring up your web site. Click around your web site. etc. Text hyperlink colors.

FrontPage will apply the theme to only those pages.Select Format  Theme in the Menu Bar. . If you choose Selected page(s). this is because at this point. When you do. This will take you to the Themes dialog box. If you select All pages. the theme will be applied to all the pages in your website. When it first appears. When you have decided on a theme. make sure you select one of the options under Apply Theme to:. you will notice that the display area is blank.. Remember the consistency rule while making your choice! Click OK when you are ready. you have not yet selected a theme to view. Select a theme from the choices in the left side of the dialog box. your selection will be highlighted in blue and the theme will appear in the sample screen. Go through the choices to pick one you like.

You are now ready to view your updated website in the browser. or select File  Preview in Browser in the Menu Bar to open your website in the browser.This will bring up the following message screen: It indicates that all of your formatting will be changed to the theme you selected. You will notice that the theme you chose has been applied to this page. Click Yes. select File  Save All in the Menu Bar. When you see your website organization chart. double-click on your home page at the top of the chart. click on the Navigation button in the Views Bar. . To save your pages. Browse around to see how everything works. Don’t forget to save frequently as you are editing your individual web pages. Click on the Preview in Browser button. To see if your theme has been applied to the website. When you are in the Page view. As before. You can save each page individually. Once you have created a website. you can make changes to it at any time by selecting File  Open Web in the Menu Bar. or all of them at the same time with the Save All option. Make sure that you are in the Folder or Navigation view in the Views Bar when you do this. this will take you to the Page view and your home page. You are now ready to save your website and view it in a web browser. you’ll need to save your changes to each page just like you did when creating a single web page.

select File  Publish Web from the Menu Bar. type the full URL (address) of the location you want to publish to as indicated in the picture.Publishing Websites For people to see it on the Web. The trinity folder is used to allocate web space to campus departments so they can publish departmental websites. When typing in your username. Don’t use the Browse button to navigate to the W: drive! You need to enter the complete URL. As you can see. You can access it by clicking on the My Computer icon on the desktop. you need to copy it to a specified location on a Web server. . you will need to publish your website. This will display the Publish Destination dialog box as shown below. or by right-clicking the Start button and selecting Explore from the popup menu. make sure you use the following format: trinity\username. there are two parts to the Web server. You will now be prompted to enter your username and password as shown below. To publish your website. In other words. This space is available on request. In the Enter publish destination box. The users folder is the personal web space allocated to faculty and staff to publish non-departmental websites. Trinity’s web server is indicated by Web on TUCC-Web’ (W:):.

The remote view is on the right. simply click on the Publish button to copy your files to the specified web location. If your website has subwebs (websites within websites).Once you connect. you can opt to publish only the changed pages by clicking on the Options button in the Publish web dialog box. it is a good policy to check this off always before publishing. . make sure you have checked off on the Include subwebs option. In fact. If you are publishing a modified/edited website. local view remote view The top part of the dialog box indicates the location you are publishing from and the one you are publishing to. If you are publishing for the first time. Use the Change button to change the publishing location if you need to. you will see the Publish Web dialog box displayed on the following page. The middle area of the dialog box is divided into two parts: The local view is on the left.

.

you will see the following dialog box.</head> Contains the head information.Once the “publish” is complete..</body> Contains the viewed portion of the document <body bgcolor="?"> Sets the color of the background in hexadecimal code <body background="filename. Congratulations! You have successfully created your first website...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 . 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>...</html> Creates the html document <head>. HTML TAG LIST BASIC TAGS <html>.. Select Click here to view your published web site to view your web site on the Web..

..</pre> Creates preformatted text ... and adds a number <ul>. also used for stylesheets TEXT ATTRIBUTES <pre>... right.</ul> Creates a bulleted list <div align=?> A generic tag used to format large blocks of HTML..</blockquote> Indents text from both sides LISTS <dl>... or center <br> Inserts a line break <blockquote>.</ol> Creates a numbered list <li>.<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>...</li> Precedes each list item....</p> Creates a new paragraph <p align=?> Aligns a paragraph to the left.</dl> Creates a definition list <dt> Precedes each definition term <dd> Precedes each definition <ol>.

.</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..</sub> Subscript . H6 smallest <b>.....</i> Creates italic text <tt>...</em> Emphasizes a word (with italic or bold) <strong>.</strong> Emphasizes a word (with italic or bold) <sub>.....</h6> Creates headings – H1 largest.... or typewriter-style text <cite>.</font> Sets the font to a size from 1 to 7.<hl>...</sup> Superscript .</font> Sets the font face <font color="color">.</font> Changes font attributes for text within the tags <font size="value">.</hl> to <h6>.text is higher than basline FONT ATTRIBUTES <font>.. with 1 the smallest and 7 the largest <font face="name">.</tt> Creates teletype.</cite> Creates a citation...</b> Creates bold text <i>.text is lower than baseline <sup>.xxx”> .. usually italic <em>........

.</a> Links to a target location in the current page <a href="URL#name">.. or top <img src="url" alt="text" border="number"> Sets the size of the border around an image <img src="url" alt="text" height="pixels"> Sets the height of an image <img src="url" alt="text" width="pixels"> Sets the width of an image <img src="url" alt="text" hspace="pixels"> Sets a horizontal margin to be placed around an image <img src="url" alt="text" vspace="pixels"> Sets a vertical margin to be placed around an image <img src="url" alt="text" usemap="map-name"> Designates an image as a client-side image map LINKS URL FORMULA <A HREF=”URL”>LinkText</A> <a>.....<img src="url" alt="text"> Adds an image with a text description <img src="url" alt="text" align="direction"> Aligns an image to the left.</a> Creates a mailto link TABLES <table>.. bottom.</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">..</table> . right.</a> Designates the origin and destination of a hyperlink <a href="#name">. center...

right. or bottom FRAMES <frameset>. centered table data <tr>..</frameset> Specifies the layout of subsections in the main browser window . middle.</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...... or center <tr valign="?"> or <td valign="?"> Sets the vertical alignment of a row or cell to the top.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 <table height="pixels" or "%"> Sets the height of a table <table width="pixels" or "%"> Sets the width of a table <td>.</tr> Defines a table row <tr align="?"> or <td align="?"> Aligns the contents of a row or cell to the left...

</form> .value"> Defines the columns within a frameset <noframes>. in percentage or absolute value <hr noshade> Creates a rule without a shadow FORMS <form>.value"> Defines the rows within a frameset <frameset cols="value...<frameset rows="value.</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...

..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="media type"> Defines which MIME types are supported by the server processing the form <form accept-charset="text"> Defines which character sets are supported by the server processing the form <form enctype="media type"> Defines the format of the submitted data <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"> .

> Greater than arrow &raquo. & Ampersand &trade. © Copyright &quot.Generates a Reset button (clear form) SPECIAL CHARACTERS &amp. / Forward slash &lt. » Right pointing double angle quotation mark . ™ Trademark &reg. ― Left quote &#148. ® Registered trademark &copy. ‖ Right quote &frasl. " Double quote marks &#147. < Less than arrow &gt.

&laquo. « Left pointing double angle quotation mark &#151. ¾ Three quarters &middot. · Middle dot &iexcl. ¡ Inverted exclamation mark &spades. — Em-dash &pound. ½ Half &frac34. ? Black spade suit &clubs. £ Pound sign (GBP currency) &deg. 30° Degree &frac14. ¼ Quarter &frac12. ? Black club suit .

? Black diamond suit . ? Black hearts suit &diams.&hearts.

MODULE Advance HTML & CSS .

ISINDEX. BASEFONT. STRIKE. 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.0. IFRAME. and 4.HTML 4.HTML Versions You should be aware that there are historically many versions of the HTML specification.0/3.0 elements and attributes. S. refer to the Web Design Group's web page. 3. but not all.0 Reference section.0 are CENTER. This document covers most commonly used HTML elements and attributes. NOFRAMES. There are several HTML common document types when refering to HTML 4. HTML Support You should also know that many of the element tags are being depreciated in favor of cascading style .0 which are: Strict . MENU. FONT. and U.2 with frame support.0 without frame or HTML 3. For an excellent source of information regarding available HTML 4. I have tried to display HTML tags and attributes that are supported by the 3.0.2. Transitional or loose . APPLET. FRAME.2 that are being depreciated in HTML 4.0 specification. DIR. HTML 4. Some depreciated tags/elements not supported by strict HTML 4. You will read most about the HTML 3.2 depreciated feature support.Supports features of HTML 3.2 and 4. but cannot guarantee that all tags and attributes contained herein will work in all versions of HTML. FRAMESET.0 specification.HTML 4. This DTD does not support framesets. Frame .

Normally. I usually place all backgrounds here.Sub subjects of subject 1. For instance. or a HTML graphics editor. I use the following structure: mainpage . I recommend using an HTML text editor which lets you see the HTML tags in a different color than the surrounding text which makes them easier to see.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.The main folder for your web page. Many of the elements not supported by the strict HTML 4. Getting ready to create a website You can create your web site off line using a standard text editor. name it an appropriate name for your web site. Some examples in this document demonstrate the use of style sheet and inline style commands. The best way to determine what will work is to read referenced documentation and experiment. 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.sheets. an HTML text editor. One of these may be an even better choice if you can obtain one. Your html and graphics files for a particular web page subsection will go here. There are also some editors which perform validation dynamically. not all older web browsers support frames. 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. Your HTML files for your home page will go here.0 document type definition (DTD) will be noted with the word "depreciated" where they are presented. all pictures that are used in "The CTDP Networking Guide" are placed with the HTML files in that folder. Subject1/sub1 . subject1 . . gifs . but most clients should have web browsers today that support frames. is a good choice to begin with. 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. Also some style sheet properties may be supported by some browsers but not by others. Arachnophillia. 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. I do not put pictures for specific sections here.In the case of the CTDP. this may be "Linux". The free ware editor. For example.

You can copy the example file shown there into your editor's file or make your own. If you want to set your HTML page with multiple frames. for example with an HTML index on the left side for easier document viewing. BODY structure until you gain familiarity. and BODY elements.subect1/sub2 subject2 .This may be "networking". you will want to create a template from which you can start all your pages which has the basic structure of an HTML document as shown in the "HTML document Structure" section of this document. Starting with a Template To begin your first web page. you will need to become familiar with the section on FRAMES before you begin. . subject2. If working with frames is initially too complicated. HEAD. stick with the standard HEAD. You will want to follow the standard HTML structure of HTML.

and other characteristics depending on the element. size of text. paragraphs. The following is a paragraph element. tags. <br> tag. The HTML document is begun with the <html> tag and ended with the </html> tag.01 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html."> <meta name="keywords" content="HTML. These attributes are listed in this document when the element is discussed in detail. <p>This is a sample paragraph element.9"> <meta name="description" content="Comprehensive Documentation and information about HTML. For instance. The <P> tag begins the paragraph element and the </P> tag ends the element. An HTML document is structured with two main elements: 1 HEAD 2 BODY An Example HTML File <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. lists. charset=iso-8859-1"> <meta name="GENERATOR" content="Arachnophilia 3. and more. commands"> <title>The CTDP HTML Guide</title> . tables. Also some elements have attributes embedded in the tag that define characteristics of the element such as the placing of text. Any text in a paragraph goes here.</p> Not all tags have a tag for ending the element such as the line break. Elements may be embedded within each other. a paragraph is considered to be an html element constructed with the tags <P> and </P>. source of an image. BODY.HTML Structure HTML uses tags that are encased in brackets like the following: <> HTML documents consist of elements which are constructed with tags. Elements of an HTML document include the HEAD.

links blue (unvisited). This is a file with a name "style.css" rel="stylesheet" type="text/css"><!-. "BODY". This is a text file that may be created with a text editor but must be saved in plain text format. red (active) -></head><body><center><h1>HTML Document Structure</h1></center><p>This is a sample HTML file. there is a header and a body.</p></body></html> Comments begin with <! and end with the > bracket.Background white. navy (visited). The tags "HTML".<link href="style. The center tag used above is depreciated. This is covered in more detail later. Normally you can copy this file and use it as a template to build your new file while being sure to make some modifications. In the above file. and all others may be in capital or small letters. It is best to use style sheets to center headers and other items.css". however the new XHTML standard requires small letters so small letters are recommended. Also note the LINK element above which specifies a style sheet to be used. but it is easier to use an HTML editor like Arachnophilia since it displays the tags with different colors than the text is displayed in. . See the section called "Setting Document Style" for more information about style sheets. You can edit HTML using a standard editor.

HTML Header The Header The header contains several notable items which include: 1 doctype . 3 meta name="keywords" . I concluded that this is the same as . The three document types that are recommended by the World Wide Web Consortium (W3C) are: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. 4 title .This gives a description of the page for search engines.This line sets keywords which search engines may use to find your page. however by using HTML validators for testing. tags.01//EN">This implies strict adherence with HTML 4 standards. charset=iso-8859-1"> <meta name="GENERATOR" content="Arachnophilia 3. It has no ending tag. 2 meta name="description" .01 Transitional//EN"><html><head> <meta http-equiv="Content-Type" content="text/html. The header in our example document: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.Defines the name of your document for your browser. commands"> <title>The CTDP HTML Guide</title><link href="style.This gives a description of the type of HTML document this is.9"> <meta name="description" content="Comprehensive Documentation and information about HTML."> <meta name="keywords" content="HTML. Some documentation claims this sets strict adherence with HTML 4 standards. 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">This supports frameset tags.css" rel="stylesheet" type="text/css"></head> The <!DOCTYPE> Line The <!DOCTYPE> line is used to define the type of HTML document or page.

reply-to . SCRIPT . Supports the TARGET attribute in frame and transitional document type definitions.01//en". 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Therefore it is best if you use the upper case values as in the example above. Elements in the Header Elements allowed in the HTML 4.Used to set relationships of other documents with this document. This attribute is . Note: I have noticed that capitalization is important in the document type declaration.0 transitional standard is: ISINDEX (Depreciated) .Allows a single line of text input. It has no ending tag.The browser will reload the document after the specified seconds specified with the CONTENT value have el lapsed. Ex: <META HTTP-EQUIV=refresh CONTENT=45> expires .Defines the base location for resources in the current HTML document. LINK . It does not support frames.01//EN" is "-//w3c//dtd html 4.Used to embed a style sheet in the HTML document. The additional element allowed by the HTML 4.Used to set specific characteristics of the web page and provide information to readers and search engines.Used to embed script in the header of an HTML document.Gives the date that content in the document is considered unreliable. The <META> Element The <META> element is used to set specific characteristics of the web page and provide information to readers and search engines. Not all validators will recognize lower case when the text "-//W3C//DTD HTML 4.Possible values are: refresh .1 Transitional with frameset support. Use the INPUT element rather than ISINDEX.0 strict HEAD element are: BASE .Sets the document title. META .A an email address of the responsible party for the web page.01 Transitional//EN">This is used to support depreciated HTML 3. Attributes http-equiv . TITLE .2 features. STYLE .

then any relative links on the copied page will try to link to the http://ctdp. Ex: <META NAME=description CONTENT="The CTDP Home Page"> copyright .An explanation of the page or its use.com/websites.not commonly used. These keywords are used by search engines.com page and you may get the "file not found" error from your browser. date . If you copy the websites page from the CTDP website at http://ctdp. computers.The person who made the page or the HTML editor name . scheme . Ex: <META NAME=copyright CONTENT="Copyright 2000.com"> Ex: <META HTTP-EQUIV=reply-to name . it gives the web page a much greater chance of being found than just having the separate keywords "computer" and "documentation". Inserting the <base> tag into the copied page will fix the problem.tripod.A copyright notice for the page.html.com/websites. The <BASE> Element This element defines the way relative hyper links are handled in the body of the document.Specifies a property's value such as the content of this document is text/HTML. <base href="http://www. documentation.A list of keywords which are separated by commas. Possible values are: author .Names a scheme to be used to interpret the property's value.yourwebserver. Ex: <META NAME=author CONTENT="Mark Allen"> description . Mark Allen"> keywords .html to your website at http://yoursite. CONTENT="ctdp@tripod. If someone enters the phrase "computer documentation" when doing a search.tripod. It has no ending tag. computer help"> This section is very important if you want your web page to be found by search engines.org/"> . Please note that keywords are separated by commas.Provides non-critical information about the document possibly useful to someone looking at it. EX: <META name="keywords" content="computer documentation.com page rather than the http://yoursite. It supports the TARGET attribute in frame and transitional document type definitions.<META name="date" content="2000-05-07T09:10:56+00:00"> content .yourwebserver.comptechdoc. used by search engines at times to provide a page summary. Only one BASE element may exist in the header. not spaces and that the words "computer documentation" are treated by search engines as one word.

Relationship from the linked resource to the document.Describes the expected content of the resource the link points to.The new page will load in the same window that the link is in.html" on this page. the user's web browser would look for the file in "http://yoursite.The new page will load in the parent frame or window. An example is "ISO-8859-1". and text/javascript. next. MEDIA .The web linked page loads in a new window and does not name the window. text/html. aural. The <LINK> Element Used to set relationships of other documents with this document. help. print. Typical values include application/java. contents.The new page will load into the top window reguardless of how many framesets deep the link is embedded.0 transitional standard is: TARGET . start. section.html" which would not exist unless it were also copied over and placed at the same relative location on your website. bookmark. REV . prev. If the link is in a frame. TYPE . Possible values include all.yourwebserver. appendix. it will load inside the frame. _blank . An additional attribute allowed by the HTML 4.Specifies the frame target the referenced page will be put into. Attributes: CHARSET . copyright. Possible values of REL and REV include alternate. REL .css" rel="stylesheet" type="text/css"> .The location and name of the resource. For example a style sheet that is used to control element style (as in the above example) may be defined with this element. _top .0.Without this tag.com/linux/index.Describes the expected language. If a window by that name does not exist. braille. image/jpeg. text/css. projection. chapter.Describes the type of display the content is designed for. glossary.2 is not supported by HTML 4. The target may me a named window or one of the special reserved names below. stylesheet. An example value is "en" for English. _self . HREFLANG . tty. and tv. HREF . If the target is a named window that exists the web page the link points to will be loaded into that window. An example: <link href="style. index. screen. a new window with that name will be created. _parent . This is the default target.The character encoding of the link.Relationship to the linked resource. and subsection. if there were a relative link to "linux/index. The value "made" supported by HTML 3. handheld.

The <STYLE> Element This element is used to embed a style sheet in the HTML document. TYPE .The content type.The script will not be parsed until the document is loaded. but an external file is loaded. An example: <title>The CTDP HTML Guide</title> The <SCRIPT> Element Used to embed script in the header of an HTML document.The external location where the script may be.The <TITLE> Element The text between the <title> and </title> tags is the title of the document. TITLE . DEFER . SRC .Same as described in the LINK element above. Attributes: CHARSET .Describes the name of the script language.Describes the content type of the script language. Attributes: MEDIA . The style sheet information is embedded between the <style> and </style> tags. In this case the script in not includes in between the SCRIPT tags. If this element is used an external style sheet is not used as can be done using the LINK element. above. . LANGUAGE .The style sheet title TYPE .The character encoding of the script such as "ISO-8859-1".

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. </body> - Designates the end of the body. 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

Setting a background image on the page
To set up a background on the web page use a BODY statement with the BACKGROUND attribute defined as follows: <body text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#000080" alink="#FF0000" background="clouds.gif"> This method is depreciated and authors are encouraged to use style sheets.

HTML Frames
Frames can be used to split a web page so you can load multiple HTML files or pages into one web page. This will cause the web browser to display multiple pages at one time. A common example of this technique which I like to use is to display an index of a document on the left side of the browser window with descriptions and links so when the reader clicks on the link, that page is displayed on the right side of the browser window. Using frames may be a bit complicated at first for those new to HTML, so you may want to skip this section or skim it, then come back to it when you want to create frames in your HTML documents.

Important Note about Frame use

Should you decide to use frames on your web page, you should be aware of some things. Not all browser and webcrawler programs support frames. This is especially important with regard to webcrawlers since, if your pages are not browsed by webcrawlers, search engines may not log your pages for those searching for your subject material. Therefore, you should utilize the NOFRAMES tag described below to support frames. In your file that contains the FRAMESET, you may support this by including a copy of your index body in the NOFRAMES section. Also, to support users that can't see frames, you should put a link at the top and bottom of the page that allows them to get back to your main index or home page. The Frameset DTD must be specified on the first line as in the below example rather than the strict or transitional DTD in order to support frames. 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">

networking. tcp. firewall. above) to Transitional.9"> <meta name="keywords" content="Documentation. It will divide the space evenly between frames if multiple frames are specified with the asterisk. IP.html"></frameset></html> Notice that in this example there are initially no <body> tags.*" frameBorder="0" frameSpacing="4"><noframes><body><p>You should include HTML here to support webcrawlers and browsers that don't support frames.<META NAME="FORMATTER" CONTENT="Arachnophilia 3. protocol. routing. EX: ROWS="10%". Notice that there is no </frame> to end the FRAME element. it is set to Frameset in order to support frames. howto. The only <body> tags occur inside the NOFRAMES section which supports browsers that are not frames capable. The <frame> tags are used to define each element in the FRAMESET. protocols"> <title>The CTDP HTML Guide</title><head><frameset border="1" cols="200. firewalls.Used to divide the browser window into separate frames that can display multiple documents ROWS="10" .html"><frame name="right" src="htmlintroduction. . routers. and set your wallpaper and colorsin the BODY statement above the same as you would in your index file. udp.Splits the window vertically into a number of rows specified by one of: A number of rows. A percentage of the total window height. masquerade. You should also note that rather than setting the document type (in the first line.</p></body></noframes><frame name="left" src="htmlindex. You may want to include a second copy of your index. The <body> tag is replaced by the <frameset> tags. information. An asterisk means the frame will occupy all the remaining space. masquerading. rarp. arp. Tags and associated attributes for FRAMES <FRAMESET> .

. The <BODY> and </BODY> tags which define the BODY element are normally inside the <NOFRAMES>.Used to end a frameset. It provides an alternate body in documents that are FRAMESET documents.html" . with AUTO as the default.Used to specify the name of a script to run when the document exits. The choices are YES or NO.The number pixels to left on the right and left side of a document in a frame.Defines the name of the frame.Keeps this frame from being resized with the mouse. An asterisk means the frame will occupy all the remaining space.Specifies a frame to be placed inside a FRAMESET. slightly more complicated example is: <frameset rows="10%. FRAMEBORDER="NO" . It will divide the space evenly between frames if multiple frames are specified with the asterisk. SCRolliNG .The number of pixels left above and below a document that is in a frame. FRAMEBORDER .Specifies the location or the URL (Universal Resource Location) of the document that will be placed in the frame.Used for web browsers that don't support FRAMESETs. BORDER="5" .Used to specify the name of a script to run when the document is loaded.ColS="10" .(Depreciated) The size of the frame border in pixels. FRAMESPACING="12" . </FRAMESET> . <NOFRAMES> . and auto.Ending tag for the NOFRAMES element. Possible values are YES. MARGINHEIGHT="5" . no.Determines if the frame can use a scroll bar if it exceeds the size of the available area on the browser.Specifies the possible existence of scrollbars in a frame. NAME=left .html"> .(Depreciated) Defines whether a border for the frames should be displayed.Determines if there is a visible border for the frame. NORESIZE . The possible values are 0 and 1 with a default value of 1. SRC="htmlindex. the name of the frame is "left". This will be used in A (anchor) references later to place various content into the frame.. *"> <frame name="top" src="topselect. </NOFRAMES> . <FRAME> .</NOFRAMES> tags.(Depreciated) Defines the space between the frames in pixels. SCRolliNG="AUTO" . EX: ColS="10%". ONLOAD .Splits the window horizontally into a number of columns specified by one of: A number of columns.A frame long description. and AUTO.. Possible values are yes. A percentage of the total window width. LONGDESC . ONUNLOAD . NO. MARGINWIDTH="10" . In this case. Another example Another.

you will need to use anchor links to direct the contents of HTML files to them. The second frame set divides the rest of the window (90%) into four sections. The first divides a top section and a bottom section. This allows the user to control the contents of the right side of the browser with the index file.html"> <frame name="mleft" src="mleft.html" target="right">HTML Document Structure</a> In my first example. A sample abbreviated index file is listed below: <head> <meta http-equiv="Content-Type" content="text/html.<frameset cols="10%. and each of the other three sharing 30%. The anchor statements shown above are placed in the file called htmlindex.9"> <title>The CTDP HTML Guide</title></head><body><h3>HTML Index</h3><hr><ol><li><a href="htmlintroduction. the first composing the leftmost 10%. full of anchor links. I defined a frame with the name "right". This is done using the TARGET attribute with the anchor tag as follows: <a href="htmlstructure.9"> <meat name="FORMATTER" CONTENT="Arachnophilia 3.html which resides on the left side of the browser window. charset=iso-88591"> <meta name="GENERATOR" content="Arachnophilia 3. How to get new information into the frame To make frames useful. 30%"> <frame name="leftbar" src="myindex.html"> <frame name="mright" src="mright. which resides in the left side of the browser window. 30%.html"> <frame name="mmiddle" src="mmiddle. 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.html"> <frameset></frameset> This example uses two framesets.html" target="right">Introduction</a><h3>Structure</h3> . 30%.

gif" alt="Home" vspace=3 border=0 height=33 width=115<a></center></body></html> .html" target="right">HTML Document Structure</a><li><a href="htmlhead.status=''.html" target="_top" onMouseOver="window.status='To Computer Tech Home Page' ..html" target="right">The Body Section<a><li><a href="htmlframes.return true"><img src=".<li><a href="htmlstructure./greenhomebutton.html" target="right">Headers and Paragraphs<a><li><a href="htmllists./index.html" target="right">Using Frames</a><h3>Layout Mechanisms<h3><li><a href="htmlparagraphs.return true" onMouseOut="window.html" target="right">The Header Section</a><li><a href="htmlbody..html" target="right">Lists</a><li><a href="htmltables.html" target="right">Tables</a></ol><center><a href=".

Elements that support providing a list of items. H5.Include a line break before and after the element. List Item . when using HTML and style sheets that HTML elements are categorized into several categories. A container allowing specific style to be added to a block of text. Block HTML Elements A block with centered contents is definedName ADDRESS BLOCKQUOTE CENTER DIV DIR FRAMESET H1. Headings Horizontal rule An input prompt for a single line of text Alternate content for browsers that do not support frames.Included with the text as part of a line.Should not contain other block elements including tables. Some style properties apply to some categories of elements and not to others. but may contain list elements for the Comment Depreciated - . Inline . H3. List item elements are block level elements. H2. Alternate content for browsers that cannot run script programs Paragraph . H6 HR ISINDEX NOFRAMES NOSCRIPT P Description Supplies contact information document Used to quote in block form Depreciated A container allowing specific style to be added to a block of text. H4. A container allowing multiple frames (HTML documents) to be placed on a web browser. The following types of elements exist: Block .Categories HTML Guide Contents Page HTML Element Categories It is important to be aware.

Used to indicate deleted content Inline frame Marks inserted content Establishes an image map to be used with an IMG or OBJECT element Used to include applets. List-item Elements Name DIR DL LI OL UL Description Directory List Definition List List Item Comment Depreciated - Ordered (numbered) List Unordered List Block/Inline HTML Elements The elements in this list may be considered block or inline elements. client. with spaces and Includes table sub elements - Used to present an ordered set of data. Purpose Phrase Phrase Comment (Depreciated) Both a block inline element (Depreciated) Both a block inline element and and . reset. Table subelements work as block elements. images. depending on how they are used.PRE TABLE FORM Preformatted text is rendered carriage returns as typed. videos and sound on the web page. They are considered inline elements if used inside a paragraph (P) or another inline element. Form List item elements are also considered to be block elements. or push button. -Name APPLET BUTTON DEL IFRAME INS MAP OBJECT Description For placing Java applets in the page. Used to define a FORM submit. Used to present a form to the subelements work as block elements.

Denotes information typed from the keyboard. Phrase Phrase Phrase Phrase Font Phrase Phrase Font Phrase Font MAP Comment Depreciated (Depreciated) Depreciated - . - - Inline HTML Elements Name A ABBR ACRONYM AREA B BASEFONT BDO BIG BR CITE CODE DFN EM FONT I IMG INS KBD PARAM Q S SAMP SMALL Description Anchor Denotes an abbreviation Denotes an acronym. Sets text size to small a graphical Purpose Phrase Inside the element Font Font Treated special by style sheets. Denotes computer program code. Define a map region in an image. Denotes emphasis Allows font changes. Used for short quotations Strike through text Denotes a sample. Sets size of text to big Break Used to mark titles of articles or other publications.SCRIPT Defines a script to be run on the client computer. Sets text to italics Allows placement of image in the page. Denotes inserted text. Used to add additional parameters to the object or applet elements. Denotes a definition. Bold Allows font changes Overrides text direction with values of ltr (left to right) or rtl (right to left).

Sets text to have a line struck through it Denotes Subscript Superscript A form for multiline text input. Font Phrase Font Font Phrase Depreciated - HTML Guide Contents Page . Sets text style to monospaced teletype Sets text underlined Denotes a variablein a program.SPAN STRIKE STRONG SUB SUP TEXTAREA TT U VAR A container used to set special style to specific areas of the page.

INPUT. Inline . BUTTON.Included with the text as part of a line. SELECT. In HTML there are specific rules with regard to what elements a specific element may contain. The two main types of element categories are: Block . IFRAME. LABEL. See the section called "HTMLElement Categories" for a list of block and inline elements with short descriptions. For example some elements may only be contained in the HEAD header element. block elements none inline elements excluding A. block elements inline elements inline elements inline elements .HTML Elements HTML catagorizes elements into specific categories. The paragraph element may not contain block elements. inline elements block elements none inline elements none none inline elements inline elements block elements.Include a line break before and after the element. The table below lists elements and what they may contain: Name A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY BR BUTTON CENTER CITE CODE DD Contained Elements inline elements except A inline elements inline elements inline elements PARAM. SCRIPT inline elements. and TEXTAREA inline elements.

block elements inline elements LI excluding block elements inline elements. FRAMESET inline elements inline elements excluding LABEL inline elements inline elements. block elements. BODY. META. DT inline elements. block elements. block elements (MENU and DIR list items exclude block elements) none block elements. inline elements block elements LI OPTION . BODY inline elements. NOFRAMES inline elements BASE. block elements none inline elements. ISINDEX. block elements PARAM. AREA LI not containing block elements none inline elements.DEL DFN DIR DIV DL DT EM FIELDSET FONT FORM FRAME FRAMESET H1-H6 HEAD HR I IFRAME IMG INPUT INS ISINDEX HTML KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP inline elements. TITLE none inline elements inline elements. FRAME. SCRIPT. block elements none HEAD. block elements excluding BUTTON inline elements. STYLE. block elements DD. OBJECT. LINK. block elements inline elements inline elements. LEGEND inline elements block elements excluding FORM none FRAMESET.

FONT.TD none (text) none inline elements inline elements LI inline elements . OBJECT.http://www. SMALL.comptechdoc. BASEFONT.html (2 of 3)7/21/2003 7:44:47 AM HTML Elements OPTION P PARAM PRE Q S SAMP SELECT SCRIPT SMALL SPAN STRIKE STRONG STYLE SUB SUP TBODY TD TFOOT TH THEAD TR TEXTAREA TITLE TT U UL VAR none (text) inline elements none inline elements excluding APPLET.org/guides/htmlguide/htmlelement. SUP inline elements inline elements inline elements OPTION. BIG. block elements TR TH. IMG. block elements TR inline elements. OPTGROUP none (script program) inline elements inline elements inline elements inline elements none (A style sheet) inline elements inline elements TR inline elements. SUB.

(Depreciated) Sets the alignment of the paragraph with respect to the page size.End level 1 heading. The STYLE attribute is common to most HTML elements (See the "Common Attributes" section). H1 is the largest.Start heading of level 1. HTML Paragraph The paragraph element begins with the <P> tag and ends with the </P> tag. <p>This is a sample paragraph element.Sets the style or color of the text. This statement starts a paragraph with color. Heading attributes are the same as the paragraph attributes. Any text in a paragraph goes here.0 other than common attributes such as STYLE which are used to set color and position. Headings with numbers above the <h3> tag such as <h4><h5> and <h6> are not normally used since they are so small. Values are LEFT. Headings are always displayed as bold text (Unless modified using the STYLE attribute or style sheets). STYLE="font: 16pt courier" . No attributes are supported by strict HTML 4.HTML Headers and Paragraphs HTML Headings There are 6 levels (H1 through H6). below. blue: <p style="color: green">. A sample is shown below. It should not contain tables and other block elements.</h1> .</p> Paragraph Attributes ALIGN="CENTER" . Paragraph Examples . <h1> . and CENTER. RIGHT.

font: '16pt'. they are green. courier. you may use the command "su" to become a "super user". Some systems also support the "sudo" command. When you did your Linux install you should have set a root password. You may have also created a user with a password.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html.This is the HTML code for a paragraph demonstrating use of the STYLE attribute along with the SPAN element. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set. Therefore to log in. they are green</span>. which allows administrative privileges on a command by command basis. <p style="text-align: 'center'. but if you look at the trees.</p> This is how it looks: The color of the sky is blue.</p> . If you logged in as a normal user and know the root password and want to use administration commands. but if you look at the <span style="color: 'green'">trees. 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."><title>The CTDP Linux User's Guide</title></head><body><center><h1>Logging in. you should see a login prompt on your monitor.9"><meta name="description" content="Comprehensive Documentation and information about Linux. color: 'blue'">The color of the sky is blue. This effect is produced using the <SPAN> element with the STYLE ="color: 'green'" attribute set. and Shutting down</h1></center><h3>Logging in</h3><p>Once you have completed your system install and booted your system. charset=iso-8859-1"><meta name="GENERATOR" content="Arachnophilia 3. Logging Out. you will want to type the name of a user or "root" for the login name and enter the appropriate password.

If you have logged in. the following line: Many systems are set up to capture the &#60CTRL&#62&#60ALT&#62&#60DEL&#62 keystroke combination to issue the shutdown command through the init program. at the top of the page. The second will reboot the system in 10 minutes and send the message to all users. P.</h1>. Logging Out. This can also be done with the following code using the STYLE attribute which conforms to HTML 4. The third command will shut the system down and do a reboot at 1:00 in the afternoon. and Shutting down</h1> .. <h1>. you may need to type "exit" until your SHLVL environment value is 1. there is a <blockquote>. <h1 style="text-align: 'center'">Logging in. 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.</blockquote> element embedded."indent" { margin-right: '5%'. margin-left: '5%'. as follows. Examples of using the shutdown command are shown below. 2 In the last paragraph. Then you can type "logout" to exit your session. appears as follows when displayed on the web browser: Many systems are set up to capture the <CTRL><ALT><DEL> keystroke combination to issue the shutdown command through the init program.</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. causes the contents of the element to have the attributes declared for that class.01 by not using depreciated attributes. color: '#0000ff' } This defines a class called ""indent"" with specific margin characteristics and color which. Although this works. These special characters are listed in the section on text formatting. 1 In the last paragraph. Not only should it be done using style sheets.<h3>Logging out</h3><p>Use the command "logout" to exit a given session.. 3 The <center> and </center> tags are used to center the header. The style sheet should contain: 1 .. Many systems are set up to capture the &#60CTRL&#62&#60ALT&#62&#60DEL&#62 keystroke combination to issue the shutdown command through the init program. This will work on most systems if the root user is logged in. when defined in the starting <P> tag.<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 use of BLOCKQUOTE inside the paragraph element. is also not proper. This is because there are characters with special meaning in HTML and since HTML uses the < and > characters to set up tags. the use of BLOCKQUOTE in this instance is improper. there are a few things worth noting here.</p></body></html> Although this document is about paragraphs and headers. then typed "su" to become a super user or another user. The "exit" command will take you back to previous shell levels. there must be a special character combination to display them so they are not used as part of a tag..

the tenth letter in the alphabet. START="3" .<li type="1">This is the number 11. Values are A for capital letters. 4 This is the letter J.(Depreciated) Specifies value the list starts with.<li style="list-style-type='decimal'">This is the number 11. If the type is set to "A" and start is set to "3". </OL> . TYPE="A" . 3 This is the Roman number for 7. 1 for numerical integers. a for small letters. "V".Definition List Directory and menu lists are depreciated. This value must be a numerical value.Unordered list DL . the list will start with the letter "C". Default is "1".<li>This is the Roman number for 7. Default is "1". the third letter of the alphabet.3. the tenth letter in the alphabet.Designates a new value for the list item which affects this value and those listed below it. i for small Roman numerals.(Depreciated) Designates the numerical label type for use in the list.(Depreciated) The list is displayed with less room between elements. a for small letters. 5 This is the number 11.<li>This is the Roman number for 12. 2 This is the Roman number for 6. 6 This is the Roman number for 12. i for small Roman numerals.2.<li>This is the Roman number for 6. COMPACT .</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. This value must be a number such as 1.</ol> And this is how it looks: 1 This is the Roman number for 5.0 supports three types of lists which are: OL .4. . VALUE="5" .<li style="list-style-type='upper-alpha'" value="10">This is the letter J. <LI> .HTML Lists HTML 1 2 3 4.Designates an item in the list.Designates the end of an ordered list.<li>This is the Roman number for 12.Ordered list UL . 1 for numerical integers.<li>This is the Roman number for 7.<li>This is the Roman number for 6.Designates the numerical label type for use in the list. the tenth letter in the alphabet. If this value is set to "5" and the type is "I" the listed value will be the Roman number 5. Ordered Lists Tags and Attributes <OL> . etc and causes the first or current item of the list to begin with that value. I for large Roman numerals.<li tyle="A" value="10">This is the letter J. Ordered List Example This is the HTML Code using depreciated attributes: <ol type="I" start="5"><li>This is the Roman number for 5. I for large Roman numerals.Designates the start of an ordered list TYPE="1" . Values are A for capital letters.

TYPE=SQUARE .<li>Item 5.<li>Item 6.</ul> This is the HTML Code using style attributes: <ul style="list-style-type='square'"><li>Item 1.(Depreciated) The list is displayed with less room between elements.Designates the start of an unordered list TYPE=DISC . it is probably because your browser is too old to support these type shapes which were added with HTML 3.2.<li>Item 5.Designates the shape used for the bullet. Item 3.<li type="disc">Item 4. Item 4. Values are CIRCLE.<li>Item 2.Designates an item in the list. Unordered List Example This is the HTML Code using depreciated attributes: <ul type="square"><li>Item 1. The default of the first embedded list is CIRCLE. If these items show up as the same on your browser.<li style="list-style-type='disc'">Item 4. </UL> .<li>Item 3.<li>Item 3. Item 6.<li>Item 2. <LI> .Designates the end of an ordered list.<li>Item 6. .</ul> And this is how it looks: Item 1. and SQUARE.Unordered Lists Tags and Attributes <UL> . Item 2.Designates the shape of the bullet for this item. DISC. COMPACT . Item 5.

Designates a definition to go with the definition term.(Depreciated) The list is displayed with less room between elements.Designates a definition term. <DD> . <DT> . </DL> . Definition list example This is the HTML code: <dl><lh>Team Members <dt><b>Team Leader</b> <dd>Sarah Smith <dt><B>Programmer</b> <dd>Jim Jenkins <dt><B>Engineer</b> <dd>Jeff Jones <dt><B>Technician</b> <dd>Bill Brown</dl> And this is how it looks: Team Members Team Leader Sarah Smith Programmer Jim Jenkins Engineer Jeff Jones Technician Bill Brown .Designates the start of a definition list. COMPACT .Definition Lists Tags and Attributes <DL> .Designates the end of a definition list.

CELLPADDING="3" . box.Defines how many columns are in the group. RULES="ROWS" . CHAROFF .Turns on lines around elements of tables. The character the cell is to be aligned to.Designates the start of a table. or right. SPAN . vsides (top and bottom). This works on some web browsers.Sets the width of the table on the page in pixels or a percent of the page from 1% to 100%. DATAPAGESIZE="20" .HTML Tables HTML Tables are arranged up and down by rows and left and right by columns which are filled by data cells. char (Aligns the cell contents on the character specified by the CHAR attribute). COLS. Attributes: ALIGN . or void.Determines which ot the table outer borders are visible. Does not have a closing tag.Possible values are center. .Sets the amount of space in pixels between the cells that are in the table. left. right. BORDER="5" . Tags and Attributes <TABLE> .Sets a background image like a wallpaper to be used in the table.The reason for the table. ROWS. BGCOLOR="#0000FF" . border. The default is NONE. FRAME .Alignment character for cells. SUMMARY="To compare values" . WIDTH="50%" .Sets the space in pixels between the edges of each cell and the contents of the cell. ALIGN="left" . CHAR . hsides (left and right). lhs (left only). A cell may be specify to occupy one or more table rows or columns. BACKGROUND="flowers. and justify. CELLSPACING="2" . Use after CAPTION and before THEAD. below. Default is a period. The default is 0.Sets the width of the table border in pixels.Depreciated Sets the table alignment. Possible values are left. center. <CAPTION> . Possible values are above. or ALL.Offset alignment character.Depreciated Sets the background color of all cells unless otherwise specified in a table row or table data cell definition.gif" .Must be first in the table before other elements. rhs. GROUPS (borders between rows). <COLGROUP> .Sets the table up in column groups essentially dividing one or more columns into several groups.Can be used to set the size of a table page when the length of the table may exceed content that can fit on one page. Must have the </CAPTION> closing tag. Possible values are NONE.

The character the cell is to be aligned to.Offset alignment character.Values are column.A list of header cells separated by spaces that define the headers that apply to the TH element. The default is LEFT. CHAROFF . HEIGHT Depreciated . bottom. right.Sets horizontal alignment of the contents of the cell as LEFT. Default is a period. left. <THEAD> ALIGN .Possible values are center. or BOTTOM.Sets the number of columns this cell will occupy. CHAR .Values are baseline. Table headers use the same attributes as data cells. <TH> .Alignment character for cells. CHAR .Designates the end of a table header. ROWSPAN="3" .Sets the vertical alignment of the contents of the cells in the row as TOP. and justify.Alignment character for cells.Alignment character for cells. and top. HEADERS . or CENTER.Values are baseline. row. and top. left.Sets the number of rows this cell will occupy. right. COLSPAN="2" . WIDTH="10%" . ALIGN="RIGHT" . and justify. bottom. <TR> . middle. Default is a period.Possible values are center. BGCOLOR="white" . and justify. CHAROFF .Values are baseline.Alignment character for cells.Possible values are center. WIDTH . Default is a period. The character the cell is to be aligned to. ABBR="SHORT" . NOWRAP="NOWRAP" . right. The default is MIDDLE. VALIGN . RIGHT.Offset alignment character.Depreciated Sets the background color of this cell. middle.A categorization of a table cell. bottom.Values are baseline. and top. and top.Depreciated Sets the width of this column of cells expressed as a percentage of the table width or as a number of pixels. <TBODY> ALIGN . CHAROFF .Depreciated Sets the data cell so the contents will not wrap to another line.Designates the start of a table row. CHAROFF . char (Aligns the cell contents on the character specified by the CHAR attribute). <TFOOT> ALIGN . AXIS . colgroup. MIDDLE. SCOPE . VALIGN . This is a list of categories separated by commas. CHAR . VALIGN="TOP" . and rowgroup. .The column width in pixels or a percent of the table width.Offset alignment character.VALIGN .Designates the start of a table header. The character the cell is to be aligned to. Default is a period. bottom.Cell height in pixels. The character the cell is to be aligned to. CHAR . left.Offset alignment character. middle.Text is entered for this attribute that contains a short version of the cell content for when space is limited. char (Aligns the cell contents on the character specified by the CHAR attribute). char (Aligns the cell contents on the character specified by the CHAR attribute). </TH> . VALIGN . middle.

BGCOLOR="blue" . COLSPAN="2" . The character the cell is to be aligned to. CHAROFF .Sets the vertical alignment of the contents of the cells in the row as TOP.ALIGN="CENTER" .Depreciated Sets the data cell so the contents will not wrap to another line. AXIS . SCOPE . CHAR .A categorization of a table cell. Default is a period. colgroup. row.gif".Sets the number of rows this cell will occupy. The default is MIDDLE. Default is a period. MIDDLE.Offset alignment character. This is a list of categories separated by commas.Sets horizontal alignment of the contents of the cell as LEFT. or CENTER. The default is LEFT. and rowgroup. VALIGN="TOP" . or CENTER.Values are column. </TR> . MIDDLE. BGCOLOR="white" . This works on some web browsers. or BOTTOM. ABBR="SHORT" .Sets a background image like a wallpaper to be used in the cell. </TABLE> . WIDTH="10%" . RIGHT.Alignment character for cells.Designates the end of a table. The default is MIDDLE. NOWRAP="NOWRAP" . VALIGN="TOP" .Alignment character for cells.gif" .Depreciated Sets the width of this column of cells expressed as a percentage of the table width or as a number of pixels. CHAROFF .Sets a background image like a wallpaper to be used in the row. HEIGHT Depreciated .Designates the start of a table data cell.Sets the vertical alignment of the contents of the cells in the row as TOP.Designates the end of a table row.Depreciated Sets the background color of cells that are contained in the row. <TD> . The character the cell is to be aligned to. </TD> . An example table This is the HTML code using depreciated attributes: . This works on some web browsers.Offset alignment character.Sets the number of columns this cell will occupy. RIGHT. or BOTTOM.Cell height in pixels.Sets horizontal alignment of the contents of the cells in the row as LEFT. BACKGROUND="ice. The default is LEFT.Depreciated Sets the background color of this cell. ROWSPAN="3" . CHAR . ALIGN="RIGHT" .A list of header cells separated by spaces that define the headers that apply to the TH element.Designates the end of a table data cell. BACKGROUND="ice. HEADERS .Text is entered for this attribute that contains a short version of the cell content for when space is limited.

COL 1-3</td></tr><tr style="text-align='center'. COL 1-3 ROW 3. backgroundcolor='#B0B0FF'"><td>ROW 1. COL 2 ROW 6. COL 2 ROW 5. COL 12</td><td>ROW 3. COL 3</td></tr><tr style="text-align='center'. COL 1 ROW 1. background-color='#B0B0FF'"><td colspan="2">ROW 3. COL 3 . background-color='#B0B0FF'"><td rowspan="3">ROW 4-6. COL 1-3</td></tr><tr align="center" bgcolor="#B0B0FF"><td colspan="2">ROW 3. COL 2</td><td>ROW 4. background-color='#B0B0FF'"><td colspan="3">ROW 2. COL 1</td><td>ROW 1. COL 2</td><td>ROW 1. background-color='#B0B0FF'"><td>ROW 6. backgroundcolor='#B0B0FF'"><td>ROW 5. COL 2</td><td>ROW 6. COL 3</td></tr><tr align="center" bgcolor="#B0B0FF"><td>ROW 6. COL 1</tdD><td>ROW 4. COL 2</td><td>ROW 5. COL 2</td><td>ROW 4. COL 3</td></tr><tr align="center" bgcolor="#B0B0FF"><td>ROW 5. COL 2 ROW 1. COL 3 ROW 4. COL 3 ROW 6. COL 3</td></tr><tr style="text-align='center'. COL 2</td><td>ROW 5. COL 2</td><td>ROW 6. COL 2 ROW 3. COL 3 ROW 5. COL 3</td></tr><tr style="text-align='center'.<table cellspacing="5"><tr align="center" bgcolor="#B0B0FF"><td>ROW 1. COL 1</tdD><td>ROW 4. COL 1 ROW 4. COL 3</td></tr><tr align="center" bgcolor="#B0B0FF"><td rowspan="3">ROW 4-6. COL 1</td><td>ROW 1. COL 3</td></tr><tr style="text-align='center'. COL 2</td><td>ROW 1. COL 3 ROW 2. COL 3</td></tr></table> This is how it looks: ROW 1. COL 3</td></tr><tr align="center" bgcolor="#B0B0FF"><td colspan="3">ROW 2. COL 1-2</td><td>ROW 3. COL 1-2 ROW 4-6. COL 3</td></tr></table> This is the HTML code using style attributes: <table cellspacing="5"><tr style="text-align='center'.

This table sets the row colors independently for effect rather than setting the background color for the entire table. Will find every file under the directory /usr ending in ". The THEAD and TFOOT tags may be optionally used one time inside a TABLE element. 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.spec".spec". This is how it looks: This is a list of example Linux commands find /home -user mark find /usr -name *spec find /var/spool mtime +40 Will find every file under the directory /home owned by the user mark.</td></tr><tr><td nowrap="nowrap">find /var/spool -mtime +40</td><td width="20"></td><td>Will find every file under the directory /var/spool that has data older than 40 days. . NOWRAP.<td><tr></table> The HTML attributes. and WIDTH are depreciated but I can't get the style attributes of WHITESPACE and BORDER-WIDTH to work here as replacements. Another example table This is the HTML code: <tr><th colspan="3"> This is a list of example Linux commands</th></tr><table rules="rows"><tr><td nowrap="nowrap">find /home -user mark</td><td width="20"></td><td>Will find every file under the directory /home owned by the user mark. in many cases it may not be used. Will find every file under the directory /var/spool that has data older than 40 days.</td></tr><tr><td nowrap="nowrap">find /usr -name *spec</td><td width="20"><td><td>Will find every file under the directory /usr ending in ".

ID attribute Used as a unique identifier for elements for style sheets.indent { margin-right: 5%. In HTML page: <hr id="firsthr"> In style sheet: hr#firsthr { color: #80b0ff. color: #0000ff } STYLE attribute Used to set various element attributes to specific values. These attributes allow additional setting of style or other characteristics to the element.HTML Attributes Common attributes are applicable to many or most HTML elements. Example: <h1 style="text-align: center">Common Attributes</h1> . The attributes outlined on this page are common in many HTML elements. height: 15. margin-left: 5%. 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: .

lang="en" 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.TITLE attribute A tool tip on visual browsers. Elements that use reserved attributes: BUTTON DIV INPUT OBJECT SELECT SPAN TABLE TEXTAREA The reserved attributes are: datasrc .Specifies how the data is to be formatted with possible values being "html" or "text". .Specifies the source of data using a URI. dataformatas .Specifies a column or property name. datafld . Reserved attributes may be used to bind HTML documents to XML documents. LANG attribute DIR attribute An international attribute which is used to set the international language type.

This is very rarely used.(Depreciated).Used to format a block of text as a long quote indented more than the surrounding text on the left and the right.Used to direct the browser to display a section of text exactly as it is typed with spaces included.ro :/dev/cdrom fl -fstype=auto :/dev/fd0 .misc" adding lines like:<pre> cd -fstype=iso9660. PRE element example The PRE element is handy for showing program code or part of file content as in this example.ro :/dev/cdrom fl -fstype=auto :/dev/fd0</pre> This is how it looks: Edit the file "/etc/auto.misc" adding lines like: cd -fstype=iso9660. blockquote . Besides paragraphs. This is the HTML code: Edit the file "/etc/auto. here are two main commands for managing text in block form. pre . there are many ways to format text in HTML.HTML Formatting As you may have seen already. The WIDTH attribute specifies the number of characters across the screen to display. The PRE element PRE element attributes WIDTH="20" .

promote the general Welfare.The BLOCKQUOTE element This element may contain other block elements such as headers . preformat blocks and tables. provide for the common defence. and secure the Blessings of Liberty to ourselves and our Posterity. in Order to form a more perfect Union.</blockquote> This is how it looks: The preamble of the Constitution says: We the People of the United States. provide for the common defence. do ordain and establish this Constitution for the United States of America. do ordain and establish this Constitution for the United States of America. Attribute: cite="uri" . The following code will produce the same effect using style sheets. It should not be contained inside a paragraph element. promote the general Welfare. in Order to form a more perfect Union. In the HTML file: <p>The preamble of the Constitution says:<BR></p> . insure domestic Tranquility. Style sheets should be used possibly with the CLASS attribute to create indentation. establish Justice. BLOCKQUOTE element example This is the HTML code: <p>The preamble of the Constitution says:<br></p><blockquote>We the People of the United States. paragraphs. insure domestic Tranquility. It should not be used to produce indentation. establish Justice. and secure the Blessings of Liberty to ourselves and our Posterity.Specifies the URI of the source of the quote.

indent { margin-right: 5%. in Order to form a more perfect Union. color: #0000ff } . promote the general Welfare. do ordain and establish this Constitution for the United States of America.<p class="indent">We the People of the United States. margin-left: 5%. insure domestic Tranquility. and secure the Blessings of Liberty to ourselves and our Posterity. establish Justice.</p> In the style sheet: . provide for the common defence.

.(Depreciated). width: '50%'"> Here's how it looks: http://www.(Depreciated). blue. Below the line. Here are the same two lines as they are written with a <br> tag. A boolean value to set the line to a solid line. red.comptechdoc. is set according to the defaults or the style sheet associated with this HTML document.Line break.<hr>Below the line.(Depreciated). SIZE=7 . ALIGN="RIGHT" . but may also be expressed in the #RRGGBB color format. The line. This is what you would see: This is line 1. This is what you would see: This is line 1.(Depreciated). etcetera. To change its characteristics. Sets the thickness or size of the line in pixels. Note: Attempting to change the line characteristics using depreciated attributes such as ALIGN. NOSHADE . Only the use of the STYLE attribute will override those values.<br>This is line 2. WIDTH. green. This is line 1. This is line 1. above. I only need to change the style sheet. The alignment is without purpose if the line width is 100%. Here is how it looks: Above the line. Here are two lines as they may be written without using a <br> tag.2 without embedded style commands and the bottom coding uses HTML 4. or COLOR will not override values set by the style sheet. An example using the HR element Here is how the <hr> tag appears as HTML code: Above the line. Sets the color of the line. The default is CENTER. HR .(Depreciated). It may be expressed as one of the words. WIDTH="50%" . or CENTER.01 with embedded style commands: <hr size="15" align="left" width="50%" color="blue"><hr style="color: 'blue'.html (2 of 3)7/21/2003 7:44:55 AM HTML Line Formatting .HTML Line Formatting There are several methods of managing lines which are: BR . This is line 2. text-align: 'left'. height: '15'.This is line 2. RIGHT. The default is 100%. Sets the alignment of the line on the page to LEFT. The HR element HR Element Attributes The HR element has no ending tag.This is line 2.Used to draw lines across the page The BR element An example of use of the BR element The BR element has no ending tag. Here's a colored line in HTML code (The top coding example uses HTML 3.org/guides/htmlguide/htmlformatline. Sets the width of the line across the page as a % or in pixels. Start a new line. COLOR="green".

Here's another colored line in HTML code (The second line uses style commands to set attributes rather than directly using some of the older attributes that are being depreciated): <hr size="15" align="left" width="100%" color="#FF0000"><hr style="height: '15'. text-align: 'left'. . width: '100%'"> Here's how it looks: Here's a line in white: Shucks! The background. color: '#FF0000'.

Denotes deleted text.small&#62.sub&#62. <strong>.</var> . tag</em><br>This is an example of the <i>&#60. <var>.Sets bold text.Sets larger than normal text.This is an example of the <small> tag.var&#62.Draws a line through the text as a "strikeout".Sets text in italics.u&#62.<br>This is an example of the <sup>&#60. tag</i>. SAMP . such as a computer command.This is an example of the <sup> tag.<br>This is an example of the <em>&#60..This is an example of the <TT> tag. <big>.Text to be typed at the keyboard. <small>.<br>This is an example of the <sub>&#60.Makes text smaller than normal.Mark a variable. The test is displayed in a mono spaced format.HTML Text Formatting There are many tags used to format text.Underlined text.</u> . DEL .This is an example of the <sub> tag..This is an example of the <strong> tag. tag</big>. <super>.</small> .<br>This is an example of the <u>&#60. . but does not work either with all browsers or all HTML versions. tag</u><br>This is an example of the <var>&#60. <strike>.Denotes inserted text KBD ..Denotes the definition of a term INS .. Other tags associated with text are: ABBREV . <em>.<br>This is an example of the <strong>&#60.em&#62. DFN .</i> .<br>This is an example of the <big>&#60.This is an example of the <strike> tag.tt&#62.<br>This is an example of the <small>&#60. This is an example of the <i> tag. tag </b>.</tt> .This is an example of the <em> tag. <u>.i&#62. Each of these tags require an ending tag..Quotation.</em> . <tt>.b&#62. tag<strong>.strike&#62.Author CODE ..sup&#62. tag</small>.<br>This is an example of the <tt>&#60. tag<sup>.</strong> . tag<tt>.Denotes program code and should be set in the same format as the PRE tag.Sets text in italics and denotes emphasis.</big> ..This is an example of the <u> tag.strong&#62.Monospaced typewriter font. Examples Here's the HTML code: This is an example of the <b>&#60..This is an example of the <big> tag. tag</strike>.</strike> ..big&#62.. PERSON Q .<br>This is an example of the <strike>&#60.This is an example of the <var> tag. <i>.</b> .Denotes an abbreviation ACRONYM AU . They are listed below: <b>.Denotes sample text.. tag<sub>.Same as bold but denotes strong emphasis.</super> -Superscript. tag</var><br> Here's how it looks: This is an example of the <b> tag.

Specifies default font size with a value between 1 and 7. If there is more than one font name separated by commas the first font that can be found is used.Ends the FONT element. The <FONT> element is used to set a section of text with a specific font.Used to set the default font size on the current page. COLOR="blue" .Begins the FONT element. .Sets the font size using a value.The FONT tag The font element is being depreciated and replaced by style sheet attributes. It uses the <FONT> tag to begin and the </FONT> for the end tag. <BASEFONT> . SIZE="4" . It can be specified with a "+n" value to set the size relative to the current size. SIZE="2" . </FONT> . The default value is 3.Sets the text color. FACE="roman" . between 1 and 7. FONT Attributes and Tags <FONT> .The font name to be used.

they are green</span>.HTML SPAN and DIV Elements There are a few elements that support additional formatting capabilities both for inline elements and block elements. The DIV element is very useful for adding certain block element style characteristics to inline or non-block elements. .0. Several paragraphs. but if you look at the trees. These include the DIV and SPAN element. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set. and lists may be contained inside the DIV element which is not possible using the paragraph elements. <p style="text-align: 'center'.html" target="_top">HTML Guide Contents Page</a></div> Here's the effect: HTML Guide Contents Page What is shown here is a simple. but if you look at the <span style="color: 'green'">trees. This is HTML code for an unordered list showing how to make the text and bullets a different color using the SPAN element. however the DIV element can be used to apply attributes to larger sections of the HTML page. Of course the came effect can be obtained by placing the anchor inside a paragraph element and setting the "textalign" value to "center". color: 'blue'">The color of the sky is blue. This effect is produced using the <span> element with the style ="color: 'green'" attribute set. The SPAN element is used in line with text to modify the characteristics of a small section of text. <ul style="color: 'red'"><li><span style="color: 'green'">Line 1</span><li><span style="color: 'green'">Line 2</span><li><span style="color: 'green'">Line 3</span></ul> This is how it looks: Line 1 Line 2 Line 3 This is the HTML code for a paragraph demonstrating use of the STYLE attribute along with the SPAN element. they are green. the CENTER element is being depreciated in HTML 4. Here is the code: <a href="index. For example. only the common attributes. The DIV Element This element is useful for adding style to elements that cannot have specific characteristics set otherwise without using depreciated attributes.</p> Here is how it looks: The color of the sky is blue.html" target="_top">HTML Guide Contents Page</a> Here is the effect: HTML Guide Contents Page The following code centers the anchor: <div class="center"><a href="index. font: '16pt courier'. and there is no inline element attribute in style sheets that allows the inline elements such as anchors and images to be centered. Therefore the anchor code that follows is not centered. The SPAN Element The SPAN element does not have any unique attributes. headers. short example.

. &#60. Character & © " > < ¢ £ ° ® ± × ÷ ¦ § ¹ ² ³ ½ ¼ ¾ Æ æ É é Description Ampersand Copyright Quotation Greater than Less than Cent Sterling pound Degree sign Trademark sign Plus/minus signs Name string &amp. &gt. &frac14. &#176. The string may be a name string or numeric string as in the table below. &sup3. &#177. &eacute. &#34. &quot. &#166. &lt. &#247. &#183. &sup1. &pound. &#174. &#168. &Eacute. &#215. &#201. &#185. Multiply sign Divide sign Broken vertical bar Section sign Superscript 1 Superscript 2 Superscript 3 1/2 fraction 1/4 fraction 3/4 fraction Capital AE Small AE Capital E accented Small e accented &sect. &#189. &#198. &sup2. &frac12. it is the proper standard to use the semicolon. &#188. Although these special characters may displayed without the semicolon at the end. &reg. &deg. &#179. &cent. &#178. &#167. &#163. &brvbar. &#162. &copy.HTML Characters There are some characters in HTML that must be displayed using a string of characters. &#233. &frac34. Numeric string &#38. &#62. &plusmn. &#230. &AElig. &aelig.

Two em units is twice the height of the font.Style Sheets Purpose of Style Sheets The purpose of style sheets is to separate the content of the HTML documents from their style.Defines the content type such as "text/css". and the text font./. print. centimeters (cm) or the (em). percentages (%). everything is scaled relative to the font so the scaling will remain the same regardless of the font used. Values include all. Size of margins can be set in inches (in). handheld. Inline . h3.body {background-color: "#ffffff".One style sheet may be imported from another by using the "@import" command in the style sheet that is performing the import. Therefore placement would be as follows: <html><head><title>Example Style Settings</title></head><style type="text/css"><!-.css" rel="stylesheet" type="text/css"> Importing . Although this is acceptable for specific elements whose characteristics must be different such as the color of a horizontal line. color: "#000000". background: url('. Example Embedded Style Sheet When setting document style. screen. place the STYLE element with the <STYLE> beginning tag and </STYLE> ending tag between the HEAD and the BODY elements.Defines the intended media the page will be displayed on. aural. The unit of em is the em is the height of the font. braille. text-decoration: none}--></style> Other settable parameters include: .Style information may be included with each individual element using the STYLE attribute which is common to all elements. color: #0000FF}h2. projection. color: #000000. Example: <link href="style././gifs/flowers. h4 {margin-left: -3%}p {font: 12pt roman. text-indent: 0.gif') } a:link { color: "#0000ff" } a:visited { color: "#7f007f" } a:active { color: "#ff0000" } h3 { color: "#600060" }--></style> Linking . The STYLE Element Attributes: Type .Gives the title sheet an optional title... color and sizes of various elements that are used on your web page. STYLE sheets or the inline STYLE element will allow you to set custom margin sizes. margin-right: 3%}h1 {font: 14pt ariel.5in}a {color: #00FF00. See the "Common Attributes" section.body {background: #FFFFFF. and tv. Methods of Including Style Methods of including style content in an HTML document: Embedding . tty. pixels(px).Use the link element in the HTML header to link an external text file style sheet to the HTML document. Example: <style type="text/css" MEDIA=screen><!-.. Title ..Use the STYLE element in the HEAD element to create a style sheet that is embedded in the header. it is wiser to control most element style using the external style sheets./. Many examples in this document show style being controlled using the STYLE attribute. When the em units are used.margin-left: 3%. Media . 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. margin-top: 6%.

setting document style. Setting an HTML Page with a Style Sheet To set an HTML page up to use a style sheet..css) body {background-color: #ffffff./.9"><meta name="description" content="The Computer Technology Documentation HTML Guide .font-style: italic font-weight: bold font-size: 200% .01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html.Indicates twice the size of normal text. font-family: roman.</body> The Style Sheet File (style.gif') }a:link { color: #0000ff }a:visited { color: #7f007f } . background: url('.css" rel="stylesheet" type="text/css"></head><body>. html document style. serif./. style. color: #000000../gifs/flowers.Setting Document Style"><meta name="keywords" content="Documentation. HTML.... charset=iso-8859-1"><meta name="GENERATOR" content="Arachnophilia 3./. a link must be provided in the header section as follows: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. "Times New Roman" text-transform: uppercase background-color: blue The section "CSS Properties" contains a more complete list of parameters and the elements they work with.. setting html document style"><title>The CTDP HTML Guide Setting Document Style</title><link href="style.

Class style information is specified in the style sheet with the period. visited link color. width: 50%. To use this in the HTML file. text-align: center }hr#firsthr { color: #80b0ff. The CLASS attribute allows attributes to be assigned to almost any element based on a class name. height: 15.center { text-align: center }. Assingments in the style sheet to specific elements similar to "PRE. To change the style. 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.firstindent { textindent: 2em}div. when the beginning tag of the element is declared.center { textalign: center }". followed by the class name as in the following example: .outline { border-top: solid medium navy }hr { color: #80b0ff. h2 { text-align: center } .indent { margin-right: 5%. All other lines on the page appear as defined by the following entry from the above style sheet: hr { color: #80b0ff. only the style sheet needs to be changed.indent { margin-right: 5%. This is done with a line like the following as shown in the style sheet example above. and unvisited link color(A:link). hr#firsthr { color: #80b0ff. ". Classes may also be assigned to specific elements so they can only be used with that elements. width: 50%.a:active { color: #ff0000 }h1. active link color. Using the CLASS Attribute The CLASS and ID attributes allow very convenient and precise control of the style of specific elements in HTML documents. margin-left: 5%. height: 5. width: 100% } This style sheet is used to set the style for various HTML elements on every page of this document. Note that the style sheet sets the wallpaper for the HTML page along with the background color.". In this case the paragraph element is indented much like the blockquote element and its color is also set to blue. Context Selection Allows elements containing inline elements to have special assigned values as in the following example: table b ( color: red } This example sets the color of any bold text in a table to red. color: #0000ff } Note that this same line is used in the example style sheet above. height: 15. Using the ID Attribute The ID attribute is useful since it allows you to specify exactly which element will have the desired style. margin-left: 5%. H2 { text-align: center }h3 { color: #600060 }blockquote { color: #0000ff }pre { color: #0000ff }. Grouping Elements for Style Characteristics The example above contains the following line: h1. foreground color. height: 5. width: 100% } When the first horizontal line is declared on the HTML page it is declared as follows: <hr id="firsthr"> The line for the code in this example is at the top of this page. color: #0000ff }. Please note that ID selectors are not required to be associated with a specific element in the style sheet although I think it makes more sense to do so. text-align: center } The line appears below and in several other places on this page. It also sets colors for the BLOCKQUOTE and PRE elements along with defining some CLASS characteristics and one ID characteristic.

. visited. For example the anchor (A) element has the classes link. Also a "first-line" and a "first-letter" pseudo class exists for each block element. The following lines in the style sheet assign color style characteristics to these classes. Pseudo Classes Some elements have specific automatially assigned classes. The elements are separated by commas.This line allows style characteristics to be assigned to both elements H1 and H2 at the same time. 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. and active.

and color Element Types All Example {border: medium solid green} {borderbottom: medium solid green} {borderbottomwidth: thin} {border: #0000ff} {border-left: medium solid green} {border-leftwidth: thin} inherited No borderbottom All No borderbottomwidth bordercolor borderleft Set the bottom border width Set the color border Set the left border width style. thick. #RRGGBB See border width. style. medium. for complete details refer to the Web Design Group's web page CSS section. Set the left border width thin. or length value A color value. Set the right border width All borderrightwidth All {borderright: medium solid green} {borderright-width: thin} No No . and color See border width. thick. style and color. or length value All No All All No No borderleft-width All No borderright Set the right border width style. color. Box Properties Name border Description Sets border width. style. and color thin.CSS Properties This section only provides a quick reference for the CSS properties. Set the bottom border width style. medium. style. thick. and color thin. medium. Application of these properties are based on the element type as described earlier in the "Element Categories" section. and color. style. Possible Values See border width. and color. or length value See border width. and color.

and left margins. solid.borderstyle Sets border style none. or percent value {margin: 4em 2em 4em 2em} No marginbottom marginleft Set element margin Set element margin bottom left length value. INPUT. left. medium. or length value none. two values set top and bottom. Height of element All {clear: left} No float none. A single value sets all margins. or percent value All All {marginbottom: 4em} {marginleft: 4em} No No . dotted. double. SELECT. right. right left. length value. inset. TEXTAREA. auto. style. outset See border width. dashed. ridge. both All {border: dashed} No bordertop Set the top border width style. All bordertopwidth borderwidth Set the width top border All {bordertop: medium solid green} {bordertop-width: thin} {borderwidth: 8} No No Sets Border width. four values set top. or percent value length value. Specifies how text is wrapped and where it is aligned. groove. or length value thin. and color. All {float: left} No height auto or a height value Block elements and IMG. right. medium. bottom. thick. thick. and color thin. All No clear Determines where floating elements are allowed. and OBJECT All {height: 200} No margin Set element margin width.

or percent value auto or a height value in length or percentage All {paddingbottom: 4em} {paddingleft: 4em} {paddingright: 4em} {paddingtop: 4em} {width: 40em} No paddingleft paddingright Space between left border and content. and four values set top. Space between right border and content. or percent value length value.marginright margintop padding Set element margin right length value. and left. and bottom. or percent value All {marginright: 4em} {margintop: 4em} {padding: 4em} No Set element top margin Space between border and content. or percent value length value. length value. and OBJECT No No Background and Color Properties Name Description Possible Values Element Types Example inherited . All All No No paddingtop width Space between top border and content. three values set top. SELECT. two values set top/bottom and left/right. INPUT. A single value sets all sides. right. Width of element All Block elements and IMG. or percent value length value. or percent value length value. bottom. right/left. TEXTAREA. All All No No paddingbottom Space between bottom border and content. or percent value length value.

center. scroll. backgroundposition All {background: #8080ff} No backgroundattachment backgroundcolor Determines if the background image is fixed or scroll. See backgroundcolor.. left. SELECT. backgroundrepeat. Sets the background image. attachment. Sets the background color./.background Set background color. Sets how the background image is repeated. Sets element color. and OBJECT All {background-position: top} left No {background-repeat: repeat} no- No color All {color: green} Yes . center. backgroundattachment. or position. repeat-x. repeat../. or percent values repeat.gif')} No backgroundposition top. TEXTAREA. INPUT./. bottom./gifs/flowers. right. Sets the background image initial position. no-repeat Named or value color backgroundrepeat Block and IMG.. repeat-y.. image. fixed All {background-attachment: scroll} No Named or value color All {background-color: #8080ff} No backgroundimage url All {background-image: url('. backgroundimage.

Sets treatment of spaces inside the element. Block {whitespace: pre} Yes Font Properties Name font Description Used to define font properties Possible Values See font-family. font-variant. inline. upperupper- Listitem Yes list-styleposition Sets where the marker is place relative to the text and its wrapping position. font-style. inside. alpha. font-size. family name Element Types All Example {font: 20pt} inherited Yes fontfamily Used to define font family to use All {fontfamily: ariel roman} Yes . See list-style-type and list-styleposition url Yes list-styleimage Sets image to be used as the list item marker. roman. square. decimal. list-item.gif)} {list-styletype: square} Yes list-styletype circle. nowrap pre. Possible Values block.Classification Properties Name display Description Sets the type of element. lowerlowernone. roman disc. alpha. outside Listitem {list-style: circle} Yes whitespace normal. list style Listitem {list-styleimage: url(this. none Element Types All Example {display: list-item} Listitem {list-style: circle} inherited No list-style Sets list style type and/or position. Sets type. and font-weight.

small-caps All All {font-style: italic} {fontvariant: small-caps} {fontweight: 600} Yes Yes fontweight normal. length value. Sets the special decoration attributes of text. x-large. Sets the height of lines. uppercase. smaller. x-small. italic. 500. 200. oblique normal. lighter. blink length percentage value none. 600. Transforms text to one of the set values. large. center. 100. capitalize. left.fontsize Used to define font size to use xx-small. a number. lowercase or Element Types All All Example {letterspacing: 0. 700. linethrough. 300. Block All {text-align: center} {textdecoration: blink} {textindent: 5%} Yes No Block Yes All {texttransform: uppercase} Yes . Possible Values normal or length value normal. overline. xxlarge. 900 All Yes Text Properties Name letterspacing line-height Description Sets the space between characters. right. normal. or percent value All {font-size: 18pt} Yes fontstyle fontvariant Used to define font style to use Used to determine whether to use normal or small caps Sets font weight. bold. Sets the element's first line amount of indentation. 400. bolder. justify none. 800.2em} {lineheight: 2} inherited Yes Yes text-align textdecoration textindent texttransform Sets the alignment of text. underline. a percent of the element font size. medium. small. larger.

or percent value normal or length value Inline {verticalalign: sub} No wordspacing Sets extra space between words. super. sub. text-top. middle. All {wordspacing: 0.2em} Yes . top. bottom. baseline. textbottom.verticalalign Sets vertical position.

This can be set in pixels or a percentage of the browser window height. and ABSBOTTOM. ALIGN="TOP" . The space between the image and the text above and below it in pixels.The path and filename of the image which specifies its location. the image will be the size as determined by the gif file. WIDTH=115 .gif" .The width of the image.Specifies the client side image map file to be used. This can be set in pixels or a percentage of the browser window width.(Depreciated). When embedded inside an anchor. The space between the image and the text to the left and right of it in pixels. The image is aligned to the left or right column if the value is LEFT or RIGHT.(Depreciated). their browser will load a file from the designated link).The values. MIDDLE. BORDER=10 .(Depreciated).gif" alt="Outdoor Scene"> This code sets an alternate text of "Outdoor Sceen" in the event the "MyPicture.This is a message displayed if the image could not be found. they will go to the designated link (rather. Sets a border of the specified width in pixels to be drawn around the image. VSPACE=3 . HEIGHT=33 .gif" file is not . HSPACE=5 . The line break element. If this is not specified. TOP. the image will be the size as determined by the gif file.Identifies the image as an image map. set the vertical alignment with items in the same line. BOTTOM. ISMAP . Example 1 The following code will display a gif file: <img src="MyPicture. Sets the image alignment. USEMAP . ABSMIDDLE. ALT="Home" . <BR> and the horizontal rule element <HR> may be placed inside the <IMG> element.HTML Graphics The <IMG> tag is used to embed graphics in HTML pages./greenhomebutton. If this is not specified. IMG Attributes SRC=".. The <IMG> element has no ending tag. then the user left clicks on the image.The height of the image.(Depreciated). They may be embedded inside other elements such as anchors. The image map lets the user point and click different parts of the image to load other web pages.

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.displayable.gif"><img srcC="SmallPicture2l.gif" onMouseOver="window. These files are links to the larger files to be viewed or downloaded. </MAP> .gif" ALT="Picture2" height="20%" width="40%"></a></div> In this example the style attribute "text-align: center" is set.status='Picture1' .gif"><img src="SmallPicture.status=''.gif" onMouseOver="window. then make it a link to the original file for viewing or download. it would be worthwhile to make a file of about one fifth the height and width of the original file.status=''.html" target="right" onMouseOver="window. In this example two smaller files are placed on a page next to each other.gif" Example 5 The following code will display a linked image that will return you to the HTML start section: <div style="text-align: center"><a href="htmlintroduction.gif" ALT="Picture1" height="20%" width="40%"></a><a href="Picture2. 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. </MAP> while the <AREA> element does not. .return true" onMouseOut="window. This is because the download time of your web page with many large graphic files may be excessive.status='Picture2' .status='To The HTML Start (intro) Page' .return true"><img src="SmallPicture.status=''.Starts a client-side image map. The <MAP> element has an ending tag. The size of the picture is set to 20% of the height of the browser window and 40% of the width.return true" onMouseOut="window.return true"><img alt="Picture2" height="20%" width="40%"></a></div> src="SmallPicture2l.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 must be referenced in an image <IMG> tag. If you are interested in making several graphic files accessable from one page such as files scanned from pictures. This element will include <AREA> tags.gif" alt="Picture1" height="20%" width="40%"></a><a href="Picture2. <img src="MyPicture. MAP and IMAGE Tags and Attributes <MAP> . This usually occur if it cannot be found or if the user has their browser controls set not to display pictures. this example gives some valuable advice. <div style="text-align: center"<a href="Picture1. <div style="text-align: center"><a href="Picture1.return true" onMouseOut="window.gif" alt="Home" vspace="3" border="3" height="35" width="120"></a></div> This is the result: Image areas and Maps To use a web browser to click on various areas of an image file and go to a specific web page depending on the area clicked upon requires the use of the <MAP> and <AREA> elements.Ends the image map element.return true"><img SRC="bluestartbutton.

in pixels. RECT. HREF="leftwing. the top-left and bottom-right coordinates of the clickable linked region in the image. SHAPE=RECT .102.Defines.Defines areas of an image map that the user may click on to establish a link. COORDS="2.Defines the location of the web page that is loaded when the area in the image is clicked.101" . . Valid values are POLY.50.<AREA> .Defines the shape of the click able area.htm" . and CIRCLE.

To play sounds all that is required is to put a line like the following on your web page: <bgsound src="1234usmc.10.map"></a> <map name="airplane.html"> </map> HTML Sound The BGSOUND element is used to play sounds on a web page.html"> <area shape="rect" coords="162.Example Code <img src="airplane. There is no end tag for the <bgsound> element.160.300" HREF="fusalage.wav" loop="-1"> This line is used on this page to play sound. MIDI.101" HREF="leftwing.101" HREF="rightwing.50.The number of times the file will will loop.262. .wav" . BGSOUND element attributes SRC="1234usmc.The location or the URL of the WAV.50.html"><area shape="rect" coords="110. LOOP="-1" .gif" ismap usemap="#airplane. or AU file to play. A value of INFINATE or -1 will loop indefinitely.102.map"><area shape="rect coordsS="2.

Link to another page This is an example of HTML source code using an anchor link: <a href="htmlintroduction. Here's the source code: <a href="mailto: ctdp@operamail.html" target="right">Introduction</a> Here is how it looks: Introduction It will take you to the introduction page if you click on it.html" target="right" onMouseOver="window. Example 3 . it will load inside the frame.Sets an anchor at a named location in the document for later use by an anchor tag. You can send an e-mail telling us that the example worked or exit the e-mail program.HTML Links HTML Anchors and Links Anchors are used to specify link locations or to set anchors for locations to link to.return true"<>img .Named Anchor At the top of this page is a named anchor which is used for other examples on this page. _blank .Image Link This is an example of HTML source code using an anchor link with a button image embedded (It also includes some JavaScript): <a href="htmlgraphics. If the target is a named window that exists the web page the link points to will be loaded into that window. ctdp@operamail. If a window by that name does not exist. a new window with that name will be created. TARGET . Its text is: <a name="top"></a> Example 2 . The target may me a named window or one of the special reserved names below.com Example 4 . Examples Example 1 . If the link is in a frame. Feel free to click on it to see the effect. Anchors begin with the <A> tag and end with the </A> tag.The new page will load in the same window that the link is in.status=''. _self .Specifies the frame target the referenced page will be put into. _parent .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.html" .com</a> Below is the implemented example.status='To graphics page' . 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.The web linked page loads in a new window and does not name the window. This is the default target. _top .com">ctdp@operamail.return true" onMouseOut="window.The new page will load in the parent frame or window.The new page will load into the top window reguardless of how many framesets deep the link is embedded. HREF="hw.A Mail Link This example shows how to set up a mail link that invokes the installed mail program when it is clicked on. Anchor Attributes NAME . If you click on it it should invoke your mail program such as Microsoft Outlook so you can send an e-mail.

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.Non-Underlined Link Here's an example of HTML source code that will take you to the top of the page.html" target = "_self">main HTML</a> page. 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. . but it is not underlined. The JavaScript part includes the "onMouseOver" and onMouseOut" definitions. Example 9 . Example 5 . 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. You can read about JavaScript in the JavaScript Manual.Target set to self Take me to the <a href="index.html" target = "_blank">main HTML</a> page. They are event handlers for the MouseOver and MouseOut events. It is also embedded with other text to make it harder to find.gif" alt="Graphics" width="120"></a> Here's how it looks and works: vspace="3" border="0" height="35" It will take you to the graphics page of this document.Target set to blank Take me to the <a href="index.Target set to top Take me to the <a href="index. Here's how it looks and works: Take me to the main HTML page. Here's how it looks and works: Take me to the main HTML page. it will continue making new pages.status" definition is an attribute of the window object. If you continue clicking on this link. Here's how it looks and works (Use the BACK button on your browser to return): Take me to the main HTMLpage. Example 8 .</a> Here's how it looks and works: Take me to the top of this page.src="bluestartbutton. Example 10 .Hidden Link Here's an example of HTML source code that will take you to the top of the page. This link is essentially hidden and can only be found by placing the mouse directly over the link. Example 7 . Example 6 . The "window.html" target = "_top">main HTML</a> page. nor is the color changed for a normal link color.

ACCEPT . Also the form will invoke a script program which runs on the server.A boolean value that makes the input object unavailable for use. </BUTTON> . VALUE . Some reasons to use forms are to allow visitors to partake in polls or sign up as a member. </FIELDSET> ends the fieldset. ACCESSKEY . Sets the way the text and image will align. 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. reset. <BUTTON> .The address of the script to process this form input. <FIELDSET> . DISABLED ..Sets a script program to run when the element loses focus.The name of the form which is passed to the script running on the server.The method used to send the data from the form to the server. This script program will receive the data and store it on the server.Sets a script program to run when the element gets focus.Sets the button type to one of submit. TABINDEX . Form tags and attributes <FORM> .(Depreciated).A shortcut character..This indicates that the item is checked is it is a check box or radio button. so it will concentrate on the HTML side of form writing. ONFOCUS . MAXLENGTH="7" . or push button.Ends an input form.A boolean value that makes the button unavailable for use. Also orders for merchandise may be placed using forms.Starts an input form. NAME="RegForm" . NAME .Allows grouping of form controls. reset. <INPUT> .An input element for a form.Sets the tabbing order of the element. ALIGN="CENTER" .Ends the button.Alternate text for the image. METHOD="POST" . This document is not intended to teach script writing. DISABLED .Used to define a FORM submit. ACTION=". TYPE . Attributes: ACCESSKEY . </FORM> . . ONBLUR . Normally POST is used.Sets the value of the button to be sent to the webserver when the form is submitted.The most characters that may be put in a text region.The acceptable media types for file upload. The options are POST and GET. or button.A shortkey used to give the focus to the label.Sets the name sent to the server as part of the name/value pair when the form is submitted." .HTML Forms Forms allow those who come to your website to provide input to your webserver. CHECKED . ALT . then respond with a message to the user telling them that the form was submitted.

Script to run when the element is changed. SUBMIT. TABINDEX .Sets a script program to run when the element gets focus. ONFOCUS . ONSELECT . It specifies the label of a reset or submit button or the value to be returned when a check box or radio button is selected.The number of rows in the text area. FOR .Sets a script program to run when the element loses focus. MULTIPLE . The options are BUTTON.Ends a Text entry form element.A shortkey used to give the focus to the element. Attributes: ACCESSKEY . Attributes: DISABLED . ONFOCUS .A shortkey used to give the focus to the label.The number of columns in the text area.Sets the tabbing order of the element. </SELECT> ends the select area. TABINDEX .Creates a list of items that can be selected.gif" . <LABEL> . </TEXTAREA> . ONBLUR . SIZE="1" .Sets a script program to run when the element gets focus. ONCHANGE . ONCHANGE .A boolean value that makes the select object unavailable for use. RADIO. Attributes: ACCESSKEY .The type of input to be done.Script to run when the element text is selected. ONBLUR .Specifies the default value for a text item. VALUE="1" .The name of the source file for an image to be displayed on the form. NAME="state" .Allows more than one selection from the scrolling list. ONFOCUS . RESET. CHECKBOX. ONCHANGE . IMAGE. FILE. If a value of SIZE is set. NAME="AddressLines" .The name of the selection item that is passed to the script running on the server.Allows an ability to click on a text label to select a form control.The name of the textarea which is passed to the script running on the server. ONSELECT .Script to run when the element is changed. ONFOCUS .Indicates an element that has multiple text lines.The number of characters an input region should be filled with.Sets a script program to run when the element gets focus.Script to run when the element text is selected. COLS="3" .ONBLUR . or TEXT.The number of selections that will be displayed. the selection will be a scrolling list. If no SIZE value is set the selection will be a pop-up menu.Sets the control associated with the label which ust match the control name. SRC="bluebutton. <SELECT> .Sets a script program to run when the element loses focus.Sets a script program to run when the element gets focus.Script to run when the element is changed. ROWS="3" . HIDDEN. SIZE="3" .Sets the tabbing order of the element.Sets a script program to run when the element loses focus. PASSWORD. <TEXTAREA> .Sets a script program to run when the element loses focus. <.LABEL> ends a label.Script to run when the element text is selected. ONSELECT . ONBLUR . . TYPE="TEXT" .

A boolean value that makes the object unavailable for use. <OPTION> .comptechdoc. This is found within the SELECT element. </OPTION> ends the OPTION element.html (2 of 6)7/21/2003 7:45:08 AM HTML Forms TABINDEX . 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.Used to set items in a list of selectable items.Sets the tabbing order of the element. LABEL .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 . Attributes: DISABLED . </OPTGROUP> ends the group. LABEL SELECTED .http://www.This will be the default value if this attribute is included in the OPTION element VALUE="10" .Sets up choices inside a SELECT menu.Describes available choices.A boolean value that makes the object unavailable for use.This is the value to be submitted to the CGI script program if this option is selected when the user submits the form. <OPTGROUP> . DISABLED .org/guides/htmlguide/htmlforms.

<option value="9">DC <option value="10">DE <option value="11">FL value="12">FM <option value="13">GA <option value="14">GU value="15">HI <option value="16">ID <option value="17">IA value="18">IL <option value="19">IN <option value="20">KS value="21">KY <option value="22">LA <option value="23">MA value="24">MD <option value="25">ME <option value="26">MH value="26">MI <option value="28">MN <option value="29">MO value="30">MP <option value="31">MS <option value="32">MT value="33">NC <option value="34">ND <option value="35">NE value="36">NH <option value="37">NJ <option value="38">NM value="39">NV <option value="40">NY <option value="41">OH value="42">OK <option value="43">OR <option value="44">PA value="45">PR <option value="46">PW <option value="47">RI value="48">SC <option value="49">SD <option value="50">TN value="51">TX <option <option <option <option <option <option <option <option <option <option <option <option <option <option <option value="52">UT <option value="53">VA <option value="54">VI <option value="55">VT <option value="56">WA <option value="57">WI <option value="58">WV <option value="59">WY</select><b>Zip: </b><input type="text" name="zip" maxlength="10" size="10"><b>Area Code/Phone:</b><input type="text" name="code" maxlength="3" size="3"><input type="text" name="phone" maxlength="7" size="7"><div style="text-align: center"><input type="button" name="cmdSubmit" value="Submit"> <input type="reset" value="clear"></div></pre></form></td></table></div></body> How the Form Looks: Computer Technology Documentation Project Member Registration First Name: Last Code/Phone: Name: Address1: Address2: City: State: Zip: Area .

(Depreciated). FOR . below.HTML Script Embedding This document is not intended to teach script writing. Tells the name of the language the script is written in.Specifies the event used to trigger the script. This document also does not explain how to get information entered in a script form to the server. The script below will check inputs from the form. Scripting Events ondblclick onclick onkeydown onkeypress onkeyup . That is a subject that will be described when the hyper text transfer protol (HTTP) and server side script writing is discussed.(Depreciated). Required for most browsers.(Depreciated). The encoding of any external script specified such as "iso-8859-1". This attribute is not widely supported yet. you will see that the script is active. to be sure they have been entered correctly before sending the data to the server. TYPE . but will only define some of the related tags and give an example script so the user can get an idea how to embed script in HTML. The script is not parsed until the HTML document is rendered. If you attempt to press submit in the form below without filling the appropriate fields in.Specifies an object (combined with an action) that is used to trigger the script event LANGUAGE . Possible values are JavaScript. SCRIPT Element Attributes The script element is usually embedded in the document header but may be placed in the head or the body of the HTML document so long as it occurs before code that invokes it. DEFER . CHARSET .(Depreciated).The new method to specify the script language using MIME specification rather than the LANGUAGE attribute.1 SRC . EVENT . The NOSCRIPT element is used to provide alternate content when a browser does not support script. VBScript. Specifies an external script which may include a URL path to another webserver. and JavaScript1.

length != 0) MemSubForm.length != 0) MemSubForm.").value.focus(). MemSubForm.focus().addr1. if (MemSubForm.lastname.zip.addr1.").").firstname.zip. if (MemSubForm.length == 0) { MemSubForm.").lastname.phone.value = prompt("Please enter your address.value. MemSubForm.0 transitional//en"><head><title>New CTDP Member Registration</title><scrypt type="text/javascript" for="cmdSubmit" event="onclick" language=JavaScript><!--var MemSubForm.focus().length != 3 || isNaN(MemSubForm.}if (MemSubForm.select().value.city.state.code.value. if (MemSubForm.code.addr1. if (MemSubForm.value = prompt("Please enter your city of residence.length != 0) MemSubForm.length == 0) { MemSubForm.city.").value = prompt("Please enter your first name.value == 0) { alert("Please select a 2-letter state abbreviation.value.if (MemSubForm.select( ). if (MemSubForm.lastname.focus().length != 0) MemSubForm.zip. MemSubForm.code.value = prompt("Please enter a valid zip code.MemSubForm = document.value = prompt("Please enter your last name.}if (MemSubForm.firstname.").phone.RegistrationForm.onmousedown onmousemove onmouseout onmouseover onmouseup An example Script How the script looks: <!doctype html public "-//w3c//dtd html 4.addr1.value.value.focus().}else if (MemSubForm.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> <form name="RegistrationForm"><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 .").state.value.}if (MemSubForm. MemSubForm.}if (MemSubForm.zip.value.city.phone.firstname.value)) { alert("Please enter a valid phone number.length < 5) { MemSubForm.value.value.length == 0) { MemSubForm.code.city.phone.").length != 7 || isNaN(MemSubForm.}else if (MemSubForm.lastname.length != 0) MemSubForm.addr1.value.length == 0) { MemSubForm.}else if (MemSubForm. MemSubForm.focus().focus().value)) { alert("Please enter a valid telephone area code.

value="31">MS <option value="32">MT <option value="33">NC value="34">ND <option value="35">NE <option value="36">NH <option <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 <option value="52">UT <option value="53">VA <option value="54">VI <option value="55">VT <option value="56">WA <option value="57">WI <option value="58">WV <option value="59">WY</select><b>Zip: </b><input type="text" name="zip" maxlength="10" size="10"><b>Area Code/Phone:</b><input type="text" name="code" maxlength="3" size="3"><input type="text" name="phone" maxlength="7" size="7"><div style="text-align: center"><input type="button" name="cmdSubmit" value="Submit"> <input type="reset" value="clear"></div></pre></form></td></table></div></body> .

The name of the applet. Values: LEFT RIGHT TOP . Do not include the actual applet name. SRC=". .The URL of the directory where the compiled applet can be found (should end in a slash / as in "http://mysite/myapplets/").. ALIGN . use CLASSID in place of CODE to specify the file name. CODEBASE . The "getParameter" function is used to get the passed parameters in the applet. HEIGHT .</applet></p></body></html> If the OBJECT tag is used rather than the APPLET tag. VSPACE ..The width of the applet output area in pixels..ALIGN="TOP ". The "jar" command is used to create these JAR files from class and gif files. A JAR (JAVA Archive) file is a package of the applet (or application) along with all required supporting class files. BOTTOM MIDDLE ABSMIDDLE ABSBOTTOM BASELINE TEXTTOP PARAM ." . WIDTH .Align with the topmost item in the line.. ALT ." .Specifies a different folder for the browser to look for the applet file.Used to pass parameters to applets. CODE .The name of the applet main class file. Parameters expected but not passed are passed as a NULL. CLASS=". HSPACE .Indicates how the applet should be aligned with any text that follows it.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.The height of the applet output area in pixels.How the Form Appears and Works: Computer Technology Documentation Project Member Registration First Name: Last Code/Phone: Name: Address1: Address2: City: State: Zip: Area 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.Vertical space between the applet and other text. 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.Space in pixels between the applet and the text around it.Alternate text if the applet is not loadable. which is specified with the CLASS attribute. Your program needs to test for NULL parameters and set a default for any expected parameters.

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. Tags must be in lower case letters. Values of attributes must be in quotes. Formally the following would be OK: <A href=index.html target=_top> Now use the following: <a href="index.html" target="_top"> Attributes may not be minimized. <table><tr><td nowrap<find /var/spool -mtime +40</td></tr> 1 </table> Becomes: <table><tr><td nowrap="nowrap"<find /var/spool mtime +40</td></tr></table> 2 A DTD Declaration with head and body elements must be present in the document. The DTD can be Strict, Transitional, or Frameset (for Frames). An example DTD declaration is shown below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> Of course after the DTD declaration an <html> element should exist which includes both a <head> and <body> element as is contained in a normal HTML document. 3 The name attribute is replaced by the id attribute. <input type="text" name="firstname" /> Becomes: <input type="text" id="firstname" />

HTML Tags
Start tag <!DOCTYPE> <ABBREV> <A> <APPLET> <AREA> <AU> <B> <BASE> <BASEFONT> <BGSOUND> <BIG> <BLOCKQUOTE> <BR> <BODY> <BUTTON> <CODE> End tag </ABBREV> </A> </APPLET> </AU> </B> </BIG> </BLOCKQUOTE> </BODY> </BUTTON> </CODE> Description Document type. Denotes an abbreviation. Anchor Anchor Defines areas of an image map that the user may click on to establish a link. Author. Bold text Defines the base point from which anchor references are made. Used to set the default font size on the current page. Used to play sounds on a web page. Set text size to larger than normal. Indents the text as though it were a quote. Break, starts a new line, but doesn't put a blank line between text. Defines the body of the HTML page. Used to define a FORM submit, reset, or push button. Denotes program code and should be set in the same format as the PRE tag, but does not work either with all browsers or all HTML versions. directory Designated definition. Denotes deleted text. Used to offset parts of the HTML document to perform assignment of special attributes or controls to that section. Denotes the definition of a term. Definition list. Document type.

<DIR> <DD> <DEL> <DIV> <DFN> <DL> <DOCTYPE>

</DIR> </DD> </DEL> </DIV> </DFN> </DL> -

Italics Text to be typed at the keyboard. Used to divide the browser window into separate frames that can display multiple documents. Allows an ability to click on a text label to select a form control List item in a list. Defines a level 5 header. Defines a level 6 header. Allows grouping of form controls. Sets a section of text with a specific font. Used for web browsers that don't support FRAMESETs.LABEL> </MAP> </MENU> </NOFRAMES> </NOSCRIPT> Definition term. Denotes inserted text. Defines a level 2 header.<DT> <EM> <FIELDSET> <FONT> <FORM> <FRAME> <FRAMESET> <H1> <H2> <H3> <H4> <H5> <H6> <HEAD> <HR> <HTML> <IMG> <INPUT> <INS> <I> <KBD> <LABEL> <LI> <MAP> <MENU> <META> <NOFRAMES> <NOSCRIPT> </DT> </EM> </FIELDSET> </FONT> </FORM> </FRAMESET> </H1> </H2> </H3> </H4> </H5> </H6> </HEAD> </HTML> </INPUT> </INS> </I> </KBD> <. Specifies a frame to be placed inside a FRAMESET. starts a new line with horizontal graphic line between sections. Sets text in italics and denotes emphasis. Defines a level 4 header. The test is displayed in a mono spaced format. . Used for web browsers that don't support script code. Starts a client-side image map. A menu list (Depreciated). Used to embed graphics in HTML pages. Displays a form for user information. An input element for a form. such as a computer command. Meta element defining special characteristics of the document. Horizontal rule. Defines an HTML document or page. Defines a level 1 header. Defines a level 3 header. Defines the head of document.

Superscript. Subscript. Indicates an element that has multiple text lines Designates a table header. Table. Same as bold but denotes strong emphasis. Makes text smaller than normal. Quotation.. Allows text attributes and color to be modified at any location. Numbered or ordered list. Underlined text. Used to set up parameters for the OBJECT and APPLET elements.<OBJECT> <OL> <OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q> <SAMP> <SCRIPT> <SELECT> <SMALL> <SPAN> <STRIKE> <STRONG> <STYLE> <SUB> <SUP> <TABLE> <TD> <TEXTAREA> <TH> <TR> <TITLE> <TT> <U> <UL> </OBJECT> </OL> </OPTGROUP> </OPTION> </P> </PRE> </Q> </SAMP> </SCRIPT> </SELECT> </SMALL> </SPAN> </STRIKE> </STRONG> </STYLE> </SUB> </SUP> </TABLE> </TD> </TEXTAREA> </TH> </TR> </TITLE> </TT> </U> </UL> Object. Sets up choices inside a SELECT menu. Text presented as typed with tabs. Preformatted text. the replacement for Applets and more. Used to set the style of the web page. Denotes sample text. Paragraph. Document or page title. Used to embed client side script in HTML code. Designates a table row. Creates a list of items that can be selected. Unnumbered list. Designates a table data cell. Draws a line through the text as a "strikeout". . spaces and other whitespace. Used to set items in a list of selectable items in a form. Monospaced typewriter font. usually in the header.

Home page . When you click on them they will usually cause your browser to load the page it is pointing to and you will see the new page displayed. Tags tell the browser what to do. set HTML tags off from the rest of the text on an HTML page. There are two categories of text editor.HTML Terms Angle brackets . FTP .File Transfer Protocol. but several formats may be used.An HTML designator that defines special objects such as paragraphs. Element .Tags are used to surround text which has special meaning in HTML. They are usually underlined and consist of a different text color than the surrounding text. This web page was written using the Arachnophilia v3. It is used to specify file locations of html or other files. HTML .The main part of an HTML document.An editor that makes web page creation easier than using a normal text editor. You will not see the HTML elements or tag sets using this type of editor. The tag set <P> </P> is used to tell the browser that text between the two tags is to be set apart as a separate paragraph in HTML. URI .Defined words used in an HTML tag to modify the tag properties.The main page of an organization or company which is the first page seen when the organization's URL is visited.Uniform Resource Locator.The beginning part of an HTML document which defines various characteristics such as the title.The characters. They can be used to add or change color or change a size in some element. so for learning HTML it is not recommended. Attributes .HTML coded locations of other material on the web. < and >. The .Hyper-Text Markup Language is the basic language web pages are written in. A text based HTML editor lets the user see and edit HTML code directly. it is strongly recommended that you use some type of HTML editor even for learning. HTML editor . Although you can write HTML code using a standard text editor.Uniform Resource Identifier which is used as an identifier for a resource. but may have just a beginning tag. The URI may include a complete path to the resource or may only be relative without a complete path. WYSIWYG (What you see is what you get) or graphical HTML editors which allow the user to see the page as the web browser would see it as they edit the page. Hyperlinks or links . lists. URL . Usually the HTML tags are displayed in a different color than the surrounding text which makes them easier to see and work with. A method used to send or receive files between two computers on the network or internet. and lines in HTML.Hypertext transfer protocol is the internet protocol used to transport information between the client browser and the web page server. It usually consists of a beginning and ending tag.A program used to draw graphics images that may be used on a web page. BODY . HTTP . Tags .9 HTML editor. Header . These two symbols enclose all HTML tags. Graphics drawing program . Normally these images are stored as gif files.

and FILE.URL "http://ctdp. It is considered to be a client program which makes requests to web servers for web page files. . The first section "http:" designates the type of transfer which in this case is Hyper-text transfer protocol. GOPHER. video and graphics. The web server will transmit the web pages across the network/internet to the client computer which is running a web browser.Software used to retrieve and display web pages on the web.com" is the URL for the CTDP home page. Other cases include FTP.tripod. Web server . Browsers can all read basic HTML but may be different in other areas such as being able to display or run script code. Web browser .The computer the web pages are stored on.

01 and older versions.0 Reference section. It includes a tutorial.01 Transitional DTD. It is an excellent reference and is also available in an offline viewable format. information about CSS structure. Web Design Group's web page. Web Design Group's web page. The World Wide Web Consortium CSS Level 1 Specification. The World Wide Web Consortium HTML 4. The World Wide Web Consortium CSS Level 1 Recomendation. Contains excellent references to multiple sets of HTML documentation including XHTML. .Recommended Reading The following sources should be helpful in learning about HTML and the use of style sheets. This is the best source on the web that I have found describing HTML. HTML 4. The World Wide Web Consortium HTML 4. HTML 4. Cascading Style Sheets Guide. The World Wide Web Consortium HTML 4.01 Strict DTD. CSS rules. and how to link style sheets to HTML along with several other references. Also links to information about style sheets can be found here along with links to HTML document type definitions (DTDs).01 Specification. They give additional details not listed here. The World Wide Web Consortium Hypertext Markup Language Home Page.

Module XML & Java Script .

access values associated with the tags. First. and obtaining it from XML data islands within an HTML document. XML allows the author to define his own tags and his own document structure. you’ll see how to write a web services client in JavaScript using the XML techniques from this module. . guidelines. This coverage of basic XML techniques is followed by two sections that demonstrate applications of those techniques. and accomplish all of this in a custom structured format that we have also created. Second. XML was designed to describe data and to focus on what data is. As with HTML. with data from an XML document.. We must define our own tags. XML is self describing. The W3C develops inter operable technologies (specifications.. XML is a public standard developed and maintained by the World Wide Web Consortium (W3C). commerce. you’ll see how it is possible to define HTML templates and automatically expand them. XML tags are not predefined in XML. XML can be used as a format to exchange information. After this discussion of obtaining XML data. parsing it from a string. It starts by demonstrating techniques for obtaining XML data: loading it from the network. communication and collective understanding.1 Introduction XML stands for Extensible Markup Language. </B> renders the text in bold font style. XML uses a DTD (Document Type Definition) to formally describe the data. Chapter 2 XML 2. For example the HTML tag <B> . XML can be used to store date in files or in databases. It was designed to describe data. XML is about describing information. assign a data type to each tag and attribute. HTML is about displaying information. XML can keep data separated from our HTML. XML can be used to store data inside HTML documents. we identify data using tags (identifiers enclosed in angle brackets). using the DOM and XPath. The author of HTML documents can only use tags that are defined in the HTML standard. the chapter explains basic techniques for working with this data.Chapter 1 1 Introduction This module explains how to use JavaScript to work with XML data. Thus we can use XML to create an unlimited number of our own custom tags and attributes. The tags used to markup HTML documents and the structure of HTML documents are predefined. software and tools) to increase the potential of the Web as a forum for information. XML is a markup language much like HTML. XML is a text-based markup language that is fast becoming the standard for data interchange on the Web. HTML was designed to display data and to focus how data looks.

horizontal tabs. . With XML this data can now be stored in a separate XML file. Attributes cannot contain multiple values (elements can). XML can also be used to store data in files or in databases. Attributes are more difficult to manipulate by program code. Arabian.As described above. For multi-language support XML supports 16-bit Unicode (ISO/IEC 10646).as in programming languages document type declaration. All white space characters within the content of elements is preserved by parsers while multiple white space characters within element tags and attribute values may be removed and replaced with a single white space character. In general. Converting data to XML can greatly reduce this complexity and create data that can be read by different types of applications. The following conditions for an XML document must be satisfied. and be sure that changes in the underlying data will not force changes to any of our HTML code. and generic applications can be used to display the data. line feeds and/or carriage returns is treated in XML as a single white space. character data nodes must be non-empty and non-adjacent to other character data nodes elements nodes. To simplify processing. An XML document is an ordered. labeled tree: character data leaf nodes contain the actual data (text strings) where usually. XML documents may be encoded in a range of character sets. Indian. Japenese and Chinese language. Of the roughly 40 000 characters defined by Unicode about 20 000 characters are used for Mandarin and other Chinese languages. In addition. This way we can concentrate on using HTML for formatting and display. Attributes cannot describe structures (like child elements can). One of the big problems is to exchange data between such systems over the Internet. and a set of attributes. XML parsers were required to replace all end-of-line delimiters with a single line feed. namely carriage-return (CR). There are three commonly used end-of-line delimiters. Data are often stored inside HTML pages. HTML pages are used to display data. Semitic. we should avoid attributes.annotations for various processors comments . 11 000 for Hangul (Korean). Applications can be written to store and retrieve information from the store. XML trees may contain other kinds of leaf nodes: processing instructions . XML can store data inside HTML documents as so-called data islands. Computer systems and databases contain data in incompatible formats. are each labeled with a name (often called the element type). However. line-feed (LF) or carriage-return + line-feed (CR+LF). Unicode supports all spoken languages including the European. Attributes are not expandable (for future changes). each consisting of a name and a value. These nodes can have child nodes. The remaining 9 000 characters suffice for most characters of the remaining spoken languages of the world. Any combination or repeated occurances of space characters. Attribute values are not easy to test against DTD (Document Type Definition).

&quot. numbers. Recall that an XML document is an ordered. with certain limitations: The first character of an XML tag must be an upper or lower case letter. the underscore (_) is a common symbol used to add space between words.This is a comment --> XML documents require a root element. Colons should. For example <?xml version="1. Since well-formed XML docs are complete by itself. The remaining characters can be composed of any combination of upper or lower case letters. periods..0. A no value signals the parser that it should import other mark-up files. Opening and closing tags must therefore be written with the same case.0" standalone="yes" encoding="ISO-8859-1"?> where <? begins a processing instruction. The command encoding indicates which international character set is used. The markup standalone states if this file is completely by itself. Note that XML names are case-sensitive. hyphens.). however. in the same way <HTML> . version identifies the version of XML specification in use. &apos.1) All XML elements must have a closing tag. Names starting with these characters are reserved for W3C use only. These entity references must be used for literal left and right angle brackets which are used in XML as element tag delimiters. The subsequent characters may include the latter plus numerals. In XML the attribute value must always be quoted. For this reason XML introduces five standard entity references &lt. colons. Version 1. such as an external DTD (Document Type Definition).. &amp. 2) XML tags are case sensitive. xmL. Furthermore. ISO-8859-1 is the default and is essentially the English character set. XML elements can have attributes in name/value pair just like in HTML. The very first line of every XML document must be the XML declaration. &amp. XML attributes are normally used to describe XML elememts. dashes and full-stops. these characters must be supplied in another way. or underscores.. Our tags can be composed of almost any string of characters. Xml. xml declares this to be an XML instruction. an XML parser interprets <BOOK> and <book> as two different tags. or a colon. 5) Attributes must always be quoted. 3) All XML elements must be properly nested. XML names should not start with the three letters XML in any case (xml. an underscore character or a colon. or to provide additional information about elements. Since spaces are not allowed in elements names. These entity references must be used for single and double quotes which are used in XML as element tag delimiters. Recall that HTML tags are not case sensitive. Capitalizing the first letter of each word in the element is another way to delineate separate words. The root element appears only once and encapsulates the entire XML elements and data in the document. be used for namespace delimiters. the underscore. The markup ?> terminates the processing instruction. this attribute value would be yes. Ampersands are used in XML for entity . A comment is given by <!-.. labeled tree. Since XML uses certain characters for its own syntax. &gt. For example. 4) All XML documents must have a root tag. . </HTML> contains the contents of an HTML document.0 is the only current version so the value must be 1. XML names may only start with a letter. must be used for literal ampersands.

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> . Ice Browser. <?xml version="1. Opera 4+. We save the XML with any filename and an .xsl"?> <!-. Furthermore library is the root element appearing only once and containing all the other elements.xml --> <library> <book> <title> SymbolicC++ </title> <subtitle> An Introduction to Computer Algebra </subtitle> <author> Tan Kiat Shi.0" standalone="yes"?> <people> <person> <sex> male </sex> . </book> block would be one row in the table library. The first line is the XML declaration. NetScape 6. It defines the XML version of the document.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. The attribute is sex. or Mozilla. <?xml version="1. The following example shows how to use an attribute.references. Then we load the file onto an XML-parser such as IE 6.File name: library..address: file://c:\books\java\library. In the following we give an example.0" standalone="yes"?> <?xml-stylesheet type="text/xsl" href="library. Willi Hans Steeb.xml --> <!-. <?xml version="1.xml extension..

y) = 2x3y2 ¡ 4y5 could be encoded in XML as <?xml version="1.2 Schema A schema is a formal way of defining and validating the content of an XML document.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. Not only do we get to create custom XML tags. A well-formed XML document that conforms to its schema is said to be valid. Thus we can assign specific data types to specific XML data values. but we can also denote that an XML data value is. A schema . A schema is a structured document which must obey XML syntax rules. for example.<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. The schema is how we assign the data types to each tag and any attributes that are contained in the XML document. an integer data type. 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.

This tag must be closed. 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"> . The type attribute provides the data type of the custom attribute. This tag must be closed. The dt:type attribute dictates the data type of the attribute. This tag must be closed. If we are using IE 5 to view our XML document. The element tag is used to associate a previously data typed tag to an element. 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. The type attribute provides the type of the custom XML element. The permitted values are: binary boolean byte date decimal double float int integer long negativeInteger nonNegativeInteger nonPositiveInteger positiveInteger recurringInstant short string time timeDuration timeInstant unsignedByte unsignedShort unsignedInt unsignedLong The attribute tag is used to associate a previously data typed attribute to a tag. The value is a URL or URN address that the browser will access to get information on the data types to allow code validation. This tag must be closed. The xmlns attribute is used to declare the data types of the schema XML namespace. . The tag must be closed. The dt:type attributes dictates the data type of the tag (element). The name attribute provides the name of the attribute. </Schema> The AttributeType tag is used to declare the data type for an attribute of an XML tag. 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. There are 23 permitted values (see above). The xmlns:dt attribute is used to declare the data types of the schema XML namespace... The content attribute describes the intended content of the XML tag. There are four permitted values: Type Description ======= =============================== eltOnly contains only elements empty contains no content mixed contains both elements and text textOnly contains only text ========================================== The name attribute provides the name of the tag (element). The ElementType tag is used to declare the data type for a custom XML tag.can be part of the XML document or a separate file.

Attributes. Entities are variables used to define common text. <?xml version="1. PCDATA is text that will be parsed by a parser.xml --> <!-. CDATA is text that will not be parsed by a parser. Entities are expanded when a document is parsed by an XML parser.familytree.dtd"> <familytree> <person id="p1" sex = "m"> <name> Olaf </name> </person> <person id="p2" sex = "m"> <name> Theo </name> <father person = "p1" /> </person> <person id="p3" sex = "m"> <name> Ario </name> <father person = "p1" /> </person> . We think of character data as the text found between the start tag and the end tag of an XML. XML provides an application independent way of sharing data. the HTML entity reference &nbsp. independent groups of developers can agree to use a common DTD for interchanging data. We can also use a DTD to verify our own data.0"?> <!-.dtd --> <!-.attributes keyword ATTLIST --> <!-. For example.PCDATA parseable character data --> <!-. XML documents (and HTML documents) are made up by the following building blocks: Elements. Our application can use a standard DTD to verify that data that we receive from the outside world is valid.3 Document Type Definition The purpose of Document Type Definition (DTD) is to define the legal building blocks of an XML document.DTD describing an individual person --> <!ENTITY % reference "person IDREF #REQUIRED"> <!ELEMENT person (name | father)*> <!ATTLIST person id ID #REQUIRED sex (m | f) #IMPLIED> <!ELEMENT name (#PCDATA)> <!ELEMENT father EMPTY> <!ATTLIST father %reference.familytree. Attributes are placed inside the start tag of an element. is used to insert an extra space in an HTML document. CDATA also means character data. Tags inside the text will NOT be treated as markup and entities will not be expanded. Entities.2. PCDATA. Tags inside the text will be treated as markup and entities will be expanded. Entities references are references are references to entities. A DTD can be declared inline in our XML document or as an external reference. With a DTD.Each person is identified by a unique ID --> <!DOCTYPE familytree SYSTEM "familytree. CDATA Attributes provide extra information about elements.0"?> <!-. An example with an external reference is given below.> The XML file is given by <?xml version="1. Tags. PCDATA means parsed character data. Attributes come in name/value pairs.

that are only recognized on IE 4. transferring the data to the client side for future access. For processing the XML file we have to provide an XSL file. This involves taking the XML data from the server-side. it can be viewed on IE 5 and 6. datasrc and datafld. <span> or <div> elements can be used to display XML data. These attributes are very easy to use and only require one line of code to access an XML data value. <HTML> <TITLE> Data Binding </TITLE> <BODY> <xml id="xmlLibrary" src="file://c:\books\java\library. We use the HTML span tag for the data binding. For our data binding example we use the MyXML. The data is treated like a record set in ADO (ActiveX Data Object) and the data can be manipulated by using the various methods and properties of the ADO Recordset object. The datafld attribute is used to name the XML data field that we wish to display. IE 5 and IE 6. Once the data is bound to an HTML tag. We use the datasrc attribute to link each span element to the xml element. We use the datafld attribute to bind the specified XML data value to the span element. and binding the data to an HTML tag. We apply RecordCount and AbsolutePosition ADO properties to limit our data navigation so that we never go to BOF or EOF. We use previous and next input buttons to call data navigation functions. Note that this is a complete HTML element with both an opening and closing tag. The datasrc attribute allows the linking of the HTML tag to the XML data document. There are fifteen HTML tags that can be used for data binding: a applet button div frame iframe img input label marquee object select span table textarea These fifteen tags can use two special proprietary attributes. To do so. 2. This will be invaluable for later processing of individuals. we use the src attribute of an inline xml element to link our HTML page to the XML document. We use MoveNext() and MovePrevious() ADO methods to navigate our data. we use these features to navigate through our data.<person id="p4" sex = "m"> <name> Carl </name> <father person = "p2" /> </person> </familytree> Each person is identified by a unique id. The sign # signifies a link.xml file with the library example.4 Displaying XML using Data Binding Internet Explorer 5 and 6 contain a DSO (Data Source Object) that permits displaying the data in an XML document on an HTML page by using the technology of client-side data binding. In our example. We want to create an HTML page that displays the XML data for the title subtitle author ISBN publisher city year We want to be able to scroll through the list of books using navigation buttons and see the data for any book.xml"> </xml> <B> Use the buttons to scroll up and down the library </B> <BR><BR> TITLE: <span datasrc="#xmlLibrary" datafld="title"></span> .

5 Displaying XML Using XSL XSL is the acronym for the Extensible Stylesheet Language which is an application of XML. XSL can be used on the server-side so that the output is browser independent. xsl:. Like XML. We use XSL to transform an XML document into an HTML page that can be viewed on Internet Explorer. XSL is a powerful styling language that uses special stylesheets to create templates to display the data contained in an XML page in a variety of ways.recordset. XSLFO is thus reponsible for rendering information in a visual way. All XSL tags have the same namespace prefix. It is composed of twenty tag-like elements and associated attribute-like methods.<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.movePrevious().recordset.AbsolutePosition < xmlLibrary. The Microsoft version and XSL does not fully support all the recommendations set for this language by the World Wide Web Consortium (W3C).recordset. PDF or LaTEX. After the prefix. to denote that this is an XSL element. However. Notice the use of the colon.RecordCount) xmlLibrary. XSL is composed of two parts: XSLT which stands for XSL Transformation and is used to transform from an XML doucment to another format which may be HTML. the suffix . } </SCRIPT> </BODY> </HTML> 2. all XSL elements must have an opening and closing tag. We do this by creating a separate XSL document that is linked to the XML document. XSLFO which stands for XSL Formatting which is the native XML equivalent of Cascading Style Sheets (CSS).moveNext(). } function Next() { if(xmlLibrary. XSL is not a large language.recordset. This technology can be used with IE 5 and IE 6.recordset.AbsolutePosition > 1) xmlLibrary.

. 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> The file library.0" standalone="yes"?> <?xml-stylesheet type="text/xsl" href="library.org/1999/XSL/Transform"> The next element we use is xsl:for-each This element is used to create a for .. xsl:value-of The xsl:value-of element is used to insert the value of the XML data field into the template.address: file://c:\books\java\library.0"?> <xsl:stylesheet version="1. We use the select attribute to specify the name of the XML data element. In order for this to work in IE 6. We use the select attribute to specify the name of the XML data field.xml --> <library> <book> <title> SymbolicC++ </title> <subtitle> An Introduction to Computer Algebra </subtitle> <author> Tan Kiat Shi. In order to display our XML document. The xsl:value-of element allows us to display the data value for an XML tag.xml file is given by <?xml version="1.xsl is given by <?xml version="1.File name: library.xsl"?> <!-. xsl:template The xsl:template element is used to define a template. We use it in this manner in our example.designates the tag’s purpose. each loop which allows looping through all the values for an XML data field.w3. The Library.w3. we must use the following code exactly <xsl:template xmlns:xsl="http://www.0" xmlns:xsl="http://www. An example is given in the following. It can also be used as a container element to declare the start and stop of an XSL coding sequence.org/1999/XSL/Transform"> <xsl:template match="/"> <HTML> <BODY> <xsl:for-each select="library/book"> <DIV> .xml --> <!-. we only need three of the XSL elements.

File name: If. </result> block for the xml-file. The file if.address: file://c:\books\java\if.xml --> <?xml-stylesheet type="text/xsl" href="if.0" xmlns:xsl="http://www. We only want the display the table for the participants who have more than 200 points.xml --> <!-.xsl-file is given by <?xml version="1.0"?> <!-. 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> .TITLE: <xsl:value-of select="title"/> <BR/> AUTHOR: <xsl:value-of select="author"/> <BR/> YEAR: <xsl:value-of select="year"/> <HR/> </DIV> </xsl:for-each> </BODY> </HTML> </xsl:template> </xsl:stylesheet> To put an conditional if test against the content of the file.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..0"?> <xsl:stylesheet version="1.org/1999/XSL/Transform"> <!-.xsl --> <xsl:template match="/"> <HTML> .w3.xml is given by <?xml version="1.address: file://c:\books\java\if. XML The if.

.0"?> <xsl:stylesheet version="1.<BODY> <TABLE border="2"> <TR> <TH> Name </TH> <TH> Points </TH> </TR> <xsl:for-each select="ranking/result"> <xsl:if test="points &gt.w3.0" xmlns:xsl="http://www.xml --> <?xml-stylesheet type="text/xsl" href="sort. 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> The following two programs show an application of xsl:sort.org/1999/XSL/Transform"> <xsl:template match="/"> <HTML> <BODY> <TABLE border="2"> .xsl is given by <?xml version="1." data-type = "text/number" case-order = "upper-first/lower-first" The file sort.address: file://c:\books\java\sort.xsl"?> <ranking> <player> <name> Snowbird </name> <points> 723 </points> </player> <player> <name> Adler </name> <points> 323 </points> </player> <player> <name> Eagle </name> <points> 173 </points> </player> </ranking> The file sort.. The attributes we can use are order = "ascending/descending" lang = ".xml --> <!-.xml is given by <?xml version="1.File name: Sort.0"?> <!-.

etc. . Metadata is stored as a bunch of IIOMetadataNodes.dom. is a Node. IIOMetadata contains meta information about the image. using the XSLT transformation package. For example <P> This is Chapter 1 </P> has created two nodes: an element P and a text node with the content This is Chapter 1. each object. so not the actual pixels.dom interface. If we consider <P> This is <B> Chapter 1 </B> </P> the element node P has two children.<TR> <TH> Name </TH> <TH> Points </TH> </TR> <xsl:for-each select="ranking/player"> <xsl:sort select="points" order="descending" data-type="number"/> <TR> <TD><xsl:value-of select="name"/></TD> <TD><xsl:value-of select="points"/></TD> </TR> </xsl:for-each> </TABLE> </BODY> </HTML> </xsl:template> </xsl:stylesheet> 2. If we convert from one format to another. so it is considered a child node of the element. the element is considered the parent node of the text node. The web site is http://www. builds an internal model for the XML document which is a tree. keywords.w3. <P> | ----------------------|| This is <B> | Chapter 1 Next we show how to display image metadata with ImageIO as XML-file using DOM.* The Document Object Model (DOM) is a platform. one of which has a child of its own. but the compression. Conversely. The text node is inside the element.jpg. but plug-ins may support the plug-in neutral format. structure and style of documents.w3c. A ImageTranscoder understands this meta data and maps it onto another format. The following example program displays. The document can be further processed and the results of that processing can be incorporated back into the presented page.6 Using org.and language-neutral interface that will allow programs and scripts to dynamically access and update the content. extracting elements. whatever it may be exactly. comments.w3c. the offical W3C API for XML.org In order to construct the tree it has to read the XML document sequentially. Internally. DOM. In the Level 1 DOM. attributes and name space definitions as well as processing instructions. They implement the org. The format of this DOM tree is plug-in dependent: the native format (as format features are different). we do not want to loose this information. Given a jpeg-file Image0.

import javax.getImageReadersByFormatName("jpg").*.xml.image.io. import javax.transform. set options . control structures. reader. the only browsing software available for it was text-based. ImageReader reader = (ImageReader) readers. import javax.createImageInputStream(new File("Image0.parsers.*.*. BufferedImage bi = reader. and statements.getAsTree(metadata.0 and later. pre-validate a form before the user’s response is sent to our company’s server. JavaScript is a crossplatform.*. ImageInputStream iis = ImageIO.dom. // for Node class public class Main { public static void main(String []args) throws Exception { Iterator readers = ImageIO.1 Introduction The HTML language used to create pages for the World Wide Web was originally designed to produce plain and static documents.java import javax.newTransformer(). and Math.awt.the plug-in neutral format.dom. Transformer transformer = tf.xml. // Main. import javax. object-oriented language.transform. When the Web first started.stream.transform.metadata. import java. Date. stuff like engineering notes and long-winded arguments by scientist types. Node node = (Node) metadata. and a core set of language elements such as operators.*.*. Core JavaScript contains a core set of objects as Array. import javax.*. We can create a JavaScript program to add sound or simple animation.*.transform(new DOMSource(node). JavaScript is a scripting language for HTML and the Netscape Navigator browser. } } Chapter 3 JavaScript 3.xml.new StreamResult(System.imageio.setInput(iis. import java.getImageMetadata(0).true).jpg")).*.*. transformer. import java. version 2.util.out)).imageio. import javax.next().stream. search through a small database. // use the XSLT transformation package // to output the DOM tree we just created TransformerFactory tf = TransformerFactory.xml. JavaScript makes HTML come alive.getNativeMetadataFormatName()). JavaScript “scripts” are small programs that interact with Netscape and the HTML content of a page.imageio. IIOMetadata metadata = reader. import org.*.read(0).newInstance().w3c.

for example: Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model. A JavaScript object has properties associated with it. 3.0 and later versions.based on user preferences. It is a scripting language in which the program is embedded as part of the HTML document retrieved by the browser. namely // . automating some task or enhancing a feature of the program. Netscape needs to be told that we are giving it JavaScript instructions..2 Document Object . and we cannot put JavaScript instructions outside the <SCRIPT> tags. JavaScript is designed on a simple object-based paradigm. 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. JavaScript is designed for use with Netscape and surfing on the World Wide Web. As the co-developer of JavaScript. as well as in Microsoft Internet Explorer 3. JavaScript is used in Netscape 2. and much more.propertyName Note that JavaScript is case-sensitive. We cannot put HTML tags for Netscape to render inside the <SCRIPT> tags. over two dozen companies jumped on the bandwagon. JavaScript programs are not in separate files (though this is an option using Netscape 3. When JavaScript was first announced in December of 1995. Thus JavaScript is an authoring language for the typical Web page designer. </SCRIPT> tags. JavaScript performs the same function as a macro in a word processor or electronic spreadsheet program. we can define or own objects. The difference here is that instead of a word processor or electronic spreadsheet application. it stops to process it. Because JavaScript is embedded in HTML documents. promising to support it in future products.. and <IMG>. and /* .0 and later). <P>. Within the script tag we can have only valid JavaScript instructions. An object also has functions associated with it that are known as the object’s methods. Comments in JavaScript are the same as in C.. Unlike a program witten in Java. DOCUMENT OBJECT 49 3.2. When Netscape encounters a JavaScript instruction. */ Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects.0 and later versions. An object is a construct with properties that are JavaScript variables or other objects.. A macro is a small program designed solely to run inside a program. Netscape has wanted to make JavaScript an open’standard. For example. In addition to objects that are predefined in the Navigator client and the server. C++ and Java. The only requirement is that the editor must allow direct input. the JavaScript instructions are mixed together with familiar HTML markup tags such as <H1>.. meaning that other companies can use and implement JavaScript in their own Internet products. Serverside JavaScript extends the core language by suppling objects relevant to running JavaScript on a server.. Instead. and these instructions are enclosed between <SCRIPT> . the instruction might tell Netscape to format and display text and graphics on the page. We access the properties of an object with a simple notation objectName. we can use any text editor or Web page editor to write our JavaScript programs.

As an exmple of these two commands consider <HTML> <HEAD> <TITLE> document. which writes text to the browers window.writeln("text")."<BR>").bgColor = "red". The command document.write("<P> str1 = " + str1 + " str2 = " + str2). when it was last modified.3 Window Object The window object represents the contents of an entire browser window. Then + will do concatenation. and the color of the background. except that writeln appends a new line character to the end of the string. . The following program shows that the prompt provides a string even if we enter digits. Thus the write and writeln methods insert text into the document."").write("x = " + x. // addition of numbers </SCRIPT> </HTML> 3. The two methods are identical. </SCRIPT> </BODY> </HTML> The concatention operator + concatenates two strings values together. JavaScript assumes that we mean the current window when we use the syntax given above. Thus to obtain numbers we use the Number object."<BR>"). sets the background color to red.write("Hello Egoli").write("text"). The document methods interact with the document. // concatenates strings n and m u = Number(n).bgColor = "red". The method open() is a method to open a new window. str2 = "hans". str1 = "willi". r = u + v. document. document.""). The most commonly used document method is document. document. document. x = n + m. v = Number(m).html </TITLE> </HEAD> <BODY> <SCRIPT> document.write("\n"). The document objects is itself a property of the window object. m = prompt("enter m: ". <HTML> <SCRIPT> n = prompt("enter n: ".The document object contains information about the current document. and document. document. such as its title.write("r = " + r.

and hold execution of the script until the user responds. depending upon which button was clicked. .win = window. The confirm(message) carries an OK and a Cancel button. They all display a dialog box asking for user input. We use it to obtain information on pages where we do not want to have a form. The dialog box prompt(message. All three display a (fixed) title and a message. JavaScript has three ready-made dialog boxes that we can use to interact with our visitors. The assignment operator = assigns a value to its left operand based on the value of its right operand. We use this method whenever we wish to display a message. NULL. The dialog boxes are alert(message) confirm(message) prompt(message.default) carries a text box and OK and Cancel buttons. Since JavaScript is case sensitive. and returns the value true or false. such as 18 or 2.html"). The user interface methods are special methods of the window object. a special keyword denoting a null value. if(confirm("Do you want to do this?")) alert("Let us begin") else alert("In any case we do it") lnum = prompt("Enter your lucky number".14159. For example i = 4. It returns whatever text was entered. nfound = false.81 logical (boolean) values. null is also a primitive value. undefined. a top-level property whose value is undefined. found = true. The user reads the message and chooses OK to dismiss the dialog box. This message is diplayed in a dialog box. The null value behaves as 0 in numeric context and as false in boolean context.""). fills it with the specified document. <HTML> <HEAD> <TITLE> window. JavaScript recognizes the following types of values: numbers. x = 3. // "" clears text box </SCRIPT> </BODY> </HTML> 3. or any other variants. null is not the same as Null.4 Data Types Data types must not be declared we just define them.open("OpenMe. which we can set. The String literal is zero or more characters enclosed in double " or single ' quotation marks. We apply it when we are offering our visitor a simple Yes/No choice. null (null value). undefined is also a primitive value. either true or false strings such as willi.html </TITLE> </HEAD> <BODY> <SCRIPT> alert("System dialog boxes"). We use confirm() in an if() test.default) The most important one is alert("message").

// => null div = n/4. 3. var max = 500.write("n = " + n."<BR>"). Variables can also be declared using the keyword var. // => 0 r = "The answer is " + 60. document. myList = ["Berlin". document. document. document. we can also include special characters in strings."<BR>"). DATA TYPES 53 <HTML> <HEAD> <TITLE> DataTypes."<BR>"). . document. "Singapore"].str = "xxxyyy". The rules for variable names are the same as those for object names.write("c = " + c."<BR>").write("i = " + i. The special characters are Character Meaning ========= ========= \b backspace \f form feed \n newline . document. document. In addition to ordinary characters. c = 'X'. document."<BR>").5 Special Characters A string literal is zero or more characters enclosed in double " or single ' quotation marks."<BR>")."<BR>"). Names must start with a letter or underscore and may contain any combinations of letters and digits.14159."<BR>"). str = "xy".write("myList[1] = " + myList[1]. s = 60 + " is the answer".4.write("s = " + s.write("str = " + str. but without giving it a value.write("x = " + x. document. document.write("r = " + r. For example var username.html </TITLE> </HEAD> <BODY> <SCRIPT> i = 4. document. found = true."<BR>"). c = 'X'. x = 3.write("found = " + found. n = null.write("div = " + div. the second creates max and assigns 500 to it. The first line creates the variable username.write("nfound = " + nfound. "London". Spaces cannot be used. nfound = false. // => undefined </SCRIPT> </BODY> </HTML> 3."<BR>")."<BR>").

write("str3 = " + str3.decrement operator As in C.-H.write("str2 = " + str2."<BR>"). SPECIAL CHARACTERS 55 document. \251 is the octal sequence for the copyright symbol \xXX character with the Latin-1 encoding specified by the two hexadecimal digits XX between 00 and FF.html </TITLE> </HEAD> <BODY> <SCRIPT> str1 = "one line \n another line". Steeb" 3.6 Arithmetic Operations The arithmetic operations are + addition . // @ symbol2 = "\xA9" document.\r carriage return \t tab \' apostrophe or single quote \" double quote \\ backslash character \ \XXX character with the Latin-1 encoding specified by up three octal digits XXX between 0 and 377.subtraction * multiplication / division % modulus (remainder) ++ increment operator -."<BR>"). Thus 1/4 returns 0. JavaScript also has the shorthand operators x += y for x = x + y etc."<BR>"). We notice that division is floating point division.have a preincrement (predecrement) and postincrement (postdecrement) version. ====================================================== ========= The following program shows an application <HTML> <HEAD> <TITLE> Special. \xA9 is the hexadecimal sequence for the copyright symbol. document.25. // one line another line s = "one line <BR> another line".write("symbol1 = " + symbol1. C++ and Java the operators ++ and -.write("s = " + s.write("symbol2 = " + symbol2. The following program shows how the arithmetic . document. // @ </SCRIPT> </BODY> </HTML> 3. str3 = "She reads \"The Nonlinear Workbook\" by W.5. symbol1 = "\251" document."<BR>"). document."<BR>").write("str1 = " + str1. // s = one line // another line str2 = "a tab \t in a string"."<BR>").

document.write("<BR> r = " + r + "<BR>"). i++.j. document. document.write("<BR> m = " + m + "<BR>").html </TITLE> </HEAD> <BODY> .html </TITLE> </HEAD> <BODY> <SCRIPT> i = 7.write("<BR> j = " + j + "<BR>"). The following table describes the comparision operators Operator Name Description ======== ============ ========================================== == equal returns true if the operands are equal != not equal returns true if the operands are not equal > greater than returns true if the left operand is greater than the right operand >= greater than returns true if the left operand is or equal greater than or equal to the right operand < less than returns true if the left operand is less than the right operand <= less than returns true if the left operand is or equal less or equal to the right operand ====================================================== ============= <HTML> <HEAD> <TITLE> Comparison. The operands can be numerical or string values.write("<BR> i = " + i + "<BR>").write("<BR> n = " + n + "<BR>"). j = -3. r = i%j. document.write("<BR> k = " + k + "<BR>"). m = i . k = i + j. document. Strings are compared based on the standard lexicographical ordering (ASCII table). j--.operators are used. n = i*j. p = i/j. document.write("<BR> p = " + p + "<BR>"). document. </SCRIPT> </BODY> </HTML> 3.7 Comparison Operators A comparison operator compares its operands and returns a logical value based on whether the comparision is true. <HTML> <HEAD> <TITLE> JSArith.

// XOR p4 = ~m."<BR>").write("p1 =" + p1. // => 1073741821 </SCRIPT> </BODY> </HTML> The following program shows how the bitwise operation & and the shift operations are applied for the Russian farmer multiplication. <HTML> <HEAD> <TITLE> Bitwise. // increment by 1 document. // => -9 document."<BR>"). // => true </SCRIPT> </BODY> </HTML> 3."<BR>"). // AND p2 = m | n.html </TITLE> </HEAD> <BODY> <SCRIPT> m = 9. document."<BR>"). document.write("q3 = " + q3.write("result1 = " + result1.8. // => -9 q1 = 31 >> 2. For example the decimal number 14 has the binary representation 14 -> 00000000 00000000 00000000 000001110 The bitwise operators are the bitwise AND &. // => -3 q4 = -9 >>> 2. // => 0 document. // => true result2 = (3 != 3).8 Bitwise Operators Bitwise operators treat their operands as a set of 32 bits (zeros and ones). document. // => 7 q2 = 3 << 3. Furthermore we have the left shift <<. p1 = m & n."<BR>"). // => 25 document. // => 24 q3 = -9 >> 2."<BR>").write("result2 = " + result2."<BR>"). document.write("p4 =" + p4. the bitwise OR |. BITWISE OPERATORS 59 <HTML> <SCRIPT> .write("p2 =" + p2.write("p3 =" + p3.write("q4 = " + q4. // => 25 document. document."<BR>"). // NOT p5 = ++p4. // OR p3 = m ^ n.<SCRIPT> result1 = (3 == 3). document.write("result3 = " + result3.write("p5 =" + p5. document. n = 16.write("q2 =" + q2."<BR>"). 3. the bitwise XOR ^. the sign-propagating right shift >> and the zero-fill right shift >>>.write("q1 =" + q1."<BR>"). // => false result3 = (4 > 2)."<BR>")."<BR>"). and the bitwise NOT ~.

9 Program Flow JavaScript supports a compact set of statements we can use to control the program flow. if((m & 1) == 1) temp = n + temp."").. There is no goto in JavaScript.""). } The break statement provides a way of escaping from for or while loops.write(temp).. for. m = Number(x).n++) { x = i*n.write(m. C and C++.x = prompt("Enter m: ".. n = n << 1.write("0"...write(n."<BR>").write(m. while... if(n == 0) document."<BR>").n<10."<BR>"). break. m = m >> 1. if(m == 1) document. document. while.count++) { answer = 4.."<BR>").write(n.. switch. y = prompt("Enter n: ". else. while.write("temp:" + temp. continue. For example . temp = 0. </SCRIPT> </HTML> 3."<BR>").."<BR>"). while(m != 0) { document. n = Number(y). else and switch loop statements: for. .. do . The if . For example for(count=0. do . Note that label is not itself a looping statement."<BR>"). They are conditional statements: if . } The for loop and while loop are the same as in Java. but is frequently used with these statements. if(n == 1) document. } document. document.. for(n=1. while conditions have the form as in Java. label.count<5. The logical operators && logical AND || logical OR ! logical NOT also have the same form as in Java.write("0". Furthermore the relational operators are == equal to < less than <= less than or equal to != not equal to > greater than >= greater than equal to An example is if((i%3) == 0) { . if(m == 0) document.

4. the program executes the associated statement. switch(c) { case 'a': document. } </SCRIPT> </HTML> A switch statement allows a program to evaluate an expression and attempt to match the expression’s value to a case label."<BR>") break."<BR>") break.j++) { switch(MArray[j]) { case 1: document. } } </SCRIPT> </HTML> <HTML> 62 CHAPTER 3. 1.write("character is 'a'". .write("j = " + j.write("<BR>"). 1. -3.html </COMMENT> <SCRIPT> n = 9."<BR>") break.write("number is 3".length.j<=i."<BR>") break.charAt(j). PROGRAM FLOW 61 The following program uses two for loops to generate a triangle of asterisks.i<n. for(j=0. document.9. "<BR>").html </COMMENT> <SCRIPT> MArray = [ 3. <HTML> <COMMENT> MSwitch. 1.i++) { for(j=1. for(j=0.html </COMMENT> <SCRIPT> s = new String("bella").write("*").j<MArray.if(answer == (count*count)) break. 4.j<s.length. JAVASCRIPT <COMMENT> SSwitch.write("number is not 1 or 3".write("number is 1". } 3. If a match is found.j++) { document. case 3: document.j++) { c = s. for(i=1. 6 ]. default: document. } document. <HTML> <COMMENT> asterisk.

} } </SCRIPT> </HTML> The continue statement inside a for loop or while loop skips over any remaining lines and loops round again. in statement. } } alert("We are leaving the first Script block").i<=10. </SCRIPT> <B> Now we use a script again </B> <SCRIPT> sum = 0.write("character is not 'a' or 'b'". </SCRIPT> <BR><BR> <B> Again we enter script to set the background colour </B> <SCRIPT> document. count++.bgColor = "red".write("character is 'b'".write("<BR> sum = " + sum). The form is for(varname in objname) { forbody } The following program shows an example of the for . for(i=1. It uses it to manipulate objects.9. default: document.html </TITLE> </HEAD> <BODY> <SCRIPT> document. } document.write("<P>Loop: " + i + "</P>").. PROGRAM FLOW 63 The following HTML file gives an example how the for loop and the while loop is used.write("Hello Egoli").."<BR>") break."<BR>") break. while(count < 10) { sum += count. <HTML> <HEAD> <TITLE> JSLoop.. </SCRIPT> </BODY> </HTML> JavaScript also has a for . in statement. count = 0. .case 'b': document.i++) { if((i%2) == 0) { document. 3..

var result2. } </SCRIPT> </BODY> </HTML> The purpose of the with statement in JavaScript is to permit a number of object references to be made to the same object (or instance) without having to repeat the name of that object. result2 = sin(a)*sin(a) + cos(b)*cos(b). </SCRIPT> </BODY> </HTML> 3.<HTML> <TITLE> forin. if(label == 0) { document. with(Math) { result1 = PI*a*b."<BR>"). <HTML> <HEAD> <TITLE> with.write("label = " + label. "Java". for(var i in languages) { if(language == languages[i]) { document.html </TITLE> </HEAD> <BODY> <SCRIPT> var a = 3.write("result1 = " + result1. label = 1.write("language in list on position: " + i. var label = 0. document.write("language not in list")."<BR>"). var b = 7.0. "C".0. var result1. "Lisp"].html </TITLE> <BODY> <SCRIPT> languages = ["C++".10 Recursion . } } document."<BR>"). } document.write("result2 = " + result2. A with statement looks as follows with(object) { statements } The following with statement specifies that the Math object is the default object. var language = "C"."<BR>").

12 Functions JavaScript allows the use of functions indicated by the keyword function. n = Number(x). <HTML> <COMMENT> recursion. Option. or an element at a specified index in an array. </SCRIPT> </HTML> 3. The void operator specifies an expression to be evaluated without returning a value. The var statement also sets the scope of a variable when a function is defined inside a function. both of these do exactly the same. Image. this can refer to the current object’s parent form.Recursion plays a central role in computer science. Functions. We use the var statement to explicitly declare a variable. The delete operator deletes an object. Object. String An example is mystring = new String("xxyy"). The following program shows how to use recursion for the generatimg of the Fibonacci numbers. Boolean. A recursive function is one whose definition includes a call to itself. JavaScript allows recursion. Both create a global variable. If we use var name1 inside a user-defined function it is local in scope. A recursion needs a stopping condition. JavaScript also has the this pointer which refers to the current object. In general."").write("Fibonacci number is: " + result. an object’s property. The var . For example var name1 = "value". A global variable can be accessed from any function in any window or frame that is currently loaded. a recursive method is a method that calls itself either directly or indirectly through another method. Date. document. but this is not necessary. We may also define a value for the variable at the same time we declare it. We can use the new operator to create an instance of a user-defined object type or one of the predefined object types Arrays. } result = fib(n). this refers to the calling object in a method. now = new Date(). name1 = "value". Number. 3.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. The syntax is this this. Used outside of a user-defined function. When combined with the FORM property."<BR>"). More generally. else return (fib(n-1)+fib(n-2)). function fib(n) { if(n<=2) return 1.11 Other JavaScript Constructs The new operator creates a new copy of an object. RegExp. we only can see it inside the function.html </COMMENT> <SCRIPT> x = prompt("Enter the position of the Fibonacci number".

myWindow.sqrt(i) + "</TD></TR>").e.open("".write("<HR>").write("<B> Square Root Table </B><BR>").document.write("<TABLE BORDER=1 CELLSPACING=5>"). The program opens a window where we see Type something here a textbox and a button called ClickMe. Then we click at the Button ClickMe. it goes out of scope when we leave the function. myWindow.i<=20. The HTML commands to display a table of the square roots of the integers from 1 to 20 are embedded in the JavaScript code. for example Egoli-Gauteng. + "resizable").height=300.form)"> </FORM> </BODY> </HTML> In the following example we show the use of two functions.box.statement inside a function makes the variable local.html </COMMENT> <BODY> <SCRIPT LANGUAGE="JavaScript"> function testMe(form) { Ret = form.write("</TABLE>").document.write("<HR>"). We enter some text in the textbox.write("<TR><TD>Number</TD><TD>Squareroot</TD></TR>"). } function display() { var dynWindow = window. The following HTML file show how functions are used within JavaScript. myWindow."width=200.value.document. } myWindow.document.scrollbars".write("<TR><TD>" + i + "</TD><TD>" + Math.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function sqrttable(myWindow) { myWindow. } </SCRIPT> <FORM> Type something here <INPUT TYPE="text" NAME="box"><P> <INPUT TYPE="button" NAME="button" VALUE="ClickMe" onClick = "testMe(this. <HTML> <COMMENT> MyForm."Title".document.document. <HTML> <COMMENT> Function. for(var i=1. . 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.i++) { myWindow. i. alert("The value of the textbox is: " + Ret). myWindow.document.

2000) document. "Berlin"] . Boolean.14.write("<P> hiscar = " + hiscar. such as joining.13 Creating New Objects Using a constructor function we can create an object with the following two steps 1."Z3"...year = year } mycar = new car("BMW". It has a property for determing the array length and other properties. Define the object type by writing a constructor function 2. For example the following literal is an Array object cities = ["London".model = model this.write("<P> mycar = " + mycar."Beetle"."A6".2000) yourcar = new car("Volkswagen".model) document. and sorting them.14 Predefined Core Objects JavaScript provides the predefined core objects Array.elementN) or arrayObjectName = new Array(arrayLength) Array literals are also Array objects. String.1999) hiscar = new car("Audi".year) document. and methods. Number In the following programs we show how the predefined objects are used.make) </SCRIPT> </BODY> </HTML> 3. Create an instance of the object with new To define an object.sqrttable(dynWindow).. Math. The following HTML file gives an example. An array can be created as follows: arrayObjectName = new Array(element0. PREDEFINED CORE OBJECTS 71 3.write("<P> yourcar = " + yourcar. reversing.element1. An array is an ordered set of values that we refer to with a name and an index. "Paris". The Array object has methods for manipulating arrays in various ways.year) { this.make = make this.model.html </COMMENT> <BODY> <SCRIPT> function car(make. create a function for the object type that specifies its name. } </SCRIPT> </HEAD> <BODY> <FORM name="Show it"> <input type=button value="show table" onClick="display()"> </FORM> </BODY> </HTML> 3.. properties. <HTML> <COMMENT> car.

"<BR>"). document. } document. x[0] = 2. concatArray = myArray. 72 CHAPTER 3. document. yourArray = new Array(3).html </TITLE> </HEAD> <BODY> <SCRIPT> myArray = new Array("C++". x = new Array(2)."+j+"]" } } for(i=0.write(str.join().sort().html </TITLE> </HEAD> <BODY> <SCRIPT> . PREDEFINED CORE OBJECTS 73 str += a[i][j].write(myArray. // => 10 document.write(myArray.write(result. result = x[0]*x[1]. <HTML> <HEAD> <TITLE> Boolean."<BR><BR>").i<4.The first program shows how the predefined core object Array is used. document.length.write("length = " + x. "Java")."<BR>").i<4.concat(newArray).14.j<4. // => 2 a = new Array(4) for(i=0. yourArray = myArray."<BR>").i++) { a[i] = new Array(4) for(j=0. x[1] = 5. JAVASCRIPT <HTML> <HEAD> <TITLE> Array.j++) { a[i][j] = "["+i+". document.i++) { str = "Row "+i+": " for(j=0. concatArray = new Array(5). document.write("yourArray = " + yourArray.write("concatArray = " + concatArray. "Lisp".reverse(). newArray = new Array("Assembler".j++) { 3. "VHDL")."<BR><BR>").j<4."<BR><BR>")."<P>") } </SCRIPT> </BODY> </HTML> The Boolean object is a wrapper around the primitive Boolean data type.

document. document.write("string3 = " + string3.charAt(3).write("myarray[0] = " + myarray[0].split(" ").write("lower = " + lower.toUpperCase(). document."<BR><BR>"). lgth = mystring."<BR>"). calls the method.write("upper = " + upper.write("chcode = " + chcode. // => 34 document. document."<BR><BR>"). upper = yourstring.concat(string2). } else { b = new Boolean(false). </SCRIPT> </BODY> </HTML> The String object is a wrapper around the string primitive data type. // => 11 ch = mystring.write("lgth = " + lgth. string2 = new String("otto")."<BR><BR>"). We should not confuse a string literal with the String object.charCodeAt(3). // creates a String object We can call any of the methods of the String object on a string literal value. // => WILLI-HANS string1 = new String("carl-"). myarray = new Array(3). document."<BR><BR>").write("b = " + b.substring(2."<BR>"). // => 45 .write("myarray[1] = " + myarray[1]. if(r < 0."<BR><BR>"). JavaScript automatically converts the string literal to a temporary String object. string3 = string1. // => carl-otto str = new String("12 34 45"). // => llo lower = mystring. <HTML> <HEAD> <TITLE> String. // => 12 document.html </TITLE> </HEAD> <BODY> <SCRIPT> mystring = new String("Hello Egoli").write("myarray[2] = " + myarray[2]. For example s1 = "egoli". // => l chcode = mystring. The following program shows an application of several methods of the String object.write("sub = " + sub.write("ch = " + ch. // creates a string literal value s2 = new String("egoli").r = Math. myarray = str. document. and then discards the temporary String object. document."<BR><BR>")."<BR><BR>").length."<BR>").toLowerCase(). // => hello egoli yourstring = new String("willi-hans").5) { b = new Boolean(true). document."<BR>").6).random(). } document. // => 108 sub = mystring.

r1 = Math."<BR>")."<BR>").sin(1. document. // => 6 document. with(Math) { a = PI*r*r. // => 3 + 3 </SCRIPT> </BODY> </HTML> 76 CHAPTER 3. document.write(Math. asin.20. sin. floor.9).write("z = " + z.min(3.4.write("r2 = " + r2. tan. document. cos. log ceil. round.random(). max.2. JAVASCRIPT The predefined Math object has properties for mathematical constants and functions. exp.write("r1 = " + r1.0. document.write("result1 = " + eval(s1). The syntax is eval(expr) where expr is a string to be evaluated. acos. s2 = new String("3 + 3").1). document."<BR><BR>"). // 1 </SCRIPT> </BODY> </HTML> . min."<BR>").3."<BR>").max(3.write("result2 = " + eval(s2). atan. <HTML> <HEAD> <TITLE> Eval.html </TITLE> </HEAD> <BODY> <SCRIPT> document. y = r*sin(theta) x = r*cos(theta) } document.write("x = " + x.14159). // 7 r2 = Math.sin(Math. For example abs.write("a = " + a. Standard mathematical functions are methods of Math."<BR>").PI). r = 2.html </TITLE> </HEAD> <BODY> <SCRIPT> s1 = "3 + 3".1.write(Math. document. pow.10."<BR>").write("y = " + y.7. sqrt An application is as follows: <HTML> <HEAD> <TITLE> Math. z = Math.2."<BR>").0."<BR>").</SCRIPT> </BODY> </HTML> The top-level predefined function eval evaluates a string of JavaScript code without reference to a particular object. theta = 1."<BR>"). document.

The Number object has properties for numerical constants, such as maximum value, not-a-number (NaN), and infinity. We cannot change the values of these constants. <HTML> <HEAD> <TITLE> Number.html </TITLE> </HEAD> <BODY> <SCRIPT> biggestNum = Number.MAX_VALUE; document.write("biggestNum =" + biggestNum,"<BR>"); smallestNum = Number.MIN_VALUE; document.write("smallestNum = " + smallestNum,"<BR>"); diff = biggestNum - smallestNum; document.write("diff = " + diff,"<BR>"); infiniteNum = Number.POSITIVE_INFINITY; document.write("infiniteNum = " + infiniteNum,"<BR>"); negInfiniteNum = Number.NEGATIVE_INFINITY; document.write("negInfiniteNum = " + negInfiniteNum,"<BR>"); notANum = Number.NaN; document.write("notANum = " + notANum,"<BR>"); </SCRIPT> </BODY> </HTML>

3.15 Object object
JavaScript supports a generic Object() object, which we can use to make new objects. The following two programs show how to create and use one-dimensional arrays using the Object object. In the first program we enter the colour and click the Find button. The hextriplet is displayed. In the second program we enter the name of the customer and click the Find button. This provides us with the complete information about the customer. The method String toLowerCase() converts a string to all lowercase. <HTML> <HEAD> <TITLE> DataBase.html </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> Colour = new Object() Colour[0]=10 Colour[1]="aliceblue" Colour[2]="antiquewhite" Colour[3]="aqua" Colour[4]="aquamarine" Colour[5]="azure" Colour[6]="beige" Colour[7]="bisque" Colour[8]="black" Colour[9]="blanchedalmond" Colour[10]="blue"

Data = new Object() Data[1]="f0f8ff" Data[2]="faebd7" Data[3]="00ffff" Data[4]="7fffd4" Data[5]="f0ffff" Data[6]="f5f5dc" Data[7]="ffe4c4" Data[8]="000000" Data[9]="ffebcd" Data[10]="0000ff" 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);

write("<B>" + dd + ". DATE OBJECT 83 In the second program we test whether the present time is am or pm.html </TITLE> </HEAD> . var date = new Date(). ParseMark=Start. var mm = date." + mm + ". document. We have to keep in mind that the method getMonth() returns the month of a Date object from 0-11. The following program shows an example. 1=February. } // end function parser() </SCRIPT> <FORM NAME="testform" onSubmit="checkDatabase()"> Enter the customer's name. To store the current date in a variable called my_date: my_date = new Date() After creating an instance of the Date object.getMonth() + 1. <HTML> <HEAD> </HEAD> <!-. where 0=January. var yy = date.16.getYear(). if(yy < 10) yy = "0" + yy. document.write("<CENTER><H2> Today is </H2><BR>").getDate(). } parse[0]=Count. we can access all the methods of the object from the my_date variable." + yy + "</B>"). return (parse). etc. if(dd < 10) dd = "0" + dd.write("</CENTER>"). We create an instance of the Date object with the new keyword. if(mm < 10) mm = "0" + mm. Count++.16 Date Object The Date object is used to work with dates and times.Start=ParseMark+1. 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> 3. var dd = date.File name: Today. <HTML> <HEAD> <TITLE> clockset.html --> <BODY> <SCRIPT LANGUAGE="JavaScript"> document. </SCRIPT> </BODY> </HTML> 3.

getMinutes().getHours(). It returns an array of information.12. test A RegExp method that tests for a match in a string.clock. if(CurMinute < 10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute CurHour = "" + CurHour. and are included as part of the regular expression. To indicate a global search we use the g flag. if(CurHour >= 12) { CurHour = CurHour . for example re = /abc+de/ Using the constructor function provides runtime compilation of the regular expression. To indicate a case insensitive search we use the i flag.17 Regular Expression Regular expressions are patterns used to match character combinations in strings. var CurMinute = now. These flags can be used separatly or together in either order.clocktext. .value = Time. setTimeout("setClock()". now = null. regular expressions are also objects. if(CurHour == 0) CurHour = "12". } else Ampm = "am". Ampm = "pm". We can construct regular expression either using the constructor function of the RegExp object. Regular expression have two optional flags that allow for global and case insensitive searching. Time = CurHour + ":" + CurMinute + Ampm document. The methods that use regular expressions are: exec A RegExp methods that executes a search for a match in a string.1000*30) } </SCRIPT> </HEAD> <BODY onLoad = "setClock()"> <FORM NAME = "clocktext"> <INPUT TYPE="text" NAME="clock" VALUE="" SIZE=8> </FORM> </BODY> </HTML> 3. These patterns are used with the exec and test methods of RegExp.<SCRIPT LANGUAGE="JavaScript"> function setClock() { now = new Date(). In JavaScript. and the match. for example re = new RegExp("abc+de") or using an object initializer. replace. var CurHour = now. search and split methods of String.

or -1 if the search fails. We can specify a range of characters by using a hyphen. It returns an array of information or null on a mismatch. Using ? we can find the matches of the preceding characters 0 or 1 time. The character $ indicates matches at end of input or line. For example. In the following we list some of them. This is equivalent to [0-9]. Again we can specify a range of characters by using a hyphen. [abcd] is the same as [a-d].html </COMMENT> <BODY> <SCRIPT> re0 = /xyx/ result0 = re0. [xyz] is a character set. The command \d matches a digit character. /^X/ does not match the X in "in X" but does match it in "Xenia". The command \f matches a form-feed. The commmand x | y matches either x or y. \t a tab. /x(y)x/ matches the string "xyx" and remembers y. Let n be a positive integer. The expression [^xyz] is a negated or complemented character set. but does match it in "art". \n a line-feed.It returns true or false. This is equivalent to [^0-9]. The backslash \ indicates that the next character is special and not to be interpreted literally.exec("czxyyyxer") document. Using the asterisk * we can test whether the preceding characters matches 0 or more times. and replaces the matched substring with the replacement substring. The + indicates matches of the preceding characters 1 or more times. There are a large number of special characters in regular expressions. It is equivalent to [A-Za-z0-9_]. /el?le?/ matches the "el" in "angel" and "le" in "angle". It returns the index of the match. For example. Then {n} matches exactly n occurrences of the preceding character. The character ^ indicates matches at the beginning of input or line. <HTML> <COMMENT> RegExp. With the command \D we match any non-digit character. Pattern matching in JavaScript and Perl is closely related. match A String method that executes a search for a match in a string. \r a carriage return. For example. /b/ matches the character b. It matches anything that is not included in the brackets. replace A String method that executes a search for a match in a string. split A String method that uses a regular expression or a fixed string to break a string into an array of substrings. The command (x) matches "x" and remembers the match. However /\b/ means match a word boundary. search A String method that tests for a match in a string. t$ does not match the t in "otto". For example. With \w we can match any alphanumeric character including underscore. For example. It matches any one of the enclosed characters. For example. Thus including parentheses in a regular expression pattern causes the corresponding submatch to be remembered.writeln(result0) // => null . The command [\b] matches a backspace and \b matches a word boundary such as space.

yyy re10 = /xx aa$\n/ result10 = re10.writeln(result9) // => xyyyx.writeln(result1) // => xyx re2 = /^X/ result2 = re2.exec("otto") document.$1") document.test("yybb ++") document.writeln(result5) // => null re6 = /le?/ result6 = re6.exec("czxyyyxer") document.writeln(result7) // => aa re8 = /xy+x/ result8 = re8.exec("czxyyyxer") document.exec("ylonX") document.re1 = /xyx/ result1 = re1.writeln(result2) // => X re3 = /^X/ result3 = re3.exec("Xylon") document.writeln(result8) // => xyyyx re9 = /x(y+)x/ result9 = re9.writeln(result12) // => a </SCRIPT> .replace(re11.exec("12345ac") document.writeln(result6) // => le re7 = new RegExp("a+") result7 = re7.exec("angle") 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.writeln(result11) // hans willi re12 = new RegExp("[a-z]") result12 = re12.exec("art") document.writeln(result3) // => null re4 = /t$/ result4 = re4.exec("czxyxer") document."$2.exec("Cbaabbaxc") document.writeln(result4) // => t re5 = /t$/ result5 = re5.

although most often it is a function call.write(k + "<BR>"). The set of all events which may occur. For example.19 Events JavaScript programs are typically event-driven. usually of something the user does. Examples are: a button click is an event. giving focus to a form element. a hyperlink is subject to a mouseover event. document. It displays a dialog box with a single-text box and Cancel and OK buttons prompt(message. i = 1.</BODY> </HTML> 3. Often. Events are actions that occur on the Web page. document. j = k.html </COMMENT> </HEAD> <BODY bgcolor=yellow text=black> <SCRIPT LANGUAGE="JavaScript"> var i.write(j + "<BR>"). the word defaultText is the text displayed in the text box. <HTML> <HEAD> <COMMENT> prompt.18 Prompts The prompt is a special method of the window object.n<=m-1. and not of JavaScript . var j.defaultText) The word prompt tells JavaScript that a dialog box will appear on the screen. for(var n=3. k = i + j. event handlers are placed within the HTML tag which creates the object on which the event acts. j = 1. is part of the Document Object Model (DOM). Lastly. then. document. is the action which triggers an event handler. The JavaScript which is called by the event handler may be any valid JavaScript code: a single statement or a series of statements. and the particular page elements on which they can occur. var m = prompt("enter the number of Fibonacci numbers:".write("<H4>"). document. resizing the page.n++) { i = j. document. submitting a form.write(k + "<BR>"). var k.write(i + "<BR>"). An event. k = i + j. } </SCRIPT> </BODY> </HTML> 3. The word message is the text that is displayed in the prompt box. The event handler specifies which JavaScript code to execute. meaning that its event handler will be triggered when a mouse passes over the link.0).

The user is forced to enter a number from 0 to 9.onresize = message. nor are all page elements subject to the same events between browsers. Event Handler ========== =========================== ============= click User clicks on form or link onclick change User changes value of text.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> window. </BODY> </HTML> 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. onchange textarea. <HTML> <COMMENT> Event1. 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 unload User exits the page onunload The following program shows an example. <HTML> <COMMENT> onblur. Thus.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function isDigit(c) { return ((c >= "0") && (c <= "9")) . function message() { alert("The window has been resized!")... } </SCRIPT> </HEAD> <BODY> Please resize the window. Event Occurs when .itself. The table below displays some of the most commonly used events supported in both DOM’s. Netscape and Microsoft do not share the exact same set of events.

options[URL_List. window.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function jumpTo(URL_List) { var URL = URL_List.selectedIndex]. } } </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.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function informuser() { .rau. <HTML> <COMMENT> onchange.ac. } </SCRIPT> <FORM> <SELECT NAME="site" onChange="jumpTo(this). field. <HTML> <COMMENT> onclick.value)) { alert("You must enter a digit from 0 to 9.za"> ISSC </SELECT> </FORM> </BODY> </HTML> The following example demonstrates the onClick event.ch/~steeb"> Applied University Solothurn <OPTION VALUE="http://issc.value. We built a pulldown menu that allows users to jump to different websites or URLs.fhso.length < 0) || (parseInt(field.location.value. } if((field.focus().} function checkValue(field) { if(!isDigit(field. field.focus().value) >= 10)) { alert("You did not enter a digit from 0 to 9").")."> <OPTION VALUE="http://www.href = URL.

20 Java Applets and JavaScript JavaScript can be used to control the behaviour of a Java applet without knowing much about the design of the applet. Each applet in a document is reflected in JavaScript as document. methods. and properties are available for JavaScript access.java is given by // Welcome. The file Welcome. The following Java program Welcome. } } </SCRIPT> <FORM> <INPUT TYPE=text NAME="phonenumber" SIZE=15 onFocus = "displayHelp(). and calls the repaint() method.html show an application."> </FORM> </BODY> </HTML> 3. alreadyWarned = true. We define a public void setString(String s) method that accepts a string argument.java import java.appletName where appletName is the value of the NAME attribute of the <APPLET> tag."> </FORM> </BODY> </HTML> The following example demonstrates the onFocus event. . function displayHelp() { if(!alreadyWarned) { alert("Enter your phone number in (xx) xxx-xxxx format").Applet.alert("I told you not to press that button"). <HTML> <COMMENT> onfocus.html </COMMENT> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var alreadyWarned = false.applet. } </SCRIPT> <FORM> <INPUT TYPE=button NAME="button" VALUE="Do not press this button" onClick="informuser(). All public variables.java and the HTML program Welcome. assigns it to myString.

Our XML file describes a polynomial. Our polynomial consists of two terms. y) = 2x3y2 ¡ 4y5 : <?xml version="1.21 JavaScript and XML The Document Object Model (DOM) is the model that describes how all elements in the HTML page.25.setString(document. Thus we can use JavaScript to parse an XML document. repaint().drawString(myString.. } public void setString(String s) { myString = s. images.0"?> <!-. paragraphcs etc. public class Welcome extends Applet { String myString. like input fields. Notice that DOM is based on a tree structure. public void init() { myString = new String("Welcome to ISSC") } public void paint(Graphics g) { g.import java. are related to the topmost structure: the document itself. By calling the elements by its proper DOM name.value) } </SCRIPT> <FORM NAME="myform"> <INPUT TYPE="button" VALUE="SET STRING" onClick="insert()"> <INPUT TYPE="text" SIZE="20" NAME="str"> </FORM> </BODY> </HTML> 3.str.poly.Welcome. The Level 1 DOM Recommendation has been developed by the W3C to provide any programming language with access to each part of an XML document.25). namely p(x.Graphics.myform. } } The HTML file is given by <HTML> <COMMENT> Welcome.xml --> <polynomial> <term> .awt.class" NAME="Welcome" WIDTH=275 HEIGHT=135> </APPLET> <SCRIPT> function insert() { document. we can influence it.html </COMMENT> <BODY> <APPLET CODE="Welcome.

firstChild.innerText= Document.innerText= Document.polynomials --> <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD"> Document = polynom. we can walk through it in search of the element we want to find using the commands parentNode.firstChild.firstChild. factor2.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 .childNodes[1].documentElement.firstChild. ... </SCRIPT> </HEAD> <BODY> <xml id="polynom" src="file://c:\books\java\poly.text.firstChild. name1.innerText= Document.<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> Knowing the exact structure of the DOM tree. childNodes[0].firstChild.lastChild.XMLDocument.documentElement. lastChild The following HTML-file with the embedded JavaScript code finds elements in the tree structure of the polynomial. factor1. .text.text. childNodes[1].documentElement. <!-.

for(i=1.i<n.js\"> \n" + "<\/SCRIPT> \n" + " \n" + "<BODY onload=\"window.22 Loading a js-file Given a js file.html and display.write("*").open(). } document. } staticLoad("asterisk.\"> \n" + " \n" + "<B> Date: <\/B><BR>" + Date() + "<BR><BR> \n" + " \n" + "<FORM> \n" + "<\/FORM> \n" + " \n" + "<\/BODY> \n" + .js 3.setInterval(show_time.j++) { document.js"> </SCRIPT> <BODY onload="show_time().Factor 2: -4 3.js we display the time with the time interval of 1000ms (1 second).url. window.js file is function show_time() { document.js").write( "<HTML> \n" + " \n" + "<SCRIPT src=\"display. <HTML> <!-. document. LOADING A JS-FILE 99 n = 9.1000).display.22. </SCRIPT> </HTML> In the following two programs display.1000). } The file is loaded in a HTML file as follows <HTML> <SCRIPT type="text/javascript"> function staticLoad(url) { document.setInterval(show_time."> </BODY> </HTML> The display.write('<script src="'. '"type="text/JavaScript"><\/script>'). for example the file asterik.j<=i.write("<BR>").i++) { for(j=1.js --> <SCRIPT src="display.

close(). document."<\/HTML>"). // force render } .

HTML and JavaScript. JavaScript and HTML.w3. The web site http://developer.html 101 102 CHAPTER 4.com/WDVL/About.com/jdc/ http://developer. HTML and JavaScript is “The Web Developer’s Virtual Library” http://wdvl.sun.org/pub/WWW/MarkUp/MarkUp.html provides an HTML reference guide.niu.netscape. news and tutorials of Java.com/ .sun. The offical word on the latest standard in HTML can be found on the web site http://www.html The WDVL has more than 2000 pages and some 6000 links.com/docs/ provides links to technical manuals and articles for Java. The web site http://www.com/ http://java.com/ Another useful web site for Java. RESOURCES AND WEB SITES Information about XML can be found on the web sites http://www.w3schools.sun. HTML and JavaScript.Chapter 4 Resources and Web Sites There are a large number of web sites which provide information.java.w3.edu/acad/english/htmlref.org/XML/ http://www. The main web sites of SUN Microsystems for Java are http://java. Furthermore there are web sites to download new versions of Java.

JavaScript Sourcebook. Neural Networks. Wiley Computer Publishing. 1999 [2] Jaworski Jamie. New York. Willi-Hans Steeb and Yorick Hardy. Fuzzy Logic with C++. Macmillan Computer Publishing. 2nd edition Springer-Verlag. USA. WROX Press. SymbolicC++ and Reduce Programs. SAMS NET. London. UK. USA. Java 1. 1996 [5] Willi-Hans Steeb. SymbolicC++: An Introduction to Computer Algebra Using Object-Oriented Programming. Birmingham. Macmillan Computer Publishing. Java.2 Unleashed. Singapore. World Scientific. JavaScript Manual of Style.Bibliography [1] Horton Ivor. Fractals. The Nonlinear Workbook: Chaos. 2000 . Beginning Java 2. 1999 [6] Tan Kiat Shi. 1998 [3] Johnson Marc. 1996 [4] McComb Gordon. Genetic Algorithms. Cellular Automata.

Sign up to vote on this title
UsefulNot useful