Web 125 - HTML, XML, and JavaScript (c)2007
Samples . Course Login . Grades Project . Final . quizs . Links . HowtoTaketheClass(GettingStarted) . Syllabus & Ongoing Guidelines . Login-Instructions . WebCT Slow Issue
Notes and Assignments : If webct does not work then...
1) Can get material at faculty.hacc.edu/ejvanbla/web125/ahome.html (won't see due dates & points there.)
2) Can communicate and submit assignments via email to ejvanbla@hacc.edu (put a subject of "WEB 125 ")

Other 'HTML' Links: www.w3.org . www.w3schools.com . BODY Components . Char Set (echoecho) . Char Set (ni)
validator.w3.org . XHTML11.template . mainDTD . valid-dtd-list . XML References . XSLT Functions . TryIt indexOf .
-----10/23/2008  Validation purpose and approaches using DTD and Schemas:
There are many different software tools to validate. They should all give the same answer but alas some seem
better than others. In this course I usually run assignments and exams against one of the following online validators...
(1) w3.org  for XSD which can be local files or published on a web site or sometimes I use tools.decisionsoft.com (for local xml and xsd file pairs)
(2) for DTD use validator.w3.org
Subject: xsl, "Access is denied" problem Topic: Main
Author: David GradwellView PeopleLink Options for this User Date: October 22, 2008 1:38 PM
1) Is xsl the same as xslt? 2) When I run my XSLT file, I get this error... The XML page cannot be displayed Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later. Access is denied. ...I tried all sort of things to get this to work. Everything looks right. I am using Microsoft IE. Is there a browser or OS setting I am not aware of? Any help would be appreciated.

Subject: Re:xsl, "Access is denied" problem Topic: Main
Author: Christopher LochstetView PeopleLink Options for this User Date: October 27, 2008 11:18 PM
This happened to me. 'Have little idea why. When I browsed to the problem XSL file, looked at it's properties, Windows informed me that the file is currently restricted. (Why? I wrote it.) But the properties panel also offered a button to clear this restriction, 'forgot the wording. After this simple click, problem went away.

Subject: Re:  Quiz 5 Topic: Main
Author: Edward VanBlargan Date: December 3, 2008 2:10 PM
Rachel is correct
also not in assignments because not every quiz needs a file upload...only really need upload in assignment area when quiz has multiple filesQuiz 5 only has 1 file so just copy & paste your code into answer area of quiz. Actually I decided to also make assignment area just in case so you can copy/paste and also upload your file
(mostly as a safeguard)
 
W125 - Table of Contents
Orientation: Getting Familure with the Class
Wk01Pr01: Introduction to HTML
Wk02Pr02: Creating and Editing a Web Page
Wk03Pr35: Creating Web Pages with Links, Images, and Formatted Text
Wk04Pr08: Creating Style Sheets
Wk05Pr46: Creating Tables in a Web Site & Using Frames in a Web Site
Wk06Pr--: HTML Multimedia
Wk07Pr12: XML Documents
Wk08Pr12: XML Display with CSS and Extensible Stylesheet Language (XSL)
Wk09Pr--: XML Validation and Schemas
Wk10Wk11: XML DTD & HTML Forms
Quiz02--: Quiz02 - ChooseMarkup
Quiz03--: Quiz03 - Structure
Quiz04--: Quiz04 - Xml
Wk11Pr09: Javascript integration with HTML
Wk12Pr10: Javascript form validation and other features
W13P1011: Javascript DHTML in Web pages
Wk14Pr12: XML and Javascript
More01: Since Course

-----Wk01Pr01: Introduction to HTML

Miscellaneous TERMS (roughly in order as we learned them)

-----Orientation: Getting Familure with the Class

===Home Page  Getting Started 
 - 'Calander' might not always be up to date.
[ ]: View video(s) at bottom of this page.
===Temporary Notes Site

-----Wk01Pr01: Introduction to HTML

TERMS from Project 1 (in order they appear in the book)

===Web Site Types and Purposes oses (pg.7)
- Internet - anyone.
- Intranet - employees and members.
- Extranet - select business partners or customers.

===Web Browsers (pg.9)

=====What Is Hypertext Markup Language (HTML) (pg.9)

===HTML Coding Practices (pg.11)
- ...are designed to simplify creating and editing HTML pages.
- ...ensure pages appear correctly in different browsers.
- You should separate sections with a blank line. This will not appear in the output.

===HTML Versiona (pg.11)
- To ensure that browsers will will interpret new versions of HTML, the W3C maintains HTML specifications.
- W3C's HTML standards and specifications are publicly available on their Web site.

===Cascading Style Sheets (CSS) (pg.12)
- (Not CSS) Easy. List of HTML tags and their attributes to alter Web page elements. (see Apendix A)
- Cascading Style Sheets (CSS) controls an element on whole Web page, or whole Web site. Covered in Ch.8.

===Dynamic HTML (DHTML) (pg.12)
- Dynamic HTML (DHTML) is used with other Web technologies to provide additional functionality.
- Dynamic HTML (DHTML) is a combination of HTML tags, CSS, and a scripting language like JavaScript.
- Covered in later projects.

===Extensible Hypertext Markup Language (XHTML) (pg.12)
- XHTML is used to describe the structure and content of a document, not the format.
- XHTML is a reformulation of HTML, that conforms to the rules of Extensible Markup Language (XML).
- 'By incorporating HTML and XML, XHTML combines the benefits of the display features of HTML, and the stricter coding standards required by XML'.
- All book examples adhear to XHTML rules outlined in Table 1-3 pg.13.

