# Presentation: 681637

## 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/docsordocs = c:\inetpub\public\docs

## 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 fromhttp://www.cuteftp.com/
- Download TextPad shareware fromhttp://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>

## HTML Doc Structure -2

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

## HTML Doc Structure -3

- 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)
- <!-- Here is my comment -->

## Common Formatting Tags -2

- 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 Formatting Tags -3

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

## Common Formatting Tags -4

- 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>
-   <dd>its definition</dd>
-   <dt>third term</dt>
-   <dd>its definition</dd>
- </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>
-     <td>Row 1, Col 2</td>
-   </tr>
-   <tr>
-     <td>Row 2, Col 1</td>
-     <td>Row 2, Col 2</td>
-   </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
- Align={Left | Center | Right}
- 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)
- Align={Left | Center | Right}
- 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)

## Cascading Style Sheets (CSS) -2

- 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-family: Georgia, "Times New Roman", Times, serif;
-   font-size: 16px;
-   color: #254A00;
-   font-weight: bold;
- }

## Cascading Style Sheets (CSS) -3

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

## Cascading Style Sheets (CSS) -4

- 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-family: Georgia, "Times New Roman", Times, serif;
-   font-size: 16px;
-   color: #333300;
-   font-weight: bold;
- }

## Cascading Style Sheets (CSS) -5

- 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