Monthly Archives: June 2015

Simple blog creation

Uncategorized

I’ve created my own blog with the help of  www.getbootstrap.com website.I’ve learned the things how these blogs are implemented and executed.

Anyhow I tried to implement my blog in a better manner. I’ve learned how header, footer, grid, navigation, pager classes work in the <div> tags.

Here I’ve provide my code for the simple blog site.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Home page-Slash/prog</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="blog1.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="#">Home</a>
          <a class="blog-nav-item" href="#">New Technologies</a>
          <a class="blog-nav-item" href="#">Alumini</a>
          <a class="blog-nav-item" href="#">New sessions</a>
          <a class="blog-nav-item" href="#">About</a>
        </nav>
      </div>
    </div>

    <div class="container">

      <div class="blog-header">
        <h1 class="blog-title">The SlashProg Technology Blog</h1>
        <p class="lead blog-description">The official website fo Blog for Slashprog.</p>
      </div>

      <div class="row">

        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">Simple Intro About Slash Prog</h2>
            <p class="blog-post-meta">January 1, 2011 by <a href="#">Ramachandran</a></p>

            <p>This blog that previews about who is the founder SlashProg.How these people work together and acheive this greater heights. How the linux GNU changes thoses lifestyles.</p>
            <hr>
            <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
            <blockquote>
              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <h2>Heading</h2>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
            <h3>Sub-heading</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <pre><code>Example code block</code></pre>
            <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
            <h3>Sub-heading</h3>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <ul>
              <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
              <li>Donec id elit non mi porta gravida at eget metus.</li>
              <li>Nulla vitae elit libero, a pharetra augue.</li>
            </ul>
            <p>These folowing peoples are newly hired.They got acheived and they touched the milestone of Voucherita website into an 100 million viewers per day. .</p>
            <ol>
              <li>Sairam-A man who devotes his life to achieve and now he is one of the important admin of the slash prog. .</li>
              <li>Yuvraj-He is shown his acheivement in the inspiring people who willing and play with the programms.</li>
              <li>Sridharan-Most dedicated man with the ultimate developing of web tool in the rapid manner.</li>
              <li>Shankar-A man who enjoyed with the coding and help the people to develop the code.</li>
            </ol>
            <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">CEO of Slash Prog</h2>
            <p class="blog-post-meta">December 23, 2010 by <a href="#">Murali</a></p>

            <p>Chandrashekar Babu is the CEO of slashprog techologies <a href="#">A man who passionate and who enjoy with self learnable development and taught what he learn.</a>, He founded the Slashpprog technologies in the earler of 2010 . Later that he is develops and then he booked up a small level company which is ran by himself only. Later days he had an idea about Voucherita and he develops the code with the help of those peoples and make a revenue. Still he is passionate and teach people who unaware the Knowledge of programming and who interested in this Field .</p>
            <blockquote>
              <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </blockquote>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
          </div><!-- /.blog-post -->

          <div class="blog-post">
            <h2 class="blog-post-title">New Technologies</h2>
            <p class="blog-post-meta">December 14, 2013 by <a href="#">Yuvraj</a></p>

            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <ul>
              <li>Python Programming from Beginners to advanced.</li>
              <li>Linux Basics.</li>
              <li>Ruby on Rails.</li>
              <li>HTML,CSS,JavaScript</li> 
            </ul>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
            <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
          </div><!-- /.blog-post -->

          <nav>
            <ul class="pager">
              <li><a href="#">Join</a></li>
              <li><a href="#">Next</a></li>
            </ul>
          </nav>

        </div><!-- /.blog-main -->

        <div class="col-md-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>About</h4>
            <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
          </div>
          <div class="sidebar-module">
            <h4>Archives</h4>
            <ol class="list-unstyled">
              <li><a href="#">March 2014</a></li>
              <li><a href="#">February 2014</a></li>
              <li><a href="#">January 2014</a></li>
              <li><a href="#">December 2013</a></li>
              <li><a href="#">November 2013</a></li>
              <li><a href="#">October 2013</a></li>
              <li><a href="#">September 2013</a></li>
              <li><a href="#">August 2013</a></li>
              <li><a href="#">July 2013</a></li>
              <li><a href="#">June 2013</a></li>
              <li><a href="#">May 2013</a></li>
              <li><a href="#">April 2013</a></li>
              <li><a href="#">January 2011</a></li>
              <li><a href="#">May  2010</a></li>
            </ol>
          </div>
          <div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">Google+</a></li>
            </ol>
          </div>
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Slash prog Blog template built for <a href="http://shankarslashprog.com">Slashprog</a> by <a href="https://twitter.com/mdo">@shank</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

 

 

 

 

