Première mise en page basée sur les flottants (Extrait du site CoursWeb) Un élément flottant se place à la suite du flux, tout à gauche ou tout à droite de la ligne courante, selon qu’on lui ait attribué la valeur left ou right. Le flux principal poursuit sur le côté de la boîte flottante et…Continue reading Mettre en page 1 (flottants)
Mois : mars 2018
Structure sémantique d’une page Web
Un extrait du site AlsaCréations : Les éléments de section HTML5 Les éléments de section (section, article, nav, aside, header, footer) segmentent des portions du document, qui possèdent une valeur sémantique particulière ; contrairement à des éléments génériques comme span ou div qui ont un rôle totalement neutre, et ne servent qu’à regrouper d’autres éléments…Continue reading Structure sémantique d’une page Web
Intégrer des liens et des images
Intégrer des Iframes Exercice d’intégration d’une iframe dans une page HTML avec menu renvoyant les liens dans l’iframe. Le code HTML : Aperçu en direct de la page avec Iframe et menu : Lien vers « Le site de l’artiste » : Lien vers « Youtube » : Lien vers « Article sur Sud-Ouest » : Lien vers « Quintessence » : Lien…Continue reading Intégrer des liens et des images
Formater des tableaux en CSS : Exercice n°4
Exercice n°4 pour intégrer du CSS dans des tableaux : les sélecteurs CSS d’ordre Ci-dessous, les tableaux à reproduire avec utilisant dans le CSS les nth-child(n) ou nth-of-type (n) : Après un travail acharné, voici les Codes CSS : Aperçu des tableaux :
Formater des tableaux en CSS : Exercice n°3
Exercice n°3 pour intégrer du CSS dans des tableaux : l’utilisation du sélecteur « :nth-of-type » Le sélecteur :nth-of-type (“n-ième du type”) permet de sélectionner un ou plusieurs éléments en fonction de leur ordre dans la source et selon des critères que l’on détermine. Cette “pseudo-classes structurelles” est utilisée pour appliquer un style au contenu en fonction…Continue reading Formater des tableaux en CSS : Exercice n°3
Formater des tableaux en CSS : Exercice n°2
Exercice n°2 pour intégrer du CSS dans des tableaux Espacement des cellules : <table style= « border-spacing: 16px »> Fusion des bordures : <table style= « border-collapse: collapse »> Positionnement de la légende du tableau : <table style= « caption-side: bottom »> Cellules vides : <table style= « empty-cells: hide »> Largeur de tableau et de colonne : <table style= « width: 400px »> <tr>…Continue reading Formater des tableaux en CSS : Exercice n°2
Formater des tableaux en CSS : Exercice n°1
Comment placer un tableau entier dans du HTML Appliquer la formule suivante : table>tr*4>td*4>{cellule $} puis touche TAB Exercice n°1 pour intégrer du CSS dans des tableaux Tableau avec une prédéfinition des colonnes : <table> <col class= « col1 »> <col class= « col2 »> <tbody> <tr> <td>Cellule 1.1</td> <td>Cellule 1.2</td> </tr> <tr> <td>Cellule 2.1</td> <td>Cellule 2.2</td> </tr> </tbody>…Continue reading Formater des tableaux en CSS : Exercice n°1
Construire des tableaux en HTML
Les tableaux, obsolètes depuis l’utilisation du CSS, servent encore pour les newsletters. Fusion de cellules à l’horizontale : colspan= »2″ (pour 2 cellules) Fusion de cellules à la verticale : rowspan= »2″ (pour 2 cellules) Fusion de cellules à l’horizontale et la verticale : colspan= »2″ rowspan= »2″ (pour 2 cellules à l’horizontale et 2 cellules à la verticale)…Continue reading Construire des tableaux en HTML
Formater des listes en CSS
Deux exercices pour mettre en page des listes avec des feuilles de style CSS.
Créer des listes
Structurer des listes en HTML A partir d’un exercice donné, il m’a été demandé de structurer un texte en plusieurs formats de listes. Liste ul : liste à puces Le code pour faire une liste à puces se décline de la façon suivante : Les balises <ul></ul> pour déclarer la liste à puces Les balises <li></li>…Continue reading Créer des listes