Homework Title / No. : ____________________________________________Course Code : _________

Course Instructor : ______________________ Course Tutor (if applicable) : ____________

Date of Allotment : _____________________ Date of submission : ___________________

Student’s Roll No._______________________ Section No. : _________________________ Declaration:
I declare that this assignment is my individual work. I have not copied from any other student’s work or from any other source except where due acknowledgment is made explicitly in the text, nor has any part been written for me by another person. Student’s Signature : _____________
Evaluator’s comments: _____________________________________________________________________ Marks obtained : ___________ out of ______________________
-------------------------------------------------
Content of Homework should start from this page only:
-------------------------------------------------

Q1: How the HTML documents are structured? Discuss according to the logical and physical elements. (5)
Ans: An HTML 4 document begins with a DOCTYPE declaration that declares the version of HTML to which the document conforms. The HTML element follows and contains the HEAD and BODY. The HEAD contains information about the document, such as its title and keywords, while the BODY contains the actual content of the document, made up of block-level elements and inline elements. A basic HTML 4 document takes on the following form:
<!DOCTYPE html>
<HTML>
<HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> <UL> <LI>A list item.</LI> <LI>Another list item.</LI> </UL> </BODY>
</HTML>

Elements and Tags
Elements are the structures that describe parts of an HTML document. For example, the P element represents a paragraph while the EM element gives emphasized content.
An element has three parts: a start tag, content, and an end tag. A tag is special text--"markup"--that is delimited by "<" and ">". An end tag includes a "/" after the "<". For example, the EM element has a start tag, <EM>, and an end tag, </EM>. The start and end tags surround the content of the EM element:

<EM>This is emphasized text</EM>

Elements can be can be grouped into two categories: physical and logical.

Physical Elements
A physical tag controls how the characters are formatted. For example, you might display some characters as bold or italic. The examples of some physical tags are: HTML code | Output | This is <b>bold</b> | This is bold | This is <i>italic</i> | This is italic | This is <small>small</small> | This is small | H₂O | H2O | Sep 5^th 2012 | Sep 5th 2012 | This is <u>underlined</u> | This is underlined | <title>This is title</title> | This is title |

Logical Elements
A logical tag describes how the text is being used, not necessarily how it is formatted. Some examples are: Tag | Description | Render as | <cite> | citation | emphasizes the text in italics | <code> | code sample | Displays some characters as code usually in Courier font (i.e., fixed-width font) | <dfn> | definition | italics | <em> | emphasis | emphasizes the text in some way usually as italic. | <kbd> | code sample | fixed-width font | <samp> | code sample | fixed-width font | <strong> | strong | Text is emphasized more strongly than usually as bold. | <var> | program variable | italics |
-------------------------------------------------