=====Tools for Creating HTML Documents (pg.13)
- Text editors: type in text and HTML tags.
- HTML editors: Macromedia, HomeSite, or BBEdit.
- Save as Web Page: Microsoft Word, Excel, and PowerPoint.
- Microsoft Access, can create a Web page that allows add, edit, or view data in a database.
- WYSIWYG: Microsoft FrontPage, Macromedia Dreamweaver, or Sausage Software HotDog.

=====Web Development Life Cycle (pg.14)


- Life cycle: so your Web pages are consistent and complete.
PHASE
QUESTIONS TO ASK
PLANNING
- identify goals and purpose
  • What is the PURPOSE of the Web site?
  • WHO WILL USE this Web site?
  • What are the USERS' COMPUTING ENVIRONMENTS?
  • Identify the content owners and authors.
    • WHO OWNS AND AUTHORS the information on the Web site?
    • WHO DECIDES if/where the information goes on the Web site?
  • The 'WHO' can be involved in all aspects of the Web development process.
ANALYSIS
- decide content and functionality
  • What TASKS do the USERS need to PERFORM?
  • What INFORMATION is USEFUL to the users?
  • What PROCESS CONSIDERATIONS must be made?
DESIGN and DEVELOPMENT
- consider the Web site's design
  • HOW will the Web pages be ORGANIZED?
  • What type of Web site STRUCTURE is appropriate for the content? Linear? Hierachical? ...
  • What forms of MULTIMEDIA contribute positively to the Web site?
  • How can ACCESSIBILITY issues be addressed without limiting usability?
  • Do we need to design for an INTERNATIONAL audience?
TESTING
- review content, functionality, and usability
  • Is the Web site CONTENT CORRECT?
  • Does the Web site FUNCTION CORRECTLY?
  • Are users ABLE to FIND the INFORMATION they need and to COMPLETE desired TASKS?
  • Is NAVIGATION EASY?
IMPLEMENTATION and MAINTENANCE
- how to publish and update
  • HOW is the Web site PUBLISHED?
  • HOW is the Web site UPDATED?
  • WHO is responsible for CONTENT UPDATES?
  • WHO is responsible for STRUCTURE UPDATES?
  • HOW will users be NOTIFIED about UPDATES to the Web site?
  • Will the Web site be MONITORED?

===Web Site Planning (pg.15)
- Must adequately identify the intended purpose.
- Consider speed of most users isp connections.
===Web Site Analysis (pg.16)
- One of the more important steps.
- "Clearly understanding and defining the desired content and functionality of the Web site will
   direct the type of Web site that you design and reduce changes during Web site development."
===Web Site Design and Development (pg.16)
- Web site structures:
    . Linear - each page links to the next one, sequentially,
    . Hierarchical - tree like structure,
    . Webbed -  no set organization,
    . Broad - all pages linked from the home page,
    . and Deep - mostly linear with some hierachical (tree) links.
- Design for a 'diverse audience'.
- Always include 'alternative text' for each graphic.
===Web Site Testing (pg.20)
- Test at various stages of design and developemnt.
- Types of testing:
    . Usability - Measure how well it allows the user to accomplish his goals.
    . Functionality - Does it function as intended?
    . Combatibility - Does it work on a variety of browser versions?
    . Stress - What happens when more users access the site?
===Web Site Implementation and Maintenance (pg.21)
- Once testing is complete, it can be implemented (published to a Web server).
- Many HTML editors and WYSIWYG editors provide publishing capabilities.
- Or use FTP software, like WS_FTP.
- Once published, then test again for obvious errors (like broken links or missing graphics).
- Once implemented, then develop a process to maintain the site.
- Users will request changes to content.
- Don't let site become stale, outdated, or link to removed sites.
- After changes, consider notifying users with a graphic banner, or a 'What's New' announcement.


-----Wk02Pr02: Creating and Editing a Web Page

- Homework - Assignment 1: Create web page.

TERMS from Project 2 (in order they appear in the book)

===Introduction (pg.30)

===Text Elements (pg.32) (more on pg.98)
- Normal text (default) can be formated.
    . bold <strong>.
    . italic <em>.
    . underlined <u>.
    . different colors, etc.

===Hyperlink Elements (pg.33)
- Point to: other Web pages, other places in the same page, graphics, sound, video, program files, e-mail addresses.

===Notepad (pg.35)
- Enabling 'Word Wrap' does not effect the way text appears when printed.

===ENTERING HTML TAGS AND TEXT (pg.36)
- Start with a <!DOCTYPE> tag (only tag in upper case).
- Then four sets of tags: <html>, <head>, <title>, and <body>.
- Basic sections of the page: 'header information' and the 'body of the page'.
       . <html> head and body </html>. (pg.37)
- Tags without closing tags close with a space and a forward slash.
   Such as <hr /> and <br />

HTML TAG
FUNCTION
<!DOCTYPE> - First thing in an HTML file.
- Tells the browser which HTML or XHTML version and type the document uses.
    . W3C supports (for HTML or XHTML) three document types:
       . strict - prohibits use of 'deprecated' (marked for eventual removal) tags.
       . transitional - allows 'deprecated' tags. (Chapters 2, 3, 4, 5)
       . frameset - supports frames on a Web page (also allows 'deprecated' tags). (Ch. 6, 7)
- Includes a URL that references a 'Document Type Definition' (DTD) on the W3C site.
       . File containing definitions of tags and how they should be used. (pg.36)
