Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

420-B16-RO : Techniques de développement d’applications hypermédia I 2 – Langag

420-B16-RO : Techniques de développement d’applications hypermédia I 2 – Langage HTML partie 2 Professeur : Sylvain Labranche slabranche@crosemont.qc.ca I) Les tableaux  Indiquer le début et la fin du tableau <table> </table>  Indiquer le début et la fin d’une ligne <tr> </tr> tr pour table row  Indiquer le début et la fin du contenu d'une cellule. <td> </td> td pour table data  Une cellule (td) doit être à l'intérieur d'une balise ligne (tr).  Une ligne (tr) doit être à l'intérieur d'une balise tableau (table).  Exemple diapositive suivante Exemple: tableau1.html (tableau sans bordure) Exemple: tableau1.html (2) Formater un tableau avec CSS  Bordure séparée: de 1 pixel (1px), de couleur noire (black) avec un trait plein (solid)  Exemple: tableau2.html Formater un tableau avec CSS (2) Bordures collées: Pour coller les bordures entre les cellules, on utilise une propriété du tableau: border-collapse avec la valeur collapse. Largeur du tableau: Width:250px; Exemple: tableau3.html Titre & en-tête du tableau Titre du tableau Il est aussi appelé Légende Entre <caption> et </caption> Propriété CSS pour position: caption-side: top (par défaut) ou caption-side: bottom Une ligne d’en-tête Entre <th> et </th> (au lieu de <td> et</td> ) Ajouter une bordure à l’en-tête td,th { border: 1px solid black; }  La virgule se lit "et" : Toutes les balises td ET th. • En général, L’en-tête est mis en gras par les navigateurs Exemple: tableau4.html Exemple: tableau4.html (2) Fusion des lignes et des colonnes La fusion de colonnes (ou horizontale) On utilisera l'attribut colspan. <td colspan=3>... suite </td> On indique que la cellule s'étalera sur 3 colonnes. La fusion de lignes (ou verticale) On utilisera l'attribut rowspan. <td rowspan=2>Bélanger</td> On indique que la cellule s'étalera sur 2 lignes. Exemple: tableau5.html Structurer un tableau  Le HTML5 prévoit des balises pour structurer de façon logique le contenu des grands tableaux. L‘en-tête du tableau: entre <thead> et </thead> Le corps du tableau: <tbody> et </tbody> Le pied du tableau: entre <tfoot> et </tfoot> Remarque: La balise <tfoot> doit se situer avant la balise <tbody> . Cela permet au navigateur de prévoir le pied du tableau avant la réception des données. Exemple: tableau6.html Dans ce tableau, le pied de page reprend les mêmes éléments que l’en-tête. Exemple: tableau6.html II) Mettre en valeur des textes HTML propose différentes balises pour mettre en valeur des mots plus importants que d’autres: <strong> … </strong> Pour mettre un texte bien en valeur. Signifie fort, ou important Le texte est affiché généralement en gras par les navigateurs. Les synthèses vocales qui lisent les pages Web appliquent une intonation de voix différente ou un niveau sonore plus élevé. <em> … </em> Pour mettre un peu en valeur un texte. Signifie emphase Le texte est affiché généralement en italique par les navigateurs. Mettre en valeur des textes (2) <mark> … </mark> Permet de faire ressortir visuellement une portion de texte (qui n’est pas nécessairement important), Le texte est affiché généralement en surligné Mettre en valeur des textes (3) Ces balises indiquent le sens des mots et non pas comment ceux-ci doivent s’afficher. On peut changer leur affichage en CSS.  L’utilisation des anciennes balises <b> </b> pour gras, <i> </i> pour italique est déconseillée en HTML5. Mettre en valeur des textes (4) Exemple: mise_valeur_texte.html Mise en exposant et en indice <sup> … </sup> Pour mettre en exposant un texte <sub> … </sub> Pour mettre en indice un texte Mise en exposant et en indice (2) Exemple: exposant_indice.html Texte barré et texte pré- formaté Texte barré: <del> … </del> Texte pré-formaté: <pre> … </pre> Affiche le texte tel qu’il a été encodé dans l’éditeur de texte: Les espaces, Les tabulations et Les retours chariots sont respectés. Le texte est affiché avec une police à pas fixe: tous les caractères avec la même longueur. Texte barré et texte pré- formaté (2) Exemple: barre_formate.html III – Les couleurs Les paramètres des couleurs sont très importants. On peut définir: La couleur des caractères La couleur du fond de toute la page La couleur d’un bloc La couleur d’une portion du texte La couleur des bordures La couleur d’un élément est définir par le paramètre color. Comment spécifier les couleurs ? Par un nom Par la fonction rgb Par un nombre hexadécimal a) Les noms des couleurs: On peut spécifier une couleur par son nom anglais: blue, red, black, Silver etc. b) La fonction rgb On peut spécifier une couleur: rgb(r, v, b) où r, v et b qui vont de 0 à 255 représentent respectivement l’intensité lumineuse du rouge, du vert et du bleu. rgb(r%, v%, b%) où r%, v% et b% vont de 0% à 100% en représentent les pourcentages Exemple: rgb(192, 0, 255) est équivalent à rgb(75%, 0%,100%) C’est le violet. La fonction rgb (2) La forme rgb est celle qui permet de mieux prévoir une couleur ou d’en préparer une autre. Les couleurs franches: Elles ont une seule composante non nulle. La fonction rgb (3) Trois composantes égales: rgb(0,0,0) noir rgb(128, 128, 128) gris moyen rgb(255, 255, 255) blanc brillant Remarque: Plus les valeurs sont élevées, plus la couleur est lumineuse. Plus les valeurs sont faibles et plus le résultat est sombre. c) Les valeurs hexadécimales La forme classique qui est complètement inutile était de fournir la couleur sous forme d’une valeur hexadécimale (système à base 16) constituée de 2 chiffres hexadécimaux. Construction générale: Chaque groupe va de 00 à FF ( 0 à 255) et de gauche à droite représente l’intensité du rouge, du vert et du bleu. Les valeurs hexadécimales (2) Exemple: #8080FF Ainsi la couleur #8080FF est équivalente à rgb(128, 128, 255) Remarque: On peut lorsque les 3 groupes sont chacun formé de deux chiffres égaux abréger la notation #3366FF remplace #36F Hexadécimal e décimal e A 10 F 15 Nom rgb( , , ) Hexa Couleur produite black 0, 0, 0 #000000 noir white 255, 255, 255 #FFFFFF blanc gray 128, 128, 128 #808080 gris silver 192, 192, 192 #C0C0C0 argent blue 0, 0, 255 #0000FF bleu navy 0, 0,128 #000080 bleu marine cyan 0, 255, 255 #00FFFF cyan (turquoise) teal 0, 128, 128 #008080 bleu pétrole green 0, 128, 0 #008000 vert olive lime 0, 255, 0 #00FF00 citron vert fuchsia 255, 0, 255 #FF00FF fushia (lilas) purple 128, 0, 128 #800080 violet red 255, 0, 0 #FF0000 rouge maroon 128 0 0 #800000 marron Changer les couleurs d'un élément À l'intérieur de la balise, vous ajoutez: style="color:#FF0000;" style="color:rgb(24,156,255);" style="color:red;" Par exemple : <h1 style="color:red;">Titre avec couleur</h1> Voir couleur.html Pouvez-vous penser à une meilleure façon de procéder? IV) Encodage des caractères spéciaux Les caractères réservés par le code HTML doivent être encodés de façon particulière. Par exemple, si on veut que le caractère < s'affiche dans une page Web, il faut utiliser l'encodage spécial. caractère Référence nommée Référence numérique < < < > > > « " " & & & Les formulaires Exemple formulaire.html Balise form <form> </form> pour formulaire Balise input pour un champ de saisie : <input type="text" name="pseudo" /> pour un champ de texte à une ligne L’attribut name donne un nom au champ, pour utiliser les données plus tard. Balise label pour donner un nom au champ: <label>Votre pseudo</label> : <input type="text" name="pseudo" /> On pourrait mettre label n’importe où, il faut lier un label et un input ensemble. Input correct <form> <label for="pseudo">Votre pseudo : </label> <input type="text" name="pseudo" id="pseudo" /> </form> Un name et un id? name est le nom de la variable, que l’on pourra traiter plus tard. Id est l’identifiant de cette balise label. Les deux peuvent être différents Attributs de input size: spécifier la taille du champ maxlength : spécifier la taille maximale de la saisie placeholder: Texte affiché dans le champ, qui disparaît lorsque l’on commence à saisir. value: valeur par défaut (ne disparaît pas) Autres types de input type="password" : zone mot de passe avec étoiles au lieu des caractères type= "email" : Semble identique à text, mais navigateur reconnaît que c’est un email et pourra par exemple proposer un courriel déjà utilisé type= "tel" : idem type= "url" : idem type= "number" : zone mot de passe avec étoiles au lieu des caractères attributs min, max et step(saut lorsque l’on clique sur les lignes) Autres types de input (2) range Sélectionner un nombre avec un curseur color Sélectionner une couleur date Sélectionner une date du format 02/05/1990 Aussi possibles : time, week, month, datetime Autres champs de saisie textarea pour recueillir des commentaires plus longs largeur et hauteur contrôlés par CSS Les choix input de type checkbox pour plusieurs choix dans une liste Il faut donner un nom différent à chaque case à cocher <input type="checkbox" name="choix" checked /> checked indique que la case sera cochée par défaut input de type radio pour un seul choix dans une liste Même nom pour chaque option : pourquoi? Choix dans une liste déroulante: pas de balise input, plutôt select option selected pour une valeur par défaut Regrouper des champs dans un grand formulaire Exemple uploads/s3/ 3-html-partie-2.pdf