Q.1 Discuss the Following: * Internet Domain * A domain name is a unique name that identifies a website. For example, the domain name of the Google is "google.com." Each website has a domain name that serves as an address, which is used to access the website * Whenever you visit a website, the domain name appears in the address bar of the web browser. Some domain names are preceded by "www" while others omit the "www" prefix. * All domain names have a domain suffix, such as .com, .net, or .org. The domain suffix helps identify the type of website the domain name represents. For example, ".com" domain names are typically used by commercial website, while ".org" websites are often used by non-profit organizations * NOTE: When you access a website, the domain name is actually translated to an IP address, which defines the server where the website located. This translation is performed dynamically by a service called DNS. * Web Server * A Web server is a computer system that hosts websites. It runs Web server software, such as Apache or Microsoft IIS, which provides access to hosted webpages over the Internet. Every Web server has an IP address and possibly a domain name. For example, if you enter the URL http://www.google.com in your browser, this sends a request to the Web server whose domain name is google.com. * Any computer can be turned into a Web server by installing server software and connecting the machine to the Internet. * IP Address * An IP address, or simply an "IP," is a unique address that identifies a device on the Internet or a local network. It allows a system to be recognized by other systems connected via the Internet protocol. There are two primary types of IP address formats used today — IPv4 and IPv6. * TCP * TCP/IP is the suite of communications protocols that is used to connect hosts on the Internet and on most other computer networks as well. It is also referred to as the TCP/IP protocol suite and the Internet protocol suite. * TCP/IP was originally designed for the UNIX operating system, and it is built into all of its descendants (i.e., Unix-like operating systems), including Linux and other OS * TCP/IP takes its name from its two main protocols: transmission control protocol (TCP) and Internet protocol (IP). TCP operates at the transport layer, i.e., the middle layer in the seven layer OSI reference model. This layer is responsible for maintaining reliable end-to-end communications across the network. IP, in contrast, is a network layer protocol, which is the layer just below the transport layer. * It is a freely available protocol and not a secret protocol that is owned by a single company. * It is compatible with virtually all modern operating systems. * It is also compatible with virtually all types of computer hardware and network configurations. * It is a routable protocol, which means that it can determine the most efficient path for every packet. * It provides reliable data delivery. Reliable means that it can guarantee that the data is delivered to its intended destination. * Telnet * Telnet is a terminal emulation program for TCP/IP networks such as the Internet. The Telnet program runs on your computer and connects your PC to a server on the network. You can then enter commands through the Telnet program and they will be executed as if you were entering them directly on the server console. This enables you to control the server and communicate with other servers on the network. To start a Telnet session, you must log in to a server by entering a valid username and password. Telnet is a common way to remotely control Web servers. * DNS * Short for Domain Name System (or Service or Server), an Internet service that translates domain names into IP addresses. Because domain names are alphabetic, they're easier to remember. The Internet however, is really based on IP addresses. Every time you use a domain name, therefore, a DNS service must translate the name into the corresponding IP address. For example, the domain name www.example.com might translate to198.105.232.4.

* Virtual Domain * Frequently the term Domain is used instead of Virtual Domain, and a lot of people use the two terms interchangeably. If you want to be picky, then "domain" should only be used when an entire server is dedicated to one IP number and one domain, and "virtual domain" when many domain names share the same IP number.

However, these days very few people are that picky.

Domain names used to be just memorable nicknames for hard to remember IP numbers, but now they are also used to subdivide the server space identified by an IP number. * InterNIC * The Internet Network Information Center, or InterNIC, was officially established in 1993 by the US National Science Foundation. InterNIC was responsible for domain name and IP address allocation. Later in 1998, InterNIC, along with IANA, were put under the control of the Internet Corporation for Assigned Names and Numbers (ICANN). ICANN was contracted by the US Department of Commerce to undertake the role of managing various Internet-related tasks. * InterNIC was accessible at internic.net and contracted out the various tasks of registration, directory, and database services to three companies: Network Solutions, AT&T, and General Atomics. Q.2 What is HTML? What are paired and singular tags?
HTML is a markup language for describing web documents (web pages). * HTML stands for Hyper Text Markup Language * A markup language is a set of markup tags * HTML documents are described by HTML tags * Each HTML tag describes different document content
In HTML there are two types of tag 1. Paired Tag: 2. Unpaired Tag:

Paired tag:
A tag is said to be a paired tag in the text is placed between a tag and its companion tag.
In paired tag first tag is called opening and second is Closing tag.
e.g. <i> example.com</i>
Unpaired tag:

A tag without closing tag is called Unpaired tag. It is also called as stand-alone tag or singular Tag.
e.g. <br>, <hr>

