Web2 and WEB/HTML
Introduction
Dr. Jason C. H. Chen
Professor of MIS
School of Business Administration
Gonzaga University
Spokane, WA 99258
chen@gonzaga.edu
Dr. Chen, Management Information Systems (Web#2)
Web1 and Web2
• Web1
– You will learn the “process” of creating your first
personal web page
– How to submit it directly from Bb.
• Web2
– You will improve your personal web page using
your “logical reasoning” and “intelligence”
• html01thru html08
– Learn more from html text book and complete six
additional assignments
Dr. Chen, Management Information Systems (Web#2)
Type in the following URLs
Always use “Firefox” as the default web browser,
otherwise, some errors might be occurred.
http://barney.gonzaga.edu/~your_userID
http://barney.gonzaga.edu/~chenta
http://barney.gonzaga.edu/~chenta
http://barney.gonzaga.edu/~chenta2
http://barney.gonzaga.edu/~chenta2
http://barney.gonzaga.edu/~chen
http://barney.gonzaga.edu/~chen
Dr. Chen, Management Information Systems (Web#2)
FTP - FileZilla
Open the site manager, as seen below, and use these settings for
a new site:
Host: barney.gonzaga.edu
Server Type: SFTP - SSH File Transfer Protocol
Logon Type: Normal
User: [your GU username goes here]
Password: [your GU password goes here]
Please note that you should have only “My Sites” section when
you open “Site Manager”.
You should change the protocol from “FTP” to “SFTP” and
enter your personal logon information as follows. Click
connect, then you will see the main window.
Dr. Chen, Management Information Systems (Web#2)
Figure 2: How to Use FTP (FileZilla client)
Step 1: Login to your account and Invoke FileZilla client (SFTP)
Dr. Chen, Management Information Systems (Web#2)
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
Dr. Chen, Management Information Systems (Web#2)
What is Technology and
Why Technology?
• Technology is not only considered
simply as an asset or a capability
to manage but also as a factor that
has an impact on almost every
management method and practice.
Dr. Chen, Management Information Systems (Web#2)
·
·
·
·
·
A:
C:
Drives on Local
D: or G:
H: (Virtual directory)
mapping to accounts in
Barney Systems
My Network Places
PC
Lab 07, 012, & 021
You are here
·
·
·
·
·
·
·
My Network Places
Entire Network
Microsoft Windows Network
Gonzaga
Jepsonnt2
Chuang
BMIS235, MBUS342,
MBUS626, MBUS674
File Server in Jepsonnt2
Barney machines
H: drive
· public_html
· other folders
Basic services
· email
· Web pages
Dr. Chen, Management Information Systems (Web#2)
Introducing the World Wide
Web
• A network is a structure linking computers
together for the purpose of sharing
resources such as printers and files
• Users typically access a network through a
computer called a host or node
• A computer that makes a service available
to a network is called a server
Dr. Chen, Management Information Systems (Web#2)
Introducing the World Wide
Web
• A computer or other device that requests
services from a server is called a client
• One of the most common network
structures is the client-server network
• If the computers that make up a network are
close together (within a single department
or building), then the network is referred to
MAN?
as a local area network (LAN)
WAN?
Dr. Chen, Management Information Systems (Web#2)
Introducing the World Wide
Web
• A network that covers a wide area, such as
several buildings or cities, is called a wide
area network (WAN)
• The largest WAN in existence is the Internet
• In its early days, the Internet was called
ARPANET and consisted of two network
nodes located at UCLA and Stanford,
connected by a phone line
Dr. Chen, Management Information Systems (Web#2)
Introducing the World Wide
Web
• Today the Internet has grown to include
hundreds of millions of interconnected
computers, cell phones, PDAs, televisions,
and networks
• The physical structure of the Internet uses
fiber-optic cables, satellites, phone lines,
and other telecommunications media
Dr. Chen, Management Information Systems (Web#2)
Structure of the Internet
Dr. Chen, Management Information Systems (Web#2)
The Development of the Word
Wide Web
• Timothy Berners-Lee and other researchers at
the CERN nuclear research facility near Geneva,
Switzerland laid the foundations for the World
Wide Web, or the Web, in 1989
• They developed a system of interconnected
hypertext documents that allowed their users to
easily navigate from one topic to another
• Hypertext is a method of organizing information
that gives the reader control over the order in
which the information is presented
Dr. Chen, Management Information Systems (Web#2)
Hypertext Documents
• When you read a book, you follow a linear
progression, reading one page after another
• With hypertext, you progress through
pages in whatever way is best suited to you
and your objectives
• Hypertext lets you skip from one topic to
another
Dr. Chen, Management Information Systems (Web#2)
Linear versus hypertext
documents
Dr. Chen, Management Information Systems (Web#2)
Hypertext Documents
• The key to hypertext is the use of hyperlinks (or
links) which are the elements in a hypertext
document that allow you to jump from one topic
to another
• A link may point to another section of the same
document, or to another document entirely
• A link can open a document on your computer, or
through the Internet, a document on a computer
anywhere in the world
Dr. Chen, Management Information Systems (Web#2)
Hypertext Documents,
Web Servers and Web Browsers
• An entire collection of linked documents is
referred to as a Web site
• The hypertext documents within a Web site are
known as Web pages
• Individual pages can contain text, audio, video,
and even programs that can be run remotely
• A Web page is stored on a Web server, which in
turn makes it available to the network
• To view a Web page, a client runs a software
program called a Web browser, which retrieves
the page from the server and displays it
Dr. Chen, Management Information Systems (Web#2)
Using a browser to view a Web
document from a Web server
Dr. Chen, Management Information Systems (Web#2)
HTML: The Language of the Web
• A Web page is a text file written in a language
called Hypertext Markup Language
• A markup language is a language that describes a
document’s structure and content
• HTML is not a programming language or a
formatting language
• Styles are format descriptions written in a separate
language from HTML that tell browsers how to
render each element. Styles are used to format
your document
Dr. Chen, Management Information Systems (Web#2)
Type in the following URLs
Always use “Firefox” as the default web browser,
otherwise, some errors might be occurred.
http://barney.gonzaga.edu/~your_userID
http://barney.gonzaga.edu/~chenta
http://barney.gonzaga.edu/~chenta
http://barney.gonzaga.edu/~chenta2
http://barney.gonzaga.edu/~chenta2
http://barney.gonzaga.edu/~chen
http://barney.gonzaga.edu/~chen
Dr. Chen, Management Information Systems (Web#2)
HTML5 Components (p.29)
<!DOCTYPE html>
<!-- <html lang="en">
<head>
<link rel="stylesheet" href="css/styles-web1.css">
<title>Home Page for Jason Chen</title>
<meta charset="utf-8">
</head>
• meta tag contains information about the data on the webpage
– The meta tag designates the type of character set the browser
should use, charset=“utf-8”
• utf (Unicode Transformation Format) is a compressed format
that allows computers to display and manipulate text.
– Utf-8 is standard for HTML5 pages and is the preferred
encoding standard for email and other application.
Dr. Chen, Management Information Systems (Web#2)
Figure 1. index.html (web1)
<!DOCTYPE html>
<!-- *****************************************************************************
Author: Jason Chen; File name: index.html (Web1)
Date: 1/25/2016
BMIS235-01; ROW: 1
Note that there is a new folder of css created in this version
*************************************************************************-->
will study in ch4
<html lang="en">
(cascading style sheet)
<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>
ul: Unordered List
</header> <br> <br>
li: List Item
<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>
Dr. Chen, Management Information Systems (Web#2)
Figure 1. index.html (cont.)
<main>
<pre> <b>
*******************************************************
&copy; (your name here)
...
(your add any appropriate information here)
...
*******************************************************
Go to <a id of “top”
</b>
</pre> <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>
replaced with your info.
one word
<footer>
<address>For comments about my web site, please e-mail me at:
<a href="MAILTO:chen@gonzaga.edu">chen@gonzaga.edu </a>
</address>
<!-- the following is required for all assignments -->
<i> <br>This document was last updated on January 21, 2016; by Jason Chen</i>
</footer> <hr>
</body>
</html>
How to improve it?
Dr. Chen, Management Information Systems (Web#2)
Creating Links Within a Document
• To create a link within a document, you enclose the
content that you want to format as a link in an <a> tag, and
use the href attribute to identify the link target
• A link’s content is not limited to text
<ul>
<li><a href="myself.pptx"> <b>Know more about me with PowerPoint
presentation </b></a> </li>
<li><a href="myresume.docx"><b>Visit my resume (MS-WORD format)
</b></a> </li>
</ul>
Dr. Chen, Management Information Systems (Web#2)
Creating Element Ids for Linking
Documents
• One way to identify elements in an HTML document is to
use the id attribute
• Id names must be unique
• Id names are not case sensitive
In web2
<a id=“top">
…
<a href="#top"><span style="font-size: small">Go to the Top
of the Page! </span></a>
Dr. Chen, Management Information Systems (Web#2)
What you should do on Web2
• Your job in Web2 is to figure out ALL
differences between Web1 and Web2 and
update the existing index.html with the
version of Web2.
• How?
– 1) Open index.html using NotePad or NotePad++
– 2) Update index.html with ALL changes in Web2
– 3) Use your intelligence to find their differences
Dr. Chen, Management Information Systems (Web#2)
Four Basic HTML5 Semantic Elements
header
nav
<!DOCTYPE html>
<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>
[Basic Required HTML elements]
main
footer
Dr. Chen, Management Information Systems (Web#2)
HTML provides new tools for
improving/structuring
webpage design, including
semantic elements for specific
types of content
div id=“container”
header
nav
main
footer
Dr. Chen, Management Information Systems (Web#2)
web1
div id=“container”
header
nav
main
footer
Dr. Chen, Management Information Systems (Web#2)
What’s difference between
web1 and web2?
div id=“container”
header
nav
main
/* in styles-myweb.css file*/
body {
background-image:
url("../images/wall.gif");
}
footer
Why?
Dr. Chen, Management Information Systems (Web#2)
We will study
the path and css
later.
Appendix C - Color Reference Palette (APP 29)
W3Schools:
www.w3schools.com/tags/ref_colorpicker.asp
www.w3schools.com/tags/ref_colorpicker.asp
CSS Portal:
www.cssportal.com/css3-color-names/
www.cssportal.com/css3-color-names/
HTML Color Codes:
http://html-color-codes.info/
http://html-color-codes.info/
Dr. Chen, Management Information Systems (Web#2)
Color Picker:
www.colorpicker.com/
www.colorpicker.com/
HTML Color Names:
http://html-color-codes.info/colornames/
http://html-color-codes.info/colornames/
Major tasks for completing the Web2
1. Create an ‘images’ folder and copy image files (see Figure 1 for your web
structure). You should copy six image files from my images folder to your Web
source. They are available for you to download from the Blackboard (under either
Course Documents or Assignments). Follow the instruction below to complete
the task:
From within H: Drive,
create a new folder for saving all images (name it images - lower case) under
public_html
From within Blackboard (on the screen that you can view all the image files)
b) right click an image file (e.g., book.gif)
select “Save Target As or Save Link as” from the pop-up menu
save the book.gif in the folder of images that you just created in step a)
Please note that
if you do not have images folder in the H: drive, you should create it before you save
the image file
ii) if you are working your assignment off campus, you should first save ALL image
files on your local PC, you then upload (using FileZilla client) them to your Web
source.
iii) repeat steps b) c) d) for the remaining image files.
Dr. Chen, Management Information Systems (Web#2)
Figure 1. Your Personal Web Page Design Structure
H: [root directory]
|
public_html [web folder]
index.html
myself.pptx
myresume.docx
retrieve
image files
css [css folder]
images [images folder]
styles-web1.css
styles-myweb.css
<img src="images/book.gif"
alt="Book logo"
style="width:118px;
height:80px;" >
New to add for Web2
/* in styles-myweb.css file */
body { background-color:lightgreen;
background-image:
url("../images/wall.gif"); }
Dr. Chen, Management Information Systems (Web#2)
gook.gif,
events.gif
gcan.gif, wall.gif
mailbox.gif,
worm.gif
Web Design Directory Structure for All HTML Assignments
H: [root directory]
|
public_html [web folder]
|
css
index.html
images
[folder] [images folder]
myself.pptx
myresume.docx
html02
[folder for HTML#2]
html04
[folder for HTML#4]
…
html08
[folder for HTML#8]
…
styles-web1.css
styles-myweb.css
book.gif, events.gif
exercise
gcan.gif, wall.gif
(new folder)
mailbox.gif, worm.gif
hw
(new folder)
…
exercise
(new folder)
hw
(new folder)
…
All other *.html
files
fitness02.html
ski02.html
Your Personal
Web Page
Dr. Chen, Management Information Systems (Web#2)
fitness034html
about.html
contact.html
images
css
[images [folder]
folder]
styles.css
ffc_logo.png
equipment1.jpg
equipment2.jpg
equipment3.jpg
images
[images folder]
css
ski04.html images
[folder]
legal.pdf
[images
folder]
styles04.css
ski.jpg
All other *.jpg
image files
Major tasks for completing the Web2 (cont.)
2. Download a new css file (styles-myweb.css) from Bb to your PC and
transfer (copy or upload) to your public_html/css/ (note: not
public_html either in H: drive or via FTP.) You now have two css files.
3. Update the index.html program from Web#1 by right clicking the
index.html file then select “Open with” finally choose Notepad++ or
simply select “Edit with Notepad++” (Figure 2)..The updated version
of the index.html (the file name remains the same) is shown in Figure 3.
Please complete all required updates.
4. When done, your web repository should be organized as shown in Figure
1. Test your revised web page by:
a) invoke a Web Browser (e.g., preferable Firefox)
b) type in your URL (the following is my URL – for teaching purpose)
http://barney.gonzaga.edu/~chenta or,
http://barney.gonzaga.edu/~chenta
http://barney.gonzaga.edu/~your_userID
Dr. Chen, Management Information Systems (Web#2)
5. It is required to “Validate” and “View” your HTML code and
debug/correct the code before you submit the assignment (see
HTML pp. 67-70, 123, 241, 294or a pdf file for Validating
HTML code for details)
6. What/How you should turn in: (Fail to provide me with ALL
information, you will lose major points). Information about the
assignment and how to make the URL “linkable” please read
“Instruction on Web Assignments Submission via Bb” (under
‘Assignments’ then “Web Assignments and Resources”).
Notifying your instructor by uploading Web#2 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, Management Information Systems (Web#2)
What/How you should turn in
6. (cont.)
Dr. Chen
Make the URL linkable
This is my Web2 assignment
http://barney.gonzaga.edu/~your_userID
<Your Full Name> : BMIS235-02 (or BMIS235-03/05)
so that your grade will be posted correctly.
.
Dr. Chen, Management Information Systems (Web#2)
Appendix C - Color Reference Palette
W3Schools:
www.w3schools.com/tags/ref_colorpicker.asp
www.w3schools.com/tags/ref_colorpicker.asp
CSS Portal:
www.cssportal.com/css3-color-names/
www.cssportal.com/css3-color-names/
HTML Color Codes:
http://html-color-codes.info/
http://html-color-codes.info/
Dr. Chen, Management Information Systems (Web#2)
Color Picker:
www.colorpicker.com/
www.colorpicker.com/
HTML Color Names:
http://html-color-codes.info/colornames/
http://html-color-codes.info/colornames/