Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials
 

HTML Text Formatting:
 
Skipping to next lineInserting horizontal line Creating paragraph Text in formatted wayText in BOLD
Text in ItalicsTeletype TextUnderlineSmall and BIG fontSuperscript & subscript
Strikethrough textBlinking TextHeadingFont tagsCenter tag



Skip  text to next line

HTML documents will not recognize the white space and line breaks. By entering <br> in the middle of text skips the proceeding text to the start of the next line.

HTML Source Code:
<html>

<body>

this is first line<Br>

This is second line<Br>

This is third line.

</body>

</html>

 

Top



Separating text by using horizontal lines:

To insert a horizontal line simply use the tag <hr> anywhere in your document. A new paragraph is automatically started after the line. You can vary a rule's size (thickness) and width .

The <hr> tag also has attributes:

Size sets the thickness of the line in pixels
Width sets the width of the line as a percentage of the viewing screen

Color sets the color of the line using either rgb value or one of the presets

Align sets the alignment to left, right or center.

HTML Source Code:

<html>
<head>

<title>Horizontal Lines</title>

</head>

<body >

There is a red horizontal line after this text

<hr size=2 width=75% color=red align=left>

</body>

</html>

 



Top


The paragraph tag <p> </p>

The <p> tag is used for inserting paragraphs into your documents. Put a <p> tag at the start of each paragraph and </p> at the end of each or just type <p> in between paragraphs.

HTML Source Code:

<HTML>
<body>

<p>This is first paragraph.Every things within this <p> tags appear as a paragraph.This is first paragraph.Every things within this <p> tags appear as a paragraph.</p>

<p>This is second paragraph.Every things within this <p> tags appear as a paragraph.This is second paragraph .Every things within this <p> tags appear as a paragraph.</p>

</body>

</HTML>

 

Top




To write text in formatted way

Web browsers does not recognize newline characters or spaces which you input into your HTML file unless you specify a <BR> tag. Here comes the use of <PRE> tag. <PRE> tag generates text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant -- multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file. The text to appear in the browser as it does in Notepad simply write text in between <pre>and </pre> tag.

<html>
<body>

<pre>

This text is example for formatting text using <PRE> and </PRE> tags.

First Line  (there is a newline after this text)-->

First Line  (there is a newline after this text)-->

</pre>

This is out side <pre> tag.This will not recognize line breaks and spaces.

Third Line starts here

</body>

</html>

Top


Text in Bold

To display text in BOLD, write text between <b>and </b> tag

<html>
<body>

<Br>this text is <b>bold</b>

</body>

</html>

Top




Text in Italics

To display text in Italics, write text in between <I>and </I> tag

<html>
<body>

<Br>this text is <I>italics</I>

</body>

</html>

 

Top



Text with Underline

To display text in underline, write text in between <u>and </u> tag

<html>
<body>

<Br>this text is <u>underlined</u>

</body>

</html>

Top



Teletype

<html>
<body>

<Br>this text is <tt>teletype</tt>

</body>

</html>

Top




Small and Large font
To write text in  small font write between <small>and </small> tag and to write in large font write  between <big>and </big> tag.

<html>
<body>

<Br>this text is <small>smaller</small>than others

<Br>this text is <big>large</big>

</body>

</html>

 

Top




Superscript and Subscript

To write text as superscript write between <sup>and </sup> tag
To write text as subscript write between <sub>and </sub> tag

<html>
<body>

<Br>10 <sup>3</sup>

<Br>log3 <sub>10</sub>

</body>

</html>

Top




To write text as strike through

Write text in between <strike>and </strike> tag

<html>
<body>

<Br>there is a strike through <strike>this</strike>

</body>

</html>

 

Top




Blinking Text

The text wrapped inside <blink> tag will blink: This works only is Netscape.

<html>
     <body>

          <p>This is an example for<blink>Blinking</blink> text </p>

     </body>

</html>




Headings <h1>/<h2> tag

HTML provides the user with six different sized headings. These headings are labeled h1 to h6 with h1 being the largest. Just enclose your heading text between the H tags.  Headings can be aligned left, center or right by using the "align=" attribute in the starter tag.

<Body>
<h1>This is first heading(The largest size)</h1><Br>

<h2>This is second heading.</h2><Br>

<h3>This is third heading.</h3><Br>

....................................<Br>
<h6>This is the smallest heading size.</h6>

</body>

 

Top



Basefont and Font tag

The <basefont> and<font>tag uses the same attributes . The only difference is <font>has end
tag.

<Body>
<basefont face="verdana" size=3 color=red> this text is in verdana of size 3 and color red.<Br>

<font face="Arial" size=4 color=blue> this text is in arial of size 4 and color blue.</font>

</body>

 

The purpose of the <font> tag is to change the font in the middle of the document but only for a certain period. If you have set the basefont size to 2 and you want to change it to 4, using the font tag then you can use this attribute:

<body>
<basefont face="verdana" size=3 color=red> this text is in verdana of size 3 and color red.<Br>

<font face="Arial" size=4 color=blue> this text is in arial of size 4 and color blue.</Font>

<font size=+2>this text is 2 sizes bigger than the rest</font>

</body>

 

Top




<CENTER></CENTER>

This allows you to display text in the center of a web page.

<Body>
This line is not in center.<hr>

<center>This line is in center</center><hr>

<body>

Top



<DFN></DFN>
This allows you to embolden or italicize a word or group of words.

<dfn>See the text</dfn>

 Top



 
 

Page contents: itechies.net - text control introduction
javascript tutorial
javascript book
Buy this book