Ultra fast cheap  linux and windows hosting
html tutorial HTML Tutorial:

  • Html - Introduction
  • Html - A basic html file
  • Html - Meta tags
  • Html - Text Control
  • Html - Color
  • Html - Lists
  • Html - Links
  • Html - Tables
  • Html - Forms
  • Html - frames
  • Html - Background music
  • HTML tag list
  • HTML Character Entities
  • Browse
    html tutorial
    Home >> Tutorials >> HTML 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 - Learn how to manipulate text via HTML.
    htmltutorials
    tutorial home