Our Learning Center offers a single place where CEO's, senior executives and managers can learn everything they need to have a more meaningful conversation with their technical advisors.
This article is for those of you who are curious about what makes a website tick.
It is not intended to prepare you for a career as a web developer; that is our job. However, if you are as innately curious as I am, it will provide you with some clarity about the elements that make a website function, and how they work together to create the end product.
A website is a collection of web pages that work together. You can think of a web page as the contents of a single document. Sometimes, the document is obtained from a file on disk; other times, it is created dynamically using data stored in a database.
The web page usually resides remotely, often in a distant data center, and the computer that delivers it is referred to as a web server. The web page itself includes two things: content, and instructions for displaying that content.
The most essential part of a web page is the content itself, and the most basic type of content is text. In fact, you can take a plain text file that you create in any word processor and use it as a web page without any modifications whatsoever.
Of course, most web pages are more interesting than that. In addition to text, most web pages includes images, links, and sometimes other content types, such as audio and video.
HTML: Hyper Text Markup Language (HTML) is the language of the web, and it is used to provide the web browser with instructions for displaying the content of the document. HTML consists of tags, surrounded by angle brackets, that perform a specific function. Some tags are used alone, such as the line break <br>. Others are used in pairs, such as the paragraph tag:
<p>This is a paragraph.</p>
The first tag <p> begins the paragraph, while the second tag (the ‘/’ indicates a closing tag) ends it. Other HTML tags are used to insert images on the page, create links to other pages, designate headlines and create blocks (DIVs) that act as containers for content that must stay together.
CSS: In older sites, formatting (such as the typeface and size of some text) was specified using HTML tags, such as the <font> tag. In today’s websites, Cascading Style Sheets (CSS) have largely replaced HTML for this purpose, offering far more flexibility and much cleaner, more maintainable code. CSS instructions can be specified in three places:
Individual CSS instructions generally do not apply to the whole page (otherwise, the whole page would be formatted the same way). A name can be associated with a specific element, such as an individual paragraph, headline or DIV (container for a chunk of content), and a CSS instruction can affect just that one element.
CSS is not only used to format content such as text and graphics, it is usually used to determine the structure of the page as well.
Most often, CSS instructions are placed in a separate file, so that they can be shared over multiple web pages. This eliminates duplication, and makes it easier to maintain consistency over a website that may contain dozens or hundreds of pages.