Éléments et techniques de mise en page HTML
Les éléments de mise en page HTML définissent la disposition de la page que comment les éléments doivent être organisés pour obtenir une page bien structurée. Tandis que les techniques de mise en page HTML embellissent les éléments pour obtenir une page dans un format présentable. Gardant à la vue de l'importance des éléments HTML et des techniques HTML, ce guide a l'intention de fournir les résultats d'apprentissage suivants:
- Quels sont les éléments de mise en page HTML
- Cadres CSS
- Disposition de la grille
- Disposition de Flexbox
- Propriété flottante
Éléments de mise en page HTML
Le HTML5 a trouvé le soutien de divers éléments sémantiques qui peuvent être utilisés pour concevoir la disposition de la page HTML. On peut utiliser les éléments sémantiques de manière organisée pour obtenir la disposition souhaitée. Les éléments HTML suivants sont définis pour définir la disposition de la page en conséquence.
: La section d'en-tête définit la partie d'en-tête du document
: Cet élément est utilisé pour créer une nouvelle section à l'intérieur d'une page
Le
: Un article dans une page HTML peut être défini à l'aide de cette balise.
Le
: Cet élément crée une rubrique pour résumer toute information ou détail sur cette rubrique. En cliquant sur cette rubrique, les informations seraient affichées qui sont stockées à l'intérieur.
: La balise est utilisée pour mentionner des informations détaillées sur toute chose / objet spécifique.
: Il représente le pied de page d'une section / document.
Pour en savoir plus sur les éléments sémantiques HTML, cliquez ici.
Techniques de mise en page HTML
Les techniques de mise en page HTML aident à créer une disposition multicolonne et les techniques peuvent être choisies parmi l'une des suivantes fournies ici.
Cadres CSS
Les cadres CSS aideraient à créer une disposition réactive et attrayante d'une page Web. Ces cadres incluent diverses classes intégrées équipées de styles, vous n'avez donc pas besoin de créer vos propres styles. Parmi divers cadres CSS, W3.CSS et Bootstrap sont largement utilisés.
Comment utiliser le W3.Cadre CSS
Il s'agit d'un cadre CSS moderne bien défini censé fournir des fonctionnalités élevées de styles pour une page Web. Son objectif est de fournir une alternative diversifiée au framework bootstrap. Pour utiliser le W3.classe CSS, vous devez simplement insérer le lien suivant vers votre page HTML.
Comment utiliser le framework bootstrap
Le framework bootstrap est un autre cadre CSS qui propose également des classes intégrées pour fournir divers types de styles aux pages HTML. Pour utiliser le framework Bootstrap, vous avez deux possibilités:
- Télécharger Bootstrap
- Utilisez le lien CDN directement dans votre document HTML (recommandé)
Les liens CDN suivants vous aident à importer des instances bootstrap pour styliser votre page Web.
Collez le lien suivant dans votre tête (recommandé)
Placez le script suivant à la fin (recommandé) de l'étiquette du document
En plaçant les liens ci-dessus, vous pourriez utiliser divers cours d'amorçage pour styliser votre page HTML en conséquence.
CSS flottait
Cette technique est très utile pour placer des éléments HTML. Par défaut, les éléments sont placés l'un après l'autre. Cependant, vous pouvez utiliser la propriété flottante / claire pour manipuler le placement par défaut des éléments. La propriété claire est utilisée pour briser la continuité de la propriété flottante, de sorte que si vous souhaitez placer l'élément sur la ligne suivante, vous devez utiliser la propriété claire.
La fonctionnalité du CSS flottait et des propriétés claires est facile à apprendre mais difficile à implémenter. L'exemple suivant fait référence à l'utilisation des propriétés flottantes et claires.
Html
Html
CSS
Javascrip
Le code HTML ci-dessus crée trois divisions avec des noms de classe "prim1","prim2" et "prim3".
CSS
.prim1flottant: à gauche;
Largeur: 33%;
Color en arrière-plan: orange;
.prim2
flottant: à gauche;
Largeur: 33%;
Color en arrière-plan: LightskyBlue;
.prim3
Clear: à gauche;
Largeur: 66%;
Color d'arrière-plan: LightGreen;
L'ingrédient principal de cet exemple est le CSS qui montre comment le flotteur et les propriétés claires sont utilisées. Le float = ”gauche»La propriété est utilisée dans les deux premiers divans Alors que le troisième div a le clear = ”gauche".
Sortir
Disposition de Flexbox
Le module CSS Flexbox (boîte flexible) aide à créer une structure de mise en page flexible sans utiliser le flotteur ou aucun élément de positionnement. De plus, les éléments peuvent être disposés en ligne ou dans une colonne (une seule dimension). Pour utiliser la technique CSS Flexbox, vous devez ajouter class = ”contenant du flexion"À l'élément et à"afficher«Les propriétés de la conjonie flexible doivent être définies sur«fléchir". Les éléments enfants ne nécessitent aucune classe, ils sont simplement ajustés avec la classe parentale.
L'exemple fourni ci-dessous démontre mieux l'utilisation d'une disposition flexible.
.flex-containerAffichage: flex;
Html
CSS
Dans le code ci-dessus, un div est créé avec class = ”contenant du flexion»Et sa propriété d'affichage est définie sur«fléchir".
Sortir
Disposition de la grille
La disposition de la grille permet de disposer divers éléments enfants de manière présentable. La disposition de la grille offre la disposition en deux dimensions (avec ligne et colonne simultanément). Pour utiliser ceci, la classe = ”contenant du réseau«Est utilisé pour l'élément parent tandis que la classe =»grille"Est utilisé pour les éléments enfants. De plus, le afficher la propriété du conteneur de la grille peut être définie sur le grille ou pour brassard en ligne.
.grille-containerAffichage: grille;
Html
CSS
Javascrip
Dans le code ci-dessus, la classe de parent div est réglé sur "contenant du réseau"Et les articles pour enfants ont des cours"grille".
Sortir
La sortie montre la principale différence entre la grille et la disposition flexible. La disposition de la grille a été élargie en multi-dimension tandis que la disposition flexible organise les éléments en une seule dimension.
Conclusion
Les éléments de mise en page HTML et les techniques de disposition HTML fournissent la fonctionnalité pour concevoir une page Web de manière présentable. Pour cela, divers éléments sémantiques HTML et dispositions HTML sont fournis dans cet article. Les éléments sémantiques servent au mieux le but de leur utilisation et sont donc considérés comme un ingrédient important de la page Web. Les techniques de disposition HTML peuvent inclure des cadres CSS (bootstrap ou W3.CSS), CSS Float, CSS Flexible Box et CSS Grid.