HTML tutorials_Bangla by RaihanTusher

VIEWS: 13 PAGES: 19

									                                              HTML
HTML                                                                                     :

   HTML   ?           : HTML           Hyper Text Markup Language.

   HTML                    ?            : HTML                                      ।

   HTML                                                                  ?      :   । HTML
                                          (                                                       )

   HTML                                                              ?         : HTML
                                    ।

   HTML                                                      ?               : HTML
                            ।

   HTML                                       ?     :
                                    :


               :
                                                                  ++ (                        )       ।


                   :
                                (                                 )
<html>
 <head>
  <title>your website name</title>
 </head>

 <body>
  <p>This is your first HTML website</p>
 </body>
</html>
                        :
          .html                                           ৎ
index                       index.html

                    :
        output (            )
                                                               This is you first HTML website




                                                :
                   <>                              </>                                 < html> < /html>
           Title
                                         ,
   Head(      )                             CSS, Javascript
   Body                                                      Content(      )
                                                                                           (small letter)
            (Heading),                              (Paragraph),            (Link)
Heading:
HTML Heading                                                                            :


           : HTML Heading         ?
     :                                                                      (Heading)
                                                      ?
(Size)                                 (Heading)                        :
                                               Heading 1
                                               Heading 2
                                               Heading 3
                                               Heading 4
                                               Heading 5
                                               Heading 6


           : HTML Heading                                      ?
     :                                  ৎ




           : HTML


     :                ++
<h1>This   is   Heading   one</h1>
<h2>This   is   Heading   two</h2>
<h3>This   is   Heading   three</h3>
<h4>This   is   Heading   four</h4>
<h5>This   is   Heading   five</h5>
<h6>This   is   Heading   six</h6>


                                heading.html               (save)   ।
                           :


This is Heading one
This is Heading two
This is Heading three

This is Heading four
This is Heading five
This is Heading six



Paragraph:

                 :


           : Paragraph         ?
     :


                                                             ৎ
                                                  html
Paragraph



            : Paragraph                   ?
     : Paragraph               <p> </p>                  :
<p> We’re finally ready to add the text! </p>


                                              :
We’re finally ready to add the text!
              :        Paragraph                   ,                                   ?
     :                                 Paragraph            ,


    ।
<p align ="right">This tag shows the paragraph right</p>
<p align = "center">This tag shows the paragraph center</p>
<p align = "left">This tag shows the paragraph left</p>



                              :

                                                                       This tag shows the paragraph right

                                     This tag shows the paragraph center

This tag shows the paragraph left




          :                                                        ?
     :




HTML              <br/>




                   :
<p>I love Google. I love Google. I love Google. </p>

                              I love Google

                  : I love Google. I love Google. I love Google.


                          :
<p>I love Google.<br/>I love Google.<br/>I love Google.</p>
                                                           <br/>                I
love Google

     ৎ                                         :
I love Google.
I love Google.
I love Google.



Link:
                                                                                    :


          : HTML Link       ?
     :
                            ?

     :                                                                  ৎ


                                                                            ?




                                                       /
                       ?                 (Home, Contact us, About us)
                                           ?



              : HTML Link            ?
     : HTML Link                                           <a> </a>
                   : <a href="http://www.google.com">Google</a>

                                                                        :
                 : href                         ?
    : href
                                                                      :

Google


    Google                                              Google


                          ,
                                          ,


             :                                      ?
    :

                    : <a href="http://www.google.com" target="_blank">Google</a>

                              target=”_blank”
         HTML               (Formatting),          (Listing)
                                 (Comment)

HTML Comment:
                                           HTML Comment



    : HTML Comment      ?
     :
         HTML Comment


    : HTML Comment                     ?
     :                        :
   HTML Comment


                                                                  ।


    : HTML Comment                 ?
     : HTML Comment                            :
<!– This is a comment –>


                                               ৎ     <!        ,
HTML List:
HTML List                                                                                                     :
   : HTML List                       ?
    : HTML List                                                 :
    Ordered List
    Unordered List



   : Ordered List                    Unordered List            ?
       : Ordered List:                         character                   Ordered List        Ordered List
