Alrighty, now we're going to get into some of the more fancy stuff relating to text. This includes inserting line-breaks within paragraphs, playing with text alignments, adding different colors to your text, changing the font style, changing the font size, adding text headers, and using different types of text modifiers.
The goal of this exercise is to get you familiar with some of the different types of formatting tags so you can better personalize your page. All of these tags are used inside of the <body> of the page.
Also, those of you who are active on the discussion boards here on Wattpad can use any of these formatting tags in your posts on the discussion boards as well. I am not certain about the font one because I haven't tested it yet. If you test it and it works, let me know.
Vocabulary:
Attribute: The specific qualities available to modify the nature of the tag that it is applied to. This is one of the most common ways of formatting the text on your page.
Tags:
<font>, </font> - A general overview tag that contains a number of elements and applies those attributes to all text contained within the tag. This content can be over-ridden by localized tags such as the header tag (see below).
<b>, </b> - Changes the text to Bold
<i>, </i> - Changes the text to Italics
<u>, </u> - Changes the text with an Underline
<tt>, </tt> - Changes the test to make it appear as if it was created with a type-writer
<strike>, </strike> - Draws a line through the text
<br /> - Inserts a line-break. This is one of the few tags that does not have a separate closing tag.
<h1>, </h1> - Creates a header text. The sizes are based on the number you place within the tag with <h1> being the largest header style. This tag overrides the <font> tag's size attribute.
Self-Learning Assignment: Add Formatted text to your page
Using the above tags, further personalize your page.
Lesson 3: Formatting and the <font> tag
The <font> tag is one of the most powerful of the basic formatting tags in HTML simply because of the number of attributes that it can have added to it, and until we get into style sheets, this will be your primary method of choosing how you want the text to appear on your web page.
When you are adding attributes to your tags you only need to add them to the opening tag. The closing tag remains unchanged. The most important thing to remember here though is this. The tag can contain any number of attributes, but can only contain one of each attribute.
We'll start by addressing something I'm sure you are curious about. How to change the or font style of the text on your page. This tag is what allows you to do that.
To change your color you'll add the 'color' attribute to your font tag, then indicate a value. The computer is smart, and it will recognize some more common colors by word as well as HexDec value. Others are strictly determined by their numerical HexDec value.
Any image-editing software should be able to allow you to define custom colors, including the basic MS paint. Somewhere in that interface it will tell you what the HexDec Value of the color you picked is.
If you want to just play around with random values until you find one you like, the HexDec value of a color contains six places, each one can be any number from 0 - 9, and any letter from A - F. Here is a sample of a pure Red in hex-dec: #FF0000 <--- this is a bright Red.
This here, is a darker red: #990000
If you want to add Red text to your web page the font tag you need will look like this:
<font><p>This Text is Red</p></font>
The basic font attributes are:
color, size, and face
Each one needs to be written into the <font> tag as color appears up there.
If you want to use all three you can. Just remember, if you close the <font> tag at any point, for example, to change the color of the text, you will need to add the attributes to your new tag as well. It will not carry them over from previous tags. Your other option is to utilize nested font tags as seen below in the text-size example. Just don't forget to close the nested tag when you finish typing the part you want it to apply to.
(Cascading Style Sheets negate the need to do this, but coding them is not necessary at present. We will get to them later in this guide when you are more familiar with the core elements of HTML).
To use all three attributes, the opening tag will look something like this.
<font><p>The Pen is Blue.</p></font>
Other tags that you've already gotten some practice with can give you even more targeted formatting, such as the <p> tag. With this one you can set a specific alignment for the text within it.
To do so you would type it out like this:
<p>
<p>
<p>
<p>
The above examples are your four options when it comes to text alignment. You can add the 'align' attribute to a number of different tags as well which will be discussed later.
The last thing that I need to address with this lesson are the other simple formatting tags, including the line-break tag, which functions the same as pressing the 'enter' or 'return' key in most word processors. It stops the line of text and sends whatever is after it to the beginning of the next line.
Next is precedence. When formatting the text on a page, whatever tag is closest to the text is the one that takes precedence in the event of a conflict in the code, for example, if you want the text to be a specific size for most of the page, but want a specific part to be different you can use the header tags or a nested font tag to change the properties.
<body>
<font><p>Little Font <font>Big Font</font> Little font </p></font>
</body>
All the tags you could need to play around with this until you're satisfied with the results are listed earlier in the lesson. When you feel comfortable with moving on to the next topic we'll address something new. Adding pictures and changing your page background.
YOU ARE READING
How to Code - A Beginner's Guide
RandomThis guidebook was compiled from most of what I've learned over the years. Since I'm writing this one with the complete newbie in mind, any of you who have a fair degree of prior knowledge and skill in the area of web programming should probably loo...
