Monday, April 16, 2012

codeWIZ: HTML Tutorial - How to make sllideshows using html

A sample link to http://thecanvas-online.cjb.net will lead you to ask, how did they do the slider, well in fact it
can only be done in CSS and Java scripts? If you're thinking about that, change it. This is how you can use
targets in iframes and frames. In order for this activity to work, you need 3 html pages.

- Form the HTML pages you need for your webpage. You can make as many as you can, but it's directly
proportional to the number of minutes you will do it. The more, the many time.
-Make an index page where you can put your links in anchor tag. Make sure it will only contain links
first. You can put content later.
- Link them in your hypertext reference (href) attribute.
- Once your done, do not close it yet. You will configure it later. For now, save it as 1.htm.
- You shall now open another notepad. Prefer your background images and put descriptions about
yourself, or anything about your page.
- Save it as 2.htm, but still, don't close it. We will use it for the last instructions.
- Layout first your page in 2 column frameset.
- For the first frame, put your source "1.htm".
- Now let us go to the second frame. This is a bit complicated. Name the second frame "example" and
the source being "2.htm".
- Your done. Save it as index.htm or any filename you want, for as long as it's an HTM file.
- As we can see, 1.htm has links you want to direct to another frame, which is beside it. Now, put target
tags and put the value as "example" since this is the name of the frame.

Save it once more. Close all notepad buttons and take a look at your webpage. It doesn't redirect to the same tab or new tab, rather it is convenient. It just remains in the same webpage and it would lead you to better layouts.

HTML Tags used  in the tutorial:


1st HTML: 1.htm

<html>
<a href= "url.htm" target="example">PART
1</a><br>
<a href= "url.htm" target="example">PART
2</a><br>
<a href= "url.htm" target="example">PART
3</a><br>
<a href= "url.htm" target="example">PART
4</a><br>
</html>

2nd HTML: 2.htm

<html>
<body bgcolor= "Green">
</html>

3rd HTML: index.htm - This is the main page.
<html>
<frameset cols= "50%,*">
<frame src= "1.htm">
<frame name= "example" src= "2.htm">
</frameset>
</html>


To download the full post of this one in Adobe PDF file, you may go to the Academic Support Handouts page  and download htmladvance.pdf in the Information Technology part.

0 comments:

Post a Comment