Home-theater-designers
Même si les sites Web modernes sont généralement construits avec des interfaces conviviales, il est utile de connaître quelques bases en HTML. Si vous connaissez les 17 exemples de balises HTML suivants (et quelques extras), vous pourrez créer une page Web de base à partir de zéro ou modifier le code créé par une application comme WordPress.
Nous avons fourni des exemples de code HTML avec sortie pour la plupart des balises. Si vous voulez les voir en action, téléchargez l'exemple de fichier HTML à la fin de l'article. Vous pouvez jouer avec dans un éditeur de texte et le charger dans un navigateur pour voir ce que font vos modifications.
1.
Vous aurez besoin de cette balise au début de chaque document HTML que vous créez. Il garantit qu'un navigateur sait qu'il lit du HTML et qu'il attend HTML5, la dernière version.
Même s'il ne s'agit pas réellement d'une balise HTML, c'est quand même bon à savoir.
2.
Il s'agit d'une autre balise qui indique à un navigateur qu'il lit du HTML. La balise va juste après la balise DOCTYPE, et vous la fermez avec une balise juste à la fin de votre fichier. Tout le reste de votre document passe entre ces balises.
3.
La balise commence la section d'en-tête de votre fichier. Les éléments qui entrent ici n'apparaissent pas sur votre page Web. Au lieu de cela, il contient des métadonnées pour les moteurs de recherche et des informations pour votre navigateur.
Pour les pages basiques, la balise contiendra votre titre, et c'est tout. Mais il y a quelques autres choses que vous pouvez inclure, que nous reviendrons dans un instant.
Quatre.
Cette balise définit le titre de votre page. Tout ce que vous avez à faire est de mettre votre titre dans la balise et de la fermer, comme ceci (j'ai également inclus les balises d'en-tête pour montrer le contexte):
My Website
C'est le nom qui sera affiché comme titre de l'onglet lorsqu'il sera ouvert dans un navigateur.
5.
Comme la balise de titre, les métadonnées sont placées dans la zone d'en-tête de votre page. Les métadonnées sont principalement utilisées par les moteurs de recherche et constituent des informations sur le contenu de votre page. Il existe un certain nombre de champs méta différents, mais voici quelques-uns des plus couramment utilisés :
- la description : Une description de base de votre page.
- mots clés : Une sélection de mots-clés applicables à votre page.
- auteur : L'auteur de votre page.
- fenêtre : Une balise pour s'assurer que votre page s'affiche bien sur tous les appareils.
Voici un exemple qui pourrait s'appliquer à cette page :
La balise 'viewport' doit toujours avoir 'width=device-width, initial-scale=1.0' comme contenu pour s'assurer que votre page s'affiche bien sur les appareils mobiles et de bureau.
6.
Après avoir fermé la section d'en-tête, vous accédez au corps. Vous l'ouvrez avec la balise et vous la fermez avec la balise. Cela va juste à la fin de votre fichier, juste avant la balise.
Tout le contenu de votre page Web se trouve entre ces balises. C'est aussi simple que ça en a l'air :
Everything you want displayed on your page.
7.
En-tête un peu moins gros
Sous-titre
Résultat:
Comme vous pouvez le voir, ils deviennent plus petits à chaque niveau.
8.
La balise de paragraphe commence un nouveau paragraphe. Cela insère généralement deux sauts de ligne.
Regardez, par exemple, la coupure entre la ligne précédente et celle-ci. C'est ce qu'un
l'étiquette fera l'affaire.
Your first paragraph.
Your second paragraph.
Résultat:
Votre premier paragraphe.
Votre deuxième paragraphe.
Vous pouvez également utiliser des styles CSS dans vos balises de paragraphe, comme celle-ci qui modifie la taille du texte :
This is 50% larger text.
Résultat:
9.
La balise de saut de ligne insère un seul saut de ligne :
The first line.
The second line (close to the first one).
Résultat:
Travailler de la même manière est le
étiqueter. Cela dessine une ligne horizontale sur votre page et est bon pour séparer des sections de texte.
dix.
Cette balise définit le texte important. En général, cela signifie qu'il sera audacieux. Cependant, il est possible d'utiliser CSS pour faire le texte s'affiche différemment.
iphone 12 vs iphone 12 pro max
Cependant, vous pouvez utiliser en toute sécurité au texte en gras.
Very important things you want to say. Résultat:
Des choses très importantes que vous voulez dire.
Si vous connaissez le balise pour le texte en gras, vous pouvez toujours l'utiliser. Il n'y a aucune garantie que cela continuera à fonctionner dans les futures versions de HTML, mais pour l'instant, cela fonctionne.
Onze.
Comme et , et sont liés. Les La balise identifie le texte mis en évidence, ce qui signifie généralement qu'il sera mis en italique. Encore une fois, il est possible que CSS fasse en sorte que le texte mis en évidence s'affiche différemment.
An emphasized line. Résultat:
Une ligne soulignée.
Les La balise fonctionne toujours, mais encore une fois, il est possible qu'elle soit dépréciée dans les futures versions de HTML.
12.
Les , ou ancre, la balise vous permet de créer des liens. Un lien simple ressemble à ceci :
Aller à MUO L'attribut 'href' identifie la destination du lien. Dans de nombreux cas, ce sera un autre site Web. Il peut également s'agir d'un fichier, comme une image ou un PDF.
D'autres attributs utiles incluent « cible » et « titre ». L'attribut target est presque exclusivement utilisé pour ouvrir un lien dans un nouvel onglet ou une nouvelle fenêtre, comme ceci :
Go to MUO in a new tab Résultat:
Aller à MUO dans un nouvel onglet
L'attribut 'title' crée une infobulle. Survolez le lien ci-dessous pour voir comment cela fonctionne :
Hover over this to see the tool tip Résultat:
Passez la souris dessus pour voir l'info-bulle
13. ![]()
Si vous souhaitez intégrer une image dans votre page, vous devrez utiliser la balise image. Vous l'utiliserez normalement en conjonction avec l'attribut 'src'. Ceci spécifie la source de l'image, comme ceci :
Résultat:
logiciel de code morse pour windows 10
D'autres attributs sont disponibles, tels que « hauteur », « largeur » et « alt. » Voici à quoi cela pourrait ressembler :
Comme vous pouvez vous y attendre, les attributs 'hauteur' et 'largeur' définissent la hauteur et la largeur de l'image. En général, c'est une bonne idée de n'en définir qu'un seul pour que l'image soit correctement mise à l'échelle. Si vous utilisez les deux, vous pourriez vous retrouver avec une image étirée ou écrasée.
La balise 'alt' indique au navigateur quel texte afficher si l'image ne peut pas être affichée et c'est une bonne idée d'inclure avec n'importe quelle image. Si quelqu'un a une connexion particulièrement lente ou un ancien navigateur, il peut toujours avoir une idée de ce qui devrait être sur votre page.
14.
La balise liste ordonnée vous permet de créer une liste ordonnée. En général, cela signifie que vous obtiendrez une liste numérotée. Chaque élément de la liste a besoin d'une balise d'élément de liste (
), votre liste ressemblera donc à ceci :
- First thing
- Second thing
- Third thing
Résultat:
- Première chose
- Deuxième chose
- Troisième chose
En HTML5, vous pouvez utiliser
pour inverser l'ordre des nombres. Et vous pouvez définir la valeur de départ avec l'attribut start. L'attribut 'type' vous permet d'indiquer au navigateur quel type de symbole utiliser pour les éléments de la liste. Il peut être défini sur « 1 », « A », « a », « I » ou « i », définissant la liste à afficher avec le symbole indiqué comme ceci :
quinze.
La liste non ordonnée est beaucoup plus simple que sa contrepartie ordonnée. C'est simplement une liste à puces.
- First item
- Second item
- Third item
Résultat:
- Premier élément
- Deuxième élément
- Troisième élément
Les listes non ordonnées ont également des attributs « type » et vous pouvez les définir sur « disque », « cercle » ou « carré ».
16.
Bien que l'utilisation de tableaux pour la mise en forme soit mal vue, vous souhaiterez souvent utiliser des lignes et des colonnes pour segmenter les informations sur votre page. Plusieurs balises sont nécessaires pour qu'une table fonctionne. Voici l'exemple de code HTML :
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
Les
et
Les balises spécifient le début et la fin du tableau. LesLa balise contient tout le contenu du tableau. Chaque ligne du tableau est entourée d'un
étiqueter. Chaque cellule de chaque ligne est enveloppée soit dansbalises pour les en-têtes de colonnes, ou balises pour les données de colonne. Vous en avez besoin pour chaque colonne de chaque ligne. Résultat:
1ère colonne 2ème colonne Ligne 1, colonne 1 Ligne 1, colonne 2 Ligne 2, colonne 1 Ligne 2, colonne 2
17.
Lorsque vous citez un autre site Web ou une autre personne et que vous souhaitez distinguer la citation du reste de votre document, utilisez la balise blockquote. Tout ce que vous avez à faire est d'inclure la citation dans les balises d'ouverture et de fermeture de blockquote :
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Résultat:
Le Web tel que je l'envisageais, on ne l'a pas encore vu. L'avenir est encore tellement plus grand que le passé.
Le formatage exact utilisé peut dépendre du navigateur que vous utilisez ou du CSS de votre site. Mais l'étiquette reste la même.
Exemples de code HTML
Avec ces 17 exemples HTML, vous devriez pouvoir créer un site Web simple. Vous pouvez tous les tester dès maintenant dans un éditeur de texte en ligne pour avoir une idée de leur fonctionnement.
Pour des leçons plus petites en HTML, essayez quelques applications de microlearning pour le codage. Ils vous aideront à vous mettre à niveau en un rien de temps.
Partager Partager Tweeter E-mail Vous voulez apprendre le codage de base ? Essayez 5 applications de codage de petite taille pendant votre temps libre Vous voulez apprendre le codage de base mais vous avez peu de temps ? Ces petites applications de codage ne prendront que quelques minutes de votre journée bien remplie.
Lire la suite Rubriques connexes - La programmation
- Wordpress
- HTML
- Développement web
- Tutoriels de codage
A propos de l'auteur Andy Betts(221 articles publiés) Andy est un ancien journaliste de presse écrite et rédacteur en chef de magazine qui écrit sur la technologie depuis 15 ans. Au cours de cette période, il a contribué à d'innombrables publications et produit des travaux de rédaction pour de grandes entreprises technologiques. Il a également fourni des commentaires d'expert aux médias et animé des panels lors d'événements de l'industrie.
Plus d'Andy BettsAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner