1<!DOCTYPE html>
   2<html lang="en-US">  <!-- Set language of this page to USA English. -->
   3
   4    <!-- ===========================================================================================
   5    |
   6    | NAME
   7    |
   8    |     webDesign.html
   9    |
  10    | DESCRIPTION
  11    |
  12    |     Examples of my web page design.
  13    |     It is a hand-crafted HTML 5 W3C validated document.
  14    |
  15    | AUTHOR
  16    |
  17    |    Sean Erik O'Connor
  18    |
  19    ============================================================================================ -->
  20
  21    <head>
  22        <!-- This page uses Unicode characters. -->
  23        <meta charset="utf-8">
  24
  25        <!-- Set viewport to actual device width.  Any other settings makes the web page initially appear zoomed-in on mobile devices. -->
  26        <meta name="viewport" content="width=device-width, initial-scale=1">
  27
  28        <!-- Titles appear in the web browser and the browser's bookmarks. -->
  29        <title>DESIGN OF MY WEB PAGE</title>
  30
  31        <!-- Search engines will show this description below the title. -->
  32        <meta name="description" content="Examples of HTML, CSS, JavaScript used in my web page design." >
  33
  34        <meta name="author" content="Sean Erik O'Connor" >
  35
  36        <meta name="copyright" content="Copyright (C) 1999-2025 by Sean Erik O'Connor.  All Rights Reserved.">
  37
  38        <!-- Configure and load MathJax -->
  39        <script src="../Scripts/load-mathjax.js" async></script>
  40
  41        <!-- Cascading style sheet for this document. -->
  42        <link rel="stylesheet" href="../StyleSheet.css" type="text/css">
  43
  44        <!-- Favicons are 32x32 or 16x16, 8 or 24 bit PNG Images which show up left of the web page title in a browser.  -->
  45        <link rel="icon" type="image/png" href="../Images/favicon.png">
  46
  47        <!-- JavaScript email utility.  -->
  48        <script src="../Scripts/email.js"></script>
  49    </head>
  50
  51    <body class="technicalReport">
  52
  53        <!-- This wraps the whole body in a CSS grid. -->
  54        <div class="wrapper technicalReport">
  55
  56            <!-- Title page at the top.  -->
  57            <header class="title">
  58                <h1 class="stylish">Web Page Design Examples</h1>
  59                <hr>
  60            </header>
  61
  62            <!-- Horizontal navigation bar to all top level pages. -->
  63            <header class="navigation">
  64                <a href="../index.html">
  65                    <img src="../Images/home.png" alt="Home Page Button." width="32" height="32" >
  66                     <em>Home</em>
  67                 </a>
  68
  69                 <a href="../Mathematics/mathematicalSoftware.html">
  70                     <img src="../Images/compactDisk.png" alt="Mathematical Software Button." width="32" height="32" >
  71                      <em>Mathematical Software</em>
  72                 </a>
  73
  74                 <a href="../Art/Art.html">
  75                     <img src="../Images/sampleArtLowRes.png" alt="Art Button." width="32" height="32" >
  76                      <em>Fine Arts</em>
  77                 </a>
  78
  79                 <a href="webPageDesign.html">
  80                     <img src="../Images/home.png" alt="Web Design Button." width="32" height="32" >
  81                      <em>Web Page Design</em>
  82                 </a>
  83
  84                 <a href="../Electronics/Electronics.html">
  85                     <img src="../Images/sparkCoil.png" alt="Hobby Electronics Button." width="32" height="32" >
  86                      <em>Hobby Electronics</em>
  87                 </a>
  88
  89                 <a href="../ReadingList/readingList.html">
  90                      <img src="../Images/terraApollo17NASALowRes.png" alt="Reading List Button." width="32" height="32">
  91                      <em>Reading list</em>
  92                </a>
  93            </header>
  94
  95            <!-- A decorative border at the left side of the page. -->
  96            <aside class=border>
  97                  <img class="border" src="../Images/sinXYPlot.png" alt="Sin( x y ) Image Border.">
  98            </aside>
  99
 100            <!-- Table of contents in a navigation side bar using local hyperlinks within the page to each section. -->
 101            <nav>
 102                <ul>
 103                    <li><a href="#Introduction">Introduction</a></li>
 104                    <li><a href="#ContentAndGraphicDesign">Content And Graphic Design</a></li>
 105                    <li><a href="#DirectoryStructure">Directory Structure</a></li>
 106                    <li><a href="#Hypertext">Hypertext</a></li>
 107                    <li><a href="#JavaScript">JavaScript</a></li>
 108                    <li><a href="#StyleSheets">StyleSheets</a></li>
 109                    <li><a href="#ServerSide">Server Side</a></li>
 110                    <li><a href="#Basics">Basics</a></li>
 111                    <li><a href="#Headers">Headers</a></li>
 112                    <li><a href="#Email">email</a></li>
 113                    <li><a href="#Navigation">Navigation</a></li>
 114                    <li><a href="#Hyperlinks">Hyperlinks</a></li>
 115                    <li><a href="#InlineStyles">Inline Styles</a></li>
 116                    <li><a href="#ParagraphStyles">Paragraph Styles</a></li>
 117                    <li><a href="#Lists">Lists</a></li>
 118                    <li><a href="#Scrollbox">Scroll Box</a></li>
 119                    <li><a href="#Images">Images</a></li>
 120                    <li><a href="#Tables">Tables</a></li>
 121                    <li><a href="#Tooltips">Tooltips</a></li>
 122                    <li><a href="#Gallery">Gallery</a></li>
 123                    <li><a href="#Movies">Movies</a></li>
 124                    <li><a href="#Forms">Forms</a></li>
 125                    <li><a href="#SVG">SVG</a></li>
 126                    <li><a href="#Canvas">Canvas</a></li>
 127                    <li><a href="#GoogleSearch">Google Search</a></li>
 128                    <li><a href="#TypesettingMathematics">Typesetting Mathematics</a></li>
 129                    <li><a href="#Maintainance">Maintainance</a></li>
 130                    <li><a href="#DevelopmentEnvironment">Development Environment</a></li>
 131                    <li><a href="#Hosting">Hosting</a></li>
 132                    <li><a href="#Viewing">Viewing</a></li>
 133                    <li><a href="#GettingListed">Getting Listed</a></li>
 134                    <li><a href="#Communicating">Communicating</a></li>
 135                </ul>
 136            </nav>
 137
 138            <!-- The main content of this page. -->
 139            <article id="TopOfPage" class="content">
 140                <h2 style="display: none ;">&nbsp;</h2> <!-- Keep the W3C HTML syntax police from arresting this article with a dummy heading. -->
 141
 142                <section>
 143                    <h3 id="Introduction">Introduction</h3>
 144
 145                    <p>
 146                        I explain all the steps involved in creating, designing, hosting and maintaining my web pages.
 147                    </p>
 148                </section>
 149
 150                <section>
 151                    <h3 id="ContentAndGraphicDesign">Content and Graphic Design</h3>
 152
 153                    <p>
 154                        <strong>Content</strong> is the most important, but your web page should be pleasant to read.  
 155                        I use the design advice in
 156                        <a href="https://learningwebdesign.com/">
 157                        Learning Web Design, 4th Edition, A Beginner's Guide to HTML, CSS, JavaScript,
 158                        and Web Graphics by Jennifer Niederst Robbins</a>
 159                    </p>
 160
 161                    <p>
 162                    <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsive Web Design</a>
 163                    is a collection of fluid techniques which make web pages look good on both mobile or laptop screens.
 164                    CSS tools such as <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">flexboxes</a> and
 165                    <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">grids</a> are a big part of fluid positioning.
 166                    Web browsers have built-in developer tools which simulate different mobile and laptop screens.
 167                    </p>
 168
 169                    <p>
 170                    I've used Mathematica to create <a href="../Images/WebSiteBackgroundPictures.nb.pdf">graphic designs</a> 
 171                    for my web pages and business cards.
 172                    </p>
 173                </section>
 174
 175                <section>
 176                    <h3 id="DirectoryStructure">Directory Structure</h3>
 177
 178                    <p>
 179                    The main web page <em>index.html</em> goes in the top level directory.
 180                    All other items are sorted into subdirectories.  
 181                    For example, images go into directories named <em>/Images</em>.  Image files are of type .png or .jpg.
 182                    </p>
 183                </section>
 184
 185                <section>
 186                    <h3 id="Hypertext">Hypertext</h3>
 187
 188                    <p>
 189                        Web pages are written in
 190                        <a href="https://www.w3.org/TR/html/">HTML 5</a>
 191                        using guidance from the book 
 192                            <a href="http://diveintohtml5.it/">Diving into HTML 5</a>
 193                        with occasional use of 
 194                            <a href="http://www.unicode.org/charts/">unicode</a>
 195                        I edit pages with the
 196                            <a href="https://www.vim.org/">Vim</a>
 197                        text editor for which I've written simple vim scripts to help edit html and css.
 198                        I <a href="http://validator.w3.org">validate</a> the html using file upload and 
 199                        <a href="https://validator.w3.org/checklink">link check</a> the web page once it's on my web server 
 200                       using
 201                            <a href="https://www.w3.org/">W3C</a>'s services.
 202                    </p>
 203                </section>
 204
 205                <section>
 206                    <h3 id="JavaScript">JavaScript</h3>
 207
 208                    <p> 
 209                        I use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> in my web pages.
 210                        The JavaScript language has no classes, inheritance, constructors or instances;
 211                        there are only objects and delegation along the prototype chain.  
 212                        The commonly used <i>constructor function + new pattern</i> is very misleading and unnecessarily complex.
 213                        So forget classes+instances and read about
 214                        <a href="https://alistapart.com/article/prototypal-object-oriented-programming-using-JavaScript/">prototypal object oriented programming</a> 
 215                        and 
 216                        <a href="https://www.toptal.com/javascript/javascript-prototypes-scopes-and-performance-what-you-need-to-know">prototypes and performance</a> for an introduction.
 217                        Then read this series of books which explain 
 218                        <a href="https://github.com/getify/You-Dont-Know-JS">basic JS concepts</a>.
 219                        Many textbooks like the excellent 
 220                        <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a>.
 221                        use the syntactic sugar which makes JS appear to be an OO language like C++ when itst core behavior is very different.
 222                    </p>
 223                </section>
 224
 225                <section>
 226                    <h3 id="StyleSheets">Style Sheets</h3>
 227
 228                    <p>
 229                        My documents use 
 230                        <a href="https://www.w3.org/Style/CSS/">CSS level 3 + SVG style sheets</a>.
 231                        I have one CSS
 232                            <a href="../StyleSheet.css.html">style sheet</a>
 233                        for all my documents, which I
 234                        <a href="https://jigsaw.w3.org/css-validator/">validate</a>.
 235                        you can see an example of using styles in my HTML file
 236                            <a href="webPageDesign.html.html">webPageDesign.html</a>
 237                    </p>
 238                    <p>
 239                        You can use Firefox's web developer tools 
 240                        <em class="hotkey">Tools &#10148; Browser Tools &#10148; Web Developer Tools &#10148; Inspector</em>
 241                        to debug your CSS stylesheet.  You can point to HTML elements and see which style get inherited from which selectors.
 242                    </p>
 243                    <img class="centeredsmaller" src="Images/StyleSheetDebuggerFirefox.jpg" alt="Firefox web developer tools.">
 244
 245                </section>
 246
 247                <section>
 248                    <h3 id="ServerSide">Server Side</h3>
 249
 250                    <p>
 251                        My server uses <em>Apache</em>.  Here are some server side fixups and optimizations 
 252                        which go into the 
 253                            <a href="https://httpd.apache.org/docs/current/howto/htaccess.html">.htaccess</a>.
 254                        file which in the top level directory of the web site.
 255                    </p>
 256
 257                    <ol>
 258                        <li>
 259                            Specify a <a href="../error404.html">personal error 404 page</a> for broken links and
 260                            <a href="http://nosuchpage.html">test it out here</a>
 261                        </li>
 262
 263                        <li>
 264                            My host's Apache web server didn't recognize the C language header .h and Mathematica .nb 
 265                            file file types and was not allowing access to the files.
 266                            So I added the file extension type into my top-level .htaccess file on the server,
 267                        </li>
 268
 269                        <li>
 270                            Server compresses web file types before sending.
 271                            The client side browsers will decompress it.
 272                        </li>
 273
 274                        <li>
 275                            Server tells browsers to cache files locally for faster page loading.
 276                        </li>
 277                    </ol>
 278
 279                    <p>
 280                    I use FileZilla ftp to manually upload the .htaccess file.  I upload all rest of the files with my
 281                    Python script <a href="#Maintainance">updateweb.py</a>  And here are some additional 
 282                    <a href="FreeserversFixes.pdf">Tips and Tricks</a> for my server.
 283                    </p>
 284
 285                    <div class="scrollBox"> <div class="scrollBoxContent">
 286                        # BEGIN ERROR DOCUMENT
 287                        # Personalized error document for broken links.
 288                        # See https://httpd.apache.org/docs/2.4/custom-error.html
 289                        ErrorDocument 404 /error404.html
 290                        # END ERROR DOCUMENT
 291
 292                        # BEGIN ADD MIME TYPE FOR FILES
 293                        # Tell the server to support a particular MIME type.
 294                        # See https://httpd.apache.org/docs/2.4/mod/mod_mime.html#addtype
 295                        &amp;lt;FilesMatch "\.(h)$"&amp;gt;
 296                        &amp;lt;IfModule mod_headers.c&amp;gt;
 297                        Header set Access-Control-Allow-Origin "*"
 298                        &amp;lt;IfModule&amp;gt;
 299                        &amp;lt;FilesMatch&amp;gt;
 300                        AddType text/plain h
 301                        AddType text/plain nb
 302                        Addtype text/plain for
 303                        Addtype text/plain FOR
 304                        # END ADD MIME TYPE FOR FILES
 305
 306                        # BEGIN DEFLATE COMPRESSION
 307                        # Server will compress these MIME file types.  Browser will decompress.
 308                        # See http://httpd.apache.org/docs/current/mod/mod_deflate.html
 309                        &amp;lt;ifmodule mod_deflate.c&amp;gt;
 310                        AddOutputFilterByType DEFLATE text/text text/html text/plain 
 311                        text/xml text/css application/x-JavaScript application/JavaScript
 312                        &amp;lt;ifmodule&amp;gt;
 313                        # END DEFLATE COMPRESSION
 314
 315                        ## BEGIN BROWSER CACHING
 316                        # Ask the user's browser to cache certain file types for a limited time after 
 317                        # the first web page visit.  The server can then avoid resending them and page
 318                        # loads will be faster.  After the expiration time, files will be sent again.
 319                        # See http://httpd.apache.org/docs/current/mod/mod_expires.html
 320                        &amp;lt;IfModule mod_expires.c&amp;gt;
 321                        ExpiresActive On
 322                        ExpiresByType image/jpg "access plus 1 day"
 323                        ExpiresByType image/jpeg "access plus 1 day"
 324                        ExpiresByType image/gif "access plus 1 week"
 325                        ExpiresByType image/png "access plus 1 day"
 326                        ExpiresByType text/css "access plus 1 week"
 327                        ExpiresByType application/pdf "access plus 1 week"
 328                        ExpiresByType text/x-JavaScript "access plus 1 day"
 329                        ExpiresByType application/x-shockwave-flash "access plus 1 month"
 330                        ExpiresByType image/x-icon "access plus 1 week"
 331                        ExpiresDefault "access plus 2 days"
 332                        &lt;IfModule&gt;
 333                        ## END BROWSER CACHING
 334                    </div> </div>
 335                </section>
 336
 337                <section>
 338                    <h3 id="Basics">Basics</h3>
 339
 340                    <p>
 341                    You can't see the paragraph's margins, since they are transparent, but the top margin is from the bottom of this line 
 342                    to the paragraph's dashed border below.  
 343                    And the paragraph's left margin is from edge of page (the body) to the paragraph's left dashed border.
 344                    </p>
 345            
 346                    <p class="example">
 347                    This is a paragraph illlustrating contents, padding, border and margin.  Contents is white text with a blue
 348                    background.  Padding surrounds the contents and is the same color as the background.  
 349                    Padding extends into the light red dashed border by default.
 350                    Margin surrounds the border and is transparent.
 351                    I've turned on outlining (green dotted line) to show where the border ends and the margin begins.
 352                    </p>
 353
 354                    <p class="example" style="background-clip: padding-box;">
 355                    But now I've added the <small>CSS style modifier &lt;p class="example" style="background-clip: padding-box;"&gt;</small>A
 356                    which makes the padding stop short of the border.  The margin surrounds the border and is transparent.
 357                    </p>
 358
 359                </section>
 360
 361                <section>
 362                    <h3 id="Headers">Headers</h3>
 363                    
 364                    <!-- For illustration only.  HTML checkers will bark about placing a heading out of order -->
 365                    <h1 class="stylish">&lt;h1 class=&quot;stylish&quot;&gt;Stylish Header&lt;/h1&gt;</h1>
 366
 367                    <h2>&lt;h2&gt;h2 header&lt;/h2&gt;</h2>
 368                    <h3>&lt;h3&gt;h3 header&lt;/h3&gt;</h3>
 369                    <h4>&lt;h4&gt;h4 header&lt;/h4&gt;</h4>
 370                    <h5>&lt;h5&gt;h5 header&lt;/h5&gt;</h5>
 371                    <h6>&lt;h6&gt;h6 header&lt;/h6&gt;</h6>
 372                </section>
 373
 374                <section>
 375                    <h3 id="Email">Email</h3>
 376
 377                    This is an email header:
 378
 379                    <h2 class="email">
 380                        <!-- JavaScript for hiding my email address from spambots yet it works as usual. -->
 381                        <script>
 382                            <!--
 383                            // Insert email address into this file's HTML.
 384                            var mailMessage = '<em>' + "email" + '</em>' ;
 385                            document.write( mailto( mailMessage ) ) ;
 386                            // -->
 387                        </script> 
 388                        me if you have questions or comments.
 389                    </h2>
 390
 391                    produced with this code in the head:
 392
 393                    <div class="scrollBox"> <div class="scrollBoxContent">
 394                        &lt;!-- JavaScript email utility --&gt;
 395                        &lt;script src="../Scripts/email.js"&lt;&gt;/script&gt;
 396                    </div> </div>
 397
 398                    and this code in the body:
 399                    
 400                    <div class="scrollBox"> <div class="scrollBoxContent">
 401                        &lt;!-- JavaScript for hiding my email address from spambots yet it works as usual. --&gt;
 402                        &lt;script&gt;
 403                        &lt;!--
 404                        // Insert email address into this file's HTML.
 405                        var mailMessage = '&lt;em&gt;' + "email" + '&lt;/em&gt;' ;
 406                        document.write( mailto( mailMessage ) ) ;
 407                        // --&gt;
 408                        &lt;/script&gt; 
 409                        me if you have questions or comments.
 410                    </div> </div>
 411                </section>
 412                
 413                <section>
 414                   <h3 id="Navigation">Navigation</h3>
 415                  
 416                   The navigation sidebar on the left was produced with this code:
 417
 418                   <div class="scrollBox"> <div class="scrollBoxContent">
 419                       &lt;nav&gt;
 420                       &lt;ul&gt;
 421                       &lt;li&gt; List item &lt;/li&gt;
 422                       ...
 423                       &lt;li&gt; List item &lt;/li&gt;
 424                       &lt;/ul&gt;
 425                       &lt;/nav&gt;
 426                   </div> </div>
 427
 428                A special "back to top" navigation button
 429
 430                <nav class="backtotop"><a href="#TopOfPage">Back to top</a></nav>
 431
 432                Used this way with a link:
 433
 434                <div class="scrollBox"> <div class="scrollBoxContent">
 435                 &lt;article id="TopOfPage" class="content"&gt;
 436                ...
 437                &lt;nav class="backtotop"&gt; &lt;a href="#TopOfPage"&gt;Back to top&lt;/a&lt;&gt;&lt;/nav&gt;
 438                </div></div>
 439                </section>
 440
 441                <section>
 442                    <h3 id="Hyperlinks">Hyperlinks</h3>
 443
 444                    <ul>
 445                        <li>
 446                        <a href="webPageDesign.html" title="I am the tooltip text!">Hyperlink to this page itself.</a>
 447                        Hover over the link to see the tooltip! 
 448                        </li>
 449                    </ul>
 450
 451                    <img class="centeredsmallest" src="Images/htmlToolTip.jpg" alt="Tooltip image.">
 452
 453                    <div class="scrollBox"> <div class="scrollBoxContent">
 454                        &lt;ul&gt;
 455                        &lt;li&gt;
 456                        &lt;a href="webDesign.html" title="I am the tooltip text!"&gt;Hyperlink to this page itself.&lt;a&gt;
 457                        Hover over the link to see the tooltip!
 458                        &lt;/li&gt;
 459                        &lt;/ul&gt;
 460                    </div> </div>
 461
 462                    <p class="box">
 463                    Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad.  
 464                    They are not supported on mobile devices right now.
 465                    </p>
 466
 467                </section>
 468
 469                <section>
 470                    <h3 id="InlineStyles">Inline Styles</h3>
 471
 472                    <h4>Fonts and Font Styles</h4>
 473
 474                        <p>
 475                        <span style="font-size: 1.8rem; font-family: var(--serif);"> serif</span> &blacklozenge;
 476                        <span style="font-size: 1.5rem; font-family: var(--san-serif);"> san-serif</span> &blacklozenge;
 477                        <span style="font-size: 1.7rem; font-family: var(--monospace);"> monospace</span> &blacklozenge;
 478                        <span style="font-size: 2.1rem; font-family: var(--cursive);"> cursive</span> &blacklozenge;
 479                        <span style="font-size: 1.5rem; font-family: var(--fantasy);"> fantasy</span>
 480                        </p>
 481
 482                        <p>
 483                        <i>
 484                            &lt;i&gt; italic text &lt;/i&gt;
 485                        </i> 
 486                        <br>
 487
 488                        <strong>
 489                            &lt;strong&gt; strong text &lt;/strong&gt;
 490                        </strong>
 491                        <br>
 492
 493                        <small>
 494                            &lt;small&gt; small text &lt;/small&gt;
 495                        </small>
 496                        <br>
 497
 498                        <mark>
 499                            &lt;mark&gt; colored marker &lt;/mark&gt;
 500                        </mark>
 501                        <br>
 502
 503                        <s>
 504                         &lt;s&gt;strike out &lt;/s&gt;
 505                        </s>
 506                        </p>
 507
 508                        <p>
 509                        <a href="https://www.compart.com/en/unicode/html">HTML Entities</a> 
 510                        For example, 
 511                        <span style="font-size: 3rem;"> &ContourIntegral; </span>
 512                        <span style="font-size: 2rem;"> &infin; </span> 
 513                        <span style="font-size: 2rem;"> &ctdot; </span>
 514                        whose size is controlled like any font.
 515                        </p>
 516
 517                        <div class="scrollBoxSmall"> <div class="scrollBoxContent">
 518                        &lt;span style="font-size: 2rem;"&gt; &amp;ContourIntegral; &lt;/span&gt;
 519                        &lt;span style="font-size: 2rem;"&gt; &amp;infin; &lt;/span&gt;
 520                        &lt;span style="font-size: 2rem;"&gt; &amp;ctdot; &lt;/span&gt;
 521                        </div></div>
 522
 523                    <h4>Emphasized Text</h4>
 524
 525                        <em>
 526                            &lt;em&gt; emphasized text &lt;/em&gt;
 527                        </em> 
 528                        <br>
 529
 530                        <em class="warning">
 531                            &lt;em class="warning"&gt; warning &lt;/em&gt;
 532                        </em> 
 533                        <br>
 534
 535                        <em class="caution">
 536                            &lt;em class="caution"&gt; caution &lt;/em&gt;
 537                        </em> 
 538                        <br>
 539
 540                        <h3>&lt;h3&gt;h3 header&lt;/h3&gt; <em class="warning">&lt;em class="warning"&gt;emphasized text in header&lt;/em&gt;</em></h3>
 541                        <h3>&lt;h3&gt;h3 header&lt;/h3&gt; <em class="caution">&lt;em class="caution"&gt;emphasized text in header&lt;/em&gt;</em></h3>
 542
 543                        <em class="wavy">
 544                            &lt;em class="wavy"&gt; Wiggle Wiggle &lt;/em&gt;
 545                        </em>
 546                        <br>
 547                        <br>
 548
 549                        <em class="hotkey">
 550                            &lt;em class="hotkey"&gt; Blender hot key &lt;/em&gt;
 551                        </em> 
 552                        <br>
 553
 554                    <h4>Pseudocode</h4>
 555
 556                        <code>
 557                            pseudocode <em>code comment</em>
 558                            <i>indented once</i> 
 559                            <i><i>indented twice</i></i>
 560                            <i><i><i>indented thrice</i></i></i> <em>That's all the indents</em>
 561                        </code> 
 562
 563                        <div class="scrollBoxMedium"> <div class="scrollBoxContent">
 564                        &lt;code&gt;
 565                        source code &lt;em&gt; Code Comment &lt;/em&gt; &lt;em&gt;
 566                        &lt;i&gt;indented once&lt;/i&gt;
 567                        &lt;i&gt;&lt;i&gt;indented twice&lt;/i&gt;&lt;/i&gt;
 568                        &lt;i&gt;&lt;i&gt;&lt;i&gt;indented thrice&lt;/i&gt;&lt;/i&gt;&lt;/i&gt;
 569                        &lt;/code&gt;
 570                        </div></div>
 571
 572                    <h4>Colors</h4>
 573                       <p>
 574                       <span style="color: white; background-color: var(--kweilin-black);">--kweilin-black</span>
 575                       <br>
 576                       <span style="color: white; background-color: var(--warm-brown);">--warm-brown</span>
 577                       <span style="color: white; background-color: var(--dark-brown);">--dark-brown</span>
 578                       <br>
 579                       <span style="color: white; background-color: var(--canvas-gray);">--canvas-gray</span>
 580                       <span style="color: black; background-color: var(--light-gray);">--light-gray</span>
 581                       <span style="color: black; background-color: var(--dark-blue-gray);">--dark-blue-gray</span>
 582                       <span style="color: black; background-color: var(--light-blue-gray);">--light-blue-gray</span>
 583                       <span style="color: white; background-color: var(--art-gallery-blue-gray);">--art-gallery-blue-gray</span>
 584                       <br>
 585                       <span style="color: black; background-color: var(--light-yellow-tint);">--light-yellow-tint</span>
 586                       <br>
 587                       <span style="color: black; background-color: var(--light-red);">--light-red</span>
 588                       <br>
 589                       <span style="color: white; background-color: var(--art-gallery-blue);">--art-gallery-blue</span>
 590                       <span style="color: white; background-color: var(--light-blue);">--light-blue</span>
 591                       <span style="color: white; background-color: var(--dark-blue);">--dark-blue</span>
 592                       <span style="color: black; background-color: var(--cyan-tint);">--cyan-tint</span>
 593                       <span style="color: black; background-color: var(--light-blue-tint);">--light-blue-tint</span>
 594                       <span style="color: black; background-color: var(--very-light-blue);">--very-light-blue</span>
 595                       <br>
 596                       <span style="color: black; background-color: var(--light-blue-background);">--light-blue-background</span>
 597                       <span style="color: black; background-color: var(--lighter-blue-background);">--lighter-blue-background</span>
 598                       <span style="color: black; background-color: var(--light-blue-paper);">--light-blue-paper</span>
 599                       <span style="color: black; background-color: var(--light-blue-body-background);">--light-blue-body-background</span>
 600                       <p>
 601
 602                       <div class="scrollBoxTiny"> <div class="scrollBoxContent">
 603                           &lt;span style="color: white; background-color: var(--warm-brown);"&gt;warm-brown&lt;span&gt; . . . and so on . . .
 604                       </div></div>
 605                        
 606                </section>
 607
 608                <section>
 609                    <h3 id="ParagraphStyles">Paragraph Styles</h3>
 610
 611                    <h4>Illustrated Paragraph</h4>
 612
 613                    <div class="illustratedparagraph">
 614                        <p>
 615                            <a href="webPageDesign.html">
 616                                <img src="../Images/home.png" alt="Image of home." height="100" width="100" >
 617                                <em>illustrated paragraph</em>
 618                            </a>
 619                            with a hyperlinked image and text plus extra paragraph filler.
 620                            This image icon floats left within a paragraph as shown here.
 621                            “Our ignorance can be divided into problems and mysteries. 
 622                            When we face a problem, we may not know its solution, but we have insight, 
 623                            increasing knowledge, and an inkling of what we are looking for. When we 
 624                            face a mystery, however, we can only stare in wonder and bewilderment, 
 625                            not knowing what an explanation would even look like.” ― Noam Chomsky
 626                        </p>
 627                    </div>
 628
 629                    <div class="scrollBox"> <div class="scrollBoxContent">
 630                    &lt;div class="illustratedparagraph"&gt;
 631                        &lt;p&gt;
 632                            &lt;a href="hyperlink.html"&gt;
 633                                &lt;img src="../Images/home.png" alt="Image of home." height="64" width="64" /&gt;
 634                                &lt;em&gt;illustrated paragraph&lt;em&gt;&lt;/a&gt;
 635                            with a hyperlinked image
 636                            ...
 637                        &lt;/p&gt;
 638                    &lt;div&gt;
 639                    </div> </div>
 640
 641                    <h4>Spaced out Paragraph</h4>
 642
 643                    <p class="spacedout">
 644                        This paragraph of class "spacedout" has larger font and more vertical space between previous and next 
 645                        paragraphs.  "Solitude is painful when one is young, but delightful when one is more 
 646                        mature."  -Albert Einstein
 647                    </p>
 648
 649                    <div class="scrollBox"> <div class="scrollBoxContent">
 650                        This paragraph of class "spacedout" has larger font and more vertical space 
 651                        between previous and next...
 652                    </div></div>
 653
 654                    <h4>Paragraph with Floating Figure</h4>
 655
 656                    <figure>
 657                        <img src="Images/Yoicks.jpg" alt="Yoicks">
 658                        <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="CyberPowerPC">
 659                        <figcaption>
 660                            Fig 0.  Example of a figure.
 661                       </figcaption>
 662                    </figure>
 663
 664                    <p>
 665                    The artist is the creator of beautiful things. 
 666                    </p>
 667                     
 668                    <p>
 669                    To reveal art and conceal the artist is art's aim. The critic is he who 
 670                    can translate into another manner or a new material his impression of 
 671                    beautiful things.
 672                    </p>
 673
 674                    <p>
 675                    The highest as the lowest form of criticism is a mode of autobiography. 
 676                    Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault.
 677                    </p>
 678
 679                    <p>
 680                    Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope. 
 681                    They are the elect to whom beautiful things mean only beauty.
 682                    </p>
 683
 684                    <p>
 685                    There is no such thing as a moral or an immoral book. Books are well written, or badly written. That is all.
 686                    </p>
 687
 688                    <p>
 689                    The nineteenth century dislike of realism is the rage of Caliban seeing his own face in a glass.
 690                    </p>
 691
 692                    <p>
 693                    The nineteenth century dislike of romanticism is the rage of Caliban not seeing his own face in a glass. 
 694                    The moral life of man forms part of the subject-matter of the artist, but the morality of art consists in the 
 695                    perfect use of an imperfect medium.
 696                    </p>
 697
 698                    <p>
 699                    No artist desires to prove anything. Even things that are true can be proved. 
 700                    No artist has ethical sympathies. An ethical sympathy in an artist is an unpardonable mannerism of style. 
 701                    No artist is ever morbid. The artist can express everything.
 702                    </p>
 703
 704                    <p>
 705                    Thought and language are to the artist instruments of an art. Vice and virtue are to the artist materials 
 706                    for an art. From the point of view of form, the type of all the arts is the art of the musician. 
 707                    From the point of view of feeling, the actor's craft is the type. All art is at once surface and symbol. 
 708                    Those who go beneath the surface do so at their peril.
 709                    </p>
 710
 711                    <p>
 712                    Those who read the symbol do so at their peril. It is the spectator, and not life, that art really mirrors. 
 713                    Diversity of opinion about a work of art shows that the work is new, complex, and vital. 
 714                    When critics disagree, the artist is in accord with himself. 
 715                    </p>
 716
 717                    <p>
 718                    We can forgive a man for making a useful thing as long as he does not admire it. 
 719                    The only excuse for making a useless thing is that one admires it intensely.
 720                    </p>
 721
 722                    <p> 
 723                    All art is quite useless.
 724                    </p>
 725
 726                    <i>
 727                    -Oscar Wilde, Preface to The Picture of Dorian Grey.
 728                    </i>
 729
 730                    <div class="scrollBox"> <div class="scrollBoxContent">
 731                        &lt;figure&gt;
 732                                &lt;img src="../Images/mailbox.png" alt="Mail Box Image" &gt;
 733
 734                            &lt;figcaption&gt;
 735                                Fig 0.  Example of a figure.
 736                           &lt;/figcaption&gt;
 737                        &lt;/figure&gt;
 738                    </div> </div>
 739
 740                    <h4>Block quote</h4>
 741
 742                    <blockquote>
 743                        Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly 
 744                        and applying the wrong remedies.
 745                    <cite>Groucho Marx</cite>
 746                    </blockquote>
 747
 748                    <div class="scrollBox"> <div class="scrollBoxContent">
 749                        &lt;blockquote&gt;
 750                        Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly 
 751                        and applying the wrong remedies.
 752                        &lt;cite&gt;Groucho Marx&lt;/cite&gt;
 753                        &lt;/blockquote&gt;
 754                    </div></div>
 755
 756                    <h4>Boxed Paragraph</h4>
 757
 758                    <p class="box">
 759                    "To raise new questions, new possibilities, to regard old problems from a 
 760                    new angle, requires creative imagination and marks real advance in 
 761                    science."  -Albert Einstein
 762                    </p>
 763
 764                    <div class="scrollBox"> <div class="scrollBoxContent">
 765                        &lt;p class="box"&gt;
 766                        "To raise new questions, new possibilities, to regard old problems from a 
 767                        &lt;/p&gt;
 768                    </div> </div>
 769
 770                    <h4>Paragraph with Change Bar</h4>
 771
 772                    <p class="changed">
 773                    “Art is not what you see, but what you make others see.” ― Edgar Degas
 774<br>
 775                    “Art is the only serious thing in the world. And the artist is the only 
 776                    person who is never serious.” ― Oscar Wilde
 777                    </p>
 778
 779                    <div class="scrollBox"> <div class="scrollBoxContent">
 780                        &lt;p class="changed"&gt;
 781                        “Art is not what you see, but what you make others see.” ― Edgar Degas
 782                        &lt;br&gt;
 783                        “Art is the only serious thing in the world. And the artist is the only 
 784                        person who is never serious.” ― Oscar Wilde
 785                        &lt;/p&gt;
 786                    </div> </div>
 787
 788                    <h4>Footnote Paragraph</h4>
 789
 790                    <p class="footnote">
 791                    "We are all in the gutter, but some of us are looking at the 
 792                    stars.” - Oscar Wilde
 793                    </p>
 794
 795                    <div class="scrollBox"> <div class="scrollBoxContent">
 796                        &lt;p class="footnote"&gt;
 797                        "We are all in the gutter, but some of us are looking at the 
 798                        &lt;/p&gt;
 799                    </div> </div>
 800
 801                    <h4>Fine Print Paragraph</h4>
 802
 803                    <p class="fineprint">
 804                    "If people did not sometimes do silly things, nothing intelligent would 
 805                    ever get done."  -Ludwig Wittgenstein
 806                    </p>
 807
 808                    <div class="scrollBox"> <div class="scrollBoxContent">
 809                        &lt;p class="fineprint"&gt;
 810                        "If people did not sometimes do silly things, nothing intelligent would 
 811                        &lt;/p&gt;
 812                    </div> </div>
 813                </section>
 814
 815                <section>
 816                    <h3 id="Lists">Lists</h3>
 817
 818                    <ul>
 819                        <li>Unordered list</li>
 820                        <li>Small image 
 821                            <img src="../Images/home.png" alt="Home icon." height="16" width="16" >
 822                        </li>
 823                    </ul>
 824
 825                    <div class="scrollBox"> <div class="scrollBoxContent">
 826                        &lt;ul&gt;
 827                        &lt;li&gt;Unordered list&lt;li&gt;
 828                        &lt;li&gt;img within a list 
 829                            &lt;img src="../Images/home.png" alt="Home icon." height="16" width="16" /&gt;
 830                        &lt;li&gt;
 831                        &lt;/ul&gt;
 832                    </div> </div>
 833                    
 834                    <ol>
 835                        <li>Ordered list</li>
 836                        <li>Ordered list</li>
 837                    </ol>
 838
 839                    <div class="scrollBox"> <div class="scrollBoxContent">
 840                         &lt;ol&gt;
 841                        &lt;li&gt;Ordered list&lt;li&gt;
 842                        &lt;li&gt;Ordered list&lt;li&gt;
 843                        &lt;/ol&gt;
 844                    </div> </div>
 845
 846                    <ul class="bullet">
 847                        <li>Unordered list</li>
 848                        <li>Unordered list</li>
 849                        <li>Unordered list</li>
 850                    </ul>
 851
 852                    <ul class="minorBullet">
 853                        <li>Unordered list</li>
 854                        <li>Unordered list</li>
 855                        <li>Unordered list</li>
 856                    </ul>
 857
 858                    <div class="scrollBox"> <div class="scrollBoxContent">
 859                        &lt;ul class="bullet"&gt;
 860                        &lt;li&gt;Unordered list&lt;li&gt;
 861                        &lt;li&gt;Unordered list&lt;li&gt;
 862                        &lt;li&gt;Unordered list&lt;li&gt;
 863                        &lt;/ul&gt;
 864
 865                        &lt;ul class="minorBullet"&gt;
 866                        &lt;li&gt;Unordered list&lt;li&gt;
 867                        &lt;li&gt;Unordered list&lt;li&gt;
 868                        &lt;li&gt;&gt;Unordered list&lt;li&gt;
 869                    &lt;/ul&gt;
 870                    </div> </div>
 871                </section>
 872                
 873                <section>
 874                    <h3 id="Scrollbox">Scroll Box</h3>
 875
 876                    <p>
 877                    We have the classes scrollBox, scrollBoxTiny, scrollBoxSmall, scrollBoxMedium, scrollBoxLarge, scrollBoxHuge.
 878                    The default is scrollBox, which are around 12 em high.  scrollBoxTiny is used for single lines, and scrollBoxHuge
 879                    is used when we want to see most of the text and not have to scroll up and down so much.
 880                    </p>
 881
 882                    <div class="scrollBox"> <div class="scrollBoxContent">
 883                    &lt;div class="scrollBox"&gt; &lt;div class="scrollBoxContent"&gt;
 884                    Default scroll box.
 885                    Default scroll box.
 886                    Default scroll box.
 887                    Default scroll box.
 888                    Default scroll box.
 889                    Default scroll box.
 890                    Default scroll box.
 891                    &lt;/div&gt; &lt;/div&gt;
 892                    </div> </div>
 893
 894                    <div class="scrollBoxTiny"> <div class="scrollBoxContent">
 895                    &lt;div class="scrollBoxTiny"&gt; &lt;div class="scrollBoxContent"&gt;
 896                    Tiny scroll box.
 897                    &lt;/div&gt; &lt;/div&gt;
 898                    </div></div>
 899
 900                    <div class="scrollBoxSmall"> <div class="scrollBoxContent">
 901                    &lt;div class="scrollBoxSmall"&gt; &lt;div class="scrollBoxContent"&gt;
 902                    Small scroll box.
 903                    Small scroll box.
 904                    Small scroll box.
 905                    Small scroll box.
 906                    Small scroll box.
 907                    Small scroll box.
 908                    Small scroll box.
 909                    &lt;/div&gt; &lt;/div&gt;
 910                    </div> </div>
 911
 912                    <div class="scrollBoxMedium"> <div class="scrollBoxContent">
 913                    &lt;div class="scrollBoxMedium"&gt; &lt;div class="scrollBoxContent"&gt;
 914                    Medium scroll box.
 915                    Medium scroll box.
 916                    Medium scroll box.
 917                    Medium scroll box.
 918                    Medium scroll box.
 919                    Medium scroll box.
 920                    Medium scroll box.
 921                    &lt;/div&gt; &lt;/div&gt;
 922                    </div> </div>
 923
 924                    <div class="scrollBoxLarge"> <div class="scrollBoxContent">
 925                    &lt;div class="scrollBoxLarge"&gt; &lt;div class="scrollBoxContent"&gt;
 926                    Large scroll box.
 927                    Large scroll box.
 928                    Large scroll box.
 929                    Large scroll box.
 930                    Large scroll box.
 931                    Large scroll box.
 932                    Large scroll box.
 933                    &lt;/div&gt; &lt;/div&gt;
 934                    </div> </div>
 935
 936                    <div class="scrollBoxHuge"> <div class="scrollBoxContent">
 937                    &lt;div class="scrollBoxHuge"&gt; &lt;div class="scrollBoxContent"&gt;
 938                    Huge scroll box.
 939                    Huge scroll box.
 940                    Huge scroll box.
 941                    Huge scroll box.
 942                    Huge scroll box.
 943                    Huge scroll box.
 944                    Huge scroll box.
 945                    Huge scroll box.
 946                    Huge scroll box.
 947                    Huge scroll box.
 948                    Huge scroll box.
 949                    Huge scroll box.
 950                    Huge scroll box.
 951                    Huge scroll box.
 952                    Huge scroll box.
 953                    Huge scroll box.
 954                    Huge scroll box.
 955                    Huge scroll box.
 956                    Huge scroll box.
 957                    Huge scroll box.
 958                    Huge scroll box.
 959                    Huge scroll box.
 960                    Huge scroll box.
 961                    Huge scroll box.
 962                    Huge scroll box.
 963                    Huge scroll box.
 964                    Huge scroll box.
 965                    Huge scroll box.
 966                    Huge scroll box.
 967                    Huge scroll box.
 968                    Huge scroll box.
 969                    Huge scroll box.
 970                    Huge scroll box.
 971                    Huge scroll box.
 972                    Huge scroll box.
 973                    Huge scroll box.
 974                    Huge scroll box.
 975                    &lt;/div&gt; &lt;/div&gt;
 976                    </div> </div>
 977                </section>
 978
 979                <section>
 980                    <h3 id="Images">Images</h3>
 981
 982                    <h4>Block Images</h4>
 983
 984                    <p>
 985                    Centered images, from full width to smaller sizes.
 986                    </p>
 987                    <img class="centered" alt="artificer" src="Images/Artificer.jpg">
 988                    <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
 989                    <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
 990
 991                    <div class="scrollBox"> <div class="scrollBoxContent">
 992                    &lt;img class="centered" alt="artificer" src="Images/Artificer.jpg"&gt;
 993                    &lt;img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg"&gt;
 994                    &lt;img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg"&gt;
 995                    </div> </div>
 996
 997                    <h4>Inline images</h4>
 998
 999                    <p>