<html> </html> Indicates the start and end of an HTML document.
<head> </head> Indicates the start and end of section containing title and other info.
<title> </title> Does not appear in the body of the Web page. Appears on the title bar of the browser and labels bookmarks (and search engines).
<body> </body> Indicates the start and end of the Web page body.
<hn> </hn> Indicates the start and end headings.
- Larger font, often bold or italic or a different color.
- n is a number 1 through 6 (1 being the largest font).
- Be sure to use them consistently.
<p> </p> Indicates the start and end of a new paragraph. Causes a blank line above the paragraph.
<ul> </ul> Indicates the start and end of a 'unordered (bulleted) list'.
<ul type=""> : "disc", "square", or "circle".
<ol> </ol> Indicates the start and end of a 'ordered (numbered) list'.
<ul type=""> : "1"=numbers, "A or a"=letters, or "I or i"=Roman numberals.
<li> </li> Indicates a 'list item' within a ordered or unordered list.
<hr /> Inserts a horizontal line.
<br /> Inserts a line break.
<dl> </dl> Indicates the start and end of a 'definition list'.
<ul type=""> : "1"=numbers, "A or a"=letters, or "I or i"=Roman numberals.
<dt> </dt> Indicates a 'term'.
<dd> </dd> Indicates a 'definition' of the term.

===Image Attributes <img> (pg.52)

ATTRIBUTE
FUNCTION
align Values: bottom, middle, top, left, or right.
alt Provides alternate text. Describe purpose of the image, not a description of it.
border Border width. If greater than zero, then displays the link color.
height Height of image. Improves loading time.
hspace Horizontal space that separates the image for the text.
src Provides the URL to the image.
vspace Verticalspace that separates the image for the text.
width Width of image. Improves loading time.

===Center a Heading <h1 align="center"> (pg.52)

===Color Chart (pg.55)

===Adding a Horizontal Rule <hr /> (pg.56)


- Default <hr />

- <hr noshade="noshade" />

- <hr size="1" />

- <hr size="1" noshade="noshade" />

- <hr size="5" />

- <hr size="5" noshade="noshade" />

- <hr size="9" />

- <hr size="9" noshade="noshade" />

-----Wk03Pr35: Creating Web Pages with Links, Images, and Formatted Text

- Homework - Assignment 2: Trout page, Fonts, Links, Image Map.
- validator.w3.org - Markup Validation Service

TERMS from Project 3 (in order they appear in the book)

===Using Links on a Web Page (pg.72)
- To change link color defaults, use IE Tools menu, Internet Options.
- These body attributes apply to the boxes around images as well.
- To change link colors on a Web page, place 'link'(normal), 'alink'(active), and 'vlink'(visited) attributes in the <body> tag. (pg.74)

===Adding a Left-Aligned Heading with a Font Change (pg.82)
- Example: <h1><font color="#000066">Welcome!</font></h1>
- Font attributes: 'color', 'face', 'size'. Size can be 1 to 7, 1 being largest, 3 is the default. Or -3 to +4.
- Shading Example: <span style="background-color: #b4e3b5">Trout Fishers</span>

===Adding a Background Image (pg.87)
- Example: <body bgcolor="#a1d4f1">
- Example: <body background="mypicture.jpg">

===Adding a Text Link (pg.87)
- 'Anchor tag' example: <a href="myurl">mylinktext</a>
- Anchor attributes: (pg.88)
    . href - Specify the URL of the linked page or file.
    . name - Name of the anchor.
    . title - ballon text.
    . rel - <a rel="next" href="myurl">. Use: next, prev, index, or copyright.
    . rev - <a rev="prev" href="myurl">. Use: next, prev, index, or copyright.
    . type - Specify content type (also know as media type or MIME type). Type examples...
      text/html, image/jpeg, video/quicktime, application/java, text/css, text/javascript.
      The browser displays a file based on its MIME type and not on what type of code it really has.

===Adding a E-Mail Link (pg.90)
- Example: <a href="mailto:address@email.com">My Link Text</a>

===Formating Text (pg.98)
- Several Text Formating Tags. (Table 3-5)
    . <b> </b> - Physical style tag that displays text as bold.
    . <big> </big> - Increases font size in comparison to surrounding text.
    . <blockquote> </blockquote> - long quotation; indents margins on sections of text.
    . <em> </em> - Logical style tag that displays text with emphasis usually italicized.
    . <i> </i> - Physical style tag that displays text as italicized.
    . <pre> </pre> - Preformated material. Preserves spaces and line breaks; often used for text
      in column format pasted from another document into HTML code.
    . <small> </small> - Decreases font size in comparison to surrounding text.
    . <strong> </strong> - Logical style tag that displays text with strong emphasis usually bold.
    . <sub> </sub> - Displays text as subscript (below normal text).
    . <sup> </sup> - Displays text as superscript (above normal text).
    . <tt> </tt> - Displays text as teletype (monospace) text.
    . <u> </u> - Displays text as underlined.

===Viewing, Testing Links, and Printing a Web Page (pg.92)
- Web Page Testing - Information about link testing.

===To Format Text with a Font Color (pg.102)
- <font color="#008822">My Text</font>

===Adding an Image with Wrapped Text (pg.102)
- <img src="mypic.jpg" align="right" alt="alt text" /> - aligns the image to the right of the text. (pg.102)
   You MUST Enter a <br /> tag to stop the text from wrapping.
    . <br clear="right" /> tag to stop the text from wrapping to the right.
    . <br clear="left" /> tag to stop the text from wrapping of a left aligned image.
    . <br clear="all" /> tag clears both left and right alignments.
