IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

HTML, Ajout d'images et de vidéos


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2021
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Autre

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2021
    Messages : 46
    Points : 25
    Points
    25
    Par défaut HTML, Ajout d'images et de vidéos
    Bonjour/Bonsoir,

    Je rencontre un soucis avec mon code HTML/CSS qui a pour but de créer une page contenant une vidéo et des images (deux logos à gauche et à droite du titre) que voici.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <html>
        <head>
            <meta http-equiv="content-type" content ="text/html; charset=utf-8">
        <title> Ma page web statique</title>
        </head>
        <body>
            <div class="main">
                <div class="nav-content">
                    <div class="icone"><img src="???" alt=""> </div>
                </div>
                <a href="mailto:  "> Ajoutez votre mail </a>
            </div>
             <style>
                body{background-color: rgba(14, 233, 22, 0.2);
                     text-align: center;}
                h4{text-align: center;
                    color: rgb(8, 200, 8);
                    font-size: 20px;}
                h5{text-align: center;
                    color: rgb(29, 28, 28);
                    font-size: 15px;}
               </style>
               <h4>LaTeX éditeur Express.</h4>
                <h5>Salut, bienvenue sur ma page web</p>
                   Nous avons tout pour l'édition LaTeX de vos documents.</p>
                   Qu'est-ce-que LaTeX ?</p>
                   Il s'agit d'une collection de macro-commandes destinées à faciliter l'utilisation du «processeur de texte» TeX de Donald Knuth. </p>
                   LaTeX permet de rédiger des documents dont la mise en page est réalisée automatiquement en se conformant du mieux possible à des normes typographiques.</p></h5>       
        </body>
    </html>
    Mais lorsque j'ajoute ne serait-ce qu'une image, çà n'affiche rien.
    J'ai essayé de copier le lien du positionnement de l'image depuis C:\Users\Nom_d'utilisateur\Desktop\Page\img mais rien !

    "Page" est le nom du dossier dans lequel j'ai logé mon code HTML et mon dossier "img" qui contient mes images.

    L'image que je voudrais insérer est juste en dessous.

    Si vous aviez une idée, alors je suis tout ouï

    Merci d'avance. : )
    Images attachées Images attachées  

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    pour avancer par petits pas, la 1re étape est de mettre l'image dans le même répertoire que le fichier html.
    et donc vous placez l'image avec ce code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="latex.png" alt=""/>
    ensuite aidez vous de la console de développement de votre navigateur, il y a plusieurs onglets qui peuvent vous aider à débuguer votre page.

    enfin, quel est le but de cette page ? si elle est destinée à être utilisée sur un serveur, je vous conseille d'installer un serveur http sur votre ordinateur pour pouvoir tester le plus près possible de la configuration finale.

  3. #3
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2021
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Autre

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2021
    Messages : 46
    Points : 25
    Points
    25
    Par défaut
    mettre l'image dans le même répertoire que le fichier html.

    Je crois que c'est ce que j'ai fait en créant un dossier "Page" dans lequel j'ai mis mon fichier HTML et mon dossier image "img"

    ensuite aidez vous de la console de développement de votre navigateur, il y a plusieurs onglets qui peuvent vous aider à débuguer votre page.

    Pourriez-vous expliciter les noms de ces onglets s'il vous plaît.

    enfin, quel est le but de cette page ? si elle est destinée à être utilisée sur un serveur, je vous conseille d'installer un serveur http sur votre ordinateur pour pouvoir tester le plus près possible de la configuration finale.


    J'utilise WampServer pour mes projets, mais là il s'agit d'un TP de classe.

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    les noms des onglets dépendent du navigateur, là je vous donne les noms dans firefox :
    déjà dans l'onglet "console", vous pouvez voir s'il y a des erreurs qui s'affichent. et ensuite dans l'onglet "réseau" vous voyez quel url est appelé par le navigateur.
    et si le code html a par exemple une erreur de format, dans l'onglet "inspecteur" vous verrez comme le navigateur à corrigé le code html.

    et si vous avez déjà un serveur installé, passez par l'url "http://localhost/..." au lieu d'ouvrir le fichier en cliquant dessus dans le répertoire (ce qui va donner un url qui commence par "file://...").

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2021
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Autre

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2021
    Messages : 46
    Points : 25
    Points
    25
    Par défaut
    L'Url de requête est : http://monsite.online/latex.png

    Le mode de requête : GET

    Code d'état : [::1]:80

    Règlement sur les URL de provenance : strict-origin-when-cross-origin

    J'utilise Chrome comme navigateur.

    Le fait que l'URL de requête soit http://monsite.online/latex.png me choc un peu, puisque latex.png est le nom de l'image que je souhaite voir sur ma page, mais toujours rien, j'imaginais que ce serait plutôt http://monsite.online/Page_web_statique.html avec Page_web_statique.html le nom de ma page.

    En fait en allant dans mes VirtualHost dans mon accueil WampServer, dans me projet, j'ai bien le nom de ma page web que je lui avais assigné, et le lien est bien http://monsite.online/Page_web_statique.html mais l'image ne s'affiche pas.. enfin j'aperçois une petite croix juste en haut de Ajoutez votre mail que j'ignore comment ça se retrouve là.

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 221
    Points : 15 512
    Points
    15 512
    Par défaut
    quand vous allez à l'url http://monsite.online/latex.png est ce que vous voyez bien l'image dans le navigateur ?

  7. #7
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2021
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Autre

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2021
    Messages : 46
    Points : 25
    Points
    25
    Par défaut
    Non, rien et puis je viens de remarquer que le nom de l'url http://monsite.online/latex.png a changé

    Puis quand j'inspecte la page dans chrome j'ai file:///C:/Users/Nom_utilisateur/Des..._statique.html comme url.

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Décembre 2021
    Messages
    46
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : Autre

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Décembre 2021
    Messages : 46
    Points : 25
    Points
    25
    Par défaut
    Merci, j'ai pu enfin voir l'image sur ma page.

    On dirait que Wampserver ne permet pas cette action car j'ai dû installer LiveServer afin que ça puisse le faire et je vois apparaître un port (qui semble rattaché à la position de mon image) au début du lien dans la barre aux url car l'url de requette devient alors http://127.0.0.1:5500/Page_web_statique.html.

    Et dans mon code source de page je vois un "
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <!-- Code injected by live-server -->
    " puis au dessous j'ai ce script.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <script>
            // <![CDATA[  <-- For SVG support
            if ('WebSocket' in window) {
                    (function () {
                            function refreshCSS() {
                                    var sheets = [].slice.call(document.getElementsByTagName("link"));
                                    var head = document.getElementsByTagName("head")[0];
                                    for (var i = 0; i < sheets.length; ++i) {
                                            var elem = sheets[i];
                                            var parent = elem.parentElement || head;
                                            parent.removeChild(elem);
                                            var rel = elem.rel;
                                            if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                                                    var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                                                    elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                                            }
                                            parent.appendChild(elem);
                                    }
                            }
                            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
                            var address = protocol + window.location.host + window.location.pathname + '/ws';
                            var socket = new WebSocket(address);
                            socket.onmessage = function (msg) {
                                    if (msg.data == 'reload') window.location.reload();
                                    else if (msg.data == 'refreshcss') refreshCSS();
                            };
                            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                                    console.log('Live reload enabled.');
                                    sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
                            }
                    })();
            }
            else {
                    console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
            }
            // ]]>
    </script>
    Juste avant de fermer les balises html et body.

  9. #9
    Membre éclairé Avatar de Tillo
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2007
    Messages
    494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2007
    Messages : 494
    Points : 683
    Points
    683
    Par défaut
    Bonjour tout le monde !

    J'arrive un peu après la bataille, mais après avoir relu la discussion, je ne comprends pas pourquoi il faut utiliser un script aussi compliqué. Le problème de départ n'était-il pas d'afficher une image sur une page web statique en html/css ? Si oui, la balise ALT et son attribut SCR devrait largement faire le job dès l'instant que l'on trouve le bon chemin vers l'image.

    Loin de moi l'idée de critiquer, je veux juste comprendre.

    Bonne journée à tous,
    Tillo.
    J'aimerais mieux être le premier dans ce village que le second à Rome. (Caius Julius Caesar)

    J'ai aussi un site sur la Grande Guerre: Histoires de Poilus

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Article] Astuce CSS : Ajouter plusieurs images de fond au corps de votre document HTML
    Par Bovino dans le forum Publications (X)HTML et CSS
    Réponses: 16
    Dernier message: 06/10/2010, 20h46
  2. [XSLT] Comment ajouter une image dans un HTML à partir d'un XML
    Par yellowsub122 dans le forum XSL/XSLT/XPATH
    Réponses: 6
    Dernier message: 12/04/2010, 15h59
  3. [CS3] Ajouter une image de fond a un header sur une page HTML
    Par Altesse-972 dans le forum Dreamweaver
    Réponses: 2
    Dernier message: 16/01/2009, 11h25
  4. Réponses: 2
    Dernier message: 26/05/2007, 01h52
  5. comment ajouter une image dans mon HTML??
    Par Mickey.jet dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/03/2006, 16h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo