Le guide du débutant pour

HTML et CSS pour les marketeurs

Table of Contents
Introduction 3

Qu'est-ce que les langages de programmation ? 4

Qu'est-ce que le HTML ? 5

Qu'est-ce que le CSS ? 6

HTML contre CSS 7

Codes HTML à connaître 9

Comment mettre à jourYovotre CSS 12

HTML & CSS : Ce qu'il faut éviter 14

Ressources et apprentissage supplémentaire : Cours, leçons et livres à explorer 15

Introduction
Avez-vous déjà fait un clic droit sur une page web et cliqué sur « voir le code source de la page » ou regardé

at the source code for an email? Or are you a former MySpace user who learned how
mettre à jour le code pour ajouter un arrière-plan stylé ou une chanson à votre page MySpace ? C'est

HTML. CSS est un langage de codage complémentaire qui applique une feuille de style à un donné
page of HTML code, changing the look and feel of the page to match your brand.

HTML et CSS sont parmi les plus populaires

langues utilisées par les développeurs, les marketers,

et designers. Bien qu'ils puissent sembler Les balises d'en-tête HTML dans les articles de blog améliorent-elles votre SEO ?

très technique et semblent nécessiter En apprenant quelques codes HTML simples et en comprenant
formation approfondie, il existe de nombreuses façons comment HTML et CSS fonctionnent ensemble, vous aurez la capacité
utiliser le HTML et le CSS de base au quotidien pour améliorer votre stratégie marketing et résoudre les problèmes

marketing. Vous avez peut-être déjà utilisé HTML des problèmes qui vous coûteraient généralement beaucoup de temps et

sans même le savoir quand vous avez formaté de l'argent si vous n'avez pas de développeur interne.
un lien, a mis à jour un en-tête de page, ou a édité un

page de votre site web ou d'un article de blog. Savoir Ce guide passera en revue les balises HTML les plus courantes et

HTML et CSS en tant que marketeur vous font gagner du temps Applications CSS pour les marketeurs. Nous examinerons les bases
et permet la personnalisation, l'optimisation, de chaque langue, les différences entre les deux,
et les avantages du SEO. et fournir des ressources, des outils et une formation supplémentaire.

Saviez-vous qu'inclure des mots-clés dans

3
Quelles sont les langages de programmation ?

Les langages de codage comme HTML et CSS, également connus sous le nom de langages de programmation, sont des instructions écrites qui

dire au logiciel quoi faire, comment afficher quelque chose ou comment traiter un algorithme. Programmation courante
les langages sont Java, Python et SQL. HTML et CSS sont connus commelangages de programmation déclaratifs
qui déclare ce qu'il y a sur une page web et comment elle devrait apparaître.

En général, les développeurs écrivent du code, comme HTML ou CSS, pour

communiquer avec le logiciel et dire à la page de défiler
d'une certaine manière, affichez les couleurs de votre marque, place

une image au centre de la page, ou faire quelque chose

lorsqu'un utilisateur effectue une action, commecliquer sur un lien pour
les amener à une autre section de la page.

HTML a été initialement créé pour faire la distinction entre

éléments structurels des pages web comme les paragraphes,
texte du corps et en-têtes dans un format de fichier .html.

Comme il manquait de fonctionnalités de conception, CSS

a été développé en tant que fichier séparé qui servirait
en tant que code de conception et exister en tant que fichier .css.

Maintenant, HTML et CSS fonctionnent main dans la main pour

livrez des pages web magnifiquement conçues avec

éléments de personnalisation et de référencement.

4
Qu'est-ce que le HTML ?

HTML, ou le langage de balisage hypertexte, utilise des balises pour modifier la structure, ou la façon dont le texte ou les objets apparaissent sur une page web.
Les balises HTML vous aident à organiser le contenu, à rendre une page plus facile à lire, ou à indiquer aux moteurs de recherche ce qui est le plus important

les mots-clés utilisent des balises d'en-tête. Voici un exemple d'un extrait de code HTML pour du texte hyperliens.

Ce code apparaîtrait comme ceci :cliquez ici

