Welcome To Photos 101!
I Want YOU!
Why did we put photos first? Franky, everyone likes photos, that is why we added photo examples first!
However, here is a piece of advise ~ FREE!
My Puppy says,
"You Better Listen!"
Take the time to learn some about text FORMATTING.
At the very least you should know that a "Tag" begins with a "<" and ends with a ">" (Without the quotes!)
However, you should actually read and understand the easy instructions at:
~ ~ FORMATTING 101! ~ ~
All you really have to do is Cut & Paste a few Plug-Ins and your site becomes a functional thing of beauty!
Small Plug-Ins are <Tags>
Basic Photos!
What you are about to learn is a simple trick called "Embedded XHTML" or embedding for short! Don't let the strange words fool you, this is super easy and in fact, just about everyone reading this example already knows how to do embedding!
That's right, you already know how to do embedding, some people call it "Plug-Ins!" You just know it by a different name, "cut and paste!"
Cut & Paste is easy. You do it all the time, right? See, I told you this was easy... All the hard computer work is already done for you! All you have to do is Cut & Paste a few Plug-Ins and your site will become more and more beautiful!
Ok, let's get started... (Note ~ There is also a: Photo Check List!)
I went over to my friendster account and found a couple photos I thought would make a good example!
Microsoft Keyboard!
This photo is in my friendster account. It is a logo from the University of the Visayas, Cebu, Philippines! My smart and beautiful daughter goes here!
If you are viewing with a browser set to 1024 X 768 you will notice a big blank space at the right - not good...
If you are viewing with a browser set to 800 X 600 you will notice that a part of the photo on the right was cut off and the motto says "THE UNIVERSITY WITH A HEAR" - even worse!
That's ok, we will fix it! For now lets just follow the steps...
Step 1 ~ In my friendster account at the bottom of my individual photos is a box marked Photo Embed Code: cut what is in that box and put in into your favorite text editor (I use Notepad++ but anything will do, even notepad in windows!). My Code says this:
<a href="http://www.friendster.com/photos/36141351/0/357718849"><img src="http://photos.friendster.com/photos/15/31/36141351/357718849m.jpg" border="0"/></a>
If I paste this into my web page here is what I get:
You will notice two things: A) It has a link back to my photo edit page on Friendster ~ You probably don't want that ~ I don't! B) It is a mini version of the above photo. So let's fix this...
Step 2 ~ Find the <img/> Tag! <img/> is the Tag for images, The Image Tag!
<a href="http://www.friendster.com/photos/36141351/0/357718849"><img src="http://photos.friendster.com/photos/15/31/36141351/357718849m.jpg" border="0"/></a>
Above is our Friendster Code again, but this time I highlighted the "Image Tag" (Don't Know what an <img/> tag is? Take a five minute trip over to the Newbie page FORMATTING 101!). Below is the <img/> I saved... and how it looks with no link!
<img src="http://photos.friendster.com/photos/15/31/36141351/357718849m.jpg" border="0"/>
Step 3 ~ "M" is for Mini! Friendster uses a simple letter "m" to indicate a mini photo rather than the normal size. Therefore, all we have to do is find the "m" and delete it. The "m" is always just before the ".jpg"... I made bold the "m.jpg" in the first example below, and underlined the "m" we want to delete. Then I showed you how it should look in the second example.
<img src="http://photos.friendster.com/photos/15/31/36141351/357718849m.jpg" border="0"/>
<img src="http://photos.friendster.com/photos/15/31/36141351/357718849.jpg" border="0"/>
After three easy steps we have this photo...
Step 4 ~ This is the EASIEST step of all, and then we are done! Now all we need to do is keep the photo inside of our web page! So before we "close" our image tag with /> we simply add width="100%" and that's it!!! Below is our image code as we left it in Step 3 and then again with the Step 4 addition. Now you can view our beautiful U/V logo, properly sized in our web page...
<img src="http://photos.friendster.com/photos/15/31/36141351/357718849.jpg" border="0"/>
<img src="http://photos.friendster.com/photos/15/31/36141351/357718849.jpg" border="0" width="100%" />
These four simple and easy steps you will do with the majority of your photos. It works by making the size of your photos just right to fit your web page. Don't worry either, when someone resizes their screen, your photos will automatically resize to fit their new screen!
Microsoft Keyboard!
There are much better programs to use than what Microsoft makes. Less expensive too!
Best of all you can use the same easy four steps to put your photos into an info box like I did with my puppy above and here!
Puppy!
Puppy Love!
The same for easy steps were used to put the keyboard in the info box to the left also!
Likewise the same code was put in the Photo Left Column and Photo Right Column above. Remember that it automatically adjust for the size!