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 ;"> </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 ➤ Browser Tools ➤ Web Developer Tools ➤ 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 &lt;FilesMatch "\.(h)$"&gt;
296 &lt;IfModule mod_headers.c&gt;
297 Header set Access-Control-Allow-Origin "*"
298 &lt;IfModule&gt;
299 &lt;FilesMatch&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 &lt;ifmodule mod_deflate.c&gt;
310 AddOutputFilterByType DEFLATE text/text text/html text/plain
311 text/xml text/css application/x-JavaScript application/JavaScript
312 &lt;ifmodule&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 &lt;IfModule mod_expires.c&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 <IfModule>
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 <p class="example" style="background-clip: padding-box;"></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"><h1 class="stylish">Stylish Header</h1></h1>
366
367 <h2><h2>h2 header</h2></h2>
368 <h3><h3>h3 header</h3></h3>
369 <h4><h4>h4 header</h4></h4>
370 <h5><h5>h5 header</h5></h5>
371 <h6><h6>h6 header</h6></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 <!-- JavaScript email utility -->
395 <script src="../Scripts/email.js"<>/script>
396 </div> </div>
397
398 and this code in the body:
399
400 <div class="scrollBox"> <div class="scrollBoxContent">
401 <!-- JavaScript for hiding my email address from spambots yet it works as usual. -->
402 <script>
403 <!--
404 // Insert email address into this file's HTML.
405 var mailMessage = '<em>' + "email" + '</em>' ;
406 document.write( mailto( mailMessage ) ) ;
407 // -->
408 </script>
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 <nav>
420 <ul>
421 <li> List item </li>
422 ...
423 <li> List item </li>
424 </ul>
425 </nav>
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 <article id="TopOfPage" class="content">
436 ...
437 <nav class="backtotop"> <a href="#TopOfPage">Back to top</a<></nav>
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 <ul>
455 <li>
456 <a href="webDesign.html" title="I am the tooltip text!">Hyperlink to this page itself.<a>
457 Hover over the link to see the tooltip!
458 </li>
459 </ul>
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> ⧫
476 <span style="font-size: 1.5rem; font-family: var(--san-serif);"> san-serif</span> ⧫
477 <span style="font-size: 1.7rem; font-family: var(--monospace);"> monospace</span> ⧫
478 <span style="font-size: 2.1rem; font-family: var(--cursive);"> cursive</span> ⧫
479 <span style="font-size: 1.5rem; font-family: var(--fantasy);"> fantasy</span>
480 </p>
481
482 <p>
483 <i>
484 <i> italic text </i>
485 </i>
486 <br>
487
488 <strong>
489 <strong> strong text </strong>
490 </strong>
491 <br>
492
493 <small>
494 <small> small text </small>
495 </small>
496 <br>
497
498 <mark>
499 <mark> colored marker </mark>
500 </mark>
501 <br>
502
503 <s>
504 <s>strike out </s>
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;"> ∮ </span>
512 <span style="font-size: 2rem;"> ∞ </span>
513 <span style="font-size: 2rem;"> ⋯ </span>
514 whose size is controlled like any font.
515 </p>
516
517 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
518 <span style="font-size: 2rem;"> &ContourIntegral; </span>
519 <span style="font-size: 2rem;"> &infin; </span>
520 <span style="font-size: 2rem;"> &ctdot; </span>
521 </div></div>
522
523 <h4>Emphasized Text</h4>
524
525 <em>
526 <em> emphasized text </em>
527 </em>
528 <br>
529
530 <em class="warning">
531 <em class="warning"> warning </em>
532 </em>
533 <br>
534
535 <em class="caution">
536 <em class="caution"> caution </em>
537 </em>
538 <br>
539
540 <h3><h3>h3 header</h3> <em class="warning"><em class="warning">emphasized text in header</em></em></h3>
541 <h3><h3>h3 header</h3> <em class="caution"><em class="caution">emphasized text in header</em></em></h3>
542
543 <em class="wavy">
544 <em class="wavy"> Wiggle Wiggle </em>
545 </em>
546 <br>
547 <br>
548
549 <em class="hotkey">
550 <em class="hotkey"> Blender hot key </em>
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 <code>
565 source code <em> Code Comment </em> <em>
566 <i>indented once</i>
567 <i><i>indented twice</i></i>
568 <i><i><i>indented thrice</i></i></i>
569 </code>
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 <span style="color: white; background-color: var(--warm-brown);">warm-brown<span> . . . 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 <div class="illustratedparagraph">
631 <p>
632 <a href="hyperlink.html">
633 <img src="../Images/home.png" alt="Image of home." height="64" width="64" />
634 <em>illustrated paragraph<em></a>
635 with a hyperlinked image
636 ...
637 </p>
638 <div>
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 <figure>
732 <img src="../Images/mailbox.png" alt="Mail Box Image" >
733
734 <figcaption>
735 Fig 0. Example of a figure.
736 </figcaption>
737 </figure>
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 <blockquote>
750 Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly
751 and applying the wrong remedies.
752 <cite>Groucho Marx</cite>
753 </blockquote>
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 <p class="box">
766 "To raise new questions, new possibilities, to regard old problems from a
767 </p>
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 <p class="changed">
781 “Art is not what you see, but what you make others see.” ― Edgar Degas
782 <br>
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 </p>
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 <p class="footnote">
797 "We are all in the gutter, but some of us are looking at the
798 </p>
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 <p class="fineprint">
810 "If people did not sometimes do silly things, nothing intelligent would
811 </p>
812 </div> </div>
813 </section>
814
815 <section>
816 <h3 id="Lists">Lists</h3>
817
818 <ul>
819 <li>Unordered list</li>
820 <li>img within a list
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 <ul>
827 <li>Unordered list<li>
828 <li>img within a list
829 <img src="../Images/home.png" alt="Home icon." height="16" width="16" />
830 <li>
831 </ul>
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 <ol>
841 <li>Ordered list<li>
842 <li>Ordered list<li>
843 </ol>
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 <ul class="bullet">
860 <li>Unordered list<li>
861 <li>Unordered list<li>
862 <li>Unordered list<li>
863 </ul>
864
865 <ul class="minorBullet">
866 <li>Unordered list<li>
867 <li>Unordered list<li>
868 <li>>Unordered list<li>
869 </ul>
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 <div class="scrollBox"> <div class="scrollBoxContent">
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 </div> </div>
892 </div> </div>
893
894 <div class="scrollBoxTiny"> <div class="scrollBoxContent">
895 <div class="scrollBoxTiny"> <div class="scrollBoxContent">
896 Tiny scroll box.
897 </div> </div>
898 </div></div>
899
900 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
901 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
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 </div> </div>
910 </div> </div>
911
912 <div class="scrollBoxMedium"> <div class="scrollBoxContent">
913 <div class="scrollBoxMedium"> <div class="scrollBoxContent">
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 </div> </div>
922 </div> </div>
923
924 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
925 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
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 </div> </div>
934 </div> </div>
935
936 <div class="scrollBoxHuge"> <div class="scrollBoxContent">
937 <div class="scrollBoxHuge"> <div class="scrollBoxContent">
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 </div> </div>
976 </div> </div>
977 </section>
978
979 <section>
980 <h3 id="Images">Images</h3>
981
982 <p>
983 Centered images, from full width to smaller sizes.
984 </p>
985 <img class="centered" alt="artificer" src="Images/Artificer.jpg">
986 <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
987 <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
988
989 <div class="scrollBox"> <div class="scrollBoxContent">
990 <img class="centered" alt="artificer" src="Images/Artificer.jpg">
991 <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
992 <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
993 </div> </div>
994 </section>
995
996 <section>
997 <h3 id="Tables">Tables</h3>
998
999 <table>
1000 <caption>This is a simple table</caption>
1001
1002 <tr>
1003 <th>Table Header, Column 1</th>
1004 <th>Table Header, Column 2</th>
1005 </tr>
1006
1007 <tr>
1008 <td>Row 1, Column 1.</td>
1009 <td>Row 1, Column 2.</td>
1010 </tr>
1011
1012 <tr>
1013 <td>Row 1, Column 1.</td>
1014 <td>Row 2, Column 2.</td>
1015 </tr>
1016 </table>
1017
1018 <div class="scrollBox"> <div class="scrollBoxContent">
1019 <table>
1020 <caption>This is a simple table</caption>
1021 <tr>
1022 <th>Table Header, Column 1</th>
1023 <th>Table Header, Column 2</th>
1024 </tr>
1025 <tr>
1026 <td>Row 1, Column 1.</td>
1027 <td>Row 1, Column 2.</td>
1028 </tr>
1029 <tr>
1030 <td>Row 1, Column 1.</td>
1031 <td>Row 2, Column 2.</td>
1032 </tr>
1033 </table>
1034 </div> </div>
1035 </section>
1036
1037 <section>
1038 <h3 id="Tooltips">Tooltips</h3>
1039
1040 <p class="box">
1041 Note that tooltips only work on devices which support hover, e.g. computers with mouse, stylus or trackpad.
1042 They are not supported on mobile devices right now.
1043 </p>
1044
1045 <p>
1046 Here is an example tooltip modified a lot from
1047 <a href="https://blog.logrocket.com/creating-beautiful-tooltips-with-only-css/">creating beautiful tooltips using CSS</a>
1048 using the following HTML5 and CSS3+ technologies:
1049 </p>
1050
1051 <ul>
1052 <li>
1053 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position">static, relative, absolute and sticky position</a>
1054 </li>
1055 <li>
1056 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block">layout and contiaing blocks</a>
1057 </li>
1058 <li>
1059 <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>
1060 </li>
1061 <li>
1062 <a href="https://www.sitepoint.com/how-why-use-html5-custom-data-attributes/">custom data attributes</a>
1063 </li>
1064 </ul>
1065
1066 <p>
1067 Your time is limited, so don't waste it living someone else's life.
1068 Don't be trapped by dogma - which is living with the results of other people's thinking.
1069 Don't let the noise of others' opinions drown out your own
1070 <span data-text="-Steve Jobs" class="tooltip">inner voice</span>.
1071 And most important, have the courage to follow your heart and
1072 <span data-text="Steve Jobs again!" class="tooltip">intuition</span>.
1073 </p>
1074
1075 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1076 <span data-text="-Steve Jobs" class="tooltip">inner voice<span>
1077 And most important, have the courage to follow your heart and
1078 <span data-text="-Steve Jobs again!" class="tooltip">inner voice<span>
1079 </div></div>
1080
1081 <p>
1082 Most of the magic is in the CSS <a href="../StyleSheet.css.html">style sheet</a>.
1083 </p>
1084 </section>
1085
1086 <section>
1087 <h3 id="Gallery">Art Gallery</h3>
1088
1089 <p>
1090 An art gallery.
1091 </p>
1092
1093 <div class="gallery">
1094 <div class="painting" title="Fast PC.">
1095 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1096 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1097 </a>
1098 <p>Fast PC</p>
1099 </div>
1100
1101 <div class="painting" title="Black and Gray Chalk on Paper.">
1102 <a href="../Art/Images/ShiftSelectCornea.jpg">
1103 <img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye.">
1104 </a>
1105 <p>3D eye</p>
1106 </div>
1107
1108 <div class="painting" title="Black and Gray Chalk on Paper.">
1109 <a href="../Images/eye.png">
1110 <img src="../Images/eye.png" alt="2D eye.">
1111 </a>
1112 <p>2D eye</p>
1113 </div>
1114
1115 <div class="painting" title="Black and Gray Chalk on Paper.">
1116 <a href="../Images/home.png">
1117 <img src="../Images/home.png" alt="Home">
1118 </a>
1119 <p>Home</p>
1120 </div>
1121 </div>
1122
1123 <div class="scrollBox"> <div class="scrollBoxContent">
1124 <div class="gallery">
1125 <div class="painting" title="Fast PC.">
1126 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1127 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1128 </a>
1129 <p>Fast PC</p>
1130 </div>
1131 <div class="painting" title="Black and Gray Chalk on Paper.">
1132 <a href="../Art/Images/ShiftSelectCornea.jpg">
1133 <img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye.">
1134 </a>
1135 <p>3D eye</p>
1136 </div>
1137 <div class="painting" title="Black and Gray Chalk on Paper.">
1138 <a href="../Images/eye.png">
1139 <img src="../Images/eye.png" alt="2D eye.">
1140 </a>
1141 <p>2D eye</p>
1142 </div>
1143 <div class="painting" title="Black and Gray Chalk on Paper.">
1144 <a href="../Images/home.png">
1145 <img src="../Images/home.png" alt="Home">
1146 </a>
1147 <p>Home</p>
1148 </div>
1149 </div> </div>
1150 </section>
1151
1152 <section>
1153 <h3 id="Movies">Movies</h3>
1154
1155 <video width="320" height="240" controls>
1156 <source src="Images/sean.mp4" type="video/mp4">
1157 Your browser does not support the HTML5 video tag.
1158 </video>
1159
1160 <video width="200" height="100" controls>
1161 <source src="Images/sean.mov" type="video/mp4">
1162 Your browser does not support the HTML5 video tag.
1163 </video>
1164
1165 <div class="scrollBox"> <div class="scrollBoxContent">
1166 <video width="320" height="240" controls>
1167 <source src="Images/sean.mp4" type="video/mp4">
1168 Your browser does not support the HTML5 video tag.
1169 <video>
1170
1171 <video width="500" height="200" controls>
1172 <source src="Images/sean.mov" type="video/mp4">
1173 Your browser does not support the HTML5 video tag.
1174 <video>
1175 </div> </div>
1176 </section>
1177
1178 <section>
1179 <h3 id="Forms">Forms</h3>
1180
1181 <p>Form push button example showing my layout style and a very simple callback</p>
1182
1183 <form>
1184 <ul>
1185 <li>
1186 <fieldset>
1187 <legend>Form Button</legend>
1188 <input type="button" onclick="alert( 'Do not push this button again!' )" value="Push Me!">
1189 </fieldset>
1190 </li>
1191 </ul>
1192 </form>
1193
1194 <div class="scrollBox"> <div class="scrollBoxContent">
1195 <form>
1196 <ul>
1197 <li>
1198 <fieldset>
1199 <legend>Form Button</legend>
1200 <input type="button" onclick="alert(
1201 'Do not push this button again!' )" value="Push Me!" />
1202 </fieldset>
1203 </li>
1204 </ul>
1205 </form>
1206 </div> </div>
1207 </section>
1208
1209 <section>
1210 <h3 id="SVG">SVG</h3>
1211
1212 <p>
1213 <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG)</a> is a language for describing vector graphics.
1214 See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Introduction">Mozilla SVG Tutorial</a>
1215 </p>
1216
1217 <p>
1218 I use <a href="https://inkscape.org">Inkscape</a> to do the drawing and generate the SVG file.
1219 Here's an example, where I've drawn a picture in Inkscape, and saved it to an *.svg file.
1220 Load the *.svg image as you would any image, except I have <em>background: transparent;</em> in the style sheet
1221 so the SVG draws on top of the page, just like a drawing on paper.
1222 Thus the image size fills the containing box (this paragraph) and resizes with the browser window.
1223 <img class="transparent" alt="Yoicks" src="Images/Yoicks.svg" >
1224 </p>
1225
1226 <p>
1227 <em>Yoicks</em> by Sean Erik O'Connor is licensed under the Creative Commons license
1228
1229 <a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v1"
1230 target="_blank"
1231 rel="license noopener noreferrer"
1232 style="display:inline-block;">CC BY-ND 4.0
1233 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1234 src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
1235 alt="">
1236 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1237 src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt="">
1238 <img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;"
1239 src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1" alt=""></a>
1240 </p>
1241
1242 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1243 <img class="transparent" src="Images/Yoicks.svg" >
1244 </div></div>
1245
1246 </section>
1247
1248 <section>
1249 <h3 id="Canvas">Canvas</h3>
1250
1251 <p>
1252 <a href="https://html.spec.whatwg.org/multipage/">Canvas Specification</a>
1253 </p>
1254
1255 <canvas id="canvas" width="300" height="225">
1256 Your browser does not support the canvas API!
1257 </canvas>
1258
1259 <script>
1260 function draw()
1261 {
1262 var canvas = document.getElementById( "canvas" ) ;
1263 var context = canvas.getContext( "2d" ) ;
1264 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1265 gradient.addColorStop( 0, "green" ) ;
1266 gradient.addColorStop( 1, "red" ) ;
1267 context.fillStyle = gradient ;
1268 context.fillRect( 0, 0, 150, 100 ) ;
1269 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1270 context.fillRect( 100, 50, 150, 100 ) ;
1271 }
1272
1273 /* Or you can call from <body onload="draw();"> */
1274 draw() ;
1275 </script>
1276
1277 <div class="scrollBox"> <div class="scrollBoxContent">
1278 <canvas id="canvas" width="300" height="225">
1279 Your browser does not support the canvas API!
1280 <canvas>
1281
1282 <script>
1283 function draw()
1284 {
1285 var canvas = document.getElementById( "canvas" ) ;
1286 var context = canvas.getContext( "2d" ) ;
1287 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1288 gradient.addColorStop( 0, "green" ) ;
1289 gradient.addColorStop( 1, "red" ) ;
1290 context.fillStyle = gradient ;
1291 context.fillRect( 0, 0, 150, 100 ) ;
1292 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1293 context.fillRect( 100, 50, 150, 100 ) ;
1294 }
1295
1296 /* Or you can call from <body onload="draw();"> */
1297 draw() ;
1298 </script>
1299 </div> </div>
1300 </section>
1301
1302 <section>
1303 <h3 id="GoogleSearch">Google Search</h3>
1304
1305 <!-- Form to search my site with Google. From Google's free tools web page. -->
1306 <form method="get" action="http://www.google.com/search">
1307
1308 <div id="GoogleForm">
1309 <input type="hidden" name="ie" value="UTF-8">
1310 <input type="hidden" name="oe" value="UTF-8">
1311
1312 <!-- Required Google logo -->
1313 <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google">
1314 </a>
1315
1316 <!-- A text input control for the (q)uery search string. -->
1317 <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial">
1318
1319 <!-- Submit button: submits this form when activated. -->
1320 <input type="submit" name="btnG" value="Search my site">
1321
1322 <!-- The URL of my site to search.
1323 Determine which server we are on and use the appropriate hyperlink.
1324 Use comments to hide this JavaScript from older browsers.
1325 -->
1326 <script>
1327 <!--
1328 var hostname = location.href
1329 var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://"
1330 var suffix = ".com\">"
1331
1332 if (hostname.match( "atspace" ))
1333 {
1334 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1335 }
1336 else if (hostname.match( "freeservers" ))
1337 {
1338 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1339 }
1340 else if (hostname.match( "file" ))
1341 {
1342 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1343 }
1344 // -->
1345 </script>
1346 </div>
1347 </form>
1348
1349 <div class="scrollBox"> <div class="scrollBoxContent">
1350 <!-- Form to search my site with Google.
1351 From Google's free tools web page.
1352 -->
1353 <form method="get" action="http://www.google.com/search">
1354
1355 <div id="GoogleForm">
1356 <input type="hidden" name="ie" value="UTF-8" />
1357 <input type="hidden" name="oe" value="UTF-8" />
1358
1359 < Required Google logo -->
1360 <a href="http://www.google.com/">
1361 <img src="http://www.google.com/logos/Logo_25wht.gif"
1362 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"
1367 value="Primitive Polynomial" />
1368
1369 < Submit button: submits this form when activated. -->
1370 <input type="submit" name="btnG" value="Search my site" />
1371
1372 < The URL of my site to search.
1373 Determine which server we are on and use the appropriate hyperlink.
1374 Use comments to hide this JavaScript from older browsers.
1375 -->
1376 <script>
1377 <
1378 var hostname = location.href
1379 var prefix = "<input type=\"hidden\"
1380 name=\"sitesearch\" value=\"http://"
1381 var suffix = ".com\" />
1382
1383 if (hostname.match( "atspace" ))
1384 {
1385 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1386 }
1387 else if (hostname.match( "freeservers" ))
1388 {
1389 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1390 }
1391 else if (hostname.match( "file" ))
1392 {
1393 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1394 }
1395 // -->
1396 <script>
1397 <div>
1398 <form>
1399 </div> </div>
1400 </section>
1401
1402 <section>
1403 <h3 id="TypesettingMathematics">Typesetting Mathematics</h3>
1404
1405 <h4>Math on the Web</h4>
1406
1407 <p>
1408 I use <a href="https://www.mathjax.org/">MathJax</a> to typeset equations.
1409 I write equations in $\LaTeX$ in both inline or display style, using single or double
1410 dollar sign delimiters.
1411 Here's the wonderful <a href="../Finance/lshort.pdf">Not So Short Introduction to LATEX</a>
1412 </p>
1413
1414 <p>
1415 For example, the Navier-Stokes equation is
1416 ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1417 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet
1418 V = 0$, $\quad V |_{\partial \Omega} = 0$.
1419 </p>
1420
1421 <div class="scrollBox"> <div class="scrollBoxContent">
1422 dollarsign dollarsign
1423 {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1424 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0
1425 \quad V |_{\partial \Omega} = 0
1426 dollarsign dollarsign
1427 </div> </div>
1428
1429 <p>
1430 The Frobenius norm is
1431 $\| A \|_2 \equiv
1432 \sum_{ij} | A_{ij} |^2 \equiv
1433 \sqrt { tr( A^T A ) }$.
1434 and the error function is defined to be
1435 $ \operatorname{erfc}(x) =
1436 \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt
1437 = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}}
1438 $
1439 </p>
1440
1441 <p>
1442 The Frechet derivative of a vector norm,
1443 $$
1444 Df(x)h =
1445 \lim_{t \rightarrow 0}
1446 {
1447 { f( x + t h) - f(x) }
1448 \over
1449 {t}
1450 }
1451 $$
1452 $$
1453 =
1454 \lim_{t \rightarrow 0}
1455 {
1456 { \sqrt{ {\| x \|}^2 + 2 \lt x | t h \gt + {\| t h \|}^2 } - \| x \|}
1457 \over
1458 {t}
1459 }
1460 $$
1461 </p>
1462
1463 <p>
1464 A circulant matrix equation,
1465 $$
1466 \left(
1467 \begin{array} { cccccc }
1468 a^{sn} & a^{s(n-1)} & \ldots & a^s & 1 \\
1469 a^{s(n+1)} & a^{sn} & \ldots & a^{s+1} & a^s \\
1470 \ldots \\
1471 a^{s(2n)} & a^{s(2n-1)} &\ldots & a^{s(n+1)} & a^{sn}
1472 \end{array}
1473 \right)
1474 X
1475 =
1476 \left(
1477 \begin{array} { c }
1478 c_{n} \\
1479 c_{n-1} \\
1480 \ldots \\
1481 c_0
1482 \end{array}
1483 \right)
1484 $$
1485 </p>
1486
1487 <p>
1488 a Fourier transform sum,
1489 $$
1490 \sum_{k_0=0}^1 \sum_{k_1=0}^1\ldots
1491 \sum_{k_{g-1}=0}^1
1492 \quad \times
1493 $$
1494 $$
1495 \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0)
1496 \quad \times
1497 $$
1498 $$
1499 W^{ (n_0) (2^{g-1}k_{g-1})}
1500 W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})}
1501 W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)}
1502 $$
1503 <p>
1504
1505 <p>
1506 and a normalized cross-correlation,
1507 $$
1508 P = \frac{\displaystyle{
1509 \sum_{i=1}^n (x_i- x) (y_i- y)}}
1510 {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2
1511 \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}}
1512 $$
1513 Update form for mean,
1514 $$
1515 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1516 {n+1}}
1517 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1518 $$
1519 </p>
1520
1521 <div class="scrollBox"> <div class="scrollBoxContent">
1522 Update form for mean,
1523 dollarsign dollarsign
1524 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1525 {n+1}}
1526 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1527 dollarsign dollarsign
1528 </div> </div>
1529
1530 <p>
1531 MathJax will show you the source code for the equation with a right
1532 click over the equation, or you can set hover to show the equation source.
1533 </p>
1534
1535 <figure>
1536 <img src="Images/MathJaxShowMathAs.jpg" alt="MathJax Show Math As" >
1537 <img src="Images/MathJaxEquationsSource.jpg" alt="MathJax Equation Source" >
1538
1539 <figcaption>
1540 Right click on the mathematical symbols to get a MathJax menu.
1541 </figcaption>
1542 </figure>
1543
1544 <h4>Setting up MathJax</h4>
1545
1546 <p>
1547 Follow the instructions in
1548 <a href="https://docs.mathjax.org/en/latest/web/hosting.html#web-hosting">Hosting MathJax on Your Web Page</a>
1549 First create a directory <em>/mathjax</em> which contains the minimum necessary files (not source files) by cloning in git.
1550 Fetch the latest tagged version.
1551 </p>
1552
1553 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
1554 git clone https://github.com/mathjax/MathJax.git mathjax
1555
1556 git tag
1557 . . .
1558 3.2.2
1559 . . .
1560
1561 git checkout tags/3.2.2 -b 3.2.2
1562
1563 git branch
1564 * 3.2.2
1565 develop
1566 master
1567 </div></div>
1568
1569 <p>
1570 Put this script into your <em>/Scripts</em> directory which configures and loads MathJax.
1571 See the instructions for
1572 <a href="https://docs.mathjax.org/en/latest/web/configuration.html">Configuring and Loading in One Script</a>
1573 and
1574 <a href="https://docs.mathjax.org/en/latest/web/hosting.html">hosting your own copy of MathJax on your server</a>
1575 and also
1576 <a href="https://docs.mathjax.org/en/latest/web/configuration.html">configuring MathJax</a>
1577 This script loads MathJax in three different ways:
1578 </p>
1579
1580 <ul>
1581 <li>From MathJax files in the /mathjax directory on my local development platform (MacBook Pro).</li>
1582 <li>From MathJax files in the /mathjax directory on my web host (after
1583 uploading the directory to my web host).</li>
1584 <li>Otherwise from CDN URL for MathJax.</li>
1585 </ul>
1586
1587 <ul class="download">
1588 <li class="downloadName">load-mathjax.js</li>
1589 <li class="downloadDescription">Load MathJax JavaScript.</li>
1590 <li class="downloadView">
1591 <a href="../Scripts/load-mathjax.js.html">
1592 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1593 </li>
1594 <li class="download">
1595 <a href="../Scripts/load-mathjax.js" download="../Scripts/load-mathjax.js">
1596 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1597 </li>
1598 </ul>
1599
1600 <p>
1601 Then in each web page, put this into your <head> section before loading the style sheet,
1602 </p>
1603
1604 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1605 <!-- Configure and load MathJax -->
1606 <script src="../Scripts/load-mathjax.js" async></script>
1607 </div></div>
1608
1609 <p>
1610 Not happening now, but this used to happen with a 2018 version of MathJax:
1611 I was getting timeouts loading the italic font from my server,
1612 but not for my local web page on my MacBook Pro host.
1613 So I added the following .htaccess file in mathjax/fonts which fixed the
1614 problem.
1615 My Apache web server didn't recognize the .woff font file type and was
1616 not allowing access to the files as explained in
1617 <a href="http://httpd.apache.org/docs/current/howto/htaccess.html">
1618 Apache how to for htaccess</a>.
1619 </p>
1620
1621 <div class="scrollBox"> <div class="scrollBoxContent">
1622 <FilesMatch "\.(ttf|otf|eot|woff)$">
1623 <IfModule mod_headers.c>
1624 Header set Access-Control-Allow-Origin "*"
1625 </IfModule>
1626 </FilesMatch>
1627 AddType application/x-font-woff woff
1628 </div> </div>
1629 </section>
1630
1631 <section>
1632 <h3 id="Maintainance">Maintainance</h3>
1633
1634 <p>
1635 In the top level directory, I have a
1636 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html#PROGRAMMINGLANGUAGES">Python</a>
1637 script called <em>updateweb.py</em> which maintains this site. Some of its features:
1638 </p>
1639
1640 <ul>
1641 <li>Automatic generation of syntax highlighted source code listings.</li>
1642 <li>Automatic search and replace any type of text (e.g. old copyright notices) in all hypertext and source files.</li>
1643 <li>Delete temporary files and directories generated by compilers.</li>
1644 <li>Upload the changed web pages files to my host web site.</li>
1645 </ul>
1646
1647 <p>
1648 <em>updateweb Version 7.3 - A Python utility program which maintains my web site</em> is distributed under the terms of the
1649 <a href="https://www.gnu.org/licenses/">GNU General Public License</a>.
1650 </p>
1651
1652 <ul class="download">
1653 <li class="downloadName">updateweb.py</li>
1654 <li class="downloadDescription">Update Web Page Script</li>
1655 <li class="downloadView">
1656 <a href="MaintainWebPage/updateweb.py.html">
1657 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1658 </li>
1659 <li class="download">
1660 <a href="MaintainWebPage/updateweb.py" download="MaintainWebPage/updateweb.pys">
1661 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1662 </li>
1663
1664 <li class="downloadName">updateweb.yaml</li>
1665 <li class="downloadDescription">Update Web Page YAML configuration file (demo example only).</li>
1666 <li class="downloadView">
1667 <a href="MaintainWebPage/updateweb.yaml.html">
1668 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1669 </li>
1670 <li class="download">
1671 <a href="MaintainWebPage/updateweb.yaml" download="MaintainWebPage/updateweb.yaml">
1672 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1673 </li>
1674 </ul>
1675
1676 <p>
1677 I still need to submit each page to a final
1678 <a href="https://validator.w3.org/checklink/">link check</a>
1679 as web links undergo software rot.
1680 </p>
1681 </section>
1682
1683 <section>
1684 <h3 id="DevelopmentEnvironment">Development Environment</h3>
1685
1686 <figure>
1687 <a href="Images/Artificer.jpg">
1688 <img src="Images/Artificer.jpg"
1689 height="250" width="400"
1690 alt="Artificer laptop running macOS.">
1691 </a>
1692 <figcaption>MacBook Pro laptop running macOS.</figcaption>
1693 </figure>
1694
1695 <p style="clear:both">
1696 I do my development on my MacBookPro 16-inch, 2021 Apple M1 Max laptop running macOS Sonoma 14.5 (23F79)
1697 on which I have loaded a variety of
1698 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html"><em>software designer's tools</em></a>
1699 I also develop on a CyberPowerPC Series C 2019 ET8880-1202 running Ubuntu Linux 20.04 LTS (Focal Fossa).
1700 </p>
1701
1702 <figure>
1703 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1704 <img src="Images/CyberPowerPCUbuntuGauss.jpg"
1705 height="350" width="600"
1706 alt="CyberPower PC running Ubuntu Linux">
1707 </a>
1708 <figcaption>CyberPower PC running Ubuntu Linux.</figcaption>
1709 </figure>
1710 </section>
1711
1712 <section>
1713 <h3 id="Hosting">Hosting</h3>
1714
1715 <p>
1716 I use Freeservers, which I have used for a number of years with
1717 excellent results. I used to use the file manager in the
1718 <a href="http://seanerikoconnor.freeservers.com/cgi-bin/login">
1719 member</a>
1720 area, but now I use my
1721 <a href="#Maintainance">automatic updater program</a>.
1722 </p>
1723
1724 <p>
1725 I use AT&T DSL with a wireless transceiver so I can communicate
1726 to my laptop.
1727 Once upon a time, I connected through the phone on a separate line
1728 using a modem with
1729 <a href="https://www.netzero.net/">Netzero</a>
1730 as my ISP.
1731 </p>
1732 </section>
1733
1734 <section>
1735 <h3 id="Viewing">Viewing</h3>
1736
1737 <p>
1738 I check my web page appearance in the
1739 <a href="https://www.mozilla.org/en-US/">Firefox</a>,
1740 <a href="https://www.apple.com/safari/">Safari</a>,
1741 <a href="https://www.opera.com/">Opera</a>, and
1742 <a href="https://www.chromium.org/Home/">Chromium</a>
1743 internet browsers, and on iPad and iPhone devices.
1744 </p>
1745 </section>
1746
1747 <section>
1748 <h3 id="GettingListed">Getting Listed</h3>
1749
1750 <p>
1751 Some tips on submitting the site to search engines are given in
1752 <a href="https://searchenginewatch.com/">search engine watch</a>.
1753 I test search for my site using
1754 <a href="http://www.google.com/">Google</a>.
1755 </p>
1756 </section>
1757
1758 <section>
1759 <h3 id="Communicating">Communicating</h3>
1760
1761 <p>
1762 I also occasionally post on Google groups:
1763 <a href="https://support.google.com/groups/answer/46601?hl=en&ref_topic=9216&sjid=7362949141285024327-NC">newsgroups</a>.
1764 </p>
1765 </section>
1766
1767 </article>
1768
1769 <footer class="footnote">
1770 <hr>
1771
1772 <!-- A copyright to preserve my legal rights. -->
1773 <p class="footnote">
1774 Copyright © 1986-2025 by Sean Erik O'Connor.
1775 All Rights Reserved.
1776
1777 last updated 25 Jun 25.
1778 </p>
1779 </footer>
1780 </div> <!-- wrapper -->
1781 </body>
1782</html>