Here are some templates you can use to make your own web layouts. You just need to edit the colours and banner image. Have fun and please don't forget to link back!
 |
|
|
|
|
|
Labels: html, tables, weblayout templates
posted by Del @ 6:50 AM
0 Comments
|
What is an iframe? An iframe or inline frame enables your visitor to view a page from your site or from a site anywhere else from the net without having to reload your page.
the code for the iframe above is as follows: <iframe src="http://neo-faeriewings.comuv.com/tutorials/frame1.html" name="frame1" width="350" height="100" frameborder=1></iframe>
The above frames are what we call interaction frames. Both are pages from different locations and yet when you put them together here you are able to control one frame from another frame! The code for the above frames are as follows:
<iframe src="http://neo-faeriewings.comuv.com/tutorials/frame2.html" name="frame2" width="150" height="300" frameborder=1></iframe> Now, what are the contents of the first frame and the second frame? This is our navigation area!<P>
click <a href="http://neo-faeriewings.comuv.com/tutorials/frame4.html" target="frame3"> HERE for frame 4</a><br> If you notice the name of the second frame it is "frame3" thus the target of the link should be on the frame we want it to open! The contents on the second frame is simply the following:
This is frame 3. Click on the links on the left frame and see what happens!
height: can also be set in pixel or page percentage frameborder: if you want to place a border around your frames, just enter the number you want depending on how thick you want the border is. If you do not want any border, set the border to 0
To make your iframe background transparent use this iframe code:
and then on the pages you want to put in your frames put this code in the body tag:
Example:
The code for the above frame would be: Don't forget to put the body style code on your files: <body style="background:transparent">. If you fail to do it, your frames will not be transparent!
|
Labels: basic, html, iframes, tutorial
posted by Del @ 6:33 AM
0 Comments
Division layers sets apart a section of the page and can be placed anywhere in your site. It can overlap a table or overlap another division. It's a very handy tool in making weblayouts look even better!
Div 1 code:
<div id="name" style="position:absolute; left:350px; top:675px;
background-image:url(background.gif); border:1px solid #000000; width:100px;
height:100px; background-color:#99CCFF; padding:5px; z-index:2;">
This is Divison 1</div>
Div 2 code:
<div id="name" style="position:absolute; left:400px; top:725px;
background-image:url(background.gif); border:2px dashed #666666; width:100px;
height:100px; background-color:yellow; padding:5px; z-index:3;">
This is Divison 2</div>
Div 3 code:
<div id="name" style="position:absolute; left:485px; top:775px;
background-image:url(background.gif); border:3px dotted #996600; width:100px;
height:100px; background-color:pink; padding:5px; z-index:1;">
This is Divison 3</div>
Div 4 code:
<div id="name" style="position:absolute; left:500px; top:825px;
background-image:url(imageURL);
border:5px dotted #996600; width:100px; height:100px; background-color:none; padding:5px;
z-index:4;"> This is Divison 4</div>
To view the result of the above codes click HERE.
As you can see on our example, we have 4 division layers on this page and they have different style attributes and locations on the page. Just like told earlier, divisions can overlap anything as long as you place them on the right location!
Labels: basic, divison layers, html, tutorial
posted by Del @ 6:30 AM
0 Comments
This is most important to those writing tutorials! We can show HTML codes on our pages by the following ways:
The above code will look like this:
Don't worry, it will scroll when you put a longer html code. Now, this is used when you have a lot of codes you want your visitor to see. You can change the rows, cols, background and border attributes to your liking!
Labels: basic, html, showing html codes, tutorial
posted by Del @ 6:28 AM
0 Comments
Tables are really handy especially since most of the time tables are used in web making. So how did I make the table? Simple here is the code:
<table border=1>
<tr>
<td>YOUR 1ST TEXT HERE!
</td>
<td>YOUR 2ND TEXT HERE!
</td>
</tr>
<tr>
<td>YOUR 3RD TEXT HERE!
</td>
<td>YOUR 4TH TEXT HERE!
</td>
</tR>
</table>
The code for the above table is as follows:
<table border=1>
<tr>
<td colspan="2">HERE ARE MY FAVORITE NUMBERS!
</td>
</tr>
<tr>
<td>10
</td>
<td>13
</td>
</tr>
</table>
As you can see above all you have to do is to add the colspan="2" to the td attribute. You can place 3 or 4 or 5 depending on how many columns you would want for the td to span!
The code for the above table is as follows:
<table border=1>
<tr>
<td rowspan="2">put your text here!
</td>
<td> put your text here!
</td>
</tr>
<tr>
<td>put your text here!
</td>
</tr>
</table>
You can change the rowspan to whatever number of rows you want your td to span!
when cellpadding=5 the table would look like this:
Notice how the text moved farther away from the cells' edges when we added the cellpadding!
when cellspacing=5 the table would look like this:
Now you can see how the cells moved farther apart from each other!
The code used above is as follows:
<table border=1>
<tr>
<th>HEADING 1
</th>
<th>HEADING 2
</th>
</tr>
<tr>
<td>put your text here!
</td>
<td>put your text here!
</td>
</tr>
</table>
Notice that we did not have to put the codes <td> <b> <h1> HEADER 1 </h1> </b> </td> to get that header effect! We simply made use of the th atribute which is simpler and easier!
| Put your text here! | Put your text here! |
The code used above is as follows:
<table bgcolor="#333D6F" cellpadding="10" cellspacing="10">
<tr>
<td bgcolor="#3394A8">Put your text here!
</td>
<td bgcolor="#3373A8">Put your text here!
</td>
</tr>
</table>
This makes a prettier looking table, doesn't it?
Labels: basic, html, tables, tutorial
posted by Del @ 6:08 AM
0 Comments
The most simple way is to use this basic html code:
To change the color of your background use the following code:
<body bgcolor="#FF0000">
To put a background image you can use this code:
<body background="image.gif">
The code above will give you a tiled background. And if you wish to place a fixed background on your page you can place this code:
<body background="image.gif" bgproperties="fixed" >
But the most convenient way to put background is by the use of your CSS
You can place this code on your CSS:
You can change the attributes on the above code to your liking.
If you want the background to repeat, change no-repeat to repeat-y
If you want to place your background anywhere but on the right bottom just change where you want the image to be; ex. left bottom
If you do not want your background to be fixed on the page...you can omit background-attachment: fixed
If you do not want any color on your background and only the image you can omit background-color:#ffffff
Labels: background codes, basic, html, tutorial
posted by Del @ 6:07 AM
0 Comments
Inserting an image to your page
<img src="YOUR IMAGE URL HERE">
Aligning your images
To align your image to the left use this code:
Using Alt
Sometimes you would like to put some descriptions on your images you can do this by inserting an alt.
Resizing your images
You just need to adjust the width and height of your image to whatever size you desire!
Making thumbnails
Here's a way to make thumbnails
Labels: html, image codes, tutorial
posted by Del @ 6:05 AM
0 Comments
How to do text links:
<a href="YOUR ULR HERE"> THE TEXT YOU WOULD WANT TO APPEAR HERE </a>
What if you want to put an image on your link
<a href="YOUR ULR HERE"><img border=0 src="YOUR IMAGE URL HERE"> </a>
How to send someone on a specific part of the page
If your page is so long that your visitor would have to scroll up and down a lot, no need to worry. You just have to provide them with a link that would take them on the specific part of your page or what we usually call an ANCHOR!
What if you want to send your visitor to a specific part of a different page?
It's simple, all you have to do is name the particular part of the page this time let's use THEREPlease come back here afterwards.
E-mail Links
Here is the link for sending e-mails.
|
THIS IS THE SPOT wasn't that fun? |
posted by Del @ 5:52 AM
0 Comments
Changing Text sizes
<FONT SIZE="+3">This is +3</FONT>... which is the biggest
You can also change the sizes of your HEADINGS by typing in these tags!
Changing Text colors
To change the colors of your font you must insert this tag:<font color=the hex color/color>your text</font>
Example:
<font color=#c060ff> c060ff</FONT>
or
<font color=red> red</FONT>
Changing Text font
To change the your fonts all you need to do is to put the following code:<font face="the font you want"> your text here </font>
Example:
<font face="arial"> your text here </font>
the result:
your text here
Using all the font attributes
Let's make the word "Neo-Faerie Wings" in bold, italic, size 4, color red, and in arial font!The code to make that happen is
<b><i><font color=red size=4 face="arial">Angel Wings</font></i></b>
The result:
Neo-Faerie Wings
posted by Del @ 5:50 AM
0 Comments
Single Tags
Lines can be separated using the <br > tag. When you insert this tag at the end of a sentence, it starts the next sentence on the next line.
If you want to SKIP a line you can use the <p > tag. This has the same use as the <br > tag only it skips a line and starts your sentence from there.
Example:
This is line one. <p > And this is line two.
The result:
This is line one.
And this is line two.
Simple TAGS
Here are a few simple tags you can use:To make your text bold:
<b>YOUR TEXT HERE!</b>
To make your text italic:
<i>YOUR TEXT HERE!</i>
To underline your text:
<u>YOUR TEXT HERE!</u>
To strike your text:
<s>YOUR TEXT HERE!</s>
To make your text look like that of a typewriter font
<tt>YOUR TEXT HERE!</tt>
If you would want to put a line across your page you can do so by puting this code:
posted by Del @ 5:47 AM
0 Comments
