What is World Wide Web?
World Wide Web, which is also known
as a Web, is a collection of websites or web pages stored in web servers and
connected to local computers through the internet. These websites contain text
pages, digital images, audios, videos, etc. Users can access the content of
these sites from any part of the world over the internet using their devices
such as computers, laptops, cell phones, etc. The WWW, along with internet,
enables the retrieval and display of text and media to your device.
Protocol
A protocol is a set of rules and guidelines
for communicating data. Rules are defined for each step and process during
communication between two or more computers. Networks have to follow these
rules to successfully transmit data.
HTTP
- HTTP
stands for HyperText
Transfer Protocol.
- It
is a protocol used to access the data on the World Wide Web (www).
- The
HTTP protocol can be used to transfer the data in the form of plain text,
hypertext, audio, video, and so on.
- This
protocol is known as HyperText Transfer Protocol because of its efficiency
that allows us to use in a hypertext environment where there are rapid
jumps from one document to another document.
- HTTP
is similar to the FTP as it also transfers the files from one host to
another host. But, HTTP is simpler than FTP as HTTP uses only one
connection, i.e., no control connection to transfer the files.
FTP
- FTP stands for File transfer protocol.
- FTP is a standard internet protocol provided
by TCP/IP used for transmitting the files from one host to another.
- It is mainly used for transferring the web
page files from their creator to the computer that acts as a server for
other computers on the internet.
- It is also used for downloading the files to
computer from other servers.
- It provides the sharing of files.
- It is used to encourage the use of remote
computers.
- It transfers the data more reliably and
efficiently.
Transmission Control Protocol (TCP)
TCP is a connection oriented protocol and offers end-to-end packet
delivery. It acts as back bone for connection.It exhibits the following key
features:
·
Transmission Control Protocol (TCP) corresponds to the Transport
Layer of OSI Model.
·
TCP is a reliable and connection oriented protocol.
·
TCP offers:
o Stream Data Transfer.
o Reliability.
o Efficient Flow Control
o Full-duplex operation.
o Multiplexing.
·
TCP offers connection oriented end-to-end packet delivery.
HTML
HTML List-HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements. Lists may contain
−
·
<ul> − An unordered list. This will list items using plain
bullets.
·
<ol> − An ordered list. This will use different schemes of
numbers to list your items.
·
<dl> − A definition list. This arranges your items in the same
way as they are arranged in a dictionary.
1)HTML Unordered Lists
An unordered list is a collection of related items that have no
special order or sequence. This list is created by using HTML <ul> tag.
Each item in the list is marked with a bullet.
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
The type Attribute
You can use type attribute for <ul> tag to specify
the type of bullet you like. By default, it is a disc. Following are the
possible options −
<ul type = "square"><ul type = "disc"><ul type = "circle">
2) HTML Ordered Lists
If you are required to put your items in a numbered list instead
of bulleted, then HTML ordered list will be used. This list is created by
using <ol> tag. The numbering starts at one and is
incremented by one for each successive ordered list element tagged with
<li>.
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Attribute of Ordered List
1)
Type- You can use type attribute for <ol> tag to
specify the type of numbering you like. By default, it is a number. Following
are the possible options −
<ol type = "1"> - Default-Case Numerals.<ol type = "I"> - Upper-Case Numerals.<ol type = "i"> - Lower-Case Numerals.<ol type = "A"> - Upper-Case Letters.<ol type = "a"> - Lower-Case Letters.
2)
Start- You can use start attribute for <ol> tag
to specify the starting point of numbering you need. Following are the possible
options −
<ol type = "1" start = "4"> - Numerals starts with 4.<ol type = "I" start = "4"> - Numerals starts with IV.<ol type = "i" start = "4"> - Numerals starts with iv.<ol type = "a" start = "4"> - Letters starts with d.<ol type = "A" start = "4"> - Letters starts with D.
3) HTML Definition Lists
HTML and XHTML supports a list style which is called definition
lists where entries are listed like in a dictionary or encyclopedia.
The definition list is the ideal way to present a glossary, list of terms, or
other name/value list.
Definition List makes use of following three tags.
·
<dl> − Defines the start of the list
·
<dt> − A term
·
<dd> − Term definition
·
</dl> − Defines the end of the list
HTML
Table
HTML table tag is used to
display data in tabular form (row * column). There can be many columns in a
row.
We can create a table to display data in tabular form, using
<table> element, with the help of <tr> , <td>, and <th>
elements.
In Each table, table row is defined by <tr> tag, table
header is defined by <th>, and table data is defined by <td> tags.
HTML Table Tags
|
Tag |
Description |
|
<table> |
It defines a table. |
|
<tr> |
It defines a row in a table. |
|
<th> |
It defines a header cell in a table. |
|
<td> |
It defines a cell in a table. |
colspan
If you want to make a cell span more than one column, you can
use the colspan attribute.
It will divide one cell/row into multiple columns, and the
number of columns depend on the value of colspan attribute.
rowspan
If you want to make a cell span more than one row, you can use
the rowspan attribute.
It will divide a cell into multiple rows. The number of divided
rows will depend on rowspan values.
<html>
<head>
<title>table</title>
</head>
<body>
<table
border="2">
<tr>
<th>1
header</th>
<th>1
header</th>
<th>1
header</th>
</tr>
<tr>
<td
rowspan="2">1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2
data</td>
<td>2
data</td>
</tr>
<tr>
<td>3
data</td>
<td colspan="2">3
data</td>
</tr>
</table>
</body>
</html>
Output
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.
Creating Frames
To use frames on
a page we u The <frameset> Tag Attributes
se <frameset> tag
instead of <body> tag. The <frameset> tag defines, how to divide
the window into frames. The rows attribute of <frameset>
tag defines horizontal frames and cols attribute defines
vertical frames.
1)
cols
Specifies how many
columns are contained in the frameset and the size of each column. You can
specify the width of each column in one of the four ways −
Absolute values in
pixels. For example, to create three vertical frames, use cols =
"100, 500, 100".
2)
rows
This attribute works
just like the cols attribute and takes the same values, but it is used to
specify the rows in the frameset. For example, to create two horizontal frames,
use rows = "10%, 90%".
<html>
<head>
<title>HTML
Frames</title>
</head>
<frameset rows =
"10%,80%,10%">
<frame src="1.html">
<frame src="2.html">
<frame src="3.html">
</frameset>
</html>
CSS stands for Cascading Style Sheets.
CSS
saves a lot of work. It can control the layout of multiple web pages all at
once.
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a
webpage.
With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays for
different devices and screen sizes, and much more!
CSS
can be added to HTML documents in 3 ways:
- Inline -
by using the style attribute inside HTML elements
- Internal -
by using a <style> element in the <head> section
- External -
by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML
element.
An inline CSS uses the style attribute
of an HTML element.
The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element
to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page)
to blue, and the text color of ALL the <p> elements
to red.
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML
pages.
To use an external style sheet, add a link to it in the <head> section of each HTML
page:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"styles.css":
p { color: red;}
h1{color:blue}
Write a javascript programme
to Change background color of page when cliking on button ,display alert
message and print the window.
<html>
<head>
<script
language="javascript">
function Red()
{
document.body.style.background="red";
}
function Msg()
{
alert("Welcome")
}
</script>
</head>
<body>
<form>
<input
type="submit" value="Color1" onclick="Red()">
<input
type="submit" value="Color1" onclick="Msg()">
<input
type="submit" value="Color1"
onclick="print()">
</body>
</html>