Le crochet, <, ouvre le code, et un crochet de fermeture
<ahref="[Link] ici</a>
</a> ferme le code. Sans accolade fermante,
le code ne fonctionnera pas correctement.

HTML est le plus souvent utilisé sur les pages web, dans les emails,

ou dans le back-end des articles de blog. Beaucoup de contenu

les systèmes de gestion (CMS) ont deux façons différentes de vous
peut éditer le contenu. Une façon est un WYSIWYG (ce que vous voyez est
ce que vous obtenez) éditeur, où vous pouvez modifier des éléments tels que la police

couleur, taille et style en sélectionnant dans un menu déroulant.

L'alternative est un éditeur HTML, souvent appelé le "code source."
Vous pouvez également modifier le HTML dans un standaloneÉditeur HTML.

Plus tard, nous passerons en revue les codes HTML courants

savoir et comment les formater.

5
Qu'est-ce que le CSS ? Image viaW3 Écoles

CSSsignifie Feuilles de style en cascade. CSS

dit au logiciel comment le HTML sur le web
la page doit avoir l'apparence, y compris la mise en page, la couleur

schéma, et mise en forme. CSS est une liste de règles

qui sont appliqués au HTML sur la page <p style="background-color:tomato">Lorem ipsum </p>
qui indiquent les couleurs de fond, les polices, les lignes

espacement, alignement, et plus.

Dans cet exemple, p est le sélecteur, il sélectionne où appliquer
Le CSS peut être implémenté sur une page en utilisant
le style. P signifie paragraphe, donc la couleur "Tomate" s'appliquera
au paragraphe.
soit une feuille de style interne soit une externe
feuille de style. Pour une feuille de style interne,
Voici un autre exemple de HTML et CSS ensemble :
dans un document HTML, vous indiquerez le
logiciel quelle est la couleur de fond
devraient être, les polices, et tout autre design <h1 style="color:red">Introduction à HTML et CSS</h1>
éléments qui s'appliquent à une certaine section ou
la page entière. Les feuilles de style externes sont

liés à la page, mais existent par eux-mêmes

page des codes de design.

Ceci est une balise d'en-tête h1 (indiquant qu'il s'agit du titre principal)
Voici unexemple d'un style CSS interne
appliqué à un certain texte(dans un éditeur de test pratique de la page) qui inclut une balise de style CSS indiquant que le
la couleur doit être rouge.
où vous pouvez essayer du code !)
HTML vs. CSS Voici un exemple de billet de blog en HTML sans CSS.

HTML est la colonne vertébrale technique

d'une page web. Il fournit les bases

structure pour la page, comme un cadre-
work. CSS is the style, which shows
l'utilisateur final le design, la marque,
couleurs et polices qui rendent votre
identité de marque unique. HTML
sans CSS est fonctionnel, mais pas
esthétiquement plaisant.

HTML est un moyen de formatage et

mettre à jour la structure d'une page web, ajouter

liens, ajouter des images, créer des listes, créer

Source:HubSpot
tables, et modifier le texte sur une page.
CSS met à jour les éléments de conception et

peut changer l'arrière-plan d'une page

couleur, couleur de police, définir une image comme

the background, change borders,

marges, changer les éléments sur le
page lorsqu'un utilisateur effectue une action

(comme les cacher), et plus.

Voici le même article de blog avec une feuille de style CSS appliquée.
Tu vois ? Beaucoup mieux.

7
 HTML vs. CSS : Voici les principales différences

HTML CSS

1 Code pour la structure de la page web 1 Code pour le style des pages web

2 Codes pour principalement des articles et éléments individuels Codes pour principalement des pages entières ou des pages individuelles

3 Peut exister sans CSS 3 Ne peut pas exister seul

4 Facile à apprendre 4 Plus technique à apprendre

5 Peut être traité par tous les navigateurs, 5 Plus de choix de styles et d'options que HTML
exigences techniques limitées
6 Un meilleur style et formatage que HTML
6 Gratuit, beaucoup de ressources/soutien disponibles
7 Gratuit, de nombreuses ressources / soutien disponibles

7 Manque de fonctionnalités de sécurité

8 Pas uniforme entre les navigateurs
8 Capacités dynamiques limitées
9 Manque de fonctionnalités de sécurité

