1. Write the procedure to compose, send and receive an email with attachments?Sending an E-mail:

To Send an e-mail , sender must have email-id(user name and password), receiver’s email-id, message , subject of the mail and location of a file to be attached etc.,Opening Mail box:

1. You must open your email account provider such as gmail, yahoo or rediff etc., 2. Login into your email-id by using user name and password.3. Select Login button.

Composing an email:1. After logged in , click on compose 2. Enter address of the receiver(s) in the "To" field 3. You must write the subject that means email is for what purpose in the “subject”field4. You must write in the contents of your email in message box.5. If you want to attach files , click on attach and give the location of a file to be attached.

Sending email: 1. After composing the email2. click on "Send" button to send the composed mail.

a. If everything is correct , then you will be noticed thati. “your message has been sent, view message”

Receiving an E-mail   : To receive an e-mail , receive must have email-id (user name and password),1. You must open your email account provider such as gmail, yahoo or rediff etc., 2. “Login” into your email-id by using user name and password.3. After logged in, click on inbox to see all the Emails you have received.4. After opening the Inbox you will see the person and the subject who have sent you the mail.5. Clicking on it will open the mail and you can see the data which have been sent to you.6. If an attachment is there, then you can view or download by clicking.7. There will be a reply option in case if you want to reply to the sender.8. you can save the message and attachments if you want.

1 b) Write the procedure to clear the browser history?Clearing browser history in various browsers:Internet Explorer:Step 1: Open the web browser “Internet Explorer”.Step 2: Select “Internet Options” from “Tools” menu.Step 3: Select “General” tab from the opened dialog box.Step 4:Select “Clear History” button from “Histroy” part of the “General” tab.Step 5: Select “Yes” button from the “Internet Options” dialog box.Step 6: Select “Ok” button.Mozilla Firefox:Step 1: Open the browser “Mozilla Firefox”.Step 2: Select “History” option from “Menu bar”.Step 3: Select “Show all History” option.Step 4: In the opened “Library” dialog box, select “History” from directory structure.Step 5: Select the item want to delete from the right side of the dialog box.

Step 6: Right click on the item ad select “Delete” button. Close the Library .

Deleting history of any browser:Step 1: Open the “My computer”.Step 2: Open “C” drive.Step 3: Open the folder”Documents and Settings”.Step 4: Open the folder “History”.Step 5: Select all files and folders and delete.

Note: Regardless of step 1, 2 and 3 we can reach the “History” folder by typing “%temp%” in “run” option of “Start” menu.

2. A) Write the procedure to create an email account?Creating an email account: Step 1: Open the browser.Step 2: Type the address of the mail server in the address bar like,

www.gmail.com, www.mail.yahoo.com, www.hotmail.com, Step 3: Select “Signup” button or link in the webpage.Step 4: Provide the required information in the web page like, Name, alternate email, user id, password, retype password, date of birth etc.,Step 5: Type the security password and select “ok” or “proceed” or “Create account” button.

Opening Mail box:4. You must open your email account provider such as gmail, yahoo or rediff etc., 5. Login into your email-id by using user name and password.6. Select Login button.

Composing an email:6. After logged in , click on compose 7. Enter address of the receiver(s) in the "To" field 8. You must write the subject that means email is for what purpose in the “subject”field9. You must write in the contents of your email in message box.10. If you want to attach files , click on attach and give the location of a file to be attached.

Sending email: 1. After composing the email2. click on "Send" button to send the composed mail.

a. If everything is correct , then you will be noticed thati. “your message has been sent, view message”

2 b) Write the procedure to delete the temporary downloaded files.Deleting temporary internet files:

Internet Explorer:Step 1: Open the web browser “Internet Explorer”.Step 2: Select “Internet Options” from “Tools” menu.Step 3: Select “General” tab from the opened dialog box.Step 4: Select “Delete files button” from the “Temporary Internet files” part of the “General” tab.

Step 5: Select “Ok” button from the “Delete Files” dialog box.Step 6: Select “Ok”.

All types of browser temporary internet files.Step 1: Open the “My computer”.Step 2: Open “C” drive.Step 3: Open the folder”Documents and Settings”.Step 4: Open the folder “Local_Settings”.Step 5: Open the folder “Temporary Internet Files”.Step 6: Select all files and delete files in the folder.

5 (a) Write and demonstrate HTML code using Paragraph tagsHTML Paragraphs

Paragraphs are defined with the <p> tag.Syntax:<p>This is a paragraph</p><p>This is another paragraph</p>

Note: Browsers automatically add an empty line before and after a paragraph.EX:<html><body>

