include/jscripts/infusion/components/uiOptions/html/UIOptionsPreview.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns="http://www.w3.org/1999/xhtml">\r
   3         <head>\r
   4                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
   5                 <title>UI Options Preview Content</title>\r
   6         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset.css" />\r
   7         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />\r
   8         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />\r
   9         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hc.css" />\r
  10         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-hci.css" />\r
  11         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-slate.css" />\r
  12         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-coal.css" />\r
  13         <link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-theme-mist.css" />\r
  14         <link rel="stylesheet" type="text/css" href="../css/UIOptionsPreview.css" />\r
  15 \r
  16         </head>\r
  17         <body class="fl-uiOptions-previewContent">\r
  18         <h1>Web Pages</h1>\r
  19         <img src="../images/mintleaf.png" alt="Mint Leaf" title="This is a mint leaf" />\r
  20         <p>A <b>web page</b> or <b>webpage</b> is a <strong>resource of information</strong> that is suitable for the World Wide Web and can be accessed through a web browser. This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links.</p>\r
  21         <h2>Color, typography, illustration and interaction</h2>\r
  22         <p><a href="#">Web pages</a> usually include instructions as to the colors of text and backgrounds and very often also contain links to images and sometimes other media to be included in the final view.</p>\r
  23         <h2>Elements of a webpage</h2>\r
  24         <ol>\r
  25             <li>Textual\r
  26                 <ul>\r
  27                     <li><a href="#">content with a textual representaion</a></li>\r
  28                 </ul>\r
  29             </li>\r
  30             <li>Non-textual\r
  31                 <ul>\r
  32                     <li>Static and Animated imagery</li>\r
  33                     <li>Audio</li>\r
  34                     <li>Video</li>\r
  35                 </ul>\r
  36             </li>\r
  37             <li>Interactive\r
  38                 <ul>\r
  39                     <li>Forms</li>\r
  40                     <li><a href="#">Hyperlinks</a></li>\r
  41                 </ul>\r
  42             </li>\r
  43             <li>Hidden</li>\r
  44         </ol>\r
  45         <h3>Breakdown of webpage markup</h3>\r
  46         <table>\r
  47             <thead>\r
  48                 <tr>\r
  49                     <th>Tag</th>\r
  50                     <th>Meaning</th>\r
  51                     <th>Deprecated</th>\r
  52                 </tr>\r
  53             </thead>\r
  54             <tbody>\r
  55                 <tr>\r
  56                     <td><pre>&lt;B&gt;</pre></td>\r
  57                     <td>Make an element as BOLD</td>\r
  58                     <td><input type="checkbox" checked="checked" disabled="disabled" /></td>\r
  59                 </tr>\r
  60                 <tr>\r
  61                     <td><pre>&lt;I&gt;</pre></td>\r
  62                     <td>Show an element in ITALICS</td>\r
  63                     <td><input type="checkbox" checked="checked" /></td>\r
  64                 </tr>\r
  65                 <tr>\r
  66                     <td><pre>&lt;EM&gt;</pre></td>\r
  67                     <td>EMPHASIZE an element</td>\r
  68                     <td><input type="checkbox" disabled="disabled" /></td>\r
  69                 </tr>\r
  70                 <tr>\r
  71                     <td><pre>&lt;STRONG&gt;</pre></td>\r
  72                     <td>Use STRONG EMPHASIS for an element</td>\r
  73                     <td><input type="checkbox" /></td>\r
  74                 </tr>\r
  75             </tbody>\r
  76             <tfoot>\r
  77                 <tr>\r
  78                     <th>Tag</th>\r
  79                     <th>Meaning</th>\r
  80                     <th>Deprecated</th>\r
  81                 </tr>\r
  82             </tfoot>\r
  83         </table>\r
  84         </body>\r
  85 </html>\r