HTML, Ajout d'images et de vidéos

**Matheux14** · 09/09/2022, 23h30

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

**mathieu** · 10/09/2022, 07h22

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.

**Matheux14** · 10/09/2022, 14h08

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.

**mathieu** · 10/09/2022, 14h50

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

**Matheux14** · 10/09/2022, 20h30

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à.

**mathieu** · 10/09/2022, 20h59

quand vous allez à l'url http://monsite.online/latex.png est ce que vous voyez bien l'image dans le navigateur ?

HTML, Ajout d'images et de vidéos

HTML

Vue hybride

Discussions similaires

Partager

Partager