The web Bio Page assignment will give you a chance to familiarize yourself with some basic HTML while constructing a relatively simple web page. Later you'll revise and customize the appearance of the page using CSS and develop the page into your Bio Page for your final project. For now, keep things as simple as they need to be.
Sample pages
Before you begin, visit the following pages for some initial ideas about what to try (and, definitely, what not to try):
- Steven Pinker - a boring but clean page
- 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.
Tutorials
Begin to familiarize yourself with HTML through the following tutorials and reference pages.
Work through the short HTML Tutorial at GetIT. It's a little outdated, but easy to follow.
Next try this more extensive HTML Tutorial from W3 Schools.
You don't need to work through the whole tutorial (it's quite long), but familiarize yourself with what it has to offer.
The Assignment
Using HTML (and CSS, if you're already familiar with it) make a Bio Page for yourself that contains, minimally, the following elements:
- A short text broken into chunks.
This text should be a short professional biography. It should describe your background, professional goals, interests, skills, and achievements.
The text can be partly or even totally fictional but should consist of at least four 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 one other image.
- At least one visible table. Make sure your table has enough cellpadding and a border.
Note that you can use tables with invisible borders (border="0") to lay out (visually organize) your page. Later, we'll practice layout using divs with CSS, the preferred method, but for now experiment with using tables.
- 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.)
- One or more lists (e.g., your links might appear in a list).
For rapid reference: here is a link to the W3 Schools HTML tag reference table.
Work in Notepad. Using Notepad, make a "drafts" folder on the desktop of your computer.
Saving Your Bio Page
- Save your Bio Page in the "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 to make sure that everything moved correctly.
- Set the permissions for your "drafts" folder, your "img" folder, your "biopage.htm," and your images to "755"
- Now check that everything works. 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.
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 problems.
top
return to schedule
