Sin( x y ) Image Border.



I detail the steps involved in creating, designing, hosting and maintaining my web pages.

Content and Graphic Design

Content is paramount, but your web page should be pleasant to read. Learning Web Design, 4th Edition, A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics by Jennifer Niederst Robbins

If you're designing responsive web design (and you should be) on Mac OS Safari you can turn on Preferences/Advanced/Show Develop menu in menu bar. Then go to the top menu bar and select Develop/Enter Responsive Design Mode to simulate your your web page on mobile devices.


The main web page is the HTML file index.html in the top level directory. The other items are sorted into subdirectories. Image files are of type .png or .jpg and usually put into their own separate directories.


My web pages are written in HTML 5 with help from Diving into HTML 5 I use some unicode which I edit with the Vim text editor using html or css syntax mode. I also use predefined macros. Upon completion, I validate each HTML file using W3C's service.


I use JavaScript in my web pages. To get started, read the online book Eloquent JavaScript and refer to the Mozilla Javascript Course

Style Sheets

My documents use CSS style sheets. I have one CSS style sheet for all my documents, which I validate

Server Side

My server uses Apache. Here are some server side fixups and optimizations which go into the .htaccess. file which in the top level directory of the web site.

  1. Specify a personal 404 document for broken links.
  2. My host's Apache web server didn't recognize the C language header .h and Mathematica .nb file file types and was not allowing access to the files. So I added the file extension type into my top-level .htaccess file on the server,
  3. Server compresses web file types before sending. The client side browsers will decompress it.
  4. Server tells browsers to cache files locally for faster page loading.
# BEGIN ERROR DOCUMENT # Personalized error document for broken links. # See ErrorDocument 404 /error404.html # END ERROR DOCUMENT # BEGIN ADD MIME TYPE FOR FILES # Tell the server to support a particular MIME type. # See <FilesMatch "\.(h)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" <IfModule> <FilesMatch> AddType text/plain h AddType text/plain nb Addtype text/plain for Addtype text/plain FOR # END ADD MIME TYPE FOR FILES # BEGIN DEFLATE COMPRESSION # Server will compress these MIME file types. Browser will decompress. # See <ifmodule mod_deflate.c> AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript <ifmodule> # END DEFLATE COMPRESSION ## BEGIN BROWSER CACHING # Ask the user's browser to cache certain file types for a limited time after # the first web page visit. The server can then avoid resending them and page # loads will be faster. After the expiration time, files will be sent again. # See <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 day" ExpiresByType image/jpeg "access plus 1 day" ExpiresByType image/gif "access plus 1 week" ExpiresByType image/png "access plus 1 day" ExpiresByType text/css "access plus 1 week" ExpiresByType application/pdf "access plus 1 week" ExpiresByType text/x-javascript "access plus 1 day" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 week" ExpiresDefault "access plus 2 days" <IfModule> ## END BROWSER CACHING

Example Headers em class=highlighted em class=lowlighted

Stylish h1 Header

h2 header

The header above was produced with the following code:
<h3 id="ExampleHeaders"> Example Headers <em class="highlighted">em class=highlighted<em> <em class="lowlighted">em class=lowlighted<em> <h3> <h1 class="stylish">Stylish h1 Header<h1> <h2>h2 header<h2>

Here is the source code of the CSS2 style sheet used in this document. And here is the source code of the additional CSS2 style sheet used for Win/IE browsers to work around the position:fixed bug.


This is an email header:

me if you have questions or comments.

produced with this code in the header:
<!-- Javascript email utility --> <script src="../Scripts/email.js"<>/script>
and this code in the body:
<!-- Javascript for hiding my email address from spambots yet it works as usual. --> <script> <!-- // Insert email address into this file's HTML. var mailMessage = '<em>' + "email" + '</em>' ; document.write( mailto( mailMessage ) ) ; // --> </script> me if you have questions or comments.
The navigation sidebar on the left was produced with this code:
<nav class="tableOfContents"> <ul> <li> List item </li> ... <li> List item </li> </ul> </nav>
<ul> <li> <a href="./nosuchpage.html">error 404 test (page not found)<a> <li> <ul>

Browser Detection