Screenshot from 2015-06-24 22:16:14 Screenshot from 2015-06-24 22:16:20 Screenshot from 2015-06-24 22:16:29 Screenshot from 2015-06-24 22:16:34

Bootstrap: some functionalities

Uncategorized

Then here we will see the  overview about the grid system in the boot strap class.
Grid system that provides different type of view in the mobile phones to larger displays.
It divides into four types.
1.xs(for phone)
  2.sm(for tablet)
  3.ld(for desktop)
  4.mg(for larger desktop)

Basic Structure of a grid .It provides upto 12 columns in a row.
So that we can split these column into 3*4 or 2*6 or 4&8 or 4,4,4,etc
we can also have many ways to split to using the div class.

Example program :

 
 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Grid Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Grid Values with equal columns!</h1>
  <p>View and realize how it works.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:lightgreen;">.Home</div>
    <div class="col-sm-4" style="background-color:magenta;">.About</div>
    <div class="col-sm-4" style="background-color:cyan;">.How it works</div>
  </div>
</div>
</body>
</html>

 

Click here for the output:

Bootstrap’s Default Settings:

Bootstrap’s global default font-size is 14px, with a line-height of 1.428.

This is applied to the <body> and all paragraphs.

In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default).

 Resource:http://www.w3schools.com/bootstrap/bootstrap_typography.asp

Here we go ahead with the bootstrap typography/text and with it samples.

Here we can see the multiple tags and it uses.

Header…—–>  (h1 to h6)-like wise he HTML it can be defined.Here h1 has a high pixel rate.36 px to h1 12px.
mark… ——> It is used to create a high light text in the content of the body.
abbrivation —> abbr tag is used to show an abbrevations for a acronym that select in the web page.
INA–> Indian National Army

blockquote —–> blockquote tag is used for text show the blockquoted content.
blockquote -reverse–> reverse of the begining of the content. Normally all contents starts with left, but in the reverse it can be started from right side.
description element–> dl tag is used to define

 

 

Boot strap with container class example.

Uncategorized

Bootstrap uses html  elements, css propties in the webpage creation and it uses HTML5 doctype.
<…!doctype..> that refers to the HTML5 file to the current web browsers.When ever we begin with the webpage we should include the !doctype along with thelanguage attribute and the character set.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">/*meta is data about the data, utf-8 is widely used character set */
  </head> 
<body>
  This is the introductory webpage of create web page using Bootstrap .
</body>
</html>

 

we can see the websites in our mobilephone too. so that it is essential to create a website that viewable for mobile devices too.
Bootstrap 3 is for responsive for mobile devices. So that , mobile-styles is one of the part of the majore core framework.
when we need proper rendering, zooming actions it should be added the meta tag(<meta>)under head tag.<head>

 
<meta name="viewport" content="width=device-width, initial-scale=1">

resouce:http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

 

width-device-width is for set the width of the device has its own depending on the device.
initial-scale=1 the basic zooming level is 1 for referring web browser when it is loaded first.

Two types of containers are available in the boot strap.
.containers
.container-fluid