Q.3 Discuss the formatting tags with the help of html page
Formatting elements were designed to display special types of text: * Bold text * <p><b>This text is bold</b>.</p> * Important text * The HTML <strong> element defines strong text, with added semantic "strong" importance. * <p><strong>This text is strong</strong>.</p> * Italic text * <p><i>This text is italic</i>.</p> * Emphasized text * The HTML <em> element defines emphasized text, with added semantic importance. * <p><em>This text is emphasized</em>.</p> * Marked text * The HTML <mark> element defines marked or highlighted text: * <h2>HTML <mark>Marked</mark> Formatting</h2> * Small text * The HTML <small> element defines small text: * <h2>HTML <small>Small</small> Formatting</h2> * Deleted text * The HTML <del> element defines deleted (removed) text. * <p>My favorite color is <del>blue</del> red.</p> * Inserted text * The HTML <ins> element defines inserted (added) text. * <p>My favorite <ins>color</ins> is red.</p> * Subscripts * The HTML <sub> element defines subscripted text. * <p>This is _subscripted text</p> * Superscripts * The HTML <sup> element defines superscripted text. * <p>This is ^{superscripted} text</p> Q.4 Create a webpage using Ordered, unordered and Definition List: * An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles):
<ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li>
</ul>
* An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:
<ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> * A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd>
</dl>
Q.5 Write the code for the following: i. Preston University a. Islamabad b. Lahore ii. Coffee c. Milky d. Black
<!DOCTYPE html>
<html>
<ol type="i"> <li>Preston University</li>
<ol type="a"> <li>Islamabad</li> <li>Lahore</li>
</ol>

<li>Coffee</li>
<!--<ul style="list-style-type:disk">-->
<ol type="a"> <li>Tea</li> <li>Milk</li>
</ul>
</body>
</html>
Q.6 Discuss Image tags with all attributes:
How to insert an image?
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Attributes
Attribute | Value | Description | align | Top, bottom, middle, left, right | Specifies the alignment of an image according to surrounding elements | alt | text | Specifies an alternate text for an image | border | pixels | Specifies the width of the border around an image | crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas | height | pixels | Specifies the height of an image | hspace | pixels | Specifies the whitespace on left and right side of an image | ismap | ismap | Specifies an image as a server-side image-map | longdesc | URL | Specifies a URL to a detailed description of an image | src | URL | Specifies the URL of an image | usemap | #mapname | Specifies an image as a client-side image-map | vspace | pixels | Specifies the whitespace on top and bottom of an image | width | pixels | Specifies the width of an image |

Q.7 Create table containing Students name and their registration number. Using padding and row span attributes and table caption.
<table border="1" cellpadding="20" cellspacing="0">
<caption>Monthly savings</caption> <tr> <th>Name</th> <th>Regd No.</th> </tr> <tr> <td>January</td> <td rowspan="2">$50</td> </tr> <tr> <td>February</td> </tr> <tr> <td colspan="2">$80</td> </tr>
</table>

Q.8 Discuss Internal and external document reference and also map links.
<html>
<head>
<title> Test Page </title>
</head>
<body>
<img src="1.0x0 (1).jpg" width="176" height="162" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="67,97,123,147" href="http://www.oeconsultant.co.uk"> </map> body> Q.9 Create a 2 rows frame page with scrolling and border attribute. Also develop web pages that will be placed in respective frames.
<html>
<frameset rows="50,*,50%" > <frame src="frame_a.htm" frameborder="1" scrolling="yes"> <frame src="frame_b.htm"frameborder="1" scrolling="yes">
</frameset>
</html>
Open the link page in target frame name
<html>
<body>
<iframe width="100%" height="300px" src=“http://www.oeconsultant.co.uk" name="iframe_a"></iframe>
<p>
<a href=" http://www.oeconsultant.co.uk" target="iframe_a">Education Consultant</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html> Q.10 What are frames? Create the index page of a web site using page frames.
<! DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="http://www.google.com" target="main_page">Google</a>
<br /><br />
<a href="http://www.microsoft.com" target="main_page">Microsoft</a>
<br /><br />
<a href="http://news.bbc.co.uk" target="main_page">BBC News</a>
</body>
</html>
Target:
* target="_top" (The linked page opens in the entire window)
<p><a href="about.html" target="_top">About</a></p> * target="_self" (The linked page opens in the same frame)
<p><a href="allflowers.html" target="_self">allflowers</a></p> * target="_parent" (The linked page opens in the parent frame)
<p><a href="example_t03.html" target="_parent">Parent frame</a></p> * target="FrameName" (The linked page opens in the named frame)
<ul>
<li><a href="example_t04.html" target="top">B frame</a></li>
<li><a href="example_t04.html" target="main">C frame</a></li>
</ul>
Q.11 Discuss Java Script document object model * DOM is an object-oriented model that describes how all elements in an HTML page are arranged. * It is used to locate any object in your HTML page (a unique address). * The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document. * Window object − Top of the hierarchy. It is the outmost element of the object hierarchy. * Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page. * Form object − Everything enclosed in the <form>...</form> tags sets the form object. * Form control elements − The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes.

