Langauge To Create Web Pages)

You might also like

Download as rtf, pdf, or txt
Download as rtf, pdf, or txt
You are on page 1of 17

HTML(Hyper Text Markup Language is a Langauge to create Web Pages) History of HTML: HTML 1.0-2.

0 (1989) ---> HTML 3.0(1995) ---> HTML 4.0(1998) ---> HTML 4.01(1999) ---> XHTML 1.0(2000) --> ??? Elements of HTML: Two types of elements are there Container element and Empty element <html> <head> <title> My first web page</title> </head> <body> Contents of Web Page............<br> Next line goes here..................<br> if you want to start a new para use<p> next para starts.........................

</body> </html> Here html , head,title, body are container element as this can contain other elements or contents but <br>,<p> are empty elements as they dont have any closing tag and they do not contain other elements Using Attributes: <body bgcolor=blue text=white> A blue web page with white writings..... </body> Here bgcolor is the attribute of the element body and blue is the value of the attribute bgcolor text is the attribute and white is the value Including Images: <img src="d:\mypic.gif" height=300 width=300> Developing Tables:

Tables can be used in many ways. They can be used to present information and data or to neatly layout part of, or a whole webpage, serving as a template for an entire website. Laying out your webpage using tables will be stressful when changing the entire layout of your website. We will only use tables to present data and information, and to neatly organize our photographs for a photo album. We will also change how our tables will look. It is important to know the basic format used to create a table, yet there must be text in the TR and TD tags for a table to completely appear. Tables have a default size, and overlapping text will be wrapped to the next line. <html> <body > <bgsound src="F:\songs\Track01.mp3"> <table border="1" bgcolor="khaki"> <tr> <td><b>STUDENTS OF BIOINFORMATICS</b></td>

</tr> <tr> <td>Student Name</td> <td>Student's Address</td> <td>Student's Phone Number</td> </tr> <tr> <td>Arabindo Ghosh</td> <td>Jorhat</td> <td>9706105673</td> </tr> <tr> <td>Bhaba Krishna Das</td> <td>Jorhat</td> <td>9864904034</td> </tr>

</table> </body> </html> Forms: A form is as it sounds: a page where a user can provide information about a various topic or person. There is much to forms, and I will break each control down so that you may learn all the controls. Then we will create a very simple e-mail form, that doesn't send any information, but it will go to a "Sent" page just for your learning experience. You must first know the basic format of forms, and the format below is what we'll be using. We will replace information when necessary to get our forms to work. <form name="formname" method="how information is sent" action="action after form is submitted">

CONTROLS </form> Controls allow users to interact with the form's given information, whether it is a question, a thought, etc. What you put in the VALUE attribute would be sent to you, following what the user inputed. My quizzes uses a control, called a radio control. These are used when the user is required to provide only one answer, and cannot be undone unless more radio controls are provided, or a Reset button is provided, which will will learn about. A dot fills in this control. <form name="formname" method="how information is sent" action="action after form is submitted"> <input type="radio" name="radio" value="Radio">Radio </form> It's opposite control, which will allow you to choose multiple selections, or undo a selection without needing multiple controls, is a checkbox control. A checkmark fills in this control.

<form name="formname" method="how information is sent" action="action after form is submitted"> <input type="checkbox" name="checkbox" value="Checkbox">Checkbox </form> The next control allows a user to type in information in a rectangle. This control, which only is a one row control, is called a textfield control If you want to provide the user with security, you can mask the text they type in. This means that instead of seeing their text as they type it, they will see asteriks instead. Just replace "text" with "password". <form name="formname" method="how information is sent" action="action after form is submitted"> <input type="text" name="textfield" value="textfield"> </form>

The field below gives you an example of masking text.

When your users need a bigger field to fill out information, a text area control is needed. <form name="formname" method="how information is sent" action="action after form is submitted"> <textarea>Textarea</textarea> </form> NOTE: You should not fill in textfields or text areas. Allow the user to do this him/herself. The final control is the most important. It is simply an input button control. Input buttons are responsible for sending the information to you. The Submit button sends the form, while the Reset button clears every field in case the user made a mistake and wishs to correct it. Both buttons are demonstrated below, although they will not carry out their functions. You'll have to wait until the e-mail form to see this in effect. <form name="formname" method="how information is sent" action="action after form is submitted">

