There’s no need to worry : we’ll temporarily transform your computer into a server so that you can work on your dynamic site. You’ll finally be able to start programming after this chapter !

Which programs do we need ?

Depending on if we’re making static or dynamic sites we need different programs. In fact, when we’re creating dynamic sites we need a few more programs !

For a static site

Web designers that create static sites are lucky, in general they already have all the programs they need :

• 

  A text editor : in theory a program such as Notepad that’s pre-installed on Windows is enough, although it is recommended that you use a more advanced tool such as Notepad ++ or Dreamweaver. We’ll talk about the choice of editor at the end of this chapter.

• A web browser : allows you to test your web pages. You can use for example Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, or any other browser you use for surfing the web. It is recommended to regularly test your sites on different browsers.

However, if you’re working on a dynamic site, these programs aren’t enough. It is necessary to install extra programs.

For a dynamic site

So that your computer can read PHP, it needs to act like a server. Don’t worry, you don’t need to buy a special machine for this : you simply need to install the same programs that are installed on the servers that deliver content on the internet.

What are these programs that we need ?

• 

  Apache : is what we call a web server. This is the most important program because it delivers the pages to the clients. However, Apache can only handle static web pages (it can only read HTML code). It therefore needs other programs to work with it.

• PHP : is an Apache plugin that allows it to handle dynamic web pages in PHP. By combining Apache and PHP your computer will already be able to read PHP web pages.

• MySQL : is the database management system I talked about in the introduction. It saves the data in an organised manner (such as the list of members on your site). We won’t need it immediately, but we’ll install straight away.

All these programs that will help us create dynamic sites are free. There are others (that sometimes cost money), but the Apache + PHP + MySQL combination is the most popular on web servers. It’s so popular that “packs” have been created which contain all these programs. It is possible to install them one by one but that takes time and won’t have any benefits (unless you’re a server administartor, which you probably won’t be ).

We’ll see how to install the “pack” that suits you depending on your operating system during the rest of this chapter.

In Windows : XAMPP

There are several packages that exist for Windows. I’m going to show you XAMPP which I have used for the last couple of years.

Start by downloading XAMPP from the official site. You don’t need to download the add-ons. The installer should be enough.

Once you’ve downloaded it just install it by leaving all the options by default (the different things don’t need to be services). It should install itself in a folder like C:/xampp and create a shortcut in the start menu.

When you launch XAMPP, an icon will appear in the task bar :

Clicking once on the icon will make the control panel appear. Just start Apache and MySQL to be able to run PHP :

You can now go to XAMPP’s home page. To do this simply go into XAMPP’s control panel and click on the Admin button next to Apache :

A similar screen to the one below should appear in your default browser. If the page displays itself, it means apache is running correctly.

The web page you can see on the screen has been sent your own local server that was installed at the same time as XAMPP. You are the only person that can see this server. Notice that the URL at the top of your screen starts with http://localhost which means that the work is on your computer.

To create a new web site you need to make a new folder inside C:/xampp/htdocs/. This is the folder for all web sites running on your localhost. For example, in the image below, I’ve made a new website called test :

Now, to view your new site, you simply need to open your browser and go to http://localhost/test (replace test with the name of your site) :

If you’re using Mac there is a good tutorial here

If you’re using Linux there is a good tutorial here

Use a good text editor

As you already know, to modify the source code of a web page there are several solutions :

• Use a simple text editor that you already have, such as Notepad. To open it go to Start/Programs/Accessories/Notepad. This program is enough to write HTML & CSS and even PHP but…
• The best is to use a specialised program that colours your code to make it easier to read. You’ve probably already installed one if you’ve read HTML – Getting Started from our HTML & CSS Lessons

Whatever editor you choose to use, it won’t change how you learn PHP: everything will be the same for everyone.

What makes the success of the web today is its ease of access and its simplicity. A web surfer doesn’t need to know how everything works in the background.

On the other hand, novice web masters such as you must, before anything else, know the basics of the workings of a web site. What is a server and a client ? How do you make a dynamic site ? What are PHP and MySQL ?

This first chapter is here to answer all these questions and to show you that you are capable of making a dynamic web site.

Before we start I would like to thank our friends at Le Site Du Zero for letting me adapt their lessons.

Static And Dynamic Web Sites

We’ll say that there are 2 types of web sites : static and dynamic sites.

• 

  Static sites : they are sites made using (X)HTML & CSS. They work very well but their content can’t be updated automatically : the owner of the site (the webmaster) must modify the source code to add anything. It’s not very useful when your site needs updating several times a day ! Static sites are therefore useful for making show case web sites, for example to present a business or company, without going any further. This type of site is becoming rarer today, because as soon as you add an element for interaction (such as a contact form), we stop talking about static sites, but talk instead of dynamic sites.

• Dynamic sites : more complicated, they use other languages as well as (X)HTML and CSS, such as PHP and MySQL. The content of these sites is said to be dynamic because it can be changed without the presence of the webmaster ! Most of the sites you use nowadays, including Euro PC Solutions, are dynamic sites. The only prerequisites you need to learn to make a dynamic web site is to already know how to make sites using (X)HTML and CSS (you can read my lessons on XHTML and CSS to learn this).

The purpose of these lessons is to make you capable of making a dynamic web site by yourself, step by step.
This allows you to make more exciting things than a static site. Here are some things you’ll be able to make after these lessons :

• A member area : Visitors will be able to register to your site and access reserved areas
• A forum : Nowadays websites often propose forums to let people help each other out or just to discuss
• A visitor counter : You can easily count the number of visitors that have been on your site or know the number that are currently browsing !
• News : You can automise the writing of news and give the visitors the possibility of adding news or comments etc.
• A newsletter : You can regularly send an email to all your visitors with the latest news and persuade them to visit your site again

Of course, these are only examples. It’s possible to go a lot further, everything depends on your needs. You should know for example that most online games are dynamic. You can find for example games for raising animals, conquering space etc.

But…let’s not get carried away. Before getting there you have lots of things to learn ! Let’s start by the basics : do you know what happens when you open a web page ?

How Does A Web Site Work ?

When you want to visit a web site you write its address in your web browser, whether it’s Mozilla Firefox, Internet Explorer, Opera, Safari or another. But have you ever asked yourself how the web page gets to your computer ?

You need to know that the internet is a network of computers. These can be classed into 2 categories :

• Clients : They are the computers of web surfers such as yourselves. Your computer is therefore a client. Each client represents a visitor on a web site. In the following diagrams, the computer of a client will be represented by this image :

  

• Servers : These are very powerful computers that store web sites and send them out to client computers. Most web browsers will never see a server in their life. However, servers are necessary for the internet to work. Servers will be represented like this :

  

  Most of the time, a server doesn’t even have a screen : it stays on and works without human intervention, 24h/24, 7d/7

Quick summary : your computer is called a client and the computer that stores web sites is called a server. How do they communicate ?

That’s where the difference lies between a static site and a dynamic site. Let’s see what changes.

The Case Of A Static Site

When a site is static, the diagram is very simple. There are 2 steps :

1. The client asks the server for a web page
2. The server answers back by sending the web page

The communication is therefore quite simple :

• Hello, I’m the client, I would like to see a web page
• There you go, here’s the page you asked for

On a static site nothing else happens. The server stores the web pages and sends them to the client when asked for without modifying them.

The Case Of A Dynamic Site

When a site is dynamic, there is an intermediate step : the page is generated.

• The client asks the server for a web page
• The server prepares the page specially for the client
• The server sends the page that has been generated

The web page is generated each time that the client asks for it. That’s precisely what makes web sites dynamic : the content of the page can be changed from one moment to another.

That’s how some sites can show for example your username on every page. Because the server generates a new page every time a visitor asks for one, it can personalise the page depending on the visitor (and show the username among other things).

The Web Languages

When we make web sites, we use not one, but several languages. As a webmaster you must know them.

Some programs, called WYSIWYG (What You See Is What You Get), allow beginners to make static web sites without knowing any of the languages…But to make a dynamic site like we want, you must know them.

For A Static Site : XHTML and CSS

A number of languages have been invented for creating web sites. Two of them are absolutely necessary for webmasters.

• XHTML : Is the language at the root of every web site. It’s a lot like HTML but imposes some stricter rules. I recommend that you use XHTML instead of HTML because it makes you take care with your code.
  XHTML is easy to learn and works with tags. Here’s an example of XHTML code :

  Code : HTML

  <p>Hello, I'm a <em>paragraph</em> of text !</p>
  

• CSS : Is the language that creates the design of web sites. Whereas XHTML inserts the content of a site and creates the structure, CSS sorts out the design and look. It’s with CSS that we can choose the colour of the text, the size of the menu etc. Here’s an example of CSS :

  Code : CSS

  .banner {
       text-align: center;
       font-weight: bold;
       font-size: 120%;
  }
  

These languages are used on every web site. When a server sends a web page to the client, it sends the XHTML and CSS code.

The problem is that when you only know XHTML and CSS, you can only make static sites…and not dynamic sites ! To make these you need to know other languages as well as XHTML and CSS.

The question you therefore need to ask yourself is : do you know XHTML and CSS ?

If the answer is yes, that’s perfect, you can continue because we’ll need it during these lessons. If the answer is no, don’t panic. XHTML and CSS aren’t very difficult, everyone can learn them. You can learn them by reading my XHTML and CSS lessons.
You can learn these languages in a couple of weeks, or less if you have enough spare time.

For A Dynamic Site : Add PHP and MySQL

Whatever the site you want to create, XHTML and CSS are indispensable. However, they aren’t enough to make a dynamic site. They need to be completed with other languages.

And that is the whole purpose of these lessons : you’ll learn to use PHP and MySQL to make dynamic sites.

• PHP : It’s a language that only servers can understand and that allows us to make sites dynamic. It’s PHP that generates pages like we saw on the above diagrams.
  It’s the first language that we’ll discover in these lessons. It can work by itself, but is only really interesting if it is combined with MySQL. Here is some PHP code :

  <?php echo "You are visitor number " . $nb_visitors; ?>
  

• MySQL : It’s what we call an RDBMS (Relational Database Management System). To keep things simple, its purpose is to store data in an organised way so that you can easily find and use it. It’s with MySQL that you’ll be able to store the number of visitors on your site, the messages written on a forum etc. The language that allows us to communcicate with a database is called SQL. Here’s some code written in SQL :

  Code : SQL

  SELECT id, author, message, datemsg FROM visitorbook, ORDER BY datemsg DESC LIMIT 0,10
  

PHP and MySQL are what we call freeware. Among other things this guarantees lasting quality : everybody can contribute to the development, and there’s no risk of webmasters losing interest in it all of a sudden meaning that it would be dropped, and that is very important !
PHP and MySQL are also available for free. Because of that you won’t have to give away a penny to make your site !

PHP can work by itself and is enough to make a dynamic web site, but it becomes really interesting when it’s combined with an RDBMS such as MySQL. However to simplify things, we’ll forget MySQL for the moment and concentrate on PHP.

PHP Generates XHTML

Clients are incapable of understanding PHP code, they only know XHTML and CSS. Only the server can read PHP.

The role of PHP is to generate XHTML code (we can also generate CSS but it’s rarer) which is then sent to the client like a static site :

PHP is a programming language that is used on many servers to make decisions. It’s PHP that decides what XHTML will be generated and sent to the client each time.

To understand the point of that, let’s take an example. In PHP we can write : If the visitor is a member on my site and he’s called Jonathan, show ‘Hello Jonathan’ on the web page. If he’s not a member, show ‘Hello’ and give him the choice of inscription.
It’s a very basic example of a dynamic site : depending on if you’re a member or not, you won’t see the same things and you won’t have access to the same things.

And The Competition ?

XHTML and CSS don’t have any competition because they’re standards. Everybody is supposed to know them and use them on every web site.

On the other hand, with dynamic sites, PHP and MySQL are far from being the only languages available. I can’t give you a complete list of alternatives, it would be too long (and boring !). However, for your general culture, you should know some of the other big names.

To start with, even though we often combine PHP and MySQL to make powerful dynamic sites, we shouldn’t mix up the two languages. The first has different elternatives to the second language.

The Competition Of PHP

Among the competition of PHP we can find :

• ASP .NET : designed by Microsoft, it uses the .net framework which is well known by C# developers (a framework is a collection of libraries which help developers). this language can be useful if you’re used to developing in C# and don’t want to learn too much new information.
• Ruby On Rails : this framework works with the Ruby language and lets you create dynamic sites quickly.
• Django : is similar to Ruby On Rails but uses Python instead of Ruby.
• Java and JSP (Java Server Pages) : more often called JEE, it is particularly used in the professional environment. It demands a certain strictness. The creation of a JEE project often takes longer to design but the system is appreciated by professionals and institutions.

I can’t give the names of all the competition here, but that should give you a good idea. For information, it is also possible to use C or C++, but it is complex and not necessarily adapted (in other words I don’t really recommend it )

Which language should I choose ? Which is the best ?

With the subject of these tutorials, you’d expect me to instantly say PHP !. But no. In fact, everything depends on your programming knowledge. If you’ve already used Java, you will quickly be able to use JSP. If you know Python, Django will be good for you.

As for PHP, it’s distinguished from the other languages because of its large community that can quickly help you on the internet if you have problems. It’s an easy to use language that is ideal for beginners and professionals : Wikipedia and Facebook are examples of popular, famous sites that use PHP.

Well, there is no best choice. I recommend the language with which you are certain to get help if you have problems. In this sense, PHP is a very good choice.

The Competition Of MySQL

As for databases, the choice is yet again very vast.
However, whereas PHP and its alternatives are normally free, that’s not the case with most RDBMS.

Among the competition of MySQL, I recommend you know (at least by name) :

• Oracle : is the most famous RDBMS, the most complete and the most powerful. Unfortunately you have to pay for it (and it’s very expensive), which means it is mainly used in large companies. However there are free versions of Oracle for those who want to learn it.
• Microsoft SQL Server : made by Microsoft, it is often combined with ASP .NET, although it can be used with any language. You do have to pay for it but there are limited free versions.
• PostgreSQL : is a free RDBMS like MySQL which offers some more advanced functions. However it still has some way to go compared to Oracle.
• SQLite : the simplest and smallest RDBMS. It is free like MySQL but has very few functions. Its main advantage is that it’s very small.

Once again this list isn’t complete but gives you an idea of what exists.
For information, MySQL is by far the most used free RDBMS. Among the professional, paid solutions, Oracle is the most advanced and used but its use is reserved for large companies because of its price.

So really, if your budget is limited, you don’t have a lot of choice for RDBMS. MySQL is the most used because it is free, and is used by a lot of people that can help you out.

Several Combinations Are Possible

As you have seen, there is a large choice of tools for making a dynamic site. Most of them are free.

Normally you should be able to combine these tools as you wish. For example, you can use PHP with a different RDBMS to MySQL, such as Oracle or PostgreSQL. MySQL can be used with any language : Java, Python, Ruby etc.

However, the PHP + MySQL combination is the most common. It’s not by coincidence that I’ve decided to write lessons on these two tools

You should now have a good idea of what PHP and MySQL allow you to do. If you remember that PHP generates personalised XHTML for each visitor, and MySQL is for storing data, you already know the main idea.

In the first part of this lesson we’ll discover PHP. We’ll therefore put MySQL to one side for the moment and won’t store any data at first. When you’ve reached a certain level in PHP, we’ll start to study MySQL and you’ll be able to start making some interesting things for your fututre sites

Here you will find a large amount of XHTML tags, some that we’ve already seen in the lessons, and some new ones. Generally, the tags we haven’t seen are used quite rarely. Maybe you’ll find something you need in the list

You can also use this page as a reminder when you’re developing your web site

This page does not have every XHTML tag and it’s done on purpose. I prefer to put less tags and only put the ones that are useful for web development.

First Level Tags

First level tags are the ones that structure a XHTML page. They are indispensable to have the minimum code for a web page.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</head>

The Minimum Code Of An XHTML Page

Here you will find the minimum amount of code need to create an XHTML page :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
     <head>
          <title>Title Of The Site</title>
          <meta-equiv="Content-Type" content="text/xhtml; charset=iso-8859-1" />
     </head>

     <body>

     </body>
</html>

Header Tags

All these tags go in the header of the page, meaning between <head> and </head>.

<link rel="stylesheet" media="screen" type="text/css" title="My Design" href="style.css" />

<!-- Home page of the site -->
<link rel="start" title="Home" href="index.html" />

<!-- Help page of the site -->
<link rel="help" title="Help page" href="help.html" />

<!-- RSS feed of the site -->
<link rel="alternate" type="application/rss+xml" title="My site's news" href="news.xml" />

<!-- Icon of the site (favicon) -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<-- Author of the page -->
<meta name="author" content="Euro PC Solutions" />

<-- Description of the page -->
<meta name="description" content="The personal files of NASA" />

<-- Key words of the page -->
<meta name="keywords" content="experiments, physics, chemistry, laboratory" />

<-- Contact address -->
<meta name="reply-to" content="myaddress@email.com" />

<-- Stop the browser from putting the page in the cache -->
<meta http-equiv="pragma" content="no-cache" />

<-- Character map -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<-- Automatically refresh the page after 10 seconds -->
<meta http-equiv="refresh" content="10; URL=http://www.mysite.com" />

<script type="text/javascript">
     /* Put your script here */
</script>

<style type="text/css">
     /* Put your CSS code here */
</style>

<title>The chemistry experiments of Mr Smith</title>

Tags For Text Structure

<acronym title="Central Intelligence Agency">C.I.A.</acronym>

<blockquote>
     <p>
          Text of the quotation.
     </p>
</blockquote>

<img src="images/smiley.png" alt="smiley face" />

<a href="otherpage.html">Go to the other page</a>

List Tags

This part includes all the tags that allow you to create lists (bullet point lists, numbered lists, definition lists…).

<ul>
     <li>An element</li>
     <li>Another element</li>
</ul>

<ol>
     <li>Element 1</li>
     <li>Element 2</li>
</ol>

<dl>
     <dt>Door</dt>
     <dd>An opening in a wall to let people enter and exit</dd>
     <dt>Theatre</dt>
     <dd>Place for putting on shows</dd>
</dl>

Table Tags

<table>
     <caption>Passengers of flight 377</caption>

     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>

     <tr>
          <td>Carmen</td>
          <td>33 Yrs Old</td>
          <td>Spain</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>26 Yrs Old</td>
          <td>United States</td>
     </tr>
     <tr>
          <td>Ben</td>
          <td>19 Yrs Old</td>
          <td>England</td>
     </tr>
</table>

Form Tags

<!-- Text input with one line -->
<input type="text" />

<!-- Password (text is hidden) -->
<input type="password" />

<!-- Send a file -->
<input type="file" />

<!-- Box to tick -->
<input type="checkbox" />

<!-- Option button -->
<input type="radio" />

<!-- Send button -->
<input type="submit" />

<!-- Reset button -->
<input type="reset" />

<!-- hidden box -->
<input type="hidden" />

<select name="country">
     <option value="england">England</option>
     <option value="usa">U.S.A.</option>
     <option value="italy">Italy</option>
</select>

Generic Tags

Generic tags are tags that don’t do anything before you adapt them to your own use.

In effect, all the other tags do something : <p> is a paragraph, <h1> is an important title etc.
However, sometimes you need generic tags (also called universal tags) because no other tag does what you want. They are mainly used for making web page designs.

There are 2 generic tags : one is inline, the other is a block.

These tags will only do something if you give them the id, class or style attribute :

• class : indicates the name of the CSS class to use.
• id : gives a name to the tag. Its name has to be unique on the whole page as it identifies the tag. You can use id for many things, like a link to an anchor link for example, for a CSS style for ids, for manipulations in Javascript etc.
• style : this attribute allows you to insert CSS straight into the tag. Therefore you don’t need an external style sheet. However it is better not to use this attribute because using an external style sheet makes it a lot easier to change your design.

These 3 attributes aren’t reserved for generic tags : you can use them on most tags without any problems

As I said earlier in the chapter, there are several tags that I’ve left out on purpose.

As you’ll have notices, everything has its place in XHTML. The main thing is to use the right tag at the right moment.
Theoretically, you could make most of a site just with generic tags (<div> and <span>) by using CSS with them, but your site wouldn’t make any sense ! Respecting the logic of a web page is indispensable for webmasters. Using the correct tags will get you much better results on search engines such as Google.

Remember that !

My aim is to have a maximum amount of CSS properties on this page. We have already seen a lot of them in the lessons, but there are also properties that we haven’t had the time to see in the tutorials. Most of them are quite rare but easy to use.

The list is only partial because I don’t want to make a complete list of CSS properties that exist. There are too many, and a lot of them are never used.
Therefore, I prefer to concentrate on the main ones, and as you’ll see, there are still a lot of them

Properties For Text Formatting

In this part I’ll put most of the properties used for text formatting.

What is text formatting ? It’s everything that has to do with the shape and size of the text : bold, italic, underlined, font, alignment etc…

Font, Size & Decoration

font-family: font1, font2, font3;

font-family: "Arial Black", Arial, Verdana, serif;

font: bold, 16px, Arial;

Alignment

Background Colour Properties

Background Image

background-image: url("images/bg.png");  /* related address */
background-image: url("http://www.mysite.com/images/bg.png");  /* absolute address */

/* the background bg.png will be shown in the top right and won't be repeated */
background: url("images/bg.png") no-repeat fixed top right;

Box Properties

Dimensions

Outside Margins

Inside Margins

Borders

border-left: 2px inset blue;

Properties For Positioning & Displaying

Displaying

clip: rect(value1, value2, value3, value4);

Positioning

List Properties

list-style-image: url("images/point.jpg");

list-style: square inside;

Table Properties

Other Properties

This chapter might sound like it’s pointless but it is really important.
I’ll warn you straight away : you won’t learn how to make any super dynamic flashing effects, but you will learn about the history of the web.

Why do we use XHTML nowadays instead of HTML ? Why have we decided to separate the content (XHTML) from the style (CSS) ?
Why do we say that some sites are valid whereas others aren’t ?

And what about your site… is it valid ?

The History Of The Web

We’ll start by the basics : the web’s history. Webmasters should know a bit about the web, when it was created and its history.
It’s not only general culture, but it will also allow you to understand what follows in this chapter.

• Everything started at the beginning of the 70′s, during a meeting at the Canadian government. A certain William Tunnicliffe suggested separating the content of the information (the text) from the way in which it was shown. Already back then, although the Internet was reserved for a few privileged people, they had the idea of separating the content (which has now become XHTML) from the style (which is now known as CSS).

• Things started to speed up in 1978, people started to meet up to create a standard language that could evolve.

• In 1986, the SGML was created. This is the abbreviation of Standard Generalized Markup Language. This language was powerful but too complicated. To keep things short, the documentation had 1290 pages ! It never managed to attract the public because of its complexity and never had any major glory

