COM320 – Networks – Dynamic HTML

Create a basic HTML Page 1. Start your text editor and create a new document, if necessary. 2. Type the following tags to begin the HTML document. Remember that all HTML documents must begin and end with the … tag pair. 3. Add the following and tags between the … tag pair. The title will appear in your Web browser’s title bar. Remember that the … tag pair must include the … tag pair. Web Page Example 4. Next, add the following document body tags above the closing tag: 5. Type the following tags and text between the … tag pair to create the body of the HTML document. This line uses the heading 1 tag This line includes
a line break The following line is a horizontal rule This line uses the heading 2 tag This line uses the heading 3 tag This line contains text formatting

6. Save the file as FirstWebPage.html in your folder. Some text editors automatically add their own extension to a document. Notepad for instance, adds an extension of .txt. Be sure your document is saved with the extension .html. 7. Close the FirstWebPage.html file and then open it in Firefox or your favourite browser by selecting Open File from the File menu or by simply clicking on the file in your folder. Figure below shows what it should look like.

8. Close your web browser window.

Exercise 2 - Creating a HTML file without all required Tags. 1. Start your text editor and create a new document. 2. Without including any , , or tags, type the following statements. Notice that the closing tags are missing for the tags and the last tag. Understanding Client/Server Architecture To be successful in Web development, you need to understand the basics of client/server architecture. There are many definitions of the terms client and server. In traditional client/server architecture, the server is usually some sort of database from which a client requests information. from JavaScript 5th Edition
by Don Gosselin 6. Save the file as Architecture.html in your folder. 7. Close the Architecture.html file and then open it in Firefox or your favourite browser. Even though the HTML document does not include all of the required tags, the web browser displays it properly, as the figure below shows.

8. Close your web browser window.

Exercise 3 - Creating an XML Document that contains your mailing address 1. Start your text editor and create a new document. 2. Add the following XML declaration that includes the version, encoding, and standalone attributes:

3. Type the following opening tag to begin the document:

4. Next add the following elements that contain your mailing address. Be sure to replace the text within each tag pair with your own information. your nameyour address your cityyour state your zip code 5. Type the closing mailing address tag, as follows: 6. Save the file as MailingAddress.xml in your folder. 7. Close the file in your text editor.

Exercise 4 - Creating an XML Document that stores data 1. Start your text editor and create a new document. 2. Type the XML declaration, as follows: 3. Next type the opening and closing tags for a root element named : 4. Save the file as Books.xml in your chapter 1 folder. 5. Open the file in your browser. It should appear as the figure below shows.

6. Close your web browser window.

Exercise 5 - Introducing a case error into the books.xml document 1. Start your text editor and reopen books.xml 2. Modify the closing tag so it is uppercase. Your file should appear as follows: 3. Save the file as Books.xml and open in a browser. You should receive an error like the one shown below. As you can see, the closing tag does not match start tag.

4. Return to the Books.xml file in your text editor and change the tag back to lowercase letters and save the file. 5. Return to the web browser window that displays the books.xml file and refresh the windows. The file should open correctly. 6. Close your web browser window.

Exercise 6 - To add two elements to the books.xml file 1. Start your text editor and reopen books.xml and modify the document as follows to include two elements. Be sure to add the elements within the root element. For now, do not include the closing tag. A Farewell to Arms Of Mice and Men 3. Save the file as Books.xml and open in a browser. You should receive an error like the one shown below. As you can see, the error is raised because the browser cannot find the ending tag for the elements.

4. Return to the Books.xml file in your text editor and add the closing tags to each of the elements and save the file. A Farewell to Arms Of Mice and Men 5. Return to the web browser window that displays the books.xml file and refresh the windows. The file should open correctly like below.

Exercise 7 -To modify the books.xml file to include nested elements: 1. Start your text editor and reopen books.xml 2. Replace the element for A Farewell to Arms with the following nested elements that contain information on the book’s title and author. Notice that the and elements are nested within the element, and that the and elements are nested within the author element. A Farewell to Arms Ernest Hemingway

3. Next, replace the element for Of Mice and Men with the following nested elements: Of Mice and Men John Steinbeck

4. Save the Books.xml file and then open it. Your screen should look like below.

Exercise 8 - To add a publisher attribute to each of the elements: 1. Start your text editor and reopen books.xml

2. Modify the opening tag for the A Farewell to Arms element so it includes the publisher attribute with an assigned value of “Scribner”:

