Forum de publicité, d'entraide et de détente.

titre
Hebergeur d'image
Royale-Pub

    Les bases du HTML




    Habitant

    superbibi

    avatar
    Habitant

    Masculin Âge : 26
    Messages : 71
    Clés : 0
    Date d'inscription : 29/02/2008


    Profil

    Message par superbibi le Dim 19 Sep - 22:10

    Bonjour,

    beaucoup d'entre vous on un forum, mais les 3 quart n'on jamais vu ni touchez un code source.

    avouez que ce n'est pas très attirent ^^

    Spoiler:
    Code:

    <div class="contenu_haut"></div><!-- NEws -->
    <div class="contenu_fond">

     
    --------------------
    #I|G# In Game #I|G#
    --------------------
    <?php include ('includes/sql_connect.php');
    ?>





    <?php
    if ($_SESSION['rang'] == 1)
    {
    ?>
       <h3>Les Leaders</h3>


       <?php
       $reponse = mysql_query("SELECT * FROM members WHERE poste='leader'") or die (mysql_error());
          while ($donnees = mysql_fetch_array($reponse))
          {
          echo '#I|G# '.($donnees['membre']).''; ?> | Rang => <?php echo ''.($donnees['rang']).' <a href="/admin/del_membre.php?id='.($donnees['id']).'"><img src="/images/del.png" title="supprimer" /></a>~~<a href="/admin/mod_membre?id='.($donnees['id']).'"><img src="/images/mod.png" title="modifier" alt="mod" /></a>'; ?>
     <?php
          }
       ?>
       


       <h3>Les Administrateurs</h3>


       <?php
       $reponse = mysql_query("SELECT * FROM members WHERE poste='admin'");
          while ($donnees = mysql_fetch_array($reponse))
          {
          echo '#I|G# '.($donnees['membre']).''; ?> | Rang => <?php echo ''.($donnees['rang']).' <a href="/admin/del_membre.php?id='.($donnees['id']).'"><img src="/images/del.png" title="supprimer" /></a>~~<a href="/admin/mod_membre?id='.($donnees['id']).'"><img src="/images/mod.png" title="modifier" alt="mod" /></a>'; ?>
     <?php
          }
       ?>


       <h3>Les Membres</h3>


       <?php
       $reponse = mysql_query("SELECT * FROM members WHERE poste='membre'");
          while ($donnees = mysql_fetch_array($reponse))
          {
          echo '#I|G# '.($donnees['membre']).''; ?> | Rang => <?php echo ''.($donnees['rang']).' <a href="/admin/del_membre.php?id='.($donnees['id']).'"><img src="/images/del.png" title="supprimer" /></a>~~<a href="/admin/mod_membre?id='.($donnees['id']).'"><img src="/images/mod.png" title="modifier" alt="mod" /></a>';?>
     <?php
          }
          ?>
    on s’arrêtera là hein, je vais pas vous mettre les 150 lignes Very Happy
    ce code et en Xhtml et PHP il sert à l'affichage de la liste des membres du site #I|G#

    Donc, vous utiliser un langage de formatage appeler BBCode qui s'utilise de la sorte
    Code:
     [balise][/balise]

    et bien nous allons voir là les base du html, même uniquement afficher une image crée un lien, le saut de ligne, le paragraphe et les titres.

    HTML s'utilise avec ce que l'on appel des balises.

    Code:
    <balise></balise>
    . ça ressemble beaucoup au bbcode sur certain point, mais c'est plus "strict".
    en html il y as 2 sorte de balise, les balise block
    Code:
    <balise></balise>
    et la balise mono-block
    Code:
    <balise />

    [EDIT: Kakashi]
    Avant de créer n’importe quelle page web:

    Voici les codes pour débuter :
    Code:
    <!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="fr" >
      <head>
          <title>Bienvenue sur mon site !</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      </head>
      <body>
        // contenue de la page
      </body>
    </html>

    Les codes sont à placer entre les balises
    Code:
    <body>
    et
    Code:
    </body>
    Tu peux changer le titre du site -que l’on voit en haut de la fenêtre du navigateur- en changeant le message "Bienvenue sur mon site ! » par le titre de votre page web entre les balises
    Code:
    <title>
    et
    Code:
    </title>
    [EDIT: terminé]

    la base du html c'est les paragraphe, ce sont des délimiteurs.
    Code:
    <p>code et texte ici</p>
    <p>recode ici</p>

    les saut de ligne en html ce font avec une balise de type monoblock, et oui faire un saut de ligne dans la source n'est pas pris en compte.
    Code:

     balise de saut de ligne, la le navigateur c'est qu'il doit retourner à la ligne.
    <p>ligne1

    ligne2 </p>


    les balise de titre servent à écrire plus gros et gras faire ressortir un texte. Il y a 6 niveaux de titre, le 1 le plus puisent le 6 le plus faible.

    Code:
    <h1>titre de taille 1<h1>

    Le code ci-dessus donne :


    Titre de taille 1

    la
    Code:
     <h2>
    est un peu plus petite
    la
    Code:
    <h3>
    est encore plus petite etc... jusqu'à
    Code:
    <h6>.


    Pour faire un lien en php on utilise la balise block
    Code:
    <a>
    Code:
    <a>texte cliquable</a>

    la on à un lien, mais vous vous douter il manque quelque chose, c'est le où mène ce lien.
    L’attribut
    Code:
    href
    sert à donner l'url :

    Code:
    <a href="lien du site">texte cliquable</a>

    Voilà un lien de fait.

    on peu aussi quand une page n'est pas prête faire un lien vide, pour cela à l'emplacement de l'url il suffit de mettre une dièse (#)

    Les images s'affiche avec la balise img qui elle et mono block.

    Code:
    <img />
    La comme pour le lien on doit mettre un attribut qui mène vers ou est l'image.
    Code:
    <img src="lien de l'image" />

    avec ce code ça marche, mais il est conseiller de rajouter 2 attribut :

    le alt : affiche un texte dans le cas ou l'image et in-trouver
    le title : affiche une infobulle au passage de la sourie.

    comme tous les attribut la valeur doit être séparer pas un espace et entourer de guillemet
    genre : attribut="valeur"
    Code:
    <img src="lien image" title="image" alt="image" />

    avec ça vous devrez être capable de faire une image cliquable (comme un logo par exemple)
    Code:
    <a href="lien du site"><img="lien de l'image" alt="image" title="image" /></a>

    ce qui donne :
    logo #I|G#
    (noter que l'url est vide (#))

    voilà, vous devriez être capable de coder des lien image Wink



    Roi

    Kiv'

    avatar
    Roi

    Masculin Âge : 23
    Messages : 36411
    Clés : 0
    Date d'inscription : 06/02/2007


    Profil

    Message par Kiv' le Mar 21 Sep - 21:45

    Coucou !
    Merci beaucoup pour ce beau tuto Yes







    Merci Linoa pour le Kit Love



    Habitant

    Darkeus

    avatar
    Habitant

    Masculin Âge : 25
    Messages : 75
    Clés : 0
    Date d'inscription : 21/12/2010


    Profil

    Message par Darkeus le Mer 22 Déc - 22:28

    Bonjour; merci pour ce tuto, mais j'ajoute quelque chose :
    Voici les codes pour débuter :
    Code:
    <!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="fr" >
      <head>
          <title>Bienvenue sur mon site !</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      </head>
      <body>
        // contenue de la page
      </body>
    </html>

    Tu vas dans ton fichier est une page blanche s'affiche est en haut, dans l'onglet, il y a écrit Bienvenue sur mon site ! Tu peux le modifier en modifiants Bienvenue sur mon site ! par un autre titre, aurevoir.



    Noble

    Kakashi

    avatar
    Noble

    Masculin Âge : 23
    Messages : 936
    Clés : 0
    Date d'inscription : 25/02/2007


    Profil

    Message par Kakashi le Mar 28 Déc - 13:51

    Merci Darkeus, tu fais bien de rappeler le code de base, j’édite le message de superbibi Wink



    Habitant

    Chorizo

    avatar
    Habitant

    Masculin Âge : 20
    Messages : 3361
    Clés : 0
    Date d'inscription : 10/04/2012


    Profil

    Message par Chorizo le Mer 18 Avr - 19:18

    Ca va beaucoup m'aider ! Merci !



    Invité

    Invité

    avatar



    Profil

    Message par Invité le Mer 2 Mai - 12:37

    Super ce tuto ! Merci !





    Contenu sponsorisé




    Profil

    Message par Contenu sponsorisé


      La date/heure actuelle est Sam 19 Aoû - 5:40