Tyndale-Biscoe & Mallinson Society

Computer (T1) Tutorial for Class-8

Session: 2021-2022

Topic: Networking Concepts

Introduction:
A group of computers connected together for the purpose of sharing data
and hardware resources is called networking. Each computer in a network is
called a Node (client/workstation). Computer networks have shrunk the
world and brought people together. They have extended the power of a
computer beyond the expense of a room. A computer network consists of
two or more computers that are linked in order to share resources such as
printers, exchange files and allow communication. An example of a
network is the Internet, which connects millions of people all over the
world.

Advantages of Networking:
• It enhances communication and availability of information.
Networking, especially with full access to the web, allows ways of communication that would
simply be impossible before it was developed. Instant messaging can now allow users to talk in real
time and send files to other people wherever they are in the world, which is a huge boon for
businesses.

• It makes file sharing easier.

Computer networking allows easier accessibility for people to share their files, which greatly helps
them with saving more time and effort, since they could do file sharing more accordingly and
effectively.
• It is highly flexible.
This technology is known to be very flexible, as it gives users the opportunity to explore everything
about essential things, such as software without affecting their functionality. Plus, people will have
the accessibility to all information they need to get and share.
• Computer networks allow us to be more productive with our time
We have instant access to almost any form of information thanks to the presence of computer
networks in our lives. Instead of needing to stop to look up something in an encyclopaedia, you can
find the information on Google, Bing, or another search engine.

Network Components:
Computer network components comprise both physical parts as well as the software required for installing
computer networks, both at organizations and at home. The hardware components are the server, client, peer,
transmission medium, and connecting devices. The software components are operating system and protocols.
To establish wired networking in a group of computers, we require the following additional components:

1. Network Card:
A Network interface card (also known as a NIC, network card, or
network interface controller) is an electronic device that connects a
computer to a computer network, usually a LAN. It is considered a
piece of computer hardware. A NIC controls the wired and wireless
connections of a computer to exchange information with other
computers and the Internet. The most widely used network connection
for personal computers is an Ethernet connection. Ethernet is really a
standard for computer network technologies that describes both
hardware and communication protocols.
2. Networking cable:
Network cables are used to connect and transfer data and information between
computers, routers, switches and storage area networks. These cables are
essentially the carrier or media through which data flows etc. Different types of
network cables, such as coaxial cable, optical fibre cable, and twisted pair cables
are used.

\\F22\\ Page 1 of 21
 Hubs and Switches:

A hub connects multiple wires coming from different branches. They do not have the intelligence to find out
the best path. The switch can perform error checking before forwarding data, that makes it very efficient as
it does not forward packets that have errors and forward good packets selectively to correct port only.

Wireless Networking Cards:

The wireless network card is the wireless terminal equipment, which
is used to surf the Internet through the wireless connection network
under the wireless coverage of the wireless local area network. The
wired network is converted into a wireless signal for use by wireless
devices.
Access points or routers:
Routers guide and direct network data.

In computer networking, a wireless access point (WAP), or more

generally just access point (AP), is a networking hardware device
that allows other Wi-Fi devices to connect to a wired network.

Types of Network:
1. LAN
2. MAN
3. WAN

Local Area Network (LAN):

A local area network (LAN) is a collection of devices connected

together in one physical location, such as a building, office, or
home.
A LAN can be small or large, ranging from a home network with one user to an enterprise network with
thousands of users and devices in an office or school.

Typically, LANs use wired connections to link the computers to each other and to a variety of peripheral
devices such as printers. To set up a LAN, you will need a network switch - or a router.

Features of LAN are:

• Every computer has the potential to communicate with any other computers of the network.
• High degree of interconnection between computers.
• Easy physical connection of computers in a network.
• Inexpensive medium of data transmission.
• High data transmission rate.

Metropolitan Area Network (MAN):

A Metropolitan Area Network is a class of network which serves a large geographical area between 5 to 50
kilometres in range. A metropolitan area network (MAN) is a network with a size greater than LAN but smaller
than a WAN. It normally comprises networked interconnections within a city that also offers a connection to the
Internet. There are three important features which discriminate MANs from LANs or WANs:

1. The network size falls intermediate between LANs and WANs. A MAN typically covers an area of
between 5 and 50 km diameter. Many MANs cover an area the size of a city, although in some cases MANs
may be as small as a group of buildings or as large as the North of Scotland.
2. A MAN (like a WAN) is not generally owned by a single organisation.
3. A MAN often acts as a high speed network to allow sharing of regional resources (similar to a large LAN).
It is also frequently used to provide a shared connection to other networks using a link to a WAN.

\\F22\\ Page 2 of 21
Wide Area Network (WAN):

A WAN network diagram is a visual representation of a computer network that extends across a large
geographical area, such as across states or countries. It allows you to see how the different components of such
a network interact. A wide area network (WAN) is a data network, usually used for connecting computers, that
spans a wide geographical area. WANs can be used to connect cities, states, or even countries.

The big example of wide area network is Internet, ATM. On internet we transfer files from one computer to
other. WANs can be connected together using the Internet, leased lines or satellite links. The important features
of WAN are:
1. WANs generally connect devices that are separated by a broader geographical area that cannot be served
by a LAN.
2. WANs are popular and widely used. Internet is a WAN , well known for all. Business and government
entities effectively work using the WANs that allow them quickly exchange the data between the
employees, suppliers, clients in different geographical locations.

Network Architecture:
Network architecture refers to how computers are organized in a system and how tasks are allocated
between these computers. Two of the most widely used types of network architecture are peer-to peer and
client/server. Client/server architecture is also called 'tiered' because it uses multiple levels.

Peer – to – Peer Network:

Peer – to – Peer or P2P is a network of personal computers, each of which acts as both client and sever, so
that each can exchange files and email directly with every other computer on the network. In Peer - to –Peer
(P2P) network, the "peers" are computer systems which are connected to each other via the Internet. Files
can be shared directly between systems on the network without the need of a central server. The primary goal
of peer-to-peer networks is to share resources and help computers and devices work collaboratively, provide
specific services, or execute specific tasks.
\\F22\\ Page 3 of 21
 Advantages:
1. Such networks are easy to set up and maintain as each computer manages itself.
2. It eliminates extra cost required in setting up the server.
3. Since each device is master of its own, they are not dependent on other computers for their operations.
Disadvantages:
In peer-to-peer network, the absence of centralized server make it difficult to backup data as data is located on
different workstations.
1. Security is weak as each system manages itself only.
2. There is no central point of data storage for file archiving.
Client – Server Network:

A client/server network is a system where one or more computers called clients connect to a central computer
named a server to share or use resources. In a client-server network, there is a central computer, known as a
server, which hosts data and other forms of resources. Clients such as laptops and desktop computers contact
the server and request to use data or share its other resources with it. A client-server network is designed for
end-users, called clients, to access resources such as files, songs, video collections, or some other service from a
central computer called a server. A server's sole purpose is to do what its name implies - serve its clients.
Advantages:
1. All files are stored in a central location.
2. Network peripherals are controlled centrally.
3. Backups and network security is controlled centrally.
4. Users can access shared data which is centrally controlled.

Disadvantages:
1. A specialist network operating system is needed.
2. The server is expensive to purchase.
3. Specialist staff such as a network manager is needed.
4. If any part of the network fails a lot of disruption can occur.

Network Security:
Network security is a broad term that covers a multitude of technologies, devices and processes. In its
simplest term, it is a set of rules and configurations designed to protect the integrity, confidentiality and
accessibility of computer networks and data using both software and hardware technologies. Every
organization, regardless of size, industry or infrastructure, requires a degree of network security solutions in
place to protect it from the ever-growing landscape of cyber threats in the world today.

There are two general levels of network security:

1. Login Security:

A login is a set of credentials used to authenticate a user. Most often, these consist
of a username and password. Logins are used by in websites, computer
applications, and mobile apps. They are a security measure designed to prevent
unauthorized access to confidential data.

2. Rights Security:

Rights security are the permissions an individual user or a computer application

holds to read, write, modify and delete or otherwise access a computer file, change configurations or settings, or
add or remove applications. An organization’s network or information technology administrator can define
permissions for files, servers, folders or specific applications on the computer.

\\F22\\ Page 4 of 21
 Points to Remember:
• Peer – to – Peer is also known as P2P.
• WAP stands for Wireless Access Point.
• Wi-Fi stands for Wireless Fidelity.
• Each computer in a network is called as node or workstation or client.
• Hub is a common connection point for devices in a network.
• A switch is a hardware device that filters and forwards network packets.
• IP stands for "Internet Protocol." An IP address, is a unique address that identifies a device on the
Internet or a local network.
• A firewall is a network security system, either hardware- or software-based, that uses rules to
control incoming and outgoing network traffic.

Book Work:
A. Fill in the blanks:
1. Communication system allows us to talk to any person in the world at any time.
2. A Computer network enables two or more computers to share data and resources.
3. In a network, modification or upgradation of the software is done at a Single point only.
4. The computers that communicate with each other are called nodes.
5. A network maintained without using wires is called wireless networking.
6. LAN and MAN are the different types of networking.
B. State True or False:
1. Nodes and servers have the same function. False
2. LAN stands for Large Area Network. False
3. Network cards are used to physically attach a computer. True
4. WAN stands for Wide Area Network. True
5. WAP stands for Wired Access Point. False
6. In Client – Server network, there is no central server. True
C. Multiple choice questions (Answers are in bold):
1. Which is the most commonly used network card.
a. Wi-fi b. Bluetooth c. Ethernet Network Card
2. Which wireless technology is used to interconnect mobile phones, computers, printers using short-
range wireless connection?
a. Hub b. Bluetooth c. Both
3. What do we call the computers which are connected to the server?
a. Nodes b. Laptop c. PC
4. Network security means protecting data and resources from access by unauthorised persons.
a. Network b. Information c. Resource Sharing
5. WAP is a device that connects wireless communication devices to form a wireless network.
a. WAN b. Wi-Fi c. WAP

\\F22\\ Page 5 of 21
 UNDERSTANDING HTML
ROLE OF HTML IN INTERNET
We can share data and information across the globe instantly through internet. The servers, share their data or
information resources available on the Internet with clients (Systems which initiate request to servers for
various services). They rely on servers for files, devices, processing power etc.
The servers store files and information in the form of web sites. These web sites consist of millions of pages
which contain text, graphic, video, audio and link to other web pages via hyperlink. These web sites can be
accessed by different users around the world using Internet connection.
Web Development in itself has areas of focus: the client-side (Front-End), the server-side (Back-End) and the
cross-disciplined Full-stack development. The best programming languages for you to start learning in each of
these Web Development areas. are
HTML and CSS , JavaScript , TypeScript, Python, Node JS, ASP .NET, Java, Ruby, MEAN (Stack),
MERN (Stack) , Let we start with HTML

HISTORY OF HTML

GML
(General Mark-up Language). HTML
(Hyper Text Mark-up Language). In 1989
Early 1980’s

SGML
(Standard Generalized Mark-up Language).
In 1986 (ISO)

HTML history starts early 1980s by IBM. It was known by the name called GML (General Mark-up Language).
It was a powerful language that aimed at creating a document in which one could mark the title, headings, text,
font selection and much more.
In 1986, this concept got standardization by ISO and was renamed to SGML (Standard Generalized Mark-up
Language).
In 1989, Sir Tim Berners-Lee and his team redesigned this language and named it as HTML (Hyper Text Mark-
up Language).
Sir Tim Berners-Lee is founder of World Wide Web.(www or w3)

HTML
HTML is a complete code package that allows a user to create web pages. It includes text and graphics. You can
add links to your web pages. Hyperlinks are the highlighted text segments or images that connect a page to
other pages on the web.
HTML is a complete code package that allows a user to create web pages. It includes text and graphics. You
can add links to your web pages. Hyperlinks are the highlighted text segments or images that connect a page to
other pages on the web.

HTML

Hyper Text Language

Mark-up
 Hyper Text: Hyper text is the text used to link various web pages. It is the text on a web page, which on
clicking opens a new web page.

\\F22\\ Page 6 of 21
  Mark-up: It means highlighting the text either by underlining or displaying it in different colours, or
both.
 Language: It refers to the mode of communication between web pages. HTML has its own syntax and
