College of Computer Science and Information Systems

COLLEGE OF COMPUTER SCIENCE AND INFORMATION SYSTEMS

JAZAN UNIVERSITY

INTERNET TECHNOLOGIES

(INFS 241)

LAB MANUAL

e-Mail

Electronic mail, most commonly referred to asemailore-mailsinceca.1993, is a method of exchanging digital messages from an author to one or more recipients. Modern email operates across the Internetor other computer networks. Some early email systems required that the author and the recipient both be onlineat the same time, in common with instant messaging. Today's email systems are based on astore-and-forwardmodel. Emailserversaccept, forward, deliver, and store messages. Neither the users nor their computers are required to be online simultaneously; they need connect only briefly, typically to amail server, for as long as it takes to send or receive messages.

Historically, the termelectronic mailwas used generically for any electronic document transmission. For example, several writers in the early 1970s used the term to describefaxdocument transmission. As a result, it is difficult to find the first citation for the use of the term with the more specific meaning it has today.

An Internet email message consists of three components, the messageenvelope, the messageheader, and the messagebody. The message header contains control information, including, minimally, an originator'semail addressand one or more recipient addresses. Usually descriptive information is also added, such as a subject header field and a message submission date/time stamp.

Method: Making a Gmail Account

2. Go to Gmail.com.The first step to creating an email account with Gmail, Google's free email service, is to visit Gmail's main site. Type "gmail.com" into your browser's navigation bar, or, alternatively, type "Gmail" into your search engine of choice and click the relevant result.

4. Click "Create an account." On Gmail's login screen, look for an account creation link under the email and password entry boxes. Click this link to proceed to the account creation process.

· Enter your personal information.On the next page, you'll be asked for your name, phone number, birthday, and an alternate email address. Some of this information, like, for instance, the alternate email address, is optional.

· Choose an email address and password.On the same account creation page, you'll also be asked to decide on an email address and a password. The password you choose must be at least eight characters long, while your email address must not already be in use by someone else. Enter this information in the appropriate boxes.

o You'll need to write your password twice to confirm its accuracy.

· Verify.Scroll down until you see a picture containing some distorted numbers and a photo of a building's address marking. Type these numbers into the designated box - doing this ensures that you are human and not an automated program attempting to register an email account for commercial/nefarious purposes.

If, for whatever reason, you don't want to participate in this verification process, you may be required to verify via phone later.

· Agree to the terms of service and submit.Check the box next to the text that says "I agree to the Google Terms of Service and Privacy Policy." This signifies that you understand and agree to these documents, which you can read by clicking on their links. When you're ready, click "Next step."

· Enjoy your new Gmail account.You're finished! Click on "Continue to Gmail" to access your inbox, read your emails, and write new ones.

Chat

Online chatmay refer to any kind ofcommunicationover theInternetthat offers area-timetransmission oftextmessages from sender to receiver. Chat messages are generally short in order to enable other participants to respond quickly. Thereby, a feeling similar to a spoken conversation is created, which distinguishes chatting from other text-based online communication forms such asInternet forumsandemail. Online chat may addresspoint-to-pointcommunications as well asmulticastcommunications from one sender to many receivers and voice andvideo chat, or may be a feature of aweb conferencingservice.

Method: Chatting

1. Windows Live messenger, still widely known as "MSN Messenger" is one of the most popular ways to talk to your friends, coworkers, or relatives that you like and/or can't stand. This article will explain how to easily sign up for a free account, and use Windows Live Messenger.

3. Get a free E-mail address preferably from Hotmail, by clickingSign Up, and thenFree.Fill out the form to create your E-mail Account. If you already have an email address and it isnota Hotmail account, go to Microsoft Live Official Website, click Sign In, click Sign Up, and select the option that says "Yes, use my e-mail address." There, you can sign up for a Windows Live ID, which will allow you to use MSN Messenger. Keep checking your email account for an email sent from MSN used to activate your ID.

5. Download MSN Messenger by going to the download website and clicking "Get It Free."

8. Log in.

10. Add a contact, a person to talk to, by clicking "Add A Contact" on the Contacts menu.

11.

