Introduction

The web Bio Page assignment will give you a chance to familiarize yourself with some basic XHTML while constructing a relatively simple web page. You'll also give you chance to work with basic kinds of web content and practice working with the idea of page hierarchy.

Your bio page will need to meet certain text and image content requirements, certain design requirements, and certain XHTML (coding) requirements – all detailed below.

For coding the first part of the assignment you'll more or less follow the HTML Beginner tutorial at the HTML Dog website.

In the next two weeks, you'll revise and customize the appearance of the bio page using CSS. Later, you'll produce a professional Author's Bio Page for your final project. For now, keep things relatively simple.

Sample pages

Before you begin, we'll examine some of the following pages for some initial ideas about what to try and what not to try:

• Steven Pinker - a boring but clean page
• D. Reiter
• K. Paulino
• David Weinberger - some clever options
• Andrew Hodges - a lively but very messy page
• Gary Chapman
• Eric of the Web

For some more ideas: track down other pages using your preferred search engine.

Basic Requirements

Using XHTML make a Bio Page for yourself that contains, minimally, the following elements:

• A short biographical text, written in the THIRD person, that tells readers at least twelve things about yourself.
• This text should be broken into short chunks. It can describe your background, including places you've lived; your education; your professional goals, interests, skills, and achievements. The text can be partly, or even totally, fictional but should consist of at least six chunks.
• One personal identifying image. This may be a photograph, drawing, or painting of yourself – or anything that you wish to use as a visual representation of yourself (an icon, a symbol, an avatar, etc.).
• At least five more images that illustrate your parts of your life or interest. These should be LARGE enough for visitors to see what you want them to see. At the same time, the images should not overwhelm the text.
• At least three levels of heading (h1, h2, h3, etc.) with at least one level occuring more than once.
• One or more lists (e.g., your links might appear in a list).
• At least three links to other websites. These sites should be related to a possible topic for your final project (e.g., if your final project might cover the design process for the fighter jet, these should be sites having to do with aeronautical or military design, fighter jets, the contemporary battlefield, the history of aerial combat, etc.). Preface your links with a heading and a paragraph explaining what they are doing on your page.
• At least one table. Make sure your table has enough cellpadding and a border.
• At least two comments. These are basically notes about the page hidden in your code.

For rapid reference: here is a link to the W3 Schools HTML tag reference table.

Your page should employ only minimal styling. Unless you're using CSS for styling, avoid changing font-size, or color, or centering your text using HTML. If you do, you'll need to take it out later.

Do not use tables for page layout.

Getting Started

Work in Notepad on a PC (or Textedit on a Mac, with the "Ignore rich text commands in HTML files" option checked in Preferences).

When you save, make sure you select "All Files" and NOT "txt" in "Save as type".

Re-open (or, if still open, keep open) "temp1.htm," from the previous demo. You'll use this as your starting template.

Save "temp1.htm" to your local desktop as "biopage.htm".

Treat your local desktop as the equivalent (mirror) of your "drafts" folder on Eden. Using Notepad, make an "img" folder for your images.

Tutorials

Begin to familiarize yourself with (X)HTML through the following tutorials and reference pages.

Work through the short HTML Beginner tutorial at the HTML Dog website. This should be the main tutorial that you use for the bio page assignment.

For extra support, however, you might want to look at the W3 Schools HTML Tutorial. You don't need to work through the whole tutorial (it's quite long), but familiarize yourself with what it has to offer.)

Finally, you might also take a look at A Web Page in 15 Lines of Less.

XHTML Reminders

As you work on your page, remember these features of good XHTML form:

1. Include the following DOCTYPE declaration at the start of your file (above the opening <html> tag):

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Remember to declare the namespace inside the opening <html> tag; thus:

   <html xmlns="http://www.w3.org/1999/xhtml">

3. Close all paragraphs with a closing P tags (i.e., </p>).
4. Use only lowercase letters in your tags (i.e., <body> and not <BODY>).

Saving Your Bio Page

To save your work follow these steps:

1. Save your Bio Page in your "drafts" folder as "biopage.htm".
2. Inside the "drafts" folder, make an "img" folder. This is where you'll store the images displayed on your web Bio Page.
3. When you're finished for the day, use SSH to move your "drafts" folder (and all its contents) to the "425" folder on your Eden account. Check the remote column to make sure that everything uploaded correctly.
4. Set the permissions for your "drafts" folder, your "img" folder, your "biopage.htm," and your images to "755"
5. Now check that everything works in the browser. You should be able to view your Bio Page in a browser at

   http://www.eden.rutgers.edu/~your username/425/drafts/biopage.htm

6. If anything fails to display, check the permissions and links. Make sure the links are relative and that all your image links are addressed to the "img" folder (e.g., <img src="img/mycrazyface.jpg" />).

Again: Do NOT use capital letters or blank spaces in any folder or file names.

If you have problems saving or re-saving your bio page, you should contact me by email (or stop by my Thursday office hours) before the next class.

Submitting Your Work

Your finished page is due at the beginning of the next class.

You'll need to post a link to your Bio Page in a reply to the "Bio Page" thread on your section's class forum. We'll do this in class; so just make sure that your Bio Page is saved in the correct folder in Eden.

There'll be a little time at the start of next class to go over any coding problems.