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:
<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:
<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:
<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
<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
<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
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:
<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:
<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:
<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:
<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:
<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:
<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!