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>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 <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 <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 <img class="centered" alt="artificer" src="Images/Artificer.jpg">
993 <img class="centeredsmaller" alt="artificer" src="Images/Artificer.jpg">
994 <img class="centeredsmallest" alt="artificer" src="Images/Artificer.jpg">
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 <img src="Images/volcano.jpg" height="50rem">
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 <img src="Images/volcano.jpg" height="50rem">
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 <em class="hotkey">img src="Images/volcano.jpg" height="50rem"><\em>
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 <table>
1069 <caption>This is a simple table</caption>
1070 <tr>
1071 <th>Table Header, Column 1</th>
1072 <th>Table Header, Column 2</th>
1073 </tr>
1074 <tr>
1075 <td>Row 1, Column 1.</td>
1076 <td>Row 1, Column 2.</td>
1077 </tr>
1078 <tr>
1079 <td>Row 1, Column 1.</td>
1080 <td>Row 2, Column 2.</td>
1081 </tr>
1082 </table>
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 <span data-text="-Steve Jobs" class="tooltip">inner voice<span>
1126 And most important, have the courage to follow your heart and
1127 <span data-text="-Steve Jobs again!" class="tooltip">inner voice<span>
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 <div class="gallery">
1174 <div class="painting" title="Fast PC.">
1175 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1176 <img src="Images/CyberPowerPCUbuntuGauss.jpg" alt="Fast PC.">
1177 </a>
1178 <p>Fast PC</p>
1179 </div>
1180 <div class="painting" title="Black and Gray Chalk on Paper.">
1181 <a href="../Art/Images/ShiftSelectCornea.jpg">
1182 <img src="../Art/Images/ShiftSelectCornea.jpg" alt="3D eye.">
1183 </a>
1184 <p>3D eye</p>
1185 </div>
1186 <div class="painting" title="Black and Gray Chalk on Paper.">
1187 <a href="../Images/eye.png">
1188 <img src="../Images/eye.png" alt="2D eye.">
1189 </a>
1190 <p>2D eye</p>
1191 </div>
1192 <div class="painting" title="Black and Gray Chalk on Paper.">
1193 <a href="../Images/home.png">
1194 <img src="../Images/home.png" alt="Home">
1195 </a>
1196 <p>Home</p>
1197 </div>
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 <video width="320" height="240" controls>
1216 <source src="Images/sean.mp4" type="video/mp4">
1217 Your browser does not support the HTML5 video tag.
1218 <video>
1219
1220 <video width="500" height="200" controls>
1221 <source src="Images/sean.mov" type="video/mp4">
1222 Your browser does not support the HTML5 video tag.
1223 <video>
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 <form>
1245 <ul>
1246 <li>
1247 <fieldset>
1248 <legend>Form Button</legend>
1249 <input type="button" onclick="alert(
1250 'Do not push this button again!' )" value="Push Me!" />
1251 </fieldset>
1252 </li>
1253 </ul>
1254 </form>
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
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 <p>
1292 In the HTML, load the SVG image,
1293 </p>
1294
1295 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1296 <img class="transparent" src="Images/Yoicks.svg" >
1297 </div></div>
1298
1299 <p>
1300 And in the style sheet, define
1301 </p>
1302
1303 <div class="scrollBox"> <div class="scrollBoxContent">
1304 /* Make an SVG image look like a drawing on top of the paper. */
1305 img.transparent
1306 {
1307 background: transparent ;
1308 max-width: 100% ; /* Image won't be larger than its containing block.*/
1309 }
1310 </div></div>
1311
1312 <p>
1313 I used <a href="https://inkscape.org">Inkscape</a> to draw this diagram and
1314 its pdflatex extension to create mathematical text in LaTeX,
1315
1316 <img width="500rem" class="transparent" src="Images/Mathy.svg" alt="Math in Inkscape">
1317 </p>
1318
1319 </section>
1320
1321 <section>
1322 <h3 id="Canvas">Canvas</h3>
1323
1324 <p>
1325 <a href="https://html.spec.whatwg.org/multipage/">Canvas Specification</a>
1326 </p>
1327
1328 <canvas id="canvas" width="300" height="225">
1329 Your browser does not support the canvas API!
1330 </canvas>
1331
1332 <script>
1333 function draw()
1334 {
1335 var canvas = document.getElementById( "canvas" ) ;
1336 var context = canvas.getContext( "2d" ) ;
1337 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1338 gradient.addColorStop( 0, "green" ) ;
1339 gradient.addColorStop( 1, "red" ) ;
1340 context.fillStyle = gradient ;
1341 context.fillRect( 0, 0, 150, 100 ) ;
1342 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1343 context.fillRect( 100, 50, 150, 100 ) ;
1344 }
1345
1346 /* Or you can call from <body onload="draw();"> */
1347 draw() ;
1348 </script>
1349
1350 <div class="scrollBox"> <div class="scrollBoxContent">
1351 <canvas id="canvas" width="300" height="225">
1352 Your browser does not support the canvas API!
1353 <canvas>
1354
1355 <script>
1356 function draw()
1357 {
1358 var canvas = document.getElementById( "canvas" ) ;
1359 var context = canvas.getContext( "2d" ) ;
1360 var gradient = context.createLinearGradient( 0, 0, 300, 0 ) ;
1361 gradient.addColorStop( 0, "green" ) ;
1362 gradient.addColorStop( 1, "red" ) ;
1363 context.fillStyle = gradient ;
1364 context.fillRect( 0, 0, 150, 100 ) ;
1365 context.fillStyle = "rgba( 0, 0, 100, 0.5 )" ;
1366 context.fillRect( 100, 50, 150, 100 ) ;
1367 }
1368
1369 /* Or you can call from <body onload="draw();"> */
1370 draw() ;
1371 </script>
1372 </div> </div>
1373 </section>
1374
1375 <section>
1376 <h3 id="GoogleSearch">Google Search</h3>
1377
1378 <!-- Form to search my site with Google. From Google's free tools web page. -->
1379 <form method="get" action="http://www.google.com/search">
1380
1381 <div id="GoogleForm">
1382 <input type="hidden" name="ie" value="UTF-8">
1383 <input type="hidden" name="oe" value="UTF-8">
1384
1385 <!-- Required Google logo -->
1386 <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google">
1387 </a>
1388
1389 <!-- A text input control for the (q)uery search string. -->
1390 <input type="text" name="q" size="32" maxlength="255" value="Primitive Polynomial">
1391
1392 <!-- Submit button: submits this form when activated. -->
1393 <input type="submit" name="btnG" value="Search my site">
1394
1395 <!-- The URL of my site to search.
1396 Determine which server we are on and use the appropriate hyperlink.
1397 Use comments to hide this JavaScript from older browsers.
1398 -->
1399 <script>
1400 <!--
1401 var hostname = location.href
1402 var prefix = "<input type=\"hidden\" name=\"sitesearch\" value=\"http://"
1403 var suffix = ".com\">"
1404
1405 if (hostname.match( "atspace" ))
1406 {
1407 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1408 }
1409 else if (hostname.match( "freeservers" ))
1410 {
1411 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1412 }
1413 else if (hostname.match( "file" ))
1414 {
1415 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1416 }
1417 // -->
1418 </script>
1419 </div>
1420 </form>
1421
1422 <div class="scrollBox"> <div class="scrollBoxContent">
1423 <!-- Form to search my site with Google.
1424 From Google's free tools web page.
1425 -->
1426 <form method="get" action="http://www.google.com/search">
1427
1428 <div id="GoogleForm">
1429 <input type="hidden" name="ie" value="UTF-8" />
1430 <input type="hidden" name="oe" value="UTF-8" />
1431
1432 < Required Google logo -->
1433 <a href="http://www.google.com/">
1434 <img src="http://www.google.com/logos/Logo_25wht.gif"
1435 alt="Google" />
1436 <a>
1437
1438 < A text input control for the (q)uery search string. -->
1439 <input type="text" name="q" size="32" maxlength="255"
1440 value="Primitive Polynomial" />
1441
1442 < Submit button: submits this form when activated. -->
1443 <input type="submit" name="btnG" value="Search my site" />
1444
1445 < The URL of my site to search.
1446 Determine which server we are on and use the appropriate hyperlink.
1447 Use comments to hide this JavaScript from older browsers.
1448 -->
1449 <script>
1450 <
1451 var hostname = location.href
1452 var prefix = "<input type=\"hidden\"
1453 name=\"sitesearch\" value=\"http://"
1454 var suffix = ".com\" />
1455
1456 if (hostname.match( "atspace" ))
1457 {
1458 document.write( prefix + "seanerikoconnor.atspace" + suffix )
1459 }
1460 else if (hostname.match( "freeservers" ))
1461 {
1462 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1463 }
1464 else if (hostname.match( "file" ))
1465 {
1466 document.write( prefix + "seanerikoconnor.freeservers" + suffix )
1467 }
1468 // -->
1469 <script>
1470 <div>
1471 <form>
1472 </div> </div>
1473 </section>
1474
1475 <section>
1476 <h3 id="TypesettingMathematics">Typesetting Mathematics</h3>
1477
1478 <h4>Math on the Web</h4>
1479
1480 <p>
1481 I use <a href="https://www.mathjax.org/">MathJax</a> to typeset equations.
1482 I write equations in $\LaTeX$ in both inline or display style, using single or double
1483 dollar sign delimiters.
1484 Here's the wonderful <a href="../Finance/lshort.pdf">Not So Short Introduction to LATEX</a>
1485 </p>
1486
1487 <p>
1488 For example, the Navier-Stokes equation is
1489 ${{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1490 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F$, $\quad \nabla \bullet
1491 V = 0$, $\quad V |_{\partial \Omega} = 0$.
1492 </p>
1493
1494 <div class="scrollBox"> <div class="scrollBoxContent">
1495 dollarsign dollarsign
1496 {{V} \over { \partial t }} + \left( V \bullet \nabla \right) V =
1497 {{ - \nabla p} \over { \rho_0}} + \nu \triangle V + F, \quad \nabla \bullet V = 0
1498 \quad V |_{\partial \Omega} = 0
1499 dollarsign dollarsign
1500 </div> </div>
1501
1502 <p>
1503 The Frobenius norm is
1504 $\| A \|_2 \equiv
1505 \sum_{ij} | A_{ij} |^2 \equiv
1506 \sqrt { tr( A^T A ) }$.
1507 and the error function is defined to be
1508 $ \operatorname{erfc}(x) =
1509 \frac{2}{\sqrt{\bar{\pi}}} \int_x^{\infty} e^{-t^2}\,dt
1510 = \frac{e^{-x^2}}{x\sqrt{\pi}}\sum_{n=0}^\infty (-1)^n \frac{(2n)!}{n!(2x)^{2n}}
1511 $
1512 </p>
1513
1514 <p>
1515 The Frechet derivative of a vector norm,
1516 $$
1517 Df(x)h =
1518 \lim_{t \rightarrow 0}
1519 {
1520 { f( x + t h) - f(x) }
1521 \over
1522 {t}
1523 }
1524 $$
1525 $$
1526 =
1527 \lim_{t \rightarrow 0}
1528 {
1529 { \sqrt{ {\| x \|}^2 + 2 \lt x | t h \gt + {\| t h \|}^2 } - \| x \|}
1530 \over
1531 {t}
1532 }
1533 $$
1534 </p>
1535
1536 <p>
1537 A circulant matrix equation,
1538 $$
1539 \left(
1540 \begin{array} { cccccc }
1541 a^{sn} & a^{s(n-1)} & \ldots & a^s & 1 \\
1542 a^{s(n+1)} & a^{sn} & \ldots & a^{s+1} & a^s \\
1543 \ldots \\
1544 a^{s(2n)} & a^{s(2n-1)} &\ldots & a^{s(n+1)} & a^{sn}
1545 \end{array}
1546 \right)
1547 X
1548 =
1549 \left(
1550 \begin{array} { c }
1551 c_{n} \\
1552 c_{n-1} \\
1553 \ldots \\
1554 c_0
1555 \end{array}
1556 \right)
1557 $$
1558 </p>
1559
1560 <p>
1561 a Fourier transform sum,
1562 $$
1563 \sum_{k_0=0}^1 \sum_{k_1=0}^1\ldots
1564 \sum_{k_{g-1}=0}^1
1565 \quad \times
1566 $$
1567 $$
1568 \bar{x}(k_{g-1}, k_{g-2}, \ldots , k_0)
1569 \quad \times
1570 $$
1571 $$
1572 W^{ (n_0) (2^{g-1}k_{g-1})}
1573 W^{(2 n_1 + n_0) (2^{g-2}k_{g-2})}
1574 W^{(2^{g-1} n_{g-1} + \ldots + n_0) (k_0)}
1575 $$
1576 <p>
1577
1578 <p>
1579 and a normalized cross-correlation,
1580 $$
1581 P = \frac{\displaystyle{
1582 \sum_{i=1}^n (x_i- x) (y_i- y)}}
1583 {\displaystyle{\left[ \sum_{i=1}^n(x_i-x)^2
1584 \sum_{i=1}^n(y_i- y)^2 \right]^{1/2}}}
1585 $$
1586 Update form for mean,
1587 $$
1588 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1589 {n+1}}
1590 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1591 $$
1592 </p>
1593
1594 <div class="scrollBox"> <div class="scrollBoxContent">
1595 Update form for mean,
1596 dollarsign dollarsign
1597 M_{n+1}= {{\sum_{i=1}^{n+1} x_i} \over
1598 {n+1}}
1599 ={M_n } {n \over n+1} + {x_{n+1} \over {n+1}}
1600 dollarsign dollarsign
1601 </div> </div>
1602
1603 <p>
1604 MathJax will show you the source code for the equation with a right
1605 click over the equation, or you can set hover to show the equation source.
1606 </p>
1607
1608 <figure>
1609 <img src="Images/MathJaxShowMathAs.jpg" alt="MathJax Show Math As" >
1610 <img src="Images/MathJaxEquationsSource.jpg" alt="MathJax Equation Source" >
1611
1612 <figcaption>
1613 Right click on the mathematical symbols to get a MathJax menu.
1614 </figcaption>
1615 </figure>
1616
1617 <h4>Setting up MathJax</h4>
1618
1619 <p>
1620 Follow the instructions in
1621 <a href="https://docs.mathjax.org/en/latest/web/hosting.html#web-hosting">Hosting MathJax on Your Web Page</a>
1622 First create a directory <em>/mathjax</em> which contains the minimum necessary files (not source files) by cloning in git.
1623 Fetch the latest tagged version.
1624 </p>
1625
1626 <div class="scrollBoxLarge"> <div class="scrollBoxContent">
1627 git clone https://github.com/mathjax/MathJax.git mathjax
1628
1629 git tag
1630 . . .
1631 4.0.0
1632 . . .
1633
1634 git checkout tags/4.0.0 -b 4.0.0
1635
1636 git branch
1637 * 4.0.0
1638 develop
1639 master
1640 </div></div>
1641
1642 <p>
1643 Put this script into your <em>/Scripts</em> directory which configures and loads MathJax.
1644 See the instructions for
1645 <a href="https://docs.mathjax.org/en/latest/web/configuration.html">Configuring and Loading in One Script</a>
1646 and
1647 <a href="https://docs.mathjax.org/en/latest/web/hosting.html">hosting your own copy of MathJax on your server</a>
1648 and also
1649 <a href="https://docs.mathjax.org/en/latest/web/configuration.html">configuring MathJax</a>
1650 This script loads MathJax in three different ways:
1651 </p>
1652
1653 <ul>
1654 <li>From MathJax files in the /mathjax directory on my local development platform (MacBook Pro).</li>
1655 <li>From MathJax files in the /mathjax directory on my web host (after
1656 uploading the directory to my web host).</li>
1657 <li>Otherwise from CDN URL for MathJax.</li>
1658 </ul>
1659
1660 <ul class="download">
1661 <li class="downloadName">load-mathjax.js</li>
1662 <li class="downloadDescription">Load MathJax JavaScript.</li>
1663 <li class="downloadView">
1664 <a href="../Scripts/load-mathjax.js.html">
1665 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1666 </li>
1667 <li class="download">
1668 <a href="../Scripts/load-mathjax.js" download="../Scripts/load-mathjax.js">
1669 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1670 </li>
1671 </ul>
1672
1673 <p>
1674 Then in each web page, put this into your <head> section before loading the style sheet,
1675 </p>
1676
1677 <div class="scrollBoxSmall"> <div class="scrollBoxContent">
1678 <!-- Configure and load MathJax -->
1679 <script src="../Scripts/load-mathjax.js" async></script>
1680 </div></div>
1681
1682 <p>
1683 Not happening now, but this used to happen with a 2018 version of MathJax:
1684 I was getting timeouts loading the italic font from my server,
1685 but not for my local web page on my MacBook Pro host.
1686 So I added the following .htaccess file in mathjax/fonts which fixed the
1687 problem.
1688 My Apache web server didn't recognize the .woff font file type and was
1689 not allowing access to the files as explained in
1690 <a href="http://httpd.apache.org/docs/current/howto/htaccess.html">
1691 Apache how to for htaccess</a>.
1692 </p>
1693
1694 <div class="scrollBox"> <div class="scrollBoxContent">
1695 <FilesMatch "\.(ttf|otf|eot|woff)$">
1696 <IfModule mod_headers.c>
1697 Header set Access-Control-Allow-Origin "*"
1698 </IfModule>
1699 </FilesMatch>
1700 AddType application/x-font-woff woff
1701 </div> </div>
1702 </section>
1703
1704 <section>
1705 <h3 id="Maintainance">Maintainance</h3>
1706
1707 <p>
1708 In the top level directory, I have a
1709 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html#PROGRAMMINGLANGUAGES">Python</a>
1710 script called <em>updateweb.py</em> which maintains this site. Some of its features:
1711 </p>
1712
1713 <ul>
1714 <li>Automatic generation of syntax highlighted source code listings.</li>
1715 <li>Automatic search and replace any type of text (e.g. old copyright notices) in all hypertext and source files.</li>
1716 <li>Delete temporary files and directories generated by compilers.</li>
1717 <li>Upload the changed web pages files to my host web site.</li>
1718 </ul>
1719
1720 <p>
1721 <em>updateweb Version 7.3 - A Python utility program which maintains my web site</em> is distributed under the terms of the
1722 <a href="https://www.gnu.org/licenses/">GNU General Public License</a>.
1723 </p>
1724
1725 <ul class="download">
1726 <li class="downloadName">updateweb.py</li>
1727 <li class="downloadDescription">Update Web Page Script</li>
1728 <li class="downloadView">
1729 <a href="MaintainWebPage/updateweb.py.html">
1730 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1731 </li>
1732 <li class="download">
1733 <a href="MaintainWebPage/updateweb.py" download="MaintainWebPage/updateweb.pys">
1734 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1735 </li>
1736
1737 <li class="downloadName">updateweb.yaml</li>
1738 <li class="downloadDescription">Update Web Page YAML configuration file (demo example only).</li>
1739 <li class="downloadView">
1740 <a href="MaintainWebPage/updateweb.yaml.html">
1741 <img src="../Images/eye.png" alt="Eye icon for source code viewing." width="30" height="30" >View</a>
1742 </li>
1743 <li class="download">
1744 <a href="MaintainWebPage/updateweb.yaml" download="MaintainWebPage/updateweb.yaml">
1745 <img src="../Images/compactDisk.png" alt="Compact disk icon for source code download." width="25" height="25" >Download</a>
1746 </li>
1747 </ul>
1748
1749 <p>
1750 I still need to submit each page to a final
1751 <a href="https://validator.w3.org/checklink/">link check</a>
1752 as web links undergo software rot.
1753 </p>
1754 </section>
1755
1756 <section>
1757 <h3 id="DevelopmentEnvironment">Development Environment</h3>
1758
1759 <figure>
1760 <a href="Images/Artificer.jpg">
1761 <img src="Images/Artificer.jpg"
1762 height="250" width="400"
1763 alt="Artificer laptop running macOS.">
1764 </a>
1765 <figcaption>MacBook Pro laptop running macOS.</figcaption>
1766 </figure>
1767
1768 <p style="clear:both">
1769 I do my development on my MacBookPro 16-inch, 2021 Apple M1 Max laptop running macOS Sonoma 14.5 (23F79)
1770 on which I have loaded a variety of
1771 <a href="../ComputerScience/DevelopmentEnvironment/macLinuxComputerSetupForDevelopers.html"><em>software designer's tools</em></a>
1772 I also develop on a CyberPowerPC Series C 2019 ET8880-1202 running Ubuntu Linux 20.04 LTS (Focal Fossa).
1773 </p>
1774
1775 <figure>
1776 <a href="Images/CyberPowerPCUbuntuGauss.jpg">
1777 <img src="Images/CyberPowerPCUbuntuGauss.jpg"
1778 height="350" width="600"
1779 alt="CyberPower PC running Ubuntu Linux">
1780 </a>
1781 <figcaption>CyberPower PC running Ubuntu Linux.</figcaption>
1782 </figure>
1783 </section>
1784
1785 <section>
1786 <h3 id="Hosting">Hosting</h3>
1787
1788 <p>
1789 I use Freeservers, which I have used for a number of years with
1790 excellent results. I used to use the file manager in the
1791 <a href="http://seanerikoconnor.freeservers.com/cgi-bin/login">
1792 member</a>
1793 area, but now I use my
1794 <a href="#Maintainance">automatic updater program</a>.
1795 </p>
1796
1797 <p>
1798 I use AT&T DSL with a wireless transceiver so I can communicate
1799 to my laptop.
1800 Once upon a time, I connected through the phone on a separate line
1801 using a modem with
1802 <a href="https://www.netzero.net/">Netzero</a>
1803 as my ISP.
1804 </p>
1805 </section>
1806
1807 <section>
1808 <h3 id="Viewing">Viewing</h3>
1809
1810 <p>
1811 I check my web page appearance in the
1812 <a href="https://www.mozilla.org/en-US/">Firefox</a>,
1813 <a href="https://www.apple.com/safari/">Safari</a>,
1814 <a href="https://www.opera.com/">Opera</a>, and
1815 <a href="https://www.chromium.org/Home/">Chromium</a>
1816 internet browsers, and on iPad and iPhone devices.
1817 </p>
1818 </section>
1819
1820 <section>
1821 <h3 id="GettingListed">Getting Listed</h3>
1822
1823 <p>
1824 Some tips on submitting the site to search engines are given in
1825 <a href="https://searchenginewatch.com/">search engine watch</a>.
1826 I test search for my site using
1827 <a href="http://www.google.com/">Google</a>.
1828 </p>
1829 </section>
1830
1831 <section>
1832 <h3 id="Communicating">Communicating</h3>
1833
1834 <p>
1835 I also occasionally post on Google groups:
1836 <a href="https://support.google.com/groups/answer/46601?hl=en&ref_topic=9216&sjid=7362949141285024327-NC">newsgroups</a>.
1837 </p>
1838 </section>
1839
1840 </article>
1841
1842 <footer class="footnote">
1843 <hr>
1844
1845 <!-- A copyright to preserve my legal rights. -->
1846 <p class="footnote">
1847 Copyright © 1986-2025 by Sean Erik O'Connor.
1848 All Rights Reserved.
1849
1850 last updated 31 Oct 25.
1851 </p>
1852 </footer>
1853 </div> <!-- wrapper -->
1854 </body>
1855</html>