XML and Internet History~

What is XML?

XML was designed to transport and store data while HTML was designed to display data.

What is XML?

The Difference Between XML and HTML

XML	HTML
to transport and store data, with focus on what data is	to display data, with focus on how data looks
carrying information	displaying information

How to Use XML?

What is an XML Element?

An XML element is everything from (including) the element's start tag to (including) the element's end tag.

An element can contain:

• other elements
• text
• attributes
• or a mix of all of the above.

<bookstore>

  <book category="CHILDREN">

    <title>Harry Potter</title>

    <author>J K. Rowling</author>

    <year>2005</year>

    <price>29.99</price>

  </book>

  <book category="WEB">

    <title>Learning XML</title>

    <author>Erik T. Ray</author>

    <year>2003</year>

    <price>39.95</price>

  </book>

</bookstore>

In the example above, <bookstore> and <book> have element contents, because they contain other elements. <book> also has an attribute (category="CHILDREN"). <title>, <author>, <year>, and <price> have text content because they contain text. 

If we try to tabulate the example, below is the result:

BOOKSTORE

Book Category	Title	Author	Year	Price
CHILDREN	Harry Potter	J K. Rowling	2005	29.99
WEB	Learning XML	Erik T. Ray	2003	39.95

XML Tree

An Example XML Document

XML documents use a self-describing and simple syntax:

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).

The next line describes the root element of the document (like saying: "this document is a note"):

<note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):

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

And finally the last line defines the end of the root element:

</note>

You can assume, from this example, that the XML document contains a note to Tove from Jani.

Don't you agree that XML is pretty self-descriptive?

XML Documents Form a Tree Structure

XML documents must contain a root element. This element is "the parent" of all other elements.

The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree.

All elements can have sub elements (child elements):

<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>

The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements have children. Children on the same level are called siblings (brothers or sisters).

All elements can have text content and attributes (just like in HTML).

Example:

The image above represents one book in the XML below:

<bookstore>
  <book category="COOKING">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>
  <book category="CHILDREN">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>
  <book category="WEB">
    <title lang="en">Learning XML</title>
    <author>Erik T. Ray</author>
    <year>2003</year>
    <price>39.95</price>
  </book>
</bookstore>

The root element in the example is <bookstore>. All <book> elements in the document are contained within <bookstore>.

The <book> element has 4 children: <title>,< author>, <year>, <price>.

We are currently living in such a vast IT developed world. Talking about the history of internet though, people might not be very interested, but just for the purpose of getting knowledge, we are about to simplify the history of internet inventions through out it centuries.

the timeline is summerized as shown in the figure below:

Well.. the fact we shared here is somehow simple, for further and deeper information please refer to this web site boring timeline (may be) ..


And finally," History is where we began".

HTML

Introduction

HTML stands for Hypertext Markup Language is a standardize system for tagging files to achieve font, color, graphic and hyperlink effects on World Wide Web pages.The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. It makes the web page more interactive with all the images, links and tables input.

One thing to be reminded, the browser does not display the HTML tags but uses the tags to interpret the content of the page. So you guys don't have to worry about it!

Let's start with the simplest tagging input.

1. Open the note pad and type..

<html>
<body>

<h1>My first heading</h1>

<p>My first paragraph.</p>

</body>
</html>

2. Press File>Save as..> at File name section, type intro.html>at Save as Type, choose All File>Ok

3. This will be the outcome of the above HTML.

Now that you have learnt about HTML, lets get working.

A webpage would be more interesting with a few image or even gif in it. however the question is how to insert in into your webpage?

The format is quit simple n constant, just type 

 into your Notepad 

 However,  replace the "image gif" with the link of your selected picture

Still doesn't understand? or are you still confused?

• IMG = stands for "image." It announces to the browser that an image will go here on the page. Yes, the image will pop up right where you write in the image tag.

• SRC =  stands for "source." This again is an attribute, a command inside a command. It's telling the browser where to go to find the image. Again, it's best for you to place the images you want to use in a subdirectory called "images". This way you can call for the image by name with just the subdir name in front of it, like this:/images/imagename.gif. You could also direct the source to some other place online, such as an image you have stored on Photobucket, for instance, by using the full URL of the image, such as http://www.photobucket.com/youraccount/imagename.jpg. Right now, let's just get it to work.

image.gif =  is the name of the image. Notice it's following the same type of format as your HTML documents. There is a name (image) then a dot and then there is a suffix (gif).

• ALT = stands for "alternate text". This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view your image what the image is about. For example a disabled user using a screen reader, or dare I mention it, Search Engines. When you mouse over the image, the alternate text pops up.

"some text" is where you put the text describing your image.

• WIDTH = stands for just that, the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.

• HEIGHT = stands for, as you might guess, the height of the image in pixels. Again, the height can be just about anything, but generally will be less than the height of the web browser.

