Sparkling Ice Dolls html tutorial // Popup window generator

You want to make a site and don't know how to start?
On this page, I'll *try to* explain you how to build your pages.
Vous voulez faire un site, mais vous ne savez pas par où commencer?
Sur cette page, je vais *essayer de* vous expliquer comment vous prendre

introduction:
an iframe??? what is an iframe??? // une iframe? c'est quoi, ça?
An iframe is an inline frame. That's what you have when an html page loads inside another (Sparkling Ice has an iframe layout: the main page loads when ou arrive one the site, and then, when you click on the links, only the content on the middle of the page changes).
That way, your site will be easier to code because on all the pages, you'll ony have your content (dolls, texts...), without the codes of the layout (as they will be specified in your index page).
Une iframe est un cadre qui permet à une page html d'apparaitre au milieu d'une autre. sparkling ice, par exemple est un site fait avec une iframe: quand vous arrivez sur le site, la page principale se charge, puis quand vous cliquez sur les liens, il n'y a que le contenu au milieu de la page qui change.
Ainsi, votre site sera plus facile à créer car, à l'exception de la page d'accueil, on ne trouvera sur vos pages que votre contenu (dolls, textes, photos...) et non le code de la mise en page.

Step 0: Our goal // Qu'est-ce que c'est qu'on va faire, dis???
Here is what we want to do (yes, I know, you want it to be larger and nicer, but that's only a simplified example):
Voici ce que l'on veut arriver à faire (en moins moche et en plus grand, j'en conviens, mais là, vous le ferez tranquilement sans moi):

Your title here (or an image)
image 2		image 3
	Link 1 \| Link 1 \| Link 1...
	image 4

Step 1: Let's go! // C'est partiiiii!!!!
First of all, we have to create an html page. You must name it index.html if you want it to be the default page of your site. Otherwise, give it another name (if you want a splash page on your index page, or for whatever reason).
Then, copy and paste the following code.
Then go to step2 to see how to edit the code.
Tout d'abord, il faut créer un fichier html. Pour que cette page soit la page par défaut de votre site, il faut impérativement le nommer index.html. Si ce n'est pas la page d'accueil, alors il peut avoir n'importe quel nom.
Ensuite, copiez et collez le code suivant dans le fichier, puis passez à 'step2' pour voir comment éditer le code et rendre la page moins moche.

<html>
<HEAD><TITLE>Give a title to your page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
</HEAD>

<body>

<table height="100%" border="0" cellpadding="0" cellspacing="0" align="center" >
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#F37891">
<td colspan="3">Your title here (or an image)</td>
</tr>
<tr>
<td width="50" rowspan="3" align="right" valign="top" bgcolor="#C4996A">image 2.gif</td>
<td align="center"><iframe src="iframe1.html" name="mycontent" width="200" height="200" frameborder="0" scrolling="auto"></iframe></td>
<td width="50" rowspan="3" align="left" valign="top" bgcolor="#C4996A">image 3</td>
</tr>
<tr>
<td align="center" bgcolor="#F8C9CF">
<a href="page1.html" target="mycontent">Link 1</a> |
<a href="page2.html" target="mycontent">Link 2</a> |
<a href="page3.html" target="mycontent">Link 3</a>...
</td>
</tr>
<tr>
<td align="center" bgcolor="#D3AF8F">image 4</td>
</tr>
</table>
</table>

</body>

</html>

Step 2: Editing the iframe code // édition du code de la iframe
In the code, you can edit all the things I've written in green.
Dans le code, vous pouvez modifier tout ce que j'ai écrit en vert.

src:
Choose the page you want to see in the iframe when your main page loads.
Choisissez la page qui doit s'afficher dans l'iframe au moment où votre page principale se charge.

name:
You have to give a name to your iframe so when you click on a link, the page you want opens inside the iframe and not in your main window.
example: if you name your iframe Roberta, when you'll want to make a link to open a page in the iframe, you'll have to write:
<a href="page1.html" target="Roberta">Link 1</a>
Vous devez donner un nom à votre iframe pour qu'en cliquant sur un lien, la page sache qu'elle doit s'ouvrir dans votre iframe et non ailleurs.
Par exemple, si vous appelez votre iframe Roberta, quand vous voudrez faire un lien vers une page qui doit s'ouvrir dans l'iframe, vous devrez écrire:
<a href="page1.html" target="Roberta">Link 1</a>

Height / width:
These attributes define the size of your iframe (if you want to specify the size in pixel (the most precise solution), just write the number of pixels - 200 for me - but you want to specify the size in %, you must add % after your number).
Permettent de définir la hauteur (height) et la largeur (width) de votre iframe.
Pour une valeur en pixel (la solution la plus précise), ne mettez que le nombre de pixels souhaités. Pour une valeur en pourcentages, ajoutez % après la valeur.

frameborder:
Specify if you want a border around your iframe or not.
possible values: 1 or 0
Pour avoir une bordure autour de votre iframe, tapez 1. Vous n'en voulez pas, tapez 2.

Scrolling:
Yes: you'll always have a scrollbar
no: you'll never have one
auto: you'll have a scrollbar if your page needs it (if it is larger or longer than your iframe)
Yes: vous aurez toujours un ascenseur
No: vous n'en aurez jamais
Auto: il n' en aura un que si la page qui s'affiche est plus longue que la hauteur de votre iframe (conseillé)

Step 3: Editing the rest of the code // édition du reste du code
You can now add:
- images to decorate the page
In that example, you can add 1 large image at the top ot the table, one on each side, and 1 at the bottom.
Inserting an image:
<img src="NameOfYourImage.gif" width="100" height="300">
Don't foget to adapt the size of your table and cells to the size of your images.

- links that load:
in the iframe: <a href="page1.html" target="Roberta">Link 1</a>
in a new window: <a href="page1.html" target="_blank">Link 1</a>

Vous pouvez maintenant ajouter:
- des images pour décorer votre page
Dans mon exemple, vous pouvez ajouter une image assez large en haut, une de chaque côté et une dernière en bas.
Code pour insérer une image:
<img src="NomDeVotreImage.gif" width="100" height="300">
N'oubliez pas d'adapter la taille de votre tableau et de ses cellules à la taille de vos images.

- des liens qui se chargent:
dans l'iframe: <a href="page1.html" target="Roberta">Link 1</a>
dans une nouvelle fenêtre: <a href="page1.html" target="_blank">Link 1</a>

Step 4: Creating the other pages of your site // Créer les autres page du site
Now, you can create your other pages (give them exactly the name you specified in the links)
Vous pouvez maintenant créer vos autres pages en faisant bien attention de leur donner très précisément le même nom que dans les liens.

<html>
<head>
<title>Give a title to your page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
write your text here
</body>

</html>

??? didn't understand anything?
You can download the example in a zip file. Please, do not redistribute.
Pour ceux qui n'ont rien compris ou qui commencent à avoir une affreuse migraine, j'ai préparé un zip contenant les fichiers de l'exemple. Y'a qu'à télécharger... mais ne redistribuez pas sur votre site!!