Home > Articles > NatickFOSS Demos > Website Update

This site uses JavaScript to provide the normal navigation menu and some other important features as well. If you do not have JavaScript enabled, your experience with this site will be sub-par. The non-JS menu which you can see will get you through to most of the content, but if you are also using a text-only browser, note that some sections of the site are focused on images and will be disappointing to you.
Sorry for the inconvenience.

Making Websites

Runeman.org Update: 2023

I enjoy making web pages. I am not a professional Web Developer, but maintaining my site gives me the opportunity to practice programming skills, primarily using HTML, CSS and JavaScript.

Like any other programming language, these three change over time. Each new page I do, like this one, gives me the chance to learn, and to try some new coding tricks.

Getting Started

You don't need much to get going. You don't actually need a web server unless you want to share your pages with others through the Internet.

Text Editor: Kate, Gnome Text Editor, Notepad++, etc. HTML files are plain text files. Do not use a Word processor!
Browser: Firefox, Vivaldi, Edge, Safari, etc.
A computer: Desktop, Laptop - probably not a phone or tablet, because web development is mostly typing.

Filenames
keep them simple and consistent.

Give me examples.

all lower case is best: books.html
avoid the .htm extension
avoid spaces: good books.html
watch out. Caps matter!

Start your computer.
Open your text editor.
Write code.
Save it with a name like first.html and open it in your browser.
If it doesn't look the way you expect, switch back to your editor, fix the code, save again and reload the file in the browser.

The reload step is important. Web pages are usually static and will need to be reloaded to show the changes you have made. Reloading is usually needed for web pages you get from a networked server, too.

That's it.

Yes, there are many programs that can make web development "easier". Dick and Jill use SeaMonkey Composer, to build the NatickFOSS page, for example.

Watch out. Some web development software can create sites that are bloated, messy and difficult-to-maintain! Microsoft's discontinued tool, FrontPage, was particularly bad, in my opinion. I have not used Dreamweaver from Adobe or most of the many other site development programs. HTML, CSS and JavaScript are wide open standards, free to use directly in simple ways, or in your choice of complicated ways.

The Basic Bits

HTML (HyperText Markup Language) is a programming markup language specifically designed for doing web pages. It was designed by Tim Berners-Lee as part of his World Wide Web development in 1993. A modern, complete, minimal page would use these bits of code:

<!doctype html>

<html>
  <head>
    <title>Minimal Web Page</title>
  </head>
  <body>
    <p>Hello, World!</p>
  </body>
</html>

Click to see the page

Indenting is not required for HTML code. I added it for this example to emphasize the "nesting" of the page code. Whitespace is ignored, especially if it is outside the tags of an element. The sample code above would give the same result without the indents.

Most elements in HTML use a pair of tags. <html> opens the page and then </html> ends the page. A tag pair is called an element and web pages are built on elements which must be properly mixed together.

The HTML element <html...</html> are the top layer and contain the head and the body elements which are equally at the second layer.

The head element is full of information for the browser and describes the page for the Internet. You won't see most of it.

The body is where the visible page content happens (the stuff you are seeing).

"Nesting" is important.

Visible text is mostly put on a web page in paragraphs. The code <p>Hello, World!</p> puts just the text between the starting <p> tag and the ending </p> tags (a paragraph element). Almost all tags work that way with a start and end version of the tag. Get used to writing that pattern for elements.

<p>...</p>

You will probably put lots of paragraph elements into the body, along with other html elements like lists images, etc.

HTML5 is the preferred version of HyperText Markup Language, as of this writing. That's what <!doctype html> specifies in the example above. Earlier versions are deprecated. That means they still work, but new web pages are better made the current, modern way.

Most browsers let you look at the code of any page you find on the web. Firefox, for example, uses the keyboard shortcut Ctrl+U to pop up a new tab showing the raw page code. Try it, but do not expect what you see to be as simple as the "Hello World" example!

If you examine pages made by others, you might see <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> at the top. It's an older, still functional version, but I would not recommend starting to explore HTML coding with that version. It would work, but you cannot use all the newest tricks.

The World Wide Web Consortium (W3C) is the standards organization that coordinates the development of HTML, etc. They work with the developers of browsers to be sure that each new feature works for us in a consistent manner.

Headings, images, bullet lists, and much more are elements of HTML. You can explore them and more using tutorials found all over the web.

My earlier HTML Notes might help get you started.

CSS (Cascading Style Sheets)

CSS came along after HTML as a way to help standardize a website's appearance, by applying the same style for features like the heading starting off this page. Headings are styled the same way to have the same look all across the website.

CSS adds to the styling provided in HTML (bold text for example). Typically CSS is used to let you add a consistent "look" for pages, applying the same overall appearance to every page of a site.

Styles "cascade". Site-wide styles are stored on the web server and a line of code in the <head> element of a page pulls in the CSS code. All pages using that stylesheet share the same overall appearance.

<link rel="stylesheet" type="text/css" href="http://runeman.org/simple2016.css">

That line of code says "use this style" and is put between the tags of the head element so it is put into effect by the browser for the whole page. In this site's style, the graph paper background is for the body. Styled on top of the graph is an added layer of white with left and right margins pulled in so the graph paper background appears to surround it. That white, middle of the page is called a div element (division/section) <div>...</div>. On this site the div contains most of what you see.

<div id="main">...<div> is controlled by the main site stylesheet. The style features are applied only to the <div> with the id of main.

