Trang chủ‎ > ‎IT‎ > ‎WEB PROGRAMMING‎ > ‎01 - HTML‎ > ‎

Tutorial - Building website using HTML5 and CSS3 - Deploy

Sending your website onto the Web

Your website really neat, clean and ready... but as it's on your hard drive, no one else is going to be able to enjoy it!

So you'd like to send it onto the Web, but... you don't know how.
In this annex, we're going to find out about everything you need to know to send you website onto the Web:

  1. How do you reserve a domain name?

  2. What is a hosting provider and how does it work?

  3. Finally, how do you use an FTP client to transfer files on the Net?

Domain name

Do you know what a domain name is?
In fact it's an address on the Web: google.com is a domain name, for example.

The domain name comprises two parts: google.com.

  • In red, the domain name itself. It's a name that you can usually choose freely, as long as no one has already reserved it before. It can contain letters and numbers.

  • In blue, the extension (also called "TLD" meaning Top-Level Domain). There is roughly one extension for each country (.es for Spain, .fr for France, .be for Belgium, .ca for Canada, etc.). However, there are also extensions used internationally such as .com.net and .org. They were originally reserved for commercial websites, organizations, etc. but anybody has been able to reserve them for a long time now. And anyway, .com is probably the extension most widely used on the Web.

A website address is usually preceded by www, as in www.google.com, for example. This is not part of the domain name: in fact, www is what is called a sub-domain, and you can in theory create as many as you want as long as you are the owner of the domain name.
www has been adopted by all webmasters, and is a sort of convention, even though it is not at all mandatory.

Reserving a domain name

I also want a domain name for my website! What should I do?

Well, I've got some good news and some bad news. As usual, we're going to start with the bad news:

  • the bad news is that: it's not free…

  • the good news is that: ... it's not really very expensive at all.

Indeed, a domain name costs between 7 and 12 euros a year.
The price can vary according to the extension. For instance, the extension .info is generally offered at a lower price and can prove to be an attractive alternative. But if you want a more "common" address, you would go more for an extension of the .comtype.

To reserve a domain name, there are two solutions:

  • Go through a specialized registrar. This is an organization that acts as a bridge between ICANN (the organization that manages all domain names at international level) and yourself. GoDaddy, Tucows and Register are well-known registrars.

  • Better still: you can order the domain name along with your hosting provider (this is what I recommend). In this way, you kill two birds with one stone, as in any case you're going to need a hosting provider and a domain name.

In this chapter, we're going to see how to order a domain name along with the hosting provider, as this is by far the most simple and least expensive for you.

Hosting provider

Let's now turn to the hosting provider.

What is a hosting provider and why do I need one?

All websites on the Internet are stored on individual computers called servers (figure below). These are generally very powerful computers, which stay running the whole time. They contain website pages and provide Internet users with them on demand, at any time of day or night.

A serverA server

A server does not have a screen as it runs most of the time by itself without the need to do anything on it. As you can see, servers are very flat: they are packaged in a special server format (called "1U"). This allows them to be stacked in racks, in other words, a sort of air conditioned cabinet for servers (figure below).

A server rackA server rack

As you can see, there's only one screen for the whole rack. This is sufficient as the screen is only connected to a server when it has a problem. The server fortunately works most of the time without flinching.

The hosting provider's role

The hosting provider is a company that is responsible for managing server racks. It ensures that servers work properly round-the-clock, seven days a week. Indeed, if one server fails, all the websites running on it become inaccessible (and that makes for unhappy customers).

These racks are located in specific places called datacenters (figure below). Datacenters can thus be thought of as "server warehouses" and access to them is highly protected.

A datacenter, containing several server racksA datacenter, containing several server racks

In theory, you can also host a website on your own computer. This is complex, however: you'd need some knowledge of Linux, the computer would have to be fairly powerful and run day and night and... above all... a very high speed connection would be required (especially for uploading, as the speed at which files are sent is crucial). Individuals don't usually have a connection powerful enough to host websites, unlike datacenters which are optical fibre wired (which allows speeds of several Gbps to be reached!)

In short, managing a server yourself is complex and individuals and businesses mostly rely on a professional hosting provider.

Finding a hosting provider

