DIY Responsive Design Partie I: Éléments et balises HTML

Avec la popularité croissante de la navigation Web mobile, il est de plus en plus courant de créer des pages Web qui peuvent fonctionner efficacement sur plusieurs appareils. Dans ce guide en 3 parties, nous aiderons les propriétaires d’entreprises de bricolage à comprendre certains des concepts et outils de base utilisés lors de la création d’un modèle de magasin réactif. Aucune connaissance préalable du code n’est nécessaire, mais étudier certaines bases de HTML et CSS aidera grandement à comprendre tous les sujets abordés ici. Pour commencer, consultez notre article sur les meilleurs tutoriels en ligne pour apprendre à coder.

Dans la partie I, nous nous concentrerons sur la présentation des éléments et des balises HTML et sur la manière dont vous travaillerez avec ces zones pour la conception de votre page réactive.

Créer des éléments

Les pages Web sont créées à l’aide de Éléments HTML, qui sont des blocs de code créés à l’aide de balises qui entourent le contenu que vous souhaitez afficher sur une page Web. Il existe un grand nombre de balises utilisables sur les pages Web, mais les balises les plus couramment utilisées sont div, a, ul, ol, li, p, img, span, h1, h2, h3 et h4.

Pour créer un élément HTML, ouvrez d’abord une balise; par exemple,

. Notez la partie de classe dans l’exemple. Ceci est un attribut de balise.

Les attributs aider à décrire le contenu d’une balise et fournir des informations au navigateur sur la façon dont certaines balises spéciales (comme une et img balises) devraient fonctionner. Les attributs les plus courants que vous utiliserez sont:

  • id – Un seul élément peut avoir un attribut id sur votre page. Ceci décrit un élément unique.
  • classe – Une collection d’éléments qui partagent une présentation et / ou des fonctionnalités similaires. Plusieurs classes peuvent être utilisées sur une page.
  • href – Attribut de référence de lien hypertexte. Il ne peut être utilisé que sur des balises et des balises de lien
  • src – Attribut source. Contient l’URL permettant de localiser une ressource de page telle qu’un fichier de script ou un fichier image. Ceci est couramment utilisé sur la balise img, par exemple: .
  • alt – Balise de texte alternative. Inclus sur la balise img pour fournir une description aux lecteurs d’écran et aux moteurs de recherche du contenu d’une image.

Après avoir ouvert une balise, vous ajouterez le contenu qui s’affichera aux visiteurs; par exemple,

Contenu de page génial.

À la fin du contenu destiné aux visiteurs, une balise de fermeture est ajoutée; par exemple,

Contenu de page génial
En relation :  7 idées pour optimiser vos listes Amazon

. La balise de fermeture est fondamentalement la même chose que la balise ouverte sans les attributs et avec une barre oblique après le crochet angulaire gauche (). Cette balise indique au navigateur où terminer un élément et est très utile pour aider le navigateur à savoir quand arrêter d’appliquer certains styles.

Notez la structure de cet exemple

Contenu de page génial

. La balise ouverte se compose toujours des crochets angulaires gauche et droit entourant en premier le nom de la balise, suivis directement dans n’importe quel ordre par le ou les attributs de balise. Vient ensuite le contenu de l’élément immédiatement suivi de la balise de fermeture. Nous insistons sur ce point car de nombreux problèmes de présentation sont généralement le résultat d’une balise cassée.

Il existe des exceptions à cette structure globale; par exemple, le img La balise ne nécessite pas de balise de fermeture et ressemble généralement à ceci:

<img src = “https://www.mydomain.com/folder/img.jpg » alt = “une brève description.” class = “myImageClass” />.

Travailler avec des balises

Lorsque vous commencez à créer des pages, vous construisez des structures d’éléments pour produire la mise en page souhaitée pour le contenu de la page. Chacune des balises mentionnées précédemment dans ce didacticiel a des objectifs très spécifiques sur la page.

  • div – Une balise de niveau de bloc utilisée pour entourer d’autres éléments. En règle générale, les balises div sont utilisées pour créer une division de page en définissant des lignes et des divisions de contenu.
  • ul, ol, li – Listes non ordonnées et ordonnées et leurs éléments de liste individuels. Liste non ordonnée
      les balises créent des listes avec des puces et une liste ordonnée

        les balises créent des listes avec des nombres commençant à 1. L’élément de liste

      1. La balise est utilisée à l’intérieur des balises ul et ol pour définir un seul bloc de contenu à puces. Bien que les balises ul et ol puissent seulement contiennent des balises li comme enfants, les balises li peuvent contenir tout type de contenu enfant.
        • Par exemple:
          Inacceptable:

            Contenu de page génial


          Acceptable –

          • Contenu de page génial

        • Gardez à l’esprit que les éléments ol, ul et li sont éléments de niveau bloc, ce qui signifie qu’ils occupent tout l’espace de leur élément parent (conteneur), créant un bloc.
      2. img – Comme indiqué précédemment, il s’agit d’une balise d’image et le src et alt des attributs sont requis pour cette balise. Il s’agit généralement d’un élément en ligne, mais certains styles peuvent le présenter comme un élément de bloc.
      3. h1, h2, h3, h4, h5 et h6Balises d’en-tête. Les nombres 1 à 6 représentent l’importance de la balise d’en-tête où h1 est le plus important et h6 est le moins important. h1 est généralement réservé au titre de la page, h2 représente les principaux titres de section, h3 est utilisé pour les en-têtes de sous-sections, h4 représente des titres de page mineurs et ainsi de suite. Toutes les balises d’en-tête sont des éléments de niveau bloc.
      4. p – Une balise de paragraphe, utilisée pour présenter une collection de corps de texte qui représente un seul paragraphe de contenu. Ceci est un élément de niveau bloc.
      5. envergure – La balise span est utilisée pour envelopper un groupe de mots dans une balise d’en-tête ou de paragraphe. Il est traité comme un élément en ligne et est destiné à englober des phrases pour appliquer un style de texte tel que gras et italique.
      6. uneUne balise d’ancrage est utilisé pour créer des hyperliens sur une page qui renvoie vers d’autres pages sur ou hors de votre site. Il s’agit d’un élément en ligne et nécessite l’attribut href, qui définit l’URL vers laquelle le contenu est lié.

    Plus tôt, nous avons brièvement mentionné niveau de bloc et éléments en ligne. La principale différence entre les deux est: éléments de niveau bloc sont traités comme des blocs empilés les uns sur les autres avec un seul saut de ligne entre chaque élément.

    Éléments en ligne, d’autre part, couler avec le texte sur une page. Aucun saut de ligne n’est appliqué après eux et ils ne peuvent contenir que d’autres éléments en ligne ou du texte. Les éléments de niveau bloc peuvent contenir d’autres éléments de niveau bloc, des éléments en ligne et du texte.

    Conseil de codage: Il est généralement considéré comme une mauvaise pratique d’inclure des éléments div et ul / ol dans les balises p et h1-h4.

    Cela conclut la partie 1 de notre guide des pages Web réactives DIY. Dans le prochain article, nous discuterons de Bootstrap et de la création de pages réactives pour votre site.

    Vous souhaitez que notre équipe conçoive un modèle ou une page responsive pour votre entreprise? Découvrez nos services de conception personnalisés et nos modèles premium!


Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.