- Text can be aligned to the left, right, top, middle, and bottom. (pg.103)
- 'alt' specifies baloon text, and for users with a 'screen reader', and for as the image is loading.

===Different Types of Links (pg.111)
- http:// - Link to an http Web site.
- ftp:// - Link to an ftp Web site.
- news: - Link to an newsgroup article.

===Link Targets and Links within a Web Page (pg.114)
- <a name="mytarget"> - names a target point within a Web page.
- <a href="#mytarget"> - creates a link to a target point within a Web page.

===CSS Opacity and Transparency (www.mandarindesign.com/opacity.html)

 


-----Wk04Pr08: Creating Style Sheets   (week4_note4_styleCss.htm)

- Homework - Assignment 3: Pure Golf.

TERMS from Project 8 (in order they appear in the book)

===Creating Style Sheets   (pg.334)
- Flexibility makes CSS useful, by offering inline, embedded, and external. See: (pg.334)
===Style Statement Format (pg.334)
- Inline - <h1 style="font-family: Garamond; font-color: navy">. (pg.336)
- Embedded - h1 {font-family: Garamond; font-color: navy}    // inside <head> <style> <!--   (pg.336)
- External - Similar to embedded. Goes in css text file, without <style> <!--   (pg.337, 350, 352)
   To add an external style sheet to a page:
   <link href="my.css" rel="stylesheet" type="text/css" />
, inside <head>.
    . type="text/css"' indicates the mime type (ie, content and language of the linked document).
    . rel="stylesheet" indicate the relationship of the linked (href) document to the page.
    . type="text/css"   and   rel="stylesheet"   are required for CSS.   (pg.352)

- Multiple elements (separated by , ) can be defined on 1 line. The same element can be used multiple times for example:
   h1, h2, h3 { font-family: Comic Sans MS}
   h2 {color: red }

- An embedded style sheed goes inside <head> <style> <!--
   The comment hides script language the browser cannnot interpret. Useful when CSS is not supported. (pg.345)

PROPERTY
OPTIONS TO CONTROL
background color, image, position
border color, style, width
font family, size, style, variant, weight
list image, position, type
margin length, percentage
text alignment, decoration, indentation, spacing, white space

===Working with Classes in Style Sheets   (pg.338)
- Classes are an important advanced feature of CSS.
- A class defines a set of attributes to apply to any tag that excepts those attributes. (my words)
- You can deffine several classes for the paragraph tag, for example. (ie. different paragraph styles)
- Place the class definition within the style sheet rules.
- Place a period before the class name, which can be anything (no spaces).
- A class name should indicate purpose, not appearance.
- A class definition example:   p.beginning {color: red; font: 20pt}
- A class use example:   <p class="beginning">

===Book example project   (pg.340)
- Setting the Paragraph Style:   p {text-indent: 20pt} - indents first word of a paragraph.
   If % is used, it is based on total width of the screen.
- body {margin: 8pt} - sets: margin-top, margin-bottom, margin-left, margin-right.   (pg.349)
- p and margin can set:   points, pixels, inches, centimeters, or %.   (pg.349)
===Setting a Style for Links (the 'a' anchor) (pg.343)
- Selector choices: a or a:link, and a:visited, and a:active, and a:hover.
- As stated above, links can have three states: normal, visited, and active.
- Example of an Embedded Style Sheet and setting link style: (pg.344, 345)
   <style type="text/css">
   <!--
   a {text-decoration: none;   font-family: Verdana, Garamond;   font-size: 12pt;   color: black}
   a:hover {background: black;   color: white}
   -->
   </style>
- For an External Style Sheet, remove the style tag and comment from the embedded example.   (pg.337, 350, 352)
   Place the text a file named 'mystuff.css'.   To use it, place the following within the head section:
   <link rel="stylesheet" type="text/css" href="mystuff.css" />
- text-decoration can be: none, blink, line-through, overline, or underline. (pg.343)
- Multiple text-decoration ok, when separated with a space:   {text-decoration: underline overline}
- Multiple font-family ok, when separated with a comma:   {font-family: Verdana, Garamond}
- A 'font-family' name that contains spaces, must be enclosed in double quotes:   {font-family: "Times New Roman", Garamond}
- "font-weight: value is darkness as lighter | normal | bold | bolder" or 100 to 900 (400 is no change, 900 is darkest)   (pg.352)
- 'word-spacing' can use  points, pixels, inches, centimeters, millimeters, picas, ems, or x-height.   (pg.354)
- 'line-height' can use  a number, length, or %.   (pg.358)
    . number - height is determined by font size.
    . length - common lengths.
    . % - percent of font height, 100% is default.

===Adding an Inline Style Sheet   (pg.354)
- The last paragraph could contain info about the site, like the developer's info. Use smaller italic font to not distract the reader.   (pg.355)
   Example:   <p style="font-style: italic; font-size: 8pt">    // inline style, applies just to that one tag.

===Links of Equal Width   (codingforums.com)
- How are the links arranged? Horizontally or vertically?
   If vertically you could do this.
- #menuwidth { witdh: 12em }
   #menuwidth a { display: block }
- <div id="menuwidth">
   <a href="">....</a>
   <a href="">....</a> ...
   </div>
- If horizontally you could maybe float the As left and give them a width.

===Stationary background image example:
- <body style="background-image:url(american-flag-2a_dim1.jpg); background-position:top left;
                        background-repeat:no-repeat;background-attachment:fixed">

