An overview of HTML, CSS, and JavaScript

Overview:

The following is a brief overview of the HTML, CSS, and JavaScript, the system used in internet browsers to deliver content, control the rendering or display of the content, and to make web pages dynamic or interactive for users. We can think of these three different but complementary technologies as responsible, respectively, for a web page's: Structure; Appearance; and Behaviour.

Terminology

What is HTML, CSS, and Javascript? Are they separate, can they appear in the same place, the same file, is it software, why do we use them? 

HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. 

"HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> directly introduce content into the page. Other tags such as <p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page." (link: Wikipedia entry on HTML: opens in a new window)

CSS

The presentation of HTML is aided by technologies like Cascading Style Sheets.

"CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting. (link: Wikipedia entry on CSS: opens in a new window)

Responsive Design

Responsive web design, and by implication the interface design of applications and apps that use web elements for the user interface, is a design approach that allows for fluid presentation of the view of a web page, app or application. Responsive web design has grown in importance as much of our consumption of technology has shifted from personal computers to mobile devices. Mobile devices pose design challenges screen size varies wildly across desktop computers, laptops, tablets and mobile phones.

"[The] Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device." (link: Wikipedia entry on CSS: opens in a new window)

JavaScript

JavaScript is an interpreted scripting language, a way of programming simple browser-side behaviour for web pages. Server-side programming for more sophisticated and intensive computation will be written in programming languages like Java, Python and others.

"Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[10] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior,[11] and all major web browsers have a dedicated JavaScript engine to execute it.

As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM)." (link: Wikipedia entry on JavaScript: opens in a new window)

Example

Create local copies of three new files using a plain text editor using the code/text below. Save the files as plain text. Make sure the 'dot' suffix indicated is correct. These three files provide the HTML, JS and CSS for a web page. Open the HTML file in a browser to confirm the result illustrated here.

An example of HTML+JS+CSS working together.

1. Save a the text below into a new text file “intro.html”

<!DOCTYPE html>

<html>

<head>

    <title>Intro to HTML CSS and Javascript</title>

    <script type="text/javascript" src="FirstExternalJSFile.js">

    </script>

    <link rel="stylesheet" type="text/css" href="FirstCSSFile.css">

</head>

<body bgcolor="#FFFFFF">

  <h1 style="text-align: left;">Overview:</h1>

  <p>This page is an example of the HTML, CSS, and JavaScript system. This is the same system used in internet browsers to deliver content, control the rendering or display of the content, and to make web pages dynamic or interactive for users.</p>

  <p> The text displayed below displays a string named "helloMessage" which this HTML document knows about because it loaded a JavaScript source file in the script tag in the head section.</p>

  <p>This is some text marked up as paragraph</p>

  <div class="heading">This heading uses the CSS</div>

  <div class="body">Paragraph text can also use the div instruction.</div>

  <h2 id="helloMessage"</h2>

</body>

</html>

2. Save a the text below into a new text file “FirstExternalJSFile.js”

window.onload = writeMessage;

function writeMessage() 

    {

        // JavaScript can include comments which are not displayed

        document.getElementById("helloMessage").

        innerHTML = "Hello, World! A message from the file 'FirstExternalJSFile.js'";

    }

3. Save a the text below into a new text file “FirstCSSFile.css”

body {

        font:14px arial;

        text-align:left;

      }

div.heading {

        font:16px arial;

        font-weight:bold;

        margin-bottom:15px;

        text-align:center;

        color:blue;

      }