Nouveaux éléments HTML5 (2 sur 4)

Il y a quelques jours, nous avons publié une introduction à HTML5 et abordé brièvement le contenu que nous allons décrire dans cette série. Le billet d'aujourd'hui, qui est le deuxième d'une série de quatre, examinera comment utiliser six des nouveaux éléments en HTML5: toile, article, audio, vidéo, indicateur et marque.

N'oubliez pas que HTML5 n'est pas vraiment prêt pour une utilisation généralisée. Ne changez donc rien sur votre site pour l'instant. Soyez assurés que HTML5 sera bientôt disponible. Par conséquent, ces concepts pourraient s'avérer utiles dans un proche avenir.

L'élément de toile

L'élément est un nouveau conteneur pour les graphiques. Notez que le canevas est simplement une zone dans laquelle des graphiques peuvent être placés. L'élément ne doit contenir que deux attributs: largeur et hauteur. Voici un exemple:

Le dessin réel pour cet exemple est fait en JavaScript. La clé pour implémenter les graphiques dans votre script est de référencer un contexte via la méthode. getContext. Pour l'instant, le seul contexte que vous pouvez appeler est "2d". Considérez le contexte 2d comme votre plan de dessin réel (défini par la taille de la toile HTML) commençant aux coordonnées 0,0 (tout en haut à gauche de l'écran). Pour dessiner un élément, vous devez d’abord décider à quelles coordonnées l’élément commencera. Par exemple, si vous souhaitez dessiner un élément situé à dix pixels de la gauche et du haut, vos coordonnées sont (10,10).

Il y a plusieurs façons d'utiliser le contexte 2d pour créer des graphiques. Tout, des simples rectangles aux courbes et aux gradients, est pris en charge. Pour nos besoins, nous allons garder les choses simples pour vous aider à démarrer. Voici le JavaScript, mettant en œuvre les principes énoncés ci-dessus:

function draw () {var canvas = document.getElementById ("graphicsCanvas"); if (canvas.getContext) {var context = canvas.getContext ("2d"); context.fillStyle = "rgb (50,50,50)"; context.fillRect (20, 20, 150, 150); context.strokeRect (20, 20, 300, 300); }}

Si vous utilisez un navigateur pris en charge (Safari, Firefox ou Opera), vous devriez voir le résultat suivant lorsque vous combinez le code HTML et le code JavaScript que nous venons de regarder.

Encore une fois, avant de dessiner, pensez à implémenter le contexte 2d, sinon vous ne verrez aucun graphique! Juste au cas où vous vous demanderiez ce que ça ferait? FillRect? ordures est sur, voici une explication rapide de la syntaxe pour quelques-unes des méthodes de dessin.

Dessin Rectangles

Tout d’abord, sachez que lorsque vous voyez quatre nombres dans le format (0,0,0,0), cela représente (distance par la gauche, distance par le haut, largeur, hauteur). Voyons maintenant quelques exemples de syntaxe spécifiques:
fillStyle =? rgb (50, 50, 50); Détermine la couleur du remplissage
fillRect (20, 20, 150, 150); Crée un simple rectangle rempli
strokeRect (20, 20, 150, 150); Crée un rectangle
clearRect (20, 20, 150, 150); Crée une zone transparente (un trou)

Dessiner des formes

beginPath (); Commence un chemin
closePath (); Ferme un chemin
moveTo (20, 20); Lève le stylo et commence à un nouvel endroit
remplir (); Remplit la forme dessinée
accident vasculaire cérébral (20, 20); Contourne la forme dessinée

Beaucoup plus!

Pour plus d'informations sur la manière de dessiner avec JavaScript et d'utiliser l'élément canvas, consultez le didacticiel de Mozilla.
En outre, voici une feuille de triche pratique sur toile de Jacob Seidelin.

L'élément Article

L'élément article est simplement un moyen de faire référence à un article de blog, un article d'actualité, etc. au sein de votre page. Voici la syntaxe:

<p> Titre de l'article ici Article </p>

Comme vous pouvez l'imaginer, cela rendra très facile la ciblage et le style des articles dans votre CSS sans définir de classe.

Les éléments audio et vidéo

