• Jquery

    jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today.

  • JAVASCRIPT

    It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed.

  • HTML

    HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets .

  • HTML5

    HTML5 is a core technology markup language of the Internet used for structuring and presenting content for the World Wide Web. As of October 2014 [update] this is the final and complete fifth revision of the HTML standard of the World Wide Web Consortium (W3C). The previous version, HTML 4, was standardised in 1997.

Saturday, May 2, 2015

Difference Between XML and HTML

Saturday, May 02, 2015 – by EARTH PICTURES 0
XML was designed to describe data.
HTML was designed to display data.

XML is not a replacement for HTML.

XML and HTML were designed with different goals:
  • XML was designed to describe data, with focus on what data is
  • HTML was designed to display data, with focus on how data looks
HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything


Maybe it is a little hard to understand, but XML does not DO anything.
The following example is a note to Tove, from Jani, stored as XML,

<note>
  <to>Tove</to>
  <from> Jani </from>
  <heading>Reminder</heading>
  <body>
   Don't forget me this weekend!
  </body>
</note>

The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.
But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it.

With XML You Invent Your Own Tags


The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are "invented" by the author of the XML document.
That is because the XML language has no predefined tags.
The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.).
XML allows the author to define his/her own tags and his/her own document structure.

XML is Not a Replacement for HTML


XML is a complement to HTML.
It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to describe data, while HTML is used to format and display the data.
My best description of XML is this:
XML is a software- and hardware-independent tool for carrying information.


HTML and XHTML

Saturday, May 02, 2015 – by EARTH PICTURES 0

XHTML is HTML written as XML.

What Is XHTML ?

  1. XHTML stands for EXtensible HyperText Markup Language
  2. XHTML is almost identical to HTML
  3. XHTML is stricter than HTML
  4. XHTML is HTML defined as an XML application
  5. XHTML is supported by all major browsers

Why XHTML ?

Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the HTML rules).

<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>

Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked up correctly 
(be "well-formed").
If you want to study XML, please read our XML tutorial.
By combining the strengths of HTML and XML, XHTML was developed.
XHTML is HTML redesigned as XML.

Most Important Differences from HTML : 


Document Structure

  1. XHTML DOCTYPE is mandatory
  2. The xmlns attribute in <html> is mandatory
  3. <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

  1. XHTML elements must be properly nested
  2. XHTML elements must always be closed
  3. XHTML elements must be in lowercase
  4. XHTML documents must have one root element

XHTML Attributes

  1. Attribute names must be in lower case
  2. Attribute values must be quoted
  3. Attribute minimization is forbidden

<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.

The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Title of document</title>
</head>

<body>
  some content 
</body>

</html>

XHTML Elements Must Be Properly Nested


In HTML, some elements can be improperly nested within each other, like this

<b><i>This text is bold and italic</b></i>

In XHTML, all elements must be properly nested within each other, like this

<b><i>This text is bold and italic</i></b>

XHTML Elements Must Be In Lower Case


This is wrong,

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct,

<body>
<p>This is a paragraph</p>
</body>

How to Convert from HTML to XHTML

  • Add an XHTML <!DOCTYPE> to the first line of every page
  • Add an xmlns attribute to the html element of every page
  • Change all element names to lowercase
  • Close all empty elements
  • Change all attribute names to lowercase
  • Quote all attribute values.



HTML Table with a Border Attribute

Saturday, May 02, 2015 – by EARTH PICTURES 0
If you do not specify a border for the table, it will be displayed without borders.

 Ex:

 <!DOCTYPE html>
<html>
<body>

 <table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

 </body>

</html>

  " The border attribute is on its way out of the HTML standard! It is better to use CSS "
To add borders, use the CSS border property,
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

 </body>

</html>

An HTML Table with Collapsed Borders :


If you want the borders to collapse into one border, add CSS border-collapse.

Ex:

Add style tag inside the header tag.

<style>
    table, th, td {
                      border: 1px solid black;
                     border-collapse: collapse;
                         }
</style>

HTML Table with Cell Padding :


Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
Ex : 

Add style tag inside the header tag.

<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
</style>

Table Headings :


Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered,

Ex :

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>

To left-align the table headings, use the CSS text-align property,

Ex : 

Add style tag inside the header tag.

<style>
th {
    text-align: left;
}
</style>

HTML Table with Border Spacing :


Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property.

Ex:

Add style tag inside the header tag.
<style>
table {
    border-spacing: 5px;
}
</style>

Table Cells that Span Many Columns :


To make a cell span more than one column, use the colspan attribute,

Ex:

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>


Table Cells that Span Many Rows :


To make a cell span more than one row, use the rowspan attribute,

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>


HTML Table With a Caption :


To add a caption to a table, use the <caption> tag.

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>


" The <caption> tag must be inserted immediately after the <table> tag. "

Subscribe to: Posts (Atom)