Pour bien comprendre comment créer un menu déroulant en HTML et CSS, j'ai proposé pour vous un exemple à télécharger :
Cliquez ICI
Cliquez ICI
samedi 13 avril 2019
mardi 9 avril 2019
Editeur des pages WEB (Komodo Edit)
Komodo Edit
c'est un éditeur optimisé pour la programmation dynamique de langage, il aide l'utilisateur à écrire le code d'une manière facile et avec interface lisible.
Télécharger le logiciel
c'est un éditeur optimisé pour la programmation dynamique de langage, il aide l'utilisateur à écrire le code d'une manière facile et avec interface lisible.
Télécharger le logiciel
Insérer des vidéos et des audios HTML
Pour insérer une vidéo dans note page WEB on utilise la balise <video> avec les attribut suivants :
Pour insérer audio dans note page WEB on utilise la balise <audio> avec les attribut suivants :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
</head>
<body>
<h1>Exemple d'un video</h1>*
<video controls width="300px" height="300px" autoplay>
<source src="mavideo.mp4" type="video/mp4">
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.
Voici <a href="mavideo.mp4">un lien pour télécharger la vidéo</a>.</p>
</video>
<p>Exemple audio</p>
<audio controls autoplay>
<source src="monaudio.mp3" type="audio/mp3">
</audio>
</body>
</html>
Télécharger exemple complet
- controls : permet d'afficher à l'internaute les boutons pour contrôler la vidéo (mettre en pause, agrandir.....).
- autoplay : permet de lire la vidéo automatiquement dès que la page est chargée.
- width, height : pour indiquer la largeur et la hauteur de la zone contenant la vidéo.
Pour insérer audio dans note page WEB on utilise la balise <audio> avec les attribut suivants :
- controls : permet d'afficher à l'internaute les boutons pour contrôler l'audio (mettre en pause,le volume.....).
- autoplay : permet de lire l'audio automatiquement dès que la page est chargée.
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
</head>
<body>
<h1>Exemple d'un video</h1>*
<video controls width="300px" height="300px" autoplay>
<source src="mavideo.mp4" type="video/mp4">
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.
Voici <a href="mavideo.mp4">un lien pour télécharger la vidéo</a>.</p>
</video>
<p>Exemple audio</p>
<audio controls autoplay>
<source src="monaudio.mp3" type="audio/mp3">
</audio>
</body>
</html>
Télécharger exemple complet
mercredi 3 avril 2019
Défiler ensemble des images HTML
Pour défiler ensemble des images on utilise la balise <marquee>
les attributs les utilisés avec cette balise sont :
direction : la direction de défilement des images ou bien les textes (down, up, lift et right)
behavior : de bas en haut et de gauche à droite en même temps (alternate).
les attributs les utilisés avec cette balise sont :
direction : la direction de défilement des images ou bien les textes (down, up, lift et right)
behavior : de bas en haut et de gauche à droite en même temps (alternate).
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Défiler ensemble des images de la nature</title>
</head>
<body>
<h1>Défiler ensemble des images de la nature</h1>
<marquee direction="right" behavior="alternate" width="60%">
<a href="image1.jpg" target="_blank"><img src="image1.jpg" width="200px" height="200px"/></a>
<a href="image2.jpg" target="_blank"><img src="image2.jpg" width="200px" height="200px"/></a>
<a href="image3.jpg" target="_blank"><img src="image3.jpg" width="200px" height="200px"/></a>
<a href="image4.jpg" target="_blank"><img src="image4.jpg" width="200px" height="200px"/></a>
</marquee>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Défiler ensemble des images de la nature</title>
</head>
<body>
<h1>Défiler ensemble des images de la nature</h1>
<marquee direction="right" behavior="alternate" width="60%">
<a href="image1.jpg" target="_blank"><img src="image1.jpg" width="200px" height="200px"/></a>
<a href="image2.jpg" target="_blank"><img src="image2.jpg" width="200px" height="200px"/></a>
<a href="image3.jpg" target="_blank"><img src="image3.jpg" width="200px" height="200px"/></a>
<a href="image4.jpg" target="_blank"><img src="image4.jpg" width="200px" height="200px"/></a>
</marquee>
</body>
</html>
dimanche 31 mars 2019
Les Formulaires sur HTML
Les formulaires sur HTML est utilisé pour envoyer des informations à une base de données, par exemple formulaire d'inscription :
L'élément pour créer un formulaire dans une page WEB : <form></form>
les attributs de la balise <form> sont :
Après ces deux éléments ci-dessus, on passe aux éléments de l'entrée des données :
l'élément <input/> avec les attributs suivants :
<input type="text" name="pseudo" id="pseudo" autofocus/>
<input type="password" name="motpass" id="motpass" />
NB : chaque élément <input> a besoin d'un libellé pour définir aux visiteurs la valeur à saisir dans le champ, on utilise la balise <label> avec l'attribut for contenant la même valeur de l'attribut id.
exemple : <label for="pseudo">Pseudo</label><input type="text" name="pseudo" id="pseudo" autofocus/>
L'élément <textarea></textarea> :
cet élément permettra de saisir plusieurs lignes (un texte longue) comme message, description ...etc.
les attributs utilisé par cet éléments sont les suivants :
name : pour indiquer le nom ;
id : pour le lier avec son libellé;
cols : pour indiquer le nombres des colonnes;
rows : pour indiquer le nombres des lignes.
exemple :
<label for="description">Description</label>
<textarea name="description" id="description" cols="20" rows="10">votre description sur notre site</textarea>
L'élément <select></select> :
Pour créer une liste déroulante de l'ensemble des valeurs (pour donner à l'utilisateur de choisir son pays par exemple), cet élément est utilisé avec deux balises :
<option> : pour mettre les valeur dans l'élément select ;
<optgroup> : Pour définir les valeur par groupe (facultatif).
exemple :
<label for="pays">Sélectionner votre pays :</label>
<select name="pays" id="pays">
<optgroupe label="Afriquia">
<option value="maroc">maroc</option>
<option value="egypt">egypt</option>
</optgroupe>
<optgroup label="Europe">
<option value="france">france</option>
<option value="espagne">espagne</option>
</optgroup>
</select>
NB : l'attribut value est obligatoire pour cet élément, car il sera utilisé par la page qui recevra les données.
maintenant on parle sur quatre types de l'élément <input> sont :
checkbox
ce type est utilisé pour sélectionner ensembles des valeurs comme les loisirs :
<input type="checkbox" name="voyage" id="voyage" checked/><label for="voyage">Voyage</label><br/>
<input type="checkbox" name="lecture" id="lecture" /><label for="lecture">Lecture</label><br/>
<input type="checkbox" name="sport" id="sport" /><label for="sport">Sport</label><br/>
NB : pour définir une valeur par défaut on met l'attribut checked et la même chose pour le type radio.
radio
ce type a pour but de sélectionner une seule valeur parmi un groupe de valeur le sexe d'une personne :
<input type="radio" name="sexe" id="masculin" value="masculin" /><label for="masculin">Masculin</label><br/>
<input type="radio" name="sexe" id="feminin" value="feminin"/><label for="feminin">Féminin</label><br/>
NB : ce type demande obligatoirement de donner la même valeur à l'attribut name et des valeurs différents à l'attribut value et l'id
submit
ce type (bouton) pour envoyer les données saisis dans le formulaire à la page définie à l'attribut action de la balise form.
<input type="submit" name="envoyer" value="envoyer"/>
reset
ce type (bouton) pour effacer les données saisis dans le formulaire.
<input type="submit" name="envoyer" value="envoyer"/>
Télécharger l'exemple
L'élément pour créer un formulaire dans une page WEB : <form></form>
les attributs de la balise <form> sont :
- method : la méthode de l'envoi des données, on a deux méthodes (POST ou GET);
- action: indique la page à exécuter ou bien la page qui recevra les données envoyées par ce formulaire.
Après ces deux éléments ci-dessus, on passe aux éléments de l'entrée des données :
l'élément <input/> avec les attributs suivants :
- type : par cet attribut on détermine le type de l'élément (text, email, url, tel, number, rang,color,date,search), avec deux éléments on va les voir par la suite (chekbox, radio, submit et reset)
- name : on indiquer le nom de la zone, ce nom est plus important dans la page qui recevra les données;
- value : pour indiquer la valeur par défaut (facultatif)
- size : pour agrandir le champ (facultatif);
- maxlenth : pour déterminer le nombre max de caractère à saisir dans ce champ (facultatif);
- placeholder : on indique le contenu du champ et cette indication disparaitra dès que le champ recevra le curseur (facultatif) ;
- id : pour lier l'élément input avec son libellé, dès que visiter à cliqué seulement sur le libellé du champ, le curseur se placera dans le champ de saisie.
- autofocus : mettre le curseur automatiquement dans le champ qui contient l'attribut autofocus.
<input type="text" name="pseudo" id="pseudo" autofocus/>
<input type="password" name="motpass" id="motpass" />
NB : chaque élément <input> a besoin d'un libellé pour définir aux visiteurs la valeur à saisir dans le champ, on utilise la balise <label> avec l'attribut for contenant la même valeur de l'attribut id.
exemple : <label for="pseudo">Pseudo</label><input type="text" name="pseudo" id="pseudo" autofocus/>
L'élément <textarea></textarea> :
cet élément permettra de saisir plusieurs lignes (un texte longue) comme message, description ...etc.
les attributs utilisé par cet éléments sont les suivants :
name : pour indiquer le nom ;
id : pour le lier avec son libellé;
cols : pour indiquer le nombres des colonnes;
rows : pour indiquer le nombres des lignes.
exemple :
<label for="description">Description</label>
<textarea name="description" id="description" cols="20" rows="10">votre description sur notre site</textarea>
L'élément <select></select> :
Pour créer une liste déroulante de l'ensemble des valeurs (pour donner à l'utilisateur de choisir son pays par exemple), cet élément est utilisé avec deux balises :
<option> : pour mettre les valeur dans l'élément select ;
<optgroup> : Pour définir les valeur par groupe (facultatif).
exemple :
<label for="pays">Sélectionner votre pays :</label>
<select name="pays" id="pays">
<optgroupe label="Afriquia">
<option value="maroc">maroc</option>
<option value="egypt">egypt</option>
</optgroupe>
<optgroup label="Europe">
<option value="france">france</option>
<option value="espagne">espagne</option>
</optgroup>
</select>
NB : l'attribut value est obligatoire pour cet élément, car il sera utilisé par la page qui recevra les données.
maintenant on parle sur quatre types de l'élément <input> sont :
checkbox
ce type est utilisé pour sélectionner ensembles des valeurs comme les loisirs :
<input type="checkbox" name="voyage" id="voyage" checked/><label for="voyage">Voyage</label><br/>
<input type="checkbox" name="lecture" id="lecture" /><label for="lecture">Lecture</label><br/>
<input type="checkbox" name="sport" id="sport" /><label for="sport">Sport</label><br/>
NB : pour définir une valeur par défaut on met l'attribut checked et la même chose pour le type radio.
radio
ce type a pour but de sélectionner une seule valeur parmi un groupe de valeur le sexe d'une personne :
<input type="radio" name="sexe" id="masculin" value="masculin" /><label for="masculin">Masculin</label><br/>
<input type="radio" name="sexe" id="feminin" value="feminin"/><label for="feminin">Féminin</label><br/>
NB : ce type demande obligatoirement de donner la même valeur à l'attribut name et des valeurs différents à l'attribut value et l'id
submit
ce type (bouton) pour envoyer les données saisis dans le formulaire à la page définie à l'attribut action de la balise form.
<input type="submit" name="envoyer" value="envoyer"/>
reset
ce type (bouton) pour effacer les données saisis dans le formulaire.
<input type="submit" name="envoyer" value="envoyer"/>
Télécharger l'exemple
vendredi 29 mars 2019
Les tableaux en HTML
l'importance des tableaux sur l'html est d'organiser le contenu des pages WEB ou bien les formulaire en plus les tableaux des listes normal, par exemple :
Border : créer le bordure au tableau;
Bordercolor: colorier le bordure;
Colspan: Fusionner les cellules des colonnes;
Rowspan : Fusionner les cellules des lignes;
Bgcolor: Colorier l'arrière plan d'un tableau, cellule ou lignes.
La balise <caption> pour mettre un titre pour un tableau.
Comme exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>les tableaux</title>
</head>
<body>
<table border="1px" bordercolor="red">
<caption><strong>Listes des salariés</strong></caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
<th>Lieu de naissance</th>
</tr>
<tr>
<td>Said</td>
<td>Wadia</td>
<td>32 ans</td>
<td>Rabat</td>
</tr>
<tr>
<td>Safia</td>
<td>Midoua</td>
<td>35 ans</td>
<td>Fes</td>
</tr>
<tr>
<td colspan="2" bgcolor="yellow">Moha</td>
<td>40 ans</td>
<td>Meknes</td>
</tr>
<tr>
<td>khalid</td>
<td>Midoua</td>
<td>35 ans</td>
<td rowspan="2" bgcolor="yellow">kenitra</td>
</tr>
<tr>
<td>yahya</td>
<td>Zakaria</td>
<td>36 ans</td>
</tr>
</table><br/>
<table>
<caption><strong>Les images de la nature</strong></caption>
<tr>
<td><a href="image1.jpg" target="_blank"><img src="image1.jpg" width="200px" height="200px"/></a></td>
<td><a href="image2.jpg" target="_blank"><img src="image2.jpg" width="200px" height="200px"/></a></td>
<td><a href="image3.jpg" target="_blank"><img src="image3.jpg" width="200px" height="200px"/></a></td>
</tr>
</table>
</body>
</html>
Télécharger l'exemple
- Afficher des image alignée avec une taille précisées ;
- Afficher les textes de saisie alignés dans un formulaire ;
- Afficher une liste de recherches.
- Pour créer les lignes d'un tableau : la balise <tr>
- Pour créer les titres de chaque cellule : la balise <th>
- Pour créer les cellules de chaque lignes : la balise <td>
Border : créer le bordure au tableau;
Bordercolor: colorier le bordure;
Colspan: Fusionner les cellules des colonnes;
Rowspan : Fusionner les cellules des lignes;
Bgcolor: Colorier l'arrière plan d'un tableau, cellule ou lignes.
La balise <caption> pour mettre un titre pour un tableau.
Comme exemple :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>les tableaux</title>
</head>
<body>
<table border="1px" bordercolor="red">
<caption><strong>Listes des salariés</strong></caption>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Age</th>
<th>Lieu de naissance</th>
</tr>
<tr>
<td>Said</td>
<td>Wadia</td>
<td>32 ans</td>
<td>Rabat</td>
</tr>
<tr>
<td>Safia</td>
<td>Midoua</td>
<td>35 ans</td>
<td>Fes</td>
</tr>
<tr>
<td colspan="2" bgcolor="yellow">Moha</td>
<td>40 ans</td>
<td>Meknes</td>
</tr>
<tr>
<td>khalid</td>
<td>Midoua</td>
<td>35 ans</td>
<td rowspan="2" bgcolor="yellow">kenitra</td>
</tr>
<tr>
<td>yahya</td>
<td>Zakaria</td>
<td>36 ans</td>
</tr>
</table><br/>
<table>
<caption><strong>Les images de la nature</strong></caption>
<tr>
<td><a href="image1.jpg" target="_blank"><img src="image1.jpg" width="200px" height="200px"/></a></td>
<td><a href="image2.jpg" target="_blank"><img src="image2.jpg" width="200px" height="200px"/></a></td>
<td><a href="image3.jpg" target="_blank"><img src="image3.jpg" width="200px" height="200px"/></a></td>
</tr>
</table>
</body>
</html>
Télécharger l'exemple
mercredi 27 mars 2019
Les images sur HTML
Pour insérer une image dans notre page WEB, on utilise l'élément <img>
cet élément ayant plusieurs attributs :
Les attributs les plus utilisés sont les suivants :
src : pour indiquer le chemin de l'image, si l'image dans même dossier de votre page, on met seulement le nom de l'image.extension (.jpg, .png......);
alt : cet attribut pour donner un nom à l'image.
height : pour déterminer la hauteur de l'image;
widht : pour déterminer la largeur de l'image;
align : pour aligner l'image (en haut, au center, en bas.....);
border : pour mettre un bordure à l'image.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>image</title>
</head>
<body>
<!--ma page web et l'image dans même dossier-->
<img src="bateau.jpg" align="top" heigt="200px" width="200px" alt="bateau" border="2"/>
</body>
</html>
Télécharger l'exemple
cet élément ayant plusieurs attributs :
Les attributs les plus utilisés sont les suivants :
src : pour indiquer le chemin de l'image, si l'image dans même dossier de votre page, on met seulement le nom de l'image.extension (.jpg, .png......);
alt : cet attribut pour donner un nom à l'image.
height : pour déterminer la hauteur de l'image;
widht : pour déterminer la largeur de l'image;
align : pour aligner l'image (en haut, au center, en bas.....);
border : pour mettre un bordure à l'image.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>image</title>
</head>
<body>
<!--ma page web et l'image dans même dossier-->
<img src="bateau.jpg" align="top" heigt="200px" width="200px" alt="bateau" border="2"/>
</body>
</html>
Télécharger l'exemple