Même si les sites Web modernes sont généralement construits avec interfaces conviviales

, il est toujours bon de connaître quelques HTML de base. Si vous connaissez les 17 balises suivantes (et les quelques supplémentaires qui vont avec eux), vous serez en mesure de créer une page Web de base à partir de zéro ou modifier le code créé par un application comme WordPress.10 façons de créer un site Web Petite et simple sans Overkill10 façons de créer un site Web Petite et simple sans OverkillWordPress peut être un surpuissant. Comme ces autres excellents services prouvent, WordPress est pas l`alpha et fin toute la création d`un site Web. Si vous voulez des solutions plus simples, il y a une variété à choisir.Lire la suite

J`ai fourni des exemples pour la plupart des balises, mais si vous voulez les voir en action, téléchargez le fichier HTML lié à la fin de l`article. Vous pouvez jouer avec dans un éditeur de texte et de 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. Il veille à ce qu`un navigateur sait qu`il est la lecture HTML, et qu`il attend HTML5, la dernière version.Qu`est-ce que HTML5, et comment faut-il changer la façon dont je passe en revue? [MakeUseOf Explique]Qu`est-ce que HTML5, et comment faut-il changer la façon dont je passe en revue? [MakeUseOf Explique]Au cours des dernières années, vous avez peut-être entendu chaque fois dans un certain temps le terme HTML5. Que vous savez quoi que ce soit sur le développement web ou non, le concept peut être quelque peu nébuleux et confus. Évidemment,...Lire la suite

Même si ce n`est pas réellement une balise HTML, il est toujours un bon à savoir.

2.

Ceci est une autre balise qui indique un navigateur qu`il est la lecture HTML. Pourquoi avons-nous besoin à la fois? Qui sait? Mais il est une bonne idée de le mettre dans de toute façon.

Et à la fin de votre document, ajoutez une balise.

3.

Pour les pages de base, la tag contiendra votre titre, et qui est à ce sujet. Mais il y a quelques autres choses que vous pouvez inclure, que nous allons passer dans un instant.

4.

Comme on pouvait s`y attendre, ce qui définit le titre de votre page. Tout ce que vous devez faire est de mettre votre titre dans la balise et le fermer, comme celui-ci (j`ai inclus les balises d`en-tête, ainsi):

lt;têtegt;lt;Titregt;Mon site internetTitregt;têtegt;

C`est le nom qui sera affiché comme titre de l`onglet quand il est ouvert dans un navigateur.

5.

Comme la balise de titre, les métadonnées sont mis dans la zone d`en-tête de votre page (ces métadonnées, à la différence métadonnées de vos appareils mobiles, est non sensible). Les métadonnées sont principalement utilisés par les moteurs de recherche, et est - comme on pouvait s`y attendre - des informations sur les informations sur votre page. Il y a un certain nombre de champs de méta, mais ceux-ci sont parmi les plus couramment utilisés:Métadonnées - Les informations sur vos informationsMétadonnées - Les informations sur vos informationsLire la suite

• 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 la page.
• viewport - Une étiquette pour assurer que votre page semble bon sur tous les appareils.

Voici un exemple qui pourrait appliquer à cette page:

lt;méta prénom="la description" contenu="Un tutoriel HTML de base"gt;lt;méta prénom="mots clés" contenu="HTML, le code, les balises"gt;lt;méta prénom="auteur" contenu="Dann Albright"gt;lt;méta prénom="viewport" contenu="largeur=Dispositif de largeur, à l`échelle initiale=1.0"gt;

La balise « viewport » doit toujours avoir « width = dispositif de largeur, initiale échelle = 1,0 » que le contenu pour vous assurer que votre page affiche bien sur les appareils mobiles et de bureau.

6.

Le corps de votre page Web - essentiellement tout autre que le titre est défini dans la balise body. Il est aussi simple que cela puisse paraître:

lt;corpsgt;Tout ce que vous voulez afficher sur votre page.corpsgt;

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`à

. À titre d`exemple, les noms des balises dans cet article sont de niveau deux têtes.

lt;h1gt;En-tête grand et importanth1gt;lt;h2gt;Un peu moins grand en-têteh2gt;lt;h3gt;Sous-en-têteh3gt;

Résultat:

En-tête grand et important

Un peu moins grand en-tête

Sous-en-tête

Comme vous pouvez le voir, ils deviennent plus petits à chaque niveau.

8.

La balise de paragraphe commence un nouveau paragraphe. Ceci insère généralement deux sauts de ligne.

Regardez, par exemple, à la rupture entre la ligne précédente et celle-ci. C`est ce qu`un

tag fera.

lt;pgt;Votre premier paragraphe.pgt;lt;pgt;Votre deuxième alinéa.pgt;

Résultat:

Votre premier paragraphe.

