Chapter 6.2.3 – Basic HTML | Introduction to Programming Using Java

Chapter 6.2.3 – Basic HTML | Introduction to Programming Using Java

 

6.2.3 Basic HTML

 

Before you can actually use an applet that you have written, you need to create a Web page on which to place the applet. Such pages are themselves written in a language called HTML (HyperText Markup Language). An HTML document describes the contents of a page. A Web browser interprets the HTML code to determine what to display on the page.

The HTML code doesn’t look much like the resulting page that appears in the browser. The HTML document does contain all the text that appears on the page, but that text is “marked up” with commands that determine the structure and appearance of the text and determine what will appear on the page in addition to the text.

HTML has become a rather complicated language. In this section, I will cover just the most basic aspects of the language. You can easily find more information on the Web, if you want to learn more.

Although there are many Web-authoring programs that make it possible to create Web pages without ever looking at the underlying HTML code, it is possible to write an HTML page using an ordinary text editor, typing in all the mark-up commands by hand, and it is worthwhile to learn how to create at least simple pages in this way.

There is a strict syntax for HTML documents (although in practice Web browsers will do their best to display a page even if it does not follow the syntax strictly). Leaving out optional features, an HTML document has the form:

 

basic html

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

 

The hdocument-titlei is text that will appear in the title bar of the Web browser window when the page is displayed. The hdocument-contenti is what is displayed on the page itself. The rest of this section describes some of the things that can go into the hdocument-contenti section of an HTML document

The mark-up commands used by HTML are called tags. Examples include <html> and

<title> in the document outline given above. An HTML tag takes the form

 

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

 

where the htag-namei is a word that specifies the command, and the hoptional-modifiersi, if present, are used to provide additional information for the command (much like parameters in subroutines). A modifier takes the form hmodifier-namei = hvaluei

Usually, the hvaluei is enclosed in quotes, and it must be if it is more than one word long or if it contains certain special characters. There are a few modifiers which have no value, in which case only the name of the modifier is present. HTML is case insensitive, which means that you can use upper case and lower case letters interchangeably in tags and modifiers. (However, lower case is generally used because XHTML, a successor language to HTML, requires lower case.)

A simple example of a tag is <hr>, which draws a line—also called a “horizontal rule”— across the page. The hr tag can take several possible modifiers such as width and align. For example, a horizontal line that extends halfway across the page could be generated with the tag:

 

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

 

The width here is specified as 50% of the available space, meaning a line that extends halfway across the page. The width could also be given as a fixed number of pixels.

Many tags require matching closing tags, which take the form

 

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

 

For example, the <html> tag at the beginning of an HTML document must be matched by a closing </html> tag at the end of the document. As another example, the tag <pre> must always have a matching closing tag </pre> later in the document. An opening/closing tag pair applies to everything that comes between the opening tag and the closing tag.

The <pre> tag tells a Web browser to display everything between the <pre> and the </pre> just as it is formatted in the original HTML source code, including all the spaces and carriage returns. (But tags between <pre> and </pre> are still interpreted by the browser.) “Pre” stands for preformatted text. All of the sample programs in the on-line version of this book are formatted using the <pre> command.

It is important for you to understand that when you don’t use <pre>, the computer will completely ignore the formatting of the text in the HTML source code. The only thing it pays attention to is the tags. Five blank lines in the source code have no more effect than one blank line or even a single blank space. Outside of <pre>, if you want to force a new line on the Web page, you can use the tag <br>, which stands for “break”. For example, I might give my address as:

 

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

Chapter 6.2.3 - Basic HTML | Introduction to Programming Using Java

 

 

short line, or when used with <br> to make several short lines.) You can also use <p align=center> for centered lines.

By the way, if tags like <p> and <hr> have special meanings in HTML, you might wonder how one can get them to appear literally on a web page. To get certain special characters to appear on the page, you have to use an entity name in the HTML source code.

The entity name for < is &lt;, and the entity name for > is &gt;. Entity names begin with & and end with a semicolon. The character & is itself a special character whose entity name is &amp;. There are also entity names for nonstandard characters such as an accented “e”, which has the entity name &eacute;.

There are several useful tags that change the appearance of text. For example, to get italic text, enclose the text between <i> and </i>. For example,

