ITSE 1411 Beginning Web
Assignment 1

• Design Text, Chapter 3, Pages 21 - 32 (HTML Kick-Start)
• Design Text, Chapter 4, Pages 33 - 38 (CSS Kick-Start sections 4.1 - 4.4)
• JavaScript Text, Chapter 1, Creating and Validating Web Pages, Pages 8 - 25

Reading:

• Be sure to notice the differentiation between HTML and XHTML. Coding for this class will usually be completed in strict XHTML.
  • XHTML strict is usually more accessible (pages can be read more accurately by software that reads for the blind.)
  • XHTML strict is usually more consistently rendered among the different browsers.
  • XHTML strict usually render on mobile phoness or PDA's.
• The Canada example on page 7 of the JavaScript book is written in HTML, not to XHTML strict standards.
  • As written the page does not validate in XHTML strict.
  • The seventh line that contains an img tag is not contained in a block element and is not self-closing.
  • Additionally, the break tags are written as HTML, not XHTML. They must be self-closing.
  • For this page to validate you must change line 7 to be:
    <p><img src="canada.gif" alt="Image of the Canadian flag." /></p>
    and you must write your break tags as <br />
• On page 9 of the JavaScript text, the text tells you that the data files are available on a CD-ROM with your book.
  • If you did not receive a CD-ROM, you may download the files from the publisher. student data files.
  • The method of filing all the student files is complicated. For the pages that you upload for grading, just use the method I define, your public_html folder, followed by your assignment# folder.
  • You may use any method you choose for pages that you do not upload.
• On page 15 of the JavaScript book, in the html code for Figure 1-4, the text A&E Network is used.
  • Special characters entities are used to show text that is not on the keyboard. For example, the last line of the ForestvilleFunding page had a copyright symbol. In order for that symbol to show, a character entity was used, &copy;.
  • Since the ampersand is used to denote a character entity, you cannot just enter an ampersand and have it validate. If you want an ampersand to display correctly, you need to use the character entity &amp;
  • To display A&E Network correctly enter:
    A&amp;E Network

Practice:

• Create an assignment1 folder (no spaces in the name, no uppercase) in your public_html folder.
• If you are using a PC, use the Less Than Slash editor, not Notepad.
• Your first web page
  • On page 24 of the Design book you are instructed to open your first web page. Follow the instructions for opening a page in your browser, only I want you to open the template page that you created in your pre-assignment.
  • The book does not start a page with the DOCTYPE. Your template has a DOCTYPE. I require that you use the DOCTYPE so that we can use the W3C validator.
  • Create a "Better World" web page, explained on pages 19 and 32 of the HTML book.
    • Start with your template.
    • Add your text. Remember, be sure that all text is contained inside either p tags or div tags.
    • Save your page as betterWorld.htm in your assignment1 folder.
    • Check to see that your page validates.
• Forestville Funding Page (JavaScript Textbook)
  • Click on ForestvilleFunding.html.
  • Right click on the page.
  • View Source
  • Save as ForestvilleFunding.html (notice you use the uppercase this time and the l in the extension.) in the assignment1 folder.
  • Do not make your changes in the window that opened when you viewed your page! Invoke your HTML editor.
• Second Forestville Funding Page
  • Open your template.htm page in your editor.
  • Save your template as ForestvilleFunding2.html in your assignment1 folder. (notice you still use the uppercase this time and the l in the extension, but you add a 2 to the name.
  • Copy only the lines of code that are contained in the body tags from your ForestvilleFunding.html page to your ForestvilleFunding2.html page.
  • Make the changes noted on page 16 of the text (you remove the font tags and make the hr and br tags self-closing.
  • Save ForestvilleFunding2.html in your assignment1 folder.
  • Make sure that your new page validates. It should look like the page displayed on page 11 (no colors).
• Forestville Funding Page with inline CSS
  • If necessary, open your ForestvilleFunding2.html page in your editor.
  • Make the modifications shown on page 19 of your text.
  • Save you page as ForestvilleFunding3.html in your assignment1 folder. (notice the 3 in the name)
  • ForestvilleFunding3.html and ForestvilleFunding.html should look the same (the colors should show), but this last page should validate.
• Forestville Funding Page with internal Styles
  • If necessary, open yourForestvilleFunding2.html (notice the number 2) page in your editor.
  • Add the internal style in the head section of the page as shown on page 21 of the text.
  • Save as ForestvilleFunding4.html.
  • Compare ForestvilleFunding3.html and ForestvillleFunding4.html. They should view the same and they should both validate.
• Forestville Funding Page with external Styles
  • If necessary, open your ForestvilleFunding4.html page (notice the number 4) page in your editor.
  • Using the ForestvilleFunding4.html page, follow the instructions on pages 22 and 23 steps 2, 3, 4, and 5 to create forestvillefunding_styles.css.
  • Make the changes ForestvilleFunding4.html page shown on step 6 and save as forestvilleFunding.htm (notice the lowercase spelling and no l in the extension).

Uploading:

• Upload your assignment1 folder with the files:
  • betterWorld.htm
  • forestvillefunding_styles.css
  • forestvilleFunding.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.