~ Adding images ~
Wow! So you are still with me!? Guess you are really hooked to this now arn´t you?!



We are still going to keep on working with the textfile we have been working with since the first class, we named it myletter.html and after the last class it looked like this:








<html>
<head>
<title>My first letter to my website!</title>
</head>
<body>

<font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font>
<font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font>

</body>
</html>








Ok, ready for the next step? We are going to add a picture of you to our letter, hope you are not shy!

The tag for images is actually easy, it is as simple as <img>. The img tag is a tag that you don´t have to close, so there is no such tag as </img>. You write in the file name to your image like this <img="yourimage.jpg">, this is if you have uploaded your image in the same folder as your html file. Otherwise you have to tell your website that your image is in another room and where to go look for it, kind of like drawing a map. Lets say you have uploaded your image in a folder that you have named "images", then the right way to write it would be <img="/images/yourimage.jpg">. See, almost like you build up 2 walls showing that it is another room.


OK, so lets add this image to our letter. I have named it "l4cpic.jpg", and I have uploaded it in the same folder as the html file, so the letter should look like this now.

The new html we are adding is written in purple, so it will be easier for you to notice where we are working.











<html>
<head>
<title>My first letter to my website!</title>
</head>
<body>

<font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font>
<font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font>

<img src="l4cpic.jpg">

</body>
</html>








Lets have a look at myletter.html
Wow! Now look at that, arn´t we looking cute on the web!?


There are many attributes to add to our img tag. Two of the most important are width and height. These tells your website how big your image is, the image will show on your website without these attributes, but adding them makes your website load faster for your visitor. So lets add the width and height, my image is 116 pixels wide and 135 pixels high.







<html>
<head>
<title>My first letter to my website!</title>
</head>
<body>

<font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font>
<font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font>

<img src="l4cpic.jpg" width="116" height="135">

</body>
</html>









If you write the wrong width and height your image will be resized, look at the image, I have set the width for 96 and height for 78. Not a very pretty sight right? Lets not resize images this way. Resizing are done in Paint shop pro or any other image software!





We can also add a border to our image, the attribute for that is.. yepp, as easy as "border". To this example I have set the border for 5. The whole html for our image now looks like this:
<img src="l4cpic.jpg" width="116" height="135" border="5">









Wow! You are doing so good! I´m impressed!
Lets get rid of the border, set the border to 0. Place your mouse over the image! I have added an "alt" tag, wich allows me to tell the image what to say! Like this:
<img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!">






Align is another attribute you can add, this tells your image where to place your text around your image. Here the text is placed on the right side of the image starting at the top, I have added the attribute align="left" like this:
<img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!" align="left">






If you want the image to be on the right side with the text starting from the left, you can also reverse it. Now instead of "left" I have added the attribute align="right" like this:
<img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!" align="right">






Lets make the image align left and add the changes to our letter. Our html now should look like this:







<html>
<head>
<title>My first letter to my website!</title>
</head>
<body>

<font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font>
<font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font>

<img src="l4cpic.jpg" width="116" height="135" border="0" alt="Wow! You are doing so good! I´m impressed!" align="left">

</body>
</html>








Then finally let´s have a look at myletter.html








You´ve done great! You are going to be a pro in no time! Now go grab a cup of coffee and then follow me, I´m waiting for you at the next class!



Take me back