Java Training Introduction to HTML

1
Java TrainingIntroduction to HTML

• Written by Jeff Smith

2
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

3
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

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

5
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

6
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

7
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

8
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.org80/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

9
URLs -5

• Java Servlet Example
• To request a dynamic page in your URL, you
  request a URL like so
• http//www.softtechdesign.com/softtech/GuestBookSe
  rvlet
• 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

10
Getting Web Pages With URLs
11
HTML Development Tools

• You can write HTML in many ways
• Using a text editor like Notepad, TextPad, or
  CuteHTML
• Download CuteHTML shareware fromhttp//www.cuteft
  p.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

12
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

13
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

14
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

15
HTML Tags-1

• HTML documents are comprised of tags (elements)
  and text content
• Tags take one of two formats
• .....
• 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 and a
  (bold tag)
• HTML tags are NOT case sensitive
• Indenting your HTML code is not required, but it
  does make your code more readable

16
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

17
HTML Doc Structure -1

• HTML documents are generally split into two
  sections a head and a body.
• My First HTML Page
• Isn't my web page interesting

18
HTML Doc Structure -2

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

19
HTML Doc Structure -3

• The body tag can contain the following attributes
• bgcolorcolor (specifies a background color for
  the page)
• textcolor (text color)
• linkcolor (hyperlinks color)
• alinkcolor (activated links color)
• vlinkcolor (visited links color)
• 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

20
HTML Development Tip

• When learning HTML and testing your pages, its
  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 dont close NotePad!)
• To view your changes, press F5 (refresh) in IE
• This will reload the page from disk

21
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 appears as the IE window
  title
• Extra credit set the background of your page
  "yellow"

22
Common Formatting Tags -1

• You can jazz up your page with some additional
  tags
• Headings
• the biggest heading
• the second biggest heading
• the smallest heading
• 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
  
  tag
• The
  tag doesn't have a corresponding
  
  tag
• HTML comments (just like XML)

23
Common Formatting Tags -2

• Text can be formatted in three basic ways
• Usage -- suggest the way text should look by its
  usage (e.g. 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 or italic )
• By using style sheets (e.g. CSS -- cascading
  style sheets)

24
Common Formatting Tags -3

• Common Physical formatting tags
• BOLD text
• This text is very bold
• ITALIC text
• This text is very italic
• You can nest the bold and italic tags like so
• This text is very bold and italic
• Underline
• and

25
Common Formatting Tags -4

• Strike through
• and
• Teletype (monospaced)
• and
• SuperScript
• and
• SubScript
• and

26
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
  tag). The syntax is
• Here is some text. Here is some text. Here is
  some text.
• Here is some text.
• You can use a horizontal line to break up a page
• You can force a line break by using the
  tag
• First line
  
• Second line

27
Specifying a Font

• Font tag syntax is
• For example
• Albert
  Einstein
• 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

28
Adding Images -1

• The tag creates an image in your web page
• The src attribute identifies the location of the
  image
• 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
  tag before
  the 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
• o.jpg"

29
Adding Images -2

• The tag has an optional 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 text out loud
• A few years ago, AOL was sued in a class action
  suit for not including enough tags on their
  site
• Fairplay"

30
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

31
Adding Images -4

• Additional and optional tag attributes
• AlignTopMiddleBottomRight (image position
  within current line)
• Widthpixels, Heightpixels (gives the image a
  fixed size)
• borderpixels (places a border around the image,
  the default is no border)
• HSpacePixels, VSpacePixels (create horizontal
  and vertical spaces around the image)
• For example

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

33
A Word On URLs

• Whenever possible, it is better to use relative
  URLs
• For example, use
  instead of
  es/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

34
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 isclick
  hereorclick here
• The text highlighted in yellow ("click here" is
  the caption for the link).

35
Image Hyperlinks

• You can also turn images into hyperlinks by
  imbedding an image inside an anchor tag. Here is
  an example
• src"logo.jpg"

36
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

37
Lists (Unordered)

