Formatting and scrolling the text in web page

FORMATTING TAGS:
        There are a set of formatting tags in HTML, using which we can change the style of the text in the web page.

<b> or <strong> : used to display the text in bold face.

                                eg: <b> text </b>

                                       <strong> text </strong>

<i> or <em> : These tags are used to display the text in italic style.
                                eg: <i> text </i>
                                       <em> text </em>

<u> or <ins> : These tags are used to insert the line under the text.
                                eg: <u> text </u>
                                       <ins> text </ins>
<tt> TeliType : This tag is used to display text in 'telitype' font.
                                eg: <tt> text </tt>
<s> or <strike> or <del>: These tags are used to display the text as a deleted text.
                                eg: <s> hahaha </s>
                                      <strike> hahaha </strike>
                                      <del> hahaha </del>
<sub> Subscript : This tag is used to display the text below to the regular text. 
                                eg: O ₂  
<sup> superScript : This tag is used to display the text above the regular text. 
                                eg: A² + B ²
<small> : This tag slightly decrease the text size. 
                                eg: <small> text </some>
<big> : This tag slightly increase the text size.
                                eg: <big> text <big>
<center> : This tag is used to display the body content to the center of the web page.
                                eg: <center> text </center> 


 The following figure shows the program that uses all the formatting tags and its result follows. 

FONT TAG :This tag is used to customize the font styles of the text. Using font tag we can change color of the text, we can change font face, etc..This tag is represented as <font>.

•  Attributes of Font:

1. color: used to change the color of the selected text.
2. size  : used to change the size of the selected text. we can specify the values between 1 to 7. 
3. face  : used to change the font style.

eg: <font color="blue" size="6" face="Monotype Corsiva">  This is my web page... </font>
                                      

The following figure shows the usage of the font tag and its result follows:

<marquee> : This tag is used to display the scrolling text on the web page.

• Attributes of marquee:

1. direction : used to change the direction of the scrolling text.
2. bgcolor   : used to change the background color of the scrolling text.
3. scrollamount: used to specify the speed of the scrolling text.
4. behaviour : used to change the behavior of scrolling text.
5. loop: used to specify the no.of times to scroll.

eg: <marquee direction="right" scrollamount="10" bgcolor="yellow" behavior="alternate" loop="4">  This is a scrolling text   </marquee>

Some basic tags

HEADING TAG:

            We need to have different types of headings in our webpages. This tag is used to write Headings in a web page. Headings are defined with the <h1> to <h6> tags. The following shows how to write heading tags in the HTML document.

In the above HTML file the element enclosed in the <h1> appears as a main heading, element enclosed within the <h2>appears a little bit smaller than h1, and soon.. as shown in the figure.

 

  HTML Paragraphs:

       This tag is represented as <p>. This tag is used to display the paragraphs on the web page. The following figure shows the program with <p> tag and the result.

fig: program with <p> tag:

fig: Result of <p> tag.

HTML Line Breaks:

   This tag is used for line breaks in the web page. It is represented as <br>.

TITLE Tag: 

         This Tag is represented as <title>. This is used to display the title of the web page. This tag is written in Body section.

                                    eg: <title> welcome to the site </title>

Horizantal Ruler Tag:

This tag is used to display the Horizantal Line in the web page. This tag is represented as <hr>. It is an empty tag which is also called as a Singled tag. We can write this tag as <hr/> Instead of <hr> </hr>.

• Attributes:

1. color: used to change color of Horizontal Line.
2. size  : used to change the thickness(in pixels). 
3. align : used to specify the alignment, default value is center. 
4. width: used to change width(value in pixels or %).
   

             Eg: <hr color="red" align="right" size="10" width="50%"> </hr> or

                     <hr color="red" align="right" size="10" width="50%"/>

Elements and Attributes

 HTML Element:

• The element content is everything between the start and the end tag.
• Some HTML elements have empty content.
• Empty elements are closed in the start tag. [ eg: <br/> ]
• Most HTML elements can have attributes.

 HTML Attributes:

• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"

Example: 

<a href="http://www.csegraduates.blogspot.in">This is a link</a>

Creating and Executing HTML file.

 Here let us know how and where to write the html code and how to execute it. The following steps will explain how it goes...

Step 1: Start Notepad

To start Notepad go to:

Start
    All Programs
        Accessories
            Notepad

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

Step 3: Save Your HTML

Select Save as.. in Notepad's file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Step 4: Run the HTML in Your Browser

          Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

The result should look much like this:

HTML Introduction

HTML is a Markup Language which is used to display the web page and other information on the Web Browser. HTML code is written using the HTML elements called tags which are enclosed within the angular brackets. Most commonly these tags are paired tags. Let us now know about the tags and structure of the HTML code.

  

HTML TAGS:

• These play a main role in HTML. HTML consists of a set of predefined tags.
• we can specify the text between the starting and the ending tags
• HTML tags are not case sensitive.
• The entire HTML document will be written between and .
• HTML document contains two sections HEAD and BODY.
• Tags are the keywords which are enclosed within the angular brackets.

                  eg: <html> , <p>, <form> etc...,

• There are two types of tags: 

1.   Starting tag / Opening tag.
2.   Ending tag / Closing tag.
3.   Ending tag / Closing tag     : 
, , , etc..,

Structure of HTML Document:

The following code shows the structure of the HTML document. 

<html>

              <head>

               ...........

                 ...........

                </head>

              <body>

            ...........

             ...........

           </body>

</html>.

Here, the code consists of two sections

• Head section is used to provide general information about the HTML document like titleetc..,                                                                                                       
• Body section is used to display the text or image or any other web content.