Peut être appliqué à d'autres langages XML

Codes HTML à connaître Balises HTML courantes pour les professionnels du marketing

HTML balise :<html> Votre page web ici </html>

Peu importe où vous écrivez le HTML, il y a des éléments communs
Les balises HTML qui sont écrites de la même manière, indépendamment de
Cela spécifie que la page est une page HTML. Elle commence
au tout début du document et la balise est
l'éditeur.
fermé à la toute fin.

Voici la mise en page de base d'un document HTML.

Balise d'en-tête :<h1>
Votre en-tête ici </h1>
<h2> Votre sous-titre ici </h2>
<!DOCTYPEhtml>
<html> Les balises d'en-tête sont importantes pour les articles de blog. Elles

<corps> structurez vos publications et aidez à attirer l'attention du lecteur

<h1>This is our main header</h1> œil aux différentes sections. Ils sont également utiles pour
<p>Ceci est notre premier paragraphe</p> objectifs de SEO on-page, en tant qu'algorithmes de moteurs de recherche
</body> donnez plus de poids aux mots-clés qui se trouvent dans vos en-têtes.

</html>
Les en-têtes peuvent être formatés à l'aide de CSS pour indiquer le

style (font, font size, bold/italics, spacing on the page)

pour chaque balise d'en-tête (h1, h2, h3, etc.)
Chaque balise HTML commence par des crochets d'ouverture comme <html>

et se termine par des crochets fermés </html>. Dans l'ex- au-dessus

Tag de lien hypertexte :<<a href="url">Texte du lien</a>
ample, la première balise indique au navigateur que c'est un
Les hyperliens sont courants dans les emails, les billets de blog,
Document HTML. La balise <body> indique le corps du texte,
et d'autres fichiers HTML.
<h1> est l'en-tête 1, le titre principal de la page, et
<p> signifie copie de paragraphe.

9
Balises HTML courantes pour les marketeurs

Liste de balises : <p><p> paragraphe ici </p>

Cette balise sépare un groupe de texte en format paragraphe.
Liste à puces
Étiquette d'image :
<ul>
<li> premier élément de liste</li>
<li> deuxième élément de la liste</li> <img src="lien du fichier image" width="300" height="200"
<li> troisième élément de la liste</li> alt="description de mot-clé">
</ul>

This tag adds an image to your document from an image

Liste numérotée fichier et vous permet de changer la taille et d'ajouter du texte alternatif,

<ol> ce qui aide avec le référencement. Vous pouvez ajouter différents remplissages ou

<ol> premier élément de la liste</ol> d'autres attributs en utilisant CSS plus tard.

<ol> second list item</ol>

<ol> troisième élément de la liste</ol> Balises de formatage de texte :

</ol> Texte <strong> en gras ici </strong>

Soulignez <u> le texte ici </u>
Les listes aident à décomposer et à organiser <em> texte en italique ici </em>
contenu. Vous pouvez utiliser CSS pour changer le

types de puces, numéros ou alignement Pour formater la taille de police, la famille de police, le poids de la police, la hauteur de ligne, ou

dans la liste. autre style de texte, vous utiliserez des balises de style CSS, ou le style pour

l'ensemble de votre document sera appliqué au texte.

10
Tags de partage social : Balise corps : <<body> votre page Web ici </body>
Cette balise, comme on le voit dans l'exemple complet de page HTML

LinkedIn : ci-dessus, est le conteneur pour le contenu comme

