HTML Formatting, HTML Tutorial, Global Guideline

Forum | Blog


Basic HTML Guide.      
 HTML Introduction.      
 HTML Entities.             
 HTML Tags Guide.      
 HTML Head.                
 HTML Meta.                
 HTML Styles.               
 HTML Formatting.
 HTML Backgrounds.     
 HTML Attributes.         
 HTML Links.                
 HTML Tables.             
 HTML Images.            
 HTML Colors.              
 HTML Fonts.               
 HTML Marquee.         
 HTML Forms.             
 HTML Frames.           
 HTML Lists.                
 HTML Scripts.           
 HTML Summary.        

HTML Tutorial >> HTML Formatting.

     Back             Next     

HTML Text Formatting

Here in HTML Tutorial you will learn that how to make your web page colorful by using HTML text formatting.  Well, you remember from the last html tutorial section how you needed a start tag and an end tag right? Start with the start tag, end with the end tag. Simple. You already know that <b> means bold. Let's refresh.

HTML Bold and Italic Formatting

<i>superb stuff</i>

becomes superb stuff.
Underlining is laughably easy too — just use <u>

HTML Underline Formatting

<u>HTML Tutorial underline content</u>

We can even make our text look like it was bashed out on a typewriter — use tt.

HTML Typewrite style Formatting

<tt>Enjoy typewriter style text at HTML Tutorial section of HTML Text Formatting.</tt>

The examples above all use presentational html text formatting tags. You may want to use logical tags instead, which make your content more accessible. Your browser only displays one space between words. If you add in more spaces in the source code, they will be ignored. If you want to forcefully add in extra blank spaces, you can use the special character  , which stands for 'non-breaking space'. With this you can create indents for your text.

HTML Spaces Formatting

<p>&nbsp;&nbsp;&nbsp; This text will be indented in HTML Tutorial because of HTML Text Formatting</p>

You can use <b> or <B>. I prefer to make all of mine lowercase because it looks much neater when you're reading and editing your code, and suits the version of HTML I code in, but it doesn't change how they work. It's up to you.

you can. Simply surround the text you want with both sets of tags — <b><i>like this</i></b>

Something to note however, is the order you put them in. If you start with b, you end with b. In the example above, <i> was the last tag opened, so it is the first one closed. This is something you should remember, because the importance of your tag syntax becomes critical later on. This style of opening and closing is called LIFO — Last In, First Out.

Putting tags inside each other like this is called nesting.

Skipping HTML Lines Formatting

You've probably noticed by now that when displayed in a browser your page seems to have lost all its paragraphs and whatnot. Your browser ignores any returns and indents. So what do you do? You use <br>, which stands for 'line Break'. This is known as an 'empty element' — a tag which doesn't need an end tag — just type that and the text will start on a new line.

Or how about skipping a line and creating paragraphs? To do that, use <p>, which stands for 'Paragraph'. There are two ways to go about using p. You can just put it at the end of a paragraph to skip a line on to the next; or you can put a <p> at the start of the paragraph and a </p> at the end. We prefer the latter, because it looks neater, and allows you more flexibility. You should use it too.

HTML Headings Formatting

In the beginning, heading tags were invented as a graded method of information layout and division. You used big headings for the main points in a page and go down through the numbers. There are 6 grading or levels of HTML headings: <h1> to <h6>. Graphically, these create decreasingly large text, with h1 being the biggest, and h6 being the smallest of the group.

So let’s see them!
Oh, that's my cue. Ok: here are the examples:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

You just wrap the preferred heading tag around the text, like so:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


The text will then appear bold and big. One thing to note is that headings are always apart from the rest of your text, like a paragraph. This is a property of block-level tags. You cannot flow headings and normal text together. If you want text to follow straight away, you should just change the font size and not use a heading.

The title of your page should be made into a level-one heading. The rest of your page should be divided into sections with further heading tags, getting progressively smaller for points and sub-points. Try not to skip levels like going from a <h2> to a <h4>.

Headings take on the color and font face of the surrounding text, so you can change a headings color, say, by wrapping a font color around the h tag. Read this tutorial on font and color for more.

     Back             Next     

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright © 2005 -  2021 All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 401 visitors are online now