Trouble inserting an image

Javascript Programming
#1

Hello everyone, I’m an absolute newbie to all of this so I’m having difficulty inserting images into my first attempt at a web page. even using copied and pasted html text from: https://www.w3schools.com/html/html_images.asp.

I’ve tried switching my brave browser back to google chrome in case brave is blocking it some how.
I’ve tried copying in a picture name and location directly from my computer and moving the image to the same folder as my web pages location on my computer, replacing the back slashes to forward slashes and various combinations. Moving the above copied html text to various places within my web page. Adding in various new tags before and after the copied html texts. really not quite sure where to start faultfinding next.

All that happens when I insert url from images on the internet is it shows up on the web page as a small drawing at the top left of the square where my image should be when I put in the dimensions of the image as well (when i don’t add dimensions it is just a tiny square drawing representing my attempting to insert an image I assume). please help!

1 Like
#2

It would be nice if you could post the actual code you wrote here. Either way you said that a simple copy paste doesn’t work as well. That small drawing means that you wrote the img tag correctly but it couldn’t find the picture you pointed at. Try using a direct link to an image as you src=“link”. Otherwise make sure that the picture is in the same folder and write the name of the picture including the extension of the file such as .jpg. Make sure it all matches. :smiley:

2 Likes
#3

hi, im still not having any success ill post the entire html below:

Coding Step By Step

Coding Step By Step

first line of text coding from Simon. learned how to make titled tabs, have titled text, sub titles, headings sub headings and bulleted lists (unordered lists). will use these to build on next objectives.

Bulleted list of steps

  • step one

    • Create link to google

    google
  • Step three

    • Take the third step

Next, created ordered list

Numbered (Ordered) list of steps

  1. Step one

    Insert image

  1. Step two

    2. Take the second step

  1. Step three

    2. Take the third step

Insert image

Picture

HTML Image



Wine Selfie

HTML Image

Trulli

link to website used to copy image

#4

Remember you can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957×174 11.9 KB

Carlos Z.

2 Likes
#5 
<html>
<head>
                  <title>
          Coding Step By Step
                  </title>
</head>
<body>
                  <h1>
          Coding Step By Step
                  </h1>
<p>
          first line of text coding from Simon. learned how to make titled tabs, have titled text, sub titles,
          headings sub headings and bulleted lists (unordered lists). will use these to build on next objectives.
</p>
                  <h4>
          Bulleted list of steps
                  </h4>
    <ul>
        <li>
          step one
        </li>
<p>
          Create link to google
</p>
                  <a href="https://www.google.com">google</a>
    </ul>
    <ul>
        <li>
          Step two
        </li>
<p>
          Create link to Brave
</p>
        <a href="https://www.brave.com">Brave Browser</a>
    </ul>
    <ul>
        <li>
          Step three
        </li>
<p>
          Take the third step
</p>
    </ul>
          <h2>
          Next, created ordered list
          </h2>
          <h3>
          Numbered (Ordered) list of steps
          </h3>
    <ol>
  <li>
          Step one
<p>
          Insert image
</p>
  </li>
    </ol>
    <ol>
  <li>
          Step two
  </li>
<p>
          Take the second step
</p>
    </ol>
    <ol>
  <li>
          Step three
  </li>
<p>
          Take the third step
</p>
  </ol>
<p>
          Insert image
</p>
            <h2>
          Picture
            </h2>
        <img src="C:/Users/Simon Dowson-Wallace/Documents/Web pages/Screenshot_20200605_141312.jpg" alt="Wine Selfie" width="1080" height="2240">
<br><br>
<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>
</html>
<br><br>
<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_trulli">link to website used to copy image</a>
<br><br>
</body>
</html>



</body>
</html>
1 Like
#6

wow thats useful! thanks!

1 Like