Ouvrir l’index du contenu
Ce guide a été mis à jour le
Voulez-vous apprendre des bases de laHTML pour que vous puissiez l’utiliser dans WordPress et personnaliser votre site ? Et vous voulez savoir comment utiliser le CSS pour gérer l’apparence de tous les éléments de votre page ? Dans ce pilotage HTML e CSS vous découvrirez comment le faire sans avoir à étudier les codes pendant des heures. De plus, je vous laisse un tableau récapitulatif qui vous servira de référence quand vous en aurez besoin.
Vous pouvez gérer ces petits changements qui vous ont rendu fou, sans utiliser le programmeur !
Si vous souhaitez approfondir l’étude de ces codes, suivez nos cours vidéo HTML et CSS.
Prêt pour cette nouvelle aventure ? Allez !
Aide HTML et CSS
Comme je l’ai dit plus tôt, l’HTML et CSS vous permettent de gérer des personnalisations parfois difficiles à réaliser avec l’éditeur visuel WordPress classique.
Ouvrez la page d’édition de vos articles sur votre site WordPress. Maintenant, allez à la boîte de contenu. Vous remarquerez que vous avez deux onglets, Visualisationqui est celui qui est sélectionné, et Texte. Si vous sélectionnez Textevous verrez la version en code de ce que vous avez fait avec l’éditeur visuel.
Si vous avez besoin d’ajuster certains détails qui deviennent trop compliqués avec l’éditeur visuel, ouvrez le fichier Texte et travaille directement sur le code.
Qu’est-ce que le HTML ?
L’HTML est un langage de balisage, Langage de balisage hypertextece qui signifie qu’il permet de définir la fonction des différents éléments d’une page Web, du point de vue de la structure et du formatage.
Avec leHTML dire aux différentes parties du texte s’il s’agit de titres, sous-titres, paragraphes, listes… ou nous pouvons ajouter des images et des liens.
Qu’est-ce que le CSS ?
Le CSS est un autre code qui s’applique auHTML et permet de définir l’apparence des éléments d’une page Web. Avec CSS nous pouvons établir les couleurs, les tailles, les positions des différents éléments.
Le CSS est donc ce qui donne forme et couleur aux pages web.
Maintenant que nous avons trouvé à quoi servent ces codes, entrons dans le vif du sujet… pilotage HTML e CSS et nous allons commencer à découvrir comment les utiliser.
Aide HTML : la syntaxe HTML
Afin d’être correctement interprété par les navigateurs (Google Chrome, Mozilla, Safari, etc.), la baliseHTML doit respecter une certaine syntaxe. Et pour cela, nous avons le balisequi marquent le début et la fin d’un certain élément.
I balisedonc, alors, ils servent à dire, par exemple, « Ici commence un paragraphe… et ici finit. ».
Voyons ensemble ce qui constitue la base de la balise.
Étiquettes
Pour indiquer clairement au navigateur que nous avons inséré une balise baliseNous utilisons les symboles. <
e >
. On y insère le nom de l'élément balisequi doit toujours être en minuscules. Par exemple, ce qui définit un paragraphe est la lettre p :
Avec ce baliseSi un paragraphe démarre, disons au navigateur qu'il démarre.
Pour aviser le navigateur que le paragraphe, ou tout autre élément, est terminé, nous utilisons la barre / avant le nom de l'élément balise:
Voici donc un paragraphe complet :
Ciao! Benvenuto nella nostra guida HTML e CSS!
Ce type de balise est le classique, c'est-à-dire qu'il se compose d'un balise un pour l'ouverture et un pour la fermeture.
Mais d'autres balise peuvent être "vides", c'est-à-dire qu'ils ont un balise d'ouverture, dans lequel vous insérez toutes les valeurs dont nous avons besoin, et il n'y a pas besoin d'un balise de fermeture. C'est le cas de la balise pour insérer les images. Il contient le chemin vers l'image à insérer, puis ajoute une barre / à la fin :
.
Attributs
Vous l'avez peut-être remarqué quand je vous ai montré balise J'ai ajouté de la valeur. En fait, en plus du nom de la baliseJ'ai ajouté l'attribut srcou d'autres renseignements. La valeur de l'attribut est saisie à l'aide du symbole et des guillemets égaux :
.
La structure d'une page Web
La page web a une structure très précise. Dans la première partie il y a toutes les informations sur la page. Ensuite, il y a la partie relative au contenu, dans laquelle il y a une division supplémentaire entre l'en-tête, la partie principale et la partie inférieure de la page.
Commençons par la section initiale.
Déclaration du type de doctrine
html>
La première ligne d'un document HTML est la déclaration du type de document. Utiliser html>
nous indiquons au navigateur que nous utiliserons la version de HTML 5.
<html> ...tutto il contenuto della pagina... html>
A partir de la deuxième ligne, nous commençons tout de suite par la première. balise: <html>
. Ceci identifie le début et la fin de l'ensemble du document. HTML.
...informazioni sulla pagina...
Le balise contient des informations sur la page, telles que le titre, l'auteur ou les liens balise. Voyons ce que c'est.
Titolo della pagina
Le titre de la page est affiché dans la barre de titre du navigateur, mais aussi dans les résultats de recherche sur Google ou autres moteurs.
Objectifs balise sont tous "vides", ce qui signifie qu'ils n'ont pas besoin de balise et leur valeur est définie par les attributs de l'attribut appellation e content.
L'objectif balise jeu de caractères définit le type de caractères utilisés dans la page. Pour les langues latines, nous utilisons UTF-8. Le réglage du jeu de caractères, par exemple, permet aux voyelles accentuées d'être affichées correctement.
L'objectif balise descriptif est important pour le référencement : dans la page de résultats de recherche Google, il apparaît sous le titre. Cela donne une idée du contenu de la page au visiteur.
Auteur indique le nom de l'auteur du site.
css" href="https://sos-wp.it/css/style.css" />
Le balise n'est pas utilisé pour insérer un lien, mais pour lier le document HTML à d'autres ressources, comme le CSS. Dans l'affaire réfnous indiquons le chemin d'accès du fichier, donc ses paramètres CSS s'appliquera à notre page Web.
Autres balises dans la section tête
Dans l'affaire crâne nous pouvons alors trouver le balise pour insérer des scripts dans différentes langues, ou l'option balise
L'attribut genres'applique à l'élément individuel à modifier.
CSS...">Questo è il mio paragrafo.
syntaxe CSS
Le langage CSS se compose d'un sélecteur et d'instructions. Le sélecteur indique quel élément doit être modifié, tandis que les déclarations indiquent les paramètres à appliquer. Les déclarations sont placées entre crochets bouclés, en utilisant la paire propriété : valeurfermé par un point-virgule :
selettore { proprietà1: valore; proprietà2: valore; proprietà3: valore; }
Les sélecteurs sont de différents types. Nous pouvons appeler le HTML par le nom baliseun id ou une classe.
Pour appeler le sélecteur avec le nom baliseJ'écris juste le nom de la personne balisesans les symboles < e >.
p { color: #000000; } h1 { font-size: 50px; }
Avec ce système, le sélecteur permet d'appeler tous les éléments suivants balise dans le document. Dans le cas ci-dessus, tous les paragraphes auront du texte noir, et tous les h1 auront un caractère de 50 pixels.
Pour utiliser id et classes à la place, vous devrez les ajouter à l'élément qui vous intéresse.
L’id est une valeur unique, il ne peut donc pas y avoir deux identificateurs avec la même valeur dans un seul document.
La classe, par contre, peut être appliquée à plusieurs éléments.
Questo è un paragrafo.
Questo è un altro paragrafo.
Questo è un paragrafo senza classe.
Pour appeler un ID dans le fichier CSSPour la classe, nous utilisons le symbole #, tandis que pour la classe, nous utilisons le point :
#mioParagrafo { color: #222222; } .miaClasse { font-size: 18px; }
Dans cet exemple, seul le paragraphe avec id "myParagraph" sera gris, alors que tous les paragraphes avec la classe "myClass" ont un caractère de 18 pixels.
Maintenant que nous avons trouvé comment sélectionner les éléments à modifier, passons aux propriétés principales de l'élément CSS.
Propriétés CSS
Propriétés des polices
Nous commençons par l'étude des propriétés CSS qui s'appliquent aux polices, donc tout sur le formatage du texte.
famille de polices
p { font-family: "Times New Roman", Times, serif; }
La propriété font-family
permet de choisir le type de police. Sa valeur est composée de trois paramètres, séparés par une virgule. Ces paramètres sont trois familles de polices, de la plus spécifique à la plus générique : si la première n'est pas disponible pour être affichée sur le navigateur, on passe à la deuxième, ou à la troisième :
- famille 1le nom de la police. Si le nom est composé de plusieurs mots, vous devez le mettre entre guillemets, sinon vous n'avez pas besoin - par exemple Times New Roman, Book Antiqua, Monotype Corsiva..... ;
- famille 2est le nom d'une police plus répandue, mais similaire à celle que nous avons choisie en premier - Arial, Helvetica, Times..... ;
- famille 3est la famille générale - serif, sans-serif, monospace.
style de police
h2 { font-style: italic; }
Le font-style
peut avoir deux valeurs :
- normal, la valeur par défaut ;
- italique, ce qui rend le texte en italique.
Lorsque nous devons insérer un texte en italique, je suggère que nous réfléchissions à la question de savoir s'il est plus approprié d'utiliser la balise balise HTML ou CSS.
poids de police
span { font-weight: bold; }
Cette propriété indique l'épaisseur du caractère et peut avoir les valeurs suivantes :
- habituel ou 400texte normal ;
- audacieux ou 700Audacieux ;
- briquetplus mince que la valeur par défaut ;
- plus audacieuxplus souvent que le défaut ;
Je vous suggère de revenir un instant à la section sur... balise HTML pour savoir quand il est préférable d'utiliser l'option balise et lorsqu'il est préférable que le CSS.
taille de police
.smallText { font-size: 12px; }
La propriété font-size
indique la taille du texte.
Il existe plusieurs unités de mesure :
- pixels (px)est une unité de mesure non sensible, c'est-à-dire qu'elle reste fixée sur n'importe quel appareil ;
- emest une unité de mesure sensible. 1em correspond à la taille par défaut du navigateur (généralement 16px) ;
- pourcentagesLes pourcentages sont également sensibles. 100% est la taille par défaut du navigateur.
coloris
#testoRosso { color: red; }
La propriété color
attribue une couleur au texte. Allez à la section sur les couleurs pour découvrir comment utiliser les couleurs avec la fonction CSS.
Espaces autour des éléments
marge et rembourrage
blockquote { margin: 15px; padding: 5px; }
margin
indique l'espace autour de l'élément.
padding
est l'espace entre la limite de l'élément et son contenu, comme s'il s'agissait d'une marge interne.
Nous pouvons appliquer une valeur différente de marge et de rembourrage pour chacun des 4 côtés d'un élément, ou des valeurs égales.
- marge : 15pxLes quatre côtés de l'élément ont une marge de 15px ;
- marge : 5px 10pxLe premier chiffre indique au-dessus et en dessous (5px), le deuxième chiffre à droite et à gauche (10px) ;
- Rembourrage : 5px 10px 15pxLa première valeur indique ci-dessus (5px), la deuxième à droite et à gauche (10px), la troisième ci-dessous (15px) ;
- rembourrage : 5px 10px 15px 15px 20pxLes valeurs indiquent les 4 côtés dans le sens des aiguilles d'une montre en commençant par le haut - en haut, à droite, en bas, à gauche.
Vous pouvez appliquer la valeur à un seul côté de l'élément à l'aide du bouton marge- o rembourrant avec la direction :
- margin-top (en haut), margin-right (à droite), margin-bottom (en bas), margin-left (à gauche) ;
- padding-top (en haut), padding-right (à droite), padding-bottom (en bas), padding-left (à gauche).
Exemple :
img { margin-top: 20px; }
lisière
img { border: 2px solid black; }
Le boder
est une ligne qui délimite l'élément : à l'intérieur il y aura l'élément avec le rembourrage, à l'extérieur il y a les marges.
Le bord a plusieurs paramètres : épaisseur, type, couleur.
L'épaisseur est indiquée par la propriété border-width
et est une valeur en pixels, ou vous indiquez les valeurs par défaut maigres - mince, à point, denses - gros.
Le type de planche, border-style
Il peut s'agir solide - linéaire, en pointillés - en pointillés, en pointillés - une série de points, en deux - double etc.
La couleur de la bordure est indiquée par border-color
. Les couleurs ont différents modes de sélection dans le menu CSSet nous les verrons dans la section suivante tout de suite.
Pour raccourcir, nous pouvons indiquer toutes les propriétés de la bordure avec une seule propriété, border
qui auront comme valeurs, dans cet ordre : épaisseur, type, couleur. Les trois paramètres sont séparés par un espace.
Couleurs avec CSS
Comme nous venons de le mentionner, il existe différentes façons de représenter les couleurs à l'aide de la fonction CSS. Les voilà. Ils sont là.
Nom de la couleur
blockquote { border-color: pink; }
Le système qui utilise le nom de la couleur doit saisir le nom anglais de la couleur. Vous pouvez utiliser 140 teintes différentes. Voir la liste des noms des couleurs du W3C pour les connaître tous.
Valeur hexadécimale
h3 { color: #FF0000; }
Le format hexadécimal est le plus répandu, je vous recommande donc de bien l'étudier. La valeur selon ce format se compose d'un # suivi de six chiffres (0 à 9) ou de lettres (A à F). On part de #0000000000 - absence totale de couleur - qui correspond au noir, jusqu'à #FFFFFFFF - valeur de couleur maximale - qui serait le blanc.
La première paire de chiffres indique la quantité de rouge, la deuxième paire indique la quantité de vert, les deux derniers chiffres sont en bleu.
Par conséquent, la couleur #FF000000 correspond au rouge, #00FF00 au vert, #0000FF au bleu.
Découvrez toutes les couleurs disponibles avec le sélecteur de couleurs W3C.
système RGB
body { background-color: rgb(0, 255, 0); }
Le système RGB indique la quantité de rouge (R), de vert (G) et de bleu (B) dans la couleur, en utilisant une valeur de 0 à 255. Il est utilisé en indiquant les mots rgb puis, entre parenthèses, les trois valeurs séparées par une virgule.
Dans le sélecteur de couleurs du W3C, vous pouvez également trouver ces valeurs.
Il existe également d'autres systèmes d'indication des couleurs avec la fonction CSSmais elles ne sont pas très répandues, je ne pense donc pas qu'il soit approprié d'en parler dans cet article de base.
Contexte général
Le toile de fond indique l'arrière-plan d'un élément. Il occupera tout l'espace occupé par l'élément et son rembourrage, mais ne comprend pas les marges, qui restent extérieures.
Je vous suggère de toujours faire très attention au contraste entre l'arrière-plan et le texte. Un fond trop sombre rend la lecture très difficile, surtout pour ceux qui ont des problèmes de vision. Essayez d'effectuer un test de contraste pour vous assurer que tout le monde peut facilement lire votre contenu.
On peut utiliser une couleur de fond, une image ou un dégradé, c'est-à-dire un dégradé entre plusieurs couleurs.
couleur de fond
aside { background-color: #FFFF99; }
Vous pouvez entrer la couleur de fond avec la propriété background-color
. La couleur peut être indiquée par les systèmes ci-dessus. Mais nous pouvons aussi entrer la valeur limpidece qui rend l'élément transparent.
image de fond
footer { background-image: url("https://sos-wp.it/immagine.jpg"); }
Nous ajoutons une image de fond avec background-image
. Sa valeur sera l'inscription cri suivi du chemin de l'image.
répétition du fond
body { background-repeat: round; }
Comment adapter l'image à la taille de l'élément ? Par défaut, si l'image est plus petite, elle sera répétée verticalement et horizontalement jusqu'à ce qu'elle occupe tout l'espace disponible.
Les valeurs que vous pouvez utiliser sont :
background-repeat: repeat-x
- se répète horizontalement ;background-repeat: repeat-y
- se répète verticalement ;background-repeat: no-repeat
- qu'il ne répète pas ;background-repeat: space
- se répète sans se rompre ;background-repeat: round
- s'élargit jusqu'à remplir l'espace.
Dimensions et visibilité
Chaque élément HTML a une forme rectangulaire et nous pouvons établir sa taille et sa visibilité dans la page.
largeur
.box { width: 450px; }
Le width
est la largeur de l'élément. Elle peut être exprimée en pixels ou en pourcentage.
Les pixels indiquent une mesure fixe qui n'est pas sensible.
La mesure en pourcentage fait référence à l'élément qui contient l'élément auquel nous donnons la taille. Si j'ai une image avec width: 50%;
à l'intérieur d'un paragraphe, l'image aura la moitié de la taille du paragraphe.
apogée
#sidebar { height: 800px; }
La valeur heigth
indique la hauteur d'un élément. Ceci peut également être indiqué en pixels ou en pourcentages.
étalage
.hidden { display: none; }
La propriété display
indique comment le rectangle dans lequel se trouve un élément doit être rendu :
- en lignesur une ligne ;
- pâté de maisonsqui occupe la largeur disponible (ou que nous avons défini avec l'élément largeur;
- inline-blocksur la même ligne, mais on peut lui donner une largeur et une hauteur ;
- aucunl'élément "disparaît".
Vous pouvez utiliser affichage : aucun ; pour afficher un élément sur votre PC, mais le cacher de vos téléphones portables.
Une propriété similaire est visibility
qui peut prendre les valeurs perceptibles (par défaut) ou occulte. Un élément occulteCependant, il continuera à occuper l'espace sur la page même si nous ne le voyons pas.
trop-plein
#sezione { overflow: visible; }
La propriété overflow
indique le comportement du contenu d'une boîte si sa hauteur est trop petite pour la contenir. La valeur perceptibles affichera également le contenu en dehors de la boîte, occulte n'affichera que le contenu qui peut s'y trouver, tandis que voiture ajoutera des barres de défilement pour nous permettre de voir tout le contenu.
La position des éléments
Voyons maintenant comment placer les éléments dans la page.
position
#header { position: static; }
La propriété position
vous permet de déterminer la position sur la page. La valeur par défaut est statiques et positionne l'élément après le précédent.
L'utilisation du relatifson peut déplacer l'élément dans 4 directions. Utilisation des propriétés left
, right
, top
e bottom
nous pouvons déplacer l'élément d'un certain nombre de pixels :
#header { position: relative; left: 30px; }
La valeur préétabli attache l'élément à un point précis : même si je fais défiler la page, je vois toujours l'élément dans cette position.
Semblable à fixe est gluantce qui rend l'élément "fixe" dès qu'il s'écoule vers le bord supérieur de la fenêtre.
Avec irréfutable à la place, l'élément se positionnera par rapport à son parent.
indice z
.sovrapposto { z-index: 9999; }
z-index
est un nombre positif ou négatif qui positionne l'élément devant ou derrière les autres, en cas de chevauchement. Plus les valeurs inférieures descendront, plus les valeurs supérieures se chevaucheront.
flotter
.destra { float: right; }
float
a pour valeur gauche, correctes ou aucun.
"gauche" signifie que l'élément est positionné à gauche de l'élément précédent, avec "droite" il sera positionné à droite, et avec "aucun" il restera dans la position par défaut.
Si nous n'annulons pas votre demande. flotter quand il n'est plus nécessaire, les éléments suivants se déplaceront également. Donc, réinitialisons les positions avec la propriété clear
qui empêche un élément de rester à droite (avec la valeur correctes), à gauche (gauche) ou des deux côtés (tous les deux).
Tableau récapitulatif des propriétés CSS
Nous avons vu toutes les propriétés principales CSS que vous pourriez rencontrer dans la création de votre propre site Web.
Je termine cette section avec un tableau récapitulatif des propriétés vues jusqu'à présent.
Propriété | Valeurs | Fonction |
---|---|---|
famille de polices | famille1, famille2, famille générale ; | définir la police |
style de police | normal, italique | texte normal ou en italique |
poids de police | normal, gras, plus audacieux, plus léger, 400, 700 | épaisseur du texte |
taille de police | px, em, pourcentage | |
coloris | valeur hexadécimale - #FFFFFFFFFF Valeur RVB - rgb(0, 0, 255) nom de couleur |
|
lisière | ordre des valeurs : en haut, à droite, en bas, à gauche | espace à l'extérieur de l'élément |
rembourrant | ordre des valeurs : en haut, à droite, en bas, à gauche | espace intérieur entre la bordure et le contenu |
largeur de bordure | px, mince, moyen, moyen, épais | épaisseur du bord |
style frontière | pointillé, pointillé, solide, double | type de conseil |
couleur de bordure | valeur hexadécimale - #FFFFFFFFFF Valeur RVB - rgb(0, 0, 255) nom de couleur |
|
lisière | Valeurs de commande : largeur - style - couleur | |
couleur de fond | limpide valeur hexadécimale - #FFFFFFFFFF Valeur RVB - rgb(0, 0, 255) nom de couleur |
|
image de fond | url(") | insérer le chemin d'accès à l'image |
répétition du fond | repeat-x, repeat-y, no-repeat, space, round | remplissage des espaces |
largeur | taille, pourcentage | étendue |
hauteur | taille, pourcentage | apogée |
étalage | inline, block, inline-block, none | ne fait pas disparaître l'élément. |
visibilité | visible, caché | caché cache l'élément, mais laisse l'espace |
trop-plein | visible, caché, voiture | visibilité du contenu dans un élément trop court |
position | statique, relatif, absolu, fixe, fixe, collant | |
indice z | nombre positif ou négatif | gère le chevauchement des éléments |
flotter | droite, gauche, aucune | position gauche ou droite |
nette | droite, gauche, les deux | réinitialise la marge |
Conclusion
Oui, il y a beaucoup à étudier, mais une fois que vous avez appris le mécanisme, il est également facile de comprendre comment et où intervenir en cas de problème de formatage.
N'oubliez pas que si vous voulez en savoir plus, vous pouvez suivre notre vidéo de cours HTML, le cours CSS, ou même la formation 1 pour 1. Nous pouvons vous aider de plusieurs façons. Voir la page Services et la page Cours.
Avez-vous trouvé ce guide utile ?
Là où vous avez rencontré les plus grandes difficultés
Ecrivez vos questions dans les commentaires.