• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Practical exercise: step by step creation of a website

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

So finally, here we are. This chapter is somewhat special and fairly different from what you've read so far. In fact, it's a practical exercise. You can now no longer simply read my chapters half asleep, you'll have to get your hands dirty at the same time as me.

Although you've read a lot of theory so far, you're probably wondering how webmasters actually create such attractive websites. You're saying to yourself that you are still a long way from having the knowledge needed to build a whole website... Well, you're wrong!

Drafting the design

I can just imagine it. You're saying, "Great, we're going to create a complete website", so you open your text editor (Notepad++, for example), look at me and ask, "Well, what line of code do we start with?".

And there's where I have to stop you. Take a pencil and paper: you first have to think about what you want to create as a website. What's it going to talk about? Do you have a theme or aim?

I know from experience that most of you are "just trying to learn" at this stage. So you perhaps don't have any clear idea in mind. In this case, I suggest you create a website to introduce yourself and develop your online presence: this website will talk about you and will include your resume, your future projects and, why not, your blog.

As for me, I'm going, in this practical exercise, to build the website of our mascot Zozor, our famous donkey (figure below). Zozor has decided to go on a trip around the world and his first stop will be... San Francisco! He thus wants to create a website for people to know about him and follow his journey around the world.

Zozor the donkey
Zozor the donkey

The first step is to draft the design to have a goal of the website to be built. From there, there are two possibilities:

  • either you are a graphic designer (or you know one) who is used to working out designs with programs like Photoshop;

  • or you are not very creative or lack inspiration, and in this case, you are going to get your inspiration from websites like https://html5up.net/, which provide ideas for designs and can even give you the ready-made HTML/CSS code!

In my case, I referred to Jiyong Fan, a graphic designer, who suggested the design (which I like a lot!) that you can see in the figure below.

Draft design: Fan Jiyong

This draft is actually just a picture of the result we want to obtain. I asked the graphic designer to provide me with the elements that will help me build the design, in other words the color codes used, the cropped images (figure below) and the fonts I'm going to need.

Downloading the images and fonts

A few of the cropped images used in the design
A few of the cropped images used in the design
A few of the cropped images used in the design
A few of the cropped images used in the design

So all we have to do is build this website! We're going to proceed in two stages:

  1. We're going to build the page HTML outline.

  2. Then we're going to format it and do the page layout using CSS.

Come on, let's get to work!

Organizing the content in HTML

The first thing to do is to distinguish the main blocks on the mockup. These blocks will form the outline of our page.

To create the outline, we are going to use various HTML tags:

  • the HTML5 structural tags, that we know:<header>,<section>,<nav>, etc. ;

  • the general purpose<div>tag when there is no suitable structural tag.

How do I know which tag to use?

It's up to you to decide. Preferably use a tag that makes sense (such as the<header>,<section>,<nav>structural tags), but if no tag seems more appropriate to you, opt for the<div>generic tag.

Look at the figure below to see what I suggest as a structure.

Although not all the tags that we're going to use appear in this mockup, it gives you an idea of the nesting I suggest for the elements.

The HTML code is not really the complex part of building the website. In fact, if you have understood how to nest tags, you should have no trouble in writing a code similar to mine:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Zozor - Travel diaries</title>
    </head>

    <body>
        <div id="main_wrapper">
            <header>
                <div id="main_title">
                    <img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" />
                    <h1>Zozor</h1>
                    <h2>Travel diariese</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">Resume</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <div id="banner_image">
                <div id="banner_description">
                    Reflections on my holiday in the United States...
                    <a href="#" class="red_button">See article <img src="images/small_arrow.png" alt="" /></a>
                </div>
            </div>
            
            <section>
                <article>
                    <h1><img src="images/pin.png" alt="Travel category" class="ico_categorie" />I'm a great traveller</h1>
                    <p>Lorem ipsum dolor sit amet...</p>
                    <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p>
                    <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p>
                </article>
                <aside>
                    <h1>About the author</h1>
                    <img src="images/arrow.png.png" alt="" id="arrow" />
                    <p id="zozor_picture"><img src="images/images/zozor.png" alt="Zozor Picture" /></p>
                    <p>Let me introduce myself: My name's Zozor. I was born on 23 November 2005.</p>
                    <p>A bit meager, is it not? This is why I've now decided to write my biography to let my readers know who I really am.</p>
                    <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p>
                </aside>
            </section>
            
            <footer>
                <div id="tweet">
                    <h1>My last tweet</h1>
                    <p>Hee-haw!</p>
                    <p>12/05 23:12</p>
                </div>
                <div id="my_pictures">
                    <h1>My pictures</h1>
                    <p><img src="images/pic1.jpg" alt="Picture" /><img src="images/pic2.jpg" alt="Picture" /><img src="images/pic3.jpg" alt="Picture" /><img src="images/pic4.jpg" alt="Picture" /></p>
                </div>
                <div id="my_friends">
                    <h1>My friends</h1>
                    <ul>
                        <li><a href="#">Pupi the rabbit</a></li>
                        <li><a href="#">Mr Baobab</a></li>
                        <li><a href="#">Kaiwaii</a></li>
                        <li><a href="#">Perceval.eu</a></li>
                    </ul>
                    <ul>
                        <li><a href="#">Ji</a></li>
                        <li><a href="#">Super cucumber</a></li>
                        <li><a href="#">Prince</a></li>
                        <li><a href="#">Mr Fan</a></li>
                    </ul>
                </div>
            </footer>
        </div>
    </body>