rules.
Reasons For Creating Web Pages
You can reach out to millions of people across the world who can get the information from your Web page.
A) FOR PERSONAL USE
Personal Pages
One reason to create Web pages is to share information about their families, pet , vacations or favorite
hobbies. Some people create Web pages to present a resume to potential employers.
Entertain Visitors
Most Web pages are created to display collections of jokes or humorous stories. You can also create Web
pages to display information, pictures, sound clips and videos about a favorite celebrity, sports team, TV
show or on any subject of interest.
Knowledge Spread
Many professionals like scientists and businessmen place their work on the Web. You can create Web pages
to share your knowledge on any specialized subject with other people.
Promoting Interests
Web pages can be created to display information about your organization. Events and other information
about the organization can be shared with others.
B) FOR COMMERCIAL USE
To Provide Information
Companies can provide information about themselves and their products. Big companies can use Web pages
to keep the public informed about new products and interesting news.
Shopping
Readers can order products and services of a company through the Internet. Companies can display products
and their prices to help readers make up their minds.
Advertising Jobs
Web pages may be used to advertise jobs in a company. Readers may also submit resumes through their
websites.
Contact information
Office addresses and phone numbers can be displayed by many companies on their Web pages. Readers can
contact the company for their queries and suggestions.

Steps for Creating Web Pages

To make your Web pages look good and be easily navigable, always plan in advance before taking on any project.

1. Plan your Web page

First of all you should know what you want to do with your Web pages. Choose a topic or
theme and then decide about the type of information you want to give.
2. Gather Information
After selecting a topic or theme you should collect all the information such as text, images,
diagrams and contact numbers pertaining to the topic for your Web page

3. Oganize Information
Information may be divided into different parts. Each part should make a separate Web
page. The page should contain enough information about the concept.
4. Enter Text
Feed the text in a text editor or word processor. Make sure that each page is a separate
document. HyperText Markup Language (HTML) tags may then be added to the text.
The documents thus become Web pages.
5. Add Images
You can add images to make your Web pages more attractive. You can create your own
images, use a scanner for images, or find them on the Internet.
6. Add Hyperlinks
You can add hyperlinks that readers can select on your Web pages to display other pages
on the Web pages Links are text or images that readers can select to display other pages
\\F22\\ Page 7 of 21
 on the Web. Links help readers to easily browse through information of their interest.
7. Publish Web pages
When you finish creating your Web pages, you can transfer the pages to a computer
that make pages available on the Web. You should then test the Web pages to ensure
that your links work properly and your information appears the way you want it to
appear.
STRUCTURE OF AN HTML DOCUMENT:
The standard structure of an HTML document has two sections: Head and
Body.
An HTML document begins with the <HTML>tag
<HTML>
<Head><Title> Tyndale Biscoe School </Title>
</Head>
<Body>
The main content of the HTML document is written here
along with the attribute which enhance the appearance of a
web page.
</Body>
</HTML>
All HTML document ends with the </HTML>tag
HTML Tags
The <HTML> and </HTML> are basic HTML tags which appear at the beginning and end of a text
document. When a browser comes across these tags, it knows that anything within these two tags
defines a Web page.
Document Header
You use the header of an HTML document to add expressive information to your Web page. The
document header tags, <HEAD> and </HEAD>, immediately follow the opening <HTML> tag.
Document Title
You can add a title to your HTML document to help people search your Web page. The Web
browsers display the title in the browser window’s title bar. The <TITLE> and </TITLE> tags define
a page title and appear inside the document header.
<TITLE> Tyndale Biscoe & Mallionson Society </TITLE>
Body
The noticeable content that makes up your Web page, including paragraphs, lists, tables, and images,
lives in the body of your HTML document. The body of the document is identified by the <BODY>
and </BODY> tags. The body of a document comes after the header of a document.
HTML TAGS
A tag comprises of text enclosed in angle brackets < >. All tags have their own attributes and default
values. eg tag in HTML follows specific rules known as syntax. These tags are not case sensitive. For
example, <tag name and <TAG NAME> will have the same effect. There are infinite combination of
HTML tags/elements which < used for forms, images and lists. Everything displayed on a web page
requires the use of a tag. The HTML elements can be categorized as:
 Container Tags
 Empty Tags
