This is Logo


01 HEAD


Heading (h1)

Heading (h2)

Heading (h3)

Heading (h4)

Heading (h5)
Heading (h6)

<H1>This is heading 01</H1>
<h2>This is heading 02</h2>
<h3>This is heading 03</h3>
<h4>This is heading 04</h4>
<h5>This is heading 05</h5>
<h6>This is heading 06</h6>




02 PARAGRAPH

this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph . this is a paragraph

<p></p>




03 LINE BREAK


<br>

^ this is a line break





04 HORIZONTAL RULE

Different styles of HR:


<b>Bold text |
</b> <strong>Strong text |
</strong> <i>Italic text |
</i> <mark>Mark text</mark> |
<small>Small text |
</small> <del>Delete text</del> |
20 <sub>10</sub> < (Subscript text) |
<u>Underlined text</u> . 
            




05 TEXT FORMATTING

Bold text | Strong text | Italic text | Mark text | Small text | Delete text | 20 10 < (Subscript text) | Underlined text .

<b>Bold text |
</b> <strong>Strong text |
</strong> <i>Italic text |
</i> <mark>Mark text</mark> |
<small>Small text |
</small> <del>Delete text</del> |
20 <sub>10</sub> < (Subscript text) |
<u>Underlined text</u> . 




06 HYPERTEXT

Click this link to go to Thevinu's web site

<a href="http://thevinuvinan.com" target="_blank" 
style="color: rgb(255, 255, 255)" 
>click this link to go to Thevinu's web site</a>





07 IMAGE

This is the Image

<img src="imgs/tg.jpg" 
alt="This is the Image"
style="
width: 750px;
height: auto;
max-width: 100%;
"> 





08 BULLETS

  1. HTML
  2. PHP
  3. CSS
  1. HTML
  2. PHP
  3. CSS
  1. HTML
  2. PHP
  3. CSS
  1. HTML
  2. PHP
  3. CSS

  1. HTML
    1. H & T - Hypertext
    2. M - Markup
    3. L - Language
  2. PHP
    1. P - Personal
    2. H - Home
    3. P - Page Tools
  3. CSS
    1. C - Cascading
    2. S - Style
    3. S - Sheets
               ^ Sub bullets also can chnage the type

 <ol>
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ol>
    
            <ol type="A">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ol> 
            
            <ol type="a">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ol> 
    
            <ol type="i">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ol> 
    
            <ul type="disk">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ul>
    
            <ul type="circle">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ul>
    
            <ul type="square">
                <li>HTML</li>
                <li>PHP</li>
                <li>CSS</li>
            </ul>
    
            <ol>
    
                <hr class="new4">
                <p>
    
                <li>HTML</li>
                <ol type="i"> 
                    <li>H & T - Hypertext</li>
                    <li>M     - Markup</li>
                    <li>L     - Language</li>
                </ol>
                <li>PHP</li>
                <ol type="i"> 
                    <li>P     - Personal</li>
                    <li>H     - Home</li>
                    <li>P     - Page Tools</li>
                </ol>
                <li>CSS</li>
                <ol type="i"> 
                    <li>C     - Cascading</li>
                    <li>S     - Style</li>
                    <li>S     - Sheets</li>
                </ol>
            </ol>



09 SUB PARAGRAPH

HTML
Hyper Text Markup Language
PHP
Personal Home Page Tools
CSS
Cascading Style Sheets
<dl>
     <dt>HTML</dt>
     <dd>Hyper Text Markup Language</dd>

     <dt>PHP</dt>
     <dd>Personal Home Page Tools</dd>
  
     <dt>CSS</dt>
     <dd>Cascading Style Sheets</dd>
</dl>


10.0 TABLE

Student Data
Name Stream  Age
Thevinu Technology Sub.  17
Pigera Commerce  17
Wadithya Maths  17
Akila Commerce  17
image of a structure of the table tags

 <table class="d" >
                <caption>Student Data</caption>
                <tr>
                    <th>Name</th>
                    <th>Stream</th>
                    <th>&nbspAge</th>
                </tr>
                <tr>
                    <td>Thevinu</td>
                    <td>Technology Sub.</td>
                    <td>&nbsp17</td>
                </tr>
                <tr>
                    <td>Pigera</td>
                    <td>Commerce</td>
                    <td>&nbsp17</td>
                </tr>
    
                <tr>
                    <td>Wadithya</td>
                    <td>Maths</td>
                    <td>&nbsp17</td>
                </tr>
    
                <tr>
                    <td>Akila</td>
                    <td>Commerce</td>
                    <td>&nbsp17</td>
                </tr>
    
            </table>


10.1 COLSPAN

Salary Data
Name Age Salary (Rs)
Namal 56 50000.00
Sunil 48 48000.00
Kamal 49 100000.00
Bimal 52 150000.00
Total
 348000.00


<table class="d" >
                        <caption>Salary Data</caption>
                        <tr>
                            <th>Name</th>
                            <th>Age</th>
                            <th>Salary (Rs)</th>
                        </tr>
                        <tr>
                            <td>Namal</td>
                            <td>56</td>
                            <td>50000.00</td>
                        </tr>
                        <tr>
                            <td>Sunil</td>
                            <td>48</td>
                            <td>48000.00</td>
                        </tr>
            
                        <tr>
                            <td>Kamal</td>
                            <td>49</td>
                            <td>100000.00</td>
                        </tr>
            
                        <tr>
                            <td>Bimal</td>
                            <td>52</td>
                            <td>150000.00</td>
                        </tr>
    
                        <tr>
                            <td colspan="2"><center>Total<center></td>
                            <td>348000.00</td>
                            
                        </tr>
            
                    </table>


10.2 ROWSPAN

Phone Numbers
Name telephone number
Sunil 0778554626
Sunil 0778546248
Kamal 0778595449
Bimal 0778595462
0708398462


<table class="d" >
                        <caption>Phone Numbers</caption>
                        <tr>
                            <th>Name</th>
                            <th>telephone number</th>
                            
                        </tr>
                        <tr>
                            <td>Sunil</td>
                            <td>0778554626</td>
                            
                        </tr>
                        <tr>
                            <td>Sunil</td>
                            <td>0778546248</td>
                            
                        </tr>
            
                        <tr>
                            <td>Kamal</td>
                            <td>0778595449</td>
                            
                        </tr>
            
                        <tr>
                            <td rowspan="2">Bimal</td>
                            <td>0778595462</td>
                            
                        </tr>
                        <tr>
                            <td>
                                0708398462
                            </td>
                        </tr>
                                       
                    </table>


11 IMAGE MAPPING

Click on the sun or on one of the planets to watch it closer:

Planets Sun Mercury Venus

<p>Click on the sun or 
on one of the planets to watch it closer:</p>
    
                    <img src="imgs/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
                    
                    <map name="planetmap">

                      <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" target="_blank">
                      <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" target="_blank">
                      <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" target="_blank">

                    </map>


12 FORMS

First name: 

Last name: 

         Age: 

    E-mail: 

Password: 

male or female: 

What is your country:

Srilanka: 

   Other: 

When is your Birthday



Choose your favourite color:



Any comments:



verify you are human



 <form action="" method="">

                        First name:&nbsp;<input type="text" name="fstnme" value="" placeholder="enter your first name" required="No" >
                        <br><br> 
                        Last name:&nbsp;<input type="text" name="lstnme" value="" placeholder="enter your last name">
                        <br><br>
                        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Age:&nbsp;<input type="number" name="" id="">
                        <br><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;E-mail:&nbsp;<input type="email" name="email" value="" placeholder="enter your e-mail adress" >
                        <br><br>
                        Password:&nbsp;<input type="password" name="pswrd" value="" placeholder="enter your password">
                        <br><br>
                        
                        male or female:&nbsp;<select name="" id="">
                             <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                        <br><br> 
    
                        <p>What is your country:</p>
    
                        Srilanka:&nbsp;<input type="checkbox" name="married" value="married">
                        <br><br>
    
                        &nbsp;&nbsp;&nbsp;Other:&nbsp;<input type="checkbox" name="unmarried" value="unmarried">
                        <br><br>
    
                        <p>When is your Birthday</p>
    
                        <input type="date" name="" id="">
                        <br><br>
    
                        <p>Choose your favourite color:</p>
                        
                        <input type="color" name="" id=""><br><br>
                        <p></p>
                        
                        <p>Any comments:</p>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
    
                        <br><br>
    
                        <input type="radio"> verify you are human
                        <br><br> 
    
                        <input type="submit" name="" value="send" style="
                        right: -40px;
                        width: 157px;  
                    "> 

                    <br><br><p></p>
                     
                    </form>


Copyright © All rights reserved | This Website is made by Thevinu Gunawardena