<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Insérer ici le titre de la page</title> </head> <body> C'est ici que nous allons mettre le contenu de la page ! </body> </html> <p>Ceci est un paragraphe normal...<br>... de deux lignes : remarquez que les retours à la ligne s'effectuent avec la balise br et que tous les autres espacements et retours à la ligne sont remplacés par un seul espace par le navigateur.</p> <p>Deux paragraphes sont espacés de manière à les distinguer.</p> <pre>Voici maintenant un paragraphe préformaté. Dans celui-ci, les espaces supplémentaires, tabulations et retours à la ligne sont pris en compte par le navigateur. Veuillez l'utiliser avec parcimonie, lorsque cela est vraiment nécessaire, comme les exemples de code source (que nous verrons plus tard).</pre> <html> <head> <title>Tutoriel HTML et CSS</title> </head> <body> <h1>Tutoriel HTML et CSS</h1> <h2>Utilité</h2> <p>Ces languages sont les standards du WEB et sont reconnus par tous les navigateurs<br> Apprenons-les donc !</p> <h2>Apprentissage</h2> <h3>Le HTML</h3> <p>Et vous ne le connaissez pas déjà ? Tant pis, ce n'est qu'un exemple !</p> <h3>Le CSS</h3> <p>Pareil : nous le verrons plus tard</p> </body> </html> <ul> <li>Première ligne de la liste non ordonnée (puces)</li> <li>Seconde ligne de la liste non ordonnée (puces)</li> <li>Troisième ligne, mais on ne referme pas la balise : on ouvre une autre balise ul ou ol : <ul> <li>Première ligne de la liste ordonnée, qui est imbriquée dans la première liste</li> <li>Ensuite, ne pas oublier de refermer la ligne de la première liste après avoir fermée la seconde liste</li> </ul> </li> <li>Si vous suivez mon raisonnement... :-)</li> </ul> <p>Et voici une liste ordonnée :</p> <ol> <li>Commencer par porter l'eau à ébulition</li> <li>Puis, placez les œux dans la caserolle</li> <li>Et là, veuillez faire ces étapes dans l'ordre : <ol> <li>Prennez une petite assiète</li> <li>Placez-y la bave de crapeau (bon d'accord, je manque d'imagination pour cet exemple)</li> <li>Et puis débrouillez-vous...</li> </ol> </li> <li>Bon appéti, bien sûr !</li> </ol> <dl> <dt>Éléments de niveau bloc</dt> <dd> Éléments qui peuvent généralement contenir des blocs à leur tour, ou du contenu en ligne. </dd> <dt>Éléments de niveau texte</dt> <dt>Éléments en ligne</dt> <dd> Éléments qui ne peuvent contenir que des éléments en ligne. </dd> </dl> <dl class="calendrier"> <dt>18 février</dt> <dd> Journée du libre à Trifouilli les Oies. </dd> <dt>1 mars</dt> <dd> Anniversaire d'une grande personnalité. </dd> </dl> <ul> <li><a href="#premier_paragraphe">Aller au premier paragraphe</a></li> <li><a href="#second_paragraphe">Aller au second paragraphe</a></li> </ul> <p>Voici un texte contenant un <a href="une_page.html">lien vers une autre page du site</a>, puis un autre <a href="http://www.kde.org/">lien vers un site externe</a>, ainsi qu'un lien pour télécharger <a href="monprog3000_pro.zip">MonProgramme3000 Pro Edition</a>.</p> <h2><a name="premier_paragraphe"></a>Premier paragraphe</h2> <p>Avec de l'imagination, on voit ici un paragraphe très long mais très intéressant.</p> <h2><a name="second_paragraphe"></a>Second paragraphe</h2> <p>Encore un peu d'imagination...</p> <p>Une photo du bambin :<br> <img src="files/mon_bebe.jpg" alt="le petit pinguin que j'ai adopté, il porte toujours des couches et a toujours sa tétine et son hochet" width="148" height="168"></p> <ul> <li>Nous somme le 1<sup>er</sup> du mois, et 2<sup>4</sup> = 16</li> <li>L'amphase sert à accentuer sur un mot <em>précis</em> dans un texte</li> <li>Tandis que l'amphase forte <strong>insiste</strong> lourdement sur un passage</li> <li>On peut aussi imaginer un texte parlant du <abbr title="Baccalauréat">BAC</abbr> et des études que l'on peut faire après comme le <acronym title="Diplôme Universitaire de Technologie">DUT</acronym></li> <li>Voire même donner la définition de <em>mot</em> : <dfn>c'est une ensemble de lettres</dfn> <li>Ben oui, je l'ai eu dans <cite>Le dictionnaire à moi, édition 2000</cite></li> <li>TODO: Et comme disait Machin, <q cite="machin">Être ou ne pas être, telle est la question</q></li> <li>Puis, pour faire ce tutoriel j'ai butté sur quelques <del datetime="2004-10-31T21:01:00-02:00" title="'truc' ne se dit pas dans un tutoriel sérieux">trucs</del> <ins datetime="2004-02-18T00:00:00-05:00" title="'mot' était précisément ce que je voulais dire">mots</ins></li> </ul> <p>En mathématiques, si 2·<var>x</var> = 8, alors <var>x</var> = 4. Fulgurant, non ?</p> <p>En C++, pour écrire un texte à l'écran, c'est très simple : <code>printf("Salut, Monde !");</code>. Remarquez que vous pouvez stoquer le texte dans une variable, nommée <var>texte</var> par exemple ! Et voici un Hello World complet :</p> <pre><code>int main() { char *texte = "Salut, Monde !"; printf(texte); exit(0); }</code></pre> <p>Pour compiler, tappez <kbd>gcc exemple.c</kbd> et vous devriez obtenir ceci à l'écran :</p> <pre><samp>[seb@localhost seb]$ gcc exemple.c gcc: exemple.c: No such file or directory gcc: no input files</samp></pre> <blockquote cite="voir.php?message=precedent"> Oui, moi je dit que le noir c'est mieux<br> Et je m'y connais. </blockquote> <p>Moi, par contre, je suis convaincu que le blanc c'est mieux.</p> <hr> <address> Si vous avez des questions sur l'enregistrement, contactez-nous à <a href="mailto:webmaster@site.org">webmaster@site.org</a>, ou téléphonez-nous au 09 76 34 67 12. </address> <table summary="Cette table liste les unités SI (Système Internationnal), en donnant le nom et le symbol de ces unités."> <caption>Unitées SI (partiel)</caption> <thead> <tr> <th>Nom</th> <th>Symbole</th> </tr> </thead> <tbody> <tr> <td>mètre</td> <td>m</td> </tr> <tr> <td>kilograme</td> <td>kg</td> </tr> </tbody> </table> <table summary="Exemple de colspan et rowspan" border="1"> <caption>Exemple de colspan et rowspan</caption> <thead> <tr> <th colspan="2">Nom</th> </tr> <tr> <th>Bidule</th> <th>Machin</th> </tr> </thead> <tbody> <tr> <td rowspan="2">Cellule sur deux lignes</td> <td>Voilà...</td> </tr> <tr> <td>Et la dernière ligne</td> </tr> </tbody> </table> <ul> <li> <ul> <li>Cette sous-liste est concernée car elle est définie par une balise ul, elle même contenue dans une balise li</li> </ul> </li> <li>Mais pas cette liste</li> </ul> <div> <p class="important"> </p> </div> ======================================================= <p>Je vous prévient : <em>n'en abusez pas</em>, ou sinon, <strong>ça irra très mal</strong> !</p> <code><pre>Ceci est un bout de code, Ben oui ça ne se voit pas !</pre></code> <link rel="stylesheet" type="text/css" href="style.css"> ------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <title>Titre de la page</title> </head> <body> <h1>Titre de la page</h1> <p class="intro">Introduction</p> <h2>Première partie</h2> <p>Premier paragraphe</p> </body> </html> <ul> <li>Ligne</li> <li>Ligne qui introduit la sous-liste : <ul> <li>Ligne</li> </ul> </li> </ul> <ul class="menu"> <li><a href="index.html">Accueil</a></li> <li><a href="news.html">News</a></li> </ul> <p>Ceci est un paragraphe normal avec un <a href="adresse.html">lien</a> !</p> <h2 class="titre1"><span>Titre avec un span</span></h2> <p>Paragraphe suivant le premier titre, qui utilisait un span.</p> <h2 class="titre2">Titre brut</h2> <p>Paragraphe suivant le second titre, qui utilisait la technique du display inline.</p> *********************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Catalogue des bateaux - Maquettes Casey Steven & Son</title> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]--> </head> <body> <!-- L'entête de la page, affiché tout en haut de l'écran : --> <div id="entete"> <h1>Maquettes Casey Steven & Son</h1> <!-- Le menu principal du site, affiché horizontalement, tout en haut de l'écran, juste en dessous de l'entête : --> <ul id="menu"> <li><a href="#"><span>Accueil</span></a></li> <li><a href="#" class="actuel"><span>Catalogue</span></a></li> <li><a href="#"><span>Espace clients</span></a></li> <li><a href="#"><span>Newsletter</span></a></li> <li><a href="#"><span>Services</span></a></li> <li><a href="#"><span>Liens</span></a></li> <li><a href="#"><span>L'entreprise</span></a></li> <li><a href="#"><span>Contact</span></a></li> </ul> </div> <!-- La page en elle-même, cette division sera utile pour styler le site en CSS : --> <div id="page"> <!-- Le sous-menu, affiché dans une colonne sur la gauche du site : --> <ul id="sous-menu"> <li><a href="#">Avions</a></li> <li><a href="#" class="actuel">Bateaux</a></li> <li><a href="#">Camions</a></li> <li><a href="#">Divers</a></li> <li><a href="#">Hélicoptères</a></li> <li><a href="#">Militaires</a></li> <li><a href="#">Motos</a></li> <li><a href="#">Voitures</a></li> <li><a href="#">Accessoires</a></li> <li><a href="#">Cadeaux</a></li> <li><a href="#">Colles</a></li> <li><a href="#">Figurines</a></li> <li><a href="#">Moteurs</a></li> <li><a href="#">Télécommandes</a></li> </ul> <!-- Le contenu utile de la page, affiché sur une grande colonne à droite du site : --> <div id="contenu"> <h2>Catalogue des bateaux</h2> <h3>Les bateaux qui flottent</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc metus. Aliquam elementum euismod massa. Suspendisse potenti. Maecenas laoreet. Nulla volutpat nisl eget est. Quisque lorem augue, iaculis eu, pellentesque sit amet, dictum tincidunt, mi. Curabitur vitae ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed nec est in est blandit pulvinar. Duis iaculis consequat lectus. Etiam posuere nulla eu mauris. Nullam auctor mollis nibh. Ut quis nulla. Integer lacus eros, viverra in, dapibus at, feugiat vitae, tellus. Praesent arcu metus, bibendum at, dapibus quis, bibendum volutpat, ligula. Aenean neque libero, porttitor eget, molestie nec, dapibus sed, arcu. Proin ac pede at libero rhoncus nonummy. </p> <p> Integer fermentum vulputate dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean elementum enim et massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam euismod pretium mi. Aliquam vitae lacus vitae nisi commodo dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sit amet dui. Suspendisse congue, risus eu fermentum cursus, neque sapien aliquet orci, vel lobortis felis tellus et nibh. Donec id leo. In quis nisi eget nunc scelerisque venenatis. Aenean porta. Fusce interdum tellus ac urna. </p> <h3>Les bateaux qui ne flottent pas</h3> <p> Nullam nonummy, elit id semper luctus, massa nunc fringilla urna, ac dignissim libero metus sit amet ante. Vivamus sodales erat a pede. Sed vehicula tellus at arcu. Mauris laoreet condimentum felis. Sed mauris dolor, tempus et, ornare non, porttitor sit amet, pede. Sed tempor. Sed porta, nisl at porttitor viverra, felis nisi ultricies velit, cursus elementum purus arcu vel pede. Etiam varius. Duis ut libero id ligula laoreet vulputate. Nam at enim vitae orci porta placerat. Nullam nec lectus ac erat commodo gravida. Nulla rhoncus turpis quis arcu lobortis suscipit. Mauris condimentum dapibus mi. Integer sed eros. Fusce suscipit, ante porttitor pulvinar gravida, ligula est volutpat orci, fermentum feugiat neque neque at augue. Duis nonummy scelerisque purus. Vestibulum ac nunc. Nam nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque nonummy. </p> </div> <!-- Le pied de page, affiché tout en bas de l'écran. Est à l'intérieur du div "page" pour le CSS : --> <div id="pied"> © 2007 Sébastien Laoût<br> Cette maquette de site sert d'illustration à <a href="http://slaout.linux62.org/html_css/maquette.html">la page Maquette du Tutoriel HTML & CSS</a> de Sébastien Laoût. </div> </div> </body> </html> *********************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Catalogue des bateaux - Maquettes Casey Steven & Son</title> <link rel="stylesheet" type="text/css" href="style.css"> <!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css"><![endif]--> </head> <body> <!-- L'entête de la page, affiché tout en haut de l'écran : --> <div id="entete"> <h1>Maquettes Casey Steven & Son</h1> <!-- Le menu principal du site, affiché horizontalement, tout en haut de l'écran, juste en dessous de l'entête : --> <ul id="menu"> <li><a href="#"><span>Lien 1</span></a></li> <li><a href="#" class="actuel"><span>Lien 2</span></a></li> ... </ul> </div> <!-- La page en elle-même, cette division sera utile pour styler le site en CSS : --> <div id="page"> <!-- Le sous-menu, affiché dans une colonne sur la gauche du site : --> <ul id="sous-menu"> <li><a href="#">Lien 1</a></li> <li><a href="#" class="actuel">Lien 2</a></li> ... </ul> <!-- Le contenu utile de la page, affiché sur une grande colonne à droite du site : --> <div id="contenu"> <h2>Catalogue des bateaux</h2> <h3>Les bateaux qui flottent</h3> <p>Lorem ipsum...</p> </div> <!-- Le pied de page, affiché tout en bas de l'écran. Est à l'intérieur du div "page" pour le CSS : --> <div id="pied"> Paragraphe de copyrights... </div> </div> </body> </html>