12. When/If the person is online, a green figure will appear beside their name in your contact list.Double click on their name and type a greeting into the lower rectangular box.

13.

14. Engage in conversation if they reply.If desired, many options can be taken from here. You can select an action to take by selecting something from the Actions menu on the conversation's toolbar.

HTML

Heading Elements

<h1>Largest Heading</h1>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"<img src="URL" alt="Alternate Text" /</a>
Mailto link: <a href="mailto:">Send e-mail</a>

A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul> / Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol> / Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Forms

<input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>

Frames

The HTML style Element

The <style> tag is used to define style information for an HTML document.

Inside the style element you specify how HTML elements should render in a browser:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

Other Elements

<blockquote>
Text quoted from a source.
</blockquote>

<address>
Written by W3Schools.com<br />
<a href="mailto:">Email us</a<br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

HTML Useful Character Entities

Note: Entity names are case sensitive!

Result / Description / Entity Name / Entity Number
non-breaking space /   /  
less than / < / <
greater than / > / >
ampersand / & / &
¢ / cent / ¢ / ¢
£ / pound / £ / £
¥ / yen / ¥ / ¥
€ / euro / € / €
§ / section / § / §
© / copyright / © / ©
® / registered trademark / ® / ®
™ / trademark / ™ / ™

URL Encoding Examples

Character / URL-encoding
€ / %80
£ / %A3
© / %A9
® / %AE
À / %C0
Á / %C1
Â / %C2
Ã / %C3
Ä / %C4
Å / %C5

JAVASCRIPT

<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>

<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(4,3));
</script>
</body>
</html>

The for Loop

The for loop is used when you know in advance how many times the script should run.

Syntax

for (var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long asiis less than, or equal to 5.iwill increase by 1 each time the loop runs.

Note:The increment parameter could also be negative, and the <= could be any comparing statement.

Example

The while Loop

The while loop loops through a block of code while a specified condition is true.

Syntax

while (var<=endvalue)
{
code to be executed
}

Note:The <= could be any comparing operator.

Example

The example below defines a loop that starts with i=0. The loop will continue to run as long asiis less than, or equal to 5.iwill increase by 1 each time the loop runs:

Example
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=5)
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
</script>
</body>
</html>

The do...while Loop

The do...while loop is a variant of the while loop. This loop will execute the block of code ONCE, and then it will repeat the loop as long as the specified condition is true.

Syntax

do
{
code to be executed
}
while (var<=endvalue);

Example

The example below uses a do...while loop. The do...while loop will always be executed at least once, even if the condition is false, because the statements are executed before the condition is tested:

Example
<html>
<body>
<script type="text/javascript">
var i=0;
do
{
document.write("The number is " + i);
document.write("<br />");
i++;
}
while (i<=5);
</script>
</body>
</html>

The break Statement

The break statement will break the loop and continue executing the code that follows after the loop (if any).

Example
<html>
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

The continue Statement

The continue statement will break the current loop and continue with the next value.

Example
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>

JavaScript For...In Statement

The for...in statement loops through the elements of an array or through the properties of an object.

Syntax

for (variableinobject)
{
code to be executed
}

Note:The code in the body of the for...in loop is executed once for each element/property.

Note:The variable argument can be a named variable, an array element, or a property of an object.

Example

Use the for...in statement to loop through an array:

Example
<html>
<body>
<script type="text/javascript">
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (x in mycars)
{
document.write(mycars[x] + "<br />");
}
</script>
</body>
</html>

Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

· A mouse click

· A web page or an image loading

· Mousing over a hot spot on the web page

· Selecting an input field in an HTML form

· Submitting an HTML form

· A keystroke

Note:Events are normally used in combination with functions, and the function will not be executed before the event occurs!

For a complete reference of the events recognized by JavaScript, go to our completeJavaScript reference.

onLoad and onUnload

The onLoad and onUnload events are triggered when the user enters or leaves the page.

The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.

Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".

onFocus, onBlur and onChange

The onFocus, onBlur and onChange events are often used in combination with validation of form fields.

Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:

onSubmit

The onSubmit event is used to validate ALL form fields before submitting it.

Below is an example of how to use the onSubmit event. The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often used to create "animated" buttons.

Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:

Insert Special Characters

The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.