Coding Tech

Un bon programmeur est celui qui teste tout ce qu'on lui montre... Si tu veux tester, maintien ton doigt sur un des codes et il sera instantanément copier. Colle le dans ton éditeur, et pour créer un fichier réfère toi au 𝕥𝕙𝕖𝕞𝕖 𝟶 vu précédemment et plus précisément sur 𝔼𝕥𝕦𝕕𝕖 𝕕'𝕦𝕟 𝕖𝕕𝕚𝕥𝕖𝕦𝕣 𝕕𝕖 𝕥𝕖𝕩𝕥𝕖. Sinon, envoi ton problème ou pose ta question dans le groupe de discussion directement ici : https://t.me/+wA27vACOEU8xZDM8

Écrivez lui le code HTML qui a servi à réaliser ce tableau. N'oubliez pas que tout commence avec la structure de base du document HTML. A retrouvé : - Code commenté - Code aéré (propre, lisible) - Mettez en pratique le cour en respectant l'indentation, la structure de base et les style appliqué. Pour toute personne qui aura fini le TAF je le prie de me l'envoyer ici et non dans le groupe de discussion ; @TDG_intrepide Une fois votre devoir terminé, vous enverrez votre devoir (code source) à @TDG_intrepide et l'exécution (capture d'écran de l'exécution) dans le groupe pour les deux versions (ordinateur et mobile). Votre devoir devra être remis sous forme de fichier compressé, car elle permettra plus facilement la portabilité du code. Un code portable est un code qui s'exécute tel quel sans faire de manipulation ou d'installation supplémentaires. Correction : demain 19h00 avant la suite du cours

TAF : Votre papa a une salle de cinéma et il aimerait faire une page web qui pourrait montrer le film du jour où le programme de la semaine des films... Sachant que vous suivez une formation, il vous demande votre aide. Il aimerait que le tableau du programme des film ressemble à ceci :

𝕃𝕖𝕤 𝕥𝕒𝕓𝕝𝕖𝕒𝕦𝕩 (suite et fin) Les attributs d'un tableau Un tableau peut très vite devenir complexe à mettre en place, alors il existe des attributs qui pourront modifier le comportement normal de notre tableau. Si vous avez testé le code précédent, vous rendrez compte que notre tableau est apparu nu (sans bordure) Pour lui donner une bordure, l'attribut border avec pour valeur 1 doit être spécifié. L'attribut align peut prendre les valeurs left|center|right. Cet attribut permet de définir l'alignement du texte. Elle peut être placée dans le titre du tableau et/ou dans les cellules Les attributs de fusion des cellules La fusion permet d'allouer plus d'espace à certaines cellules qu'à d'autres. On peut faire une fusion verticale ou horizontale des cellules Pour une fusion verticale, on utilisera rowspan avec les valeurs numériques 1|2|...|n. Ces valeurs permettra d'avoir une cellule au sein de 2,3...n ligne. Ex:

<tr>
      <td rowspan="2">Données 1</td>
      <td>Données 2</td>
      <td>Données 3</td>
    </tr>
<tr>
      <td>Données 4</td>
      <td>Données 5</td>
    </tr>

En testant ce code, on verra que La donnée 1 s'affichera de part et d'autre pour la ligne 1 et la ligne 2. Pour la fusion horizontal, on utilisera colspan. Le principe est le même sauf que la cellule fusionnée occupera plus d'espace de façon horizontal ! Ex: <tr> <td colspan="2">Données 1</td> <td>Données 2</td> </tr> <tr> <td>Données 3</td> <td>Données 4</td> <td>Données 5</td> </tr> Essayez ces codes pour voir comment elle marche !

𝕃𝕖𝕤 𝕥𝕒𝕓𝕝𝕖𝕒𝕦𝕩 (suite) Bon à savoir Il existe ce qu'on appelle des commentaires en HTML ! Un commentaire est tout simplement du code ou du texte pour une indication par exemple, et qui ne sera pas interprété par le navigateur. (Nous y reviendrons). Syntaxe : <!-- Tout ce qu'on veut ignorez --> Pour revenir à notre cas, je vais faire des exemples du tableau Ex 1 :

<table>
  <!-- Insérons le titre du tableau -->
  <caption>Titre de notre tableau</caption>

  <!-- Insérons notre groupe d'entête -->
  <thead>

    <!-- Insérons notre ligne -->
    <tr>
      
      <!-- Insérons par exemple 3 cellules d'entête -->
      <th>Cellule 1</th>
      <th>Cellule 2</th>
      <th>Cellule 3</th>
    </tr>

  </thead>

  <!-- Insérons notre groupe du corps de notre tableau : c'est ici qu'on mettra les données du tableau -->
  <tbody>
    <!-- Insérons une nouvelle ligne dans notre tableau -->
    <tr>
     
      <!-- Insérons les données dans cette ligne grâce aux cellules normales -->
      <td>Données 1</td>
      <td>Données 2</td>
      <td>Données 3</td>
    </tr>
  </tbody>
</table>

NB: L'utilisation du groupe de pied d'un tableau est souvent rare. Il est généralement utilisée pour des tableaux assez volumineux afin de rappeller les cellules d'entête de tableau. Essayez le code !

