Monday, July 29, 2013

HTML: Tutorial 4 Make images into links and setting size of images

      Hi there again!! You ready to expand on the knowledge you gained so far. If you have been following along you can open your Learning3.html file in your text editor. If your new copy and paste this code into your text editor.

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>

<p> Now add images <p>

<img src="Mario.png">


</body>
</html>

Now the first lesson will be to set the width and height of your image. Actually this is very easy since you have done most of the code in the previous lesson. In your text editor go to the section where you have your image code. Now after the "Mario.png" go ahead and add width="80" height="80"  your code should look something like this..

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>

<p> Now add images <p>

<img src="Mario.png" width="80" height="80">


</body>
</html>





Now save your file as Learn4.html and double click on your Learn4.html file. After you see the image go back to your Learn4.html file and set the width="20" height="20"  ,ok now  save it again and click on your Learn4.html watch as your image has gotten alot smaller and should look something like this













Ok now as always if it doesn't work comb over your code carefully, common mistakes is to forget the "" after height and width. Now lets turn that image into a link.
1st In the website code delete the >click me<  DELETE ONLY THE WORD CLICK ME NOT THE BRACKETS. 2nd Now type inbetween the brackets that you just deleted click me go ahead and type in the image code <img src"Mario.png" width"40" height"40"> . Your code should now look like this

<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

 <a href="http://www.androidfreegamesapps.forumotion.com"><img src="Mario.png" width="40" height="40"></a>

<p> Now add images <p>

</body>
</html>

Now go ahead and save the file and double click on it. Now go ahead and click on the Mario image and it will take you to another website. If for some reason it didnt work, go over your code slowly to make sure you didn't make any mistakes. Most common mistake people make is >< img scr="  around that area in the code. So now you learned how to make a header,text,set image,set links, and set links in images. Alright you have accomplished alot!! Head over to the next lesson your doing great!! Lesson 5

Click here for lesson 5









No comments:

Post a Comment