BMIS235 CREATING WEB PAGES NAME: ____________ Professor Chen Due Date: __________

Web Page assignment #1:You will create your home page and improve it continuously while you are at GU (and certainly for fun!!). Create the following three files (index.html, myself.pptx, and myresume.docx – a sample in Fig. 3) and upload/save them under the folder of public_html (your Web folder) using a FTP such as FileZilla– see Figure 4) to your account.

We start the work on the PC (desktop or laptop) then upload them to the web folder using FileZilla.1. Create the following two folders on the PC: i) a folder of bmis235-0x-public_html (0x stands for your section number

such as bmis235-03-public_html) on c: (or d:) drive, and ii) another folder of css under bmis235-0x-public_html. The web design structure is shown in Figure 1.

2. Download the two data files of index_template.html and styles-web1.css from Bb (available under Assignments & Cases Web Design Assignments and Resources data files for … web1) to your PC and save them in two appropriate folders respectively (see Figure 4 and pptx file)3. Create your first HTML file with the file name of index.html or open index_tempalte.html by right clicking the file

then select “Open with” finally choose Notepad++ or simply select “Edit with Notepad++” (Figure 2). a) Use Notepad ++ to create an html file (Figure 3) and save it as index.html (lower case). Note that you may

download a ‘template’ (index_template.html) and add required html codes shown in Figure 3 and save the file as index.html

b) It is very important to rename/save the file as index.html since it is the default file name that Web Browser will invoke from your personal web page (i.e, from your GU email repository). Please note that i) the file extension should be .html NOT .docx neither .htm. ii) case is sensitive for all file names and folder names in ALL web page assignments. For example, index.html is

different from Index.HTML 4. Next, create the following two additional documents:

a) a powerpoint file introduces yourself (something you want to share with your friends and/or sell yourself to your future employer) and save it as myself.pptx

b) a resume file in MS-WORD format (see Figure 5) and save it as myresume.docx5. When done, copy/upload the following four files into your web repository (publich_html) using FileZilla FTP:

a) index.html, myself.pptx and myresume.docx to public_html/ directory b) styles-web1.css (the one your downloaded) to public_html/css/ directory (a) and (b) can be done in a single process by using FileZilla (See Step 2 in Figure 4)

6. Test your first web page:a) invoke a Web Browser (e.g., Firefox)b) type in your URL (the following is my URL – for teaching purpose) http://barney.gonzaga.edu/~chenta or, http://barney.gonzaga.edu/~your_userID

7. It is required to “Validate” and “View” your HTML code (validator.w3.org) and debug/correct the code before you submit the assignment (see HTML pp. 67-70, 123, 241, 294, or a pdf file for Validating HTML code for details)

8. What/How you should turn in: (Fail to provide me with ALL information, you will lose major points). Notifying your instructor by uploading Web#1 message to the Blackboard (not via email). See detailed instruction on

the document of “Instruction_Web_Assignments_Bb” available on the Bb. Please note that you should click “Write Submission” to enable the text editor box. Eenter the following information in the “2. Assignment Submission” window:

Dr. Chen, Here is my Web#1 assignment. http://barney.gonzaga.edu/~your_userID <Your Full Name> bmis235-02 (or bmis235-03 or bmis235-05)

so that I can record/grade your homework directly on the Bb.

Make the URL linkable

Web Page Design Assignment #1, Page 1

Figure 1. Your Personal Web Page Design Structure

Figure 1b: Create a new folder/directory under publich_html on web folder

Figure 2. How to open/edit the data file of index_template.html

styles-web1.css

css [css folder]index.htmlmyself.pptxmyresume.docx

public_html [web folder]

(step b)

(step a)

or, simply click

right click

Web Page Design Assignment #1, Page 2

Figure 3. index.html <!DOCTYPE html><!-- ***************************************************************************** Author: Jason Chen; File name: index.html (Web1) Date: 1/25/2017 BMIS235-01 ROW: 1 Note that there is a new folder of css created in this version ***************************************************************************--><html lang="en"><head>

<link rel="stylesheet" href="css/styles-web1.css"><title>Home Page for Jason Chen</title><meta charset="utf-8">

</head><body> <div id="container">

<a id="top"></a><script type="text/javascript"> document.write(Date()) </script><header>

<h1>Welcome to JASON CHEN's Home Page! </h1></header><br> <br><nav>

<ul> <li><a href="myself.pptx"> Know more about me with PowerPoint presentation </a> </li><li><a href="myresume.docx"> Visit my resume (MS-WORD format) </a> </li>

</ul></nav><br> <br> <br> <br> <br> <br> <br><br> <br><main><pre> <b>

******************************************************* &copy; (your name here) ... (you may add any appropriate information here) ... *******************************************************

</b> </pre><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><nav><div class="gotop"><a href="#top"><span style="font-size:small; color:bluewhale;">Go to the Top of the Page! </span></a> </div></nav> <br> <br></main><footer><p> For comments about my web site, please e-mail me at: <a href="MAILTO:chen@gonzaga.edu">chen@gonzaga.edu </a> <br>Phone: <a href="tel:+5093133421">509-313-3421</a><br> <!--Insert phone link--> </p><!-- the following is required for all assignments --> <i> <br>This document was last updated on January 21, 2016; by Jason Chen</i> </footer>

<hr> </div></body></html>

ONE word

Web Page Design Assignment #1, Page 3

Figure 4: How to Use FTP (FileZilla client – see another doc for more detail )

Web Assignment #1 - Page 4

Step 1: Login to your account and Invoke FileZilla client (SFTP)

Step 2: Select three files from your computer (on the left side) to be transferred then upload to our Web server (ie., Barney server): 1) index.html, 2) myresume.docx and 3) myself.pptx and/or other folders (e.g., css and images)

Figure 5. A Sample Resume File (Resume Outline)

Maria Sanchez

Objective

To apply my organizatonal and computer skills as an Office Manager in a service-based company or organization

Education

1995-1996: Beachside College, San Diego, CA Administrative Assistant Certificate Courses included:

Computer Skills: Microsoft Office 95 and 97, WordPerfect 6.0 DOS, Excel Business Comunications and Organizational Behavior Basic Acounting and Bookkeeping Administrative Procedures Internet Communications and Web Page Design

1990-1995: Point Gray Secondary School Grade 12 Graduation

Work Experience

1996-1997: West Side Publishing, 1601 Palm Drive, San Diego Office Manager Responsibilities included:

Production of documents with Microsoft Office 97 Design and createion of the company web site Organization of office procedures in an eight-person office Management of the company database

1995-1996: Best Bookkeeping, 3095 West George Street, San Diego Office Assistant (part time) Responsbilities included:

Production of documents in Microsoft Word 7.0 Organization of company database with Microsoft Access 7.0

1991-1994 Camp Cortez, Catalina Island, CA Camp Counselor (summers) Responsibilities included:

Supervision of groups of 10 campers aged 9 to 11 Organization of craft and sports activities

Volunteer Experience

1993-1995: Mothers' March, Orange County Chapter General Office Duties (part time: January to April) 1995-1996 Beachside College Applied Business Technology Department Student Activities Coordinator

Web Assignment #1 - Page 5