You can also add an optional element of style rules within the head element to make page-specific changes (which overrides the main style, but just for this current page.

Finally, for single paragraphs, or even words, or single letters, can be styled (which overrides the other two styles. PHEW! The yellow background is a very localized style, spanning just one word.

<span style="padding: 2px; background-color: yellow;">PHEW!</span> makes the style effect.

This text is much bigger because
of style added only to this paragraph.

<p style="font-family: sans-serif; font-size: 3em;">

"Cascading" means that the site style controls everything first, then may be modified by the page style, and last by span styles. The top style is in control unless overridden "locally".

Site style > Page style > Span style.

Yes, it can get complicated.

If there's no style at all, you will get a very bland page
Text will run from edge to edge of the browser window (no helpful margins)
Most stylish color accenting is lost
It may be easier for screen reader software to handle.

In fact, Firefox has a view that removes all styles.

Select View > Page Style > No style. (Bold text still shows up because it is a basic HTML feature, not CSS.

JavaScript is a language which provides a way to make "dynamic" content, among other things. Let's look at an example.

The next paragraph has three dates in it.
   • First date is just ordinary text I typed.
   • Scripted dates update automatically when you load this page.
   • The second date is read from this file's information and gets printed into the paragraph when the page loads.
   • The third date is read from your computer.

DATES:
I started writing this page on Feb 18, 2023, and saved the most recent, updated version on ; you are reading it on .

Since the current date and time is pulled by JavaScript from your computer's clock, it will only be accurate if you have recently set the time. Many (most?) of us don't set the computer clock manually. Instead, our operating system automatically checks the Internet for the current time using the NTP (Network Time Protocol).

Date/Time formatting is its own topic I've explored elsewhere.

CAUTION
I control these web pages. The scripts I pull in are mine. I pull them from the server I control.

A whole bunch of the web uses scripts pulled in from servers controlled by others. As a result, JavaScript has the unfortunate potential to deliver unexpected things.

The web is full of tracking scripts, advertising scripts, and even worse. Those scripts provide a service to others, but maybe not to you.

Some people choose to turn off JavaScript to prevent malicious scripts.

You may wish to learn more by reading
The JavaScript Trap

Scripts can be written as part of a page's code, or they can be pulled from a server.

I read a fair amount of fiction. Over recent, years I have kept "Recent Reading" notes about them (book count links at the bottom of the page). Making annual book counts became a JavaScript project for me. Counting Books with Class describes how it was done.

Most of the navigation menus are generated by scripts which are pulled from my web server. The menu at the top of this page uses a file called menu.js. Many pages of the site pull in the same menu. When I design a new page, I can get the menu where I want it by including the following code.

<script> src="http://runeman.org/menu.js<script>

To add to the menu or change links in it, I just edit the menu file. All the pages that call the menu.js script will have the changes. Now that's what I call power! I do not need to modify each and every page that needs the site menu.

Not all pages on this site use the same menu, but except for the very oldest (before I'd explored JavaScript), most pages do use one of the JavaScript files to provide links between pages. While it is good practice to have all pages of a site to have a consistent "look", I must be practical about using my time, and updating pages from a dozen years back is not one of my major priorities.

Just below I've pulled in the older 2016 menu. Though the older menu is "deprecated" (not intended to be used in new work), it is still available.
Some pages have not (yet) been updated to pull the newest menu.

You can use the menu below. Hover and click and the links work as they used to.

The old menu is built to activate on a pointer hovering over each choice. Hovering isn't good for mobile devices.

For more about the old, black, dropdown menu, look here: http://runeman.org/programming/css/classynav.html
For a further explanation of the new menu, look here: http://runeman.org/programming/html/details/index.html#menu

I was proud of the 2016 menu, but some things about it bugged me.

Unordered List
<ul>...</ul> element
with
<li>...</li> elements nested inside.

The part of each category that expands downward rides over the text below it on the page.
The width of each category stretched wider during hover, causing categories to the right to shift (making it "jumpy").
I worried that cellphone and tablet users were less well served.
I worried that the menu was too complex, making screen reader software stumble over it.

Probably the most powerful thing about a script-made menu is that each individual web page on the site calls the same JavaScript code from one file on the web server. That means to modify the menu on every page, all I need to do is edit the single JavaScript file. Everybody gets the new menu options when they refresh their pages!

Getting Down to the Details

The new menu uses the <details> tag set.
Most often details are used for FAQ lists, expanding to show "further information".

Click each of the following FAQ (Frequently Asked Questions) for more detailed information.

CSS Note:
The FAQ summary elements at the left are bold because of a local application of style. CSS cascades. Style you apply globally acts on the rest of those details element tags unless overridden locally.
I've done that override for these FAQ details.

How can I contact you? (fake examples)

Email: user@example.com
Phone: (555) 555-5555

What services do you provide?

Visual word puzzles, Public Domain Clipart, Articles on "stuff"

Can <details> be used for a menu?

Yes. Links fit in to details just fine, and details blocks can be arranged side-by-side instead of just up and down.

Can the pointer be used instead of the I-beam?

Yes. There is a style attribute to choose the pointer instead.

The first item of details code looks like this:

<details style="cursor: pointer;">
  <summary style="font-weight: bold;">How can I contact you?</summary>
  <p>Email: user@example.com <br> Phone: (555) 555-5555</p>
</details>

Only the text differs for the other FAQ items.

The triangle switches from pointing right to pointing down if you click on the summary text.
The default pointer is (unfortunately) the I-beam pointer, making it less clear you should click to expand.
Until a second click on the summary, the details remain expanded.

<hr> (horizontal rule)
is an element with just a single tag.

References:
W3C site
Mozilla Web Tutorials
W3Schools tutorials
A web search can find developers sharing solutions. StackOverflow, for example.