Web2_and_HTML_Introductionx - Gonzaga University Student

Transcript Web2_and_HTML_Introductionx - Gonzaga University Student

Web2 and WEB/HTML
Introduction
[Learning by Doing]
Dr. Jason C. H. Chen
Professor of MIS
School of Business Administration
Gonzaga University
Spokane, WA 99258
[email protected]
Dr. Chen, Management Information Systems (Web#2)
Instructions on Web and other assignments
8. When you complete the Web assignments you should follow the
instructions below:(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”).
What/How you should turn in: Upload Web#1 assignment to the
Blackboard (not via email). Make sure to enter the following
information in the “2. Assignment Materials” Box (Fail to provide
me with ALL information, you will lose major points)
Dr. Chen,
Make the URL linkable
Here is my Web#1 assignment.
http://barney.gonzaga.edu/~your_userID
<Your Full Name> at the end of the message line
a. Complete the online quiz on time and you are responsible for the
Internet connection. No make-up quiz unless it is system failure.
b. Always check your grades posted on the Bb and see me if there is
any questions.
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”
– Fully understand the codes
• html01thru html08
– Learn more from the html text book and complete four
additional assignments
– They will be saved different from what you saved for your
personal web page (WHY?)
• Study html01 (chapter 1) yourself and take the quiz
Dr. Chen, Management Information Systems (Web#2)
Web Repository
• What is your Web Repository?
• public_html (using FileZilla to login)
– along with your email account
• Remember that case is sensitive for all file names and
folder names in ALL web page assignments. For
example, index.html is different from Index.HTML
• Also,
href=“css/styles-myweb.css”> is different from
href=“CSS/styles-myweb.css”>
4
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)
http://barney.gonzaga.edu/~chenta
Dr. Chen, Management Information Systems (Web#2)
The following page is for your web2 assignment
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)
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)
Marking Elements with Tags
• The core building block of HTML is the tag, which marks
each element in a document
• Tags can be two-sided or one-sided
• A two-sided tag is a tag that contains some document content.
General syntax for a two-sided tag:
<element>content</element>
in which <element> is the opening tag
</element> is the closing tag
e.g., <html> … </html>
• A one-sided tag contains no content; general syntax for a
one-sided tag:
<element /> e.g., <br />
• HTML allows you to enter element names (not file names or
folder names) in either uppercase or lowercase letters
Dr. Chen, Management Information Systems (Web#2)
Marking Elements with Tags
• Elements that employ one-sided tags are called
empty elements since they contain no content. An
example is a line break <br/>
• A third type of tag is the comment tag, which you
can use to add notes to your HTML code

• Comments are useful in documenting your HTML
code for yourself and others
• Comment in css file
/* comment */
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)
Figure 1. index.html (web1)
<!DOCTYPE html>

