CDA215 Programming for the Web I

• Home Page |
• CSS |
• Tables |
• Divs |
• HTML5 |
• ADV CSS |
• Form |
• Multimedia |
• JavaScript |
• Validation |
• HTML5 Wow Me |

Create Your buffalo.edu Web Page

For this Assignment you will first read the appropriate chapters in the textbook and then create a web page called index.html in your ubunix.buffalo.edu account web space which will be used as the starting page for the rest of your Assignments for this course. Your web page should utilize the following HTML tags and include the following:

• Appropriate html, head, and title tags to give your page a title that contains your name.
• A body tag.
• An h1 tag that contains your name.
• An img tag with appropriate src, alt, width, and height values that insert a graphic image on your page. It doesn't matter at this time what the graphic is as long as it is legal and moral.
• A p tag that encloses a brief paragraph about yourself.
• An ol tag that contains LI tags that list the remaining Assignments for this course (2, 3, 4, 5, 6, 7, 8, 9, 10).
• At least one of each of these tags: b, i, hr, br

Your web URL to view your web page is:

http://buffalo.edu/~your-userid/

You will add a link to this page that allows the user to view your work.

Your username and password for the ubunix.buffalo.edu machine is the same as your UBUnix username and password you used to log into this UBLearns account.

Now, whenever you login to your ubunix.buffalo.edu account you need to issue the command cd public_html to change to the sub-directory where you can create and maintain the files for your Assignments and Assignments.

You can use ssh to login to your ubunix.buffalo.edu account and then use either vi or Emacs to maintain your files or you can edit them on your PC and use an SFTP client ( FileZilla for Windows or Fetch for a Mac) to move them from your PC to your ubunix.buffalo.edu account. For Windows it is even better to use Notepad++ for your editor since it has a built-in SFTP client. For Mac the better choice is TextWrangler which also has a built-in SFTP client.

When you have this Assignment ready for me to view and grade you should post a note in the Home Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Add Cascading Style Sheets To Your Web Page

For this Assignment you will first read the appropriate chapters in the textbook and then create three (3) new web pages, for example called inline.html, external.html, and embedded.html, and another file for your external styles, for example called cda215.css, in your ubunix.buffalo.edu account just as you did in previous Assignments. One of your Assignment 2 web pages should use inline styles; the second web page should use embedded styles; and the third web page should use a linked style sheet. These web pages should change the default look for the following HTML tags:

• h1, h2, h3, h4, h5, & h6
• p
• font color, family, and size
• b (style="font-weight: bold")
• table, th, tr, td

Each of these pages should also have a link back to your Assignment 1 web page.

You should then add 3 <a> (anchor) tags to your Home Page web page that opens your CSS web pages.

When you have this Assignment ready for me to view and grade you should post a note in the CSS Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a Table Web Page

For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your ubunix.buffalo.edu account just as you did in Home Page Assignment. Your new web page should utilize the following HTML tags and include the following:

• A body tag that uses an appropriate style value to change the background color of the web page.
• Appropriate table, tr, th, and td tags to create a table that has three (3) columns (Font Faces, Font Sizes, Colors) and (5) five rows (different font faces, font sizes, and color codes in their appropriate face, size, and color). Use the th tag to create the headings for each column the background-color style value to change the color of the heading cells and the font-family and color style values to change the color of the font in the cell headings row. Use the background-color style value on the table tag to change the color of the background of your table to a different color than the background of your web page.
• Appropriate style values that change the font, font size, and font color.

This page should also have a link back to your Assignment 1 web page.

You should then add an <a> (anchor) tag to your Home Page web page entry for this assignment that opens your Table web page.

When you have this Assignment ready for me to view and grade you should post a note in the Table Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Modify Your Home Page to Use DIVs

For this Assignment you will first read the appropriate chapters in the textbook and then copy your index.html file to a new file called index_old.html. Then you will modify your index.html.

Assignment Requirements

Your new home page should utilize the following HTML tags and include the following:

• Appropriate <html>, < head>, and <title> tags to give your page a title that contains your name.
• A <body> tag.
• A <div> tag that spans the top of the page containing header-type information such as:
  • an <h1> tag that contains your name
  • an <img> tag with appropriate src and alt attributes and CSS styles that define the width and height values. It doesn't matter at this time what the graphic is as long as it is legal and moral.
  • a <p> tag that encloses a brief paragraph about yourself.