3. Modify the opening tag of the Of Mice and Men element so it includes the publisher attribute with an assigned value of “Penguin”:

4. Save the Books.xml file and then open it in a browser. Your screen should look like the figure below.

5. Close your web browser window.

Exercise 9 - To add a publisher attribute to each of the elements: 1. Start your text editor and reopen books.xml

2. Add a nested empty publication element to the A Farewell to Arms element as follows: A Farewell to Arms Ernest Hemingway

3. Now add a nested empty publication element to the Of Mice and Men element as follows: Of Mice and Men John Steinbeck

4. Save the Books.xml file and then open it in a browser. Your screen should look like the figure below.

5. Close your web browser window.

Exercise 10 - To create a document that uses the Transitional DTD

1. Start your text editor and create a new document

2. Type the opening declaration that uses the Transitional DTD, as follows:

3. Type the element as follows. Remember that all Web pages must begin and end with the … tag pair.

4. Within the element, add the following and elements to the document. The title appears in the Web Browser’s title bar. Remember that the element must include a element. The element cannot exist outside the element Great American Novel 5. Next, add the following element above the closing tag. 6. Type the following elements and text between the … tag pair to create the body of the document. It was a dark and stormy night bright and sunny day. Lightning streaked the sky, followed by an angry explosion of thunder. High, soft clouds accented the sky and a soft wind gently swayed the trees.

7. Save the file as Novel.html and then open it in a browser. Your screen should look like the figure which follows.

8. Close your web browser window.

Exercise 11 - To start creating the home page for the Don’s Pizza Web Site

1. Start your text editor and create a new document and type the opening declaration that uses the Strict DTD, as follows:

2. Type the element as follows. Remember that all Web pages must begin and end with the … tag pair.

3. Within the element, add the following and elements to the document. The title appears in the Web Browser’s title bar. Remember that the element must include a element. The element cannot exist outside the element Don’s Pizza Home Page 4. Next, add the following element above the closing tag. 5. Type the following elements and text between the … tag pair to create the body of the document. Today's special: buy a large meat lover's or vegetarian pizza and receive a free Caesar salad and two liters of Diet Pepsi! Out meat lover's pizza is covered with loads of pepperoni, savory Italian sausage, smoked bacon, hamburger, mushrooms, and extra cheese. Our vegetarian pizza has lots of mushrooms, black olives, bell peppers, onions, artichoke hearts, and fresh tomatoes.

6. Save the file as DonsPizza.html and then open it in a browser. Your screen should look like the figure below.

7. Close your web browser window.

Exercise 12 -To start creating the home page for the Don’s Pizza Web Site

1. Start your text editor and create a new document and type the opening declaration that uses the Strict DTD, as follows:

2. Type the element as follows. Remember that all Web pages must begin and end with the … tag pair.

3. Within the element, add the following and elements to the document. The title appears in the Web Browser’s title bar. Remember that the element must include a element. The element cannot exist outside the element Don’s Pizza Home Page 4. Next, add the following element above the closing tag. 5. Type the following elements and text between the … tag pair to create the body of the document. Today's special: buy a large meat lover's or vegetarian pizza and receive a free Caesar salad and two liters of Diet Pepsi! Out meat lover's pizza is covered with loads of pepperoni, savory Italian sausage, smoked bacon, hamburger, mushrooms, and extra cheese. Our vegetarian pizza has lots of mushrooms, black olives, bell peppers, onions, artichoke hearts, and fresh tomatoes.

6. Save the file as DonsPizza.html and then open it in a browser. Your screen should look like the figure below.

7. Close your web browser window.

Exercise 13 -To add comments to the DonsPizza.html file

1. Start your text editor and open DonsPizza.html.

2. At the top of the file, above the declaration, add the following comments. Be sure to use your name and today’s date. NOTE: The above dashes should be the dash above keyboard letter p repeated twice…..

3. Save DonsPizza.html and then open it in a browser to confirm your comments do not appear.

4. Close your web browser window.

Exercise 14 - To validate a file: 1. Start your text editor and open DonsPizza.html. 2. Add the following element immediately above the closing tag: 3. Start your Web browser and enter the URL for the W3C Markup Validation Service Upload Page in the address box:

http://validator.w3.org/#validate_by_upload

4. Click the browse button to display the Choose file dialog box. 5. In the Choose file dialog box, navigate to where you saved the DonsPizza.html file. Locate and open the file. The drive folder path and filename should appear in the File Text box on the upload page. 6. Click the Validate This File Button. The W3C Markup Validation Service validates the document and returns the results displayed below.

