UNIT 1

A computer network is a collection of computers and other devices that are able to communicate
with each other and share data. These devices include computers, printers, tablets, phones, and
many other electronics. These networks can be created using several different methods, such as
cables, telephone lines, satellites, radio waves, and infrared beams. 

When it comes to networking, there are two essential pieces of equipment that enable numerous
devices to be connected: routers and switches

Switches

Switches are used in order to connect many devices on the same network. These devices are
generally within the same building, such as an office building or school and could consist of
various computers, printers, and other gadgets. The switch acts as a controller, allowing the
connected objects to share information with one another. This not only increases productivity
and efficiency, but also saves money.

Routers

In addition to switches, networks generally employ routers as well. These essential tools connect
different networks to each other through the internet in order to allow for data exchange between
networks. Whereas the switch can be considered a controller, a router should be considered more
of a dispatcher, packaging digital information and choosing the best route for it to travel. Routers
can feature several other functions, including firewalls and virtual private networks (VPNs) that
enhance the security of the data being sent over the internet.

Network Types

The important types of networks are LAN, MAN and WAN.

• Local Area Network (LAN): These networks are used to connect devices over relatively short
distances, such as within a building, school, or home. LANs generally employ Ethernet cables as
a means of connecting the various gadgets within the network.

• Wide Area Network (WAN): These networks are used to connect devices over much larger
distances than LANs. A WAN is established by using routers to connect various LANs and are
generally not owned by a single person or organization. The internet is one massive WAN that
spans the entire planet.

• Metropolitan area networks (MANs) are those that cover larger areas than LANs but smaller
areas than WANs. These MANs generally span a city and are owned and operated by a
government or corporation.
Network Topology

Network topology refers to the virtual layout of the devices within a network and can refer to
five distinct categories:

• Bus: This topology utilizes a common backbone, generally a single cable, to connect all the
devices on a network.

• Ring: Found in some offices and schools, ring topologies give each device two neighbors for
communication purposes. All data travels in a ring, and a failure of that ring can bring down the
whole network.

• Star: Found in many homes, a central connection known as a “hub” is connected to all the
objects on the network. This hub could be a router or a switch.

• Tree: A hybrid bus/star network, several star hubs are connected to the core cable of a bus in
order to vastly increase the number of computers able to connect to the network.

• Mesh: The mesh topology employs the concept of routing, in which each piece of data sent on
the network has multiple paths it can take instead of one fixed route. The internet is a perfect
example of this topology.

Both traditional and modern forms of computer networking aim to provide users with the ability
to share data amongst multiple gadgets, whether they be in the same building or across the globe.
Traditional computer networking relied on Ethernet and fiber optic cables to connect various
devices on a network. More modern technology has emerged that allows for wireless connections
between electronics. These technologies include Wi-Fi and Bluetooth compatible devices. It is
very helpful to understand the role that each of these technologies plays in computer networking.

Wide Area Interconnects: Networks that must support large volumes of devices simultaneously,
such as satellites or cellular networks are considered wide area interconnects. They are generally
expensive to build and run more slowly than others due to the large area and high volume of
users.
• Long Distance Interconnects: These include cables such as Ethernet and fiber optics. They
support a very large amount of data and serve many clients who share common hardware.
• Short Distance Interconnects: These technologies are much newer than other the others and
include tools such as Bluetooth. These interconnects are highly optimized for low-cost and also
low power usage. Bluetooth is used in many mobile devices, laptop computers, and speakers in
order to enable the transfer of data. Popular information sent over Bluetooth includes music,
phone calls, and contact information. The market for Bluetooth technology is growing at a rapid
pace to include many other items such as remote controlled helicopters and cars, home security
systems, and fitness gear. Because it is rather affordable for the connectivity it supplies,
Bluetooth technology is finding its way into countless niches.

Broadband

Broadband internet connections provide high-speed internet that is always on and allows for
more data to be transmitted than the traditional dial-up connections. Unlike dial-up services, it
does not block phone lines and you do not have to reconnect to the network each time you log
off. There are various types of broadband technologies, including digital subscriber line (DSL),
cable modems, fibers, wireless broadband connections, and Satellite connections. The fastest of
these connections is by far the fiber broadband, outperforming DSL and cable modems by ten to
even hundreds of Mbps. Wireless connections perform at a speed similar to DSL and cable
modems, while satellites are slower than DSL, but still much faster than traditional dial-up
internet.

Wi-Fi

