DGM 1600 Competencies

By Isaac Ingles

The three main building blocks of the web are HTML, CSS, and Javascript. Here I explain and demonstrate the three of them.

HTML basics

HTML is a "markup language". In computer science, a markup language is defined as a computer language that uses "tags" to define elements within a document.

HTML Example:

<p>This is an example of the usage of paragraph tags in HTML.</p>
< !-- This is an example of an HTML comment. -- >

HTML was developed in the early 1990s by Tim Berners-Lee, a physicist at CERN.

Tim Berners-Lee (Wikipedia)

HTML (Hypertext Markup Language) can be described as providing "structure" for the document; it is the basic foundation on which all other parts of a website are built.

HTML is implemented by placing various tags throughout a document that have both a functional and semantic purpose. "Block-level" elements, for example, by default take up the entire space of their parent container, and kick other elements "down" a row; whereas "inline" elements only take up as much space as is bounded by the beginning and end tags of the element.

Semantic elements can include those such as <section> and <article>; other than being block level, these two elements have no additional impact on the behavior of the HTML on the page; and are rather used to give the browser, the user, the developer, and search engines a better idea of what is on the page and what the purpose of the element is.

One interesting thing that a person learning HTML and CSS should know is that the <img> tag in HTML is actually a "replaced element" — this means that it is rendered outside of the scope of CSS. Put in simpler terms, replaced elements are elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself. (See MDN's Replaced Element page).

CSS basics

CSS is a declarative style-sheet language that determines the how a webpage "looks" in the browser.

CSS Example:

.selector {
    property: <option>;
}

CSS was first proposed by Håkon Wium Lie, a contemporary of Tim Berners Lee, at CERN, in 1994.

Håkon Wium Lie (Wikipedia)

CSS (Cascading Style Sheets) are the primary (and preferred) way by which the appearance of a webpage's markup is displayed in the browser. CSS can be used to improve the readability as well as overall aesthetic appearance of a website. It is implemented through a variety of "selectors", which can be the HTML element itself, a class name, an ID name, and various pseudo-classes. It can be implemented inine (as an HTML attribute), embedded in the HTML document itself using <style> tags, or, as external *.css files.

CSS styles, as the name implies, "cascade" down the list of selectors, with the lowest selector taking precedence. This behavior can be overridden by the use of !important, or by the use of inline styles. Most developers abhor the use of !important unless absolutely necessary because it can cause many problems down the production pipeline.

Working Examples of CSS

CSS Flex Order

Each item is labelled with its actual order in the HTML.

1

2

3

4

CSS Flex-Grow

Each item has the labelled flex-grow.

1

3

4

1

Javascript Basics

Javascript is a "scripting" language. Scripting languages are defined as "mini" programming languages which can be executed without being compiled.

JavaScript Example:

const el = document.querySelector('element') 
el.addEventListener('click', () => { ... })

Brendan Eich came up with and supervised the initial implementation of JavaScript while working at Netscape in the early 1990s.

Brendan Eich (Wikipedia)

Javascript is primarily run on the front-end in a web browser, and is rendered by the browser software. Javascript makes web pages "functional" and interactive. It can also query servers, validate data, and help manage front-end security. Unfortunately it is also one of the main sources of security vulnerability.

In 2009, Ryan Dahl began writing a version of JavaScript that could run on the back end of web applications, called Nodejs. Node is built on top of Google's V8 Javascript Engine. Node allows the construction of entire web apps, both client and server, with just the use of Javascript.

One common mixup that people make when they are first exposed to programming is the difference between Java and Javascript. Java is a high-level, compiled/interpreted programming languages that can be used to build actual software applications. Javascript does not have nearly the capabilities of Java; and although there are some similarities in syntax ( as there are in many languages that evolved from C ), the only thing that the two really have in common is the name "Java". Javascript does get its name from Java, but was only given the name due to the popularity of Java in the early 90's as a hot new programmming language. Javascript is an implementation of ECMAscript, from a standards organization called the European Computer Manufacturers Association.