• A set of <div> tags that replace the current <ol> and <li> tags that list the links to the assignments for this course. Each <div> should contain a brief description of the assignment and an <a> tag link to the appropriate web page for that assignment.
• A final <div> that spans the bottom of the page that contains footer-type information such as your name, what editor your used, when the page was last modified, etc.

The layout of your page is up to you. It could be two, three or four columns. Take this opportunity to show off your knowledge of CSS styles for your div , such as border, color, background, width, margins, padding, etc. Examples:

When you have this Assignment ready for me to view and grade you should post a note in the Modified Home Page Discussion Folder with the URL of your web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create an HTML5/CSS Compliant Web Page

For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for example called html5.html, in your ubunix.buffalo.edu account just as you did in previous assignments. Copy your current CSS Embedded web page (embedded.html) to a new html5.html web page. Your index.html new web page link should open up a new web page that utilizes your HTML5 and CSS to include the following:

• A correct DOCTYPE tag for HTML5
• Convert any of your tags that are not compliant
• Correct any of your CSS that is not valid

You can (and should) use the W3c validator page at http://validator.w3.org/ to verify your code and http://jigsaw.w3.org/css-validator/ to verify your CSS styles.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your HTML5 web page.

When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Add Special Effects to Your Web Page Using Cascading Style Sheets

For this assignment you will first read the appropriate chapters in the textbook. Then copy your Web Page (index.html) to create a new web page (cssse.html). Then modify your new cssse.html and your original cda215.css file to add these features to your new cssse.html web page:

• Use a style to change your graphic to be 50px wide by 50px tall (your picture will look scrunched, but that's OK)
• Change the display font for your introductory paragraph to Verdana, serif
• Float your graphic so it is on the right of your introductory paragraph and your introductory paragraph wraps around your image
• Change your list of Assignment links to be an unordered list
• Add a table similar to your Assignment 3 that displays with no borders around any of the cells
• Add appropriate @media print styles so that when your page is printed (you can use the Print Preview feature of your web browser to see the different look):
  • Your home page graphic does not print
  • Your list of Assignment links are green
  • Your list of Assignments links is an unordered list
  • The font for your introductory paragraph is Arial, sans-serif
  • Your table prints with a borders around every cell

You should then add an A (anchor) tag to your Home Page that opens your CSS Advanced web page and add a link to your CSS Advanced web page that goes back to your Home Page web page.

When you have this Assignment ready for me to view and grade you should post a note in the CSS Advanced Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a Form Web Page

For this assignment you will first read the appropriate chapters in the textbook and then create a new web page, for example called form.html, in your ubunix.buffalo.edu account just as you did in previous assignments. This web page should utilize the following HTML tags and include the following:

• A form tag that has an action value of mailto:your-email-address so that the results of what the user enters gets sent to your email address when it gets submitted.
• input tags that allow the user to enter their:
  • First Name
  • Last Name
  • Address
  • City
  • State/Province (this should use a select tag with option tags for each state name and state abbreviation
  • Zip/Postal Code
  • Phone
  • Email Address
• An input tag that creates a submit button that says: OK Send My Data
• Use appropriate fieldset and label tags
• Use appropriate styles to give your form a nice look (color, alignment, organization, etc.)

You should utilize the new HTML5 form tag features. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for

+html5 +form

to find lots of helpful information.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your Form web page.

When you have this Assignment ready for me to view and grade you should post a note in the Form Discussion Folder with the URL of your Home web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a Multimedia Web Site

For this Assignment you will first read the appropriate chapters in the textbook and then create a new web site of four (4) pages, for example multimedia.html, audio.html, video.html, and scrolling.html in your ubunix.buffalo.edu account just as you did in previous Assignments. Your Multimedia Assignment new web site should open up a new web page that utilizes hypertext links to allow me to visit your three (3) web pages.

• use your cda215.css and cssse.css files to "enhance" the look and feel of each page
• create one (1) page that uses an a href tag to link to a sound clip *and* an <audio> tag to link to a sound clip
• create one (1) page that uses an a href tag to link to a video clip *and* an <video> tag to link to a video clip
• create one (1) page that uses JavaScript to display a scrolling text message or some other animated text. Use your favorite search engine (Bing, Google, Yahoo, whatever) and do a search for this JavaScript routine.

The sounds and audio clips can be either uploaded to your ubunix.buffalo.edu account or you can link to clips that exist somewhere on the Internet as long as you respect copyright laws and the clips are ethical and moral.

This web page should also have a link back to your Assignment 1 web page.

You should then add an a (anchor) tag to your Home Page web page that opens your Multimedia web page.

When you have this Assignment ready for me to view and grade you should post a note in the Multimedia Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Create a JavaScript Web Page

For this assignment you will first read the appropriate chapters in the textbook and then create a new web page file, for example called javascript.html, in your ubunix.buffalo.edu account just as you did in previous assignments. This web page should use JavaScript functions to include the following:

• the current date
• the current time
• uses an if construct to print out either:
  how many days are left until this Assignment is due
  or
  how many days have past since this Assignment was due
• a table that has 12 rows and 3 columns which is created using a for loop to read through a set of JavaScript arrays that contain the names of the months and the number of days in each month. The table should look similar to this:

  Month Number	Month Name	Days in Month
  1	January	31
  2	February	29
  2	March	31

• uses the JavaScript mod operator (%) to highlight every other row of the above table with a different color to make it easier to read.

  Hint: if you use % to divide the loop counter by 2 and there is no remainder that means the loop counter is an even number and so you need to highlight that row.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your JavaScript web page.

When you have this Assignment ready for me to view and grade you should post a note in the JavaScript Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Add JavaScript Validation to Your Web Form Page

For this assignment you should first read the appropriate chapters in the textbook and also the Form Validation with JavaScript web page listed in the Useful Links section and also search the Internet using your favorite search engine site (Bing, Google, MSN, Yahoo, whatever) for:

+javascript +form +validation

and then create a new web page file, for example called validation.html, in your ubunix.buffalo.edu account just as you did in previous assignments. This web page should build on your Web Page Form Assignment and use JavaScript functions to include the following:

• print the current date and time
• print out a set of radio buttons that allow the user to change the background color and the text color of the web page by clicking on the desired radio button
• advise the user filling out your form with a sentence above the form noting that certain fields are required and using CSS to either make those fields red or placing a CSS styled bold red asterisk (*) next to each required field
• validate the form fields according to these validation rules:
  • First Name and Last Name are not empty
  • Zip Code is either:
    only 5 numbers
    or
    in the format 99999-9999
  • Phone Number is either:
    only 10 numbers
    or
    in the format (999) 999-9999
  • Email has one and only one @ character, has at least one character before the @ character, and has at least one character and a dot and at least 2 characters after the @ sign.
    valid: gerland@buffalo.edu
    not valid: gerland.buffalo.edu
    not valid: gerland@buffaloedu
    not valid: @buffalo.edu
• pops up a JavaScript alert window advising the user exactly what field did not pass the validation checks
• places the cursor back in the invalid field after the user clicks the OK button on the alert window if there is a validation problem.

This web page should also have a link back to your Home Page web page.

You should then add an a (anchor) tag to your Home Page web page that opens your Form Validation web page.

When you have this assignment ready for me to view and grade you should post a note in the Form Validation Discussion Folder with the URL of your Home web page so I can click on that link and open your assignments in a new browser window (target="_blank").

HTML5 Wow Me

For this Assignment you will first read the appropriate chapters in the textbook and then create a new set of web pages in your ubunix.buffalo.edu account with with appropriate additions to your cda215.css file just as you did in previous Assignments. This set of web pages will show off what you may have learned about HTML5, CSS3, and JavaScript outside of this course (kind of what I would have covered in the second semester of this course if it existed). Things like the <canvas>, <audio>, and <video> tags. Or advanced <form> features or HTML5 Geo-location or Drag and Drop or Math or other "cool things" that can be demonstrated with HTML5, CSS3 and JavaScript, such as animation, etc.

Each of these pages should also have a navigation section that links to each of the other pages in this assignment and back also to your Assignment 1 web page. You should utilize everything you learned from the Krug Don't Make Me Think book.

You should then add an <a> (anchor) tags to your Home Page web page that opens your HTML5 Final Assignment web pages.

When you have this Assignment ready for me to view and grade you should post a note in the HTML5 Final Discussion Folder with the URL of your Home Page web page so I can click on that link and open your Assignment in a new browser window (target="_blank").

Check the course schedule for due date for all Assignments.

Textbooks

New Perspectives on HTML5, CSS3, and JavaScript
Patrick M. Carey
ISBN: 9781305503922 (print) (9781337516358 eText)
Publisher: Cengage Publishing
Copyright: 2015
Edition: 6th
I've made the code available from my textbook web site or our Weekly Modules section.
Book is recommended (online tests are from this textbook).