[Link] listes, paragraphes, hyperliens et images sur
your webpage.
Facebook:
{"url":"[Link] Tag de saut de ligne : </br>

C'est un code vraiment utile pour le formatage. Il

En ajoutant votre URL souhaitée à la section de ce code ajoute une pause dans le texte et peut être utilisé dans
qui dit « URL », ceux qui cliquent sur le lien seront automatiquement en-têtes, paragraphes, ou n'importe où sur la page
allez sur LinkedIn ou Facebook et voyez un post pré-rempli déplacer la copie après la pause à la ligne suivante.
avec le lien fourni, épargnant à vos visiteurs le désagrément
de copier le lien vers un nouveau post eux-mêmes. Cela aide à
encourage le partage social et vous attire plus de visiteurs sur votre page. <h1> Votre en-tête qui est vraiment long et
Ceci peut être utilisé dans des articles de blog ou dans des e-mails et joints doit être divisé en deux
à une icône des logos LinkedIn ou Facebook. lignes ici </h1>

Title tag:<title> your title here </title>

Cette balise définit le titre de la page qui apparaît <span><span> élément </span>
at the top of your web browser. Cette balise aide à préserver le formatage
de la page. En plaçant un objet dans une balise span,
vous éviterez de gâcher le formatage
entourant cette image ou icône.

Pour tester les codes HTML et pratiquer, utilisez

W3Schools « terrain de jeu »et cliquez sur « Exécuter »

pour tester votre code.

11
Comment mettre à jour votre CSS CSS en ligne

Le CSS en ligne, comme nous l'avons mentionné plus tôt, ressemble à ceci :
Pour mettre à jour le CSS, la plupart des développeurs recommandent d'utiliser

une feuille de style pour l'ensemble des documents ou l'ensemble de votre site.

Cela vous facilite la tâche en tant que marketer. Par exemple,

<h1 style="color:red">Introduction à HTML et CSS</h1>
si vous avez une feuille de style, vous pouvez inclure du CSS qui dit
que tous les h1, balises de titre 1, doivent être en gras, taille de police 32

sans serif, et la couleur bleue. Ensuite, lorsque vous écrivez

Ici, la partie CSS est la couleur qui est indiquée par
dans votre HTML, vous lierez simplement la feuille de style au
le « style. » Vous pouvez mettre à jour le CSS en ligne en utilisant le style
document HTML, puis utilisez une balise h1 et ces styles
codes et mettre à jour tous les éléments de conception y compris
sera appliqué. {"padding":"marge intérieure","font family":"famille de police","background colors":"couleurs de fond","margins":"marges"}

et plus.
L'autre façon de mettre à jour le CSS est le style en ligne.
Cette méthode signifie qu'à l'intérieur de votre balise h1, vous ajouterez
Utilisercette liste de codes CSSpour trouver individuellement en ligne
une balise “style” et spécifiez des éléments comme la police, le poids, et
balises de style.
couleur. C'est une méthode plus chronophage qui laisse
plus de marge d'erreur et d'incohérence sur votre site,
mais il sera parfois nécessaire ou utile pour le singulier
pages ou éléments singuliers.

Astuce : le style en ligne prévaut sur les feuilles de style, donc si vous

apportez des modifications, elles écraseront tout maître

stylisation des feuilles de style.

12
Feuille de style externe

Pour mettre à jour le CSS en utilisant une feuille de style externe, vous allez créer
Here’s what a .css external stylesheet looks like.
un fichier .css séparé avec le style souhaité pour les éléments ou
groupes, puis lier le fichier .html avec le fichier .css.
corps{
Voici comment lier une feuille de style externe à un fichier HTML. couleur de fond:bleu clair;
}

<tête>
h1{
<link rel="stylesheet" type="text/css">
color:navy;
href="thisisyourcssfi[Link]">
marge-gauche:20px;
</tête>
}

Ce code indique à votre fichier HTML d'associer votre

Fichier CSS pour cette page et va dans l'en-tête de votre Lorsque vous reliez cette feuille de style à un document HTML,
document HTML. l'arrière-plan sera bleu clair, et tous les tags h1
sera bleu marine et indenté de 20px (pixels).
Conseil : L'en-tête de votre document HTML n'est pas le
identique à vos balises h1, h2 et h3. Balises d'en-tête à l'intérieur Lorsque plusieurs codes CSS sont présents, l'ordre
le document indique les titres des sections mais le de priorité que le logiciel choisira est :
<head></head> la balise désigne l'en-tête de l'ensemble
page web. C'est ici que vous pouvez inclure des choses comme 1 Style en ligne
Balises de suivi Google Analytics et autres logiciels 2 Feuilles de style externes liées dans l'en-tête
des traceurs pour pouvoir capturer des informations de
3 Style par défaut du navigateur
la page web.

13
 HTML et CSS : Ce qu'il faut éviter

En ce qui concerne HTML et CSS, il y a quelques choses majeures que les développeurs vont
Dites que vous êtes de grands non-non. Étant donné que les feuilles de style CSS peuvent s'appliquer à de nombreuses pages de votre site,

faites attention à ne pas apporter de changements majeurs à quelque chose qui pourrait entraîner des changements sur l'ensemble du site.

Voici des conseils en HTML et en CSS sur ce qu'il faut éviter en ce qui concerne le code.

HTML CSS

1 Oublier une parenthèse fermante. Pour chaque ouverture 1 Bien que parfois il soit logique d'utiliser du CSS en ligne

crochets comme un paragraphe ouvert <p> là styliser et appliquer un style à un titre individuel
doit y avoir une parenthèse fermante correspondante, </p>. ou paragraphe, en général, il est plus facile de créer une feuille de style

pour l'ensemble de la page web avec le style principal pour tous

2 Incluez toujours des balises alt pour les images. Ces h1,h2,h3tags, fonds, marges, remplissage, et
aider avec l'optimisation SEO et à décrire autres éléments stylés.
que contient l'image pour les moteurs de recherche.

2 When creating CSS style sheets, group sections

N'utilisez pas de retours à la ligne pour créer des listes, en conséquence et assurez-vous que tout soit bien
3
utilisez la balise de liste décrite précédemment. documenté.

N'oubliez pas votre DOCTYPE ou vous serez Ne mettez pas à jour une feuille de style si vous ne savez pas comment faire.
4 3
risque d'avoir des problèmes avec les navigateurs de nombreuses pages que vous allez affecter. Vérifiez avec vos développeurs

reconnaître le type de document. Ils peuvent si vous avez des questions car vous pourriez potentiellement casser
ne pas être capable de lire correctement votre code. des pages de votre site, les rendant illisibles.
RESSOURCES&APPRENTISSAGESUPPLÉMENTAIRE

Cours, leçons et livres à explorer

Maintenant que vous connaissez les bases de HTML et CSS, Débordement de pileest une communauté en ligne pour
vous pourriez être intéressé à en savoir plus. Ce n'est pas aussi développeurs avec des questions et réponses utiles.
effrayant comme vous l'avez peut-être pensé, n'est-ce pas ? Voici nos Demande conseil ou aide à ces malins lorsque
cours, leçons, tutoriels et communautés préférés apprendre à coder ou lorsque vous rencontrez des problèmes.
pour vous aider à apprendre à coder.

Codeacademypropose des cours dans tous les langages de programmation

des débutants aux experts avancés. Ils
offrir des cours gratuits ainsi qu'un abonnement payant qui <conclusion>
comprend plus de soutien et de retours de la part de leurs professionnels.
Ces outils aideront votre équipe marketing à
devenir plus indépendant, mais avec grand
[Link] des simulateurs de code et une pratique Le pouvoir s'accompagne de grandes responsabilités. Beaucoup

environnement pour tester votre code avec des modèles les équipes marketing et développement unissent leurs forces

for coding structures for both HTML and CSS. créer une liste maîtresse de codes HTML/CSS qui
sont disponibles pour que les marketeurs puissent les modifier, et ceux qui

freeCodeCampest gratuit (comme son nom l'indique) doit être évité. Essayez de mettre à jour
ressource avec plus de 5 000 tutoriels de codage. unEmail HTMLet concevoir un email exceptionnel
bulletin d'information, ajoutez des liens de partage sur les réseaux sociaux à votre prochain

Astuces HTML pour les marketeursestun guide avec HTML article de blog, ou optimisez l'ensemble de votre bibliothèque de blog pour

codes et tutoriels pour les marketeurs de HubSpot. SEO en utilisant des balises d'en-tête riches en mots-clés, mise à jour des balises alt

texte sur les images, et en utilisant un référencement on-page de premier ordre.

Apprenez à coder en HTML et CSS par Shay Howeest un Souviens-toi : ce qui est ouvert doit être fermé !
livre bien noté sur Amazon qui traite de N'oubliez pas de fermer les parenthèses !
les détails essentiels de l'apprentissage de HTML et CSS.
</conclusion>