Votre deuxième alinéa.

Vous pouvez également utiliser des styles CSS dans vos balises de paragraphe, comme ceci:

lt;p style="taille de police: 120%-"gt;texte 20% pluspgt;

Résultat:

texte 20% plus

Pour apprendre à utiliser le style CSS pour votre texte, consultez ces tutoriels HTML et CSS.Apprendre HTML et CSS avec ces didacticiels étape par étapeApprendre HTML et CSS avec ces didacticiels étape par étapeVous voulez savoir HTML, CSS et javascript? Si vous pensez que vous avez un talent pour apprendre à créer des sites Web à partir de zéro - voici quelques didacticiels étape par étape peine d`essayer.Lire la suite

9.

La balise de saut de ligne insère un saut de ligne simple:

lt;pgt;La première ligne.lt;brgt;La seconde ligne (à proximité de la première).pgt;

Résultat:

La première ligne.
La seconde ligne (à proximité de la première).

Remarque: Vous pouvez parfois voir cette balise écrit
ou
. Il fait la même chose (la barre oblique rend l`étiquette lisible dans XHTML).Apprendre a parler "l`Internet": Votre guide xHTMLApprendre a parler "l`Internet": Votre guide xHTMLBienvenue dans le monde de XHTML - Extensible Markup Language Hypertext - un langage de balisage qui permet à quiconque de construire des pages web avec de nombreuses fonctions différentes. Il est la langue principale de l`Internet.Lire la suite

dix.

Cette balise définit texte important. En général, cela signifie qu`il sera gras. Cependant, il est possible d`utiliser les CSS pour faire affichage de texte différemment.

Cependant, vous pouvez utiliser en toute sécurité au texte en gras.

lt;fortgt;Des choses très importantes que vous voulez dire.fortgt;

Résultat:

Des choses très importantes que vous voulez dire.

Si vous êtes familier avec le tag pour le texte en gras, vous pouvez toujours l`utiliser. Il n`y a aucune garantie qu`il continuera à travailler dans les futures versions de HTML, mais pour l`instant, cela fonctionne.

11.

Comme et , et sont liés. le tag identifie souligné le texte, ce qui signifie généralement qu`il se italiques. Encore une fois, il y a la possibilité que CSS fera l`affichage de texte souligné différemment.

lt;emgt;Une ligne soulignée.emgt;

Résultat:

Une ligne soulignée.

le tag fonctionne toujours, mais encore une fois, il est possible que ce sera dépréciée dans les futures versions de HTML.

12.

le , ou ancre, balise vous permet de créer des liens. Un lien simple ressemble à ceci:

Aller à MakeUseOfune>

Résultat:

Aller à MakeUseOf

L`attribut « href » identifie la destination du lien. Dans de nombreux cas, ce sera un autre site. Il pourrait également être un fichier, comme une image ou un fichier PDF.

D`autres attributs utiles comprennent « cible » et l`attribut cible est presque exclusivement utilisé pour ouvrir un lien dans un nouvel onglet ou une fenêtre, comme celui-ci « titre. »:

<une href="//makeuseof.com/" cible="blanc"gt;Aller à MakeUseOf dans un nouvel ongletunegt;

Résultat:

Aller à MakeUseOf dans un nouvel onglet

L`attribut « title » crée une info-bulle. Passez la souris sur le lien ci-dessous pour voir ce que je veux dire:

lt;une href="//makeuseof.com/" Titre="Ceci est un Cooltip"gt;Passez la souris sur celui-ciunegt;

Résultat:

Passez la souris sur celui-ci

13.

Si vous souhaitez intégrer une image dans votre page, vous devez utiliser la balise d`image. La façon la plus simple à utiliser est d`ajouter simplement la source de l`image dans l`attribut « src », comme ceci:

lt;img src="images / hdr-moderation.png"gt;

Résultat:

Cela inclut l`image. Cependant, il y a un certain nombre d`autres attributs que vous aimerez voulez utiliser, comme « hauteur », « largeur » et « alt » Voilà comment cela pourrait ressembler.:

lt;img src="images / hdr-moderation.png" largeur="320" alt="le nom de l`image"gt;

Résultat:

Comme on pouvait s`y attendre, les attributs « hauteur » et « largeur » définir la hauteur et la largeur de l`image. En général, il est une bonne idée de ne mettre l`un d`eux afin que l`image correctement échelles. Si vous utilisez les deux, vous pourriez finir avec une image étirée ou ratatinée.

La balise « alt » indique au navigateur ce texte à afficher si l`image ne peut pas être affichée, et est une bonne idée d`inclure dans toute l`image. Si quelqu`un a une en particulier connexion lente ou un ancien navigateur, ils peuvent encore avoir une idée de ce que vous avez sur votre page.4 raisons pour lesquelles votre réseau Wi-Fi est si lent (et comment les corriger)4 raisons pour lesquelles votre réseau Wi-Fi est si lent (et comment les corriger)Lorsque vous comptez sur une connexion Wi-Fi, les problèmes de vitesse peuvent mal - et des problèmes de vitesse Wi-Fi ne sont pas toujours faciles à diagnostiquer. Voici quelques choses que vous devriez vérifier.Lire la suite

14.

La balise de liste ordonnée vous permet de créer une liste ordonnée. En général, cela signifie que vous aurez une liste numérotée. Chaque élément de la liste a besoin d`une balise d`élément de liste (

), De sorte que votre liste ressemblera à ceci:

lt;olgt;lt;ligt;Première choseligt;lt;ligt;La deuxième choseligt;lt;ligt;La troisième choseligt;olgt;

Résultat:

1. Première chose
2. La deuxième chose
3. La troisième chose

En HTML5, vous pouvez utiliser

à inverser l`ordre des numéros. Et vous pouvez définir la valeur à partir de l`attribut de démarrage. L`attribut « type » vous permet d`indiquer au navigateur quel type de symbole à utiliser pour les éléments de liste. Il peut être réglé sur « 1 », « A », « a », « I » ou « i », le réglage de la liste pour afficher le symbole indiqué.

15.

La liste non ordonnée est beaucoup plus simple que son homologue ordonné. Il est tout simplement une liste à puces.

lt;ulgt;lt;ligt;premier élémentligt;lt;ligt;deuxième élémentligt;lt;ligt;troisièmeligt;ulgt;

Résultat:

• premier élément
• deuxième élément
• troisième

les listes à puces ont aussi des attributs « type », et vous pouvez le régler sur « disque », « cercle » ou « carré ».

16.

Lors de l`utilisation des tables pour la mise en forme est mal, il y a beaucoup de moments où vous aurez envie d`utiliser des lignes et des colonnes à l`information sectorielle sur votre page. Il y a un certain nombre de balises que vous devrez utiliser pour obtenir une table pour travailler. Jetez un oeil à cet exemple et vous verrez ce que je veux dire:

Video: Conjugaison Français simple du verbe aller à l'imparfait, présent et futur

lt;tablegt;lt;tbodygt;lt;trgt;lt;egt;première colonneegt;lt;egt;La deuxième colonneegt;trgt;lt;trgt;lt;tdgt;Ligne 1, colonne 1tdgt;lt;tdgt;Ligne 1, colonne 2tdgt;trgt;lt;tdgt;Ligne 2, colonne 1tdgt;lt;tdgt;Ligne 2, colonne 2tdgt;tbodygt;tablegt;

première colonne	La deuxième colonne
Ligne 1, colonne 1	Ligne 1, colonne 2

Chaque tag entoure une tête (vous pouvez parfois voir ces enfermé dans un étiquette, ainsi). déclenche le corps de la table. le tag déclenche une nouvelle ligne de table, et chaque balise identifie une cellule dans cette ligne.

17.

Lorsque vous vous citez un autre site ou d`une personne et que vous voulez mettre la citation à part du reste de votre document, la balise blockquote fera pour vous. Tout ce que vous devez faire est de joindre la citation dans les balises blockquote ouverture et de fermeture:

lt;blockquotegt;Je ne dois pas craindre. La peur est le tueur de l`esprit. La peur est la petite mort qui apporte au total obliteration. Je vais affronter ma peur. Je permettrai de passer sur moi et à travers moi. Et quand il est allé passé, je vais tourner l`œil intérieur pour voir son chemin. Lorsque la peur a disparu il n`y aura rien. Seulement, je resterai.blockquotegt;

Résultat:

Je ne dois pas craindre. La peur est le tueur de l`esprit. La peur est la petite mort qui apporte au total obliteration. Je vais affronter ma peur. Je permettrai de passer sur moi et à travers moi. Et quand il est allé passé, je vais tourner l`œil intérieur pour voir son chemin. Lorsque la peur a disparu il n`y aura rien. Seulement, je resterai.

La mise en forme exacte qui est utilisée peut dépendre du navigateur que vous utilisez ou le CSS de votre site. Mais la balise reste le même.

Allez et HTML

Avec ces 17 balises HTML (et quelques autres plus opératrices), vous devriez être en mesure de créer une simple page web. Pour voir comment les mettre tous ensemble, vous pouvez télécharger la page HTML exemple que j`ai créé. Vous pouvez l`ouvrir dans votre navigateur pour voir comment tout cela se rassemble, ou dans un éditeur de texte pour voir exactement comment le code fonctionne.

Est-ce que vous utilisez HTML sur une base régulière? Quels sont les autres balises trouvez-vous que vous utilisez couramment? Partagez vos conseils dans les commentaires ci-dessous!