<!-- Thanks to Giorgio Sardo at for this code snippet. --> <script> <!-- function getInternetExplorerVersion() { var version = 0 ; if (navigator.appName == 'Microsoft Internet Explorer') { var userAgent = navigator.userAgent; /* Pull out IE version number from the user agent string. */ var pattern = new RegExp( "MSIE ([0-9]{1,}[\.0-9]{0,})" ) ; if (pattern.exec( userAgent ) != null) version = parseFloat(RegExp.$1) ; } return version ; } function checkVersion() { var message = "Javascript shows: Not using Windows Internet Explorer." ; var version = getInternetExplorerVersion() ; if (version != 0) { if (version >= 8.0) message = "Javascript shows: Using Windows Internet Explorer 8.0 or later." else message = "Javascript shows: Using an older version " + version + " of Windows Internet Explorer." ; } document.write( "<p><em class=\"lowlighted\">" + message + "</em></p>" ) ; } checkVersion() ; if ( (navigator.userAgent.match( /iPhone/i ))) document.write( '<p>Javascript shows your device is an <em>iPhone</em></p>' ) else if ( (navigator.userAgent.match( /iPod/i ))) document.write( '<p>Javascript shows your device is an <em>iPod</em></p>' ) else if ( (navigator.userAgent.match( /iPad/i ))) document.write( '<p>Javascript shows your device is an <em>iPad</em></p>' ) else document.write( '<p>Javascript shows your device is a <em>web browser</em> of type <br />' + navigator.userAgent + '</p>') // --> </script>

Headers, Paragraphs and Images (h3)

Paragraphs, section headings, images of various kinds, and figures with images and caption with images and captions.

Subsection Heading (h4)

Subsubsection Heading (h5)

Placing an embedded image Home icon. in a paragraph. “Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong remedies.” ― Groucho Marx

<p> Placing an embedded image <img src="../WebPageImages/home.png" alt="Home icon." height="64" width="64" /> in a paragraph. </p>

This image is centered in a frame of its own. Business Card. Business Card. Business Card.

<p> <img class="centered" src="../WebPageImages/businessCard.jpg" alt="Business Card." /> <img class="centeredsmaller" src="../WebPageImages/businessCard.jpg" alt="Business Card." /> <img class="centeredsmallest" src="../WebPageImages/businessCard.jpg" alt="Business Card." /> </p>
Inline text styles include
<em> emphasized text </em>
<em class="highlighted"> text </em>
<em class="lowlighted"> text </em>
<strong> text </em>
<em class="mild"> text </em>
<em class="alternate"> text </em>
<p class="pseudocode">

<i> a_line_of( pseudo, code ) ; </i> <em> // Comment</em>


Image of home. illustrated paragraph with a hyperlinked image and text plus extra paragraph filler. This image icon floats left within a paragraph as shown here.

“Our ignorance can be divided into problems and mysteries. When we face a problem, we may not know its solution, but we have insight, increasing knowledge, and an inkling of what we are looking for. When we face a mystery, however, we can only stare in wonder and bewilderment, not knowing what an explanation would even look like.” ― Noam Chomsky

<div class="icon"> <p> <a href="hyperlink.html"> <img src="../WebPageImages/home.png" alt="Image of home." height="64" width="64" /> <em>div class icon<em>lt;a> with a hyperlinked image <a href="professionalInterests.html"> <em> and hyperlinked text<em> <a> plus extra paragraph filler. ... <p> <div>

This paragraph of class "spacedout" has larger font and more vertical space between previous and next paragraphs. "Solitude is painful when one is young, but delightful when one is more mature." -Albert Einstein

Mail Box Image
Fig 0. Example of a figure.

This is a series of normal paragraphs with a figure before it so that the text flows around it.

"The artist is the creator of beautiful things.

To reveal art and conceal the artist is art's aim. The critic is he who can translate into another manner or a new material his impression of beautiful things.

The highest as the lowest form of criticism is a mode of autobiography. Those who find ugly meanings in beautiful things are corrupt without being charming. This is a fault.

Those who find beautiful meanings in beautiful things are the cultivated. For these there is hope. They are the elect to whom beautiful things mean only beauty.

There is no such thing as a moral or an immoral book. Books are well written, or badly written. That is all.

