Java Training

Java Training Introduction to HTML Written by Jeff Smith

Acronyms
HTML = Hyper Text Markup Language
HTTP = Hyper Text Transfer Protocol
HTTPS = Hypert Text Transfer Protocol Secure (SSL)
CGI = Common Gateway Interface
www = World Wide Web
URL = Uniform Resource Locator (web address)
CSS = Cascading Style Sheet
IE = Internet Explorer
AJAX = Asynchronous JavaScript And XML

What is HTML? -1
HTML = Hyper Text Markup Language
It is a markup language designed to combine text, graphics, and formatting information in simple ASCII text that can be rendered in "browsers".
Enables documents to link to other documents using Hyper Links
Hyper links can link to another document or to a location within the current document
Web browsers like Internet Explorer understand HTML and render a web page according to the formatting information
You can create HTML files with any ASCII editor
They usually have an extension of either .HTM or .HTML

What is HTML? -2
HTML pages can be either:
Static
Pages which are written as ASCII files and saved on the web server
Dynamic
Created on-the-fly as the user requests documents by clicking on various hyper links on a website
Dynamic pages are typically generated by some kind of program like Perl, PHP, ASP, or Java (either Java Server Pages or Servlets)

URLs -1
When you type in a URL into a browser or click on a link to a URL, your request might look something like:
http://www.wrfportal.org/docs/welcome.html
domain: www.wrfportal.org
directory: docs
document: welcome.html

URLs -2
Domain
Your DNS (domain name service) server converts the domain name (www.wrfportal.org) to its corresponding IP address (216.154.223.72)
All ISP (internet service providers) provide DNS. DNS is basically a database which maps domain names to IP addresses
You could enter the IP address yourself like so
http:// 216.154.223.72 /docs/welcome.html

URLs -3
Directory
Web servers generally map a URL directory (like "docs") to some corresponding physical directory on the server
This mapping is generally specified in the web server configuration files
For example "docs" could be mapped like so docs = /usr/var/apache/docs or docs = c:inetpubpublicdocs

URLs -4
You can also specify a specific port in your URL. The standard (default) http port is 80. So you could write your URL like so:
http://www.wrfportal.org :80 /docs/welcome.html
Other common port numbers
443 -- SSL (secure sockets layer)
Can be specified using " https "
8080 -- Tomcat (used to run servlets, JSPs)
23 -- Telnet
21 -- FTP
22 -- SSH

URLs -5
Java Servlet Example:
To request a dynamic page in your URL, you request a URL like so
http://www.softtechdesign.com/softtech/GuestBookServlet
The web server parses this URL and determines that you are trying to access a servlet named "GuestBookServlet". It then passes this request on to your servlet engine (e.g. Tomcat) which executes the Java Servlet.
The servlet runs and builds an HTML string which is passed back to the web server which passes it back to the web browser

Getting Web Pages With URLs

HTML Development Tools
You can write HTML in many ways
Using a text editor like Notepad, TextPad, or CuteHTML
Download CuteHTML shareware from http://www.cuteftp.com/
Download TextPad shareware from http://www.textpad.com/
Using a WYSIWYG development tool such as
Macromedia Dreamweaver -- the website development tool of choice among professional web designers. wrfportal.org was developed with it.
Microsoft Frontpage or Microsoft Word
Dynamically generating HTML from a CGI program, Java Servlet, or Javascript code

A Word About Browsers-1
The main browsers in use today are Internet Explorer (IE), Netscape Navigator, Firefox, Opera, Mozilla, Konqueror
They support JavaScript by default (only IE has built in support for VBScript)
The same HTML may look slightly different in different browsers
Different versions the browsers support different versions of HTML (although all the browsers released in the last couple of years at least support HTML 4)
Thankfully today, most people have browsers which support HTML 4.01, so you can design your website to that spec
Some browsers have their own "extensions" to HTML 4.01 (like dynamic HTML/XHTML). Avoid using these extensions if you want your website to work with all browsers

A Word About Browsers-2
Sometimes you will design a page that looks OK in IE and yet you get a page error in Navigator or Firefox
This probably indicates that you have written "badly formed" HTML and IE is just doing its best to display the page anyway
Navigator tends to be a little pickier about requiring properly formed HTML
Note: Dreamweaver has a nice tool that analyzes your website and tells you which versions of which browsers it is compatible with

