Hardware: Input, Processing, and Output Devices

Transcript Hardware: Input, Processing, and Output Devices

Lesson 2
Chapter 3
Building Webpages
e.g. Intro to HTML
The Language of WWW Nets
Learning Objectives
Be able to “read” HTML code.
Know the tools available for
creating web pages
Describe JavaScript and Java
and their potential impact on the
software world
Chapter 3
Slide
2
Developing Web Content
Tools
Word processors
 HTML editor
 HTML Template
 Text editor

View your page
Add effects judiciously
Chapter 3
Slide
3
Objectives
Introduce HTML basics.
Take the “magic” out of the Internet.
Demonstrate how to create and edit WEB
pages.
Chapter 3
Slide
4
Definitions
html - HyperText Markup Language: a collection of styles
indicated by mark-up tags which define the contents
of a WWW document.
http - HyperText Transfer Protocol: a low-overhead
protocol to serve hypertext documents (access method).
Web Browser - Software program that permits viewing of
html files (e.g. Netscape, Internet Explorer)
Web Page - what users see on their browser.
Web Server - Computers used to store,
Chapter 3
and provide access to, web pages.
Slide
6
Web Page Addresses
URI - Uniform Resource Identifier

the location of a web document on a web server.
URL - Uniform Resource Locator

Chapter 3
the location of the web document on a web
server as well as the location of the web server
on the world wide network.
Slide
7
The URL Expanded
The access method
Uniform Resource Identifier (URI):
The path to the document
http://www.whitehouse.gov/WH/EOP/nec/html/main.html
Domain Name:
The name of the computer
with the files you want to see.
Chapter 3
Slide
8
Two Basic Access Methods
Internet/Extranet/Intranet
http://www.whitehouse.gov/WH/EOP/nec/html/main.html
On Local Machine
file:///C|/WH/EOP/nec/html/main.html
local hard drive
Chapter 3
pipe: top part of the backslash (\) key
Slide
12
HTML Code
HTML consists of markup commands, or
tags.
Most tags are done in pairs.
Chapter 3
Correct
Incorrect
<TAG1>
<TAG2>
Content
</TAG2>
</TAG1>
<TAG1>
<TAG2>
Content
</TAG1>
</TAG2>
Slide
13
A Basic HTML Document
Chapter 3
The title is not
<HTML>
required but is
recommended. It
<HEAD>
appears in the title
<TITLE>
My Document bar of the browser
window.
</TITLE>
</HEAD>
<BODY>
Some text goes here.
</BODY>
Only information in the
</HTML>
body shows up in the
browser window.
Slide
14
Basic Structures
Headings
 <H1>A heading</H1>
 Ranges from <H1> to <H6>.
Paragraphs
 End a paragraph with a <P>.
Line break
 Insert a line break with <BR>.
Horizontal rule.
 <HR>
Chapter 3
Slide
15
Let’s Look at a Sample Page
Open an HTML document in Netscape.
Under View, Select: View Page Source
Take a look at the code and compare to
the document. (Can get back to the
document by closing the Page Source
window.)
Chapter 3
Slide
16
Chapter 3
Slide
17
<HTML>
HTML Code for NEC
<HEAD>
<TITLE>National Economic Council</TITLE>

</HEAD>
<BODY background="bg_plain.jpg">
<A HREF="main_pla.htm"> [Text version]</A>
<P>
<TEXT>
<IMG SRC=eagle.gif ALIGN=LEFT ALT="Picture of an Eagle.">
Web Page
<BR><BR><BR><BR>
<CENTER><H1>National Economic Council</H1>
Assistant to the President for Economic Policy
<a href="necdir.htm"> Gene Sperling</a>, Director<br>
Assistant to the President for International Economic Policy
<a href="tarullo.htm"> Daniel K. Tarullo</a><br>
</CENTER><BR> <P>
<BR CLEAR=ALL>
Chapter 3
<HR>
Slide
18
<P> The National Economic Council was created by a presidential
<A HREF="exec_ord.htm"> executive order </A>
which was released January 25, 1993.
<P>
<B> The principal functions of the Council are:</B>
<OL>
<B><LI></B>To coordinate the economic policy-making process with
respect to domestic and international economic issues;
<B><LI></B>To coordinate economic policy advice to the President;
<B><LI></B>To ensure that economic policy decisions and programs are
consistent with the President's stated goals, and to ensure that those goals are being
effectively pursued; and
<B><LI></B>To monitor implementation of the
President's economic policy agenda.
</OL>
<P>
<BR>
<HR>
HTML Code for NEC Web Page (Continued)
<P>
<B>Budget</B>
</BODY>
Chapter 3
Slide 19
</HTML>
Hyperlinks
Allow you to move from one location to another
Follows the form <A HREF=“URL”></A>
<AHREF=“http://www.whitehouse.gov/WH/EOP/nec/
html/main.html”>The White House page.</A>
Looks like:
The White House page.
This hyperlink would take you to
www.whitehouse.gov/WH/EOP/nec/html/main.html
Chapter 3
Slide
20
Targets
Targets mark locations in a document.
To create a Target:
 Same document:

