HTML : Astuces, bugs - Le MEMO du Web Développeur

Internet Explorer : Commentaire conditionnel

t@ra — Thu, 07 Dec 2023 17:33:32 +0000

Les commentaires conditionnels sont propres à Internet Explorer.

Ils permettent de

Masquer ou afficher du code HTML sous IE uniquement.
Sélectionner une version du navigateur IE pour afficher du code spécifique à cette version.

Cibler une version d’internet Explorer par commentaire conditionnel se fait avec les syntaxes suivante.

Si la version IE est supérieure ou égale à IE9 :

Si la version IE est inférieure ou égale à IE7 :

Si la version de IE est égale à IE10

Exemples d’utilisation :

Utile pour faire des patchs pour certaines vieilles versions d’Internet Explorer

Code HTML affiché uniquement sous navigateur IE8

Afficher du contenu uniquement pour une version d’Internet explorer

Script javascript déclaré uniquement sous navigateurs IE<=8

Déclarer un script pour les vieilles versions d’internet explorer, dans le cas suivant, déclarer un script qui simule les bords arrondis pour les versions d’internet Explorer qui ne supportent pas la propriété CSS border-radius.

Avertissement :
Les commentaires conditionnels IE ne sont plus pris en compte par IE 10 !

source : http://en.wikipedia.org/wiki/Conditional_comment

The post Internet Explorer : Commentaire conditionnel first appeared on Le MEMO du Web Développeur.

Comment ajouter un favicon sur son site

t@ra — Thu, 16 Nov 2023 17:55:33 +0000

Le favicon d’un site est la petite image qui apparaît à gauche de l’onglet du navigateur correspondant la page du site. C’est une image de format .ico

http://favicon.htmlkit.com/favicon/ permet de générer et de télécharger un favicon, à partir d’une image png ou jpeg .

Il est possible de paramétrer le background, la bordure de l’image favicon etc …

Pour que l’image du favicon apparaisse il vous suffit de placer la ligne suivante à l’intérieur de la balise de votre site :

Etant entendu que votre favicon se nomme favicon.ico, mais vous pouvez le nommer comme vous voulez, l’important étant l’extension .ico

The post Comment ajouter un favicon sur son site first appeared on Le MEMO du Web Développeur.

Méthode pour affecter un identifiant entier à mes éléments HTML

t@ra — Mon, 05 Aug 2013 15:40:50 +0000

Les éléments HTML peuvent être identifiés par un id unique.

Un attribut de type identifiant doit commencer par une lettre ([A-Za-z]), suivie d’un nombre quelconque de lettres, chiffres ([0-9]), traits d’union (« -« ), soulignements (« _ »), deux-points (« : »), et points (« . »)

Affecter l’identifiant entier de l’enregistrement de ma BDD à un élément HTML

Or, il peut être utile lorsqu’on a besoin d’une liste de données tirées d’une base de données chacune d’elle intégrée dans un élément, comme un div, d’affecter à l’id de ce div l’identifiant unique de la données (l’enregistrement) qui lui est sous forme d’entier.

Ma méthode est la suivante :

Code HTML/PHP :

Je parcours la table de ma BDD (penser à se connecter préalablement à la base de données), je crée un DIV par enregistrement dont l’attribut ID est le mot clé « madonnee_ » suivi du numéro d’identifiant de l’enregistrement de la BDD (donc madonnee_1, madonnee_2 etc …).
Tous les DIV ont la classe « mesdonnee«

$result = mysql_query("SELECT id, nom FROM matable WHERE ..");
// Parcours de la table de la BDD, création d'un DIV par enregistrement
while ($row = mysql_fetch_array($result)) {
   echo ' '.$row->nom.'';
}

Code JQuery :

En JQuery, lorsqu’on clique sur un DIV de classe « mesdonnee« , je récupère la valeur de l’identifiant unique de l’enregistrement de la BDD en utilisant la fonction replace() javascript qui me supprime le mot clé ‘madonnee‘ pour me délivrer l’identifiant sous sa forme originale.

$("div.madonnee").click(function(){   
   var id_donnee = ($(this).attr('id').replace ('madonnee_', ''));
   alert ('la donnée affichée correspond à l'enregistrement d'identifiant : '+id_donnee);
});

The post Méthode pour affecter un identifiant entier à mes éléments HTML first appeared on Le MEMO du Web Développeur.

Ma méthode pour affecter un identifiant entier à mes éléments HTML

t@ra — Sun, 04 Aug 2013 22:00:00 +0000

Les éléments HTML peuvent être identifiés par un id unique.

Un attribut de type identifiant doit commencer par une lettre ([A-Za-z]), suivie d'un nombre quelconque de lettres, chiffres ([0-9]), traits d'union ("-"), soulignements ("_"), deux-points (":"), et points (".")

Affecter l'identifiant entier de l'enregistrement de ma BDD à un élément HTML

Or, il peut être utile lorsqu'on a besoin d'une liste de données tirées d'une base de données chacune d'elle intégrée dans un élément, comme un div, d'affecter à l'id de ce div l'identifiant unique de la données (l'enregistrement) qui lui est sous forme d'entier.