• Unordered List
  • Each list item uses the
  • tag
  • • first item
    • second item
    • third item
  
  38
  Lists (Ordered)
  • Ordered List
    1. Each list item uses the
    2. tag
    3. 2. first item
       4. second item
       6. third item
  
  39
  Lists (Definition)
  • Definition List
  • Divided into (definition term) and
    (definition description tags
  • first term
  • its definition
  • second term
  • its definition
  • third term
  • its definition
  
  40
  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
  
  41
  Tables -2
  • Table tags
  • and tags specify a table
  • Each table row is specified using the and
    tags
  • For the text in each column, you use the table
    data ( and ) tags.
  • You can think of the table data as "cells" in a
    spreadsheet.
  • The , , and tags all support
    optional attributes
  
  42
  Tables -3
  • Simple Table Example
  • Row 1, Col 1
  • Row 1, Col 2
  • Row 2, Col 1
  • Row 2, Col 2
  
  43
  Tables -4
  • The preceding code generates a table that looks
    like
  
  44
  Tables -5
  • Each "cell" or tag can contain
  • Simple text
  • Text with HTML markup
  • Lists
  • Images
  • Links
  
  45
  Table Attributes
  • Optional attributes
  • Border
  • bgcolor
  • AlignLeft Center Right
  • Table alignment within document
  • Widthpixels percent
  • How to indicate percent
  • Width in pixels or as a pct. of the document
    width
  • CellSpacinglength
  • Width of border around cells
  • CellPaddinglength percent
  • White space between a cell border and data in the
    cell
  
  46
  Table Row Attributes
  • Optional attributes
  • AlignLeft Center Right
  • Horizontal alignment of row
  • VAlign
  • Vertical alignment of row
  
  47
  Table Data Attributes
  • Optional attributes
  • WidthPixels percent
  • HeightPixels
  • RowSpanNumRows
  • Number of rows to span (one "cell" can span
    multiple rows in the table)
  • ColSpanNumCols
  • Number of columns to span (one "cell" can span
    multiple columns in the table)
  • AlignLeft Center Right
  • VAlignTop Middle Bottom
  • BGColorColorValue
  
  48
  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!
  
  49
  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.
  
  50
  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
  
  51
  HTML Forms -3
  • You create HTML forms using the tag
  • There are two important attributes of the form
    tag which determine how (and which) program will
    process the HTML form
  • ActionURL (the URL of the programwhich will
    receive and process this forms data)
  • MethodGet Post (the manner in which data is
    sent to the server--more on this when we get to
    Servlets/JSPs)
  • methodget
  • ....
  
  52
  HTML Forms -4
  • Between the and 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
  • size
  • (Tip Always name the fields your program code
    will access
  • these fields using the names you specify here)
  
  53
  HTML Form Elements -1
  • Between the and 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
  
  54
  HTML Form Elements -2
  • The general syntax for input field's is
  • size
  
  55
  Text and Password Fields
  • Attributes for Text and Password fields
  • ValueInitialValue (initial value for the
    field)
  • MaxLengthN (max number of characters which may
    be entered into the field)
  • For example
  • User20
    
  • Passwd20
    
  
  56
  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)
  
  57
  CheckBox Fields
  • CheckBox Attributes
  • ValueSomeValue its current value this is
    what is returned to Java servlets/JSPs
  • Checked Set to default the check box to
    "checked"
  • Examples
  • Yes
  • CheckedFullTime
    
  • Yes
  • Salaried
  
  58
  Radio Button Fields
  • Radio Buttons Attributes
  • NameGroupName (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
  • checkedSingle
  • Married
  • Divorced
  
  59
  Submit and Reset Fields
  • Submit Button Type (attribute)
  • ValueString (caption of the submit button, if
    left blank then the word "submit" is used)
  • Reset Button Type (attribute)
  • ValueString (caption of the reset button, if
    left blank then the word "reset" is used)
  • For example
  • 
    
  • 
    
  
  60
  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.
  • onClick"window.close()"
  • Note when you click on this button, the
    JavaScript code,
  • window.close() executes, closing the browser
    window.
  
  61
  Image Fields
  • Image Attributes (an image to use in place of the
    Submit button)
  • Srcimage url
  • For example
  
  62
  TextArea Element
  • tags create a multi-line input field
    (like a memo)
  • Note these are independent tags (not part of the
    tag)
  • Attributes
  • ColsN (number of columns)
  • RowsN (number of rows)
  • For example
  • Initial text in row 1
  • Initial text in row 2
  
  63
  Select Element -1
  • tags create combo boxes and list boxes
  • These are not part of the input tag
  • Within and tags, you specify
    tags to list options
  • For example
  • Broomfield
  • Westminster
  • Arvada
  
  64
  Select Element -2
  • attributes
  • NameElementName
  • SizeN (number of rows visible)
  • If N1, then the select looks like a drop down
    combo box (this is the default value)
  • If N1, then the select looks like a list box
  • Multiple (can the user select more than one
    item?)
  • Option Attribute
  • Selected (select this option initially)
  
  65
  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.
  
  66
  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)
  
  67
  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
  
  68
  Cascading Style Sheets (CSS) -3
  • You can link (or attach) the CSS into one or more
    of the web pages in your website.
  • type"text/css"
  • This paragraph will
    use the big heading
  • element defined in my style.css file
  
  69
  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 dont have to edit 80 html filesjust
    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
  
  70
  Cascading Style Sheets (CSS) -5
  • You can also define style sheets inside of
    individual web pages, although this isnt 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
  
  71
  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
  
  72
  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
  
  73
  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