Internet Concept:-

What is World Wide Web?

The World Wide Web was invented by a British scientist, Tim Berners-Lee in 1989.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.

The building blocks of the Web are web pages which are formatted in HTML and connected
by links called "hypertext" or hyperlinks and accessed by HTTP..

A web page is given an online address called a Uniform Resource Locator (URL). A
particular collection of web pages that belong to a specific URL is called a website, e.g.,
www.facebook.com, www.google.com

Difference between World Wide Web and Internet:

Some people use the terms 'internet' and 'World Wide Web' interchangeably. They think they
are the same thing, but it is not so. Internet is entirely different from WWW. It is a worldwide
network of devices like computers, laptops, tablets, etc. It enables users to send emails to
other users and chat with them online. For example, when you send an email or chatting with
someone online, you are using the internet.

But, when you have opened a website like google.com for information, you are using the
World Wide Web; a network of servers over the internet. You request a webpage from your
computer using a browser, and the server renders that page to your browser. Your computer
is called a client who runs a program (web browser), and asks the other computer (server) for
the information it needs.
Concept o Internet:-
The Internet is the global system of interconnected computer networks that uses the Internet protocol
suite (TCP/IP) to communicate between networks and devices. It is a network of networks that
consists of private, public, academic, business, and government networks of local to global scope,
linked by a broad array of electronic, wireless, and optical networking technologies.

Advantages
 Internet allows us to communicate with the people sitting at remote locations. One can
find various social networking sites such as:
o Facebook
o Twitter
o Yahoo
o Google+
o Flickr
o Orkut
 One can surf for any kind of information over the internet.
 Apart from communication and source of information, internet also serves a medium
for entertainment such as Online Television, Online Games, Songs,Videos, Social
Networking Apps
 Internet allows us to use many services like:-Internet Banking, Matrimonial Services,
Online Shopping, Online Ticket Booking, Online Bill Payment, Data Sharing, E-mail
etc.
 Internet provides concept of electronic commerce, that allows the business deals to
be conducted on electronic systems

Disadvantage
 There are always chances to loose personal information such as name, address, credit
card number..
 Spamming corresponds to the unwanted e-mails in bulk. These e-mails serve no
purpose and lead to obstruction of entire system.
 Virus can easily be spread to the computers connected to internet.
 Also a biggest threat on internet is pornography.
 There are various websites that do not provide the authenticated information. This
leads to misconception among many people.

Web Browser :- web Browser is an application software that allows us to view and
explore information on the web. User can request for any web page by just entering a URL
into address bar.
Web browser can show text, audio, video, animation and more. It is the responsibility of a
web browser to interpret text and commands contained in the web page.
Earlier the web browsers were text-based while now a days graphical-based or voice-based
web browsers are also available. Following are the most common web browser available
today:
Browser Vendor
Internet Explorer Microsoft
Google Chrome Google
Mozilla Firefox Mozilla
Netscape Navigator Netscape Communications Corp.
Opera Opera Software
Safari Apple

Internet Servers:-
Internet servers make the Internet possible. All of the machines on the Internet are either
servers or clients. The machines that provide services to other machines are servers. And the
machines that are used to connect to those services are clients. There are Web servers, e-mail
servers, FTP servers and so on serving the needs of Internet users all over the world.

Search Engines:-
Also known as a web search engine and an internet search engine, a search engine is a
(usually web-based) computer program that collects and organizes content from all over the
internet. The user enters a query composed of keywords or phrases, and the search engine
responds by providing a list of results that best match the user's query. The results can take
the form of links to websites, images, videos, or other online data.
Examples are:- Google, Bing, yahoo, Ask.com, Baidu, AOL.com, duckDuckGo etc.

A SMALL LIST OF Search Engines