.container –> refers to the static container(i.e fixed).
.container-fluid refers to the full width container.It spanning the entire width of the viewport.

container classes are not nestable.

we should insert this class into the div tags.
at the same time we can also include the maxcdn for rapid access of our website.

. container class  example:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap  container Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Sample page for Bootstap</h1>
    <p>Here I provide some of the example for page using container.Most of the websites created by using the container classes and the container-class fluid.
    it has a simple differnt among these containers, we can see how it is done. </p>
</div>

</body>
</html>



Screenshot from 2015-06-18 22:25:46



.container-fluid example:

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Sample page for Bootstap</h1>
    <p>Here I provide some of the example for page using container.Most of the websites created by using the container classes and the container-class fluid.
    it has a simple differnt among these containers, we can see how it is done. </p>
</div>

</body>
</html>


                  Screenshot from 2015-06-18 22:34:06

Bootstrap for creating a own customized webpage

Uncategorized

Bootstrap:
Bootstrap is a easier tool for front-end framework for elegant, pretty, charming web page desigining.
It includes HTML,CSS desigining templates for creating all for website.
(i.e)Forms, image carousel, typography,buttons, tables, lists, navigation, links,etc.
It provides the web developer to create a responsive webpages.
Responsive webpage is nothing but a website that themselves flexbile for smartphone to larger computer displays.

Bootstrap History:
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and released as an open source product in August 2011 on GitHub.

In June 2014 Bootstrap was the No.1 project on GitHub!

resouce:www.w3schools.com

We may have question about, why we use bootstrap:
It is easy of use, and it is flexible with modern webbrowser and , also provides the pretty view to the smartphones to larger desktops.
Anyone have a basic knowledge can use bootstrap to create a website on ownbehalf.

It supports the modern webbrowser like Google Chrome, Mozilla Firefox, Opera, Safari,Internet explorer 8.

we  can more learn about bootstrap from the below website:

http://getbootstrap.com/getting-started/

Bootstrap CDN:

If you don’t want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provide CDN support for Bootstrap’s CSS and JavaScript. Also include jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

One advantage of using the Bootstrap CDN:
Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

Resource:http://www.w3schools.com/bootstrap/bootstrap_get_started.asp

Forms

Uncategorized 
All the examples are the below are static type.(i.e)while you type the code in the text editor and 
it will show in the web browsers.
Here we going to see how to get the user input while we execute  it.
These are used in the forms. 

<html>
<head><title>Forms</tilte></head>
<body>
<h1><font face="Freeserif" color="lightorange">Application form for the Slash prog technologies </font></h1>
<form method="post">
Input tag is used to get the user input as name, numbers

Name:<input type="text" size="25" name="name">
Mob.No:<input type ="text" size="13" mobno="Mob.no">
Languages:<input type="text" size="25"lang="lang">

</body>
</html>

We will move to get learn the radio button. Radio buttons are used to select this one or that one 
(example: yes or no buttons)
We can see the radio button by the below examples.

Yes:<input type="radio" name="name" value="yes"/>
No:<input type="radio" name="name" value="No"/>

Then we will learn about check boxes. Check boxes are used for while selecting more than one value in the list.
<input type="checkbox" name="Languages" value:"Python"/>
<input type="checkbox" name="Languages" value:"Ruby"/>
<input type="checkbox" name="Languages" value:"perl"/>

These are the value are going to submit using submit button and reset values using "cancel" button.
input type="Submit" value="Submit"/>
<input type="reset" value="cancel"/>
select tag is used to select the value from the drop down menu.This tag should me end tag.
<select name="Smart Phones" size="6">
<option>Asus</option>
<option>Nokia</option> 
<option>MI</option>
<option>Apple</option>
<option>Samsung</option>
<option>Karbon</option>
</select>
When we need multiple values then we put select
select name="Smart Phones" size="6" multiple>


