lesson 2 chapter 3

Lesson 2

Chapter 3

Building Webpages

e.g. Intro to HTML The Language of WWW Nets

Chapter 3Slide 2

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 3Slide 3

Developing Web Content

ToolsWord processorsHTML editorHTML TemplateText editor

View your page

Add effects judiciously

Chapter 3Slide 4

ObjectivesObjectives

Introduce HTML basics.

Take the “magic” out of the Internet.

Demonstrate how to create and edit WEB pages.

Chapter 3Slide 6

Definitions 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,

and provide access to, web pages.

Chapter 3Slide 7

Web Page AddressesWeb Page Addresses

URI - Uniform Resource Identifier the location of a web document on a web server.

URL - Uniform Resource Locator the location of the web document on a web

server as well as the location of the web server on the world wide network.

Chapter 3Slide 8

The URL ExpandedThe URL Expanded

http://www.whitehouse.gov/WH/EOP/nec/html/main.html

The access method

Domain Name: The name of the computer with the files you want to see.

Uniform Resource Identifier (URI): The path to the document

Chapter 3Slide 12

Two Basic Access MethodsTwo Basic Access Methods

Internet/Extranet/Intranethttp://www.whitehouse.gov/WH/EOP/nec/html/main.html

On Local Machinefile:///C|/WH/EOP/nec/html/main.html

local hard drive pipe: top part of the backslash (\) key

Chapter 3Slide 13

HTML CodeHTML Code

HTML consists of markup commands, or tags.

Most tags are done in pairs.

<TAG1><TAG2>Content</TAG2></TAG1>

<TAG1><TAG2>Content</TAG1></TAG2>

Correct Incorrect

Chapter 3Slide 14

A Basic HTML DocumentA Basic HTML Document

<HTML><HEAD> <TITLE> My Document </TITLE></HEAD><BODY>Some text goes here.</BODY></HTML>

The title is not required but is recommended. It appears in the title bar of the browser window.

Only information in the body shows up in the browser window.

Chapter 3Slide 15

Basic StructuresBasic Structures

Headings<H1>A heading</H1>Ranges from <H1> to <H6>.

ParagraphsEnd a paragraph with a <P>.

Line break Insert a line break with <BR>.

Horizontal rule.<HR>

Chapter 3Slide 16

Let’s Look at a Sample PageLet’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 3Slide 17

Chapter 3Slide 18

<HTML><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.">

<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><HR>

HTML Code for NEC Web Page

Chapter 3Slide 19

<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><P><B>Budget</B></BODY></HTML>

HTML Code for NEC Web Page (Continued)

Chapter 3Slide 20

HyperlinksHyperlinks

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 3Slide 21

TargetsTargets

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 3Slide 22

Misc MarkupMisc Markup

Blockquote <BLOCKQUOTE>A Quote</BLOCKQUOTE>

Special effects (logical) tags Emphasis: <EM></EM> Strong emphasis: <STRONG></STRONG> Citation: <CITE></CITE>

Physical style tags Italics: <I></I> Boldface: <B></B> Underline: <U></U>

Chapter 3Slide 23

In HTML...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.For example <P>, <BR>, and <HR>.

Chapter 3Slide 24

ImagesImages

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

Displayed if image is not loadedText alignment

Is this still true? No, can also use PNG.

Chapter 3Slide 25

Tables In HTML...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></TABLE>

Chapter 3Slide 26

FramesFrames

vertical frames

horizontal frames

We typically see ....

left.htm right.htm

twofram.htm

threefram.htm top.htm

middle.htm

bottom.htm

Chapter 3Slide 27

Code for 2 Part Vertical Frame 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 3Slide 28

What Makes a Good WEB Page?What Makes a Good WEB Page?

It should be more than just a hotlist.Layout and designDon'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 3Slide 29

StyleStyle

Use Frames where it makes sense.

ImagesSmall 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 varietyDoes the page make sense without images?

Chapter 3Slide 30

StructureStructure

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 instantwriter or artist.

Chapter 3Slide 31

HTML ToolsHTML 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 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)

Chapter 3Slide 32

Questions about WWW NETs

What are they?

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?

What is VRML?

Chapter 3Slide 33

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 3Slide 34

More WWW ReferencesOfficial 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 3Slide 35

Some Short Demonstrations

MS Word

Netscape Page Composer

NoteTab

Sample of Web Project 2.

Chapter 3Slide 36

Any questions?