COMS 326 First Two Weeks

Here are some background "lecture notes" leading to the first assignment, launching your personal COMS326 home page. The page's first draft will be done in class, then you will update it as homework, and gradually create more pages to link to it all semester. The instructions on this page and several others linked to it are especially useful if you miss a class or forget what went on...

Web Production Overview

During the first two weeks you will build Web pages on Radford's server using plain text editors that are available on all computers -- Windows Notepad, Macintosh TextEdit and Unix/Linux Pico or Nano. The first assignment will be a home page for your coursework.

As you build pages, you will review some Internet history and learn about all three computer systems, their file structures and file transfer tools.

You will capture screen images to document your progress, then publish the results on the Web. The red and white menu at the left side of the professor's course home page has headings related to those tasks.

Where to learn: People come to COMS326 with a wide variety of backgrounds. My course-page menu, pages linked below, and the first six chapters of the textbook provide different routes to accomplishing the same basic tasks.

If you feel something is just a rehash of material you learned in another course or on your own, talk to the professor to get a more challenging assignment. For some of you, the early exercises may cover material already familiar from COMS 226, ITEC courses, high school, or your independent Web explorations. On the other hand, if you have never done anything like this, don't panic! Ask questions in class or during my office hours.

Course folder, home page and tools

Here are a few notes on lab computer setup and putting files on Radford's server (myru.radford.edu, H-drive, FTP)

Working with any computer includes learning what the tools are and where they are located. On the Macintosh and with Windows 7, you can put shortcuts to the tools you will need in the "Dock" (Mac) or "Taskbar" (Windows.)

At the first class in the lab, organize your Dock or Taskbar to include the programs we'll be using in this class: text editors, Web browsers, image editors and terminal programs. Most of you have seen the OS-X Dock in COMS 226, so here's the Windows Taskbar with icons for programs you'll be using. Hover your mouse over the image for more information.

Windows 7 taskbar with icons for programs used in coms326

Along with the pages on the Course Home Page, you are encouraged to explore off-campus resources, including the textbook page, w3schools, WebMonkey, Lynda.com, html.net and (when we get to Adobe products) Adobe's online documents, Adobe.tv and Adobe.tv for Dreamweaver.

Here's a quick sample of an ad-supported tutorial site that uses Windows software for its illustrations, a good supplement to my Macintosh demos: What is HTML? at HTML.net

Here's a list of HTML5 tags at W3Schools; you'll only need a few of them to get started.

Be multiplatform

ASSIGNMENT #1: Your class home page

For the first few weeks of class, your class home page is primarily a "content-generation" and HTML exercise, NOT a design exercise. Spend more time thinking, writing and fixing code than focusing on whether you have the best images, colors or type fonts.  You will add design features and improve the page later.

We will start this page in class. At first it may look like this, then something like this... but you will finish it in class and on your own, polishing it as you learn more tags, styles and tools.

There are instructions and examples on the bottom of the student class list page, and two demos of a home page and a tools page.

Housekeeping:

First, make a folder in your public_html space named "coms326." That's where you will publish all the work for this course.

Note: If your public_html folder holds a cluttered mess of files from coms226 or other courses, I recommend creating course folders for that earlier work and moving those files and images into folders named "coms226," "coms104," "photo_album" or whatever.

Already done some Web work? For this class, stop using "old technology" Web design. Some techniques that were popular 10 years ago are being phased out, including the old "<center> tag," the "font face=" tag; many professionals also have stopped using "frames" and "tables" to layout pages. There are still many how-to pages on line explaining how to use them, but we won't be wasting time on them. To understand why, see the definition of "deprecated tags." We'll learn better ways to center things, change fonts, and layout pages in a week or two.

Page contents

Some of this will be done in the first class, some on your own. If you get ahead, help other students. If you fall behind, ask me (or them) for help.

  1. In your new "coms326" folder, Make a file named "homedraft1.html"
    Its Web address will be http://www.radford.edu/yourname/coms326/homedraft1.html
    (The name is temporary. You'll rename it "index.html" later. The temporary name will keep the content list of your coms326 folder visible for reference during the lab session.)
  2. Day One HTML, start to learn these HTML tags: DOCTYPE, html, head, title, body, p, h1, h2, h3, ol, li, ul, img and use them to accomplish the tasks below. We'll go over them "live" in class, but that linked page, the textbook and many online tutorials will give you the same basic information.
  3. In the page's "head" section, use a specific page title including your name and the main topic of the page -- this course.
  4. Write a short paragraph identifying yourself, your major, etc., to your classmates. This is not a personal MySpace or Facebook page -- focus on information relevant to this class.
  5. Demonstrate two or three sizes of headline to break up the sections of the content. Make the H1 tag similar to the page title.
  6. Add a paragraph of two to four sentences saying what part the Web plays in your present and your plans for the future -- source of annoyance, comic relief, valuable research tool, creative platform, career path -- whatever you want to share. (That is, whatever you want to share with your classmates, family, professor and prospective employers.)
  7. To add some visual interest to the page, add an image: Take a quick picture to represent yourself (with the Mac's Photobooth or your phone), or use Photoshop to create a personal logo or banner of some kind and save it as a GIF or PNG image. Learn how to include identifying ALT and TITLE text in the "img" tag. You can change the image as often as you like.
  8. To demonstrate numbered and unnumbered list codes make some lists:
    • A "resources" list of working links to Web sites you use often, or that look like they might be useful in this course. Include the professor's course home page. For other ideas, browse my course-related bookmarks.
    • A "my stuff" list of working links to Web sites you made yourself or contributed to -- projects from other courses, stories in The Tartan or Whim, blogs, etc.  If you don't have much for the first draft of list, add more items to the "resources" list. If you have Digital Imaging work, but it needs to be reorganized, list it here without linking it until you've sorted it out.
    • A "tools" list of programs you are using in class and expand it as you try new things (PuTTY, Terminal, Pico, TextEdit, Notepad, Dreamweaver). Add a sentence or two saying how you have used the program. Add screen-capture images showing the tools in operation.
  9. Those first items should be on your page, at least in draft form, by the end of the second week. Do update the page all semester, especially during the weeks before midterm and final grading.
  10. As the course progresses, you will break up this one long home page into shorter pages so that you can learn to link pages together with a simple menu. You may want to decide design issues like backgrounds, color and font families, and adjust the width of your pages to suit their contents and current trends in screen sizes. (This page is narrow to simulate the text line-length of a readable book.) Move the "Tools" list and images to a page of its own. Your "My Stuff" or "Resources" list also could become separate pages if you want. Later experiments with Dreamweaver and Web video or other "widgets" will become additional pages for your Web portfolio.
  11. As the midterm and final projects approach, you will add project-idea paragraphs to the front page, gradually developing them into full-page proposals, and eventually replacing the proposals with the actual midterm and final projects. At that point, come back to your home page and turn the early project-idea paragraphs into summaries of the finished work. See the midterm project and final project pages for a preview.

Back to Bob Stepno's COMS326 home page