Unlike registrars, there are a lot of hosting providers. There are all kinds of them at all price ranges. To pick your way through the solutions they offer, you need to be aware of the terminology used:

    • Shared hosting: if you opt for a shared hosting solution, your website will be placed on a server managing several websites at once (maybe a hundred or more). This is the cheapest solution and the one I recommend you go for if you are starting your website.

    • Virtual dedicated hosting: this time, the server doesn't handle many websites (typically less than ten). This solution is generally suitable for websites that are, on the one hand, no longer suitable for shared hosting as they generate too much traffic (too many visitors), and on the other run by an owner who cannot afford a dedicated hosting solution (see below).

    • Dedicated Hosting (also known as "dedicated server"): this is the be-all and end-all solution. The server only handles your website and no other one. Note that this is quite expensive and it's advisable to have knowledge of Linux to administer the server remotely.

For example, Wikipedia itself uses a dedicated hosting provider as it has a lot of traffic.

But where can I find a web host?

Oh, this is very simple.
A Google search for "web host" will come up with several millions hits. You'll be spoiled for choice.

If I can give you some advice, I recommend you take a look at the PlanetHoster web host, which provides quality hosting services. They also grant discounts for all readers of this course!

If the PlanetHoster solutions do not suit you, have a look at the 1&1 or the MavenHosting web hosts, which provide other solutions for individuals and businesses.
Although the remainder of this chapter describes how to host your website on PlanetHoster, it works virtually the same way with 1&1 and Mavenhosting.

So let's come back to PlanetHoster. This web host has several shared hosting solutions, as shown in the figure below.

PlanetHoster hosting

PlanetHoster gives special discounts on all its shared hosting for readers of this book:

  • 5% discount for the "Essential" plan;

  • 15% discount for the "Performance" and "Unlimited" plans.

These discounts are valid if you enter a promotional code (I'll go into more detail about this a bit later on) for a yearly annual order of one of these plans:

  • Essential plan: 10 GB disk space, 250 GB traffic, a domain name and an unlimited number of e-mail accounts;

  • Performance plan: 50 GB disk space, unlimited traffic, a domain name and unlimited e-mail accounts;

  • Unlimited plan: disk space, traffic and an unlimited number of e-mail accounts as well as a domain name.

These solutions are actually very similar and only differ in their storage space and traffic.

But what do they mean by "traffic"?

Traffic is the quantity of data sent per month to your website visitors. For example, if you have a 1 MB image on your website and it's loaded 500 times during the month by your visitors, then you create 500 MB worth of traffic.
In practice, it should be noted that visitors' browsers usually place images in cache, thereby avoiding them having to reload the same image several times. This also reduces the necessary traffic.
If you have a lot of visitors (and therefore high traffic), you should choose a plan that allows more traffic.

Order a hosting solution for your website

Clicking any "Add to cart" button takes you to the page shown in the figure below.

Planet Hoster order form

Planet Hoster order form

There are three items of information:

  • Choose a product: indicates the plan you've chosen. You can change this directly via this insert;

  • Domain name: this section allows you to choose your website's domain name. We'll come back to this.

  • Order summary: as its name suggests, this box summarizes your order with the chosen plan and the price to be paid.

The text field under Domain name prompts you to enter... your domain name. The PlanetHoster website will then check whether the domain is available. If it is, you can then go to the next step.
Otherwise, you have to choose another domain name as the domain is already taken, and you can't do much about it.
The website then asks whether you want it to save this domain or whether you want to save it separately (figure below).

PlanetHoster tells you if the domain name is already registered

PlanetHoster tells you if the domain name is already registered

Web hosts usually charge for a "real" domain name (.com, .net, .org...). However, if you buy a year's hosting services from PlanetHoster, the domain name is provided for free (it's included in the hosting service).

All that's left for you to do is enter your personal details and complete the purchase by credit card or Paypal.
Once you have completed the formalities and payment, you're redirected to PlanetHoster, which confirms that your order has been registered. A little later on, you should receive an e-mail with all the information needed to set up your website. Keep this information in a safe place as you'll need it later.
Once you have received by email your login information for connecting to your hosting server, you can go on to the next step: send your website to your hosting server

Using an FTP client

Installing an FTP client

FTP stands for File Transfer Protocol and, put simply, is the way we use to send our files.
Software is available for using FTP to transfer your files over the Internet.

