HTML Basics II Basic Text Formatting
Once you have typed the <HTML>, <HEAD>, <TITLE> and <BODY> tags in with their corresponding end tags, we can now work on the body of the document. Like I said before, anything that appears between the <BODY> tags will show up on the browser screen. You can now start typing in the information you want on the page, using the ENTER key only at the end of paragraphs. But wait! When I go to preview this in my browser all the words are in one big paragraph. The paragraphs I created in the script aren't there. That's right. We need an HTML tag to describe the end of a paragraph. Let me show you the script that describes the preceeding three paragraphs.
You can see the <P> tag at the beginning of the three paragraphs. It is also one of the few tags that don't require a closing tag "/". Well, most of the time. There are a few instances when a closing tag is needed, but I'll point them out when the time comes. Another tag that shows up in the above script is the <B> </B> tag. It defines text that needs to be in Bold. There are some others that do similar tasks. <I> </I> italicizes text, <U> </U> underlines text. Somes examples and then the script. And now the script for the previous text examples
JustificationThere is a justification tag in previous example script as well. The <CENTER> tag obviously puts your text in the centre of the page. (***NOTE. All HTML tags have American spellings; Center not Centre, Color not Colour, etc.) To put your text to the right of the page you have to use the <P> tag again and this time with the closing tag. There is also something called an "attribute" in the script. Here's an example with the line of script after it. This text is justified to the right
The ALIGN="RIGHT" attribute tells the browser to put the text on the right. This same attribute can also be used to center text as well with ALIGN="CENTER" but the <CENTER> tag is much more commonly used. Text SizeJust as in word processing, you can change the size of your text with some simple tags. You can use the H or "header" tag to create titles or headings like this: Your Title with Header 1Your Title with Header 2Your Title with Header 3Your Title with Header 4Your Title with Header 5Your Title with Header 6And here is the script for that
Note that as the number get bigger the size gets smaller. It's the opposite when you use the <FONT SIZE> tag. You would use this tag for enlarging or reducing the size of your body text. Here's an example with the script after: There is also a <FONT COLOR> tag. This allows you to change the colour of your text. If you choose to have a dark background color (coming up soon) then black text won't show up against it. Or you might want to emphasize some text to make it stand out. Like this: The real problem with designing web pages is not having a clue as to who is going to read them. So you have to make them as interesting as possible so that they'll appeal to a broad spectrum of the web populace. Here's the script.
A fairly complicated looking script. What you have to look for if this doesn't seem to work is that every tag has to have a closing tag. I've arranged the script in such a way that opening and closing tags are arranged in a logical fashion. I've also introduce a new tag, <BLOCKQUOTE></BLOCKQUOTE>. If you have to make the text block narrower, say to handle a quote, the <BLOCKQUOTE> tag suits the bill. If the text needs to be narrower still, use more <BLOCKQUOTE> tags. Just be sure to close the tags after your block of text. I think we've pretty well covered the basic tags. With these tags you can come up with a decent text oriented page. But most of the pages on the web have graphics, you say. Yes, that's our next topic. Now let's check out Web Page Graphics |