CONTAINER ELEMENTS
In HTML, the tags that include both ON and OFF tags are called Container elements. A tag is opened
using opening angle brackets < > and closed using closing brackets < / >.
For example, <HTML> tag has its closing tag which is </HTML> and attributes as well.
While using Tag sets as containers, we should always balance the flow.
Correct Way Incorrect Way
Tag 1 Tag 1
Tag 2 Tag 2
/Tag 2 /Tag 1
/Tag 1 /Tag 2
EMPTY ELEMENTS
Empty elements contain only ON tags. They do not have OFF tags. These elements do not enclose any
data. Instead they function their own. For example, <BR> tag is an empty tag which breaks the line and
displays the text from the next line

\\F22\\ Page 8 of 21
Some Important Basic TAGS/ATTRIBUTES

BASIC TAGS/ATTRIBUTES Description

<BODY> Identifies content on a Web page

<BR> Creates a new line

<H1>, <H2>, <H3>, <H4>, <H5>, <H6> Creates heading levels
<HEAD> Contains information about a Web page title
<HTML> Identifies an HTML document
<P> Starts a new paragraph
ALIGN Aligns a paragraph
<TITLE> Creates a title for a Web page
<B> Bolds text
<BASEFONT> Specifies a default font for the entire page

COLOR Specifies default text color

FACE Specifies default font face
SIZE Specifies default text size
<BODY> BGCOLOR Sets a background color for a page

<CENTER> Centers information on the page

<FONT> Changes the appearance of text

COLOR Changes the text color

FACE Changes the font
SIZE Changes the text size

<I> Italicizes text

<U> Underlines text

<OL> Creates an ordered list

<UL> Creates an unordered

.
HOW TO CREATE AN HTML DOCUMENT
To create an HTML document, you can type the text in any word processor, like WordPad, Notepad.
The extension given to the page is always .html. Let us see how to open and create an HTML
document using Notepad.
Open Notepad by clicking on Start > All Programs > Accessories > Notepad.
► The Notepad window will appear.

After writing HTML code as shown in Figure .

Click on File >save menu option

\\F22\\ Page 9 of 21
 Click on file >Save As menu .
• Notepad saves dialog box appears
• A Web page name can contain
letters and numbers, but no spaces.
The main Web page is usually name
as tbmes.html. or tbmes.htm
• Make sure you add the .html or .htm
extension to the Web
• Type a name for the Web page
• Click on address navigate to the
folder where you want to store the
page.
• Click on Save as type:
• box to see list of the ways by which
you can save the Web page.
• Click on Text Document
• Click on Save button.

VIEWING AN HTML DOCUMENT

To view an HTML file, we only need a web browser such as Internet Explorer, Netscape Navigator,
Mozilla Firefox . Google Chrome. Here we are using Internet Explorer, as it is a part of Windows.
To view your first web page, follow these steps:
Click on Start > All Programs menu and choose Internet Explorer option. The Internet Explorer
window will appear.
Click on File menu of Internet Explorer window and select Open option. The Open dialog box will
appear. Click on Browse button to locate the HTML file. A dialog box will appear.
Choose the path where you have stored your HTML document and select your file. Click on Open
button and click OK in Open dialog box.
Or
After saving the file, shape of the file icon changes into the shape of web browser icon i.e.
internet explorer icon or shape of default browser icon saved in your computer as shown
in the figure. Click on the file icon directly.
Your web page will be shown on the web browser.

ATTRIBUTES
An attribute is a property value that modifies an HTML element. Attributes appear inside the opening
tag and their value is always inside the quotation marks.
For example: <font size=4, color= “blue”> Here size and color are the attributes of the <Font> tag.
TYPES OF ELEMENTS
CONTAINER ELEMENTS
Heading
Headers are like the chapter headings of a book. You can use six different headers in your web page.
But you may not use more than three at a time. Header tag is written <Hn> and </Hn> where n is a
number from 1 to 6. For example, <H1>. add headers in your web page). H1 heading style displays
the text in the largest size and is used for main heading, the text increases to 24 pt font size. The
lowest level H6 reduces the font size 8 pt.
Type <Hn> after the <BODY> tag.
For example <H1>