• In 1991, Tim Berners-Lee invented the World Wide Web (abbreviated to WWW). To create the first web pages, Tim Berners-Lee created the HTML language which was slightly based on SGML (so it did have a use after all ).
  HTML (abbreviation of HyperText Markup Language is distributed for free (thanks Tim !)

  

• 2 years later, one of the first free browsers was created : it was called Mozaic and it worked on Mac as well as PC.
  Between 1993 and 1994, the number of websites grew from 500 to 10 000. The web already seemed to have a great future.

• Things started to gather pace in Europe. The web started to boom, and there wasn’t really an organisation in place to monitor its evolution. Somebody needed to make sure that things weren’t being done haphazardly, people needed to work together to ensure a good evolution of the web (and of HTML !).

• In 1994, Tim Berners-Lee, the one who created the Web, created the W3C (abbreviation of World Wide Web Consortium. He became its director.
  The W3C is an organisation with the mission of monitoring the evolution of the web : they needed to stop certain large companies from trying to slow down the evolution of the Web for commercial reasons. The W3C also had the task of designing new versions of HTML, so that the Web could evolve.

  

• In 2003 about 450 people worked for the W3C.

As you can see, right through its history the Web has been carefully developed, to stop it from becoming a toy for large businesses.
Still today (more now than ever), the W3C has the task of ensuring the correct development of the Web. We will see what it did with the HTML language, and why nowadays the standards are XHTML and CSS.

From HTML To XHTML

As I said above, right from the start of the Web, Tim Berners-Lee created the first version of HTML.
In effect, like all programming languages, HTML has known several versions :

• HTML 1.0 : the very first version of HTML created by Tim Berners-Lee in 1991.

• HTML 2.0 : the second version of HTML appeared in 1994 and ended in 1996 with the appearance of HTML 3.0. This version set the base of the following versions of HTML. The rules and specifications of this version were set by the W3C (whereas HTML 1.0 was created by 1 person).

• HTML 3.0 : having appeared in 1996, this new version of HTML added several possibilities to the language such as tables, applets, scripts, the positioning of text around images etc…

• HTML 4.0 : appeared for the first time in 1998, and offers the use of frames (which separate web pages into several areas), complicated tables, improvements in forms etc… But most of all, this version added the use of cascading style sheets, the famous CSS !

• XHTML 1.0 : at the beginning of 2000, the W3C decided to clean up the large mess that was HTML. In effect, during its evolution, HTML tags had been invented by Netscape and Internet Explorer (by Microsoft). Some tags worked on one browser but not on another.
  The W3C decided to stop the development of HTML and to create a new language. XHTML (EXtensible HyperText Markup Language) thereafter became the standard : this language had to work in the same way on all browsers, and no right to invent new tags so long as the W3C hasn’t authorised it !
  Really, there aren’t that many differences compared to HTML, but the language is Strict : you’re not allowed to make as many errors as in HTML. That doesn’t mean however that it is more difficult to use, you just have to get used to it.

  In the web site creation lessons I’ve written, I’ve only talked about XHTML because that’s the language that’s used today. You’ve therefore learnt the correct methods straight away, which will make your sites a lot easier to create. Those who learnt HTML still have some bad habits.

So that’s the future of the web, and it allows us to make sites that are visible on PDAs, telephones and all sorts of other portable devices.

Can you imagine if there were 35 different audio formats available ? Your CD player could read some of them but not others… Well, it was the same with XHTML : everybody came together and agreed on the way a web page should work. So in the end everybody wins : you (the webmaster) and them (the visitors).
Therefore creating a standard ensures that everybody speaks and understands the same language.

And CSS ?

The history of CSS started in 1996. Everything comes back to the idea of William Tunnicliffe (who I talked about earlier) : he wanted to separate the content from the way a page is displayed. This adds several advantages : it’s easier to change the appearance of a site, the pages load faster, we can propose several designs easily etc…

• CSS 1 : from 1996 the first version of CSS was usable. This language set the base of the language that allows us to present a web page, such as colours, margins, fonts etc…
• CSS 2 : created in 1999, this new version of CSS added several interesting and useful options. We could thereafter use absolute positioning, the pseudo-formats :before and :after etc…

CSS2 has existed since 1999, and yet some browsers (Internet Explorer without wanting to give any names away) still have problems using it correctly. Digesting everything in CSS is not the easiest thing, and there are always bugs. The problem is that it’s us, the webmasters, who are paying the price because we constantly have to check for differences between browsers.

However, as you know, creating an XHTML page and CSS is quite simple. The only tricky thing (even for experienced webmasters) is creating a website that works correctly on all the recent browsers (Firefox, Safari, Google Chrome, Opera) AND on Internet Explorer which is an individual case.

Is Your Site Valid ?

For the last part of this chapter, we’ll stop talking and do a bit of work.
What I’ve told you up to now was to teach you the history of the web, but also to make you more aware of what will follow…

What is validation ?
There are sites that are valid and others that aren’t ?

Remember : the W3C put in place the standards. You must respect them so that all the sites speak the same language.

On its site, the W3C (http://www.w3.org) offers a tool called a Validator.
The validator is a kind of program that analyses your source code and tells you if it is correct or if there are errors that need correcting.

There are 2 different validators :

• An (x)HTML validator
• A CSS validator

We will learn how to use both of them by starting with the XHTML validator.
Before we start, I should warn you, the validator will probably show you a few errors. Don’t worry, it’s normal the first time
However, the CSS validator shouldn’t show too many errors; it’s harder to make errors in CSS than in XHTML.

The XHTML Validator

Let’s start by the hardest bit first

First of all, bookmark this page, it’s the XHTML validator : http://validator.w3.org.
Those who downloaded the Web Developer plugin for Firefox can automatically validate the code with a special menu. There is also a great plugin for Firefox called HTML Validator.

The page you can now see is very simple. There are 2 ways of validating :

• Either you validate a page that is already on the web. In this case just enter the address of the page (for example : http://www.mysite.com/page.html).
• Or you haven’t yet put your site on the web (the pages are therefore still on your hard drive). You can therefore send the page directly to the validator to be analysed.

In both cases, the result will be the same, there’s no difference.

If everything is alright (don’t hope too much ), you will get the following message :

The site will then allow you to put this icon on your site to show that it respects the XHTML standards and that you respect the rules.
It is not necessary though. If you don’t like it you don’t have to use it

Of course, if your site has several pages, you’ll have to test them all.

HEELLLPPP MMEEEE
My page isn’t valid, I’m never going to manage, there are loads of errors

First thing : just because your site displays itself correctly doesn’t mean that it is valid.
A web page can look wonderful and yet still be full of errors.

What’s the point in correcting it then ?

As I’ve said right through this chapter : if your site is in XHTML 1.0, it needs to be coded correctly so that everyone can understand it. Browsers try not to show errors so that the visitor isn’t disturbed, but nothing is stopping the browsers from showing things badly !

What’s more, a page that is correctly coded has a better chance of appearing at the top of Google’s results, which will get you more visitors !

I’m not going to show you all the possible errors, the list would be too long. I will however show you some of the common mistakes. You’ll probably notice some of the errors that you’ve made as well so you’ll know how to fix them.

• First of all, this might seem to be apparent because I said it at the beginning, but I must remind you : the names of your attributes and tags must be written in lowercase. The value of an attribute can however include uppercase letters :
  <tag attribute=Value of the attribute>

• Solo tags, like the change line br and the image tag img must end with a slash (/) : <br />
  The space between the br and the slash isn’t necessary but the W3C do recommend putting the space in.

• All your text must be placed between paragraph tags. You are forbidden from placing text directly between the <body></body> tags without putting <p></p> tags around the text. This is also the case with the return line tag (<br />) and images (<img />) : these tags must be in the <p></p> tags !
  This is an extremely common error with beginners. Here’s an example of what you shouldn’t do :

  Code : HTML

  <p>Here is some text that's correctly placed in a paragraph.<br />
  <q>br</q> tags must be placed inside paragraphs, don't forget it.</p>
  
  This text is placed outside of a paragraph. It's forbidden.<br />
  <q>br</q> tags are also forbidden outside paragraphs as well as images.
  <img src="thing.png" alt="This is a thing" />
  
  <p>This text is once again inside a paragraph, everything is good.<br />
  Don't forget that images must also be inside paragraphs.</p>
  
  <p><img src="thing.png" alt="This is a thing" />
  (This image is correctly placed in a paragraph)</p>
  

• All your images must have an alt attribute which describes the image :
  <img src=photo.jpg alt=A photo of me />
  If your image is purely for decoration purposes (you can’t find a description), you are allowed to put nothing in the alt attribute like this :
  <img src=deco.png alt= />

• Tags must be closed in order. Here’s what you shouldn’t do :
  <p><em>Important text</p></em>
  Now, here’s what you should do :
  <p><em>Important Text</em></p>
  Remember this, a lot of beginners make this mistake.

• If your links have & signs in them (which is the case for sites using PHP), you must replace the sign with &amp; to avoid confusing the browser. Here’s a bad example :
  <a href=http://www.site.com/?day=15&month=10&year=2010>
  To make this good we just need to replace & with &amp; :
  <a href=http://www.site.com/?day=15&amp;month=10&amp;year=2010>

• Make sure that you have only used XHTML tags and no old HTML tags. If you only use the tags shown during these tutorials, you won’t have any problems. Using invented tags such as <marquee> or old tags like <frame> will make your page invalid.
  The validator will say Element whatever undefined or There is no attribute whatever

The CSS Validator

You’ll be relieved to know that this will be a lot quicker

First of all, here’s the link for the CSS validator to add to your bookmarks : http://jigsaw.w3.org/css-validator

You need to tell the validator the address of your CSS file. As with XHTML pages, you can also send files from your hard drive.
Just like with XHTML, you might have several files to validate.

You don’t have to directly indicate the CSS file. You can also indicate an XHTML page (.html) and the validator will look for the CSS files that are used (with the help of the <link /> tag !).

You have to make sure that you’ve validated your XHTML before validating your CSS.
The CSS validator will probably refuse to work if your XHTML still has errors.

Right, generally the CSS validator is the easiest thing in the world.
To have any errors, you need to completely screw things up somewhere or use properties that aren’t official. Here are some of the rare errors that can be made :

• You’ve forgotten to end the line of a CSS property with a semi-colon (;). If you forget this, the CSS file will be rendered useless.

• You’ve forgotten to give a standard font name to the font-family. Wrong :
  font-family: Arial, Trebuchet MS, Impact;
  Right :
  font-family: Arial, Trebuchet MS, Impact, sans-serif;

• You’ve used an unofficial CSS property. This is the case with Microsoft who invented, without letting the W3C know, several CSS properties that only work in Internet Explorer.
  Among these invented CSS properties, there are scrollbar-face-color and filters like filter: glow(). As these properties aren’t official, you shouldn’t use them on your web page.

  

  Have you created valid CSS files ? Well done !
  You can add the Valid CSS Icon to your site to show that it respects the standards. Once again nobody is forcing you to use this one or stopping you from creating your own design for the logo.

I hope that you enjoyed this chapter and that it helped you.
On a more serious note, this chapter is not to be taken lightly : I’ve tried to summarise all the different things about the web. It’s important that your sites are XHTML and CSS valid.

Your site is finished, looking good, ready… But as it is on your hard drive, nobody can see it !

You would therefore like to put it on the web but you don’t know how to do it
In this chapter we’ll discover how to put sites on the internet. In this order :

1. We’ll find out how to reserve a domain name
2. Then we’ll see what a web host is and how it works
3. Finally, when we’ve chosen a web host, we’ll see how to use an FTP client to transfer our files to the net

Domain Names

Do you know what a domain name is ?
It is an address on the Web : europcsolutions.com for example is a domain name.

A domain name is made up of 2 parts :

• In red, the name of the domain. It is the name that you can normally choose as you wish, unless somebody reserved it before you. It can contain letters and numbers, but no special characters (like é, ç, space etc.).
• In blue, the extension. There is more or less one extension per country (.co.uk for the United Kingdom, .fr for France, .ca for Canada). However, there are also extensions that are used at an international level like .com, .net, .org. At first they were reserved for commercial sites, organisations etc… but everybody can now reserve a domain with these extensions. As such, .com is probably the most used extension in the world.

Generally, the name of a website is preceded by www, like for example www.europcsolutions.com. This is not a part of the domain name : in fact, www is what we call a sub-domain, which you can in theory create as many as you want when you own the domain name. For example the sub-domain of this site is blog : blog.europcsolutions.com.
The www has been adopted by webmasters, as a sort of convention, but is not necessary.

Reserving A Domain Name

I want a domain name as well ! How can I get one ?

I have good and bad news
As usual, we’ll start by the bad news :

• Bad : It’s not free
• Good : It’s not very expensive

In effect, a domain name costs between £10 and £40 a year.
The price can change depending on the extension of the name. Therefore, the extension .info is generally proposed at a very low price and can be a very interesting alternative. However, if you want a more common address, you should look for .com or .co.uk (depending on where you live) extensions.

To reserve a domain name, there are 2 solutions :

• Use a specialised registrar. It’s an organism which acts as an intermediate between ICANN (the organisation which controls the international names such as .com) and you. UK2.NET, 123-Reg and Go Daddy are popular registrars.
• Even better, you can order the domain name at the same time as the hosting (which I highly recommend). That way you get everything sorted out, and in any case you’ll need both a name and hosting.

In this chapter, we’ll see how to order a domain name at the same time as the hosting, it’s the easiest and cheapest solution for you.

The Host

Now let’s have a look at the host.

What is a host and why do I need it ?

On the Internet, all the sites are stored on special computers called servers. These are very powerful computers that are turned on all the time. They store the web pages and send them to users at any time of the day.

Here’s what a server looks like :

A server doesn’t have a screen because, most of the time, it works by itself without humans having to do anything to it. As you can see, servers are very flat : it’s a special format of server (called 1U). They can be piled up in bays (a sort of air-conditioned wardrobe for servers ).

Here’s what a server bay looks like :

As you can see, there’s one screen for the whole bay. That’s enough because the screen is only plugged into a server if there’s a problem. Luckily, most of the time, there are no problems

The Hosts’ Purpose

The host is a business that manages all the server bays. It makes sure the servers work 7 days a week 24h/24. In effect, if one of them breaks down, all the sites on that server will stop working (which makes a lot of clients very unhappy ).

The bays are kept in special locations called data centers. Data centers are warehouses for servers, and they’re very difficult to gain access to.

Theoretically it is also possible to host a site on your own computer. However, it’s complicated, you need to have good knowledge of using Linux, your computer needs to be powerful enough, it needs to be left on all the time and… most of all… you need a very fast internet connection (mainly when uploading, the speed of file transfer is very important). Most of the time, users don’t have a fast enough internet connection to host sites whereas data centers do : they use fibre optics (which gives a speed of several Gbps ! ).

Managing a server yourself is complicated, and most of the time users and businesses use professional hosting services.

Finding A Host

Contrarily to registrars, there are a lot of hosts. There are lots of different types at a variety of prices. There is some vocabulary that you’ll need to know to understand their offers :

• Shared Hosting : if you choose a shared hosting plan, your site will be placed on a server that’s hosting several sites at the same time (maybe 100 or more). It’s the cheapest offer and the one I recommend if you’re starting a web site.
• Virtual Private Servers (VPS) : this time the server only hosts a few sites (about 10 or less). These servers are used for sites that have become too big for shared servers because they have too much traffic (visitors), when the owners can’t afford a dedicated server (see below) or they don’t need the power of a dedicated server.
• Dedicated Servers (also known as dedicated hosting) : this is the ultra hosting plan. These servers only host one site. Be careful though, this plan is expensive (between £75 and £130 a month) and you need decent knowledge in Linux to manage the server from a distance.

But where can I find a host ?

Ah, that’s very easy
Searching “hosting plan” in Google will give you thousands of results. You’ll just have to choose one.

If there is some advice I can give, I suggest that you have a look at the offers proposed by Just Host. They are the hosts that received the most positive reviews on The Top 10 Best Web Hosting Firms. I’ve also tried them out and I was very happy with their services

However, if you find that the offers from Just Host are a bit too expensive at first, you can try 1&1, who often offer hosting at very low prices.
The rest of this chapter will show you how to buy a hosting package with Just Host, but things work the same way with any other host.

So then, back to Just Host. This site offers several hosting plans, here’s their hosting page :

In the middle you can see their hosting plans. They offer 2 different plans :

• Everything unlimited & 1 domain name
• Everything unlimited & 3 domain names

These offers are very similar. It’s just the number of domain names that changes.

But what is Bandwidth Allowance ?

Bandwidth allowance, or traffic, is the quantity of information that’s sent to your visitors every month. For example, if you have a 1mb image on your site and it is loaded 500 times by visitors on the site, you’ll have a traffic of 500mb.
Really, browsers put images in the cache, which avoids loading the same image every time a same visitor goes on a site. This reduces the traffic.

Ordering Hosting For Your Site

Let’s suppose that we want the Just Plan offer. The following screen will ask you what name you want for your site :

Most of the time you will create a new domain name. In this case I want to create www.newsiteforme.com.
Just Host will then check that the name is available.

As this name is still available, we can carry on
If not, you’ll have to find a different domain name because if somebody else already has your name there’s not a lot you can do

In the following page you have to insert your details :

For the payment, if you’re using paypal, just click on the paypal button and the payment will be sorted after.
When you’ve finished entering your details you’ll be redirected to Paypal’s site (which you’ll probably know if you use eBay). It’s a safe and easy way to make payments on the Internet, which explains why it’s had so much success.

Just input your Paypal account details, then you’ll be redirected to Just Host to confirm that the payment has been accepted.

You should later receive an email containing the necessary details to set your site up. Keep it safe because you’ll need it later.

Using An FTP Client

Installing An FTP Client

FTP means File Transfer Protocol and, to keep things short and simple, it’s the way we’re going to send our files to the server.
There are programs that allow us to use FTP to send our files to the Internet.

Of course, there exist a lot of programs to do this.
So that we all know what we’re doing, I suggest using one that’s free and easy to use : FileZilla
First step : download the program

Download FileZilla
Download FileZilla

I’ll trust you to install it correctly, it’s easy and you shouldn’t have any problems
Launch the program, this is what you should see :

At first view, it seems a bit complicated (only at first view). In fact, it really is quite simple.
There are 4 main areas in the window to know :

1. At the top, you’ll see the messages that the program sends and receives. If you’re lucky enough, you might even see the server say hello to you ! Generally, this area doesn’t interest us that much, apart from if there are error messages… and as they are written in red, they’re quite hard to miss
2. To the left is your hard drive. In the top part are the folders and underneath are the files inside the current folder.
3. To the right are the files that are on the Internet. At the moment there isn’t anything because we aren’t connected, but that will come, don’t worry.
4. Finally, at the bottom, you’ll see the files that are being transferred (and the percentage of completion).

The first step will be to connect yourself to the server of your host.

Setting Up The FTP Client

No matter which host you have chosen to go with, the procedure always works in the same way. You will be given 3 details that are indispensable for FileZilla to connect to the server :

• The IP : the address of the server. Most often you will be given something like ftp.my-site.com, but it can also be a lot of numbers like 122.65.203.27.
• The login : your username that you put when registering with the host. You might have put a username or the name of your site. Mine could be europcsolutions.
• The password : either you were asked to give one when registering (most often) or you’ll have been given a default password (for example crf45u7h).

If you don’t have these 3 things, you’ll have to get them, they’re indispensable. Most of the time they’re sent to you by mail. If not check your account on your hosts website. If you still can’t find them don’t hesitate to contact your host to ask for them.

Now that we have these 3 bits of information, we’ll give them to FileZilla so that it can connect to the server.
Click on the small icon in the top left of the window (not on the small arrow to the right, but on the image) :

A new window appears. Click on New Site and give it the name you want (for example Euro PC Solutions). To the right you have to put in the three bits of information I was talking about just above, like this :

At the top is the host (that’s where you have to give the IP address, something like ftp.europcsolutions.com.
To be able to enter your username and password, select Logon Type : Normal
Here the logon is username and the password is… hidden (you didn’t think I’d give it away did you ?! :p).

Click on Connect and everything is (nearly) sorted.

Transfering Files

Now there are two possibilities :

• Either the connection goes ahead correctly, and at the top you’ll see messages in green like connected. In this case the right hand side of the screen should be activated and you’ll see the files that are on the server (there might already be a few).
• Or it doesn’t work, you’ll have lots of messages written in red and in that case… there aren’t 36 solutions : you’ve messed up while inserting your IP, username and password. One of these elements is incorrect, try re-inserting them and if it still doesn’t work ask your host. If they’re correct it must work

If the connection works, what you now have to do is very easy : on the left side, find your site on your hard drive (including .html & .css files & images etc.)
Just select the files you want (in our case the whole site) and drag them over to the right hand side. Wait for FileZilla to say that the transfer queue has finished and your files will be on the internet !
Here’s an example :

When the files appear to the right, they’re available on the server

Make sure that your home page is called index.html. This is the page that the visitor goes to when writing www.site-name.com.

That’s about all you need to know.
Although you could have probably done a lot of that by yourselves I wrote this chapter because it can be tricky at first knowing what a registrar is and how to find a host.

Right, get to work, you have files to transfer I believe

It’s always the same. You see the summary of the tutorial for the first time, look at the list of chapters, and say to yourself : What ?! You need to learn ALL that to make a web site ??
And nonetheless you read the chapters one by one and… you eventually reach a page called Conclusion.

You ask yourself the question Have I learnt everything ? or What shall I do now ?.

The End Is Near

I think the first thing we need to do is a summary. That’s to say, a conclusion of everything we’ve seen now that everything’s finished.

At the same time, this will be the occasion to find some things that we haven’t seen.
Why ?
What’s the point ?
How to find out more ?

So many questions that I’ll try to find answers for

Resuming What We’ve Seen

You must remember that the lessons were separated into 3 parts :

1. Part I : XHTML tags : After a brief introduction about the tools that are used (Notepad, Notepad++) and the browsers (Internet Explorer, Firefox, Opera…), we started making our first pages entirely in XHTML.
   We learnt the basic structure of an XHTML page, how to write text, how to make links, and finally how to insert images.

   

   In this part I voluntarily avoided talking about CSS. Okay, the pages we made were extremely ugly, but that allowed us to learn one language at a time to start off.

2. Part II : It looks nicer with CSS ! : After a certain amount of time, I had to start talking about CSS. As soon as I thought you had enough knowledge of XHTML, we started on CSS. The chapters were quite long, I admit, and it was quite challenging. In effect, once the basics of CSS were learnt, we simply had to… learn the loads and loads of CSS properties.

   

   I did my best to stop the chapters from being too repetitive, but CSS is made like that, I didn’t invent anything.

3. Part III : XHTML & CSS – Always Stronger ! : After that we went to the next level. In this part, XHTML & CSS worked side by side, and the least we can say is that you had to pay close attention. Right, the first chapter on lists was an easy introduction so that you could see how the two languages worked together. But then came the chapters on blocks, positioning in CSS… the hardest part of the lessons. It was delicate but indispensable to be able to create a proper design.

   

   After having seen how tables are made, we finally stopped with forms. A chapter which, as you’ll have guessed, wasn’t placed at the end for nothing. In effect, it was a frustrating chapter because we could only create forms without being able to process the data.

And I promised to say a bit more about PHP, this famous language that’ll allow us to retrieve the information from forms. We’ll talk about that a bit further on.

Are there any XHTML tags and CSS properties that we haven’t seen ?

The answer is of course… yes.
Let’s see them now.

What We Haven’t Seen

First of all, let me clarify things : if there are elements that I haven’t talked about, it’s mainly because they didn’t enter into any of the themes of the chapters. And as I prefered not to make a scrappy chapter name Other Tags, I avoided the subject.
However, because of my honesty, I’ll still tell you about the things we haven’t seen

So there are tags you don’t know. Will that penalise you ?
Not really. For example we didn’t talk about the <hr /> tag. It’s a tag that creates separation lines on a page. You can explain it in one sentence, so it’s difficult to create a chapter about it

So, how can I get the list of XHTML tags that exist to complete my knowledge ?

Simply go to the chapter List Of XHTML Tags in this tutorial.
There really aren’t a lot of tags that we haven’t seen. Because of this, I suggest that you make sure that you understand everything we HAVE SEEN before rushing off to see the other tags.

With CSS, things are a bit different. There are a lot of properties, and I made the effort, as I promised, to make sure you saw the majority of them.
However there are some I didn’t talk about. Mainly, it’s because they’re used in specific cases : there are some for example that are used to show the pronunciation, others to give instructions to printers etc…
And I simply left some to one side to keep things simple enough to understand.

But once again, if you want to know everything, I invite you to read the chapter List Of CSS Properties.

Also in CSS, you must know that there are a lot of tricks that are used for precise effects. These tricks weren’t seen in the lessons either because they’re used in specific cases.
Some allow you to create nice menus, others correct bugs in Internet Explorer etc…

We’re Not Going To Stop Here Are We ?

I said I would talk about PHP, the moment has finally arrived.
More generally, we’re going to see if there are any other languages that you can learn in relation to XHTML and CSS.

These languages can be split into 2 categories :

• client based languages : languages that are launched on the visitor’s computer. In which case it’s the computer that does the necessary things to obtain the desired effects. Among the client based languages, the best known one is JavaScript, which you have probably heard about as it is very popular.

• server based languages : this is more serious. These languages are launched on machines called servers. They’re a sort of huge computer that you’ll never have seen and whose sole job… is to distribute your web site to visitors.

  Server based languages are more complicated, but also a lot more powerful than client based languages.
  There are several server based languages :

  • PHP : very popular, you may have heard about it… Oh yes, I’ve been going on about it without telling you what it is
    All you need to remember for the moment is that PHP is very popular with webmasters who have a bit of experience because it’s free and very powerful.

  • ASP : this language is less well known. ASP was developed by a business you know well: Microsoft. And as Microsoft rarely does things for free…
    ASP has therefore been less successful than PHP because it’s expensive, and I’m sure you wouldn’t want to pay to be able to develop your own site (it’s a human feeling, don’t be ashamed ). It’s mainly businesses that use ASP. And yet… a lot of them are converting to PHP, which is just as powerful as ASP and has the advantage of being free.
    There are other server based languages as well such as Perl but seeing as PHP has dominated them, I won’t bother going into detail about them.

Now we’ll talk in more detail about a client based language (JavaScript) and a server based language (PHP).

A Client Based Language : JavaScript

Javascript goes back quite a long time. It is, as I said earlier, a language that is launch on the client’s machine, meaning the visitor’s computer. It allows us to edit the XHTML code without having to reload the page all the time.

Contrarily to XHTML, Javascript is a programming language.
To give you an idea of what it’s like, here’s a bit of Javascript :

Code : JavaScript

function switch_spoiler(div2)
{
     if (div2.getElementsByTagName('div').length > 0)
          var divs = div2.getElementsByTagName('div');
     else
          var divs = div2.parentNode.nextSibling.getElementsByTagName('div');

     var div3 = divs[0];

     if (div3.style.visibility == 'visible')
          div3.style.visibility = 'hidden';
     else
          div3.style.visibility = 'visible';

     return false;
}

This code changes the style of a tag when we click on it : it changes visibility to hidden if it was visible, and to visible if it was hidden. It lets us hide or show text on the screen when the visitor clicks on it.

We can write Javascript directly in a .html file, or better : in a .js file. (just like putting CSS in a .css file).

Javascript is difficult to resume in a couple of lines because it can produce a very large variety of effects :

• We’ll use it often to change CSS properties without reloading the page.
  For example, you roll over an image and the site’s background changes colour (we can’t do it with :hover because it concerns two different tags, that’s the limit of CSS).

• We can use it to change the XHTML source code without reloading the page

• It can be used to show dialog boxes on the screen

• Or to change the size of a window…

Javascript is used in a very popular programming method at the moment, that you may have heard of : AJAX (Asynchronous JavaScript And XML). It’s a language that combines JavaScript and XML to communicates with servers and dynamically reload certain parts of the page. Services such as GMail and Netvibes use it a lot, and they’re not alone.

A Server Based Language : PHP

Server based languages and client based languages can’t be compared because they do different things. Therefore don’t try to compare JavaScript and PHP, these languages aren’t related.

I’ve told you about Javascript and explained that the need of this language is minimal. It is used to create certain effects (a lot of them…), but globally we can manage without it.
However, it’s practically impossible to manage without PHP. Yes, we can make a web site without PHP (the proof : you can do it), but in the end you’ll need PHP.

For example, it’s PHP that allows you to process the information that visitor’s put in forms, it’ll send the information to you by email for example. Here’s a few examples from many, many applications of PHP :

• Guest Book
• Forums
• Newsletter
• Chat
• Visitor Counters
• Automatic News Systems
• Member Systems
• PHP Games for Websites (strategy games, role play games…)
• We’ll stop there shall we

PHP also has a very large community of programmers that’ll be able to help you out.
And it also has a mascot : the elePHPant :

PHP is quite different to XHTML and CSS because it’s a real programming language. It is a lot like C++ (the difference is that C++ is for programs, PHP is for websites).

There is one thing that PHP requires : that you already know XHTML and CSS. That’s alright for you, you’ve just learnt both of them

PHP will, to put things clearly, make your life easier (after having complicated things of course ).
It allows you to make your site, in some ways, completely automatic. A PHP site, is a site that updates itself without needing you to be sat in front of your screen.

So, to keep things simple, there are 2 types of site :

• Sites in XHTML and CSS (that you can now do) : these sites work very well, but to update them you systematically need to change the XHTML / CSS. Generally these sites are quite simple, and often are small sites.
  A site made in XHTML and CSS are called static, because they can’t be modified without your intervention.

• Sites in XHTML + CSS + PHP : with the addition, the site is, in many ways, automated. Once the XHTML, CSS and PHP code has been set up, you won’t (hardly ever) need to touch the source code. For example, to add news you simply need to fill in a form and click on submit !
  A site made in XHTML, CSS and PHP is called dynamic because it is a site that doesn’t really need your intervention to develop. A dynamic site is a lot more attractive and easier to update, which explains why most of the big sites use PHP.

  Do you want a glimpse of PHP to see what it looks like ?

  Code : PHP

  <?php
       // Connection to MySQL
       mysql_connect("localhost", "epcs", "password");
       mysql_select_db("phplesson");
  
       //------------------------------
       // STAGE 1 : check if the IP is already in the table
       // To do that, simply count the number of fields where <q>ip</q> is the address of the visitor
       $returnip = mysql_query('SELECT COUNT(*) AS number_entries FROM connected WHERE ip='' . $_SERVER[REMOTE_ADDR'] . ''');
       $datas = mysql_fetch_array($returnip);
  
       if ($datas['number_entries'] == 0)  // The ip isn't in the table, we'll add it
       {
            mysql_query('INSERT INTO connected VALUES('' . $_SERVER['REMOTE_ADDR'] . '', ' . time() . ')' );
       }
       else  // The ip already exists, update the timestamp
       {
            mysql_query('UPDATE connected SET timestamp=' . time() . ' WHERE ip='' . $_SERVER['REMOTE_ADDR'] . '' ' );
       }
  ?>
  

  It’s a bit of PHP code that allows you to show the number of visitors connected to your site

If I were you, I’d carry on practising XHTML and CSS, to be sure that you know them well, then read chapter 1 of the PHP tutorials.

Reading the 1st chapter doesn’t cost you anything, and it’ll give you a more clear idea of what PHP is like.
It would be a real shame if you didn’t learn this language.

This time my friends, it really is the end

What can I add before finishing ?

Well, first of all it’s been a pleasure sharing my knowledge and experience with you.
If you haven’t looked yet, there are cheat sheets after the chapters of the lesson. You’ll almost certainly find some extra and useful information in there. There are also some extra chapters such as How to put your site on the web, or How to earn money through advertising etc. etc…

As you can see, the world of computing holds lots of surprises, which, if we take the time to find and learn about, finish by astonishing us. It’s this curiosity that you need to keep, in computing, but also elsewhere.

Are you curious about knowing PHP ?
If that’s the case… you won’t stop being astounded

Time’s passing us by, my friends. The further we get through the lesson, the more you’ll realise we’re reaching the limits.

What ? You lied to us ?!
XHTML and CSS have limits ? We can’t do everything with them ?!

On a serious note, yes XHTML and CSS do have limits. You can already make a good site with what I’ve taught you, but imagine that one day you want to make an awesome site ?
We’re getting there. What I’m going to teach you will still be XHTML, but you will realise that we’ve reached the limits of the language.

But maybe that’s a good sign. It might mean that you’ve become good and that XHTML isn’t enough anymore

What will we talk about in this chapter ? We’re going to talk about forms. The idea is simple : you’ve created a site, and for example, you’d like it if you’re visitors could leave their thoughts by ticking boxes, inserting their comments, their suggestions …

Welcome to the wonderful world of forms, the world where check boxes, buttons and scrolling lists live in perfect harmony (or almost )

Creating A Form

When you want to insert a form into your XHTML page, you need to use the <form> </form> tags. It’s the main tag of a form; it allows is to indicate the beginning and the end of the form.

Code : HTML

<p>Text before the form</p>

<form>
     <p>Text inside the form</p>
</form>

<p>Text after the form</p>

So that is the basic structure.
Now pay attention, because what I’m going to say is not evident seeing as we’re at the limits of XHTML.

A form is created to be sent. We’ll take an example to make things clear.
Let’s suppose that a visitor leaves a comment in your form, for example Yeeaahhhh, this site is great ! This message needs to be sent so that you can receive it (makes sense doesn’t it ?), and so that you can find out what the visitor thinks of your site.

Well, that’s where the problem is, or more precisely :

• Problem 1 : how do you send the text left by the visitor ?

• Problem 2 : once the data has been sent, how do you process it ? Do you want to receive it automatically be email, or do you want it to be saved somewhere, then show it on a page for everyone to see ?
  That’s the same as a guest book if you were following properly

There are 2 attributes for the <form> tag so that we can resolve these 2 problems :

• method : this attribute indicates how you want to send the data (problem 1). There are 2 ways to send information on the web :
  • method=get : isn’t a very flexible method because you’re limited to 255 characters. The information is sent to the address of the page (http://…), but we’re not really interested by this for the moment, I recommend that you use the other method : post.
  • method=post : is the most used method for forms because you can send a lot of information.
• action : is the address of the page or program that will process the data (problem 2). This page will send you the data by email if that is what you want, or save the message, along with all the others in a database.
  We can’t do this with XHTML / CSS, generally we use another language that you may have heard of : PHP. We’ll see that later, don’t worry

We can now complete the <form> tag with the attributes we’ve just seen.

For method, you might have guessed, I’ll put the value post.
For action, I’ll put the name of a special PHP page (process.php). This page will be called upon when the visitor clicks on the send button.

Code : HTML

<p>Text before the form</p>

<form method="post" action="process.php">
     <p>Text inside the form</p>
</form>

<p>Text after the form</p>

For the moment, we don’t know what happens in process.php : all that I ask is that you trust me, and imagine that this page does exist, and works. In the lessons on PHP we’ll see how this page analyses the data, but for the moment that isn’t our priority.

Our priority, here, is to see how we insert text areas, buttons and check boxes into our web page using XHTML.
That’s what we’re going to learn now

Text Areas

We’re going to see the tags that allow us to insert text areas into a form.
To start, you need to know that there are 2 types of text areas :

• single line text areas : as its name says, we can only write one line of text inside it :p. It’s for inserting short text, for example : insert your username.
• multi line text areas : this allows us to insert a more important amount of text on several lines, for example : insert your address.

Single Line Text Areas

You don’t know what a text area is ?
That’s alright, I’ve got a picture of one :

To insert a single text area, we use the <input /> tag.
We’ll use this tag a few times in this chapter. Each time the attributes will change.

To insert a single line text area, we need to write :
<input type=text />

But that’s not it ! We’re missing an attribute that will be very important ; the name of the text area. In effect, that will allow us later (in PHP) to recognise which text is the username, which text is the password etc…
Therefore we need to give a name to the text area with the attribute name. Here, we will suppose that we want the visitor’s username :
<input=text name=username />

Now we’ll test that :

Code : HTML

<form method="post" action="process.php">
     <p><input type="text" name="username" /></p>
</form>

Don’t forget to surround the text area with <p></p> or your web page won’t be valid.

Labels

It’s all very well having a text area, but if a visitor see’s it, they won’t know what to put in it. We have to tell them that the box is for their username.
To indicate what a text area is for we use the <label> tag like this :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label>Username</label> : <input type="text" name="username" />
     </p>
</form>

But that’s not enough. We need to link the label to the text area.
To do this we need to give the text area a name, not with the attribute name, but with the attribute id (which we can use on all tags).

A name and an id on a text area ? Won’t they both do the same thing ?

Yes, a bit. Personally, I give the same name to name and id, there’s no problem.
To link a label to a text area, we need to give it the attribute for, which has the same value as the id of the text area.
Here’s what we have :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="username">Username</label> : <input type="text" name="username" id="username" />
     </p>
</form>

Now, if you’re trying the examples at the same time as me, try clicking on username : you’ll see that the cursor automatically goes into the corresponding text area.

So…it’s just used so that the corresponding text area is selected if we click on username ?

No, not at all
It also allows disabled people to easily go through the form. We don’t think about it often enough, but often our forms are so large and unorganised, that it can be hard to know what each text area is for.
Here, for example, blind people will know that the text area is for the username, and they will thank you for taking the time to make things clearer with labels.

A Few Extra Attributes

There are some other attributes for the <input /> tag which will surely interest you.

It is possible, if you want, to give a default value to a text area.
To do this we just need to add the attribute value to <input /> and give it the value of the text you want to show at the beginning. Example :
<input type=text name=username value=europcsolutions />

Another thing : you can change the width of the text area as well as the maximum amount of characters that can be inserted in the text area.
The width is defined with size.
The maximum amount of characters is set with maxlength.

In the following example, the text area contains the text europcsolutions by default, the area is 30 characters long, but you can only insert 15 characters maximum :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="username">Username :</label>
          <input type="text" name="username" id="username" value="europcsolutions" size="30" maxlength="15" />
     </p>
</form>

Password Boxes

You can easily transform a text area into a password box, which is the area where visitors insert their passwords.
The only thing you need to change is the type attribute in <input />. Put type=password and it’s sorted !

I’ll complete the form. It’ll now ask the visitor for a username AND password :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="username">Username :</label>
          <input type="text" name="username" id="username" value="europcsolutions" />

          <br />
          <label for="pass">Password :</label>
          <input type="password" name="pass" id="pass" />
     </p>
</form>

Multi Line Text Areas

Now we’ll (at last) see multi line text areas. Don’t worry, it’ll be a lot faster now that we’ve seen labels
Here is a multi line text area :

The tag for multi line text areas works in pairs (contrarily to <input />). It is <textarea></textarea>.
With this tag also, we add the attributes name, and use labels.

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="improve">How do you think I can improve my site ?</label><br />
          <textarea name="improve" id="improve"></textarea>
     </p>
</form>

We can change the size of the text area using 2 different methods :

• With CSS : just apply the properties width and height to the text area. However this doesn’t work before Internet Explorer 8.
• With Attributes : we can add the attributes rows and cols to <textarea>. The first is the number of rows in the textarea, the second is the number of columns.

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="improve">How do you think I can improve my site ?</label><br />
          <textarea name="improve" id="improve" rows="10" cols="50"></textarea>
     </p>
</form>

But, hmmmmm… why open <textarea> to close it straight away ? A solo tag like <input /> would have done the job wouldn’t it ?

In fact, it’s to set default text for the textarea. It’s a bit like what we did earlier with value in the singe line text area, only here we have several lines
You can set a default value for the text like this :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="improve">How do you think I can improve my site ?</label><br />
          <textarea name="improve" id="improve" rows="10" cols="50">
               Improve my site ?!<br />
               It's that great that there's no need to improve it !
          </textarea>
     </p>
</form>

Option Elements

As well as text areas, XHTML offers a whole range of elements to use in your form.
In this part we will see :

• Check boxes, which you surely know…
• Radio buttons, which you also know…
• Scrolling lists, which you must have seen… Well, you already know everything

Or more likely, you’ve already seen all these elements, but I bet you don’t know how to make them in XHTML !

Check Boxes

These, my friends, are check boxes :

The good news : it’ll be quick

In effect, you already know the tag we’re going to use : it’s <input />
Only we’re going to change the value of the attribute type to checkbox :
<input type=checkbox name=choice />

Add a <label>, and that’s it !

Code : HTML

<form method="post" action="process.php">
     <p>
          Tick the food you like to eat :<br />
          <input type="checkbox" name="chips" id="chips" /> <label for="chips">Chips</label><br />
          <input type="checkbox" name="steak" id="steak" /> <label for="steak">Steak</label><br />
          <input type="checkbox" name="spinach" id="spinach" /> <label for="spinach">Spinach</label><br />
          <input type="checkbox" name="oysters" id="oysters" /> <label for="oysters">Oysters</label>
     </p>
</form>

What can I add ?
Because of the labels, you don’t have to click on the box itself, you can also click on the text.
Also, don’t forget to give a name to the box, in PHP that’ll allow us to identify the boxes that the visitor clicked on.

Ah yes, I nearly forgot. You can make a box be ticked by default. To do that you need to add the attribute checked=checked. That allows us to have an influence on the choices that are made

Code : HTML

<form method="post" action="process.php">
     <p>
          Tick the food you like to eat :<br />
          <input type="checkbox" name="chips" id="chips" /> <label for="chips">Chips</label><br />
          <input type="checkbox" name="steak" id="steak" checked="checked" /> <label for="steak">Steak</label><br />
          <input type="checkbox" name="spinach" id="spinach" /> <label for="spinach">Spinach</label><br />
          <input type="checkbox" name="oysters" id="oysters" /> <label for="oysters">Oysters</label>
     </p>
</form>

Radio Buttons

Radio buttons allow you to make a choice (and only one) from a list :

It’s a bit like check boxes, but with an extra complication, you’ll see.
The tag to use is still <input />, but this time the value for type is radio.
The main difference with check boxes is that radio buttons work in groups. A whole group of options have the same names, but the value attribute is different every time.

Things will be clearer with the following example :

Code : HTML

<form method="post" action="process.php">
     <p>
          Please indicate your age group :<br />
          <input type="radio" name="age" value="less-15" id="less-15" /> <label for="less-15">Less 15 yrs</label><br />
          <input type="radio" name="age" value="15-25" id="15-25" /> <label for="15-25">15-25 yrs</label><br />
          <input type="radio" name="age" value="25-40" id="25-40" /> <label for="25-40">25-40 yrs</label>
     </p>
</form>

Why use the same name for each option ? Simply so that the browser knows which group the option is in.
Try to take out the name attribute, you’ll see that you can select every option. But that isn’t what we want, that’s why we link them all together with their name.

You’ll notice in the following example that we’ve got radio buttons with different names. If I had used the same names we wouldn’t be able to separate them.

If you have 2 different option groups, you have to give a different name to each group :

Code : HTML

<form method="post" action="process.php">
     <p>
          Please indicate your age group :<br />
          <input type="radio" name="age" value="less-15" id="less-15" /> <label for="less-15">Less 15 yrs</label><br />
          <input type="radio" name="age" value="15-25" id="15-25" /> <label for="15-25">15-25 yrs</label><br />
          <input type="radio" name="age" value="25-40" id="25-40" /> <label for="25-40">25-40 yrs</label>
     </p>
     <p>
          What continent do you live on ?<br />
          <input type="radio" name="continent" value="europe" id="europe" /> <label for="europe">Europe</label><br />
          <input type="radio" name="continent" value="africa" id="africa" /> <label for="africa">Africa</label><br />
          <input type="radio" name="continent" value="asia" id="asia" /> <label for="asia">Asia</label><br />
          <input type="radio" name="continent" value="america" id="america" /> <label for="america">America</label><br />
          <input type="radio" name="continent" value="australia" id="australia" /> <label for="australia">Australia</label>
     </p>
</form>

If, instead of putting name=continent you put name=age, the visitor wouldn’t be able to choose their age AND continent.
Try changing the names, you’ll see what happens

A last precision : if you want one of the options to be ticked by default, add checked=checked just like the check boxes, that’s it !

Scrolling Lists

Scrolling lists are another elegant way of letting visitors choose one option from a group of possibilities.

This works a bit differently to the others. We’ll use the tag <select></select> which indicates the beginning and end of the list.
We add the attribute name to give a name to the list. For example country :
< select name=country>.

And now, inside the <select></select>, we insert several <option></option> tags (one choice possible).
We add the attribute value to identify the choice made by the visitor.

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="country">What country do you live in ?</label><br />
          <select name="country" id="country">
               <option value="france">France</option>
               <option value="spain">Spain</option>
               <option value="italy">Italy</option>
               <option value="united-kingdom">United Kingdom</option>
               <option value="canada">Canada</option>
               <option value="usa">U.S.A</option>
               <option value="china">China</option>
               <option value="japan">Japan</option>
          </select>
     </p>
</form>

It’s a bit different to the other things we’ve seen but it’s still quite easy to understand.

Another new thing : we can’t use checked=checked here, instead we must use selected=selected. It allows us to choose a value by default (if not the first value if the default value) :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="country">What country do you live in ?</label><br />
          <select name="country" id="country">
               <option value="france">France</option>
               <option value="spain">Spain</option>
               <option value="italy">Italy</option>
               <option value="united-kingdom" selected="selected">United Kingdom</option>
               <option value="canada">Canada</option>
               <option value="usa">U.S.A</option>
               <option value="china">China</option>
               <option value="japan">Japan</option>
          </select>
     </p>
</form>

But scrolling lists can do even better !
We can create option groups inside the list with the <optgroup></optgroup> tag. We have to give it the attribute label which lets us give a name to the group (don’t mix up with the tag <label> !).

Why not separate the countries by continent in our example ?

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="country">What country do you live in ?</label><br />
          <select name="country" id="country">
               <optgroup label="Europe">
                    <option value="france">France</option>
                    <option value="spain">Spain</option>
                    <option value="italy">Italy</option>
                    <option value="united-kingdom">United Kingdom</option>
               </optgroup>
               <optgroup label="America">
                    <option value="canada">Canada</option>
                    <option value="usa">U.S.A</option>
               </optgroup>
               <optgroup label="Asia">
                    <option value="china">China</option>
                    <option value="japan">Japan</option>
               </optgroup>
          </select>
     </p>
</form>

It can be useful, especially in a big list

A Useful Form With Design ?

Now we’ll try to take things a bit further.
We’ll have a double objective : to make our form understandable and to make it look good.

We’ll do this in 4 stages :

1. Define the order of tabulation (accessibility)
2. Define the keyboard shortcuts (accessibility)
3. Organise the form into several areas (accessibility & design)
4. Add CSS (design)

Defining The Order Of Tabulation

This is the first point that is supposed to make our lives easier.
As you may know, we can go through a menu by only using the Tab key that is situated on the top left of the keyboard. Every time you press on Tab you go to the following field. Every time you press maj+Tab you go to the preceding field.

Our goal is to say in XHTML in which order we would like to go through the form. For example, after the first name text area, if I press Tab I want to go to last name field, then the address etc…

We’ll use the attribute tabindex which can be inserted into all the form tags we have seen.
We must give it a number as a value. Each field of the form must have a different number.

The numbers indicate the order in which we want to go through the form : first n° 1, then n° 2, then n° 3 etc…

You don’t have to put numbers that follow each other. It is even a good idea to leave a space between the numbers in case you need to insert extra fields later on.
I think a good idea is to count 10 by 10 : n° 10, n° 20, n° 30 etc… It doesn’t cost you anything to count in 10s, and if later you need to insert a n° 25, there won’t be any problems

In this form, I’ve added a tabindex in every field. As we have seen, the first field has the smallest n° and the last field has the smallest n°.

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="last-name">What's your surname ?</label><br />
          <input type="text" name="surname" id="surname" tabindex="10" /><br />

          <label for="first-name">What's your first name ?</label><br />
          <input type="text" name="first-name" id="first-name" tabindex="20" /><br />

          <label for="email">What's your email address ?</label><br />
          <input type="text" name="email" id="email" tabindex="30" /><br />

          <label for="country">Which country do you live in ?</label><br />
          <select name="country" id="country" tabindex="40">
               <optgroup label="Europe">
                    <option value="france">France</option>
                    <option value="spain">Spain</option>
                    <option value="italy">Italy</option>
                    <option value="united-kingdom">United Kingdom</option>
               </optgroup>
               <optgroup label="America">
                    <option value="canada">Canada</option>
                    <option value="usa">U.S.A</option>
               </optgroup>
               <optgroup label="Asia">
                    <option value="china">China</option>
                    <option value="japan">Japan</option>
               </optgroup>
          </select>
     </p>
</form>

Try hitting the Tab button several times and you’ll see that you’ll go through the form in the order of the tabindex.
This is particularly useful for people who don’t have a mouse (yes, it does exist !).

By default, if there isn’t a tabindex, the browser will take the top field as n° 1 and the last one will be at the bottom of the page.
However I suggest that you put tabindex because if your form becomes more complicated in the future it could be very useful.

Defining Shortcut Keys

An access key is a keyboard shortcut that allows users to directly go to a field without clicking with the mouse or pressing Tab several times before reaching the desired field.

The good thing is that XHTML allows you to choose the keys you want to use as shortcuts.
However, different browsers use manners of using shortcuts :

• Firefox and Internet Explorer (Windows) : use Ctrl + shortcut. If not use Ctrl + Alt + shortcut.
• Safari and IE-Mac (Macintosh) : use Ctrl + shortcut.

To define an access key, you must use the attribute accesskey, which, like tabindex can be put on all the tags we’ve seen in this chapter.
You must give it the value of the key you wish to use as a shortcut.

In this example, the search bar is accesible with the S key :

Code : HTML

<form method="post" action="process.php">
     <p>
          <label for="last-name">What's your surname ?</label><br />
          <input type="text" name="last-name" id="last-name" tabindex="10" /><br />

          <label for="first-name">What's your first name ?</label><br />
          <input type="text" name="first-name" id="first-name" tabindex="20" /><br />

          <label for="email">What's your email address ?</label><br />
          <input type="text" name="email" id="email" tabindex="30" /><br />

          <label for="search">What are you looking for on this site ? <em>shortcut : R</em></label><br />
          <input type="text" name="search" id="search" tabindex="40" accesskey="R" /><br />
     </p>
</form>

In Windows, you need to press Alt+R to go directly to the search bar.
In Mac you need to press Ctrl+R.

The big problem with access keys is that certain keys are already taken by the browser. If you use the same keys, there will be conflicts and visitors won’t be able to use the keys they’re used to.

Don’t forget to write somewhere the access keys that are available or else visitors won’t know what shortcuts to use.

Organising Forms Into Several Areas

The method we’re about to see has 2 advantages :

• It makes the form clearer and more accessible
• It makes the design look better

So what’s the idea ?
If you have a big enough form (which is generally the case), it is easy for visitors to get lost in the amount of information that has to be sent. It is therefore possible in XHTML to group related data into groups.

We’ll use the <fieldset></fieldset> tag to put the fields into groups.
Inside this tag, we’ll insert other tags (including <input />) as well as another tag : <legend></legend>. This allows us to give a name to the group.

This is very similar to optgroup…but why did we use the attribute label to give a title to the group whereas we now have to use the <legend> tag ?

Well, that is one of the big mysteries of XHTML ! I would have personally preferred that everything was uniform : either we use attributes to set a title, or tags. However, it will be up to you to remember in this case. As always, it becomes easier with a few exercises, but still, try to remember it.

Here’s an example on the use of <fieldset> :

Code : HTML

<form method="post" action="process.php">

     <fieldset>
          <legend>Your coordinates</legend>

          <label for="surname">What is your surname ?</label><br />
          <input type="text" name="surname" id="surname" tabindex="10" /><br />

          <label for="first-name">What is your first name ?</label><br />
          <input type="text" name="first-name" id="first-name" tabindex="20" /><br />

          <label for="email">What is your email address ?</label><br />
          <input type="text" name="email" id="email" tabindex="30" /><br />
     </fieldset>

     <fieldset>
          <legend>Your wish</legend>

          <p>
               Make a wish that you want to come true :<br />
               <input type="radio" name="wish" value="rich" id="rich" tabindex="40" /> <label for="rich">Be rich</label><br />
               <input type="radio" name="wish" value="famous" id="famous" tabindex="50" /> <label for="famous">Be famous</label><br />
               <input type="radio" name="wish" value="intelligent" id="intelligent" tabindex="60" /> <label for="intelligent">Be <strong>more</strong> intelligent</label><br />
               <input type="radio" name="wish" value="other" id="other" tabindex="70" /> <label for="other">Other...</label><br />
          </p>

          <p>
               <label for="precisions">If "Other" please precise : </label><br />
               <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"</textarea>
          </p>
     </fieldset>
</form>

The use of <p></p> is not necessary inside <fieldset></fieldset> like it was earlier.

The result is a lot clearer : you can see the main categories of the form straight away. The form gains clarity and visitors will thank you for that.
Of course, the form won’t be perfect without CSS

Adding CSS

The good news is that after having learnt an incalculable amount of new XHTML tags, you won’t learn any new CSS properties
As you already know everything, I won’t give you any needless comments

Code : CSS

input, textarea {
     font-family: "Times New Roman", Times, serif;  /* change the font of the text inside the text areas */
}

input:focus, textarea:focus {  /* when the curosr is in the text area */
     background-color: #ffff99;
}

label {
     color: blue;  /* put all the labels in blue (why not ?) */
}

legend {  /* give the titles a bit more importance */
     font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
     color: #ff9933;
     font-weight: bold;
}

fieldset {
     margin-bottom: 15px;  /* a margin to separate the fieldset */
     background-color: #ffffcc;
}

Right, it’s quite ugly but you get the idea

The main thing is to show you that you know enough in CSS to do what you want to the form. You have the tools; it’s up to you to use them appropriately.

For this example I re-used :focus which, for those who don’t remember, allows us to apply CSS styles to an element that is selected.

Now We Just Need To Click On The Button !

We’re nearly there.
We’ve seen most of the elements that can be included in a form but we’re still missing one thing : the validation button !

Luckily, it’s easy to create, even more so because you already know the tag…

What ? It’s not <input /> again is it ?

Yes it is !
It seems that this tag can do anything.

Right, of course one type of button wasn’t enough for webmasters, they needed 3 :

• The send button : it triggers the sending of the form. The visitor is redirected to the page indicated by the action attribute in the form. A send button is made with the attribute type=submit. You can add the attribute value to change the text in the button, but you can also leave the default text, I think it’s clear enough :
  <input type=submit />
• The send button : automatically resets the values in the form. This time we need to use the attribute input type=reset
  <input type=reset />
• The button that doesn’t do anything : it’s a generic button that doesn’t do anything in particular. The form isn’t sent, nothing is reset, nothing happens. What’s the point ? Mainly it is used to launch scripts made in JavaScript (another language used in web pages). We won’t be using it but I’m just telling you about it so that you know it exists if you need it one day.
  This time I recommend you include the attribute value so that you know what the button does :
  <input type=button value=I don’t do anything />

We’ll test the first 2 buttons (send and reset) in a fictional form :

Code : HTML

<form method="post" action="target-process.php">

     <fieldset>
          <legend>Your coordinates</legend>

          <label for="surname">What is your surname ?</label><br />
          <input type="text" name="surname" id="surname" tabindex="10" /><br />

          <label for="firstname">What is your first name ?</label><br />
          <input type="text" name="firstname" id="firstname" tabindex="20" /><br />

          <label for="email">What is your email ?</label><br />
          <input type="text" name="email" id="email" tabindex="30" /><br />
     </fieldset>

     <fieldset>
          <legend>Your wish</legend>

          <p>
               Make a wish you would like to become true :<br />
               <input type="radio" name="wish" value="rich" id="rich" tabindex="40" /> <label for="rich">Be rich</label><br />
               <input type="radio" name="wish" value="famous" id="famous" tabindex="50" /> <label for="famous">Be famous</label><br />
               <input type="radio" name="wish" value="intelligent" id="intelligent" tabindex="60" /> <label for="intelligent">Be <strong>more</strong> intelligent</label><br />
               <input type="radio" name="wish" value="other" id="other" tabindex="70" /> <label for="other">Other...</label><br />
          </p>

          <p>
               <label for="precisions">If "Other", please precise : </label><br />
               <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="80"></textarea>
          </p>
     </fieldset>

     <p>
          <input type="submit" /> <input type="reset" />
     </p>
</form>

Without PHP this form won’t do anything. So reassure yourselves, no information was saved.

When you click on submit query the form sends you to the page target-process.php, which is a fictional PHP page that you don’t know how to do.
As I said earlier, we’ve now reached the limits : we know how to make things in XHTML / CSS, but to process data (save or send by mail) you need to use PHP…which I will write lessons about, don’t worry.

Ladies and gentlemen, I have the immense honour of informing you that you’ve read the whole chapter about forms and you still don’t know how to use them.

You have also finished learning about XHTML and CSS !

But, as I have a conscience, I would hate to leave you to got lost in the wilderness. I’ll therefore force myself to write an extra chapter, which will be a conclusion

We will :

• do a summary of everything we’ve seen (and what we haven’t seen)
• introduce PHP, the mysterious language that can supposedly process the data in forms (and a lot of other things !)

No, we still haven’t finished with XHTML (or with CSS either !)

Just to reassure you though : we’ve seen most of it and we’re nearly finished
There are still a few elements to see though. They might not be the most important elements, maybe not the most used either; however I am willing to bet that you’ll need them sooner or later.

Among these elements that I want to show you before we finish (already ?! o_0), are tables.
I want bother drawing one; I suppose everybody knows what a table looks like.

… In fact I will.
Ladies, gentlemen, here is … a table !

Okay, that is quite a simple table. Of course, we’ll learn to make more complicated tables, so that you can do everything you want.
Yet again, we’ll be using CSS to make the tables look nicer. The good news : there is no new CSS to learn, you nearly know everything !

A table is made using XHTML tags. Let’s start by seeing the basic structure …

A Simple Table

The first tag to know : <table> </table>. This is the tag that allows us to indicate the beginning and end of a table.
This tag is a block, so it needs to be placed outside of paragraphs.

Example :

Code : HTML

<p>This is a paragraph before the table</p>

<table>
     Put the content of the table here
</table>

<p>This is a paragraph after the table</p>

Right, and what do we put in the table ?

Now, get ready to receive an avalanche of new tags
To start slowly, here are 2 very important tags :

• <tr> </tr> : indicates the beginning and end of a line in the table
• <td> </td> : indicates the beginning and end of one cell in the table

In XHTML, a table is made line by line. In each line (<tr>), we insert the content of each cell (<td>).
As a diagram, the table I showed earlier looks like this :

We have one line tag (<tr>) that surrounds each of the cells (<td>).
For example, if I wanted to make a table with 2 lines, and 3 cells par line (3 columns), I would write this :

Code : HTML

<table>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

Is that what you call a table?
All the text follows in a line, and there aren’t even any borders !

Yes, a table without CSS is rather empty. However, adding borders is very easy : you already know the CSS we need to use !

Code : CSS

td {  /* all the cells in a table ... */
     border: 1px solid black;  /* have a border of 1px */
}

We still haven’t quite got the effect we wanted. In effect, we only wanted one border between 2 cells, which isn’t the case here.

Luckily, there is a CSS property that is specific to tables : border-collapse, which makes the borders merge into each other.
This property can take 2 values :

• collapse : the borders are merged, which is the effect we want.
• separate : the borders are separated (default value).

Code : CSS

table {
     border-collapse: collapse;  /* the borders will be merged (looks nicer) */
}

td {
     border: 1px solid black;
}

Further in the chapter, we’ll see more CSS options. We’ll also try to make the tables look a bit prettier; I admit that they’re ugly

The Table Header

Now we have what we wanted, we’ll add a header line into the table. In our example, the titles are Name, Age and Country.
The header is created with a <tr> like all the other lines, but the cells are a <th> this time instead of <td> !

Code : HTML

<table>
     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

The header line is easily recognizable for 2 reasons :

• the cells are <th> instead of <td>
• it’s the first line of the table (it’s a bit idiotic, but I had to precise it

As the name of the cells is a bit different for the header, we need to think about updating the CSS to tell it to apply styles on the cells AND the header :

Code : CSS

table {
     border-collapse: collapse;
}

td, th {  /* put a border on the cells AND the header */
     border: 1px solid black;
}

As you can see, your browser has put the text of the header in bold. All the browsers generally do that, but if you want you can change it with CSS, change the background colour of the cells, the font, the border etc…

We’ll see more advanced CSS examples on tables a bit later.

The Table’s Title

Normally, all tables must have a title. The title allows the visitor to quickly find out about the content of the table.
In our example we have a list of people … yes, and ? What does it represent ? Without a title, you see, we are a bit lost

Luckily, there is <caption> (what would we do without it ! ^^)
This tag is placed right at the beginning of a table, just before the header. This tag indicates the title of the table :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
     </tr>
     <tr>
          <td>Laura</td>
          <td>21 yrs</td>
          <td>England</td>
     </tr>
     <tr>
          <td>Michelle</td>
          <td>33 yrs</td>
          <td>U.S.A</td>
     </tr>
</table>

Now things are a bit clearer !

More Elaborated Tables

We’ve learnt how to make small, simple tables. These small tables are enough in most scenarios, but you might need a more … complicated table.
We will be seeing 2 different methods :

• With big tables, it is possible to split them into 3 parts :
  • Header
  • Body
  • Footer
• With some tables, you may need to merge several cells together

Let’s start by the first point, we have a big table, and we want to split it into several parts.

Splitting A Big Table

If your table is big enough, you have every interest to split it into several parts. For this there are XHTML tags that allow us to define the 3 zones of the table :

• Header (at the top) : is defined with the tags <thead></thead>
• Body (in the centre) : is defined with the tags <tbody></tbody>
• Footer (at the bottom) : is defined with the tags <tfoot></tfoot>

What should we put in the footer ? Generally, if it’s a big table, recopy the cells of the header. It allows visitors to see what the information is even when they’re at the bottom of the table.

As a diagram, a table in 3 parts is like this :

The only tricky bit is getting the tags in the correct order :

1. <thead>
2. <tfoot>
3. <tbody>

In the code, first we add the header, then the footer, and finally the body. The browser will show everything in the right place, don’t worry

Here’s the code to write a table in 3 parts :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <thead>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </thead>

     <tfoot>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </tfoot>

     <tbody>
          <tr>
               <td>Laura</td>
               <td>21 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Michelle</td>
               <td>26 yrs</td>
               <td>U.S.A.</td>
          </tr>
          <tr>
               <td>Carmen</td>
               <td>32 yrs</td>
               <td>Spain</td>
          </tr>
          <tr>
               <td>Francois</td>
               <td>43 yrs</td>
               <td>France</td>
          </tr>
          <tr>
               <td>John</td>
               <td>29 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Jonathan</td>
               <td>13 yrs</td>
               <td>Australia</td>
          </tr>
          <tr>
               <td>Xu</td>
               <td>19 yrs</td>
               <td>China</td>
          </tr>
     </tbody>
</table>

You don’t have to use these 3 tags (thead, tfoot, tbody) on a table. In fact, only use them if the table is big enough and they help to organise things
For small tables just use the method we used at the beginning of the chapter.

Merging Cells

On some complicated tables, you’ll need to merge several cells together.
An example ? Look, this table lists films and says who they’re for :

With the last film, as you can see, the cells are merged : there’s only one. That’s exactly the effect we need.

To merge cells, we need to add an attribute to the <td> tag. There are 2 types of merging :

• Column merging : is what I’ve done in the example. We use the attribute colspan
• Line merging : here, two lines will be merged. The merging is vertical. The attribute is rowspan

As you know, we need to give a value to the attribute (whether it’s colspan or rowspan).
The value is the number of cells you want to merge. In the example I merged 2 cells. One in the column for children ? and one in the column for teenagers ? So we need to write :
<td colspan=2>

Which means : this cell is 2 cells merged together.
It is possible to merge more than that together (3, 4, 5 … as many as you want).

Here’s the XHTML code to make the example from earlier :

Code : HTML

<table>
     <tr>
          <th>Title of the film</th>
          <th>For children ?</th>
          <th>For teenagers ?</th>
     </tr>
     <tr>
          <td>Hostel</td>
          <td>No, too violent</td>
          <td>Yes</td>
     </tr>
     <tr>
          <td>Winnie The Pooh</td>
          <td>Yes</td>
          <td>Not violent enough...</td>
     </tr>
     <tr>
          <td>Happy Feet</td>
          <td colspan="2">For the whole family !</td>
     </tr>
</table>

I haven’t coloured the text to avoid complicating the XHTML code. However you’re good enough to do it yourselves now, you just need to add class

And how do we use rowspan ?

That complicates thing a bit. For our example we will inverse the order of the table : instead of putting the films to the left, we’ll put them at the top.

So if we do that, the colspan is no longer of any use, so we’ll need a rowspan.
Take the time to read and understand this example properly, it’s worth it

Code : HTML

<table>
     <tr>
          <th>Title of the film</th>
          <td>Hostel</td>
          <td>Winnie The Pooh</td>
          <td>Happy Feet</td>
     </tr>
     <tr>
          <th>For children ?</th>
          <td>No, too violent</td>
          <td>Yes</td>
          <td rowspan="2">For the whole family !</td>
     </tr>
     <tr>
          <th>For teenagers ?/th>
          <td>Yes</td>
          <td>Not violent enough...</td>
     </tr>
</table>

Don’t get everything mixed up ! If this example is confusing you, just forget it for the moment, it’s not vital.
You can always come back to it later, when you’re more used to manipulating tables. There’s no shame in leaving an example until later

Right, there still isn’t a lot of design in our tables. As promised, we will see in the last part of this chapter how to make our tables look nicer

And With A Bit Of CSS …

The good news : you already know most of the CSS properties needed for tables. A few examples :

• to change the borders of cells we use border
• to change the colour of a cell, we use background-color
• to change the image of a cell, we use background-image
• We can also change the size (font-size), and the font (font-family) of the text in cells
• We can change the width of a table (width), and centre it (margin-auto because it’s a block)
• We can centre the text in the cells (text-align: center), change the inner margins of cells (padding) etc…

So, you already know most of the CSS properties
The main thing is to think of using them, and use them on the correct tags. For example, if you add a black background colour to the <table> tag, the whole table will be black. However if you put the background colour on the <th> tags, only the header cells will be black.

Using The CSS Properties We Know

Do you remember the table in 3 parts we saw earlier ? Let’s see the code again :

Code : HTML

<table>
     <caption>Passengers on flight 377</caption>

     <thead>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </thead>

     <tfoot>
          <tr>
               <th>Name</th>
               <th>Age</th>
               <th>Country</th>
          </tr>
     </tfoot>

     <tbody>
          <tr>
               <td>Laura</td>
               <td>21 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Michelle</td>
               <td>26 yrs</td>
               <td>U.S.A</td>
          </tr>
          <tr>
               <td>Carmen</td>
               <td>32 yrs</td>
               <td>Spain</td>
          </tr>
          <tr>
               <td>Francois</td>
               <td>43 yrs</td>
               <td>France</td>
          </tr>
          <tr>
               <td>John</td>
               <td>29 yrs</td>
               <td>England</td>
          </tr>
          <tr>
               <td>Jonathan</td>
               <td>13 yrs</td>
               <td>Australia</td>
          </tr>
          <tr>
               <td>Xu</td>
               <td>19 yrs</td>
               <td>China</td>
          </tr>
     </tbody>
</table>

And, using only the CSS properties we already know, we’ll make the table look a lot better :

Code : CSS

caption {  /* the title of the table */
     margin: auto;  /* align the table's title in the centre */
     font-family: Arial, Times, "Times New Roman", serif;
     font-weight: bold;
     font-size: 1.2em;
     color: #009900;
     margin-bottom: 20px;  /* to stop the title from being too close to the table */
}

table {  /* the table itself */
     margin: auto;  /* centre the table */
     border: 4px outset green;  /* green border with 3D effect (outset) */
     border-collapse: collapse;  /* Merge the borders */
}

th {  /* The header cells */
     background-color: #006600;
     color: white;
     font-size: 1.1em;
     font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td {  /* The normal cells */
     border: 1px solid black;
     font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
     text-align: center;  /* all the text in the cells will be centred */
     padding: 5px;  /* A small inner margin to stop the text touching the borders */
}

You’ve got to admit that it’s not that hard

On table, in particular, you’ve got every interest to work on the CSS. In effect, with and without the CSS, it’s day and night.
You’ve just got to compare. Which one of these tables would you prefer ?

Personally, I know which one I prefer
And if you don’t like my design, don’t hesitate to make your own CSS !

A Few New CSS Properties

There are a few properties that can only be applied on tables.
Here are the one I suggest you remember :

• caption-side : indicates where you want to show the title of the table (doesn’t work before Internet Explorer 8). This property can take the following values :
  • top : the title is at the top (default value)
  • bottom : the title is at the bottom
  • left : the title is to the left
  • right : the title is to the right
• border-collapse : we saw this earlier, it allows us to merge borders. This is often used as it gives a very nice effect. It can take the following values :
  • separate : the borders are separated from each other (default value)
  • collapse : the borders are merged
• vertical-align : vertical alignment of the content in the cells. This property can take the following values :
  • top : the content is at the top of the cell
  • middle : the content is in the middle of the cell
  • bottom : the content is at the bottom of the cell

As we already know border-collapse, I will show you a table that uses vertical-align and caption-side.
I’ll use the same XHTML and CSS files as earlier, but I’ll add the 2 properties we’ve just learnt to the CSS :

Code : CSS

caption {
     caption-side: bottom;  /* The title will be at the bottom of the table. */
     margin: auto;
     font-family: Arial, Times, "Times New Roman", serif;
     font-weight: bold;
     font-size: 1.2em;
     color: #009900;
     margin-top: 20px;  /* the margin needs to be at the top instead of at the bottom now ( the title has moved ) */
}

table {
     margin: auto;
     border: 4px outset green;
     border-collapse: collapse;
}

th {
     background-color: #006600;
     color: white;
     font-size: 1.1em;
     font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td {
     height: 80px;  /* make the cells higher so that we can see the vertical alignment */
     vertical-align: bottom;  /* the content will be at the bottom of the cells */
     border: 1px solid black;
     font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
     text-align: center;
     padding: 5px;
}

I’ve put comments on the additional lines.

The title is placed under the table with caption-side.
I also had to change the margin-bottom from earlier to margin-top because the title is now under the table.

To be able to test the vertical alignment, I had to change the height of the cells. In effect, for the alignment to be visible, the cells need to be big enough.
After that, the vertical-align let me say I want the text to be placed at the bottom of the cells !

Finally, we’re here

This chapter is a bit particular, rather different to the ones seen up to now. In fact it will be an exercise; Now you won’t be able to read the chapter half asleep, you’ll have to code your site at the same time as me
We’ll be re-using everything we’ve learnt up to here. If you feel like you need to, don’t hesitate to re-read the other chapters to jog your memory.

What is the point of this exercise ?

I think the title is clear enough for this question : we’ll be making a proper web site
As I am quite certain that this’ll be the first time for a lot of you, I suggest you pay close attention to this chapter. Creating a design is not a simple task : you need creativity, a good taste in colours, a bit of talent, and finally experience.

All that I can show you, as you’ll have understood, is my experience. After that, talent & creativity is something that you do or don’t have

Right, Where Do We Start ?

As you now know, a web page is a combination of 2 files :

• An XHTML file (.html or .htm) : the content of the page (the text) is in this file. The file is composed of tags such as <strong>, which indicate if the text is important, if it’s a paragraph, a quotation etc…
• A CSS file (.css) : this file creates the presentation of our web page. It indicates that the text is red, that the font is “Times New Roman” etc… In theory CSS is optional. However without CSS our pages would be very ugly

If you have been following properly up to here, you’ll know how to start :

1. First we need to write the content of the page (XHTML)
2. Then modify the presentation (CSS)

You’ll see that the creation of the XHTML file will be (very) quick and easy. However, we’ll spend more time on the CSS, because it’s tricky, there are quite a few CSS properties to know, and because, no matter how good you may be, the browser may not show things as you wish.

Fixed or Stretched Design ?

A fixed design is a design where the design is defined by a fixed width (for example 800 pixels). Generally there is a margin to the left and right, and the content of the page is centred. Here’s a fixed page design :

A stretched design is a design that automatically adapts itself to the visitor’s screen resolution. If the visitor’s resolution is 1024*768 the width of the site will be 1024 pixels. If the resolution is 1600*1400, the width will be 1600 pixels.

Personally, I prefer stretched designs : I find it a shame to leave part of the screen unused.
However, if you browse around a few sites, you’ll notice that a lot of them have fixed designs. Some people say that they look nicer, but I’ll tell you the truth : they’re also a lot easier to create

What kind of design will we be using ?

To tell the truth, coding a stretched design can sometimes be quite complicated, and as this is your first design I don’t want to complicate things too much. Therefore we’ll be using a fixed page design, which isn’t a bad start.
When you’re a bit better, and you’ve got more experience, you’ll be able to start coding stretched page designs. You’ll have plenty of time to learn

First, The XHTML

First step : we need to open our text editor (Notepad ++ if you took the one I showed you at the beginning), and create a new XHTML file.
Come on! Come on! Do it at the same time as me

To start, we’ll write the basic code of an XHTML page which I showed you in the first chapters. Here it is again :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <title>Welcome to my site !</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>

</body>
</html>

As you already know, all the page content will go between the <body></body> tags.
Save this file as index.html, which is always the first page of a web site.

The General Structure

Very often, a web page is structured using <div> tags, the famous universal block tag I told you about. Generally, we’ll have at least 4 blocks, with the following layout :

1. At the top, the header. Generally the header contains the title of your site in the form of a banner.
2. Under that is the main part of the page with :
   • to the left or right, the menu.
   • on the other side, the body of the page, meaning the part with the page’s content.
3. Finally, at the bottom of the page, is the footer, in which you write the author’s name, maybe an email address, and a copyright.

In XHTML, we create the blocks with 4 different <div> tags :

Code : HTML

<div id="header">
    <-- Put the banner here -->
</div>

<div id="menu">
     <-- Put the menu here -->
</div>

<div id="body">
     <-- Put the content (text) of the page here -->
</div>

<div id="footer">
     <-- Put the site's author's name, copyright etc. here -->
</div>

It’s simple enough, we’ve just made a <div> block for each major part of the page. Later, we’ll see what needs to be put in the different blocks.

One thing that might have surprised you is that I used id instead of class for the <div> tags. If you can’t remember the difference between id and class it might be a good idea to have a quick look at the first chapters on CSS.

To explain things quickly, id and class are more or less the same; however an id can only be used once in a page, whereas class can be used several times. Generally there are few id in a web page, they are mainly used for the main blocks of a page as you can see here.

You must write your blocks in the order that they appear (from top to bottom) in the XHTML code. First is the header, last is the footer. For the menu and the body, which are at the same level, it isn’t too important. You can change their position in the CSS (menu to the right or to the left).

Right, now what needs doing ? Well, we’ll see in more detail what needs putting in the different <div> blocks

The Header

This block will be quick. Often the header is just a banner (an image), or for those who don’t want to do any drawing, a simple <h1> (the page’s title) will do the job.

We’ll be using a banner this time :

All the images used in this chapter are copyright zaz and venom all rights reserved (I promised them I’d put their names into the tutorial ). Thanks to them for the help on this chapter !

How do we put this image into the header ? Well we have 2 choices :

• Either we can insert it using an <img /> tag. That’s an easy way to insert an image, anyone can do that.
• Or we can write the title <h1> in the header and insert the banner using CSS.

I admit that the second solution may be a bit surprising. However we’ll be using this method so that the image is shown by simply using CSS. We’ll also add a link to the title of the page so that it sends users back to the home page of the site.

Code : HTML

<div id="header">
     <h1><a href="index.html" title="Return to home page">Mechanical Spirit</a></h1>
</div>

As you can see the link goes to index.html. That’s because the home page of a web site must always be called index.html.

The Menu & Sub-Menus

In the menu block (in blue), we’ll need to make several sub-blocks to separate the different elements in the menu.
Take a good look at the following diagram : it’s a zoom on the menu block I showed earlier :

As you can see, it contains 2 sub-blocks (green) which will be sub-menus.
How do we do this ? In XHTML it is very easy :

Code : HTML

<div id="menu">

     <div class="sub-menu">
          Text of the first menu
     </div>

     <div class="sub-menu">
          Text of the second menu
     </div>

</div>

All you have to do is nest the <div> tags. The first one (the main one) surrounds the other ones (the sub-menus). I’ve given these a class called sub-menu so that we can modify their CSS later.

Right, now we need to add text to the menu so that it’s like the diagram I showed above.
In each sub-menu we need to add a title menu. Do you remember the tag to add titles ? Yes, there are 6 tags (depending on the importance of the title) : from <h1> to <h6>. As the titles of menus are less important (and we want to reserve the important titles for the page content) we’ll put the menu titles in <h4>.
After that, we’ll add a list (<ul>) to organise the menu.

Code : HTML

<div id="menu">

     <div class="sub-menu">
          <h4>Menu title</h4>
          <ul>
               <li>Link</li>
               <li>Link</li>
               <li>Link</li>
          </ul>
     </div>

     <div class="sub-menu">
          <h4>Menu title</h4>
          <ul>
               <li>Link</li>
               <li>Link</li>
               <li>Link</li>
          </ul>
     </div>

</div>

Generally, we tend to put lists in menus because it allows us to make an organised menu easily.
You may have noticed that I wrote link but I haven’t added any <a href=…> tags. It’s just to avoid complicating the code too quickly, however we will add links to the menu or else it won’t be very useful

Code : HTML

<div id="menu">

     <div class="sub-menu">
          <h4>Menu title</h4>
          <ul>
               <li><a href="page1.html" title="Go to page 1">Link</a></li>
               <li><a href="page2.html" title="Go to page 2">Link</a></li>
               <li><a href="page3.html" title="Go to page 3">Link</a></li>
          </ul>
     </div>

     <div class="sub-menu">
          <h4>Menu title</h4>
          <ul>
               <li><a href="page4.html" title="Go to page 4">Link</a></li>
               <li><a href="page5.html" title="Go to page 5">Link</a></li>
               <li><a href="page6.html" title="Go to page 6">Link</a></li>
          </ul>
     </div>

</div>

And that’s it, you’ve got a nice clean menu, with sub-menus !
You can, if you want, add other sub-menus. There are no limits, but don’t go over the top or visitor’s won’t know what to click on.

You don’t have to (even if it is more common) put links and lists in a menu. If you want to add text to it just use <p></p>.

The body

The body is the main part of the page. That’s where we’ll put the content.

So, as I don’t know what your site will talk about, I can’t tell you what to put in it. Only you know that

However I can give you some indications to get you started.
To start, we’ll add a <h2> title which will be the main title of the page (<h1> is the name of the website). Generally, I put the same title in the <title> tag (in <head>) and in the <h2> tag.

After, we need to write paragraphs (<p>), and maybe add some sub-titles (<h3>) to give some structure to the text

That gives us quite a simple code for the body :

Code : HTML

<div id="body">
     <h2>My Super Site</h2>

     <p>
          Welcome to my super site !<br />
          You will love it here, it's a super site that talks about...hmmm...I'm still looking for a subject for my site.
     </p>

     <h3>Who is this site for ?</h3>
     <p>
          For everybody ! If I start to privilege certain people, I'll be accused of discrimination :-0 )<br />
          Whether you're a fan of weapons or Barbie and Ken, this site is made for you ! Yes it is !
     </p>

     <h3>The author</h3>
     <p>
          Who's the author of this site ? It's me, what kind of question is that :-p<br />
          I will try to make the best site in the world (it can't be that hard). My aim is to attract as many people as possible to my site, to make them addicted to it, then to get them under my control.<br />
          Then I'll take control of the world. After that I'll search every corner of the Earth for more people to put under my great power. Mouahahahaha !!!
     </p>
</div>

Don’t take any notice of the text. It’s just a load of rubbish to fill up the space

Don’t forget that you can put whatever you want here. If you want to add images, text, more paragraphs, then go on, feel free ! It is the content of your site after all

Finally : The Footer

As I’ve already said, the footer is normally for writing the author’s name, and, if you want, you can add a copyright to your site to give it a bit of extra class

Code : HTML

<div id="footer">
     <p>Copyright &copy; 2010, "Rubbish Corporation". All Rights Reserved</p>
</div>

The Complete XHTML Code

We have seen in detail what needs to be put in the 4 blocks.
Now, we’ll assemble all the code we’ve been working on, without forgetting the DOCTYPE, <head> etc…

This is what we’ve got :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <title>My Super Site</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
     <div id="header">
          <h1><a href="index.html" title="Return to home page">Mechanical Spirit</a></h1>
     </div>

     <div id="menu">
          <div class="sub-menu">
               <h4>Title menu</h4>
               <ul>
                    <li><a href="page1.html" title="Go to page 1">Link</a></li>
                    <li><a href="page2.html" title="Go to page 2">Link</a></li>
                    <li><a href="page3.html" title="Go to page 3">Link</a></li>
               </ul>
          </div>

          <div class="sub-menu">
               <h4>Title menu</h4>
               <ul>
                    <li><a href="page4.html" title="Go to page 4">Link</a></li>
                    <li><a href="page5.html" title="Go to page 5">Link</a></li>
                    <li><a href="page6.html" title="Go to page 6">Link</a></li>
               </ul>
          </div>
     </div>

     <div id="body">
          <h2>My Super Site</h2>
          <p>
               Welcome to my super site !<br />
               You will love it here, it's a super site that talks about...hmmm...I'm still looking for a subject for my site.
          </p>

          <h3>Who is this site for ?</h3>
          <p>
               For everybody ! If I start to privilege certain people, I'll be accused of discrimination)<br />
               Whether you're a fan of weapons or Barbie and Ken, this site is made for you ! Yes it is !
          </p>

          <h3>The author</h3>
          <p>
               Who's the author of this site ? It's me, what kind of question is that :-p<br />
               I will try to make the best site in the world (it can't be that hard). My aim is to attract as many people as possible to my site, to make them addicted to it, then to get them under my control.<br />
               Then I'll take control of the world. After that I'll search every corner of the Earth for more people to put under my great power. Mouahahahaha !!!
          </p>
     </div>

     <div id="footer">
          <p>Copyright &copy; 2010, "Rubbish Corporation". All Rights Reserved</p>
     </div>
</body>
</html>

Well, I’ve got to say : well done !
You’ve just created your first real XHTML page !

I realise that you probably wouldn’t have figured all of that out by yourselves, but the main thing is that you understand and follow along with me. There isn’t anything new in this XHTML code; we’ve already seen all these XHTML tags.
And you’ve got to admit that this code isn’t very long (it was a lot longer a few years ago).

However we haven’t finished yet. Without the CSS our page doesn’t look like anything spectacular.

The funny thing is that the XHTML code is enough to make the design. All we need to do now is add a bit of CSS and our site will be nice and clean

You don’t believe me ?
Be careful … don’t underestimate the power of CSS, you could regret it

Second, The CSS

Now we can start the CSS.
This part is important because you must understand how each line of code changes the design.

For that reason I’ll break this part down into lots of stages, and I suggest that you check out your site after each little step.

If you want to understand properly, also try making a few changes to the CSS. If you can’t figure out a line, try taking it out and see what happens. That’s how I learnt, and I think it’s one of the best ways to learn

Resetting The Layout

By default, each browser has its own way of showing different tags on the screen. For example, in our design, there is a big space between the titles and the paragraphs. So that we can start from scratch we need to get rid of these default settings.

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

Easy ! The * means everything, so with this code we’re taking the margins off all the tags.
Now save the file as style.css (or something else if you want ). All that’s left to do now is attach the CSS to the XHTML file in the <head> :

Code : HTML

<link rel="stylesheet" media="screen" type="text/css" title="example-css" href="style.css" />

As you can now see, if you refresh the web page, all the margins have gone !

Aligning The Design

To start with, we’re just going to work on the <body> tag. Yes, I know we haven’t really worked on this tag before, but it works in the same way as everything else.
As a reminder, <body> is the tag that surrounds all the content in your page. If we say the <body> is so wide in pixels (for a fixed design), and we want it to be centred (with margin:auto;), then our job is nearly finished

For the width of the page, I’m going to put 760 pixels. Why 760 ? Because it’s less than 800px, so visitors using a resolution of 800*600 won’t have to scroll from left to right to see the whole page.

As for the margins, a margin: auto; should be enough to centre the design. I’ll also add a margin to the top and bottom to stop the design from being glued to the edges of the browser.

Finally I’ll add a background image so that the page is a bit less empty.

Download Source Files
CLICK HERE TO DOWNLOAD THE IMAGES FOR THIS TUTORIAL

Here’s what it should give :

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;  /* align the page in the centre */
     margin-top: 20px;  /* add a 20 pixel margin at the top */
     margin-bottom: 20px;  /* add a 20 pixel margin at the bottom */
     background-image: url("images/bg.png");  /* a background image to avoid it being ugly and white :-p */
}

Try taking out a few lines of code to see what they all do :

• If you take out the background-image, the background of the page will be white
• If you take out margin-top or margin-bottom the page will be glued to the edges of the browser
• If you take out margin:auto your page will align to the left of the browser.

The Header

As promised, we’ll show the header of the site using CSS. Earlier we only put in the title of the site using a <h1> tag. Inserting the header using CSS is useful for sites with the ability to change designs, and using this technique you don’t need to insert an alt value for you header image

Now we have to insert the banner using CSS :

1. The first thing to do, if we want the banner to be visible, is to enlarge the size of the header block so that we can see the whole banner.
   As the banner is 758*100 pixels, we need to input these dimensions :
   width: 758 px;
   height: 100px;

2. Next we need to insert our background-image (the banner) because the block is still empty.
   background-image: url(images/banner.png);

3. Our banner should only have enough room to appear once, but it doesn’t take a lot to make sure that it isn’t repeated :
   background-repeat: no-repeat;

4. Finally, to avoid the content of the page from being glued to the banner we need to add a small margin to the bottom of the header :
   margin-bottom: 10px;

That’s it. We should now have this :

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

However you will notice that the title we made is still on the page. To get rid of it we need to do the following :

1. set the same widths as the banner :
   width: 758px;
   height: 100px;

2. transform the link from an inline to a block so that the dimensions can be applied to it :
   display: block;

3. indent the text so that it goes out of the screen :
   text-indent: -9999px;

Now we have this :

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

Now that we have inserted the banner using CSS, all you have to do to change the design of the banner is change the background-image.

Why is there a # before header ? Don’t you normally use a point ?

No, a quick reminder for those who may have forgotten :

• For a class, you use a . (point) in front of the name in the CSS.
• For an id, you use a # before the name. And look at the XHTML code, header is an id !

The Menu

This is a bit harder.
We’ll have to put the menu to the left of the body, whereas at the moment it is above.

To do this, the most common and quickest method, is to use the CSS property float. It’s a bit of a particular property, as we have already seen, and it will be very useful here to correctly position the body and the menu.

We will also give the menu a width of 120 pixels, so that it isn’t too big.

After that we’ll work on the class sub-menu (which is a part of the menu). We’ll give it a bit of a darker background colour, a background image with repeat-x (which only repeats horizontally).
Then we’ll add a border to each element of the menu to make them stand out more. 2px solid black should be good.
Finally we’ll put a margin-bottom on each element to separate them.

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

#menu {
     float: left;  /* The menu will float to the left */
     width: 120px;  /* Very important : give the menu a width */
}

.sub-menu {
     background-color: #626262;
     background-image: url("images/top-bg.png");  /* background image repeated horizontally across the top of the menu */
     background-repeat: repeat-x;
     border: 2px solid black;
     margin-bottom: 20px;  /* separate the different elements of the menu */
}

Yet again, if you want to understand everything, I suggest you remove a few lines of code to see their effect.

As you can see if you test the code, it’s not wonderful yet, but it is getting better. You can already distinguish the submenus without a problem, however the content goes beneath the menu when it’s finished.
That is normal because that’s how a float works. Take another look at this image I showed in a previous chapter :

How do we stop the text from dropping beneath the menu ?

We need to add a margin-left to the body. This is a simple trick that does the job quickly. However we’ll see that when we get to the body.

We still haven’t finished on the menu. We still need to add a few effects.
I won’t waste time explaining everything in detail. It’s simple, and it’s just to make things look a bit better.

The main thing to understand here, is that I’m nesting elements.
Do you remember, when we write for example :
.sub-menu ul
… means all the <ul> tags inside a sub-menu.

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

#menu {
     float: left;  /* The menu will float to the left */
     width: 120px;  /* Very important : give the menu a width */
}

.sub-menu {
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
     margin-bottom: 20px;
}

/* a few effects on the menu */

.sub-menu h4 {  /* all the titles in the menu */
     font-size: 20px;
     margin-top: 18px;
     margin-bottom: 12px;
     color: #b3b3b3;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
     text-align: center;
}

.sub-menu ul {  /* all the lists in the menu */
     list-style-image: url("images/point.png");  /* change the looks of the points */
     padding: 0px;  /* get rid of any inner margin there may be */
     padding-left: 20px;  /* ... then add a 20 px margin to the left */
     margin: 0px;  /* same thing on the outer margin */
     margin-bottom: 5px;  /* add a 5 px margin to the bottom */
}

.sub-menu a {  /* all the links in the menu */
     color: #b3b3b3;
}

.sub-menu a:hover {  /* when the mouse rolls over the links */
     background-color: #b3b3b3;
     color: black;
}

It’s already looking nicer isn’t it ?
And the effect of the :hover on the links in the menu, is easy to do, so everything’s good so far

I’ve got to precise some things though. You have seen that I put a padding (which modifies the interior margins), then a padding-left (which only modifies the inside margine on the left).
This is just a method to save time. Just read the lines in order :

1. First, modify all the margins and give them all a value of 0 px with padding
2. Second, modify the left margin. It was 0 px, now we change its value and make it 20 px with padding-left (we squash the old value)

If I wanted, I could have done this instead :
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 20px;

But that’s long, and like all other webmasters, I’m lazy

The Body

For the body, it’s very important to define the correct margins.
The problem that needs sorting out urgently is the problem of the text going under the menu. As I said earlier, this is normal because we used float: left on the menu.

How do we stop the text from going under the menu then ?

We just need to change the margin to the left of the body. It’s the outer margin, so we’ll use margin-left. We need to give it a big enough value to push the text over to the right, so that it doesn’t go under the menu (so we need a greater value than the width of the menu). Here for example, we’ll put a value of 140px. As if by magic, you’ll see, the body will be correctly placed !

Let’s not stop now
We’ll add a margin-bottom so that the footer won’t be glued to the body :
margin-bottom: 20px;

We’ll also add a small padding (inside margin) on every side so that the text doesn’t touch the edge of the body :
padding: 5px;

Then we’ll add a background colour, a background-image that repeats across the top of the body, a border … well, all that’s decoration

Code : CSS

* {
     border: 0;
     margin: 0;
     padding: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

#menu {
     float: left;  /* The menu will float to the left */
     width: 120px;  /* Very important : give the menu a width */
}

.sub-menu {
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
     margin-bottom: 20px;
}

.sub-menu h4 {
     font-size: 20px;
     margin-top: 18px;
     margin-bottom: 12px;
     color: #b3b3b3;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
     text-align: center;
}

.sub-menu ul {
     list-style-image: url("images/point.png");
     padding: 0px;
     padding-left: 20px;
     margin: 0px;
     margin-bottom: 5px;
}

.sub-menu a {
     color: #b3b3b3;
}

.sub-menu a:hover {
     background-color: #b3b3b3;
     color: black;
}

/* the body of the page */

#body {
     margin-left: 140px;  /* margin to the left to stop the text going under the menu */
     margin-bottom: 20px;  /* bottom margin to separate the body from the footer */
     padding: 5px;  /* to stop the text from touching the edge of the body */
     color: #b3b3b3;
     background-color: #626262;  /* a background colour for the body */
     background-image: url("images/top-bg.png");  /* a small image that repeats across the top of the body */
     background-repeat: repeat-x;
     border: 2px solid black;  /* a border to show the edges of the body and look nice */
}

There are still a few things to decorate in the body. For example, the titles : we’ll change the font and use Arial which I find is nicer on titles.

We’ll also add a background image to the <h3> titles with background-repeat:no-repeat, which means that the image won’t repeat (so it will stay to the left).
To avoid the text of the title going over the top of the image, we’ll add a padding left of a few pixels. That way every time we use a <h3> title we’ll automatically get a picture of a cog !

Code : CSS

* {
     border: 0;
     margin: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

#menu {
     float: left;  /* The menu will float to the left */
     width: 120px;  /* Very important : give the menu a width */
}

.sub-menu {
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
     margin-bottom: 20px;
}

.sub-menu h4 {
     font-size: 20px;
     margin-top: 18px;
     margin-bottom: 12px;
     color: #b3b3b3;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
     text-align: center;
}

.sub-menu ul {
     list-style-image: url("images/point.png");
     padding: 0px;
     padding-left: 20px;
     margin: 0px;
     margin-bottom: 5px;
}

.sub-menu a {
     color: #b3b3b3;
}

.sub-menu a:hover {
     background-color: #b3b3b3;
     color: black;
}

#body {
     margin-left: 140px;
     margin-bottom: 20px;
     padding: 5px;
     color: #b3b3b3;
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
}

#body h2 {  /* all the h2 titles in body */
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 28px;
     color: #b3b3b3;
     text-align: center;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#body h3 {  /* all the h3 titles in body */
     height: 30px;
     margin-top: 10px;
     margin-bottom: 10px;
     background-image: url("images/title.png");  /* a small background image for h3 titles */
     background-repeat: no-repeat;  /* the image won't repeat, it will be to the left */
     padding-left: 30px;
     font-size: 22px;
     color: #b3b3b3;
     text-align: left;
}

Nice, isn’t it

The Footer (And We’ve Finished !)

For the footer there is nothing complicated or extraordinary, it’s just similar to the rest. We add a background colour, a border, check that the borders are okay etc …

Code : CSS

* {
     border: 0;
     margin: 0;
}

body {
     width: 760px;
     margin: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("images/bg.png");
}

#header {
     width: 758px;
     height: 100px;
     background-image: url("images/banner.png");
     background-repeat: no-repeat;
     margin-bottom: 10px;
}

h1 a {
     width: 758px;
     height: 100px;
     display: block;
     text-indent: -9999px;
}

#menu {
     float: left;  /* The menu will float to the left */
     width: 120px;  /* Very important : give the menu a width */
}

.sub-menu {
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
     margin-bottom: 20px;
}

.sub-menu h4 {
     font-size: 20px;
     margin-top: 18px;
     margin-bottom: 12px;
     color: #b3b3b3;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
     text-align: center;
}

.sub-menu ul {
     list-style-image: url("images/point.png");
     padding: 0px;
     padding-left: 20px;
     margin: 0px;
     margin-bottom: 5px;
}

.sub-menu a {
     color: #b3b3b3;
}

.sub-menu a:hover {
     background-color: #b3b3b3;
     color: black;
}

#body {
     margin-left: 140px;
     margin-bottom: 20px;
     padding: 5px;
     color: #b3b3b3;
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
}

#body h2 {  /* all the h2 titles in body */
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 28px;
     color: #b3b3b3;
     text-align: center;
     font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#body h3 {  /* all the h3 titles in body */
     height: 30px;
     margin-top: 10px;
     margin-bottom: 10px;
     background-image: url("images/title.png");
     background-repeat: no-repeat;
     padding-left: 30px;
     font-size: 22px;
     color: #b3b3b3;
     text-align: left;
}

/* The footer (generally at the bottom for the copyright) */

#footer {
     padding: 5px;
     text-align: center;
     color: #b3b3b3;
     background-color: #626262;
     background-image: url("images/top-bg.png");
     background-repeat: repeat-x;
     border: 2px solid black;
}

And that’s the end of the CSS, the design is finished !
To make your whole site just save your page as page1.html, page2.html, page3.html etc… then you can change the content of the different pages !

Our site is finally ready. The Mechanical Spirit design, which was created just for this tutorial, probably won’t suit your needs. However that was done a bit on purpose
Now that the design is finished, you know what to do, and the main ideas to follow. It’s up to you to create the complete design for your site, to add your colours, your backgrounds, your fonts, your effects …
Well, now you know how to do it

You are allowed (and encouraged) to use my CSS as an inspiration. I know that it isn’t the easiest thing in the world when you’re starting and trying to create first design, and all those lines of code can make you go dizzy.
The good news, is that with practice, not only will you stop getting dizzy, but you’ll also be able to create your complete design without anybody’s help

Download Source Files
CLICK HERE TO DOWNLOAD SOURCE CODE FOR THIS TUTORIAL

Download Source Files

If you want to re-use our source code, modify it, or simply check it out, just click here to download. The file contains the index.html page, the CSS, and the images used during this tutorial.

Wait, It’s Not Finished !

I’ve got a few bits of information to give you. Most of it’s just details, but you might discover a few new things, so pay attention, it won’t be long

Change The CSS, Change The Design !

By modifying the CSS, you can change the whole design without touching the XHTML code !

In fact, have a look at our final XHTML code : it doesn’t contain any information on the design. It just says that there’s a header, a menu, a body to put the content in, and a footer. That’s it !

Let The Visitor Choose The Design

One last thing I would like to show you : alternative style sheets.

If you have made several designs for your site, you can let your visitors decide which design they want to use.
For that, you have to add <link /> tags between <head> and </head>.

As well as the tag to link the CSS to the XHTML page, you have to add this line :
<link rel="alternate stylesheet" media="screen" type="text/css" title="Pink design for girls" href="pink-poney-design.css" />

This line indicates that there is another stylesheet (alternate stylesheet). If the visitor has a recent browser (pretty much anything apart from Internet Explorer), he (or she) will be able to choose the design he wants.
For information : in Firefox if you go to View -> Stylesheet, you can choose the design you want.

Sites offering several designs are rare. A lot of webmasters don’t even know it’s possible to easily do, others can’t be bothered making several designs

In the first part of the "site layout" lesson we saw the CSS properties that let you change the appearance and size of blocks. As a quick summary, we saw :

• How to change the size of blocks
• How to change the borders on blocks
• How to change margins on blocks

In this second part, we’ll see how to position them. We still need to learn how to say "I want my menu to be on the left, the content on the right, the logo of my site at the top of the page" etc…
Just to make things clear, positioning in CSS is not the easiest thing in the world… there’s theory, and there’s reality. In this chapter, we’ll only be seeing the theory (it’s a needed passage), and in the next chapter we’ll do the real thing (which will be more interesting for you !).

One thing is for sure, and you’ll need to get this straight, you’ll never make a site that’ll show up the same a pixel close on every browser. We’ll learn to make sites show up more or less correctly on every browser, which isn’t a bad place to start

Transforming Inlines To Blocks (And Vice Versa)

Now I’m going to teach you to defy the laws of physics modify the laws of CSS (brrr…).

Images (<img />) are inline tags, would you prefer them to be blocks ? No problem !
Titles (<h1>) are block tags, would you prefer them to be inline ? Still no problems !

There is a very powerful CSS property called display (to use with caution, if not you might destroy everything ).
This property can take the following values :

• block : the concerned tag will become a block
• inline : the concerned tag will become an inline

In fact display can take a lot of other values, but I’m only going to show you the 2 most used ones.

To transform an inline tag into a block, you must type :
display: block;

For example, if I want ALL of my images to be blocks I would write this :

Code : CSS

img {
     display: block;
}

Be careful, after doing this all of your images will automatically show up on a new line, like other block tags do.

Nobody said that ALL of your images had to become blocks though. I hope that you’ve already understood that you can use class on a tag so that it can have a different presentation.
For example :

Code : HTML

<img src="image.png" alt="This image is normal (inline)" />
<img src="image.png" class="imageblock" alt="This image is modified (block)" />

…and of course you’ll need the following CSS code to make the second image into a block :

Code : CSS

.imageblock {
     display: block;
}

I hope I’m not teaching you anything new about the use of class, if so return to the first chapter of the second part

And the other way ? How do you transform a block into an inline ?

Well, it’s the same thing, but you use display: inline
I’m not going to redo an example code, I think you’re good enough now to do it yourselves

A quick comment : Generally we transform inline tags to blocks but the inverse is rarely done. That’s because block tags have quite a lot of advantages : you can modify their size, margin, border etc… Well, you already know all that

Floating

The first technique we are going to see is floating. It’s a bit of a strange name, I agree, but it’s not that hard to understand.
So that you can see what we’re going to do, here’s an example of what we’re going to learn :

This allows us to "surround" an element (here an image) with text. It creates a nice presentation easily.

I imagine that the question you’re asking yourself is "But which magic property makes things float ?!".
The answer is…float. This property can take 2 values, which you can probably guess :

• left : the element will float to the left
• right : the element will float to the right

Using float is very easy, so easy that we tend to complicate things unnecessarily. In fact, there are only 2 things to do :

1. Apply a float to a tag
2. Then continue to write text after it as normal

You can use the property float on block tags & inline tags, you’ll see…

Floating Images

Here we’ll learn how to make an image float (which is inline). Here’s the image we’ll be using. Copy it into your images folder :

Here’s the XHTML code we need to write to get started :

Code : HTML

<p><img src="../images/flash.gif" class="floatingimage" alt="Floating Image" /></p>

<p>This is a normal paragraph text, written after an image, but which will <q>surround</q> it because the image is floating<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum mollis scelerisque nulla. Donec feugiat augue et sem. Nulla ut purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla volutpat leo quis magna. Donec accumsan lobortis ligula. Donec nec ante eu wisi tempus dictum. Sed nulla est, laoreet nec, consequat quis, iaculis non, tortor. Nunc sed purus. Sed metus. Donec posuere. Pellentesque porttitor tortor non eros. Ut rutrum erat a nunc. Duis non erat et orci viverra mollis. Sed lacinia velit a magna. Etiam aliquam, felis eu imperdiet auctor, ante augue dignissim odio, a pharetra tellus neque vel urna. Cras gravida adipiscing lectus. Nullam lorem ipsum, convallis eleifend, congue placerat, dictum non, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

A common mistake people make is putting the image after the text. No, you shouldn’t, the image should be before the text whether it’s floating on the left or the right.
If you try putting <img /> after the paragraph, you’ll see that it doesn’t work.

All that you need to understand now is that we only need to modify the CSS of the image, and not of the paragraph. The paragraph doesn’t need modifying, it will automatically be placed as needed.
Here’s the only bit of CSS code we need to make the image float to the left :

Code : CSS

.floatingimage {
     float: left;
}

You can also have fun floating the image to the right, just put float: right, and it’s done !

Create An Illuminated Letter (exercise)

Sometimes I have a nightmare. I imagine that I’m writing a long lesson on floating in CSS and everyone is yawning, falling asleep, getting bored. Brrr… This vision gives sends chill down my spine every time.

So, to avoid my worst nightmare coming true I decided to make you work a bit on a small exercise.

Do you know what an illuminated letter is ? No.
Well it’s not that complicated

An illuminated letter is the first letter of a paragraph written a lot bigger than the rest. You see them quite often in books (if you read books !). Here’s what you need to try and do :

The only guidelines are that you must use the following code and you’re not allowed to modify it.

Code : HTML

<p>The viewers of Euro PC Solutions want to learn how to make websites. They have already read 12 chapters on coding in XHTML and CSS but still haven't learnt to make a complete site ! However of this will soon change. After this rather long chapter on block tags and inlines they will do a complete exercise to build a website from a design made in Photoshop !</p>

Your objectives are to make a CSS file that will make in illumainated letter at the beginning of the paragraph. You can’t modify the HTML but in CSS every move is possible : you can use the properties you wish. If you’re having trouble remembering how to change the first letter just go back to the chapter on pseudo formats.

Get to work !
…
…
…
Brrriiiiinng!!! It’s time to stop what you’re doing !
You had to use float:left; evidently, but how do you make the first letter change ? Without modifying the XHTML ?
If you found out by yourselves that you had to use the pseudo element :first-letter then well done ! It was the only real difficulty, after everything else is easy and you can do what you want.
You need to think mainly of using the property font-size: so that it changes size and takes…let’s say 3 times more place than usual. For this I’ve put the value 3em (= 3 lines in height), but if you write 300% it’s the same thing ! However you should avoid putting something like 50px because we don’t know the size of the text in the paragraph, it can change.

Here’s the code I used to make the illuminated letter :

Code : CSS

p:first-letter {  /* I want to modify the first letter of the paragraph */
     float: left;  /* Float to the left */
     font-size: 3em;  /* Use Arial if possible */
     font-family: Arial, Georgia, "Times New Roman", Times, serif;
     font-weight: bold;  /* Put the letter in bold (it's more visible) */
     margin-right: 5px;  /* Put a 5 pixel margin to stop the text from sticking too close to the illuminated letter */
}

But there’s no need to stop there ! Nothing’s stopping you from writing the letter in white on a black background or even using a background image ! Just use your imagination

Stopping A Float

When you use a float, the text surrounds it, that’s understood.
But what do you do if you want to stop the float and make the text go underneath the floated element ? You could use several <br /> one after the other but it’s neither practical nor very clean from a code point of view…

Here’s what we would like to do :

There exists a CSS property which allows us to say : "Stop, this text needs to be underneath the float, not next to it". It’s the property clear which can take 3 values :

• left : the text goes underneath a left float
• right : the text goes underneath a right float
• both : the text goes underneath any float

To simplify things we’ll use clear:both all the time, which works after float:left; and float:right; (it works all the time).
To see how it works we’ll use the following XHTML code :

Code : HTML

<p><img src="images/flash.gif" class="floatingimage" alt="Floating Image" /></p>
<p>This text is written next to a floating image</p>
<p class="underneath">This text is written under a floating image</p>

Code : CSS

.floatingimage {
     float: left;
}

.underneath {
     clear: both;
}

And that’s all you need to do
You just apply a clear:both; to the paragraph you want to continue under the floating image !

Absolute, Fixed & Relative Positioning

Apart from floats there are 3 different ways to change the position of a block :

• Absolute positioning : allows us to position a block anywhere on the page (top left, bottom right, center etc…).
• Fixed positioning : same as absolute positioning but the block is always visible, even if you scroll the page. It’s a bit like background-attachment: fixed; (if you can still remember )
• Relative positioning : The most complicated. Lets us position the block in relation to its normal position.

As with float, absolute, fixed & relative positioning also work on inline tags such as <img /> However you’ll see that they’re used most often on block tags.

First of all you need to choose the method you want to use. To do this we use the CSS property position followed by one of the following :

• absolute : absolute positioning
• fixed : fixed positioning
• relative : relative positioning

We’ll have a look at all these methods one by one.

Absolute Positioning

You know that to use absolute positioning you need to write :
position: absolute;

However that is not enough

You’ve said that you want to use absolute positioning but you still need to say where you want the block to be placed on the screen.
For this we will use 4 CSS properties that you’re probably starting to know quite well by now :

• left : position in relation to the left of the screen
• right : position in relation to the right of the screen
• top : position in relation to the top of the screen
• bottom : position in relation to the bottom of the screen

You can give the values in pixels, like 14px, or as a percentage, like 50%.

If it’s not very clear to some of you, here is a diagram that should help you understand :

With that, you should be able to correctly place your block

We need to use the property position followed by at least one of the above properties (top, right, left, bottom). For example if you write :
position: absolute;
right: 0px;
bottom: 0px;
…your block will be placed at the bottom right of the screen (0 pixels from the right and 0 pixels from the bottom).

For this example we will use a universal tag <div> (block). I will write a paragraph and will place two or three words in the block :

Code : HTML

<p>
     This is a normal paragraph.<br />
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer vel libero. Cras dolor. Quisque quis odio eget justo pulvinar aliquet. Morbi luctus mi. Fusce leo. Integer eleifend condimentum felis. Phasellus vitae nibh. Mauris pellentesque porta magna. Quisque at turpis. Praesent semper odio eget risus. Praesent bibendum imperdiet massa. Quisque ac arcu ac augue dapibus vestibulum. Pellentesque gravida. Mauris turpis. Aenean molestie. Praesent at quam et ligula pellentesque luctus.
</p>

<div>Placed Block</div>

At the moment you’ll notice that nothing extraordinary has happened. You can just see a paragraph followed by a couple of words.
Now let’s add some CSS to position the div block :

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;

     position: absolute;
     left: 35px;
     top: 50px;
}

I’ve put in a yellow background and green border so that you can see the block better.

As you can see the block goes over the paragraph; it masks the paragraph. It’s one of the main advantages and defaults of absolute positioning, there is no control, you can really put the block where you want on the page, but be careful not to mask your text.

Here’s another example to show you that you can really put the block anywhere :

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;

     position: absolute;
     right: 50%;
     bottom: 20px;
}

Here’s a small technical precision for those who want to go further (the others can ignore it): if you want to use absolute positioning on block A, and inside this block you want to use absolute positioning on a block B, the positioning will be in relation to the top left corner of block A and not of the screen.
Ahhh…the joys of positioning in CSS

Fixed Positioning

This works in exactly the same way as absolute positioning, however this time the block will always stay in the same place on the screen, even if you scroll.

Fixed positioning works on every browser apart from Internet Explorer 6 and earlier. On these versions the block won’t be placed at all.

Instead of writing position: absolute; we need to write position: fixed; in our CSS. Like before we use top, left, right and bottom to place the block where we desire.

position: fixed; can be particularly useful to make a menu that is always visible :

Code : HTML

<p>
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dapibus, purus et suscipit nonummy, nisl sapien varius velit, a dapibus velit diam a magna. Ut bibendum, velit ut ultricies blandit, metus tortor bibendum diam, vitae aliquet magna ligula id diam. Etiam id diam. Cras volutpat ligula vel arcu. Aenean ullamcorper mauris ultrices neque. Praesent blandit nunc a lectus. Aliquam leo tellus, dictum feugiat, pharetra sed, fringilla non, dui. Cras tincidunt. Proin in dui nec risus tristique porttitor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In posuere interdum quam. Nam sed dolor.<br />
     Vivamus a dolor a erat dapibus pretium. Aliquam pulvinar neque id sem. Vestibulum ut pede. Aliquam scelerisque, wisi volutpat accumsan accumsan, diam diam sagittis elit, at tempor orci tortor ac urna. Aliquam dapibus arcu id libero. Praesent pharetra. Aliquam erat volutpat. Morbi lorem lorem, varius nec, venenatis sit amet, scelerisque et, lacus. Vivamus eget erat eleifend est laoreet ullamcorper. Morbi erat elit, tincidunt non, imperdiet ac, viverra ut, tellus. Cras ipsum risus, consectetuer malesuada, pulvinar non, posuere in, mauris. Cras erat tellus, mollis in, ullamcorper vel, semper ut, mauris. Pellentesque nonummy libero eu pede. Praesent quam pede, tincidunt quis, rutrum at, accumsan at, felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vel est placerat velit vestibulum tempus. Integer sollicitudin rutrum neque. Integer pretium nulla. Proin a mi. Integer suscipit vestibulum ligula.<br />
     Quisque vitae purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ultricies interdum tortor. Fusce pellentesque urna sed turpis. Maecenas sit amet enim et enim aliquet semper. Morbi risus. Pellentesque varius erat vitae mi. Integer sapien dolor, tempus a, fermentum et, viverra eu, leo. Sed vitae felis. Proin enim. Donec tincidunt pede sed urna. Sed in velit. Sed gravida ultricies dolor. Aenean tortor nibh, cursus quis, vestibulum vehicula, semper non, nunc. Etiam fermentum, mauris ut rhoncus hendrerit, pede nunc mattis felis, eu molestie lacus metus id eros. In hac habitasse platea dictumst.<br />
Vestibulum non leo in purus convallis auctor. Praesent quis arcu. Nunc magna. Vestibulum vel dolor. Curabitur diam. Suspendisse ut justo. Sed at quam quis massa viverra iaculis. Suspendisse eget augue nec arcu condimentum molestie. Vivamus tincidunt mauris vitae ante. Cras metus turpis, ullamcorper eu, consectetuer a, commodo feugiat, metus. Donec sit amet sem. Nunc blandit nibh. Curabitur eros libero, sagittis id, accumsan vel, dignissim id, orci. Donec eleifend erat ac tellus. Integer in nunc vitae quam aliquet interdum. Pellentesque blandit, ante ac ultricies varius, nibh eros vulputate justo, sit amet facilisis sem enim sit amet nunc. Maecenas at ligula vel mauris laoreet placerat. Integer pulvinar libero sit amet nulla. Praesent nibh turpis, sagittis vitae, congue non, malesuada sed, dui. Nunc et mauris.
</p>

<div>
     <p>Menu</p>
     <ul>
          <li>Home</li>
          <li>Forum</li>
          <li>Guest Book</li>
     </ul>
</div>

Code : CSS

div {
     background-color: yellow;
     border: 1px solid green;
     width: 150px;
     height: 250px;

     position: fixed;
     right: 40px;
     top: 60px;
}

p {
     width: 300px;
}

Relative Positioning

A bit more delicate to use, relative positioning can rapidly become very tricky if you’re not careful.
Let’s take for example some important text, situated between <strong> tags.

To start I’ll put a red background on it to make it more visible.

Code : HTML

<p>There's no doubt, <strong>this text is important</strong> if you want to correctly understand relative positioning.</p>

Code : CSS

strong {
     background-color: red;  /* the background is red */
     color: yellow;  /* the text is yellow */
}

When you use position: relative; and you apply top, left, right, bottom properties the text on the red background will be moved in relation to its original point.

I did say it was more complicated You just need to do a few tests to understand it.
Let’s take an example : I want the text to move 55 pixels to the right and 10 pixels down. I will therefore ask the left side to move over by 55 pixels and the top to move by 10 pixels :

Code : CSS

strong {
     background-color: red;
     color: yellow;

     position: relative;
     left: 55px;
     top: 10px;
}

The text is moved in relation to its original position :

That’s the main idea. It’s up to you to decide if you need it or not but at least you know how it works

Now that you know that, you’re ready for the next chapter…
But what was the next chapter again ?…Ah yes! It’s a practical exercise
The next chapter will not teach you anything new, but will interest you a lot : I’ll be showing you how to code a design from A to Z with what we’ve learnt

Are you ready ? Good because it’s now that everything’s going to start coming together. Up until now you could follow my small examples and invent your own but you still couldn’t create a web site.
The 2 chapters that you are now going to read are the turning point in these lessons : after this, you’ll be able to design your own web site with its design and everything ! And for those who are scared of not being able to manage don’t worry : I’m not going to abandon you. I’ve already planned to show you the whole process in a complete web design exercise

The title of this chapter says quite a lot. We’ll be setting up our web site, which means it’ll soon be ready !
And, as I’ve thought that some of you may not have listened properly when I was talking about the inline / block tags, I don’t think it would hurt to quickly see what they are again

Block & Inline Aren’t The Same !

All the way through the previous chapters, I kept on saying inline and blocks. I insisted on the fact that it was important to understand, because a lot would be based around it after.
Well, guess what, it’s now that understanding the difference is important. If you can’t tell the difference between an inline tag and a block tag, you will quickly be unsettled. Therefore don’t hate me for this small reminder

Euhh, what are we talking about here ?

We’re talking about tags. We can class XHTML tags in one of these two categories : inline and block.
What I’m expecting of you is that you know if a tag is inline or block.

For example, <p></p> ?
Yes, it’s a block tag.
And <a></a> ?
That’s an inline tag.

But how do I recognise an inline tag or a block tag ?

In fact, it’s easy enough to understand :

• block : a block type tag will automatically create a new line before and after itself. Your website will be created with a series of blocks, one placed after the other. But you will see as well that it’s possible to put one block inside another, which will give us considerably more possibilities to create our site !
• inline : a tag of th type inline has to be placed inside a block. An inline tag doesn’t create a new line after, the text inside it therefore just goes after the existing text in the block which explains why it’s called inline (on the same line).

Does <p></p> start a new line ?
Yes, it’s therfore a block tag.
Does <a></a> start a new line ?
No, the text just puts itself next to what is already written, it stays on the same line. It’s therefore an inline tag.

Easy, isn’t it ?

For those who are still having problems, here’s a quick diagram I made. This diagram illustrates how I see things :

On the blue background is everything that is type block. On the yellow background is an inline tag. I could have put a block inside a block but I don’t want to compicate things too much for the moment The inline tag <a></a> is inside a block tag (which I said was necessary), and the text is written on the same line. In fact, like on this image, you can ask yourself can <a></a> go inside such a tag ? If the answer is yes then the tag is a block, if not it’s inline.

A Few Examples

To help you recognise inline tags and block tags, here’s a small table with some of the most common tags :

This table is not complete, it’s far from it. If you want to have the complete list of tags that exist, go to our annexe containing all the tags.

Universal Tags

You already know them because I presented them a few chapters ago. These tags don’t do anything in particular (differently to <p> which is a paragraph, <strong> which is important etc…).
The main interest of these tags is that we can apply a class (or id) to them when no other tag is convenient.

There are 2 generic tags, and as if by pure luck the only difference between them is that one is inline and the other block :

• <span></span> (inline) : we’ve already used it if you remember. I used it to show you a few CSS properties in the middle of a line. Do you remember the following code ?

  Code : HTML

  <p>As <span class="name">Neil Armstrong</span> said on 20 July 1969...</p>
  

  If there was an XHTML tag <name></name> I would have used it. But as that’s not the case I had to use <span> and apply a class to it that I invented (name).

• <div></div> (block) : this tag, like span, doesn’t have any particular meaning. I personally think of it as an invisible box used to do whatever you wish. In the following chapters we will use it a lot, namely for creating the design of your web site. You will see that a design, in fact, is a series of blocks placed as we want.

Respect The Semantics !

Universal tags are useful in certain cases, but don’t abuse them. I’ll warn you now : a lot of webmasters use <div> and <span> too often and forget that other, more adapted tags exist.
Here are 2 examples :

• Example of a useless span :
  I should never see in one of your codes :
  <span class="important">
  …when <strong> exists for that purpose !

• Example of a useless div :
  In the same way, this is completely useless :
  <div class="title">
  …as there already exists tags made especially for titles (<h1><h2><h3>…)

Yes, but you’ll say that the final result (visually) is the same.. I agree completely.
But, whereas the tags span and div don’t mean anything in particular, the tags strong and h1 do have a meaning. Strong means important and h1 means main title. These tags are therefore important for Google and other search engines !

In XHTML, we ask that you use meaningful tags as often as possible. We call it respecting the semantics.
The advantage is that, by respecting this, your code will have "logic". When Google’s robots reference your site, they will understand the meaning of the tags which will make your search engine rankings better

Size

For the moment we’ll only work on block tags.

To start with, we’ll look at the size of the blocks. Differently to an inline, a block has precise dimensions. It has a width and a height.
Which means that, what a surprise, we have 2 CSS properties :

• width : the width of the block. It can be given in pixels (px) or as a percentage (%)
• height : the height of the block. Once again it can be given in px or %.

By default, and it’s very important to know this, a block uses 100% of the available width. Look for example at this XHTML code that doesn’t use any CSS properties.

Code : HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>

If you copy the code into a HTML document you’ll notice that the paragraph takes the whole width of the screen (like all the other block tags).
Now let’s add a bit of CSS to modify the width of our paragraphs. The following CSS says "I want my paragraphs to use half of the available space" :

Code : CSS

p {
     width: 50%;
     text-align: justify;  /* Justified text to better see the width that's used */
}

Let’s test the code on the previous HTML code. You’ll see that the paragraph now uses half of the screen !

Percentages are very useful for making sites that adapt themselves automatically to the resolution of your visitor’s screen.
However, you may need a size in pixels :

Code : CSS

p {
     width: 250px;
     text-align: justify;
}

Minimum & Maximum

It will also be useful for you to tell your blocks to have a maximum or minimum size. It’s here that the following 4 CSS properties come into play :

• min-width : minimum width
• min-height : minimum height
• max-width : maximum width
• max-height : maximum height

Be careful however, the properties don’t work at all on Internet Explorer 6, and only partially on IE7.

Cutting Blocks With An Overflow

Let’s suppose that you have a very long paragraph and you want (for a reason that only concerns you), that it’s 250px wide and 100px high.

Code : CSS

p {
     width: 250px;
     height: 100px;
     text-align: justify;
}

Wait, I thought the paragraph would be 100px high !?

Yes, but if the text doesn’t have enough room, the block will enlarge itself to make all the text visible. If you want to cut your paragraph so that it has an exact dimension of 250×100, you’ll need to use the CSS property overflow.
The values that overflow can take are :

• visible (by default) : if the text goes over the size limits, the block will be enlarged to make everything visible.
• hidden : if the text goes over the limits it will be cut off. You won’t be able to see the rest of it
• scroll : here again the text will be cut off if it goes over the limits. However, this time the browser will add scroll bars so that you can see the text. It’s a bit like a frame inside a page.
• auto : automatic pilot mode . Your bowser decides whether or not to put scroll bars (they will be added if needed).

With CSS we can test overflow :

Code : CSS

p {  /* All the paragraphs will have these properties */
     width: 250px;
     height: 100px;
     text-align: justify;
}

/* And each of the paragraphs will have one of the following properties */
.cut {
     overflow: hidden;
}

.scroll-bars {
     overflow: scroll;
}

.auto {
     overflow: auto;
}

Code : HTML

<h2>overflow: hidden</h2>

<p class="cut">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>

<h2>overflow: scroll</h2>

<p class="scroll-bars">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>

<h2>overflow: auto</h2>

<p class="auto">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sapien pede, malesuada ac, ultricies in, dignissim eget, mauris. Nullam varius diam ac ligula. Morbi mattis posuere odio. Ut mattis risus ac erat. Nam volutpat, nisl vitae venenatis mollis, ante erat tincidunt purus, nec ornare felis tellus sed purus. Phasellus orci.</p>

With hidden we can’t see the text at all.
With scroll, horizontal and vertical bars have been added (even though we don’t need a horizontal one).
In auto, the browser has thought I don’t need a horizonatal scroll bar and taken it away.
As you may have guessed, mainly we use overflow:auto when making websites and we want to limit the size of the text boxes.
overflow can be useful if you wish to create frames inside your web page.

There exists an old HTML tag <iframe>, which gives more or less the same result. However this tag no longer exists in XHTML (it’s outdated). So you’ll have to use an overflow in its place

Borders

CSS offers a wide variety of borders to decorate your page. So many that there are a lot of CSS properties, and if I gave them you all now you wouldn’t know where to start.
So, to get to the essentials, I’ve decided to just show the mega-property that regroups everything. Do you remember a mega-property ? Yes, we saw one : background. It was for the background of your web page. Go to the chapter on backgrounds (Text Formatting part 2/2) to see if you can’t remember.

Here, we’re going to see the mega-property straight away, because in reality it’s what we use the most often.
The mega-property in question is border. It’s this property that allows us to indicate which border we want to add to a block.

Like all mega-properties that respect themselves, you can give it several values (here, there are 3 values to use). You don’t have to use them all (you can use 2, or just 1), and the order doesn’t have any importance.
Don’t forget that, because a lot of people think there’s a certain order to respect and rack their brains for nothing

As I’ve just said, with border there are 3 values we can use to change the appearance of our borders :

• the width : give the width of your border. Put a value in pixels (like 2px), or use one of the following keywords :

  • thin : Thin border
  • medium : Medium border
  • thick : Thick border

  It’s the browser that decides how many pixels thin, medium & thick will be. Generally, it’s roughly the same on every browser (even Internet Explorer :p).
  Personnally, I prefer to use values in pixels to thin and company…But that’s just a question of taste after all

• the colour : it’s the colour of your border. Use, as we have learnt, either the name of a colour (black, red…), or the hexadecimal value (#FF0000), or the RGB value (rgb(198, 212, 37))

• the type of border : here, you have some choice. Your border can be a simple line, or dashes or 3D etc… Here are the different values available :

  • none : No border (by default)
  • solid : A straight line
  • dotted : A straight line made up of dots
  • dashed : Border made of dashes
  • double : A double border
  • groove : Border with a groove in it
  • ridge : 3D effect
  • inset : Another 3D effect (impression that it’s going down)
  • outset : Another 3D effect (impression that it’s going up)

Now let’s test all that a bit

Code : HTML

<h2>none (no border)</h2>

<p class="nothing">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>solid</h2>

<p class="solid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>dotted</h2>

<p class="dotted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>dashed</h2>

<p class="dashed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>double</h2>

<p class="double">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>groove</h2>

<p class="groove">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>ridge</h2>

<p class="ridge">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>inset</h2>

<p class="inset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<h2>outset</h2>

<p class="outset">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

Code : CSS

p {
     width: 300px;  /* All the paragraphs are 300px wide */
     text-align: justify;  /* All the text will be justified */
}

.nothing {
     border: none;
}

.solid {
     border: 2px solid black;
}

.dotted {
     border: green 2px dotted;
}

.dashed {
     border: dashed red 2px;
}

.double {
     border: 4px double maroon;
}

.groove {
     border: 4px groove teal;
}

.ridge {
     border: 4px ridge green;
}

.inset {
     border: inset 3px black;
}

.outset {
     border: black outset 3px;
}

There’s enough stuff to have fun, as you can see

Top, Right, Left, Bottom…

Who said that you had to put 4 borders on your block ? Who said they all had to be the same ?
If you want to put different borders depending on the side (top, bottom, left or right), you can do it without a problem. In any case, you can use these 4 properties :

• border-top : the top border
• border-bottom : the bottom border
• border-left : the left border
• border-right : the right border

These are also mega-properties, they work like border but only on one side.
Here are a few test borders :

Code : HTML

<h2>A Few Borders I've Invented</h2>

<p class="top-bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<p class="dots">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

<p class="very-solid">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lacinia leo ac nunc. Nulla aliquet. Nullam quam leo, volutpat vitae, venenatis eget, blandit eu, augue. Proin ac libero nec magna laoreet tempus. Nullam felis. Nam et libero. Sed velit dui, tempus in, nonummy venenatis, accumsan id, justo. Ut ullamcorper. Cras sem diam, vulputate nec, tempor at, pretium at, magna.</p>

Code : CSS

p {
     width: 350px;
}

h2 {
     border-bottom: 2px solid black;
}

.top-bottom {
     border-top: 1px dashed red;
     border-bottom: 1px dashed red;
}

.dots {
     border-top: 3px dotted blue;
     border-left: 2px solid green;
     border-right: 2px solid green;
     border-bottom: 3px dotted blue;
}

.very-solid {
     border-left: 6px solid black;
     border-right: 6px solid gray;
}

In particular, you’ll notice that I’ve applied a border to the bottom of the title. It doesn’t have anything to do with underlining.
As I told you earlier : by default, a block (like the title), uses 100% of the available width. Here, the block uses the whole width of the screen. Putting a border undereath it shows this.

Putting a border at the bottom of a title is quite a stylish decorating method. That way the title creates a separation line, which gives more structure and balance to your page. What’s more is that it’s easy to use.
After, either you like it or you don’t…
…I like it

If you want to apply the same border 4 times in your block don’t bother with using all these CSS properties : just use border.

It Also Works On Inline Tags !

I told you that all the CSS properties that we have just seen are mainly applied to block tags…but not always. For example, you can use border on inline tags (even if it is done more rarely).

There’s an inline tag upon which we often use border : it’s <img /> (for images). In effect, do you remember that if you make an image into a link, it’s surrounded by an ungly blue border ?

Now with CSS you can avoid this eye-sore :

Code : CSS

a img {  /* All the images contained in a link */
     border: none;  /* Take the border away */
}

CSS is magic

For those who have (already) forgotten, I used nesting. If I write a img, it means all the <img /> tags contained inside a link <a>…

Instead of border: none, I could have written border: 0px or border: 0 (it works aswell, with 0 you don’t need a measurement). Most webmasters put border:0 simply because it’s the shortest method.
Don’t forget, webmasters are humans like everybody else : the less they do, the happier they are

Margins

Ah, the joy of margins
It’s not the moment to sleep my friends

Properly understanding margins is vital. If you don’t know exactly how a block’s margins work, you will have big problems putting together your design !

Every block has a margin. The important thing is to know that there are 2 types of margins :

• Internal margins
• External margins

Look at this diagram :

I’ve put a border on this block so that you can see the margins better.

The distance between the text and the border is the internal margin (in green).
The distance between the border and the next block is the external margin (in red).

In CSS, we can modify the sizes of the margins with the two following properties :

• padding : gives the size of the inside margin. Normally given in pixels (px).
• margin : gives the size of the outside margin. Given in pixels (px).

To be able to see the margins, let’s take 2 paragraphs with a small border :

Code : CSS

p {
     width: 350px;
     border: 1px solid black;
     text-align: justify;
}

Code : HTML

<h2>Margin Tests</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Nam malesuada ligula vitae orci. Proin nec est. Sed sapien. Integer in wisi. Aenean iaculis, pede nec feugiat viverra, magna erat cursus odio, nec volutpat velit odio sed quam. Maecenas a metus. Nullam scelerisque nunc eu velit. Integer vitae libero ut arcu ullamcorper accumsan. Maecenas pulvinar lacinia ante. Curabitur iaculis nisl non diam malesuada vulputate. Suspendisse quis odio et libero tincidunt rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Vestibulum eget nulla. Curabitur a dui at sem porttitor tincidunt. Cras blandit, wisi eget faucibus ornare, leo enim lobortis nulla, in sodales dui nulla id massa.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu. Nam malesuada ligula vitae orci. Proin nec est. Sed sapien. Integer in wisi. Aenean iaculis, pede nec feugiat viverra, magna erat cursus odio, nec volutpat velit odio sed quam. Maecenas a metus. Nullam scelerisque nunc eu velit. Integer vitae libero ut arcu ullamcorper accumsan. Maecenas pulvinar lacinia ante. Curabitur iaculis nisl non diam malesuada vulputate. Suspendisse quis odio et libero tincidunt rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Vestibulum eget nulla. Curabitur a dui at sem porttitor tincidunt. Cras blandit, wisi eget faucibus ornare, leo enim lobortis nulla, in sodales dui nulla id massa.</p>

As you’ll notice, by default there is no padding. However there is a margin. It’s this margin that stops the 2 paragraphs from being glued together and gives the impression that we’ve jumped a line.

Let’s suppose that I want to add an internal margin of 12px to the paragraphs :

Code : CSS

p {
     width: 350px;
     border: 1px solid black;
     text-align: justify;
     padding: 12px;  /* Inside margin of 12 pixels */
}

Now I want the paragraphs to have more room between them. Just add the property margin to get a 50px distance between them:

Code : CSS

p {
     width: 350px;
     border: 1px solid black;
     text-align: justify;
     padding: 12px;
     margin: 50px;  /* 50 pixels distance between 2 paragraphs */
}

What ??? A margin’s appeared on the left as well !

Yes, margin (just like padding) is applied to 4 sides of the block.
If you want to indicate a margin for the top, bottom, left or right you need to use precise properties…and you’ll see that the creators of CSS didn’t spend too long thinking about it, it works exactly the same way as border.

Top, Right, Left, Bottom…Here We Go Again !

You all know what top, bottom, left & right mean but I’ll still give you the list of properties for margin & paadding.

Here’s the list for margin :

• margin-top : outside margin at the top
• margin-bottom : outside margin at the bottom
• margin-left : outside margin to the left
• margin-right : outside margin to the right

Here’s the list for padding :

• padding-top : inside margin at the top
• padding-bottom : inside margin at the bottom
• padding-left : inside margin to the left
• padding-right : inside margin to the right

Is it me or that very repetitive ?

Right, to test that we’ll use margin-bottom to add space between each paragraph, that way we’ll avoid having a margin to the left like before. And, just for fun, I’ve added a left margin to the title (h2), so that it moves over a bit.

Code : CSS

p {
     width: 350px;
     border: 1px solid black;
     text-align: justify;
     padding: 12px;
     margin-bottom: 50px;  /* 50 pixels distance between 2 paragraphs */
}

h2 {
     margin-left: 30px;
}

Just one question…what’s the difference between margin-left and text-indent ?

That’s a good question

Do you remember that to move the title a bit, we used a text-indent in a chapter in part 2 ? Here, margin-left seems to have the same effect…
Visually, it is the same, at least for the moment. But try adding a really long title. With text-indent the second line will start right on the left hand side again whereas with margin-left the text will always be moved across a bit. If you add a border at the bottom of the title you will see this small difference : with margin-left the border won’t go to the edge of the screen, but it will with text-indent.

I suggest that you only use text-indent on paragraphs, to move the first line. The rest of the time just mess about with margin and padding to get the effect you desire.

Centering Blocks

It is possible to centre blocks, it’s even very useful when you want to do a design that’s placed in the centre of the screen.

However, and this is very important, this will only work if you’ve entered a precise width for the block. If you haven’t entered a width, the block won’t be centred !

Let’s take the case of our paragraphs. We’ve given them a precise width; now if we want to centre them we can give them the value auto in margin, like this :

Code : CSS

p {
     width: 350px;  /* We've given the block a width */
     border: 1px solid black;
     text-align: justify;
     padding: 12px;
     margin: auto;  /* We can ask the block to be centred with <q>auto</q> */
     margin-bottom: 20px;  /* 50 pixels distance between 2 paragraphs */
}

That way, the browser automatically centers our paragraphs. Don’t forget, I repeat once again, that margin:auto only works if you’ve given a precise width to you block!

All these theoretical notions on blocks can be a bit frustrating I know.
However, it’s something you need to know and (good news) and it’s the last obstacle before the creatio of your site. Really, once you’ve understood this, you can finally do what you want.

That’s why you need to pay good attention. Without this it’ll be really hard making your design work. This lesson is still not finished : there’s still a second part to this lesson.
I just have one good piece of advice to give you : don’t rush through things. Take the time to be certain you’ve understood. And most of all…
Do Tests…
Do Tests…
Do Tests…
Do Tests…
Do Tests…
Do Tests…

Have you started to understand yet ?
In effect, if you don’t practice enough you probably won’t learn. Take the CSS examples from this chapter, and try to modify them. It’s with practice that you learn best

So, you’ve reached the third part of these lessons I see. Well done, you’re doing well
You’ve still got quite a bit to learn on XHTML & CSS. Mainly, and it’s important, you will learn how to make the design of your web site in this part.

In part 3 we’ll learn new things in XHTML and in CSS. The plan of the lesson can be summarised like so :

1. XHTML
2. CSS
3. XHTML & CSS – The combined power of both languages

Ah, did you notice what I did there ? I used a list to write down the different parts, and that’s what I’ll teach you in this chapter !

It’s not very hard to understand, and it’s a nice introduction chapter to part 3 which will get a bit more complicated as we go along.
And yes, for those who are asking themselves, this is the most difficult part. But there’s no need to worry, if you pay good attention every thing should be fine

Different types of lists (XHTML)

In this chapter we’ll do the following : firstly we’ll see how to set up lists in XHTML, and after that we’ll see how to decorate them with CSS. To start with, you should know that there are 3 types of lists :

• Ordered lists
• Unordered lists
• Definition lists (rarer)

We will see how to create each one of these lists. It’s easy, but still pay attention as you will need lists in the following chapters (in fact you need lists in most web sites…). In effect, differently to what you may think about lists, they are used a lot, they will be used mainly to create the menu of your site !

Unordered Lists

An unordered list looks like this :

• Strawberries
• Raspberries
• Cherries

This is a system that allows us to make a list of elements, without any order (no first or last). Creating an unordered list is very easy. You just write the tag <ul> which is closed later with </ul>

Start by writing this :

Code : HTML

<ul> </ul>

And now, here’s what we’re going to do : we’re going to write each of the elements of our list between the tags <li> </li>. All these tags have to be between <ul> and </ul>. You’ll understand straight away with this example :

Code : HTML

<ul>
     <li>Strawberries</li>
     <li>Raspberries</li>
     <li>Cherries</li>
</ul>

<ul> </ul> is a list
<li> </li> is a new element in the list

Of course, you can put as many elements as you want in a list, you aren’t limited to 3

And that’s it, you know how to make an unordered list !
It wasn’t too hard was it ?

If you need to make a complicated list, you should know that you can make a list inside a list. If you want to do that open a second <ul></ul> inside a <li></li>
If you close the tags in the right order there shouldn’t be any problems

Ordered Lists

You’ve already found out that making unordered lists is really easy…well, now you’re going to find out how hard it is to make a web site

To make an ordered list, we’re not going to mess about. We only need to change the <ul></ul> tags, which now become <ol></ol> (ul for unordered list, ol for ordered list).
Inside nothing changes, we still use <li></li>

However, this time the order of the elements is important. The 1st <li></li> is element 1, the 2nd <li></li> is element 2 etc…

As it is rather instinctive, I’ll leave you to admire the simplicity of this example :

Code : HTML

<ol>
     <li>I get up</li>
     <li>I eat and drink</li>
     <li>I go back to sleep</li>
</ol>

Compared to the last example, all we had to change was the <ol> tag.

Definition Lists

Here however, it’s different to the previous examples. It’s a bit more difficult (but truly just a bit )
The global idea is the same. We indicate the beginning and end of the list with tags. This time it isn’t <ul> or <ol>, but as you may have guessed <dl> (abbreviation of Definition List).

Let’s start by writing this :

Code : HTML

<dl> </dl>

Right, now the small difference is that we don’t use <li> to indicate the elements of the list.
In effect, in a definition list, there are 2 different types of elements :

• The words
• And their definitions

The words go between <dt></dt>, and the definitions go between <dd></dd>

What you need to understand is that we must first put the word (<dt>), and then its definition (<dd>). If you want to add a second definition, you need to restart : a dt, then a dd.

Have a good look at this example :

Code : HTML

<dl>
     <dt>Cat</dt>
     <dd>Animal with 4 legs that goes "Miaow !"</dd>
     <dt>Dog</dt>
     <dd>Animal with 4 legs that goes "Woof Woof !"</dd>
     <dt>Maths Teacher</dt>
     <dd>Alien from another planet that teaches something that nobody understands</dd>
</dl>

As you can see, when you test the code, the definitions are slightly to the right of the words. At the moment it doesn’t look very nice, but everyone knows that with a bit of CSS magic we can make the words become bold and blue, and the definitions flashing red. If you can’t do that by yourself you might have gone through part 2 quickly

So, elements in a definition list go in pairs. Once you have understood that you need to write first the word, then the definition, well, you know how to use definition lists !

What would you say to spicing it all up with some CSS ? It should be even better after

Decorating Lists (CSS)

No, don’t worry, I’m not going to teach you how to make the definitions flash on a red background You already know how to do that :

Code : CSS

dd {
     background-color: red;
     /* . . . */
}

Anyhow, that’s already been seen several times, and now I’ve just put you on the right path
What we are now going to see are CSS properties specialised in the presentation of lists. There are 3 of them. We’ll see how each of them works.

List Position

The first property I’m going to show you is easy to use. It allows you to say if you want the elements content to wrap itself around the bullet point. This property is called list-style-position, and can take 2 values :

• inside : the element wraps around
• outside : the element doesn’t wrap around (by default)

This diagram will show you the difference between inside and outside :

Here’s the CSS to allow you to test the positions :

Code : CSS

.no-wrap {
     list-style-position: outside;
}

.wrap {
     list-style-position: inside;
}

and an XHTML code with a list :

Code : HTML

<p>Here is a list that doesn't wrap (by default) :</p>

<ul class="no-wrap">
     <li>Bullet<br />Point List</li>
     <li>Line 1<br />Line 2</li>
     <li>You can see that<br /> the text stays aligned</li>
</ul>

<p>Here is a list that wraps :</p>

<ul class="wrap">
     <li>Bullet<br />Point List</li>
     <li>Line 1<br />Line 2</li>
     <li>You can see that<br />the text is no longer aligned</li>
</ul>

So that you can see the difference you’ll need at least 2 lines of text in the elements (which is why I’ve put a <br />).

Bullet Point Style

A lot more interesting, the property list-style-type lets you change the appearance of the bullet point. In effect, the point doesn’t need to be a black circle, just as ordered lists don’t need to be numbered (you can also use a, b, c, d…).

The property list-style-type can take several values. Some of them only concern unordered lists, the others concern ordered lists :

• For unordered lists (<ul>) :
  • disc : a black disc (by default)
  • circle : an empty circle
  • square : a square
  • none : nothing will be shown
• For ordered lists (<ol>) there’s a lot of choice :
  • decimal : numbers 1, 2, 3, 4, 5… (by default)
  • decimal-leading-zero : numbers starting with 0 (01, 02, 03, 04, 05…) Doesn’t work on older versions of Internet Explorer
  • upper-roman : latin notation in capitals (I, II, III, IV, V …)
  • lower-roman : latin notation in small letters (i, ii, iii, iv, v …)
  • upper-alpha : alphabetic notation in capitals (A, B, C, D, E …)
  • lower-alpha : alphabetic notation in small letters (a, b, c, d, e …)
  • lower-greek : greek notation Doesn’t work in IE

There also exist other notations for ordered lists, like the armenian notation, georgian, hebrew, japanese etc…however I’ll spare you the trouble (and I don’t think you’ll mind !). What I have given you above should be more than enough

And if we tested some of our modified lists ? Here’s the XHTML code that will let us test (it’s a bit big, but don’t worry, it’s very repetitive )

Code : HTML

<h2>A few unordered lists</h2>

<p>Here's an unordered list without any modifications (= <em>disc</em>) :</p>
<ul>
     <li>Bullet</li>
     <li>Point</li>
     <li>List</li>
</ul>

<p>With <em>circle</em> :</p>
<ul class="circle">
     <li>Bullet</li>
     <li>Point</li>
     <li>List</li>
</ul>

<p>With <em>square</em> :</p>
<ul class="square">
     <li>Bullet</li>
     <li>Point</li>
     <li>List</li>
</ul>

<p>With <em>nothing</em> (no points) :</p>
<ul class="nothing">
     <li>Bullet</li>
     <li>Point</li>
     <li>List</li>
</ul>

<h2>A few ordered lists</h2>

<p>Here's an ordered list without any modifications (= <em>decimal</em>) :</p>
<ol>
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

<p>with <em>Decimal Leading Zero</em> (<strong>Doesn't work on IE</strong>) :</p>
<ol class="leading-zero">
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

<p>with <em>lower alpha</em> :</p>
<ol class="small-letters">
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

<p>with <em>upper roman</em> :</p>
<ol class="roman letters">
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

<p>with <em>lower greek</em> :</p>
<ol class="greek-letters">
     <li>one</li>
     <li>two</li>
     <li>three</li>
     <li>four</li>
</ol>

…and the CSS to go with it :

Code : CSS

/* unordered lists */
.circle {
     list-style-type: disc;
}

.square {
     list-style-type: square;
}

.nothing {
     list-style-type: none;
}

/* ordered lists */
.leading-zero {
     list-style-type: decimal-leading-zero;
}

.small-letters {
     list-style-type: lower-alpha;
}

.roman-letters {
     list-style-type: upper-roman;
}

.greek-letters {
     list-style-type: lower-greek;
}

/* a few added styles for presentation and to help you remember ;o) */

h2 {
     text-indent: 20px;
     font-family: Arial, Verdana, "Times New Roman", serif;
}

em {
     background-color: yellow;
}

strong {
     color: red;
}

I’ve not put all the styles, but you can try them if you want

Change The Image Of The Points

If none of these presentations suit your needs why not create your own ? That is exactly what the property list-style-image allows us to do. It lets you use any image instead of a point.

You must give it the value url followed by the address. It works in exactly the same way as background (which if you remember, lets us add a background).

For example, copy the following image then use the example code, you’ll see, it’s a lot nicer

Code : CSS

ul {  /*My list will have points in the shape of folders */
     list-style-image: url("../images/folder.png");
}

/* Just to make the presentation better */
a {
     color: blue;
     text-decoration: none;
}

a:hover {
     text-decoration: underline;
}

Code : HTML

<ul>
     <li><a href="#">Contracts</a></li>
     <li><a href="#">Presentations</a></li>
     <li><a href="#">Web Sites</a></li>
     <li><a href="#">Videos</a></li>
</ul>

The format of the image can be any type (PNG, GIF or JPEG).
However, be careful, the image mustn’t be too big or it will be cut. I suggest that you make them about 15×15 pixels.

So we’ve done pretty much everything possible with lists.
I agree that the names of the tags aren’t very clear, but at least they’re short, and there aren’t very many to learn You’ll see that you’ll remember them soon enough

And now is not the moment to go to sleep. The following chapters are very important. If you want to manage to make your web site and learn to make a design, pay close attention from now on !
We’re going to discover a lot of new things, mainly in CSS

We have just seen a lot of CSS properties in the previous chapter. You now know how to modify the size of text, its font, its colour etc etc…
In this chapter we’ll see a new aspect of CSS : what we call…pseudo formats

We won’t learn any new CSS properties (you already know quite a few), we are going to see how to apply them in precise cases. For example, we will see how to change the looks of a link when the mouse passes over it, how to automatically change the first letter of a paragraph etc…

All these elements should allow you to add more dynamism to you web site. Happy times

Nice Links

If you followed the previous chapters properly, you know how to modify the appearance of links. You just need to apply styles to the <a> tags and that’s it.

By default, links are shown in blue and are underlined. Let’s suppose that you don’t want to underline them, you would use :
text-decoration: none;

…which will get rid of the underline. Therefore your links will no longer be underlined.

Right, up to there I hope I’m not teaching you anything new
Okay, a quick example, just to get started, then we’ll pass on to the serious things. Here’s a CSS that applies 2-3 styles to change the ugly default links :

a {
     text-decoration: none;  /* The links will not be underlined */
     color: red;  /* The links will be red instead of blue */
     font-style: italic;  /* The links will be in italic (why not ?) */
}

We’re going to learn how to change the appearance of links :

• …when the visitor’s mouse hovers over them
• …when the visitor clicks on them
• …when the visitor has selected them
• …when the visitor has already seen a page

When The Mouse Hovers Over

The first pseudo format I’m going to show you is called :hover. Like all the pseudo formats that I’m going to show you, it’s information that we add after a tag (or class) in CSS, like this :

a:hover {
     /*properties go here*/
}

:hover means over.
a:hover therefore means when the mouse is over the link.
To the left you write the concerned tag (here it is <a>, the link tag), and to the right you put the pseudo format.

And from there, it’s up to you to say what you want your links to look like when you go over them.
Here’s an example of links presentation, but don’t hesitate to try your own :

Code : CSS

a {
     text-decoration: none;  /* The links won't be underlined */
     color: red;  /* The links will be red instead of blue */
     font-style: italic;  /* The links will be in italic (why not ?) */
}

a:hover {  /* When the mouse goes over the link */
     text-decoration: underline;  /* The link will become underlined */
     color: green;  /* The text will go green */
}

…and as we’ll be working on a few link examples here’s an XHTML code I made quickly :

Code : HTML

<h1>A Few Useful Addresses</h1>

<p>
     Do you know <a href="http://www.google.com">Google</a> ? It's the most used search engine in the world !<br />
     Do you know <a href="http://www.w3.org">W3C</a> ? They define the standards of XHTML & CSS.<br />
     Do you know <a href="http://blog.europcsolutions.com">Euro PC Solutions</a> ? Errmmm yes, what a stupid question...
</p>

Sweet, isn’t it ?

The good news is that you can apply the pseudo format :hover to any tag.
The bad news is that on Internet Explorer 6 :hover only works on links. However, from memory this was fixed in Internet Explorer 7.

On all the other browsers (including Mozilla Firefox, which I hope you downloaded a while ago ) it works perfectly.

Here’s an example with :hover on a paragraph :

p:hover {
     background-color: #CFE1EB   /* The background will become pale blue when the mouse goes over */
     text-indent: 20px;
}

When you go over the paragraphs, they will change colour. It’s not very useful, but after all the purpose of CSS is to decorate isn’t it ?

When The Visitor Clicks

The pseudo format :active allows us to apply a particular style at the moment of the click. This style won’t be seen for very long : only when the visitor clicks on the link with the mouse. Really, it’s not always very visible.

Personally, I don’t really bother with this pseudo format, however if I were to use it I’d probably change the background colour of the link so that you can tell if you’ve properly clicked :

a:active {  /* when the visitor clicks on the link */
     background-color: #FFCC66;
}

a:hover {  /* when the visitor goes over the link */
     text-decoration: underline;
     color: green;
}

a {  /* normal link */
     text-decoration: none;
     color: red;
     font-style: italic;
}

When The Link Is Selected

It’s hardly different to what we’ve just seen. The pseudo format :focus applies a style when the link is selected.

Meaning ?

This means that it’s a bit like :active, it’s at the moment of the click (for a link anyway).
This pseudo format, applied to other XHTML tags that we haven’t seen yet, will let us create some nice effects, you’ll see

Unfortunately, this doesn’t work on any of the versions of Internet Explorer before IE8.
Differently to :link which only worked on links, this won’t work at all on older versions of IE.

I’ll give you a very similar example to the last one (changing the background colour) so that you can see :

a:focus {   /* When the visitor selects the link */
      background-color: #FFCC66;
}

a:hover {  /* When the visitor goes over the link */
     text-decoration: underline;
     color: green;
}

a {
     text-decoration: none;
     color: red;
     font-style: italic;
}

As you can see : the link keeps its background colour for longer. Personally, I prefer using :focus to :active because it’s more visible.
However, as IE can’t understand everything, I apply the same style to :focus and :active, as I showed you in the first chapter on CSS, by separating the names with a comma :

a:active, a:focus {  /* Apply the same style to active and focus links */
     background-color: #FFCC66;
}

The advantage to doing this is that if the browser is older than IE8, it will use a:active (and the background will change briefly), but if the visitor has another browser, :focus will be used and the background colour will be more visible.

It’s up to you to do what you want, I’m not making you do anything

When A Page Has Already Been Visited

It’s possible to apply a style when a page has already been seen. By default, browsers put links in an ugly purple colour (even worse than the underlined blue links )

Personally, I avoid changing the looks of links that have already been seen because I find that in the end it looks a bit unpleasant visually. But once again, that’s just a personal opinion and you’re free to do what you wish

The pseudo format that does this is :visited. A fun use of this pseudo format (although not very useful) would be to cross out the links that have been visited :

a:visited {  /* When the visitor has already seen the page */
     text-decoration: line-through;
}

a:focus, a:active {  /* When the visitor clicks on the link */
     background-color: #FFCC66;
}

a:hover {  /* When the visitor goes over the link */
     text-decoration: underline;
     color: green;
}

a {  /* The normal link */
     text-decoration: none;
     color: red;
     font-style: italic;
}

If you’ve used the same XHTML example as before and already clicked on all the links, all the links will be crossed out and you won’t see a lot

More seriously, if you want to apply a precise style to links that have already been visited, I suggest putting a slightly lighter colour than the normal links.
However, it’s only a suggestion, but I find that it can look good.

Right, I’m going to stop giving you all my ideas, or else all your sites will look like eachother
We’ve finished talking about pseudo formats for links. We’ll now have a look at the pseudo formats to change the first letter or first line of a paragraph.

First Letter & First Line

In CSS, it’s possible to automatically modify the appearance of the fist letter and first line of text in a tag.
Once again we’ll be using pseudo formats to achieve this. Even though most of my examples will be on paragraphs don’t forget that it also works on other tags (such as titles etc…).

The First Letter

To modify the appearance of the first letter, you use the pseudo format :first-letter.

We can use it to write the first letter of your paragraphs in bold and bigger.
If you also want to indent your text with text-indent, we’ll end up by thinking we’re in a storey or newspaper article

Code : CSS

p:first-letter {  /* the first letter of each paragraph */
     font-weight: bold;  /* in bold */
     font-size: 1.2em;  /* a bit bigger than normal */
     color: blue;  /* written in blue */
}

p {
     text-indent: 20px;
}

…and I’ll give you a new example to work with :

Code : HTML

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ornare tristique pede. Aliquam arcu leo, imperdiet eget, dapibus non, accumsan quis, est. Sed eget massa. Praesent mi. Cras sollicitudin erat non tellus. Quisque sit amet leo. Sed volutpat faucibus eros. Duis eget libero. Ut luctus. Nullam sit amet nibh vel quam accumsan aliquam. Curabitur elementum. Nulla purus dolor, aliquet ac, gravida sit amet, vehicula non, elit. Morbi neque quam, viverra eget, bibendum dictum, condimentum sit amet, nibh. Nunc sit amet nisl eu eros ullamcorper dictum. In orci ligula, viverra non, tempus sit amet, dapibus sit amet, lectus. Pellentesque pharetra. Nam gravida. Pellentesque dignissim. Ut eu leo sed urna ullamcorper aliquam. Nunc ultricies quam sed mauris bibendum iaculis.</p>

<p>Vivamus pulvinar diam sit amet quam. Nunc dui elit, mattis ut, rhoncus quis, accumsan in, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mauris at risus ullamcorper consequat. Praesent vulputate metus ac pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci leo, euismod vitae, pulvinar a, aliquet a, tellus. Morbi tincidunt malesuada leo. Proin tincidunt libero at nibh. Cras sollicitudin vulputate nunc. Suspendisse blandit purus vel magna. Nulla dignissim lectus euismod odio.</p>

<p>Ut ultrices dapibus velit. Aliquam erat volutpat. In tempus libero. Proin tempus. Aenean odio wisi, laoreet nec, viverra et, congue ac, risus. Morbi consectetuer elit et turpis. Vivamus pulvinar. Donec ornare dapibus nibh. Sed odio. In eget turpis.</p>

<p>Maecenas pretium eros nec tortor. Morbi at ipsum quis massa varius tempus. Morbi placerat eros sit amet quam. Nulla in lorem ut neque volutpat adipiscing. Pellentesque erat magna, volutpat non, rhoncus sollicitudin, tincidunt vitae, felis. Praesent eget magna. Sed dictum. Mauris vehicula auctor risus. Curabitur neque nunc, interdum et, vestibulum id, placerat sit amet, elit. Etiam nec elit id nisl molestie dictum. Maecenas elementum lectus ut magna. In ut sem. Proin suscipit, metus non viverra sodales, elit diam fermentum est, a feugiat eros lorem id risus.</p>

<p>Nunc ac quam. Curabitur neque orci, malesuada eget, imperdiet ac, tincidunt vel, nisl. Fusce faucibus. Aliquam eleifend, nisl vitae molestie posuere, erat velit sollicitudin wisi, in laoreet est sapien et quam. Sed tincidunt. In sodales neque vel dui. Nunc ut orci in metus molestie tempor. Sed urna. Etiam ut neque auctor sem elementum rutrum. Etiam ac lectus. Sed mollis sem nec tortor. Sed volutpat risus sed magna.</p>

The First Line

Another pseudo format that can be interesting is :first-line.

When applied to paragraphs. It allows us to change the whole first line. For example, you could put the first line in small capitals to make it more attractive :

p:first-line {  /* The first line of each paragraph */
     font-variant: small-caps;  /* In small capitals */
}

p {
     text-indent: 20px;
}

Well, we won’t spend 3/4 hour on that, it’s easy to use so I’ll just leave you to mess around with it

Before / After

The pseudo formats we are now going to see are very interesting and change a bit from what we’re used to in CSS. It’s also a bit more difficult than the rest, so pay attention, it’s worth it.
As always, there’s a small detail that will get in our way (again !). These pseudo formats don’t work at all on Internet Explorer before IE8. Nothing will happen on this browser.

As several people still use Internet Explorer 7 and 6, you shouldn’t use too many of these pseudo formats so that you don’t penalise these visitors (or you could do just to teach them a lesson…)
They do however work without any problems on all the other browsers and I think it best that you learn how to use them. It’s not an old browser, that isn’t up to date, that should limit your knowledge

Right, so what are we talking about ?
We’re talking of the possibility to automatically add text before and after certain paragraphs, to reduce the amount of text you have to write.

For example, let’s suppose that I want to ask a lot of questions in a web page. Normally I would write the following in XHTML to ask a question :

<p>Question : How old is the webmaster ?</p>

Right, now let’s suppose that I’m a lazy webmaster (you don’t have a clue how many lazy webmasters there are, and I’m included :p ). I would like to automatically insert Question : at the beginning and a question mark at the end so that I don’t have to repeat it 50 times in my XHTML code.
I will create a class question which will allow me to automatically sort out the questions in my text.

Here’s the XHTML code to help you understand :

<h1>A Lot Of Questions</h1>

<p>I created the Euro PC Solutions' Blog because I was fed up of not being able to find good tutorials.</p>

<p class="question">When was this site created</p>

<p>The Blog was started in 2010</p>

<p class="question">What was the first name of the site</p>

<p>It's not old enough to have changed name ! It's always been called "Euro PC Solutions"</p>

<p class="question">How long did you spend looking for a name</p>

<p>About two weeks, and then it wasn't even me who found it ! A friend did</p>

<p class="question">How old is the webmaster of this site</p>

<p>Who ? Me ? My age won't interest anyone !<br />

Right, okay, one small clue, with that you'll be able to find my age : I started creating this site when I was 20.</p>

Now we’ll use the following pseudo formats :

• :before : what we want to add in front
• :after : what we want to put at the end

We’ll also be using a new CSS property to insert the text : content.
Look at how I use :before and :after on paragraphs that are part of question :

Code : CSS

.question:before {  /* before each question */
     content: "Question : ";  /* start by Question : */
}

.question:after {  /* after each question */
     content: " ?"  /* add a question mark */
}

content truly is a peculiar property, as it allows us to indicate the text that we want to add before or after. It is a bit different to what we have seen previously(and I promise you, it’s the only strange property).

You don’t have to just put content inside :before and :after. You can also use all the other CSS styles that you know. These styles will be applied to the text added by :before and :after.

Code : CSS

.question:before {
     content: "Question : ";
     font-weight: bold;  /* <q>Question</q> will be put in bold */
     color: blue;  /* <q>Question</q> will be in blue */
}

.question:after {
     content: " ?";
}

As you can see, the text in :before has become blue and bold.

If you apply the pseudo format :first-letter to the class question, for example to make the first letter bold, it’s the first letter of Question : (the Q) that will become bold and not the first letter just after Question : . :first-letter will therefore be applied in the :before pseudo function.

Using Images Instead Of Text

It is possible to insert images instead of text with :before and :after.

Save the following image in your images folder :

We still use the CSS property content, but instead of writing text, we give a url value like this :

.question:before {
     content: url("../images/qst.gif");  /* put an image before the question */
}

.question:after {
     content: " ?";
}

Don’t forget that the related path to your image is from the CSS file and not the XHTML file. If the path is wrong the image won’t be shown.

What I have shown you are only examples, you will certainly find more useful things to do with them in your web site
Don’t forget however that these pseudo formats don’t work on older versions of IE, so make sure that everything still looks alright in this browser.

A Quick Summary

Pseudo formats are a very interesting aspect of CSS, even though they do sometimes bring confusion.
Really, pseudo formats aren’t used very often on the internet apart from those concerning links. It’s true that making your links change colour etc is a nice feature to have
:first-line and :first-letter work well on every browser (including Internet Explorer) but aren’t used very often which is a shame because they can make sites look nicer
:before and :after only started working in Internet Explorer when IE8 came out so they’re not used a lot either. It’s a shame because a lot of webmasters, including myself, would like to use them more often. Until most people have started using IE8 or a different browser I recommend that you don’t use them either

That’s already the end of part II of these lessons.
However the four chapters were very rich in new properties to learn

If we summarise what we have done up until now :

1. In part 1 I taught you the basics of XHTML, so that you could make pages with text and images. The pages were a bit ugly but well…
2. In part II we introduced CSS. Now, without changing anything in the XHTML code, you can give a nice look to your pages using .css files. The possibilities are practically unlimited.
3. However, we still haven’t seen everything on creating web sites. There are still the more complicated XHTML tags to see, mainly the tags for creating tables and forms (mixed with CSS to give them a nice look). Then we need to create a fully functional web site

So in part III we will be mixing CSS and XHTML which will finally let you control the full design of your web site

When you are ready you can carry on to part III

Welcome to the second part of the chapter dedicated to text formatting
CSS still holds plenty of secrets for you, so don’t wait any longer, let’s go

Style Effects

In CSS there is a surprising amount of properties which allow us to give a bit more style to our web pages (and I don’t think anyone will refuse that )
These styles go from making your text bold, italic, to underlining your text and putting all the letters in capitals, to making your text flash

Putting Text In Italic

Stop, stop there ! I thought <em> let us make text italic ?!

I never said that
I never said that <em> was made to make the text italic, just as I never said that <strong> was to make the text become bold. That’s just what they do by default.

<em> is made to help words stand out from the rest of a paragraph. It means that the words it is surrounding are a bit important.
To represent this importance most navigators make the text go italic.

We can make text become italic in CSS, so it can be useful just for presentation purposes. Because, I remind you, CSS is made to sort out the presentation of web sites.

To put text in italic in CSS we use font-style which can take 3 values :

• italic : Makes the text italic
• oblique : Makes the text italic. What, this does as well ? Errmmm, I can’t tell you any more than that. I’ve used both of them and they both seem to do the same thing. Just use the one you want

• normal : The text will be normal (by default). It allows you to take any text effects away (such as italic). For example, if you don’t want your text in <em> tags to be italic any longer, you should write :

  em {
       font-style: normal;
  }
  

In the following example, I’ll use font-style to put my <h2> titles in italic :

h1 {
     text-align: center;
     font-family: Arial, "Times New Roman", Verdana, serif;
}

h2 {
     font-style: italic; /* The h2 titles will be italic ! */
     text-indent: 30px; /* Move our titles across to the right a bit */
     font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}

Well, it’s easy to use. We won’t stay stuck on that for too long

Making Text Bold

And if we carried on to making text bold ?
Here, the same with <strong>, I’m not going to re-give the same speech as earlier. Making text bold in CSS lets us have for example bold titles, bold paragraphs etc…It’s up to you.

The CSS property that allows us to make text become bold is font-weight, which takes the following values :

• bold : the text will be bold
• normal : the text will be written normally (by default)
• lighter : the text will be thinner

Here’s an example to make paragraphs go bold :

     font-weight: bold;

Capitals In CSS

CSS allows us to apply some interesting effects on text, by automatically putting it into capitals.
We’re going to see 2 CSS properties that allow us to work with capitals.

Let’s start with the property font-variant, which only takes 2 values :

• small-caps : the text will be written in small capitals
• normal : the text will be written normally (by default)

Example :

p {
     font-variant: small-caps;
}

You write your paragraphs normally (as usual), and just leave the CSS to automatically transform all your letters into small capitals. Isn’t that great

But wait, there’s a second CSS property that works with capitals as well : text-transform. It can take several values :

• uppercase : all the text will be written in capitals
• lowercase : all the text will be in small letters
• capitalize : the first letter of each word will be a capital
• none : no transformation (by default)

Go on then, seeing as I haven’t done it for a while I’ll give you a HTML code to work with
Look in particular at how I use classes

Code : HTML

<h1>I am very angry</h1>

<p>...but I will try to stay calm. At least, if I can, I'm making no promises...<br />
<span class="shout">ahhh !!! no this time I can't ! Who put mayonnaise on my chips !??<br />disgusting !</span></p>

<p class="whisper">THIS IS A PARAGRAPH THAT I'M WHISPERING, ALTHOUGH IT'S WRITTEN IN UPPERCASE IN THE XHTML CODE</p>

Code : CSS

h1 {
     text-align: center;
     font-family: Arial, "Times New Roman", Verdana, serif;
     text-transform: capitalize; /* The first letter of each word will be a capital */
}

.shout {
     text-transform: uppercase; /* I want to be heard, so everything is in capitals */
}

.whisper {
     text-transform: lowercase;
     font-style: italic; /* The whispered text will be in small, italic letters */
}

As you can see, the property text-transform is very useful for changing the appearance of text in the wink of an eye !

That shows that CSS can do more than just align text and change its font. It can also act directly upon text to modify its case (uppercase / lowercase).

A Bit Of Decoration ?

This CSS property has a good name : text-decoration
It allows us, among other things, to underline text. Here are the different values it can take :

• underline : underlines the text
• line-through : crosses out your text (puts a line through the middle)
• overline : puts a line over the top of the text
• blink : makes text blink. Be careful, this property doesn’t work on Internet Explorer. However it does work well on every other browser, including Mozilla Firefox.
• none : normal (by default)

This CSS will allow us to test the text-decoration effects :

Code : CSS

h1 {
     text-align: center;
     font-family: "Arial Black", Arial, "Times New Roman", serif;
     text-decoration: blink; /* The title blinks (won't work in Internet Explorer) */
}

.under {
     text-decoration: underline;
}

.cross-out {
     text-decoration: line-through;
}

.over {
     text-decoration: overline;
}

And here’s the XHTML code to go with it :

Code : HTML

<h1>Do not miss this !</h1>

<p>The CSS property <em>text-decoration</em> lets you decorate your text :<br />
<span class="under">by underlining it</span>. . .<br />
<span class="cross-out">by putting a line through it</span>. . .<br />
. . .or <span class="over">by putting a line over it</span>.</p>

Don’t forget that the power of CSS is the fact that it can mix styles. I’ve created a class under which only underlines in the example, but in reality we often mix styles like for example a class important which underlines text, makes it bold, and puts it in uppercase

Colours

Now let’s carry on to the vast subject of colours

What do you mean, vast ?

There are several possibilities for indicating a colour, as was the case with text size.
Here we’re going to see all the possibilities that CSS offers for choosing colours.

The first thing to know : the property that lets you change the colour of your text is color (easy to remember ), you even used it quickly in the introduction to CSS.

Indicating The Name Of The Colour

The easiest and most practical way to choose a colour is by writing its name in English.
The only default with this method is that there are only 16 standard colours. Some other colours exist as well but as they don’t work on every browser I won’t be showing them to you.

Here are the 16 colours you can use by simply writing their names :

You can learn them all by heart if you want, it’s not that hard

Here’s the CSS :

Code : CSS

h1 {
     text-align: center;
     font-family: Arial, "Arial Black", "Times New Roman", serif;
     text-decoration: underline;
     color: green; /* The title in green (why not ?) */
}

p {
     text-indent: 20px;
     color: blue; /* Paragraphs in blue */
}

strong { /* And the important words in flashing red ! */
     color: red;
     text-decoration: blink;
}

. . . and the XHTML page to go with it :

Code : HTML

<h1>In every colour</h1>

<p>Hello and welcome to this page that's full of colours ! I am using <strong>standard colour names</strong> in my CSS to make the page look nicer.</p>

<p>With the attribute <em>color</em> in CSS I managed to <strong>automatically</strong> convert all my important words (in a "strong" tag) into flashing red text ! That way nobody should miss them :0</p>

The important words in red flash…well yeah, you had to think of it ! Come on, you need a bit of imagination

Hexadecimal Notation

When you know that most of our screens can show 16 million colours, 16 is a bit limited.
On the other hand, if somebody had to give names to 16 million colours…

Luckily, in CSS there are several ways to choose colours. The first one (and my personal favourite) I’m going to show you is the hexadecimal notation.
I won’t spend that long explaining it because it’s not very easy to explain and it’s only through practice that you’ll get used to it.

A name of a colour in hexadecimal looks like this : #FF5A28. To make it simpler it’s a combination of letters and numbers which indicate a colour. It must always start with a dies (#) followed by six letters or numbers going from 0 to 9 and A to F (imagine A to F carrying on the numbers, they’re 10 to 15).
These letters and numbers go together in pairs. The first two indicate the quantity of red, the next two the quantity of green, and the last two are the quantity of blue. By mixing these quantities (which are the components of Red-Green-Blue in the colour) we can get the colour we want.

So, using this method, #000000 corresponds to black and #FFFFFF is white. But now, don’t ask me what the combination is to produce sunset orange. I couldn’t tell you. In fact I could guess. #FF0000 is red so we need to add some green to make it orange. A rough guess would be about #FF8000.

Certain graphics programs, such as Photoshop for example, do give you hexadecimal notations for colours. It is therefore easier to find your wanted colour than trying to guess it through trial and error.

Here is a quick example for making your text white :

p {
     color: #FFFFFF;
}

Using RGB

What does RBG mean? It is an abbreviation of Red-Green-Blue. Like with the hexadecimal notation, you define the quantity of Red, Green & Blue you want to make up a colour.

What ?! Yet another twisted story of red, green & blue quantities ?

Yes, but this time you can find your colour with a simple drawing program like Paint. Here are the steps to take :

1. Launch Paint from the start menu

2. Click on Edit colors (on windows 7), on earlier versions of Windows, go to Colors=>Edit colors :

   

3. Move the cursor in the colour palette to choose the colour you want

4. Let’s suppose that I get the mad idea to put my titles in Barbie pink (we’re only supposing). I just select the colour in the palette like this :

   

5. Get the quantities of Red, Green & Blue in the colour from the bottom right of the window (here 242-83-231). Copy these values in that order into the CSS, like this :

   h1 {
        text-align: center;
        color: rgb(242, 83, 231);
   }
   

   And that’s all there is to it

   As you may have noticed in the example, to use the RGB method, you need to write rgb(Red, Green, Blue), replacing Red, Green, Blue with the corresponding numbers. For your information, so that you know the scale and can make a quick guess of the needed quantities, the numbers go from 0 to 255. So if one day you write a red quantity of 327, there’s a problem

Added Bonus

As I have already said, my favourite method is using hexadecimal values. But that’s just a preference and you can use whichever method you wish
For those of you who don’t have an advanced graphics editor such as photoshop, I have found a nice, simple to use program, that allows you to find out the codes of colours. Just open the colour palette in Paint, or if you’ve found a colour you like in a picture, keep it handy, then open ColorPix and put the cursor over the colour you like. Then just press any key on your keyboard and you’ll get the hexadecimal & RGB values of the colour It looks like this :

Well, if you think it could be any help you can download ColorPix here :

Download ColorPix
Download ColorPix Here

Well, there you are, I thought the colour choosing capacities of this program might be useful

Backgrounds

Differently to what you might think, background doesn’t necessarily mean the background of a whole web site. You can also apply background uniquely to titles, or paragraphs, or even certain words in a paragraph.

Firstly you need to know that there are 2 types of background :

• Backgrounds with solid colours
• Backgrounds with images

We’ll start with solid colour backgrounds, and then we’ll see how to use images in the background.

Background Colours

To indicate a background colour we use the CSS property background-color. This is used in exactly the same way as color, meaning that you just give the name of your colour in English, hexadecimal, or RGB.

To give a background colour to your whole web page you need to work on the <body> tag. Yes, <body> is the whole web page, so if we change its colour the whole page’s background will change.

Look at this CSS code :

body { /* we're working on the body tag, which is the WHOLE page */
     background-color: black; /* The background of the page will be black */
     color: white; /* The text will be white */
}

Try it out to see !

Hey, but you put the white text in <body>, and now all the <p> paragraphs and <h1> titles have this colour. Why is that ?

I was hoping this question would come along so that I could talk about it. This is called heritage. No no, don’t worry; it doesn’t have anything to do with dead people

In CSS, if you apply a style to a tag, all the tags inside it use the same styles.

Really, it’s quite simple to understand. The <body> tag, as you know, contains all the other elements of your page, including your <p> paragraphs and <h1> titles.

Therefore if I apply a black background and white text to <body>, all my titles and text will also have a black background and white text. This is what is called heritage : we say that the tags inside a tag inherit its properties.

Are you saying that ALL the text of my web site will be written in white ?

No, not necessarily. If you then say for example that you want your titles to be red, this style will have priority and your titles will become red. However, if you don’t put anything, as we did before, your titles will be white.
This doesn’t only work with colours. All the CSS properties are inherited : you can for example put a text size of 1.3em in <body> and all your titles and text will be this size.

Here’s an example, to show you how to cancel heritage so that our titles won’t be written in white. I’ve also used the opportunity to create a class highlight which puts the text on a yellow background, to give a highlighting effect.

Code : CSS

body {
     background-color: black;
     color: white;  /* All the tags inside body will have white text and a black background */
}

h1 {
     color: red;  /* . . .apart from if I ask them to do something else */
}

.highlight {  /* A style to let us highlight some words in the text */
     background-color: yellow;
     color: black;  /* the highlighted text will be black */
}

…and this time I’ve decided to give you the complete XHTML code to go with it just so you don’t forget everything we learned before

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
     <title>Example Of How To Use An External CSS File</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" media="screen" type="text/css" title="Style" href="test.css" />
</head>

<body>
     <h1>Who turned off the light ?</h1>

     <p>Brr, it's all black on this site, it's a bit of a <span class="highlight">worrying</span> atmosphere don't you think ?</p>
</body>
</html>

As you will see when you test it, we haven’t indicated a particular colour for the <p> paragraphs so they’re still white. However the title isn’t white because we wanted it to be red.
The class highlight shows you with no problems how to give a background to certain words in a text. And the effect is kind of nice, wouldn’t you say ?

Background Images

Just like with background colours, background images don’t have to be applied to the whole page, we can also give a background to paragraphs, quotations, titles etc…

The property that lets us use background images is background-image. As a value we must put url(image-name.png). For example :
background-image: url("images/background.png");

Of course, you’re background doesn’t have to be a PNG. It can also be a JPEG or GIF.
The address of the image can be absolute (http://…) or related (images/image.jpg).

Be careful when you’re giving a related path in CSS ! The address of the image must be given in relation to the .css file and not the .html file. So, if your site has 2 folders, css and images, you need to write : ../images/image.jpg to get the image. If you don’t give the correct path, your image won’t be shown.

I’ll give you a full example to show you :

In your web sites folder set up your folders like this :

You can get my image, snow.png from here

Code : HTML :

<h1>CSS Testing Site</h1>

<blockquote>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lobortis. Aliquam scelerisque. Nullam facilisis diam et sapien laoreet facilisis. Phasellus hendrerit massa sit amet ipsum ullamcorper laoreet. Proin rutrum enim eu libero. Nulla risus est, porta eu, tristique at, ultrices ac, eros. Donec eget justo. Nam at metus vel tortor eleifend ultricies. Pellentesque quis tortor vitae leo lacinia auctor. Ut nec lacus et diam tincidunt blandit. Mauris vehicula orci et velit. Vivamus auctor rutrum leo. Donec magna erat, vulputate non, ornare vitae, dignissim et, leo. Curabitur ac massa. Donec tempor metus eget felis.</p>

     <p>Phasellus quis nulla eu sem porttitor eleifend. Morbi pharetra. Nulla condimentum est eu magna. Duis accumsan justo. Aliquam a dolor at dolor gravida pretium. Nunc varius quam quis nulla. Sed eu nulla. Phasellus quis magna eu wisi lacinia euismod. Nam augue ipsum, iaculis in, aliquet sit amet, bibendum a, massa. Suspendisse placerat dui eget erat. Nam mi. Nullam odio tortor, scelerisque eget, aliquet ut, volutpat vitae, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque felis vitae enim. Fusce leo. Vestibulum porttitor elementum augue. Integer semper tristique velit.</p>

     <p>Nulla libero. Ut molestie, mauris id bibendum bibendum, libero neque venenatis sapien, sed aliquet augue ligula nec tellus. Sed urna nunc, aliquet quis, condimentum a, molestie non, risus. Cras ut ante in nulla blandit aliquam. Curabitur consectetuer quam sollicitudin nunc. Ut aliquet velit tempor erat. Vivamus iaculis, wisi tincidunt ullamcorper aliquet, nibh risus aliquam risus, at convallis tortor mauris eget mauris. Curabitur consequat. Maecenas auctor venenatis lacus. Donec pellentesque.</p>

     <p>Morbi elit. Suspendisse sapien dolor, dapibus at, semper a, aliquam ac, neque. Sed eleifend mauris in elit. Aliquam blandit posuere purus. Vivamus sed dui. Maecenas ultricies, libero sed sagittis pellentesque, lectus nisl convallis lorem, vitae interdum velit ipsum vitae mauris. Nullam quis enim vitae urna fringilla lobortis. In accumsan, odio ut cursus molestie, nunc nibh accumsan velit, id dignissim nibh sem vitae turpis. Cras congue cursus orci. Proin laoreet egestas dolor. Vestibulum arcu sem, molestie sed, fermentum id, dapibus vitae, orci. Vivamus consectetuer ullamcorper enim. Curabitur varius massa ut lectus. Vivamus consectetuer aliquet tellus.</p>

     <p>Suspendisse quis sapien at turpis luctus tincidunt. Pellentesque eleifend pede. Morbi fringilla, wisi in gravida pulvinar, ligula quam nonummy odio, vel interdum mi wisi sollicitudin erat. Ut elit dui, hendrerit at, laoreet sed, posuere commodo, dui. Nam lacus. Vivamus rutrum felis eu libero. Fusce ac augue non felis vestibulum sollicitudin. Ut varius, diam in aliquam iaculis, est nisl tincidunt magna, non commodo sapien felis mollis augue. Donec ut massa. Donec semper est nec nulla. Sed aliquet orci ac sapien. Proin ut wisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

     <p>Aliquam porta enim eu sapien. Suspendisse ac lectus. Nulla sollicitudin nunc vitae mauris. Pellentesque molestie, nisl ac aliquam volutpat, massa sem luctus augue, id fringilla urna risus eu neque. Morbi pretium, felis a congue accumsan, tortor quam blandit mauris, vitae congue erat justo vitae mi. Aliquam nisl massa, facilisis ut, sagittis nec, tristique at, mauris. Suspendisse potenti. Suspendisse lorem pede, pretium ut, gravida ac, suscipit quis, augue. Etiam nonummy ligula eu nisl. Pellentesque id velit at mi ullamcorper adipiscing.</p>

    <p>In suscipit lorem id nibh. Integer ligula tellus, porta sit amet, pretium ac, dignissim sed, nunc. Duis diam. Nulla tortor pede, porttitor quis, iaculis sed, tincidunt at, nibh. Vivamus nibh massa, rutrum vel, feugiat eu, suscipit nec, orci. Fusce accumsan arcu nec pede. Integer dui lacus, tempus ac, vestibulum eget, ultrices eget, elit. Pellentesque odio. Nunc et leo. Etiam consequat augue ac sem. Aliquam erat volutpat. Duis nec libero tincidunt justo lacinia feugiat. In hac habitasse platea dictumst. Quisque ornare laoreet magna.</p>

     <p>Pellentesque dapibus, ligula ut vulputate pellentesque, dui magna lacinia mauris, aliquam tempus elit eros a diam. Nullam mi sem, tincidunt et, auctor et, ultrices et, augue. Vivamus blandit dapibus metus. Etiam lacinia sapien et urna. Sed molestie, eros vel imperdiet sodales, lorem velit consequat magna, ornare gravida ligula risus at nunc. Nulla lacus turpis, viverra a, tincidunt eu, tempor a, odio. Nam urna sapien, dignissim nec, sagittis id, tristique sed, est. Nam nisl elit, sagittis eget, pellentesque a, tristique vel, massa. Sed cursus sagittis pede. Aliquam erat volutpat.</p>

     <p>IAliquam erat volutpat. Morbi vulputate sagittis nulla. Vivamus porta, nisl quis volutpat ornare, felis mauris pulvinar mauris, at congue dui neque nec elit. In in leo. Ut vitae erat. In hac habitasse platea dictumst. Maecenas consequat augue vitae erat. Mauris vehicula varius nulla. Aenean sit amet est. Nam purus ante, rutrum aliquet, facilisis sit amet, consequat ut, orci. Aliquam ac dui eu lectus blandit cursus. Pellentesque sapien wisi, pharetra ut, dictum ut, tincidunt suscipit, dolor. Praesent convallis turpis nec quam. Nullam orci magna, mollis non, rhoncus tempus, pretium eu, neque. Praesent non velit eget metus fermentum sodales. Donec mi ipsum, placerat et, suscipit id, facilisis ac, neque. Nullam semper enim non augue.</p>

     <p>Donec non turpis eu sem accumsan mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at nisl sit amet felis luctus luctus. Integer sollicitudin ullamcorper dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris fermentum facilisis turpis. Pellentesque orci justo, rhoncus in, convallis at, consectetuer at, magna. Etiam ipsum odio, eleifend nec, iaculis quis, fringilla ac, lacus. Vivamus sit amet erat sed nisl convallis molestie. Nulla quam orci, vulputate at, vehicula sit amet, ullamcorper sed, lorem. Curabitur molestie varius tellus. Morbi arcu nibh, aliquam ut, facilisis molestie, scelerisque vel, enim. Maecenas sit amet nisl sed arcu molestie hendrerit. Etiam rutrum, neque sit amet volutpat lacinia, leo lacus cursus metus, vitae posuere nulla est et mauris. Curabitur tempus tempor felis. Cras interdum tristique dui. Curabitur pretium.</p>

     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam lobortis. Aliquam scelerisque. Nullam facilisis diam et sapien laoreet facilisis. Phasellus hendrerit massa sit amet ipsum ullamcorper laoreet. Proin rutrum enim eu libero. Nulla risus est, porta eu, tristique at, ultrices ac, eros. Donec eget justo. Nam at metus vel tortor eleifend ultricies. Pellentesque quis tortor vitae leo lacinia auctor. Ut nec lacus et diam tincidunt blandit. Mauris vehicula orci et velit. Vivamus auctor rutrum leo. Donec magna erat, vulputate non, ornare vitae, dignissim et, leo. Curabitur ac massa. Donec tempor metus eget felis.</p>

     <p>Phasellus quis nulla eu sem porttitor eleifend. Morbi pharetra. Nulla condimentum est eu magna. Duis accumsan justo. Aliquam a dolor at dolor gravida pretium. Nunc varius quam quis nulla. Sed eu nulla. Phasellus quis magna eu wisi lacinia euismod. Nam augue ipsum, iaculis in, aliquet sit amet, bibendum a, massa. Suspendisse placerat dui eget erat. Nam mi. Nullam odio tortor, scelerisque eget, aliquet ut, volutpat vitae, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed pellentesque felis vitae enim. Fusce leo. Vestibulum porttitor elementum augue. Integer semper tristique velit.</p>

     <p>Nulla libero. Ut molestie, mauris id bibendum bibendum, libero neque venenatis sapien, sed aliquet augue ligula nec tellus. Sed urna nunc, aliquet quis, condimentum a, molestie non, risus. Cras ut ante in nulla blandit aliquam. Curabitur consectetuer quam sollicitudin nunc. Ut aliquet velit tempor erat. Vivamus iaculis, wisi tincidunt ullamcorper aliquet, nibh risus aliquam risus, at convallis tortor mauris eget mauris. Curabitur consequat. Maecenas auctor venenatis lacus. Donec pellentesque.</p>

     <p>Morbi elit. Suspendisse sapien dolor, dapibus at, semper a, aliquam ac, neque. Sed eleifend mauris in elit. Aliquam blandit posuere purus. Vivamus sed dui. Maecenas ultricies, libero sed sagittis pellentesque, lectus nisl convallis lorem, vitae interdum velit ipsum vitae mauris. Nullam quis enim vitae urna fringilla lobortis. In accumsan, odio ut cursus molestie, nunc nibh accumsan velit, id dignissim nibh sem vitae turpis. Cras congue cursus orci. Proin laoreet egestas dolor. Vestibulum arcu sem, molestie sed, fermentum id, dapibus vitae, orci. Vivamus consectetuer ullamcorper enim. Curabitur varius massa ut lectus. Vivamus consectetuer aliquet tellus.</p>

     <p>Suspendisse quis sapien at turpis luctus tincidunt. Pellentesque eleifend pede. Morbi fringilla, wisi in gravida pulvinar, ligula quam nonummy odio, vel interdum mi wisi sollicitudin erat. Ut elit dui, hendrerit at, laoreet sed, posuere commodo, dui. Nam lacus. Vivamus rutrum felis eu libero. Fusce ac augue non felis vestibulum sollicitudin. Ut varius, diam in aliquam iaculis, est nisl tincidunt magna, non commodo sapien felis mollis augue. Donec ut massa. Donec semper est nec nulla. Sed aliquet orci ac sapien. Proin ut wisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>

     <p>Aliquam porta enim eu sapien. Suspendisse ac lectus. Nulla sollicitudin nunc vitae mauris. Pellentesque molestie, nisl ac aliquam volutpat, massa sem luctus augue, id fringilla urna risus eu neque. Morbi pretium, felis a congue accumsan, tortor quam blandit mauris, vitae congue erat justo vitae mi. Aliquam nisl massa, facilisis ut, sagittis nec, tristique at, mauris. Suspendisse potenti. Suspendisse lorem pede, pretium ut, gravida ac, suscipit quis, augue. Etiam nonummy ligula eu nisl. Pellentesque id velit at mi ullamcorper adipiscing.</p>
</blockquote>

Don’t forget to put css/test.css in the link to your style sheet !
If we want to put a background image on the whole page, we use the <body> tag (again) :

Code : CSS

body {
     background-image: url("../images/snow.png");
}

h1 {
     font-style: italic;
     font-family: "Arial Black", Arial, Verdana, serif;
     text-align: center;
}

blockquote p {  /* All the paragraphs inside a blockquote */
     text-align: justify;
     text-indent: 25px;
}

Try it out; you’ll notice that the background image is repeated over the whole page. There is a property that allows us to fix the background, so that it doesn’t move with the text. The given effect is, I find, quite interesting. The property is called background-attachment and can take 2 values :

• fixed : the image won’t move
• scroll : the image moves with the text (by default)

Using the same CSS file as before, but with the addition of the background-attachment we get this :

body {
     background-image: url("../images/snow.png");
     background-attachment: fixed; /* the background won't move */
}

h1 {
     font-style: italic;
     font-family: "Arial Black", Arial, Verdana, serif;
     text-align: center;
}

blockquote p {  /* All the paragraphs inside a blockquote */
     text-align: justify;
     text-indent: 25px;
}

Try scrolling now. As you’ll see, the background doesn’t move anymore !

There are 2 more properties I would like to show you for the background image.
The first one is to control the repetition of the background. This property is called background-repeat and takes the following values :

• no-repeat : the background isn’t repeated. There is only one copy of the image on the page.
• repeat-x : the background is repeated on the first line, horizontally.
• repeat-y : the background is repeated in the first column, vertically.
• repeat : the background is repeated (by default).

Let’s use the same HTML as before, but this time we’ll apply a gradient that repeats vertically.

Here’s a gradient I created in Photoshop. Right click->save as to copy it if you want :

And here’s the CSS code to use it :

body {
     background-image: url("../images/gradient.png");
     background-repeat: repeat-y;  /* The image will only repeat vertically */
}

h1 {
     font-style: italic;
     font-family: <q>Arial Black</q>, Arial, Verdana, serif;
     text-align: center;
}

blockquote p {  /* All the paragraphs inside a blockquote */
     text-align: justify;
     text-indent: 25px;
}

As you can see the gradient repeats itself down the left side of the screen. The last property I want to show you (that way we’ll have seen them all for backgrounds) concerns the position of your background image.
You can say where you want your image to be with background-position. This property is only of any use if you put "background-repeat: no-repeat;"

You need to give your background 2 values in pixels to indicate where you want it to be in relation to the top left corner of the screen. (or of the paragraph if it’s the background of a paragraph…). So, if you write :
background-position : 30px, 50px;
…your background will be placed 30 pixels from the left and 50 pixels from the top. There are also values that you can give in English :

• top : at the top
• bottom : at the bottom
• left : to the left
• center : in the middle
• right : to the right

You can also combine these words. So, to put your picture in the top right, you put : background-position: top right;

Right, in this last example I’ll use all the background properties we have learnt

Here’s the background image :

Code : CSS

body {
     background-image: url("../images/skier.gif");  /* The background image is <q>skier.gif</q> */
     background-repeat: no-repeat;  /* The image will not be repeated */
     background-position: top right;  /* The background is in the top right of the screen */
     background-attachment: fixed;  /* The background won't move */
}

h1 {
     font-style: italic;
     font-family: "Arial Black", Arial, Verdana, serif;
     text-align: center;
}

blockquote p {  /* All the paragraphs inside a blockquote */
     text-align: justify;
     text-indent: 25px;
}

If you use a lot of properties on the background (like in this example), you can use a kind of mega property called background which takes several combined values of background-image, background-repeat, background-attachment & background-position.
This is the first mega-property that I’m showing you, there will be more. For all the mega-properties such as background you should know that :

• The order of the values doesn’t matter. You can combine the values in any order :
  background: url("../images/skier.gif") no-repeat top right fixed;
  background: no-repeat fixed top right url("../images/skier.gif");

• You don’t have to put all the values. If you don’t want to put fixed, you can take it out without a problem :
  background: url(../images/skier.gif) no-repeat top right;

Of course, mega properties don’t have any use if you you’re only using one value
The following example gives us the same result as before but it uses background to make the CSS shorter :

body {
     background: url("../images/skier.gif") no-repeat top right fixed;
}

h1 {
     font-style: italic;
     font-family: "Arial Black", Arial, Verdana, serif;
     text-align: center;
}

blockquote p {  /* All the paragraphs inside a blockquote */
     text-align: justify;
     text-indent: 25px;
}

One last thing, in all these examples I’ve been applying the background to the whole page (body). But don’t forget that you can add a background to anything (a title, a paragraph, certain words of a paragraph etc…)
I suggest that you practice a bit just applying backgrounds to different parts of your web page. You should now be able to give you site quite a nice look

Well, as you can tell, the possibilities in CSS are quite impressive. Really, CSS is more or less limitless, and without wanting to discourage you, you haven’t seen everything

The only small difficulty in this chapter is trying to remember all the new properties I’ve shown you. By practicing you’ll remember them more easily and I’ll soon be bringing out a cheat sheet

Why stop now? We haven’t seen the best of CSS yet