The nineteenth century dislike of realism is the rage of Caliban seeing his own face in a glass.

The nineteenth century dislike of romanticism is the rage of Caliban not seeing his own face in a glass. The moral life of man forms part of the subject-matter of the artist, but the morality of art consists in the perfect use of an imperfect medium.

No artist desires to prove anything. Even things that are true can be proved. No artist has ethical sympathies. An ethical sympathy in an artist is an unpardonable mannerism of style. No artist is ever morbid. The artist can express everything.

Thought and language are to the artist instruments of an art. Vice and virtue are to the artist materials for an art. From the point of view of form, the type of all the arts is the art of the musician. From the point of view of feeling, the actor's craft is the type. All art is at once surface and symbol. Those who go beneath the surface do so at their peril.

Those who read the symbol do so at their peril. It is the spectator, and not life, that art really mirrors. Diversity of opinion about a work of art shows that the work is new, complex, and vital. When critics disagree, the artist is in accord with himself.

We can forgive a man for making a useful thing as long as he does not admire it. The only excuse for making a useless thing is that one admires it intensely.

All art is quite useless."

-Oscar Wilde, Preface to The Picture of Dorian Grey.

<figure> <img src="../WebPageImages/mailbox.png" alt="Mail Box Image" > <figcaption> Fig 0. Example of a figure. </figcaption> </figure>

"To raise new questions, new possibilities, to regard old problems from a new angle, requires creative imagination and marks real advance in science." -Albert Einstein

<p class="box"> Ich bin... </p>

“Art is not what you see, but what you make others see.” ― Edgar Degas

<p class="changed"> Ich bin... </p>

"You see, wire telegraph is a kind of a very, very long cat. You pull his tail in New York and his head is meowing in Los Angeles. Do you understand this? And radio operates exactly the same way: you send signals here, they receive them there. The only difference is that there is no cat." -Albert Einstein

“Art is the only serious thing in the world. And the artist is the only person who is never serious.” ― Oscar Wilde

"We are all in the gutter, but some of us are looking at the stars.” - Oscar Wilde

<p class="inprogress"> Ich bin... </p>

This is a paragraph type for examples. "If people did not sometimes do silly things, nothing intelligent would ever get done." -Ludwig Wittgenstein

"Whereof one cannot speak, thereof one must be silent." -Ludwig Wittgenstein

<p class="example"> Ich bin... </p>


<ul> <li>Unordered list<li> <li class="alternate">alternate<li> <li>img within a list <img class="icon" src="../WebPageImages/home.png" alt="Home icon." height="16" width="16" /> <li> </ul>
  1. Ordered list
  2. alternate
  3. Ordered list
<ol> <li>Ordered list<li> <li class="alternate">alternate<li> <li>Ordered list<li> </ol>
<ul class="bullet"> <li>Unordered list<li> <li>Unordered list<li> <li>Unordered list<li> </ul> <ul class="minorBullet"> <li>Unordered list<li> <li>Unordered list<li> <li>>Unordered list<li> </ul>

Scroll Box

Scroll box.

<div class="scrollBox"> <div class="scrollBoxContent"> Scroll box example. Scroll box example. Scroll box example. Scroll box example. Scroll box example. <p>


Row 1, Column 1. Row 1, Column 2.
Row 1, Column 1. Row 2, Column 2.
<table> <tr> <td>First row of table.<td> <td>First row of table, column 2.<td> <tr> <tr> <td>Third row of table.<td> <tr> <table>

A table for downloading.

td element inside table class = download with colspan 2.
Second row of table with class "download". img within td Home icon.
td class = "download". td class = "package".
<table class="download"> <tr> <td colspan="2">td element inside table class = download with colspan 2.<td> <tr> <tr> <td class="download">Second row of table with class "download".<td> <td>img within td <img class="icon" src="../WebPageImages/home.png" alt="Home icon." height="16" width="16" /> <td> <tr> <tr> <td class="download">td class = "download".<td> <td class="package">td class = "package".<td> <tr> <table>

A table of class gallery with td of class gallery for my art gallery.

