How are websites created?

Welcome to this course on how to create a website from A to Z.

This is the first chapter and, as such, it will serve mostly as an introduction to the world of web development.

You probably have quite a few questions, so let's start with the most obvious one: how do websites work?

Let's find out...

How websites work

Before we start building websites from scratch, it is best to have a least a general understanding of how the web functions.

You will learn everything you need to know in this chapter.

How do websites work?

That's a good question.

Almost everyone uses the web these days, so this explanation may seem redundant, but it's important to talk about it before diving into the more concrete aspects of website creation.

To browse the web, you need a certain program unironically called a web browser.

You may recognize one of these icons:

These are the main browsers you use to navigate the web.

Web browsers are in fact very simple programs. All they contain is a few buttons, an address bar, a TDI system (tabs) and... an HTML rendering engine, also known as the browser's graphical layout engine.

Without a layout engine, a web browser is pretty much useless. The layout engine is what:

Reads the code present on a web page
Interprets and translates it
Renders it into what most people commonly associate with a website (header, menu bar, text, links and so on)

And all this happens every time you load a different page! Pretty fast...

To summarize, before a web page can be displayed in a way that is readable to the user, it must first be fetched and interpreted by the web browser.

HTML and CSS

You keep talking about HTML and CSS, what are they?

HTML and CSS are two computer languages used to create websites.

You remember when I said that the browser fetches "code" from a web page and renders it? This is the code I'm talking about, HTML and CSS.

The HTML and CSS languages are the basis of how nearly all modern websites work, including this one. They are simply essential and used pretty much everywhere.

What you need to remember is that HTML and CSS are the languages "spoken" by web browsers. To get a web browser to display what you want on your website (be it a text block, a video, a series of images), you need to speak to it in its native language: HTML and CSS.

But why learn two languages? Won't that make things more complicated? Isn't one language good enough?

You're probably thinking that having to learn two languages will make the whole process twice as long, twice as complicated and twice as hard... not even close.

If anything, having two languages for web development makes things less complicated, not more. You will understand why at the end of this chapter.

For now just imagine that HTML is like the alphabet and CSS is like the numeral system.

This analogy makes no sense, but it illustrates how having two languages can makes things easier.

HTML and CSS are both complimentary and fill completely different roles.

The roles of HTML and CSS

As we already stated, to communicate with the web browser you need to speak a language he understands.

Luckily for you, he speaks at least two languages which you can learn easily: HTML and CSS.

Modern web browsers can also interpret other languages, such as Javascript. And if you add browser plugins, the list grows even more. For this tutorial, we will stick to HTML and CSS as they are the foundations of almost any website.

But why two languages? As I mentioned, they both fill two different and very specific roles.

HTML (HyperText Markup Language) is a markup language. Its role is to store information and send information to the web browser. It mainly describes the structure and semantics of a web page. This language appeared in 1991, at the very beginning of the world wide web.
CSS (Cascading Style Sheets) is a style sheet language. Its role is to manage the look of a web page, layout, positioning, color and so forth. CSS was introduced to complement HTML in 1996.

If you want a tangible example of the uses of both HTML and CSS, consider this.

HTML says: This is the title of my page, this is my menu and this is my main text.

CSS says: I want my title in bold and red, my menu floating on the right and my main text to be slightly smaller but underlined.

If you remember that HTML is used to write content, and CSS to stylize that content, then believe me you have already learned 95% of what is to know.

You could technically create a website only using HTML, but the results wouldn't be very aesthetically pleasing.

CSS, however, requires HTML code to work. For this reason we will start by learning the basics of HTML development before moving on to CSS in the second part of this tutorial.

We will start building websites in HTML only, and they will be quite ugly... but be patient, once we get to part II of this course, we'll introduce CSS and you'll see your pages magically become beautiful.

The different versions of HTML and CSS

There have been several versions of HTML and CSS since their creation, and each update brought significant changes to the way websites are developed.

In the first version of HTML, you couldn't even display images!

Here is a brief history of both languages.

The history of HTML

HTML 1.0: This was the very first release of HTML, in 1991. A limited language, made for very few web developers and having even less features, there wasn't much you could do with HTML 1.0 bar getting some text on the web.
HTML 2.0: The second version of HTML appeared in 1994. Barely an upgrade from HTML 1.0, this version simply added a few more features on top of it.
HTML 3.0: We have to wait until 1996 to see the first serious update. It's only with HTML 3.0 that many of the components we commonly associate with current websites became available for web development usage. HTML 3.0 added many possibilities to the language such as the inclusion of tables, scripts, floating text around images and more.
HTML 4.0: Appearing for the first time in 1998, HTML marked a significant evolution of HTML standards and proposed features such as the use of frames, more complex tables and refined forms. But the major improvement over its predecessors was the inclusion of style sheets, the famous CSS.
HTML 5.0: This is the current version of the HTML language, and the one we will be studying in this course. It appeared in 2014, although it was available much earlier for testing. As for its features... keep reading this tutorial, you'll discover them soon enough.

You may also have heard of a sixth version, xHTML. Officially, it's a completely different language from HTML, but there are much more similarities than distinctions. xHTML (eXtensible HyperText Markup Language) appeared in 2000, between HTML 4.0 and HTML 5.0, with the goal of providing more structure and better standards for web development. While many of its features remain in HTML 5.0, this language is no longer used as we have returned to "basic" HTML.

