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:
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
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.
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<p>Ceci est un simple paragraphe HTML.</p>
<p align="left">Ceci est un paragraphe aligné à gauche.</p>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<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.
<br /> est un saut de ligne. L'espace entre "br" et "/" est la différence entre HTML 4 et valid XHTML code.
<hr /> est utilisé pour dessiner une ligne horizontale. L'espace entre "hr" et "/" est la différence entre HTML 4 et valid XHTML code.
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<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<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;" />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>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>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>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.Pour ajouter une image d'arrière plan nous utiliserons le code html suivant.
html<table background="img/pattern.jpg">html<!-- Ceci est un simple commentaire html-->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" />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<b>Texte HTML en gras</b>
<strong>Gros texte HTML</strong>html<i>Italique</i>
<em>Accentué</em>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>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>