1000                    Image inside a paragraph. <img src="Images/volcano.jpg" height="50rem">
1001                    </p>
1002
1003                    <div class="scrollBoxTiny"> <div class="scrollBoxContent">
1004                        &lt;img src="Images/volcano.jpg" height="50rem"&gt;
1005                    </div></div>
1006
1007                    <ol>
1008                        <li>Image inside a list. <img src="Images/volcano.jpg" height="50rem"></li>
1009                        <li>Image inside a list. <img src="Images/volcano.jpg" height="50rem"></li>
1010                    </ol>
1011
1012                    <div class="scrollBoxTiny"> <div class="scrollBoxContent">
1013                        &lt;img src="Images/volcano.jpg" height="50rem"&gt;
1014                    </div></div>
1015
1016
1017                    <em class="hotkey">
1018                    Image inside a hotkey. <img src="Images/volcano.jpg" height="50rem">
1019                    </em>
1020
1021                    <div class="scrollBoxTiny"> <div class="scrollBoxContent">
1022                        &lt;em class="hotkey"&gt;img src="Images/volcano.jpg" height="50rem"&gt;&lt;\em&gt;
1023                    </div></div>
1024
1025                    <h4>Special Case Images</h4>
1026
1027                    <p>
1028                    I also have special case images.  Please refer to my 
1029                        <a href="../StyleSheet.css.html">style sheet</a>
1030                    and search for <strong>img</strong>
1031                    </p>
1032
1033                    <ol>
1034                        <li>Images within hyperlinks if we hover over them.</li>
1035                        <li>Images within a navigation list.</li>
1036                        <li>Images within forms.</li>
1037                        <li>Border images.</li>
1038                        <li>Transparent background used with SVG images.</li>
1039                        <li>Images within paragraphs, inside inline emphasized text, and in tables.</li>
1040                        <li>Images within figures.</li>
1041                        <li>Painting images within an art gallery.</li>
1042                    </ol>
1043                </section>
1044
1045                <section>
1046                    <h3 id="Tables">Tables</h3>
1047
1048                    <table>
1049                        <caption>This is a simple table</caption>
1050
1051                        <tr>
1052                            <th>Table Header, Column 1</th>
1053                            <th>Table Header, Column 2</th>
1054                        </tr>
1055
1056                        <tr>
1057                            <td>Row 1, Column 1.</td>
1058                            <td>Row 1, Column 2.</td>
1059                        </tr>
1060
1061                        <tr>
1062                            <td>Row 1, Column 1.</td>
1063                            <td>Row 2, Column 2.</td>
1064                        </tr>
1065                    </table>
1066
1067                    <div class="scrollBox"> <div class="scrollBoxContent">
1068                        &lt;table&gt;
1069                            &lt;caption&gt;This is a simple table&lt;/caption&gt;
1070                            &lt;tr&gt;
1071                                &lt;th&gt;Table Header, Column 1&lt;/th&gt;
1072                                &lt;th&gt;Table Header, Column 2&lt;/th&gt;
1073                            &lt;/tr&gt;
1074                            &lt;tr&gt;
1075                                &lt;td&gt;Row 1, Column 1.&lt;/td&gt;
1076                                &lt;td&gt;Row 1, Column 2.&lt;/td&gt;
1077                            &lt;/tr&gt;
1078                            &lt;tr&gt;
1079                                &lt;td&gt;Row 1, Column 1.&lt;/td&gt;
1080                                &lt;td&gt;Row 2, Column 2.&lt;/td&gt;
1081                            &lt;/tr&gt;
1082                        &lt;/table&gt;
1083                    </div> </div>
1084                </section>
1085
1086                <section>
1087                    <h3 id="Tooltips">Tooltips</h3>
1088
1089                    <p class="box">
1090                    Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad.  
1091                    They are not supported on mobile devices right now.
1092                    </p>
1093
1094                    <p>
1095                    Here is an example tooltip modified a lot from
1096                    <a href="https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/">creating beautiful tooltips using CSS</a>
1097                    using the following HTML5 and CSS3+ technologies:
1098                    </p>
1099
1100                    <ul>
1101                        <li> 
1102                            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">static, relative, absolute and sticky position</a>
1103                        </li>
1104                        <li> 
1105                            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block">layout and contiaing blocks</a>
1106                        </li>
1107                        <li> 
1108                            <a href="https://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/">:before and :after pseudo-classes</a>
1109                        </li>
1110                        <li> 
1111                            <a href="https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/">custom data attributes</a>
1112                        </li>
1113                    </ul>
1114
1115                    <p>
1116                    Your time is limited, so don't waste it living someone else's life. 
1117                    Don't be trapped by dogma - which is living with the results of other people's thinking. 
1118                    Don't let the noise of others' opinions drown out your own 
1119                    <span data-text="-Steve Jobs" class="tooltip">inner voice</span>.
1120                    And most important, have the courage to follow your heart and 
1121                    <span data-text="Steve Jobs again!" class="tooltip">intuition</span>.
1122                    </p>
1123
1124                    <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1125                    &lt;span data-text="-Steve Jobs" class="tooltip"&gt;inner voice&lt;span&gt;
1126                    And most important, have the courage to follow your heart and 
1127                    &lt;span data-text="-Steve Jobs again!" class="tooltip"&gt;inner voice&lt;span&gt;
1128                    </div></div>
1129
1130                    <p>
1131                    Most of the magic is in the CSS <a href="../StyleSheet.css.html">style sheet</a>.  
1132                    </p> 
1133                </section>
1134
1135                <section>
1136                    <h3 id="Gallery">Art Gallery</h3>
1137
1138                    <p>
1139                    An art gallery.
1140                    </p>
1141
1142                    <div class="gallery">
1143                        <div class="painting" title="Fast PC.">
1144                            <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1145                                <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1146                            </a>
1147                            <p>Fast PC</p>
1148                        </div>
1149
1150                        <div class="painting" title="Black and Gray Chalk on Paper.">
1151                            <a href="../Art/Images/ShiftSelectCornea.jpg">
1152                                <img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye.">
1153                            </a>
1154                            <p>3D eye</p>
1155                        </div>
1156
1157                        <div class="painting" title="Black and Gray Chalk on Paper.">
1158                            <a href="../Images/eye.png">
1159                                <img src="../Images/eye.png" alt="2D eye.">
1160                            </a>
1161                            <p>2D eye</p>
1162                        </div>
1163
1164                        <div class="painting" title="Black and Gray Chalk on Paper.">
1165                            <a href="../Images/home.png">
1166                                <img src="../Images/home.png" alt="Home">
1167                            </a>
1168                            <p>Home</p>
1169                        </div>
1170                    </div>
1171
1172                    <div class="scrollBox"> <div class="scrollBoxContent">
1173                        &lt;div class="gallery"&gt;
1174                            &lt;div class="painting" title="Fast PC."&gt;
1175                                &lt;a href="Images/CyberPowerPCUbuntuGauss.jpg"&gt;
1176                                    &lt;img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC."&gt;
1177                                &lt;/a&gt;
1178                                &lt;p&gt;Fast PC&lt;/p&gt;
1179                            &lt;/div&gt;
1180                            &lt;div class="painting" title="Black and Gray Chalk on Paper."&gt;
1181                                &lt;a href="../Art/Images/ShiftSelectCornea.jpg"&gt;
1182                                    &lt;img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye."&gt;
1183                                &lt;/a&gt;
1184                                &lt;p&gt;3D eye&lt;/p&gt;
1185                            &lt;/div&gt;
1186                            &lt;div class="painting" title="Black and Gray Chalk on Paper."&gt;
1187                                &lt;a href="../Images/eye.png"&gt;
1188                                    &lt;img src="../Images/eye.png" alt="2D eye."&gt;
1189                                &lt;/a&gt;
1190                                &lt;p&gt;2D eye&lt;/p&gt;
1191                            &lt;/div&gt;
1192                            &lt;div class="painting" title="Black and Gray Chalk on Paper."&gt;
1193                                &lt;a href="../Images/home.png"&gt;
1194                                    &lt;img src="../Images/home.png" alt="Home"&gt;
1195                                &lt;/a&gt;
1196                                &lt;p&gt;Home&lt;/p&gt;
1197                            &lt;/div&gt;
1198                    </div> </div>
1199                </section>
1200
1201                <section>
1202                    <h3 id="Movies">Movies</h3>
1203
1204                        <video width="320" height="240" controls>
1205                            <source src="Images/sean.mp4" type="video/mp4">
1206                            Your browser does not support the HTML5 video tag.
1207                        </video> 
1208
1209                        <video width="200" height="100" controls>
1210                            <source src="Images/sean.mov" type="video/mp4">
1211                            Your browser does not support the HTML5 video tag.
1212                        </video> 
1213
1214                        <div class="scrollBox"> <div class="scrollBoxContent">
1215                            &lt;video width="320" height="240" controls&gt;
1216                            &lt;source src="Images/sean.mp4" type="video/mp4"&gt;
1217                            Your browser does not support the HTML5 video tag.
1218                            &lt;video&gt;
1219
1220                            &lt;video width="500" height="200" controls&gt;
1221                            &lt;source src="Images/sean.mov" type="video/mp4"&gt;
1222                            Your browser does not support the HTML5 video tag.
1223                            &lt;video&gt;
1224                        </div> </div>
1225                </section>
1226
1227                <section>
1228                    <h3 id="Forms">Forms</h3>
1229
1230                    <p>Form push button example showing my layout style and a very simple callback</p>
1231
1232                    <form>
1233                        <ul>
1234                            <li>
1235                              <fieldset>
1236                                  <legend>Form Button</legend>
1237                                      <input type="button" onclick="alert( 'Do not push this button again!' )" value="Push Me!">
1238                                 </fieldset>
1239                            </li>
1240                        </ul>
1241                    </form>
1242
1243                    <div class="scrollBox"> <div class="scrollBoxContent">
1244                    &lt;form&gt;
1245                        &lt;ul&gt;
1246                            &lt;li&gt;
1247                              &lt;fieldset&gt;
1248                                  &lt;legend&gt;Form Button&lt;/legend&gt;
1249                                      &lt;input type="button" onclick="alert( 
1250                                            'Do not push this button again!' )" value="Push Me!" /&gt;
1251                                 &lt;/fieldset&gt;
1252                            &lt;/li&gt;
1253                        &lt;/ul&gt;
1254                    &lt;/form&gt;
1255                    </div> </div>
1256                </section>
1257
1258                <section>
1259                    <h3 id="SVG">SVG</h3>
1260
1261                    <p>
1262                        <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG)</a> is a language for describing vector graphics.
1263                        See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Introduction">Mozilla SVG Tutorial</a>
1264                    </p>
1265
1266                    <p>
1267                        I use <a href="https://inkscape.org">Inkscape</a> to do the drawing and generate the SVG file.
1268                        Here's an example, where I've drawn a picture in Inkscape, and saved it to an *.svg file.  
1269                        Load the *.svg image as you would any image, except I have <em>background: transparent;</em> in the style sheet
1270                        so the SVG draws on top of the page, just like a drawing on paper.
1271                        Thus the image size fills the containing box (this paragraph) and resizes with the browser window.
1272                        <img class="transparent" alt="Yoicks" src="Images/Yoicks.svg" >
1273                    </p>
1274
1275                    <p>
1276                        <em>Yoicks</em> by Sean Erik O'Connor is licensed under the Creative Commons license
1277
1278                        <a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v1" 
1279                           target="_blank" 
1280                           rel="license noopener noreferrer" 
1281                           style="display:inline-block;">CC BY-ND 4.0
1282                            <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" 
1283                                src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" 
1284                                alt="">
1285                            <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" 
1286                                 src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="">
1287                            <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" 
1288                                 src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1" alt=""></a>
1289                    </p>
1290
1291                    <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1292                        &lt;img class="transparent" src="Images/Yoicks.svg" &gt;
1293                    </div></div>
1294
1295                </section>
1296
1297                <section>
1298                    <h3 id="Canvas">Canvas</h3>
1299
1300                    <p>
1301                        <a href="https://html.spec.whatwg.org/multipage/">Canvas Specification</a>
1302                    </p>
1303
1304                    <canvas id="canvas" width="300" height="225">
1305                        Your browser does not support the canvas API!
1306                    </canvas>
1307
1308                    <script>
1309                        function draw()
1310                        {
1311                            var canvas = document.getElementById( "canvas" ) ;
1312                            var context = canvas.getContext( "2d" ) ;
1313                            var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1314                            gradient.addColorStop( 0, "green" ) ;
1315                            gradient.addColorStop( 1, "red" ) ;
1316                            context.fillStyle = gradient ;
1317                            context.fillRect( 0, 0, 150, 100 ) ;
1318                            context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1319                            context.fillRect( 100, 50, 150, 100 ) ;
1320                        }
1321
1322                        /* Or you can call from <body onload="draw();"> */
1323                        draw() ;
1324                    </script>
1325
1326                    <div class="scrollBox"> <div class="scrollBoxContent">
1327                        &lt;canvas id="canvas" width="300" height="225"&gt;
1328                        Your browser does not support the canvas API!
1329                        &lt;canvas&gt;
1330
1331                        &lt;script&gt;
1332                        function draw()
1333                        {
1334                            var canvas = document.getElementById( "canvas" ) ;
1335                            var context = canvas.getContext( "2d" ) ;
1336                            var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1337                            gradient.addColorStop( 0, "green" ) ;
1338                            gradient.addColorStop( 1, "red" ) ;
1339                            context.fillStyle = gradient ;
1340                            context.fillRect( 0, 0, 150, 100 ) ;
1341                            context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1342                            context.fillRect( 100, 50, 150, 100 ) ;
1343                        }
1344
1345                        /* Or you can call from &lt;body onload="draw();"&gt; */
1346                        draw() ;
1347                        &lt;/script&gt;
1348                    </div> </div>
1349                </section>
1350
1351                <section>
1352                    <h3 id="GoogleSearch">Google Search</h3>
1353
1354                    <!-- Form to search my site with Google.  From Google's free tools web page.  -->
1355                    <form method="get" action="http://www.google.com/search">
1356
1357                        <div id="GoogleForm">
1358                            <input type="hidden" name="ie" value="UTF-8">
1359                            <input type="hidden" name="oe" value="UTF-8">
1360
1361                            <!-- Required Google logo -->
1362                            <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google">
1363                            </a>
1364
1365                            <!-- A text input control for the (q)uery search string. -->
1366                            <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial">
1367
1368                            <!-- Submit button:  submits this form when activated. -->
1369                            <input type="submit" name="btnG" value="Search my site">
1370
1371                            <!-- The URL of my site to search.
1372                                  Determine which server we are on and use the appropriate hyperlink.
1373                                  Use comments to hide this JavaScript from older browsers.
1374                            -->
1375                            <script>
1376                            <!-- 
1377                                var hostname = location.href
1378                                var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://"
1379                                var suffix = ".com\">"
1380
1381                                if (hostname.match( "atspace" ))
1382                                {
1383                                    document.write( prefix + "seanerikoconnor.atspace" + suffix )
1384                                }
1385                                else if (hostname.match( "freeservers" ))
1386                                {
1387                                    document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1388                                }
1389                                else if (hostname.match( "file" ))
1390                                {
1391                                    document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1392                                }
1393                             // -->
1394                            </script> 
1395                        </div>
1396                    </form>
1397
1398                    <div class="scrollBox"> <div class="scrollBoxContent">
1399                        &lt;!-- Form to search my site with Google.
1400                             From Google's free tools web page.
1401                          --&gt;
1402                        &lt;form method="get" action="http://www.google.com/search"&gt;
1403
1404                            &lt;div id="GoogleForm"&gt;
1405                                &lt;input type="hidden" name="ie" value="UTF-8" /&gt;
1406                                &lt;input type="hidden" name="oe" value="UTF-8" /&gt;
1407
1408                                &lt; Required Google logo --&gt;
1409                                &lt;a href="http://www.google.com/"&gt;
1410                                        &lt;img src="http://www.google.com/logos/Logo_25wht.gif"
1411                                             alt="Google" /&gt;
1412                                &lt;a&gt;
1413
1414                                &lt; A text input control for the (q)uery search string. --&gt;
1415                                &lt;input type="text" name="q" size="32" maxlength="255"
1416                                       value="Primitive Polynomial" /&gt;
1417
1418                                &lt; Submit button:  submits this form when activated. --&gt;
1419                                &lt;input type="submit" name="btnG" value="Search my site" /&gt;
1420
1421                                &lt; The URL of my site to search.
1422                                      Determine which server we are on and use the appropriate hyperlink.
1423                                      Use comments to hide this JavaScript from older browsers.
1424                                --&gt;
1425                                &lt;script&gt;
1426                                &lt; 
1427                                    var hostname = location.href
1428                                    var prefix = "&lt;input type=\"hidden\" 
1429                                        name=\"sitesearch\" value=\"http://"
1430                                    var suffix = ".com\" /&gt;
1431
1432                                    if (hostname.match( "atspace" ))
1433                                    {
1434                                        document.write( prefix + "seanerikoconnor.atspace" + suffix )
1435                                    }
1436                                    else if (hostname.match( "freeservers" ))
1437                                    {
1438                                        document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1439                                    }
1440                                    else if (hostname.match( "file" ))
1441                                    {
1442                                        document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1443                                    }
1444                                     // --&gt;
1445                                &lt;script&gt;
1446                            &lt;div&gt;
1447                        &lt;form&gt;
1448                    </div> </div>
1449               </section>
1450
1451               <section>
1452                   <h3 id="TypesettingMathematics">Typesetting Mathematics</h3>
1453
1454                    <h4>Math on the Web</h4>
1455
1456                    <p>
1457                        I use <a href="https://www.mathjax.org/">MathJax</a> to typeset equations.
1458                        I write equations in $\LaTeX$ in both inline or display style, using single or double 
1459                        dollar sign delimiters.
1460                        Here's the wonderful <a href="../Finance/lshort.pdf">Not So Short Introduction to LATEX</a>
1461                    </p>
1462
1463                    <p>
1464                        For example, the Navier-Stokes equation is 
1465                          ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = 
1466                          {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet 
1467                            V = 0$, $\quad V |_{\partial \Omega} = 0$.
1468                    </p>
1469
1470                    <div class="scrollBox"> <div class="scrollBoxContent">
1471                      dollarsign dollarsign
1472                      {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = 
1473                      {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0
1474                      \quad V |_{\partial \Omega} = 0
1475                      dollarsign dollarsign
1476                    </div> </div>
1477
1478                    <p>
1479                    The Frobenius norm is 
1480                    $\| A \|_2 \equiv  
1481                    \sum_{ij} | A_{ij} |^2 \equiv 
1482                    \sqrt { tr( A^T A ) }$.
1483                    and the error function is defined to be
1484                    $ \operatorname{erfc}(x) = 
1485                    \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt 
1486                    = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}} 
1487                    $
1488                    </p>
1489
1490                    <p>
1491                    The Frechet derivative of a vector norm, 
1492                    $$
1493                    Df(x)h =
1494                     \lim_{t \rightarrow 0}
1495                     { 
1496                         {  f( x + t h) - f(x) }
1497                         \over
1498                         {t}
1499                     } 
1500                     $$
1501                     $$
1502                      = 
1503                     \lim_{t \rightarrow 0}
1504                     { 
1505                        { \sqrt{ {\| x \|}^2 + 2 \lt x | t h \gt + {\| t h \|}^2 } - \| x \|}
1506                         \over
1507                         {t}
1508                     } 
1509                    $$
1510                    </p>
1511
1512                    <p>
1513                    A circulant matrix equation,
1514                    $$
1515                    \left( 
1516                    \begin{array} { cccccc }
1517                    a^{sn}     & a^{s(n-1)}  & \ldots &  a^s       & 1 \\
1518                    a^{s(n+1)} & a^{sn}      & \ldots & a^{s+1}    & a^s \\
1519                    \ldots \\
1520                    a^{s(2n)}  & a^{s(2n-1)} &\ldots  & a^{s(n+1)} & a^{sn}
1521                    \end{array} 
1522                    \right)
1523                    X
1524                    =
1525                    \left( 
1526                    \begin{array} { c }
1527                    c_{n} \\
1528                    c_{n-1} \\
1529                    \ldots \\
1530                    c_0
1531                    \end{array} 
1532                    \right)
1533                    $$   
1534                    </p>
1535
1536                    <p>
1537                    a Fourier transform sum,
1538                    $$   
1539                    \sum_{k_0=0}^1  \sum_{k_1=0}^1\ldots 
1540                    \sum_{k_{g-1}=0}^1 
1541                    \quad \times
1542                    $$   
1543                    $$   
1544                    \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0)
1545                    \quad \times
1546                    $$   
1547                    $$   
1548                    W^{ (n_0) (2^{g-1}k_{g-1})} 
1549                    W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})} 
1550                    W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)}
1551                    $$   
1552                    <p>
1553
1554                    <p>
1555                    and a normalized cross-correlation,
1556                    $$
1557                    P = \frac{\displaystyle{
1558                    \sum_{i=1}^n (x_i- x) (y_i- y)}} 
1559                    {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2 
1560                    \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}}
1561                    $$
1562                    Update form for mean,
1563                    $$
1564                    M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over 
1565                        {n+1}}
1566                    ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1567                    $$
1568                    </p>    
1569
1570                    <div class="scrollBox"> <div class="scrollBoxContent">
1571                    Update form for mean,
1572                    dollarsign dollarsign
1573                    M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over 
1574                        {n+1}}
1575                    ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1576                    dollarsign dollarsign
1577                    </div> </div>
1578
1579                    <p>
1580                    MathJax will show you the source code for the equation with a right 
1581                    click over the equation, or you can set hover to show the equation source.
1582                    </p>
1583
1584                    <figure>
1585                        <img src="Images/MathJaxShowMathAs.jpg" alt="MathJax Show Math As" >
1586                        <img src="Images/MathJaxEquationsSource.jpg" alt="MathJax Equation Source" >
1587
1588                        <figcaption>
1589                            Right click on the mathematical symbols to get a MathJax menu.
1590                        </figcaption>
1591                    </figure>
1592
1593                    <h4>Setting up MathJax</h4>
1594
1595                    <p>
1596                    Follow the instructions in 
1597                    <a href="https://docs.mathjax.org/en/latest/web/hosting.html#web-hosting">Hosting MathJax on Your Web Page</a>
1598                    First create a directory <em>/mathjax</em> which contains the minimum necessary files (not source files) by cloning in git.
1599                    Fetch the latest tagged version.
1600                    </p>
1601
1602                    <div class="scrollBoxLarge"> <div class="scrollBoxContent">
1603                    git clone https://github.com/mathjax/MathJax.git mathjax
1604
1605                    git tag
1606                        . . .
1607                        3.2.2
1608                        . . .
1609
1610                    git checkout tags/3.2.2 -b 3.2.2 
1611
1612                    git branch
1613                        * 3.2.2
1614                        develop
1615                        master
1616                    </div></div>
1617
1618                    <p>
1619                    Put this script into your <em>/Scripts</em> directory which configures and loads MathJax.
1620                    See the instructions for 
1621                    <a href="https://docs.mathjax.org/en/latest/web/configuration.html">Configuring and Loading in One Script</a>
1622                    and 
1623                    <a href="https://docs.mathjax.org/en/latest/web/hosting.html">hosting your own copy of MathJax on your server</a>
1624                    and also 
1625                    <a href="https://docs.mathjax.org/en/latest/web/configuration.html">configuring MathJax</a>
1626                    This script loads MathJax in three different ways:
1627                    </p>
1628
1629                    <ul>
1630                        <li>From MathJax files in the /mathjax directory on my local development platform (MacBook Pro).</li>
1631                        <li>From MathJax files in the /mathjax directory on my web host (after 
1632                            uploading the directory to my web host).</li>
1633                        <li>Otherwise from CDN URL for MathJax.</li>
1634                    </ul>
1635
1636                    <ul class="download">
1637                        <li class="downloadName">load-mathjax.js</li>
1638                        <li class="downloadDescription">Load MathJax JavaScript.</li>
1639                        <li class="downloadView"> 
1640                            <a href="../Scripts/load-mathjax.js.html">
1641                                <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1642                        </li>
1643                        <li class="download"> 
1644                            <a href="../Scripts/load-mathjax.js" download="../Scripts/load-mathjax.js">
1645                                <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1646                        </li>
1647                    </ul>
1648
1649                    <p>
1650                    Then in each web page, put this into your &lt;head&gt; section before loading the style sheet,
1651                    </p>
1652
1653                    <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1654                        &lt;!-- Configure and load MathJax --&gt;
1655                        &lt;script src="../Scripts/load-mathjax.js" async&gt;&lt;/script&gt;
1656                    </div></div>
1657
1658                    <p>
1659                    Not happening now, but this used to happen with a 2018 version of MathJax:
1660                    I was getting timeouts loading the italic font from my server, 
1661                    but not for my local web page on my MacBook Pro host.  
1662                    So I added the following .htaccess file in mathjax/fonts which fixed the 
1663                    problem.
1664                    My Apache web server didn't recognize the .woff font file type and was 
1665                    not allowing access to the files as explained in
1666                    <a href="http://httpd.apache.org/docs/current/howto/htaccess.html">
1667                           Apache how to for htaccess</a>.
1668                    </p>
1669
1670                    <div class="scrollBox"> <div class="scrollBoxContent">
1671                        &lt;FilesMatch "\.(ttf|otf|eot|woff)$"&gt;
1672                        &lt;IfModule mod_headers.c&gt;
1673                        Header set Access-Control-Allow-Origin "*"
1674                        &lt;/IfModule&gt;
1675                        &lt;/FilesMatch&gt;
1676                        AddType application/x-font-woff woff
1677                    </div> </div>
1678               </section>
1679
1680               <section>
1681                    <h3 id="Maintainance">Maintainance</h3>
1682
1683                    <p>
1684                    In the top level directory, I have a 
1685                    <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html#PROGRAMMINGLANGUAGES">Python</a>
1686                    script called <em>updateweb.py</em> which maintains this site.  Some of its features:
1687                    </p>
1688
1689                    <ul>
1690                        <li>Automatic generation of syntax highlighted source code listings.</li>
1691                        <li>Automatic search and replace any type of text (e.g. old copyright notices) in all hypertext and source files.</li>
1692                        <li>Delete temporary files and directories generated by compilers.</li>
1693                        <li>Upload the changed web pages files to my host web site.</li>
1694                    </ul>
1695
1696                    <p>
1697                    <em>updateweb Version 7.3 - A Python utility program which maintains my web site</em> is distributed under the terms of the
1698                    <a href="https://www.gnu.org/licenses/">GNU General Public License</a>.
1699                    </p>
1700                    
1701                    <ul class="download">
1702                        <li class="downloadName">updateweb.py</li>
1703                        <li class="downloadDescription">Update Web Page Script</li>
1704                        <li class="downloadView"> 
1705                            <a href="MaintainWebPage/updateweb.py.html">
1706                                <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1707                        </li>
1708                        <li class="download"> 
1709                            <a href="MaintainWebPage/updateweb.py" download="MaintainWebPage/updateweb.pys">
1710                                <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1711                        </li>
1712
1713                        <li class="downloadName">updateweb.yaml</li>
1714                        <li class="downloadDescription">Update Web Page YAML configuration file (demo example only).</li>
1715                        <li class="downloadView"> 
1716                            <a href="MaintainWebPage/updateweb.yaml.html">
1717                                <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1718                        </li>
1719                        <li class="download"> 
1720                            <a href="MaintainWebPage/updateweb.yaml" download="MaintainWebPage/updateweb.yaml">
1721                                <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1722                        </li>
1723                    </ul>
1724
1725                    <p>
1726                    I still need to submit each page to a final 
1727                    <a href="https://validator.w3.org/checklink/">link check</a>
1728                    as web links undergo software rot.
1729                    </p>
1730               </section>
1731
1732               <section>
1733                    <h3 id="DevelopmentEnvironment">Development Environment</h3>
1734
1735                    <figure>
1736                        <a href="Images/Artificer.jpg">
1737                            <img src="Images/Artificer.jpg" 
1738                                 height="250" width="400"
1739                                 alt="Artificer laptop running macOS.">
1740                        </a>
1741                        <figcaption>MacBook Pro laptop running macOS.</figcaption>
1742                    </figure>
1743
1744                    <p style="clear:both">
1745                    I do my development on my MacBookPro 16-inch, 2021 Apple M1 Max laptop running macOS Sonoma 14.5 (23F79)
1746                    on which I have loaded a variety of 
1747                    <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html"><em>software designer's tools</em></a>
1748                    I also develop on a CyberPowerPC Series C 2019 ET8880-1202 running Ubuntu Linux 20.04 LTS (Focal Fossa).
1749                    </p>
1750
1751                    <figure>
1752                        <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1753                            <img src="Images/CyberPowerPCUbuntuGauss.jpg" 
1754                                 height="350" width="600"
1755                                 alt="CyberPower PC running Ubuntu Linux">
1756                        </a>
1757                        <figcaption>CyberPower PC running Ubuntu Linux.</figcaption>
1758                    </figure>
1759               </section>
1760
1761               <section>
1762                    <h3 id="Hosting">Hosting</h3>
1763
1764                    <p>
1765                    I use Freeservers, which I have used for a number of years with
1766                    excellent results.  I used to use the file manager in the 
1767                    <a href="http://seanerikoconnor.freeservers.com/cgi-bin/login">
1768                        member</a> 
1769                    area, but now I use my 
1770                    <a href="#Maintainance">automatic updater program</a>.
1771                    </p>
1772
1773                    <p>
1774                    I use AT&amp;T DSL with a wireless transceiver so I can communicate
1775                    to my laptop.
1776                    Once upon a time, I connected through the phone on a separate line 
1777                    using a modem with 
1778                    <a href="https://www.netzero.net/">Netzero</a>
1779                    as my ISP.
1780                    </p>
1781               </section>
1782
1783               <section>
1784                    <h3 id="Viewing">Viewing</h3>
1785
1786                    <p>
1787                    I check my web page appearance in the 
1788                    <a href="https://www.mozilla.org/en-US/">Firefox</a>,
1789                    <a href="https://www.apple.com/safari/">Safari</a>,
1790                    <a href="https://www.opera.com/">Opera</a>, and
1791                    <a href="https://www.chromium.org/Home/">Chromium</a>
1792                    internet browsers, and on iPad and iPhone devices.
1793                    </p>
1794               </section>
1795
1796               <section>
1797                    <h3 id="GettingListed">Getting Listed</h3>
1798
1799                    <p>
1800                    Some tips on submitting the site to search engines are given in 
1801                    <a href="https://searchenginewatch.com/">search engine watch</a>.
1802                    I test search for my site using 
1803                    <a href="http://www.google.com/">Google</a>.
1804                    </p>
1805               </section>
1806
1807               <section>
1808                    <h3 id="Communicating">Communicating</h3>
1809                    
1810                    <p>
1811                    I also occasionally post on Google groups:
1812                    <a href="https://support.google.com/groups/answer/46601?hl=en&ref_topic=9216&sjid=7362949141285024327-NC">newsgroups</a>.
1813                    </p>
1814               </section>
1815
1816            </article>
1817
1818            <footer class="footnote">
1819                <hr>
1820
1821                <!-- A copyright to preserve my legal rights. -->
1822                <p class="footnote">
1823                    Copyright &copy; 1986-2025 by Sean Erik O'Connor.
1824                    All Rights Reserved.
1825                    &nbsp;&nbsp;&nbsp;
1826                    last updated 09 Jul 25.
1827                </p>
1828            </footer>
1829        </div> <!-- wrapper -->
1830    </body>
1831</html>