===Samples from Professors Notes   (codingforums.com) object.style.display="inline"
- <ol style="list-style: upper-alpha">
- <div style="border:5px double #FFFF00; width: 300px; margin-left: 100px;
   color: #661144; background-color: #DDDDDD; line-height: 150%; padding: 10">

 - <head>
   <title>CSS</title>
   <style type="text/css">
   <!--
   body {color: black; 
         font-size:11pt; 
         background-color: red; 
         background-image: url('img_back3.gif');
         background-repeat: no-repeat; 
         background-position: 20% 0%}
   h2           { font-family: Arial; color: #800000 }
   h3           { font-family: Comic Sans MS; color: red }
   p {text-indent: 0.25in; margin-left: 50px; margin-right: 100px;}
   a:link    {color: blue; text-decoration: underline;}
   a:visited {color: red; text-decoration: none;}
   a:active  {color: red; text-decoration: none;}
   a:hover   {color: green; text-decoration: underline; background: #F9EDED;}
   .myval   {color:#CC0066; font-family: Arial;}
   .myred   {color:#800000; font-family: Arial;}
   .myid   {color:#AA0066; font-family: Comic Sans MS;}
   -->
   </style>
   </head>

===object.style.display="inline"   (CSS display Property)


-----Wk05Pr46: Creating Tables in a Web Site & Using Frames in a Web Site

... Proj-4 ... Creating Tables in a Web Site

- Homework - Assignment 4: World Wide Applications.

===Creating Web Pages with Tables   (pg.134)
===Table Borders, Headers, Captions, and Rules (pg.137)
- rules attribute - select what ruller lines to show.
    . rules="none" - no internal lines.
    . rules="cols" - only vertical internal lines.
    . rules="rows" - only horizontal internal lines.
    . See Appendix A for additional information on supported values.

===Planning, Designing, and Coding a Table   (pg.138)
===(1) Determining If a Table is Needed (pg.139)
- Use a table if it (a) helps organize the data, (b) makes the page easier to read.
===(2) Planning the Table (pg.139)
- Sketch the table on paper before coding any HTML.
===(3) Coding the Table (pg.141)
- <tr> - table row (row).
- <td> - table data (cell).
   <th> - table header (cell). (centered and bold by default).

===Table Tag Attributes (pg.142)

Table Tag Attributes (pg.142)
TAG ATTRIBUTE FUNCTION
<table> align table alignment (left, center, right)
('left' and 'right' causes text to go on side, like img does)
bgcolor background color for table
border border width in pixels
cellspacing space between cells in pixels
cellpadding in pixels
cols defines number of columns
width sets table width
<tr> align horizontally aligns row (left, center, right, justify)
bgcolor background color of row
valign vertically aligns row (top, middle, bottom)
<th> or <td> align horizontally aligns cell (left, center, right, justify)
bgcolor for cell
colspan number of columns spanned by a cell
rowspan number of rows spanned by a cell
valign vertically aligns cell (top, middle, bottom)
<caption> align aligns caption (top, bottom, left, right)

===Creating a Home Page   (pg.143)
- Table 4-3 - HTML Code to Define Web Page Structure (skeleton or template).

===Using Borderless Tables to Position Images   (pg.145)
- Default valign for 'data' cells (td) is 'center'.   (pg.149)

===Adding Cellspacing, Cellpadding, and Caption   (pg.167)
- If the table tag has 'border', then cellspacing increases the border.   (pg.170)
- <caption align="bottom"><b>caption goes here</b></caption>.   (pg.170)

===Spanning Rows and Columns   (pg.172)
- colspan and rowspan are attributes of cells, ie. <th> or <td>.


... Proj-6 ... Using Frames in a Web Site

TERMS from Project 6 (in order they appear in the book)

===Introduction   (pg.248)
- World Wide Web Consortium (W3C) discourages use of frames. They recomend "fixed positioning through the object element".

Frame Tag Attributes (pg.251)
TAG ATTRIBUTE FUNCTION
<frameset> rows number of rows
cols
number of columns
<frame> frameborder
must be one of "1", "0" (or "yes" or "no")
bordercolor border color (default is gray)
marginwidth on left and right of frame (default is 8)
marginheight above and bellow doc in frame (default is 8)
noresize must be "noresize"
name used as a target
scrolling indicates whether a scroll bar is present
src the file to display in the frame
title always use <title> and <name> to id the frame
<noframes>  
Gets <body> ... </body>  (if frames not supported)

===Planning and Laying Out Frames   (pg.258)
- Goal and purpose determine which layout is best.   (pg.258)
- <frameset cols="20%, 65%, 15%">  (can be # of pixels or #%)
- <frameset cols="*, 65%, *">    (* columns will be of equal width)

===Specifying Attributes of the Header and Menu Frames   (pg.265)
- To be compliant with accessibility guidlines (Appendix C), always use <title> and <name> to id the frame.
- Do not disable scrolling on the menu frame, to be sure all menu options are always visible.

===Adding Links with Targets to the Menu Page   (pg.265)
- To be compliant with accessibility guidlines (Appendix C), always use <title> and <name> to id the frame.
- Do not disable scrolling on the menu frame, to be sure all menu options are always visible.
- Targets: by default a link will load in same frame; a target makes links load in another frame and its useful to set a default
   target frame for the page. An example target in a link is: <a href="file.htm" target="main">
   loads the href into the frame named "main". A name must be unique and for safety the id & name attributes should be
   the same. Some options with targets are:
    . target="framename" opens new window
    . target="_top" loads over top all frames in the window, useful for loading other url's
    . target="_self" loads over current frame
    . target="_blank" opens new window


-----Wk06Pr--: HTML Multimedia

- Homework (not for a grade) - Links to Don's MySpace Page


-----Wk07Pr12: XML Documents

- Homework - Multimedia, XML, and Stationary background example

The basics of XML and xml documents are covered in links below:

===CDATA
<![CDATA[text data that will not be parsed by the XML parser]]>
- A CDATA section starts with "<![CDATA[" and ends with "]]>"
- http://www.w3schools.com/XML/xml_cdata.asp


-----Wk08Pr12: XML Display with CSS and Extensible Stylesheet Language (XSL)

- Homework - Assignment 6: XML Display

Helpful Links: www.w3schools.com/xml/xml_display.asp . XSLT Functions
Using XPath string functions in XSLT templates

===Linking a Cascading Style Sheet to Format an XML Document   (pg.563)

===Formatting and Manipulating an XML Document Using an XSL Style Sheet   (pg.566)
 - CSS formats display of XML documents.   (pg.567)
 - Extensible Stylesheet Language (XSL) does two things: formats and translates XML documents.
 - With XSL, the XML parser can output a different format, like HTML.  This output is called a result tree.
 - If more than one linked XSL stylesheet, then only first is used.
 - If XSL and CSS stylesheets are linked to an XML document, then only the XSL is used.
===Creating an XSL Style Sheet   (pg.568)
 - XSL syntax is similar to XML.  All XSL elements must use the xsl namespace prefix ( <xsl: )  to distinguish from XML elements.
 - For complete list of XSL style elements, see XML Quick Reference in Appendix F.
 - xsl:stylesheet and xsl:transform elements must have a version number, if the namespace code is the official W3C specification.
 - Examples of XSL stylesheet Element (pg.568):
   <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        other style sheet code here
   </xsl:stylesheet>   or
   <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        other style sheet code here
   </xsl:transform>
 - The stylesheet element establishes a namespace, so the remaining elements, such as the template, can use names that will not be
   confused with other elements.
 - A template is an insturuction that identifies the elements in a document that should be transformed and then specifies how.
 - The template is the most important part of the XSL style sheet. An XSL style sheet must have at least one template element.
===General form of XSL template Element (pg.568):
   <xsl:template match="pattern" language="language">
        other style sheet code here
   </xsl:template>
 - Example:  (match="/" defines the entire document (ie, indicates that the entire document will be displayed))
   <xsl:template match="/">
        other style sheet code here
   </xsl:template>
===for-each Element (pg.570):
 - General form:  <xsl:for-each select="pattern">
 - Comment:  Returns the associated child element's data identified by the select pattern.
 - Example:  <xsl:for-each select="video/movie">
===sort Element (pg.570):
 - General form:  <xsl:sort select="value" lang=token data-type="value" order="ascending|descending" case-order="upper-first|lower-first" />
 - Comment:  'select' indicates which element to sort.
 - Example:  <xsl:sort select="Year" data-type="number" />
===value-of Element (pg.571):
 - General form:  <xsl:value-of select="pattern" />
 - Comment:  'value-of' indicates that the page should display the value of the specified element.
 - Example:  <xsl:value-of select="Title" />  (the value of Title is displayed)
 - Attributes can be specified in various places instead of elements with prefix  @  for example  <xsl:value-of select="Author/@born"/>
===text Element (pg.572):
 - Example:  <xsl:text> </xsl:text>  (adds a space to the document)

===Linking an XSL Style Sheet to an XML Document  (pg.574)
===xml-stylesheet Processing Instruction  (pg.574):
 - General form:  <?xml-stylesheet type="text/xsl" href="file path"?>
 - Comment:  Similar to the processing statement used to link a CSS.  Key difference is type="text/xsl".
 - Example:  <?xml-stylesheet type="text/xsl" href="bellvideo-year.xsl"?>

===Using Paging to Display XML Data in a Table   (pg.576)
 - Data binding - "the process of mapping XML elements to a data format that preserves the hierarchy of the data and allows the
   data to be manipulated using different methods".   (pg.577)
 - Data island - "a set of data elements separate from the main HTML Web page." and "has the capability of embedding XML
   documents in HTML pages.  The process uses data source object (dso) technology".
 = HTML <xml> Element  (pg.577):
 - General form:  <xml id="name" src="URL"></xml>
 - Comment:  This is a Microsoft extension and might not work for other browsers. 'id' must be unique and represent the data source
    and is recomended to start with 'dso'.  'src' is the location and name of the XML data file.
 - Example:  <xml id="dsoVideo" src="bellvideo-type.xml"></xml>

Four major pieces of Data Binding (pg.577)
COMPONENT FUNCTION
data source object (DSO) A unique name that represents the data island in the XML element.
data consumers .
binding agent .
table repetition agent .

- When the browser opens the HTML Web page, the XML data is parsed.  The browsers then creates a data island (dso), which
   handles the XML data as a recordset (collection of data records and their fields).
 - Ineternet Explorer has built-in methods, properties, and events that are automatically associated with the recordset.
===How to Create an HTML Document to Display XML Data in a Table   (pg.577)
 -

Example: How to sort a price that starts with a dollar sign.
<xsl:sort data-type="number" select="substring-after(PRICE,'$')"/>


-----Wk09Pr--: XML Validation and Schemas

- Instructors Notes
- Homework - Assignment 7: XML Validation


-----Wk10Wk11: XML DTD & HTML Forms

- (No Homework)


-----Quiz02--: Quiz02 - ChooseMarkup


-----Quiz03--: Quiz03 - Structure 


-----Quiz04--: Quiz04 - Xml 


-----Wk11Pr09: Javascript integration with HTML

- jeffersoncounty.htm - following the book
- Homework - Assignment 8: Javascript

===Date() object   (pg.378)
 - getDate() - "return the date in the month"
 - getMonth() - returns a number from 0 to 11
 - getFullYear() - returns the four-digit year

===Converting a date to a String
var sysDate = new Date()  or
var sysDate = new Date("August 17, 2008")  or
var sysDate = new Date(2008, 7, 17)   // 7 indicates August

// return 1 - 365 (366 if leap year)
function dayOfYear(dt) {
    var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    var isLeapYear = (dt.getFullYear() % 4 == 0);
    var returnVal = dt.getDate(); // Returns the day of the month from a Date object (from 1-31)
    var monthsToAdd = dt.getMonth();  // Returns the month from a Date object (from 0-11)
    var monthIdx;
    if (monthsToAdd >= 2 && isLeapYear) returnVal++;
    for (monthIdx = 0; monthIdx < monthsToAdd; monthIdx++) {
        returnVal += daysInMonth[monthIdx];
    }
    return (returnVal);
}

=== toLocalString() and indexOf()   (pg.379)
var curDate = sysDate.toLocalString()  // returns "Day of the Week, Month, Date, Year HH:MM:SS"
curDate = "August 17, 2008"
dateLocate = curDate.indexOf(",")  // Returns a 9 (zero base (ie, relative position)) index of the comma. (-1 if not found)
 - parameter of indexOf must be a literal.

=== substring() and substr()
var idx = substring(x [, y])
 - x is starting location (zero base (ie, relative position))
 - y is ending location (optional) (zero base (ie, relative position))
var idx = substr(x [, length])  (x is relative position, just like in subString() function)
 - Strings maximum length in older browsers is 256

 === write() and writeln() Methods of the document object.  (pg.386)
 - writeln() can be used when a "/n" newline character will work, such as in a <textarea>

<script type="text/javascript">
<!--
// Example of a user defined function. In <head> section.
function gasButtonColor(bColor) {
    // Set color of ButtonGas button to bColor value passed into the function.
    myForm.ButtonGas.style.backgroundColor = bColor
}

function doclock() {
    var now = new Date()
    var dateStr = now.toLocaleString()
    var timeStr = dateStr
    var spaceAt = 0
    var dateEndAt = 0
    for (count=1; count<=4; count++) {
        spaceAt = timeStr.indexOf(" ")
        dateEndAt += spaceAt + 1
        timeStr = timeStr.substring(spaceAt+1)
    }
    dateStr = dateStr.substring(0,dateEndAt-1)
    document.getElementById('showdate').value = dateStr
    document.getElementById('showclock').value = timeStr
    // Wait one second, and loop by calling itself.
    setTimeout("doclock()",1000)
}

function calcGas() {
    var miles = parseFloat(myForm.TextBoxMiles.value)
    var galns = parseFloat(myForm.TextBoxGas.value)
    // Calculate miles per gallon, rounded to two decimal places.
    var mpg = Math.round(100.0 * miles / galns) / 100.0
    alert("MPG = " + mpg)  // pop up a message.
}

//-->
</script>
...
<body onload="doclock()" style="background-color:#88ccf4">
...
<input style="width:240px;background-color: Aqua;border-style:none;text-align:center" type="text" 
    readonly="readonly" id="showdate" /><br/>
<input style="font:bolder larger 'Arial Narrow';width:240px;background-color: Aqua;border-style:none;
    text-align:center" type="text" readonly="readonly" id="showclock" />
// In a <script> tag within body...
// pg.381 Example code
var today = new Date()
var dayOfWeek = today.toLocaleDateString() // Thursday, November 20, 2008 12:00:00 AM
var dayLocate = dayOfWeek.indexOf(" ")     // index of zero base index of next space
var weekDay = dayOfWeek.substring(0, dayLocate)
var newDay = dayOfWeek.substring(dayLocate)
var dateLocate = newDay.indexOf(",")
var monthDate = newDay.substring(0,dateLocate+1)
var yearLocate = dayOfWeek.indexOf("200")
var year = dayOfWeek.substr(yearLocate, 4)
var fairDate = new Date(2008, 10, 20) // Nov. 20, 2008
var millsecToFair = fairDate.getTime() - today.getTime()    // milliseconds between dates
var daysToFair = Math.ceil(millsecToFair / (1000*60*60*24)) // milliseconds to days
document.write("<h4 style='margin-left:10%; width:590px' >Today is " + weekDay + " " + monthDate + " " + year</h4>)
...
// In a <script> tag...
// Display when this document was modified using the 'document' object property of 'lastModified'.
document.write("<p>This document was last modified " + document.lastModified + "</p>")
===NOTE: From a Microsoft Demo: syntax for javascript block ("moving toward xhtml")
<script language="javascript" type="text/javascript">
// <!CDATA[
	// javascript code here
// ]>
</script>
 - CDATA contains text data that will not be parsed by the XML parser.

-----Wk12Pr10: Javascript form validation and other features

- castle.htm - following the book
- Homework - Assignment 9: Javascript Form

===Inserting a Scrolling Message on a Web Page (pg. 420)
 - Four basic components
   1)  the display object
   2)  the text message
   3)  the begining position of the message within the text box
   4)  a time delay

OBJECT EVENT HANDLER
lower-case for xhtml 1.1
button onClick, onDblClick
document onLoad, onUnload
form onSubmit, onReset, onBlur, onKeydown, onKeypress
hyperlink onClick, onDblClick, onMouseover, onMouseout
image onLoad, onAbort, onError
input box onBlur, onChange, onFocus
Submit button onClick
window onLoad, onUnload, onBlur, onFocus

===Adding Validation to the Auto Loan Payment : Write a user defined function Calc()  (pg. 431)
   1)  Validate input
   2)  Calculate the monthly payment
   3)  Display the results in the LoanCalc form

