Haybale web design, development, and online marketing for Kalispell, Bigfork, Whitefish right here in Montana!

HTML, CSS AND JAVASCRIPT: THE STRUCTURE, APPEARANCE, AND BEHAVIOR OF A WEBSITE

When we decided to start a web design company, we knew we wanted to provide our services using classical tools and techniques. There are many 3rd party applications available for building websites which do not require an understanding of their underlying code (WeeblySquarespace, or WIX). Templates, or self contained applications, may be aquired, filled with the client's content, and maintained for a fee. While considering this, we decided that we got into this business not because we wanted to resell and maintain the work of other developers. We got into this business because we love development and design, and it satisfies us to create things from scratch which will have lasting impact for our clients.

The only application we would need to accomplish this, then, would be a good text editor. (Atom, Brackets and Sublime Text are phenomenal text editors.). This brings us to "HTML, CSS and Javascript: The Structure, Appearance, and Behavior of a Website". We will describe the three primary components of a web document, and illustrate how they interact. All of the pages on the internet employ some combination of these technologies. With a basic understanding of each, the pages that can be built by hobbyist and business person alike truly are limited only by imagination.

html logo

HTML

HTML, or Hyper-text Markup Language, serves as the bones, or structure of a web document. This structure consists of a hierarchical series of tags, text surrounded with angle brackets, which enclose and designate that which they contain. This model, or tree of tags, begins with the <html> tag, which contains the <head> and <body> tags, which in turn contain everything else one would expect to find within a web page (text, images, links to other pages).

figure 1a: code for file index.html, a basic HTML document with tags for head, title, body, and footer elements. Also contains text, a button, and links to CSS and Javascript files.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> Intro to Web Design </title>
      <!-- link to css file -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="background-color-1">
    <div class="text-center text-color-1">
      <h1> Hello World </h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
    <button class="btn"> click me! </button>
    <footer></footer>
      <!-- link to javascript file -->
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

figure 1b: shows index.html rendered by browser. 

shows 'index.html' rendered by browser.

Tag Types

There are two types of HTML tag: the semantic tag, and the div tag. They both do the same thing, that is enclose and designate that which they contain, though the semantic tag also denotes an area  within the tree. Semantic tags tell search engines, web crawlers, and other machine readers "This is the <head> of the document, this is the <footer>, and this bit over here is a <blockquote>, containing some <strong> text". Semantic tags have more bearing on what is termed SEO, or those factors which make a website "Search Engine Optimized". More on that later.

Identification

There are two ways to identify an HTML element: they are classes, and IDs. Once elements have an identity, or classification, we can tend to those parts within the HTML tree, referring to them by name. Both div, and semantic tags can have a class or ID. Elements can share a class, but IDs are reserved for singular demarcation. Classes and IDs allow us to interface with our HTML tree from our CSS and Javascript, whether we want elements to have an appearance, a behavior, or both.

css logo

CSS

CSS, or Cascading Style Sheets, determine how an HTML element looks on screen. Any number of rules may be written using style-sheet "selectors" where visual properties and their values are set. A selector, or multiple selectors, can then be applied to any HTML element by adding the selector to the tag.

There are a number of best practices to follow when defining your CSS classes, such as the order in which your properties are defined, and instances of repeated definition. For example, it is better to create one rule called text-color-1, and apply that one class to multiple tags where needed, rather than create multiple classes containing the same property for multiple tags. The latter is perfectly legal, though it is not performant, and it requires you to repeat yourself unnecessarily.

figure 2a: code for file style.css, a basic CSS stylesheet containing rules for background color, text color, and text alignment.

.background-color-1 {
  background-color: gray;
}
.text-color-1 {
  color: white;
}
.text-center {
  text-align: center;
}

figure 2b: shows index.html, and style.css rendered by browser.

shows 'index.html', and 'style.css' rendered by browser.

Write DRY Code

As we build our sites from scratch, let us strive to write DRY code, and adhere to the DRY principle which states "Don't Repeat Yourself". Code can be difficult to maintain if written poorly. In this case, it means writing more code than is needed to get the job done. If a block of code which does the same thing exists in 10 different places within a system, making an accurate change to where that effect is being applied becomes less of a guarantee. A block of code which exists in one place, but gets referred to from 10 different places makes it much easier to update.

The CSS standard has come a long way since it was conceived. Now, there are ways to animate HTML elements through the use of CSS "Transforms" and "Transitions", an effect traditionally left to Javascript. We will learn how to make the most of our user experience through the use of these exciting properties, and more, in posts to come. For now, just know CSS is all about appearances. 

javascript logo

Javascript

Javascript serves as the browser's general purpose programming language. It can:

  1. Create and track events taking place between the user and a web page. (Events include clicking an element, hovering over an element, and loading the page.)

  2. Animate elements, or modify their CSS properties, in response to events.

  3. Send and receive information going to and from the web page, such as information collected from the user, and data delivered to the user using Javascript's "Ajax" functions.

Javascript has been around for 20 years, and there are many Javascript libraries available, each sporting their own unique set of features. One of our favorite libraries is JQuery, which has a lot of built in functionality for our work. With JQuery one can search through and select HTML elements, add or remove CSS selectors, and trigger animations on demand. JQuery contains a lot of the low level plumbing that needs to be done, in what is called "vanilla" Javascript, before we can make use of these basic functions.

figure 3a: code for file script.js, a basic Javascript document with one function definition showAlert() and a click event that calls the function. Written in vanilla Javascript.

  /* on page load, register script content */
document.addEventListener("DOMContentLoaded", function () {
    /* on call, function shows alert using string */
  var showAlert = function (e) {
    alert(e);
  };
    /* on click, calls function showAlert(), passing in string */
  [].forEach.call(document.querySelectorAll(".btn"), function (e) {
    e.addEventListener("click", function () {
      showAlert('It works!');
    });
  });
});

figure 3b: shows index.html, style.css, and script.js rendered by browser. 

shows 'index.html', 'style.css', and 'script.js' rendered by browser.

Putting it All Together

While each utility; HTML, CSS, and Javascript, stands alone as powerful tools in their own right, it is only when they are combined that they truly shine, enabling us to browse websites, stay in touch on social media, and represent our business on a world wide platform. When a browser loads a website, our HTML, CSS, and Javascript files get sent to the browser in one lightning fast delivery. The browser then goes to work rendering the final product for the internet surfer to enjoy, the way that it was meant to be enjoyed. What an incredible exchange! 

Now that we have isolated the three primary tools of the trade, lets get on with building and improving upon that prosperous ether architecture. The world wide web: one of the final frontiers? If so, lets make our work painless by discovering the basics, and build from there. Templates, like crutches, are fine. They might get you there, and faster, for a time, but they are to be discarded if/ when they become an obstacle.

RELATED

 1. Learn to Code HTML & CSS 

COMMENTS