0

I'm an absolute beginner in coding. In fact, I'll probably never do it again ;) I'm trying to create this very simple website for my boyfriend as a surprise (he's a developer). And now I'm just encountering one problem after the other :( I've decided on html (although I'm so desperate by now that I'd be willing to go with anything).

<!DOCTYPE html>
<html>
<body>

<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>

<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>

<img src=“7.JPG” alt=“error” style="width:304px;height:228px;">

This is all I have so far. And it's just going to be a bit more text, a couple more images and maybe a little bit of colour and layout (if I can manage that).

Right now my biggest problem is inserting the images. It just doesn't work :( Can someone please help me?

ClaSoSa
  • 1
  • 2
    Is your image in the same folder as the HTML file? – MaxZoom Jan 10 '17 at 22:43
  • Exactly what @MaxZoom said. Is your image in the same folder? Also, I'm assuming you've closed off your `` and `` tags? – Joe Jan 10 '17 at 23:01
  • 1
    Remember, **“** and **”** are not double quotes **"**. Even if as @MaxZoom mentioned your image is in same folder as your html file, you have to replace those characters to double quotes – EhsanT Jan 11 '17 at 03:18
  • Yes, they are in the same folder :) – ClaSoSa Jan 11 '17 at 07:44
  • Yes, they are in the same folder :) and as far as I've seen, all open tags have beem closed off as well. The double quotes thing is interesting! I've used what I thought was the double quotes key on the keyboard. But I'll try to replace those then. – ClaSoSa Jan 11 '17 at 07:50

3 Answers3

0

You have to close all of your tags. You see the and

tags, etc.? All of those tags with /'s before them are the end of a section. First of all, you need that for your <html> and <body> tags. You also need it on your image tag, but there is a special way to do so for such tags as images. Simply add a space followed by a slash at the end of the angled brackets of the image tag:

<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />

This basically allows the tag to be on one line, making code simpler.

Good job on your project so far, and good luck!

Fixed version of your code:

<!DOCTYPE html>
<html>
<body>

<h1>Hello, world (especially Mitchell)</h1>
<h2>I want to show you something…</h2>

<p>Remember that time when I was losing so many rounds of Quizduell that even you noticed? Well, turns out I was doing that on purpose. I was trying to spell something out for you. But as I found out the hard way, it is actually really hard to lose specific games on purpose in the exact order you need. It seemed like I needed to change my plans…</p>

<img src=“7.JPG” alt=“error” style="width:304px;height:228px;" />

</body>
</html>

`

In case this doesn't work, make sure 7.JPG is in the directory of the .html file. The filename is case-sensitive.

Henry Sloan
  • 49
  • 1
  • 6
  • Please note that on `html5`(if you use a HTML5 doctype) there is no need to close a "self-closing tag" or "void element" like ``. Please refer to [this answer](http://stackoverflow.com/a/3558200/1908331) – EhsanT Jan 11 '17 at 03:31
  • I don't know if I'm using html5 to be honest ;) – ClaSoSa Jan 11 '17 at 07:52
  • And the what you see is what you get editor sounds so tempting, I'll definitely check that out. – ClaSoSa Jan 11 '17 at 07:54
0

First of all, I thought that it was very sweet of you to do that!

Here is a sample html that might help you out.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="./promo_5.png" alt="Describe my picture here!" />
</body>
</html>

The body and the html is wrapped here, and the image src is using relative path to find the image.

Chris
  • 1
  • 2
  • It was the freakin quotation marks! It works now!!! My pictures are visible and I'm very happy! – ClaSoSa Jan 11 '17 at 10:50
0

How sweet!

I would suggest you to use a WYSIWYG (What You See Is What You Get) editor to design like Microsoft Word. After you are done with the design, go to tools > source code. There you can get the html code for your design. Simply copy the code from there and paste it within the <body></body> tag. And done! You have designed the webpage!

Link to a WYSIWYG Editor: click here

For image issues, make sure that they are placed in the same directory where the .html file is kept. It should work properly.

iSumanB
  • 16
  • 5