HTML and the internet
an overview
HTML, or HyperText Markup Language, is the programming language used on the internet. Most web files are encoded as html, and it doesn't hurt for the average fellow to have a grasp of what html is, what it does, and how to understand it.
Like any other language, html has syntax and protocols. Precision is important; improperly written html might not function as intended, if at all.
It's simple, really.
html lines are written with tags: opening and closing. The opening tag alerts the browser about what sort of format the following text should be, and the closing tag alerts it that the work has been done.
For example, in a plain English sentence, a quotation mark indicates that the following text is a direct quote; the final quotation mark indicates that the quote is complete. The same: an opening tag and a closing tag.
Here's an example:
On my web page, I want a picture, with a title and a caption.
The html code will represent something like the following, which is a description of the elements I want on the page, telling the browser what to do:
[then, the image]
You can see my reflection on the back of that fly.
Here's how I'll code it to put all the elements on the web page:
01. <h3>Green Fly on Barberry</h3>
02. <img src="images/green-fly.jpg"width="200"height="200" />
03. <br />
04. You can see my reflection on the back of that fly.
The <h3> is a heading tag, used to emphasize text as part of a heading to a section. Notice the </h3> cosign tag. Experience told me which of the six (h1 - h6, h6 being the smallest) I wanted.
The next line is an image tag, telling the browser that the contents are an image, so the browser will know what to do, and where to go to find the image file; in this case, src="images/green-fly.jpg" tells the browser to look right next door in the "image" directory, and find the .jpg file called "green-fly" and put it on the page.
The following html, width="200"height="200, tells the browser how large to render the image, in pixels. In this case, I happen to know the source of the image is 450 pixels square, which is a bit large for our purposes. So I scaled it. Also, the dimensions tell the browser how much room to leave for the image, so it can work on the rest of the page in case the image is a large, slower-loading file.
Note that, unlike my explanation, the image tag <img>, doesn't have a closing tag. It's a special case, like the tag below it in the code, which has a space and a slash at the end, <img />, and so politely closes itself.
The next tag, <br />, is a self-closing line-break tag (notice the /, before the >?), so the text that follows the image will appear on a line below, and not begin on the same line as the image.
Here's the rendered html:
Green Fly on Barberry
You can see my reflection on the back of that fly.
It's all very simple, really. html is much more straightforward than English, and about the simplest of the programming languages to learn. Generally, machine languages have a rigid syntax, so the rules always apply. Perhaps programmers find solace in that predictability and adherence to a standard.
In html, everything is inside a tag, beginning at the top of the page, the <html> tag, which tells the web browser what language is coming.
A web page is in two sections, the head and body, each enclosed in tags: <head>…</head> and <body>…</body>.
The <head> section contains all the meta-data about the page: the type of language in which it's written, perhaps the author's name and contact information, what sort of software or other agent generated the code, and a brief description, and some pertinent keywords.
This is much like the copyright page in a book, which has all the information about the book, but not the content, which is to follow.
(No meta-data is necessary, but it's generally a good idea).
The <body> section contains the content of the page, which the browser renders, using the instructions it finds in the html file.
An html file is structured like this:
<html>,
<head>,
Meta-information…,
</head>,
<body>,
Content, enclosed with tags,
depending on what it is…
</body>,
</html>
What makes html really work is the Hypertext aspect of it, which enables text on the page to link to other files found on the network. In your case, the network is the world wide web, and you're viewing this page on it.
Networks began in the academic world; computer engineers developed methods for file sharing among computers, which, when they applied their techniques to a broad context, led to the internet, developed by Tim Berners-Lee in 1989.
That was an example; the text, "Tim Berners-Lee" was a hyperlink, telling the browser to load a Wikipedia article about the cyber-pioneer when the link was activated (of course, you know that links are activated with a mouse-click).
In the previous example, I could have made the word, "fly," in the caption, a link to a Wikipedia article about green flies.
Here's the html as it is:
01. <h3>Green Fly on Barberry</h3>
02. <img src="images/green-fly.jpg"width="200"height="200" />
03. <br />
04. You can see my reflection on the back of that fly.
I can use a special anchor tag, <a>, to make "fly" a hyperlink to an article I found on Wikipedia about green-bottle flies.
I'll change the html from this:
04. You can see my reflection on the back of that fly.
To this:
04. You can see my reflection on the back of that <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly" target="_blank" >fly</a>.
Note the opening anchor tag, which begins, <a, and then is followed, much like the image tag, with a locator, so the browser knows which file to find when the link is activated. I copied the address of the file from my browser's address bar when I was at the page with the article and pasted that into the code to make a link. I added, target="_blank", which is routine html asking the browser to open the file in a new window, so the user doesn't navigate away from this highly-engaging website until they intend to.
And there, at the end of the line, the opening anchor tag is terminated with the > symbol, followed by the word, "fly," which is neatly wrapped by the closing </a> tag.
Here's the rendered html:
Green Fly on Barberry
You can see my reflection on the back of that fly.
I could make the image a link, too, by wrapping the image tag in the anchor tags - or nesting it, as we call it.
For that, I'd go from this:
02. <img src="images/green-fly.jpg"width="200"height="200" />
To this:
02. <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly" target="_blank"> <img src="images/green-fly.jpg"width="200"height="200" /></a">
Now the image will have a blue border around it, to indicate, as a old-school, that it's a hyperlink and will load a file when activated.
Before we look at it, let's add one other layer to it:
It's recommended that images have alternative text, to be displayed in the event the image doesn't load. The alt text, which is enclosed in the <img /> tag, follows any other information in the line (such as width and height). Our line, still contained by the anchor tag, and with the addition of the image file name as alt text, looks like this:
02. <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly" target="_blank"> <img src="images/green-fly.jpg" width="200"height="200"alt="green-fly.jpg"></a">
If I add a title attribute to the anchor tag, a modern browser will display the title text as a "tooltip," or special bit of text that appears when the user's mouse hovers over the link. A title is usually used to provide the user with some extra information about the link, before it's activated. In this case, let's tell the user they'll open a Wikipedia article about green-bottle flies when they click the link.
I'll add this, title="read more about green-bottle flies at Wikipedia" to our anchor tag, which is nested around our image tag… our line of html now looks like this:
02. <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly"target="_blank" title="read more about green-bottle flies at Wikipedia" ><img src="images/green-fly.jpg" width="200"height="200"alt="green-fly.jpg"/></a">
And here it is, rendered (I've added the title text to the link around the word, "fly," as well):
Green Fly on Barberry
You can see my reflection on the back of that fly.
Try hovering over the links to see the title text; it's likely, if you're using a contemporary browser.
Our little bit of code went from this:
01. <h3>Green Fly on Barberry</h3>
02. <img src="images/green-fly.jpg"width="200"height="200" />
03. <br />
04. You can see my reflection on the back of that fly.
To this:
01. <h3>Green Fly on Barberry</h3>
02. <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly" target="_blank" title="read more about green-bottle flies at Wikipedia" ><img src="images/green-fly.jpg" width="200"height="200" alt="green-fly.jpg"/></a>
03. <br />
04. You can see my reflection on the back of that <a href="http://en.wikipedia.org/wiki/Common_green_bottle_fly" target="_blank" title= "read more about green-bottle flies at Wikipedia">fly</a>.
Now, though, it has interactivity, and gives a mere image and bit of text some informational depth; from the linked article, where else might one go?
The internet fascinates me; when I was a boy, computers were rare, and filled rooms in laboratories, with banks of spinning dials of tapes, and spewed punchcards.
I remember a long-haired, long-fingernailed fellow I had met on the bus, showing me, in his cluttered office in downtown Seattle in 1979, his newly-built motherboard, which was a collection of tubes and wires and soldered PC boards assembled in a Rube Goldberg way.
Now, we have access to the ultimate factotum, which can have, at our disposal, on our desks while we finish making the request, whatever file we can link to, and merely thirty years after that arcane motherboard.
Any time you like, you can take a look at the html used to generate the web page you're visiting. Typically, your web browser will have, in the "View" menu, an option to view the "Page Source". Take a look - web developers often do, when they see something they like and want to peer under the hood. Try finding the opening and closing tags of some elements, and maybe take a stab at guessing what the tags represent: paragraphs (<p>), or list-items, or text-fields for forms…?
There are a number of tutorials on the web for learning html; I'll put some links in the "resources" panel. Dial in, if you're intrigued. I did that myself, a number of years ago.
As with locks and clocks when I was a boy, my curiosity was piqued, so I had to dismantle the internet to find out how it worked. I surfed around for html resources, and found them right away. Soon, I had a nice understanding - and then fell down the rabbit-hole of CSS -- but that's another story.