Accueil - HTML Tout afficher

---

L'attribut "role" en HTML est utilisé pour améliorer l'accessibilité des pages web en fournissant des informations supplémentaires aux technologies d'assistance, comme les lecteurs d'écran. Il permet de spécifier le type de contenu ou la fonction d'un élément HTML, ce qui aide les utilisateurs ayant des besoins spécifiques à mieux comprendre et naviguer sur une page web.

Principales Fonctions de l'Attribut "Role"

1. Définir des Rôles Spécifiques pour les Éléments : L'attribut "role" permet d'attribuer un rôle spécifique à un élément HTML, clarifiant ainsi son but ou son comportement dans l'interface utilisateur. Par exemple, <div role="button"> indique aux technologies d'assistance que cet élément div fonctionne comme un bouton, même s'il n'utilise pas l'élément <button> standard.

2. Améliorer l'Accessibilité : En fournissant des informations explicites sur le rôle des éléments, les utilisateurs qui se fient aux technologies d'assistance peuvent mieux comprendre la structure et la fonction de la page. Cela permet une navigation plus intuitive et une interaction plus efficace avec le contenu web.

3. Faciliter la Navigation par Clavier : Certains rôles, comme button, link, ou menu, aident les utilisateurs qui naviguent au clavier en définissant des comportements interactifs attendus. Cela améliore l'expérience utilisateur pour ceux qui ne peuvent pas utiliser une souris.

4. Supporter les Standards d'Accessibilité ARIA : L'attribut "role" est une partie intégrante des spécifications ARIA (Accessible Rich Internet Applications), un ensemble de standards qui visent à rendre les applications web plus accessibles. En utilisant des rôles ARIA, les développeurs peuvent rendre des applications dynamiques et interactives plus compréhensibles pour les technologies d'assistance.

Lire ...

---

Pour faire un retour à la ligne dans une tooltip HTML, il suffit d'insérer le caractère "&#13", entre les mots.

Exemple :

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

 

Lire ...

---

A l'intérieur d'une iframe, si l'on utilise la fonction Javascript suivante :

window.location='https://fr.wikipedia.org/';

La nouvelle page s'affichera à l'intérieur de la balise "iframe". Si l'on souhaite que cette page s'affiche complètement dans le navigateur, il suffira d'utiliser la fonction suivante :

parent.location='https://fr.wikipedia.org/';

 

Lire ...

---

Voici une petite explication pour mieux comprendre les objets "node", "element" en HTML.

Un node est le nom générique de tout type d'objet présent dans le DOM. Un node peut être l'un des éléments DOM intégrés tels que document ou document.body, ou il peut s'agir d'une balise HTML spécifiée dans le code, telle que <input> ou <p>.

Un Element est un type spécifique de node. De plus, il existe de nombreux autres types de node.

Le DOM se compose d'une hiérarchie de node où chaque nœud peut avoir un parent, une liste de nœuds enfants et une instruction nextSibling et previousSibling. Cette structure forme une hiérarchie arborescente. Le nœud de document aurait sa liste de nœuds enfants (le nœud principal et le nœud du corps).

Ainsi la HTMLElement hérite de Element. De là, émane l'ensemble des éléments HTML que nous connaissons tous (comme HTMLInputElement pour la balise input, par exemple).

Pour plus d'informations

Lire ...

---

Font Awesome est un fantastique outil utilisé par plusieurs centaines de milliers de sites Internet à travers le monde. Il fournit une multitude d'icônes facilement personnalisables et adaptables à n'importe quelles applications. Seulement, cette librairie a un manquement : comment peut-on faire des icônes avec des lettres de l'alphabet ? Heureusement, il existe une technique simple pour parvenir à cet objectif.

HTML :

<span class="fa fa-a"></span><br/>
<span class="fa fa-b"></span><br/>
<span class="fa fa-downcase-a"></span><br/>

CSS :

body {
    font-size: 14px;
}

.fa-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'A';
}

.fa-downcase-a:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'a';
}

