Add javascript features to an already completed website. All original website mistakes are fixed. Only HW 7 features need to be added.


Homework 3.docx Homework 3: Create a multiple page website with HTML and CSS Objective: Create a website that consists of at least 3 html pages. The website is to promote a charity of your choosing. Alternatively, if you have a business, club, or nonprofit organization that you want to promote in real life, you may use that organization when creating your website. This homework allows you to apply everything you have learned thus far. You will be able to create a basic multipage website with HTML and add CSS to make your website visually appealing. Each web page will have the following: Part 1: HTML 1. Use Repl.it. Create a repls workspace called “homework3” 2. In the homework3 folder, create at least three html web pages, including the existing index.html page. The other two pages can be a name of your choosing that is descriptive of the page. a. Use lowercase to name the pages and no spaces in the file names or image names, as that would cause errors based on case-sensitive web servers 3. On each page, use at least one heading tag, i.e., h1, h2, or h3 4. On each page, use at least three paragraphs of content. This must be content you authored. It cannot be copied from another website. Do not plagiarize! You may write about the same things another website does, but it cannot be a direct copy and paste. You must change the content significantly or write your own from scratch. 5. On each page, include a call to action that follows the rules/guidelines learned in the lessons. 6. On each page, use at least one image. You may copy an image from another website, as long as you cite the source somewhere on the page. Consider using Flicr creative commons (http://www.flickr.com/creativecommons/), which lets you legally use another author’s image as long as you cite the source, or other similar condition may apply. With the image tag, be sure to specify the title, alt, width, and height attributes. This is a best practice in the industry. 7. The images must be in an images subfolder and cannot be in the same folder as the html files are in. This is a best practice in the industry. 8. On each page, create two links to the other two html pages in your website (not to another website). The links can be either text-based or images that are clickable as links. This makes the website navigatable between the web pages. a. Use relative path not absolute path to the pages. In other words, for a link to the home page don’t use

Just use

Home

9. Use the following tags on each page at least once , ,

,

,,
,
, and

10. Use the following tags on at least one page in your website

or



,


• 
  ,
  

  ---

  
  http://www.flickr.com/creativecommons/ Part 2: CSS 1. Change the background of the body to a pleasing color other than white or you can add an image as a body background. (see http://www.w3schools.com/css/css_background.asp) 2. Choose a font color that is distinct from the background color (high contrast) to make the font easy to read (i.e., black on white, or dark blue on light pink, etc.) Use red sparingly. Red is to draw attention to the one spot you want attention. Using red too much distracts. 3. Use a div to limit the content to between 600px and 800px wide. Center all the content on the page (This does NOT mean center-align the paragraph text). 4. Change the padding and margin of div as needed. 5. Center either heading 1 or heading 2 using CSS’s text-align property (see http://www.w3schools.com/css/css_text.asp). 6. Paragraph text is left aligned or full justified, not centered. Headings may be centered, but paragraphs are not centered because centered paragraphs look odd and hard to read. 7. Add a menu on every page that is formatted using CSS (See Lesson 9). Tip: Consider putting the navigation on the top of every page inside the same div you used for centering the content in step #5. 8. Put the CSS into an external stylesheet. Use one external stylesheet linked to all three pages. Requires the tag. (See Lesson 6). 9. Create a form on at least one page. The purpose of the form is up to you. You may consider a donation form, or a contact us form, or signup for something form, a pretend login form for members, registration form, etc. (See lesson 10). a. Use at least three form elements including the submit button (e.g., text box, radio button, option box, etc.) b. Include a submit button and change the submit button text to be appropriate to the form’s purpose, e.g., “Log in”, “Donate”, “Register”, “Send Request”, “Order”, “Check Out”, etc. c. The form action attribute should submit data to https://www.w3schools.com/action_page.php d. The form method should be post. e. Use a table to align the form elements. You can choose to format the table or not. (See lesson 10). 10. Ensure that you have at least three substantive, fat paragraphs on each page. This does not include headings, lists, or tables. Deliverable 1. Submit the Repl.it link to your homework3 workspace in WT Class. 2. Homework assignments may only be attempted once, and late homework submissions are not permitted. http://www.w3schools.com/css/css_text.asp https://www.w3schools.com/action_page.php Grading Rubric Criteria Gradation Possible Pts The 3 pages promote a charity or business or club or informative 3pts for three pages, 2pts for two pages, 1pt for one page, 0pt for no submission 3 Page is engaging and informative, free from major grammatical errors 3pts all pages engaging, 2pt pages somewhat engaging few grammatical error, 1pt pages have content but look sloppy or done in a rush, 0pt pages exist but are extremely sloppy 3 Text is unique and adheres to copyright or provided by the professor 3pts text appropriate to the content and purpose of the page copyright included, 2pts text good but no copyright, 1pt text has weak connection to the purpose of the web page, 0pt extremely sloppy and inappropriate 3 On the home page, at least three substantive paragraphs exist 3pts three fat paragraphs and similar to those paragraphs found on credible internet websites, 2pts two fat paragraphs or some paragraphs are sparse or two or three sentences only, 1pt one paragraph, 0pt no meaningful paragraph exists 3 On the second page, at least three substantive paragraphs exist 3pts three fat paragraphs and similar to those paragraphs found on credible internet websites, 2pts two fat paragraphs or some paragraphs are sparse or two or three sentences only, 1pt one paragraph, 0pt no meaningful paragraph exists 3 On the third page, at least three substantive paragraphs 3pts three fat paragraphs and similar to those paragraphs found on credible internet websites, 2pts two fat paragraphs or some paragraphs are sparse or two or three sentences only, 1pt one paragraph, 0pt no meaningful paragraph exists 3 The following, ,
  

  
  ,
  
  

  
  ,,
  ,
  
  
  
  
  , and
  
  tags were used on each page at least once -3 pts for each tag missing, -1 pts for tag used with errors, 0 all tags missing) Used on at least one page:
  
  
  
  

  
  

  
  
  
  , or
  
  
  
  ,
  
  
  • 
    ,
    

    ---

    
    2pt if used correctly, 1pts used with errors, 0 not used 2 Each page links to the other pages in the site using
    
    
    2pts
    
    
    used correctly and links to every page from every page, 1pt
    
    
    used with errors and/or does not link all pages, 0pt
    
    
    not used 2 Navigation is easy to follow 2pts easy to follow, links prominently places such as at the top and bottom; 1pt somewhat confusing but user still gets where he needs to go, 0 navigation missing or used in such a way that user is unable to reach desired page) 2 One page is named index.html. Other page names relate to the pages content, e.g., not called "page2.html" nor "moreinfo.html" 3pts page named index.html and other page names relate to content., 2pts some pages named "page2.html" or don't relate to the content, 1pts home page not named index.html 3 Images may be borrowed but source is cited. Citing in footer or in image's title attribute is permissible. 5pts source is cited, 2.5pt source is cited incorrectly or does not show up, 0 no attempt to source material 5 The image tag has a title, alt, height, and width 5pts for all attributes, 0pt if any attribute is missing 5 All Images display properly 6pts images show up properly, 2 pts mage links are broken, 0 no images 6 The images are stored in an images folder 2pts images in separate folder, 0pt images in same folder as .html documents 2 Page is professionally formatted 2pt if looks similar to a page that might be on the internet, 1pt if looks like a student created the page, 0 extremely sloppy 2 Colors are complimentary 4pt complimentary colors and consistent on all pages, 3pts good but some colors might contrast, 2pts colors are not consistent between pages, need consistent colors scheme on all webpages, 1pt color scheme is random and not thought out and distracts, 0pt extremely sloppy, 4 Elements enhance the page rather than distract 3pts elements add to the pleasing experience, 2pts one item is distracting, consider adjusting the element, 1pt several elements are distracting, 0 extremely sloppy, 3 Well formatted code with closing tags, coded in proper HTML 15pts success, 0pts for any errors 15 sections, devoid of syntax errors and misplacements Div used to limit the page’s content to between 600px and 800px 3pts success, 2pts if successful at centering content with div but something is still off or odd, 1pt attempted, 0pts if missing 3 Page’s content is also centered on the page 3pts success, 2pts two pages successful or some elements not centered, e.g. menu or footer not centered with content, 1 pt attempted, 0 missing 3 Content area may have a white or complimentary background color but different from the body background color 2pts success, 0pt missing 2 Paragraph text is left aligned or full justified, not center aligned. 3pts success, 0pt missing 3 Font color is distinct from the background color and easy to read 3pt success, 2pt hard to read but others may not object or only one element