Click anywhere to start

jellytrickInternet and Web Development

Nov 10, 2013 (3 years and 9 months ago)

68 views

Click anywhere to start

Introduction to Web Pages



Supplement to EDUC 211

Educational Technology Portfolio I

http://www.unca.edu/education/educ211

OBJECTIVE

Introduce to the
beginning

web page author
web terms and concepts.




INTRODUCTION TO

WEB PAGES OUTLINE


Goals of a web page.


Define web terms.


Concepts


Web tools (Microsoft FrontPage and others).


Suggestions about web sites.


GOALS OF A WEB PAGE

Clearly

communicate intended/appropriate
information to the target audience.


(The target audience can be any combination
of


parents, visitors, colleagues and students.)


Provide effective access to desired resources.


(Effective student access to resources can
effectively expand content contact time and
variety, both inside and outside the classroom.)

DEFINITIONS


Web Page





Web Site



Home Page





URL



Hyperlink


HTTP



HTML



FrontPage



Browser



index.htm



Is a text file.





Contains a combination of key
-
words or codes and
user defined material. (For example text, locations
for images and/or other web pages.)





Is structured in format.

(In accordance to HTML requirements.)

Web Page

Web Site

Grouping of web pages in logical collection.

Home Page

A web page that is typically the location of
the first page in a series of related pages or
web site.


URL

U
niform
R
esource
L
ocator
(Formerly:
U
niversal
R
esource
L
ocator)


is a standardized unique address scheme for
web pages and content on the World Wide
Web.


Uniform

---------------

Hyperlink

Special areas on a web page when clicked
takes you to another URL. Referred to as a
link.

HTTP

H
yper
T
ext
T
ransfer
P
rotocol


Protocol used to communicate requests and
information between a browser and web page
server.

Other Protocols



file://
-

Reading HTML files from local hard drive


ftp://
-

F
ile
T
ransfer
P
rotocol
-

Download files from a host server


news://
-

Usenet protocol for reading news groups


gopher://
-

An information system designed for Unix computers


telnet://
-

Telnet is a protocol for interactive sessions

HTML

H
yper
T
ext
M
arkup
L
anguage


The language or code that the browser uses to
format the text and graphics on the screen.


FrontPage

Application that includes FrontPage Explorer
and FrontPage Editor. From
Getting Started
with Microsoft FrontPage 98
, “You use the
FrontPage
Explorer

to create the structure or
layout of your Web site” and “[you] use the
FrontPage
Editor

to create, design, and edit
World Wide Web pages.”


FrontPage



FrontPage Explorer



FrontPage Editor

Browser

A
client

program (software) that is used to
look at various kinds of Internet resources


index.htm

The most common name
*

of the first file that is looked for in a
web directory if you do not specify a file name.


If you go to the URL:

http://www.unca.edu/education/edtech/workshops/


The actual page that is interpreted by the browser in the above
example is the file “index.htm” or:

http://www.unca.edu/education/edtech/workshops/index.htm


Therefore, it is a good idea to make “index.htm” your home
page or splash page.

*
Other common names can include:

index.asp, index.html and default.htm

CONCEPTS


HTML


Browsers


Web pages


Web tools

HTML


When HTML is “working” it looks like:

HTML is actually text:

(The file below contains 12380 characters
excluding

spaces.

Approximately


of the actual file is visible below.)

HTML


H
yper
T
ext
M
arkup
L
anguage

HTML


H
yper
T
ext
M
arkup
L
anguage

The language that browsers use to

know how to display the contents of
a web page.

Examples of browsers

Netscape Internet Explorer

Firefox

Chrome
(Google)

Opera

Safari
(Apple)

1.
Is a text file.

2.
Contains a combination of key
-
words or
codes and user defined material.

(For example text, locations for images
and/or other web pages.)

3.
Is structured in format.

(In accordance to HTML requirements.)


web page

web page

Small part of previous HTML text file

Same text file interpreted by browser

web site

Screen capture from:
www.dictionary.com

Web tools


Web tools significantly simplifies the
creation of web pages and the generation of
HTML code.



Allows a WYSIWYG interface to creating
web pages.

(
WYSIWYG


W
hat
Y
ou
S
ee
I
s
W
hat
Y
ou
G
et.)




A few common web tools


Microsoft FrontPage
(Dead product!)

(Replaced by
MS SharePoint
Designer)


Most current application suites.


Microsoft Office


OpenOffice


Corel Office


WordPad and notepad (Text editing)


Flash / Dreamweaver / GoLive /ColdFusion…


Seamonkey Composer and Nvu (open source, free BUT…)


Others:
http://en.wikipedia.org/wiki/List_of_HTML_editors

SUGGESTIONS


Plan before starting a serious site. Saves time and effort. Storyboard if you need to.



Know your audience. Anticipate needs.



Keep pages and site structures simple and clean.



Keep pages within a site similar in style and layout.



Useful, easy to find information is a
good thing
.



Check your pages in other browsers and in browsers on different operating systems.



Check download speeds. Slow loading pages make for a very unhappy audience.



Keep image file sizes to a minimum and hold the number of images per page low.
Reuse the same images if possible within a site or on a page. Less can be a whole lot
more...



Emulate good examples of pages/sites found on the web. Isolate why a page/site
works.



A tool get easier the more it is used.

Audience

Play to your audience. Know who they are and anticipate
their needs.
Clearly

communicate intended/appropriate
information to the target audience. Usually, a person
visiting your page is looking for information. Can they
find it quickly and easily? Useful, easy to find
information is a
good thing
.


Remember, you may be a member of your audience. As a
tool
-
maker you can put the tools and resources you often
need, on your site, a click away.


Quote



Most people visit a web site to solve one or more of these four problems:



They want/need information.


They want/need to make a purchase / donation.


They want/need to be entertained.


They want/need to be part of a community.


Given:

A web site exists to solve users’ problems.

Then:

The effective web
-
designer must successfully address the question:

What problems does the page I'm designing solve?


Image from and text derived from “Biggest Mistakes in Web Design 1995
-
2015”

http://www.webpagesthatsuck.com/biggest
-
mistakes
-
in
-
web
-
design
-
1995
-
2015.html

www.unca.edu/education

Noncommercial site.

Designed to disseminate
general and specific
standardized information to a
target audience of current
students, prospective students,
alumni, parents, visitors,
cooperative groups, faculty
and staff.


www.disney.com

Commercial site.

Designed to reinforce
product loyalty and
generate product interest
in a broad range of the
general public.

Brush Creek Elementary School

Homework Help Page

Noncommercial site.

Designed to disseminate
general resource
information to a target
audience of elementary
students, parents, faculty
and general public.


and one more thing…

“Sites” feature of your UNCA email

(AKA Google
-
mail) account

Done

http://www.unca.edu/education/educ211

frandall@unca.edu

Fran Randall