12/15/20151 WEBSITE CREATION DOING IT MANUALLY

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

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)

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

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

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

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.

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.

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.

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

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

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

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

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

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

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

12/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

12/15/ UMBC LOGO Go to tyle/wordmarks.htmlhttp:// 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.

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

12/15/ UMBC HELP Templates as well as html guides and tutorials are found here.

12/15/ VIEW YOUR PAGE Open a browser. Type your URL in the location box: 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.