Online Auction Help

HomeAbout MeeBayHTMLDownloadsLinksContact Me

  Buy you own domain name with excellent additional features

Basic HTML - Part 2

The webpage is starting to come together now but what is a webpage without a bit of colour and a few pictures.

 

Adding a background colour

Inside the body tag (<body>) simply copy this code

<body bgcolor='yellow'>

That is all there is to it. Obviously, you can change yellow to whatever colour you like.

<body>
<body bgcolor='yellow'>
</body>

 

Adding a picture

Before you can add any pictures you must first put the pictures somewhere so that you can make a reference to them. An easy way to understand this is to think of it as giving a friend directions to where you live.

For example:

Think of this as my home address (this is where my picture is stored)

http://www.onlineauctionhelp.co.uk/images/newmembers.gif

http://www.onlineauctionhelp.co.uk/ could be thought of as the town

images could be thought of as the street

newmembers.gif could be thought of as the door number

It is important to make sure that the address is correct otherwise my friend would not be able to find me.

The image below is stored under the address - http://www.onlineauctionhelp.co.uk/images/

The name of the picture is - newmembers.gif

<img src= > in this space enter the address of where the picture is stored beginning http://

<img src="http://www.onlineauctionhelp.co.uk/images/newmembers.gif">


Please note: There is closing tag for a picture

You can set the following properties for the <img> tag. It is recommended that you set the width and height for each picture as it makes the picture load faster.
width
height
alt

alt is simply some text to be displayed if the image can not be displayed .

So, for example, the same picture above will now look like this:

<img src="http://www.onlineauctionhelp.co.uk/images/newmembers.gif" width=100 height=66 alt="New Members Welcome">

New Members Welcome

And if the picture is not available you would see this

New Members Welcome

 

Linking a picture

You just need to put the two codes together

<a href=address of page you want to go too><img src=address of picture></a>

Click on the picture below

<a href=www.onlineauctionhelp.co.uk><img src=http://www.onlineauctionhelp.co.uk/images/newmembers.gif></a>

 

To get the link to open up in another browser you just need to state the target like below.

<a target="_blank" href="http://www.onlineauctionhelp.co.uk"><IMG SRC=http://www.onlineauctionhelp.co.uk/images/newmembers.gif></a>

 

Adding a link to a different page

Links are what allow people to move to other pages on the Internet. They can usually be identified because the mouse pointer changes when over a link and the text is usually underlined and blue (although this is not always the case). To create a link use the following:

<a href= >Name of website</a> href is where you should put the URL (web address) of the page you want to go too. Must start with http://  Then you should put in the name of the webpage.

For example

<a href=http://www.onlineauctionhelp.co.uk> Online Auction Help</a>   Online Auction Help



Email links

An email link works in a similar way to a normal link. To create a simple email link:

<a href=" ">Email me</a> just enter your email address in the " " space.

<a href="mailto:admin@onlineauctionhelp.co.uk">Email me</a>   Email me

 


Advanced email links

To automatically fill in the subject line of the email:

<a href="mailto:admin@onlineauctionhelp.co.uk?subject=This will appear in the subject line">Email me</a> you need to place a ? mark after your email address and then put the subject


<a href="mailto:admin@onlineauctionhelp.co.ukt?subject=Fill in the subject line">Email me</a>   Email me


 

Practical Test 3

Again lets go back to the webpage we created earlier. Open up the test.html document in Notepad - right click on the test.html file and then choose "Open With" then "Notepad".

Fist of all lets change the background colour. Copy and paste the code below into the test.html document - just below the <body> tag.

<body bgcolor='pink'>

Next, I have a picture located here - http://www.onlineauctionhelp.co.uk/images/

The name of the picture is - picturetest.gif

Using the example given above, add this picture to your webpage - any where between <body> and </body>. If you want to cheat you can scroll down to the bottom of this page where I shall give you the code. You shall get more satisfaction from working it out yourself though.

And that concludes my introduction to basic HTML. I hope you didn't find it too taxing. I  assure you that the more you use and play around with HTML the easier you shall find it.

 

Back

 

 

 

 

 

 

 

 

 

 

 

 

 

Are you sure you want to cheat?

 

 

 

 

 

 

 

 

 

 

<img src="http://www.onlineauctionhelp.co.uk/images/picturetest.gif">

 

  Buy you own domain name with excellent additional features

LEGAL INFO:  eBay® is a registered trademark of eBay®, Inc.  eBay®, Inc. is not associated with OnlineAuctionHelp in any way, nor is OnlineAuctionHelp
associated with eBay in any way. All concerns or questions about this website should be directed to this address, and not to eBay. All other trademarks are the property of their respective owners.
 
Copyright © 2006 All Rights Reserved http://www.OnlineAuctionHelp.co.uk| No part of this website and its content may be reproduced.