0

I have a problem where I get to add only one image, html seems to ignore the 2nd image that I want to add. Sorry for the unorganized code, I just started HTML just 8 hrs ago.

here's the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8">
    <meta name = "My mech inventions/arts" content = "Machine part 1.0\nHead & Neck">
    <title>Josiah's Blueprints</title>
  </head>
  <body style = "background-color:black">
    <h2 style = "color:white">Machine Part 1.0<h2>
    <h2 style = "color:maroon;"><b>Head & Neck</b></h2>
    <hr/>

    <p style = "color:white"><i>Fig 1.0</p></i>
    <p style = "color:white"><b>Front View</p></b>
      <img width = "1300" src = "/home/princesspriest/KRITA/Mech blueprints/Mech blueprint (head & neck Front view) .png" alt = "Fig 1.0 front View of the mech's head and neck"/>

    <p style = "color:white"><i>Fig 2.0</p></i>
    <p style = "color:white"><b>Upper View</p></b>
      <img width = "1300" src = "/home/princesspriest/KRITA/Mech blueprints/Mech blueprint (head & neck upper view) .png" alt = "Fig 2.0 upper view of the mech's head and neck"/>
  </body>
</html>

Sorry if I can't add a screenshot of the web, I hope the code is enough to solve such problem.

Improve this question
2
  • 2
    Your opening/closing tags don't match in a number of places: <p><b>Upper View</p></b> Which will generally mess up your mark-up. I'd recommend using an editor with some built in HTML validation (or at least automatic indentation) as that will help you spot these issues easilly.
    – DBS
    Nov 8, 2021 at 16:42
  • Like @DBS pointed out, there are some minor typos. You can also look in your networks tab of the dev tools (ctrl+shift+i, or f12) and see if the images are actually loaded or not, if you're ever in doubt that the path (src) could be the issue.
    – Martin
    Nov 8, 2021 at 16:48

2 Answers 2

Reset to default
0

I copied your code into a new file and opened the html page in internet explorer. Both images didn't load of course because they are not in my filesystem, so I replaced them with an image of roses I took from the web. Both images loaded normally given the syntax you used to render them. You can exert more control over the position of elements by specifying the position in the css of your document (or within the html through the style attribute). The available options for display are static, sticky, fixed, absolute and relative. Depending on your choice, you'll need to specify additional parameters for position relative to top,bottom,left or right side of the document. You can learn more about this subject in the link below:

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Note that because you took a width of 1300, the pictures won't fit next to eachother. You'll have to scroll down the page in order to see the 2th picture. If the 2th picture doesn't load, try and replace it with another picture, in order to determine if the problem is with the picture, or with the actual syntax. I'll say this once again: I had no problem loading both pictures, using the following image link:

https://www.aboutgiving.co.nz/content/images/thumbs/0004092_red-roses.jpeg

I hope this proves helpful.

Improve this answer
1
  • thanks! This solved the problem, the images are the main cause of the problem. I followed the same thing you did, the rose photograph. It printed 2 images, unlike the other. It could only print 1 because it has a larger size than the rose image.
    – The Fear
    Nov 8, 2021 at 17:15
0

You need to close the tags in the correct order, otherwise it will not display correctly.

img {
  width: 100px;
}

i, b {
  color: black;
}
<p style="color:white">
  <i>Fig 1.0</i>
</p>

<p style="color:white">
  <b>Front View</b>
</p>

<img width="1300" src="https://picsum.photos/100" alt="Fig 1.0 front View of the mech's head and neck" />

<p style="color:white">
  <i>Fig 2.0</i>
</p>

<p style="color:white">
  <b>Upper View</b>
</p>

<img width="1300" src="https://picsum.photos/100" alt="Fig 2.0 upper view of the mech's head and neck" />

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.