Professional Documents
Culture Documents
Internet
The Internet is the global system of interconnected computer networks that use
the Internet protocol suite(TCP/IP) to link devices worldwide.
HSTORY OF INTERNET
The Internet had its roots during the 1960's as a project of the United States government's
Department of Defense, to create a non-centralized network. This project was called
ARPANET (Advanced Research Projects Agency Network), created by the Pentagon's
Advanced Research Projects Agency established in 1969 to provide a secure and
survivable communications network for organizations engaged in defense-related
research.
In order to make the network more global a new sophisticated and standard protocol was
needed. They developed IP (Internet Protocol) technology which defined how
electronic messages were packaged, addressed, and sent over the network.
The standard protocol was invented in 1977 and was called TCP/IP (Transmission
Control Protocol/Internet Protocol).
TCP/IP allowed users to link various branches of other complex networks directly to the
ARPANET, which soon came to be called the Internet.
The World Wide Web ("WWW" or simply the "Web") is a global information medium
which users can read and write via computers connected to the Internet.
WWW is a system of interlinked hypertext documents accessed via the internet with a
web browser, a user views web pages that may contain text, images and other multimedia
and navigates between them using hyperlinks.
History of WWW
By 1998 there were 750,000 commercial sites on the world wide web.
Search engine
A program that searches for and identifies items in a database that correspond to
keywords or characters specified by the user, used especially for finding particular sites
on the World Wide Web.
1. Google
2. Bing
3. Yahoo
4. Ask.com
5. AOL.com
E-mail Protocols are set of rules that help the client to properly transmit the information
to or from the mail server. Here in this tutorial, we will discuss various protocols such
as SMTP, POP, and IMAP.
1. SMTP stands for Simple Mail Transfer Protocol. It was first proposed in 1982. It is
a standard protocol used for sending e-mail efficiently and reliably over the internet.
Web browser functions are to provide the resources or information to the user when asked
by them.
It processes the user inputs in the form of URL like http://www.google.com in the
browser and allows the access to that page.
It allows the user to interact with the web pages and dynamic content like surveys, forms,
etc.
It also allows the user to navigate through the complete web page and see its source code
in the HTML format.
Newsgroup
Users post messages to a news server which then sends them to a bunch of other
participating servers. Then other users can access the newsgroup and read the postings.
Examples:
comp
Computer-related topics.
humanities
Topics related to the humanities (fine arts, literature, philosophy, Classical Latin, etc.).
misc
sci
Science-related topics.
URL
URL is an acronym for Uniform Resource Locator and is a reference (an address) to a
resource on the Internet.
A URL has two main components: Protocol identifier: For the URL http://example.com ,
the protocol identifier is http . Resource name: For the URL http://example.com , the
resource name is example.com .
Web Portal
A Web portal is a specially designed website that often serves as the single point of access
for information.
Domain name
Domain names function on the Internet in a manner similar to a physical address in the
physical world.
Domain names are used in URLs to identify particular Web pages. For example, in the
URL http://iitmjp.ac.in/index.php, the domain name is iitmjp.
Example:
mil - Military
HTML stands for Hyper Text Markup Language. An HTML file is a text file containing markup tags. The
markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file
extension. An HTML file can be created using a simple text editor. The rule-making body of the Web is
World Wide Web Consortium (W3C). W3C puts together specifications for Web standards. The most
essential Web standards are HTML, CSS and XML. The latest HTML standard is XHTML 1.0.
1. Start Notepad.
2. Type in the following text
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is a very basic webpage. <b>This text will be displayed in bold</b>
</body>
</html>
Example Explained:
The first tag in your HTML document is <html>. This tag tells your browser that this is the start
of an HTML document. The last tag in your document is </html>. This tag tells your browser
that this is the end of the HTML document.
The text between the <head> tag and the </head> tag is header information. Header information
is not displayed in the browser window.
The text between the <title> tags is the title of your document. The title is displayed in your
browser's caption.
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
HTML Tags
1. HTML tags are used to mark-up HTML elements
2. HTML tags are surrounded by the two characters < and >
5. The first tag in a pair is the start tag, the second tag is the end tag
6. The text between the start and end tags is the element content
7. HTML tags are not case sensitive, <b> means the same as <B>
We have just said that HTML tags are not case sensitive: <B> means the same as <b>. It is
recommended to always use because
If you want to prepare yourself for the next generations of HTML, you should start using
lowercase tags. The World Wide Web Consortium recommends lowercase tags in
their HTML 4 recommendation, and XHTML (the next generation HTML) demands
lowercase tags.
Tags can have attributes. Attributes can provide additional information about the HTML elements on
your page.
This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute,
you can tell the browser that the background color of your page should be red, like this: <body
bgcolor="red">.
Attribute values should always be enclosed in quotes. Double style quotes are the most common,
but single style quotes are also allowed. In some rare situations, like when the attribute value
itself contains quotes, it is necessary to use single quotes:
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines
the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Paragraphs
<p>This is a paragraph</p>
HTML automatically adds an extra blank line before and after a paragraph.
Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The
<br> tag forces a line break wherever you place it.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be
ignored by the browser. You can use comments to explain your code, which can help you when
you edit the source code at a later date.
Note: that you need an exclamation point after the opening bracket, but not before the closing
bracket.
Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the
start of an HTML tag. If we want the browser to actually display these characters we must insert
character entities in the HTML source.
A character entity has three parts: an ampersand (&), an entity name or a # and an entity number,
and finally a semicolon (;).
To display a less than sign in an HTML document we must write: < or <
The advantage of using a name instead of a number is that a name is easier to remember. The
disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.
Non-breaking Space
The most common character entity in HTML is the non-breaking space.
Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9
of them. To add spaces to your text, use the character entity.
Most Common Character Entities
Result Description Entity Name Entity Number
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a
movie, etc.
Visit google
With the target attribute, you can define where the linked document will be opened.
The line below will open the document in a new browser window:
The name attribute is used to create a named anchor. When using named anchors we can create
links that can jump directly into a specific section on a page, instead of letting the user scroll
around to find what he/she is looking for.
The name attribute is used to create a named anchor. The name of the anchor can be any text you
care to use.
You should notice that a named anchor is not displayed in a special way.
To link directly to the "down" section, add a # sign and the name of the anchor to the end of a
URL, like this:
A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like this:
IMG Tag
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
1) src : It is a necessary attribute that describes the source or path of the image. It instructs the
browser where to look for the image on the server. The location of image may be on the same
directory or another server.
2) alt : The alt attribute defines an alternate text for the image, if it can't be displayed.
3) width : It is an optional attribute which is used to specify the width to display the image.
Marquee Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either
horizontally across or vertically down your web site page depending on the settings.
Example:
basefont tag
The HTML <basefont> tag is used to specify a base font for the document to use. This base font
is applied to complete document. This tag is depreciated now.
Attribute of basefont are: color, size, face.
Syntax:
<basefont color="red" size="5 face=Arial Black>
Example
<html>
<head>
<basefont color="red" size="5">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>The basefont element is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). The letters td stands for "table data,"
which is the content of a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
If you do not specify a border attribute the table will be displayed without any borders.
Sometimes this can be useful, but most of the time, you want the borders to show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Headings in a Table
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Table cells with no content are not displayed very well in most browsers.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
row 2, cell 1
Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the
border).
To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders
visible:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table>
How it looks in a browser:
row 2, cell 1
Table Tags
Tag Description
<col> Defines the attribute values for one or more columns in a table
Code:
<table border=3>
<tr>
<th colspan=6>IP University Courses</th>
</tr>
<tr>
<th colspan=3>Graduate</th>
</tr>
<tr>
<th>BBA</th>
<th>BCA</th>
<th>B.Tech</th>
<th>MBA</th>
<th>MCA</th>
<th>M.Tech</th>
</tr>
<tr>
<td>240</td>
<td>120</td>
<td>100</td>
<td>200</td>
<td>100</td>
<td>80</td>
</tr>
</table>
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black
circles).
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Coffee
Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms.
A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Coffee
Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images,
links, other lists, etc.
List Tags
Tag Description
Image Map
The HTML and XHTML standards provide a feature that lets you embed many different links inside the
same image. Clicking different areas of the image causes the browser to link to different target
documents. Such mouse-sensitive images known as image maps.
server-side image maps: Here you simply put your image inside a hyper link and
use ismap attribute which makes it special image and when the user clicks some place within the
image, the browser passes the coordinates of the mouse pointer along with the URL specified in
the <a> tag to the web server.
client-side image maps: is created with the usemap attribute for the <img> tag, along with
corresponding <map> and <area> tags
<html>
<body>
<a href=hello.php">
<img src=image.gif" alt=image" width="100" height="132" ismap>
</a>
<p>Click the image, and the click coordinates will be sent to the server as a URL query string.</p>
</body>
</html>
Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by
special <map> and <area> extension tags.
The image that is going to form the map is inserted into the page using the <img /> tag as a
normal image, except it carries an extra attribute called usemap. The value of the usemap
attribute is the value which will be used in a <map> tag to link map and image tags.
The <map> along with <area> tags define all the image coordinates and corresponding links.
The <area> tag inside the map tag, specifies the shape and the coordinates to define the
boundaries of each clickable hotspot available on the image.
Example:
<html>
<body>
<map name="mypic">
</area>
</body>
</html>
DIV tag
The HTML <div> tag is used to group the large section of HTML elements together.
This is the very important block level tag which plays a big role in grouping various other HTML tags and
applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we
define different parts ( Left, Right, Top etc) of the page using <div> tag.
Adding sound file in HTML Page
Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.
Example:
<audio controls>
HTML frames
HTML frames are used to divide your browser window into multiple sections where each section
can load a separate HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and
columns.
<iframe> Tag
The <iframe> tag defines a rectangular region within the document in which the browser can display a
separate document, including scrollbars and borders. The src attribute is used to specify the URL of the
document that occupies the inline frame.
<noframe> tag
NOFRAMES element to provide alternate content for user agents that do not support frames or are
configured not to display frames.
Example
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>
Attributes of frame tag
Src= indicate the URL of the document to be loaded into the frame.
Name= Gives the frame a unique name.
Scrolling= controls the appearance of horizontal and vertical scrollbars in a frame. This takes the
value yes/no/auto.
noresize= By default you can resize any frame by clicking and dragging on the borders of a frame.
The noresize attribute prevents a user from being able to resize the frame. For example
noresize="noresize".
frameborder=This attribute provides the user agent with information about the frame border.
Possible values:
1: This value tells the user agent to draw a separator between this frame and every adjoining
frame. This is the default value.
0: This value tells the user agent not to draw a separator between this frame and every adjoining
frame.
HTML forms
An HTML form is a section of a document which contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing.
The HTML <form> tag is used to create an HTML form and it has following syntax:
</form>
Form Attributes
There are two attributes within the opening < form > tag:
1. action tells the Web browser where to send the form data when the user fills out and submits
the form. This should either be an absolute URL (such as http://www.example.com/myscript.php
) or a relative URL (such as myscript.php , /myscript.php , or ../scripts/myscript.php.
2. method tells the browser how to send the form data captured by various form elements. You
can use two methods:
GET: GET method sends the data captured by form elements to the web server encoded into a
URL, which points to a web server. GET is useful for sending small amounts of data (1024 bytes)
and makes it easy for the user to resubmit the form. GET requests remain in the browser history
POST: POST method send the data enclosed in the body of the request message. POST method
can send much larger amounts of form data. POST requests do not remain in the browser history
Forms Elements
A text input field This allows the user to enter a single line of text. You can optionally prefill
the field with an initial value using the value attribute.
<input type=text name=textField id=textField value= >
A password field This works like a text input field, except that the entered text is not
displayed. This is, of course, intended for entering sensitive information such as passwords.
Again, you can prefill the field using the value attribute.
<input type=password name=pass id=pass value=>
Checkbox
A checkbox field This is a simple toggle; it can be either on or off. The value attribute should
contain the value that will be sent to the server when the checkbox is selected.
Radio button
All buttons in a group have the same name attribute. Only one button can be selected per group.
As with checkboxes, use the value attribute to store the value that is sent to the server if the
button is selected.
<input type=radio name=radioButtonField id=radioButtonField1 value=radio1>
Submit button
A submit button Clicking this type of button sends the filled-in form to the server-side script
for processing. The value attribute stores the text label that is displayed inside the button (this
value is also sent to the server when the button is clicked)
<input type=submit name=submitButton id=submitButton value=Submit Form>
reset button
A reset button This type of button resets all form fields back to their initial values (often
empty). The value attribute contains the button label text:
<input type=reset name=resetButton id=resetButton value=Reset Form>
pull-down menu
A pull-down menu This allows a user to pick a single item from a predefined list of options.
The size attributes value of 1 tells the browser that you want the list to be in a pull-down menu
format. Within the select element, you create an option element for each of your options.
Place the option label between the <option> ... </option> tags. Each option element can have an
optional value attribute, which is the value sent to the server if that option is selected.
<select name=pullDownMenu id=pullDownMenu size=1>
</select>
list box
This works just like a pull-down menu, except that it displays several options at once. To turn a
pull-down menu into a list box, change the size attribute from 1 to the number of options to
display at once:
<select name=listBox id=listBox size=3>
</select>
This works like a list box, but it also allows the user to select multiple items at once by holding
down Ctrl (on Windows and Linux browsers) or Command (on Mac browsers). To turn a normal
list box into a multi-select box, add the attribute multiple (with a value of multiple) to the
select element.
<select name=multiListBox id=multiListBox size=3 multiple=multiple>
</select>
text area
This is similar to a text input field, but it allows the user to enter multiple lines of text. Unlike
most other controls, you specify an initial value (if any) by placing the text between the
<textarea> ... </textarea> tags, rather than in a value attribute. A textarea element must include
attributes for the height of the control in rows (rows) and the width of the control in columns
(cols):
<textarea name=textAreaField id=textAreaField rows=4 cols=50></textarea>
<html>
<body>
<form action="valid.jsp">
Enter Gender:
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
<input type="submit"value="register">
</form>
</body>
</html>
output