Problem: Create a web project template

STEP 1: Organize files using standard file tree

  1. Create a project template structure: C:\\public_html\\syst10049\\site_template
  2. Create a subdirectory called content in the site_template directory
  3. Create a subdirectory called images in the site_template directory
  4. Create a subdirectory called css in the site_template directory
  5. Create a file called template.html in the site_template directory

When using the site_template to create a new project, copy the entire structure, then rename site_template directory to the name of your project, and copy template.html to index.html. Use the template.html to make a copy of each secondary page, stored in the content directory. Remove the template.html file before publishing.

STEP 2: HTML document

  1. Start with minimal HTML5 document as coded in FIGURE 1.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Meaningful page title</title>
    <meta charset="utf-8" />
  </head>
  <body>
  </body>
</html>

  2. 🆕 Add viewport meta element right after the charset meta element, see FIGURE 2 for code snippet. (This will be covered in the second half of the course with CSS, to address the different devices used.) Investigate further.

    <meta name="viewport" content="width=device-width">

  3. Add in the HEAD section of the document after the existing META tags. See FIGURE 3 for code snippet. Update content attributevalues for both author and description.

    <meta name="author" content="Your Name">
<meta name="description" 
      content="describe what is the purpose of the current page
               and how it fits into the project (website or
               web app. Be generous with your description.">

  4. Add prologue (documentation header) after the META tags. See FIGURE 4 for code snippet. Update all information, such as your name, program name, date, etc.

    <!--
Developer:    Your Name
Program:      pageName.html
Date:         [date file created]
Updated:      [date last updated] 
Version:      0.0 (format major.minor updates)
Purpose:      short description what the page (site) is all about
Description:  describe the solution in detail (usually correlates
              with requirements and design specifications
              (include algorithm if applicable)
              - focus on the "why" -- try not to state the obvious
-->

  5. Add your own comments as you see fit. Do not put comments before the META CHARSET element in the HEAD section. Do not put comments outside BODY and HEAD elements.

  6. Validate at validator.w3.org and correct all warnings and errors. If there is a valid reason to leave a warning, document, both in the code and in the prologue, what the warning is and explain why it is left unresolved and when it is planned to be resolved.

  7. Test with browsers (for this course, test with Chrome).

STEP 3: Add standard content page areas