.fa-b:before {
    font-family: Arial; /* your font family here! */
    font-weight: bold;
    content: 'B';
}

 

Lire ...

---

Voici une petite expression régulière qui vous permettra de supprimer les commentaires HTML :

/<!--(.*)-->/Uis

Exemple d'utilisation :

$html = "<p>Hello World!</p><!-- début d'un div--><div>Justin II (latin : Flavius Iustinus Iunior Augustus, grec : Φλάβιος Ἰουστίνος ὁ νεότερος) règne sur l’Empire byzantin du 15 novembre 565 à sa mort le 5 octobre 578 ; il est le neveu et successeur de Justinien Ier.</div><!-- find du div -->";
	
$html = preg_replace('/<!--(.*)-->/Uis', '', $html);

echo "<p>Hello World!</p><div>Justin II (latin : Flavius Iustinus Iunior Augustus, grec : Φλάβιος Ἰουστίνος ὁ νεότερος) règne sur l’Empire byzantin du 15 novembre 565 à sa mort le 5 octobre 578 ; il est le neveu et successeur de Justinien Ier.</div>";

 

Lire ...

---

Voici une fonction simple afin de supprimer des balises HTML en PHP :

function removeTag($html, $tag) {
    return preg_replace('#</?'.$tag.'[^>]*>#is', '', $html);
}

Exemple d'utilisation :

$html = "<p><span class='bold'>Texte en gras</span></p>";

echo removeTag($html, $tag);
// Affichera '<p>Texte en gras</p>'

 

Lire ...

---

L’attribut « autocomplete » s’applique à la fois à des balises « input » et « form ». Il permet d’éviter que le navigateur de l’utilisateur ne pré remplisse des champs qu’il a lui-même sauvegarder (exemple des noms d’utilisateur et autres mots de passe enregistrés).

Lorsque « autocomplete » est à « on » alors le navigateur complète la valeur du champ basé sur ce que l’utilisateur a précédemment renseigné.

Exemple :

<form action="demo_form.asp" method="get" autocomplete="on">
  First name: <input type="text" name="fname" />
  <br />
  E-mail: <input type="email" name="email" />
  <br />
  <input type="submit" />
</form>

 

Lire ...

---

Par défaut, en HTML, l'élément Textarea peut être rédimensionné à l'infini. Heureusement, en CSS, il est possible d'empêcher cela de la manière suivante :

<textarea class="no-resize" ></textarea>

CSS :

.no-resize { resize: none; }

Permettre uniquement le redimensionnement horizontal :

.horizontal {
    resize: horizontal;
}

Permettre uniquement le redimensionnement vertical :

.vertical {
    resize: vertical;
}

 

Lire ...

---

En HTML, tout le monde connaît sait comment ouvrir un lien dans un nouvel onglet après avoir cliqué dessus. Mais, savez-vous qu'il est possible de faire exactement la même avec un formulaire ?

Prenons le formulaire suivante :

<form action="go.php" method="post" target="_blank">
	<input name="test" value="" type="text" />
	<input value="Envoyer" type="submit" />
</form>

A l'intérieur de la balise, nous avons rajouté l'attribut "target" dont nous avons fixé la valeur à "_blank". En cliquant sur le bouton "Envoyer", un nouvel onglet va ouvrir la page "go.php" à partir de laquelle nous pourrons récupérer les données postées :

echo $_POST['test'];

 

Lire ...

---

Le code qui suit parse du code HTML passé en paramètre et remplace l'URL de l'attribut "src" par son équivalent en Base 64.

$dom = new DomDocument();

$dom->loadHTMLFile("test.html");

$images = $dom->getElementsByTagName("img");

foreach($images as $image)
{
	$src = $image->getAttribute("src");
	$img64 = base64_encode(file_get_contents($src));
	$infos = pathinfo($src);
	$image->setAttribute('src', 'data:image/'.$infos['extension'].';base64,'.$img64);
}

$dom->removeChild($dom->doctype);
$dom->replaceChild($dom->firstChild->firstChild->firstChild, $dom->firstChild);

echo $dom->saveHTML();

 

Lire ...