</html>

Little note: as you can see, the whole content of the page is placed in one large<div>tag with amain_wrapperid. As this tag includes all the content, it will allow us to determine the page size easily and center our website on the screen.

Apart from that, there are no major problems to be pointed out. Note that I haven't necessarily thought of all the tags the first time: when designing in CSS, I find you sometimes need to include some tags of a<div>block to help you build the design.

As you might imagine, the website doesn't look too great yet (to say the least). You can see the current result in the figure below.

How the website looks when written in HTML only
How the website looks when written in HTML only

It's the CSS code that works the magic.

Formatting in CSS

Things get a bit more difficult once you reach the CSS stage. Indeed, it takes work (and sometimes a few tricks) to obtain a result similar to the mockup. I say "similar to" as you'll never obtain the same result to the nearest pixel.

You need to grasp this clearly: the aim is to obtain the closest possible result, without seeking perfection. Even if you obtain what you consider to be "perfection" in one browser, you can be sure that there'll be differences in another (older) browser or on a computer other than yours. We're thus just going to do our best and that will already involve quite some work, as you'll see.

To format the design, I'm going to proceed in several steps. I'm going to deal with the following items, in the order indicated:

  1. Custom fonts.

  2. Define the page's main styles (website width, background colour, default text colour).

  3. Header and browsing links.

  4. Banner (representing the San Francisco bridge).

  5. Main section of the page's body, in the center.

  6. Footer.

Custom fonts

For the purposes of the design, my graphic designer used three fonts on his mockup:

  • Trebuchet MS(normal font);

  • BallparkWeiner(exotic font);

  • Day Roman(exotic font).

Most computers are provided withTrebuchet MS(though not necessarily all, in which case you can download it). The other two fonts are a bit special, however, and are unlikely to be on your visitors' computers. We're going to download them.

As you know, several versions of these fonts need to be provided for different browsers.Dafontonly provides the.ttfformat for downloading. On the other hand,FontSquirrelprovides a font generator to be used in CSS3 with@font-face: you send it a.ttfand the tool converts the file into any other format needed and even provides you with the ready to use CSS code!

I used it to generate the various versions of the two exotic fonts that I'm going to use. Then, in my CSS file, I added the code provided to me byFontSquirrelto declare the new fonts:

