Question

1. 2-page double spaced document that describes how each page is supposed to function and its purpose to the website. This document should include a list of some characteristics, features, and/or requirements.

 

2. Website map or hierarchical chart mapping out the different pages of your website. Use WORD (Insert – Illustrations – SmartArt feature) to create the map or chart.

 

3. Develop the planned design into an actual website. Your website should contain at least the minimum number of pages and showcase the following:

Application of all skills learned in class related to HTML/HTML5 – basic tags, lists, tables, and forms while utilizing CSS for styling and formatting and JavaScript for form validation and interactions.

• Proper use of HTML/HTML5 syntax – 20

• CSS Layout, formatting, rules, menus – 10

• JavaScript form validation – 10

Answer 1

Page Output Screenshots

Documentation

I have created two pages.

1. Index.html
2. Reg.html

Index.html

I have given a background image to the page using CSS background-image property.

Inside this page I have created a menu bar containing 4 Menus:

1. Home: It is the home page of the web application I,e, index.html, the page is given hyperlink.
2. Register: Given hyperlink to this page, when you click here, this will take you to the registration page.
3. News
4. About

 

• I have given text header to this page “Welcome to my world” using the h2 tag of HTML, below that I have created a small paragraph and given the text “Test Web”.
• I have created a list of “My favorite places” using ol, ul tag of HTML.
• Created login form using the table tag.

Reg.html

Inside this page, I have created one form using form tag, and given 3 options, each option is containing an input field.

Options are:

1. Email: In this field, you need to put a valid email address, you need to use containing keyword like ‘@’ etc.
2. Password: Need to put the password in its input field
3. Repeat Password: Need to put a repeat password in its input field.

Form Validation using Javascript

1. Email: If this field is empty, and user click on register button it will prompt message as “ Email must be filled out”
2. Password: If this field is empty, and user click on register button it will prompt message as “ Password must be filled out”
3. Repeat Password: If this field is empty, and the user clicks on the register button it will prompt the message as “ Retype password must be filled out”.

At the end of the form “Already have an account? Sign in.” option is given, for Sign in-text hyperlink is given if the user clicks here, it will take the user to the home page of the web application.

Code

1. Index.html

  
  
  

  
  
  
  

• Home

 

  

 

• Register

 

• News

 

• About

 

 

Welcome to my world!

Test Web

My favorite places

 

 

  
1. Alaska

 

  
1. NYC

 

  
1. Mumbai

 

  Login                

Name:

        Password:        
              Login
  

---------------------------------------------------------------------------------------------------------------------

The second page

2. Reg.html

  
  
  

  
  
  
  

  

Register

Please fill in this form to create an account.

---

Email

Password

Repeat Password

 

By creating an account you agree to our Terms & Privacy.

Register

  

Already have an account? Sign in.