\\F22\\ Page 10 of 21
PARAGRAPH
The paragraph (<P>) tag marks the beginning of a paragraph . Any text containing more than a few
lines should be given inside the paragraph tag. In this tag a blank line is inserted before and after the
enclosed text. It has only one attribute called align . “Align” attribute can also be given with Heading Style
tag, Font tag or Paragraph tag.
Syntax <P> Starts a new paragraph
<P Align= "Center"> Aligns the text in center.
<P Align= "Right"> Aligns the text to the right side.
<P Align= "Left"> Aligns the text to the left side
<P Align="Justify"> Aligns the text from both left and right margins.

HTML CODE RESULT AFTER OPENING HTML FILE

Center
The Center tag is used to align the text to the centre of the page. To center the text, type <CENTER>
(opening tag) before the text and type </CENTER> (closing tag) after the text.
EMPTY ELEMENTS
BR (Break)
This tag breaks the line and displays the text from the next line, without giving any space between
two lines. It should be given at the end of the line after which a new line is required.
Syntax: <BR>
HR
It is used as a separator between blocks of text. The <HR> element draws a horizontal line across the
page. Type <HR> where you want to insert a horizontal line in between the text. In <HR> tag type
size= “?”, replacing “?” with the thickness you want to apply. The size attribute of <HR> is given
values in term of pixels. A pixel is equal to dividing an inch into 72 points.

\\F22\\ Page 11 of 21
 HTML CODE RESULT AFTER OPENING HTML FILE

CHANGING THE APPEARANCE OF TEXT FONT STYLE TAGS

These tags change the appearance of text. They are also known as physical markup.
Bold
The bold tag is used, when you want to emphasize the text. Type <B> before typing the text which
you want to display as bold and type </B> after the text.
Syntax: <B> TYNDALE BISCOE & MALLINSON SOCIETY </B>
Italic
To divert the attention of the reader on any important information, Italic element is used. This
element marks up the text in Italic style. Typing the text between <l> and </l> tags will change the
text in italics.
Syntax: <l> TYNDALE BISCOE & MALLINSON SOCIETY </l>
Underline
This tag underlines the text enclosed in <U> and </U> tags.
Syntax: <U> TYNDALE BISCOE & MALLINSON SOCIETY </U>

\\F22\\ Page 12 of 21
FONT TAG
The <font> tag is used to change the appearance of t he text to be displayed on the
webpage, Using this tag, you can change the size, colour, and style of the text. It is a
container tag. The important attributes of <FONT> tag are listed below
ATTRIBUTES OF FONT TAG
Attribute Description Example

To specify the size of the text. The values of the

Size size attribute lies between 1 to 7; with 1 being the <font size=5>
smallest font size and 7 being the largest font size.

Color To specify the colour to be used to display the text <font color=blue>

Face To change the font type <font face=Arial>

FONT
To change the typeface or name of the font, <FONT FACE> element is used. Press the Space bar key
and then type the name of the font you want to use and close the quotes. E.g., <FONT FACE=
“Vladimir Script”> Type </FONT> after applying the font style.

FONT SIZE
It is used to change the size of the font. Syntax: <Font Size =”?”> You can specify a font size from 1
to 7 in place of'?’ (Question mark). The smallest font size is 1 and the largest font size is 7. Type
<FONT SIZE = “3”> before the text whose size you want to change 6pts. Type </FONT> after
changing the font size.

FONTCOLOR
The Font Color attribute changes the colour of the text. The colour can be set by specifying the name
of the c or by giving colour codes. Type <FONT COLOR= “?”> before the text and replace “?” with
the name or colour c
COLOR NAME RGB VALUE COLOR NAME RGB VALUE
Black #000000 Purple #800080
Aqua #00FFFF Red #FF0000
Blue #0000FF Silver #C0C0C0
Gray #808080 White #FFFFFF
Green #008000 Yellow #FFFF00
Lime #00FF00 Fuchsia #FF00FF
Maroon #800000 Navy #000080
Olive #808000 Teal #008080

HTML CODE RESULT AFTER OPENING HTML FILE

ATTRIBUTES OF BODY ELEMENT