<table id="Gallery" class="gallery"> <tr> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home icon." \> <td> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home icon." \> <td> <tr> <tr> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home." \> <td> <td class="gallery"> <img src="../WebPageImages/home.png" alt="Home." \> <td> <tr> <table>



<video width="320" height="240" controls> <source src="WebPageImages/sean.mp4" type="video/mp4"> Your browser does not support the HTML5 video tag. <video> <video width="500" height="200" controls> <source src="WebPageImages/" type="video/mp4"> Your browser does not support the HTML5 video tag. <video>


Form input

<form method="get" action="styleSheetTest.html"> <div id="formContainer"> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> <input type="text" name="q" size="32" maxlength="255" value="Type some input" /> <input type="submit" name="btnG" value="Push button to go to this page." /> <div> <form>


Scalable Vector Graphics (SVG) is a language for describing vector graphics. See the Mozilla SVG Tutorial

I use Inkscape to do the drawing and generate the SVG file.

Here's an example, where I've drawn a picture in Inkscape, and saved it to an *.svg file. I then deleted the width and height attributes in the svg header and edited the viewbox dimensions.

<xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="" ... //// Delete width="210mm" //// Delete height="297mm" //// Reduce the y dimension to remove blank space. /// viewBox="0 0 210 297" viewBox="0 0 210 200" ...

Load the *.svg image as you would any image,

<img src="WebPageImages/Drawing.svg">

Thus the image size fills the containing box (the paragraph) and resizes with the browser window.


Canvas Specification

Your browser does not support the canvas API!
<canvas id="canvas" width="300" height="225"> Your browser does not support the canvas API! <canvas> <script> function draw() { var canvas = document.getElementById( "canvas" ) ; var context = canvas.getContext( "2d" ) ; var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ; gradient.addColorStop( 0, "green" ) ; gradient.addColorStop( 1, "red" ) ; context.fillStyle = gradient ; context.fillRect( 0, 0, 150, 100 ) ; context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ; context.fillRect( 100, 50, 150, 100 ) ; } /* Or you can call from <body onload="draw();"> */ draw() ; </script>



<p class="footnote">
This is a paragraph of class "footnote".


Google Search

<!-- Form to search my site with Google. From Google's free tools web page. --> <form method="get" action=""> <div id="GoogleForm"> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="oe" value="UTF-8" /> < Required Google logo --> <a href=""> <img src="" alt="Google" /> <a> < A text input control for the (q)uery search string. --> <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial" /> < Submit button: submits this form when activated. --> <input type="submit" name="btnG" value="Search my site" /> < The URL of my site to search. Determine which server we are on and use the appropriate hyperlink. Use comments to hide this Javascript from older browsers. --> <script> < var hostname = location.href var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://" var suffix = ".com\" /> if (hostname.match( "atspace" )) { document.write( prefix + "seanerikoconnor.atspace" + suffix ) } else if (hostname.match( "freeservers" )) { document.write( prefix + "seanerikoconnor.freeservers" + suffix ) } else if (hostname.match( "file" )) { document.write( prefix + "seanerikoconnor.freeservers" + suffix ) } // --> <script> <div> <form>

Typesetting Mathematics

Math on the Web

I use MathJax to typeset equations. I write equations in $\LaTeX$ in both inline or display style, using single or double dollar sign delimiters.

For example, the Navier-Stokes equation is ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet V = 0$, $\quad V |_{\partial \Omega} = 0$.

dollar {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V = {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0 dollar dollar \quad V |_{\partial \Omega} = 0 dollar

The Frobenius norm is $\| A \|_2 \equiv \sum_{ij} | A_{ij} |^2 \equiv \sqrt { tr( A^T A ) }$. and the error function is defined to be $ \operatorname{erfc}(x) = \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}} $

The Frechet derivative of a vector norm, $$ Df(x)h = \lim_{t \rightarrow 0} { { f( x + t h) - f(x) } \over {t} } = \lim_{t \rightarrow 0} { { \sqrt{ {\| x \|}^2 + 2 <x | t h> + {\| t h \|}^2 } - \| x \|} \over {t} } $$

