Images
For Starters...
Images can play very big roles in webpage and website design and creation and they very often do. Imagine this site without pictures. Half of the tutorials for Photoshop and Anim8or would be gone, and you wouldn't have a menu here. There would be no banner, in short, the site would be pretty much very unpopular.
So, what this tutorial is here to do for you is help you add some images to your webpages to make them flashier. Here it goes...
First, open up Notepad, Dreamweaver, or whatever program you are using to make your page - I reccomend Notepad or Notepad2 for the HTML coding part of it, and then if you can't figure out how to do something in Notepad then go into Dreamweaver, open up your page, and adjust it that way. Then look at the code to see how to do it the next time. Create a new folder, for now let's call it HTML, and put your HTML file in it. Now, open up your HTML document we made earlier in the HTML first page tutorial in your HTML editor, it should look something like this:
<html>
<head>
<title>Hello, World</title>
</head>
<body>
Hello, this is my first page and it's in all HTML, I learned it from Just Me, Simply Designs and their tutorials on HTML.
</body>
</html>
Now, say you want to add a picture after the text, like as an affiliate link. What you want to do is insert an image with the code, so to do this, type
<img src="the_name_of_your_image.file_extension">
So for mine, if I wanted to add this picture, which is a gif: 
then I would add this code:
<img src="jms_affiliate.gif">
It's really very, very simple. So, now go into your page, and add the code to your page and save the file. Then open it up in your browser by going into Internet Explorer or Netscape or whatever you are using, and going File>Open, then clicking on browse, and finding the file you made in HTML.
REMEMBER TO SAVE YOUR FILES WITH A .HTML EXTENSION, IF NOT THEY WILL NOT OPEN IN INTERNET EXPLORER AS AN HTML FILE AND WON'T BE USABLE AS A WEBPAGE FOR THE INTERNET!!
So, save my image from above into the same folder where your HTML file is, and type in the code <img src="the_name_of_your_image.file_extension"> with your image's name replacing the the_name_of_your_image and the file type replacing the file_extension. Leave the quotation marks (" ") and the other symbols in ALWAYS. These are the tags we were talking about earlier, except that you don't have an end tag for images tags like you do for html, body, title, and head tags, as well as others. I hope you were able to complete this tutorial with relative ease and that it served a good purpose for you. As always, look forward to the next tutorial coming soon on HTML colors, backgrounds, and text and font related tags. |
