Post by Square*** on Nov 26, 2007 9:56:22 GMT -5
HTML Tutorial Part 2: Pictures and Links
Hey guys,
After you read HTML Tutorial Part 1: Bascis and Colors,
You are ready for the next one.
I will know teach you how to add your own pictures and links.
Lets start with the links.
The first code you need for the Links is the following
The <A HREF indicates the start of a link, the </A> the end.
Only links doesnt look nice on your page so you may like to add a Hotword , like this:
On your page it will look liek this : Visit xCoders.
If you click this text your will be directed to the link you added.
In Tutorial 1 you learned that you can put colors in the links.
So I dont have to tell you how anymore.
Now lets add some pictures.
At first, I suggest you to upload you pictures at the web and use the link to the images.
Use for example picoodle.com
Now we need to know the command to add a picture:
As you see the picture is at full 100% display, you can change that by changing the values for WIDTH= and for HEIGHT=.
I alinged the picture to the top of the page.
but you can can also align it to the Center of your page or the Bottom of your page or align it to the right or to the left of your page.
NOTE: The have the picture in the center of the page dont use ALIGN=center but ALIGN=middle, otherwise it wont work.
If you use big images it may take a while before they are loaded, so we are going to set a loading image, which is a small image/logo indicating that the picture is loading.
You have to put this after the border settings, so it will look like this:
Now if your page is loading the image, this picture is displayed
(Its not handy to use a large image as loading picture, because you will have to wait long for both. )
Now set a background picture, just change the link in the code below and you have a background image(Which will overwrite your background color)
Now you also know how to upload/add a picture.
Learn this all, then you are ready to move on to Tutorial 3:
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196091915&page=1
Regards,
Square
Hey guys,
After you read HTML Tutorial Part 1: Bascis and Colors,
You are ready for the next one.
I will know teach you how to add your own pictures and links.
Lets start with the links.
The first code you need for the Links is the following
<A HREF="http://xcoders.tk"></A> This will create a link to xcoders.tk
The <A HREF indicates the start of a link, the </A> the end.
Only links doesnt look nice on your page so you may like to add a Hotword , like this:
<A HREF="http://xcoders.tk">Visit xCoders!</A>
On your page it will look liek this : Visit xCoders.
If you click this text your will be directed to the link you added.
In Tutorial 1 you learned that you can put colors in the links.
So I dont have to tell you how anymore.
Now lets add some pictures.
At first, I suggest you to upload you pictures at the web and use the link to the images.
Use for example picoodle.com
Now we need to know the command to add a picture:
<IMG SRC="file:///http://img31.picoodle.com/img/img31/5/11/26/f_Squarem_9214de4.jpg
" ALIGN=top BORDER=0 WIDTH=100% HEIGHT=100%>
As you see the picture is at full 100% display, you can change that by changing the values for WIDTH= and for HEIGHT=.
I alinged the picture to the top of the page.
but you can can also align it to the Center of your page or the Bottom of your page or align it to the right or to the left of your page.
NOTE: The have the picture in the center of the page dont use ALIGN=center but ALIGN=middle, otherwise it wont work.
If you use big images it may take a while before they are loaded, so we are going to set a loading image, which is a small image/logo indicating that the picture is loading.
LOWSRC="file:///http://tbn0.google.com/images?q=tbn:PyXRqOexDa0FkM:http://www.ycw.nl/jachtdetails/loading.gif
You have to put this after the border settings, so it will look like this:
<IMG SRC="file:///http://img31.picoodle.com/img/img31/5/11/26/f_Squarem_9214de4.jpg" ALIGN=bottom BORDER=0 LOWSRC="file:///file:///http://tbn0.google.com/images?q=tbn:PyXRqOexDa0FkM:http://www.ycw.nl/jachtdetails/loading.gif" WIDTH=100% HEIGHT=100%>
Now if your page is loading the image, this picture is displayed
(Its not handy to use a large image as loading picture, because you will have to wait long for both. )
Now set a background picture, just change the link in the code below and you have a background image(Which will overwrite your background color)
<BODY BACKGROUND="square.jpg"
Now you also know how to upload/add a picture.
Learn this all, then you are ready to move on to Tutorial 3:
square127.proboards54.com/index.cgi?action=display&board=htmtuto&thread=1196091915&page=1
Regards,
Square