Ma méthode est la suivante :

Code HTML/PHP :

Je parcours la table de ma BDD (penser à se connecter préalablement à la base de données), je crée un DIV par enregistrement dont l'attribut ID est le mot clé "madonnee_" suivi du numéro d'identifiant de l'enregistrement de la BDD (donc madonnee_1, madonnee_2 etc …).
Tous les DIV ont la classe "mesdonnee"

$result = mysql_query("SELECT id, nom FROM matable WHERE ..");
// Parcours de la table de la BDD, création d'un DIV par enregistrement
while ($row = mysql_fetch_array($result)) {
   echo ' '.$row->nom.'';
}

Code JQuery :

En JQuery, lorsqu'on clique sur un DIV de classe "mesdonnee", je récupère la valeur de l'identifiant unique de l'enregistrement de la BDD en utilisant la fonction replace() javascript qui me supprime le mot clé 'madonnee' pour me délivrer l'identifiant sous sa forme originale.

$("div.madonnee").click(function(){   
   var id_donnee = ($(this).attr('id').replace ('madonnee_', ''));
   alert ('la donnée affichée correspond à l'enregistrement d'identifiant : '+id_donnee );
});

The post Ma méthode pour affecter un identifiant entier à mes éléments HTML first appeared on Le MEMO du Web Développeur.

Rafraîchir automatiquement une page en HTML

t@ra — Fri, 26 Jul 2013 11:48:07 +0000

Il peut être utile de rafraîchir régulièrement et automatiquement une page comme l’affichage d’information en continu par exemple.
Il est possible de le faire en HTML grâce à la balise META suivante (à placer à l’intérieur de la balise de votre page HTML).
Le paramètre content contient l’intervalle de rafraîchissement exprimé en secondes

http-equiv= »refresh » : Mise à jour automatique de la page


  
    
  
  
    echo 'Date et heure actuelle : date ("d/m/Y H:i:s");

Ce script va s’actualiser toutes les 5 secondes pour afficher la date et l’heure.

The post Rafraîchir automatiquement une page en HTML first appeared on Le MEMO du Web Développeur.

Rafraîchir automatiquement une page

t@ra — Thu, 25 Jul 2013 22:00:00 +0000

Pour afficher des informations en temps réel sur un site (comme une horloge, un tableau de données ou des alertes mises à jour), il peut être utile de rafraîchir automatiquement une page web à intervalles réguliers.

Utiliser la balise pour recharger une page HTML

Le HTML permet un rafraîchissement automatique de la page grâce à la balise avec l’attribut http-equiv="refresh". Cette balise doit être placée dans la section du document HTML.

L’attribut content précise l’intervalle de mise à jour en secondes. Par exemple :

Ce code provoquera un rechargement automatique de la page toutes les 30 secondes.

http-equiv= »refresh » : Mise à jour automatique de la page

Exemple complet : affichage de la date et heure actuelle avec rafraîchissement toutes les 4 secondes






Rafraîchissement automatique

Remarque : dans cet exemple, le code PHP affiche dynamiquement la date et l’heure actuelles. À chaque rechargement de la page, les données sont mises à jour.

The post Rafraîchir automatiquement une page first appeared on Le MEMO du Web Développeur.

Empêcher l’autocomplétion dans les formulaires HTML

t@ra — Thu, 31 Jan 2013 14:16:59 +0000

Les navigateurs proposent une fonctionnalité qui peut être très pratique afin de ne pas avoir à retaper des données déjà tapées antérieurement.
C’est l’autocomplétion qui propose automatiquement à l’internaute lorsqu’il saisit dans un champs HTML les premières lettres d’un mot, tous les mots commençant par ces lettres et qu’il a déjà saisis dans le passé dans le navigateur.

L’autocomplétion est une fonctionnalité par défaut des champs input html, il est toutefois possible de la supprimer en spécifiant la propriéte autocomplete= »off » sur la balise

Testez le fonctionnement en tapant dans les champs de formulaire ci-dessous.

Champs de texte sans autocomplétion

Champs de texte avec autocomplétion (comportement par défaut)

The post Empêcher l’autocomplétion dans les formulaires HTML first appeared on Le MEMO du Web Développeur.

Problème de slash sur passage de paramètres dans formulaire

t@ra — Tue, 16 Oct 2012 16:35:57 +0000

Dans un formulaire HTML, je saisis dans une balise une valeur contenant une apostrophe, disons :

A la récupération du paramètre « etat » j’obtiens : $_GET[« etat »]= « l’ouragan est passé », avec un backslash agaçant. Que faire ?

Soit j’utilise la fonction stripSlashes($_GET[« etat »]) qui supprime les backslashes
Soit je modifie le paramètre magic_quotes_gpc de mon fichier php.ini de WAMP. Imposer la valeur de magic_quotes_gpc à « off », empêchera l’ajout de backslashes au passage de paramètres par formulaire mais aussi dans les cookies. Sous l’hébergeur PHPNux, il est possible de modifier ce paramètre directement dans votre espace client, sous 1&1, il faut créer un fichier php.ini à l’aide d’un bloc note contenant :