Screenshot from 2015-06-16 20:41:27 Screenshot from 2015-06-16 20:41:50

Simple HTML website creation

Uncategorized

Here I can try to create a simple website using minimal amount of tags used . It will be scalable and it is under constructing……

Here is the copy of the program and its output in the webpage..Just go through and comment over it to improve the website..



<html>
<body>
<font bg color="purple">
<head><title>My Website</title></head>

<strong><center><font size=15>This is My Website.</center></strong></font>
<p><font color="maroon" size=12 face="Century SchoolBook">Here I'm going to create a new web Page using HTML and it will be appear on the browser page.
Here we can find the contents between the tags and we can learn html in the easier manner. </font>

<address>My address is :<br>
Sankara Mahadevan,<br>
56, Nellai-Tiruchendur road,<br>
Pudhukudi-Srivai Taluk,<br>
Tuticorin-628621<br>
</address><br><br>
You can contact me anytime in the following number<br><br>
<b><font size=6 face="times new roman"color="green">9894965014</font></b><br><br>
You can also send mail to the Following email id or clicking the below link to send your comments or drop message to it.<br><br>
<br>
<a href="www.gmail.com">email Id:sankar@slashprog.com<br><br></a>

<font color="brown"size=6 face="ariel">We can specify<b> bold</b> and <b><i>Italic</i></b> fonts in a certain manner using some of the tags.
We can list of these tags and its usage in the a folowing table.<br><br>

<table border=4 width="50%", height="30%" bgcolor="white">

<tr>
<th>S.no</th>
<th>Tag</th>
<th>Usage</th>
</tr>

<tr>
<td>1.</td>
<td>html</td>
<td>Specifies the given file is HTML type file.</td>
</tr>
<tr>
<td>2.</td>
<td>body</td>
<td>Specifies and shows what content within the File</td>
</tr>

<tr>
<td>3.</td>
<td>head</td>
<td>It specifies the heading</td>
</tr>

<tr>
<td>4.</td>
<td>title</td>
<td>Specifies the title of the web page</td>
</tr>

<tr>
<td>5.</td>
<td>br</td>
<td>Specifies the break of the line.(no end tag should needed this one)</td>
</tr>

<tr>
<td>6.</td>
<td>p</td>
<td>Specifies or align the bulk content in the apragraph mode like the office suite shows</td>
</tr>

<tr>
<td>7.</td>
<td>b</td>
<td>Specifies contents in the bold type font</td>
</tr>


</table>
 </body>
 </html>



	

	
	


							


	

		
				

			Links
		

		
		

			Uncategorized					

	


		

		


When we can see the links in some other websites. It is directed into another page.

Links are useful to link pages in the websites.

Here we can see the example for the link programe to specify how it works between the web pages.

File:simple.html


<html>
 <body>
 <head>Chennai</head><br><br><br><br>
 <font size=8 color=”maroon”>Chennai is the one of the biggest and most popular cities in India.
 There is a huge business happened here.Chennai is having 2nd largest Beach in the world. There is a regional temples, churches, Mosque.
 Chenai is the industrial Area for the IT industries like bigger companies having their branches like wipro, TCS, CTS.


But the education system also diversible her.
 Click here for the Rhymes for the children.
 <a href=”poem.html”>Children!Click here for enjoy with the poem</a>
 </font>
 </body>
 </html>


File:poem.html


<html>
 <body>
 <font color=”Orange” face=”Rachana”size=18>
 <center>Johny, Johny Yes papa!<br>
 Eating Sugar No papa!<br>
 Telling lies, No papa!<br>
 Open your mouth Ha ha ha!!!<br></center>
 <a href=”simple.html”>Return to the first page</a>
 </font>
 </body>
 </html>



	

	
	


							


	

		
				

			Tables Tag
		

		
		

			Uncategorized					

	


		

		


