HTML learning - 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

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 uploaded and 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".