<ol>
       Unordered List:                                     Unordered List            Unordered List <ul>


   : HTML List                                      ?
       : HTML List


   : HTML List                             ?
       : HTML List <ol>            <ul>                                (</ol>      </ul>)
                                                                    <li>                     (</li>)
                                                         ।



                                     Ordered list              Ordered list

                              <ol>                      <ul type=”disc”>
                              <li>Mouse</li>            <li>Mouse</li>
                              <li>Hard Disk</li>        <li>Hard Disk</li>
                     Code




                              <li>Processor</li>        <li>Processor</li>
                              <li>Ram</li>              <li>Ram</li>
                              </ol>                     </ul>


                              1.   Mouse                    Mouse
                              2.   Hard Disk             
                     Output




                                                             Hard Disk
                              3.   Processor                Processor
                              4.   Ram                      Ram
          : Ordered HTML List                                                                     ?
              :                Ordered HTML List                                                  :


              Numbered list:                 Letters list:         Lowercase letters          Roman numbers       Lowercase Roman
                                                                         list:                    list:             numbers list:

         <ol>                           <ol type=”A”>             <ol type=”a”>          <ol type=”I”>          <ol type=”i”>
         <li>Mouse</li>                 <li>Mouse</li>            <li>Mouse</li>         <li>Mouse</li>         <li>Mouse</li>
Code




         <li>Hard Disk</li>             <li>Hard Disk</li>        <li>Hard Disk</li>     <li>Hard Disk</li>     <li>Hard Disk</li>
         <li>Processor</li>             <li>Processor</li>        <li>Processor</li>     <li>Processor</li>     <li>Processor</li>
         <li>Ram</li>                   <li>Ram</li>              <li>Ram</li>           <li>Ram</li>           <li>Ram</li>
         </ol>                          </ol>                     </ol>                  </ol>                  </ol>
         5.   Mouse                     A. Mouse                  a. Mouse                  I. Mother Board       i. Mother Board
Output




         6.   Hard Disk                 B. Hard Disk              b. Hard Disk             II. Hard Disk         ii. Hard Disk
         7.   Processor                 C. Processor              c. Processor            III. Processor        iii. Processor
         8.   Ram                       D. Ram                    d. Ram                 IV. Ram                iv. Ram


          : Unordered HTML List                                                               ?
              :                Unordered HTML List                                                    :

                                          Disc bullets list        Circle bullets list    Square bullets list

                                        <ul type=”disc”>          <ul type=”circle”>     <ul type=”square”>
                                        <li>Mouse</li>            <li>Mouse</li>         <li>Mouse</li>
                               Code




                                        <li>Hard Disk</li>        <li>Hard Disk</li>     <li>Hard Disk</li>
                                        <li>Processor</li>        <li>Processor</li>     <li>Processor</li>
                                        <li>Ram</li>              <li>Ram</li>           <li>Ram</li>
                                        </ul>                     </ul>                  </ul>

                                            Mouse                o   Mouse                  Mouse
                               Output




                                            Hard Disk            o   Hard Disk              Hard Disk
                                            Processor            o   Processor              Processor
                                            Ram                  o   Ram                    Ram


                                                              ,             type



 HTML Formatting:
                                                                                                                         :
                                              Ctrl+E                                                                Caps Lock


                                                       ৎ                                                  HTML Formatting
HTML Formatting                              :
                            :                                    :
<center>This tag shows the paragraph                         This tag shows the paragraph center
center</center>

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

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

                                :                                    :
<small>This text is small</small>                     This text is small

                subscript           superscript   :                  :
<p>This is<sub> subscript</sub> and                   This is subscript and superscript
<sup>superscript</sup></p>

Emphasized text:                                                     :
<em>Emphasized text</em>                              Emphasized text

Definition term:                                                     :
<dfn>Definition term</dfn>                            Definition term

Sample computer code text:                                           :
<samp>Sample computer code text</samp>                Sample computer code text

Keyboard text:                                                       :
<kbd>Keyboard text</kbd>                              Keyboard text

Variable:                                                            :
<var>Variable</var>                                   Variable

Citation:                                                            :
<cite>Citation</cite>                                 Citation
   HTML                        (Table)                                    (Entities)
HTML Table:
                                                          :


    : HTML Table        ?
       :
                                  HTML Table


    : HTML Table                    ?
       : HTML Table
                                                     4        :   ,       ,       ,
                                            80, 90, 77, 85
                                        ?
                                                      5
<table >
<tr>
<td> </td> <td>           </td> <td>        </td>
</tr>

<tr>
                                                                              :
<td>1</td> <td>         </td> <td>80</td>
</tr>
                                                                      1               80
<tr>
                                                                      2               90
<td>2</td><td>        </td><td>90</td>
</tr>                                                                 3               77
                                                                      4               85
<tr>
<td>3</td><td>        </td><td>77</td>
</tr>

<tr><td>4</td><td>          </td><td>85</td>
</tr>
</table>
                                                              <table>
</table>             <td>                                      <tr>
                                                   <tr>                   <td>

HTML Table Border:

      :

<table border=”1”>
<tr>
<td> </td><td>        </td><td>    </td>
</tr>

<tr>                                                                       :
<td>1</td><td>         </td><td>80</td>
</tr>
                                                                      1          80
<tr>
                                                                      2          90
<td>2</td><td>        </td><td>90</td>
</tr>                                                                 3          77

<tr>                                                                  4          85
<td>3</td><td>       </td><td>77</td>
</tr>

<tr>
<td>4</td><td>         </td><td>85</td>
</tr>
</table>



            <table>                                       <table border=”1”>
                                           1, 2, 3……
HTML Table Header:
            ।                            ,
                                             <th>



<table border=”1”>
<tr>
<th>    </th>
<th>      </th>
<th>     </th>
</tr>

<tr>                                                    :
<td>1</td><td>        </td><td>80</td>
</tr>
                                                    1       80
<tr>                                                2       90
<td>2</td><td>       </td><td>90</td>
                                                    3       77
</tr>
                                                    4       85
<tr>
<td>3</td><td>       </td><td>77</td>
</tr>

<tr>
<td>4</td><td>        </td><td>85</td>
</tr>
</table>
Cell Padding & Cell Spacing:




       Cell Padding:                                                    Cell Padding

                  Cell padding         :                           Cell padding   :
           Code                            Output           Code                      Output
<table border=”1”>                                  <table border=”1”
<tr>                                                cellpadding=”10”>
<td>    </td>                                       <tr>
<td>         </td>                                  <td>    </td>
</tr>                                               <td>      </td>
<tr>                                                </tr>
<td>        </td>                                   <tr>
<td>     </td>                                      <td>     </td>
</tr>                                               <td>     </td>
</table>                                            </tr>
                                                    </table>



                  Cell Spacing: Cell                         Cell Spacing

                  Cell spacing         :                           Cell spacing   :
           Code                            Output           Code                      Output
<table border=”1”>                                  <table border=”1”
<tr>                                                cellspacing=”10”>
<td>    </td>                                       <tr>
<td>         </td>                                  <td>    </td>
</tr>                                               <td>      </td>
<tr>                                                </tr>
<td>        </td>                                   <tr>
<td>     </td>                                      <td>     </td>
</tr>                                               <td>     </td>
</table>                                            </tr>
                                                    </table>
