e sidoc niveau avancé html
TRANSCRIPT
E-sidoc niveau avancé
Publication de contenus
grâce à différents outils :code html, plateformes d’hébergement, code embed
Canopé de la Haute-Marne - Mai 2015
Publier un article « enrichi »
Le module « Ajouter un article » fonctionne comme un traitement de texte basique : • Choix du format = gras, italique, souligné • Taille des caractères (4 tailles de caractères prédéfinies) • Ajout de puces et numéros
Le bouton Word permet de coller un texte mis en forme sous Word.
Insérer un lien
Un lien hypertexte peut renvoyer à
• un site ou une page internet, • une adresse mail (avec le préfixe « mailto: »)
Définir les propriétés d’édition du lien• URL ou adresse du lien• Cible (_blank pour l’ouverture du lien dans une autre fenêtre) • Titre (facultatif)
Publier du contenu en html
E-sidoc offre la possibilité de publier du contenu en html (hypertext mark-up language) Ce langage informatique formalise l’écriture d’un document avec des « balises » de formatage indiquant au navigateur comment afficher le contenu de la page (fond et forme)
Html : les bases
Balises permettant la structuration du texte
Balise ouvrante < ; balise fermante />
<h2>titre formaté</h2>br />Retour à la ligne
Pour obtenir :
Mémoire des génocides et prévention des crimes
contre l'humanité
Mémoire des génocides et prévention des crimes contre l'humanité
<h2><center><strong>Mémoire des génocides br />et prévention des crimes br />contre l'humanité</strong></center></h2>
<h4><center><strong>Mémoire des génocides br />et prévention des crimes contre l'humanité</strong></center></h4>
Caractéristiques de texte : la couleur
Chaque couleur se transcrit en code, une suite de 6 caractères précédés de # :
rouge : #FF0000 vert : #21F400
(http://www.code-couleur.com/)
Pour appliquer une couleur à un texte, utiliser ces balises :
Pour obtenir :Texte en rouge
Texte en vert
<span style="color:#FF0000;">Texte en rouge</span>
<span style="color:#21F400;">Texte en vert</span>
=> Attention à la syntaxe, les signes " : # ; sont indispensables
Caractéristiques de texte : la police
Taille : 12px par défaut dans E-sidoc
Police : Verdana, Arial, Calibri…
Pour obtenir :
Texte en gros
Texte en Verdana
<span style="font-size:18px;">Texte en gros</span>
<FONT face="Verdana">Texte en Verdana</FONT>
Intégration d’éléments
Possibilité d’intégrer de multiples objets dans les textes des articles ou des actualités, en exploitant la possibilité d'accéder au code html :
• des images hébergées en ligne (Joomeo, HostingPic, Flickr, …)• des vidéos en ligne (YouTube, DailyMotion, Vimeo, INA, …),• des présentations (Prezi, SlideShare, etc.)• des documents numériques mis en page (Calameo, Scribd, Issuu, ...)• des objets programmés (« Citer ses sources », lecteur de livres numérisés de la BnF, …)• des plans ou des agendas Google,• des fils Twitter• etc.
Pour tous ces éléments, la procédure est la même : copie du code html, ou du code embed, proposé par les plateformes d’hébergement, et report de ce code dans l’éditeur de code source d’E-sidoc
Attention :Les mentions de hauteur et largeur d’un élément intégré ne doivent pas dépasser :Height = 480Width = 525
Le code embed est un code html appelant un lecteur interactif (Prezi, Pearltrees, etc.)
Intégration d’une image
Exemple d’une image hébergée sur un site en ligne, comme Joomeo http://www.joomeo.com/fr/
Coller dans l’éditeur de code source d’un article dans E-sidoc
Intégration d’une vidéoExemple d’une vidéo hébergée sur YouTube :
La charte de la laïcité à l’école, par Abdennour Bidarhttps://www.youtube.com/watch?v=YnC7IgUq30A
• Copier le code html• Le coller dans l’éditeur de code source d’un article dans E-sidoc
Intégration d’un documentExemple d’un document texte hébergé sur Issuu :
Lien direct
ou
Code embed