eb design is a fascinating subject, and the central topic of many books and articles; therefore this article will focus on one small aspect of Web Design; the underlying code. HTML stands for HyperText Markup Language, and it is the code that underpins the whole Internet. Even HTML itself has been vastly expanded in the years since it was first conceptualized, so that we will take a look at only the very basics of the language. Do not be put off by the idea of it being code, in reality HTML is actually very easy to understand, so long as you approach it from the right angle.
HTML's origins began in 1980 when physicist Tim Berners-Lee, at the European Organization for Nuclear Research (CERN) proposed a system for CERN researchers to use and share documents. This system was called ENQUIRE, and in that project was the seed that would eventually germinate into the World Wide Web. Nine years later Berners-Lee and CERN data systems engineer Robert Cailliau both submitted separate proposals for an Internet-based hypertext system similar in function to ENQUIRE. The WorldWideWeb (W3) project was accepted by CERN and kicked off the following year.
The HTML web standards have changed and adapted to new challenges and possibilities opened up by the expansion of the web. The journey has seen the World Wide Web proceed through a number of different paradigm shifts. Despite this the core of HTML is still almost the same as it once was, even if its role has changed, and would be very easily recognizable to someone from the early 90s (even if it would take them an hour to get their head around some of the major advances).
Understanding HTML easily is just a matter of understanding how documents were traditionally shared in the era of the early Internet (when it was just a small collection of Military and Education networks all linked together). Back then pages were shared as text files, and as such were limited in what they could convey. Pages would look something like this;
Imagine reading page after page of plain text, and you get some idea of what the early web was like. It was difficult to display subtle nuances and highlight areas of special interest so researchers began to add symbols to the text to highlight words and phrases:
But still, this solution was lacking, and was still rather difficult for the reader to pick up on the highlighting since it just blended into the rest of the text. The final solution proposed to solve this problem was a Markup Language. This language introduced codes which could be embedded in the text and would be read by the browser, telling it how to format the text. These codes (such as b for bold i for italic and u for underline) would be contained within triangular brackets, < > and would not be seen by the end user. Each tag would have an opening tag and ending tag (with a slash preceding the code). Hypertext in a document would look like this;
Would therefore be rendered:
As we have seen the simple markup added to the paragraph allowed the browser to format sections. Anything between each of the markup codes would be highlighted italic, underline, or bold, depending on which tag had been used. Because of the simplicity of HTML, a webpage can be made in word pad, by adding tags to the text and then saving it as a .htm file instead of .txt which will then open back up in the browser instead of text pad.
Moving back to the old days, each page was a single file that had to be looked up and opened. It was extremely difficult to refer to other documents. Tim Berners-Lee and the W3 consortium also tackled this by including the facility to refer to any point within the document and other external documents. Thus hypertext (and subsequently the world wide web) was born. The facility to refer to other documents was achieved through a simple tag - the a tag! A link in hypertext looks like:
'This is a link', would be displayed, and it would be be rendered in blue and underlined; something which everyone would soon come to associate with links. Clicking on it would take the user across the Internet to the other page (located at www.example.com). So we have seen how HTML was born, simply to fulfill a need, and once you understand that the rest becomes easier to understand. Having learned to make text bold, italic, and underlined, the rest is all easy. Everything you could possibly want to do has an HTML tag, and all you have to do is find the tag you need and use it. Here are a list of tags:
These tags can be used to format text, link to other documents, and add images to the web page, but our process of discovery does not end here. Even with these few tags we could create a functioning web page, and it would work, but webpages have a certain structure that needs to be followed, and we should learn that next.
Whenever we write web pages, we open up with an html tag which formally tells the browser that HyperText Markup Language will be in use.
Then we open up head and body tags. The head tags will contain information about the document (metadata) and the body tags will contain the document.
Notice how, whenever tags are contained within other tags we use a tab to nest them.
So the head tag contains information about the document while the body tag contains the document. Here's how it all fits together:
This should make some sort of sense. So congratulations, you've learned all about HTML... its origins and the needs it was created to fulfill. Now it's just a case of learning more formatting tags, and the subtleties of each.
As time progressed HTML, people realized, also had its own problems. Using basic HTML the layout and the text become inseparable, and over large websites this becomes a problem. Imagine you want to change the look of your website, and you have 50 pages - all of which you have to change! Later improvements to HTML added CSS (Cascading Style Sheets), which allowed designers to separate 'style' from the 'content' so that the design could be stored in a separate document called a style sheet and used again and again throughout the website. Changes in a CSS would automatically show up in any web page that used it. But, let's not worry about all that yet.
