★Fonts & Text
If you want to change the font style of a specific section in the body of your content, here's some simple codes you can use:
<font color="your_font_color">YOUR TEXT HERE</font>
<font size="your_font_size">YOUR TEXT HERE</font>
Acceptable values -
font face: verdana, arial, trebuchet, helvetica, tahoma, times new roman, georgia, courier, courier new
font color: Values can either be color names, hexadecimal values or RGB values. Visit the color tutorial to learn more.
font size: Values are in pixels (px). E.g. 10px
Other font/text styling:
Bold:
Italics:
Underline:
Strikethrough:
Preview it!
★Breaks, Paragraphs & Headers
Breaks are placed in your HTML code whenever you want to jump to the next line. You can image a single break to be like hitting the 'ENTER' key once on your computer's keyboard, so basically breaks help you to get to the next line.
This is the second line.<br>
This is the third line.<br>
And it will look like this!
Paragraphs. Sometimes instead of just typing your text and using breaks to leave lines, paragraphing is a lot easier. Once you close the paragraph tag </p> and start a new one, the break is automatically done for you. Also, using paragraphs means you can set standard settings by defining them in your style sheet. See the section on CSS components - paragraphs for more details.
This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph. This is going to be your first paragraph.
</p>
<p>
This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph. This is going to be your second paragraph.
</p>
How does it look? See example!
★Bullets & Numbering
You can create bullets using HTML, and you can choose the style of your bullet as well.
<LI>Point 1
<LI>Point 2
<LI>Point 3
<LI>Point 4
<LI>Point 5
</UL>
Replace the phrase your_shape with either of the values: circle or square. This will give you a set of circular or square bullets.
You can also use your own image as the bullet style:
<LI>Point 1
<LI>Point 2
<LI>Point 3
<LI>Point 4
<LI>Point 5
</UL>
To create a numbered list, the code's pretty similar, just be sure to look for whether it's <UL> (for bullets) or <OL> (for numbering):
<LI>Point 1
<OL>
<LI>Sub-point A
<LI>Sub-point B
<LI>Sub-point C
</OL>
<LI>Point 2
<LI>Point 3
<LI>Point 4
<LI>Point 5
</UL>
★Aligning
There are many ways to set the alignment of your HTML objects on your webpage. For a standardized alignment (same throughout), I will recommend defining the text-alignment in your style sheet (CSS). Don't know how? Jump to the tutorial here!
On the other hand, if you want to set a special alignment just for a particular HTML object, use the following codes:
Your stuff here.
</DIV>
Values: right, center, left, justify.
★Positioning
Positioning, re-sizing and creating automatic overflow within a specified area can be adjusted by setting the style of the div. Let's start with positioning:
Your stuff here.
</DIV>
What happens above is that you have positioned your text 'Your stuff here.' to be a certain distance from the TOP of the page, and a certain distance from the LEFT side of the page.
Replace 'value' for TOP and LEFT with a number in pixels (e.g. TOP:10; LEFT:200;).
★Re-sizing
Let's say you want to define the width and the height of your content, meaning the text is to be kept within an 'imaginary' enclosed area of e.g. width: 200px and height: 400px.
Your stuff here.
</DIV>
Now we'll compare and see the difference to better illustrate the power of setting widths and heights using DIV style.
★Creating automatic overflow
As mentioned above, setting a fixed height for your text (for e.g.) can be risky especially when your text might overflow and exceed the defined height. It will be very troublesome to keep adjusting the height value whenever you add more or remove text/words. The easy solution? Use the automatic overflow property!
Your stuff here.
</DIV>
The above code is the same as the one in the positioning tutorial, except for an additional part which says 'overflow: auto'. This simple code will cause a scrollbar to appear automatically if your content exceeds the height value you set, so visitors can scroll up/down to read the whole content.