7. Close your web browser window.

Part B To start creating the home page for the Central Valley Farmers Market Web Site 1. Create a new document in your text editor (such as notepad++) and type the opening declaration that uses the HTML DTD as follows: 2. Type the element as follows: 3. Within the element, add the following and elements to the document. Central Valley Farmers’ Market Web 4. Next, add the following document element within the element: 5. Add the following elements to the document body (between the … tags). Notice that the text and inline elements are contained within a block-level element. The Central Valley Farmers’ Market offers plenty of fresh picked fruits, vegetables, herbs and flowers. Local artisans bring wonderful hand made arts and crafts. You will also find lots of baked goods, jams, honey, cheeses, and other products. 6. Save the file as index.html in your folder. 7. Open the index.html file in your browser. Figure below shows file as in appears in Firefox.

8. Close your web browser window.

To add standard attributes to the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Just above the closing tag, add the following element that contains the Italian phrase. The element also includes the lang, dir and title attributes. Quello che ci mette, ci trova!

3. Save the index.html file and then open it in your web browser. Figure below displays the index.html file as in appears in Firefox.

4. Close your web browser window.

To add heading elements to the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Add the following and elements as the first elements in the body section, after the opening tag but before the first tag. Central Valley Farmers’ Market About the Market

3. At the end of the body section, add the following element that lists the hours of operation: Hours of Operation The Central Valley Farmers' Market is held every Tuesday, Thursday, and Saturday from April through October, then Saturdays only in November until Thanksgiving. The Market is open from 7 a.m. - 1 p.m. The vendors will be there rain or shine! 4. At the end of the body section, add the following and elements that list this week’s featured vendors: Featured Vendor List Be sure to visit this week's featured vendors. Big Creek Produce Offers a diverse selection of produce including restaurant-quality vegetables and edible flowers. Blue Sky Gardens Grows a variety of organic vegetables including French slenderette green beans, spinach, salad greens, squash, pumpkins, and cherry tomatoes, as well as a vast array of fresh-cut and dried flowers. Maple Ridge Farms Specializes in organically grown lettuces, arugula, red mustard, and other greens. Manzi Produce Hand picks, hand washes, and hand sorts all of their products, which include nuts, plants, herbs, perennials, flowers, wild-gathered items, meat, fruit, and vegetables. Lee Family Farms Produces organically grown traditional Asian vegetables such as bok choy, lemon grass, and hot chili peppers.

5. Save the index.html file and then open it in your web browser. Figure below displays the index.html file as in appears in Firefox.

6. Close your web browser window.

To add section elements to the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Enclose the hours of operation and Featured Vendors List heading elements and the paragraphs which follows them with section elements as follows: Hours of Operation The Central Valley Farmers' Market is held every Tuesday, Thursday, and Saturday from April through October, then Saturdays only in November until Thanksgiving. The Market is open from 7 a.m. - 1 p.m. The vendors will be there rain or shine! Featured Vendor List Be sure to visit this week's featured vendors. 3. Enclose the heading elements and the paragraphs which follows them with section elements as follows: Big Creek Produce Offers a diverse selection of produce including restaurant-quality vegetables and edible flowers. Blue Sky Gardens Grows a variety of organic vegetables including French slenderette green beans, spinach, salad greens, squash, pumpkins, and cherry tomatoes, as well as a vast array of fresh-cut and dried flowers. Maple Ridge Farms Specializes in organically grown lettuces, arugula, red mustard, and other greens. Manzi Produce Hand picks, hand washes, and hand sorts all of their products, which include nuts, plants, herbs, perennials, flowers, wild-gathered items, meat, fruit, and vegetables. Lee Family Farms Produces organically grown traditional Asian vegetables such as bok choy, lemon grass, and hot chili peppers. 4. Save the index.html file and then open it in your web browser. Figure which follows displays the index.html file as in appears in Firefox. (note it should look the same as before).

6. Close your web browser window.

To add header and footer elements to the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Enclose the first heading elements and the two paragraphs which follows them in a header element as follows: About the Marke The Central Valley Farmers' Market offers plenty of fresh picked fruits, vegetables, herbs, and flowers. Local artisans bring wonderful hand-made arts and crafts. You will also find lots of baked goods, jams, honey, cheeses, and other products. Quello che ci mette, ci trova! 3. Add the following footer elements to the end of the document. Copyright 2011 Central Valley Farmers' Market. All rights reserved. 4. Save the index.html file.

