Web pages have a basic, bricks and mortar, foundation. It’s called HTML – short for HyperText Markup Language.
So, here’s a trivia/history question for fellow Mac enthusiasts. Do you remember an early Mac application called HyperCard? This was pre-Internet, and had some features of web pages as we know them now. The principle feature was that you could link a word or phrase on a card and the user could click on that link and be taken to another card. The only problem was that you had to use the computer where the HyperCard application was running. No one had figured out how to make it run over a network (unless our Alan Oppenheimer had gotten ahead of everyone else when working with AppleTalk.) I actually created a simple marketing game/simulation in HyperCard, and used it for marketing training for Kaiser Permanente reps in the late 1980s. (but I digress….)
Hypertext or linking also predates the Internet. Douglas Engelbart, known mostly for inventing the computer mouse, was talking about hyper-linked information well before then. He was entranced with the idea that thoughts and ideas could be linked together in an intricate web, rather than just linearly like a book. A reader could follow a trail of ideas based on their own instincts and preferences, rather than being captive to a paper or a book produced by an author.
Building a Web Page
Web pages are constructed with HTML. When you type ashmug.com into your Safari or Firefox browser the browser expects that you are looking for a page rendered in http – short for hypertext transfer protocol. As you read this post, look up in the address or location bar and you’ll see https://ashmug.com (or http://www.ashmug.com) which means you are expecting to see a page that uses HTML to present the information on the page.
You can see all of the HTML for any web page by choosing View >> Page Source in Firefox and View >> View Source in Safari. Most web pages have this basic structure: I’ll put little {comments} below just to annotate each line.
<html> {the start of the web page. Notice that this and all HTML “tags” are surrounded by < >.}
<head> {this has information about the web page but most of it doesn’t display, with the exception of…}
<title>The Title of the Page</title> {This is the page title that shows in the very top of the browser window.}
<other stuff…>
</head> {Lots of time an HTML tag that is a container has an opening, like <head> and a closing like </head>}<body> {This is the beginning of the stuff the user sees on the web page.}
</body> {This is the end of the stuff the user sees.}</html> {This is the end of the web page.}
During the first 8-10 years of the world wide web (remember that phrase?) we used HTML both to display content and also to control how that content looked. Here is a simple example:
This is a regular sentence. This is a regular sentence with the bold attribute applied to it.
Underneath this post the HTML code for this last sentence looks like this:
<strong>This is a regular sentence with the bold attribute applied to it.</strong>
A headline might look like this:
<h1>Here is a Headline<h1>
Here is a Headline.
If I wanted that sentence to have color I might have used something like this:
<p style=”color: #ff0000″>This is a regular sentence with color added.</p>
This is a regular sentence with color added.
As web developers we could cheerfully mark-up our HTML, adding colors, font size, left or right alignment and all the rest. This is still done in plenty of web pages, and in fact some of the formatting for this post is styled that way.
Cascading Style Sheets
Cascading Style Sheets (CSS for short) have helped web developers separate content from display. The more modern approach to web sites has the information (text, pictures, video, etc.) presented, with a separate set of instructions on how they might be aligned or formatted. One of the most famous examples is the Zen Garden web site. Go to http://www.csszengarden.com/ and then over on the right see the list under “Select a Design”. Click on any of these and the exact same information will be displayed, but in a very different look. So what we have is content set and established and then the presentation of that content open for change. This is particularly helpful for people with various disabilities, including visual impairment. A screen reading program can easily find the content in a modern web site and verbalize or enunciate that content. Someone who needs larger text can have a setting that automatically increases the size of the font. Someone reading a web page on a small, mobile screen can have it formatted to be readable on that screen.
Most modern web sites have files specified in the <head> </head> section that point to CSS files. If you View Source on this page one of the lines you will see is:
<link rel=”stylesheet” href=”https://ashmug.com/wp-content/themes/TheProfessional-Child/style.css” type=”text/css” media=”screen” />
This line of HTML tells the browser to find some formatting and design instructions in a file with that link. Your browser reads that information and stores the instructions in that file for awhile. Then, when you go from page to page the same instructions are remembered and used to present my pearls of wisdom in an attractive fashion.
HTML Standards
Who decides what each of these <h1> and <p> tags mean, and how HTML will evolve with the times? That’s more than a full time job. This organization, W3C, manages to herd the 1000s of cats involved in developing web standards. A quick description from their web site:
The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential.
More information on this organization here.
In our next post we’ll look at cookies – not the chocolate chip kind.
