Anonymous
timer Asked: May 4th, 2020

Question Description

ADMN 410 Spring 2020, HTML Project – CREATE A WEBSITE

Overview

Your project is to build a website for a fictional business. Your website will be four linked web pages named:

  • index.html (this will be your home page)
  • our_team.html
  • excel_access.html
  • contact_us.html
  • You will also have one external style sheet named style.css that all the html web pages will link to.
  • Use the file you worked on in the previous weeks’ videos, complete.html, (with modifications) as the starting point for creating the home page. To do this you will open complete.html and save as index.html. This is where you start.

    Finish your home page, personalize the style sheet, and then use the home page as a starting point for the other three web pages. (When index.html is finished, save a copy as our_team.html, a copy as excel_access.html, and a copy as contact_us.html.)

    Your website can be for any type of business; however it may not be related to alcohol or illegal activities. If there is any question as to whether your fictional business is appropriate, please speak to the instructor. Note: . Your website must include all the web pages and the specifications for each web page.

    Acceptable Use for Information Technology Resources

    This document lists the requirements for each of the web pages and the style sheet. As long as you include the elements as described, you may add additional elements or improvements as you see fit. Use the website w3schools.com to help with tags, attributes and properties. All pages must be written to the HTML5 standard.

    To test the links between web pages you will locate all your project web pages, style sheet and images in a new folder on your computer. Once you have completed all the web pages, you must compress that folder with all of the necessary files, then submit it as an attachment to the HTML Project Assignment in Canvas to successfully complete your project. Before compressing the folder be sure to test all links to make sure they display appropriately.

    PROJECT WEB PAGE SPECIFICATIONS

    1. index.html (your home page, MUST name this page index.html)

    a. Include an appropriate title.

    b. Use div tags with the class attribute to create the main “container” division for nesting the layout sections identified in Figure 1. Refer to complete.html.

    c. Include the company name in the HEADER layout section using an image (banner) generated at canva.com. Use the leaderboard

    Page 1 of 5 size (728 x 90 pixels) or a custom size if you want to adjust the height. Custom would be 728 wide by up to 200 high.

    d. Have navigation to the other three pages in your website in the NAVIGATION layout section.

    e. Include in the ARTICLE layout section:

    1. A slogan at the top of the section using heading tags.

    2. At least two relevant images. You must make the images different sizes using the height or width attribute.

    3. A paragraph on the history of your company – a brief description of the company’s background, such as when it was founded, by whom, products/services sold in early days, growth, etc.

    4. A paragraph on your company goals – could be profit, sustainability, social responsibility, etc.

    5. A brief paragraph with details on the services or products your company offers. Include at least three services or products your business provides using a LIST (the html LIST element).

    6. Include links to two websites related to your business. Include a sentence or two describing why these websites are significant.

    f. Include in the ASIDE layout section:

    1. A quote from a satisfied customer or some other small piece of info related to your business (could be special event, promotion details, etc.)

    2. Embed a Tweet, YouTube video (adjust width to approx. 225), Instagram post or other social media content related to your business.

    NOTE: If you add too much content to the ASIDE section and extend it vertically beyond the content in the ARTICLE layout section you will cause a problem with the background colors for the sections. Do not let the content in ASIDE extend vertically beyond the content in ARTICLE.

    g. Add some brief related text in the FOOTER layout area.

    h. Add a horizontal line (called a horizontal rule) somewhere on the page in one of the layout areas. (You are expected to look this up in w3Schools.com and insert it using what you know about HTML.)

    i. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup.

    **Content added to a section must not extend out of that section.

    2. style.css This will be the ONE external style sheet for all your webpages. You will personalize the style.css example we used in the videos. The file can be found in Canvas/Modules/HTML.

    a. Use a background-image property and value in the body selector.

    b. Add a background-color property and value for the <div> container selector. Use a hexadecimal code.

    Also add a different background-color property and value for the ARTICLE layout section.

    Optional: add a background-color for the NAV and/or FOOTER layout sections.

    c. Use at least two different style fonts in your style sheet. Use the font-family property in a layout section, see “web safe fonts” on w3Schools.com. The different font styles must appear on your home page.

    (Optional: If you choose to use a Google font, you must include the associated <link> tag in the <head> of each html document in which you want to use that font. You must also specify the Google font using font-family in the style.css file. Details on this process: .

    https://bit.ly/2E0gDsD

    d. Use at least two different text colors in your style sheet (other than the color changes in the navigation NAV) using the color property and a hexadecimal code. These different text colors must appear on your home page.

    Page 2 of 5 e. Use at least two different font sizes in your style sheet using the font-size property. These different font sizes must appear on your home page.

    You can change other properties and add properties as you see fit.

    Additional Style Requirement – We studied the meaning of Cascading Style Sheets (CSS). You are required to correctly use the style attribute in the index.html file for at least one of the individual elements on that page.

    3. our_team.html

    a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer).

    b. Navigation to the rest of the site.

    Items c., d., and e. belong in the ARTICLE layout area:

    c. At least two images representing you, the CEO of your company.

    d. A paragraph describing your experience/achievements/awards. If you have a resume, you can use the details from the resume such as where you went to school, job experience, courses you’ve taken, career interests, etc.

    e. A paragraph describing your management team or employees. Include a table element using appropriate table tags to show the names and titles of at least three of your employees as well as the years they have worked at your company. Each row (<tr> </tr>) should represent a single employee and there should be three <td> </td> for each employee; one for their name, title and years at your company. You also need to include table headings <th> </th> for the table (see w3schools.com).

    f. In the ASIDE layout area embed a Google Map. It can show the location of your business or some other location of significance to your company. Also include a sentence or two describing the map.

    g. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup.

    4. excel_access.html

    a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer).

    b. Navigation to the rest of the site.

    Items c. and d. belong in the ARTICLE layout area:

    c. Describe how and why your company uses Excel and Access in the management and operation of your business. Be specific to your business. You will be graded on the content. Suggestion: Consider how we have used Excel and Access, and the features we used. Do not vaguely state that you will use Excel or Access to “keep track of” anything, or that you will use Excel for “scheduling”…you will not receive credit. Do not copy and paste content from a Google search…I will recognize it easily.

    d. At least two related images.

    e. A value in the ASIDE layout area related to this page. It can be text or embedded social media content.

    f. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup.

    5. contact_us.html

    a. Appropriate title, header (use an image created at canva.com, must differ from the one for the other pages), and footer (include some content related to this page in the footer).

    Page 3 of 5 b. Navigation to the rest of the site.

    c. Use your Google account to create a form that allows users to send inquiries directly to your company via your website. The form should collect and send the following information: contact information, and at least three other questions that you would like to know about potential customers. The questions should be specific to your business. You can include “help text” that provides greater clarity on what data is required in each field on the form. Embed the form into the ARTICLE section of your contact_us.html webpage. The embedded form should not have any scroll bars, you may need to adjust the iframe’s height attribute.

    d. A value in the ASIDE layout area related to this page. It can be text or embedded social media content.

    e. Add comments to your markup to explain what you intended to create on this page, or to explain the meaning or purpose of pieces of your markup.

    Before submitting your HTML Project use the HTML validator to help you check your markup for missing tags or misplaced elements. Details on how to use the validator will be discussed in a video and posted in Canvas/Modules/HTML/ “HTML Markup Validator Slides”. Note that an error message from the validator means that the validator believes there is a problem in the area it identified, since it doesn't know your intent it may not know exactly where the error is. Also note that the frameborder attribute in an iframe element will not validate (in the embedded Google iframe or other embedded content iframe), that is OK. If your embedded content generates errors that do not affect what you see on the page, Do NOT attempt to fix the errors.

    TROUBLESHOOTING HTML

    If you write some markup that does not seem to work you likely have a simple problem. Try the following:

    1. You may have forgotten to save your change or refresh the browser. To ensure you are viewing your latest modifications, save your file then refresh the browser.

    2. Check the syntax of your tags carefully. HTML is a forgiving language, which means something will usually show up in the browser but may not be what you expect. It is best to make a SINGLE change in the markup then immediately view the change in the browser. The most common mistake is forgetting to close a tag. Also note that there should be a single space between multiple attributes in an HTML tag.

    3. Always check to make sure that you used the extension “.html” to save your pages. If you have accidentally saved your .html files as something like .html.txt, simply right click the file, select rename, delete the .txt extension, click enter.

    4. Although your computer is not case sensitive EVERY web server is. That means that any links between web pages must have matching capitalization. <a href="index.html"> is NOT the same as <a href="Index.html">. In this case the link will work on your computer, but it will not work if you published it to a web server. You are expected to follow the rules about capitalization in this project.

    5. A web server will not accept file names with spaces. “our_team.html” will work, but “our team.html” will not. The names of your files may not have spaces in them.

    SUBMISSION INSTRUCTIONS

    When you have finished your web pages you will submit your project by compressing the folder containing all of the web page files, the style sheet, and any related files (including images) and submitting the compressed folder to the HTML Project assignment in Canvas. To compress: Right-click the folder, select “Send to” then “Compressed (zipped) folder”.

    Page 4 of 5 Your project will be graded based on:

  • Functionality: All pages are included; links, images and navigation work. All opening and closing tags are included. Markup will be validated to the HTML5 standard to check for errors. File names and href value attributes must have matching cases (as required for published web pages.)
  • Content: Whether or not the content on each page makes sense and is included. All elements specified in the “PROJECT WEB PAGE SPECIFICATIONS” must be included.
  • Professionalism: It is a corporate website, not a personal website. Text must be grammatically correct with no spelling errors.
  • Student has agreed that all tutoring, explanations, and answers provided by the tutor will be used to help in the learning process and in accordance with Studypool's honor code & terms of service.
    Tags: UNH

    This question has not been answered.

    Create a free account to get help with this and any other question!

    Brown University





    1271 Tutors

    California Institute of Technology




    2131 Tutors

    Carnegie Mellon University




    982 Tutors

    Columbia University





    1256 Tutors

    Dartmouth University





    2113 Tutors

    Emory University





    2279 Tutors

    Harvard University





    599 Tutors

    Massachusetts Institute of Technology



    2319 Tutors

    New York University





    1645 Tutors

    Notre Dam University





    1911 Tutors

    Oklahoma University





    2122 Tutors

    Pennsylvania State University





    932 Tutors

    Princeton University





    1211 Tutors

    Stanford University





    983 Tutors

    University of California





    1282 Tutors

    Oxford University





    123 Tutors

    Yale University





    2325 Tutors