To add an address to the footer element of the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Enclose the first heading elements and the two paragraphs which follows them in a header element as follows: Copyright 2011 Central Valley Farmers' Market. All rights reserved. CVFM Inc. (650) 777-1234 3. Save the index.html file and open it in your web browser. It should look like the diagram below:

4. Close your browser window.

To add horizontal rules to the Central Valley Farmers’ Market home page

1. Return to the index.html file in your text editor.

2. Add horizontal rules above each of the elements. You should add three elements in total. 3. Save the index.html file and open it in your web browser. It should look like the diagram below with horizontal rules above About the Market and Hours of Operation headings.

4. Close your browser window.

To add a contact information page to the Central Valley Farmers’ Market home page

1. Create a new document in your text editor.

2. Type the declaration, element, document head, and the element. Use the HTML DTD and “Contact Information for the Central Valley Farmers Market” as the content of the element. Your document should appear as follows: Contact Information for the Central Valley Farmers' Market

3. In the document body, add the following headings and address element that list the contact information for the Central Valley Farmers’ Market. Central Valley Farmers' Market Contact Information If you have any questions or concerns about the CentralValley Farmers' Market, please call (908) 626-3764.
You can also send mail to the Central Valley Farmers' Market at the following address: P.O. Box 135
Central Valley, CA 94359 You can send an e-mail to Your e-mail address.

4. At the end of the body section, add the following statement that creates a link back to the home page for the Central Valley Farmers’ Market: Home

5. Save the file as Contact.html. Next you add a link from the Central Valley Farmers’ Market home page to the contact information page.

To add a link from the Central Valley Farmers’ home page to contact page

1. Return to the index.html file in your text editor.

2. Place the insertion point after the closing tag, press Enter, and then type the following elements that create a link to the contact.html document: Contact Information

3. Save the index.html file and then open it in a web browser and click the Contact Information link. The contact.html file should open in your browser window. 4. Click the Home link to return to the home page for the Central Valley Farmers’ Market.

5. Close your Web browser window.

To add a mailto link from the Farmers’ contact page

1. Return to the contact.html file in your text editor.

2. Place the insertion point after the closing tag, press Enter, and then type the following element that creates a mailto link. Be sure to enter your email address.

You can send an e-mail to Your e-mail address.

3. Save the contact.html file and then open the index.html it in a web browser. Click the Contact Information link, then click the mailto link on the contact.html page and try sending yourself an email message.

4. Close your Web browser window.

To add links to the elements on the Farmers’ Market Home page

1. Return to the index.html file in your text editor.

2. Place the insertion point after the closing tag in the statement that creates the Contact Information link, press Enter, and then add the following bookmark links to the documents heading level 2 elements. Also enclose all four paragraphs in a section.

Contact Information About the Market Hours of Operation Featured Vendor List

3. Modify the About the Market heading element so it includes an element with the same id attribute that you added to the bookmark element: About the Market

4. Modify the Hours of Operation heading element so it includes an element with the same id attribute that you added to the bookmark element: Hours of Operation

5. Modify the Featured Vendor List heading element so it includes an element with the same id attribute that you added to the bookmark element: Featured Vendors List

6. Save the index.html file and then open it in a web browser and test the new links. The next figure shows how the new bookmark links should appear.

7. Close your Web browser window.

To add keywords and description meta elements on the Farmers’ Market Home page

1. Return to the index.html file in your text editor.

2. Above the closing tag, add the following element that creates the description meta element:

3. After the description element, add the following keyword element:

4. Save the index.html file.

To add a robots element to the Farmers’ Market Home page

1. Return to the index.html file in your text editor.

2. Above the closing tag, add the following element that creates the robot element that allows spiders to index the page but not to follow any links on the page:

3. Save the index.html file.

To add the content-type element and then validate the documents

1. Return to the index.html file in your text editor. Above the closing tag, add the following element that creates a content-type meta tag that specifies a MIME type of text/html and a character set of UTF-8.

2. Save and close the index.html file.

3. Return to the contact.html file and add a content-type element above its closing tag.

4. Save and close the contact.html file.

5. Start your web browser and enter the URL for the upload page of the W3C Markup Validation Service: http://validator.w3.org/#validate_by_upload. Open and validate the index.html and contact.html files. If you receive any warnings or errors, fix them and revalidate the documents.

6. Close your web browser.