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.docx

5. 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.

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


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:">

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

Web Page Design Assignment #1, Page 3

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


Figure 5. A Sample Resume File (Resume Outline)

Maria Sanchez

Objective

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

Education

19951996: 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

19901995: Point Gray Secondary School

Grade 12 Graduation

Work Experience

19961997: 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 eightperson office

  Management of the company database

19951996: 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

19911994 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

19931995: Mothers' March, Orange County Chapter

General Office Duties (part time: January to April)

19951996 Beachside College Applied Business Technology Department

Student Activities Coordinator

Web Assignment #1 - Page 4