HTML Applications
HTML is used in
web pages
help documents for applications
Javadoc comments
Selling items on ebay (editing the product description)
Wikipedia - editing entries
It has become the most popular and universal standard for formatting documents

HTML Tags-1
HTML documents are comprised of tags (elements) and text content
Tags take one of two formats:
<tag>.....</tag>
<tag ...... />
To make things more confusing, sometimes the ending tag is optional (as with the paragraph tag)
Most elements have a start tag <..> and an end tag </..>. For example, you can have a <b> and a </b> (bold tag)
HTML tags are NOT case sensitive
Indenting your HTML code is not required, but it does make your code more readable

Tags With Attributes
Some tags need to specify additional information
For example, a font tag might need to specify a size, a color, and a type face
HTML tags specify attributes to accomplish this
Attributes can be in single quotes, double quotes, or not in quotes at all (if the attribute doesn't have any spaces in it)
The general syntax is
<tag attribute1=X attribute2=Y .... >
</tag>

HTML Doc Structure -1
HTML documents are generally split into two sections: a head and a body .
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
Isn't my web page interesting
</body>
</html>

The head specifies things like
page title
meta tags (like keywords used by search engines)
javascript functions (or VBScript functions)

The body tag can contain the following attributes
bgcolor=color (specifies a background color for the page)
text=color (text color)
link=color (hyperlinks color)
alink=color (activated links color)
vlink=color (visited links color)
<body bgcolor="white" text="black" link="red" alink="maroon" vlink="fuchsia">
The standard (browser safe) colors are defined as Silver, Gray, White, Black, Maroon, Red, Green, Lime, Purple, Fuchsia, Olive, Yellow, Navy, Blue, Teal, Aqua

HTML Development Tip
When learning HTML and testing your pages, it’s tedious to have to continually reopen the browser and reload your page
Load the page you are working on in IE (and leave it open)
Edit your page in Notepad and save the changes you make (but don’t close NotePad!)
To view your changes, press F5 (refresh) in IE
This will reload the page from disk

Exercise One
Class exercise: Type the preceding HTML into notepad, save the file as "FirstPage.html" and load it into Internet Explorer. You should see something like this:
Notice that the <title> appears as the IE window title
Extra credit: set the background of your page "yellow"

Common Formatting Tags -1
You can jazz up your page with some additional tags
Headings
<h1>the biggest heading</h1>
<h2>the second biggest heading</h2>
<h6>the smallest heading</h6>
Line breaks
The carriage returns (or linefeeds) you put in your HTML document are ignored when rendered in the browser.
You explicitly specify a line break with the <br> tag
The <br> tag doesn't have a corresponding </br> tag
HTML comments (just like XML)

Text can be formatted in three basic ways
Usage -- suggest the way text should look by its usage (e.g. <em> tag for emphasis).
Using usage tags is a bit problematic because different browsers may implement the "suggested" format differently (sometimes in ways you don't like). I tend to stick with the Physical tags
Physical -- specify the physical style you want (e.g. bold <b> or italic <i>)
By using style sheets (e.g. CSS -- cascading style sheets)

Common Physical formatting tags
BOLD text <b>
This text is <b>very bold</b>
ITALIC text <i>
This text is <i>very italic</i>
You can nest the bold and italic tags like so
This text is <b><i>very bold and italic</i></b>
Underline
<u> and </u>

Strike through
<strike> and </strike>
Teletype (monospaced)
<tt> and </tt>
SuperScript
<sup> and </sup>
SubScript
<sub> and </sub>

Paragraph/Line/br Tags
You can break up blocks of text in your html document with paragraphs
Each paragraph will start at the beginning of a line (no need to use a <br> tag). The syntax is:
<p>Here is some text. Here is some text. Here is some text.
Here is some text.</p>
You can use a horizontal line to break up a page
<hr>
You can force a line break by using the <br> tag
First line<br>
Second line

Specifying a Font
Font tag syntax is
<font Size=n Color=c Face=“typeFace”></font>
For example
<font size=2 Color=Red Face=“Arial”>Albert Einstein</font>
The size here is not the actual font "point size" used
Size is a value between 1 and 7 with1 being the smallest, 7 being the largest. Contrast this with headings which range from 1 to 5 and get smaller as the number gets bigger :-)
The default font size is 3

Adding Images -1
The <IMG> tag creates an image in your web page
The src attribute identifies the location of the image: <img src ="cexp_logo.gif">
In this case, because no path information is provided, it is assumed to be in the same directory as the HTML file itself
Hint: you usually want to use a <br> tag before the <img> tag so the image will appear on its own line
To specify an image that resides somewhere on the WWW, just specify the URL like so:
<img s rc ="http://www.wrfportal.org/images/NOAA_logo.jpg">

Adding Images -2
The <IMG> tag has an optional <ALT> attribute which is text that is displayed if the browser has images disabled
Who would want to disable images?
Blind people!
They can't see images, but their special browsers can read the <ALT> text out loud
A few years ago, AOL was sued in a class action suit for not including enough <ALT> tags on their site
<img src="cottage.jpg" alt="my cottage in Fairplay">

Adding Images -3
Instead of creating your own images for a web page, sometimes you may just want to "borrow" an existing one from another website.
To do this, just
navigate to the website with the picture you like
right click on the image in IE and select "Save picture as". At this point, you can either copy the picture to your local machine or just note the name of the image
Cancel out of the "save" operation and right click on the web page and select the "View Source" option.
Once the source code is visible in notepad, search for the image name to determine its directory location

Adding Images -4
Additional and optional <IMG> tag attributes
Align=“Top | Middle|Bottom|Right” (image position within current line)
Width=pixels, Height=pixels (gives the image a fixed size)
border=pixels (places a border around the image, the default is no border)
HSpace=Pixels, VSpace=Pixels (create horizontal and vertical spaces around the image)
For example:
<img align="Top" HSpace=10 s rc ="NOAA_logo.jpg">

Exercise Two
Modify your FirstPage.html file so the page looks something like the picture below. Note: You don't have to use the Java logo--you can use any image you "borrow" from the web.

A Word On URLs
Whenever possible, it is better to use relative URLs
For example, use <img src="images/mypic.jpg"> instead of <img src="http://www.noaa.gov/docs/images/mypic.jpg">
Relative URLs allow us to move pages from one directory structure to another without worrying about updating all the links in our HTML code

Regular Hyperlinks
Hyperlinks (or links) enable people to click on an image or word in a web page and then "jump" to a new page.
Hyperlinks use an "anchor" (a) tag. The basic syntax is <a href="other_page.html"> click here </a> or <a href="http://www.ma.com/other.html"> click here </a>
The text highlighted in yellow ("click here" is the caption for the link).

Image Hyperlinks
You can also turn images into hyperlinks by imbedding an image inside an anchor tag. Here is an example:
<a href="http://www.wrfportal.org"><img src="logo.jpg"></a>

Lists
HTML provides for three kinds of lists
unordered list (list with bullets beside each item)
ordered list (list with numbers beside each item)
definition list (lists terms and their definitions)
Lists can be nested
You can have an ordered list inside a definition list, for example

Lists (Unordered)
<UL> Unordered List
Each list item uses the <li> tag
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>

Lists (Ordered)
<OL> Ordered List
Each list item uses the <li> tag
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>

Lists (Definition)
<DL> Definition List
Divided into <DT> (definition term) and <DD> (definition description tags
<dl>
<dt>first term</dt>
<dd>its definition</dd>
<dt>second term</dt>
<dt>third term</dt>
</dl>

Tables -1
Tables are used to format the majority of pages on the web
Tables can be nested within other tables (and often are)
Tables can have an invisible border (and often do when used to format or "lay out" a web page)
Tables are very powerful but can be tedious to code by hand. They are used to
format sections of web pages
Display tabular data
Create captions for images
Sidebars, etc.
You may need to create tables by hand when you write Servlets or JSPs which return dynamic web pages

Tables -2
Table tags
<table> and </table> tags specify a table
Each table row is specified using the <tr> and </tr> tags
For the text in each column, you use the table data (<td> and </td>) tags.
You can think of the table data as "cells" in a spreadsheet.
The <table>, <tr>, and <td> tags all support optional attributes

Tables -3
Simple Table Example
<table border=1>
<tr>
<td>Row 1, Col 1</td>
</tr>
<tr>
</tr>
</table>

Tables -4
The preceding code generates a table that looks like

Tables -5
Each "cell" or <td> tag can contain
Simple text
Text with HTML markup
Lists
Images
Links

Table Attributes
Optional <table> attributes
Border
bgcolor
Align={Left | Center | Right}
Table alignment within document
Width={pixels | percent}
How to indicate percent
Width in pixels or as a pct. of the document width
CellSpacing=length
Width of border around cells
CellPadding={length | percent}
White space between a cell border and data in the cell

Table Row Attributes
Optional <tr> attributes
Horizontal alignment of row
VAlign
Vertical alignment of row

Table Data Attributes
Optional <td> attributes
Width={Pixels | percent}
Height=Pixels
RowSpan=NumRows
Number of rows to span (one "cell" can span multiple rows in the table)
ColSpan=NumCols
Number of columns to span (one "cell" can span multiple columns in the table)
VAlign={Top | Middle | Bottom}
BGColor=ColorValue

Exercise Three (Tables)
Create a web page that looks like the picture below. Note that the Java icon should be a hyperlink to Sun's website!

HTML Forms -1
HTML forms allow you to place controls like check boxes, buttons and edit fields into your HTML documents
HTML forms allow for interactive web pages (the user fills out a form, clicks the submit button, and a new page is returned). For example:
A developer could fill out an HTML form to submit a SQL change to a DBA so he could review it
A customer could fill out an HTML form to request the status of an order he has place.

HTML Forms -2
There are distinct tasks involved in creating functional HTML forms
Creating the HTML form (the easy part)
Writing program code to process the form
Using Javascript (if you want the client to process the form)
Using a server application written in a language such as CGI, ASP, or Java
We'll cover this "task" when we get to the Servlets/JSP section of the course

HTML Forms -3
You create HTML forms using the <form> tag
There are two important attributes of the form tag which determine how (and which) program will process the HTML form
Action=“URL” (the URL of the programwhich will receive and process this form’s data)
Method=“Get | Post” (the manner in which data is sent to the server--more on this when we get to Servlets/JSPs)
<form action="http://cexp.com/CustomerServlet" method=get>
....
</form>

HTML Forms -4
Between the <form> and </form> tags, use form element tags to describe the form's input fields
Input fields include
text
check boxes
The general syntax for input field's is:
<input type=“elemType” name=“FieldName” size = size>
(Tip: Always name the fields – your program code will access
these fields using the names you specify here)

HTML Form Elements -1
Between the <form> and </form> tags, use form element tags to describe the form's input fields
Input fields include
text -- one line text field
CheckBox
Password -- text field which echoes * chars
Hidden -- used for storing info (usually state info)
Radio
Submit -- button sends form contents to action URL
Reset -- clears the form fields to defaults
Image -- image to click instead of submit button
Button -- generic button

HTML Form Elements -2
The general syntax for input field's is:
<input type=“elementType” name=“FieldName” size = size>

Text and Password Fields
Attributes for Text and Password fields
Value=“InitialValue” (initial value for the field)
MaxLength=N (max number of characters which may be entered into the field)
For example
<form>
User :<input type=“text” name=“user” size = 20> <br>
Passwd: <input type=“password” name=“pwd“ size = 20> <br>
</form>

Hidden Fields
Hidden fields are invisible to the user
Has a value attribute which stores its contents (and can be used as a variable)
Why use hidden fields?
The HTTP protocol is stateless. Each request / response is independent, with no memory of what happened on a previous page
So programmers use hidden fields to store information in HTML forms which was retrieved from a previous form
For example
HTML form requires user to enter a customer #
User then proceeds to a second form
How can the second form retrieve the customer #?
(Answer: store it in hidden fields on this second form)

CheckBox Fields
CheckBox Attributes
Value=“SomeValue” – its current value – this is what is returned to Java servlets/JSPs
Checked – Set to default the check box to "checked"
Examples
<form>
<input type=“Checkbox” Name=“FullTime” Value = “Yes”
Checked>FullTime<Br>
<input type=“CheckBox” Name=“Salaried” Value = “Yes”>
Salaried
</form>

Radio Button Fields
Radio Buttons Attributes
Name=“GroupName” (To group radio buttons, create several with Name set to the same string)
Value = “SomeValue” (value returned to server program)
Checked (indicates whether this radio button is selected)
Example
<form>
<input Type=“radio” Name=“Marital” checked>Single
<input Type=“radio” Name=“Marital”>Married
<input Type=“radio” Name=“Marital”>Divorced
</form>

Submit and Reset Fields
Submit Button Type (attribute)
Value=“String” (caption of the submit button, if left blank then the word "submit" is used)
Reset Button Type (attribute)
Value=“String” (caption of the reset button, if left blank then the word "reset" is used)
For example
<form>
<input Type=“Submit” Value=“Save record”><br>
<input Type=“Reset” Value=“Clear record”><br>
</form>

Button Fields
Button Type (attribute)
You can add regular buttons to a HTML form by using the button attribute to the input tag
You might use this to execute some custom program code (perhaps Javascript code)
This standard button type doesn't have any default behavior associated with it. If you add one to your HTML form without writing any event handler code, pushing the button won't result in any action.
<input type=button value="Close" onClick="window.close()">
Note: when you click on this button, the JavaScript code,
window.close() executes, closing the browser window.

Image Fields
Image Attributes (an image to use in place of the Submit button)
Src=“image url”
For example
<form>
<input type=“image” src=“submitpic.jpg”>
</form>

TextArea Element
<TextArea> tags create a multi-line input field (like a memo)
Note these are independent tags (not part of the <input> tag)
Attributes
Cols=N (number of columns)
Rows=N (number of rows)
For example
<form>
<textArea cols=20 rows=10>
Initial text in row 1
Initial text in row 2
</textArea>
</form>

Select Element -1
<Select> tags create combo boxes and list boxes
These are not part of the input tag
Within <Select> and </Select> tags, you specify <option> tags to list options
For example
<form>
<select>
<option>Broomfield
<option>Westminster
<option>Arvada
</select>
</form>

Select Element -2
<Select> attributes
Name=ElementName
Size=N (number of rows visible)
If N=1, then the select looks like a drop down combo box (this is the default value)
If N>1, then the select looks like a list box
Multiple (can the user select more than one item?)
Option Attribute
Selected (select this option initially)

Exercise Four (Forms)
Create a web form that looks like the image below. The "Clear Form" button should restore the form to its state before any information was typed in.

Cascading Style Sheets (CSS) -1
External Cascading Style Sheets (CSS)
Added with HTML 4.0
Allows you to override tag behavior by creating entries in a .css (text) file. This enables certain animation effects as well as allows web designers to make global "look and feel" changes to a website by editing a single .css file
CSS also let you place things by specifying an exact location on a page (using the pixel distance from the left and top of the browser window)

A CSS is just a text file with the .css extension. It contains a series of user defined tags or classes. Colors are given in RGB values (#RRGGBB). For example, you might have a CSS file called style.css :
.heading {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-weight: bold;
color: #258A00 ;
}
.bigheading {
font-size: 16px;
color: #254A00 ;
font-weight: bold;
}

You can link (or attach) the CSS into one or more of the web pages in your website.
<html>
<head>
<link href=" style.css " rel="stylesheet" type="text/css">
</head>
<body>
<p class="bigheading" > This paragraph will use the big heading
element defined in my style.css file</p>
</body>
</html>

You might have 80 html pages in your website with a total of 320 references to “bigheading”. If you decide you want to make bigheading a different color, you don’t have to edit 80 html files—just change the color in your style.css file like so
.bigheading {
font-size: 16px;
color: #333300 ;
font-weight: bold;
}

You can also define style sheets inside of individual web pages, although this isn’t done as often because most web designers prefer to make all the styles “global” inside a single .css file
There is a lot more to CSS than what we covered here
You can learn more about CSS at these websites:
http://www.htmlhelp.com/reference/css/
http://www.w3.org/MarkUp/Guide/Style

AJAX
AJAX = Asynchronous JavaScript And XML
Is based on JavaScript, HTML, and HTTP, so it does not require any browser plugins (like ActiveX, Java, or Flash)
With AJAX, JavaScript inside your web page communicates directly with the web server, using the JavaScript XMLHttpRequest object.
With this object, your JavaScript can trade data with a web server, without reloading the entire page (this makes your website much more responsive and “faster” appearing)
AJAX can update just a portion of your web page
AJAX was greatly popularized with the huge success of Google Maps. Many AJAX website exist on the web today

Topics Not Covered
Javascript
Standard client-side scripting language that enables simple animation, form validation, html re-writing, etc.
Java Applets and ActiveX
Frames
A web "page" can be subdivided into separate (and possibly scrollable) "frames"--each of which can contain a separate html file

Exercise Five (CSS)
Define two custom classes (tags) in an external CSS called style.css
“ NormalText” (should be medium sized and blue)
“ BigText” (should be large, bold, and a darker shade of blue)
Link (or attach) style.css to one of your existing web pages or a new one, and then test that both classes work

Java Training

by Sampetruda

Accessibility

Upload Details

Usage Rights

1 Embed 1

Statistics

Java Training Presentation Transcript