Download presentation
Presentation is loading. Please wait.
1
WEBSITE CREATION DOING IT MANUALLY 12/28/2018
2
Introduction Background Site Format Site Requirements Site Creation
Conclusion 12/28/2018
3
PURPOSE of WEBSITE To give colleagues and prospective employers some information about your background To demonstrate your personality and interests 12/28/2018
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 12/28/2018
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. 12/28/2018
6
THE BODY Main part of document: paragraphs of text, list of links, graphics, etc. 12/28/2018
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 12/28/2018
8
TEMPLATE 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 = “yellow" text = “green" link = “purple" vlink = "navy”> and press ENTER. Type <font face = “Comic Sans MS”> and press ENTER. 12/28/2018
9
TEMPLATE 2 Type </font> and press ENTER.
Type</body> and press ENTER. Type </html> 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. After saving the file, you will have to ftp it to your www folder. Use filezilla or win_scp. The host name is ftp gl.umbc.edu; then enter your username and password in the appropriate fields. Click login. 12/28/2018
10
INDEX.HTML Place cursor at end of line <font face> and press ENTER. Type <img src = “umbclogo.gif"> and press ENTER. Type <h1>My Page </h1> Type <ul> and press ENTER. 12/28/2018
11
INDEX.HTML 2 Type <li><a href=“education.html”>Education </a> <li><a href=“job.html”> Profession</a> <li><a href=“personal.html”> Personal Page </a> Type <li><a href=“ Home Page </a> Type </ul> Save file as “index.html” to both the W drive and to an A drive floppy/data CD. 12/28/2018
12
EDUCATION PAGE Open template.html
Replace the title “MY PAGE” with “Education.” On line below <font face>, type <h2> English 393 </h2> and press ENTER. Type <h3> Course Materials </h3> and press ENTER. Type <ul> to begin a bulleted list and press ENTER. 12/28/2018
13
EDUCATION PAGE 2 Type <li><a href="notes.html"> date when you are to take the class notes </a> and press ENTER. Type <li><a href="orals.pptx"> article title in quotes </a> and press ENTER. Type <li><a href=“ Blackboard Login</a> and press ENTER. Include links to other courses and organizations/activities at UMBC with web sites. Type </ul> to end the list. Save as “education.html” to WWW folder and to your storage medium. 12/28/2018
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 you’ve already created will work. 12/28/2018
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.” 12/28/2018
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 </ul> and press ENTER. 12/28/2018
17
NAVIGATION 2 Type <table border> and press ENTER.
Type <th><a href =“index.html”>Home Page</a> <th> <a href =“job.html”> Profession </a> <th> ><a href =“personal.html”> Personal Page </a> </tr> and press ENTER. Type </table> and press ENTER 12/28/2018
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 you’re on. (There’s no education link because we put the bar on the education page.) 12/28/2018
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. 12/28/2018
20
UMBC LOGO Go to 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. 12/28/2018
21
MAILTO LINK Type these tags to place the mailbox image and mailto link on your page. <img align = left src = “animfrog.gif "> <a href name </A> Copy this image from my home page: <a href = Harris home page. 12/28/2018
22
UMBC HELP http://www.umbc.edu/Styleguide/
Templates as well as html guides and tutorials are found here. 12/28/2018
23
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. 12/28/2018
Similar presentations
