HTML, Ajout d'images et de vidéos

Version imprimable

1 pièce(s) jointe(s)

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:

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. : )

10/09/2022, 07h22
mathieu

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:

<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.
10/09/2022, 14h08
Matheux14

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.
10/09/2022, 14h50
mathieu

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://...").
10/09/2022, 20h30
Matheux14

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à.
10/09/2022, 20h59
mathieu

quand vous allez à l'url http://monsite.online/latex.png est ce que vous voyez bien l'image dans le navigateur ?
10/09/2022, 21h54
Matheux14

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.

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:

" puis au dessous j'ai ce script.

Code:

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.

12/09/2022, 11h18
Tillo

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.