magic_quotes_gpc = off

et de le placer dans les répertoires de votre site nécessitant cette fonctionnalité.

Chez OVH il faut rajouter la ligne suivante dans le fichier .htacces

SetEnv MAGIC_QUOTES 0

Les magic_quotes visent à protéger les formulaires des injections SQL, mais il est fortement recommendé d’utiliser plutôt la fonction mysql_real_escape_string() plus complète qui neutralise, en les échappant tous les caractères susceptibles d’être utilisés lors d’une injection SQL :

les guillemets simples ‘ ;
les guillemets doubles » :
les slashes / ;
les caractères NULL ;
les caractères suivants : n, r, x00 et x1a.

Avertissement :
mysql_real_escape_string() est dépréciée depuis PHP 5.5.0

source : http://www.phpfacile.com/creer_un_site_web_en_php/formulaire_1.php5

The post Problème de slash sur passage de paramètres dans formulaire first appeared on Le MEMO du Web Développeur.

padding et margin en hauteur ne fonctionnement pas sur éléments inline

t@ra — Wed, 14 Dec 2011 17:27:21 +0000

Tout est dans le titre, sauf erreur de ma part, ne comptez pas sur les margin-top ou padding-bottom pour positionner verticalement vos balises inline comme les span.

Utilisez plutôt la propriété CSS text-height.

The post padding et margin en hauteur ne fonctionnement pas sur éléments inline first appeared on Le MEMO du Web Développeur.

Comment ne pas interpréter une commande HTML à l’affichage

t@ra — Tue, 13 Dec 2011 23:00:00 +0000

htmlspecialchars permet de transformer les chevrons des balises HTML "<" en "<" et ">" en ">"

Exemple:

Grâce à la fonction htmlspecialchars le code HTML compris dans la chaîne à afficher ne sera pas interprété par le navigateur au moment de l'affichage, c'est le code de l'image qui apparaîtra en lieu de l'image.

Cette fonction s'avère très utile pour sécuriser les données de sortie des formulaires dans lesquels des utilisateurs taquins pourraient saisir du code HTML ou javascript.

On peut aussi utiliser la fonction strip_tags qui elle vire carrément les balises HTML.

The post Comment ne pas interpréter une commande HTML à l’affichage first appeared on Le MEMO du Web Développeur.

Revenir à la page précédente du navigateur

t@ra — Mon, 12 Dec 2011 17:28:36 +0000

Il existe plusieurs manières de faire un lien de retour à la page précédemment visitéepar l’internaute.

Revenir à la page précédente en utilisant la méthode history.go de Javascript :

Retour

Revenir à la page précédente en utilisant la super globale PHP $_SERVER :

Retour

Revenir à la page précédente en utilisant la fonction header() de PHP :

Avertissement :

Dans ce dernier cas, gardez toujours en tête qu’aucun texte, espace, affichage PHP ne doit précéder l’appel à la fonction header() !!

The post Revenir à la page précédente du navigateur first appeared on Le MEMO du Web Développeur.

Limiter le nombre de caractères saisis dans un textarea

t@ra — Mon, 12 Dec 2011 16:51:49 +0000

Dans un input de type « text« , il est facile de limiter le nombre de caractères maximum que peut saisir l’utilisateur grâce à l’attribut « maxlength«

Exemple :

Il n’est par contre bizarrement pas possible d’utiliser cet attribut dans un input de type « textearea« , il convient alors de faire appel à une bidouille javascript si l’on souhaite empêcher l’utilisateur d’écrire tout un roman. Une fonction javascript sue l’événement « keyup » du textarea va vérifier le nombre de caractères saisis et tronquer la chaîne lorsque le nombre max (passé en paramètre de la fonction) est atteint :

code javascript :

Fonction Javascript pour limiter la saisie de caractères dans un textarea

code HTML :

                
  écrivez votre texte en 150 caractères maximum

The post Limiter le nombre de caractères saisis dans un textarea first appeared on Le MEMO du Web Développeur.

Trouver le chemin canonique absolu d’un répertoire

t@ra — Sat, 10 Dec 2011 17:30:38 +0000

La fonction PHP realpath() renvoit le chemin canonique absolu du fichier passé en paramètre de la fonction.
Copiez dans un fichier monfichier.php le code suivant :

Cela vous indiquera le chemin absolu du répertoire dans lequel se situe votre fichier monfichier.php.

Le résultat ne contient ni lien symbolique ni /../

The post Trouver le chemin canonique absolu d’un répertoire first appeared on Le MEMO du Web Développeur.

Mettre un lien vers la page d’accueil son site

t@ra — Fri, 09 Dec 2011 17:32:10 +0000

Pour mettre un lien dirigé vers la racine de son site (ou page d’accueil) soit ici http://www.monsite.com, on peut affecter à l’attribut href = »./ » un lien relatif vers la racine du site

Ce lien redirige vers la racine du site

Ou, solution recommandée pour le référencement, un lien absolu :


  Ce lien redirige aussi vers la racine du site

The post Mettre un lien vers la page d’accueil son site first appeared on Le MEMO du Web Développeur.