Q.12 Create Form with text, check, radio and submit button for mailto:
<form>
Textbox First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname">
<br>

Radio button
<input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other
First name:<br> checkbox
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br>
Submit Button <input type="submit" value="Submit">
</form>

Mailto
<form action="mailto:youraddr@domain.tld" method="GET"> <input name="subject" type="text" /> <textarea name="body"></textarea> <input type="submit" value="Send" />
</form>

Q.13 How many types of Style sheet we can use? Create a simple sheet to style h1 and p tags.
There are types of style sheet: * External style sheet * With an external style sheet, you can change the look of an entire website by changing just one file! * <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
* Internal style sheet * An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. * body { background-color: lightblue;
}

h1 { color: navy; margin-left: 20px;
}
* Inline style * An inline style may be used to apply a unique style for a single element. * <h1 style="color:blue;margin-left:30px;">This is a heading.</h1> * <style> h1 { color: navy;
}
p{ color: green;
}
</style> Q.14 What is CGI? Why is it used? Discuss its working through a diagram. * CGI is a specification for transferring information between a World Wide Web server and a CGI program. A CGI program is any program designed to accept and return data that conforms to the CGI specification. The program could be written in any programming language, including C, Perl, Java, or Visual Basic. Need? * There are innumerable caveats to this answer, but basically any Webpage containing a form will require a CGI script or program to process the form inputs. * The primary benefit to using CGI rather than browser based scripting is that you can be sure that all of your readers (with very few exceptions) will be able to use the program. Java, JavaScript, and ActiveX can all be turned off within the browser, and many browsers simply don't support them. Also, it is becoming more common for company firewalls to disallow these technologies to work in their system (often for security or bandwidth reasons). Because CGI scripts are run on the external Web server, they are not limited by browser or firewall limitations.

For example, suppose you have a form that lets people comment on your Web pages. You want the comments emailed to you and you want to automatically generate a page and send it back to your reader. 1. The reader fills out your form and clicks the "Submit" button. The METHOD controls how the information typed into the form is passed to your program. It can be "GET" or "POST". Other ways for a reader to run a program are by providing a direct link to the program without allowing the reader to supply any variables through a form, or by using the <ISINDEX> tag 2. When AOLserver gets a request for a URL that maps to a CGI directory or a CGI file extension, it starts a separate process and runs the program within that process. The AOLserver also sets up a number of environment variable within that process. 3. The program runs. The program can be any type of executable program. For example, you can use C, C++, Perl, Unix shell scripts, or Fortran.
In this example, the program takes the comments from the form as input and sends them to you as email. 4. Any information the program passes to standard output is automatically sent to the AOLserver when the program finishes running. 5. The server adds any header information needed to identify the output and sends it back to the reader's browser, which displays the output. Q.15 What is Perl language? Discuss the following with respect to Perl. Write the step to install Perl.
Perl is a general-purpose programming language originally developed for text manipulation and now used for a wide range of tasks including system administration, web development, network programming, GUI development, and more. * Strings * Strings are scalar. There is no limit to the size of the string, any amount of characters, symbols, or words can make up your strings * When defining a string you may use single or double quotations, you may also define them with the q subfunction. * Variables * Variables are the reserved memory locations to store values. This means that when you create a variable you reserve some space in memory. * Based on the data type of a variable, the interpreter allocates memory and decides what can be stored in the reserved memory. Therefore, by assigning different data types to variables, you can store integers, decimals, or strings in these variables. * Arrays * An array is a variable that stores an ordered list of scalar values. Array variables are preceded by an "at" (@) sign. To refer to a single element of an array, you will use the dollar sign ($) with the variable name followed by the index of the element in square brackets. * Steps to Install: * Make sure you do not have any version of Perl already installed. (see video below for details), If you do uninstall it through the Window control panel "add/remove programs", if you still have a C:\Strawberry folder rename or delete it * Download and install Padre, the Perl IDE/editor (Strawberry Perl version 5.12.3 comes as part of the install, you also get many other useful CPAN modules as well). * Log out and back in (or reboot) * Go to your start menu, then click the "Perl command" link * To confirm the installation worked type: * perl -v * Install App-cpanminus by typing in: * cpan App::cpanminus Q.16 Discuss the creation of a table. Discuss all attributes of table tag.
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr>
</table>