Here we can see how the tables going to represent and data should be filled in the format.
 We can specifyt he table under table tag.table heading represented as <th>tag.
 It can be ended with </th>
 Table data begin with <td> and ends with </td>
 We can also specify the border details with the Width, Height inside the table tag.
 Back ground color can specify the using bgcolor.
 Table can be ended with </table> tag.


<html>
 <body>
 <head>Home expenditure:</head><br><br>
 <title>Expenditure</title>
 <table border=5 width=”50%” height=”50%” bgcolor=”pink”>
 <tr>
 <th>S.no</th>
 <th>Product name</th>
 <th>Quantity</th>
 <th>Price</th>
 </tr>


<tr>
 <td>1.</td>
 <td>Soap</td>
 <td>8</td>
 <td>250</td>
 </tr>


<tr>
 <td>2.</td>
 <td>Rice</td>
 <td>30Kg</td>
 <td>1200</td>
 </tr>


<tr>
 <td>3.</td>
 <td>Others</td>
 <td>40</td>
 <td>1400</td>
 </tr>


<tr>
 <td>4.</td>
 <td>Total</td>
 <td>78</td>
 <td>2850</td>
 </tr>


</body>
 </html>



	

	
	


							


	

		
				

			Combined List
		

		
		

			Uncategorized					

	


		

		


When we create a main list, we an also create a sublist under the main list that is known as combined list.
 Here is an example for the combined list.


<html>
 <body>
 <head>Types of language</head>
 <title>Language</title>
 <center><font face=”EmbossedBlack” size=12 color=”Orange”>Types of lanaguage</center>
 <ol><center> <li> programming language</li>
 <li>web designing language</li></center></ol></font>
 </ol>


<ul><b>Programming laguages:<b>
 <li>Python</li>
 <li>C++</li>
 <li>C</li>
 <li>Java</li>
 </ul>
 <ul><i> Web Desigining Languages:</i>
 <li>HTML</li>
 <li>CSS</li>
 <li>Java Script</li>
 </ul>
 </body>
 </html>



	

	
	


							


	

		
				

			List Tags
		

		
		

			Uncategorized					

	


		

		


List tag..          


Here we will see how the contents are going to be shown in the list format.

There are three types of list are available.


Ordered list, Unordered list,definition list.

Ordered list:

These can list contents in  ordered manner like numbered format.

Unordered list:

These are shown the contents with the dotted list format.

Definition List:

It specified with the small title and the definition of the title.

When it should be defined , it should have <li>start and </li> end tag.li for list index.

These are only for the Ordered list and Unorder list. It wil nlot used for the Definition list.

Ordered list can be start with <ol> and end with the </ol>

Unordered List can be start with <ul>   and with the </ul>

Defiition list that start with <dl>and ends with </dl>

Within the definition list it can be specified with the title and the definition of the title.

When we specify the defintion title we add <dt>into the begining and </dt> in the end of the title.

and also the definition of the title is specified by <dd> with the starting of the defintion and it ends with the </dd>tag.


<html>
 <body>
 <head><title>List of the tag</title> </head>
 <center>All are my Friends
 <ol><font face=”EmBossedBlack” size=10 color=”Megenda”>
 <li>SHANKAR</li>
 <li>BALA</li>
 <li>SHUNMUGAM</li>
 <li>RAJA</li>
 </ol></center></font>


My liked places are:
 <font face=”PlainBlack” size=8 color=”#5432789″>
 <ul><li>Srivaikundam</li>
 <li>Pudhukudi</li>
 <li>Tirunelveli</li>
 <li>Chennai</li>
 </ul></font>
 <font face=”URW Chancery L” size=8 color=”#4567788909″>
 <dl>
 <dt>Python:</dt>
 <dd>Python is the programing language that anyone can learn easily and code it intheir own way</dd>
 <dt> HTML:</dt>
 <dd>HTML is the language that is used to create a web page using the simple coding.</dd>
 </font>
 </dl>
 </body>
 </html>