Assignment No:1 Web Programming
Assignment No:1 Web Programming
Assignment No:1 Web Programming
(INT302) Submitted To: Avinash Kaur Submitted On:16th Sep 2012 Submitted By: Praveen Kumar 11006461 B41 2012-2013
Q1. What are the various technologies used to develop web based applications? JavaScript: It is a well developed language based on prototyping scripting to create webbased applications and dynamic websites. It is categorized as the client-side scripting where user interfaces and interactive applications are created.
PHP: PHP is a web development technology to produce dynamic web pages. PHP can be deployed on most Web Servers and also as a standalone shell on almost every operating system and it is platform independent. It is categorized in server-side scripting for document centric applications.
Perl: It is mainly used to make interfaces for passing data like submitted form for any other document to a web server. It also is open-source. It is used for server side scripting applications. Eg. Gmail etc.
ASP.NET: Microsofts ASP.NET uses VisualBasic.NET and C#.NET together to create web-based applications. It also deals with database (SQL Server) for its operations. This type is used for social applications e.g. amazon.com. It is categorized in the customer facing applications.
HTML:
Hypertext Markup Language are the most commonly used to create web pages.it is developed and maintained by World Wide Web consortium(W3C).HTML forms the building blocks of all the websites.
Q2: Develop a web page for Online Tutorial with following features 1. Index of Tutorial- When user click on the Index topic, focus automatically navigates to corresponding topic. 2. Background Colour- RGB Values are 100,210,10 respectively 3. Horizontal Line: Height 10 pixels and Width 600 pixels. 4. Structure according to HTML 5. 5. User can directly send Email with a single click on link. MAIN PAGE: <!doctype html> <head><title>Web tutorial</title></head> <body background="w.gif"> <p style="color:rgb(100,210,10);text-align:center"><font size=40 face=algerian><font color="blue">HTML Tutorial</font></p> <hr> <p "style=text-align:center;color=white"><pre><b><font size=72><font color="red"">With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.</p> <a href=main.html>click here to start</a></b> </body></html>
SUB Page I: <!doctype html> <head><title>main web page</title></head> <body bgcolor=orange> <a href=intro.html><font size=14 face=algerian color=green>INTRODUCTION</a> <br> <a href=tags.html>TAGS</a><br> <a href=feed.html >FEEDBACK</a><br> <a href=cont.html>CONTACT</a></font> </body> </html>
1: Introduction Page: <!doctype html> <head><title>Introduction</title></head> <body bgcolor=rgb(222,000,890)> <p style="color:white;text-align:center"><font face=playbill size=12>HyperText Markup Language (HTML) is the main markup language for displaying web pages and other <br>information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content.<br> HTML tags most commonly come in pairs like <font>and</font> , although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.
The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display <br>the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive <br>forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML webpages. Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer <br>of both the HTML and the CSS standards, encourages the use of CSS over explicitly presentational HTML markup. </p>
</body></html>
2:TAG PAGE: <!doctype html> <head><title>Tags</title></head> <body bgcolor=#708090> <marquee bgcolor=#662243 behavior=alternate><p><font face=playbill size=20 color=green> This page includes some of the basic tags in html.On clicking the tags u will be getting redirected to the specific page of the tags.</font></p> </p></marquee><br><br> <a href=doctype.html>!DOCTYPE</a> < >< >< >< >< > <a href=body.html>BODY</a>< >< >< > <a href=title.html>TITLE</a>< >< >< > <a href=head.html>HEAD</a>< >< >< >< > <a href=header.html>HEADER</a>< >< >< >\ </body>
</html>
Sub Pages In Tag: !Doctype Page: <!doctype html> <head><title>!doctype</title></head> <body><font face=WIDE LATIN> <marquee scrollamount=9 behavior=scroll><b><i><font face=playbill size=15 color=blue>!doctype</marquee> <p ><font face=playbill size=6>A Document Type Declaration, or DOCTYPE, is an instruction that associates a particular SGML or XML document (for example, a webpage) with a Document Type Definition (DTD) (for example, the formal definition of a particular version of HTML). In the serialized form of the
document, it manifests as a short string of markup that conforms to a particular syntax. The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching", wherein the DOCTYPE in a document served as text/html determines a layout mode, such as "quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGML-based, uses the DOCTYPE only for mode selection. Since web browsers are implemented with specialpurpose HTML parsers, rather than general-purpose DTD-based parsers, they don't use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in common browsers <p> <br> EXAMPLE: <BR> <textarea rows=9 cols=80><!DOCTYPE html> <html> <title>Title of the document</title> <head> </head>
Body Tag Page: <!doctype html> <head><title>BODY tag</title></head> <body bgcolor=#FAEBD7> <p><font face=playbill size=15> <p align=center>BODY </p> <p>The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. </p> <br> Example: <br> <textarea rows=9 cols=45> <html> <head> <title>Title of the document</title> </head>
Title tag Page: <!doctype html> <head><title>TITLE TAG</title></head> <body bgcolor=#F0FFF0><p align=center ><font size=14> TITLE TAG</p> <font face=playbill size=6 color=#191970> <p>The tag is required in all HTML documents and it defines the title of the document.<br>
The title element: <br> <ul> <li>defines a title in the browser toolbar</li><br> <li>provides a title for the page when it is added to favorites</li><br>
<li>displays a title for the page in search-engine results</li><br></ul> </p> example:<br><br> <textarea rows=15 cols=50> <html>
Head Tag Page: <!doctype html> <head><title>TITLE TAG</title></head> <body bgcolor=#F0FFF0><p align=center ><font size=14> TITLE TAG</p> <font face=playbill size=6 color=#191970> <p>The tag is required in all HTML documents and it defines the title of the document.<br>
The title element: <br> <ul> <li>defines a title in the browser toolbar</li><br> <li>provides a title for the page when it is added to favorites</li><br>
<li>displays a title for the page in search-engine results</li><br></ul> </p> example:<br><br> <textarea rows=15 cols=50> <html>
Header Tag Page: <!doictype html> <head><title>HEADER TAG</title></head> <body bgcolor=#9ACD32><font face=playbill size=8> <p align=center>HEADER TAG</p> <p>The h1 to h6 tags are used to define HTML headings.
h1 defines the most important heading. h6 tag the least important heading.</p><br>EXAMPLE:<br><br> <textarea row=9 cols=50> <h1>This is heading 1</h1> <h2>This is heading 2</h2>
<h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </textarea> <br> <a href=tags.html>BACK</a> </body></html>
<body bgcolor=#F4A460> NAME : <input type=text value=name><br><br> Email: <input type=text value=mail@mail.com><br> <br><br> Comment:<br><br> <textarea cols=50 row=9> </textarea> <br> <a href=assgn.html><input type=button value=submit></a> </body> </html>
4: Contact Us Page: <!doctype html> <head><title>Contact Us</title></head> <body bgcolor=#708090> <p><h1> contact us on: <br> Ph:09988764776<br Ph:009977665543 <br> <a href=Mailto: pravi@gnail.com>mail</a>
Q3) What do you understand by Element, Attributes and Events? Explain with the help of example. [5] Ans. Elements: HTML elements are entities specifying how HTML documents should be built, and what kind of content should be placed in what part of an HTML document. Elements are placed inside angle braces which becomes a tag. e.g. <p>Hi! It shows a paragraph in my HTML document.</p> <p> tag is used here for inserting a paragraph in HTML document.
Attributes: Any additional feature of styling behaviour to a tag is known as its attribute. e.g
<table border=5> . . . </table> Here border is an attribute to <table> tag when defining the border width of a table in HTML.
Events: The attributes which trigger some action when we interact to them are known as events. HTML consists of many type of events including keyboard, mouse, frameset, images events etc.
E.g. <span onselect=runfunction();>New function</span> Q4. <!DOCTYPE html > <body> <table border="1" > <tr > <th colspan="5">Sample Table</th> </tr><tr> <td colspan="5" ><table><tr><td>Inner Table</td></tr></table></td> </tr><tr> <td colspan="2" rowspan="2"> Corner</td> <td colspan="4">Head1</td> </tr><tr> <td rowspan="2" >Head2</td> <td colspan="2" >Head3</td> </tr><tr>
<td >head4</td> <td >head5</td> <td >head6</td> <td >head</td> </tr><tr> <td>A</td> <td rowspan="2" bgcolor="#FFFF66">Too tall</td> <td bgcolor="#339900"> <ul> <li>List can be table data</li> <li>Images can be table data</li> </ul> <td colspan="2">Two Wide</td> </tr><tr> <td></td> <td> <form><p>Select your favorite icecream</p> <select> <option>chocolate</option> </select> <input type="button" value="OK" name="submit" /> <input type="button" value="cancel" /></p> </form> </td> <td>No border little table</td> <td>multiline item</td> </tr></table> </body></html>