HyperText Markup Language, or HTML, is probably the most ubiquitous and well known language in the world of web development. It is the language that programmers use to describe a web page’s content and structure so that web browsers can display it correctly to the end user. Marking up a web page means wrapping all of the content in descriptive tags. These tags describe the content’s purpose and how it relates structurally to the rest of the web page.

HTML is used to create headings, paragraphs, tables, block quotes, and a lot more types of content. It is also used to insert images into a web page. Here are some examples of HTML:

• Headings: <h1>H1 defines a level 1 heading</h1>, <h2>H2 defines a level 2 heading</h2>
• Paragraphs: <p>The P tag marks a block of text as a paragraph</p>

HTML is usually created after the web site mock-up has been created by the graphic designer. After the mock-up is sliced up into the appropriate images, HTML is used to arrange those images around the content of your site. If you have a dynamic web site, the business logic programming will wrap the dynamic content with HTML so that it is displayed correctly in the browser.

Good vs Bad HTML

In the early days of the Web, HTML was used to add style to a web page. It could be used to make things bold and italic, big or small, and even colorful. Once the Web started to mature and gain popularity, a bunch of smart people decided that HTML was being used incorrectly and that standards should be created. Instead of defining the style of a web site, HTML should have been defining the structure. This approach to marking up a web site according to its function rather than its form is called using semantic HTML, or marking up the content to reflect only the author’s intentional meaning. Styling the content is something that should be left up to style sheets, which we will talk about in more detail in the next installment of this series.

Good HTML is the single best ingredient for good SEO. By using semantic HTML to describe the structure of your web site’s content, you make it easier for search engine robots to parse through your site. For example, using the appropriate level of heading to segment content based on importance will help the bots know what information is most important and which information it can ignore.

Traditional HTML did not enforce much discipline on programmers. If the HTML was slightly wrong or incomplete, most web browsers would automatically correct the problem. XHTML is a more recent version of HTML that specifically adheres to the strict standards set forth by XML. This version forces programmers to be disciplined in their syntax. By requiring strict syntax, web pages are more consistent and better prepared to be consumed by applications other than web browsers. For example, if a web site’s content is marked up semantically with XHTML, it can be consumed by feed readers, mobile devices, desktop software, and many other software environments.

There are several different versions of HTML, I recommend that you require your site to be marked up with XHTML 1.0 Strict; your developer should know what this means – if they don’t, find a new developer. the W3C provides specifications for all versions and even makes available a handy validation tool to ensure that your site adheres to the rules of your chosen HTML version. When you are working with a developer, make it a requirement that all pages pass W3C validation.

Browser Wars

Unfortunately, the browser wars that continue to rage on have left many battle scars along the way. As a result, none of the current web browsers render and display HTML in exactly the same way, creating huge headaches for developers. For example, a level 2 heading in Microsoft Internet Explorer may be displayed in 14pt font while the same heading in Mozilla Firefox may be displayed using 12pt font. This is another area where style sheets come into play – they help normalize differences between browsers so that web sites look consistent regardless of the browser in which they are rendered.

Additionally, in an attempt to out do one another, some browsers have included support for proprietary HTML tags. If your web site uses a proprietary tag that is only available in one browser, the site may break or be displayed incorrectly in other browsers. It is best to just stick with plain vanilla HTML as defined by the W3C to ensure maximum cross-browser compatibility.

Educate Yourself!

HTML is a very easy language to learn and understand. I recommend picking up a basic HTML book (for example: Learning Web Design: A Beginner’s Guide to HTML, Graphics, and Beyond) or reading through some online tutorials so that you have a good understanding of how HTML works and what its capabilities are. This will further arm you when discussing your site with designers and programmers. Additionally, a good knowledge of HTML will give you a greater appreciation of the planning and work that goes into creating a good, quality web site.

In the next part of this series, we will be discussing Cascading Style Sheets. Style sheets are the icing on the HTML cake – they add style and glamour to your semantically marked-up web site. Check back soon!

Dynamic, database-driven web sites have become the gold standard on the Web. Sites are updated in real time, user-generated content fills ever page, custom-tailored data targets specific users, and data is changed on the fly – all thanks to the database. It is rare to find a website that doesn’t make use of a database in some way or another. The database has become the brain of the modern web site.

So what is a database? Let’s check in with our old pal Wikipedia for a quick and dirty definition:

In computing, a database can be defined as a structured collection of records or data that is stored in a computer so that a program can consult it to answer queries.

Though this may sound simplistic, the definition is spot on. A database is nothing more than a bunch of data (usually plain text) stored and indexed in a structured manner. This allows for specific data to be found quickly and painlessly. Perhaps an analogy is in order: A library is like a database – it is a central repository of books stored in a structured system (Dewey Decimal). This system makes it easy for a person to quickly find a specific book.

The larger and more complex sites on the internet typically store all of their content in a database and retrieve the appropriate data when necessary. The web page that is requested by the user is said to “query” the database for the appropriate data to be displayed. Databases can be queried using a special language called Structured Query Language or “SQL” (pronounced like “sequel”). SQL is simply a special type of language that makes it easy and intuitive to extract data from a database. There are people who spend their entire careers mastering SQL, although you can probably teach yourself the basics of SQL in about a month or two.

Here are a couple of things you should know about database systems:

• Just like a webserver, the database system is just another piece of software
  Database server software is installed on the physical server. Once installed, the database is turned on and left to run indefinitely in the background
• Database systems range in price from free (MySQL, PostgreSQL) to really, really, really expensive (Oracle, Microsoft SQL Server)
  The majority of small to medium sites on the Web today are run on MySQL. This is a natural consequence of it being free and easy to use. If you were to ask my opinion, I would always recommend MySQL, I love it.
