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