<A HREF=“#Conclusion”>
This is a specific location within a
document where you might want to
send someone.
Chapter 3
Slide
21
Misc Markup
Blockquote

<BLOCKQUOTE>A Quote</BLOCKQUOTE>
Special effects (logical) tags



Emphasis: <EM></EM>
Strong emphasis: <STRONG></STRONG>
Citation: <CITE></CITE>
Physical style tags



Chapter 3
Italics: <I></I>
Boldface: <B></B>
Underline: <U></U>
Slide
22
In HTML...
The commands themselves are case insensitive.

<H1> is the same as <h1>
Whitespace does not count in HTML source code.
Examples of one tag commands.

Chapter 3
For example <P>, <BR>, and <HR>.
Slide
23
Is this still true?
No, can also use PNG.
Images
Can only use GIF(*.gif) or JPEG (*.jpg) format in HTML.

GIF- Graphics Image Format: lossless, compressed graphics
JPEG- Joint Photographic Expert Group: lossy, compressed graphics

Follows the form <IMG SRC=“URL of graphic”>

<IMG SRC=“graphic.gif” ALIGN=top ALT=“My graphic”>
Text alignment
Chapter 3
Displayed if image is not loaded
Slide
24
Tables In HTML...
A simple table looks like this:
<TABLE>
<tr>
<td>First Row, First Column
</td>
<td>First Row, Second Column </td>
</tr>
<tr>
<td>Second Row, First Column </td>
<td>Second Row, Second Column </td>
</tr>
Chapter 3
</TABLE>
Slide
25
Frames
We typically see ....
vertical frames
twofram.htm
left.htm
right.htm
threefram.htm
top.htm
horizontal frames
middle.htm
bottom.htm
Chapter 3
Slide
26
Code for 2 Part Vertical Frame
<HTML>
<HEAD>
<TITLE></TITLE></HEAD>
<FRAMESET COLS="31%,*" >
<FRAME SRC="left.htm" NAME="FRAME_TOP" >
<FRAME SRC="right.htm" NAME="FRAME_BODY" >
</FRAMESET>
</HTML>
Chapter 3
Slide
27
What Makes a Good WEB Page?
It should be more than just a hotlist.
 Layout and design
 Don't use an image just for the sake of it.
Be consistent.
Original content (unique!)
Depth (Use hypertext in an intelligent way).
Creativity (Everyone has the same set of tools).
Personality
Most importantly, it should accomplish its purpose.
Chapter 3
Slide
28
Style
Use Frames where it makes sense.
Images
 Small images!
 Not everyone has a Pentium attached to a T-1
line.
Can only use gif or jpeg images.
Icons to add a dash of color.
Browser variety
 Does the page make sense without images?
Chapter 3
Slide
29
Structure
Keep pages small.
 Big pages discourage people from returning.
 However, sub-pages do not get accessed
very much.
If more than a few pages, create a directory.
Use internal links (bookmarks) for larger pages.
Remember, the Web will not make you an instant
writer or artist.
Chapter 3
Slide
30
HTML Tools
Editor




Any text editor can be used, Notepad is good.
NoteTab is even better.
Claris HomeBuilder, Homesite are easy too.
Netscape 4.5 Page Composer, IE 4.0
Graphics program



Chapter 3
Anything that can handle gifs and jpegs.
Adobe Photoshop does a good job.
LView is a nice shareware graphics viewer.
 (http://world.std.com/~mmedia/lviewp.html)
Slide
31
Questions about WWW NETs
What is
What are they?
VRML?
When to use them?
How to evaluate their use?
How to evaluate their benefits?
How to evaluate their costs?
Are there any ethical issues concerning
their creation and their use?
Chapter 3
Slide
32
WWW References
Web Pages for Absolute Beginners
http://subnet.virtual-pc.com/li542871/index.html
A Beginner’s Guide to HTML
http://www.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html
How to write "good" HTML:
www.cs.cmu.edu/afs/cs.cmu.edu/Web/People/tilt/cgh
www.w3.org/hypertext/WWW/Provider/Style/
Introduction.html
The HTML Quick Reference Guide
www.cc.ukans.edu/~acs/docs/other/HTML_quick
Chapter 3
Slide
33
More WWW References
Official HTML specification
www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
Background images
home.netscape.com/assist/net_sites/bg/index.html
Great animated images
www.aplusart.com
Other Introductory Documents
www.ucc.ie/info/net/htmldoc.html
members.aol.com/htmlguru/about_html.html
info.med.yale.edu/caim/manual/shtml
www.w3.org/pub/WWW/MarkUp/SGML
hoohoo.ncsa.uiuc.edu/index.html
Chapter 3
Slide
34
Some Short Demonstrations
MS Word
Netscape Page Composer
NoteTab
Sample of Web Project 2.
Chapter 3
Slide
35
Any questions?
Chapter 3
Slide
36

Hardware: Input, Processing, and Output Devices

Transcript Hardware: Input, Processing, and Output Devices

Directory