ch02_HTMLx - Gonzaga University Student Web Server
Download
Report
Transcript ch02_HTMLx - Gonzaga University Student Web Server
Chapter 2:
Building a Webpage Template with
HTML5
[Learning by Doing]
Jason C. H. Chen, Ph.D.
Professor of MIS
School of Business Administration
Gonzaga University
Spokane, WA 99258
[email protected]
Dr. Chen, Management Information Systems - HTML
Objectives
• Explain how to manage website files
• Describe and use HTML5 semantic
elements
• Determine the elements to use when setting
the structure of a webpage
• Design and build a semantic wireframe
• Create a webpage template
• Insert comments in an HTML document
Dr. Chen, Management Information Systems - HTML
2
Objectives (continued)
• Add static content to a webpage template
• Insert symbol codes and other character
entities
• Describe the benefits of validating web
documents
• Validate an HTML template
• Create a home page from an HTML
template
• Add unique content to a webpage
Dr. Chen, Management Information Systems - HTML
3
Web Design Directory Structure for html02
public_html [web folder]
index.html
css [folder] images [images folder]
myself.pptx
myresume.docx
styles-web1.css
book.gif, events.gif
styles-myweb.css gcan.gif, wall.gif
mailbox.gif,
worm.gif
html02
[folder for HTML#2]
exercise
(new folder)
fitness02.html
What’s new here?
How do you create it?
Dr. Chen, Management Information Systems - HTML
hw
(new folder)
ski02.html
For html02
Web Page Assignments in HTML Text
• Starting from html02 it is required that all of you
should complete the following two tasks for each
chapter:
• 1. example described in the text book, it is referred
to as: ‘exercise’
• 2. hw assigned and you need to upload to the Bb for
grading, it is referred as ‘hw’
– Assignments may be assigned from one of the following
that is illustrated at the end of each chapter:
– a) Extend Your Knowledge (Extend YK) or
– b) Lab
Dr. Chen, Management Information Systems - HTML
5
Type the following URLs
For web2
http://barney.gonzaga.edu/~chenta2
http://barney.gonzaga.edu/~chenta2
What’s the
difference on
those URLs?
For exercise
http://barney.gonzaga.edu/~chenta/html02/exercise/fitness02.html
http://barney.gonzaga.edu/~chenta/html02/exercise/fitness02.html
For hw
http://barney.gonzaga.edu/~chenta/html02/hw/ski02.html
http://barney.gonzaga.edu/~chenta/html02/hw/ski02.html
Dr. Chen, Management Information Systems - HTML
6
fitness02.html
(shall be linkable in the later chapters)
Dr. Chen, Management Information Systems - HTML
ski02.html
(shall be linkable in the later chapters)
Dr. Chen, Management Information Systems - HTML
Designing a Website
• Designing a website includes the following:
–
–
–
–
–
–
Planning
Articulating the website’s purpose
Identifying the target audience
Creating a site map and wireframe (storyboard)
Selecting graphics and colors to use in the site
Determining whether to design for an optimal
viewing experience across a range of devices
Dr. Chen, Management Information Systems - HTML
9
Site Map
• Site map indicates how the pages in a
website relate to each other
• For example, the webpages of the Forward
Fitness Club website will include the
following content:
– Home page: Introduces the fitness center and its
mission statement
– About Us page: Showcases the facility’s
equipment and services
Dr. Chen, Management Information Systems - HTML
10
Site Map (continued 1)
– Classes page: Includes a schedule of available
group training and fitness classes
– Nutrition page: Provides nutrition tips and
simple meal plans
– Contact Us page: Provides a phone number,
email address, physical address, and form for
potential clients to request additional
information about the fitness center’s services
Dr. Chen, Management Information Systems - HTML
11
Site Map (continued 2)
Dr. Chen, Management Information Systems - HTML
12
Dr. Chen, Management Information Systems - HTML
Wireframe (Storyboard)
• Wireframe depicts the layout of a webpage,
including its major content areas
Dr. Chen, Management Information Systems - HTML
14
File Management
• Websites use several types of files,
including HTML files, image files, media
such as audio and video files, and CSS files
• Each site must follow a systematic method
to organize its files
• The main folder, also called the root folder,
contains all files and other folders for the
website
Dr. Chen, Management Information Systems - HTML
15
File Management (continued)
Dr. Chen, Management Information Systems - HTML
16
Web Design Structure (web2)
public_html [web folder]
index.html
myself.pptx
myresume.docx
Dr. Chen, Management Information Systems - HTML
css [css folder]
styles-web1.css
styles-myweb.css
images [images folder]
gook.gif,
events.gif
gcan.gif, wall.gif
mailbox.gif,
worm.gif
Web Design Directory Structure for html02
public_html [web folder]
index.html
css [folder] images [images folder]
myself.pptx
myresume.docx
styles-web1.css
book.gif, events.gif
styles-myweb.css gcan.gif, wall.gif
mailbox.gif,
worm.gif
html02
[folder for HTML#2]
exercise
(new folder)
fitness02.html
What’s new here?
How do you create it?
Dr. Chen, Management Information Systems - HTML
hw
(new folder)
ski02.html
For html02
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 - HTML
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
All other *.jpg
image files
ski.jpg
19
Four Basic HTML5 Semantic Elements
div id=“container”
header
nav
main
footer
Dr. Chen, Management Information Systems - HTML
HTML provides new tools for
improving/structuring
webpage design, including
semantic elements for specific
types of content
Using HTML5 Semantic Elements
Dr. Chen, Management Information Systems - HTML
21
The _____ tags contain the primary content of a
webpage.
a. <head> and </head>
b. <page> and </page>
c. <nav> and </nav>
d. <main> and </main>
D
ANSWER: _______
Dr. Chen, Management Information Systems - HTML
Four basic HTML5 Semantic Elements and Ten basic structure of the Source
Code in HTML5
Dr. Chen, Management Information Systems - HTML
23
Q: A _____ element contains hyperlinks to
other webpages within a website.
a) head
b) title
c) nav
d) footer
c
Answer: _______
Dr. Chen, Management Information Systems - HTML
<!DOCTYPE html>
<!-- Enter your name
Enter the current date filename: fitness02.html -->
<html lang="en“>
<head>
<meta charset="utf-8">
<title> … </title>
</head>
<body>
<!-- use the header area for the website name or logo -->
<header> … </header>
<!-- use the nav area to add hyperlinks to other pages within the website -->
<nav> … </nav>
<!-- use the main area to add the main content of the webpage -->
<main> … </main>
or <div id="content" .. </div>)
<!-- use the footer area to add webpage footer content -->
<footer> … </footer>
<!-- the following is required for all assignments -->
<br/> <br />
<i> This document was last updated on:<script type="text/javascript">
document.write(document.lastModified);</script>
by Jason Chen (replaced by Your Name)</i>
</body>
</html>
Dr. Chen, Management Information Systems - HTML
Using Symbol Entities
• Symbols can be added to an HTML webpage
name or entity
by typing its HTML entity _____
_________
number
• Inserting an HTML character entity in the
code displays a reserved HTML character on
the webpage
• Entity name is an abbreviated name
• Entity number is a combination of the
pound sign (#) and a numeric code
Dr. Chen, Management Information Systems - HTML
26
Using Symbol Entities (continued)
Also see Table E-1: Commonly Used Characters (APP 37)
http://websemantics.co.uk/resources/common_symbols/
http://websemantics.co.uk/resources/common_symbols/
Dr. Chen, Management Information Systems - HTML
27
The entity number for the copyright symbol is
_____.
a.
b.
c.
d.
&169#;
169#&;
©
#169&;
C
ANSWER: _______
Dr. Chen, Management Information Systems - HTML
Validating HTML Documents
(pp.67-69)
• After the creation of an HTML file, the document
is validated to verify the validity of the HTML
code
• A validator checks for errors, indicates where
they are located, and suggests corrections
• If the validator detects an error in an HTML code,
it displays a warning in the header bar
• A Result line below the header bar shows the
number of errors in the document
Dr. Chen, Management Information Systems - HTML
29
To Validate Webpages
• Perform the following steps to validate an HTML
document:
– Open a browser and type
http://validator.w3.org/ in the address bar to
display the W3C validator page
– Tap or click the Validate by File Upload tab to display the
Validate by File Upload tab information
– Tap or click the Check button to send the document
through the validator and display the validation results
page.
– (see pp.67-69, 123, 241, 294; and a validating HTML code
document on the Bb)
Dr. Chen, Management Information Systems - HTML
30
Dr. Chen, Management Information Systems - HTML
Your turn … ‘exercise’
(Create a Webpage Template
Document)
Dr. Chen, Management Information Systems - HTML
32
Steps before downloading web resources
• Create a folder of html02 under mis235-0x-public_html on
c: (or d: ) drive
• Create a folder of exercise under html02
• Create a folder of hw under html02
• When all done upload them to your web folder (public_html)
Dr. Chen, Management Information Systems - HTML
Your turn … ‘exercise’
(Create a Webpage Template Document)
0. File name to be changed: index.html (p.70) should be changed to
fitness02.html (why?)
1. Create the following new folders:
a folder of html02 under public_html directory
Therefore, the Web Design Directory Structure for html02 shall be:
public_html/html02/
Further create two folders under html02: exercise and hw. Note that:
a) exercise folder will be used for text book exercise (e.g.,
public_html/html02/exercise /fitness02.html and others)
b) hw folder will be used for your homework assignment (e.g.,
public_html/html02/hw/ski02.html and others)
your Web Page directory structure should be organized as in Figure 1
Dr. Chen, Management Information Systems - HTML
34
html02-exercise (cont.)
2. Download two (2) data files from Bb for html02:
fitness02.html (for chapter exercise) and ski02.html (for
chapter hw) to your PC (available under Assignments
Web Assignments and Resources) and save them in
public_html/html02/exercise/ and
public_html/html02/hw/ folders respectively.
3a. Open fitness02.html using Notepad++
3b. Follow all steps on pp. 59-63 and 70-72 to create
and check the webpage. (You should be PATIENT to
learn)
4. Modify the fitness02.html as shown in Figure 3 (and
read the text book). Upload fitness02.html to
public_html/html02/exercise/
35
Dr. Chen, Management Information Systems - HTML
Web Design Directory Structure for html02
public_html [web folder]
index.html
css [folder] images [images folder]
myself.pptx
myresume.docx
styles-web1.css
book.gif, events.gif
styles-myweb.css gcan.gif, wall.gif
mailbox.gif,
worm.gif
html02
[folder for HTML#2]
exercise
(new folder)
fitness02.html
What’s new here?
How do you create it?
Dr. Chen, Management Information Systems - HTML
hw
(new folder)
ski02.html
For html02
<!DOCTYPE html>
<!-- Enter your name
Enter the current date filename: fitness02.html -->
<html lang="en“>
<head>
<meta charset="utf-8">
<title> … </title>
</head>
<body>
<!-- use the header area for the website name or logo -->
<header> … </header>
<!-- use the nav area to add hyperlinks to other pages within the website -->
<nav> … </nav>
<!-- use the main area to add the main content of the webpage -->
<main> … </main>
or <div id="content" .. </div>)
<!-- use the footer area to add webpage footer content -->
<footer> … </footer>
<!-- the following is required for all assignments -->
<br/> <br />
<i> This document was last updated on:<script type="text/javascript">
document.write(document.lastModified);</script>
by Jason Chen (replaced by Your Name)</i>
</body>
</html>
Dr. Chen, Management Information Systems - HTML
Add Content to the Webpage
• Follow all steps on pp. 63-66 to create a webpage
template
• Name it as: fitness02.html (not index.html – why?)
• The webpage is displayed as follows:
Dr. Chen, Management Information Systems - HTML
38
<!DOCTYPE html>
<!-- BMIS235-02: Jason Chen, Row: 1
File name: fitness02.html (complete version) 2-1-2017 -->
<html lang="en">
<head>
<title>Forward Fitness Club</title>
<meta charset="utf-8">
</head>
<body>
<!-- Use the header area for the website name or logo -->
<header>
Forward Fitness Club
</header>
<br>
Dr. Chen, Management Information Systems - HTML
39
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
Home
About Us
Classes
Nutrition
Contact Us
</nav>
<!-- Use the main area to add the main content of the webpage -->
<main>
<p>Welcome to Forward Fitness Club. Our mission is to
help our clients meet their fitness and nutrition goals.</p>
… (to be completed)
…
</main>
Dr. Chen, Management Information Systems - HTML
40
<!-- Use the footer area to add webpage footer content -->
<footer>
© Copyright 2017. All Rights Reserved.<br>
[email protected]
</footer>
<!-- the following is required for all assignments -->
<br/> <br />
<i> This document was last updated on:
<script type="text/javascript"> document.write(document.lastModified);
</script>
This is
by Jason Chen (replaced by Your Name)
required for
all HTML
</i>
HWs
</body>
</html>
Dr. Chen, Management Information Systems - HTML
41
html02-exercise (cont.)
• 5. When modification is done, test fitness02.html on
local drive and then copy it (upload) to your H: drive
(your url). Further, test it on a browser by entering your
URL: (the exercise is not required to upload to the Bb)
(http://barney.gonzaga.edu/~your_userID/html02/exerci
se/fitness02.html) on a Web Browser.
• You also can check the result of your program on the
following URL
http://barney.gonzaga.edu/~chenta/html02/exercise/fitne
ss02.html
• When you completed exercise (fitness02.html), repeat
steps 4 and 5 for hw (ski02.html)
Dr. Chen, Management Information Systems - HTML
42
Exercise practice
• Create fitness02.html
• A Complete Version of fitness02.html for
‘exercise’ is available in Figure 3
Dr. Chen, Management Information Systems - HTML
43
Figure 6: 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 - HTML
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
All other *.jpg
image files
ski.jpg
44
Part II
• html02-hw (ski02.html)
Dr. Chen, Management Information Systems - HTML
45
What you should do for html02
ski02.html) (Extend YK: pp. 75-76)
0. File name to be changed: index.html (p.70) should be changed to
fitness02.html (why?)
DONE
1. Create the following new folders:
a folder of html02 under public_html directory
Therefore, the Web Design Directory Structure for html02 shall be:
public_html/html02/
Further create two folders under html02: exercise and hw. Note that:
a) exercise folder will be used for text book exercise (e.g.,
public_html/html02/exercise /fitness02.html and others)
b) hw folder will be used for your homework assignment (e.g.,
public_html/html02/hw/ski02.html and others)
your Web Page directory structure should be organized as in Figure 1
Dr. Chen, Management Information Systems - HTML
46
Web Design Directory Structure for html02
public_html [web folder]
index.html
css [folder] images [images folder]
myself.pptx
myresume.docx
styles-web1.css
book.gif, events.gif
styles-myweb.css gcan.gif, wall.gif
mailbox.gif,
worm.gif
html02
[folder for HTML#2]
exercise
(new folder)
fitness02.html
hw
(new folder)
ski02.html
For html02
Dr. Chen, Management Information Systems - HTML
html02-hw (cont.)
DONE
2. Download two (2) data files from Bb for html02:
fitness02.html (for chapter exercise) and ski02.html
(for chapter hw) to your PC (available under
Assignments Web Assignments and Resources)
3. Open the ski02.html. A sample template of
ski02.html is shown in Figure 4.
…
6. Modify the ski02.html with instructions listed on
page 75-76 (be patient and use your intelligence).
Dr. Chen, Management Information Systems - HTML
48
<!DOCTYPE html
<!-- **********************************************************************
Author: Jason Chen; File name: ski02.html Extend YK; p. 75 (Fig. 2-34)
Modify and complete all
Date: 1/25/2017
BMIS235-01
missing HTML statements
ROW: 1
based on Fig. 2-34
********************************************************************-->
<html lang=“en”>
<head>
<title> Snow Fever Ski and Board School (by Jason Chen)
<meta charset="utf-8"> </title>
</head>
<body>
...
<i> This document was last updated on:
<script type="text/javascript"> document.write(document.lastModified);
</script> by (Your Name here)
</i>...
...
</body> </html>
Dr. Chen, Management Information Systems - HTML
<!DOCTYPE html>
<!-- ******************************************************************
Author: Jason Chen;
File name: ski02.html (Template file)
Open this file and further revise for your web assignment and then save
into an appropriate file name such as web1.html (note: html not text)
Date: 1/25/2017
BMIS235-01
ROW: 1
This portion shows COMMENTS
*************************************************************** -->
<html lang=“en”>
<head>
<meta charset="utf-8">
<title>Snow Fever</title>
</head>
Header for a section
<body>
or page (How?)
<div id="header">
(see next slide for
detailed instruction)
</div>
(HTML5)
Dr. Chen, Management Information Systems - HTML
<head>
<meta charset="utf-8">
<title>Snow Fever</title>
</head>
<body>
Header for
a section or
page
(HTML5)
<div id="header">
</div>
<div id=“name”> .. </div>
<header>
<h1>Snow Fever Ski … </h1>
<h2>Let it snow, let … </h2>
</header>
<div id="navigation">
main:
specifies the
main
content area
of the page
(HTML5)
Q1(b) on page 75:
How to replace the
<nav> … </nav>
</div>
<div id=“main">
</div>
<div id="footer">
</div>
Dr. Chen, Management Information Systems - HTML
How about id= “main”?
<main>
<p>… </p>
…
<p> … </p>
</main>
<footer> … </footer>
Follow step 1 on p.75 (HTML5 text):
Modify code in ski02.html to update it to semantic HTML5 as show in Figure
below (Fig 2-34):
Dr. Chen, Management Information Systems - HTML
Paragraph, automatically inserts a blank line between text
<main>
<p>Our ski and snowboard lessons will be starting soon.
</p>
<p>We provide group classes and private lessons.</p>
<p>Ski Instructor: Kent Hoiberg<br>
main:
specifies the
1001 West Main Street<br>
main
Breckenridge, Colorado 80425
content area
of the page
</p>
(HTML5)
<p>Phone: 1-800-555-4SKI<br>
E-mail: [email protected]
</p>
</main>
Dr. Chen, Management Information Systems - HTML
<!-- the following is required for all assignments -->
<br/> <br />
<i> This document was last updated on:
<script type="text/javascript">
document.write(document.lastModified);
</script> by Jason Chen (replaced by your name)
</i>
</body>
</html>
Dr. Chen, Management Information Systems - HTML
This is required
for all HTML
HWs
A Sample Web Page for ski02.html
Required for all
HTML HWs
Dr. Chen, Management Information Systems - HTML
html02-hw (cont.)
6. When done, test ski02.html by entering your URL:
• (http://barney.gonzaga.edu/~your_userID/html02/hw/ski
02.html) on the Web Browser. You also can check the
result of your program on the following URL
http://barney.gonzaga.edu/~chenta/html02/hw/ski02.ht
ml
7. A sample Web Page (ski02.html) is shown in Figure 3
(also on p.75 – Figure 2-34 of the text)
8. It is required to “Validate” and “View” your HTML
code and debug/correct the code before you submit the
assignment (see HTML pp.67-69, 123, 241, 294 or
validating document on the Bb for details)
Dr. Chen, Management Information Systems - HTML
56
9. What/How you should turn in: Fail to provide me with ALL
information, you will lose major points
UPLOAD HTML#2 (ski02.html) 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. Enter the following information in the “2. Assignment
Submission” window:
Make the URL linkable
Dr. Chen,
Here is my HTML#2 (ski02.html) assignment.
http://barney.gonzaga.edu/~your_userID/html02/hw/ski02.html
<Your Full Name> bmis235-03 (or bmis235-04 or bmis235-05)
so that I can record/grade your homework directly on the Bb.
Dr. Chen, Management Information Systems - HTML
57
HTML5 & CSS3
8th Edition
Chapter 2 Complete
Dr. Chen, Management Information Systems - HTML