Introduction au développement d'e-mails HTML

1. Bienvenue dans le cours !: Votre boîte de réception est probablement remplie de courriels, promotions, ventes, cartes électroniques d'anniversaire, vous le nommez. Mais vous êtes-vous déjà demandé ce qui fait cocher ces e-mails ? Bonjour, je suis Vanessa de la société créative Bios. À la fin de ce cours, vous aurez les compétences nécessaires dans votre boîte à outils pour développer des e-mails HTML sans éditeur de glisser-déposer. Avoir une connaissance préalable du HTML et du CSS rendra cette classe plus facile, mais ne constitue pas une exigence. Pour le projet de classe, vous développerez un e-mail HTML, commercialisez votre ville natale ou une ville que vous souhaitez visiter. Chaque vidéo de cette classe s'appuiera sur les connaissances acquises dans les vidéos précédentes, et chaque vidéo fournira de nouvelles étapes pour votre projet de classe. Maintenant, commençons. 2. Outils gratuits pour ce cours: Tout d'abord, vous aurez besoin d'un éditeur de code source. En tant qu'utilisateur Mac, je préfère Atom, qui est une application open source et légère qui est extrêmement personnalisable. Une option gratuite pour les utilisateurs de Windows est le Bloc-notes ++. Se sent très similaire à Notepad, mais il a des fonctionnalités faites pour écrire du code. Si vous disposez déjà d'Adobe Creative Cloud, vous pouvez utiliser Dreamweaver, mais n'importe quel éditeur de code source vous servira. Bien sûr, il y a beaucoup d'autres options disponibles, mais c'est là que j'ai de l'expérience dans l'utilisation et que je me sens confiant de recommander. Les graphismes contenus dans votre e-mail stimuleront l'engagement et la rétention de la marque. J' utilise Illustrator et Photoshop pour mon travail quotidien. Mais vous pouvez utiliser un outil gratuit comme Canva ou Adobe Spark pour créer vos graphiques si vous n'avez pas accès aux outils Adobe. Si vous n'avez pas encore d'éditeur de code source, téléchargez et installez l'une des options gratuites compatibles avec votre ordinateur à utiliser pour cette classe. Des liens vers tous les outils mentionnés, ainsi que quelques autres, sont disponibles dans les notes de classe. 3. Comment fonctionne un e-mail ?: Donc, la première étape pour coder les e-mails est de comprendre comment ils fonctionnent. e-mails non textuels sont créés à l'aide de HTML, de CSS et d'images. C' est comme recevoir une page Web spécialement créée dans votre boîte de réception. Cependant, il y a une différence, les pages Web sont structurées en utilisant Divs et HTML sémantique. Les e-mails sont structurés à l'aide de tableaux. Si vous êtes familier avec l'histoire du web design, vous le savez probablement du milieu à la fin des années 90, concepteurs utiliseraient des tableaux pour mettre en page leurs sites Web. Mais ce ne sont pas les années 90. Alors, pourquoi diable utilisons-nous encore des tables pour la conception de courriels ? Les clients de messagerie sont ce que vous utilisez pour recevoir vos e-mails, tels que Gmail ou Outlook ou d'autres messages dont vous n'avez peut-être pas entendu parler, tels que M Client ou mailbird. Il y a tellement de clients différents disponibles pour les utilisateurs , mais tous n'interprètent pas HTML de la même manière. clients de messagerie plus anciens ou même certains des plus récents ne prennent pas en charge le code HTML plus récent, tel que Divs. Sans être sûr à 100% de la façon dont votre destinataire recevra l'e-mail, il est préférable d'être sûr et d'utiliser ce que vous savez fonctionne dans 100 % des clients de messagerie. 4. Explication des e-mails HTML: Ok, donc il y a trois composants que vous devez tous connaître pour créer un design de table. Vous avez votre table, c'est les balises de table d'ouverture et de fermeture. Ensuite, vous avez une ligne de table ou TR, puis vous avez les données de table, et vous imbriquez cela à l'intérieur de la ligne du tableau pour créer des cellules ou des colonnes. Donc, c'est une ligne, et si vous voulez créer une autre ligne en dessous de cela, vous pouvez soit la réécrire à nouveau, soit simplement la coller. Ajoutons un Hello World, actualisez, et vous pouvez voir qu'il a ajouté une autre ligne en dessous. Mais ça ne ressemble pas beaucoup. Ainsi, vous pouvez utiliser certains attributs HTML pour améliorer l'apparence de votre table. Donc, un attribut de table HTML que nous allons ajouter en ce moment, généralement vous voulez que la bordure soit définie à zéro, mais nous allons ajouter une bordure d'un pixel pour l'instant. De cette façon, vous pouvez voir ce que font tous les autres attributs html. Donc, on va se rafraîchir. Ainsi, vous pouvez voir qu'il a ajouté une bordure autour des deux lignes et les deux cellules. Ajoutons simplement une autre cellule à chaque rangée ici, donc il y a un peu plus à jouer avec. Par conséquent, un autre attribut important que vous souhaitez utiliser est le remplissage des cellules. Donc, si le remplissage des cellules est défini sur zéro, c'est à peu près la valeur par défaut. J' aime utiliser un rembourrage cellulaire d'environ zéro. Cela donne une belle quantité d'espace. Donc, c'est un peu comme l'attribut padding en CSS. Ainsi, vous pouvez voir qu'il a ajouté 30 pixels tout le long du contenu à l'intérieur de la cellule. Vous pouvez également utiliser l'espacement des cellules qui fonctionne un peu comme des marges, il ajoutera effectivement un remplissage entre les cellules plutôt que du contenu. Donc, si vous êtes familier avec le modèle de boîte sur CSS, c'est comme utiliser une marge. C' est un espacement cellulaire de zéro. Vous ajoutez un espacement des cellules de 30. Vous pouvez le voir pousser les cellules plus loin les unes des autres. Revenons à l'espacement des cellules de zéro. Couleur d'arrière-plan. Si vous voulez changer la couleur de votre tableau serait couleur BG. Faisons ça un beau gris doux et rafraîchissons. Vous pouvez voir qu'il a changé la couleur d'arrière-plan. Il y a d'autres attributs qui sont importants. Vous ne verrez pas l'effet de celui-ci maintenant parce que ce n'est qu'une seule table, et si vous aviez des tables imbriquées, celles-ci seraient plus importantes, mais vous aurez valign qui s'alignera verticalement comme vous le souhaitez. Ensuite, vous avez une ligne qui va aligner horizontalement. Il est également important de noter que la plupart, sinon tous, ne sont pas pris en charge en HTML5, mais qu'ils fonctionnent toujours dans la conception de la messagerie électronique. Vous pouvez également appliquer le CSS en ligne, mais vous pouvez vous en tenir aux attributs HTML au moins jusqu'à ce que d'autres clients de messagerie commencent à utiliser le CSS en ligne. 5. Comment imbriquer des tableaux: D' accord. Donc, disons que vous voulez avoir un e-mail qui a deux lignes, et la première ligne a une colonne qui s'étend sur toute la largeur. La deuxième rangée comporte trois colonnes espacées uniformément, elles occupent 33 % de la largeur autorisée. Donc, il peut sembler que vous pouvez juste faire une ligne de colonne ici, puis une autre ligne ici avec trois cellules à l'intérieur. Donc, malheureusement, vous ne pouvez pas le faire de cette façon parce que certaines des largeurs deviennent funky si vous avez une ligne qui a une cellule, puis une autre ligne juste en dessous qui a trois cellules. Donc, il y a deux options pour réparer cela. Vous pouvez placer une table juste après l'autre, ou imbriquer une table à l'intérieur d'une autre cellule de tableau. Donc, nous allons essayer ces deux options parce qu'elles ont toutes deux un look différent, mais très similaire. Donc, si on retourne ici, commençons par fermer cette table. Donc, cela va devenir la ligne qui est une ligne pleine largeur. Ensuite, nous allons transformer ceci en une table séparée, donc nous allons juste copier cette ligne entière ici, la balise de table d'ouverture, cette façon vous n'avez pas à réécrire tout le truc. Nous allons le coller et puis appuyez sur l'onglet pour obtenir cela. Nous allons sauver et revenir en arrière et recharger. Maintenant, vous avez une colonne pleine largeur et trois colonnes en dessous. Cependant, il a un peu trop de rembourrage ici et c'est parce que cela a un remplissage de cellule de 30. Donc, cela va ajouter 30 tout le chemin autour de la table, mais ensuite il va ajouter 60 entre chacune des colonnes et c'est parce qu'il ajoute 30 de chaque côté de la cellule. Donc, ce qu'on pourrait faire pour se débarrasser de ça, on ne peut pas juste se débarrasser du rembourrage cellulaire ici parce que ça va juste se débarrasser du rembourrage tout autour. Mais, si c'est bien avec vous d'avoir ce rembourrage supplémentaire là-dedans, alors vous pouvez aller de l'avant et utiliser cette méthode. Si vous ne voulez pas le remplissage supplémentaire, et que vous voulez juste avoir trois colonnes, vous pouvez imbriquer une table à l'intérieur d'une autre cellule de ce tableau. Donc, nous allons essayer cette option. Alors, allons-y et on va couper tout ça. Ensuite, nous allons supprimer cette table puisque nous n'en avons plus besoin. Nous allons simplement supprimer tout l'espace supplémentaire dont nous n'avons pas besoin. Donc, je vais ajouter une autre ligne de tableau ici juste en dessous de la ligne d'origine, la ligne de table pleine largeur. Ensuite, je vais créer une autre cellule de données de table. Donc, il y a une rangée d'affilée, et une cellule dans une cellule, donc c'est égal. Ensuite, nous allons simplement créer une autre table, et cette table n'a pas besoin d'attributs, vous pouvez ajouter des attributs si vous en avez besoin, mais celle-ci va juste être une table vide. On va coller ce qu'on vient de couper dedans. Appuyez sur enregistrer et revenir au navigateur et appuyez sur actualiser, et vous pouvez voir qu'il a toujours un rembourrage 30 autour d'elle, mais n'a pas ce remplissage supplémentaire entre les colonnes. Donc, c'est l'un des avantages de l'imbrication d'une table à l'intérieur d'une cellule est qu'elle prend les attributs qui sont appliqués à la table d'origine, tels que le remplissage de la cellule autour de la table entière, mais il n'a pas le remplissage de 30 cellules appliqué à chacune de ces colonnes. Vous vous habituerez à voir les tables imbriquées car c'est ainsi que vous allez créer des conceptions plus structurées. Mais maintenant que vous avez une compréhension de la structure de l'e-mail, concevons le modèle d'e-mail. 6. Autres conseils: Voici quelques conseils plus rapides avant de commencer. Pour cette classe, vous pouvez utiliser les images que j'ai fournies dans le fichier de projet ou consulter les liens que j'ai fournis et les notes de projet pour tirer le meilleur parti de vos graphiques de messagerie. Une grande partie de votre liste de diffusion ouvrira l'e-mail sur leur téléphone ou ils peuvent être sur une connexion de données plus lente. Soyez conscient de vos utilisateurs et faites la taille du fichier image aussi petite que possible. J' ai un lien dans les notes du projet avec plus d'informations sur l'optimisation de vos images. Beaucoup de concepteurs construiront leurs e-mails dans Photoshop avant de commencer à coder votre e-mail. Si vous ne parvenez pas à créer une maquette dans Photoshop, faites un croquis de votre e-mail pour déterminer où tout va. Nous ne couvrirons pas les courriels réactifs mobiles et cette classe particulière, mais c'est quelque chose qui peut être fait. trouverez plus d'informations et de liens dans les notes de projet. 7. Projet : Pour commencer: Alors, commençons avec le projet réel. Donc, dans vos notes de projet, il y aura quelques téléchargements que j'ai ajoutés là-bas. Il va y avoir un modèle d'e-mail qui est juste le modèle vide avec lequel nous allons commencer ce projet. Il va y avoir un autre fichier HTML qui contient toutes les images et le contenu et tout ce qui est déjà ajouté. Je vais également avoir la copie et les images disponibles pour téléchargement là-bas si vous voulez suivre étape par étape. Si ce n'est pas le cas, vous pouvez utiliser votre propre contenu et vos propres graphiques. Donc, c'est le modèle que nous allons commencer avec et cela ressemble à ceci en ce moment, dans un navigateur. Donc, comme vous pouvez le voir, il n'y a pas de logo, il n'y a pas de photos, il n'y a pas de contenu, pas de gros titres, pas de liens, rien. J' ai laissé ce pied de page ici. Vous pouvez échanger les liens contre votre propre contenu, ou vous pouvez simplement le laisser tel quel, mais vous voulez être conforme à CAN-SPAM et utiliser vos propres liens de désabonnement et afficher liens en ligne et tout ce qui est amusant exigé par la loi. Quand tu en auras fini, ça ressemblera à ça. Ainsi, comme vous pouvez le voir, nous pouvons changer la couleur de fond, nous avons ajouté une image de héros , un titre, un paragraphe d'introduction , trois colonnes tout le long, puis deux colonnes en bas. Alors, commençons. 8. 1ᵉ partie du projet : Ligne d'une colonne: Alors, allons entrer. Donc, tout ce qui va être une balise head et ce doctype HTML, vous allez vouloir garder tout cela la même. Ce ne sont que quelques styles spécifiques au client et certaines choses qui aident à rendre le contenu un peu meilleur à l'intérieur des clients de messagerie. Donc, en faisant un tour rapide, nous avons quelques notes que j'ai ajoutées spécifiquement pour vous, les étudiants de The Skillshare. Je vais juste vous dire, où mettre certains contenus, où certaines choses devraient être changées dans le pied de page pour que vous soyez fractionné conforme. Toutes ces bonnes choses juste pour rendre les choses un peu plus facile si c'est première fois que vous jouez avec un e-mail HTML. Donc, nous allons commencer par cette première rangée. Donc, cette première ligne a un titre graphique et un paragraphe entier avec un lien. Donc, commençons par ajouter l'image, et cela va juste aller sur cette table principale ici. Donc, à l'intérieur de cette ligne de données de table vide, il n'y a rien à l'intérieur. Donc, commençons par ouvrir une balise image, puis en ajoutant la source, donc c'est à l'intérieur du dossier images, puis cela s'appelle le héros de l'e-mail, à juste titre. Nous allons ajouter une balise alt au héros de l'email. La balise alt sera juste le même texte que sur l'image. Vous voulez ajouter tous les textes tout le temps parce que parfois vous allez avoir des gens qui pourraient utiliser un lecteur d'écran pour leur faire lire l'écran, puis cela leur donnera une description précise de ce que l'image est réellement si ils ne le voient pas. Vous voulez également l'ajouter, juste au cas où vous avez des personnes qui ont des images désactivées dans leurs e-mails de cette façon, elles peuvent voir les images sans avoir à les télécharger. Parfois, les gens les éteignent pour des raisons de sécurité, parfois ils le désactivent pour enregistrer des données. Alors, sauvegardez ça. Retournez au modèle d'e-mail et charger, et vous pouvez voir qu'il a ajouté l'image ici. Maintenant, nous allons ajouter ce titre et ce paragraphe. Donc, je vais ajouter un saut de ligne. Faisons trois sauts de ligne juste pour une bonne mesure, et nous allons commencer par une travée. Vous ne pouvez pas utiliser les balises de titre dans la conception HTML ou les balises de paragraphe d'ailleurs, vous voulez utiliser des balises de police ou de span, car c'est ce que les clients de messagerie peuvent tous comprendre. Donc, nous allons ajouter du CSS en ligne pour styliser cette balise span, et nous allons changer la famille de polices. Vous pouvez le changer à ce que vous voulez, mais j'utilise Arial, Helvetica, c'est plutôt bon, Helvetica, San-Serif, et faisons la couleur de ceci, faisons-le, laissez-moi essayer ce bleu, voyons ce que ce bleu ressemble à. Ensuite, faisons la taille de police de cette plage, faisons 30 points. Ajoutons une hauteur de ligne juste pour lui donner un peu plus de place de respiration. Faisons 140 pour cent. Actualiser. Retourne. Recharger. Pourquoi ça ne marche pas ? C' est parce que je n'ai rien mis dans la balise span, ça aiderait. Donc, le titre est de découvrir votre nouvelle ville préférée, point. Sauver, rafraîchir, sympa. Maintenant, ajoutons une autre balise span en dessous. En fait, on n'a pas à retaper tout à nouveau. Copions simplement la balise d'ouverture et collez-la, puis nous allons changer la taille de la police pour quelque chose d'un peu plus lisible pour un paragraphe. Faisons 10 points, puis changeons la couleur de ceci. Ce sera le premier paragraphe, vous voulez qu'il soit lisible, nous ne voulons pas de paragraphe bleu complet. Cela va être une image 25272e est mon préféré comme la couleur noir charbon à utiliser, et nous allons fermer cette balise span. Ensuite, à partir du document que je vous ai fourni, copier-coller le paragraphe dans, puis nous allons ajouter un lien en savoir plus. Maintenant, revenons ici rafraîchir. Donc, comme vous pouvez le voir, parce que ce sont deux balises span, elles s'affichent en ligne les unes avec les autres. Contrairement à la balise de paragraphe et à une balise de titre, il ne s'agit pas d'ajouter un saut de ligne seul. Donc, nous allons le faire. Donc, après le titre, ajoutons simplement deux sauts de ligne, sauvegardez, actualisez, cool. Quelque chose que je veux faire avec cela avant d'ajouter un lien, nous allons ajouter une entité HTML ou un caractère spécial qui est une ligne qui ressemble à ceci. Cette petite flèche orientée vers la droite ajoute un peu de pop supplémentaire au lien comme certaines personnes aiment dire, et le rend juste un peu plus cliquable à la recherche. Donc, cela s'appelle la flèche droite, mais c'est génial dans l'utilisation de &rarr, ou rarr, selon que nous l'appelons. Retourne. Actualiser. Donc, comme vous pouvez le voir, la petite flèche mignonne là-dedans, et nous allons envelopper ce savoir plus à l'intérieur d'un lien. Donc, nous avons la balise d'ancrage, puis la référence. Cela fonctionne très bien, maintenant fermons cette balise d'ancrage, et nous allons en faire le lien qui se trouve à l'intérieur du document mot. Collez-le, et nous allons ajouter CSS en ligne pour ce lien pour changer la couleur du lien car en ce moment c'est juste la valeur par défaut, comme le violet profond ou quoi que ce soit les balises d'ancrage par défaut sont dans les navigateurs ces jours-ci. Donc, nous allons faire une vérification de style, comme sur la plage et ensuite nous allons dire couleur, et nous allons juste utiliser le même bleu dans le titre, point-virgule, fermer ça, rafraîchir. Maintenant, nous avons un joli lien bleu qui relie. Nous allons également vouloir rendre cette image cliquable. La plupart des gens, lorsqu'ils cliquent dans un e-mail, ils ne vont pas cliquer sur les petits liens qu'ils cliquent habituellement simplement sur l'image principale. Donc, vous voudrez généralement que la chose la plus importante dans l'e-mail soit le lien dans l'image du héros. Donc, si nous revenons à l'image ici et puis devant ça, nous allons juste avoir une balise d'ancrage, puis la référence h, et ensuite nous allons fermer cette balise d'ancrage, et nous allons juste copier cette balise même longueur ici, collez-le là-dedans, et je peux voir qu'il est cliquable. Un petit truc que vous voudrez faire lorsque vous faites des images cliquables, parfois si vous insérez un client de messagerie, il ajoutera cette bordure vraiment bizarre autour images cliquables qui ne gèle pas vraiment avec le reste de votre design . Ainsi, vous pouvez ajouter une bordure à une vue de zéro à l'image elle-même, non à la balise d'ancrage. Ensuite, cela éliminera cette bordure que vous verrez à l'intérieur des clients de messagerie. Donc, il semble que c'est tout pour cette première intro image héros e-mail de titre. Je n'aime pas vraiment cette couleur sur ce titre. Donc, nous allons ajuster faire ce titre de la même couleur exacte que le paragraphe là-bas. Maintenant, nous allons travailler sur les trois colonnes qui sont en dessous de cette ligne d'ouverture. 9. 2ᵉ partie du projet : Ligne de trois colonnes: Maintenant que nous avons ajouté cette première ligne, ajoutons la deuxième ligne qui a trois colonnes allant jusqu'à travers. Donc maintenant, tout est à l'intérieur de cette rangée ici. Donc, nous allons avoir besoin d'ajouter une ligne séparée en dessous de cela, donc TR, TR et à côté de TR, bien sûr, vous avez besoin TD, données de table. Donc, c'est ajouter une colonne parce que cette ligne de tableau a une colonne, celle en dessous, elle doit avoir une colonne. Et puis nous allons imbriquer une autre table à l'intérieur de cette colonne pour avoir le look à trois colonnes. C' est une colonne dans les colonnes. Nous allons ajouter une ligne de tableau car, comme vous pouvez le voir, il n'y a qu'une seule ligne qui contient trois colonnes. Nous allons ajouter trois colonnes, donc trois TDs, enregistrer, recharger. Tu ne vois rien parce qu'il n'y a rien dedans encore. Donc chacun d'entre eux a une image. Donc, nous allons juste ajouter les images, l'image. J' espère que je le fais bien. Source de l'image, à l'intérieur de la source puis tapez le dossier images et nous allons commencer avec celui-ci. Sauvegardez. Vous allez ajouter votre balise alt. Un concepteur ajoute toujours des balises alt. C' est la Casa de Cadillac. Sauvegardez. Et puis nous allons ajouter l'image à la seconde, image, source à l'intérieur du dossier images. Celle-ci est la dernière librairie. Ensuite, nous allons ajouter un alt de la dernière librairie, qui est un endroit incroyable où vous devez aller. Image, source et cette troisième colonne dans le dossier images. Et puis ça va être le signe d'Hollywood. Alt tag, panneau hollywoodien. Dis juste Hollywood. Si on y retourne, rafraîchissez-vous. Vous pouvez voir les trois images. Ils sont bien alignés en trois colonnes. Maintenant, nous allons ajouter le contenu réel, donc nous allons ajouter ces petits sous-titres, un paragraphe, et un lien vers chacun d'entre eux. Donc, ce que nous pouvons faire ici, c'est que nous pouvons simplement copier le titre de l'original. Copiez la portée du paragraphe d'origine, donc ces deux travées et nous allons simplement les coller ici pour que vous n'ayez pas à réécrire tout ça. Ensuite, nous allons réduire la taille de ce titre de paragraphe que nous venons d'ajouter, qui était à l'origine de 30 points. Changons ça à 20 points, rends-le un peu plus petit. Ensuite, nous allons mettre à jour le sous-titre, oups, ne peut pas taper et parler en même temps. Rafraîchissez juste pour voir à quoi ça ressemble. Encore un peu trop gros. Faisons juste 16 points. Qu' est-ce que Cuppy grand contenu du document mot et passé ici. Sauvegardez. Rafraîchir. Donc, comme vous pouvez le voir à nouveau comme ici parce que ce ne sont pas des éléments de ligne de blocage ou des éléments en ligne, il suffit de l'ajouter juste à côté de l'image. Donc, nous allons ajouter une pause après cette image là. Je pense qu'on peut ajouter une autre pause. C'est mieux. Nous allons aussi ajouter - Ajoutons une pause ici à ce lien, juste une. Bien sûr, maintenant le lien est tout seul. Donc, vous pouvez voir les choses se déplacent, mais cela aura l'air un peu différent fois que nous ajouterons le contenu dans ces deux. Alors copions tout. En fait, non, nous devrions probablement changer le lien parce que ce n'est pas le bon lien. Donc, revenir au document Word, copier cette URL, coller cette URL, maintenant c'est trois URL. Maintenant, nous allons simplement copier ces deux travées et tout son contenu. Allez à la deuxième colonne ici. Nous allons coller ça là-dedans, et ensuite nous allons juste mettre le titre correct dans ce sous-titre. Librairie. Rafraîchir. Copiez le contenu correct à partir du document Word. Coller. Retournez ici et copiez l'adresse du lien correct. Collez ça ici, rafraîchissez. Ok, ça a l'air mieux. Reprenons cela pour la troisième fois, collez cela, et maintenant nous allons prendre ce sous-titre et mettre le signe Hollywood, puis copions le bon paragraphe. Collez le paragraphe correct à l'intérieur. Beaucoup de concepteurs simplement copier et coller. Copiez l'adresse du lien, collez cette URL sur l'adresse d'origine, et boom, actualisez. Ok, quelque chose ne regarde pas ici. Donc tout se déplace un peu. Et certains de ces paragraphes sont en quelque sorte en train de fonctionner ensemble. Donc, ce que nous allons vouloir faire, c'est que nous allons vouloir ajouter quelques attributs HTML à ce tableau ici. Ainsi, comme vous vous en souvenez dans les vidéos précédentes, vous pouvez ajouter des attributs qui affectent uniquement la table imbriquée et non la table entière. Donc, ce que je pense que nous devrions faire est sur cette table imbriquée, ajoutons un remplissage de cellule de 10 pixels. Rafraîchir. Il regarde encore un peu, mais maintenant nous avons 20 pixels entre chaque colonne, ce qui est beaucoup plus lisible. Je crois que j'ai compris pourquoi celui-ci a l'air différent de ces deux-là. Donc, comme vous vous en souvenez, nous avons ajouté un saut de ligne supplémentaire entre l'image et le sous-titre, mais nous ne l'avons pas ajouté aux deux autres lorsque nous avons copié et collé tout. Donc nous allons juste, ces deux pauses ici, allons juste coller cela après la deuxième image et après la troisième image, enregistrez-le, rafraîchissez, et maintenant vous pouvez voir tout est aligné parfaitement. Donc, c'est tout pour cette colonne ici, donc maintenant nous pouvons passer à la dernière ligne de l'e-mail, qui est la ligne à deux colonnes. 10. 3ᵉ partie du projet : Ligne de deux colonnes: Donc maintenant, nous allons ajouter une nouvelle ligne ici qui a deux colonnes et ressemblera exactement à ceci quand nous en aurons fini avec. Donc nous allons retourner ici et c'est la dernière rangée sur laquelle nous avons travaillé. Nous allons donc ajouter une rangée en dessous de cette rangée et imbriquer un autre câble à l'intérieur de celle-ci. Donc nous allons créer cette rangée. Créez cette table. Colonne de données donc maintenant c'est une ligne de colonne, et nous allons imbriquer cette table à l'intérieur de celle-ci. Puis une rangée, avec deux colonnes. Cool. Donc, cette première colonne a juste une image. Donc, nous allons à la source de l'image, à l'intérieur du dossier images, et ceci est observatory.png. Je vais ajouter la balise alt de l' observatoire Griffith, fermez ça. Vous allez à la deuxième colonne, et vous pouvez voir l'image ici. Donc, cette colonne, deuxième colonne va avoir les mêmes tailles de sous-titre et de paragraphe. Donc, nous pouvons revenir au code et copier le sous-titre et paragraphe de l'une de ces colonnes et le coller, et nous pouvons juste y mettre le titre correct. Nous pouvons copier et coller à partir du mot document. Collez ce juste là et copiez et collez la bonne ligne ici. Sauver. Retourne. Actualiser. Cool. Donc maintenant, nous avons une ligne avec deux colonnes. Mais comme ce qui se passait plus tôt avec cette ligne de trois colonnes, il n'y a tout simplement pas assez d'espace entre ces deux colonnes. Donc, nous allons revenir à la table imbriquée. Ici et nous allons ajouter un rembourrage cellulaire de 10. Actualiser. Donc, maintenant vous pouvez voir qu'il a ajouté 10 pixels à chaque colonne, ce qui représente un total de 20 pixels entre la colonne. Bonne vieille algèbre, et il a également déplacé sur cette image de 10 pixels et maintenant il s'alignent parfaitement avec cette ligne au-dessus. Alors oui. Je pense que c'est tout pour les rangs. Sur la vidéo suivante. 11. 4ᵉ partie du projet : Derniers réglages: Hey, donc nous avons presque fini de faire ressembler ce modèle à cet objectif fini ici. Donc, la différence la plus étonnante entre ces deux est évidemment la couleur de fond. Donc, nous allons travailler à faire de cette table d'arrière-plan cette couleur taupe ici au lieu de ce navigateur blanc uni derrière elle. Alors, allons à cela, où il est dit arrière-plan, il y a une petite étiquette ici. Ajoutons un bgcolor à cela, c'est la table principale qui contient toutes les autres tables, et nous allons ajouter le code x pour cela. Enregistrer, actualiser. Donc, comme vous pouvez le voir, il a ajouté la couleur de fond à cela, mais il y a aussi cette drôle de bordure blanche qui va tout le chemin autour du navigateur. Donc, c'est en fait la balise corporelle. La balise de corps d'ouverture a également besoin d'une couleur ajoutée, et nous allons faire la même couleur ou peut-être que vous aimez la bordure et que vous voulez garder la bordure. Vous pouvez garder la frontière si vous voulez, mais on s'en débarrasse dans celui-ci. Rafraîchir, plus de bordure. Ok, autre chose que nous devrions probablement changer c'est qu'il doit y avoir un peu plus de marge de respiration entre le premier paragraphe, la ligne d' introduction, et cette rangée de trois colonnes ici. n'y a pas assez d'espace, il y a beaucoup d'espace ici, pas d'espace ici, réparons ça. Donc, si nous faisons défiler vers le bas et trouvons ce paragraphe d'ouverture, ajoutons simplement deux sauts de ligne là. Enregistrer, revenir en arrière, rafraîchir, et maintenant vous pouvez voir qu'il y a un peu plus de place pour respirer. 12. Les prochaines étapes: Si vous ne l'avez pas encore fait, complétez une version de votre fichier de messagerie et téléchargez une capture d'écran dans votre projet dans cette classe. Pour envoyer votre e-mail, vous devrez utiliser un fournisseur de messagerie comme ceux mentionnés au début de cette classe. Je vais les couvrir plus en détail dans une autre classe, ou vous pouvez trouver plus d'informations sur SkillShare. Commenter ci-dessous si vous avez des questions. Bonne chance.