Lesson 1: Pre-coding

Overview

In Unit 2, you begin your introduction to web design techniques. By now you may already have ideas about what you want your web pages to look like. However, a more important first question is: "What do I want my web page to say?" In Unit 2 we will be focusing entirely on content (i.e., figuring out what we want to say). Later, in Unit 3, we'll focus on how we want to present that message visually.

The heart of this design philosophy is the notion that content and structure must be kept separate from presentation. When this is true, the content and structure of a web page can be delivered to all sorts of web-enabled devices, not confined by browser, operating system, screen size, or type of device. The same content can be presented in different ways for these different devices and configurations, but it's still the same content.

In the current unit, you will construct a website that will serve as a portfolio for displaying the work that you complete in this course. This portfolio will continue to play a key role throughout the course.

You will begin with the nuts and bolts of web page development: coding in HTML. However, before you code there is some planning to do. Just as there are pre-writing steps that ought to be done prior to writing an essay there are pre-coding steps to do before you code a website. Planning ahead will reduce the number of mistakes you'll make while constructing the site. This will save you time, and in the world of work, it will save you or your employer money.

Learner Outcomes

At the completion of this exercise:

Activities

The following are the initial pre-coding steps to take in preparing to design your web portfolio site.

  1. Consider the site's purpose. If you are clear about the site's purpose (to sell, to inform, to entertain, etc.) and who you are communicating to, you are much more likely to create a better site. For this web portfolio the purpose is simply to inform an audience about what skills you are developing. At first, the audience may only be your instructor, but you may want make it more general so that it could be modified into a resume, in which case the audience would include prospective employers.
  2. Sketch the homepage. Before sitting down to a computer it is sensible to make a sketch on paper of the content of your website. Start with the home page, since the home page serves as the portal through which most other site content is accessed. This should be an outline of content only - remember that at this point in the design process we're not so interested in how the page will appear visually. That comes later. In your sketch be sure to include at least each of these essential elements:
    • A main heading that reads "Web Portfolio"
    • A block of text containing information about you. At a minimum this should include your name and email address.
    • A block of text containing information about the course. This might include information such as the name of the course, teacher, section, school, and year.
    • A paragraph that provides an overview of the content of your portfolio.
    • A sub-heading for each of the remaining units of this curriculum (Unit 2 through 7).
    • Some placeholder content beneath each sub-heading (something like "This section will be completed soon.")
  3. Diagram the site's page and folder structure. Websites are a collection of linked files. Files need to be organized into a system of folders, especially if you are building a complex site. A common way of organizing files for a website is to have the home page and all secondary pages in the main folder, then create subfolders for images, styles, and scripts. If it were a larger site, you would additionally create subfolders for content. One way of organizing content would be to use a folder system that corresponds with the structure of the site as users experience it. That way, If you hand the site to a client or have others assisting you in the construction of the site, they'll be able to easily locate the files they need.
  4. Set up the folder structure for containing files that make up your portfolio site. Open your file management program. Make a new folder named "portfolio_######". This main folder, also known as a parent folder or root folder will hold all the files that you create in this class. Note that there should not be any spaces in file names or folder names. The underscore is a common convention for indicating separations between words in a folder or file name. Servers may be case sensitive so be consistent about capitalization. Most of your web pages will be stored in this folder. However, in later units you will begin to add images and other content to your web pages that require the use of supplemental files. For organizational purposes it's a good idea to store these supplemental files in separate subfolders. For your portfolio, create the following subfolders inside your main folder:
    • images
    • styles
    • scripts
  5. Create a new file for the home page. Open your text editor program. Create a new file, and save the file in the root folder as "index.html". For now, this is just a blank file but you'll add content to it in the next lesson.

About the filename index.html

When users request a web address (URL) that does not include a filename (for example, www.somedomain.com) the server automatically looks at that address for a file named index.html. If it finds that file, that's the file it sends to the browser. If index.html is not available, the server has a short list of other filenames it will try (e.g., index.htm, index.shtml, default.htm, etc.). These vary by server. The .htm extension on web pages came about in the early days of the Web, when developers using Microsoft Windows were limited to file extensions with three characters. However, these days it is more common for HTML web pages to end in .html.

All done?

Show your instructor your sketch of the homepage outline and the completed file structure before starting the next module.