Contenu embarqué HTML5

L'intégration du contenu dans le document HTML peut rendre votre page plus riche.

L'utilisation d'éléments IMG peut être intégré dans les images dans des documents HTML.

1) SRC: montrez l'URL de l'image;

2) Alt: texte de l'équipement;

3) Hauteur: la hauteur de l'image;

4) Largeur: la largeur de l'image;

5) USEMAP: Définissez l'image comme un mappage d'image client;

6) ISMAP: L'image est définie comme le mappage d'image du serveur.

Ce qui suit introduit spécifiquement le fonctionnement de l'image.

Une image peut être intégrée aux propriétés SRC et ALT.

 <Img src = triathlon.png <img src = triathlon.png </a>

De cette façon, après avoir cliqué sur l'image, le navigateur sera navigué vers l'URL spécifié par la propriété HREF de l'élément parent A. L'attribut ismap à l'élément IMG crée un diagramme de réponse de partition de serveur:

 <A href = autrepage.html> <img src = triathlon.png </a>

De cette façon, la position des clics de l'image sera attachée à l'URL.

http: //bjpowernode/listings/otherpage.html?

Le diagramme de réponse de la partition du serveur signifie généralement que le serveur répond aux différents clics de l'utilisateur sur l'image sur l'image.

Le diagramme de réponse de partition du client prend en charge l'utilisateur pour naviguer dans le navigateur vers une URL différente en cliquant sur différentes zones d'un certain diagramme. Éléments de la zone.

Le rôle des éléments de la carte est de définir une cartographie d'image du client. Les éléments de carte contiennent généralement des attributs:

1) ID: il doit définir le logo unique pour l'étiquette de la carte;

2) Nom: Facultatif, nom.

L'élément de zone définit la zone de la cartographie de l'image, qui est toujours imbriquée dans l'élément de carte. Les attributs de l'élément de zone sont divisés en deux catégories.

1) HREF: L'URL que le navigateur doit être chargé après que cette zone soit cliquée;

2) ALT: Contenu de substitution, attributs correspondants à l'élément IMG;

3) Target: afficher le contexte de navigation de l'URL, les attributs correspondants de l'élément de base;

4) Rel: Décrire la relation entre le document actuel et le document cible, et les attributs correspondants de l'élément de liaison;

5) Média: Attributs moyens et correspondants de l'élément de style;

6) Hreflang: la langue du document cible;

7) Type: Type MIME du document cible.

La deuxième catégorie contient des attributs d'attributs: Shape and Coords, qui sont utilisés pour indiquer chaque zone d'image que les utilisateurs peuvent cliquer. La valeur de l'attribut de forme est la suivante:

1) RECT: Il représente une zone rectangulaire. L'attribut de coordonnées correspondant doit être composé de quatre séparations entières (a, b, c, d) séparées par une virgule: A représente le côté gauche du bord gauche et le rectangle de l'image; du rectangle; d représente le côté inférieur et le côté inférieur du rectangle de l'image;

2) Cercle: il représente une zone circulaire. Les attributs de coords doivent être composés de trois entiers séparés par la virgule (A, B, C): A représente la distance entre le bord gauche de l'image et le cœur rond; B représente la distance entre le bord de l'image et le cœur rond;

3) Poly: représente un polygone. Les attributs de coords doivent contenir au moins six entiers séparés par des virgules, chaque paire de nombres représente un apex du polygone;

4) Par défaut: la zone par défaut, qui couvre l'image entière. Il n'est pas nécessaire de fournir une valeur de coords.

Ce qui suit est un exemple:

 <p> <img src = triathlon.png usemap = # mymap <map name = mymap> <reh href = swimpage.html forme = rect coords = 3,5,68,62 ml forme = coords rect = 70,5,130,62 <rea href = autrepage.html forme = par défaut </aph

Le script ci-dessus définit que si l'utilisateur clique sur la partie de natation de l'image, le navigateur est navigué vers le swimpage.html.

L'élément IFRAME peut être intégré dans un autre document dans le document HTML existant. L'attribut pris en charge par cet élément est le suivant:

1) SRC: URL du document affiché dans iframe;

2) SRCDOC: Spécifie le contenu HTML de la page affichée dans les pages affichées dans iframe;

3) Nom: Le nom d'Iframe peut être utilisé dans la cible du contexte et d'autres éléments (tels qu'un, un formulaire, un bouton, une entrée et une base).

4) Largeur: Définissez la largeur d'Iframe;

5) Hauteur: standard la hauteur de iframe;

6) Sandbox: la limite supplémentaire du contenu dans iframe, la valeur du support comprend:

----: appliquer toutes les restrictions ci-dessous;

