WEBSITE CREATION DOING IT MANUALLY 2/21/2019
PURPOSE of WEBSITE To give colleagues and prospective employers some information about your background To demonstrate your personality and interests 2/21/2019
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 2/21/2019
EXAMPLES Student Sites 2/21/2019
THE HEAD First part of document Title appears in title bar, not on page Meta tags also belong in this section. 2/21/2019
THE BODY Main part of document: paragraphs of text, lists of links, graphics, etc. Items here will be what audience sees 2/21/2019
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 2/21/2019
HOME PAGE 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 = "coral" vlink = "#6e6473”> and press ENTER. Type <font face = “Comic Sans MS”> and press ENTER. 2/21/2019
HOME PAGE 2 Type <img align = center src = “umbclogo.gif"> and press ENTER. Type <h1>My Page </h1> 2/21/2019
HOME PAGE 3 Type </font> and press ENTER. Type</body> and press ENTER. Type </html> 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. 2/21/2019
HOME PAGE 4 Type <ul> and press ENTER. Type <li><a href="notes.html"> date when you are to take the class notes (401/501 only) </a> and press ENTER. Type <li><a href="orals.ppt"> “article title” </a> and press ENTER. Type <li><a href=“http://blackboard.umbc.edu"> Blackboard Login</a> and press ENTER. Type <li><a href=“http://www.umbc.edu/”>UMBC Home Page </a> Type </ul> to end the list. 2/21/2019
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 </ul> and press ENTER. 2/21/2019
NAVIGATION 2 Type <table border> and press ENTER. Type <th> <a href =“index.html/”> Name of your page</a> Type <th> <a href= “notes.html ”> Date you take notes </a> Type <th> <a href= “orals.ppt ”> “Article Title” </a> </tr> and press ENTER. Type </table> and press ENTER. 2/21/2019
NAVIGATION 3 Type </table> 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. 2/21/2019
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 2/21/2019
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. 2/21/2019
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. <img align = left src = "mailbox.jpg"> <a href ="mailto:username@umbc.edu">your name </a> 2/21/2019
UMBC HELP http://www.umbc.edu/Styleguide/ Templates as well as html guides and tutorials are found here. 2/21/2019
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 they’re correct. If page doesn’t work properly, first look for typos in html. Then call for the consultant if you can’t find the problem. 2/21/2019