http://www.2createawebsite.com/money/google-adsense.html - computer Ebooks learning - computer Ebooks learning - enjoy all free Learning Books and computer Tips, Science

Basic Text & Font Tags

New Paragraph: <p> Starts a new paragraph and creates a blank line between your new paragraph and the one above it.

The closing tag is </p>, but is not mandatory.

Line Break: <br> This will break your text to the next line. Two <br> tags is equivalent to one <p> tag. There's no closing tag needed for this one.

Bold: <b> Closing tag is </b>

Underline: <u> Closing tag is </u>

Italics: <i> Closing tag is </i>

Centering text: <center> Closing tag is </center>

Left aligning text: <p align="left"> Just use </p> for the closing tag

Right aligning text: <p align="right"> Just use </p> for the closing tag

Change text color: <font color="red"> The ending for any font tag is </font>

If you want more colors, you can also use hex codes.

Changing font face: <font face="Arial">

Change font size: <font size="3"> (choose between 1 and 7)

Blinking Text: <blink> </blink> (only works in Netscape)

Scrolling Text: <marquee> </marquee> (only works in Internet Explorer)

Setting Horizontal Line Width, Size and Color

Basic Structure of an HTML Page

Here you will see a sample HTML page with the basic structure.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html>

<head>

<title>Title that is displayed at the top of your web browser and also used as the title by many search engines</title>

</head>

<body>

This is my new web page. I hope you like it. Please come back and visit again. If you need help creating your web site visit <a href="http://www.2createawebsite.com">2 Create a Website.com</a>.

</p>

</body>

</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The <html> tag just tells the browser where the HTML starts. It is not necessary to include this tag to get your page to show.

The <title> tells your browser the title of the page and you’ll see this text at the very top of your web browser. This is also used by most search engines when indexing your page. Whatever text you have here will be title of your site when displayed in the search engines.

The <meta name> information is also somewhat useful for some search engines. They may use whatever is in your "description" tag to describe your site. Others may randomly take an excerpt of the <body> of your page for a description of your site. The keyword tag may also be helpful with your ranking in some engines. Insert 3 or 4 of your main keywords or keyword phrases separated by commas here.

A few years ago, the <meta name> information was quite crucial in getting a top listing with the search engines. However, things have changed drastically with the explosion of so many new sites and the fact that many people abused it. I would still recommend using these tags but don’t expect to get a top ranking because of them.

The body of your site should be included inside the <body> tags.

Need Help With Your Design?

I have some pretty cool, FREE HTML templates you can download. Just select the design you want, download the files to your desktop, edit them on your PC to start designing your site.

Return to Index

Inserting Hyperlinks

Hyperlinks are links that take you to another page or web site. You create them by using the code below:

The link would appear as, Name of link

Open Links in a New Browser Window

If you don’t want people to leave your site completely when they click on links to other sites, you can set the link to open up a new window. The "target" attribute allows you to do this:

Absolute vs Relative URLs

In the above example, hyperlinks will be green, links that have already been visited will be yellow and active links will be purple. (An active link is one that has just been clicked, so for a split second the link will change colors as the mouse activates it).

Inserting Images

Once you have the image you want to use you can insert it into your web page.

Next you’ll need to do is upload the graphic to your web server. Your web hoster will either provide the environment for you to upload your images or you'll have to use an FTP program.

If you need help with FTP, click here.

When you upload the graphic, make sure you pay attention to what folder you’re putting it into because that will affect how you write the HTML.

Let’s say you upload the graphic called "apple.gif" to your "images" folder on your web server. The image folder is located inside your "root" directory.

Your HTML code will look like this:

Now let’s say you have uploaded the graphic to the "fruit" folder/directory that is located inside of the images folder then the code would appear as:

The Alt Tag

If you want text to pop up when you run the mouse over the graphic, then you need to add the alt tag.

Specify Height and Width

If you want to adjust the height and width of the image then you need to use the height and width tags:

It is recommended that you always include the height and width of your images because it makes your pages load faster.

Adding a Border

To add a border to your image need the "border" attribute. It’s very simple:

