Transcript Creating your first web page: your resume

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
Tasteful music
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
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 gif
Once 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 music
Search 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
Tasteful music
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 blocksheadings should be
followed by a list of
items.
Heading:
Name & contact info
Goal:
Education:
Link your schools
Skills:
Job experience:
Animated Email Button
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.