Friday, 20 February 2015

Understanding How the Web Works

Before learning the intricacies of HTML and CSS, it is important that you gain a solid understanding of the technologies that help transform these plain-text files to the rich multimedia displays you see on your computer or handheld device when browsing the World Wide Web. A file containing HTML and CSS is useless without a web browser to view it, and no one besides yourself will see your content unless a web server is involved. Web servers make your content available to others who, in turn, use their web browsers to navigate to an address and wait for the server to send information to them. You will be intimately involved in this process, as you must create files and then put them on a server to make them avail- able in the first place, and you must ensure that your content will appear to the end-user as you intended. A Brief History of HTML and the World Wide Web Once upon a time, back when there weren’t any footprints on the moon, some farsighted folks decided to see whether they could connect several major computer networks together. I’ll spare you the names and stories (there are plenty of both), but the eventual result was the “mother of all networks,” which we call the Internet. Until 1990, accessing information through the Internet was a rather techni- cal affair. It was so hard, in fact, that even Ph.D.-holding physicists were often frustrated when trying to swap data. One such physicist, the now- famous (and knighted) Sir Tim Berners-Lee, cooked up a way to easily cross-reference text on the Internet through “hypertext” links.

This wasn’t a new idea, but his simple Hypertext Markup Language (HTML) managed to thrive while more ambitious hypertext projects floun- dered. Hypertext originally meant text stored in electronic form with cross- reference links between pages. It is now a broader term that refers to just about any object (text, images, files, and so on) that can be linked to other objects. Hypertext Markup Language is a language for describing how text, graphics, and files containing other information are organized and linked together. By 1993, only 100 or so computers throughout the world were equipped to serve up HTML pages. Those interlinked pages were dubbed the World Wide Web (WWW), and several web browser programs had been written to allow people to view web pages. Because of the growing popularity of the Web, a few programmers soon wrote web browsers that could view graph- ical images along with text. From that point forward, the continued devel- opment of web browser software and the standardization of the HTML— and XHTML—languages has lead us to the world we live in today, one in which more than 110 million web servers answer requests for more than 25 billion text and multimedia files. These few paragraphs really are a brief history of what has been a remark- able period of time. Today’s college freshmen have never known a time in which the World Wide Web didn’t exist, and the idea of “always-on” infor- mation and ubiquitous computing will shape all aspects of our lives mov- ing forward. Instead of seeing web content creation and management as a set of skills possessed only by a few technically-oriented folks (ok, call them “geeks” if you will), by the end of this book you will see that these are skills that anyone can master, regardless of inherent geekiness.

Creating Web Content

You may have not iced the use of the term “web content” rather than “web pages”—that was intentional. Although we talk of “visiting a web page,” what we really mean is something like “looking at all the text and the images at one address on our computer.” The text that we read, and the images that we see, are rendered by our web browsers, which are given certain instructions found in individual files. Those files contain text that is marked up, or surrounded by, HTML codes that tell the browser how to display the text—as a heading, as a paragraph, in a red font, and so on. Some HTML markup tells the browser to display an image or video file rather than plain text, which brings me back to the point—different types of content are sent to your web browser, so simply saying “web page” doesn’t begin to cover it. Here we use the term “web content” instead, to cover the full range of text, image, audio, video, and other media found online. In later lessons, you will learn the basics of linking to or creating the vari- ous types of multimedia web content found in web sites. All you need to remember at this point is that you are in control of the content a user sees when visiting your web site. Beginning with the file that contains text to display or codes that tell the server to send a graphic along to the user’s web browser, you have to plan, design, and implement all the pieces that will eventually make up your web presence. As you will learn throughout this book, it is not a difficult process as long as you understand all the little steps along the way. In its most fundamental form, web content begins with a simple text file containing HTML or XHTML markup. XHTML is another flavor of HTML; the “X” stands for eXtensible, and you will learn more about it as you con- tinue through the lessons. The most important thing to know from the out- set is that all the examples in this book are HTML 4 and XHTML compati- ble, meaning that they will be rendered similarly both now and in the future by any newer generations of web browsers. That is one of the bene- fits of writing standards-compliant code: you do not have to worry about having to go back to your code sometime in the future and change it because it “doesn’t work.” Your code will likely always “work” for as long as web browsers adhere to standards (hopefully a long time).

Understanding Web Content Delivery

Several processes occur, in many different locations, to eventually produce web content that you can see. These processes occur very quickly—on the order of milliseconds—and occur behind the scenes. In other words, while we might think all we are doing is opening a web browser, typing in a web address, and instantaneously seeing the content we requested, technology in the background is working hard on our behalf. Figure 1.1 shows the basic interaction between a browser and a server.

source:  Exploring Photoshop CS6