HTML stands for HyperText Markup Language and it's a standard language to create website contents. It was first released in 1993 and has ever since dominated the World Wide Web. Most websites to this date have code based on HTML to display their content. Some basics were already covered in Chapter 11, Working with the Qlik Dev Hub.
HTML is a semantic language which allows you to organize and denote the structure of a website using tags such as <header>, <body>, and <footer> or more structural elements such as <img>, <section>, or <p>. It's very rich in its offering and in combination with CSS and JavaScript forms the three core cornerstones of the World Wide Web.
The so-called structural tags in HTML all follow a simple principle and require the following four things:
- An opening tag
- A specified element
- Content
- A closing tag
Take the following snippet for example:
<b>This is a bold Text</b>
The beginning <b> tag represents the opening tag of the code; b stands for bold and instructs the browser to format text within the tags as bold. This is a bold Text is the content which is specified to be formatted in bold. To indicate the end of the instruction, a closing tag, </b>, always characterized by a backslash, is used.
To create an HTML website, all you need to do is to open a text editor of your choice—even Windows Notepad would work—write a basic HTML code structure, and save it as a *.html file. .html files can then be opened and displayed by a web browser of your choice (Internet Explorer, Firefox, Google Chrome).
Take the following code as an example:
<!DOCTYPE html>
<html>
<head>
<title>Mastering Qlik Sense Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.packtpub.com/big-data-and-business-intelligence/mastering-qlik-sense">Link to buy this book!</a>
<br>
<img src='https://www.packtpub.com/sites/default/files/B04080_MockupCover.png' width="40%"></img>
</body>
</html>
A detailed description of each element in the previous code looks as follows:
- The <!DOCTYPE html> declaration defines this document to be HTML5
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
- The <a> element defines a clickable hyperlink which takes you to the URL defined in the href attribute
- The <br> element introduces a line break, the equivalent of hitting Enter on a keyboard when in Microsoft Word
- The <img> element is used to display an image
The preceding syntax will provide the following output when opened in a normal browser:
The HTML tags are located as follows:
HTML5 is the newest version of HTML. It was released in October 2014 and improves former versions by introducing new tags to handle multimedia content, such as <video>, <audio>, or <canvas>. In particular, the last tag, the canvas element, is a very important aspect of data visualization as it introduces a different way of drawing charts compared to classic SVG (Scalable Vector Graphics). Both of these methods and their differences will be introduced in the D3.js as a visualization library section in this chapter.
Structural tags can also be enriched and include so-called attributes. Attributes contain additional metadata information on how the content should be displayed.
Take for example the following HTML snippet:
<img
class="maintext"
src="image.png"
height="150px"
width="100px"
alt="Image">
</img>
As you have already seen in the previous example the <img> tag instructs the browser to display an image. Furthermore, the element has been enriched with the following attributes:
- class="maintext" assigns the image element a class. Classes are used to identify elements for styling purposes or for additional code processing via JavaScript.
- src="image.png" tells the browser which source to use to display the image.
- height="150px" explicitly specifies the height of the image, in pixels.
- width="100px" explicitly specifies the width of the image, in pixels.
- alt="Image" is used to create an alternative placeholder for the image when the image is not available.
All in all, basic HTML is pretty straightforward and can be picked up quite quickly. There are several online tutorials teaching the basics. A free and good one is https://www.w3schools.com/, which also allows you to code while you see the output in the same window in parallel.
HTML, in combination with CSS and JavaScript, is what makes Web Development end up being so powerful. With CSS and JavaScript, you are able to access, modify, and manipulate HTML elements called DOMs, standing for Document Object Models. This is where it becomes interesting, as your web page can then become interactive and dynamic. Before getting into the JavaScript part, it's useful to understand what CSS styling does and how it can be used to change the look and feel of a website.