<p>This is a paragraph.<p>This is a paragraph.<p>This is a paragraph.

<p>Don't forget to close your HTML tags!</p>

</body></html>OUTPUT

This is a paragraph.

This is a paragraph.

This is a paragraph.

Don't forget to close your HTML tags!

5. (b) Write and demonstrate HTML code using Formatting tags.

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags Often <strong> renders as <b>, and <em> renders as <i>.there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Tag Description<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

EXAMPLE:<html><body>

<p><b>This text is bold</b></p><p><strong>This text is strong</strong></p><p><i>This text is italic</i></p><p><em>This text is emphasized</em></p><p><code>This is computer output</code></p><p>This is_subscript and ^superscript</p>

</body></html>

OUTPUT:

This text is boldThis text is strongThis text is italicThis text is emphasizedThis is computer outputThis is subscript and superscript

6. (a) Write and demonstrate HTML code using Font tags.

(b) Write and demonstrate HTML code using Heading tags.Ans)

Tag Description

<html> Defines an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<hr> Defines a horizontal line

<!--> Defines a comment

<!DOCTYPE html>

<html>

<body>

<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>

</body>

</html>

7. Write and demonstrate HTML code for creating lists

Tag Description

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

7 a) Ordered ListAn ordered list starts with the <ol> tag. Each list item starts with the <li> tag.The list items are marked with numbers.

EX:<html><body>

<ol><li>Coffee</li><li>Milk</li></ol></body></html>

How the HTML code above looks in a browser:1. Coffee2. Milk

7 (b) Unordered ListAn unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).EXAMPLE:<html><body>

<ul><li>Coffee</li><li>Milk</li></ul></body>

</html>

OUTPUT:How the HTML code above looks in a browser:

Coffee Milk

7 c) Definition listA description list is a list of terms/names, with a description of each term/name.The <dl> tag defines a description list.The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):EXAMPLE:

<html><body>

<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>

</body></html>

OUTPUT:How the HTML code above looks in a browser:Coffee- black hot drinkMilk- white cold drink

8. (a) Write the HTML code for demonstrating the hyperlinks.HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

By default, links will appear as follows in all browsers: An unvisited link is underlined and blue

A visited link is underlined and purple An active link is underlined and red

HTML Link SyntaxThe HTML code for a link is simple. It looks like this:<a href="url">Link text</a>

HTML Link TagsTag Description

<a> Defines a hyperlink

Example

<a href="http://bieap.cgg.gov.in/" target="_blank">Visit http://bieap.cgg.gov.in/!</a> which will display like this: Visit http://bieap.cgg.gov.in/!

Clicking on this hyperlink will send the user to bieap.cgg.gov.in ' homepage.Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.HTML Links - The target AttributeThe target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:

EXAMPLE:<html><body>

<a href="http://bieap.cgg.gov.in/" target="_blank">Visit http://bieap.cgg.gov.in/!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body></html>

OUTPUT:Visit http://bieap.cgg.gov.in/! If you set the target attribute to "_blank", the link will open in a new browser window/tab.

HTML Links - The id AttributeThe id attribute can be used to create a bookmark inside an HTML document.Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

ExampleAn anchor with an id inside an HTML document:<a id="tips">Useful Tips Section</a>Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>Or, create a link to the "Useful Tips Section" from another page:<a href=" http://bieap.cgg.gov.in/html_links.htm#tips">Visit the Useful Tips Section</a>

8. (b) Write and demonstrate the HTML code for inserting images.HTML Images - The <img> Tag and the Src AttributeIn HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, we need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:<img src="url" alt="some_text">

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt AttributeThe required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute is an author-defined text:<img src="smiley.gif" alt="Smiley face">

HTML Image TagsTag Description

<img> Defines an image<map> Defines an image-map<area> Defines a clickable area inside an image-map

EXAMPLE

<html><body>

<h2>Norwegian Mountain Trip</h2><img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">

</body></html>

OUTPUT

Norwegian Mountain Trip

9. (a) Create a HTML code for creating the following table.Empno Ename Salary 1001 Rahul 6000 1002 Salman 8000 Program:<html><head><head><body><table border=3 align='center'>

<tr> <td>Empno</td><td>Ename</td><td>Salary</td></tr><tr> <td>1001</td><td>Rahul</td><td>6000</td></tr><tr> <td>1002</td><td>Salman</td><td>8000</td></tr>

</table></body></html>Output:

9 (b) Write the HTML code for displaying heading “SALARY” with Font size 12, Font name = Arial for the above table.PROGRAM:<html><head></head><body>

<h1 size='12' TYPE='arial'>SALARY

</h1></body></html>OUTPUT:

10. (a) Write and demonstrate the HTML code for creating frames.Syntax for adding an iframe:

<iframe src="URL"></iframe>

Iframe - Set Height and WidthThe height and width attributes are used to specify the height and width of the iframe.The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

EXAMPLE<html><body>

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

<p>Some older browsers don't support iframes.</p><p>If they don't, the iframe will not be visible.</p>

</body></html>OUTPUT

frame - Remove the BorderThe frameborder attribute specifies whether or not to display a border around the iframe.Set the attribute value to "0" to remove the border:<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Use iframe as a Target for a LinkAn iframe can be used as the target frame for a link.The target attribute of a link must refer to the name attribute of the iframe:EXAMPLE:<html>

<body>

<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://bieap.cgg.gov.in" target="iframe_a">bieap</a></p>

<p><b>Note:</b> Because the target of the link matches the name of the iframe, the link will open in the iframe.</p>

</body></html>OUTPUT:

(b) Write the HTML code for displaying heading “CSE” for the frame and center it.

11. (a) Write and demonstrate HTML code for creating a form.HTML FormsHTML forms are used to pass data to a server.An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.The <form> tag is used to create an HTML form:SYNTAX<form>.input elements.</form>HTML Form TagsNew : New tags in HTML5.

Tag Description<form> Defines an HTML form for user input<input> Defines an input control

<textarea> Defines a multiline input control (text area)<label> Defines a label for an <input> element<fieldset> Groups related elements in a form<legend> Defines a caption for a <fieldset> element<select> Defines a drop-down list<optgroup> Defines a group of related options in a drop-down list<option> Defines an option in a drop-down list<button> Defines a clickable button<datalist>New Specifies a list of pre-defined options for input controls<keygen>New Defines a key-pair generator field (for forms)<output>New Defines the result of a calculation

HTML Forms - The Input ElementThe most important form element is the <input> element. The <input> element is used to select user information.An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.The most common input types are described below.Text Fields<input type="text"> defines a one-line input field that a user can enter text into:<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>How the HTML code above looks in a browser:

First name:

Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.  Password Field<input type="password"> defines a password field:<form>Password: <input type="password" name="pwd"></form>

How the HTML code above looks in a browser:

Password: Note: The characters in a password field are masked (shown as asterisks or circles).Radio Buttons<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>How the HTML code above looks in a browser:

Male

Female

Checkboxes<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>How the HTML code above looks in a browser:

I have a bike

I have a car Submit Button<input type="submit"> defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>How the HTML code above looks in a browser:

Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input. (b) Write the HTML code for displaying the text “VOCATIONAL” for the form and center it. Program:<html><head></head><body><center><font type='arial' size='10'>VOCATIONAL</font></center>

</body></html>

Output

12. (a) Write and demonstrate DHTML code to change the visibility of text on a webpage.<!DOCTYPE html>

<html>

<head>

<style>

body {color:red;}

h1 {color:#00ff00;}

p.ex {color:rgb(0,0,255);}

</style>

</head>

<body>

<h1>This is heading 1</h1>

<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>

<p class="ex">This is a paragraph with class="ex". This text is blue.</p>

</body>

</html>

(b) Write and demonstate DHTML code to change the back ground color of web page.<!DOCTYPE html>

<html>

<head>

<style>

body

{

background-color:#b0c4de;

}

</style>

</head>

<body>

<h1>My CSS web page!</h1>

<p>Hello world! This is a yahoo.com example.</p>

</body>

</html>

13. Write and demonstrate DHTML code to change the objects properties on the following events.

(a) On click (b) On double Click (c) On MouseAns) Writing code to change the objects properties on events like onclick, onblur, onmouse move etc.

<html><head></head> <body> <script language="JavaScript">

function colors(col) { switch(col) { case 'red': document.bgColor="#FF0000"; break; case 'green': document.bgColor="#00FF00"; break; case 'blue': document.bgColor="#0000FF"; break; } } </script> <form name=”form1” method=”post” action=””> <p> <label><input type="radio" name=”Colors” value=”radio” onClick="colors('red')"> Red</label> <br> <br> <label onMousemove="colors('green')"> Green</label> <br> <br> <label> <input type="radio" name=”Colors” value=”radio” onBlur="colors('blue')"> Blue</label> <br> </p> </form> </body></html>

14. Write and Demonstrate the following DHTML commands. (a) Head (b) Title (c) Paragraph Tag (d) Bold (e) Font color = red (f) Italic (g) Back ground color = Blue (h) Center Text15. Design an DHTML Page as shown below.

COMPUTER SCIENCE ENGINEERINGName : Type your name

Record 5 MarksViva Voce 5 Marks