Wi-Fi is a play on the term Hi-Fi and represents a wireless internet connection. More
specifically, it is a wireless local area network (WLAN) that allows devices to connect wirelessly
to the internet. It utilizes 2.4 GHz and 5.0 GHz radio waves to connect Wi-Fi enabled gadgets
(computers, gaming systems, mobile phones, and even some cameras) to the internet without the
need for cumbersome wires. These connections can be extremely fast in some cases, reaching
speeds of over 100 Mbps, but the convenience of having no cables and the increased speed come
at a cost of potentially decreased security. Because there is no need for a physical connection, it
is easier for hackers to compromise the security of Wi-Fi connections.

What is a server? – In information technology, a server is considered any instance of an

application that can receive and serve the requests of other programs. Usually these applications
are run on computers dedicated to acting solely as servers so that the heavy burden of fulfilling
requests from other devices on the network does not overwhelm the computers. Running servers
on dedicated computers is also a safety measure, helping to keep the server from being attacked.
The computers dedicated to acting as servers usually include faster CPUs, bigger hard drives,
better RAM, and multiple power sources. These enhancements allow the server to handle the
immense workload and also give it reliability in the event of unfortunate events.

Peer-to-Peer Networks

A Peer-to-Peer network, or P2P network, is one in which multiple computers are connected
without linking through a separate computer that acts as a server. These connections can vary
based on how many computers are being linked together. Two computers can be linked via a
USB drive to allow for the transfer of files. Multiple computers in an office can be connected
directly to each other via traditional copper wiring instead of through a server computer. The
fundamental basis for P2P networks is that individual permissions must be set for each computer
on the network. For instance, if one computer (A) is connected to a printer and another computer
(B) on the network wishes to use the printer, then A would first have to grant B permission.

www

The World Wide Web is a system of Internet servers that support specially formatted documents.

The documents are formatted in a markup language called HTML (HyperText Markup
Language) that supports links to other documents, as well as graphics, audio, and video files. 

Tim Berners-Lee, a British scientist at CERN, invented the World Wide Web (WWW) in 1989.
The web was originally conceived and developed to meet the demand for automatic information-
sharing between scientists in universities and institutes around the world. On 30 April 1993
CERN put the World Wide Web software in the public domain. CERN made the next release
available with an open licence, as a more sure way to maximise its dissemination. Through these
actions, making the software required to run a web server freely available, along with a basic
browser and a library of code, the web was allowed to flourish.

HTTP

HyperText  Transfer Protocol, HTTP is the underlying protocol used by the World Wide Web.

HTTP defines how messages are formatted and transmitted, and what actions Web
servers and browsers should take in response to various commands. For example, when you enter
a URL in your browser, this actually sends an HTTP command to the Web server directing it to
fetch and transmit the requested Web page.

The other main standard that controls how the World Wide Web works is HTML, which covers
how Web pages are formatted and displayed.

HTML

HTML stands for Hyper Text Markup Language, which is the most widely used language on

Web to develop web pages.

HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995. HTML 4.01 was a major version of HTML and it
was published in late 1999. Though HTML 4.01 version is widely used but currently we are
having HTML-5 version which is an extension to HTML 4.01, and this version was published in
2012.

 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus the link available on a webpage is called Hypertext.

 As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark up" a text document with tags that tell a Web browser how to structure it to
display.

Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between
researchers.

Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document

In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body></html>

HTML Tags

HTML makes use of various tags to format the content. These tags are enclosed within angle
braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags.
For example <html> has its closing tag </html> and <body> tag has its closing tag </body> tag
etc.

Above example of HTML document uses following tags:

Tag Description

<! This tag defines the document type and HTML version.
DOCTYPE...>

<html> This tag encloses the complete HTML document and

mainly comprises of document header which is
represented by<head>...</head> and document body
which is represented by <body>...</body> tags.

<head> This tag represents the document's header which can

keep other HTML tags like <title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention

the document title.

<body> This tag represents the document's body which keeps

other HTML tags like <h1>, <div>, <p> etc.

<h1> This tag represents the heading.

<p> This tag represents a paragraph.

HTML Document Structure

A typical HTML document will have following structure:
Document declaration tag
<html>
<head>
Document header related tags
</head>
 <body>
Document body related tags
</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the
HTML used in the document. Current version of HTML is 5 and it makes use of the following
declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on
what version of HTML is being used. We will see more details on this while discussing <!
DOCTYPE...> tag along with other HTML tags.

Heading Tags

Any document starts with a heading. HTML has six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser
adds one line before and one line after that heading.

Example

<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<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>

This will produce following result:

Paragraph Tag

The <p> tag offers a way to structure text into different paragraphs. Each paragraph of text
should go in between an opening <p> and a closing </p> tag as shown below in the example:

Example

<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

This will produce following result:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

Line Break Tag

The <br/> tag is used to bring the content to the next line. Whenever the <br /> element is used,
anything following it starts from the next line. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is nothing to go in between them.