The history of CSS

CSS 1.0: Founded in 1996, the goal of this language was (and still is) to dissociate document content from document presentation. Before that, the only way to properly design your website was through pure HTML, which was never the purpose of that language. And the "solutions" that web developers devised to circumvent HTML's limitations were... special. Those who suffered the trauma of pre-CSS web design don't often talk about it.
CSS 2.0: This version appeared in 1999 and brought a few improvements, namely in the way elements were positioned on a web page. It was also a way to satisfy those who were still skeptical of CSS and refused to use it or bother learning about it.
CSS 3.0: The current version of CSS and the one we will be studying in this tutorial. CSS 3.0 brought a TON of new features to web developers such as gradients, rounded edges, shadows and even interactive elements!

Text editors

Now that you understand how websites work and the purpose of HTML and CSS, you're probably wondering how websites are created.

Specifically, what type of software do you need to build web pages.

There are quite a few.

In fact, the list of every program you could use to build a website is far too consequential to list here, so we'll start with the simplest and least obvious one: Notepad.

Notepad or any text editor is more than enough to build a website from scratch.

But while Notepad is sufficient to create a website, there are more appropriate text editors that are designed distinctly for that purpose.

I will present three text editors intended specifically for web development.

They are in my opinion the best tools for creating websites.

Brackets: A free, modern, open-source text editor available for Windows, Mac or Linux. It offers many features while retaining an ergonomic and accessible interface. This is the software I recommend for web development. Download Brackets here.
Sublime Text: One word, simplicity. This text editor has the main advantage of being easy to use, uncluttered and convenient from the start. Download Sublime Text here.
Microsoft Visual Studio: The heavyweight of programming and website creation. Much more than a simple text editor, Visual Studio is an integrated development environment (IDE) that supports many programming languages in addition to allowing you to code in HTML and CSS. This is by far the most complete tool for building websites. I don't recommend it for beginners as it is rather large and many of its components are unnecessary for basic web development, but if you already have Visual Studio feel free to use it. Download Visual Studio here.

Whichever text editor you decide to use, the basic principles of building websites remain identical. The choice is mainly for cosmetics and personal preference.

You may also have heard of WYSIWYG (What You See Is What You Get) programs such as Adobe Dreamweaver or even Microsoft Word. These are very easy to use even without knowing HTML and CSS, but since the HTML and CSS code is auto-generated and is not always of the best quality, sooner or later you'll have to edit it by hand. They are good software but I don't propose them for this tutorial.

Now that we have our text editor we can talk about the last essential element... the web browser.

Web browsers

Do you know what a web browser is?

I briefly mentioned them at the beginning of this chapter, but since we're starting from scratch (the purpose of this website after all) I'll recapitulate the basics.

A web browser is a program that allows you to navigate the web.
To render web pages a browser needs a layout engine.
The job of the layout engine is to convert HTML and CSS code to a readable format.

This is where things get slightly complicated.

Not every web browser uses the same layout engine.

For example, here is a list of the major layout engines and their respective browsers. You may recognize a few.

Trident: Internet Explorer
WebKit: Safari, Chrome (old), Chromium (old)
Gecko: Firefox, SeaMonkey
Blink (based on WebKit): Chrome (new), Chromium (new)
EdgeHTML: Microsoft Edge

What this means is, in theory, not all browsers will render your website the exact same way.

Luckily, as of today, most web browsers are fully up to standards and the differences in layout are minimal to non-existent.

Not all browser use the same layout engine

But that wasn't always the case.

To complicate matters further, there are multiple different versions of the same browser: Firefox 3, Firefox 4, Internet Explorer 8, Internet Explorer 9 and Internet Explorer 10.

And that's not even counting the sub-versions of each browser, or the browsers for mobile phone, tablet and other electronic devices.

If modern browsers all display your website in a nearly identical fashion, that's not always the case with older browsers or older versions thereof.

That is why many web developers recommend having several browsers installed to test your website.

It's not necessarily something I advocate, as the number of users of outdated browsers is constantly shrinking thanks to the auto-update component, but it's something to consider.

If you're really paranoid and still want to install several web browsers, pick ones with different rendering engines. Example: Safari for WebKit, Microsoft Edge for EdgeHTML and Firefox for Gecko.

Smartphone web browsers

In addition to the browsers described above, be aware that there are also web browsers for mobile phones, especially smartphones.

More and more people navigate the web from their smartphone, so you must at least know the basics of mobile browsers.

Don't panic, they are usually just lighter versions of desktop browsers.

Apple iPhone: The iPhone uses Safari Mobile, a lighter but nonetheless very complete version of Safari.
Windows Phone: Windows Phone mobiles include either Internet Explorer Mobile or Edge Mobile.
Android: Android uses... Chrome Mobile. Once again, a lighter version of the desktop browser.
Blackberry: People still use these? Blackberries are the exception to the rule as they have their own browser, but it's based on WebKit just like Chrome and Safari.

While they are much lighter and less refined, smartphone browsers support most of the latest HTML and CSS features.

In addition, the auto-update system guarantees that the users will have the latest version available.

This concludes this introductory chapter (finally). Let's start building websites.

< Summary >