Making it more interesting
OK, that was easy, but it's not much to look at. It would be much better if I could include a picture of my big idea, so people know what I'm talking about. You can include images with this tag: <img></img>
Including an image is slightly more complicated than making text bold, but the tags follow the same format, with an opening and closing tag, the < and > signs and the slash in the closing tag. However, the <img> tag doesn't have anything between the two parts (You are not applying images to anything - you're just putting them in the page). Then you just need to tell the browser where to find the image, which you can do like this:
<img src="images/my_big_idea.jpeg"></img>
We've just added some extra information to the opening tag telling the browser to look in the images folder for a jpeg called 'my_big_idea.jpeg'. src stands for source - in other words, the source of the image is at that address. src is one attribute that the <img> tag can have. You can include others, e.g.:
<img src="images/my_big_idea.jpeg"
style="width:100px;
height:100px;
border: 2px solid red;">
</img>
Here we've used a style attribute to, well, style the image! We've set its width and height and put a solid red 2 pixel border round it.
So lets include it in our page:
<html>
<body>
Hello, I've just had a really big idea!
<img src="images/my_big_idea.jpeg"
style="width:100px;
height:100px;
border: 2px solid red;">
</img>
</body>
</html>
You can keep working on the same file, just make the changes, save the file with the same name and reload it in your web browser to see the effect. Lets see what it looks like:
Hmm... Not quite what we were expecting. There's an empty box where our image should be, and the formatting looks a bit messy. Fortunately, both these problems are easy to fix.
The image isn't there because the browser can't find it. It's looking for a folder called images in the same place as the HTML file we've got open, and then inside that folder, it's looking for a file called my_big_idea.jpeg. I forgot to make that folder and drop my photo in there. Well, I can do that now.
And the page looks messy because we haven't included any formatting - there's no structure to the page, so the browser just dumps everything out as it finds it. So lets give it some help by adding some structure to the HTML:
<html>
<body>
<h1>
Hello, I've just had a really big idea!
</h1>
<p>
Here's a picture of it:
</p>
<img src="images/my_big_idea.jpeg"
style="width:100px;
height:100px;
border: 2px solid red;">
</img>
</body>
</html>
The <h1> means this is a heading - and the most important one on the page. You can style your heading however you like, but at the moment, the browser will probably just use bold text and a larger font.
The <p> tag is for paragraphs. It tells the browser to put that text in a new paragraph, like so:
