“The Miracle Worker” is an inspiring true story based on the life of the young Helen Keller, blind and deaf since infancy, and her gifted teacher Miss Anne Sullivan. The film revolves around these two strong willed characters and the battle to overcome the obstacles that prevent Helen’s ability to communicate. Because of the strong and yet loving persistence of Miss Sullivan, Helen overcame. The language and communication barrier broke and Helen learned how to speak. How did it happen?

The “miracle” in The Miracle Worker occurs when Sullivan and Keller are at the water pump refilling a pitcher. It is at this moment that Keller makes the intellectual connection between the word Sullivan spells (using sign language) into her hand and the tangible substance splashing from the pump. Keller demonstrates her understanding by miraculously whispering “wah-wah”, the baby talk or gibberish equivalent of “water”.
source: Wikipedia

Many of us can probably relate to the struggle of making that “intellectual connection” between words and concepts especially when learning a new or unfamiliar language. Learning a new language requires an investment of time and effort. A steep price but the fruits of which is that “Aha!” moment when comprehension finally sets in and the satisfaction of knowing that the intellect and understanding have miraculously met.

For many, trying to learn the language of WordPress is a daunting thing. For the average person, it is indeed a struggle but, the good news is, it is not impossible. So what language exactly are we trying to understand?

HTML – The language of the web

Going back to our previous definition of HTML, we said that HTML, or Hypertext Markup Language, is the W3C standard language with which all web pages are built. It is the native language, the mother tongue of all other web languages – the building block from which all other web languages are built. Once we understand what it’s for, how to read it and write it, the easier it will be to understand everything else.

Let’s break it down a little bit more. The book HTML5- 24 Hour Trainer by Joseph Lowery writes:

The Internet, or World Wide Web, is essentially a network of computers. Browsers, like Internet Explorer, Firefox, or Safari, are computer programs that display web pages, which, in turn, are written in HTML. So, at its heart, HTML is the language of the Web.

As noted, HTML is an abbreviation for HyperText Markup Language. HyperText is text presented on one electronic device – whether it’s a computer, smartphone, or something else — that is connected, via a link, to other text, which could be located elsewhere in the same document, on a different page in the same website, or on an entirely different site. HyperText is perhaps the defining essence of the Internet: the ability to link from one web page to another, thus creating a web of information.

A simple hypertext system that connects raw textual content pretty much describes the earliest Internet systems. So how did we get to the rich multimedia experience that makes up much of the web today? That’s where the second half of the HTML abbreviation, Markup Language comes into play. The Markup Language part of HTML takes plain text with additional codes or tags and turns raw text into easily readable text on other electronic devices.

Lesson. Read and Write.

Here’s an example of HTML in action. Let’s say we want to send this block of text to be displayed on different browsers and it will be viewed on different devices:

ACT I. PROLOGUE.Two households, both alike in dignity In fair Verona, where we lay our scene,From ancient grudge break to new mutiny,Where civil blood makes civil hands unclean.From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife. The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend. SCENE I. Verona. A public place.

Although all the information you need to convey is contained here, it’s a struggle to understand the meaning because it’s a big block of plain text. It would make a lot more sense if we were able to MARK IT UP in some way to indicate structure as well as communicate content. How about if we break it up into paragraphs using symbols, like this:

<p>ACT I.<p>

<p>PROLOGUE.<p>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

<p>From forth the fatal loins of these two foes A pair of star-cross’d lovers take their life; Whose misadventured piteous overthrows Do with their death bury their parents’ strife.<p>

<p>The fearful passage of their death-mark’d love, And the continuance of their parents’ rage, Which, but their children’s end, nought could remove, Is now the two hours’ traffic of our stage; The which if you with patient ears attend, What here shall miss, our toil shall strive to mend.<p>

<p>SCENE I.<p>

<p>Verona. A public place.<p>

One symbol, <p>, shows where the paragraph starts and another, similar symbol, <p>, shows where it ends. Overall, it’s better and more readable, right? The problem is that everything is still on one level. Perhaps we can show the difference between a heading and a paragraph of text by using different symbols, such as an <h> for a heading and a <p> for a paragraph:

<h>ACT I.<h>

<h>PROLOGUE.<h>

<p>Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.<p>

Getting better, but are all headings the same? How about if we indicate the most important heading with the number 1 and a less important heading with a 2, like this:

<h1>ACT I.<h1>
<h2>PROLOGUE.<h2>

Now when a computer program, like a browser (IE, Firefox, Safari), renders this marked-up text, it strips out the MARKUP SYMBOLS (called tags in HTML) and shows the text with the appropriate styling.

ACT I.

PROLOGUE.

Two households, both alike in dignity In fair Verona, where we lay our scene, From ancient grudge break to new mutiny, Where civil blood makes civil hands unclean.

Is it starting to make a little bit more sense now? Did something break? Hopefully, a light bulb switch turned on or something clicked in your head and you’ve found your “Aha!” moment. If you have, you will start looking at html code differently. You can try reading and writing and even try to slowly interpret what all the gobbledygook means. If you haven’t figured it out yet, you can go back to the lesson, find your own text block and practice using the markup symbols we used.

More next week!