HTML Tutorial 3
From the previous tutorials you have learned the structure of HTML documents and some basic tags. Now in this third tutorial you will learn about links and images. When you learn this you can then link pages together to actually form a website and put something besides text on them. Creating a link to another page is very simple all you have to do is put <a href="http://www.gamewalkthroughs.weebly.com">Game Walkthroughs</a> in the body of your code.
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.gamewalkthroughs.weebly.com">Game Walkthroughs</a>
</body>
If you put this code into notepad++ and then save and run it you will see that there is a hyperlink that says Game Walkthroughs. When you click the link it will take you to this website. So as you can see you have to put the URL you want into the parenthesis and the text that you want people to see goes after the > and before the </a>. Now let me show you how to put an image on a page using the tag <img src="image.jpg" width="100" height="100"> in the body.
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<img src="image.jpg" width="100" height="100">
</body>
</html>
So this is just as simple as the link. After <img src=" put the name of the image you want to use and the you can specify the width and height of the image or you can just skip that and close the tag with >. If you do not specify the width and height of the image then it will appear on the screen with the images actual dimensions. Also the image you use has to be in the same folder as the saved html file. The last thing I will show you is how to make an image a link to another website.
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.gameswalkthrough.weebly.com"> <img src="image.jpg" width="100" height="100"> </a>
</body>
</html>
As long as you make sure that the code for the link comes before the image and the image code is between the opening and closing tag of the link code then you should have done it correctly. Now when you save and open the file in a browser you will see the image you put and you can also click on the image and it will take you to the URL that you specified.
Tutorial 2 - Tutorial 4
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.gamewalkthroughs.weebly.com">Game Walkthroughs</a>
</body>
If you put this code into notepad++ and then save and run it you will see that there is a hyperlink that says Game Walkthroughs. When you click the link it will take you to this website. So as you can see you have to put the URL you want into the parenthesis and the text that you want people to see goes after the > and before the </a>. Now let me show you how to put an image on a page using the tag <img src="image.jpg" width="100" height="100"> in the body.
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<img src="image.jpg" width="100" height="100">
</body>
</html>
So this is just as simple as the link. After <img src=" put the name of the image you want to use and the you can specify the width and height of the image or you can just skip that and close the tag with >. If you do not specify the width and height of the image then it will appear on the screen with the images actual dimensions. Also the image you use has to be in the same folder as the saved html file. The last thing I will show you is how to make an image a link to another website.
This is the code:
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.gameswalkthrough.weebly.com"> <img src="image.jpg" width="100" height="100"> </a>
</body>
</html>
As long as you make sure that the code for the link comes before the image and the image code is between the opening and closing tag of the link code then you should have done it correctly. Now when you save and open the file in a browser you will see the image you put and you can also click on the image and it will take you to the URL that you specified.
Tutorial 2 - Tutorial 4