HTML, CSS and JavaScript

If you are building a website, then you must understand and learn the basics of HTML, CSS and JavaScript. Forget about the PHP part, Node.js part, and the ASP.NET part. Those parts come later. The initial learning approach of web app development requires that you understand that the primary languages concerned with web app development are the HTML, CSS and JavaScript. Think of them like the native language of the web pages. Rest of the stuff comes later. HTML was the first programming language that I learnt, 6 years ago. HTML was a well structured language, because it provided a concise starting and ending point and was easy and simple enough to just work. Hypertext markup language is the primary language that defines the structure of the web document. CSS is the stylesheet that applies the default style of the web page, such as the color, font or margins of the textboxes, labels and dropdowns. Then the final hit on the nail it made by JavaScript, which enables the web pages to talk to the users and, lets the users to interact with the page and receive more data or publish more data on the server.

In most cases, like I have mentioned the static websites, you do not need to work on the server-side at all. Even in these cases you must know how to generate a basic web page — through HTML, and CSS. And sometimes even a static web page requires somewhat JavaScript code. Which is why, learning HTML, CSS and JavaScript is the primary task to be done before you can start with other frameworks for web development.

Not to be mentioned again, and forgotten from now on, two of these languages, the HTML and CSS, are standardized by the W3C, the World Wide Web Consortium. Whereas the other one, the JavaScript is based on the ECMAScript, if you need to go in the details such as the standard specification you can visit those Wikipedia links to find out some more. However, here I will try giving you a thousand-feet overview before I take you down the road to their own topics and resources.

Hypertext markup language

Hypertext markup language is a form of markup language, where you specify the overall structure of the document. In some terms it can be thought of as the data-interchange format for the web pages. HTML document contains the text, visual and audio content to be presented to the users once they request a resource. In the structure, HTML documents are based on the XML (Extensible markup language), that share a tree-like structure for sharing the information. HTML document contains several nodes of elements, in the form of XML nodes. These nodes, each separately define the controls or the information about a web page. A very common (and self-closing) type of HTML element would look something like the following XML node.

<element attribute="value" />

There are many types of elements, that control the overall functionality and information provided by the HTML document. They are categorized as,

  1. Headings
  2. Paragraphs
  3. Containers
  4. Media elements
  5. Meta tags
  6. Tables
  7. Forms

And much more, customized controls and their attributes have been supported and provided in the outside world. HTML5 (the latest version of HTML) supports custom attributes, and less boilerplate code in the DOM. With HTML web page, you can create a web app front that runs on almost any platform where there is a web browser installed. You get to present the same content on mobiles, desktop, servers, mainframes and everywhere there is a web browser provided without the need of users having to install any third-party plugin or software.

Although HTML is tightly bound to the web pages, HTML is now also being considered to be the default language for various cross-platform mobile development frameworks such as Apache Cordova, or even HTML is being used to develop other document formats, such as PDF, Microsoft Word, and so on. This shows how much community support HTML has got up during these years. Before I move a bit onwards, I must show you a very basic HTML document, that I am going to use in the next CSS and JavaScript modules for explanation purposes as well.

<!DOCTYPE html>
<html>
    <head>
        <title>My Web Page</title>
    </head>
    <body>
        <!-- You can include some comments inside the HTML, which get ignored. -->
        <h1>Heading inside the page</h1>
        <p>This is the paragraph inside the web page.</p>
    </body>
</html>

In the later modules here on the page, I will be providing the examples with this HTML code in mind, such as the CSS styles, JavaScript scripts to control the page overall.

Cascading stylesheets

The Cascading Stylesheets, or the CSS, files are the dress up for HTML documents. A CSS file (or the inline CSS nodes), specify what sort of design a web document would have. The CSS stylesheets generally contain the style information associated with the HTML document. They are special attributes of your web document that specify the design and layout of the document. CSS files are useful in the sense that they allow developers to provide an overall theme of the page instead of controlling the overall look and feel, in each element itself.

