Introduction à MathML - Le langage de balisage pour les mathématiques

MathML est un langage de balisage qui peut être utilisé pour afficher des notations mathématiques . Vous pouvez utiliser des balises MathML directement à partir de HTML5. Il est utile lorsque vous souhaitez afficher plus que de simples notations de Maths dans vos pages Web, et qu'il est assez facile à utiliser en raison de sa simplicité et de sa ressemblance avec le HTML .

MathML a deux types de balisage; présentation (pour la mise en page) et contenu (pour le sens). Étant donné que seul le balisage de présentation est pris en charge par les navigateurs, il s'agit du seul type de balisage pouvant être utilisé avec HTML. Vous pouvez également utiliser CSS et JavaScript comme vous le feriez sur HTML.

Jetons un coup d'oeil à MathML.

Comprendre MathML

Il existe une liste des éléments MathML présents sur le site Web de Mozilla Developer. J'ai également énuméré les éléments utilisés dans les exemples à la fin de ce poste pour une référence rapide.

L'élément de niveau supérieur dans MathML est le $élément,\; Lorsque\; vous\; écrivez\; du\; code\; MathML\; dans\; le\; code\; HTML,\; n\text{'}oubliez\; pas\; de\; les\; placer\; dans\; le$ Mots\; clés.$$

, , , sont les éléments de base représentant respectivement un identifiant, un opérateur, un numéro et une chaîne. Notez que tous les éléments MathML ci-dessous commencent par la lettre 'm'.

Voici quelques exemples simples.

Comment afficher exposant et indice

le l'élément est pour afficher l'exposant. Il y a un pour les indices.

$n^7$

Comment afficher les fractions

$\frac{7}{26}$

Comment afficher les entiers racines

Voici un autre exemple simple d'affichage des entiers racines.

$\sqrt[5]{\mathrm{<mo>\; -\; </mo>\; 678}}$

Pour seulement la racine carrée, il y a .

Passons maintenant à des notations plus complexes, la matrice.

Comment afficher une matrice

Pour construire une matrice, nous aurons besoin d'une structure de table pour les lignes et les colonnes. Pour cela, nous utilisons , et .

En dehors de cela, nous allons utiliser le étiquettes pour ajouter les opérateurs [ et ] autour de la matrice, et enfin les mettre tous à l'intérieur du element, un élément qui regroupe des expressions.

Voici le résultat final:

$\left[\begin{array}{ccc}0& 4& \mathrm{dix}\\ 5& 2& X\\ 9& 11& 1\end{array}\right]$

En outre, jetons un peu de CSS pour faire ressortir ce 'X' dans la matrice.

 mi {couleur: rouge; } 

Comment afficher les équations intégrales

Voici un exemple d'un type basique d'équation intégrale. le est utilisé pour ajouter les limites à l'intégrale.

Comme HTML, MathML a aussi des caractères et des entités, dont l'un est utilisé dans l'exemple pour montrer le symbole phi grec. Voici comment afficher l'équation intégrale ci-dessus:

$F\left(X\right)=\&Intégral;_{\mathrm{une}}^{b}K(X,t)\phi \left(t\right)\mathrm{ré}t$

Pour une liste des entités de caractères MathML, cliquez ici pour les trouver sur le site Web du W3C.

Attributs MathML

En dehors des attributs qui sont identiques à ceux du HTML (comme id ), MathML possède également un ensemble de leurs propres attributs. Le site du développeur Mozilla possède une collection d'attributs MathML pour votre référence. Pour les solutions de secours, vous pouvez utiliser la bibliothèque JavaScript MathJax. Si vous avez besoin de plus d'outils, consultez ce lien ici.

Je prends mon congé avec ce codepen contenant tous les exemples ci-dessus, pour votre référence facile.

Liste de référence des éléments MathML

Éléments	Définition
$$	Elément MathML de niveau supérieur
	Affiche les identifiants (variables, constantes, noms de fonctions)
	Affiche le littéral numérique
	Affiche l'opérateur
	Affiche le littéral de chaîne
	Associe un exposant à une base
	Attache un indice à une base
	Utilisé pour afficher les fractions
	Affiche les radicaux avec indices
	Affiche la racine carrée
	Affiche un tableau ou une matrice
	Rangée de
	Colonne dans
	Sous-expressions de groupes
	Utilisé pour ajouter un exposant, un indice, un préscripteur et une préscription

50 Freebies Dribbble pour les concepteurs Web

Vous cherchez des conceptions d'interface utilisateur pour l'inspiration ou des PSD UI gratuits pour votre prochain projet de design? Nous avons plongé dans Dribbble.com, et trié sur le volet certains des meilleurs PSDs (et gratuits) pour vous qui ont été créés par divers designers .Consultez la liste complète avant de faire votre choix. Maque

(Conseils techniques et de conception)

La montée de la pêche à la traîne et le déclin de l'étiquette en ligne

Que nous l'admettions ou non, le comportement humain public est influencé, voire dicté par certaines normes que la société polie et civilisée juge acceptables. Nous ne nous déchaînons pas sur des propos innocents de la part d'inconnus, nous ne nous appelons pas des noms désobligeants ou des obscénités bruyantes, et nous ne nous embattons pas forcément pour offrir la moindre critique sur la dernière création ou pensée de la cible. .Malheureuse

(Conseils techniques et de conception)