Images Clickable in Different Areas
Look at the following:
It's one image (the Google logo). However, try clicking on different parts of the image. It leads you to different web pages. The code below made the HTML tip:
<img src="http://www.google.com/images/logo.gif"
usemap=#GoogleImageMap>
<map name=GoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</map>
The first line inserts an image, called logo.gif. usemap=#GoogleImageMapcalls the clickable areas GoogleImageMap. You can change the name GoogleImageMap to any other name you want, like GoogleLetters. Then, you have the 'Image Map':
<map name=GoogleImageMap>
<area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=68,0,161,109 href="http://en.wikipedia.org/wiki/O">
<area shape=rect coords=161,0,201,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,227,109 href="http://en.wikipedia.org/wiki/L">
<area shape=rect coords=227,0,275,109 href="http://en.wikipedia.org/wiki/E">
</map>
Make sure you change GoogleImageMap to the name of your image map. The italicized numbers stand for the right, top, left and bottom edges of each clickable rectangle area. The E letter, for example, has 227 as the right edge, 0 as the top edge, 275 as the left edge and 109 as the bottom edge. To find the coordinates of a clickable rectangle in any picture, you can copy and paste the picture into Paint. (See Note below to find out how to find out the numbers.) The href="http://..." tells which web page the viewer will go to when he/she clicks on the rectangle.
Try clicking everywhere around the E. You will see that in the rectangle defined by the coordinates 227,0,275,109 goes to http://en.wikipedia.org/wiki/E.
Remember, you can add and delete areas in order to add or remove clickable rectangles:
<img src="http://www.google.com/images/logo.gif"
usemap=#SecondGoogleImageMap>
<map name=SecondGoogleImageMap><area shape=rect coords=0,0,68,109 href="http://en.wikipedia.org/wiki/G">
<area shape=rect coords=201,0,275,109 href="http://en.wikipedia.org/wiki/Le">
</map>
Above I have removed the rectangles for O,G,L,E but added a rectangle for Le. Here is the result:
These tips and tricks can add a few touches of proffesionalism to the pictures on your web page! Remember to check out a few other tips in this web site!
NOTE: To find out the numbers next to coords that define a rectangle, copy and paste the image into Paint. Move your mouse across the image and look at the bottom left corner of Paint. You will see two numbers (for example, 47,56). 47 shows how far left your mouse is, and 56 shows how for down your mouse is. To find out the first two numbers you need to put next to coords=, move your mouse to the upper left of the rectangle you want, then look at the two numbers at the corner. To find out the last two numbers, move your mouse to the lower right of the rectangle, then look at the two numbers at the corner.
Build a Web Page
First, remember that most tags must be eventually closed. The syntax would be: <tag> CONTENT </tag>.
Open a text editor such as notepad, or the HTML editor for your hosting service.
The first tag in your website should be <html>, which starts the HTML site.
Immediately after this should come the <head> tag.
So far, you should have the following:
<html>
<head>The next step is to enter the title of your website. This is what shows up in the title bar of the internet browser. Put the title between the <title> and </title>. Then, end the head with </head>. You will end up with:
<html>
<head>
<title>TITLE</title>
</head>Other data to put into the head includes metadata and stylesheet data.
The next step is to add the body of your website. This is where all the important stuff goes. Start out the body with the <body> tag. In a basic website, all the real content goes in the body.
The most basic way to write the body is to simply write a heading, then type.
Within the body, start off by writing the first heading. This should be big, so the <h1> tag should do the trick. After that, simply write the text of the site. Remember the syntax for making links:
<a href="http://www.linktarget.com">LINK</a>And for making images:
<img src="http://imagesite.com/image.jpg"> .Remember, most HTML Tips can be simply inserted into the body and used immediately.
Finish off the body with </body>, and the body is done.
The code with the body included should look like:
<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>Remember, you still have 1 more tag to close: the <html> tag. Close it with </html>, and your website is complete. The final code:
<html>
<head>
<title>TITLE</title>
</head>
<body>
<h1>THE SITE</h1>
blablabla
<a href="http://www.linktarget.com">LINK</a>
IMAGE:
<img src="http://imagesite.com/image.jpg">
</body>
</html>If you want to see what that code looks like in a real web browser, go to this page, which uses the exact HTML code above:
Test Site
Your basic website is complete! For more advice on tables, frames, text formatting, Javascript, etc., look at the rest of the tips on this site. Almost all of them can simply be inserted in the body. Now you know how to make your website from HTML!
Also, if you are using Blogger, you can go to the "template" section of the dashboard, and edit the template, which is raw HTML. Be careful not to change too much stuff. The beginning data is stylesheet data, so don't mess around unless you know what you're doing. However, you can find the sidebar, and mess around with that quite freely.
You can always use a program like Frontpage or Dreamweaver, but raw coding is always the best way to make your website exactly like you want it!
Links and Images Basics
To put a link, use the following code:
<a href="http://google.com">Google</a>
The result is as follows:
Make sure you change "http://google.com" to the address of the site that you want to link to and that you change "Google" to the text that you want users to see.
To put an image into your web page, use the following code:
<img src="http://www.google.com/intl/en/images/logo.gif">
The result of that code is as follows:
Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.
To put an image into your web page, use the following code:
<img src="http://www.google.com/intl/en/images/logo.gif">
The result of that code is as follows:
Make sure that you change "http://www.google.com/intl/en/images/logo.gif" to the address of the image you want to display.
No comments:
Post a Comment