function Calc(LoanCalc) {
   var loanAmount = document.LoanCalc.Amount.value
   var loanAmount = parsInt(loanAmount, 10)
   if (isNaN(loanAmount) || loanAmount <= 0) {
      alert("The loan amount is not a valid number!")
      document.LoanCalc.Amount.value = ""
      document.LoanCalc.Amount.focus()
   }
} 

===http://en.wikipedia.org/wiki/Document_Object_Model
The Document Object Model (DOM) is a platform- and language-independent standard object model for representing HTML or XML and related formats.
A web browser is not obliged to use DOM in order to render an HTML document. However, the DOM is required by JavaScript scripts that wish to inspect or modify a web page dynamically. In other words, the Document Object Model is the way JavaScript sees its containing HTML page and browser state.

===Table 10-26  open() Method Attributes  (pg.454)

===Further Study
 - alert(), confirm(), prompt()
 - Cookies, aspCookie


-----W13P1011: Javascript DHTML in Web pages - (Pr11)

  - clinic.htm - following the book
 - Homework - Assignment 10: Javascript DHTML XML
 - dhtml_help.html - Email Responces to my question about this homework assignment.  addparameter()
 - Web 125: Project - Santa / Christmas

Subject: Re:Assignment 10 XML Question Topic: Main
Author: James Zitch Date: November 30, 2008 3:36 AM
I used javascript to display individual xsl on index10.html. I used a dropdown box to pick the type of list I wanted to see...say just CIS courses. Then used that value with a switch statement to decide which xsl I would use to display the master data in the xml. The w3schools site has a decent way to show how to transform the xml by use of javascript code - located in xslt section.

