Forum Clubic

Help me: explication site internet en html

Bonjour je dois comprendre le fonctionnement de cette programmation de site internet en html et malgré de très nombreuses recherches je n’y comprends rien du tout…
Si quelqu’un pouvait m’aider à le décortiquer et en expliquer le fonctionnement ça m’aiderait beaucoup

Il y a 4 fichiers:

  • ACCUEIL :
PLONGEUR DU CERI /* BANDEAU */ th { background: #eee url('bandeau.jpg') no-repeat center; background-size: 100% 100%; } th img { position: relative; float: left; } body { font-family: Arial; } th h1 { color:white; transition: transform .4s linear,color .2s ease-in-out; } th h1:hover { transform: scale(1.05); color: #FF4000; } /* MENU */ ul a { text-decoration: none; color: #eee; transition: color .3s linear; } ul a:hover { color: #FF4000; } ul li { list-style: none; list-style-image: url('scuba.png'); transition: list-style-image .3s linear; } ul li:hover { list-style-image: url('scuba_hover.png'); } /* CORPS */ td p { text-align: left; margin: 0 0 5% 2%; font-weight: bold; font-family: arial; } .img_up { transition: transform .4s linear; } .img_up:hover { transform: scale(1.3); }
<body>
    <table border="7px" rules="groups" width="100%">
        <colgroup span="1"></colgroup>
        <colgroup span="1"></colgroup>
        <thead>
            <th height="200px" colspan="2" style="color:red"><h1><font size="10s"><u> CLUB DE PLONGEE DU CERI</u></font></h1></th>
						</thead>
        <tbody>
            <tr>
                <td width="15%" style="color:#fff"; background="bg-menu.jpg"; align="center"><h2>MENU</h2></td>
                <td height="530px"S align="center" style="color:#fff"; background="accueil.jpg";><h1></h1></td>
            </tr>
            <tr>
                <td style="color:#fff"; background="bg-menu.jpg">
                    <ul>
                        <li>Accueil
                            <ol><li><a href="#">Haut de page</li>
                                <li><a href="#bas">Bas de page</li></ol></li>
                        <li><a href="Le_club.html">Le Club</a></li>
                        <li><a href="Loisirs.html">Loisirs</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                    <br><br>
                    <ul>
                        <li><a href="http://www.ffessm.fr/" target="_blank">FFESSM</a></li>
                        <li><a href="http://ceri.univ-avignon.fr/" target="_blank">CERI</a></li>
                    </ul>
                </td>
                <td align="center" style="color:#fff"; background="bg.gif";><br><br><img class="img_up" src="plongee_accueil.jpg"><p> 
                    <h1 align="center"><FONT color="#00BFFF">ACCUEIL</FONT></h1><br>
                    <FONT color="#00BFFF">LE CLUB DE PLONGEE DU CERI</FONT> a été créé à l'intention d'un projet de conception informatique.




Notre club est ouvert à tout le monde sans restriction d�âge, de condition physique et même de handicap…



Notre activité de formation de plongée a lieu dans différentes piscines de du CERI.



L’obtention des niveaux de plongée doit être l’aboutissement de compétence de manière à ce que l’apprentissage reste un loisir !



Enfin, vous devez retenir que la plongée sous-marine en club associatif a pour objet d’être accessible à tous mais nécessite un investissement de chacun.



Plus que des mots, nous vous invitons à venir gratuitement tester l�ambiance et le fonctionnement de notre ecole/club de plongée au CERI !!!


        </tbody>








        <tfoot id="bas">
            <td style="color:#fff;background-color:#005c7f;" background="bg-bas.jpg" height="50" colspan="2" align="center"><a href="mailto:tom.salgues09@gmail.com?subject:Votre%20page%internet">SALGUES TOM,ANIS BAIT</a>&copy;, 13/04/2016 CERI</td>
        </tfoot>
    </table>
</body>
  • CONTACT :
PLONGEUR DU CERI /* BANDEAU */ th { background: #eee url('bandeau.jpg') no-repeat center; background-size: 100% 100%; } th img { position: relative; float: left; } body { font-family: Arial; } th h1 { color:white; transition: transform .4s linear,color .2s ease-in-out; } th h1:hover { transform: scale(1.05);color: FF4000; } /* MENU */ ul a { text-decoration: none; color: #eee; transition: color .3s linear; } ul a:hover { color: FF4000; } ul li { list-style: none; list-style-image: url('scuba.png'); transition: list-style-image .3s linear; } ul li:hover { list-style-image: url('scuba_hover.png'); } /* CORPS */ td p { text-align: left; margin: 0 0 5% 2%; font-weight: bold; font-family: arial; } .img_up { transition: transform .4s linear; } .img_up:hover { transform: scale(1.3); }
<body>
    <table border="7px" rules="groups" width="100%">
        <colgroup span="1"></colgroup>
        <colgroup span="1"></colgroup>
        <thead>
            <th height="200px" colspan="2" style="color:red"><h1><font size="10s"><u> CLUB DE PLONGEE DU CERI</u></font></h1></th>
						</thead>
        <tbody>
            <tr>
                <td width="15%" style="color:#fff"; background="bg-menu.jpg"; align="center"><h2>MENU</h2></td>
                <td height="349px" align="center" style="color:#fff"; background="contact.jpg";></td>
            </tr>
            <tr>
                <td style="color:#fff"; background="bg-menu.jpg">
                    <ul>
                        <li><a href="Accueil.html">Accueil</a></li>
                        <li><a href="Le_club.html">Le Club</a></li>
                        <li><a href="Loisirs.html">Loisirs</a></li>
                        <li>Contact
                            <ol><li><a href="#">Haut de page</li>
                                <li><a href="#bas">Bas de page</li></ol></li>
                    </ul>
                    <br><br>
                    <ul>
                        <li><a href="http://www.ffessm.fr/" target="_blank">FFESSM</a></li>
                        <li><a href="http://ceri.univ-avignon.fr/" target="_blank">CERI</a></li>
                    </ul>
                </td>
                <td margin-lest="50" style="color:#fff"; background="bg.gif";> <h1><FONT color="#00BFFF">CONTACT</FONT></h1>
                    <p>              

Adresse postale :

Centre d’Enseignement et de Recherche en Informatique (CERI)

Agroparc - BP 91228

339, chemin des Meinajariès

84911 Avignon cedex 9


Téléphone : (+33/0)490843500

Fax : (+33/0)490843501


Courrier électronique :

Informations générales : ceri-info(à )univ-avignon.fr

Informations candidatures et inscriptions : ceri-candidature(Ã )univ-avignon.fr


Pour contacter une personne en particulier : prenom.nom@univ-avignon.fr



Direction du CERI

  • Directeur du CERI : Fabrice Lefèvre
  • Directrice des études : Corinne Fredouille
  • Directeur du laboratoire de recherche - LIA : Georges Linares
  • Responsable administratif : Catherine Bonansera

Licence Informatique
  • Responsable : Serigne Gueye
  • Responsable L1 : Philippe Gilles
  • Responsable L2 : Philippe Gilles
  • Responsable L3 : Serigne Gueye
  • Responsable administratif : Laurence Gilles


Master Informatique
  • Responsable : Stéphane Huet
  • Responsable Spécialité ILSEN : Stéphane Huet, Michel Benoit
  • Responsable Spécialité RISM : Rachid Elazouzi
  • Responsable administratif : Laurence Gilles


Alternance
  • Responsable : Corinne Fredouille
  • Responsable Adjoint : Patrick Nasarre
  • Responsable administratif : Catherine Bonansera


Diplôme Universitaire (DU) en Ingénierie du Web
  • Responsable : Sophie Nabitz


Relation avec les entreprises - Stages & soutenances alternance
  • Responsable : Patrick Nasarre
  • Responsable administratif : Mireille Rozier


Contacts Anciens étudiants - Soirée des anciens
  • ceri-informatique(Ã )univ-avignon.fr
  • anciens-informatique(Ã )listes.univ-avignon.fr
                    </p>                    
                   </td>
            </tr>
        </tbody>
       





        <tfoot id="bas">
            <td style="color:#fff;background-color:#005c7f;" background="bg-bas.jpg" height="50" colspan="2" align="center"><a href="mailto:tom.salgues09@gmail.com?subject:Votre%20page%internet">SALGUES TOM,ANIS BAIT</a>&copy;, 13/01/2016 CERI</td>
        </tfoot>
    </table>
</body>
  • LE CLUB :
PLONGEUR DU CERI /* BANDEAU */ th { background: #eee url('bandeau.jpg') no-repeat center; background-size: 100% 100%; } th img { position: relative; float: left; } body { font-family: Arial; } th h1 { color:white; transition: transform .4s linear,color .2s ease-in-out; } th h1:hover { transform: scale(1.05);color: FF4000; } /* MENU */ ul a { text-decoration: none; color: #eee; transition: color .3s linear; } ul a:hover { color: FF4000; } ul li { list-style: none; list-style-image: url('scuba.png'); transition: list-style-image .3s linear; } ul li:hover { list-style-image: url('scuba_hover.png'); } /* CORPS */ td p { text-align: left; margin: 0 0 5% 2%; font-weight: bold; font-family: arial; } .img_up { transition: transform .4s linear; } .img_up:hover { transform: scale(1.3); }
<body>
    <table border="7px" rules="groups" width="100%">
        <colgroup span="1"></colgroup>
        <colgroup span="1"></colgroup>
        <thead>
            <th height="200px" colspan="2" style="color:red"><h1><font size="10s"><u> CLUB DE PLONGEE DU CERI</u></font></h1></th>
						</thead>
        <tbody>
            <tr>
                <td width="15%" style="color:#fff"; background="bg-menu.jpg"; align="center"><h2>MENU</h2></td>
                <td height="530px" align="center" style="color:#fff"; background="club.jpg";></td>
            </tr>
            <tr>
                <td style="color:#fff"; background="bg-menu.jpg">
                    <ul>
                        <li><a href="Accueil.html">Accueil</a></li>
                        <li>Le Club
                            <ol><li><a href="#">Haut de page</li>
                                <li><a href="#bas">Bas de page</li></ol></li>
                        <li><a href="Loisirs.html">Loisirs</a></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                    <br><br>
                    <ul>
                        <li><a href="http://www.ffessm.fr/" target="_blank">FFESSM</a></li>
                        <li><a href="http://ceri.univ-avignon.fr/" target="_blank">CERI</a></li>
                    </ul>
                </td>
                <td align="center" style="color:#fff"; background="bg.gif";> <h1><FONT color="#00BFFF">Club de plongée du CERI</FONT></h1>
                    <p>              
                        <FONT color="#00BFFF">Qui sommes nous?</FONT>
                    <img class="img_up" align="left" src="personnes.jpg">
                    <br><br>
                        <u>Fiche d'identité de notre Ecole de Plongée à Nîmes :</u><br>

Club Associatif loi 1901.

Préfecture du Gard n°W302006128

Agrément Ministériel Sport n°58 S 1756/10

Agrément FFESSM n°45.30.0385

Agrément FFH n°11/050/3580

Assurance R.C.P LOL n°13.325.756.05

Siret 52758696300017 - APE 9342Z

339, chemin des Meinajariès 84911 AVIGNON cedex 9

Tel .04 90 84 35 00 Fax.04 90 84 35 01







Notre fonctionnement et état d’esprit !

Nous savons qu’adhérer à une association, et encore plus quand il s’agit de faire de la plongée, n’est pas forcement simple.

Le fondement et l’histoire de notre organisation a toujours été d’intégrer, sans jamais faire de différence, les nouveaux adhérents quelque soit l’âge, la profession, la condition physique, etc… Que vous soyez sportif ou non, venez à notre rencontre pour plonger à Nimes !

Notre but n’est pas financier, c’est d’ailleurs pour cette raison que les moniteurs et membres du CA sont TOTALEMENT bénévoles et que notre adhésion annuelle est à partir de 50 â?¬ …



                    <FONT color="#00BFFF"> Adresse du local</FONT><br><br>

565 C ancienne route de Jean-Moulin à Avignon au rez de chaussée (Panneau Halte garderie Les Courlis)

        <tfoot id="bas">
            <td style="color:#fff;background-color:#005c7f;" background="bg-bas.jpg" height="50" colspan="2" align="center"><a href="mailto:tom.salgues09@gmail.com?subject:Votre%20page%internet">SALGUES TOM,BAIT ANIS</a>&copy;, 13/01/2016 CERI</td>
        </tfoot>
    </table>
</body>
  • LOISIRS :
PLONGEUR DU CERI /* BANDEAU */ th { background: #eee url('bandeau.jpg') no-repeat center; background-size: 100% 100%; } th img { position: relative; float: left; } body { font-family: Arial; } th h1 { color:white; transition: transform .4s linear,color .2s ease-in-out; } th h1:hover { transform: scale(1.05); color: #FF4000; } /* MENU */ ul a { text-decoration: none; color: #eee; transition: color .3s linear; } ul a:hover { color:#FF4000; } ul li { list-style: none; list-style-image: url('scuba.png'); transition: list-style-image .3s linear; } ul li:hover { list-style-image: url('scuba_hover.png'); } /* CORPS */ td p { text-align: left; margin: 0 0 5% 2%; font-weight: bold; font-family: arial; } .img_up { transition: transform .4s linear; } .img_up:hover { transform: scale(1.3); } .img_up { transition: transform .4s linear; } .img_up:hover { transform: scale(1.3); }
<body>
    <table border="7px" rules="groups" width="100%">
        <colgroup span="1"></colgroup>
        <colgroup span="1"></colgroup>
        <thead>
            <th height="200px" colspan="2" style="color:red"><h1><font size="10s"><u> CLUB DE PLONGEE DU CERI</u></font></h1></th>
						</thead>
        <tbody>
            <tr>
                <td width="15%" style="color:#fff"; background="bg-menu.jpg"; align="center"><h2>MENU</h2></td>
                <td height="350px" align="center" style="color:#fff"; background="loisir.jpg";>
            </tr>
            <tr>
                <td style="color:#fff"; background="bg-menu.jpg">
                    <ul>
                        <li><a href="Accueil.html">Accueil</a></li>
                            
                        <li><a href="Le_club.html">Le Club</a></li>
                        <li>Loisirs
                            <ol><li><a href="#">Haut de page</li>
                                <li><a href="#bas">Bas de page</li></ol></li>
                        <li><a href="Contact.html">Contact</a></li>
                    </ul>
                    <br><br>
                    <ul>
                        <li><a href="http://www.ffessm.fr/" target="_blank">FFESSM</a></li>
                        <li><a href="http://ceri.univ-avignon.fr/" target="_blank">CERI</a></li>
                    </ul>
                </td>
                <td align="center" style="color:#fff"; background="bg.gif";>
                    <h1><FONT color="#00BFFF">LOISIRS - SORTIE WE</FONT></h1>
                    <p><FONT color="#00BFFF">Deux types de sorties vous sont proposées :</FONT><br><br>

Techniques : elles sont organisées en début d�année, soit à la journée soit sur un weekend end. Elles sont ouvertes à tous ceux qui préparent leurs niveaux ainsi qu�à tous ceux qui les accompagnent.
Loisirs : ouvertes à tous les adhérents, tous niveaux confondus. Un planning sera distribués en début d�année, les lieux seront communiqués au fur et à mesure.

Pour chaque sortie, un descriptif du séjour et de son déroulement sera remis 1 mois avant.

L’organisation :

Date et lieu d�inscription :

Les inscriptions au sortie loisirs seront closes 20 jours avant la sortie auprès des organisateurs ou directement aux séances de piscine.

Mode d�inscription :

Toute inscription devra être formulée au moyen d�un mail. La validation se fera après réception d�un chèque d�arrhes.

Le club propose la location de matériel pour chaque sortie faites dans le cadre du club.

Le versement par chèque correspondant aux arrhes à verser, devra être joint à la feuille d�inscription et donné aux organisateurs.

Rappel : les arrhes seront encaissées même après un désistement quel qu�il soit du participant - sauf en cas de force majeure.


Voici les sorties prévues cette année :

28 et 29 septembre 2013 : Lavandou

12 et 13 octobre 2013 : Annecy

24 novembre 2013 : Marseille

22 décembre 2013 : Plongée de Noël

11 et 12 janvier 2014 (salon de la plongée)*

26 janvier 2014

23 février 2014 : Frontignan

16 mars 2014 : Marseille

27 avril 2014 : Cassis

21 et 22 juin 2014 (We pour tous � Handis et Valide)

Voici un rappel de la saison passée :

16 septembre 2012 : La Ciotat

14 octobre 2012 : Port Cros

25 novembre 2012 : Pointe Rouge

16 décembre 2012 : Marseille

12 et 13 janvier 2013 (salon de la plongée)*

17 février 2013

10 mars 2013 : Chamrousse (plongée sous glace)

21 avril 2013 : St Mandrier

22 et 23 juin : Estartit (We pour tous � Handis et Valide)

*Ce salon se déroule Porte de Versailles à Paris. Nous vous laissons
organiser vos transports et couchage. Nous retrouverons devant le salon vers 10h30 le samedi matin.



        <tfoot id="bas">
            <td style="color:#fff;background-color:#005c7f;" background="bg-bas.jpg" height="50" colspan="2" align="center"><a href="mailto:tom.salgues09@gmail.com?subject:Votre%20page%internet">SALGUES TOM,BAIT ANIS</a>&copy;, 13/01/2016 CERI</td>
        </tfoot>
    </table>
</body>

Voila si il y a des personnes suffisamment douées pour m’éclairer merci d’avance
Cordialement

Salut, je vais essayer de t’expliquer mais je pourrais pas tout t’expliquer :

  • la balise (oui, déjà ça s’appelle des balises, c’est pour définir l’élément que tu vas insérer) : à mettre au tout début de ton code, pour insérer du code HTML
  • la balise : elle sert à mettre toutes les informations relatives au document (à la page) comme son titre (que tu peux voir dans les onglets) , le nom de son auteur, le codage de caractères utilisé etc
  • : justement, spécifie le codage de caractères utilisé (le plus courant est l'UTF-8, presque tous les sites l'utilisent)

Tu peux remarquer que cette balise se ferme de cette manière <…/> et non <…><…/> comme on l’a vu avant : il y a des balises dites orphelines - celles-ci - qui sont particulières puisqu’elles se ferment comme ceci <…/>.

  • balise : sert à insérer du code CSS, le CSS étant un “langage” qui s’occupe de la mise en page de la page (et de ton code HTML si je puis dire). Généralement, on met ce code dans un autre fichier pour que ça soit plus lisible, un fichier en .css.

  • th : c’est une balise. Normalement, c’est une balise HTML. En CSS, on peut reprendre l’élément, la balise pour en modifier son style (comme son alignement, la police …). Cette balise-ci sert à créer une cellule d’en-tête à un tableau.

Je vais m’arrêter là, sinon ça serait trop long. J’espère que tu as compris que ce qui se trouve entre <>, c’est des balises (ex : ) et qu’il en existe deux sortes : les paires et les orphelines. J’espère aussi que tu as compris que le langage pour la mise en page de ton site est le CSS. Je t’invite ensuite à faire des recherches sur Google pour apprendre ces deux langages et éventuellement à te rendre sur ces sites :

openclassrooms.com…
fr.html.net…
gregory.kokanosky.free.fr…

L’apprentissage devrait être rapide, ces deux langages ne sont vraiment pas difficiles et sont à la portée de tous ! :wink:
Edité le 30/04/2016 à 18:47

Bonjour,
En bref, pour que tu puisses tout comprendre et tout maitriser et éviter de faire face à un blocage, je te conseille vivement de revoir les cours ou les formations que tu as suivi, je pense que même avec des tutoriels tu disposeras beaucoup plus de solutions.