Adding Images to Web Pages for the Work at Home Parent
- 2 Comment
You don't have to be an alchemist or magician to create HTML!
Web Development. If you are a work at home parent, or an aspiring one, developing a baseline knowledge of HTML is critical to excelling in the market place. A working-level knowledge will save you time, and maybe even help you make more money through understanding how to best make use of the available tools available for creating ads, making more sales, or to be a more efficient blogger and freelance writer. In our previous article, the basics of how to create a web page without buying any new software for your computer were covered. This post will build on that knowledge and show you how to add images and hyper links to your HTML!
Web Development – Setting Up Your Development Environment
The first step is to setup your development environment. You might be like what? I’m not a developer!! How is using Notepad make be a software engineer? Well, anything you use to create HTML makes you a developer! To get started, open up Notepad or another text editor on your computer and paste the following code into the blank document to create a blank web page:
<html>
<body>
<h1>My Picture Heading</h1>
<p>For my first Picture</p>
</body>
</html>
We’ve updated the text from the example in the previous article just to make it relevant to our task of adding a picture and hyper linked text.
Web Development – Adding an Image to Your Web Page
When creating a web page, an image is defined with the <img> HTML tag. Although the img tag doesn’t require a closing tag for legacy HTML, you should include one so that you comply with XHTML formatting rules which require that your web page be well-formed in order to display properly across various browsers. You will also find current practices recommending that you push your formatting to something called a Cascading Style Sheet or CSS for short. Although this is good advice, we are focusing on the HTML required to do three tasks first with these tutorials: eBay Ads, Craig’s List Ads, and Blog Survival Skills. In some of these mediums you can’t use CSS (or use it easily). That being said, in order to display an image on the web page a source (src) attribute mus be used to tell the web browser where to find your image. It does this through defining a “Uniform Resource Locator.”
Steps:
Step 1 – Pick an image on your computer that is smaller than an 8 x 11 page or smaller than 500 x 700 pixels if you open it in a program like Microsoft Paint for Windows computers and select the “Image-> Properties” on the file menu. Save the image to the same directory that your web page is stored.
Step 2 – Add the following line of code before the closing </body> tag of your web page:
<img src=”WebPic.jpeg” />
Note that the image name should be changed to match the sample image you’ve chosen for the exercise.
Step 3 - Save your web page and view in your Web Browser. The HTML should look similar to this:
<html>
<body>
<h1>My Picture Heading</h1>
<p>For my first Picture</p>
<img src=”WebPic.jpg/>
</body>
</html>
You’ll notice that the image and text is aligned to the left! That’s because we still need to apply formatting to the web page which we’ll do in a future article.
That’s it for this example! Tomorrow we’ll show you how to insert hyper links to your web page.
Related posts:
- How to Upgrade Wordpress? WordPress is a blogging tool for web hosts and it...
Related posts brought to you by Yet Another Related Posts Plugin.
2 Comments on this post
Trackbacks
-
Ralph said:
Javanx3d,
Thanks for stopping by my blog. I am very interested in learning the things you know so expect me to keep dropping by.May 6th, 2009 at 1:08 am -
Javanx3d said:
Ralph, thanks for the read! Hopefully you find this site useful!
Cheers,
JamesMay 6th, 2009 at 2:33 am
