1. 12/15/20151 WEBSITE CREATION DOING IT MANUALLY

2. 12/15/20152 PURPOSE of WEBSITE To give colleagues and prospective employers some information about your background To demonstrate your personality and interests

3. 12/15/20153 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)

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

5. 12/15/20155 THE BODY Main part of document: paragraphs of text, list of links, graphics, etc.

6. 12/15/20156 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

7. 12/15/20157 TEMPLATE Open Notepad (NOT WORDPAD) to have mouse abilities. Type and press ENTER. Type MY PAGE and press ENTER. Type and press ENTER.

8. 12/15/20158 TEMPLATE 2 –Type 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.

9. 12/15/20159 INDEX.HTML Place cursor at end of line and press ENTER. Type and press ENTER. –Type My Page –Type and press ENTER.

10. 12/15/201510 INDEX.HTML 2 –Type Education – Profession – Personal Page –Type UMBC Home Page http://www.umbc.edu/ –Type –Save file as “index.html” to both the W drive and to an A drive floppy/data CD.

11. 12/15/201511 EDUCATION PAGE Open template.html Replace the title “MY PAGE” with “Education.” On line below, type English 393 and press ENTER. Type Course Materials and press ENTER. Type to begin a bulleted list and press ENTER.

12. 12/15/201512 EDUCATION PAGE 2 Type date when you are to take the class notes and press ENTER. Type article title in quotes and press ENTER. Type Blackboard Login and press ENTER. Include links to other courses and organizations/activities at UMBC with web sites. Type to end the list. Save as “education.html” to W and A drives.

13. 12/15/201513 Professional Page Open template.html Replace the title “MY PAGE” with “My Profession” (or a title you prefer). My Career Plans Write a career autobiographical sketch beneath this heading. Use the 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.

14. 12/15/201514 Personal Page Open template.html Replace the title “MY PAGE” with “All about Me” (or a title you prefer). My Life 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.”

15. 12/15/201515 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 and press ENTER.

16. 12/15/201516 NAVIGATION 2 Type and press ENTER. Type Home Page Profession Personal Page and press ENTER. Type and press ENTER

17. 12/15/201517 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.)

18. 12/15/201518 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

19. 12/15/201519 UMBC LOGO Go to http://www.umbc.edu/umbcs tyle/wordmarks.htmlhttp://www.umbc.edu/umbcs tyle/wordmarks.htmlto 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.

20. 12/15/201520 MAILTO LINK Type these tags to place the mailbox image and mailto link on your page. – your name –You can go to my home page and download my animated frog email image.

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

22. 12/15/201522 VIEW YOUR PAGE Open a browser. Type your URL in the location box: http://userpages.umbc.edu/~username/ 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.