TechSoup.org The place for nonprofits, charities, and libraries

How Websites Work

Confused about HTML, CSS, and other website terminology? This article gives you all the basics.

How Websites Work 
Elliot Harmon - April 26, 2011
When it comes to improving or overhauling your organization's website, arming yourself with a basic understanding of HTML, CSS, and content management systems is crucial.

When planning a new website or updates to an existing one, your first thoughts probably turn to how it will look, what information it will include, and how that information will be organized. Depending on your organization's size and budget, the magic of turning your plans into an operable website may be left to developers, designers, and other web professionals.

Yet when it comes to improving or overhauling your organization's website, a general familiarity with the mechanics behind that site is crucial. Even if you never need to code a single line of your site, arming yourself with an understanding of how HTML, CSS, and content management systems (CMSs) are used to build web pages can help you every step of the way. When you're looking for a web designer or developer, this knowledge can help you to not only specify what you need but also weed out consultants who may bank on a layperson's ignorance to mislead them into thinking they know more than they do. (Moreover, this knowledge can keep you from trusting someone simply because he or she is younger and seemingly more tech-savvy.) Once you've found the right collaborator or have begun working with someone in-house, a little web know-how will ensure more confidence on your end, a common vocabulary, and a smoother working process.

Finally, having a grasp on a few web fundamentals can help you understand the relationship between your design and how it appears on a web browser. After all, what you're really building isn't a finished website; you're creating lines of plain text that visitors' computers will read and turn into a finished website. The site you design and code may display differently depending on the browser, platform, or device your visitors use; moreover, the finished product might not look exactly like the original prototype. Knowing a little about HTML, CSS, and CMSs can help you work with developers to address these issues, ensuring that your site is designed to reach as many people as possible who wish to access it.

Don't worry; this will be quick and painless.

HTML

Most websites are written in HTML, short for Hypertext Markup Language. When you see a web page that looks like this:

Screenshot of a web page

What your computer is seeing looks more like this:

Screenshot of a HTML code example

How does your web browser know how to translate that code into colors, fonts, links, and graphics? It reads HTML tags, simple instructions that tell the computer to display and manipulate text in various ways. For example:

Screenshot of HTML converted into formatted text

Here, you can see several tags in action. The <html> tag simply informs the computer that the file is written in HTML language. <title> indicates the title of the page (see "My Example Website" at the top of the browser window), and <body> refers to the content in the display area. <p> instructs the browser to start a new paragraph, and <strong> tells the computer to put text in bold type (note that "nonprofit managers" appears in bold in the browser window). Each tag appears at the beginning and end of the affected text, with a slash before the name of the tag at the end of the affected text; for instance, <strong> appears at the beginning of the bold text and </strong> at the end.

After you create an HTML file, you can upload it to a web server, where any computer with a web browser and an Internet connection can access it (for more on how web servers work, see A Few Good Web Hosting Providers). Web servers can also run web CMSs, special programs that manage your website remotely (see below).

CSS

Today, most websites use cascading style sheets (CSS). Think of CSS as a design shortcut; it's a way to conform the design of an entire website to a certain set of standards. Rather than making a stylistic change to every single page on a website, you can change the style sheet and the entire website will follow suit. Let's say your organization decides to change its logo, and you want to update the website's color palette to match the change. Rather than editing every page, you could make the change only once, on your style sheet.

CSS can also generate multiple versions of a single website: a developer can make extra style sheets for different operating systems, mobile phones, and screen readers for the blind. Used properly, CSS can make your website more attractive, easier to update, and more accessible to people with disabilities.

Here's a simple demonstration.

Screenshot of HTML code and an associated CSS document

The LINK tag in the HTML file instructs the browser to check "style.css" for style information. Style.css instructs the browser to display body text in red, resulting in this:

Screenshot of text that has been styled with CSS to display in a red font

(We're using hexadecimal color codes here; see Web Colors in Wikipedia for more information.)

Let's say we decide to change the body text to blue. We don't need to edit index.html at all; all we need to do is change the color code in style.css:

Screenshot of HTML code and an associated CSS document

The result:

Screenshot of text that has been styled with CSS to display in a blue font

CSS elements can dictate nearly every aspect of a website's design and functionality. To see just how much control CSS gives the designer over a website's look and feel, check out CSS Zen Garden. This site features a single HTML page as customized by hundreds of different style sheets.

Web Content Management Systems

Some websites don't use any technologies beyond HTML and CSS. You can update your website by editing raw HTML and CSS code as in the examples above, or by using a web development application like Adobe Dreamweaver.

Yet if you wanted to announce an upcoming meeting or event, adding the announcement to every page on your site would be a pain in the neck, even with CSS. If more than one person in your organization is updating the site, then a variety of problems arises: When you open a page on your computer to update it, how can you be sure you're looking at the most recent version of the page? What if someone else is making edits at the same time? For a site that will grow with your nonprofit and meet the needs of multiple stakeholders, you'll probably want to invest a little time and money into adopting a web CMS.

A web CMS is a piece of software installed on a web server that delivers many types of information in a consistent design. CMSs are designed to integrate disparate features like blogs, forums, and wikis into a seamless user experience.

[Editor's note: TechSoup also offers LightCMS, a cloud-based content management system.]

Most CMSs have browser interfaces: that means there's no need to install web-editing software on every computer you'll use to update the site; you can add or edit content directly from any web browser. Most modern CMSs include a WYSIWYG (what you see is what you get) editor, meaning that you can format text and add links without getting your hands dirty in HTML code. When you enter content into your CMS' interface, the CMS translates that content into code to be interpreted by the end user's web browser and displayed onscreen for your visitors.

Diagram showing how CSS and HTML are controlled by a CMS using a browser interface

For much more on selecting and using a CMS, see Idealware's guide, Comparing Open-Source Content Management Systems.

Conclusion

The size of your organization and what kind of budget you have for web design will have a lot of impact on your web design process. If you'll be the main person working on your website, you'll likely still have a lot of questions. The W3Schools online web tutorials are invaluable, as is Idealware's guide, Comparing Open-Source Content Management Systems.

If a staff member, volunteer, or consultant will be building the website, then you won't need the same level of expertise; however, a basic understanding of the tools will help you work as an effective collaborator.

Image: Web code, Shutterstock