You add the CSS code either through,

  1. Inline styling in the HTML
    • `

  2. style element inside the document
    • <style>
         p {
            color: red;
         }
      </style>
      
  3. Separate CSS files (.css) and link them to the document.
    • Same code as in the style, but added in a separate file.

It is a good practice to keep all of your CSS code in a separate CSS file so that you can use the same CSS code in other areas of the website to apply a website-wide theme to your HTML content.

Simplest of the CSS use cases would be as much simple as,

<p style="color: red;">This color would appear red.</p>

Then as things get complex, you will have more complex structure of design and sometimes you will need to apply the same style throughout your web page to support your business theme. In such cases, it is not as much efficient as adding the same style component to all the elements in the document. In which case, you instead try to write a separate style formatter somewhere, and control it. For the time being, let us ignore this because it also requires you to understand the overall CSS structure — which I have not yet explained.

In the previous portion, I mentioned the elements and I provided an HTML document, which I am going to stylize here. The CSS allows you to directly target the elements by their names and apply the style to them, or you can do so inside the element, thus if I try to capture the same elements from the above HTML document and try to apply the CSS styles to it, it would look something like this,

<!DOCTYPE html>
<html style="background-color: #cecece;">
    <head>
        <title>My Web Page</title>
    </head>
    <body style="background-color: #fff; width: 960px; margin: 0 auto; color: #333; ">
        <!-- You can include some comments inside the HTML, which get ignored. -->
        <h1 style="font-weight: bold;">Heading inside the page</h1>
        <p style="font-family: Tahoma; color: #000;">This is the paragraph inside the web page.</p>
    </body>
</html>

Can you see the change? You can try this code out in your own editor, now there is even a better way of doing this, which is through CSS files (.css) which support the separation of HTML documents and their corresponding CSS style codes. Which is not something that I would like to share in this particular post, keep digging and you will find all of that inside the CSS topic. For now, this is enough to get your neurons ready to accept more concepts of web development. In the next one, I would show you the JavaScript which is used to make the web pages dynamic.

JavaScript

Last, but not least, JavaScript is the language that runs on the web page and brings it to life. The JavaScript code snippets are the programming part of a web page. JavaScript language itself is a general purpose, imperative and multi-paradigm programming language, that is used to embed executable code inside the web pages to allow the users to interact with the web applications, which otherwise would not be possible through static HTML and CSS content. JavaScript enables the web page to ask for more content, if there is something missing and also allows the users to communicate with the web page through interactions such as button clicks, form inputs etc. JavaScript language, and the JavaScript API is a very broad and vast topic which can not be covered in a matter of few paragraphs which is why, I am leaving the most of this section for the topic in this chapter.

But the purpose of the JavaScript support is, to,

  1. Enable the users to interact with the web page
  2. Enable the web app developers to validate the input before submitting to the servers
  3. Provide some prompts and confirmation boxes before submitting the input
  4. Control how the user interacts and show/hide information as needed
  5. Apply different style and change the layout of the web page based on several factors

Same is the case of JavaScript, the JavaScript code be embedded through a script file, (.js) which gets loaded in the HTML web page, and then the browser takes care of everything. Every modern web browser has a JavaScript engine, which in layman terms is the program which executes the commands and script written in JavaScript language.

JavaScript provides a complete API for the web developers to manipulate the DOM, to capture more input from the users, and to validate the input which is coming from the users in the real time. JavaScript codes have a similar language structure as the Java programs have, and this is why mostly programmers consider them to be a web-version of Java language, which is nonsense and so not-true statement. In this sense, it must be understood that JavaScript code, although in most look and feel looks like Java programs, it is not at all a Java subset.

Just like CSS, you can embed the JavaScript in the HTML document through three different ways,

  1. Inline JavaScript to be executed on interaction as a javascript: handler.
    • <a href="javascript: alert();" onclick="">JavaScript alert</a>
  2. Separate script elements with the special JavaScript code
    • <script>
         alert("JavaScript does work.");
      </script>
      
  3. A JavaScript file to contain all of the functions and scripts

The JavaScript modules are embedded using the HTML script tag, or they are written inside their own file and linked to as a script node, where you specify their source file and relation to the current document. Both are fine practices, however the practice of writing the JavaScript in a separate file is often considered good practice, because you can import the same code in other pages inside the web application as well.

Now, for the sake of a starter demo, if you would like to know what a JavaScript program can do, then you need to understand that it can do anything to update or modify the DOM, which is the entire HTML document itself. In the above code, if we want to update the content of the p element, the paragraph, we can do so, through the following code,

// I am trying to capture a paragraph element from the list of our paragraphs
var paragraph = document.getElementsByTagName("p")[0];

paragraph.innerText = "The paragraph content is updated by JavaScript.";

Once you execute the following code, through browser console or through the script element, you can see that it would update the values inside that paragraph. It can also do other tasks, such as taking input in the input fields, or checking when a user had clicked on a button and so on and so forth.

Sadly, this chapter does not have any topics to share.