𝕃𝕖𝕤 𝕥𝕒𝕓𝕝𝕖𝕒𝕦𝕩 En HTML, structuré ses données à l'affichage grâce à un tableau est un excellent choix, car facilite la lecture des données ainsi que leur assimilation. Un tableau est un ensemble formé de ligne et de colonnes pouvant contenir des données structurées. Syntaxe : <tab

le>...</table>

Éc

rire simplement cela , indique au navigateur qu'on veut faire un tableau. Et comme dans la plupart des éditeurs, les tableaux sont regroupés en plusieurs parties : - Le titre du tableau : <cap

tion>Titre du tableau</caption>

- 

L'entête du tableau • Le groupe d'entête : pour un meilleur visibilité et là on parle de question de sémantique auprès du navigateur, regroupé les entêtes du tableau est fortement recommandé Syntaxe : <the

ad>...</thead>
   

• La cellule d'entête : <th>

Nom de la cellule</th>

- 

Le corps d'un tableau : <tbo

dy>...</tbody>

- 

Le pied d'un tableau : <tfo

ot>...</tfoot>

- 

Une ligne dans un tableau : <tr>

...</tr>

- 

Une cellule normale dans un tableau : <td>

Contenu de la cellule</td>

Bonsoir à tous, on se retrouve aujourd'hui pour continuer avec un nouveau tuto sur l'HTML. Votre environnement de travail étant déjà prêt, vous serez invité à tester des codes et à faire de petits exercices. Let's go... Installez-vous bien 😊

Un bon programmeur est celui qui teste tout ce qu'on lui montre... Si tu veux tester, maintien ton doigt sur un des codes et il sera instantanément copier. Colle le dans ton éditeur, et pour créer un fichier réfère toi au 𝕥𝕙𝕖𝕞𝕖 𝟶 vu précédemment et plus précisément sur 𝔼𝕥𝕦𝕕𝕖 𝕕'𝕦𝕟 𝕖𝕕𝕚𝕥𝕖𝕦𝕣 𝕕𝕖 𝕥𝕖𝕩𝕥𝕖. Sinon, envoi ton problème ou pose ta question dans le groupe de discussion directement ici : https://t.me/+wA27vACOEU8xZDM8

𝕃𝕖𝕤 𝕝𝕚𝕤𝕥𝕖𝕤 En HTML , il existe 2 types de liste : - Les listes ordonnées (Order List : ol) Ex: <ol>...</ol> - Les listes non ordonnées (Unorder list: ul) Ex: <ul>...</ul> Pour rajouter un élément de liste dans notre liste, on utilise la balise <li>...</li> à l'intérieur de nos balises de liste. Ex: Pour une liste ordonnée <ol>   <li>Pomme</li>   <li>Ananas</li> </ol> Pour une liste non-ordonnée <ul>   <li>Pomme</li>   <li>Ananas</li> </ul> La différence entre une liste ordonnée et une liste non ordonnée est que : Pour une liste ordonnée les élément sont numérotée (1,2,3... Ou a, b, c...) et pour une liste non-ordonnée, ils sont juste placé avec des puces à disque et des 𝕔𝕒𝕣𝕣𝕖𝕤. 𝕄𝕠𝕕𝕚𝕗𝕚𝕔𝕒𝕥𝕚𝕠𝕟 𝕕𝕦 𝕔𝕠𝕞𝕡𝕠𝕣𝕥𝕖𝕞𝕖𝕟𝕥 𝕕𝕖 𝕝𝕒 𝕓𝕒𝕝𝕚𝕤𝕖 𝕕𝕖 𝕝𝕚𝕤𝕥𝕖 𝕠𝕣𝕕𝕠𝕟𝕟𝕖𝕖 On peut modifier le comportement d'une liste ordonnée juste en rajoutant l'attribut type. On donnant la valeur 1 à l'attribut type, on obtient une liste sous la forme : 1. Pomme 2. Ananas On donnant la valeur a à l'attribut type, on obtient une liste sous la forme : a. Pomme b. Ananas On donnant la valeur i à l'attribut type, on obtient une liste sous la forme : i. Pomme ii. Ananas Ex : <ol type="A">   <li>Pomme</li>   <li>Ananas</li> </ol> On donnant la valeur disc à l'attribut type, on obtient une liste sous la forme : °. Pomme °. Ananas On donnant la valeur square à l'attribut type, on obtient une liste des éléments carrées. Ex: <ul type="square">   <li>Pomme</li>   <li>Ananas</li> </ul>

𝕃𝕖𝕤 𝕥𝕪𝕡𝕖𝕤 𝕕𝕖 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 Noté qu'il existe 2 grands groupes de balises à savoir : - Les balises de types block - Les balises de types inline 😇 [ Devoir à faire ] Donner la différence entre ces 2 grands groupes de balises Ne pas confondre : Les grands groupes de balises ne sont pas les types de balises Parmis les types de balises, nous pouvons citer : Les 𝕓𝕒𝕝𝕚𝕤𝕖𝕤 𝕕𝕖 𝕥𝕚𝕥𝕣𝕖𝕤 Les balises de titre nous permettent de définir le type de titre que l'on souhaite dans notre page. Syntaxe : <hx>...</hx> x : étant un nombre variant de 1 à 6. Plus x est petit et plus le titre est important et grand. Ex: <h1>...</h1>, <h5>...<h5>