• Database optimization is absolutely crucial if you want your web site to scale gracefully and handle high traffic loads
  Don’t be bashful about spending some money on a good developer who understands how to set up a database system properly. When your site explodes in popularity and handles all of the traffic without a hiccup, you will be thankful you did.

In the next part of this series, we will talk about the glue that connects the user, the webserver and the database all together. Make sure you are subscribed so you don’t miss out!

A computer program that is responsible for accepting HTTP requests from clients, which are known as Web browsers, and serving them HTTP responses along with optional data contents, which usually are Web pages such as HTML documents and linked objects (images, etc.).

Now, let’s break this down piece by piece:

• A computer program
  A webserver is a computer program, just the same as WinZip and Solitaire. Webservers can be downloaded and installed just like anything else you place on your computer. They are responsible for serving requests for websites, hence the term: web – server. Webserver software is usually run differently than the programs you are familiar with. Since your server can’t predict when someone wants to view your web page, the webserver software must be constantly listening for requests. As a result, the webserver software is started up and then left to quietly run in the background indefinitely. When a request is received, the webserver processes the request, fetches the pages and files that were requested, and sends them all back to the person doing the requesting.
• HTTP Requests
  HTTP stands for HyperText Transfer Protocol – but you don’t care. And quite frankly you don’t need to care. Just think of HTTP as the ether that lets computers talk to each other over the Web. Requests are messages sent by users to your webserver. Whenever someone types a URL in their web browser, they are making a request to the webserver associated with that URL. The webserver catches this request and then acts accordingly.
• Clients, or Web Browsers
  If “server” refers to webservers, then “client” refers to web browsers. Web browsers are the software programs used to surf the web. Microsoft Internet Explorer and Mozilla Firefox are the two most popular these days. Web browsers are translators: they translate human requests for web sites into requests that webserver software can process. When the webserver processes the request and sends back the appropriate information, the user’s web browser displays it in all its glory.
• HTTP Responses
  HTTP responses are what webservers send back to web browsers after a request is made. These responses typically contain the web pages, images and files that were requested by the user.
• Web pages
  The final pieces of the puzzle. Web pages are the files stored on the server that users request. These are typically text files full of HTML and other markup. Your web browser is designed to translate these files into the correctly formatted web pages that you view.

There are several brands of webserver software available, but the two most popular are Apache HTTP Server and Microsoft Internet Information Services server. Although the primary responsibility of the webserver software is to fetch and return the appropriate website files, there is another function: running other software required by the files themselves. This other software is typically a script engine, and we will talk about that in our next Web Stack Series installment!

Techies love talking about servers and networking infrastructure. Let me tell you a little secret: a server is just a computer; no more, no less. In fact, the computer you are using right now is just as well suited to be a server as any “real” server. Servers are just beefed up computers that are hooked into really fast and reliable networks. Plunk your computer on the same network and install the appropriate software and no one would know the difference. HAL 9000 couldn’t hold a candle to the speed demon sitting under your desk.

By definition, a server (or server computer) is a type of computer that is built specifically for running applications and software that require large amounts of processing power in high-availability environments. What does that mean? Servers are computers on steroids; they are really fast and really reliable. Head on over to Wikipedia for a more detailed definition of a server.

Web servers are basically responsible for two things: storing website files and running the webserver software. Often, large websites have lots of files (think of all those photos that Flickr stores) and must process millions of requests per minute. As a consequence, the server must have lots of storage space and processing power. In many cases, several servers will be linked together to form a “cluster” to accommodate these large storage and processing requirements. Clusters are essentially a bunch computers working together as if they were one; they simply distribute the task of storing and processing websites across themselves to keep up with the workload. We’ll go over the webserver software in more detail later, but for now you just need to know that it is an application running on the server that handles requests for the website.

Although all of the individual components inside of a server are similar to what you can find in your desktop computer, the server hardware is typically more powerful, or is installed in greater quantities. For example, these days you can expect the average desktop computer to have anywhere from 512 megabytes to 2 gigabytes of memory. In comparison, server computers usually have more than 4 gigabytes of memory installed. Additionally, servers typically have faster processors than standard desktop computers.

When your users request a page from your website, the server is what gets the party started. The webserver software (which will talk in more detail about later) running on the server computer receives the request, processes the request, and then returns the appropriate files, usually in the form of an HTML web page. Think of the server as the permanent home of your website files. It’s that simple!

So how do you get a server? For most, the easiest route is using a third party service called a web host. Web hosting is a topic all in itself, but basically a web host is a way of leasing space on mega-servers instead of buying and maintaining your own server. It’s really easy to find cheap (but quality) web hosting these days, but I’ll discuss that in a later post.

In the next part of this series, I will be talking specifically about the webserver software that processes user requests. Stay tuned!

As a visitor to a web page, you only see the final output of a series of tasks that must be completed to generate that page. I refer to the components that are responsible for executing these tasks as the Web Stack. The web stack contains approximately 8 levels, each essential for storing, generating and delivering any standard web page to the end user. Over the next two weeks we will go into detail on each of these pieces of the stack and explain how they relate to the overall web development process.

At the end of this series you will have an understanding of all the back-end processes involved in delivering web content to your users. I will also provide a graphic that visually represents the stack and shows exactly how all the pieces link to each other. This knowledge will be invaluable for you as you take on the task of architecting your own website (whether your build it yourself or outsource the work).

The Web Stack

1. Physical Server and Infrastructure
2. Webserver Software
3. Database Management System
4. Business Logic Programming
5. HTML and Markup
6. Cascading Style Sheets
7. Graphic Design
8. Client-side Scripting