[TUT] Beginning HTML

**Kickerbat** · 20-01-10, 04:44 AM

Backgrounds, Images, Etc.

background solid color
Although the result may be somewhat boring, you can have a solid background color using this code, and colors (Hex, RGB, or Words, see "font color" above.) Add the variable bgcolor to your "body" tag, like this:

HTML Code:

<body bgcolor="red">

But please do not use red, or you will probably hurt your eyes.

background image tiled
You can tile a more interesting image with the coming code. Most images will not tile well, so I suggest you search the internet for a pattern website. Make sure they are okay to use, or get permission! You could also use your own image. IMPORTANT: Always start URL's with "http://" when editing HTML. Don't worry about why. Here is the code for adding a background image:

HTML Code:

<body background="http://WWW. PICK_A_URL.COM/YOUR_IMAGE.JPEG">

insert an image
You can add an image to your website with the upcoming code. You may want to put things like banners on your website, or funny pictures you found. To add an image, you need to start with the "img" tags, which stand for image. You also need a course, "src". You may want to add things like borders (pixels wide), border color (RGB, Hex, or Words), and even a specific width (in pixels or percents). Here is the code:

HTML Code:

<img src=HTTP://www.url_of_image.com/image.jpg border=0 bordercolor=black width=300 length=250>

This would create a 300x250 image with no border. You may not want to resize an image because it may distort the content.

**Kickerbat** · 20-01-10, 04:45 AM

Other Useful Things

text links
Links are very important, because that's how we get around on the internet. "a" stands for links. I don't know why. "href=" means where the link should lead to. Here is a standard link code:

HTML Code:

<a href="http://WHERE_TO.com">Click Here!!!</a>

This would create a link that says "Click Here!!!" in that old blue, purple when visited, color we all probably know so well. To change the color (or text effects, like boldness), use the code we already know, right before "Click". Never forget to end your links with </a>. It is a good idea to underline them, for the thinking impaired, or just general public... easiness... Just underline them, okay?

image links
After you can add a link, you can add a link with an image to click on. For example, your banner can take you to your home page. Just type out the link code, but instead of adding text, type the image code. Do not forget to end your link with "</a>".

HTML Code:

<a href="wheredoesthelinkgo.com"><img src="img_source.gif"></a>

adding an email address
To open up your visitors default email client, you can use this code, which I hope you notice is similar to a link.

HTML Code:

<a href="mailto:[email protected]">EMAIL ME!!</a>

As you know, you can change the color, effects, etc.

tables
Last on the menu today are tables. Tables are harder than anything else so far, so get ready. They are very important for making your website look good, and you can get pretty creative with them! Start them with the table code, tr is for a row, td is for a data cell. The below code should explain itself.

HTML Code:

<table> to start your table
<tr> - start table row
<td> - start table data cell
Here is your top left cell! Type in what you want! Add pictures, text, another table, whatever!!
</td> - end cell
<td> - start the second table data cell
This will be your top 2nd cell, add what you need!
</td></tr><tr> - add another row
<td> bottom left cell
</td><td>bottom right cell!
</table>

Variables, add in <table "?">
BORDER= (default is 0)
BORDERCOLOR= color
BGCOLOR= back ground color for whole table. You can color individual cells or rows by putting this variable in the <tr> or <td> tags.
WIDTH= Table width in pixels or percents
HEIGHT= Height in pixels or percents
CELLPADDING= pixels to "pad cells". Indents on all sides, kind of...
CELLSPACING= pixels to seperate cells from eachother.

By now you should be able to create a decent looking webpage! The most important thing is to keep practicing. There are plenty more things you can learn, just keep your eyes open! To actually put things on the internet, you may find some free web hosting, by searching your favorite search engine. To put pictures on the internet, you need to find an image uploader by searching. If you have any questions at all, just ask someone. I can try to help, and if I can't, I will help find someone who will.

**Kickerbat** · 20-01-10, 04:45 AM

Other Useful Things

text links
Links are very important, because that's how we get around on the internet. "a" stands for links. I don't know why. "href=" means where the link should lead to. Here is a standard link code:

HTML Code:

<a href="http://WHERE_TO.com">Click Here!!!</a>

This would create a link that says "Click Here!!!" in that old blue, purple when visited, color we all probably know so well. To change the color (or text effects, like boldness), use the code we already know, right before "Click". Never forget to end your links with </a>. It is a good idea to underline them, for the thinking impaired, or just general public... easiness... Just underline them, okay?

image links
After you can add a link, you can add a link with an image to click on. For example, your banner can take you to your home page. Just type out the link code, but instead of adding text, type the image code. Do not forget to end your link with "</a>".

HTML Code:

<a href="wheredoesthelinkgo.com"><img src="img_source.gif"></a>

adding an email address
To open up your visitors default email client, you can use this code, which I hope you notice is similar to a link.

HTML Code:

<a href="mailto:[email protected]">EMAIL ME!!</a>

As you know, you can change the color, effects, etc.

tables
Last on the menu today are tables. Tables are harder than anything else so far, so get ready. They are very important for making your website look good, and you can get pretty creative with them! Start them with the table code, tr is for a row, td is for a data cell. The below code should explain itself.

HTML Code:

<table> to start your table
<tr> - start table row
<td> - start table data cell
Here is your top left cell! Type in what you want! Add pictures, text, another table, whatever!!
</td> - end cell
<td> - start the second table data cell
This will be your top 2nd cell, add what you need!
</td></tr><tr> - add another row
<td> bottom left cell
</td><td>bottom right cell!
</table>

Variables, add in <table "?">
BORDER= (default is 0)
BORDERCOLOR= color
BGCOLOR= back ground color for whole table. You can color individual cells or rows by putting this variable in the <tr> or <td> tags.
WIDTH= Table width in pixels or percents
HEIGHT= Height in pixels or percents
CELLPADDING= pixels to "pad cells". Indents on all sides, kind of...
CELLSPACING= pixels to seperate cells from eachother.

By now you should be able to create a decent looking webpage! The most important thing is to keep practicing. There are plenty more things you can learn, just keep your eyes open! To actually put things on the internet, you may find some free web hosting, by searching your favorite search engine. To put pictures on the internet, you need to find an image uploader by searching. If you have any questions at all, just ask someone. I can try to help, and if I can't, I will help find someone who will.

Thread: [TUT] Beginning HTML

Thread Tools

Display

Hybrid View

Related Threads - Scroll Down after related threads if you are only interested to view replies for above post/thread

Visitors found this page by searching for:

Bookmarks

Bookmarks

Posting Permissions