Introduction
The Bio Page assignment will give you a chance to familiarize yourself with the most common XHTML elements while constructing a relatively simple web page. You'll also have a chance to work with some basic types of online 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 classes, 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 simple. Don't use CSS for the first draft of the bio page unless you've used it before, and don't use any deprecated tags (like center).
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
David Weinberger – some clever options
Eric of the Web – a classic of the early web
Finally, as a preview of some of what we're aiming toward, take a browsing look at Smashing Magazine's Best practices for effective design of About Me pages.
topContent Requirements
Main Text Requirements
The main text for the Bio Page consists of three short pieces of writing about yourself.
- A short biographical text, written in the THIRD person, that tells readers at least six 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.
- A short description of your (favorite, regular) work place. This might be your studio, a place in the library, your desk, a outdoor area, your car.
- A brief account of something you like – a book or film, musical group, game, food, even a person – and WHY you like it (or him or her).
Altogether, these three short texts should add up to at least 300 words. The biographical information must be in multiple chunks. The work place and thing-you-like information can be in one or more chunks, depending on their lengths.
Other Content Requirements
Using XHTML make a Bio Page for yourself that contains, minimally, the following elements:
- 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 three 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, h2, 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 presenting comparative information that belongs in a 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 use the W3 Schools HTML tag reference table (or its equivalent on another site, if you prefer).
A Note on Presentation
Your page should employ only minimal styling. Avoid changing font-size, or color, or centering your text using HTML. If you do, you'll need to take it out later.
We'll add styling using CSS in the next part of this project.
A Note on Using Tables for Page Layout
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) the file we made in XHTML demo. If you no longer have a copy of the file, the basic structure is here. Copy and paste the code into Notepad and save the file to your local desktop as "bio.htm".
Treat your local desktop as the equivalent (mirror) of your "drafts" folder on Eden. Make an images folder on your desktop for your images and transfer these to the images folder inside your drafts folder when you're done.
Once you have the basic setup, work through the tutorials linked below.
Then complete the content requirements.
topTutorials
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, 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.)
topXHTML Reminders
As you work on your page, remember these features of good XHTML form:
- 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"> - Remember to declare the namespace inside the opening
<html>tag; thus:<html xmlns="http://www.w3.org/1999/xhtml"> - Close all paragraphs with a closing p tags (i.e.,
</p>). - Use only lowercase text in your tags (i.e.,
<body>and not<BODY>).
Saving Your Bio Page
To save your work follow these steps:
- Save your Bio Page in your "drafts" folder as "biopage.htm".
- Inside the "drafts" folder, make an "img" folder. This is where you'll store the images displayed on your web Bio Page.
- 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.
- Set the permissions for your "drafts" folder, your "img" folder, your "biopage.htm," and your images to "755"
- 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 - 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.
topSubmitting 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 to the correct folder on Eden.
There'll be a little time at the start of next class to go over any coding problems.
topAdding Basic CSS to Your Bio Page
Save your bio page as "biopage2.htm" or "bio2.htm," or by a similar name. Create a new file in Notepad and save it as "bio.css". (Or follow along with the demo in class.)
Continue to develop your Bio Page by adding styling to it with CSS. Follow the CSS Beginner tutorial at HTML Dog.
HTML Dog covers three ways to apply CSS to your HTML file. For this assignment, you'll use an EXTERNAL file (e.g., biopage.css) that you'll link to from the head of your Bio Page.
Following HTML Dog, you'll add styling to your body, paragraphs, headers, table, list, etc. Add text styling, color, margins, padding, and borders to the elements of your page. Try to get your page to look distinct but also clean and readable.
For a list of Common Fonts and other useful font-related material, see the Font Resources at Browser News.
For a quick one-page reference, here is a CSS Cheat Sheet.
topRevising Images
Replace your images with better ones and/or modify or re-style your images using CSS or a graphic program. The aim of this revision should be to increase the visual consistency of your page, as discussed in class.
You should have at least two kinds of image on your page: your portrait and images illustrating or symbolizing or otherwise relating to your text. To help the visual consistency of your page, you need to work on revizing images of the second group for their consistency with each other and with the overall page.
Visual consistency results from creating patterns of image use and presentation. These patterns fall into two broad areas.
Internal patterns of consistency, via for instance:
- Same coloring or palette (grayscale, bright color, dark color, dull color, etc.)
- Same distance or scaling (close-up, middel distance, long distance, small subjects, large subjects, etc.)
- Same background (detailed, hihg contrast, low contrast, simple, busy, solid color, none)
- Same style (line art, flat or cartoon graphics, modeled graphics, plain photographs, modified photographs, etc.)
- Same function (image exemplifies, illustrates, symbolizes, humorously undermines, or contradicts what is stated in the text)
And external patterns of consistency, via for instance:
- Same color, thickness, style of border
- Same padding between image and border
- Same width and possibly same height
- Same supplementary presentation (titles, captions, figure numbering)
- Same alignment or positioning of each image relative to its surrounding content or the overall page design
Again, the objective is to minimize conflict, too much variety, a sense of messiness. Visual consistency can result from any combination of the features listed above (or others not listed). It does not require use of ALL the features at once, just enough of them to keep things in order.
topReplacing Main Heading Text with an Image
Replace the h1 text at the top of your Bio Page with a text image. By a text image I mean something like one these:
You do not need to create a fully developed banner for your page. Simply styled text made and saved in a graphics program would be sufficient.
On the best way to replace an H1 heading text with an image, see Huddleston, pp. 172-73. What you need to do is have both an image inside your h1 element that the user will see and text inside your h1 element that the user will not see.
For those of you using GIMP instead of Photoshop, try this tutorial.
topSubmitting Your Work
You'll need to post a link to your Bio Page in a reply to the "Bio Page, version 2" thread on your section's Class Forum. We'll do this in class; so just make sure that your Bio Page is saved to the correct folder on Eden.
There'll be a little time at the start of next class to go over any coding problems.
top