Download presentation
Presentation is loading. Please wait.
1
<h1>Chapter 2</h1>
Java Methods TM Maria Litvin Gary Litvin An Introduction to Object-Oriented Programming <h1>Chapter 2</h1> Designing Web Pages With HTML One of the main reasons for Java’s popularity is the proliferation of Java applets on the Internet. An applet is a little program “embedded” in a web page. While this chapter has nothing to do with programming, we feel it is important to give students the necessary background information: what a web page is and how it is put together and linked to other pages. This also gives students a chance to get familiar with the computer environment, be successful in a creative and fun activity, and acquire a useful skill. If pressed for time, you can skip this chapter without affecting the rest of the material in the book. (Though it’s a good idea to cover Section 2.9 before running applets in Chapter 3.) On the other hand, you can spend as much as four weeks teaching HTML and designing web pages of increasing complexity, adding more advanced features from online documentation and tutorials. Copyright © 2003 by Maria Litvin, Gary Litvin, and Skylight Publishing. All rights reserved.
2
Objectives: Understand how web pages are put together
Learn basic HTML tags and develop your own web pages Learn how images and Java applets are added to web pages Learn some of the Internet terminology An unstated objective is to make students comfortable and successful in simple projects. No programming is involved. (Programming usually includes conditional and iterative statements.)
3
HTML — HyperText Markup Language
Text contains “hot links.” When touched or clicked, a link takes you to the specified place HyperText Markup Language Formatting commands are embedded in the text as “tags” (e.g., <b> ... </b> makes it bold) The Hypercard software for Mac (1987) made the hypertext concept popular. Markup: you can take a plain text file, open it in a simple text editor (such as Notepad), and mark it up by embedding HTML tags. The languages we know: Natural languages: English, Spanish, etc. Sign languages: ASL (American Sign Language), Semaphore Flag Signaling, etc. Programming languages: Basic, C++, Java, etc. A very limited “language,” just a few dozen tags
4
HTML from Source to Display
Source (e.g., Ch02.html): Display (“what you get”): <html> ... <body> <h1 align="center">HTML</h1> <p> <i>WYSIWYG</i> stands for What You See Is What You Get... </body> </html> A text with embedded HTML tags is stored in a plain text file called “source.” An HTML source file usually has the extension .htm or .html. The source file can be viewed in a plain text editor, such as Notepad. Exercise: Open a web page (e.g., in your browser, then on the “View” menu click “Source” – you’ll see HTML source for that page. You can type an HTML document using a plain text editor. But then you have to open your HTML file in a browser and switch between the editor and a browser to see how your page looks. This is not very convenient: it is not WYSIWYG. There are many WYSIWYG tools that help design an HTML document interactively, then generate HTML source automatically for you. Microsoft Word is a WYSIWYG editor for formatted text documents. It also has a simple WYSIWYG capability for HTML documents. Exercise: create a simple HTML document in Microsoft Word, save it, then open the .html file as a “text only” document and examine the html source generated by Word.
5
HTML Source is Device- and Platform-Independent.
But: may be displayed differently according to the capabilities of a particular device (computer screen, printer), its size, resolution, colors, etc. may be interpreted differently by different software (Netscape Navigator, Internet Explorer, etc.) An HTML document may look different when displayed in different software or on different devices: the appearance may depend on the size and resolution of the screen, the number of colors, etc. So WYSIWYG can never be fully achieved. Designers have to test their web pages in all popular browsers. A program such as an Internet browser has a built-in HTML interpreter.
6
HTML Features Tags for formatting and positioning text
Tags for lists, tables, embedded pictures, and Java applets Tags for hyperlinks and “anchors” The HTML tags can be roughly grouped into Document structure tags: <html>, <head>, <meta>, <title>, <body>, <address>, etc. Text layout and formatting tags: <h1>...<h6>, <p>, <br>, <hr>, <font>, <i>, <u>, <b>, etc. Anchors and hyperlinks: <a name=...>, <a href=...> Lists, tables, images, applets: <ul>, <ol>, <dl>, <table>, <img>, <applet>, etc.
7
HTML Syntax Each tag is enclosed in angular brackets:
<sometag> HTML is case-blind: doesn't distinguish between upper case and lower case. Many tags require a matching closing tag: <sometag>my text</sometag> Some authors prefer to write all HTML tags in all caps to make them more visible; others prefer all lower case. <img> and <hr> (horizontal rule) do not have a closing tag. Sometimes the closing tag is optional: for example, </p> (end of paragraph) is not required.
8
HTML Syntax (cont’d) Some tags may take attributes:
<p align="center"> Certain characters (<, >, &, ©, etc.) are represented by an “escape sequence.” <sometag attr="somevalue"> < < > > & & © © Some attributes are required, such as <img src="..."> (the source of an image). Other attributes are optional, such as <hr width="50%"> (alone, <hr> draws a horizontal rule across the whole window, width = 100%).
9
HTML Syntax (cont’d) Tags can be nested: Or:
<font color="blue"><i>Red Sea</i></font> Or: <strong>Click <a href="details.html">here</a> for details.</strong> In fact, all tags are nested within <html> ... </html>. It is better to keep the tags nested correctly, as in <a><b>...</b></a> and avoid interspersed tags, as in <a><b>...</a></b>. There is one exception: the <xmp> tag suspends the processing of HTML tags between <xmp> and </xmp>, so the fragment from the source document between these tags will be displayed exactly as in the source, including all the tags and line breaks. This is useful, for example, when you want to show a fragment of HTML source on your web page.
10
HTML Document Structure
<head> <title>...<title> <meta name="author" content="..."> <meta name=”keywords" content="..."> ... </head> <body> <address> </address> </body> </html> Info about the document The document’s title is displayed in the browser window title bar. More importantly it is used when you bookmark the page. Choose a descriptive title. The keywords help search engines find the page. It is customary to put webmaster contact information, last revision date, copyright notices, etc, in the address section. Contact info for webmaster, etc. Info to be displayed
11
Text Layout <h1>Heading</h1>
<h2>Subheading</h2> <h6>Sub ... subheading</h6> <p>New paragraph <p align="center">Centered <p>Text<br>New line <hr width=”95%"> <blockquote> Indented text </blockquote> HTML interpreters do not care how the text is split between lines. All contiguous white space (spaces, tabs, line breaks) is replaced by one space. use <p> to indicate a new paragraph and <br> to indicate a line break. A non-breaking space ( ) can be used to prevent splitting two words between lines and to increase the spacing between words. <hr> also has a “size” attribute which determines the thickness of the rule (e.g., <hr size="6">). Some browsers, but not all, support the color attribute for the rule. <blockquote> tags can be nested to increase the indent.
12
Text Formatting <p>Regular <b>Bold</b> <i>Italic</i> <u>Underlined</u> <p><strong>Emphasis</strong> <cite>Citation</cite> <p><code>Typewriter font</code> <p><big>Big</big> Regular <small>Small</small> <sub>below</sub> <sup>above</sup> <p><font color="red" size="+2">Big & red</font> <strong> is the same as <b>, but it is more abstract and can be redefined in style sheets (advanced topic, not covered). <cite> by default is the same as <i>. <font size="+..."> increments the font size relative to the current size.
13
Anchors and Hyperlinks
An “anchor” defines a location in the current HTML document. An anchor uses an <a> tag with a name attribute: <a name="panda"> <h3>Giant Pandas</h3> An anchor can be placed anywhere in a document. An anchor named “panda” When a browser is sent to an anchor, the text or the picture that follows the anchor is positioned at the top of the browser window, and the scrollbar position is adjusted accordingly.
14
Anchors and Hyperlinks (cont’d)
A hyperlink defines “hot text” and the destination (a URL) to go to when the link is clicked. A hyperlink uses the <a> tag with an href attribute and a closing </a> tag: Only 1630 <a href="#panda">Giant pandas</a> are left in the world. The # in the href attribute indicates that this is an anchor in the current document and not the name of another file. When clicked, takes you to the anchor named “panda”
15
URLs URL stands for “Uniform (or Universal) Resource Locator.”
A hyperlink can link to any URL. A URL can point to an HTML file, a pdf file, an image, audio, or video file, and even to an address. A URL can be absolute or relative. The resource’s type is often defined by the extension in the file name: .htm or .html — an HTML document; .pdf — a PDF (Portable Document Format) file; .jpg or .gif — an image file; .txt — a text file; .wav or .au — an audio clip; etc.
16
Host computer (web server)
Absolute URLs An absolute URL defines the absolute location of a resource on the Internet. Examples: Protocol Host computer (web server) File name A browser can find an absolute URL regardless of which document points to it. http stands for HyperText Transfer Protocol. Thus a URL that starts with indicates that the resource it points to is within the realm of HTML documents, a file used in web pages. Protocol address
17
Relative URLs A relative URL in a link describes a location relative to the location of the document that holds that link. Examples: #panda volleyball.html athletics.html#swimteam images/lucie.jpg ../courses/webdesign #panda an anchor in the same document voleyball.html a file in the same folder athletics.html#swimteam a particular location (anchor) in another file in the same folder images/lucie.jpg an image file lucie.jpg in the subfolder images ../courses/webdesign.htm go one level up to the parent folder, then to its subfolder courses; take the file webdesign.htm
18
URLs in Hyperlinks Use relative URLs to link to resources on your own web site. Use absolute URLs to link to resources on other web sites. Why use relative URLs? 1. Relative URLs work faster. 2. Relative URLs allow you to test and easily move a set of pages to a different host, e.g., from your local computer to your web site hosted by an Internet provider. Use forward slashes in file pathnames for compatibility with all systems. Use relative URL Use absolute URL
19
Lists <dl> <dt>Car</dt>
<dd>4 wheels</dd> <dt>Bike</dt> <dd>2 wheels</dd> <dt>Unicycle</dt> <dd>1 wheel</dd> </dl> <ul> <li>Bike</li> <li>Car</li> <li>Unicycle</li> </ul> <ol> <li>Bike</li> <li>Car</li> <li>Unicycle</li> </ol> Car Bike Unicycle 1. Car 2. Bike 3. Unicycle Car 4 wheels Bike 2 wheels Unicycle 1 wheel <ul> Unordered list <ul type="circle/disk/square"> <ol> Ordered list <ol type="1/I/i/A/a" start="1/2/..."> <dl> Definition list <dl compact> — definitions are placed on the same line. Lists can be nested. An <ul> tag without items indents the text within, like <blockquote>.
20
Images .gif files GIF, Graphics Interchange Format .jpg files
JPEG, Joint Photographic Experts Group Where do image files come from? Scanners, digital cameras, collections of icons and pictures, and so on. Images can be edited and converted to different file formats using Adobe Photoshop or other imaging software.
21
<img src="URL" ...other attributes>
Other attributes (optional): alt="some text" align="top/center/bottom" border="thickness" (0 — no border) usemap="#mapname" The text from the alt attribute comes up when you move the mouse over the image. An image can be inserted in a line of text; then the align attribute indicates how the image is aligned relative to the text. The usemap attribute associates a map with an image.
22
Images and Hyperlinks To turn an image into a hot link, surround it with <a href=...> and </a> tags. To turn different sections of an image into different hot links, define a “map”: <map name="mapname"> <area shape="circle/rect/square" coords="..." href="URL"> <area ...> ... </map> Map coordinates are in “pixel” units with the origin in the upper-left corner of the image. Circle: xCenter, yCenter, radius Rect: x1, y1, x2, y2 -- coordinates of two opposite corners Polygon: x1, y1, x2, y2, ...
23
Tables Tables can be used to: Tables can be nested. Display data
Place text and an image side by side Make narrow columns of text Box text messages by adding border Add color background to text boxes Tables can be nested. Tables are the most important page layout tool available in HTML. A table cell can contain text, images, lists, other tables, applets
24
<table ...> Tag Optional attributes:
border="thickness" (0 — no border) width="n% (or number of pixels)" cellpadding="number of pixels" (additional space between data and cell border) cellspacing="number of pixels" cells) It is usually better to set width in relative terms: width="75%" means the table takes three-quarters of the width of the browser window. But sometimes you may want to reserve a specific number of pixels, e.g., for a side bar or an image. The width attribute is also available for individual cells.
25
<table ...> Tag (cont’d)
<th> <td> ... </td> <td> ... </td> ... <td> ... </td> </th> <tr> </tr> ... <caption> ... </caption> </table> Header row (optional) Regular row The <th>, <tr>, <td>, and <caption> tags each have their own attributes for horizontal and vertical alignment and background color; <td> has the width attribute. See the example in the book for details. Individual cell Optional caption
26
The <applet> Tag
The tag adds a Java applet to the web page. An applet’s code consists of .class files and may also include images, audioclips, etc. Only one class, the “main” class, is listed in the <applet> tag. The applets on the Internet are what made Java popular. Java was initially intended for programming microprocessors embedded in kitchen appliances and other embedded systems. A browser has a built-in Java interpreter for running applets.
27
The <applet> Tag (cont’d)
<applet code="ClassName" width=... height=... alt="some text" codebase="URL"> Your browser is ignoring the <applet> tag <param name="... " value="... "> <param ...> </applet> Optional attributes Java may pose security risks, so a user may choose to disable Java in the browser. Then the browser will ignore <applet> tags. An <applet> tag may have several <param> tabs embedded in it. Each <param> tag defines the name and value of a parameter to be passed to the applet. Optional parameters for the applet
28
Review: What is a web page? Web site? Java applet?
What do HTML, WYSIWYG, HTTP stand for? Define hypertext and HTML source. Identify the file types by their extensions: .htm, .txt, .pdf, .jpg, .gif, .wav, .class What is a web page? Web site? Java applet? A web page is an HTML document. A web site is a set of related web pages and supporting files, such as image files, pdf files, audioclips, applets, and so on, on the same host computer. A Java applet is a small Java program written for the Internet. What do HTML, HTTP, WYSIWYG stand for? Hypertext Markup Language, Hypertext Transfer Protocol, What You See Is What You Get Define hypertext, HTML source Hypertext is text with embedded “hot links” which, when clicked, take the user to specified locations associated with the links. HTML source is an HTML document viewed as a text file with the HTML tags exposed. Identify the file types by their extensions: .htm, .html HTML documents .txt Text files .pdf PDF files (Adobe Acrobat) .jpg .gif Image files .wav Audioclip files .class Compiled Java code (class files)
29
Review (cont’d): Name some document structure tags.
Name some document layout tags. Name some text formatting tags. Name the tags for working with hyperlinks. What types of lists are supported in HTML? What are their respective tags? Name some tags for working with images, tables, and applets. Document structure tags: <html> <head> <title> <meta> <body> <address> Document layout tags: <h1> ... <h6> <p> <br> <hr> <blockquote> Text formatting tags: <b> <i> <u> <strong> <cite> <big> <small> <sup> <sub> <font> Tags for creating hyperlinks: <a name=...> <a href=...> <a href="mailto:..."> What are the supported HTML list types and their respective tags? <ul> <li> Unordered list <ol> <li> Ordered list <dl> <dt> <dd> Definition list Tags for working with images, tables, and applets: <img> <map> <area> <table><th> <tr> <td> <caption> <applet> <param>
Similar presentations