Now, how to put a moving image?

 It is basically the same as inserting an image but with a slight change in its format. just enter the moving image link at the same place you have entered you image link.

Well then, Good Luck inserting image in your webpage~

Link HTML.

As the other HTML specific codes, there are some important notation to be known.

* HTML links are actually HTML anchors constructed using anchor tags (<a>).
eg : <a>I am a link</a> will result as "I am a link "

* A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location.

Please refers to the image below:

HTML Tables

Tables are defined with the <table> tag.

A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc

.

Table Example

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

without cell padding

Row 1, cell 1	Row 1, cell 2
Row 2, cell 1	Row 2, cell 2

---

HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.

To display a table with borders, specify the border attribute:

<table border="1">

<tr>

<td>Row 1, cell 1</td>

<td>Row 1, cell 2</td>

</tr>

</table>

---

HTML Table Headers

Header information in a table are defined with the <th> tag.

All major browsers display the text in the <th> element as bold and centered.

<table border="1">

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

with Cell Padding

Header 1	Header2
Row 1, cell 1	Row 1, cell 2
Row 2, cell 1	Row 2, cell 2

Header 1	Header2
Row 1, cell 1	Row 1, cell 2
Row 2, cell 1	Row 2, cell 2

Maple : What Is Maple and How To Use It?

          Maple is a very useful software to illustrate and display mathematical data in a very creative way. However for something to be fully utilized, it still depends on how much the users understand the techniques involved in inserting and evaluating data.As for that, we are trying to guide all the beginners who wish to work with Maple efficiently. Well, it is not for you to feel worry or unsecured of being left behind as Maple is totally interactive and we believe that you can totally master it in just a few simple lessons.

The workspace

• The workspace occupies most of the Maple window. It can contain one ormore documents or worksheets, held as tabs, in which you will type Maplecommands and see the results. The Quick Help navigator also appears inthe workspace.

The palettes

• The palettes give you easy access to a wide range of mathematicalnotation. Clicking on the triangle to the left of a palette will reveal or hidethe items within that palette. Clicking on a palette item will insert it into the current document or worksheet.

 The title and status bars

• The title bar, at the top of your Maple window, gives the version of Maple that you are using.
• The status bar, at the very bottom of the window, is used by Maple to display information about some operations and about your system usage.

 The menu bar, toolbar and context bar

• Directly underneath the window's title bar are three rows of buttons. The entries on these rows depend on whether you are entering text or Maple input, working on a spreadsheet or displaying graphics.
• The top row is the menu bar. Some of the items on this bar will become active only in an appropriate context.
• Underneath the menu bar is the toolbar. A single click on a toolbar button will execute the associated command.
• Underneath the toolbar is the context bar. As you selected Document mode, you will be in the default ‘2-D Math’ mode and the context bar will beset for this mode. 

To open a new worksheet

Click on the File menu, select New from the sub-menu, and click on Worksheet mode.

    When you do mathematics with maple, all you have to do is, insert all the related numbers and symbols in the correct order and maple will give you the desired solution in a zest!! It is just the matter of the correct method used to computerized your mathematical problem justified by Maplesoft.

         As for the simplest method, you can simply type all those mathematical data by using your keyboard. There are "+" for addition, "-" for subtraction," *" for multiplication," /" for division or even used in your fractional form, "%" symbolizing the previous answers, and many more. However these symbols are limited in their usage. Frankly said, we can only use them for the simple equations.

For example:

> 2-3+4/5*6^7;

 Needed to be reminded that you will need to include the semi colon sign for maple to execute the expression with answers shown.

 

> 2-3+4/5*6^7;

Syntax Essentials

PUNCTUATION	EXPLAINATION	EXAMPLE
;	All commands end with ";" or ":". If a command ends with a semicolon, the output of that command is displayed.	sqrt(3.1); Calculate the square root of 3.1 and displays it.
;	All commands end with ";" or ":". If a command ends with a semicolon, the output of that command is displayed.	a;=3+9: Calculate 3 plus 9 and assigns it to the variable a. The process is not displayed.
?	Using the question mark is another way of accessing the help files.	?plot Opens the help file related to the plot command. (This is the standard mechanism for plotting two dimensional graphs,
%	This is the ditto operator. In older releases, the ditto operator is %.	sqrt(3.1): %+2; Calculate the square root of 3.1 but doesn't show it. Then adds 2 (to sqrt(3.1)) and displays this.

Note that Maple is case sensitive so that "X" and "x" are different symbols, as are "Pi" and "pi". (Maple use "Pi" with a capital "P" for the mathematical pi.)




People have different way to learn new things. I  suggest you to watch these videos. Here are some videos found on how to use Maple.for more detail  information you can take a look at these video.

1. From Maple 12 website,

http://www.maplesoft.com/support/training/videos/quickstart/MapleQuickStart.aspx

2. From Youtube.com,