Embarquer des contenus sur le site du Rize+

Youtube, Vimeo, etc...

On peut intégrer sur le site du Rize+ des contenus hébergés par d'autres sites. Cette opération peut être plus ou moins technique suivant les cas

Pour faciliter cette opération, Youtube, Vimeo, Dailymotion, Soundcloud, Gallica (BnF), et même Remonter le temps (IGN) ou Géoportail (IGN)  proposent un code par défaut que l'on peut copier et coller dans son site. Ce code est en général proposé par ces plateformes dans le menu "Partager > intégrer". On peut parfois customiser certaines options pour que le code soit généré tel qu'on le voudrait.

Le plus difficile n'est donc pas le copier-coller depuis la plateforme d'origine vers sa propre page web, mais la customisation de ce code pour qu'il ait l'apparence que l'on souhaite sur le Rize+. Il faut donc apprendre à la faire par étape, pour se familiariser avec l'opération. L'important est d'être rigoureux sur la syntaxe et la typographie du code, car c'est la principale source d'erreur. Mais le principe du code HTML est très simple, il n'est donc pas difficile de se familiariser avec sa syntaxe, pour éviter les erreurs.

Quelques exemples d'intégrations sur le site du Rize +

Youtube

Dailymotion

Vimeo

Soundcloud

Gallica

Plateformes d'opendata (comme https://data.culture.gouv.fr/)

 

Le B.A.BA du html

Son principe est très simple : le code indique par des balises avant et après le passage concerné si le texte est un titre, un paragraphe, une image, un tableau ou autre chose. Parmi les titres, il y a, comme sur les logiciels de traitement de texte, des niveaux de titres.

Donc un titre (header en anglais) va s'écrire :

Ceci est un titre de niveau 1

Ceci est un titre de niveau 2

Ceci est un titre de niveau 3

Un paragraphe ca s'écrire :

Ceci est un paragraphe court, mais cependant intéressant. N'est-ce pas ?

Ainsi, quand, dans l'interface html du Rize+, on utilise le menu déroulant de gauche, on demande en fait au logiciel d'écrire le code sur le principe ci-dessus. Cette opération permet ensuite au logiciel d'appliquer le "style" défini pour l'ensemble des titres de niveau 1 du site web ou d'une partie de celui-ci. Le style correspond à une police de caractère, une taille, une couleur, etc.

html: quelques balises comprenant des liens hypertextes

Cela se complique un peu avec différentes balises que l'on est amenés à utiliser très fréquemment pour les liens, les images et les contenus embarqués.

Biensûr, comme ci-dessus, on utilise des balises :

 

Mais, dans ces trois cas, on doit aussi indiquer une adresse internet pour que cela marche :

  • adresse du lien lui-même pour un lien dans un texte ;
  • adresse du lien de l'image ;
  • adresse du contenu embarqué.

Il faut alors un "attribut", c'est à dire un code qui apporte des précisions sur le contenu. Dans tous les cas, les attributs sont écrits de la même manière : attribut="ceci est un attribut".

Nous ne détailleront pas le code pour les liens hypertextes et les images car Arkothèque propose des menus qui permettent de ne pas avoir à coder.

Pour les liens, il faut indiquer l'adresse et customiser différents renseignements concernant ce lien. C'est ce que permet le menu accessible par "selectionner le texte de mon lien > clic-droit > insérer/éditer un lien".

De la même façon, l'interface qui insère des images écrit automatiquement le code lorsque on insère une image en faisant "clic-droit >insérer/éditer une image".

Pour un bon affichage en plein page sur différents types d'écran, il faut indiquer 100% pour la largeur de l'image et ne pas indiquer de hauteur.

Les différents menus décrits ci-dessus écrivent donc le code html à la place de l'auteur de la page web.

Mais on peut toujours consulter le code produit en cliquant sur l'icône "html". A quoi cela peut-il bien servir ?

Contrairement à d'autres logiciels qui gèrent des sites web (CMS), comme Wordpress par exemple, Arkothèque ne propose pas de fonctionnalité pour insérer du contenu embarqué sur la page. Par contre, on peut le faire en faisant un copier-coller d'un code spécifique fourni par Youtube, Vimeo, Soundlcloud, Daily Motion ou Gallica dans le code html de la page. Il suffit de s'y repérer et de trouver le bon endroit où faire le collage.

A quoi ressemble ce code contenant des données embarquées ?

La balise sert à indiquer un contenu embarqué. On peut spécifier dans le code certaines caractéristiques de ce contenu comme :

  • le titre du contenu embarqué. Exemple : title="ceci est un titre"
  • la hauteur en pixels. Exemple : height="200"
  • la largeur en pixels . Exemple : width="650"
  • le lien vers le contenu embarqué. Exemple : src="https://www.monlien.org".

On peut éventuellement, si c'est strictement nécessaire, compléter par un attribut concernant le style du contenu de cette balise.

Ces indications s'écrivent à l'intérieur de la partie de la balise située en tête. Exemple :

 

 

A noter: comme le html utilise une série particulière de caractères, il remplace les caractère français accentués par une série de lettres qui donnent l'impression qu'il y a des erreurs dans le texte. Mais ce n'est pas le cas.

Informations internes > Sommaire


Astuces Rize + > Sommaire

Partager la page