Hope that helps!

DHTML DOM Reference

===Introduction (pg.474)
 - Dynamic HTML (DHTML) - "is a term for a collection of HTML tags, options, and style sheet properties... Not a new or seperate Web language...it combines: HTML, CSS, and JavaScript or VBScript." / "allows: the hiding of text until needed; the animating of text and images either controlled by the Web page or by the visitor; or the creating of content that automatically refreshes, reads, processes, and responds to a visitor immediately."
 - Dynamic positioning of elements is a key feature of DHTML.
 - DHTML - "relies on Document Object Model (DOM) to change the appearance of Web pages dynamically as they download to a visitor's browser."  It is a hierarchical naming system giving access to images, forms, and layers, etc via scripting languages.  For example, <img> could be a child of <body> document object.
 - Document Object Model (DOM) "is actually an Application Programming Interface (API)... DOM identifies interfaces, semantics, and relationships."
 - Three parts of DOM.  The (1) core is the object of any well formed document.  (2) HTML and (3) XML are the interfaces used to view a document.

===Creating the Vertical Scrolling Menu. Four things must be created.  (pg.479)
1)  "a division <div> tag that will be used to move the menu." (<div> is similar to a layer)
2)  "an HTML table that will contain the text for the menu."
3)  "a style sheet to modify the menu links."
4)  "a JavaScript function that continually checks the location of the menu object."