Attributes Attribute | Value | Description | align | Left, center, right | Specifies the alignment of a table according to surrounding text | bgcolor | rgb(x,x,x)
#xxxxxx
colorname | Specifies the background color for a table | border | 1, 0 | Specifies whether or not the table is being used for layout purposes | cellpadding | pixels | Specifies the space between the cell wall and the cell content | cellspacing | pixels | Specifies the space between cells | frame | Void, above, below hsides, lhs rhs, vsides box, border | Specifies which parts of the outside borders that should be visible | rules | None, groups, rows, cols, all | Specifies which parts of the inside borders that should be visible | sortable | sortable | Specifies that the table should be sortable | summary | text | Specifies a summary of the content of a table | width | Pixels % | Specifies the width of a table |

Q.17 Write a java script to show odd numbers up to 41, using a function.
<html>
<body>
<script type="text/javascript">
/* <![CDATA[ */ var i; for (i = 0; i < 42; i++) if ((i % 2) == 1) document.writeln(i);

/* ]]> */
</script>
</body>
</html>

Q.18 Develop a simple calculator using forms.

<html>
<head></head>
<body>
<h3>Simple Calculator</h3>
<br/>
<form Name="calc">
<table border=2>
<tr>
<td colspan=4><input type=text Name="display"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input type=button value="C" OnClick="calc.display.value=''"></td>
<td><input type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input type=button value="/" OnClick="calc.display.value+='/'"></td>
</tr>
</table>
</form>
</body>
</html>
Q.19 What is DIV? Show four images on a page using DIV tag.

The <div> tag defines a division or a section in an HTML document.
The <div> tag is used to group block-elements to format them with CSS.

<html>
<head></head>
<body>
<div style="color:#0000FF"> <img src="1.0x0 (1).jpg"><img src="1.0x0 (1).jpg"><br>
<img src="1.0x0 (1).jpg"><img src="1.0x0 (1).jpg"> </div>
</form>
</body>
</html>

Q.20 Discuss the difference between GET and POST method.
Two commonly used methods for a request-response between a client and server are: GET and POST. * GET - Requests data from a specified resource * POST - Submits data to be processed to a specified resource
Some other notes on GET requests: * GET requests can be cached * GET requests remain in the browser history * GET requests can be bookmarked * GET requests should never be used when dealing with sensitive data * GET requests have length restrictions * GET requests should be used only to retrieve data
Some other notes on POST requests: * POST requests are never cached * POST requests do not remain in the browser history * POST requests cannot be bookmarked * POST requests have no restrictions on data length

Q.21 How pages can be linked together? Discuss all possible means by providing examples. Also discuss internal and external document references.
Links are found in nearly all web pages. Links allow users to click their way from page to page. * <A HREF = "http://www.google.com/">Google Search Engine</A> * <A HREF="pages/about.html">About this site</A> * < a href="http://www.facebook.com/"><img src="images\Facebook-Footer-300x99.png" width="120" height="50" align="left">
The target Attribute
The target attribute specifies where to open the linked document. Target Value | Description | _blank | Opens the linked document in a new window or tab | _self | Opens the linked document in the same frame as it was clicked (this is default) | _parent | Opens the linked document in the parent frame | _top | Opens the linked document in the full body of the window | framename | Opens the linked document in a named frame |

HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
To make a bookmark, you must first create the bookmark, and then add a link to it.
<h2 id="tips">Useful Tips Section</h2>
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Write a java script to display table of a user specified number with a bigger font.
<html>
<head> </head>
<body>
</script> <script type='text/javascript'> var num=prompt("enter Number", "0")//prompt user to enter the number var num=parseInt(num);//parse the num to number var i=0; for(i=1; i<10; i++){ document.write(num +"x" +i+"="+num*i+"<br>"); } document.write("</table>"); </script> </body>
</html>

Q.22 Write a JavaScript to display your name in different font sizes using for loop
<head>
<title>Font</title>
</head>
<body>
<script language="JavaScript"> for (i=1; i <= 7; i++)
{
document.write ('<font size= '); document.write (i); document.write (' > Ali</font> <br>');
}
</script>
</body>
</html> Q.23 Write HTML tags to display background images as well as some foreground images.
<!DOCTYPE html>
<html>
<body background="1.0x0 (1).jpg">
<img src="1.0x0.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>

1.
Discuss the structure of DHTML file. Provide the example to discuss the importance of different sections of a file. 2. Create a form to accept student name and marks of two subjects. 3. Display the computed result on a page using suitable java scripts. 4. How pages can be linked together? Discuss all possible means by providing examples. 5. Developed frame set to host three different web pages. Also develop web pages that will be placed in respective frames. 6. Discuss the web page HTML object hierarchy 7. Create a form to accept student name and marks of two subjects. Display the computed result on a page using suitable java script. 8. Discuss the structure of DHTML file. Provide the example to discuss the importance of different sections of a file. 9. Write a java script to display table of a user specified number with a bigger font 10. Create a web form to accept library book data. Show some validation using java scripts. 11. Create a table to display student result of three subjects with total and percentage. Make us of cell padding. 12. Define Web client software