<html lang="en">
will study in ch4
<head>
(cascading style sheet)
<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 (web1 - cont.)
/*note: <pre> preserve the original format */
<main>
<pre> <b>
*******************************************************
© (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>
replaced with your info.
</main>
one word
<footer>
<p> For comments about my web site, please e-mail me at:
<a href="MAILTO:[email protected]"> [email protected] </a> <br>
Phone: <a href="tel:+5093133421">509-313-3421</a> </p> 

<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)
Adding Links to a Target
at the Top of the Page
• Type <header id="top"> as the tag that will create
a target at the top of the Web page named top
• Type <a href="#top">Top</a>  
look for
jump to
jump to
when click
<div id="content">
…
look for
when click
…
<a href="#content">Lessons</a>  
Dr. Chen, Management Information Systems (Web#2)
Four Basic HTML5 Semantic Elements
div id=“container”
header
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles-myweb.css">
<title>Home Page for Jason Chen</title>
<meta charset="utf-8">
</head>
<body>
nav
main
footer
Dr. Chen, Management Information Systems (Web#2)
[Basic Required HTML elements]
HTML provides new tools for
improving/structuring
webpage design, including
semantic elements for specific
types of content
HTML5 Components (p.29)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles-myweb.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)
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.
Cascading Style Sheets
• Cascading Style Sheets (CSS) allows you to
specify the style for an element within a
single Web page or throughout an entire Web
site
• We will learn more about CSS in Chapter 4
Dr. Chen, Management Information Systems (Web#2)
Figure 2. updated index.html (for Web2)
<!DOCTYPE html>

<html lang="en">
will study in ch4
<head>
(cascading style sheet)
<link rel="stylesheet" href="css/styles-myweb.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>
Dr. Chen, Management Information Systems (Web#2)
<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>
new (images

folder)
<div class="bookmark">
<img src="images/book.gif" alt="Book logo" style="width:118px; height:80px;" >
</div>
<br> <br> <br> <br> <br>
/*note: <pre> preserve the original format */
<main>
<pre> <b>
*******************************************************
© (your name here)
...
(you add any appropriate information here)
...
*******************************************************
</b> </pre>
<br> <br> <br> <br>
Dr. Chen, Management Information Systems (Web#2)
<nav>
Go to <a id of
<div class="gotop">
“top”
<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:[email protected]"> [email protected]
<img src="images/mailbox.gif" height="36" width="36" alt="Mailbox logo"/></a>
<br>
Phone: <a href="tel:+5093133421">509-313-3421</a> </p> 
< p class=“blink”>
This is

required for all
<i>This document was last updated on: <script type="text/javascript">
HTML HW
document.write(document.lastModified);
</script>
by Jason Chen </i>
Blinking
</p>
(must work with css file)
</footer>
<hr>
Dr. Chen, Management Information Systems (Web#2)
<nav>
<div class="nav_bottom">
<h5>
<a href="index.html">HomePage|</a>
<img src="images/events.gif" height="30" width="30" alt="Events logo" />
<a href="myrsume.docx">Resume|</a>
<img src="images/worm.gif" height="30" width="30" alt="Worm logo" />
<a href="http://google.com">Google|</a>
<img src="images/gcan.gif" height="30" width="30" alt="Goan logo" />
<a href="http://www.gonzaga.edu">Gonzaga</a>
</h5>
</div>
should be there
</nav>
<hr>
</div>
</body>
</html>
Dr. Chen, Management Information Systems (Web#2)
Figure 4. css file: styles-myweb.html (partially)
/* Style for body specifies a background color */
body { background-image: url("../images/wall.gif");
}
/* Style to create a fluid image */
img { max-width: 100%
}
/* Style for the header specifies top margin, background color, rounded corners, and center
align content */
header {
text-align: center;
text-decoration: none; /* options: none, line-through, overline, underline*/
}
/* the followings are needed for blink */
.blink {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: blink;
}
@keyframes blink {
…
)
Dr. Chen, Management Information Systems (Web#2)
Web 2 starts here …
• You not only have to complete the web2
assignment but also understand the
what/how on the html codes.
Dr. Chen, Management Information Systems (Web#2)
Steps before downloading web resources
• Create an ‘images’ folder and copy image files (see Figure 1 for
your web structure) from Bb. The six image files are available for
you to download from the Blackboard (available under
Assignments & Cases Web Design Assignments and
Resources  data files for … web2) and you should
copy/download to your web repository.
• Create a folder of images under bmis235-0x-public_html (for
web2)
Dr. Chen, Management Information Systems (Web#2)
Download all docs from Bb
• See page 1 on the Web2 HW
• Download the following data files:
a) styles-myweb.css
and save it in the bmis235-0x-public_html /css/ folder
b) seven (7) image files
and save them in the bmis235-0x-public_html/images/
folder
from Bb (available under Assignments & Cases  Web Design
Assignments and Resources  data files for …  web1) to your
PC.
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++
– 2) Update index.html with ALL changes in Web2
– 3) Use your intelligence to find their differences
Dr. Chen, Management Information Systems (Web#2)
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
Create an ‘images’ folder and copy image files (see Figure 1 for your web
structure) from Bb. The six image files are available for you to download
from the Blackboard (available under Assignments & Cases Web
Design Assignments and Resources  data files for … web2) and you
should copy/download to your web repository.
Follow the instruction below to complete the task:
a) create a new folder of images for saving all images (name it images - lower
case) under bmis235-0x-public_html on the PC.
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 on the PC, you should create it before you
save the image file
ii) repeat steps b) c) d) for the remaining image (total of 7) files.
Upload all image files (including the folder name) to the web folder of
public_html/css/
1.
Dr. Chen, Management Information Systems (Web#2)
Figure 1. Your Personal Web Page Design Structure (web1)
public_html [web folder]
index.html
myself.pptx
myresume.docx
Dr. Chen, Management Information Systems (Web#2)
css [css folder]
styles-web1.css
images [images folder]
Figure 1. Your Personal Web Page Design Structure (web2)
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
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 and save it on
the PC in the folder of bmis235-0x-public_html/css/ then upload it to
your web folder public_html/css/. 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/~chenta2 or,
http://barney.gonzaga.edu/~your_userID
Dr. Chen, Management Information Systems (Web#2)
available under Assignments & Cases  Web Design Assignments
and Resources web2
Dr. Chen, Management Information Systems (Web#2)
Markup Validation Service
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)
Activate W3C Markup Validation Service by
entering
https://validator.w3.org
• https://validator.w3.org
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-03 (or BMIS235-04/05)
so that your grade will be posted correctly.
.
Dr. Chen, Management Information Systems (Web#2)
• What happen if
you are
working your
web
assignments
off campus?
FTP (FileZilla)
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 and/or other folders (e.g., css and images)
Dr. Chen, Management Information Systems (Web#2)
FileZilla Client tutorials:
http://www.youtube.com/watch?v=Wtqq1Mn
1ltA (15:39)
Dr. Chen, Management Information Systems (Web#2)
Problem on Displaying your web page
(Forbidden Message)
• If you receive
‘Forbidden’
message, please do
the following steps:
• Step 1. Connect your
account using
FileZilla
• Step 2. Right click on
public_html
• Step 3. Select ‘File
Attribute on the
pop-up menu
Dr. Chen, Management Information Systems (Web#2)
right click
select
Problem on Displaying your web page
• Step 4. Mark
‘Execute’ on
Group and
Public
permissions
mark
Dr. Chen, Management Information Systems (Web#2)
• END OF WEB2
Dr. Chen, Management Information Systems (Web#2)
Figure 1. Your Personal Web Page Design Structure
public_html [web folder]
index.html
myself.pptx
myresume.docx
Dr. Chen, Management Information Systems (Web#2)
css [css folder]
styles-web1.css
styles-myweb.css
images [images folder]
gook.gif,
events.gif
gcan.gif, wall.gif
mailbox.gif,
worm.gif
Collaboration HW and Case
• The following HWs are due on Tuesday (sec.05) / Wednesday
(sec. 03 & 04):
• Case 2 (Questions: 1 thru 5) p.71-73
• Group#1: email your pptx file by the deadline and turn in a
hardcopy in the class.
• Other students: read and prepare for case discussion
• Please note that for all case studies you should study the
company’s URL for any up-to-date information
– “All students should read and prepare for class discussion
for assigned UYK (Use Your Knowledge) questions. Failed
to do it, there will be 10 points off each time. toward your
final course grade. “
Dr. Chen, Management Information Systems (Web#2)
Case#2 (chapter 2)
• The following HWs are due on Wednesday, 1/27 (sec 2) and
Thursday, 1/28 (sec.03 & 05):
• Case 2 (Questions: 9,10,11,13,14) p.74-79
• Group#1: upload your pptx file by the deadline and turn in a
hardcopy (two slides per page) in the class.
• Other students: read and prepare for case discussion. Write
your answers and print on the hardcopy.
• Please note that for all case studies you should study the
company’s URL for any up-to-date information
– “All students should read and prepare for class discussion
for assigned UYK (Use Your Knowledge) questions. Failed
to do it, there will be 10 points off each time. toward your
final course grade. “
Dr. Chen, Management Information Systems (Web#2)