À l'instar de l'élément article, il s'agit simplement de conteneurs qui contiennent du contenu. Encore une fois, vous pouvez voir l'avantage immédiatement lorsque vous commencez à les styler avec CSS sans avoir besoin de classes personnalisées. Voici la syntaxe simple pour chacun (tout texte placé entre crochets n'apparaît que dans des navigateurs non pris en charge):

Navigateur non pris en charge!> Navigateur non pris en charge!

Attributs Audio

Les éléments audio et vidéo contiennent des attributs importants que vous devez connaître. Voyons d’abord ceux de l’élément audio (source: w3shcools).

<strong>autoplay (vrai ou faux)</strong> Si la valeur est true, le son commence à jouer dès qu'il est prêt <strong>contrôles (true ou false)</strong> Si la valeur est true, certaines commandes, telles qu'un bouton de lecture, sont affichées. <strong>start (valeur numérique)</strong> Définit où dans le flux audio le lecteur doit commencer à jouer. Par défaut, le son commence à jouer. <strong>end (valeur numérique)</strong> Définit où, dans le flux audio, le lecteur doit arrêter de jouer. Par défaut, l'audio est joué jusqu'à la fin. <strong>hauteur (pixels)</strong> Définit la hauteur du lecteur vidéo <strong>largeur (pixels)</strong> Définit la largeur du lecteur vidéo <strong>loopend (valeur numérique)</strong> Définit où, dans le flux audio, la boucle doit s’arrêter avant de sauter au début de la boucle. La valeur par défaut correspond aux valeurs de l'attribut final. <strong>loopstart (valeur numérique)</strong> Définit où la boucle doit commencer dans le flux audio. La valeur par défaut correspond aux valeurs de l'attribut de début <strong>playcount (valeur numérique)</strong> Définit combien de fois le clip audio doit être lu. La valeur par défaut est 1. <strong>affiche (url)</strong> L'URL d'une image à afficher avant que la vidéo soit prête <strong>src (url)</strong> L'URL de l'audio à jouer

Attributs vidéo

L'élément video contient tous les mêmes attributs que l'élément audio ainsi que 3 autres (source: w3shcools).

<strong>hauteur (pixels)</strong> Définit la hauteur du lecteur vidéo <strong>largeur (pixels)</strong> Définit la largeur du lecteur vidéo <strong>affiche (url)</strong> L'URL d'une image à afficher avant que la vidéo soit prête

L'élément mètre

L'élément de compteur peut être utilisé pour contenir des mesures de tout type (pourcentage, score, compteur de jours, etc.). Cette fois, avant de regarder un exemple, passons directement aux attributs (encore une fois, directement à partir de w3shcools).

<strong>Nombre élevé)</strong> Définit à quel point la valeur de la mesure est considérée comme une valeur élevée <strong>faible (nombre)</strong> Définit à quel point la valeur de la mesure est considérée comme une valeur basse <strong>max (nombre)</strong> Définit la valeur maximale. La valeur par défaut est 1 <strong>min (nombre)</strong> Définit la valeur minimale. La valeur par défaut est 0 <strong>optimum (nombre)</strong> Définit quelle valeur de mesure est la meilleure valeur. Si cette valeur est supérieure à la valeur de l'attribut "high", cela signifie que meilleure sera la valeur. Si cette valeur est inférieure à la valeur de l'attribut "low", cela signifie que la valeur la plus basse est la meilleure. <strong>valeur (nombre)</strong> Définit la valeur de la mesure

Les deux attributs particulièrement importants dans cet ensemble sont max et min. L'élément compteur peut seulement être utilisé lorsque la mesure a une valeur maximale et minimale connue. Cela ne signifie pas nécessairement que vous devez définir un max et un min (vous pouvez utiliser la valeur par défaut), mais simplement que vous devez savoir ce qu'ils sont. Voici un exemple:

<p>Vous avez trouvé 25 sur 50 ou 50% des mots cachés!</p>

Notez que pour le premier élément de compteur, la spécification minimale et maximale est nécessaire car la plage est comprise entre 0 et 50. Toutefois, le deuxième compteur utilise la plage par défaut de 1-100 car les pourcentages se situent généralement dans cette plage.

L'élément de marque

Le dernier élément que nous allons examiner est. De conception simple, l'élément mark peut être utilisé pour mettre en évidence une section de texte spécifique afin de la rendre plus visible pour le lecteur. Voici un exemple:

<p>Il est difficile de trouver un bon surligneur.</p>

Nous pouvons maintenant utiliser la balise mark pour cibler facilement la section que nous voulons mettre en évidence dans notre CSS:

marque {couleur de fond: jaune; poids de police: gras; }

Le résultat est un beau texte surligné que vous pouvez repérer en un instant.

Conclusion

En résumé, nous avons couvert six nouveaux éléments de HTML5. Nous avons d'abord examiné le Toile element, qui contient une grande variété d'éléments graphiques que vous pouvez créer à l'aide de nombreuses fonctions JavaScript. Puis nous avons appris le article élément, qui représente une nouvelle façon de faire référence au contenu externe. Ensuite, nous avons expliqué comment utiliser le l'audio et vidéo balises avec leurs divers attributs ainsi que sur la manière de marquer correctement les valeurs comprises dans une plage spécifiée à l'aide du paramètre mètre élément. Enfin, nous avons découvert comment mettre en évidence une partie spécifique du texte en utilisant le marque élément.

J'espère que vous avez appris autant en lisant ceci qu'en écrivant! Utilisez les commentaires ci-dessous pour poser des questions ou partager vos connaissances en HTML5. Le prochain article de cette série est peut-être le plus important, car nous allons examiner quelques nouveaux éléments supplémentaires qui représentent de sérieux changements sémantiques dans la structure des fichiers HTML. Alors revenez bientôt pour voir comment vous allez préparer votre code HTML pour les années à venir!