Lesson 16 Practicie Activities

Home Page Lesson 16

Printing this web page may facilitate these performances.

Lesson 16 Practice:

Perform each of the following steps:

  1. Open the source code template file, "template.html", created in the previous Lesson (Lesson 15) with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Page 1

    2. In the body of the source code, center align the numeric character, "1", in an h1 heading.

    3. Save this source code in your lesson folder or directory under the file name of "Less16CodePage1.html".

    4. Open the web page file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  2. Open the source code file, "Less16CodePage1.html" with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Page 2

    2. Change the h1 heading text to the numeric character "2".

    3. Save this source code in your lesson folder or directory under the file name of "Less16CodePage2.html".

    4. Open the web page file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  3. Open the source code file, "Less16CodePage1.html" with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Page 3

    2. Change the h1 heading text to the numeric character "3".

    3. Save this source code in your lesson folder or directory under the file name of "Less16CodePage3.html".

    4. Open the web page file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  4. Open the source code file, "Less16CodePage1.html" with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Page 4

    2. Change the h1 heading text to the numeric character "4".

    3. Save this source code in your lesson folder or directory under the file name of "Less16CodePage4.html".

    4. Open the web page file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  5. Open the source code file, "Less16CodePage1.html" with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Page 5

    2. Change the h1 heading text to the numeric character "5".

    3. Save this source code in your lesson folder or directory under the file name of "Less16CodePage5.html".

    4. Open the web page file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  6. Open the source code template file, "template.html" with a text editor. Save this source source code in your lesson folder or directory under the file name "Less16CodeFS1.html". Edit this file as follows (save this file periodically during editing);

    1. Change title text to read as follows:

      Lesson 16 Code Frameset 1

    2. Replace the opening body tag with an opening frameset tag contianing the cols attribute and the attribute value of "12%, *".

    3. Type a frame tag containg the src attribute with the attribute value of "Less16CodePage1.html" and the name attribute with the attribute value of "One".

    4. Type the inner opening frameset tag containing the rows attribute with the attribute value of "12%, *".

    5. Type a frame tag containing the src attribute with the attribute value of "Less16CodePage2.html" and the name attribute with the attribute value of "Two" (utilize space slash syntax).

    6. Type a frame tag containing the src attribute with the attribute value of "Less16CodePage3.html" and the name attribute with the attribute value of "Three" (utilize space slash syntax).

    7. Type the closing inner frameset tag.

    8. Replace the closing body tag with a closing frameset tag.

    9. Save the completed file

    10. Open the frameset file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  7. Open the frameset file created in the previous step, "Less16CodeFS1.html", with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Frameset 2

    2. In the opening frameset tag for the inner frameset, add a comma, a space and 12% to the rows attribute value.

    3. Add a third frame tag in the inner frameset tag pair with content which reads as follows:

      Frame src="Less16CodePage4.html" name="Four" /

    4. Save the completed file in your lesson folder or directory under the file name of, "Less16CodeFS2.html".

    5. Open the frameset file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  8. Open the frameset file created in the previous step, "Less16CodeFS2.html", with a text editor. Edit this file as follows;

    1. Change title text to read as follows:

      Lesson 16 Code Frameset 3

    2. In the opening frameset tag for the outer frameset, add a comma, a space and 12% to the cols attribute value.

    3. Add a frame tag in the outer frameset, immediately after the closing frameset tag of the inner frameset. The content of this frame tag reads as follows:

      frame src="Less16CodePage5.html" name="Five" /

    4. Save the completed file in your lesson folder or directory under the file name of, "Less16CodeFS3.html".

    5. Open the frameset file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

  9. Open the source code template file, "template.html" with a text editor. Save this source source code in your lesson folder or directory under the file name "Less16CodeFS4.html". Edit this file as follows (save this file periodically during editing);

    1. Change title text to read as follows:

      Lesson 16 Code Frameset 4

    2. Replace the opening body tag with the outer opening frameset tag containing the cols attribute with the attribute value of "*, *".

    3. Type the first inner opening frameset tag with contents which read as follows:

      frameset rows="25%, *"

    4. Type a frame tag with contents which read as follows:

      frame src="Less16CodePage1.html" name="One" /

    5. Type a frame tag with contents which read as follows:

      frame src="Less16CodePage2.html" name="Two" /

    6. Type the first inner closing frameset tag.

    7. Type the second inner opening frameset tag with contents which read as follows:

      frameset rows="*, *"

    8. Type a frame tag with contents which read as follows:

      frame src="Less16CodePage3.html" name="Three" /

    9. Type a frame tag with contents which read as follows:

      frame src="Less16CodePage4.html" name="Four" /

    10. Type the second inner closing frameset tag.

    11. Replace the closing body tag with the outer closing frameset tag.

    12. Save the completed file.

    13. Open the frameset file.with your browser and verify the validity of your source code. Debug source code, if applicable. The web page display for your source code should be the same as the web page display made availabe herein for comparative purposes. Links to the comparative web pages for all lessons are available on the home page under the heading of "Lesson Web Pages".

End of Lesson 16 Practice.

Home Page Lesson 16