You are on page 1of 22

WEBSITE

CREATION
DOING IT MANUALLY

04/21/16

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

04/21/16

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

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

04/21/16

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

04/21/16

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

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

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 doesnt
have the www directory mapped, save to
your desktop.
04/21/16

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

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
youve 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
youre on. (Theres 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 doesnt work properly, first look
for typos in html. Then call for the
consultant if you cant find problem.
04/21/16

22