Language HTML

Jeux

Cinéma

Musique

Humour

Images

HTML

Download

Liens

E-mail

LANGAGE HTML
& JavaScript

Le langage HTML n'est pas trop compliqué puisqu'il est même assez facile à comprendre si on s'y met vraiment. Je pense l'avoir expliqué de la manière la plus simple possible. Il y a seulement 2 points importants: il faut placer les expressions aux bons endroits dans le code et il faut se rappeler les codes des couleurs qui sont assez chiants à trouver hormis les couleurs de base comme le rouge, le bleu ... Les couleurs des codes écrits sont là pour vous aider car présentes dans certains éditeurs.
* Les couleurs concernent Front Page Express et peut être d'autres éditeurs HTML.
** Les codes écrits présentes des parties en blanc ni souligné, ni en gras, ni en italique car elle seront en noir (à cause du fond de cette page) dans les codes de vos pages

Début de page

Tapez:
<html>
<head>
<title>titre</title>
</head>

<body bgcolor="code couleur" text="code couleur"> (bgcolor correspond à la couleur de l'arrière plan de votre page et text à la couleur principale du texte de votre page)

</body>
</html>

Code couleur

#FF8080

#FFFF80

#80FF80

#00FF80

#80FFFF

#0080FF

Rose

#FF80C0

#FF80FF

Rouge

#FF0000

Jaune

#FFFF00

#80FF00

#00FF40

Bleu Vert

#00FFFF

#0080C0

#8080C0

Fushia

#FF00FF

#804040

#FF8040

Citron vert

#00FF00

Sarcelle

#008080

#004080

#8080FF

#800040

#FF0080

Marron

#800000

Orange

#FF8000

Vert

#008000

#008040

Bleu

#0000FF

#0000A0

Pourpre

#800080

Violet

#8000FF

#400000

#804000

#004000

#004040

Bleu marine

#000080

#000040

#400040

#400080

Noir

#000000

Vert Olive

#808000

#808040

Gris

#808080

#408080

Argent

#C0C0C0

#400040

Blanc

#FFFFFF

Mettre en gras

Pour mettre votre texte en gras,tapez ceci:
<strong>texte</strong>

Mettre en italique

Pour mettre votre texte en italique, tapez ceci:
texte</em>

Souligner le texte

Pour souligner votre texte, tapez ceci:
texte

Traiter le texte

Pour appliquer des polices au texte, tapez ceci:
<font face="nom de la police" texte></font>

Colorier le texte

Pour colorier le texte, tapez ceci:
<font color="code couleur" texte></font>

Appliquer une taille au texte

Pour appliquer une taille au texte, tapez ceci:
<font size="x" texte></font> (où x est le numéro de taille comme 10,12,20 ...)

Aligner et centrer le texte

Pour aligner ou centrer le texte, tapez ceci:

Traitement complet du texte

Nous allons mélanger les 6 sujets traités ci-dessus.
Nous allons écrire Langage HTML en Arial, de taille 14, en jaune, en le soulignant en le mettant en gras et en italique et en le centant.
Il faut donc taper ce qui va suivre en respectant bien l'ordre:
<font color="#FFFF00" size="14" face="Arial"><strong>langage HTML</strong></em></font>
On obtient ceci:

Langage HTML

Insérer un lien

Vous pouvez établir un lien avec une autre page à partir d'un mot ou d'une expression ou à partir d'une image.
Pour un lien à partir d'un mot ou d'une expression, tapez ceci:
<a href="adresse de la page.htm"></a>
Pour un lien à partir d'une image, tapez ceci:
<a href="adresse de la page.htm"><img src="adresse de l'image"></a>

Insérer un signet

Vous pouvez insérer des signets dans vos pages pour pouvoir établir des liens entre plusieurs endroits d'une même page.
Pour insérer un signet, tapez ceci:
<a name="nom du signet"></a>

Insérer un tableau

Pour insérer un tableau (ici avec 1 ligne et 2 colonnes), tapez ceci en respectant bien l'ordreet les espaces et lisez les remarques faites justes après:
>div align="left (gauche) ou center (centre) ou right (droite">

<table border="x" bgcolor="code couleur" border color="code couleur"> (ou x est l'épaisseur de la bordure:1,2...)
(tapez 4 espaces)<tr>
(tapez 8 espaces)<td>taper votre texte,image...</td>
(tapez 8 espaces)<td>taper votre texte,image...</td>
(tapez 4 espaces)</tr>
</table>

Remarque:
* Dans la première ligne, bgcolor et bordercolor sont facultatif.En effet bgcolor vous permet de modifier la couleur d'arrière plan du tableau et border color vous permet de modifier la couleur de la bordure du tableau (si pour border vous avez mis 0, il n'y aura pas de bordure)
** Respectez bien les espaces avant <tr> et <td> (ils sont entre paranthèses et soulgnés et ils faut taper 4 ou 8 fois sur la barre espaces et non taper: taper 4 espaces
*** <td> sert à faire des colonnes.Il remplace donc dans les codes de texte.Donc si vous voulez établir un lien dans une cellule,il faudra taper:
<td><a href="adresse de la page.htm"></a></td>

Exemple:
Nous allons faire un tableau avec 2 lignes et 2 colonnes avec une bordure d'épaisseur 2 de couleur rouge et un arrière plan bleu avec un lien dans la cellule située dans la première ligne et première colonne (en haut à gauche,quoi !) et avec une image dans la cellule située dans la seconde ligne et dans la seconde colonne (donc en bas à droite !) et rien dans les cellules en haut à droite et en bas à gauche.Il faut donc taper:
<table border="2" bgcolor="#0000FF" bordercolor="#FF0000">
(tapez 4 espaces)<tr>
(tapez 8 espaces)<td><a href="adresse de la page.htm"></a></td>
(tapez 8 espaces)<td></td>
(tapez 4 espaces)</tr>
(tapez 4 espaces)<tr>
(tapez 8 espaces)<td></td>
(tapez 8 espaces)<td><img src="adresse de l'image"></td>
(tapez 4 espaces)</tr>
</table>
Il ressemble donc à ça:

lien
	image

Insérer un saut de ligne normal

Pour insérer un saut de ligne, tapez ceci:
texte

Insérer des listes à puces

Il y a 2 types de puces: les puces géométriques et les puces avec des chiffre ou des lettres.
Pour les puces géométriques, tapez:
<ul type="square (carré) ou circle (rond)">
(tapez 4 espaces) <li>texte</li>
</ul>
Remarque: si vous voulez des ronds pleins, il n'est pas nécessaire de mettre type.
Pour les puces avec des lettres ou des chiffres, tapez:
soit <ol type="1" start="1">
soit <ol type="I" start="1">
soit <ol type="A" start="1">
soit <ol type="a" start="1">
soit <ol type="i" start="1">
(tapez 4 espaces) <li>texte</li>
</ol>

Insérer une ligne horizontale

Pour insérer une ligne horizontale, tapez ceci:
<hr noshade color="code couleur"> (noshade est facultatif puisqu'il sert à enlever l'ombrage de la ligne)

Insérer une image

Pour insérer une image, tapez ceci:
<img src="adresse de l'image">
Si vous voulez paramétrer l'image en lui attribuant une largeur et/ou une hauteur, tapez ceci:
<img src="adresse de l'image" width="x" height="x"> (ou x est la mesure en pixels)

Insérer une vidéo

Pour insérer une vidéo, tapez ceci:
<img
dynsrc="adresse de la vidéo" width="x" height="x"(width la largeur et height la hauteur avec x la mesure en pixels) start="fileopen(dès que la page s'ouvre)ou mouseover(au passage de la souris) controls loop="x(nombre de répétitions)ou infinite(en boucle) loopdelay="x( ou * est le délai en millisecondes entre chaque répétitions)">
Remarque:
* controls sert à afficher les contrôles du lecteur vidéo
** loop est facultatif ainsi que loopdelay ou controls

Insérer un fond sonore

Pour insérer un fond sonore à votre page, tapez ceci à cet endroit exact de la page (début de la page):
<html>
<head>
<title>titre></title>
<bgsound src="adresse de la mélodie" loop="x(nombre de répétitions) ou infinite (en boucle)">
</head>

Insérer une bannière

Pour insérer une bannière, tapez ceci:
<marquee align="top (en haut) ou middle (au milieu)" behavior="alternate (alterner/aller-retour) ou slide (faire glisser)" bgcolor="code couleur" direction="right" (vers la droite) width="x" height="x" scrolldelay="x" (où x est la durée)>texte</marquee>

Remarque:
*align n'est pas nécessaire si vous désirez que le texte se trouve en bas.
** behavior n'est pas nécessaire si vous désirez que le texte défile.
*** direction n'est pas nécessaire si vous voulez que le texte aille vers la gauche (de droite à gauche).
**** width et height concernent respectivements la largeur et la longueur de la bannière avec x la mesure en pixels.

LANGAGE HTML

LEXIQUE

**Lexique des données violettes**
<a href="....htm">	</a>	LIEN
<a name="...">	</a>	SIGNET
<bgsound>		FOND SONORE
<body>	</body>	"CORPS" DE LA PAGE (code à taper entre ses 2 "balises")
<br>		SAUT DE LIGNE NORMAL
<div>	</div>	ALIGNEMENT ET CENTRAGE DU TABLEAU
<em>	</em>	METTRE EN ITALIQUE
<font>	</font>	TEXTE
<head>	</head>	CONTIENT LE TITRE, LE FOND SONORE ET LES METAS
<hr>		LIGNE HORIZONTALE
<html>	</html>	DEBUT ET FIN DE PAGE
<img src"..."> ou <img dynsrc="...">		>IMAGE >VIDEO
<li>	</li>	DONNEES (FORMES GEOMETRIQUES) DES LISTES A PUCES
<marquee>	</marquee>	BANNIERE
<ol>	</ol>	DONNEES (LETTRES ET CHIFFRES) DES LISTES A PUCES
<p>	</p>	DEBUT ET FIN DE PARAGRAPHE
<strong>	</strong>	METTRE EN GRAS
<table>	</table>	TABLEAU
<td>	</td>	COLONNE (DEBUT ET FIN)
<title>	</title>	TITRE DE LA PAGE
<tr>	</tr>	LIGNE (DEBUT ET FIN)
<u>	</u>	SOULIGNER
<ul>	</ul>	LISTE A PUCE (DEBUT ET FIN)

JAVASCRIPT

Cette rubrique contient quelques scripts pour donner une plus grande dimension à vos pages Web.

Confirmation: (on vous demande si vous voulez continuer à lire la page)

<body>
<script langage="JavaScript">

function Info()
{if (!confirm("texte"))
history.go(0);return " "}
document.writeln(Info())
</script>
</body>

Message 1: (un message s'affiche au chargement de la page)

<body onLoad="alert('texte')">

Message 2: (en cliquant sur un bouton, un message apparaît)

<body>

<form>
<input type="button" name="sillyprompt" value="texte du bouton"
onClick= "alert('texte du message')">(texte à droite du bouton
</form>

</body>