<input type="submit" name="submit" value=" Submit "> </form> <form name="formname" method="how information is sent" action="action after form is submitted"> <input type="reset" name="reset" value=" Reset "> </form>

There isn't anything new in the form except a few attributes, which are pretty self-explainatory. Before creating this e-mail form, you should create another web document and include "Your message has been sent." in the body. Name this file email2.htm as it will be used to return a confirmation telling the user their e-mail has been sent. <form name="email" action="email2.htm" method="post"> <center>E-mail Form<p></p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;If you want a response, you must complete every field of this email message. All fields required are marked by "*." <p></p> Full Name: <input type="text" name="Full Name:" size="20" maxlength="20"> * <br>E-mail Address: <input type="text" name="EMail Address:" size="40" maxlength="40"> * <p></p>Type your comment, suggestion, etc. here. <p></p><textarea cols="60" rows="5" name="Message:"></textarea> * <p></p> <p></p><input type="submit" name="Submit" value=" Submit ">&nbsp;&nbsp; <input type="reset" name="Reset" value=" Reset "> </center> </form> The Effect will like this:

Frames: HTML allows us to divide a web page into a set of frames, where each frame is capabale of displaying one embeded webpage. To create a set of frames in a page , use the <frameset> and <frame> elements. <frameset rows="30%,*,20%"> <frame name="header" src="hearder.html"> <frame name="content" src="content.html">

<frame name="footer" src="footer.html> </frameset> Adding Sound : <html> <body > <bgsound src="F:\songs\Track01.mp3"> </body> </html> Adding Vedio: <html> <body > <img dynsrc="F:\transportar\cd1\MPEGAV\AVSEQ01.D AT" height=300 width=300>

</body> </html> Including Java Script:

Basic Concepts of XML: During the late 1960s, industry groups such as railroads, airlines and shipping companies realise that processing a large number of documents resulted in significant delays in settlement and product delivery. As a result Electronic Data Interchange (EDI) emaerged. In the initial stages, two trading partners agreed upon a common format for exchanging data electronically. However, this again resulted in a need for maintaining a different set of standards for each trading partner. This led to an agreement between organizations to jointly developed standards for EDI messages.

What is EDI ? EDI refers to the process of exchanging documents in a standard format between two computer systems. Benefits of EDI . With EDI paper transaction can be replaced with electronic transmissions, thus saving time and minimizing errors. Data can be exchanged at any time.Related business expenses such as postage, printing and telephone calls can also be reduced. Limitations of EDI . Though EDI standards provide an effective solution for carrying e-commerce transactions, they have not been widely accepted due various limitations. 1. Rigid transaction set. 2. Fixed business rules. 3. Implementing EDI standards can be expensive for small and medium size business

unit when compare to large business units because vans are costly. Limitations of EDI has compelled us to go for XML. Introduction to XML: eXtensible Markup Language (XML) is a text base markup language that enables us to store data in a structure format by using meaningful tags. The eXtensible implies that you can extend your ability to describe a document by defining meaningful tags for your application. XML is a cross platform Hardware and Software independent markup language. XML allows computers to store data in a format that can be interpreted by anyother computer system and therefore XML can be used to transfer structured data between hetrogeneous systems. Advantages of XML over EDI: XML does not require high price VAN.

Customized business rules :- XML enables us to store data in a structured format by allowing us to create customize tag. Easy to interpret :- XML documents can be easily interpreted by target systems using a parser. Platform independent. Advantages of XML: In addition to the above adavantages of XML over EDI, XML has some more advantages : 1. It provides a way of creating domain specific vocabulary. Unlike HTML,XML allows you to create your own tags based on the requirement of applications. 2. Smart searches :- Implementing a search on HTML document is a difficult task. However, the flexibility in XML to create user define tags enables it create smart search engine. 3. Granular Updates: In case of HTML documents when the data needs to be refreshed, the entire page needs to be refreshed becaused the page fetches information from the server.

4. User Selected View of Data : We can display XML documents in a required format by using Cascading Style Sheets(CSS) and eXtensible Style Sheet(XSL).

You might also like