Being able to format your Web page using text is a very effective way of getting your word across. I will give you some information on various tags, and then we will write a sentence and a paragraph in HTML!
Open index.htm. After the body text you already have typed, add this message:
<br>Welcome to my webpage!
We will bold the text. This means, the text will appear darker.
<br><b>Welcome to my webpage!</b>
We will italicise the bold text. This means, the text will appear darker and slanted.
<br><b><i>Welcome to my webpage!</i></b>
We will now underline the bold, italicized text. This means, the text will appear darker, underlined, and slanted.
<br><b><i><u>Welcome to my webpage!</u></i></b>
We will now strike-out the bold, underlined, italicized text. This means, the text will appear darker, crossed-out, underlined, and slanted.
<br><b><i><u><s>Welcome to my webpage!</s></u></i></b>
We will now center the bold, underlined, italicized, striked-out text. This means, the text will appear darker, crossed-out, underlined, and slanted, and will be positioned in the center of the line.
<br><center><b><i><u><s>Welcome to my webpage!</s></u></i></b></center>
Finally, we will now add a background color to the bold, underlined, italicized, striked-out, centered text. This means, the text will appear darker, crossed-out, underlined, and slanted, and will be positioned in the center of the line, and highlighted yellow.
<br><center><b><i><u><s style="background-color:yellow">Welcome to my webpage!</s></u></i></b></center>
Next, we will define a font name, a font size, and font color for our text. Of the font names, the most common are Arial and Times. Your size can range from 1 (smallest) to 7 (biggest).
<br><center><b><i><u><s style="background-color:yellow"><font color="red" size="7" face="Arial">Welcome to my webpage!</font></s></u></i></b></center>
Here is a finished example of everything we've done to what at first was dull text to know some color and formatted text (the BR element is not demonstrated correctly, it will be in the second example).
Before I present the second example, let me explain the weird order. First of all, notice that the open tag of an element is the end tag of that same element, the second to last tag of an element is the second tag of the same element, and so on. This "splitting" up the a tag in such an order is called nesting. Always put first line and paragraph breaks then the CENTER element. Would it make since to use the B element followed by the P element? Paragraph returning in bolded text makes since, bolding paragraph returns do not since they are only space: you can't see it, but you know it's there. It's like dark matter in space: you can see it, but there's nothing physically there. I will explain more in-depth about "style" in the program itself.
The next example demonstrates how to add spaces and returns to your text. After the text which you just finished above (Welcome to...), type the following, on the next line, below this text.
<br>This is a line break. It returns text and such to the next line, one line down from the space above it.
<p></p>This is a paragraph break. It returns text and such to the next two lines, two lines down from the 2 spaces above it.
This is a non-breaking space. It is used to separate words from punctuation, letters, and even numbers.
Notes to Remember:
- Two spaces put in by the keyboard will not be interpreted by the browser. You will have to use " " (w/o quotes) to achieve two spaces.
- A webpage doesn't print as just one page from your printer on paper, it can be one or more than one. Watch out!
- A line is an imaginary line where text is allowed. Notice the text in the box below are written neatly as if they were on lines. There is space between both lines - a space where you are not allowed to type in, and about .5 in