How Do You Create Websites - Build Your Website With HTML5 and CSS3

11/10/2016
Howdoyoucreatewebsites?BuildyourwebsitewithHTML5andCSS3
Welcome to OpenClassrooms! By continuing on the site, you are agreeing to our use of cookies. Read more
OK

Home
Course
Build your website with HTML5 and CSS3
How do you create websites?
20 hours
Easy
License
How do you create websites?

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.
Web browsers are programs that display websites
https://openclassrooms.com/courses/buildyourwebsitewithhtml5andcss3/howdoyoucreatewebsites
1/14
11/10/2016
With a browser, you can visit any website. Here, for example, is a browser displaying the famous Wikipedia website (see
next figure).
A website: Wikipedia
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?
Absolutely!
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.
Many people wrongly confuse the Internet and the Web. You should know that the Web is part of the Internet.
The Internet is thus a large system that includes, among other things: the Web, e-mails, instant messaging, etc.
Tim Berners-Lee thus did not invent the Internet, but "only" the Web.
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).
2/14
11/10/2016
From HTML to the screen
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!
3/14
11/10/2016
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 dierent 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 may also have heard of the XHTML language. This is a variant of HTML that is more rigorous and thus a bit
trickier to handle.
Simply put, HTML appeared first in 1991. At the start of 2000, the W3C launched XHTML indicating that it
represented the future... but XHTML was not as successful as hoped. So it was back to basics in 2009: the W3C
abandoned XHTML and decided to return to, and upgrade, HTML.
There is much confusion about these languages, as they are very similar. Neither one is really better than the other.
It's just two dierent ways of doing things. In this course, we are going to work with the latest version of HTML
(HTML5) which is now the language of the future that everyone is encouraged to use.
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.
4/14
11/10/2016
With or without 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 versions
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,
5/14
11/10/2016
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 versions
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.
Note that HTML5 and CSS3 are not versions that have been fully finalized by the W3C. However, even though there
may be minor changes to these languages, I highly recommend that you start with these new versions today. They
make many contributions and are worth while. Also, many professional websites are now built using these latest
versions.
The text editor
What soware 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 soware that I'm going to take months
to understand?
There are indeed a large number of soware 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 soware program when you already have everything you
need at home?
Yes, brace yourself because all you need is... Notepad (see next figure)!
6/14
11/10/2016
The Notepad soware
Strange but true: you can quite well design a website just using Notepad, the text editing soware included as default in
Windows. I have to admit that this is how I started myself a few years ago.
However, more powerful soware 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, Microso 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 oen 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.
In Windows
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.
Notepad++ website
Here is what Notepad++ looks like when you launch it (see next image).
7/14
11/10/2016
Notepad++
I suggest you follow these steps: choose the Language > H > HTML . This will tell the soware that HTML language is
about to be typed.
When you use the soware, it will color your code to allow you to identify it more easily:
8/14
11/10/2016
Colors in Notepad++
For the time being, do not worry about what all this gibberish means. I just wanted to give you an overview of what
the soware can do.
Other publishers are available in Windows. If you don't like Notepad++, you can try:
jEdit;
PSpad;
ConTEXT;
... and many others by just searching for "Text editor" on the Web.
In Mac OS X
You can try one of the following programs:
jEdit;
Smultron ;
TextWrangler.
In Linux
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 aptget and aptitude . Here are some programs
that you can test:
9/14
11/10/2016
gEdit;
Kate;
vim;
Emacs;
jEdit.
Browsers
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
Downloading browsers
There are many dierent browsers. The main ones you should know are shown in the next figure.
Browser
OS
Download
Comments
Google Chrome
Windows
Download
Google's browser, which is easy to use and very fast.
Mac
Linux
It's the browser I use on a daily basis.
Google Chrome
Mozilla Firefox
Windows
Mac
Linux
Download
The Mozilla Foundation's famous, renowned browser.

I use it frequently to test my websites.
Firefox Logo
10/14
11/10/2016
Browser
OS
Download
Comments
Internet
Windows
Download
Microso's browser, which is installed on all Windows
(Pre-installed in
Windows)
PCs.
I use it frequently to test my websites.
Windows
Mac
Download
(Pre-installed in Mac OS
X)
Apple's browser, which is installed on all Macs.
Windows
Mac
Linux
Download
The eternal outsider.

Less used but provides many features.
Explorer
IE9
Safari
Safari Logo
Opera
Opera Logo
It is advisable to install several browsers on your computer to make sure that your website works properly on each
one. In general, I recommend you test your website regularly on Google Chrome, Mozilla Firefox and Internet
Explorer at least.
Note that Safari and Google Chrome display websites in much the same way. You do not necessarily need to test
your website on both Safari and Google Chrome, although it is always safer.
In the next figure, you can see a preview of some of these main browsers on the Google homepage.
Preview of some browsers

11/14
11/10/2016
Understanding the dierences 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).
Sites like normansblog.de and caniuse.com provide an updated list of CSS features supported by the various versions of
each browser (see next figure).
List of features supported by browsers

As you can see, it's... complicated.
The biggest concern most oen 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.
There's a program called IETester in Windows which allows you to test your website in various versions of Internet
Explorer. Note that while this program is relatively unstable (it oen crashes), at least it exists.
12/14
11/10/2016
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 oen have the latest versions.
You should, however, be aware that there are dierences 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.
Touch pads are provided with the same browsers, but the screen is just wider. Thus, the iPad is provided with
Safari Mobile for example.
Summing up
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 soware which displays websites. It reads HTML and CSS languages to know what it must
display.
Lots of dierent web browsers exist: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera... Each one will
display websites slightly dirently than the others.
In this course, we will learn how to use HTML and CSS languages. We will work in a soware called a "text editor"
(Notepad++, jEdit, vim...).
Mark this chapter as unfinished
Your first web page in HTML
13/14
11/10/2016
The authors
Mathieu Nebra
Entrepreneur plein temps, auteur plein temps et co-fondateur d'OpenClassrooms :o)
Emily Reese
Emily's from New York City and lives in Paris, France. She's a web developer (formerly at Kickstarter), teacher at
OpenClassrooms, and more!
Check out this course via

Premium
Premium
eBook
PDF
OpenClassrooms
Partnerships
Learn more
Follow us
Who we are
Business
Terms of Use
OpenClassrooms blog
How our courses work Universities and schools

Jobs
Contact us
Espaol
Franais
14/14

How Do You Create Websites - Build Your Website With HTML5 and CSS3

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

How Do You Create Websites - Build Your Website With HTML5 and CSS3

Încărcat de

Drepturi de autor:

Formate disponibile

11/10/2016

Build your website with HTML5 and CSS3

How do you create websites?

Build your website with HTML5 and CSS3

How do you create websites?

How do websites work?

How do websites work?

Web browsers are programs that display websites

From HTML to the screen

HTML and CSS: two languages for creating a website

The role of HTML and CSS

With or without CSS

The various versions of HTML and CSS

The text editor

What soware am I going to need to create my website?

The Notepad soware

Google's browser, which is easy to use and very fast.

It's the browser I use on a daily basis.

The Mozilla Foundation's famous, renowned browser.

Microso's browser, which is installed on all Windows

Apple's browser, which is installed on all Macs.

The eternal outsider.

Preview of some browsers

Understanding the dierences between browsers

List of features supported by browsers

Browsers on mobile phones

Mark this chapter as unfinished

Build your website with HTML5 and CSS3

Your first web page in HTML

Check out this course via

How our courses work Universities and schools

S-ar putea să vă placă și