Let’s Learn JavaScript • Lesson 2 • Basic HTML 5

📅 July 14, 2017
Client-side JavaScript requires a knowledge of HTML, so this lesson will focus on building a minimal HTML 5 file that we can use for writing JavaScript.

Setup for Development

Dedicated Directory

Create a dedicated directory in your home. All necessary files should be placed here. Do not scatter files across your system or else you will risk the “I refreshed the page but nothing changed” scenario caused by editing files you think are being displayed when they are not.

Multi-Monitor Setup

Though not required, use multiple monitors if possible. When writing code, more screen space becomes essential. You can open more windows and glance through them simultaneously.

Dual monitors with Linux Mint 18.1 Cinnamon. The main GIMP window is shown on the primary monitor while the GIMP tools and reference material is placed on the second.

Coding is performed on the left monitor. This simplifies switching among multiple source files which often happens when editing HTML, JavaScript, and CSS for a given page. The right monitor contains two browsers, Vivaldi and Chromium, for preview during editing. Reference material is on display at the far right.

Two browsers with developer tools open. On the left is Vivaldi with its developer tools in a separate window at the bottom. Its purpose is to measure network load speed. On the right is Firefox Developer with its developer tools in a separate window located on the right. Its purpose is to analyze the page elements and see what styles are being overridden. Doing this allows different tools to analyze different aspects of the same page. (Two different pages are shown for this example.)

If upgrading a system, use two or three monitors. Whether for programming, writing, graphics design, video editing, or music composition, more monitors means you can view more information at a glance without having to swap workspaces or toggle through various windows to find what you are looking for.

Strangely, as you use more monitors, you will be surprised at how quickly they will fill up with “stuff.”

Multiple Workspaces

In Linux, each workspace is one group of multiple monitors. Multiple workspaces combined with multiple monitors offer a vast expanse of frontier to explore.

Expo view showing four workspaces and their open windows in Linux Mint 18.1 Cinnamon. Simply click on a window to go to that window and workspace. This makes navigation easier than wading through buried windows on a single desktop.

Get Your Favorite Text Editor

Do not use an IDE for now. The point is to learn and become proficient, so we want to avoid any use of programming aids, such as autocompletion and syntax highlighting. Color-coded programming themes are recommended. Avoid writing source files in monochrome. The various colored text helps troubleshoot.

Xed using the Cobalt theme in Linux Mint. The HTML tags appear in blue while normal text is displayed in white. JavaScript strings are displayed with a light cyan green/blue color. Color-coding is a tremendous help.

gedit with the Monokai Extended theme. Another HTML file, but tags are colored differently.

gedit with the Solarized Light theme. Same file, but different appearance.

Text editors are meant to be fun! Pick a theme you like, and try it out. For gedit, simply download a free theme and copy it to ~/.local/share/gedit/styles. Several gedit themes are available, and you can even create your own.

 

HTML 5 Basics

Real-world client-side JavaScript exists as part of a web page either linked externally or embedded within the HTML file itself. Before we can write JavaScript, we need to understand HTML basics.

What is HTML?

HTML refers to the HyperText Markup Language. This is a markup language, not a programming language. HTML by itself contains no programming code. Instead, it consists of elements that mark up sections of text to indicate “This is a header,” “This is a paragraph,” or “This should be bold.” HTML is a plain text file that contains the content and structure of the web page.

HTML 5 is a group of updates and technologies under a single banner called HTML 5. The markup below shows a basic HTML 5 file.

<!DOCTYPE html>
<html>
<head>
  <title>Title Goes Here</title>
  <meta charset="utf-8">
</head>

<body>
<h1>Hello, Galaxy!</h1>
</body>
</html>

HTML is stored in a plain text file with the .htm or .html file extension. Enter the markup above in a text file, and save it as index.htm. Open it in a web browser.

Vivaldi browser displaying the index.htm page.

The HTML Elements

An HTML file consists of elements. In the code above, we see

  • html
  • head
  • title
  • meta
  • body
  • h1

When an element is represented in the HTML file within angle brackets (<>), they become tags. An element by itself within angle brackets is an opening tag, and an element the starts with a forward slash within angle brackets is a closing tag.

 

<html> opening html tag.
</html> closing html tag.

<body> opening body tag.
</body> closing body tag.

<h1> opening h1 tag.
</h1> closing h1 tag.

 

The opening and closing tags delimit content, and tags are nested within each other to show what content belongs within which tags. Elements can be nested, and the browser reads the HTML file to create a document object model (DOM) that can then be manipulated by JavaScript and have styles applied to it. (We will delve into the DOM later.)

Notice that some elements, such as meta, do not have closing tags. There are other elements like this, and all necessary content is enclosed within the angle brackets.

1. <!DOCTYPE html>

