FSIS Re-design Project Web Site Maintenance Training Day 1 March 4, 2004

1. FSIS Re-design Project Web Site Maintenance Training Day 1 March 4, 2004

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

3. Training Agenda 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 Web site. • Day 1 Topics • HTML / ASP Development • Homesite HTML Editor • Day 2 Topics • Site Map • Content Creation • HTML / ASP Templates • Style Guide • Day 3 Topics • Defect Tracking • Version Control • Browser / 508 Compliance Testing • Question & Answer

4. Training Progress Finished Page Content Creation Site Map Templates Content Submission Worksheets Style Guide Page Development HTML / ASP Develop. Home Site HTML Editor Style Guide Visual Source Safe Template Defect Tracking If errors… If no errors… Testing Defect Tracking Visual Source Safe Browser / 508 Compliance Style Guide

5. First Generation Web Development Content & Page Creation Finished 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 Finished Page • 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 Finished Page • 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

6. 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.

7. Best Practices Web Development Content Creation Testing • 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. If errors… If no errors… Page Development • 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. Finished Page

8. 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.

9. 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)

10. Training Progress Finished Page Content Creation Site Map Templates Content Submission Worksheets Style Guide Page Development HTML / ASP Develop. Home Site HTML Editor Style Guide Visual Source Safe Template Defect Tracking If errors… If no errors… Testing Defect Tracking Visual Source Safe Browser / 508 Compliance Style Guide

11. 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)

12. 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.

13. 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)

14. 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/” class=“BodyTextBlack”>FSIS’s HomeSite</a>

15. 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

16. 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.

17. 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.

18. Basic Tags • Below is a list of a number of basic tags: Let’s see these tags in action with a sample page.

19. 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₃ does. <br><br> • The sup tag can be used to display things like 4⁵ <br><br> • </body> • </html>

20. 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.

21. 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>

22. 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:

23. 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.

24. 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. Defines a table Defines a row Defines a data cell Contents of cell Closes data cell Closes row Closes table <table> <tr> <td> Contents of Cell </td> </tr> </table>

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

26. 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.

27. 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.

28. 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:

29. 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.

30. 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>

31. Tables on an FSIS Page

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

33. 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:

34. 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.

35. 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!

36. 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.

37. 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; • }

38. 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.

39. Common Styles • Below is a table listing the most commonly used styles in the redesign.

40. 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)

41. 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.

42. 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. • 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.

43. 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.

44. 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 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”-->

45. 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)

46. 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.

47. 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.

48. 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 • A list of HTML Attributes can be found here: • 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 • HTML Colors can be found here: • http://www.w3schools.com/html/html_colors.asp • ASP 101 provides lessons and tutorials on a number of ASP topics: • http://www.asp101.com • CSS Resources: W3C offers a full CSS tutorial and support. • http://www.w3schools.com/css/default.asp

49. 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

50. Training Progress Finished Page Content Creation Site Map Templates Content Submission Worksheets Style Guide Page Development HTML / ASP Develop. Home Site HTML Editor Style Guide Visual Source Safe Template Defect Tracking If errors… If no errors… Testing Defect Tracking Visual Source Safe Browser / 508 Compliance Style Guide