Communication Through the Web

DCI 108

Winter 2021

Credits: 3

Requirements Met: DCI Minor Core

Class Meeting Metadata
Meets: MW 4:00 - 5:35pm Eastern
Classroom: Virtual (Zoom links in Canvas)
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 1:00-2:00
T 2:30-3:30
W 11:00-12:00
Or by appointment

Programming Assignment #1: Starting Your Personal Site with HTML100 points

Due Sunday, February 28 @ 11:55pm ET

Overview

You have reflected on what story you want to tell, considered who your audience is, spoke with a few members of that audience to test your assumptions, and have created rough designs for a few pages. Now that you have some knowledge of site structure, HTML, and CSS, you can begin to construct your site.

Steps to Complete This Assignment

Site Structure

Within Visual Studio Code, do the following:

  1. Open your portfolio in VSCode: Open VSCode.
  2. Create a folder called about by clicking the "New Folder" icon in the panel to the left. "New Folder" is the second icon in the image.New Folder button
  3. Create another folder by first clicking in the dark area below "about" and then clicking the new folder icon again. Call this folder css.
  4. Again, click in the dark area below both folders. Now, create a file called index.html by clicking on the "New File" icon. It is the first icon in the image.
  5. Click on the about folder. Create a new file that will also be called index.html. Even though it has the same name as the one you just created, it is different because it is in the folder.
  6. Click the css folder. Create a new file called style.css.
  7. On the right side of VSCode, click on the tab for your main index.html file. It should be the one that has a "./" and not "about" as shown in the image. index.html in editor
  8. Click in the empty space within the editor window, enter html:5, then press the tab key on your keyboard. This should generate a skeleton HTML document.
  9. Between the two body tags, type in a short word or phrase.
  10. Preview your site, and you should see what you typed. If not, check that your files and folders are set up correctly. View Your Portfolio Site

HTML

Begin to fill in the content of both your main index.html page and your "About Me" page in the index.html file under the about folder. You don't have enough knowledge yet to position things or to add images or media; however, you should have a grasp on the textual elements and what you want the underlying structure to be based on your wireframes. Use semantic and structural tags as well as id and class attributes to markup elements of the page so that they will be ready for CSS. View the source for CSS Zen Garden for a behind-the-scenes look at how a well-structured and semantically-proper page is built.

Do the following:

  1. Properly use the semantic tags: main, section, article, aside, nav, header, and footer as well as the non-semantic block tag div to layout the structure of your two pages.
  2. Where you plan to add an image or media clip, use a div block that contains a brief textual description of what the image or media will be.
  3. Use p and h1-h6 tags correctly to denote paragraphs of text and headings.
  4. If you have any information best presented in list form, use the various list elements in HTML to display them.
  5. Use strong, em, b, i, and span properly to highlight text, as warranted.
  6. Use a elements to hyperlink between your main page and "about me" page. Add other a elements as desired to link to external sites or to other pages within your site.
  7. Begin adding id and class attributes to distinguish elements that you later will style in CSS.
  8. In a footer block, besides any other information you may have chosen to display, add a copyright symbol, the year, and your name.

Expectations

You do not need to turn anything in to Canvas or via email. As of the due date and time, your assignment will be considered submitted.

  • All HTML should be properly formatted following the style conventions discussed in class.
  • Your pages should load correctly in a web browser.
  • Site structure should reflect my specifications above.
  • Content of the pages should be completed to a rough draft level. This means that there should be real information, which is fairly complete and not simply placeholders such as "text goes here". Your site is a living, breathing, work-in-progress; however, having meaningful information from an early stage will help the pages to take shape.

Grading Specifications

You will be graded on:

  • Accurately meeting all of the specifications above
  • Following HTML coding rules and conventions discussed in class and in the textbook

The assignment will begin with a full score of 100 points, and deductions will be made according to the amount and severity of errors.

Examples of Major Errors

  • Placing elements in areas outside of head and body
  • Repeatedly not closing tags
  • Haphazard or lack of indentation
  • Website not loading
  • Links not working

Examples of Minor Errors

  • One time missing a closing tag
  • Orderly, but inconsistent indentation
  • Using i when em would be more semantically correct

Proofread, proofread, proofread! Test, test, test!