lesson 2 chapter 3
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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><!-- URL "http://www.whitehouse.gov/WH/EOP/nec/html/main.html" --></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?