What is html 5 tutorial


What is html ?

 

Paragraph Tag
Uses of <p> tag
  • The <p> tag is used to define the HTML paragraph element.
  • The paragraph element begins with the <p> tag and ends with the </p> tag.
    • The HTML paragraph element should not contain tables and other block elements.         
           Input code  

    <!DOCTYPE html>

    <html>

    <head>
        <title>paragraph tag</title>
    </head>

    <body>

     <p>This is the First paragraph starting</p> 
     <p>This is the Second paragraph starting</p> 

    </body>

    </html>
    Output view

    This is the First paragraph starting

    This is the Second paragraph starting


    Heading Tag

     The <h1> <h2> <h3> <h4> <h5> <h6 > tags are used to define HTML headings.

    • <h1> defines the most important heading and important for SEO.
    • <h6> defines the least important heading.
    Input code

    <!DOCTYPE html>

    <html>

    <head>
        <title>Heading tag</title>
    </head>

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

    </body>

    </html>

    Output view

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Horizontal line color

    We can change the line colour, using color attribute.
    Details of attribute
    • All html tag have chance to contain attributes
    • Attributes always specified in the start tag (eg:<p class='cls'> => we cannot specified this in close tag </p>).
    • These are just specifies some additional information about the elements.
    Some common attribute names
    • id
      (eg, <p id='test'>Test paragraph</p>).
      id value should unique for the whole documents.
    • class
      (eg, <p class='clsname'>Test paragraph</p>).
      Same class name have chance to contain more than one html element.
    • name
      (eg, <p name='tstname'>Test paragraph</p>).

    Input code

    <!DOCTYPE html>

    <html>

    <head>
        <title>Horizontal line color</title>
    </head>

    <body>
    First Line <hr color ="red">
    Second Line <hr color ="green">
    Third Line <hr color ="blue">

    </body>

    </html>

    Output view

    First Line

    Second Line

    Third Line


    Horizontal line color

    We can change the line colour, using color attribute.
    Details of attribute
    • All html tag have chance to contain attributes
    • Attributes always specified in the start tag (eg:<p class='cls'> => we cannot specified this in close tag </p>).
    • These are just specifies some additional information about the elements.
    Some common attribute names
    • id
      (eg, <p id='test'>Test paragraph</p>).
      id value should unique for the whole documents.
    • class
      (eg, <p class='clsname'>Test paragraph</p>).
      Same class name have chance to contain more than one html element.
    • name
      (eg, <p name='tstname'>Test paragraph</p>).


    Input code

    <!DOCTYPE html>

    <html>

    <head>
        <title>Horizontal line color</title>
    </head>

    <body>
    First Line <hr color ="red">
    Second Line <hr color ="green">
    Third Line <hr color ="blue">

    </body>

    </html>

    Output view


    First Line

    Second Line

    Third Line


    hr line size

  • We can change the default line size using size attribute.
  • We can use more than one attribute.
  • In this example we have used color and size attributes.


    • Input code


    <!DOCTYPE html>

    <html>

    <head>
        <title>Horizontal line size</title>
    </head>

    <body>
    First Line <hr color ="red" size="10">
    Second Line <hr color ="green" size="30">
    Third Line <hr color ="blue">

    </body>

    </html>

    Output view


    First Line

    Second Line

    Third Line




    hr line Width

  • We can change the default width using width attribute.


    • Input code


    <!DOCTYPE html>

    <html>

    <head>
        <title>Horizontal line width</title>
    </head>

    <body>
    First Line <hr color ="red" size="10" width="50%">
    Second Line <hr color ="green" width="80%">
    Third Line <hr color ="blue">

    </body>

    </html>


    Output view


    First Line

    Second Line

    Third Line



    Text formatting
    We can use Bold, Italic and Underline tag anywhere, but we should close all tags properly.

      For example if you have many nested tag you should close the tag in First Open Last Close format.
    <b> .. </b> - Bold your text
    <i> .. </i> - Italic text
    <u> .. </u>- Underline text

    Nested tag
    In the following example we are using nested tag, please see how the tag closed.
        <b><i>T</i>E<u>S</u>T</b>


    Input code

    <!DOCTYPE html>


    <html>


    <head>

        <title>Text formatting</title>

    </head>


    <body>


    <b>This text is bold Text</b>

    <br>

    <i>This text is italic Text</i>

    <br>

    <u>This text is UnderLine Text</u>

    <br>

    <b><u><i></i> This is The Mixed Line</u></b>

    </body>


    </html>


    Output view


    This text is bold Text
    This text is italic Text
    This text is UnderLine Text
    This is The Mixed Line



    <div> tag
  • This tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.
  • Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once.
    • Difference between <div> and <span> tag
     The <span> tag is used with inline elements while the <div> tag is used with block-level content.

    Example

    <span> tag
    <span>Testing 1</span>
<span>Testing 2</span>
<span>Testing 3</span>
    Output
    Testing 1 Testing 2 Testing 3
    <div> tag
    <div>Testing 1</div>
<div>Testing 2</div>
<div>Testing 3</div>
    Output
    Testing 1
    Testing 2
    Testing 3

    Input code



    <!DOCTYPE html>

    <html>

    <head>
        <title>div tag</title>
    </head>

    <body>

    <div>
    This is the first  Div
    <br>
    <input type="text">
    <input type="text">
    </div>
    <div>
    This is the Second  Div
    <br>
    <input type="text">
    </div>

    </body>

    </html>

    Output view


    This is the first Div

     

    This is the Second Div



    <span> tag
  • This tag is used for grouping and applying styles to inline elements.
  • This tag is similar to <div> tag, to see difference between the two, check the next example.

    • Input code


    <!DOCTYPE html>


    <html>


    <head>

        <title>span tag</title>

    </head>


    <body>


       <span>This is the sample span</span> was end.


    </body>


    </html>


    Output view


    This is the sample span was end.





    By at

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)
    © BABATECHNICALGMT SoraTemplates | Distributed By BABATECHNICALGMT Template