There are, of course, hundreds of free and pay for FTP programs.
To ensure that we are on the same page, I'll suggest the one I use, which is free: FileZilla (figure below).

The icon of the well known FileZilla FTP clientThe icon of the well known FileZilla FTP client

This program has nothing to do with Mozilla, other than it also ends with "zilla". Don't think that I'm forcing you to use programs from the same publisher. This is just not true. Furthermore, you can use any other FTP program if you like. It doesn't bother me.

Anyway, I'm going to show you the procedure with FileZilla. And the first step is of course to download it!

Download FileZilla

Take the version corresponding to your operating system (Windows, Mac OS X or Linux).

I'll trust you to install it. It's very simple and you shouldn't have any problems.
Run the software and you should see something that looks like the figure below.

FileZillaFileZilla

At first sight, it seems a bit complicated (at first sight only). In fact, its principle is very straightforward.
There are four main fields to consider in the window:

  1. At the top, you'll see the messages the program sends and receives. If you're lucky, the server will even say hello to you (really, I'm not kidding). In general, this field doesn't really matter, unless there are error messages in red...

  2. Your hard drive is shown on the left. Your folders are shown at the top and the list of the files in the current folder are shown at the bottom.

  3. The list of files uploaded to the remote site is shown on the right. For the time being, nothing is shown as we're not connected, but this will come, don't worry.

  4. Finally, at the bottom, you'll see the files being sent (and the percentage sent).

The first step will be to connect to your hosting server.

Configuring the FTP client

Whatever hosting service you choose, it always works the same way. We're going to provide you with three items of information, which are essential for FileZilla to be able to connect to server:

  • IP: this is the server's "address". You'll mostly be given information on the type ftp.myhost.com, but it may also be a series of numbers such as 122.65.203.27.

  • Login: this is your user name, which you've probably been asked to choose. You may have entered your alias, or your website's name. My login could for example be mateo21.

  • Password: either you've been asked to choose a password, or (what's more likely) you've been automatically assigned one (something unpronounceable like crf45u7h).

If you have these three items of information, you'll be able to continue.
If you haven't, you'll have to look for them as they're essential. You were probably sent them by e-mail. If not, feel free to ask your web host for them (IP, login and password).

Now that we have this information, we're going to give them to FileZilla, which needs them to connect to the server.

Click the small icon at the top left (not the small arrow on the right, but the actual image), as shown in the figure below.

The FileZilla connection iconThe FileZilla connection icon

A window opens. Click New site and give it any name you want ("My super website", for example). On the right, you'll need to specify the three items of information I just mentioned, as in the figure below.

Adding a new website in FileZillaAdding a new website in FileZilla

The web host is shown at the top (this is where you have to specify ftp.myhost.com, for example). Check Authentication type:Normal to allow you to enter your login and password.

Click Connection and you're (almost) done.

Transferring files

At this point, there are two possibilities:

  • Either the connection was successful: you'll then see a green message such as "Connected" at the top. In this case, the right field of the FileZilla window should be activated and you'll see the files that are already on the server (there may well be a few already).

  • Or it has crashed, in which case you'll have plenty of messages in red, in which case... there are no two ways about it: you've made a mistake entering the IP, the login or the password. One of these items is incorrect, so make sure to ask them from your web host again, if necessary, as if they are correct then it must work.

If the connection is successful, then what you have to do is very easy: on the left side, look to see where your .html and .css files (as well as where your .jpg.png and .gif images, etc.) are located on your hard disk.
On the left, double-click the file you want to transfer. After a few seconds, it will appear on the right, meaning that it has been properly uploaded to the server, and is thus accessible on the Internet!

You can send any file type. Of course, we usually send .php.html.css files and images, but you can just as well send .pdf files, programs, .zip files, etc.

The figure below, for example, shows the result obtained after transferring an index.html file and a few other files.

Files are hosted on the FTP serverFiles are hosted on the FTP server

This appears on the right, meaning that it's now available on the server.

Please note that your home page must be called index.html. This is the page that will be loaded when a new visitor arrives on your website.

