WEBSITE

CREATION
DOING IT MANUALLY

04/21/16

1

PURPOSE of WEBSITE
• To give colleagues and prospective
employers some information about
your background
• To demonstrate your personality and
interests

04/21/16

2

PARTS
• Three main types of information
– Educational: 393 materials-PowerPoint's (oral and process), class
notes, link to Blackboard
– Professional: links to employers,
examples of abilities
– Personal: autobiographical sketch,
mailto link, pictures (optional)

04/21/16

3

THE HEAD
• First part of document
• Title appears in title bar, not on page
• Meta tags also belong in this section.

04/21/16

4

THE BODY
• Main part of document: paragraphs
of text, list of links, graphics, etc.

04/21/16

5

SITE REQUIREMENTS
• Opening banner, logo, or graphic (UMBC
logo)
• No reliance on defaults or on my choices
(colors, fonts)
• Compatible colors for
backgrounds/wallpaper text, and links
• Navigational aids on each page
• Last updated footer
• Link to UMBC page
04/21/16

6

TEMPLATE
• Open Notepad (NOT WORDPAD) to have mouse
abilities.
• Type <html> and press ENTER.
• Type <head> and press ENTER.
• Type <title> MY PAGE </title> and press ENTER.
• Type </head> and press ENTER.
• Type <body bgcolor = "tan" text = "#0000ff" link
= "coral2" vlink = "#808000”> and press ENTER.
• Type <font face = “Comic Sans MS”> and press
ENTER.

04/21/16

7

TEMPLATE 2



Type </font> and press ENTER.
Type</body> and press ENTER.
Type </html> and press ENTER.
Save as “template.html” including
quotation marks. Save to both the W drive
(www directory/folder) and to portable
storage medium. If your computer doesn’t
have the www directory mapped, save to
your desktop.
04/21/16

8

INDEX.HTML
Place cursor at end of line <font
face> and press ENTER.
Type <img src = “umbclogo.gif"> and
press ENTER.
– Type <h1>My Page </h1>
– Type <ul> and press ENTER.

04/21/16

9

INDEX.HTML 2
– Type <li><a
href=“education.html”>Education </a>
– <li><a href=“job.html”> Profession</a>
– <li><a href=“personal.html”> Personal
Page </a>
– Type <li><a href=“http://www.umbc.edu/
”>UMBC Home Page </a>
– Type </ul>
– Save file as “index.html” to both the W
drive and to an A drive floppy/data CD.
04/21/16

10

EDUCATION PAGE
• Open template.html
• Replace the title “MY PAGE” with
“Education.”
• On line below <font face>, type <h2>
English 393 </h2> and press ENTER.
• Type <h3> Course Materials </h3>
and press ENTER.
• Type <ul> to begin a bulleted list and
press ENTER.
04/21/16

11

EDUCATION PAGE 2
• Type <li><a href="notes.html"> date when you
are to take the class notes </a> and press
ENTER.
• Type <li><a href="orals.ppt"> article title in
quotes </a> and press ENTER.
• Type <li><a
href=“http://blackboard.umbc.edu"> Blackboard
Login</a> and press ENTER.
• Include links to other courses and
organizations/activities at UMBC with web sites.
• Type </ul> to end the list.
• Save as “education.html” to W and A drives.
04/21/16

12

Professional Page
• Open template.html
• Replace the title “MY PAGE” with “My
Profession” (or a title you prefer).

• <h3> My Career Plans</h3> Write a career
autobiographical sketch beneath this heading. Use
the <p> tag to start a paragraph.

• You may link to your current job, if it has a
website; you may present examples of your
abilities. Remember that the audience that
views this page may include prospective
employers.
• Save the file as “job.html” so that the link
you’ve already created will work.
04/21/16

13

Personal Page
• Open template.html
• Replace the title “MY PAGE” with “All about
Me” (or a title you prefer).
• <h3>My Life </h3> Write your personal
autobiographical sketch beneath this heading.
Add links to friends’ websites, tasteful photos of
family and friends, etc. The autobiographical
sketch is mandatory; everything else you place
on this page is optional.
• Save the file as “personal.html.”
04/21/16

14

NAVIGATION
• Visitors must get from one page to
every other page on your website.
• Navigational aids must appear on
each page either horizontally or
vertically.
• Open education.html. Place cursor
at end of line </ul> and press
ENTER.
04/21/16

15

NAVIGATION 2
• Type <table border> and press ENTER.
• Type <th><a href
=“index.html”>Home Page</a>
• <th> <a href =“job.html”> Profession
</a>
• <th> <a href =“personal.html”>
Personal Page </a> </tr> and press
ENTER.
• Type </table> and press ENTER
04/21/16

16

NAVIGATION 3
• Save file to w drive (www directory/folder),
the desktop, or a portable storage medium.
• Use “Save As” so you can check that the file
has the correct filename.
• Create a bar on the professional and
personal pages.
• When using this navigation bar on other
pages, be sure to remove the link to the page
you’re on. (There’s no education link because
we put the bar on the education page.)
04/21/16

17

IMAGES
• Banners, logos, pictures, Clip Art,
and animations belong in this
category.
• Campus requirement: including the
UMBC logo from the campus style
guide.
• Loading time should be short

04/21/16

18

UMBC LOGO
• Go to
http://
www.umbc.edu/umbcstyle/w
ordmarks.html
to find examples of UMBC
logos.
• Place your cursor on the
image of your choice, and
click the right mouse button.
• Select "save image as”
(Firefox) or “save picture
as” (Explorer) and left click.
• Name the image
(umbclogo.gif) and save it in
W drive.

04/21/16

19

MAILTO LINK
• Type these tags to place the mailbox
image and mailto link on your page.

– <img src = “maileyes.gif "> <a href
="mailto:username@umbc.edu">your
name </A>
– You can go to my home page and
download my animated frog email image.
04/21/16

20

UMBC HELP
• http://www.umbc.edu/umbcstyle/web
/
• Templates as well as html guides and
tutorials are found here.

04/21/16

21

VIEW YOUR PAGE
• Open a browser.
• Type your URL in the location box:
http://userpages.umbc.edu/~username/
• When working on your site, keep
browser open so you can check your
work.
• If page doesn’t work properly, first look
for typos in html. Then call for the
consultant if you can’t find problem.
04/21/16

22