/* Define custom fonts */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('fonts/ballpark.eot');
    src: url('fonts/ballpark.eot?#iefix') format('embedded-opentype'),
         url('fonts/ballpark.woff') format('woff'),
         url('fonts/ballpark.ttf') format('truetype'),
         url('fonts/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('fonts/dayrom.eot');
    src: url('fonts/dayrom.eot?#iefix') format('embedded-opentype'),
         url('fonts/dayrom.woff') format('woff'),
         url('fonts/dayrom.ttf') format('truetype'),
         url('fonts/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

In addition to this, you have, of course, to make available the font files. As you can see, I've created a fonts subfolder for the various versions of my fonts.

Defining the main styles

We can now define a few global styles for the whole design of our page. We're going to define a default background image, font and text color, and more especially we're going to size our page and center it on the screen.

/* Main elements of the page */

body
{
    background: url('images/yellow_background.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#main_wrapper
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

With#bloc_page, the block covers the entire page, so I set the width limits to 900 pixels. With automatic margins, the design will be centered.

I've used the CSS propertytext-transform: uppercase;(that we haven't seen before) to ensure that my titles are always written in uppercase. Indeed, this property changes the text to uppercase (it can also do the opposite withlowercase). Note that we could also have written the titles directly in uppercase in the HTML code.

The figure below shows you what you get for now with the CSS code. Although we're still a long way from the final result, it already feels a bit like we're "getting there".

The background and page limits start to appear
The background and page limits start to appear

Header and browsing links

According to the structure I've suggested, the header also contains browsing links. Let's begin by defining the header and, in particular, the logo at the top left. We'll then see how to format the browsing links.

The header
/* Header */

header
{
    background: url('images/line.png') repeat-x bottom;
}

#main_title
{
    display: inline-block;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}

#logo, header h1
{
    display: inline-block;
    margin-bottom: 0px;
}

header h2
{
    font-family: Dayrom, serif;
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

We going to make a distinction between the header and the page body with a background image. The items are positioned usinginline-blockand we're going to customize the fonts and sizes. Nothing out of the ordinary for the time being.

The browsing links

The formatting of the browsing links is a bit more interesting. As you saw, I created a bulleted list for the links... but such a list is usually displayed height-wise, not width-wise. Fortunately, it's easy to change, as you'll see:

/* Navigation */

nav
{
    display: inline-block;
    width: 740px;
    text-align: right;
}

nav ul
{
    list-style-type: none;
}

nav li
{
    display: inline-block;
    margin-right: 15px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

The main new thing is the CSS definitionlist-style-type: none;, which removes the round image used as a bullet. Each list item (<li>) is positioned as aninline-block, which allows us to place the links side by side as we wanted.

The other definitions don't contain anything out of the ordinary dimensions, colors, borders... All things you already know about. Note that I don't necessarily find the right values on the first try. Sometimes it takes some trial and error to obtain an appearance close the original mockup.

The figure below shows the result obtained using the latest CSS additions.

The header is laid out
The header is laid out

The banner

So, let's now turn to an exercise that's a little more difficult but very interesting: the banner! Our mockup has a nice banner representing the San Francisco bridge. This banner on your website may need to change. As an illustration, here's the latest blog of our friend Zozor, who's just visited San Francisco.

The banner is interesting for several reasons:

  • it has rounded edges;

  • the description is written on a slightly transparent background;

  • the "See the article" button is implemented in CSS, with rounded corners;

  • a shadow gives volume to the banner.

Here's the code I used to produce the whole banner:

/* Banner */

#banner_image
{
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    background: url('images/sanfrancisco.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

#banner_description
{
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgb(24,24,24); /* Old browsers will read this */
    background-color: rgba(24,24,24,0.8); /* New browsers will read this */
    color: white;
    font-size: 0.8em;
}

.red_button
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/red_background.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.red_button img
{
    border: 0;
}

This code is fairly technical and full of CSS features. It's perhaps the most difficult part in building this page.

You can see that I've chosen to display the image of the bridge as a background image in the banner<div>block.

I've also given it a position relative to the banner, without using properties to change the offset... Why? Normally, a relative position without an offset serves no purpose... And yet, it was particularly useful to me in placing the "See article" button at the bottom right of the banner. In fact, I've placed the button in an absolute position inside.

Shouldn't the button be located at the bottom right of the page?

No, remember what I told you: if a block is placed in an absolute position in another block which is itself in an absolute, fixed or relative position, it will then be positioned inside this block.
Our banner has a relative position (without any offset). As the button has an absolute position inside, it's thus placed at the bottom right of the banner!

This technique is particularly useful and powerful in building a design. and should be remembered!

Final detail: for the banner legend, I've chose to use transparency with theRGBanotation rather than theopacityproperty. Indeed,opacitywould have made the entire contents of the block transparent, including the "See article" button inside. I found it preferable to make only the background color transparent rather than the whole block.

The result is quite nice (figure below).

The banner is laid out
The banner is laid out

Looks great, don't you think?

The body

The body, in the center of the page, in our case consists of a single<section>tag (but there could be several tags, of course).

No real difficulties as far as the body is concerned. The "About the author" block is positioned as an in inline-block. We'll play with the rounded corners and shadows and adjust the text margins and size a bit, and here we are!

/* Body */

article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

article
{
    width: 625px;
    margin-right: 15px;
}

.cat_icon
{
    vertical-align: middle;
    margin-right: 8px;
}

article p
{
    font-size: 0.8em;
}

aside
{
    position: relative;
    width: 235px;
    background-color: #706b64;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: white;
    font-size: 0.9em;
}

#arrow
{
    position: absolute;
    top: 100px;
    left: -12px;
}

#zozor_picture
{
    text-align: center;
}

#zozor_picture img
{
    border: 1px solid #181818;
}

aside img
{
    margin-right: 5px;
}

The hard part here was to manage to place the arrow to the left of the "About the author"<aside>block to give the effect of a bubble. Again, our best friend is absolute positioning. The technique is the same: I positioned the<aside>block relatively (without inserting an offset), which then allows me to position the arrow image relative to the<aside>block (and not relative to the whole page). By adjusting the image offset, I can accurately place it where I want to the nearest pixel (figure below)!

The page body is laid out
The page body is laid out

The footer

It only remains for us to lay out the footer. It consists of three sub-blocks that I've produced by<div>to which I've assignedidto identify them better. These blocks are positioned withinline-blockside by side.

/* Footer */

footer
{
    background:  url('images/top.png') no-repeat top center, url('images/line.png') repeat-x top, url('images/shadow.png') repeat-x top;
    padding-top: 25px;
}

footer p, footer ul
{
    font-size: 0.8em;
}

footer h1
{
    font-size: 1.1em;
}

#tweet, #my_pictures, #my_friends
{
    display: inline-block;
    vertical-align: top;
}

#tweet
{
    width: 28%;
}

#my_pictures
{
    width: 35%;
}

#my_friends
{
    width: 31%;
}

#my_pictures img
{
    border: 1px solid #181818;
    margin-right: 2px;
}

#my_friends ul
{
    display: inline-block;
    vertical-align: top;
    margin-top: 0;
    width: 48%;
    list-style-image: url('images/external_link.png');
    padding-left: 2px;
}

#my_friends a
{
    text-decoration: none;
    color: #760001;
}

A couple of small points about the footer:

  • I've used CSS3' multiple background images feature to separate the body from the footer. It includes three images: the separator, the small upwards arrow and a slight graduation.

  • I've changed the bullet of the "My Friends" list at the bottom right, using thelist-style-imageproperty that allowed me use a custom image rather than the standard bullets. There are many specific CSS properties like this one and we can't look at them all one by one in this course, but now that you're used to CSS, you'll have no trouble learning how to use them simply by reading the annex listing the main CSS properties.

Our design is now completed (figure below)!

The footer is laid out
The footer is laid out

Ah, so you thought you'd finished? Unfortunately, there's still a bit of work to do: we have to test our website on various browsers. Ideally, it's best to do this at each stage in building the design. In particular, older versions of Internet Explorer (IE6 to IE8) need some attention as the result is not necessarily what was expected...

Ensuring compatibility with IE

Since Internet Explorer 9 (IE9), we really have no further reasons to complain about the legendary lag of Internet Explorer in managing CSS. See the result for yourself (figure below). It's very good in this browser and doesn't need any adjustment.

The website in IE9: no problems to report!
The website in IE9: no problems to report!

Seeing the result in older versions of Internet Explorer might, however, give you a few grey hairs.

How can I see what the results would be like in IE6 to IE8 if I have IE9?

I told you about IETester which is a practical, if unstable, tool (it crashes often). You can try it out to test your website in older versions of IE.

There is, however, a more stable, faster solution: press the F12 key on your keyboard when you're in IE9 and a web developer bar appears. There, a menu allows you to change IE's behaviour (figure below) to simulate older versions (from IE7 onwards).

Changing the rendering engine in IE
Changing the rendering engine in IE

This is often a pretty scary experience.
The figure below shows you what you get in "IE7 mode".

The website in IE7: nothing is displayed properly!
The website in IE7: nothing is displayed properly!

Before you pack your suitcase and go and live in Timbuktu away from this cruel world, let me cheer you up with this reassuring sentence: there's a solution to every problem (repeat this as many times as necessary).

In fact, our website only ran into two main problems in older versions of IE:

  • inline-blockpositioning is not well handled in IE6 and IE7, with the result that most of our positioning tags don't work for the time being... However, we've seen a workaround that can solve this problem without too much effort!

  • HTML5 structural tags (<header>,<nav>,<aside>etc.) are not well handled in IE6, IE7 and IE8, which makes for serious display problems... But, there again, this problem can be solved by adding a small script at the beginning of your HTML code!

On the other hand, you'll have to forget about certain newer features of CSS3 that are not supported in these old versions:

  • rounded corners;

  • multiple background images;

  • transparency;

  • shadows.

As these are appearance-related features, we won't attempt to get them to work in older versions of IE. If you are really keen to do so, however, I can tell you that, once again, scripts are available that can emulate most of these missing features, but this will require quite a lot of extra work and your website may work slower in these browsers. As long as the website remains readable in older versions of IE, I recommend that you don't worry too much about these problems.

Running HTML5 structural tags

As we have seen, just adding a simple snippet of JavaScript code in the website header is enough (lines 6 to 8):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Zozor - Travel diaries</title>
    </head>

Adjusting the inline-block position

To manage theinline-blockposition, we saw a special style sheet had to be created for older versions of Internet Explorer. Slightly different CSS has to be used to ensure that these older versions of IE "understand" what to do.

By creating a special style sheet for older versions of IE (that you could callstyle_ie.css) and using the technique below, you can reproduce the behaviour ofinline-blocktags:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="style_ie.css" />
        <![endif]-->

        <title>Zozor - The Web Site</title>
    </head>

Thestyle_ie.cssstylesheet will contain statements like this:

element
{
    display: inline;
    zoom: 1;
}

This technique should be applied to each item positioned usinginline-block.

Checking the validity

W3C provides a tool called the "Validator" on its website.
The validator is a type of program that analyzes your source code and tells you whether it's correctly written or contains errors you need to fix.

Remember: W3C set up standards that have to be complied with to make sure that all websites speak the same "language".

There's an HTML validator and a CSS validator to (to be included in your favourites!). The CSS validator has a few bugs (it flags some perfectly valid CSS sheets as invalid) that we're not going to dwell on here. The HTML validator, however, is going to be very useful to us: here's its address http://validator.w3.org.

You can validate your web page in three different ways, which is why there are three tabs:

  • address (URL);

  • send the file.html;

  • copy and paste the HTML code.

Our website is not yet available on the web as it doesn't have a URL address. The best way is thus to send the.htmlfile we wrote or copy and paste the HTML code directly.

If you send your HTML code and everything goes well, the validator will reply with the message shown in the figure below.

The W3C validator has informed us that our page does not have any errors
The W3C validator has informed us that our page does not have any errors

In this case, this means that all is well and that you have built your page well!

Unfortunately, you often have errors. In this case, don't panic like this:

HELPPPP! My web page isn't valid, I'm not going to manage, there are errors all over the place, do something, help meeee!

You had a nice web page, it displayed well, it was pleasing to the eye, and yet the validator sends you a worrying message in red telling you that your web page is not built correctly.

First of all, get this firmly into your head: just because your web page displays correctly doesn't mean that it doesn't have errors. Your web page can be very stylish and still have a lot of errors.

What's the point of correcting them then?

The thing is that browsers "try" not to display errors, when they encounter them, so as not to disturb the user. But nothing says that other browsers won't behave strangely!

Having a valid web page thus allows you to rest easy knowing that you've done things properly. This simplifies the work of the programs that read web pages.
In addition, and this has been proven, a correctly built web page is more likely to be better positioned in Google's search results and this will bring you... more visitors!

Here's a list of tips that can help you troubleshoot errors that may be reported sooner or later:

  • All your texts should generally be in paragraph tags. You're not allowed to put text directly between<body></body>tags without having surrounded them with the famous<p></p>tags. This also applies to<br />line returns that must be within paragraphs. It's a very common mistake among beginners.

<p>This text is properly placed in a paragraph.
<br />
Don't forget that  <br /> tags must be within a paragraph</p>

This text is outside a paragraph. It's not allowed.
<br />
  • All your images must have a alt attribute specifying what the image contains. If, by chance, your image is purely decorative (you can't find a description of it), you're allowed to put nothing as the value for the alt attribute.

<!-- The image contains a description -->
<img src="picture.jpg" alt="My picture" />

<!-- The image has no description but still has an alt attribute -->
<img src="deco.png" alt="" />
  • Your tags must be closed in the right order.

<!-- The tags are not closed in the order they were opened -->
<p>Important <em>text</p></em>

<!-- The tags are closed in the order they were opened-->
<p>Important <em>text</em></p>

Keep this scheme in mind as many beginners make this mistake.

  • If your links have&, you have to replace them by the&code to avoid browser confusion.

<!-- Example of an incorrect link in HTML -->
<a href="http://www.site.com/?day=15&month=10&year=2000">

<!-- Example of a correct link in HTML -->
<a href="http://www.site.com/?day=15&amp;month=10&amp;year=2000">
  • Finally, make sure that you haven't used old and now obsolete tags in HTML5 (such as the old<frame>tag, or the<marquee>tag, etc.)

The validator will tell you "Element XXX undefined" (tag unknown) and "There is no attribute XXX" (attribute unknown).

Everyone makes mistakes, so don't panic. Correct your web page step by step your until the validator displays a correct result in green.

The final code

I've provided the final code of the web page we've built. You can also view the result (figure below) online through a web code.

Website final appearance. Try it!

You can also download a ZIP file containing all the files of the website to test it at home:

Download the website files (500 KB)

Exemple de certificat de réussite
Exemple de certificat de réussite