<img src="images/apple.gif" border="5"> The 5 represents the thickness of the border. The higher the number, the thicker the border. The number 0 is equivalent to no border. Or you could just leave the border attribute out if you do not want one.

Multiple Attributes

Let’s say you want your graphic to have a border of 2, be 100 x 250 pixels (height x width) and have an alt tag:

Please note that it does not matter what order you put the attributes in (border, alt, etc.). Just make sure you do not leave out any of the punctuation.

"Help, My Graphic Won’t Show!"

If your graphic does not show up and you receive the "broken image" icon, check the following:

Make sure the file is

uploadedand is actually in the directory you are pointing to in your HTML code.

Check the case of the actual filename. If you saved the file as "APPLE.gif" but typed "apple.gif" in the HTML code then the image will not show. Case does matter.

Check your HTML code and make sure you have included all the punctuation.

Creating a Clickable Image

Linking images is helpful if you have buttons or banners on your site and you want the visitor to be taken to another web page or site when they click on the image. To accomplish this, use the following code:

The first part of the code tells the browser which site to go to and the second part, of course, tells it where the image is located.

Basic Table Tags

The three most important tags for tables is the opening table tag, <table> and the table row and table data tags - <tr> and <td> respectively.

The <tr> tag represents a row for the table

The <td> tag represents a cell inside the row.

Now, with that in mind, let's create a simple table:

<table>

</table>

And this is what the table would look like published:

A	B	C
X	Y	Z

Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:

Adjusting Table Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes.

The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.

</table>

This is what the table would look like now...

A	B	C
X	Y	Z

Specifying a Table Width

You can specify the width of a table by using either a percentage or a pixel width.

Setting Column Widths

Sometimes you may not always want your columns to be the same size. If this is the case, you need to set values on your table data <td> cells. Again, you can set them by using percentages or pixel widths.

</table>

This is what this table would look like.

A	B	C
X	Y	Z

Specifying a Table's Height

You can also set the table height by adding the height tag to the table code.

Horizontally Aligning the Content Inside Tables

The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.

</table>

A	B	C
A	B	C

See how the first column is aligned to the center? You can also right align the columns by using the align="right" inside the <td> cells.

Vertically Aligning the Content Inside the Table Cells

So far we've kept the table cell alignment at the default, which is the middle. Notice in the above table that the A, B, and C are all three aligned in the middle of their cells. Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:

</table>

A	B	C
A	B	C

I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top. You can also align to the "bottom" or the "middle".

HTML Code for Forms

Once the FormMail file is in place on your server, all you have to do is create a page with the form code to make it work.

Below you'll find the code for creating a form in which your visitors can fill out and the results will be emailed to your email address.

The form has the following fields:

Text box
Password Field (hidden text)
Check Box
Radio Buttons

Here is what the form will look like and below you will find the HTML code. You will need to change some variables (in red) to customize it to your own needs.

Here's the code for the form you can copy and paste. Feel free to remove the HTML code for fields you don't need or adjust the various values to fit your liking.

Notice the red text. This is what you need to edit to customize the form.

1) The 1st line should be changed to the address of the FormMail script on your server.
2) The 2nd line should be the address of the page the user views after they submit the form. You may need to create this page.
3) The 3rd line is the email address the form results will be sent to.
4) The 4th line is the subject of the email when the form is sent to your address.

<p>Password:
<input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10">
</p>

<p>Please Place me on your mailing list:
<input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>

<p>What's Your Gender?
<select NAME="Gender">
<option VALUE="Male">Male
<option VALUE="Female">Female
</select>
</p>

<p>Comments: <br>
<textarea NAME="comments" ROWS="10" COLS="50" wrap="virtual">
You can insert default text here if you wish
</textarea>
</p>

</form>

Return to Index

Drop Down Menus for Navigation

You can create a drop down navigation menu by using the code below. Simply copy the code into a text editor and edit the links accordingly.

When you're done, the drop down menu will look something like this:

Return to Index

Web Hosting with HTML Templates Included

If you need help with designing your site, try Website Tonight Hosting. Choose from hundreds of HTML templates.