© Anthony J. Nowakowski, Ph.D.. Web Page Development

Preview:

Citation preview

© Anthony J. Nowakowski, Ph.D..

Web PageDevelopment

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

HTMLHyperText Markup Language

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

How HTMLWorks…

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

That is, it does not contain all three of the primary constructs of programming languages:

HTML is a markup language, NOT a programming language.

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Programming ConstructsSequence

Repetition

Selection

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

HTMLFundament

als

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

1. "8.3" notation

2. alphanumeric characters

3. lowercase

4. no embedded spaces

Before we begin, YOU WILL name all your files using the following:

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>

Note:

Not all tags contain a closing tag. Those that do, are called "containers".

Note:

Not all tags contain a closing tag. Those that do, are called "containers".

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

<html>

</html>

<head> <title>This is a title</title></head>

<body> This is part of the body</body>

<head> . . .</head>

<body> . . .</body>

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

There are several ways tocreate an HTML file.

I nstructionalInstructionalTechnoligiesTechnoligies

EDC 601EDC 601

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

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Text

Notepad or Wordpad

vi, pico, or emacs (Unix editors)

any “text” editor

even Word

Editors

We will beginby using Notepad

We will beginby using Notepad

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

HTML (wysiwyg)

Netscape Composer

Microsoft FrontPage

Macromedia Dreamweaver

Editors

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Header tags <Hi> ... </Hi>where: i=1,2,3,4,5,6

Paragraph tags <p> ... </p>

Not requiredNot required

Some format tags:

Line Break tag <br>

Although the paragraph and line break tags appear to be the same, <p> produces a cr-lf-lf

whereas <br> produces a cr-lf.

Although the paragraph and line break tags appear to be the same, <p> produces a cr-lf-lf

whereas <br> produces a cr-lf.

List tags <ul>...</ul> or

<ol>...</ol>No closing tag!No closing tag!& the <li> … </li>

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Blockquote tags

<blockquote> ... </blockquote>

Although lists without <li> tags can be used to indent, other tags designed specifically for indentation are the:

However, these tags indent from both the left and right margins, and leave a blank line

before and after the block quotation.

However, these tags indent from both the left and right margins, and leave a blank line

before and after the block quotation.

Some format tags:

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Bold tags <b> ... </b>

Italics tags <i> ... </i>

Underscore tags <u> ... </u>

Center tags <center>...</center>

More format tags:

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Horizontal Line tag <hr>

Anchor tags <a href="URL"> LINK DESCRIPTION </a>

Image tags <img src="IMAGE FILENAME ">

Preformatted tags <pre> … </pre>

Comment tags <!-- … -->

Presently, only .GIF and .JPG graphics files are supported. There is a

new format, PNG that is gaining popularity, but it does not work on

older browsers.

Presently, only .GIF and .JPG graphics files are supported. There is a

new format, PNG that is gaining popularity, but it does not work on

older browsers.

Some “fluff” tags:

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

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

Without these, Web pages load slower. Therefore, you will ALWAYS specify the

height and width of your graphics!

Without these, Web pages load slower. Therefore, you will ALWAYS specify the

height and width of your graphics!

<hr width="70%">

<P ALIGN="JUSTIFY">some text</P>

<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

HTML (wysiwyg)

Netscape Composer

Microsoft FrontPage

Macromedia Dreamweaver

Editors

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Tables

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Microsoft Office

Word

Excel

Access

PowerPoint

Converters

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Word:

You can use Office97/98’s converters to "Save as HTML"and create Web "documents".

www.doc www.htm

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

NOTE: Word can also be used as a wanna- HTML editor!!!NOTE: Word can also be used

as a wanna- HTML editor!!!

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Excel:Excel:

xxx.xls C:\My Documents\MyHTML.htm

You can use Office97/98’s converters to "Save as HTML"and create Web "documents".

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Access:

yyy.mdbWeb page for each

table, query, form,

and report selected

Web page for each

table, query, form,

and report selected

You can use Office97/98’s converters to “Export"

and create Web "documents".

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

One Web page for each printed page of the report.

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

PowerPoint:

zzz.pptsubdirectory: zzz

containing:

3x +15 files

subdirectory: zzz

containing:

3x +15 files

You can use Office97/98’s converters to "Save as HTML"and create Web "documents".

There is a seven step wizard to guide you through the process of

customizing and creating these 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

Word: www.doc www.mht

You can use Office2000/XP/2003’s converters to "Save as Web page"

and create Web "documents".

www.doc www.htm + www_files Folder

© 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 is slightly different and has three

Save As Web page options.

Word: www.doc www.mht www.doc www.htm + www_files Folder The default file type for Office2007 is now .docx, but you can still work with .doc files.

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

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

Excel: xxx.xls xxx.mht

You can use Office2000/XP/2003’s converters to "Save as Web page"

and create Web "documents".

xxx.xls xxx.htm + xxx_files Folder

© 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

© 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.htm + xxx_files Folder

xxx.xls xxx.mht

The default file type for Office2007 is now .xlsx, but you can still work with .xls files.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

Access:

yyy.mdbWeb page for each

table, query, form,

and report selected

Web page for each

table, query, form,

and report selected

You can use Office2000/XP/2003’s converters to “Export"

and create Web "documents".

The Web pages are identical to those already

shown for Access 97.

The Web pages are identical to those already

shown for Access 97.

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Access:

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!

The default file type for Office2007 is now .accdb, but you can still work with .mdb files.

The default file type for Office2007 is now .accdb, but you can still work with .mdb files.

yyy.mdb

© 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.mht zzz.ppt zzz.htm

+ zzz_files Folder

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

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.

The default file type for Office2007 is now .pptx, but you can still work with .ppt files.

The default file type for Office2007 is now .pptx, but you can still work with .ppt files.

PowerPoint:

zzz.ppt zzz.mht zzz.ppt zzz.htm

+ zzz_files Folder

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

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

text box

text window

check box

radio button

action button

menu

others ...

Form Objects

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Frames

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

1. Design frame layout

2. Determine frame attributes

3. Load frame contents

Frames

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Where can we gofrom 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 601Survey

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Server-side vs.

Client-side

Web Programming

© Anthony J. Nowakowski, Ph.D..

EDC 601 Instructional Technologies

Web “Languages”Markup

HTMLXMLDHTMLCSS

ScriptingJavaScriptVBScript

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

Recommended