HTML Entities:
HTML               character     ,         HTML Entities
                                     (<)                         (>)


                                                                            character



       Result          Description                 Entity Name
                       non-breaking space          &nbsp;
       <               less than                   &lt;
       >               greater than                &gt;
       &               ampersand                   &amp;
       ¢               cent                        &cent;
       £               pound                       &pound;
       ¥               yen                         &yen;
       €               euro                        &euro;
       §               section                     &sect;
       ©               copyright                   &copy;
       ®               registered trademark        &reg;
       ™               trademark                   &trade;


       HTML Entities                                             HTML Entities
  :

       Character       Entity Name                 Description
                       &nbsp;                      non-breaking space
       ¡               &iexcl;                     inverted exclamation mark
       ¢               &cent;                      cent
       £               &pound;                     pound
       ¤               &curren;                    currency
       ¥               &yen;                       yen
       ¦               &brvbar;                    broken vertical bar
       §               &sect;                      section
       ¨               &uml;                       spacing diaeresis
       ©               &copy;                      copyright
       ª               &ordf;                      feminine ordinal indicator
       «               &laquo;                     angle quotation mark (left)
       ¬               &not;                       negation
         ¬              &shy;         soft hyphen
         ®              &reg;         registered trademark
         ¯              &macr;        spacing macron
         °              &deg;         degree
         ±              &plusmn;      plus-or-minus
         ²              &sup2;        superscript 2
         ³              &sup3;        superscript 3
         ´              &acute;       spacing acute
         µ              &micro;       micro
         ¶              &para;        paragraph
         •              &middot;      middle dot
         ¸              &cedil;       spacing cedilla
         ¹              &sup1;        superscript 1
         º              &ordm;        masculine ordinal indicator
         »              &raquo;       angle quotation mark (right)
         ¼              &frac14;      fraction 1/4
         ½              &frac12;      fraction 1/2
         ¾              &frac34;      fraction 3/4
         ¿              &iquest;      inverted question mark
         ×              &times;       multiplication
         ÷              &divide;      division

ISO 8859-1 Characters

         Character      Entity Name   Description
         À              &Agrave;      capital a, grave accent
         Á              &Aacute;      capital a, acute accent
         Â              &Acirc;       capital a, circumflex accent
         Ã              &Atilde;      capital a, tilde
         Ä              &Auml;        capital a, umlaut mark
         Å              &Aring;       capital a, ring
         Æ              &AElig;       capital ae
         Ç              &Ccedil;      capital c, cedilla
         È              &Egrave;      capital e, grave accent
         É              &Eacute;      capital e, acute accent
         Ê              &Ecirc;       capital e, circumflex accent
         Ë              &Euml;        capital e, umlaut mark
         Ì              &Igrave;      capital i, grave accent
         Í              &Iacute;      capital i, acute accent
         Î              &Icirc;       capital i, circumflex accent
         Ï              &Iuml;        capital i, umlaut mark
         Ð              &ETH;         capital eth, Icelandic
Ñ   &Ntilde;   capital n, tilde
Ò   &Ograve;   capital o, grave accent
Ó   &Oacute;   capital o, acute accent
Ô   &Ocirc;    capital o, circumflex accent
Õ   &Otilde;   capital o, tilde
Ö   &Ouml;     capital o, umlaut mark
Ø   &Oslash;   capital o, slash
Ù   &Ugrave;   capital u, grave accent
Ú   &Uacute;   capital u, acute accent
Û   &Ucirc;    capital u, circumflex accent
Ü   &Uuml;     capital u, umlaut mark
Ý   &Yacute;   capital y, acute accent
Þ   &THORN;    capital THORN, Icelandic
ß   &szlig;    small sharp s, German
à   &agrave;   small a, grave accent
á   &aacute;   small a, acute accent
â   &acirc;    small a, circumflex accent
ã   &atilde;   small a, tilde
ä   &auml;     small a, umlaut mark
å   &aring;    small a, ring
æ   &aelig;    small ae
ç   &ccedil;   small c, cedilla
è   &egrave;   small e, grave accent
é   &eacute;   small e, acute accent
ê   &ecirc;    small e, circumflex accent
ë   &euml;     small e, umlaut mark
ì   &igrave;   small i, grave accent
í   &iacute;   small i, acute accent
î   &icirc;    small i, circumflex accent
ï   &iuml;     small i, umlaut mark
ð   &eth;      small eth, Icelandic
ñ   &ntilde;   small n, tilde
ò   &ograve;   small o, grave accent
ó   &oacute;   small o, acute accent
ô   &ocirc;    small o, circumflex accent
õ   &otilde;   small o, tilde
ö   &ouml;     small o, umlaut mark
ø   &oslash;   small o, slash
ù   &ugrave;   small u, grave accent
ú   &uacute;   small u, acute accent
û   &ucirc;    small u, circumflex accent
ü   &uuml;     small u, umlaut mark
ý   &yacute;   small y, acute accent
þ   &thorn;    small thorn, Icelandic
ÿ   &yuml;     small y, umlaut mark

								
To top