You can also transfer whole folders in one go: just drag and drop the folder from the left side (or directly from the your operating system's window) onto the right side of the FileZilla window.

Once configured, you can see that sending files is very straightforward.

Summing up

  • For the time being, your website can only be seen by yourself on your computer. You have to upload it to the Web for it to be able to be seen by everyone.

  • You need two things:

    • A domain name: this is your website's address. You can reserve an address as a .com.fr or .net domain. For example: google.com.

    • A web host: will store your website on a computer called a "server". Its job will be to submit your website to your visitors at any time of the day or night.

  • To transfer files from your website to your web host server, you have to use an FTP client such as FileZilla.

  • To connect to the server, you need three things: the server's IP address (or its host name), your login and your password. These are provided to you by your web host.

Memento of HTML tags

This page provides a non-exhaustive list of existing HTML tags. It does, however, contain a large number of HTML tags. Although we've already seen some during the course, there are others that we haven't had the opportunity to examen yet. The tags we haven't looked at yet are in general not used very often. However, you may well find what you need in this new set of tags.

You can use this annex as a checklist when you develop your website.

I would stress, however that: this annex is intentionally not all inclusive. I prefer to include fewer tags and only keep those that seem most useful in practice.

Memento

First level tags

First level tags are the main tags used to structure an HTML page. They are essential to producing the "minimum code" for a web page.

Tag

Description

<html>

Main tag

<head>

Page header

<body>

Page body

Minimum code for an HTML page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
</body>
</html>

Header tags

These tags are all located in the web page header, in other words between <head>and </head>:

Tag

Description

<link />

Link with a style sheet

<meta />

Web page metadata (charset, keywords, etc.).

<script>

JavaScript code

<style>

CSS code

<title>

Page title

Text structuring tags

Tag

Description

<abbr>

Abbreviation

<blockquote>

Quotation (long)

<cite>

Quote the title of a work or an event

<q>

Quotation (short)

<sup>

Exponent

<sub>

Index

<strong>

Strong highlighting

<em>

Normal highlighting

<mark>

Visual highlighting

<h1>

Level 1 title

<h2>

Level 2 title

<h3>

Level 3 title

<h4>

Level 4 title

<h5>

Level 5 title

<h6>

Level 6 title

<img />

Image

<figure>

Figure (image, code, etc.)

<figcaption>

Figure description

<audio>

Sound

<video>

Video

<source>

Source format for tags <audio> and <video>

<a>

Hypertext link

<br />

Line feed

<p>

Paragraph

<hr />

Horizontal separation line

<address>

Contact address

<del>

Deleted text

<ins>

Inserted text

<dfn>

Definition

<kbd>

Keyboard entry

<pre>

Formatted display (for source codes)

<progress>

Progress bar

<time>

Date or time

List tags

This section lists all the HTML tags used to create lists (bulleted lists, numbered lists, definition lists, etc.)

Tag

Description

<ul>

Unordered bullet lists

<ol>

Numbered List

<li>

Bulleted list item

<dl>

List of definitions

<dt>

Term to be defined

<dd>

Term definition

Table tags

Tag

Description

<table>

Table

<caption>

Table title

<tr>

Table row

<th>

Header cell

<td>

Cell

<thead>

Table header section

<tbody>

Table body section

<tfoot>

Table footer section

Form tags

Tag

Description

<form>

Form

<fieldset>

Field group

<legend>

Field group title

<label>

Field description

<input />

Form field (text, password, checkbox, button, etc.).

<textarea>

Multi-line entry field

<select>

Drop-down list

<option>

Drop-down list item

<optgroup>

Item group in a drop-down box

Section tags

These tags are used to build the outline of our website.

Tag

Description

<header>

Header

<nav>

Main browsing links

<footer>

Page footer

<section>

Page section

<article>

Article (independent content)

<aside>

Additional information

Generic tags

Generic tags are tags that have no semantic meaning.

Indeed, all other HTML tags have a meaning<p> means "Paragraph", <h2> means "Subtitle", etc.
You sometimes need to use generic tags (also called general purpose tags) as none of the other tags are appropriate. You most often use generic tags to build your design.

There are two generic tags: inline and block.

Tag

Description

<span>

Inline generic tag

<div>

Block generic tag

These tags are only useful if you associate them with a classid or style attribute:

  • class: specifies the name of the CSS class to be used.

  • id: gives the tag a name. This name must be unique throughout the page as it identifies the tag. You can use the ID for many things, for example to create a link to an anchor, for an ID type CSS style, for operations in JavaScript, etc.

  • style: this attribute allows you to directly specify the CSS code to be applied. You're not required to have a separate style sheet, you can include the CSS attributes directly. Note that it's preferable to use an external style sheet rather than this attribute as it makes your website easier to update later on.

These three attributes are not restricted to generic tags: you can use them with no problem in most other tags.

Memento of CSS properties

This page provides a non-exhaustive list of the CSS properties available in CSS3. Although, for the most part, we've seen these properties during the course, there are a few new ones that we haven't addressed.

The list is not exhaustive as my aim is not to draw up a list of all the CSS properties that may exist: there are really too many of them (more than two hundred!) and some are very rarely used.

Memento

Text formatting properties

I'll summarize here most of the text formatting properties.

What is text formatting? It's everything that concerns the presentation of the text itself: bold, italics, underline, font, alignment, etc.

Property

Values (examples)

Description

font-family

police1, police2, police3, serif, sans-serif, monospace

Font name

@font-face

Font source and name

Custom font

font-size

1.3em, 16px, 120%...

Text size

font-weight

bold, normal

Bold

font-style

italic, oblique, normal

Italic

text-decoration

underline, overline, line-through, blink, none

Underline, overline, strikethrough or blinking

font-variant

small-caps, normal

Small caps

text-transform

capitalize, lowercase, uppercase

Capitals

font

-

Font super property Combine: font-weightfont-stylefont-sizefont-variantfont-family.

text-align

left, center, right, justify

Horizontal alignment

vertical-align

baseline, middle, sub, super, top, bottom

Vertical alignment (table cells or inline-block items only)

line-height

18px, 120%, normal...

Line height

text-indent

25px

Subparagraph

white-space

pre, nowrap, normal

Hyphenation

word-wrap

break-word, normal

Forced hyphenation

text-shadow

5px 5px 2px blue
(horizontal, vertical, fade, color)

Text shadow

Color and background properties

Property

Values (examples)

Description

color

name, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Text color

background-color

Same as color

Background color

background-image

url('image.png')

Background image

background-attachment

fixed, scroll

Fixed background

background-repeat

repeat-x, repeat-y, no-repeat, repeat

Background repetition

background-position

(x y), top, center, bottom, left, right

Background position

background

-

Background super property. Combine: background-imagebackground-repeatbackground-attachmentbackground-position

opacity

0.5

Transparency

Box properties

Property

Values (examples)

Description

width

150px, 80%...

Width

height

150px, 80%...

Height

min-width

150px, 80%...

Minimum width

max-width

150px, 80%...

Maximum width

min-height

150px, 80%...

Minimum height

max-height

150px, 80%...

Maximum height

margin-top

23px

Top margin

margin-left

23px

Left margin

margin-right

23px

Right margin

margin-bottom

23px

Bottom margin

margin

23px 5px 23px 5px
(top, right, bottom, left)

Margin super property. 
Combine: margin-topmargin-rightmargin-bottommargin-left.

padding-left

23px

Inner margin on the left

padding-right

23px

Inner margin on the right

padding-bottom

23px

Inner margin at the bottom

padding-top

23px

Inner margin at the top

padding

23px 5px 23px 5px
(top, right, bottom, left)

Inner margin super property. 
Combine: padding-toppadding-rightpadding-bottompadding-left.

border-width

3px

Border width

border-color

name, rgb (red, green, blue), rgba (red, green, blue, transparency), #CF1A20, etc.

Border color

border-style

solid, dotted, dashed, double, groove, ridge, inset, outset

Border type

border

3px solid black

Border super property. Combine border-widthborder-colorborder-style.
Also available for the following versions border-topborder-rightborder-bottomborder-left.

border-radius

5px

Rounded border

box-shadow

6px 6px 0px black
(horizontal, vertical, fade, color)

Box shadow

Display positioning properties

Property

Values (examples)

Description

display

block, inline, inline-block, table, table-cell, none...

Item type (blockinlineinline-blocknone…)

visibility

visible, hidden

Visibility

clip

rect (0px, 60px, 30px, 0px)
rect (top, right, bottom, left)

Display of a portion of the item

overflow

auto, scroll, visible, hidden

Behaviour in case of overflow

float

left, right, none

Floating

clear

left, right, both, none

Stop a floating

position

relative, absolute, static

Positioning

top

20px

Position relative to the top

bottom

20px

Position relative to the bottom

left

20px

Position relative to the left

right

20px

Position relative to the right

z-index

10

Display order if overlap. 
The highest value is displayed above the others.

List properties

Property

Values (examples)

Description

list-style-type

disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none

List type

list-style-position

inside, outside

Indent position

list-style-image

url('puce.png')

Custom bullet

list-style

-

List super property. Combine list-style-typelist-style-positionlist-style-image.

Table properties

Property

Values (examples)

Description

border-collapse

collapse, separate

Merge borders

empty-cells

hide, show

Display blank cells

caption-side

bottom, top

Table title position

Other properties

Property

Values (example)

Description

cursor

crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto...

Mouse cursor

Managing the compatibility between browsers

Here's the scenario: you're working hard on the design of your website. You're spend time on it, taking care over it and in the end you're quite pleased with yourself. You have a friend test the website and, there, he replies: "I have to say that it doesn't look that great".

Either you and your friend have completely different tastes, or the website looks nice at your end, but not at his end. Indeed, browsers don't have exactly the same rendering, even if they try to follow the same HTML and CSS rules. The older the browser, the more likely it will be that it won't understand the features you're using.

Rather than panic, you can, in this chapter, find out about a few ways to learn how to manage these differences between browsers... and obtain the best possible results regardless of the browser.

Conditional comments

It's often the older versions of Internet Explorer that will cause you problems. As some of them are still in use, you have to learn how to deal with them.

Conditional comments syntax

Fortunately, there's a very convenient way of adapting your code to older versions of Internet Explorer. Through conditional comments, you can ensure that a portion of your HTML code is only read by certain versions of IE. These are HTML comments that have a rather special form and will only be read by IE.

<!--[if IE]>
HTML code reserved for IE
<![endif]-->

The set forms an HTML comment and starts with <!-- and ends with -->. Browers thus ignore this code located inside… except IE, which interprets it as a [if IE] condition meaning "If it's Internet Explorer".

The advantage is that this technique allows you to target various versions of Internet Explorer. For example:

<!--[if IE8]>

… will only target Internet Explorer 8.

The following symbols can be used to target a set of versions:

  • lt: less than;

  • lte: less than or equal to;

  • gt: greater than;

  • gte: greater than or equal to.

Thus:

<!--[if lte IE8]>

… means "All versions of Internet Explorer less than or equal to IE8" (in other words, IE8, IE7, IE6…).
On the other hand, browsers other than Internet Explorer can be targeted using the following syntax:

<!--[if !IE]><!-->
HTML code for various other browsers
<!--<![endif]-->

Although the syntax looks a bit complex, the workaround is well designed. If you look closely, there are two comment tags. As the HTML code is located outside the comment tags, it will be read by all browsers... except IE, which reads the comments asking it not to read the HTML following on.

Usefulness of conditional comments

What are conditional comments used for?

You can use conditional comments to display a message intended for older versions of Internet Explorer: "Caution, you are browsing with a very old browser, please update it...".

It is primarily used, however, to load special style sheets for IE:

<!--[if lte IE8]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->

The style_ie.css style sheet will, in this case, be read only by versions of IE not higher than IE8. You can "adapt" the CSS code inside to ensure that the website is displayed as well as it can be on these browsers. It's up to you to change the size of items, if necessary, or use other more suitable positioning methods, etc.

However, as there are several versions of Internet Explorer in circulation (IE6, IE7, IE8, IE9, etc.), one style sheet is not enough. You will sometimes want to make a change only for IE6 and IE7, other times only for IE6, and occasionally for IE8 and IE9... The only solution is to create a style sheet for each version. But this will make for a lot of .cssfiles to be managed.

The solution now commonly used by experienced webmasters is to assign a class name to the <body> tag encompassing the page body. The class name will indicate the name of the IE version corresponding to the browser, in the .css file. In this case, just one CSS file is enough. For example, if you write:

<body class="ie8">

... IE8 will be specified as the browser in the CSS file. We can enter the following in the CSS file:

.ie8 nav
{
/* Change the style of the nav tag for IE8 */
}

With conditional comments, you can write several versions of the <body> tag according to the browser:

<!--[if IE6]><body class="ie6 old_ie"><![endif]-->
<!--[if IE7]><body class="ie7 old_ie"><![endif]-->
<!--[if IE8]><body class="ie8"><![endif]-->
<!--[if IE9]><body class="ie9"><![endif]-->
<!--[if !IE]><!--><body><!--<![endif]-->

We can give several class names to a tag, separated by a space as shown here. Thus, if the browser is IE6, the <body> tag will have the two classes: ie6 and code data-claire-semantic="html">old_ie. The old_ie class thus targets IE6 and IE7 simultaneously.

CSS hacks

"Hacks" are workarounds to allow CSS properties to be read by certain versions of Internet Explorer only. The principle is the same as for conditional comments, but is less "above board": hacks are based on errors in these browsers, caused by them reading CSS properties when they should not.

The use of hacks is generally not recommended as it's based on browser bugs. There's no guarantee that they will work in the future.

Here's one of the best known hacks:

balise
{
margin: 15px; /* For other browsers */
ma\rgin: 20px; /* For IE6 and IE7 */
}

A bug in IE6 and IE7 makes them read the second property. Normally, the backslash (\) in the middle of the property name makes it invalid, but these browsers ignore the backslash and read the property as if everything was normal.

Other hacks exist including, for example:

balise
{
margin: 15px; /* For other browsers */
*margin: 20px; /* For IE6 and IE7 */
_margin: 20px; /* For IE6 */
}

An asterisk before the property name makes all browsers, except IE6 and IE7, ignore the line. Similarly, including an underscore (_) causes the line to be ignored by all browsers, except IE6.

Debugging tools

Your page is sometimes not displayed as you want it to be, even in a newer browser. In this case, you have to look for the error you've made. While several techniques are available, I'll just show you the ones I use most often.

Using the background color to mark items

The simplest technique for debugging is simply... to give a background color to an item that's not behaving the way you want it to (for example, a menu which is wrongly positioned). So it's as simple as that:

nav
{
background-color: blue;
}

This very showy background color is temporary: you use it just to see where your item is "positioned". This often allows you to understand what's happening in your page.

If this technique's not enough, however, we have to bring out the big guns: a debugging tool.

Debugging tools

These are very powerful (and quite impressive) tools that let you interact with the web page directly in the browser. Most current browsers are provided with these tools, specially designed for the web developers that we are:

  • Google Chrome: go to the menu Adjustable wrench > Tools > Debugging tools (figure below). You can also right-click an item in your page, then click Inspect the item.

  • Mozilla Firefox: install the extension Firebug. A button will appear at the top or bottom right of the window (depending on the browser version) to open the debugging pane.

  • Internet Explorer: go to the menu Cog wheel > Development tools (available from IE8 and higher).

  • Opera: you can run its very powerful Dragonfly debugging tool by pressing Ctrl + Shift + I. You can also right-click an item in your page, then click Inspect the item.

In Google Chrome, Mozilla Firefox and Internet Explorer, you can open the debugging pane by pressing the F12 key on your keyboard. In Google Chrome and Firefox, you can also press the Ctrl + Shift + I keys to open the debugging pane.

Google Chrome debugging tool (at the bottom of the browser)Google Chrome debugging tool (at the bottom of the browser)

There are several ways to use these tools. You can examine the hierarchy of your tags by displaying the source code (at the bottom left in the figure below) and edit your page's code in real time: double-click on a text or on a tag to be edited, and you'll see the result change in the browser window as you go! A word of caution, however: your changes are not saved, as you're only doing a simple test to understand the browser's behavior.

The list of CSS properties that apply to the currently selected item in the source code at shown at the bottom right. You can add to, remove or change its properties, etc. All the changes are applied immediately. Note that the CSS properties that are overwritten by other properties are struck through or grayed out: this allows you to understand how your style sheet behaves.

Finally, to directly target an item in your page, you can right-click on the item to be analyzed, and then click Inspect the item. The debugging toolbar also provides a button to target an item (a magnifying glass in Google Chrome, a cursor in IE, etc.).

These tools provide many other more advanced features that, rather than going into here, I'll leave you to discover for yourself: page loading time analysis, JavaScript debugging... You should know, however, that they're mainly used for debugging HTML and CSS code.

This course stops here! Think of consulting all the appendices if you haven't done it yet, you will discover new leads to keep up your learning of HTML and CSS!

Comments