===Creating the screenTip() User-Defined Function (pg.503)
 - eval() - "a global function that accepts a string or command and returns the result of an executed statement."  "Useful to execute JavaScript statements using data, whose value, such as size of the window, is not known at the time the Web page loads."

===The_XML_DSO.htm
  <xml id="orderDSO">
  <!--XML data goes here -->
  </xml>


-----Wk14Pr12: XML and Javascript

.



-----More01: Since Course

-----02/25/2010  ASP VB Script String to Number conversion
usually take all input as strings, then if I need a number later I convert the variable to a number and store it in a temp variable:
input_variable = "1234"
temp_variable = 1 * input_variable
So far I have had no problems.
Or use... CInt(varname) CLng(varname)

-----11/25/2009  HTML Parameter Passing

-----06/12/2009  to register a dll to be called from html
Example:
C:\Users\gradwell>C:\Windows\Microsoft.NET\Framework\v2.0.50727\regasm C:\myweb\ verizon\app-techs\scim\VideoOS.SDK.DLL

Microsoft (R) .NET Framework Assembly Registration Utility 2.0.50727.3053 Copyright
(C) Microsoft Corporation 1998-2004. All rights reserved. RegAsm : error RA0000
: An error occurred while writing the registration informa tion to the registry.
You must have administrative credentials to perform this t ask. Contact your system
administrator for assistance

Or go to: http://word.mvps.org/FAQs/Customization/RegisterDLL.htm

Html samples at: C:\myweb\verizon\app-techs\scim
=== AudioFormCab.htm  // Loads dll that is in a CAB fuile
=== AudioForm.htm
//  VideoOS.Sdk.DLL needs to be registered for this to work
//  audioControl = new ActiveXObject("VideoOS.Sdk.UI.AudioControl");

=== Writing Object-Oriented JavaScript Part 1
http://www.codeproject.com/KB/aspnet/JsOOP1.aspx

=== LogiXML, Inc. - Therefore, in 2004, LogiXML began marketing Logi Report as a free Web-based BI reporting tool; the product was more recently renamed Logi Report or Freereporting.com. Like the other applications offered by LogiXML, Logi Report was built on XML technology.