The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML
Example

<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
Good morning
</p>
</body></html>
This will produce following result:

Hello
Good morning

Centering Content

The <center> tag is used to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

This will produce following result:

This text is not in the center.

This text is in the center.

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The <hr>tag creates a line
from the current position in the document to the right margin and breaks the line accordingly.

For example you may want to give a line between two paragraphs as in the given example
below:
Example

<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>

This will produce following result:

This is paragraph one and should be on top

This is paragraph two and should be at bottom

Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.

The <hr /> element has a space between the characters hr and the forward slash. If you omit this
space, older browsers will have trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr> it is not valid in XHTML

Preserve Formatting

The <pre> tag is used to follow the exact format of how it is written in the HTML document.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting
of the source document.

Example

<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>

This will produce following result:

function testFunction( strText ){

alert (strText)

Nonbreaking Spaces

Suppose you want to use the phrase "12 Angry Men." Here you would not want a browser to
split the "12, Angry" and "Men" across two lines:

An example of this technique appears in the movie "12 Angry Men."

In cases where you do not want the client browser to break text, you should use a nonbreaking
space entity &nbsp; instead of a normal space. For example, when coding the "12 Angry Men"
in a paragraph, you should use something similar to the following code:

Example

<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>
</html>

HTML Elements

An HTML element is defined by a starting tag. If the element contains other content, it ends with
a closing tag, where the element name is preceded by a forward slash as shown below with few
tags:

Start Tag Content End Tag

<p> This is paragraph content. </p>

<h1> This is heading content. </h1>

<div> This is division content. </div>

 <br />

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element. There are
some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br />
elements. These are known as void elements.

HTML documents consist of a tree of these elements and they specify how HTML documents
should be built, and what kind of content should be placed in what part of an HTML document.

HTML Attributes

An attribute is used to define the characteristics of an HTML element and is placed inside the
element's opening tag. All attributes are made up of two parts: a name and a value:

 The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.

 The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left,
center and right.

Attribute names and attribute values are case-insensitive. However, the World Wide Web
Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4
recommendation.

Example

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>

This will display following result:

This is left aligned

This is center aligned

 This is right aligned

The style Attribute

The style attribute allows to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:red;">Some text...</p>
</body>
</html>

This will produce following result:

Some text...

Generic Attributes

Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an

HTML element.

bgcolor numeric, hexidecimal, Places a background color behind

RGB values an element

backgroun URL Places a background image behind

d an element

id User Defined Names an element for use with

Cascading Style Sheets.

class User Defined Classifies an element for use with

Cascading Style Sheets.

width Numeric Value Specifies the width of tables,

images, or table cells.

height Numeric Value Specifies the height of tables,

images, or table cells.

title User Defined "Pop-up" title of the elements.

HTML Formatting

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a bold typeface.

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a italicized typeface.

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a underlined typeface.

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a strikethrough typeface.

Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known
as variable-width fonts because different letters are of different widths (for example, the letter
'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a monospaced typeface.

Superscript Text
The content of a ^... element is written in superscript; the font size used is the same
size as the characters surrounding it but is displayed half a character's height above the other
characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a ^superscript typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a superscript typeface.

Subscript Text
The content of a _... element is written in subscript; the font size used is the same as
the characters surrounding it, but is displayed half a character's height beneath the other
characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a _subscript typeface.</p>
</body>
</html>
This will produce following result:

The following word uses a subscript typeface.

Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>

This will produce following result:

I want to drink cola wine

Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
This will produce following result:

I want to drink cola wine

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the
text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a big typeface.

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest
of the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a small typeface.

Grouping Content
The <div> and <span> elements allow to group together several elements to create sections or
subsections of a page.

For example, you might want to put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate to the footnotes. You might
then attach a style to this <div> element so that they appear using a special set of style rules.

Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id="menu" align="middle" >
<a href="/index.htm">HOME</a> |
<a href="/about/contact_us.htm">CONTACT</a> |
<a href="/about/index.htm">ABOUT</a>
</div>

<div id="content" align="left" bgcolor="white">

<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>

This will produce following result:

HOME | CONTACT | ABOUT
CONTENT ARTICLES

Actual content goes here.....

The <span> element, on the other hand, can be used to group inline elements only. So, if you
have a part of a sentence or paragraph which you want to group together, you could use the
<span> element as follows

Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>

This will produce following result:

This is the example of span tag and the div tag alongwith CSS

These tags are commonly used with CSS to allow you to attach a style to a section of a page.

HTML Phrase Tags

The phrase tags have been designed for specific purposes, though they are displayed in a similar
way as other basic tags like <b>, <i>, <pre>, and <tt>.

Emphasized Text

Anything that appears within <em>...</em> element is displayed as emphasized text.

Example

<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>

This will produce following result:

The following word uses a emphasized typeface.

Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow

ink.

Example

<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>

This will produce following result:

The following word has been marked with yellow.

Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
This will produce following result:

The following word uses a strong typeface.

HTML Comments
Comment is a piece of code which is ignored by any web browser. It is a good practice to add
comments into HTML code, especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at the code. Comments help you and others
understand your code and increases code readability.

HTML comments are placed in between <!-- ... --> tags. So any content placed with-in <!-- ...
--> tags will be treated as comment and will be completely ignored by the browser.

Example

<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>

This will produce following result without displaying the content given as a part of comments:

Document content goes here.....

Valid vs Invalid Comments

Comments do not nest which means a comment cannot be put inside another comment. Second
the double-dash sequence "--" may not appear inside a comment except as part of the closing -->
tag. You must also make sure that there are no spaces in the start-of-comment string.

Example

Here given comment is a valid comment and will be wiped off by the browser.

<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

But following line is not a valid comment and will be displayed by the browser. This is because
there is a space between the left angle bracket and the exclamation mark.

<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>

This will produce following result:

< !-- This is not a valid comment -->

Document content goes here.....

Multiline Comments

So far we have seen single line comments, but HTML supports multi-line comments as well.

You can comment multiple lines by the special beginning tag <!-- and ending tag --> placed
before the first line and end of the last line as shown in the given example below.

Example

<!DOCTYPE html><html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>

This will produce following result:

Document content goes here.....

HTML Images

Images are very important to beautify as well as to depict many complex concepts in simple way
on your web page. This tutorial will take you through simple steps to use images in your web
pages.

Insert Image
Any image can be inserted in a web page by using <img> tag. Following is the simple syntax to
use this tag.

<img src="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of attributes and it has
no closing tag.

Example

<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="Desert.jpg" alt="Test Image" />
</body>
</html>

This will produce following result:

Simple Image Insert

The images can be of type PNG, JPEG or GIF image file, but make sure the correct image file
name is specified in src attribute. Image name is always case sensitive.
If the image file is in the same folder where the html file resides, only the filename needs to be
specified in the src attribute. If the image file is in different folder, the entire path of the image
filename needs to be specified.

The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the
image cannot be displayed.

Set Image Width/Height

The image width and height can be set based on the requirement using width
and height attributes. The width and height of the image can be specified in terms of either
pixels or percentage of its actual size.

Example

<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="Desert.jpg" alt="Test Image" width="150" height="100"/>
</body>
</html>

This will produce following result:

Setting image width and height

Set Image Border

By default image will have a border around it, you can specify border thickness in terms of
pixels using border attribute. A thickness of 0 means, no border around the picture.

Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="Desert.jpg" alt="Test Image" border="3"/>
</body>
</html>

This will produce following result:

Setting image Border

Set Image Alignment

By default image will align at the left side of the page, but the alignment can be changed
using align attribute to set it in the center or right.

Example

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src="Desert.jpg" alt="Test Image" border="3" align="right"/>
</body>
</html>

This will produce following result:

Setting image Alignment

HTML Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc.
into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells.
Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Row 1, Column 1 Row 1, Column 2

Row 2, Column 1 Row 2, Column 2

Here border is an attribute of <table> tag and it is used to put a border across all the cells. If
border is not required use border="0".

Table Heading

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally top row is displayed as table heading as shown
below, otherwise <th> element can be used in any row.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>

This will produce following result:

Name Salary

Ramesh Raman 5000

Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes

There are two attribiutes called cellpadding and cellspacing which is used to adjust the white

space in the table cells. The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the content within a cell.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body> Name Salary
</html>
Ramesh Raman 5000
This will produce following result:
Shabbir Hussein 7000

Colspan and Rowspan Attributes

The colspan attribute is used to merge two or more columns into a single column. Similarly
the rowspan attribute is used to merge two or more rows.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3

 Row 2 Cell 2 Row 2 Cell 3

Row 3 Cell 1

Tables Backgrounds

The table background can be set using one of the following two ways:

 bgcolor attribute – to set background color for whole table or just for one cell.

 background attribute – to set background image for whole table or just for one cell.

Also border color can be set using bordercolor attribute.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result:

Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3

Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

Here is an example of using background attribute.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="Desert.jpg">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>

This will produce following result. Here background image did not apply to table's header.

Table Height and Width

The table width and height can be set using width and height attributes. The table width or
height can be specified in terms of pixels or in terms of percentage of available screen area.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>

This will produce the

Table Caption

The caption tag will serve as a title or explanation for the table and it shows up at the top of the
table. This tag is deprecated in newer version of HTML/XHTML.

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr>
</table>
</body>
</html>

This will produce following result:

This is the caption

row 1, column 1 row 1, column 2

row 2, column 1 row 2, column 2

Nested Tables

One table can be used inside another table. Not only tables almost all the tags can be used inside
table data tag <td>.

Example

Following is the example of using another table and other tags inside a table cell.

<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="50%">
<tr>
<td>
<table border="1" width="50%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This will produce following result:
 HTML Lists
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.

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.

Example

<!DOCTYPE html>
<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>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

The type Attribute

The type attribute can be used for <ul> tag to specify the type of bullet. By default it is a disc.
Following are the possible options:

<ul type="square">

<ul type="disc">

<ul type="circle">

Example

Following is an example where we used <ul type="square">

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

Example

Following is an example where we used <ul type="disc"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="disc">
<li>Beetroot</li>
<li>Ginger</li>
 <li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

 Beetroot
 Ginger
 Potato
 Radish

Example

Following is an example where we used <ul type="circle"> :

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>

This will produce following result:

o Beetroot
o Ginger
o Potato
o Radish

HTML Ordered Lists

If the items are to be listed 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>.

Example

<!DOCTYPE html>
<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>

This will produce following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

The type Attribute

The type attribute is used for <ol> tag to specify the type of numbering. 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"> - Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.

Example

Following is an example where we used <ol type="1">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="1">
 <li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

1. Beetroot
2. Ginger
3. Potato
4. Radish

Example

Following is an example where we used <ol type="I">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

I. Beetroot
II. Ginger
III. Potato
IV. Radish

Example

Following is an example where we used <ol type="i">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

i. Beetroot
ii. Ginger
iii. Potato
iv. Radish

Example

Following is an example where we used <ol type="A">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

A. Beetroot
B. Ginger
 C. Potato
D. Radish

Example

Following is an example where we used <ol type="a">

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

a. Beetroot
b. Ginger
c. Potato
d. Radish

The start Attribute

The start attribute is used for <ol> tag to specify the starting point of numbering needed.
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.

Example
Following is an example where we used <ol type="i" start="4" >

<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type="i" start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>

This will produce following result:

iv. Beetroot
v. Ginger
vi. Potato
vii. Radish

HTML Definition Lists

HTML and XHTML support 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

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

This will produce following result:

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol

HTML Text Links

A webpage can contain various links that redirects to other pages and even specific parts of a
given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus hyperlinks can be created using text or images available on a webpage.

Linking Documents

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part
to reach to the linked document. Following is the simple syntax to use <a> tag.

<a href="Document URL" ... attributes-list>Link Text</a>

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.google.com" target="_self">Google</a>
</body>
</html>

This will produce following result, where you can click on the link generated Google to reach to
the home page of Google.

Click following link

Google

The target Attribute

The target attribute is used to specify the location where linked document is opened. Following
are possible options:

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Example

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click any of the following links</p>
<a href=" http://www.google.com " target="_blank">Opens in New</a> |
<a href=" http://www.google.com " target="_self">Opens in Self</a> |
<a href=" http://www.google.com " target="_parent">Opens in Parent</a> |
<a href=" http://www.google.com " target="_top">Opens in Body</a>
</body>
</html>
This will produce following result, where you can click on different links to understand the
difference between various options given for target attribute.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

Linking to a Page Section

A link can be created to a particular section of a given webpage by using name attribute. This is
a two step process.

First create a link to the place where you want to reach with-in a webpage and name it using
<a...> tag as follows:

<h1>HTML Text Links <a name="top"></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach:

<a href="file.html#top">Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to
reach to the top of the HTML Text Link tutorial.

Go to the Top

Setting Link Colors

Colors can be set to the links, active links and visited links using link, alink and vlink attributes
of <body> tag.

Example

Save the following in test.html and open it in any web browser to see how link,
alink and vlink attributes work.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
<p>Click following link</p>
<a href=" http://www.google.com " target="_blank" >Google</a>
</body>
</html>
This will produce following result. Just check color of the link before clicking on it, next check
its color when you activate it and when the link has been visited.

Click following link

Google

HTML Image Links

It's simple to use an image as hyperlink. Use an image inside hyperlink at the place of text as
shown below:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.google.com" target="_self">
<img src="Desert.jpg" alt="Google" border="0"/>
</a>
</body>
</html>

This will produce following result, where you can click on the images to reach to the home page
of Tutorials Point.

Click following link

HTML Backgrounds

By default, the webpage background is white in color. HTML provides the following two good
ways to decorate a webpage background.

 Html Background with Colors

 Html Background with Images

Html Background with Colors

The bgcolor attribute is used to control the background of an HTML element, specifically page

body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML
tag.

<tagname bgcolor="color_value"...>

This color_value can be given in any of the following formats:

Format 1 - Use color name

<table bgcolor="lime" >

Format 2 - Use hex value

<table bgcolor="#f1f1f1" >

Format 3 - Use color value in RGB terms

<table bgcolor="rgb(0,0,120)" >

Example

Here are the examples to set background of an HTML tag:

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>

<!-- Format 1 - Use color name -->

<table bgcolor="yellow" width="100%">
<tr><td>
This background is yellow
</td></tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor="#6666FF" width="100%">
<tr><td>
This background is sky blue
</td></tr>
</table>

<!-- Format 3 - Use color value in RGB terms -->

<table bgcolor="rgb(255,0,255)" width="100%">
<tr><td>
This background is green
</td></tr>
</table>
</body>
</html>

This will produce following result:

This background is yellow

This background is sky blue

This background is green

Html Background with Images

The background attribute can also be used to control the background of an HTML element,

specifically page body and table backgrounds. An image can be specified to set background of
the HTML page or table. Following is the syntax to use background attribute with any HTML
tag.

<tagname background="Image URL"...>

The most frequently used image formats are JPEG, GIF and PNG images.

Example

Here are the examples to set background images of a table.

<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>

<!-- Set table background -->

<table background="Desert.jpg" width="50%" height="100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>

This will produce following result:

HTML Fonts

Fonts play very important role in making a website more user friendly and increasing content
readability. Font face and color depends entirely on the computer and browser that is being used
to view the page but HTML <font> tag can be used to add style, size, and color to the text on
the website.

The font tag is having three attributes called size, color, and face to customize fonts. To change
any of the font attributes at any time within the webpage, simply use the <font> tag. The text
that follows will remain changed until it is closed with the </font> tag. One or all of the font
attributes can be changed within one <font> tag.

Note: The font tag is deprecated and it is supposed to be removed in a future version of HTML.
So it should not be used rather, it's suggested to use CSS styles to manipulate fonts. But still for
learning purpose, the following examples can be tried.

Set Font Size

The content font size can be set using size attribute. The range of accepted values is from
1(smallest) to 7(largest). The default size of a font is 3.

Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size="1">Font size="1"</font><br />
<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>
</body>
</html>

This will produce following result:

Font size="1"
Font size="2"
Font size="3"
Font size="4"
Font size="5"
Font size="6"
Font size="7"

Relative Font Size

How many sizes larger or how many sizes smaller than the preset font size should be can be
specified like <font size="+n"> or <font size="-n">

Example
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size="-1">Font size="-1"</font><br />
<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>
</body>
</html>

This will produce following result:

Font size="-1"
Font size="+1"
Font size="+2"
Font size="+3"
Font size="+4"
Setting Font Face
The font face is set using face attribute but be aware that if the user viewing the page doesn't
have the font installed, they will not be able to see it. Instead user will see the default font face
applicable to the user's computer.

Example
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face="Times New Roman" size="5">Times New Roman</font><br />
<font face="Verdana" size="5">Verdana</font><br />
<font face="Comic sans MS" size="5">Comic Sans MS</font><br />
<font face="WildWest" size="5">WildWest</font><br />
<font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>

This will produce following result:

Times New Roman

Verdana
Comic Sans MS
WildWest
Bedrock
Specify alternate font faces
A visitor will only be able to see the font if they have that font installed on their computer. So, it
is possible to specify two or more font face alternatives by listing the font face names, separated
by a comma.

<font face="arial,helvetica">
<font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">
When the page is loaded, their browser will display the first font face available. If none of the
given fonts are installed, then it will display the default font face Times New Roman.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you
want by either the color name or hexadecimal code for that color.

Note: You can check a complete list of HTML Color Name with Codes.

Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color="#FF00FF">This text is in pink</font><br />
<font color="red">This text is red</font>
</body>
</html>

This will produce following result:

This text is in pink

This text is red

The style attribute

The style attribute can be used with most of the html tags to set style for the content using
cascading style sheets. The syntax is

style=”property:value;property:value;….;”

Example:

<p style=”background-color:yellow;”> </p>

The commonly used properties are the following:

Property name purpose

color To set font color
font-family To set font face
font-size To set font size
text-align To align text-left,center,right
 border To set border
Syntax is
Borderwidth borderstyle bordercolor
Borderwidth-thin, medium, thick, or any
pixel value
Borderstyle – none,dotted, dashed, solid,
double, groove, ridge, inset, outset
padding To set padding (space inside border)
Any pixel value
margin To set margin (space outside border)
Any pixel value

HTML Marquees

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down your webpage depending on the settings. This is created by using HTML <marquees> tag.

A simple syntax to use HTML <marquee> tag is as follows:

<marquee attribute_name="attribute_value"....more attributes>

One or more lines or text message or image

</marquee>

The <marquee> Tag Attributes

Following is the list of important attributes which can be used with <marquee> tag.

Attribute Description

width This specifies the width of the marquee. This can be a value like 10
or 20% etc.

height This specifies the height of the marquee. This can be a value like
10 or 20% etc.

direction This specifies the direction in which marquee should scroll. This
can be a value like up, down, left or right.

behavior This specifies the type of scrolling of the marquee. This can have a
value like scroll, slide and alternate.

scrolldelay This specifies how long to delay between each jump. This will
have a value like 10 etc.

scrollamount This specifies the speed of marquee text. This can have a value like
10 etc.
 loop This specifies how many times to loop. The default value is
INFINITE, which means that the marquee loops endlessly.

bgcolor This specifies background color in terms of color name or color

hex value.

hspace This specifies horizontal space around the marquee. This can be a
value like 10 or 20% etc.

vspace This specifies vertical space around the marquee. This can be a
value like 10 or 20% etc.
Below are few examples to demonstrate the usage of marquee tag.
Examples - 1

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>

Examples - 2

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width="50%">This example will take only 50% width</marquee>
</body>
</html>

Examples - 3

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="right">This text will scroll from left to right</marquee>
</body>
</html>
Examples - 4

<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction="up">This text will scroll from bottom to up</marquee>
</body>
</html>

Advantages of HTML

 Easy to use 
 Loose syntax (although, being too flexible will not comply with standards) 
 Supported on almost every browser, if not all browsers. 
 Widely used; established on almost every website, if not all websites. 
 Very similar to XML syntax, which is increasingly used for data storage 
 Free - need not buy any software 
 Easy to learn & code even for novice programmers (beginners)

Disadvantages

 It cannot produce dynamic output alone, since it is a static language 

 Sometimes, the structuring of HTML documents is hard to grasp 
 You have to keep up with deprecated tags, and make sure not to use them 
 Deprecated tags appear because another language that works with HTML has replaced
the original work of the tag; thus the other language needs to be learned (most of the
time, it is CSS)
 Security features offered by HTML are limited 

IP Address

An IP address is an identifier for a computer or device on a TCP/IP network. Networks using

the TCP/IP protocol route messages based on the IP address of the destination. IP address is
short for Internet Protocol (IP) address. IP specifies the format of packets, also
called datagrams, and the addressing scheme.

An IP address is a number that is allocated to your browser by your Internet Service Provider
(ISP) or employer, when you log on to the internet. It is usually allocated on a temporary (or
dynamic) basis ie it is only allocated to your browser for the duration of that session online. It is
the 'address' of your computer while you are online. Without an IP address, servers would not be
able to deliver content to you, because they would not be able to locate your computer.

The format of an IP address (IPv4) is a 32-bit numeric address written as four numbers separated
by periods. Each number can be zero to 255. For example, 1.160.10.240 could be an IP address.

An IPv4 address contains 32 bits which is divided into four octets(8bits) separated by period(.)
and each octet is represented as a decimal number. An IPv6 address contains 128 bits which is
divided into 8 groups separated by a colon(:).

Static Versus Dynamic IP Addresses

An IP address can be static or dynamic. A static IP address will never change and it is a

permanent Internet address. A dynamic IP address is a temporary address that is assigned each
time a computer or device accesses the Internet. 

In IPv6 (IP version 6) the IP address size is increased from 32 bits to 128 bits.

 DOMAIN NAME SYSTEM (DNS)

DNS is a protocol within the set of standards for how computers exchange data on the Internet
and on many private networks, known as the TCP/IP protocol suite. Its basic job is to turn a user-
friendly domain name like "google.com" into an Internet Protocol (IP) address like
74.125.224.72 that computers use to identify each other on the network.

Computers and other network devices on the Internet use an IP address to route your request to
the site you're trying to reach. This is similar to dialing a phone number to connect to the person
you're trying to call. A DNS server or name server manages a massive database that maps
domain names to IP addresses.

Whether accessing a Web site or sending e-mail, the user’s computer uses a DNS server to look
up the domain name trying to access. The proper term for this process is DNS name resolution,
and the DNS server resolves the domain name to the IP address. For example, when entered
"http://www.google.com" in the browser, part of the network connection includes resolving the
domain name "google.com" into an IP address, like 74.125.224.72, for google' Web servers.

It is possible always to bypass a DNS lookup by entering 74.125.224.72 directly in the browser.
However, a user is probably more likely to remember "google.com" when he wants to return
later. In addition, a Web site's IP address can change over time, and some sites associate multiple
IP addresses with a single domain name.

How DNS is Organized

At the top of the DNS hierarchy are 13 root name servers, which contain name server
information for all of the generic top-level domains such as .com and .org as well as country-
specific DNS addresses such as .uk or .nz. The name servers for each of these top-level domains
contains name server information for domains within that top-level domain. So the name server
for .com will contain information about microsoft.com but will not contain information about
microsoft.co.uk. Your name server will have to contact the server that contains the information
for .co.uk.

The hierarchy goes from the least specific top-level domain to the most specific hostname .

Electronic mail (E-mail)

Electronic mail, since round 1993, is a method of exchanging digital messages from an author
to one or more recipients. Email operates across the Internet or other computer networks.

In this method each sender or receiver should have a unique address called email address. It has
two portions separated with a @ character.

Some early email systems required the author and the recipient to both be online at the same
time, in common with instant messaging. Today's email systems are based on a store-and-
forward model. Email servers accept, forward, deliver, and store messages. Neither the users nor
their computers are required to be online simultaneously; they need connect only briefly,
typically to a mail server, for as long as it takes to send or receive messages.

Simple Mail Transfer Protocol (SMTP) is a protocol for sending e-mail messages

between servers. Most e-mail systems that send mail over the Internet use SMTP to send
messages from one server to another; the messages can then be retrieved with an e-mail
client using either POP or IMAP. In addition, SMTP is generally used to send messages from a
mail client to a mail server.

POP is short for Post Office Protocol, a protocol used to retrieve-mail from a mail server. Most

e-mail applications (sometimes called an e-mail client) use the POP protocol, although some can
use the newer IMAP (Internet Message Access Protocol).
Internet Message Access Protocol (IMAP) is a protocol for retrieving e-mail messages. IMAP
allows users to store their email on remote servers. This two-way protocol also allows the user to
synchronize their email among multiple devices, which is extremely important today, when most
people have at least two devices - their laptop and smartphone.

Web browser

A web browser is a software application for retrieving, presenting, and traversing information

resources on the World Wide Web. An information resource is identified by a Uniform Resource
Identifier (URI) Uniform Resource Locator (URL) and may be a web page, image, video or other
piece of content. Hyperlinks present in resources enable users easily to navigate their browsers to
related resources. Eg: IE, Firefox, Safari etc

Web server

A web server is a computer system that processes requests via HTTP, the basic network protocol
used to distribute information on the World Wide Web. The term can refer either to the entire
system, or specifically to the software that accepts and supervises the HTTP requests.

Search Engine

Search engines are programs that search documents for specified keywords and returns a list of
the documents where the keywords were found. A search engine is really a general class of
programs, however, the term is often used to specifically describe systems like Google, Bing and
Yahoo! Search that enable users to search for documents on the World Wide Web.

Social Media

Social media is computer-mediated tool that allow people to create, share or exchange
information, career interests, ideas, and pictures/videos in virtual communities and networks.

Social media depends on mobile and web-based technologies to create highly interactive
platforms through which individuals and communities share, co-create, discuss, and modify user-
generated content. 

Social media differ from traditional or industrial media in many ways, including quality, reach,
frequency, usability, immediacy and permanence. Social media operates in a dialogic
transmission system, (many sources to many receivers). This is in contrast to traditional media
that operates under a monologic transmission model (one source to many receivers).

Advantages:

 Social media and relate services enables users to benefit from a worldwide
communication channel, which includes different types of communication approaches,
methods and techniques to improve Internet based communication among people, who
are in different places.
  Social media provides an improved interaction for users and make it possible to ensure
improved, web oriented socialization via computer based tools.
 It allows users to reach to the desired information rapidly, edit any information
collaboratively, and also share information with other users over the web easily. In this
way social media enables people-users to improve their effectiveness and productivity in
works or studies.
 Global interactivity and sophistication of social media services make it easier to apply
them in different fields of modern life.
 Social media enables users to express them in an multimedia supported, interactive
environment and learn something from other users posts, shares etc. from this
perspective, social media is also an effective channel that enables communities to
announce their problems, needs with a high voice.
 Real-time updates and non-stop information flow within social media services enable
people-users to always keep themselves informed about the world.

Disadvantages of social media generally appear when it is used in a negative way. Some
important drawbacks are:

 The social media may reduce face to face interaction and may become just waste of time
over the Internet.
 Social media may cause false or harmful information to be shared along the Internet
rapidly.
 Because of its simple and effective features and functions to ensure an interactive
communication environment, the social media may cause cyber-bullying and also some
crimes against people.
 Sharing information mechanism of social media improves risks of fraud and identity
theft.
 Because of it highly interactive communication features and functions, the social media
may also become a good, secure communication channel for especially crime
organizations.