Q2: Make a web page that contains the links at the header and footer for navigating to other pages and in the middle part available options should be: a) Index of Tutorial- When user click on the Index topic, focus automatically navigates to corresponding topic. b) User can directly send Email with a single click on link. c) Use two div tags to place side by side the data d) Name and Use the tags used for the highlighting the particular text and displaying the meaning of the text? e) Which tags are preferred to use for the particular text which have been told by some famous personalities and used in the web page? (5)
Ans: The complete HTML code for the above situation is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Article Example</title>
<style>
body { margin: 0px auto; width: 1000px; border: 1px solid #000; background-color: #ccc; height: auto;
}
header { background-color: #888; color: #fff; text-align: center;
}
nav { padding: 8px; font-size: 22px; } nav a { text-decoration: none; color: #666; } nav a:hover { text-decoration: underline; } table ,h1 ,h2,h3,h4 { margin: 0; padding: 0; }
#leftbar { width: 200px; float: left; margin: 0;
}
#leftbar nav a { display: block; text-align: center; }
#rightbar { width: 799px; float: right; margin: 0; padding: 0; border: 1px solid #000; border-right: 0px;
}
article { margin: 10px; border: 1px dashed #000; min-height: 300px;
}
article p { padding-left: 5px; } footer { margin: 0; padding: 5px; background-color: #888; color: #fff; text-align: center;
}
footer a { color: #fff; text-decoration: none; } footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<header style="padding: 20px;">
<h1>This is header</h1>
</header>
<nav>
<a id="top"></a>
<a href="#">Services</a>&nbsp;
<a href="#">About us</a>&nbsp;
<a href="#">Contact us</a>&nbsp;
</nav>
<div id="leftbar">
<header>
<h2>Index</h2>
</header>
<nav>
<a href="#art1">Article 1</a>
<a href="#art2">Article 2</a>
<a href="#art3">Article 3</a>
<hr>
<a href="mailto:handa.nitin1@gmail.com?cc=nitinhanda60@live.com&amp;subject=hello&amp;body=Hello%0AHow,%20are%20u?">Send Mail</a>
</nav>
</div>
<div id="rightbar">
<article>
<a id="art1"></a>
<header>
<h2>Article Title</h2>
</header>
<p>This is first article. <br><br>
<dfn id="HTML">HTML</dfn> stands for Hypertext Markup Language. It is language to design to web pages.
</p>
</article>
<article>
<a id="art2"></a>
<header>
<h2>Article Title</h2>
</header>
<p>This is second article. <br><br>
According to <cite>Mahatma Gandhi</cite>
<blockquote>An eye for an eye makes the whole world blind.</blockquote>
</p>
</article>
<article>
<a id="art3"></a>
<header>
<h2>Article Title</h2>
</header>
<p>This is third article.
</p>
</article>
</div>
<div style="clear: both;"></div>
<footer>
<a href="#">Privacy Policy</a>&nbsp;
<a href="#">Sitemap</a>&nbsp;
<a href="#top">Top<b>&uarr;</b></a>
<br>&copy; 2012
</footer>
</body>
</html>

Snapshot Index of Tutorial Header Different Articles

Footer
D. We use <dfn> tag for highlighting the particular text and displaying the meaning of the text. We can also us <DL> we have multiple defenitions. Ex of <def> tag is
<dfn id=”javascript>Javascript></dfn> is client side scripting language used to make web page interactive.
O/p: Javascript is client side scripting language used to make web page interactive.
E. For for the particular text which have been told by some famous personalities we prefer <cite>
<em> tags . for example
According to <cite>Bhagwat Geeta</cite>:<br><em>Soul never dies</em>.
-------------------------------------------------
O/P: According to Bhagwat Geeta
-------------------------------------------------
Soul never dies.
-------------------------------------------------

Q3: List the various technologies or programming languages available used to develop web based applications? Categorize according to their usage.
Ans: There are many Web technologies to develop and design web based applications. We will Categorize them in 2 categories: 1. Markup Languages 2. Programming Languages Markup Languages
Markup is used to in text and word processing documents to describe how a document should look when displayed or printed. The Internet uses markup to define how Web pages should look when displayed in a browser or to define the data contained within a Web document.

HTML
HTML stands for Hypertext Markup Language. HTML is the primary markup language that is used for Web pages. HTML tells the browser what to display on a page. For example, it specifies text, images, and other objects and can also specify the appearance of text, such as bold or italic text.
XML
XML stands for Extensible Markup Language. Similar to HTML, XML is a markup language designed for the Internet. However, unlike HTML, which was designed to define formatting of Web pages, XML was designed to describe data. You can use XML to develop custom markup languages.

XSLT
XSLT is an abbreviation for XSL Transformations. XSLT uses the Extensible Stylesheet Language (XSL), which you use to define the appearance of an XML document or change an XML document into another kind of document—XML, HTML, or another markup language format.

CSS
CSS stands for cascading style sheets. Cascading style sheets provide the ability to change the appearance of text (such as fonts, colors, spacing) on Web pages. Using CSS, you can also position elements on the page, make certain elements hidden, or change the appearance of the browser, such as changing the color of scroll bars in Microsoft Internet Explorer.

DHTML
DHTML stands for Dynamic HTML. DHTML combines cascading style sheets (CSS) and scripting to create animated Web pages and page elements that respond to user interaction.

Programming Languages and Technologies
Programming languages enable you to create custom applications and add functionality that is not already part of an application. On the Internet, programming languages enable you to create visual animation, respond to user actions, validate forms, interact with databases, and provide e-commerce solutions.
Programming languages come in two flavors: interpreted and compiled. Most scripting languages are interpreted, which means that you write the code and the browser or server understands what to do with it. Compiled languages require an added step that translates the code into machine language code, which is then stored in a separate file with either a .dll or .exe file name extension.

JavaScript (JScript)
JavaScript is an interpreted scripting language commonly used on the Internet for creating Web pages that respond to user actions, such as when a user moves a mouse pointer over an image or clicks a form button. Combined with HTML and CSS, JavaScript allows you to create Dynamic HTML pages.
JavaScript is generally used for client-side scripting. As a result, users can easily view JavaScript code along with the HTML code in a page. JavaScript works best for visual animation (such as changing an image when a user moves the mouse pointer over it) or for validating form fields. Various browsers may implement the JavaScript scripting objects differently, but most popular browsers support JavaScript.
VBScript
VBScript is an interpreted scripting language that is a subset of Microsoft Visual Basic. As a result, the structure and syntax are similar to Visual Basic, making VBScript an easy scripting language to learn.
Although VBScript can be used for client-side scripting in Internet Explorer, most other browsers do not include a VBScript interpreter. Therefore, VBScript is most commonly used in server-side scripting for Web pages that use classic ASP.

PHP
PHP is an interpreted scripting language that is used as an alternative to ASP on UNIX-based servers. PHP originally derived from Personal Home Page Tools, now stands for PHP: Hypertext Preprocessor. PHP is commonly used to access databases and provide server-side form and e-commerce processing. As with ASP code, PHP code is contained within the body of an HTML page.
PHP code typically runs on Linux-based and UNIX-based Web servers, and can run on Windows-based servers with an installed interpreter.

C#
C# (pronounced "see sharp") is a compiled, object-oriented programming language that is commonly used for Web applications that leverage the Microsoft .NET Framework. C# is derived from the C programming language and is used for server-side processing of ASP.NET Web applications.
C# Web applications are generally compiled into DLL files that are stored on the Web server along with any accompanying Web pages. With the weight of the .NET Framework behind it, C# developers can create extremely powerful ASP.NET Web applications.
Visual Basic .NET
Visual Basic .NET is the next generation of the Visual Basic programming language. Visual Basic .NET is a compiled, object-oriented language that leverages the .NET Framework for developing powerful ASP.NET Web applications.
Visual Basic .NET uses the same syntax as earlier versions of Visual Basic but also leverages the namespaces and classes that are part of the .NET Framework. As with VBScript and earlier versions of Visual Basic, Visual Basic .NET is a relatively easy programming language to learn.
Java
Java is a compiled object-oriented programming language that was designed for use on the Internet. In 1995, Sun Microsystems designed the Java programming language and introduced it to Web developers as a way to include animation and dynamic elements in Web pages. Java syntax is similar to C++ but is considered easier to learn.
Java code is generally used for server-side processing but can also be run on the client by using the Java virtual machine.
-------------------------------------------------

Q4: Create a ADVANCED TABLE by following the structure in given figure. Write down the code snippet and paste the snapshot of output. (10)
Ans: The complete HTML code for the above situation is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style> body,th,td { height: 30px; margin: 0; padding: 0; font-size: 22px;
}
th,.cen { text-align: center; }
</style>
</head>
<body>
<table width="70%" border="1">
<caption>SAMPLE TABLE</caption>
<thead>
<tr><td colspan="5" class="cen">SAMPLE Table</td></tr>
<tr><th colspan="5">Inner Table</th></tr>
<tr><th rowspan="2" colspan="2" width="18%">CORNER</th>
<th colspan="3">Head 1</th></tr>
<tr><th rowspan="2">Head 2</th>
<th colspan="2" width="18%">Head3</th></tr>
<tr><th width="9%">Head4</th>
<th width="9%">Head5</th>
<th width="9%">Head6</th>
<th width="9%"></th></tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td rowspan="3" style="background-color: #ff0;">Two Tall</td>
<td style="background-color: #080;">
<ul>
<li>Lists can be table data</li>
<li>Images can be table data</li>
</ul>
</td>
<td colspan="2">Too Wide</td></tr>
<tr>
<td width="9%"></td>
<td class="cen"><table align="center" style="border: 1px solid #000;" width="100%">
<tr><td style="height: 50px;">
Select Your Favourite Ice Cream</td></tr>
<tr><td><Select name="icecrtype" style="width: 250px; padding-left: 40px; height: 28px;">
<option value="Choc">Chocolate</option>
<option value="vanl">Vanilla</option>
<option value="orng">Orange</option>
<option value="stb">Strawberry</option>
</select></td>
</tr>
<tr><td><button value="OK" style="width: 50px; height: 45px; font-size: 16px;">OK</button>
<button value="Cncl" style="width: 80px; height: 45px; font-size: 16px;">Cancel</button></td></tr>
</table>
<br/>
</td>
<td class="cen">No border <strong>Little</strong> Table</td>
<td class="cen">Multiple line item</td>
</tr>
</tbody>
</table>
</body>
</html>

Snapshot

-------------------------------------------------