Yahoo.com (http://www.Yahoo.com)
Search.com (http://search.com)
EasySearcher (http://www.easysearcher.com)
AltaVista (http://www.altavista.com)
Excite (http://www.excite.com)
Google (http://www.google.com)
Hotbot (http://www.hotbot.com)
Infoseek (http://www.infoseek.com)
Lycos (http://www.lycos.com)
WebCrawler (http://www.webcrawler.com)

Concept of Domain Name System(DNS):-

In simple terms, a Domain Name System (DNS) is a collection of databases that translate
hostnames to IP addresses.

DNS is often referred to as the internet's phone book because it converts easy-to-remember
hostnames like www.google.com, to IP addresses like 216.58.217.46.

Without DNS (and especially search engines like Google), navigating the internet wouldn't be
easy since we'd have to enter the IP address of each website we want to visit.

Domain Name System helps to resolve the host name to an address. It uses a hierarchical
naming scheme and distributed database of IP addresses and associated names

IP Address:-IP address is a unique logical address assigned to a machine over the network.
IP address is the unique address assigned to each host present on Internet. IP address is 32
bits (4 bytes) long.

Domain Name System Architecture

The Domain name system comprises of Domain Names, Domain Name Space, Name Server that
have been described below:
Domain Names
Domain Name is a symbolic string associated with an IP address. There are several domain names
available; some of them are generic domain such as com, edu, gov, net etc, while some country
level domain names such as au, in, za, us etc.
The following table shows the Generic Top-Level Domain names:

Domain Name Meaning

Com Commercial business
Edu Education
Gov U.S. government agency
Int International entity
Mil U.S. military
Net Networking organization
Org Non profit organization
The following table shows the Country top-level domain names:

Domain Name Meaning

au Australia
in India
us United States
za South Africa
uk United Kingdom
jp Japan
es Spain
de Germany
ca Canada

How Does DNS Work?

The basic concept for how DNS does its job is rather simple: each website address entered into a web
browser (like Chrome, Safari, or Firefox) is sent to a DNS server, which understands how to map that
name to its proper IP address.

It's the IP address that devices use to communicate with one another since they can't and don't
relay information using a name like www.google.com, www.youtube.com, etc. We get to
simply enter the simple name to these websites while DNS does all the lookups for us, giving
us near-instant access to the proper IP addresses needed to open the pages we want.

Again, www.microsoft.com, www.lifewire.com, www.amazon.com, and every other website

name is only used for our convenience because it's much easier to remember those names
than to remember their IP addresses

What Is Email Communication?

Email (or e-mail) communication can be defined as the exchange of short informational
messages between at least two people over a computer network. These messages containing
plain text, images or document attachments are delivered through email web-based services
like Gmail, Outlook, or Yahoo, rediffmail etc.

What Does Video Chat (VidChat) Mean?

Video chat is an online face-to-face, visual communication performed with other Internet
users by using a webcam and dedicated software.

The term stemmed from programs that evolved from text-based chats to incorporating two-
way video interaction. Video chat is usually used when video-based communication is
incorporated into a preexisting service. For instance, when FaceBook incorporated Skype
video-based communication in 2011, it said that it was adding a video chat.

Video chat is also known as video conferencing and video calling.

Video chatting tools

1 Portal
2 Skype
3 WeChat
4 Google Hangouts
 5 Viber
6 Google Duo
7 Facebook Messanger
8 Whatsapp
9 Facetime

Social Networking:- refers to grouping of individuals and organizations together via some
medium, in order to share thoughts, interests, and activities.

available Social networking Services

Facebook:- Allows to share text, photos, video etc. It also offers interesting online games.
Google+:- It is pronounced as Google Plus. It is owned and operated by Google.
Twitter:- Twitter allows the user to send and reply messages in form of tweets. These tweets are the
small messages, generally include 140+ characters.
Faceparty:- Faceparty is a UK based social networking site. It allows the users to create profiles and
interact with each other using forums messages.
Linkedin:- Linkedin is a business and professional networking site.
Flickr:- Flickr offers image hosting and video hosting.
Ibibo:- is a talent based social networking site. It allows the users to promote one’s self and also discover
new talent.
Whatsapp:- It is a mobile based messaging app. It allows to send text, images, video, and audio messages
Line:- It is same as whatsapp. Allows to make free calls and messages.
Hike:- It is also mobile based messenger allows to send messages and exciting emoticons.

Web Design Concept

Websites
Website is a collection of related web pages that may contain text, images, audio and video. The first page
of a website is called home page. Each website has specific internet address (URL) that you need to enter
in your browser to access a website.
Website is hosted on one or more servers and can be accessed by visiting its homepage using a computer
network. A website is managed by its owner that can be an individual, company or an organization.
A website can be of two types:
Static Website
Dynamic Website
Static website:-Static website is the basic type of website that is easy to create. You don't need the
knowledge of web programming and database design to create a static website. Its web pages are coded in
HTML.
The codes are fixed for each page so the information contained in the page does not change and it looks
like a printed page.

Dynamic website
Dynamic website is a collection of dynamic web pages whose content changes dynamically. It accesses
content from a database or Content Management System (CMS). Therefore, when you alter or update the
content of the database, the content of the website is also altered or updated.
Dynamic website uses client-side scripting or server-side scripting, or both to generate dynamic content.
Client side scripting generates content at the client computer on the basis of user input. The web browser
downloads the web page from the server and processes the code within the page to render information to
the user.
In server side scripting, the software runs on the server and processing is completed in the server then
plain pages are sent to the user.

Static vs Dynamic website

Static Website Dynamic Website
Prebuilt content is same every time the page is
Content is generated quickly and changes regularly.
loaded.
It uses the server side languages such as
It uses the HTML code for developing a
PHP,SERVLET, JSP, and ASP.NET etc. for
website.
developing a website.
It sends exactly the same response for every
It may generate different HTML for each of the request.
request.
The content is only changed when someone The page contains "server-side" code which allows the
publishes and updates the file (sends it to the server to generate the unique content when the page is
web server). loaded.
Content Management System (CMS) is the main
Flexibility is the main advantage of static advantage of dynamic website.
website.

Webpage:- is a document, typically written in plain text interspersed with formatting instructions of
Hypertext Mark-up Language (HTML) XHTML. A webpage may incorporate elements from other
websites with suitable HTML anchor.
Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP), which may
optionally employ encryption secure, HTTPS to provide security and privacy for the user of the webpage
content.

What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)
Syntax
<tag> content </tag>
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

Web pages are designed/edited using Notepad

Open notepad then write code for the page and save the notepad file with .html
extension. In this way file will be save as web document and will open in web
browser.

A Simple HTML Document

Example

<html>
<head>
<title>PageTitle</title>
</head>
<body>
<h1>MyFirstHeading</h1>
<p>Myfirstparagraph.</p>
</body>
</html>

HTML Tags used in example

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

Attributes: used with <body> tag 

 background: It contains the URL of the background image. It is used to set the
background image.
 bgcolor: It is used to specify the background color of web page.
 alink: It is used to specify the color of the active link.
 link: It is used to specify the color of visited links.
 text: It specifies the color of the text in a document.
 vlink: It specifies the color of visited links.

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also 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.
<h1> is bigger heading Tag and <h6> is the smallest heading tag
Example:-
<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>

Output will be:-

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6

Paragraph Tag
The <p> tag is used to start a paragraph and </p> tag is used to end a paragraph. Text between
the 2 tags is your paragraph.
Example

<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 the following result –
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.

Attributes of <p>tag

Align= right, left, center.

Example <p align=”center”>

Line Break Tag

Whenever you use the <br /> element, 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

<html>

<head>
 <title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>

</html>
This will produce the following result –
Hello
You delivered your assignment on time.
Thanks
Mahnaz

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell.
Example
<html>

<head>
<title>Centring Content </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

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

HTML Formatting Tags

HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to
format text without using CSS.
In HTML the formatting tags are divided into two categories:
Physical tag:-These tags are used to provide the visual appearance to the text.
Logical tag:- These tags are used to add some logical or semantic value to the text.

Element name Description

<b> This is a physical tag, which is used to bold the text written between it.
<strong> This is a logical tag, which tells the browser that the text is important.
<i> This is a physical tag which is used to make text italic.
<em> This is a logical tag which is used to display content in italic.
<mark> This tag is used to highlight text.
<u> This tag is used to underline text written between it.
<tt> This tag is used to appear a text in teletype. (not supported in HTML5)
<strike> This tag is used to draw a strikethrough on a section of text.
<sup> It displays the content slightly above the normal line.
<sub> It displays the content slightly below the normal line.
<del> This tag is used to display the deleted content.
<ins> This tag displays the content which is added
<big> This tag is used to increase the font size by one conventional unit.
<small> This tag is used to decrease the font size by one unit from base font size.

Example:- use of formatting tags

<html>
<head>
<title>use of formatting Tags in HTML</title>
<body>
<p> use of Bold tag</p>
<b> This is bold text</b>
<p> use of Italic tag</p>
<i> This is Italic text</i>
<p> use of underline tag</p>
<u> This is underline text</u>
<p> use of strong tag</p>
<strong> This is strong text</strong>
<p> use of em tag</p>
<em> This is em/italic text</em>
<p> use of mark tag</p>
<mark> This is used to highlight text</mark>
<p> use of strike tag</p>
<strike> This is used to strikethrough text</strike>
<p> use of del tag</p>
<del> This is used to display deleted text</del>
<p> use of ins tag</p>
My favorite color is <del>blue</del> <ins>red</ins>!
<p> use of superscript tag</p>
<h1>(A+B)²=A²+B²+2AB</h1>
<p> use of subscript tag</p>
<h1>H₂O</h1>
</body>
</html>

<IMG> Tag:- The <img> tag is used to insert an image into an HTML document. The image itself
isn’t inserted directly into the document, the browser inserts an HTML image from the source specified in
the <img> tag.

To make HTML images clickable, you should place the <img> tag inside the <a> tag, which is
used for inserting an HTML image link.

Attributes of HTML <img> tag

The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are given
below.
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. The value of the
alt attribute describes the image in words.
3) width:- It is an optional attribute which is used to specify the width to display the image.
4) height:- It is used to specify the height to display the image .
5) Title:- You can also use the title attribute with the <img> element to provide additional information
about the image

Example1:- To insert an Image on webpage

<html>
<head>
<title>Insert image</title>
</head>
<body>
<center>
<h2>To insert an image on webpage</h2>
<img src="C:\Users\acer\Desktop\iti.png" alt="image missing" title="Govt. ITI Dharamshala">
</center>
</body>
</html>
Example2:- To make HTML images clickable and use of height & width attributes.
<html>
<head>
<title>To make image clickable</title>
</head>
<body>
<center>
<h2> to make an Image clickable</h2><br>
<a href="http://www.itidharamshala.in" title="Click to visit ITI Dharamshala Website"><img
src="C:\Users\acer\Desktop\iti.png" height="200" width="300"></a>
</center>
</body>
</html>
<A > Anchor Tag:- The <a> tag is used to insert hyperlinks to other pages, or files, locations within
the same page, email addresses, or any different URL. You can use both text and image as a hyperlink.
In the browser, hyperlinks differ in their appearance and color. By default, HTML links appear as
underlined blue text.

Attributes of <a> Tag

href:- href attribute is required, as this is what creates the link. Href stands for hypertext reference and
contains the URL to send users to when they click on the link.
Target attribute:-The target attribute is used to describe how the user will be sent to the page in the
link. The two most common values are:

 "_self", which is the default option if not otherwise specified, and sends users to the link within the
same browsing context, usually a tab.

 "_blank" opens the anchor link in a new window or tab. This is typically used to link to external
pages.

Title attribute:-The title attribute is used to provide a name for the link.

Example:-

<html>
<head>
<title>To make image clickable</title>
</head>
<body>
<center>
<h2> Hyperlink</h2><br>
<h1><a href="C:\Users\acer\Desktop\Internet Concepts.docx" target="_blank">Click to
download/open notes</a>
<h1><a href="http://www.itidharamshala.in" target="_blank">website</a>
</center>
</body>
</html>

HTML Lists:- HTML Lists are used to specify lists of information. All lists may contain one or more
list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)

2. Unordered List or Bulleted List (ul)

3. Description List or Definition List (dl)

HTML Ordered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list
also. The ordered list starts with <ol> tag and the list items start with <li> tag.

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type="1"
Type="I"
Type="i"
Type="A"
Type="a"

Example:-

<html>
<head>
<title>Ordered list</title>
</head>
<body>
<ol type="1">
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
<li>Oracle</li>
</ol>
</body>
</html>
Output:-

1. Aries

2. Bingo

3. Leo

4. Oracle

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The
Unordered list starts with <ul> tag and list items start with the <li> tag.

There can be 4 types of bulleted list:

o disc

o circle

o square

o none

Example:-

<html>
<head>
<title>Unordered list</title>
</head>
<body>
<ul type="disc">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>

Output:-
  HTML
 Java
 JavaScript
 SQL

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as
definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

<dl> tag :-defines the start of the list.

<dt> tag:- defines a term.
<dd> tag :-defines the term definition (description).
Example:-

<html>
<head>
<title>Definition list</title>
</head>
<body>
<dl>  
  <dt>Computer</dt>  
  <dd>-It is an electronic device.</dd>  
  <dt>Printer</dt>  
  <dd>-It is an output device and used to take printouts.</dd>  
 <dt>Keyboard</dt>  
 <dd>-It is an input device.</dd>  
</dl>  
</body>
</html>
HTML Nested List:- A list within another list is termed as nested list. If you want a bullet list inside a
numbered list then such type of list will called as nested list.
Example:-

<html>
<head>
<title>Nested list</title>
</head>
<body>
<p>List of Indian States with their capital</p>
<ol>
<li>Delhi
<ul>
<li>NewDelhi</li>
</ul>
</li>
<li>Haryana
<ul>
<li>Chandigarh</li>
</ul>
</li>
<li>Gujarat
<ul>
 <li>Gandhinagar</li>
</ul>
</li>
</ol>  
</body>  
</html> 

HTML Marquee
The Marquee HTML tag is a non-standard HTML element which is used to scroll an image or text
horizontally or vertically.
In simple words, you can say that it scrolls the image or text up, down, left or right automatically.
HTML Marquee Attributes
Marquee's element contains several attributes that are used to control and adjust the appearance of the marquee.

Attribute Description
behavior It facilitates user to set the behavior of the marquee to one of the three
different types: scroll, slide and alternate.
direction defines direction for scrolling content. It may be left, right, up and down.
width defines width of marquee in pixels or %.
height defines height of marquee in pixels or %.
hspace defines horizontal space in pixels around the marquee.
vspace defines vertical space in pixels around the marquee.
scrolldelay defines scroll delay in seconds.
scrollamount defines scroll amount in number.
loop defines loop for marquee content in number.
bgcolor defines background color. It is now deprecated.

Example:-

<html>
<head>
<title>Use of marquee tag and attributes</title>
</head>
<body>
<marquee width="100%" direction="up" height="100px" bgcolor="pink">
<b>Sample text scrolling up.</b>
</marquee>
<marquee width="100%" direction="down" height="100px" bgcolor="yellow">
<i>Sample text scrolling down.</i>
</marquee>
<marquee width="100%" direction="right" height="100px" bgcolor="pink">
<h3>Sample text scrolling left to right.</h3>
</marquee>
<marquee width="100%" direction="left" height="100px" bgcolor="yellow">
<h4>Sample text scrolling right to left.</h4>
</marquee>
<hr \>
<marquee behavior="scroll" direction="up" scrollamount="1" bgcolor="pink">Slow Scrolling</marquee>
<marquee behavior="alternate" direction="right" scrollamount="20" bgcolor="yellow">alternate
Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20" bgcolor="pink">Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50" bgcolor="yellow">Very Fast
Scrolling</marquee>
<hr \>
<marquee behavior="alternate" bgcolor="darkblue" scrollamount="20"><img src="C:\Users\acer\
Desktop\audi.jpg"></marquee>
</body>
</html>

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> Tag, with the help of <tr> ,
<td>, and <th> Tag
In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table
data is defined by <td> tags.
Attributes of <Table> Tag:-
Border:- it is used to put a border across all the cells. If you do not need a border, then you can use
border = "0".
Cellpadding and cellspacing:- These attributes are used to adjust the white space in your table
cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Colspan and Rowspan Attributes:-We use colspan attribute if we want to merge two or
more columns into a single column. Similar way we use rowspan if we want to merge two or
more rows.
Tables Backgrounds:-You can set table background using one of the following two
ways −
bgcolor attribute − You can set background color for whole table or just for one cell.
background attribute − You can set background image for whole table or just for one cell.
You can also set border color also using bordercolor attribute.

Table Height and Width attributes

You can set a table width and height using width and height attributes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.

Example 1:- HTML Table with border, border color, background color, Cellpadding and
cellspacing Attributes

<html>
<head>
<title>HTML Table with attributes</title>
</head>
<body>
<h3> HTML Table with border, border color, background color, Cellpadding and cellspacing
Attributes</h3>

<table border = "3" bordercolor="blue" bgcolor="pink" cellpadding = "5" cellspacing = "5">

<tr>
<th>Name</th>
<th>Address</th>
<th>Marks</th>
</tr>
<tr>
<td>Anjali</td>
<td>Chamunda</td>
<td>500</td>
</tr>
<tr>
<td>Babita</td>
<td>Nagrota</td>
<td>550</td>
 </tr>
</table>
</body>
</html>

Example 2:- HTML Table with border, height, width, colspan and rowspan attributes
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<h3> HTML Table with border, border color, background color, height, width ,colspan and
rowspan attributes</h3>

<table border = "1" bordercolor="blue" bgcolor="pink" height="200" width="300">

<tr>
<th colspan=4> Student Details</th>
</tr>
<tr>
<th rowspan=2>Name</th>
<th rowspan=2>Address</th>
<th colspan=2>Marks</th>
</tr>
<tr>
<th>10th</th>
<th>12th</th>
</tr>
<tr>
<td>Anjali</td>
<td>Chamunda</td>
<td>500</td>
<td>350</td>
</tr>
<tr>
<td>Babita</td>
<td>Nagrota</td>
<td>550</td>
<td>400</td>
</tr>
</table>
</body>
</html>

Example 3:- HTML Table with border, height, width, and hyperlink <a> tag.
<html>
<head>
<title>HTML Table with hyperlink</title>
</head>
<body>
<h3> HTML Table with anchor tag to create hyperlink</h3>

<table border = "1" bordercolor="blue" bgcolor="pink" height=150 width=150>

<tr>
<th colspan=2> Student Details</th>
</tr>
<tr>
<th>Name</th>
<th>Address</th>
 </tr>
<tr>
<td>Anjali</td>
<td><a href="https://en.wikipedia.org/wiki/Shri_Chamunda_Devi_Mandir"
target="_blank">Chamunda</td></a>

</tr>
<tr>
<td>Babita</td>
<td><a href="https://en.wikipedia.org/wiki/Nagrota_Bagwan"
target="_blank">Nagrota</td></a>
</tr>
</table>
</body>
</html>

HTML Form
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 such as name, email address, password, phone number, etc.

HTML Form Controls

There are different types of form controls that you can use to collect data using
HTML form −
Text Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select box
Clickable Buttons
Submit and Reset Button

Text Input Controls

There are three types of text input used on forms −
1 Single-line text input controls<Input> Tag − This control is used for
items that require only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
Attributes of <input> Tag:-
type Indicates the type of input control and for text input control it will be set to text.
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of characters
maxlength Allows to specify the maximum number of characters a user can enter into the text
box.
2 Password input controls − This is also a single-line text input but it
masks the character as soon as a user enters it. They are also created using
HTML <input> tag.
Attributes of Password <input> control:-
type Indicates the type of input control and for password input control it will be set
to password
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of characters
maxlength Allows to specify the maximum number of characters a user can enter into the text
box.

3 Multi-line text input controls − This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input controls
are created using HTML <textarea> tag.

Attributes of <textarea> Tag :-

name Used to give a name to the control which is sent to the server to be recognized and get the
value.
rows Indicates the number of rows of text area box
cols Indicates the number of columns of text area box.

Checkbox Control
Checkboxes are used when more than one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set
to checkbox.

Attributes for <checkbox> tag.

type Indicates the type of input control and for checkbox input control it will be set
to checkbox.
name Used to give a name to the control which is sent to the server to be recognized and get
the value
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to
be selected. They are also created using HTML <input> tag but type attribute is
set to radio.
Attributes for <checkbox> tag.
type Indicates the type of input control and for checkbox input control it will be set to
radio
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value The value that will be used if the radio box is selected
checked Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down
various options in the form of drop down list, from where a user can select one
or more options.
Attributes of <option> tag –

name Used to give a name to the control which is sent to the server to be recognized and get
the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items from the menu.

Attributes of <select> tag –

value The value that will be used if an option in the select box is selected.
selected Specifies that this option should be the initially selected value when the page loads.

label An alternative way of labeling options

File Upload Box:-

If you want to allow a user to upload a file to your web site, you will need to use
a file upload box, also known as a file select box. This is also created using the
<input> element but type attribute is set to file.

.
type Type attribute is set to be file to upload a file.
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
accept Specifies the types of files that the server accepts.
.

Button Controls
There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input>tag by setting its type attribute
to button. The type attribute can take the following values –

This creates a button that automatically submits a form.

submit
This creates a button that automatically resets form controls to their initial values.
reset

HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a form. This
element is used with <legend> element which provide caption for the grouped elements.

Example:- Use of different <form> Tag controls

<html>
<head>
<title>Form Input Controls</title>
</head>
 <body bgcolor="pink">
<form>
<fieldset>
<legend>User Information Form:</legend><br>
First name: <input type = "text" name = "first name" />
<br><br>
Last name: <input type = "text" name = "last name" /><br>

<br><br>
User ID : <input type = "text" name = "user_id" />
<br><br>
Password: <input type = "password" name = "password" />
<br><br>

Gender:<br>
<input type="radio" name="Gender" value="Male"checked />Male
<input type="radio" name="Gender" value="Female" />Female
<input type="radio" name="Gender" value="Other" />Other
<br><br>

Subject:<br>
<input type="checkbox" name="Physics" checked />Physics
<input type="checkbox" name="Chemistry" />Chemistry
<input type="checkbox" name="Maths" />Maths
<input type="checkbox" name="English" />English
<br><br>

State:<br>
<input type="text" name = "Himachal" value="Himachal Pradesh" disabled>
<br><br>

Select District:<br>

<select name = "dropdown">

<option value = "Kangra" selected>Kangra</option>
<option value = "Kullu">Kullu</option>
<option value = "Hamirpur">Hamirpur</option>
<option value = "Shimla">Shimla</option>
<option value = "Chamba">Chamba</option>
<option value = "Una">Una</option>
<option value = "Solan">Solan</option>
<option value = "Mandi">Mandi</option>
<option value = "Kinnaur">Kinnaur</option>
<option value = "Sirmour">Sirmour</option>
<option value = "Bilaspur">Bilaspur</option>
<option value = "Lahul & Sapitti">Lahul & Sapitti</option>
</select>
<br><br>
Address:<br>
<textarea rows = "5" cols = "40" name = "address">
</textarea><br>
<br><br>
<input type = "file" name = "fileupload" accept = "image/*" /><br><br>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>

</html>
 HTML - Audio & Video Controls
The HTML <audio> and <video> tags make it simple to add media to a website.
You need to set src attribute to identify the media source and include a controls
attribute so the user can play and pause the media.

<audio> tag:- is used to embed sound content in a document, such as music

or other audio streams.
<audio>tag attributes:-

Attribute Value Description

autoplay autoplay Specifies that the audio will start playing as soon as it is
ready
controls controls Specifies that audio controls should be displayed (such
as a play/pause, vol,seeking button etc).
Loop Loop Specifies that the audio will start over again, every time
it is finished
muted muted Specifies that the audio output should be muted
preload Auto, none, Specifies if and how the author thinks the audio should
metadata be loaded when the page loads
src URL Specifies the URL of the audio file

<video> tag:- is used to embed video content in a document, such as a movie

clip or other video streams.

<video>tag attributes:-

Attribute Value Description

autoplay autoplay Specifies that the video will start playing as soon as it is ready
controls controls Specifies that video controls should be displayed (such as a
play/pause, volume, fullscreen seeking button etc).
Height Pixels Sets the height of the video player
Loop Loop Specifies that the video will start over again, every time it is
finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or
until the user hits the play button
preload Auto, none, Specifies if and how the author thinks the video should be loaded
metadata when the page loads
src URL Specifies the URL of the video file
width Pixels Sets the width of the video player

Note:-Some browsers does not support these controls

Example:- Use of Audio & Video Controls .

<html>
<head>
<title>Use of Video & Audio Controls</title>
</head>
<body bgcolor="lime">
<h1> Use of Video Control</h1><br>
<video width = "300" height = "200" controls autoplay>
<source src = "C:\Users\acer\Desktop\shiv.mp4" type ="video/mp4" />
</video><br><br>

<h1> Use of Audio Control</h1><br>

<audio controls>
<source src="C:\Users\acer\Desktop\song.mp3" type ="audio/mp3" />
</body>
</html>

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!

Tip: The word cascading means that a style applied to a parent element will also apply to all
children elements within the parent. So, if you set the color of the body text to "blue", all
headings, paragraphs, and other text elements within the body will also get the same color
(unless you specify something else.

Using CSS
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
 The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is easier to
demonstrate, and easier for you to try it yourself.

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. Inline CSS contains the CSS property in the
body section attached with element is known as inline CSS. This kind of style is
specified within an HTML tag using the style attribute.

The following example sets the text color of the <h1> element to blue, font size to 60px,
font style to italic, text decoration to underline and the text color of the <p> element to red,
font style to italic and text align to center :

Example:-
<html>
<head>
<title>Inline CSS </title>
</head>
<body>
<h1>Use of Inline CSS</h1>
<h1 style="color:blue;font-size:60px; font-style:italic; text-decoration:underline">A
blue Heading for Inline CSS.</h1>
<p style="color:red; font-size:50px; font-style:italic;text-align:center; ">A red
paragraph for Inline CSS.</p>
</body>
</html>

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. In addition,
the page will be displayed with a "powderblue" background color: 

Example:-

<html>
<head>
<style>
body
{
background-color: powderblue;
}
h1 {
color: blue;font-size:50px;text-align:center;
}
p {
color: red;font-size:40px;text-decoration:underline;text-decoration-color:green;
}
</style>
</head>

<body>
<h2> Use of Internal CSS</h2>
<h1>This is a heading for Internal CSS</h1>
<p>This is a paragraph for Internal CSS.</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:

Example:-
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Use of External CSS</h1>
<h2>This is a heading for External CSS</h1>
<p>This is a paragraph.</p>

</body>
</html>

The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":

body {
background-color: powderblue;
}
h1 {
color: blue;text-decoration:underline;
}
h2 {
color:green;
}
p{
color:red;font-size:20px;
}

Tip: With an external style sheet, you can change the look of an entire web site, by changing
one file!

Difference between HTML and CSS

HTML CSS
HTML is used to define a structure of a web CSS is used to style the web pages by using
page. different styling features.
It consists of tags inside which text is enclosed. It consists of selectors and declaration blocks.
HTML doesn’t have further types. CSS can be internal or external depending upon
the requirement.
We cannot use HTML inside a CSS sheet. We can use CSS inside a HTML document.
HTML is not used for presentation and CSS is used for presentation and visualization.
visualization.

Example of CSS

<html>
<head>
<style>
body {
background-color: lightblue;
}

h1 {
 color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>

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

</body>
</html>

Definition of CMS:
CMS Stands for "Content Management System." A CMS is a software tool that allows you to
create, edit, and publish content.
Description of CMS:
The goal of a CMS is to provide an intuitive user interface for building and modifying
webpage content. Each CMS also provides a web publishing tool that allows one or more
users to publish updates live on the Web. The editing component is called the content
management application (CMA), while the publishing tool is called the content delivery
application (CDA). These two components are integrated together in a CMS to streamline the
web development process.

major advantage of using a CMS is that it requires almost no technical skill or knowledge to
manage. Since the CMS manages all your content, you don't have to. There are several web-
based CMS tools available today. The following are some of the most popular ones:
• WordPress - free web software designed for creating template-based websites or blogs
• Blogger - Google's blogging tool designed specifically for maintaining a blog
• Joomla - a flexible web publishing tool that supports custom databases and extensions
• Drupal - an open source platform often used for developing community-based sites
•Weebly - a web-based platform for building simple personal and business websites
• Wix - a collection of web publishing tools for creating a highly customizable website

Introduction to Kompozer
KompoZer is a complete Web Authoring System that combines web file management and
easy-to-use
WYSIWYGweb page editing capabilities found in Microsoft FrontPage, Adobe
DreamWeaver and other high end programs. With kompozer you can create web pages and
manage a website with no technical expertise or knowledge of HTML.