Background Color
You can have the whole background of your Web page in your desired colour.
To set background colour, type BGCOLOR = "Colour name or code" in the Body tag. For example: <BODY
BGCOLOR = "RED">

\\F22\\ Page 13 of 21
 HTML CODE RESULT AFTER OPENING HTML FILE

TOPMARGIN AND LEFTMARGIN

TOPMARGIN
The topmargin attribute is used to set the topmargin of a web page. It is given within the <Body> tag
with any vs such as 60. This will display the text 60 pixels away from the top of the page.
<BODY TOPMARGIN=“VALUE”> </BODY> (The value is given in pixels.)
LEFTMARGIN
The left margin attribute is used to set the left margin of a web page. Just like top margin, it is also
written in <Body > tag with any value in pixels. The value accordingly keeps the text away from the
left corner of a page.
<BODY LEFTMARGIN= “VALUE”> </BODY> (The value is given in^ixels.)

HTML CODE RESULT AFTER OPENING HTML FILE

Some important points to remember:-

 Tim Berners –Lee is founder of WWW.
o WWW is also Abbreviated as W3 or W3C
 HTML5 was introduced on January 18.2011 .
 HTML is not a case sensitive language.
 Extensible Markup Language (XML) is a set of rules for encoding documents in machine-
readable form
 When you save HTML file you can either use.htm or .html extension

Book Work of Chapter Understanding HTML

A. Fill in the blanks:
1. < BR> tag breaks the line and displays the text from the next line
2. There are Six heading levels in HTML.
3. <P> tag is used to start a new paragraph
4. <P Align= Right> attribute of the paragraph tag is used to align the paragraph right side
5. <BODY BGCOLOR> tag is used to change the background colour of the webpage
6. HTML is the extension of HTML document.
7 The closing tag includes a Forward slash.
8 Tags are also known as Elements.

\\F22\\ Page 14 of 21
B. State True or False:
1. The <BR> has a corresponding closing tag.
Ans. False
2 The <TITLE> tag is given inside the <BODY> tag
Ans. False
3. Top margin attribute is given in the <BODY> tag to set the text of a web page away from
the top margin.
Ans. True
4. There are four heading levels available in HTML.
Ans. False
5. The syntax to change font colour is <FONTCOLOR= Colour Name or Code>
Ans. True.
6. Empty element has both On and Off tag.
Ans. False
7. HTML stands for Hyper Text Mark-up Language.
Ans. True.
8. An HTML file can be saved with any extension.
Ans. False
C. Multiple Choice Questions:
1. Bold element is used to emphasize the text.
a. Underline b. Bold c. Italic
2. BR tag breaks the line and displays the text from the next line.
a. BG b. BR c. BK
3. Tags are of Two types.
a. One b. Two c. Three
4. Font Style tags are also known as Physical markup
a. Physical makeup b. Hyperlink c. Physical markup
5. HTML is an improved version of SGML.
a. SGML b. SDML c. HTTP

Chapters: 3 and 4
Topic: Using List and Creating a Table
Introduction:
HTML lists allow web developers to group a set of related items in lists.HTML lists are used to
present list of information in well-formed and semantic way. In most of the cases, we use two types
of lists in HTML:
1. Unordered List <UL>
2. Ordered List <OL>
Unordered List <UL>:
They are used to create a list of related items, in no particular order. An unordered list is created using
the <ul> element, and each list item starts with the <li> element.
The list items in unordered lists are marked with bullets.
Here's an example:s

\\F22\\ Page 15 of 21
Output of this HTML code will be:

Type Attribute:
The TYPE attribute of UL suggests the bullet style on visual browsers. Possible values
are as follows:
• disc (a filled-in circle)
• square (a square outline)
• circle (a circle outline)

Ordered List<ol>:
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. An
ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman

numbers

type="i" The list items will be numbered with lowercase roman numbers

\\F22\\ Page 16 of 21
Output:

Marquee Text:
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.
Syntax
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>

Example:

The <marquee> Tag Attributes:

Following is the list of important attributes which can be used with <marquee> tag.
Sr.
Attribute & Description
No

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

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

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

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

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

scrollamount
6
This specifies the speed of marquee text. This can have a value like 10 etc.

\\F22\\ Page 17 of 21
 loop