<i>Introduction to Programming using Java</i> in an HTML document gives Introduction to Programming using Java in italics when the document is displayed as a Web page. Similarly, the tags <b>, <u>, and <tt> can be used for bold, underlined, and typewriter-style (“monospace”) text.

A headline, with very large text, can be made by placing the the text between <h1> and </h1>. Headlines with smaller text can be made using <h2> or <h3> instead of <h1>. Note that these headline tags stand on their own; they are not used inside paragraphs.

You can add the modifier align=center to center the headline, and you can include break tags (<br>) in a headline to break it up into multiple lines. For example, the following HTML code will produce a medium–sized, centered, two-line headline:

<h2 align=center>Chapter 6:<br>Introduction to GUI Programming</h2>

The most distinctive feature of HTML is that documents can contain links to other documents. The user can follow links from page to page and in the process visit pages from all over the Internet.

The <a> tag is used to create a link. The text between the <a> and its matching </a> appears on the page as the text of the link; the user can follow the link by clicking on this text. The <a> tag uses the modifier href to say which document the link should connect to. The value for href must be a URL (Uniform Resource Locator). A URL is a coded set of instructions for finding a document on the Internet. For example, the URL for my own “home page” is http://math.hws.edu/eck/

To make a link to this page, I would use the HTML source code

<a href=”http://math.hws.edu/eck/”>David’s Home Page</a>

The best place to find URLs is on existing Web pages. Web browsers display the URL for the page you are currently viewing, and they can display the URL of a link if you point to the link with the mouse.

If you are writing an HTML document and you want to make a link to another document that is in the same directory, you can use a relative URL. The relative URL consists of just the name of the file. For example, to create a link to a file named “s1.html” in the same directory as the HTML document that you are writing, you could use

<a href=”s1.html”>Section 1</a>

There are also relative URLs for linking to files that are in other directories. Using relative URLs is a good idea, since if you use them, you can move a whole collection of files without changing any of the links between them (as long as you don’t change the relative locations of the files).

When you type a URL into a Web browser, you can omit the “http://” at the beginning of the URL. However, in an <a> tag in an HTML document, the “http://” can only be omitted if the URL is a relative URL. For a normal URL, it is required.

You can add images to a Web page with the <img> tag. (This is a tag that has no matching closing tag.) The actual image must be stored in a separate file from the HTML document. The <img> tag has a required modifier, named src, to specify the URL of the image file.

For most browsers, the image should be in one of the formats PNG (with a file name ending in “.png”), JPEG (with a file name ending in “.jpeg” or “.jpg”), or GIF (with a file name ending in “.gif”). Usually, the image is stored in the same place as the HTML document, and a relative URL—that is, just the name of the image file—is used to specify the image file.

The <img> tag also has several optional modifiers. It’s a good idea to always include the height and width modifiers, which specify the size of the image in pixels. Some browsers handle images better if they know in advance how big they are.

The align modifier can be used to affect the placement of the image: “align=right” will shove the image to the right edge of the page, and the text on the page will flow around the image; “align=left” works similarly. (Unfortunately, “align=center” doesn’t have the meaning you would expect.

Browsers treat images as if they are just big characters. Images can occur inside paragraphs, links, and headings, for example. Alignment values of center, top, and bottom are used to specify how the image should line up with other characters in a line of text: Should the baseline of the text be at the center, the top, or the bottom of the image? Alignment values of right and left were added to HTML later, but they are the most useful values. If you want an image centered on the page, put it inside a <p align=center> tag.)

For example, here is HTML code that will place an image from a file named figure1.png on the page.

<img src=”figure1.png” align=right height=150 width=100>

The image is 100 pixels wide and 150 pixels high, and it will appear on the right edge of the page.

 

 

 

 

Read More…

Introduction to Programming Using Java – David J. Eck

Chapter 5.5.3 – Example: Vehicles | Introduction to Programming Using Java

Chapter 5.6 – This and Super | Introduction to Programming Using Java

Chapter 5.7 – Interfaces | Introduction to Programming Using Java

Chapter 5.8 – Nested Classes | Introduction to Programming Using Java

Chapter 6 – Introduction to GUI Programming | Introduction to Programming Using Java

1 thought on “Chapter 6.2.3 – Basic HTML | Introduction to Programming Using Java”

Leave a Comment