Website Updates Part 1

One of my tasks here at My Father’s World is to help in maintaining the website you use when you visit MFWBooks.com. I say help, because my knowledge is limited. For things that I do not know how to accomplish, we have an incredibly gifted other Scott, whom I call Scott the Younger. He has a full knowledge of all things computer/IT/email/web/security/etc. related. My website knowledge extends exclusively to what is typically call front-end development. That is, what you see on the web page on your computer. There are many, many things going on behind the scenes, which I am only vaguely aware of.

There are three coding languages that are used in the front-end of the website, HTML, CSS, and JavaScript. These three work together to present what you see on your screen.

HTML stands for HyperText Markup Language and is the standard coding language used to create structure and content on the web page. Think of it as the basic building blocks for web pages defining everything from headings, paragraphs, links, and images to when to display text in italics or add an apostrophe.

HTML is technically not a programming language, meaning it does not perform any logic like JavaScript does, but is a markup language, meaning that it is filled with instructions, called tags, which tell the web page how to display the content. For instance, to start a new paragraph, one would begin the text with a paragraph tag which looks like this: <p>. To end the paragraph, an ending paragraph tag is added, which looks like this: </p>. If one writes a word that contains an apostrophe, the apostrophe has to be coded as well. So, My Father’s World becomes My Father&apos;s World when written in HTML. A title of a book that needs to be in italics would be written <em>Animal Tales</em>. While there is much that can be done with HTML, to add very much formatting and styling to the page, another languages is employed.

CSS stands for Cascading Style Sheets and is a stylesheet language used to control the appearance and layout of the text as dictated by the HTML. While the HTML determines the structure of the content, the CSS formats the content, defining thing such as type of font, spacing between paragraphs, margin width on each side of the paragraph, position of images, etc. Primarily, the code for CSS is contained in a separate file that is applied to all the pages on the website. This is preferred because if one needs to make a change to the styling, it only has to be done in one location and not on every page.

CSS works by selecting an element of HTML and applying a set of rules to that element. It is made up a selector (selecting the type of element) and a declaration block (stating the rules to be applied to the element). For instance, if one wanted all the paragraphs to be indented with black text that is 12 pixels high and a sans serif font, it would be coded as follows:

p             {

                text-indent: 30 px;

                color: black;

                font-size 12px;

                font-family: sans-serif;

}

With this CSS, all paragraphs will begin with the first line indented 30 pixels and the text will be black, 12 pixels high, and a sans-serif font. So now we have the content and the formatting, which sometimes is enough, but if we want anything to happen on the page we must turn to JavaScript.

JavaScript is an actual programming language, in fact, it is a high-level language that is used to add interactivity, logic, and functionality to the pages on our site. JavaScript is what is called a client-side language, meaning that the script runs directly on your computer without your computer having to reach out to a server for every action. The script itself is embedded in the code on the page between start script <script> and end script </script> tags.

JavaScript is such a high-level language that the possibilities for application are practically endless. Also, because it is so complex, although I have studied JavaScript off and on for the past several years, I am still only at the beginning. I can spot and correct errors in existing script, but am not at the level of creating script from scratch. Thankfully we have Scott the Younger who handles this part of the process.

When put together, these three languages create a dynamic web experience. Someone once said that HTML is like the structure of a house: the foundation, framing, walls, etc.; CSS is like the decorations and furnishings; and JavaScript is the power make it alive (think of the oven baking cookies, pouring milk to enjoy with the cookies, etc.). In the next post we will look at how this all applies to the My Father’s World website.