# Presentation: 944768

## FSIS Re-design Project
Web Site Maintenance Training Day 1

March 4, 2004

**Web Site Maintenance Training Day 1**
- March 4, 2004

## Agenda

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
**Homesite HTML Editor (11:30am – 12:00pm)**

**Agenda**

## Training Agenda

**Day 1 Topics**
**HTML / ASP Development**
**Homesite HTML Editor**

**Day 3 Topics**
**Defect Tracking**
**Version Control**
**Browser / 508 Compliance Testing**
**Question & Answer**

***This training program will provide you with the instructions, tools, and resources necessary to maintain and continue development of the re-designed ***_[www.fsis.usda.gov](http://www.fsis.usda.gov/)__ Web site._

**Day 2 Topics**
**Site Map**
**Content Creation**
**HTML / ASP Templates**
**Style Guide**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Template**
**Defect Tracking**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**

***Finished Page***

- If errors...

- If no errors...

## First Generation Web Development

_**Content  & Page Creation**_

-   Developer organizes content based upon a request for posting.
-   Developer selects design based upon prior postings local to new Web page
-   Developer unit tests according to local standards and posts Web page

_**Content  & Page Creation**_

_**Content  & Page Creation**_

-   Developer organizes content based upon a request for posting.
-   Developer selects design based upon prior postings local to new Web page
-   Developer unit tests according to local standards and posts Web page

_**Content  & Page Creation**_

-   Developer organizes content based upon a request for posting.
-   Developer selects design based upon prior postings local to new Web page
-   Developer unit tests according to local standards and posts Web page

***Finished Page***

***Finished Page***

***Finished Page***

## First Generation Web Site Production

***First Generation Web Site Production Process:***
-  Since pages are created by a single person, the process generally takes less time to post a given page to the public site.
-  Adherence to common Departmental standards is not required.
-  Lack of uniform, formal standards in development, design, and process.
-  Pages can be moved to production without formal review.
-  Look and feel of site varies across different pages.

## Best Practices Web Development

**Best Practices Web Development**

_**Content Creation**_

_**Page Development**_

_**Testing**_

-   Web designer selects design template requested by Content Submission, and completes initial page development by adding content
-   Web designer performs unit test, and submits page to testing environment.

-   Author of content selects appropriate template for page
-   Author of content completes corresponding Content Submission Worksheet using mandated Style Guide
-   Content Submission Worksheet is submitted to Web Developer

-   Page tester evaluates page for defects, including content issues, style discrepancies, coding errors, Browser / 508 non-compliance, etc.

***Finished Page***

- If errors...

- If no errors...

## Best Practice Web Site Production 

***Best Practice Web Site Production Process:***
-  Provides a consistent standard in design, development, testing, and production of the Web Site.
-  Formalizes the review and posting process.
-  Eliminates uncertainty of design by providing reusable templates leading to a repeatable process for development.
-  Look and Feel is consistent across the site, easing user access and navigation.
-  Results in higher consistency and quality, which ultimately lowers production costs and rework over time.

## Agenda

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
- HTML Overview
- HTML Tags
- ASP
- Resources
**Homesite HTML Editor (11:30am – 12:00pm)**

**Agenda**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Template**
**Defect Tracking**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**

***Finished Page***

- If errors...

- If no errors...

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
- HTML Overview
- HTML Tags
- ASP
- Resources
**Homesite HTML Editor (11:30am – 12:00pm)**

## HTML Overview

***What is HTML?***
- “HTML” stands for “Hyper Text Markup Language”.
- Markup refers to the sequence of characters or other symbols that you insert at certain places in a text or word processing file to indicate how the file should look when it is printed or displayed or to describe the document's logical structure.
- HTML is the language used to create Web pages which can be viewed with a Web browser (like Netscape Navigator or Microsoft Internet Explorer.)
- HTML documents are plain-text files (i.e., ASCII) that can be created using any text editor.  These files can also be created using a HTML editor (such as HomeSite).
- HTML files are made up of plain text and tags.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
- HTML Overview
- HTML Tags
- ASP
- Resources
**Homesite HTML Editor (11:30am – 12:00pm)**

## HTML Tags and Attributes

**Tags are used to denote various elements within a HTML document.**
- The format of a HTML tag is a left bracket (<), the tag name and then a right bracket (>).  If additional attributes are used with the tag to perform a special function, they are included after the tag name but before the right bracket. Attributes can provide additional descriptions.
***<TAG NAME attribute1 ... attributeN></TAG NAME>***
- Tags are usually used in pairs -- with a start tag and an end tag.  The end tag follows the same format as the start tag except that 1) a forward slash (/) immediately follows the left bracket and 2) attributes are not needed.
- Below is a basic sample tag that would create a visible link to the FSIS home page. The a href denotes a hyperlink, the = defines what URL should be used for the link, the text between tags shows what will be displayed as the name of the link, and the </a> closes out the hyperlink tag.
***<a href=“***_[http://www.fsis.usda.gov/](http://www.fsis.usda.gov/)__” class=“BodyTextBlack”>FSIS’s HomeSite</a>_

## Required Tags

***The following tags are required for all standard HTML documents:***

- <html>
- <head>
- <title>
- Document title
- </title>
- </head>
- <body>
- Data to show on page
- </body>
- </html>

- Starts the HTML page
- Starts the head section of the document
- Sets the title that will show in the browser
- Title to show in the browser goes here
- Ends the title command
- Ends the head section
- Starts the body section
- Information that will appear in the document
- Ends the body section
- Ends the HTML page

## Exercise: Create a Page

***Let’s create our first page using the tags from the previous slide. ***
- <html>
- <head>
- 	<title>FSIS Web Team’s First Example</title>
- </head>
- <body>
- This is the first page of the training session. It was created by the <strong>FSIS Web Team</strong>.
- </body>
- </html>
***Now look at the page in the HomeSite browser. Notice the strong tag created bold text. ***

## Using Comments

***Commenting code is a standard best practice and provides a guide to any developer that needs to update or use a file. Use comment tags to document your work as you build a page.***
- The comment start tag looks like:
-  <!--
- The comment end tag looks like:
-  -->
- Anything that falls between these two tags will be regarded as a comment and will be ignored by the browser. It’s generally a good idea to provide a comment at the beginning of the file describing the document. Let’s add a <!--comment--> to the <body> tag of our previous example and view it in the HomeSite browser.
- <body>
- <!-- Begins first page. This page displays a one line greeting. -->
- This is the second page of the training session. It was created by the <strong>FSIS Web Team</strong>.
- </body>
- Notice that the comment does not display.

## Basic Tags

***Below is a list of a number of basic tags:***

| Tag | Description |
| --- | --- |
| <p> | Inserts a double line break and opens a new paragraph.  |
| <br> | Inserts a single line break.  |
| <hr> | Inserts a horizontal line across the page |
| <strong> | Creates bold text |
| <em> | Puts text in italics |
| <sub> | Creates subscripted text.  |
| <sup> | Defines superscripted text |

- Let’s see these tags in action with a sample page.

## Example of Basic Tags

- <html>
- <head>
- 	<title>FSIS Web Team’s First Example</title>
- </head>
- <body>
- <!-- Begins first page. You can't see this text in your browser because it's a comment -->
- This is the first page of the training session. It was created by the <strong> Web Team</strong>.<br><br>
- The p inserts a double space<p></p> space between text. <br><br>
- The br tag adds a break at the end of the line <br>
- so a new lines starts. <br><br>
- The hr tag adds a long row across the page like this:
- <hr><br><br>
- Use the strong tag for <strong> bold </strong> or the em tag for <em> italics </em>. <br><br>
- The sub tag displays subscripted text like Version<sub>3</sub> does. <br><br>
- The sup tag can be used to display things like 4<sup>5</sup> <br><br>
- </body>
- </html>

## Indentation

***Notice that in the example above, different lines of code are indented to different levels.  Code should be indented, so that all the statements in the same logical level are in the same indentation.  ***
- You can use spacing to spread out the text on a Web page to make it easier to read.  The two types of spacing we will discuss are:
- Starting a New Line
- Adding Spaces Between Items
- The main reason for indentation is readability and maintainability. Since many people may be editing a file or using it to create a similar file, properly indented code should be readable to anyone who opens the file.
- FSIS coding standards require code to be properly indented and aligned.

## Nesting Tags

***Order of appearance is not important in HTML, but the order of placement is.  When using multiple tag combinations together, it is important to nest them in order so that older browsers will read them correctly.***
- The following is an example of bad tag nesting:
- <strong><em> THIS CODE WILL CAUSE ERRORS</strong></em>
- You would fix this example like this:
- <strong><em>THIS CODE IS PERFECT</em></strong>
- Note: You could have used either the <strong> or the <em> tag first, as long as that was also the tag you ended on.
- <em><strong>THIS CODE IS PERFECT TOO!</strong></em>

## Common Character Entities

***Many punctuation characters have specific operations assigned to them in HTML, JavaScript, and ASP.  This can cause a number of errors when using these characters to display normal text. To prevent these problems, punctuation marks are replaced with corresponding code. ***
***The most common character entities are listed below, but an easy way to find those not listed is to type the name of the character and the letters HTML in any major Web search engine:***

| Result | Description | Entity Name | Entity Number |
| --- | --- | --- | --- |
| Non-breaking space | Non-breaking space | &nbsp; | &#160; |
| < | Less than | &lt; | &#60; |
| > | Greater than | &gt; | &#62; |
| & | Ampersand | &amp; | &#38; |
| “  | Quotation mark | &quot; | &#34; |
| ‘  | Apostrophe   |  | &#39; |
| TM | Trade Mark |  | &#153; |
| ® | Registered TM | &reg; | &174; |
|  ° | Degree | &deg; | &176; |

## Creating Links

***The <a> anchor tag is used to create links of all types. There are four types of links used frequently in the FSIS site redesign: Hyperlinks to FSIS pages, Hyperlinks to external sites, Page Anchor Links, and mailto links. All links will have an <a> </a> and any text located between the tags will be underlined unless an alternate style is defined. ***

| Link Type | Description | Required Code | Example |
| --- | --- | --- | --- |
| Link to another FSIS Page | Takes the user to another page.  | <a href=“pagename.asp”> </a> | <a href=“/fsis/home/index.asp”> Link to FSIS Home Page </a> |
| Links to External Sites | Links used to leave FSIS the FSIS domain.  | <a href=“http://pageURL” target=“_apparent”> </a> | <a href=“www.google.com” target=“_apparent”> Link to Google </a> |
| Page Anchor Links– Two Tags are required | Links within a given page, often used to link to bibliographical references or provide guidance through large documents.  | <a href=“name_of_anchor”></a>
<a name=“name_of_anchor”></a> | <a href=“Bottom_of_My_Page”>Link to the bottom of my page</a>  <a name=“Bottom_of_My_Page”></a> |
| Mailto Links | Used to allow the end user to send an email.  | <a href=“malto:myname@mydomain.com”> | <a href=“mailto:Smoky.Bear@fs.usda.gov”>Email Smoky Bear</a> |

## Table Tags

***HTML Table tags provide a way to structure a document using rows and data cells. Most of the structure of the FSIS page is provided by a number of tables. Tables consist primarily of <table>, <tr> table row, and <td> table data tags. TD tags must always exist inside TR tags and TR tags must always exist within Table tags. Neither can stand alone.  Text to be displayed is always held inside the Td cells. ***

- <table>
-   <tr>
-     <td>
-       Contents of Cell
-     </td>
-   </tr>
- </table>

- Defines a table
- Defines a row
- Defines a data cell
- Contents of cell
- Closes data cell
- Closes row
- Closes table

## Table Attributes

***Attributes define what characteristics the table, tr, or td cell have. Some examples of table attributes are below:***

| Tag | Description |
| --- | --- |
| Width | Table width in pixels |
| Height | Table width in pixels |
| Border | Border width in pixels |
| Cellpadding | Spacing between cells |
| Cellspacing | Spacing within cells |
| Class | Used to define style sheet characteristics for tables |

## Table Attributes

***Below is an example of a table with each of the previously described attributes:***
- <html>
- <head>
- 	<title>FSIS Web Team’s First Example</title>
- </head>
- <body>
- 	<table width=“368” height=“48” border=“1” Cellpadding=“6” cellspacing=“1”>
- 		<tr>
- 			<td height=“24” class=“BodyTextBlack”>Data Goes 					Here</td>
- 			<td height=“24”>Other Data Goes here</td>
- 		</tr>
- 	</table>
- </body>
- </html>
***Now, let’s view this page in the browser. ***

## Nested Tables

***An advanced use of tables is called nesting tables. Nesting tables places tables inside of tables to give the page more structure. ***
- Nesting tables allows development of complex page structures. One table can be used to give the document its overall structure, while a number of other tables can be used to format specific elements as needed. This allows a given page to have cells with different border widths, cellpaddings, cellspacings, background colors, and more.
- The best way to learn about table structure is to look at some of the redesigns more complex pages such as Template B, G, and H. Some Tips for nesting tables:
- When nesting tables, each additional table is always contained inside <td> tags.
- To place tables side-by-side, place each table tag in its own <td> tag.
- To stack tables, place two tables in the same <td> tag without creating a new row.

## Nested Tables Example

***Side by Side Tables***
***<table border="1" width="360" bordercolor="black">***
***	******<tr>***
***	******	******<td>***
***	******	******	******<table border="2" bordercolor="red" width="180">***
***	******	******	******	******<tr>***
***	******	******	******	******	******<td>***
***	******	******	******	******	******	******First Nested Table***
***	******	******	******	******	******</td>***
***	******	******	******	******</tr>***
***	******	******	******</table>***
***	******	******</td>***
***	******	******<td>***
***	******	******	******<table border="3" bordercolor="green" width="180">***
***	******	******	******	******<tr>***
***	******	******	******	******	******<td>***
***	******	******	******	******	******	******Second Nested Table***
***	******	******	******	******	******</td>***
***	******	******	******	******</tr>***
***	******	******	******</table>***
***	******	******</td>***
***	******</tr>***
***</table>***
***This creates a table that looks like this: ***

## Nested Tables Examples 

***Here are a few different examples of tables. See if you can create them.***
***Source code for these can be found in the c:/fsis/wwwroot/training/code_examples.asp file. ***

## List Tags

***List Tags can also provide order to your page. The code below placed in the Body of an HTML document would create a numbered list with three items:***
- Coding checklist
- <ol>
- 	<li>Always comment code</li>
- 	 <li>Indent lines to give order to code</li>
- 	 <li>Close all open tags</li>
- </ol>

| Tag | Description |
| --- | --- |
| <ol> | Ordered List: a list with numbers/letters/symbols |
| <ul> | Unordered List: a list with bullets or symbols |
| <li> | List: used to define a item in a list |

## Tables on an FSIS Page

## Form Tags

***Forms provide an opportunity for user input. There are a number of different tags which can be used to interact as needed. ***

| Tag | Description |
| --- | --- |
| <form> | Defines a form for user input |
| <input> | Defines an input field |
| <textarea> | Defines a text area (multi-line input field) |
| <label> | Defines a label to a control |
| <select> | Defines a selectable list (a drop-down box) |
| <option> | Defines an option in the drop-down box |
| <button> | Defines a push button |

## Image Tags

***To insert images into an HTML document, use the <img> tag. Below is an example:***
- <img src=“/fsis/images/thumbnail_thermy.gif” height=“80” width=“70” title=“Thermy” alt=“Thermy”>
***It is not necessary to give an <img> tag an end tag. The most common image attributes are:***

| Attribute | Description |
| --- | --- |
| Src | Source: gives the path to the image file name |
| Height | Height in pixels |
| Width | Width in pixels |
| Title | Title provides an alternative description of the image |
| Alt | Alt provides an alternative description of the image. Both the alt tag and title tag are used to provide 508 compliance for all browsers.  |

## Meta Tags

***Meta tags provide information that help search engines and indexes define a document. For FSIS pages, two meta tags are used, description and keyword meta tags, to help search engines find the page. ***
-  The content=“description” attribute provides a description of the documents. The following is an example:
- <meta=“description” content=“The Food Safety Education Page provides information on a number of food safety education topics and programs”>
-  The content=“keywords” attribute provides keywords.
- <meta=“keywords” content=“FSIS, Food Safety Education, FSIS Education Programs”>
***Please Note: A USDA meta data model is currently being developed. Once the model becomes a standard, FSIS will need to adapt to the defined standards. ***

## Cascading Style Sheets

***Cascading Style Sheets (CSS) are another powerful way to layout and format an HTML document. ***
- Originally HTML was designed to define the content of a document, and the layout of the document was supposed to be taken care of by the browser. Over time, demand for more control over document format led to the development of formatting tags like <font>, <bordercolor>, <bgcolor>, and many others. The development of these tags improved the format of a document, but caused difficulties in separating formatting from content. To alleviate this problem, cascading style sheets were born.
- Styles define how to display HTML elements.
- Styles are normally stored in Style Sheets.
- External Style Sheets eliminate the need to add each element of a style to tags. Instead, external Style Sheets are stored in CSS files and multiple style definitions will cascade into one.
- Despite their enormous functionality, styles are actually incredibly easy to use!

## Adding Styles to a Document

***Styles provide great functionality but are very easy to create and use.***
- In general, all styles are stored and created in a style sheet file. The file format always ends in the .css file ending.
- The FSIS style sheet is called /fsis/wwwroot/main/main_2.css. All global styles can be found in that file.
- To the right is a screen shot of the CSS file opened in HomeSite.
- Notice the attributes that are defined for the styles: margin, padding, font-size, etc.

## Creating a Style

***Many times, there are certain styles that are created for a given site. Create styles in the main_2.css file. ***
- The name of a custom style always begins with the period “.”
- Attributes are opened with the “{“ and closed with the “}”
- Attributes are then listed and each attribute definition must end with a “; “
- Below, the BodyTextBlue style is defined. This style is used often in the right navigation.
- .BodyTextBlue {
- 	FONT-FAMILY: Verdana, Helvetica, Arial;
- 	font-size : 10px;
- 	font-weight : normal;
- 	color : #000099;
- }

## Using a Style Sheet

***Two elements are required in an HTML page to use CSS: a reference to the style sheet and the definition of a given class when you want to use it. ***
- Reference the style sheet in the head of the document. In redesign files, this is already done for you in the index.asp file. The line below references the style sheet:
- <link href=“/FSIS/Main/main_2.css" rel="stylesheet" type="text/css">
- To use a style, insert the class attribute into the table data cell where you want the style to appear. Below, we want all the text in this cell to use the “BodyTextBlack” style, which is the style used for body text of all documents in the redesign.
- <td width="262“ class="BodyTextBlack">
- Note that although the width attribute is also used, the only attribute required to use CSS is the class attribute.

## Common Styles

***Below is a table listing the most commonly used styles in the redesign.***

| Style | Use |
| --- | --- |
| ColHdrBoldBlack | This 13 pixel font is used to provide titles on articles that do not have a prepared content_header image. |
| BodyTextBlack | This is the standard style for body text in the redesign. |
| BodyTextBlue | BodyTextBlue is used to create the blue text in the right nav |
| TableHeadBlack | When a table head has a light colored background, use this style. |
| TableHeadWhite | When a table has a dark background, this style creates white text in 13 pixel font.  |
| Breadcrumb | This style creates the tiny breadcrumb text.  |
| Skiplink | Skiplink is most notable for being invisible. This style is used for the skiplink anchor tags which are used for 508 compliance.  |

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
- HTML Overview
- HTML Tags
- ASP
- Resources
**Homesite HTML Editor (11:30am – 12:00pm)**

## ASP Overview

***Active Server Pages (ASP) is a Microsoft technology that allows for the programmatic construction of HTML pages just before they are delivered to the browser. ***
- HTML pages are *static*. All HTML code is written into a file by the developer. When the client’s browser requests a page from the server, all the HTML code written into the file is sent to the browser and interpreted by the browser.
- Using ASP, *dynamic* pages can be created. When a page is coded in ASP, the file contains *instructions* that will be executed by the server when the page is accessed. When the client’s browser requests a page, the server executes the ASP instructions and then returns HTML code to the browser.
- While HTML provides formatting on the Web, ASP builds functionality into Web pages that cannot be achieved with HTML, for example:
- Display pages that are customized based on the user’s identity and preferences;
- Recognize and display content based on browser type;
- Access to information contained in databases, text files, XML files.

## ASP Syntax

***ASP portions of a page use a different syntax than HTML. ***
- This symbol is used to open <% an ASP section of code, while this symbol %> is used to close that block of code. Let’s write our first line of ASP code, which will display the current time:
- <%
- 	Response.Write("The time is now ")
- 	Response.Write(time())
- %>
- Save the page as mytime.asp.
- When you open this page in the browser, you’ll see that nothing is displayed. This is because the page is not an HTML page, and must run through the server before being displayed. To get it to display properly, the page needs to be placed in a folder that the server recognizes as a local Web server. Let’s move the file to the folder C:/fsis/wwwroot/
- Now type this address in the browser _[http://localhost/fsis/mytime.asp](http://localhost/fsis/mytime.asp)__. _
- The page now displays the ASP code. The server recognizes the wwwroot as the default local Web server directory. The “localhost” portion of the URL tells the browser to use the machines local directory to serve the page.

## ASP vs. HTML

***Let’s look at the previous example:***
- <%
- 	Response.Write("The time is now ")
- 	Response.Write(time())
- %>
***Compare this code to the HTML code below:***
- <body>
- The time is now 11:15 AM
- </body>
***What separates the ASP from the HTML is the time() argument. The time argument checks the servers clock and outputs the current time to the browser. While the HTML page will always display 11:15 as the time, the ASP coded page will display the current time. ***

## ASP at FSIS

***For the FSIS project, ASP is primarily used to add common navigational elements to the pages. ***
- Server-side includes give you a way to insert the content of another file into a file before the server processes it.
- Example: Create a file called MyFirstInclude.asp in the C:/fsis/wwwroot folder and insert the following code:
- <body>
- The contents of the included file will go here:
- <!-- #include file=“SecondFile.asp”-->
- </body>
- Create a second file called SecondFile.asp as follows:
- <body>
- This was typed into the second file to be included into the first file.
- </body>
- Now open the page _[http://localhost/fsis/MyFirstInclude.asp](http://localhost/fsis/MyFirstInclude.asp)__ in your browser._
- You can also create includes using a virtual path to a file name using the following syntax:
- <!-- #include virtual=“/filepath/filename.asp”-->

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
- HTML Overview
- HTML Tags
- ASP
- Resources
**Homesite HTML Editor (11:30am – 12:00pm)**

## Using the Web to find Tag Help

***The Web is a great resource for finding HTML, JavaScript or ASP help. There are thousands of pages, Web areas, and tutorials which can provide assistance. ***
- Search Engines: The quickest way to find basic help is to type what you’re looking for into a search engine. For example, if you’re looking for HTML <img> tag attributes, type that into a search engine.
- W3C: The World Wide Web Consortium sets standards for different Web technologies and provides full tutorials on just about every Web language including HTML, JavaScript, and ASP.
- Books: The Wrox and O’Reily series books are of excellent quality and serve as invaluable reference for every Web Developer.
- HomeSite: HomeSite provides support for a number of different languages and has built-in tag and attribute guidance.

## View Source

***Another easy way to look up tags or formatting is to use the View Source feature of your browser. ***
- When you right click on a Web page, select the view source option.
- This will open up a text file in notepad showing all html formatting of the document.

## Priceless Links

***Links to HTML Tags and Attributes from W3C:***
- A list of HTML Tags and their descriptions can be found here:
- _[http://www.w3schools.com/html/html_ref_byfunc.asp](http://www.w3schools.com/html/html_ref_byfunc.asp)_
- A list of HTML Attributes can be found here:
- _[http://www.w3schools.com/html/html_standardattributes.asp](http://www.w3schools.com/html/html_standardattributes.asp)_
- A number of ASCII characters can be found here:
- _[http://www.w3schools.com/html/html_entitiesref.asp](http://www.w3schools.com/html/html_entitiesref.asp)_
- HTML Colors can be found here:
- _[http://www.w3schools.com/html/html_colors.asp](http://www.w3schools.com/html/html_colors.asp)_
- ASP 101 provides lessons and tutorials on a number of ASP topics:
- _[http://www.asp101.com](http://www.asp101.com/)_
- CSS Resources: W3C offers a full CSS tutorial and support.
- http://www.w3schools.com/css/default.asp

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
**Homesite HTML Editor (11:30am – 12:00pm)**
**Purpose behind using an editor**
**How to use HomeSite**
**Resources Available**

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Template**
**Defect Tracking**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**

***Finished Page***

- If errors...

- If no errors...

## HomeSite 5.0

***Macromedia HomeSite 5.5 is a powerful code editor helping professional developers efficiently build reliable websites. The software provides:***
- Advance coding features enable developers to instantly create and modify HTML and ASP tags.
- Integrated tools allow you to validate, reuse, navigate and format your code.
- Project management, quality control and site deployment features help you efficiently build, deploy and manage your entire website.
- The software can help increase productivity with wizards that quickly create pages, tables, frames and JavaScript elements.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
**Homesite HTML Editor (11:30am – 12:00pm)**
**Purpose behind using an editor**
**How to use HomeSite**
**Resources Available**

## Why don’t we just use FrontPage?

***WYSIWYG vs. HTML Editor***
- Most developers get their start using a WYSIWYG (What You See is What You Get) editor or program such as FrontPage, Adobe PageMill, or Claris Homepage. These programs allow a developer to see what the end result will look like while the interface or document is being created, and the WYSIWYG program creates all tags needed.
- One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code it thinks is needed all on its own. For example, when an author uses a WYSIWYG to create a table, the program inserts a number of tags that are extraneous. These tags can wreak havoc on a page with advanced structure, especially when developing for a number of different browsers.
- To mitigate this, the developer has to know enough about the markup language to go back into the source code and clean it up.  This process can take as much time or more time as creating the file in the first place.
- By contrast, HomeSite is a traditional editor that requires the developer to enter descriptive codes (or markup).  While the developer needs to know more about HTML and the templates being used, the end result is cleaner, more maintainable code.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
**Homesite HTML Editor (11:30am – 12:00pm)**
**Purpose behind using an editor**
**How to use HomeSite**
**Resources Available**

## Using HomeSite

***HomeSite is easy to learn and use. In addition, the program has a number of internal help menus and some built-in tutorials on its use. This section will provide:***
- Directions for setting up HomeSite for use with the FSIS Development environment;
- An overview of few key dropdown features;
- Use of the edit and browse windows;
- A description of key toolbar items; and
- How to use HomeSite features to follow the coding standards checklist.

## Setting Up HomeSite

***General Settings***
- There are a number of settings that should be set up before using HomeSite for the first time. These can be found in the Options  Settings menu. Many of the settings are personal preferences, but there are a number which are specific to the needs of the FSIS technical architecture and Web Team coding standards. Details of configuring HomeSite for Web Team members are detailed below.

## Setting Up HomeSite

***Startup Menu***
- The startup menu configures a number of default settings for HomeSite.  Since development will always be done in the C:/fsis/wwwroot/ environment, set the startup menu to start in the C:/fsis/wwwroot/ directory by entering that URL in the Always start in this folder***. ***

## Setting Up HomeSite

***Editor Menu***
- The editor menu lets you set up Tag insight, a very powerful feature of HomeSite which automatically lists tags and attributes specific to the tag being typed. For example, if a user types <a to open the anchor tag, a dropdown list displays all the <a attributes such as href, access, class, etc. It is generally a good idea to set this to display after a 1 second pause. If there is an attribute dropdown list, but the attribute is not contained in the list, then the attribute is not supported by HTML 4.01 and should not be used.

## Setting Up HomeSite

***Tag Insight and Completion***
- Tag completion is a very powerful and helpful built in HomeSite function. If Tag completion is enabled, whenever a new tag is opened, such as <a href>, an end tag </a> is automatically inserted. Leaving this feature on can help a developer remember to close a tag and can reduce typing.

## Setting Up HomeSite

***Browse Menu***
- HomeSite has a feature called browse which users your computers browser to view files inside a HomeSite window. Since the FSIS Web Team will be using ASP, the HomeSite browser must be configured to pass all files through the server to execute server side includes and other ASP tags. To enables this, check the Enable Server Mappings check box and add the C:\fsis\wwwroot in the Map From field and _[http://localhost/fsis/](http://localhost/fsis/)__ in the Map To field. Then hit OK, and apply._*** ***

## Setting Up HomeSite

***Server Mapping (continued)***
- When the Mapping window pops up, check the Enable Server Mappings check box and add the C:\fsis\wwwroot in the Map From field and _[http://localhost/fsis/](http://localhost/fsis/)__ in the Map To field. Then hit OK, and apply._*** ***

## Setting Up HomeSite

***Validation***
- Configuring validation will allow HomeSite to check against certain Web standards. The following versions should be checked: HTML 2.0, 3.0, 4.0.

## Search and Replace Dropdowns:

***Extended Find***
- Extended find is a useful tool which can find code throughout the document.
***Extended Replace***
- Extended replace can be used to replace sections of code which appear in many files. This feature cannot be undone. In general, this feature should be used sparingly, since changing something in every file can lead to disastrous results. Some projects have spent weeks fixing errors caused by a careless global replace (of course, this also provides a very strong case for using Visual Source Safe of another form of version control, so that an archived version of a file could be reverted to).

## Viewing the File Navigator

***View***
- Resource Windows: It is a good idea to view the Files 1 (Primary) files.

## Opening Files

- To open a file, browse through the directory tree and find the folder you need. The files contained in the folder will appear in the window the file navigator window. All files for development are contained in the C:/FSIS/wwwroot directory.
***Files with Red Dots***
- When you open a folder, the files may have red dots next to them. If they do, you will need to use Visual Source Safe (VSS) to check out the files. For more details on this, see the section on Checking Out files in the VSS section of the training documentation.

## Edit / Browse View

***Edit Mode***
- Allows you to edit the contents of the file. If you are unable to edit the content in this view, the file may be opened in read only mode. If this is the case, you will need to Check Out the file using Visual Source Safe.

## Browse View

***Browse***
- Toggle to the browse menu and you will be able to view the page as if you opened it in a browser. If there are errors, it will display them as Internet Explorer would. If the settings are working correctly, the entire page should be viewable from the index.asp file which ties all the Server Side Includes together.

## Code Color Guidance

***Color Coding:***
- As you can see, the different tags in HTML are color coded by HomeSite. This helps you tell if a tag has been validated. Validation is the process by which HomeSite checks against HTML standards to determine if you have coded an HTML tag correctly. Tags which are missing < > or contain invalid names will not display correctly, so color can be very useful in verifying your tags are correct.

## Left Side Toolbar Items

**Close Active Document:** Closes the document open in the editor window.
**Split Current Document:** Allows navigation to two places in the same document.
**Word Wrap:** Shows all text within the viewable area of the file, allowing lines to break for greater visibility.
**Show Gutter:** Adds/Removes the gray space to the left of the navigation window.
**Show Line Numbers in Gutter:** Adds/Removes line numbers. Line numbers are very useful for debugging and error tracking.
**Show Hidden Characters:** Shows all markup such as spaces, paragraph breaks, tabs.
**Full Screen:** Removes the top and bottom navs to provide more screen area.
**Show Open Doc List:** Displays a list of any documents open to allow for quick navigation between files.
**First, Previous, Next, and Last Document:** Improve navigation.

## More Left side Toolbar Items

**Indent**: Creates a five space indentation. This can be very useful when aligning large blocks of text is necessary, since it can be used on multiple lines.
**Unindent**: Removes a five space indentation. This can be very useful when aligning large blocks of text is necessary, since it can be used on multiple lines.
**Tag Insight**: Tag insight provides a drop down of suggested attributes for a given tag after it is typed.
**Tag Validation**: When turned on, the tag validator tells the developer whether a tag is valid in a given set of standards.  The validator will check against a number of different languages which can be configured from the settings menu.
**Show Browser Below Editor**: This opens a browser window at the bottom of the page.
**Macros On/Off, Play, and Macro Manager**: A macro is a set of repeatable steps which can be “played.” Macros can be used to insert blocks of code which are commonly used. For example, if the same table is used to hold all content divider graphics, one could create a macro which codes the content divider, then “play” the macro to insert the content divider whenever needed on the site. This can be very useful in automating steps which are repeated many times.

## Coding Standards Checklist

***The coding standards document provides a complete guide and can be found on the shared drive in the directory called 6-Technical Design. All developers should read it first and complete details and examples can be found there. ***
***A good checklist to use before considering a page complete is as follows:***
- Check that all files follow the file naming conventions and uses meta tags properly.
- Replace <b>, <i>, <u>, <font>, and other deprecated tags with <strong>, <i>, or styles.
- Spell Check using F7 in HomeSite.
- Ensure Code is properly aligned and indented.
- Compile and Debug all code.
- Verify links.
- Use alt and title tags for all visible images.
- Unit test the code in the browser. When the page is complete, log the action in the issue tracker, check the file back into Source Safe from development, and get the latest version from Source Safe to test.

## Coding Standards Checklist

***Replace <b> or <u> tags with <strong> tags and replace <i> tags with <em> tags.  ***
- Eliminate the need for <font> tags using the appropriate style.
- Check that all file names follow the _file naming convention_ described in the coding standards document.
- Check that the index page loads in the browser without error.
- All visible images and text images must have descriptive alt and title tags. Spacers and content dividers do not need them.
- There should be two meta tags. The meta name=”description” and meta name=”keywords” should always be present in that form. The content=”XX” portion is specific to each page. Examples:
- <meta name="description" content="List of FSIS Directives, Series 12,000- Voluntary Inspection, which provide official communications and instruction to Agency personnel to carry out their functions.">
- <meta name="keywords" content="FSIS, Food Safety, Directives, Series 12,000”>
- Before reusing a file on a number of pages, have someone else review it in a browser.

## Coding Standards Checklist

***Ensure all code is properly indented and aligned: ***
- In general, this means that an tags should be opened and closed on different lines but in the same column such as:
- <table>
-   <tr>
-      <td>
-         <img src=””>
-      </td>
-   </tr>
- </table>
***Compile all code and debug:***
- A page can often look complete on a new browser but have numerous errors on older browsers. In addition, files which comprise one part of a larger file may have code errors that will cause problems when the entire file is served together. Because of this, code should always be compiled before closing a file. The compiler checks that all open tags are closed and that all standards have been followed.

## Coding Standards Checklist

***Compiling Code and Debugging (continued)***
- To compile, use Shift+F6 in HomeSite.
- The errors will appear at the bottom of the screen with the line number and error description, as below.  Double click on an error and it will bring you to the line containing the error. Fix each error and compile the file again using Shift+F6. Many tags have been deprecated, or retired, and therefore should not be used. The most common deprecated tags are related to styles.

## Coding Standards Checklist

***Compiling Code and Debugging (continued)***
- When all errors have been debugged, the compile window will display the “No Errors or Warnings” message.

## Coding Standards Checklist

***Verifying Links***
- In addition to checking validation, HomeSite also has a Verify Link function in  the Tools menu that prevents pages having broken links.
- The Verify Link function will check that all links, both internal and external, exist.

## Coding Standards Checklist

***Verifying Links (continued)***
- Before running link validator, it will need to be configured by using the   button, which opens the set URL configuration menu. When this menu opens, enter the C:\fsis\wwwroot as your root directory. This configuration should only need to be done once.

## Coding Standards Checklist

***Verifying Links (continued)***
- To run the Verify Links function, click on the  arrow button of the Verify Link menu. The following window will display. Green checks indicate that the link is valid and red Xs indicate broken links. Double click on the link to go to the broken link. In the picture below, the “goggle.com” link is broken and should be fixed. When all links are shown in green, the pages links have all been validated.

## Agenda

**Agenda**

**Training Agenda (9:00am – 9:15am )**
**HTML / ASP Development (9:15am – 11:30am)**
**Homesite HTML Editor (11:30am – 12:00pm)**
**Purpose behind using an editor**
**How to use Homesite**
**Resources Available**

## Available Resources

***HomeSite has a number of built-in help features in the Help Menu. ***
***Additional Assistance can be found on Macromedia's Web site:***
- HomeSite home page:
-  _[http://www.macromedia.com/software/homesite/](http://www.macromedia.com/software/homesite/)_
- HomeSite Tutorials:
- _[http://www.macromedia.com/software/homesite/resources/tutorials/](http://www.macromedia.com/software/homesite/resources/tutorials/)_
- HomeSite Community Resources:
- _[http://www.macromedia.com/devnet/server_archive/articles/hs_community_resource.html](http://www.macromedia.com/devnet/server_archive/articles/hs_community_resource.html)_

## Training Progress

**Training Progress**

_**Content Creation**_

_**Page Development**_

_**Testing**_

**HTML / ASP Develop.**
**Home Site HTML Editor**
**Style Guide**
**Visual Source Safe**
**Template**
**Defect Tracking**

**Site Map**
**Templates**
**Content Submission Worksheets**
**Style Guide**

**Defect Tracking**
**Visual Source Safe**
**Browser / 508 Compliance**
**Style Guide**

***Finished Page***

- If errors...

- If no errors...

## FSIS Technical Architecture

***FSIS Technical Architecture consists of four environments:***
**Development**: Facilitates the creation and modification of the solution.
**Test**: serves as an area to functionally test the solutions individual components as well as testing the solutions interaction with already existing components to insure it meets the functional design and component interaction requirements.
**vRep**: Houses the Native Minds Natural Language vRep tool.
**Public Web Server (Production):** house and will be an area for end-users to view the final solution.

## Development Environment

***At minimum, a page follows a three stage lifecycle: develop, test, and publish. ***
- All development work will be completed in the development environment. The purpose of this environment is to provide an area where developers can create custom source code to technically reflect functional wire frame design.  In this environment, the developers will develop, create_,_ and modify_ _individual HTML, JavaScript, and ASP components.

## Development Environment

***The development process will always follow these steps, which will be further detailed during the training. ***
- Log into Development server using a terminal services application. The Development server is now the developer’s desktop.
- Check out needed files from the Visual Source Safe (VSS) database to corresponding directory on the development directory C:/fsis/wwwroot/
- Use HomeSite to develop new pages or edit existing ones.
- Unit tests by viewing the page either using the HomeSite internal browser or viewing the page on the corresponding _[http://localhost/fsis/](http://localhost/fsis/)__  URL. _
- Correct any defects found during unit test.
- When development and unit testing is complete, Check in the edited files to VSS.
- Use VSS to Get Latest Version to the corresponding Test folders, which are on E:/fsis/wwwroot/.
- Update the defect/issue tracker and notify testers as appropriate.
- Testers will test the pages in test and record any remaining defects and return a response through the defect tracking tool.