Creating your first web page: your resume P.D. & M.S. Krolak © Copyright 2005.

Creating your first web page: your resume

P.D. & M.S. Krolak© Copyright 2005

About this exercise

Carefully consider your needs for privacy and security

– Do not use home address or phone number– Do not use your social security number– Do not use your personal email – use a web

mail that you will check, i.e. a disposable one.– If you do not want to use a real resume use a

Dummy one (Clearly marked as a Dummy in the heading)

Design issues

• Use a professional looking texture for a background

• Use a tasteful sound file (midi will do). This is for exercise only & not the common practice.

• Do not place a photo on the resume as this will cause it to be discarded immediately (HR practice to avoid sex and age discrimination lawsuits).

• Avoid personal data.

Resume

Besides having a background image, a music file, and an animated email gif, you will need a block structure.

Heading:Name & contact info

Goal:

Education:Link your schools

Skills:

Job experience:

Animated Email Button

Tasteful music

First steps

• Get your animated gif• Get your music or

sound file.• Get your background

texture.

Click

Get your animated email

• Use your search skills to find an animated email gif

• Capturing  an image or animated gifOnce you find an object that you want to capture: –Put your mouse on it. –click on your selection with the right mouse button. –A menu will appear; select Save image as. –This will save the object. Remember the file's name and extension (e.g., mailbox.gif) and where you saved it.

Select and save your musicSearch for a tasteful .mid or .wav file • Use your search skills to find an

appropriate audio clip: • Place the mouse on the link to the

audio clip (directly above it). • Click with [right mouse button] and

choose -- save link as. • To hear this sound clip played,

plug your headset into the green socket in the back of  lab computer. (To work with sounds, your computer should have a sound card and speakers or a headset.) It is strongly recommended that you use sounds that have small file sizes less than 10KB (10,000 Bytes) is best.

Select and capture your background

1. Search for background texture

2. Use standard image capture.

3. If it is a background on a webpage,

To capture a texture (background):

• Put the mouse on it in an area not occupied by a link, or inline image, etc.

• Click with the right mouse button and choose, SaveAs Background.

Selecting your color scheme

Note that when you chose a background texture you can make the text difficult to read. Select the texture to be unobtrusive. Pay attention to the choice of colors defined in the body tag for:

Text -- the normal text in the document color Link -- Unvisted Link, i.e. a link that has not been previously visited Alink -- Active Link Vlink -- Visited Link

If you are unsure of the correct Hex digits for a color use the names of colors.

Warning of Common Error A coomon mistake is to use a background color, texture, or image that is nearly the same color as the text or link colors. In which case the text is invisible. Chose your color combinations to give you high contrast. Make sure that your background image is uploaded into your web site if not the text or link colors may also be invisible.

Prepare to write your resume

You will need to create a draft of your resume. Easiest to start with your current one. Fill in the blocks with your data. The green blocks- headings should be followed by a list of items.

Heading:Name & contact info

Goal:

Education:Link your schools

Skills:

Job experience:

Animated Email Button

Tasteful music

Writing your first web page

Easiest means is to use the Nvu editor (Click button)

For the more daring you can try using HTML tags directly (Click button)

Prepare to write your resume

Use WordPad for the text editor:

1. You should have a draft of your resume ready.

2. We will create the resume in three sections.2.1 The top (mostly the Head section)

2.2 The bottom which closes the HTML and body container and creates the animated email button

2.3 The resume material will go in the middle

Step 1 The Top

Step 1: Add to top of resume.html

Note that the red text is where you should make a replacement with your personal data as appropriate.

The HTML below creates the Head and starts the Body .

Copy and Paste at the top of WordPad window <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <HTML> <HEAD> <TITLE> YOUR NAME's Resume</TITLE> </HEAD> <!-- use the stainedglass background --> <BODY TEXT="#FFFFFF" LINK="#FFFF00" VLINK="#FF9900" ALINK="#FF0000" BACKGROUND="stainglass.jpg"> <!-- Play hail to the chief as the page opens --> <embed SRC="hail.wav" autostart="true" loop="true" width=140 height=55> <bgsound SRC="hail.wav" Loop="50">

This should be followed by your resume material

Step 2 The Bottom of the Document

Step 2: Add to the bottom of resume.html

Just below the last text of your resume, add the following HTML. Before you cut and paste, look at the code carefully. Comments have been added to help you read it.

The creation of an email and a home page link and tags to close the containers <!-- Send the visitor to your home page to see what else you have created. The use of an absolute path to the home page is a good idea, because if someone saves your document they still can get to the home page --> <A Href="Your-URL_OF_Your_Home_Page">Back to My Home Page</A><BR> <!-- This is how to set up a process to send you email from your Web page using the mailto process. The IMG tag makes your email gif a button that will start the email process when viewers click on it --> <A Href="mailto:YOUR_EMAIL_ADDRESS_HERE"> <IMG SRC="THE_NAME_OF _THE_MAILBOX.gif">For further Information</A><BR> <!-- Close out the Body and HTML container tags --> </BODY> </HTML>

Step 3 Middle Part

Creating the Heading:

Using the example replace the material in red with yours.

Examine your resume and use HTML Tags on with your text as shown here.

<H1 align="CENTER">Joe Smith</H1> <P align="Center">101 First St.<BR> Lowell, MA 01854 <BR> (978)555-1111 <BR> <address>Email: [email protected]</address> </P> <HR> <P align="left">

Now create the Goal Statement

Set off the Goals using the heading 2 with a statement of what you can do and why someone would hire you.

<H2>Goal:</H2><P Align=“left”>Get a good job with short hours, big bucks, and 4 weeks vacation to start.</P>

Continue with education, skills, job experience

Create an H2 container for each category: The remaining material demonstrates the simple concept of lists.

Say your first category is called Education, and currently looks like:

Education: 1992-1996 Ridgemont High School Ridgemont NJ 1997-2000 University of Massachusetts Lowell Department of Computer Science Lowell MA

The category Education is a secondary heading; thus, we use a <H2> tag and Unordered List <UL> tag and List items <LI> tags to create:

<H2>Education:</H2> <UL> <LI>1992-1996 Ridgemont High School, Ridgemont, NJ <LI>1997-2000 University of Massachusetts Lowell, Department of Computer Science, Lowell MA </UL>

After your have finished

Save_as Name of file resume.html

File Type text document.

Once saved check it spelling etc. and open it from your browser.

If it looks good, send it to a web page checker. Make final corrections and save the report from the web checker.

What to upload to your website!

• Your resume.html

• Your sound file

• Your background image

• Your animated email gif.

• Your validation report.