HTML - Buffalo State College Faculty and Staff Web Server

Download Report

Transcript HTML - Buffalo State College Faculty and Staff Web Server 

Web Page
Development
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
HTML
HyperText Markup Language
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
How
HTML
Works…
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
HTML is a markup language,
NOT a programming language.
That is, it does not contain all
three of the primary constructs of
programming languages:
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Programming Constructs
Sequence
Selection
Repetition
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
HTML
Fundamentals
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Before we begin, YOU WILL name all
your files using the following:
1. "8.3" notation
2. alphanumeric characters
3. lowercase
4. no embedded spaces
and place them all in the same
subdirectory to be called c:\601
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Markup languages use “tags” to
indicate the beginning and end,
and in HTML they look like this:
<tag> . . . </tag>
or
<tag>
.
.
.
</tag>
© Anthony J. Nowakowski, Ph.D..
Note:
Not all tags contain
a closing tag.
Those that do, are
called "containers".
EDC 601 Instructional Technologies
<html>
<head>
..
.
<title>This
is a title</title>
</head>
<body>
..
. is part of the body
This
</body>
</html>
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
There are several ways to
create an HTML file.
EDC 601
Instructional
Technoligies
© Anthony J. Nowakowski, Ph.D..
<BASE HREF="http://www.buffalost
<!doctype html public "-//w3c//dtd ht
<html>
<head>
<meta http-equiv="Content-Type"
<meta name="GENERATOR" cont
<title>CIS 435 Programming for
</head>
<body bgcolor="#FFFFFF" backgrou
&nbsp;
<br>&nbsp;
<table COLS=2 WIDTH="100%" >
EDC 601 Instructional Technologies
Editors
Text
Notepad or Wordpad
vi, pico, or emacs (Unix editors)
any “text” editor
even Word
© Anthony J. Nowakowski, Ph.D..
We will begin
by using Notepad
EDC 601 Instructional Technologies
Editors
HTML (wysiwyg)
Netscape Composer
Microsoft FrontPage
Macromedia Dreamweaver
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Some format tags:
Header tags <Hi> ... </Hi>
where: i=1,2,3,4,5,6
Paragraph tags <p> ... </p>
Line Break tag <br>
List tags <ul>...</ul> orNot required
Although the paragraph and line break tags
& tag!
the
<li>
No produces
closing
appear to be the
same, <p>
a cr-lf-lf
<ol>...</ol>
whereas <br> produces a cr-lf.… </li>
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Some format tags:
Although lists without <li> tags can be used
to indent, other tags designed specifically
for indentation are the:
Blockquote tags
<blockquote> ... </blockquote>
However, these tags indent from both the left
and right margins, and leave a blank line
before and after the block quotation.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
More format tags:
Bold tags <b> ... </b>
Italics tags <i> ... </i>
Underscore tags <u> ... </u>
Center tags <center>...</center>
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Some “fluff” tags:
Horizontal Line tag <hr>
Anchor tags <a
href="URL">
LINK DESCRIPTION </a>
Presently,
onlysrc="IMAGE
.GIF and .JPG
Image
tags <img
FILENAME
graphics files are supported. There is a
new
format,
PNG
that
is
gaining
Preformatted tags <pre> … </pre>
popularity, but it does not work on
older<!-browsers.
Comment tags
… -->
© Anthony J. Nowakowski, Ph.D..
">
EDC 601 Instructional Technologies
Note:
As we will see, these and other tags can
have additional parameters or
attributes. e.g.
<img SRC="miata.jpg" height=330 width=445>
<hr width="70%">
Without these, Web pagestext</P>
load slower.
<P ALIGN="JUSTIFY">some
Therefore, you will ALWAYS specify the
height and width of your graphics!
<a href="memos.html“ TARGET="body">
Announcements</a>
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
On-line HTML tutorial sites:
www.w3schools.com/html/default.asp
www.cwru.edu/help/introHTML/toc.html
www.cwru.edu/help/interHTML/toc.html
www.willcam.com/cmat/html/crossref.html
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Editors
HTML (wysiwyg)
Netscape Composer
Microsoft FrontPage
Macromedia Dreamweaver
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Tables
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Converters
Microsoft Office
Word
Excel
Access
PowerPoint
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office97/98’s
converters to "Save as HTML"
and create Web "documents".
Word: www.doc
© Anthony J. Nowakowski, Ph.D..
www.htm
EDC 601 Instructional Technologies
NOTE: Word can also be used
as a wannaHTML editor!!!
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office97/98’s
converters to "Save as HTML"
and create Web "documents".
Excel:
xxx.xls
C:\My Documents\MyHTML.htm
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office97/98’s
converters to “Export"
and create Web "documents".
Access:
Web page for each
yyy.mdb
table, query, form,
and report selected
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
One Web page for each
printed page of the report.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office97/98’s
converters to "Save as HTML"
and create Web "documents".
PowerPoint:
subdirectory: zzz
zzz.ppt
containing:
3x +15 files
There is a seven step wizard to guide
you through the process of
customizing and creating these files.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
3 * 49 + 15 = 162
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office2000/XP/2003’s
converters to "Save as Web page"
and create Web "documents".
Word: www.doc
www.doc
© Anthony J. Nowakowski, Ph.D..
www.mht
www.htm
+
www_files Folder
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Using Office2007 to convert to a Web
page is slightly different and has three
Save As Web page options.
Word: www.doc
www.doc
www.mht
www.htm
+
www_files Folder
The default file type for Office2007 is now
.docx, but you can still work with .doc files.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
According to Microsoft, “This feature is
only recommended for experienced Web
authors who are concerned about the
tags that appear in their HTML files.”
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office2000/XP/2003’s
converters to "Save as Web page"
and create Web "documents".
Excel:
xxx.xls
xxx.xls
© Anthony J. Nowakowski, Ph.D..
xxx.mht
xxx.htm
+
xxx_files Folder
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Using Office2007 to convert to a
Web page has the same two Save As
Web page options.
Excel:
xxx.xls
xxx.xls
xxx.mht
xxx.htm
+
xxx_files Folder
The default file type for Office2007 is now
.xlsx, but you can still work with .xls files.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office2000/XP/2003’s
converters to “Export"
and create Web "documents".
Access:
Web page for each
yyy.mdb
table, query, form,
and report selected
The Web pages are
identical to those already
shown for Access 97.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Office2007 does NOT allow you to
create Web “documents ”. You can
“publish” them to a Microsoft
SharePoint Services site, which Buffalo
State does NOT have!
Access:
yyy.mdb
The default file type for Office2007 is now
.accdb, but you can still work with .mdb files.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You can use Office2000/XP/2003’s
converters to "Save as Web page"
and create Web "documents".
PowerPoint:
zzz.ppt
zzz.ppt
© Anthony J. Nowakowski, Ph.D..
zzz.mht
zzz.htm
+
zzz_files Folder
EDC 601 Instructional Technologies
You have several Web publishing options.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
TOC
Note: the original file zzz.ppt is 7,016 KB,
zzz.mht is a single 12,446 KB file, and zzz.htm
is a small file 3 KB that points to the
remaining files in the zzz_files folder, which
has 619 files and is 9,030 KB.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Using Office2007 to convert to a
Web page has the same two Save As
Web page options.
PowerPoint:
zzz.ppt
zzz.ppt
zzz.mht
zzz.htm
+
zzz_files Folder
The default file type for Office2007 is now
.pptx, but you can still work with .ppt files.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
You have several Web publishing options.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
TOC
Note: the size of the original .ppt file, .mht
file, and .htm file and folder is comparible to
the ones created by Office 2000/XP/2003.
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Additional
HTML
Features
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Forms
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Form Objects
text box
text window
check box
radio button
action button
menu
others ...
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Frames
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Frames
1. Design frame layout
2. Determine frame attributes
3. Load frame contents
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Where can we go
from here?
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Programming
for the Web
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Why do we need programming
for the Web???
EDC 601
Survey
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Web Programming
Server-side
vs.
Client-side
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Web “Languages”
Markup
HTML
XML
DHTML
CSS
Scripting
JavaScript
VBScript
Programming
Java
perl
Visual Basic
C/C++
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
Consider the following
example, which I have used
as an assignment in my
Programming for the
Internet Environment
course:
Assignment-9
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..
EDC 601 Instructional Technologies
© Anthony J. Nowakowski, Ph.D..