Comment connaître un maximum de balises HTML ?

 

par pierre221 |

     
Comment connaître un maximum de balises HTML ?

Le HTML est un langage de programmation qui permet de créer des sites et qui se programme avec Notepad++, et autres. Nous supposerons que vous avez Notepad pour cet article. Connaître les balises HTML peut paraître inutile, et pourtant cela est bien utile, c'est même la base pour pouvoir créer des sites, tableaux, zones de textes etc...

Quelles sont les fournitures nécessaires ?

  • Un ordinateur
  • Un clavier
  • Notepad++

Étapes de réalisation

1.

Une fois Notepad++ téléchargé et installé, ouvrez le fichier. Lorsque vous commencez à écrire sur le programme, il n'y a pas de couleur, et même si vous rentrez les bonnes balises, cela ne fonctionnera pas, car le fichier a pour extension, par défaut, .txt. Il vous faut donc mettre le fichier au format HTML.
Lorsque c'est fait, tapez : <HTML>
Cela indique au programme que vous allez commencer une nouvelle page.

2.

Après cela, écrivez <HEAD> puis <title>, puis un titre, puis </title> puis </HEAD>. Remarquez le "slash" des dernières balises. Cela nous servira tout le temps, pour fermer toutes les balises. Ouvrez ensuite un <BODY> puis mettez-vous à la toute fin du programme, et écrivez </BODY> puis </HTML>.
Voilà, vous avez commencé et terminé la page, mais sans contenu à l'intérieur. Voyons maintenant à quoi servent les balises que l'on appellera "internes", puisqu'elles sont à l'intérieur du programme. Si vous le désirez, vous pouvez tout à fait colorer votre page. Au lieu d'un <BODY> tout simple en début de page, vous pouvez mettre un <BODY BGCOLOR="(nom de la couleur en anglais")>.

3.

<TABLE> vous permet d'ouvrir un tableau sans bordures. <TABLE BORDER="Valeur souhaitée"> vous permet d'ouvrir un tableau avec bordures, avec la valeur que vous souhaitez. <tr> vous permet d'ouvrir une ligne, </tr> de fermer cette ligne, <td> d'ouvrir une colonne, et </td> de fermer cette colonne. Petit exemple :

<tr>
<td>Nombre</td>
<td>Nom</td>
<td>Age</td>
</tr>

4.

Lorsque tout cela est fait, il vous faudra bien entendu fermer le tableau avec un </table>
<A HREF="nom du fichier.html">Message</a> permet de créer un lien hypertexte. La balise </a> vous permet de fermer ce lien, afin que cela n'empiète pas sur ce qui va suivre.

<img src="nom de l'image.type de l'extension">(.bmp, .jpg...) vous permet de placer les images. Pour que cela fonctionne, il faut évidemment que les images soient présentes dans le même dossier où vous avez réalisé votre programme.

5.

<font face = Police Size = "Valeur"> vous servira à définir la police et sa taille pour le texte que vous avez écrit. Il vous faudra le fermer avec un </font>.
<INPUT TYPE="text" name="ce que vous voulez">crée une zone de texte.
<INPUT TYPE="Submit"> exprime au logiciel qu'il doit envoyer l'information écrite par l'utilisateur.

6.

Un <br> permet de faire un saut de lignes. Plus vous mettez de <br>, plus le nombre de saut de lignes est conséquent. La balise n'a pas à être fermée, et celle qui va suivre, non plus.

<hr> permet de faire une ligne pour séparer deux textes par exemple.
<h1>, <h2>, <h3>, <h4>, <h5> et <h6> définissent la taille de la police pour tout le texte que vous voulez.
Ces balises doivent en revanche être fermées. Exemple : </h1>

<li> permet de créer ce que l'on appelle une "liste à puces", et se ferme avec un </li>.

7.

Lorsque vous écrivez du texte sur le logiciel et que vous l'aérez, cela améliore votre compréhension,; mais si vous enregistrez et actualisez le fichier afin de le voir, vous remarquez que le texte n'est pas très bien centré. C'est à ça que servent aussi les <br>, les <table> et les <p>.

Centrer quelque chose avec un <table> est plutôt complexe, c'est pourquoi l'on préférera utiliser la balise <p>, que l'on fermera avec </p>, à la fin d'une information.

Sachez que <p align="center"> doit être toujours placé juste avant un message, quelles que soient les balises précédentes, afin que la "donnée" soit bien centrée. Vous pouvez remplacer le terme "center" par "left" ou par "right".

8.

Terminons avec la balise <b>, qui vous permettra de mettre le texte en gras. Donnons un exemple, pour finir, d'une phrase avec quelques balises.

<h1><b><li><p align="center">Message</b></li></h1> indique au message qu'il doit être d'une grande taille, en gras, et au centre de la page. Si cet article vous a inspiré, téléchargez Notepad ++ dans le lien donné en bas.

Liens utiles

Notepad++

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on