Essential HTML

1
Essential HTML

• Proper nesting of tag pairs
• Always nest tag pairs inside other tag pairs
• lta hrefhttp//gtlth1gtHeadinglt/h1gtlt/agt
• Dont overlap tag pairs
• lta hrefhttp//gtlth1gtHeadinglt/agtlt/h1gt
• Indenting tags may improve readability and
  highlight any problems with nesting

2
Essential HTML

• Indenting source code to improve readability
• lthtmlgt
• ltheadgt
• lttitlegtMy First Web Page lt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHello world!lt/pgt
• lt/bodygt
• lt/htmlgt

3
Essential HTML

• Attributes for various HTML tags
• ltbodygt
• ltpgt
• ltfontgt
• ltimggt
• lthrgt
• Java Applets
• Testing Software / Programs

4
Attributes for ltbodygt

• Colors
• ltbody bgcolor white text darkbluegt
• Color name is one of a few predefined colors
• white black lightgrey grey darkgrey
• red pink orange yellow green
• silver gold lightblue blue darkblue
• Use good color combinations some are ghastly!

5
Attributes for ltbodygt

• Colors with more latitude for choices
• ltbody bgcolor ffffff text 000000gt
• Color specification is 3 pairs of hex digits
• Values for Red, Green, Blue (RGB) content
• 00 none
• ff full strength
• White ffffff All colors full strength
• Black 000000 No colors of any strength

6
Attributes for ltbodygt

• Background Image
• ltbody background"Cat 2x2.gif"gt
• Default Text Color
• ltbody text blackgt
• Hyperlink Colors
• ltbody linkred vlinkblue alinkgreengt

7
Attributes for ltpgt

• Alignment on page
• ltp aligncentergt
• attribute can be center, right, left
  (default)

8
Attributes for ltfontgt

• Font face
• ltfont facename1, name2gt (in priority order)
• Examples name can be Arial, Arial Narrow, Book
  Antiqua, Century Gothic, Courier, Garamond, Times
  New Roman, Verdana
• Font size
• ltfont size -3gt (Larger/smaller than
  default)

9
Attributes for ltimggt

• Size of image area (in pixels)
• ltimg src width500 height500gt
• (Caution on resolution of enlarged sizes)
• Border
• ltimg src border3gt
• (number is the size of the border around image)
• Horizontal and vertical space
• ltimg src hspace5 vspace10gt

10
Attributes for lthrgt

• Size of horizontal rule (in pixels)
• lthr size25gt
• Width of horizontal rule
• lthr width50gt
• Alignment of horizontal rule
• lthr width50 aligncentergt

11
More Tag Pairs

• Preformatted text, e.g. source code
• ltpregt lt/pregt
• ltcodegt lt/codegt
• Subscript
• ltsubgt lt/subgt
• Superscript
• ltsupgt lt/supgt

12
More Tag Pairs

• Quotes embedded in your text
• ltblockquotegt lt/blockquotegt
• Definitions
• ltdfngt lt/dfngt

13
Java Applets

• To create a Java Applet, you need a Java compiler
  to create a byte code file (.class file)
• javac Sailing.java ? Sailing.class
• Java compiler is NOT supplied with browser like
  the Javascript interpreter is
• To run a Java Applet, you only need the Java
  Virtual Machine (JVM) and a byte code file
• The JVM is included in all modern browsers
• JVM interprets a byte code file loaded from server

14
Java Applets

• Applet invocation tag pair in an HTML file
• ltapplet codeSailing width700 height350gt
• ltparam nameAuthor valueBob Wilsongt
• lt/appletgt
• Tells the browser the name of byte code file
• Sets window size to 7 wide by 3.5 high
• Provides author name parameter to Applet

15
Java Applets

• Download byte code file for Sailing applet from
  my web site to your disk
• Add ltappletgt call tags to your HTML file
• Save your HTML file on your disk
• Open your HTML file with Netscape
• Surprise!

16
Testing Programs

• Testing programs is an art AND a science!
• Although you may never write software or code,
  you may be called upon to test it often
• The key to good testing is to envision all of the
  required test cases
• Lets look at the homework assignment now
• Do it before next class! Well discuss it then