| Laser printing/HTML/stylesheet equivalents | ||
|---|---|---|
| Printed | HTML ume | CSS |
| Hard returns | <br> tags | same |
| Paragraph break | <p> tag | <p> and <p /> tags |
| Bold face | <b>bold</b> tags | font:bold |
| Italics | <i>italic</i> tags | font:italic |
| Extra space character | entity | same |
| Simple Indent | <DD> or <UL> tag | left-indent:xxx |
| Tab rows | <TABLE><TR> tag | margin-left:xxx |
| Tab columns | <TD>tag in row | margin-left:xxx |
| Left angle < | < | same |
| Right angle > | > ; | same |
| Ampersand & | & | same |
Resume checklist -- using simple HTML
tables, graphics, stylesheets, lists
- HEAD
- TITLE
- Add text to TITLE, seen in browser titlebar
- Example TITLE Howard Jones: Resume, Spetember 2001 /TITLE
close HEAD, open body- Example: /HEAD
- BODY
- Define background color as white -- gray is the default color in some browsers
- Example BODY bgcolor="white" -- a good starting color
- Colors names may also be expressed in a wider range of hex, Rgb, and ascii values
A background texture or image may also be used -- but many beginners make the mistake of using avoid strong or distracting backgrounds
- Example: BODY background="bg.gif"
- FONT - a default typeface may be specified
- Example: FONT FACE="Times, Times Roman, serif" -- typical, widely available newspaper or book font
- Example: FONT FACE="Arial, Helvetica, sansserif" -- alternate standard font legible in small screen sizes
- FONT, continued, a font size.
- Example: FONT SIZE=3 (older standard for coarser monitors)
- Example: FONT SIZE=2 (recent standard for sharper monitors)
- FONT,contined, font color
- Example: FONT COLOR="black" -- a good starting color)
- Avoid bizarre text/background color combinations which are hard to read and print out
- HEADINGS: large <H1> and <H2> may be too large for resume
- Example: Try smaller <H3> heading
- Or just use boldface <B>Franklina Evans</B>for name,
- Address and phone information may not need any emphasis
- Use bold sparingly
- Avoid blue text and underlined text in HTML since blue underlines indicate a hypertext link .
- INDENTS
- Hard to do in plain HTML -- try UL or DD
- Margins
- <BLOCKQUOTE> indents both margins. Can be nested.
- Italics for emphasis
- Subheads may be in italics, less intrusive than bold
- Avoid long text passages in bold or italics
- Typical resume subheads
- Goal: statement can be set off with additional blockquotes)
- Education:
- Experience: (Often in reverse chronological order)
- Interests:
- Personal statement:
- Contact information Signature: E-mail address: (+1 space)
<A href="mailto:username@pegasus.rutgers.edu">
username@pegasus.rutgers.edu</a>
Resume checklist 3:
Creating a hypertext navigation system:
1. Create a navigation line:
Top: Goal: Education: Experience: Interests: Statement: Signature:
2. Add jumps with "|" separators in your word processor:
--only spaces around "|" separator -- create verically
for legibility but it will be one line in HTML
<A href="#Top">Top:</a> |
<A href="#Goal">Goal:</a> |
<A href="#Education">Education:</a> |
<A href="#Experience">Experience:</a> |
<A href="#Interests">Interests:</a> |
<A href="#Statement">Statement:</a> |
<A href="#Signature">Signature:</a>
4. Add correponding "name" targets before each section.
Cue tags, .e.g Top</a>, are optional.
<A name="Top">
Top:
<A name="Goal">
Goal:
<A name="Education">
Education:
<A name="Experience">
Experience:
<A name="Interests">
Interests:
<A name="Statement">
Statement:
<A name="Signature">
Signature:
You may need to add a <BR> or <P> separator after each "name" tag for correct HTML display.
5. Create "Return to top" cues after each section -- although this may seem excessive for a short resume,it would be useful
for something longer. It can go right before next "name" tag.
<A href="#Top">Return to Top:</a>
<A href="#Top">Return to Top:</a>
<A name="Goal">
Goal:
<A href="#Top">Return to Top:</a>
<A name="Education">
Education:
<A href="#Top">Return to Top:</a>
<A name="Experience">
Experience:
<A href="#Top">Return to Top:</a>
<A name="Interests">
Interests:
<A href="#Top">Return to Top:</a>
<A name="Statement">
Statement:
<A href="#Top">Return to Top:</a>
<A name="Signature">
Signature:
6. Converting text to HTML:
HTML publishing utilities such as those to be found in Netscape (Composer), Word, WordPerfect, etc. are useful for quick jobs but require too much touch up. They use proprietary codes and strip out codes they don't support.
-- Search for all line ends (hard returns) and replace with <BR> + line end. Learn how your word processor handles hard return replacements. Don;lt omit the returns in the replacements!
-- If you have a double return at paragraph break, it will be converted.
-- Convert all text bold attributes and probably underlines and italics to <B>...</B> tags. Save italics for bibliographic citations. Avoid underlines since they can be confused with links.
-- Use <BLOCKQUOTE> and to manage whitespace. More advanced methods will follow.
-- To quote the angle brackets around a tag (or use them in math expressions), use < for the left/opening bracket and > for the right/closing bracket.
7. Test your system. If you cannot jump to the last item it is because there is not enough white space after it.
Add 15 or so <BR> characters after your last text.
8. You can convert your horizontal system to a vertical one:
9. Appendix:
--Enclose in <UL></UL> tags for bulleted list
--Add <LI> before each item
--Delete "|" characters
--Enclose in <P><HR><P> tags
--Add title <b>Sections of my resume:</b>
<P><HR><P>
<b>Sections of my resume:</b>
<UL>
<LI><A href="#Top">Top:</a>
<LI><A href="#Goal">Goal:</a>
<LI><A href="#Education">Education:</a>
<LI><A href="#Experience">Experience:</a>
<LI><A href="#Interests">Interests:</a>
<LI><A href="#Statement">Statement:</a>
<LI><A href="#Signature">Signature:</a>
</UL>
<P><HR><P>
Top: | Goal: | Education: | Experience: | Interests: | Statement: | Signature:
Sections of my resume: