Tutoriels HTML - Hyper Text Markup Language

Nous avons créé ce site internet pour enseigner aux "programmeurs*" débutants, même ceux avec peu de bases, comment utiliser du HTML mais pas seulement. Nous vous invitons à commencer le cours de "programmation*" dès maintenant. Mais tout d'abord, "le menu"...

Cette série de tutoriels est faite pour vous permettre d'acquérir de l'expérience, vous permettant d'être capable de lire et d'écrire du HTML, d'enregistrer des documents et par la suite de voir le résultat de votre travail sur un navigateur internet. Malheureusement cette page ne dispose pas d'une section pour vous apprendre à utiliser toutes les fonctions de base d'un ordinateur, donc pour cela vous pouvez demander de l'aide à un ami: Avant que vous ne continuiez à apprendre le langage HTML, vous devez:

  • Savoir ce qu'est notepad et comment l'utiliser
  • Savoir comment ouvrir un fichier en utilisant internet Explorer (ou n'importe quel autre navigateur, nous recommandons Chrome )
  • Savoir comment faire et ce que représente un copier/coller

* est-ce que la programmation en HTML existe?

Désolé de vous décevoir, mais la programmation en HTML n'existe pas parce que HTML n'est pas un langage de programmation. C'est un langage de balisage. Donc cela balise le contenu et rien de plus

HTML guide de référence rapide

Ci-dessous j'ai fait une courte liste des codes HTML les plus utilisés. Vous pouvez ajouter cette page à vos favoris pour y retourner plus facilement lorsque vous ne savez pas comment créer un code HTML ou lorsque vous ne vous en rappelez tout simplement plus.

HTML - Eléments

Les principaux éléments HTML sont <html>, <head>, <title> et <body>. Ci-dessous se trouve un exemple simple de comment créer un site internet.

html<html>
	<head> 
		<title>Mon premier site internet utilisant des codes html!</title>
	</head> 
	<body> 
		Salut les gars! Ici je mets le contenu de la page HTML.
	</body> 
</html>

HTML - Paragraphe

html<p>Ceci est un simple paragraphe HTML.</p>
<p align="left">Ceci est un paragraphe aligné à gauche.</p>

Demo

Ceci est un simple paragraphe HTML.

Ceci est un paragraphe aligné à gauche.

Pour aligner les éléments html nous utiliserons le label align avec les attributs: left, right, center, justify.

HTML - Titres

html<h1>Ceci est la balise HTML avec le plus gros titre</h1>

Les autres balises pour définir les titres et entetes en html sont: h1, h2, h3, h4, h5, h6. Le titre défini avec h1 est le plus gros et celui défini avec h6 est le plus petit.

Html - Saut de ligne

<br /> est un saut de ligne. L'espace entre "br" et "/" est la différence entre HTML 4 et valid XHTML code.

HTML - Règle horizontale

<hr /> est utilisé pour dessiner une ligne horizontale. L'espace entre "hr" et "/" est la différence entre HTML 4 et valid XHTML code.

HTML - Listes

Ceci est un simple exemple de liste HTML:

html<ol>
	<li>Le premier élément html de la liste</li>
	<li>Le second élément html de la liste</li>
	<li>Le troisième élément html de la liste</li>
</ol>

L'exemple ci-dessus est un exemple de liste html ordonné. D'autres listes html sont: désordonnées et liste de définition.

HTML - Liens

html<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Haut de page </a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Contact</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>

Ci-dessus, vous avez un exemple d'un lien html normal, un lien entre deux sections d'une même page, un lien qui dirige vers un email et un lien liant une image. Même si ce n'est plus utilisé en html cela mérite d'etre mentionné.

html<base href="http://www.tutorialehtml.com/">

Basehref a été supprimé des balises de l'index HTML 5.

HTML - Images

html<img src="img//html_image.jpg" alt="Html Image" width="100" height="50"  align="center" />

Il est recommandé, d'aligner les images en utilisant du CSS. Cela transformerait le code html ci-dessus en:

html<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />

HTML - Formulaires

Ceci est juste un exemple de code html pour créer un formulaire. C'est ce qu'un utilisateur peut utiliser pour entrer de l'information. Mais pour procéder ce type d'information vous avez besoin d'un fichier php (par exemple) qui envoie l'information a la base de données, envoyé, etc.

html<form method="post" name="monformulaire" action="process.php">
	<!--Le champ de texte utilisé pour introduire de l'information-->
	<input type="submit" value="Send">
	<input type="reset" value="Delete" />
</form>

HTML - Champs de texte

Ci-dessous se trouve des exemples de champs de texte HTML.

html<input type="text" size="10" maxlength="40" name="name"> --> Champ de texte normal
<input type="password" size="10" maxlength="10" name="pass"> --> champ de mot de passe
<input type="radio" name="color" value="red"> --> bouton radio
<input type="checkbox" name="check" value="yes"> --> case à cocher
<select name="select">  --> simple liste de sélection / liste déroulante
   <option>Html 4.1</option> 
   <option>Html 5</option> 
</select>

HTML - tableau

La structure basique d'un tableau est comme suivant:

html<table>
   <tr> 
      <th>Colonne 1</th>
      <th>Colonne 2</th>
   </tr>
   <tr>
      <td>Ligne 1 Cellule 1</td>
      <td>Ligne 1 Cellule 2</td>
   </tr>
   <tr>
      <td>Ligne 2 Cellule 1</td>
      <td>Ligne 2 Cellule 2</td>
   </tr>
</table>

Html - Bgcolor

Bgcolor est utilisé pour définir la couleur d'arrière plan. Ici j'indique quelques exemples de comment l'utiliser:

html<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.

Html - Arrière plan

Pour ajouter une image d'arrière plan nous utiliserons le code html suivant.

html<table background="img/pattern.jpg">

HTML - Commentaires

html<!-- Ceci est un simple commentaire html-->

Html - Embed (Musique et son)

Pour insérer de la musique ou du son à un document HTML utilisez la balise embed, comme suivant

html<embed src="exemple.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />

Html - Objet (Video)

Pour insérer de la vidéo dans un document HTML document utilisez la balise embed, comme suivant:

html<object width="425" height="344">
	<param name="movie" value="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1"></param>
	<param name="allowFullScreen" value="true"></param>
	
	<embed src="http://www.youtube.com/v/wViILXQfX7Y&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>

HTML - Gras

html<b>Texte HTML en gras</b>
<strong>Gros texte HTML</strong>

HTML - Italique

html<i>Italique</i>
<em>Accentué</em>

HTML - Indice, Exposant, Barré

Exposant, indice et texte barré. Meme si peu utilisé, vaut la peine d'être mentionné.

html<sub>Indice!</sub>
<sup>Exposant</sup>
<del>Text barré</del>

HTML - L'upload et les champs cachés

La forme ci-dessous est utilisée pour uploader un fichier vers le serveur. N'oubliez pas que ceci est simplement la partie html. Pour que cela fonctionne vous devez utiliser du php, asp, ou n'importe quel autre langage côté serveur.

html<form method="post" action="process.php"> 
	<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 
	<input type="file" />
	<input type="submit" value="Upload">
	<input type="reset" value="Reset" />
</form>