WEBSITE CREATION

1
WEBSITE CREATION

• DOING IT MANUALLY

2
Introduction

• Background
• Site Format
• Site Requirements
• Site Creation
• Conclusion

3
PURPOSE of WEBSITE

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

4
PARTS

• Three main types of information
• Educational 393 materials--PowerPoint's (oral
  and process), class notes (except in summer),
  link to Blackboard
• Professional links to employers, career
  autobiographical sketch
• Personal autobiographical sketch, mailto link,
  pictures, links to social networks

5
THE HEAD

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

6
THE BODY

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

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

8
TEMPLATE

• 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 yellow" text green" link
  purple" vlink "navygt and press ENTER.
• Type ltfont face Comic Sans MSgt and press
  ENTER.

9
TEMPLATE 2

• Type lt/fontgt and press ENTER.
• Typelt/bodygt and press ENTER.
• Type lt/htmlgt and press ENTER.
• Save as template.html including quotation
  marks. Save to both the W drive (www
  directory/folder) and to an A drive floppy or
  data CD.

10
INDEX.HTML

• Place cursor at end of line ltfont facegt and press
  ENTER.
• Type ltimg src umbclogo.gif"gt and press ENTER.
• Type lth1gtMy Page lt/h1gt
• Type ltulgt and press ENTER.

11
INDEX.HTML 2

• Type ltligtlta hrefeducation.htmlgtEducation lt/agt
• ltligtlta hrefjob.htmlgt Professionlt/agt
• ltligtlta hrefpersonal.htmlgt Personal Page lt/agt
• Type ltligtlta hrefhttp//www.umbc.edu/gtUMBC Home
  Page lt/agt
• Type lt/ulgt
• Save file as index.html to both the W drive and
  to an A drive floppy/data CD.

12
EDUCATION PAGE

• Open template.html
• Replace the title MY PAGE with Education.
• On line below ltfont facegt, type lth2gt English 393
  lt/h2gt and press ENTER.
• Type lth3gt Course Materials lt/h3gt and press ENTER.
  
• Type ltulgt to begin a bulleted list and press
  ENTER.

13
EDUCATION PAGE 2

• Type ltligtlta href"notes.html"gt date when you
  are to take the class notes lt/agt and press
  ENTER.
• Type ltligtlta href"orals.pptx"gt article title in
  quotes lt/agt and press ENTER.
• Type ltligtlta hrefhttp//blackboard.umbc.edu"gt
  Blackboard Loginlt/agt and press ENTER.
• Include links to other courses and
  organizations/activities at UMBC with web sites.
• Type lt/ulgt to end the list.
• Save as education.html to WWW folder and to
  your storage medium.

14
Professional Page

• Open template.html
• Replace the title MY PAGE with My Profession
  (or a title you prefer).
• Use this page to present information about your
  work. You may link to your current job, if it
  has a website you may present examples of your
  abilities.
• Write a career autobiographical sketch.
• 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.

15
Personal Page

• Open template.html
• Replace the title MY PAGE with All about Me
  (or a title you prefer).
• Use this page for your autobiographical sketch
  and for links to friends websites, photos of
  family and friends, etc. The autobiographical
  sketch, one picture, and network links are
  mandatory everything else you place on this page
  is optional.
• Include links to the social networks you
  participate in.
• Save the file as personal.html.

16
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
  lt/ulgt and press ENTER.

17
NAVIGATION 2

• Type lttable bordergt and press ENTER.
• Type ltthgtlta href index.htmlgtHome Pagelt/agt
• ltthgt lta href job.htmlgt Profession lt/agt
• ltthgt gtlta href personal.htmlgt Personal Page
  lt/agt lt/trgt and press ENTER.
• Type lt/tablegt and press ENTER

18
NAVIGATION 3

• Save file to w drive (www directory/folder), and
  to your own storage medium (ex. Your folder on
  the SG server).
• Use Save As so you can check that the file has
  the correct filename.
• 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.)

19
IMAGES

• Banners, logos, pictures, Clip Art, and
  animations belong in this category.
• Campus requirement is the UMBC logo from the
  campus style guide.
• Loading time should be short
• One picture will appear in the personal section.

20
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 as" and
• left click.
• Name image (umbclogo.gif) and save it in W drive.

21
MAILTO LINK

• Type these tags to place the mailbox image and
  mailto link on your page.
• ltimg align left src animfrog.gif "gt lta href
  "mailtousername_at_umbc.edu"gtyour name lt/Agt
• Copy this image from my home page lta href
  http//userpages.umbc.edu/lharrisgt Harris home
  page.

22
UMBC HELP

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

23
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.