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>