WEBSITE CREATION

1
WEBSITE CREATION

• DOING IT MANUALLY

2
PURPOSE of WEBSITE

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

3
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)
• Information organized according to individual plan

4
EXAMPLES

• Student Sites

5
THE HEAD

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

6
THE BODY

• Main part of document paragraphs of text, lists
  of links, graphics, etc.
• Items here will be what audience sees

7
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 and to Blackboard

8
HOME PAGE

• Open Notepad (NOT WORDPAD) to have mouse
  abilities.
• Type lthtmlgt and press ENTER.
• Type ltheadgt and press ENTER.
• Type lttitlegt MY PAGE lt/titlegt and press ENTER.
• Type lt/headgt and press ENTER.
• Type ltbody bgcolor "tan" text "0000ff" link
  "coral" vlink "6e6473gt and press ENTER.
• Type ltfont face Comic Sans MSgt and press
  ENTER.

9
HOME PAGE 2

• Type ltimg align center src umbclogo.gif"gt
  and press ENTER.
• Type lth1gtMy Page lt/h1gt

10
HOME PAGE 3

• Type lt/fontgt and press ENTER.
• Typelt/bodygt and press ENTER.
• Type lt/htmlgt and press ENTER.
• Save as index.html including quotation marks.
  Save to both the W drive and to an A drive floppy
  or to the personal folder on the Shady Grove
  server.
• FTP the saved file to the W drive for students at
  Shady Grove.

11
HOME PAGE 4

• Type ltulgt and press ENTER.
• Type ltligtlta href"notes.html"gt date when you
  are to take the class notes (401/501 only) lt/agt
  and press ENTER.
• Type ltligtlta href"orals.ppt"gt article title
  lt/agt and press ENTER.
• Type ltligtlta hrefhttp//blackboard.umbc.edu"gt
  Blackboard Loginlt/agt and press ENTER.
• Type ltligtlta hrefhttp//www.umbc.edu/gtUMBC Home
  Page lt/agt
• Type lt/ulgt to end the list.

12
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 index.html. Place cursor at end of line
  lt/ulgt and press ENTER.

13
NAVIGATION 2

• Type lttable bordergt and press ENTER.
• Type ltthgt lta href index.html/gt Name of your
  pagelt/agt
• Type ltthgt lta href notes.html gt Date you take
  notes lt/agt
• Type ltthgt lta href orals.ppt gt Article Title
  lt/agt lt/trgt and press ENTER.
• Type lt/tablegt and press ENTER.

14
NAVIGATION 3

• Type lt/tablegt and press ENTER.
• Save file to both drives.
• Continue to use this navigation aid or create one
  you like better, for instance, using buttons
  instead of text.
• Remove the bar from your home page because these
  links already appear there.

15
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

16
UMBC LOGO

• Go to
• http//www.umbc.edu/Styleguide to find examples
  of UMBC logos.
• Place your cursor on the image of your choice,
  and click the right mouse button.
• Select "save image/picture as" and
• left click.
• Name image (umbclogo.gif) and save it in W drive.

17
MAILTO LINK

• Save the mailbox image from my index.html page to
  use until you find one you like better, following
  the directions on the previous slide (17). Put
  the mailbox image and link on your index.html
  page.
• Type these tags to place the mailbox image and
  mailto link on your page.
• ltimg align left src "mailbox.jpg"gt lta href
  "mailtousername_at_umbc.edu"gtyour name lt/agt

18
UMBC HELP

• http//www.umbc.edu/Styleguide/
• Templates as well as html guides and tutorials
  are found here.

19
VIEW YOUR PAGE(S)

• 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.
• Check links on my website page and the schedule
  page to make sure theyre correct.
• If page doesnt work properly, first look for
  typos in html. Then call for the consultant if
  you cant find the problem.