A circulant matrix equation, $$ \left( \begin{array} { cccccc } a^{sn} & a^{s(n-1)} & \ldots & a^s & 1 \\ a^{s(n+1)} & a^{sn} & \ldots & a^{s+1} & a^s \\ \ldots \\ a^{s(2n)} & a^{s(2n-1)} &\ldots & a^{s(n+1)} & a^{sn} \end{array} \right) X = \left( \begin{array} { c } c_{n} \\ c_{n-1} \\ \ldots \\ c_0 \end{array} \right) $$ a Fourier transform sum, $$ \sum_{k_0=0}^1 \sum_{k_1=0}^1\ldots \sum_{k_{g-1}=0}^1 \quad \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0) W^{ (n_0) (2^{g-1}k_{g-1})} W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})} W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)} $$ and a normalized cross-correlation, $$ P = \frac{\displaystyle{ \sum_{i=1}^n (x_i- x) (y_i- y)}} {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2 \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}} $$ Update form for mean, $$ M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over {n+1}} ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}} $$

Update form for mean, dollar dollar M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over {n+1}} ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}} dollar dollar

MathJax will show you the source code for the equation with a right click over the equation, or you can set hover to show the equation source.

MathJax Show Math As
Right click on the mathematical symbols to get a MathJax menu.
MathJax Equation Source
MathJax will then show the equation source code.

Setting up MathJax

To set up MathJax for your web page, put this into your <head> section

<!-- Configure MathJax to use dollar sign delimiters for inline math and double dollar sign delimiters for display math. --> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/x-mathjax-config"> <!-- Change timeout values per Davide Cervone --> MathJax.Ajax.timeout = 10000 ; // 10 second timeout for file access. MathJax.Hub.Register.StartupHook( "HTML-CSS Jax Startup", function () { MathJax.OutputJax[ "HTML-CSS"].Font.timeout = 10000 ; // 10 second font timeout }) ; <!-- Increase the math font size relative to the surrounding text for readability. --> MathJax.Hub.Config( { "HTML-CSS": { scale: 120 } }); </script>

Then either use the MathJax server,
<script type='text/javascript' src=''> <script>

Or else use a local copy of MathJax on your server: Read the instructions on putting MathJax on your server I got the latest distribution with Git:

git clone git:// MathJax cd MathJax git pull origin

Using ftp, I copied /MathJax onto my web server top level directory under /MathJax. I was getting timeouts loading the italic font from my server, but not for my local web page on my MacBook Pro host. So I added the following .htaccess file in MathJax/fonts which fixed the problem. My Apache web server didn't recognize the .woff font file type and was not allowing access to the files as explained in Apache how to for htaccess.

<FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> AddType application/x-font-woff woff

Then point to your copy of MathJax on your server in your <head> section,

<script type="text/javascript" src="./MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> <script>


In the top level directory, I have a Python script called which maintains this site. It deletes temporary files and directories, rewrites hypertext and program source code as necessary, and uploads my changed web pages to my web sites automatically, and does a multitude of checking and automatic rewriting of my web page files.

Source code is distributed under the terms of the GNU General Public License. The current version number is 5.0 Update Web Page Python Script Eye icon for source code viewing. View     Compact disk icon for source code download. Download

I still need to submit each page to a final link check as web links undergo software rot.


Freeservers won't display code in .c or .cpp files, so hyperlink to copies of the source files with .c.txt and .cpp.txt file extensions instead to view them.

Development Environment

Artificer laptop.
Artificer laptop.

I do my development on my 15" MacBookPro laptop on which I have loaded a variety of software designer's tools

I backup onto a portable Seagate USB drive with Time Machine. Everything fits into a Targus carrying case along with the power supply.


I use Freeservers, which I have used for a number of years with excellent results. I used to use the file manager in the member area, but now I use my automatic updater program.

I use AT&T DSL with a wireless transceiver so I can communicate to my laptop. Once upon a time, I connected through the phone on a separate line using a modem with Netzero as my ISP.


I check my web page appearance in the Firefox, Safari, Opera, and Chromium internet browsers, and on iPad and iPhone devices.

Getting Listed

Some tips on submitting the site to search engines are given in search engine watch. I test search for my site using Google.


I also occasionally post some specific areas of my site on the newsgroups.

Copyright © 1986-2019 by Sean Erik O'Connor. All Rights Reserved.     last updated 01 Jan 19.