This is the DOCTYPE. It specifies a Document Type Definition (DTD) that specifies the rules for the markup so browsers can render that page correctly. Many complex DOCTYPEs exists, but HTML 5 simplifies the DOCTYPE by using <!DOCTYPE html>. The DOCTYPE is not an element within the html section, so it exists on the first line outside of the html block.

“Does case matter with HTML?”

No. HTML is not case sensitive other than the content meant to be displayed. We could write

<!doctype HTML>
<HTML>
<HEAD>
 <TITLE>Title Goes Here</TITLEe>
 <META charset="utf-8">
</HEAD>

<BODY>
<H1>Hello, Galaxy!</H1>
</BODY>
</HTML>

with uppercase tags and the page would still produce

Same page result even though we changed the tags to uppercase in the HTML file.

The only text that displays in the browser’s window is Hello, Galaxy!, so if we change this to <H1>HELLO, GALAXY!</H1>, then the text seen in the browser is shown in uppercase.

Now, the output is uppercase because the text intended for output was written in uppercase. The case of the tags does not determine the case of the displayed text.

“Which Case Should I Use?”

By convention, use lowercase for all tags. The combination of uppercase and lowercase seen in <!DOCTYPE html> is the typical format seen in most pages even though <!doctype html> and <!DOCTYPE HTML> also work. In fact, browsers are quite forgiving, so most HTML files will render without a DOCTYPE at all. But to ensure HTML 5 compliance, use <!DOCTYPE html>.

2. <html>

HTML is the topmost parent element of a web page, and all other elements must exist within it. For good practice, nothing else should exist outside the closing </html> tag.

3. <head>

This denotes the head of the HTML document that is separate from the body. The head contains the document title, meta data, styles, and even scripts. Not content that you intend to display.

We must always close the head section before we begin the body.

<html>
  <head>
  </head>

  <body>
  </body>
</html>

Note: HTML 5 introduces the header element. <head> and <header> are two completely different elements with different purposes. <head> denotes the head of the HTML document and contains the title and metadata. <header> is used within the <body> and marks up a section of text used to denote an introduction to a longer piece. Content within <head></head> is not displayed in the browser (there are exceptions), but content within <header></header> is shown in the browser output. Do not confuse the two elements.

4. <title>

This is name of the web page, and it contains the text that appears in the browser’s title bar or tab.

Text within <title></title> appears in the browser’s title bar or the page’s tab. Vivaldi displays the page title in the tab.

5. <meta charset=”utf-8″>

The meta element denotes metadata. Metadata is data about the data to help describe the document to a web browser. Metadata can vary. In this case, charset=”utf-8″ is a property=”value” pair that tells the web browser to use the UTF-8 character set when rendering the HTML document. A character set specifies which alphabetical characters are used, and UTF-8 is the specific type. Many exist, but UTF-8 is 8-bit Unicode.

Metadata often contains details that the user will not see, but it can aid with proper rendering of the web page and help web crawlers analyze and determine the intended purpose of a page along with its content.

6. <body>

The page content goes here. Paragraphs of text. Images. Tables. Interactive scripts. Think of the body as the playground the user sees.

7. h1

A header. Since this is content we want to see in the rendered web page, we place it in the body. h1 is the first of six levels of headers that are intended to mark sections of text, which are usually rendered in larger, bolder text to differentiate them from regular text.

Only text within the opening <h1> and closing </h1> tags will be considered header level 1 — the largest header. h6 is the smallest. If we placed the closing tag elsewhere, as in <h1>Hello,</h1> Galaxy!, we would see a different result.

<h1>Hello,</h1>Galaxy

Text outside the <h1></h1> tags is considered regular text. A header is a block-level element. This is why Galaxy appears on its own line.

To Indent or Not To Indent?

HTML ignores whitespace, so indentation is a good idea to aid readability and to show what elements are nested inside others. Also, placing each block-level element on its own line makes the markup more readable. Which is easier to read at a glance?

This?

<!DOCTYPE html><html><head><title>Title Goes Here</title><meta charset="utf-8"></head>
<body><h1>Hello, Galaxy!</h1></body>
</html>

Or this?

<!DOCTYPE html>
<html>
  <head>
    <title>Title Goes Here</title>
    <meta charset="utf-8">
  </head>

 <body>
   <h1>Hello, Galaxy!</h1>
   </body>
</html>

 

For HTML, indentation is usually two to four spaces. Two spaces are recommended because HTML often leads to many, many nested elements.

Which Filename Extension: .htm or .html?

It does not matter. Web servers are designed to recognize both. Do keep all filenames lowercase and avoid the use of spaces and special characters for the greatest compatibility. Most servers these days are robust enough to handle spaces within filenames, but this can affect cross-platform server compatibility.

Use something like myfile.htm or my_file.html. Not “my file.htm“. These examples use a file named index.htm, but index.html works just as well.

That is all the HTML 5 we need in order to write JavaScript and display it in a web browser. In the next lesson, we will begin writing some basic JavaScript.

 

Advertisements

,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: