1 / 32

Lesson 2 Chapter 3

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

brooke-bender
Download Presentation

Lesson 2 Chapter 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson 2Chapter 3 Building Webpages e.g. Intro to HTML The Language of WWW Nets

  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

  3. Developing Web Content • Tools • Word processors • HTML editor • HTML Template • Text editor • View your page • Add effects judiciously

  4. Objectives • Introduce HTML basics. • Take the “magic” out of the Internet. • Demonstrate how to create and edit WEB pages.

  5. 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.

  6. Web 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.

  7. The URL Expanded Uniform Resource Identifier (URI): The path to the document The access method http://www.whitehouse.gov/WH/EOP/nec/html/main.html Domain Name: The name of the computer with the files you want to see.

  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 pipe: top part of the backslash (\) key

  9. HTML Code • HTML consists of markup commands, or tags. • Most tags are done in pairs. Correct Incorrect <TAG1> <TAG2> Content </TAG2> </TAG1> <TAG1> <TAG2> Content </TAG1> </TAG2>

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

  11. 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>

  12. 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.)

  13. <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

  14. <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)

  15. 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

  16. 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.

  17. Misc 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>

  18. 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>.

  19. 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 Displayed if image is not loaded

  20. 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>

  21. top.htm middle.htm bottom.htm Frames We typically see .... twofram.htm vertical frames horizontal frames right.htm left.htm threefram.htm

  22. 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>

  23. 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.

  24. 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?

  25. 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.

  26. 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 • 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)

  27. 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?

  28. 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

  29. 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

  30. Some Short Demonstrations • MS Word • Netscape Page Composer • NoteTab • Sample of Web Project 2.

  31. Any questions?

More Related