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, ©.
- 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 &
- To display A&E Network correctly enter:
A&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.