Thread: [TUT] Beginning HTML

Let's Learn Text!

To begin to edit your coding, you need to open up a program to do it. Often, people us the small program notepad which is probably already installed on your computer. Any text-editing program should work fine, even Microsoft Word. You will need to find a different way to get it onto the internet though, if that's what you plan to do. Have your program open now.

If you were to type out your text, without any coding, and attempt to view it, it would probably look awful. There would be no change in font size or effects, no extra spaces. No skipping lines, probably the worst thing of all. For now, we will focus on the text effects, and when to use them.

bold
The bold code is made with the word "strong". It used to be <b> for bold, but that has disadvantages. It would look like this:

HTML Code:

<strong>text</strong>

Bold text is useful when trying to make something clear, or adding emphasis. Of course, don't forget to end the code.

italics
Italics are similar to the bold code, except the use an "em" which stands for "emphasis". They would make good codes for adding emphasis, especially in some would-be confusing sentences. Here is the code:

HTML Code:

<em>text</em>

underlining
Underlining text comes in handy when creating links, naming books, or making headers or titles. It is also similar to the bold code:

HTML Code:

<u>text</u>

The nice thing about HTML is that you can add multiple effects to the same text. For example, "text" would be created by putting

HTML Code:

<strong><u><em>Text</u></em></strong>

The order of the tags will not matter.

Now, text effects are great and all, but these tricks alone will not create a decent webpage. Right now, all of the text will run on until hitting the edge of the screen, and then it will go down a line. You need to learn a new code for skipping a line. The code for a line break is

HTML Code:

<br  />

However, this will only skip to the next line. If you want to leave a space in between paragraphs or images or anything. you have a choice. You can put in two line breaks, or you can use the paragraph code (which, along with the break code, does not need to be closed). This code will not indent for you. Here is the paragraph code

HTML Code:

Old text...<p>New Paragraph Text

font size
In HTML, font sizes range from 1 (smallest) to 7 (largest). The default size is 2. If your text is too large, it can be distracting, and make your page look worse. If your text is too small, it will be annoying to read. Here is the font size code:

HTML Code:

<font size=2>Font size would be two</font>

font color
Computers today can display thousands of colors. However, there is a list of the so-called "216 Net-Safe Colors" which all browsers should be able to see. These colors cover most you will want to use. However, there are a couple ways to display the color. Words like "Beige" and RGB Codes like "#FFCC33" or "FFCC33" and Hex Codes, like "rgb(255,255,255)". To choose a color, you may want to search the internet for a chart, which won't be too hard to find. When you have chosen your color, you put it in a code similar to the size code:

HTML Code:

<font color="#FFCC33"> some brownish text </font>

Of course, you can have large or small, and colored text. You may put them in the same code:

HTML Code:

<font size=6 color=beige> large beige text </font>

You are beginning to learn some very handy things. If you want to see how they look on a webpage, search the internet for an "HTML Test Bed" and put in your codes!

text alignment
If you have tested out your code, you may have noticed that it still sits plainly in the upper left corner. Remember that paragraph code? It can help us align text, like this:

HTML Code:

<p align="left"> OR <p align="center"> OR <p align="right>

What this does is tell the computer to create a new paragraph, then align the paragraph, then where to align it to. The code <center> will also work, although left and right will not.

bullet points or lists
One handy feature is to create a bullet point or numbered list. You could create a numbered list yourself, but this way is more organized and will indent for you. Here are the codes:

HTML Code:

<ul> 
<li>bullet one </li>
<li>bullet two  </li>
<li>bullet three  </li>
</ul>

<ol>
<li>numbered point one  </li>
<li>numbered point two  </li>
<li>numbered point three  </li>
</ol>

UL stands for "unorganized list" and OL stands for "organized list".

page divides
To divide a page, one "useful" command is the horizontal rule. I never use it, but it may come in handy to you. You will now be introduced to VARIABLES. These are things you can choose to add but are optional. You may not know it but you already work with them when changing font color and size, as well as alignment. I will put the variables in this code in capital letters, and describe them below:

HTML Code:

<hr NOSHADE WIDTH="300" SIZE="10">

HR= start horizontal rule
NOSHADE= No shading, default has shading.
WIDTH= Width of the line, in pixels, or percent, I would use percents, usually. Default is pixels, or use % sign.
SIZE= Thickness of the line, in pixels.
The order of the variables does not matter, they just need to be in the code.


Congratulations, you've passed the first step!

Parts of a Document

True HTML documents will start with "<HTML>" and end with "</HTML>". Next is probably the "head", followed by the title, then the body. The title indicates what will be seen on the top bar. Right now, if you look at the top of the screen, you may see "Talk Digi -" etc.. You may change this to your liking. The body is where the important stuff goes on, like adding text. Here is the most basic code you can use for starting a web page.

HTML Code:

<html>
<head>
<title> </title>
</head>
<body> -=-=-=-=-=-=-=-=-=-=-=-
TYPE YOUR MAIN CONTENT HERE
-=-=-=-=--=-=-=-=-=-=-=-=-=-=-
</body>
</html>

Feel free to reread the paragraph if needed!

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.

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.

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.

epic guide +Rep

I can see you put a lot of work into this Kickerbat. Nice job, definitely for this.