7 This specifies how many times to loop. The default value is INFINITE, which means that the
marquee loops endlessly.

bgcolor
8
This specifies background color in terms of color name or color hex value.

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

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

Creating a table:
HTML tables allow web developers to arrange data into rows and columns. The <table> tag defines
an HTML table. Tables are created to:
• Present information or data in a comprehensive manner.
• Make comparative analysis of data.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table
data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centred.
By default, the text in <td> elements are regular and left-aligned.

Attributes of the Table tags:

1. Border: Border attribute specifies the width of the border of the table. If you want to draw
border in your table then you should use border attribute in table tag.
Syntax:<Table border=4>

\\F22\\ Page 18 of 21
2. Bordercolor: The bordercolor attribute is used to set the colour of the table. The default
colour of the border is grey, but we can change it by assigning a different colour name or the
colour code to the Bordercolor attribute.
Syntax:<Table border=4 Bordercolor =”Blue”>
<Table border=4 Bordercolor =”F1000”>
3. Cellpadding: Cellpadding attribute specifies the space between the cell wall and the cell
content.
Syntax: <Table border=4 Bordercolor=”F1000” cellpadding=”10”>
4. Cellspacing: Cellspacing attribute specifies the space between two cells. If you want to leave
some space in two cells then you should use Cellspacing attribute in table tag.
Syntax: <Table border=4 Bordercolor =” F1000” cellspacing=”10”>
5. Align: Align attribute specifies the alignment of values in a table. It can align a value in left,
right and centre.
Syntax:<Table border=4 Bordercolor=”Blue align=”Center”>
6. Width and height: Width attribute specifies the width of a table and height specifies the
height of the table. If you want to set width of a table then you should use width attribute in
table tag.
Syntax:<Table border=4 Bordercolor=”Blue” width=300 height=400>
7. Bgcolor: Bgcolor attribute specifies the background color of a table. If you want to use a
background color in your table then you should use bgcolor attribute in table tag.
Syntax:<Table border=4 Bordercolor=”Blue” bgcolor=”pink”>
Let us see the use of different attributes of Table tag:

\\F22\\ Page 19 of 21
Linking the Web Pages:
While surfing Internet, you might have seen that when we click on any highlighted word or image, it
takes us to another web page or document. These links to another web pages or documents are called
hyperlinks .A hyperlink, or simply a link, is a reference to data that the user can follow
by clicking or tapping. A hyperlink points to a whole document or to a specific element within a
document. Hypertext is text with hyperlinks. The text that is linked from is called anchor text.
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

Syntax: <a href =” file name”> Hyperlink Text</a>

Inserting Images:
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

\\F22\\ Page 20 of 21
Formative Assessment:
a. Fill in the blanks:
1. Tables are arranged in rows and columns.
2. Table is used to create a table.
3. Width attribute specifies the width of border of a table.
4. CellPadding is the pixel space inside the cells. i.e. the distance between the cell content and the
cell boundary.
5. Hyperlink is a highlighted text or image that stores the address of some other web page or
document.
6. Each row within a table begins with the <tr> tag.
b. State True or False:
1. The align attribute is used to specify the alignment of a table. True
2. The default value for both Cellpadding and Cellspacing is 4. False
3. The border colour of a table can be changed. True
4. Ordered list automatically starts with the number 1. True
5. Bullets are the most inefficient way of presenting the information. False
6. <AHrFe> tag is used to create a hyperlink. False
7. The IMGSRC is an empty tag. True
Summative Assessment:
a. Multiple choice questions:
1. Which tag is used to create ordered list?
a. <OL> b.<UL> c. <LI>
2. Which attribute is used to set the border color of a table?
a. BorderColor b. CellSpacing c. Border
3. Which attribute is used to change the style of the bullets in a list?
a. Disc b. Type c. Square.
4. Which tag is used to end an unordered list?
a. </OL> b. </LI> c. </UL>
5. Which attribute is used to set the background colour of a row?
a. <TR BGCOLOR> b. <TR BORDER> c. <TR BORDERCOLOR>
6. What is the default bullet type for <UL> tag?
a. Disc b. Square c. Circle
******************************************

\\F22\\ Page 21 of 21