--- Perte-jeu-orgin: Autoriser le contenu IFRAME est considéré comme la même source que le reste du document;

--- Perte-top-Navigation: Autorisez le lien vers le contexte de navigation de niveau supérieur, afin que vous puissiez remplacer le document entier actuel par un autre document, ou créer une nouvelle étiquette et une nouvelle fenêtre; - Allow Forms: Activer les formulaires.

7) Seamless: a demandé au navigateur d'afficher le contenu d'Iframe comme un composant global du document HTML principal; L'utilisation de cet attribut est la suivante (la plupart des navigateurs de cet attribut ne sont pas encore pris en charge):

 <iframe src = demo_iframe.htm sans couture> </ iframe>

Vous trouverez ci-dessous un exemple complet d'Iframe:

 <naider> <h1> choses que j'aime </h1> <av> <ul> <li> <a href = fruits.html Target = MyFrame> fruits ilike </a> </li> <li> <a href = Activités.html Target = MyFrame> Activités Ilike </a> </li> </ul> </AV> </-header> <iframe name = myFrame width = 300 height = 100 />

Les éléments d'objet et les éléments d'intégration sont utilisés pour élargir la capacité du navigateur et ajouter la prise en charge de la fiche.

L'élément intégré définit le contenu intégré, les attributs de support sont les suivants:

1) Hauteur: Réglez la hauteur du contenu intégré;

2) SRC: L'URL du contenu;

3) Type: Définissez le type de contenu intégré MIME pour que le navigateur sache comment y faire face;

4) Largeur: définissez la largeur du contenu intégré.

Tous les autres attributs que vous appliquez seront considérés comme un paramètre d'une fiche ou d'un contenu. Regardez l'exemple ci-dessous:

 <Embed src = http://www.youtube.com/v/qza60hca9s?

L'attribut ALLYFullScreen est utilisé ci-dessus pour définir l'opportunité d'activer la fonction de visualisation pleine écran.

Les éléments d'objet sont également utilisés pour définir un objet intégré, tel que: images, audio, vidéo, pdf, flash, etc. Les éléments d'objet peuvent contenir du contenu de rechange, qui est affiché lorsque le contenu spécifié n'est pas disponible.

 <objet width = 560 height = 349 data = http: // titan / myiimaginaryfile> <param name = allowfulScreen value = true /> </b> nous ne pouvons pas afficher le contenu </ject>

Si les ressources référencées par l'attribut de données n'existent pas, le contenu de l'élément objet est affiché.

L'élément de progression représente la barre de progression. Les attributs de support comprennent:

1) Max: indique la valeur maximale de la tâche;

2) Valeur: définir les progrès actuels, entre les valeurs des attributs 0 et max;

3) Forme: une ou plusieurs formes auxquelles appartiennent.

Lorsque l'attribut MAX est omis, la plage est de 0 à 1 et l'attribut de valeur utilise des nombres de point float pour représenter les progrès, tels que 0,3 indique 30%.

 <Progress ID = MyProgress Value = 10 Max = 100> </ Progress> <p> <Button Type = Button Value = 30> 30% </ Button> <Button Type = Button = 60> 60% </ Butt On> < Type de bouton = Button Valeur = 90> 90% </frutch> </p> <cript> var boutons = document.getElementsByTagName ('Button'); .length; i ++) {Buttons [i] .Onclick = fonction (e) {Progress.value = e.target.value;};} </ script>

L'exemple donné ci-dessus montre les différentes valeurs pour afficher un bouton différent pour afficher différentes valeurs.

L'élément de compteur montre une certaine valeur dans une certaine plage. Les attributs de support comprennent:

1) MIN et MAX: Spécifiez la plage de la portée uniquement, vous pouvez utiliser des points flottants;

2) Faible: spécifiez la gamme de valeurs faibles, la propriété en vertu de celle-ci est considérée comme trop faible;

3) élevé: spécifiez la plage de valeur élevée, toutes les valeurs au-dessus sont considérées comme trop élevées;

4) Optimum: spécifiez la meilleure valeur;

5) Valeur: doit, la valeur actuelle de la mesure;

6) Forme: une ou plusieurs formes auxquelles appartiennent.

 <Mètre ID = MyMeter Value = 90 min = 10 max = 100 Low = 40 High = 80Optimum = 60> </eter> <p> <Button Type = 30> 30% </ Button> utton Value = 60> 60% < / Button> <Button Type = Button Value = 90> 90% </ Button> </p> <script> var Buttons = Document.getElementsByTagName); = 0; i <XTTON

Lorsque la valeur de l'élément de compteur est trop faible et trop élevée, et la meilleure valeur, le navigateur les présentera de différentes manières