Hello everyone and welcome!
So here's the first chapter of this course for beginners that is going to show you how to design your own website!
We are going to spend a while together. Everything will depend on how quickly you learn. If you read this course regularly at a reasonable speed, you should finish it in one to two weeks. But if you need a little more time, don't worry: the main thing is for you to go at your own pace, preferably enjoying yourself.
I suggest you start with the simplest, but also the most important, question: how do websites work?
How do websites work?
How do websites work?
No, don't be afraid to ask questions even if you think they are "dumb". It's very important for us to talk about it a little before going fully into website design!
I'm sure you visit websites on a daily basis. To do this, you run a program called the web browser by clicking on one of these icons shown in the next figure.
With a browser, you can visit any website. Here, for example, is a browser displaying the famous Wikipedia website (see next figure).
I'm sure you're used to using a web browser! Everyone now knows how to surf on the Web... but who really knows how the Web works? How to design websites like this one?
I've heard of HTML and CSS. Do they have something to do with how websites work?
They are computer languages for creating websites. All websites are based on these languages, which are now essential and used everywhere. They are the very foundation of the Web. HTML was first invented by Tim Berners-Lee in 1991...
Tim Berners-Lee still closely follows Web developments. He created the World Wide Web Consortium (W3C) that defines new versions of these languages. More recently, he also created the World Wide Web Foundation, which analyses and tracks Web developments.
The HTML and CSS languages are the basis of how all websites work. When you visit a website with your browser, you should know that behind the scenes wheels are turning to allow the website to be displayed. The computer bases itself on what was explained to it in HTML and CSS to know what to display (see next figure).
HTML and CSS are two "languages" you have to know how to speak to create websites. The web browser does the translation between these programming languages and what you see on the screen.
You're probably wondering why you need to know two languages to create websites? I'll answer that straight away!
HTML and CSS: two languages for creating a website
To create a website, you have to give instructions to the computer. It's not enough to simply type the text you want to put in your website (as you would in a word processor such as Word, for example). You also have to show it where to put text, insert images, create links between pages, etc.
The role of HTML and CSS
To explain to the computer what you want to do, you have to use a language it understands. And that's when things get tough, because you have to learn two languages!
Why were two languages created? Wouldn't just one have been enough?
You are probably thinking that handling two languages is going to be twice as complex and take twice as long to learn... but this is not so! I can assure you, if there are two languages, this was designed to make things easier. We'll be dealing with two languages that complement each other as they have different roles:
HTML (HyperText Markup Language): first appeared in 1991 when the Web was launched. Its role is to manage and organize content. You thus use HTML to write what you want the page to display: text, links, images, etc. You might say for example: "This is my title, this is my menu, here's the main text of the page, here's an image to be displayed, etc.".
CSS(Cascading Style Sheets): the role of CSS is to manage the look of the website (layout, positioning, design, color, text size, etc.). This language was introduced to complement HTML in 1996.
You can quite well create a website in HTML only, but it won't look very nice: the information will be displayed "granularly". This is why the CSS language is always used to complete it.
To give you an idea of this, the next figure shows how the same page looks without CSS and then with CSS.
HTML defines the content (as you can see, it's rough around the edges!). CSS is used to arrange the content and define the presentation: color, background image, margins, text size, etc.
As you can imagine, CSS needs an HTML page to work. This is why we are first going to learn the basics of HTML before going on to deal with the decoration aspect in CSS.
As a result, your first pages won't be very nice to look at, but who cares! This won't last very long.
The various versions of HTML and CSS
Over time, the HTML and CSS languages have been significantly changed. In the first version of HTML (HTML 1.0), you couldn't even display images!
Here's a very brief background of the languages for your general knowledge…
HTML 1: this was the very first version created by Tim Berners-Lee in 1991.
HTML 2: the second version of HTML appeared in 1994 and ended in 1996 with the publishing of HTML 3.0. This was the version that was to lay the groundwork for the future versions of HTML. The rules and operation of this version are given by the W3C (whereas the first version was created by one man).
HTML 3: appeared in 1996, and this new version of HTML added many possibilities to the language such as tables, applets, scripts, positioning of text around images etc.
HTML 4: this is the most common version of HTML (more specifically it's HTML 4.01). It appeared for the first time in 1998, and proposed the use of frames (which cut a web page into several parts), more complex tables, improvements in forms etc. More importantly, this version for the first time allowed the use of style sheets, our famous CSS!
HTML 5: this is THE latest version. Still not very widespread, it attracts a lot of attention as it provides many improvements such as the ability to include videos easily, a better layout of content, new features for forms, etc. This is the version that we are going to find out about together.
CSS 1: from 1996, the first version of CSS was used. It laid the foundations of this language which allows you to display your web page, with colors, margins, fonts, etc.
CSS 2: appeared in 1999 and was then completed by CSS 2.1. This new version of CSS added numerous options. We can now use very accurate positioning techniques to display items where we want them on the page.
CSS 3: this is the latest version, which added eagerly awaited features such as rounded edges, gradients, shadows, etc.
The text editor
What software am I going to need to create my website?
Am I going to have to break my piggy bank to buy a very complex piece of software that I'm going to take months to understand?
There are indeed a large number of software programs for designing websites. But I can assure you that you won't have to pay a single penny for them. Why go for a paid and complicated software program when you already have everything you need at home?
Yes, brace yourself because all you need is... Notepad (see next figure)!
Strange but true: you can quite well design a website just using Notepad, the text editing software included as default in Windows. I have to admit that this is how I started myself a few years ago.
However, more powerful software is now available and no one really uses Notepad any more. These website design programs can be classified as two categories:
WYSIWYG (What You See Is What You Get): these are programs that are very easy to use and allow you to create websites without learning any particular language. The best known of them include: Nvu, Microsoft Expression Web, Dreamweaver... and even Word! Their main drawback is the quality of the HTML and CSS code that is automatically generated by these tools, and which is often of rather poor quality. A good website designer will sooner or later have to know HTML and CSS, and this is why I do not recommend the use of these tools.
Text editors: these are programs for writing code. They can generally be used for other languages, not just HTML and CSS. They are proving to be powerful allies for website designers!
As you've gathered, I'm going to get you to use a text editor in this course. Here are a few tips, according to whether you're running Windows, Mac OS X or Linux.
There are plenty of text editors and I don't intend to mention them all. However, do have a look at Notepad++, one of the most widely used text editors in Windows. This program is simple to use and free.
Here is what Notepad++ looks like when you launch it (see next image).
I suggest you follow these steps: choose the
HTML. This will tell the software that HTML language is about to be typed.
When you use the software, it will color your code to allow you to identify it more easily:
Other publishers are available in Windows. If you don't like Notepad++, you can try:
In Mac OS X
You can try one of the following programs:
There are many Text editors in Linux. Some of them are installed as default, while others can be easily downloaded from the Download Center (in Ubuntu in particular) or via commands like
aptitude. Here are some programs that you can test:
Why a browser is important
A browser is a program that lets you see websites. If you can read this, it means that your browser is open and you are displaying it. As I explained earlier, a browser's job is to read the HTML and CSS code to display a visual result on the screen. If your CSS code says "The titles are in red," the browser will display the titles in red. The browser's role is thus essential!
You wouldn't think so, but a browser is an extremely complex program. Understanding HTML and CSS code is indeed no small matter. The main problem, as you will quickly realize, is that browsers do not display all websites in exactly the same way! You'll have to get used to this and get into the habit of regularly checking that your website works properly on most browsers.
Browsers on computers
There are many different browsers. The main ones you should know are shown in the next figure.
Google's browser, which is easy to use and very fast.
The Mozilla Foundation's famous, renowned browser.
Microsoft's browser, which is installed on all Windows PCs.
Apple's browser, which is installed on all Macs.
The eternal outsider.
In the next figure, you can see a preview of some of these main browsers on the Google homepage.
Understanding the differences between browsers
As I said earlier, browsers do not always display web sites in exactly the same way. Why? This is because browsers do not always know the latest features of HTML and CSS. For example, Internet Explorer has for a long time lagged behind as regards some CSS features (and paradoxically has also been ahead in others).
To complicate matters, there are several co-existing versions of browsers:
Firefox 2, Firefox 3.5, Firefox 3.6 and Firefox 4;
Internet Explorer 6, Internet Explorer 7, Internet Explorer 8 and Internet Explorer 9;
Chrome 8, Chrome 9 and Chrome 10;
Although each version supports new features, this becomes a problem for webmasters like you who create websites, if users do not update their browsers.
Chrome has largely resolved this problem by setting up automatic updates without requiring user action. Many Firefox users forget to update, and Internet Explorer struggles to get users to update as the latest versions also require an update of Windows (Internet Explorer 9 is not available for Windows XP for example).
As you can see, it's... complicated.
The biggest concern most often lies in older versions of Internet Explorer (IE6, IE7 and IE8). You should check how your website looks in these older versions... Expect the unexpected! In particular, make sure that your website is displayed without errors, without trying to obtain exactly the same result in the old versions of these browsers.
Browsers on mobile phones
In addition to the browsers that I have presented, variants of these browsers are found on mobile phones, especially smartphones.
As more and more people now visit websites on their mobile phones, we should at least have some idea of how browsers work on mobile phones.
In fact, you won't be lost: most browsers on smartphones are the same as the ones on computers, in a lighter version suitable for mobile phones. Everything depends on the phone type.
iPhone: on Apple's iPhone, the Safari Mobile browser is used. This is a light but nevertheless very complete version of Safari for computers.
Android: Android mobile phones use the Chrome Mobile browser. There again, this is a version for mobile phones.
Windows Phone: Windows Phone includes... Internet Explorer Mobile! The principle is the same as for the above browsers: it is a version dedicated to mobile phones.
Blackberry: Blackberries are an exception to the rule as they have their own browser (there is no equivalent on computers). However, the most recent versions of this browser are based on a core common to Safari and Chrome (the Webkit rendering engine). As a result, the display is generally similar to that of Safari and Chrome.
Browsers for mobile phones support most of the latest features of HTML and CSS. In addition, the automated updating system of mobile phones ensures that users will most often have the latest versions.
You should, however, be aware that there are differences between these mobile phone browsers and it is advisable to also test your website on these devices! In particular, as the screen is much narrower, you should make sure that your website is displayed properly.
The Web was invented by Tim Berners-Lee in the early 90's.
To create websites we use two computer languages:
HTML, which lets you write and organise the content of your page (paragraphs, titles...);
CSS, which lets you format the page (color, size...).
There has been multiple versions of HTML and CSS. The last ones are HTML5 and CSS3
A web browser is a software which displays websites. It reads HTML and CSS languages to know what it must display.
Lots of different web browsers exist: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera... Each one will display websites slightly diffrently than the others.
In this course, we will learn how to use HTML and CSS languages. We will work in a software called a "text editor" (Notepad++, jEdit, vim...).