17 exemples de codes HTML simples à apprendre en 10 minutes
Même si les sites Web modernes sont généralement construits avec des interfaces conviviales, 10 façons de créer un site Web simple et petit sans surcharge excessive 10 façons de créer un site Web simple et sans taille excessive WordPress peut être excessif. Comme le prouvent ces autres excellents services, WordPress n’est pas la solution idéale pour la création de sites Web. Si vous souhaitez des solutions plus simples, vous avez le choix entre plusieurs solutions. Lire la suite, il est toujours bon de connaître quelques bases HTML. Si vous connaissez les 17 balises suivantes (et les quelques-unes qui les accompagnent), vous pourrez créer une page Web de base ou modifier le code créé par une application telle que WordPress Blogger contre Wordpress.com: une comparaison complète Blogger contre Wordpress.com: une comparaison complète Les deux rois incontestés de la sphère des blogs gratuits sont Blogger de Google et le système de gestion de contenu devenu hôte WordPress.com. Alors que les deux offrent ce que tout canon à la pensée, libre de penser à la démocratie, veut: un lieu pour s'exprimer, il… Read More .
J'ai fourni des exemples pour la plupart des balises, mais si vous souhaitez les voir en action, téléchargez le fichier HTML lié à la fin de l'article. Vous pouvez jouer avec cela dans un éditeur de texte et le charger dans un navigateur pour voir ce que vos changements font..
1.
Vous aurez besoin de cette balise au début de chaque document HTML que vous créez. Cela garantit qu'un navigateur sait qu'il lit le HTML et qu'il attend HTML5, la dernière version. Qu'est-ce que HTML5 et comment cela change-t-il la façon dont je navigue? [MakeUseOf explique] Qu'est-ce que HTML5 et comment cela change-t-il la façon dont je navigue? [MakeUseOf explique] Au cours des dernières années, vous avez peut-être entendu le terme HTML5 de temps en temps. Que vous sachiez quoi que ce soit sur le développement Web ou non, le concept peut être quelque peu nébuleux et déroutant. Évidemment,… Lire la suite .
Même si ce n'est pas réellement une balise HTML, c'est quand même une bonne à savoir.
2.
Ceci est une autre balise qui indique à un navigateur qu'il lit le code HTML. Pourquoi avons-nous besoin des deux? Qui sait? Mais c'est une bonne idée de le mettre quand même.
Et à la fin de votre document, ajoutez un étiquette.
3.
Pour les pages de base, le
tag contiendra votre titre, et c'est à peu près tout. Mais il y a quelques autres choses que vous pouvez inclure, que nous verrons dans un instant.4.
Comme vous vous en doutez, cela 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):
Mon site internet
C'est le nom qui sera affiché comme titre de l'onglet lorsqu'il sera ouvert dans un navigateur..
5.
Comme les balises de titre, les métadonnées sont placées dans l'en-tête de votre page (ces métadonnées, contrairement aux métadonnées de vos appareils mobiles. Métadonnées - L'information sur vos informations Métadonnées - L'information sur vos informations En savoir plus, n'est pas sensible). Les métadonnées sont principalement utilisées par les moteurs de recherche et constituent - comme on pouvait s'y attendre - des informations sur les informations de votre page. Il existe un certain nombre de méta-champs différents, mais ceux-ci sont parmi les 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 d'affichage - Une balise pour que votre page soit belle sur tous les appareils.
Voici un exemple qui pourrait s'appliquer à cette page:
le “fenêtre d'affichage” l'étiquette devrait toujours avoir “width = device-width, initial-scale = 1.0” en tant que contenu pour vous assurer que votre page s'affiche correctement sur les appareils mobiles et de bureau.
6.
Le corps de votre page Web - fondamentalement, tout ce qui est différent du titre est placé à l'intérieur de la balise body. C'est aussi simple que ça en a l'air:
Tout ce que vous voulez afficher sur votre page.
7.
le
balise définit les en-têtes de niveau un sur votre page. définit les en-têtes de niveau deux, niveau trois, et ainsi de suite, jusqu'à . Par exemple, les noms des balises dans cet article sont des en-têtes de niveau deux..En-tête gros et important
Un peu moins gros
Sous-en-tête
niveau trois, et ainsi de suite, jusqu'à . Par exemple, les noms des balises dans cet article sont des en-têtes de niveau deux..En-tête gros et important
Un peu moins gros
Sous-en-tête
En-tête gros et important
Un peu moins gros
Sous-en-tête
Résultat:
En-tête gros et important
Un peu moins gros
Sous-en-tête
Comme vous pouvez le constater, 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 que
tag va faire.
Votre premier paragraphe.
Votre deuxième paragraphe.
Résultat:
Votre premier paragraphe.
Votre deuxième paragraphe.
Vous pouvez également utiliser des styles CSS dans vos balises de paragraphe, comme ceci:
Texte 20% plus grand
Résultat:
Texte 20% plus grand
Pour apprendre à utiliser les CSS pour styliser votre texte, consultez ces tutoriels HTML et CSS. Apprenez HTML et CSS avec ces didacticiels étape par étape. Apprenez le HTML et CSS avec ces didacticiels étape par étape. Envie de HTML, de CSS et de JavaScript? Si vous pensez avoir le don d'apprendre à créer des sites Web à partir de rien, voici quelques tutoriels étape par étape qui valent le coup d'être essayés. Lire la suite .
9.
La balise de saut de ligne insère un seul saut de ligne:
La première ligne.
La deuxième ligne (proche de la première).
Résultat:
La première ligne.
La deuxième ligne (proche de la première).
Remarque: Vous pouvez parfois voir cette balise écrite comme suit:
ou
. Il fait la même chose (la barre oblique rend la balise lisible dans XHTML. Apprendre à parler "Internet": votre guide pour xHTML. Apprendre à parler "Internet": votre guide pour xHTML. Bienvenue dans le monde de XHTML - Langage de balisage hypertexte extensible - un balisage langage qui permet à n’importe qui de créer des pages Web avec de nombreuses fonctions différentes, c’est la langue principale d’Internet..
dix.
Cette balise définit le texte important. En général, cela signifie que ce sera audacieux. Cependant, il est possible d’utiliser CSS pour faire affichage du texte différemment.
Cependant, vous pouvez utiliser en toute sécurité en texte gras.
Des choses très importantes que vous voulez dire.
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. Rien ne garantit que cela continuera à fonctionner dans les futures versions de HTML, mais pour l'instant, cela fonctionne..
11.
Comme et , et sont liés. le 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 différemment l'affichage du texte souligné.
Une ligne accentuée.
Résultat:
Une ligne accentuée.
le Cette balise fonctionne toujours, mais encore une fois, il est possible qu'elle soit déconseillée dans les futures versions de HTML..
12.
le , ou ancre, tag vous permet de créer des liens. Un lien simple ressemble à ceci:
Aller à MakeUseOf dans un nouvel onglet
Résultat:
Aller à MakeUseOf dans un nouvel onglet
le “Titre” attribut crée une info-bulle. Survolez le lien ci-dessous pour voir ce que je veux dire:
Survolez celui-ci
Résultat:
Survolez celui-ci
13.
Si vous souhaitez incorporer une image dans votre page, vous devez utiliser la balise image. La façon la plus simple de l’utiliser est d’ajouter simplement la source de l’image dans le “src” attribut, comme ceci:
Résultat:
wp-content / uploads / 2016/02 / hdr-moderation.png” />
Cela comprend l'image. Cependant, vous voudrez utiliser un certain nombre d'autres attributs, tels que “la taille,” “largeur,” et “alt.” Voici à quoi cela pourrait ressembler:
Résultat:
wp-content / uploads / 2016/02 / hdr-moderation.png” alt =”le nom de votre image” largeur =”320 "/>
Comme on pouvait s'y attendre, le “la taille” et “largeur” Les attributs définissent la hauteur et la largeur de l'image. En général, il est judicieux de n'en définir qu'un 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.
le “alt” tag indique au navigateur le texte à afficher si l'image ne peut pas être affichée, et c'est une bonne idée d'inclure n'importe quelle image. Si quelqu'un a une connexion particulièrement lente 4 raisons pour lesquelles votre Wi-Fi est si lent (et comment les corriger) 4 raisons pour lesquelles votre Wi-Fi est si lent (et comment les réparer) Souffrant de la lenteur du Wi-Fi? Ces quatre problèmes peuvent ralentir votre réseau. Voici comment les résoudre pour qu'ils redeviennent rapides. Lire plus ou un ancien navigateur, ils peuvent toujours avoir une idée de ce que vous avez sur votre page.
14.
La balise de 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 nécessite une balise d’élément de liste (
- Première chose
- Deuxième chose
- Troisième chose
Résultat:
- Première chose
- Deuxième chose
- Troisième chose
En HTML5, vous pouvez utiliser
- inverser l'ordre des nombres. Et vous pouvez définir la valeur de départ avec l'attribut start. le “type” Cet attribut vous permet d'indiquer au navigateur le type de symbole à utiliser pour les éléments de la liste. Il peut être réglé sur “1,” “UNE,” “une,” “je,” ou “je,” réglage de la liste à afficher avec le symbole indiqué.
- Premier article
- Deuxième article
- Troisième item
- Premier article
- Deuxième article
- Troisième item
15.
La liste non ordonnée est beaucoup plus simple que son équivalent commandé. C'est simplement une liste à puces.
Résultat:
Les listes non ordonnées ont aussi “type” attributs, et vous pouvez le définir sur “disque,” “cercle,” ou “carré.”
16.
Première colonne | Deuxième colonne |
---|---|
Rangée 1, colonne 1 | Rangée 1, colonne 2 | Rangée 2, colonne 1 | Rangée 2, colonne 2 |
Première colonne | Deuxième colonne |
---|---|
Rangée 1, colonne 1 | Rangée 1, colonne 2 |
Chaque
17.
Lorsque vous citez un autre site Web ou une autre personne et que vous souhaitez définir la citation en dehors du reste de votre document, la balise blockquote le fera pour vous. Tout ce que vous avez à faire est de joindre la citation aux balises blockquote d’ouverture et de fermeture:
Je ne dois pas avoir peur. La peur est le tueur de l'esprit. La peur est la petite mort qui entraîne une oblitération totale. Je vais affronter ma peur. Je vais permettre que cela passe sur moi et par moi. Et une fois passé, je tournerai l'œil intérieur pour voir son chemin. Là où la peur est partie, il n'y aura rien. Seulement je resterai.
Résultat:
Je ne dois pas avoir peur. La peur est le tueur de l'esprit. La peur est la petite mort qui entraîne une oblitération totale. Je vais affronter ma peur. Je vais permettre que cela passe sur moi et par moi. Et une fois passé, je tournerai l'œil intérieur pour voir son chemin. Là où la peur est partie, il n'y aura rien. Seulement je resterai.
Le formatage exact utilisé peut dépendre du navigateur que vous utilisez ou du CSS de votre site. Mais le tag reste le même.
Allez en avant et HTML
Avec ces 17 balises HTML (et quelques autres en plus), vous devriez pouvoir créer une page Web simple. Pour voir comment les mettre ensemble, vous pouvez télécharger l'exemple de page HTML que j'ai créé. Vous pouvez l'ouvrir dans votre navigateur pour voir comment tout cela se passe ou dans un éditeur de texte pour voir exactement comment fonctionne le code.
Utilisez-vous régulièrement le HTML? Quelles autres balises trouvez-vous que vous utilisez couramment? Partagez vos astuces dans les commentaires ci-dessous!