Lesson 2 Chapter 3 Building Webpages e g

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 Java. Script and Java and their potential impact on the software world Chapter 3 Slide 2

Developing Web Content Tools Word processors l HTML editor l HTML Template l Text editor l 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 - Hyper. Text Markup Language: a collection of styles indicated by mark-up tags which define the contents of a WWW document. http - Hyper. Text 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 l the location of a web document on a web server. URL - Uniform Resource Locator l 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. Correct <TAG 1> <TAG 2> Content </TAG 2> </TAG 1> Chapter 3 Incorrect <TAG 1> <TAG 2> Content </TAG 1> </TAG 2> Slide 13

A Basic HTML Document Chapter 3 The title is not <HTML> required but is recommended. <HEAD> It appears in the <TITLE> My Document title bar of the browser window. </TITLE> </HEAD> <BODY> Some text goes here. </BODY> Only information in </HTML> the body shows up in the browser Slide 14 window.

Basic Structures Headings l <H 1>A heading</H 1> l Ranges from <H 1> to <H 6>. Paragraphs l End a paragraph with a . Line break l Insert a line break with . Horizontal rule. l <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 Web <HEAD> <TITLE>National Economic Council</TITLE>  </HEAD> <BODY background="bg_plain. jpg"> <A HREF="main_pla. htm"> [Text version]</A> <TEXT> <IMG SRC=eagle. gif ALIGN=LEFT ALT="Picture of an Eagle. "> Page <CENTER><H 1>National Economic Council</H 1> Assistant to the President for Economic Policy <a href="necdir. htm"> Gene Sperling</a>, Director Assistant to the President for International Economic Policy <a href="tarullo. htm"> Daniel K. Tarullo</a> </CENTER> Chapter 3 <HR> Slide 18

The National Economic Council was created by a presidential <A HREF="exec_ord. htm"> executive order </A> which was released January 25, 1993. The principal functions of the Council are: <OL> <LI>To coordinate the economic policy-making process with respect to domestic and international economic issues; <LI>To coordinate economic policy advice to the President; <LI>To ensure that economic policy decisions and programs are consistent with the President's stated goals, and to ensure that those goals a effectively pursued; and <LI>To monitor implementation of the President's economic policy agenda. </OL> <HR> HTML Code for NEC Web Page (Continued Budget </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 mark locations in a document. To create a Target: l Same document: l <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 l <BLOCKQUOTE>A Quote</BLOCKQUOTE> Special effects (logical) tags l l l Emphasis: Strong emphasis: Citation: <CITE></CITE> Physical style tags l l l Chapter 3 Italics: Boldface: Underline: Slide 22

In HTML. . . The commands themselves are case insensitive. l <H 1> is the same as <h 1> Whitespace does not count in HTML source code. Examples of one tag commands. l Chapter 3 For example , , 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. l GIF- Graphics Image Format: lossless, compressed graphics JPEG- Joint Photographic Expert Group: lossy, compressed graphics l Follows the form <IMG SRC=“URL of graphic”> l <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> <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></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. l Layout and design l 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 l Small images! l 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 l Does the page make sense without images? Chapter 3 Slide 29

Structure Keep pages small. l Big pages discourage people from returning. l 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 l l Any text editor can be used, Notepad is good. Note. Tab is even better. Claris Home. Builder, Homesite are easy too. Netscape 4. 5 Page Composer, IE 4. 0 Graphics program l l l Chapter 3 Anything that can handle gifs and jpegs. Adobe Photoshop does a good job. LView is a nice shareware graphics viewer. l (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/li 542871/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. w 3. 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. w 3. org/hypertext/WWW/Mark. Up. 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 info. med. yale. edu/caim/manual/shtml www. w 3. org/pub/WWW/Mark. Up/SGML hoohoo. ncsa. uiuc. edu/index. html Chapter 3 Slide 34

Some Short Demonstrations MS Word Netscape Page Composer Note. Tab Sample of Web Project 2. Chapter 3 Slide 35

Any questions? Chapter 3 Slide 36