How do I add multiple images in html?-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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" />