WD Unit I& 2

B.Sc/BCA IT IV SEM www.sbs.ac.
in
CLASS: BCA/B.Sc I.T

BATCH: 2022-25
SUBJECT: Web Designing
Notes as per IKGPTU Syllabus
NAME OF FACULTY: Mr. Satyam
SBS ©PROPRIETARY Page 1

B.Sc/BCA IT IV SEM www.sbs.ac.in
Internet: Internet is the network of network, linking different type of computers all over the
world.
History of the Internet

The Internet was developed by Bob Kahn and Vint Cerf in the 1970s. They began the
design of what we today known as the ‘internet.’ It was the result of another research
experiment which was called ARPANET, which stands for Advanced Research Projects
Agency Network. This was initially supposed to be a communications system for the
Defense Team of the United States of America - a network that would also survive a nuclear
attack. It eventually became a successful nationwide experimental packet network
Uses of the Internet

 Online Food Order
 Online Classes
 Online Banking or Net Banking
 Cashless Transactions
 Social Networking
 Online Train or Flight Bookings
Features of Internet
 Data Transfer is easier while using the internet.

 Accessibility to almost every piece of information.
 Expansion of business in IT technology.
 Security and Safety of Information virtually.
Advantages of Internet
 Connectivity − As we know we are connected to the internet to stay connected with

our family, friends, colleagues, services, etc.
 Information − We can search and get many search results for our questions.
 Online Payment − Using payment modes such as Paytm, GPay, and Bhim UPI are
many payment methods to pay online.

 Digital Marketing − We are making our websites and making business online.
 Net Banking Services − Banking services such as payment, debit, credit, changing
our details, and scheduling payment are an integral part of secure payment.
 Productive Collaboration − As we experienced, after the Covid pandemic, we have
worked from home and made things work better than ever before by connecting
through video conferencing and saving mobility.
Disadvantages of Internet
 Wastage of time − considering today’s lifestyle, one prominent advantage of the
Internet is addiction. People are getting addicted to the internet, watching videos and
reels without realizing they are wasting so much of their time.
 Cybercrime − It is increasing rapidly as more information is shared and getting
leaked.
 Accessibility of pornographic content − It is accessible to even children since
there is complex information shared every day and it is hard to figure out the source
of these images and videos. This is a big concern regarding children and their minds,
parental security is necessary on mobile phones being used by children.
 Identity theft − It is one major concern on a bigger level such as higher
organizations, government, and private sectors.
 Increase in cyber-attacks in the banking sector and corporate sector −
Information is getting leaked, shared, and misused for harm, theft, privacy violation,
and harassment.
 Fake Information or Misleading − People nowadays can easily manipulate any
information and reclaim it to be true this could mislead people and their reliability
towards information shared.

Internet Protocol: Internet Protocols are a set of rules that governs the communication and
exchange of data over the internet.
Types of Internet Protocol

1. TCP/IP (Transmission Control Protocol/ Internet Protocol): These are a set of standard rules
that allows different types of computers to communicate with each other. The IP
protocol ensures that each computer that is connected to the Internet is having a
specific serial number called the IP address. TCP specifies how data is exchanged
over the internet and how it should be broken into IP packets.
2. SMTP (Simple Mail Transfer Protocol): These protocols are important for sending and distributing
outgoing emails. This protocol uses the header of the mail to get the email id of the
receiver and enters the mail into the queue of outgoing mail.
3. PPP (Point-to-Point Protocol): It is a communication protocol that is used to create a
direct connection between two communicating devices. This protocol defines the
rules using which two devices will authenticate with each other and exchange
information with each other.
4. FTP (File Transfer Protocol): This protocol is used for transferring files from one system
to the other.
5. HTTP (Hyper Text Transfer Protocol): This protocol is used to transfer hypertexts over the
internet.
Hypertext is text which contains links to other texts.
6. TELNET (Terminal Network): TELNET is a standard TCP/IP protocol used for virtual
terminal service given by ISO. This enables one local machine to connect with
another.
7. POP3 (Post Office Protocol 3): POP3 stands for Post Office Protocol version 3. This
protocol helps us to retrieve and manage emails from the mailbox on the receiver
mail server to the receiver’s computer.

WWW: The World Wide Web is commonly known as the web. The WWW was initiated by
CERN (European library for Nuclear Research) in 1989.
WWW can be defined as the collection of different websites around the world, containing
different information shared via local servers (or computers).
History:
It is a project created, by Timothy Berner Lee in 1989, for researchers to work together
effectively at CERN. is an organization, named the World Wide Web Consortium (W3C),
which was developed for further development of the web. This organization is directed by
Tim Berner’s Lee, aka the father of the web.
Components of the Web: There are 3 components of the web:
1. Uniform Resource Locator (URL): A URL (Uniform Resource Locator) is a unique

identifier used to locate a resource on the Internet. It is also referred to as a web
address.
2. HyperText Transfer Protocol (HTTP): Specifies communication of browser and
server.
3. Hyper Text Markup Language (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.

Client Server Model/ Internet Server
The Client-server model is a distributed application structure that partitions task or workload
between the providers of a resource or service, called servers, and service requesters
called clients.
In the client-server architecture, when the client computer sends a request for data to the
server through the internet, the server accepts the request and process and delivers the
data to the client.
Client
REQUEST RESPONSE
Server
Communicating on the internet
Communicating on the internet involves various methods and platforms, each serving
different purposes. Here are some common ways people communicate online:
1. Email: Electronic mail is a widely used method for sending messages, documents, and
files. It's formal and commonly used for professional communication.
2. Social Media: Platforms like Facebook, Twitter, Instagram, and LinkedIn allow users to
share updates, photos, and connect with others. Social media is also used for messaging
and commenting on posts.
3. Instant Messaging (IM): Services like WhatsApp, Telegram, and Facebook Messenger
provide real-time text, voice, and video communication, allowing people to chat with friends,
family, or colleagues.
4. Video Calls: Applications like Zoom, Skype, and Google Meet enable face-to-face
communication over the internet, facilitating virtual meetings, interviews, and social
interactions.

5. Forums and Discussion Boards: Websites like Reddit, Quora, and various niche forums
provide platforms for discussions on specific topics. Users can ask questions, share
information, and engage in conversations.
6. Blogs and Microblogging: Platforms like WordPress, Medium, and Twitter enable users to
share thoughts, ideas, and updates. Microblogging focuses on short, concise posts.
7. Collaborative Platforms: Tools like Google Drive, Microsoft Teams, and Slack support
collaborative work by allowing users to share documents, collaborate on projects, and
communicate in real-time.
8. Online Chat Rooms: Websites and applications offer chat rooms where people with similar
interests can engage in discussions. These can be text-based or include multimedia
elements.
9. Gaming Platforms: Online gaming communities often have built-in chat systems that allow
players to communicate during gameplay. This can involve both text and voice chat.
10. Email Lists and Newsletters: Subscribing to email lists and newsletters keeps individuals
updated on specific topics, promotions, or events.
Establishing connectivity on the internet client IP address

Establishing connectivity on the internet typically involves obtaining a public IP address for
the client device and configuring network settings to enable communication with other
devices and servers on the internet. Here's a general outline of the process:
1. Obtaining an IP Address:
 The client device needs to have a unique identifier on the internet, which is typically
done through obtaining an IP address.
 If the client is connected to a home or office network, it might obtain a private IP
address from the local router using DHCP (Dynamic Host Configuration Protocol).
 To communicate directly over the internet, the client may need a public IP address.
This can be obtained from the Internet Service Provider (ISP) or assigned
dynamically through technologies like DHCP or statically configured.
2. Configuring Network Settings:
 Once the client has an IP address, it needs to configure its network settings to
ensure proper connectivity.
 This includes setting up the IP address, subnet mask, default gateway, and DNS
(Domain Name System) servers.
 The default gateway is the IP address of the router or gateway device that connects
the client to the internet.

 DNS servers are used to resolve domain names (e.g., www.example.com) to IP

addresses.
3. Testing Connectivity:
 After configuring network settings, the client can test connectivity by attempting to
ping other devices or servers on the internet.
 If the client can successfully ping external addresses (e.g., 8.8.8.8, which is a public
DNS server provided by Google), it indicates that internet connectivity has been
established.
4. Firewall and Security Considerations:
 Depending on the network environment, there may be firewall rules or security
measures in place that need to be configured to allow outgoing and incoming traffic.
 Firewalls may need to be configured to permit traffic on specific ports or protocols.
5. Maintaining Connectivity:
 It's essential to monitor and maintain connectivity to ensure uninterrupted access to
internet services.
 This may involve periodic checks of network settings, troubleshooting connectivity
issues, and keeping hardware and software up to date.
Internet Domain: An Internet domain name is a unique name of an organization or person

on the Internet. such as .com or . org.
World Wide Web: WWW can be defined as the collection of different websites around the
world, containing different information shared via local servers (or computers).
Web Browser: Web browser is a program that is used to access internet. Some commonly
used web browsers are Google chrome, Mozilla Firefox etc.
Web Page: Any document on web is known as web page.
Web Site: Collection of web pages is called as a web site.

HTML: HTML stands for HyperText Markup Language. It is used to design web pages
using a markup language. HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between web pages. A markup language is used to define
the text document within the tag which defines the structure of web pages.
Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:
 HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
HTML Tags: HTML tags are the keywords that are used to produce web pages
in various formats. Opening tags and closing tags are found in the majority of
tags.
Paired (Container) Tags: Paired tags come in pairs: an opening tag and a
closing tag. The opening tag marks the beginning of an element, and the
closing tag marks the end of that element.
<p>This is a paragraph of text.</p>
Unpaired (Self-Closing) Tags: Unpaired tags are standalone tags that don't
have a separate closing tag.
<img src="image.jpg" alt="Image">
HTML <head> Tag: The <head> tag in HTML is used to define the head portion
of the document which contains information related to the document.
The <head> tag contains other head elements such as <title>, <meta>, <link>,
<style> <link> etc.
The <head> element is a container.
HTML <body> Tag: The <body> tag in HTML is used to define the main
content present inside an HTML page.

Attributes used with <BODY>
BGCOLOR: Used to set the back ground colour for the document
Example:
<BODY BGCOLOR="yellow">
Your document text goes here.
</BODY>
TEXT: used to set the color of the text of the document Example:
<BODY TEXT="red">Introduction to HTML:: 77
Document text changed to red color
</BODY>
Document text changed to red color
MARGINS: Set the left hand/right hand margin of the document LEFTMARGIN:
set the left hand margin of the document Example:
<BODY LEFTMARGIN="60">
This document is indented 60 pixels from the left hand side
of the page.
</BODY>
TOPMARGIN: set the left hand margin of the document Example:
<BODY TOPMARGIN="60">
This document is indented 60 pixels from the top of the page.
</BODY>


Style element: The HTML style attribute is used to add styles to an element,
such as color, font, size, and more.
Paragraphs (<p>): Defines a paragraph.

<p>This is a paragraph.</p>
Line Breaks (<br>): Creates a line break within text.

This is some text.<br>And this is on a new line.
Headings (<h1>, <h2>, ..., <h6>): Defines headings of different levels.

<h1>Main Heading</h1>
<h2>Subheading</h2>
Horizontal Line (<hr>): Creates a horizontal line to separate content.

<p>Some text above<hr>Some text below</p>
Bold (<strong> or <b>): Defines strong importance, typically displayed as

bold.
<strong>This is bold text.</strong>
Italics (<em> or <i>): Defines emphasized text, typically displayed as

italics.
<em>This is italicized text.</em>
Underline (<u>): Underlines the text.

<u>This text is underlined.</u>
Centering (<center>): Centers the content.
<center>This is centered text.</center>
Text Color (<font color="color">): Sets the color of the text.

<p><font color="blue">This text is blue.</font></p>
Background Color (<body style="background-color: color;">): Sets the

background color of the document.
<body style="background-color: lightgray;">



</body>
Anchor Tag: In HTML (Hypertext Markup Language), the anchor tag <a> is
used to create hyperlinks. Hyperlinks are connections from one web page to
another, or to a different resource such as an image, a file, or another type of
document. The anchor tag defines a hyperlink and is typically used in
combination with the href attribute to specify the target URL or resource.

HYPERLINK
<HTML>
<BODY>
<a href="https://www.facebook.com">Link Text</a>
</BODY>
</HTML>

UNIT-II

Using lists to organize information

In HTML, you can use lists to organize and structure information in a structured
and meaningful way. There are three main types of lists you can use:
Ordered List: The ordered lists are used for the items that have a specific
order or sequence. Each list item is numbered by default.
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Ordered List
<HTML>
<BODY>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</BODY>
</HTML>
Unordered Lists: Unordered lists are used for items that do not have a specific
order. Each list item is typically marked with a bullet point by default.
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>

</ul>
UNORDERED LIST
<HTML>
<BODY>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</BODY>
</HTML>
Definition Lists: Definition lists are used for terms and their corresponding
definitions.
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
DEFINATION LIST
<HTML>
<BODY>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language is the standard markup language for
documents designed to be displayed in a web browser.</dd>
<dt>CSS</dt>

<dd>Cascading Style Sheets is a style sheet language used for describing the
presentation of a document written in HTML.</dd>
<dt>JavaScript</dt>
<dd>JavaScript is a high-level, interpreted programming language used to
make web pages interactive.</dd>
</dl>
</BODY>
</HTML>
HTML Tables: HTML Table is an arrangement of data in rows and columns, or

possibly in a more complex structure. Tables are widely used in communication,
research, and data analysis. Tables are useful for various tasks such as
presenting text information and numerical data. It can be used to compare two
or more items in the tabular form layout. Tables are used to create databases.
An HTML table is defined with the “table” tag. Each table row is defined with the
“tr” tag. A table header is defined with the “th” tag. A table data/cell is defined
with the “td” tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Table</title>
</head>
<body>
<h2>Simple Table Example</h2>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>

<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</body>
</html>
COLSPAN
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with Colspan</title>
</head>
<body>
<h2>Table with Colspan Example</h2>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>

<td>Age: 25</td>
<td>Occupation: Engineer</td>
</tr>
<tr>
<td>Mary</td>
<td colspan="2">No Details Available</td>
</tr>
<tr>
<td>Peter</td>
<td>Age: 30</td>
<td>Occupation: Teacher</td>
</tr>
</tbody>
</table>
</body>
</html>
ROW SPAN
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with Rowspan</title>
</head>
<body>
<h2>Table with Rowspan Example</h2>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">John</td>
<td>25</td>
<td>Engineer</td>

</tr>
<tr>
<td>30</td>
<td>Doctor</td>
</tr>
<tr>
<td>Mary</td>
<td>40</td>
<td>Teacher</td>
</tr>
</tbody>
</table>
</body>
</html>
Row span and col span are attributes used in HTML tables to define the span of
a cell across multiple rows or columns, respectively. Here's the differentiation:
1. Row Span:
 Row span determines how many rows a cell should span vertically.
 It is defined using the "rowspan" attribute within the <td> or <th> tag.
 When a cell has a row span, it extends vertically, covering multiple rows.
 This attribute is used when a cell in a table should cover more than one
row.
 Example: <td rowspan="2">Cell content</td> indicates that the cell
should span across two rows.
2. Col Span:
 Col span determines how many columns a cell should span horizontally.
 It is defined using the "colspan" attribute within the <td> or <th> tag.
 When a cell has a col span, it extends horizontally, covering multiple
columns.
 This attribute is used when a cell in a table should cover more than one
column.
 Example: <td colspan="3">Cell content</td> indicates that the cell should
span across three columns.
The border attribute in HTML is used with the <table> element to specify
whether the table cells should have borders or not. It accepts a numerical value
indicating the width of the border in pixels.

<table border="1">
<tr>
<td>Row 1, Cell 1</td>
</tr>
<tr>
</tr>
</table>
Cellspacing in html
Cellspacing is an attribute used in HTML tables to specify the amount of space
between the cells. It defines the space, in pixels, between adjacent cells in a
table. This attribute can be added to the <table> tag to control the spacing
between cells in all rows and columns within the table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with Cell Spacing</title>
</head>
<body>
<table border="1" cellspacing="10">

<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Cellpadding in html

Cellpadding is another attribute used in HTML tables, but it controls the space
between the cell content and the cell border. It specifies the amount of space, in
pixels, between the cell content and the cell border. This attribute can be added
to the <table> tag to control the padding inside all cells within the table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with Cell Padding</title>
</head>
<body>
<table border="1" cellpadding="10">

<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Adding Graphics to Html Documents
The border attribute in the <img> tag in HTML specifies the width of the border
around an image.
<img src="image.jpg" alt="Description of the image" border="1">
The width and height attributes in HTML are used to specify the dimensions of
various elements such as images, tables, or other elements like <div> or
<iframe>. They define the width and height of the element in pixels.
<img src="example.jpg" alt="Description" width="300" height="200">

<table width="500" height="300">


</table>
The align attribute in HTML is used to specify the horizontal alignment of an

element, such as an image, table, or text block, within its containing element.
<img src="example.jpg" alt="Example Image" align="left">
<table align="center">

</table>
<p align="right">This text is aligned to the right.</p>
The alt attribute in HTML is used with the <img> element to provide alternative
text for an image, which is displayed if the image cannot be loaded or if the user
is using a screen reader.
<img src="example.jpg" alt="Description of the image">
Links (External Document References, Internal Document References) in

html
In HTML, you can create links to both external documents (other web pages)
and internal document references (other parts of the same web page) using the
<a> (anchor) element.
External Document References

To create a link to an external document, you specify the URL of the document
in the href attribute of the <a> element.
<a href="https://www.example.com">Link to Example Website</a>

Internal Document References
To create a link to another part of the same web page, you use the href attribute
to specify the ID of the target element within the page using the # symbol
followed by the ID.

<a href="#section2">Link to Section 2</a>
...
<h2 id="section2">Section 2</h2>
Linking to Specific Sections on External Pages

You can also link to specific sections on external web pages by appending the
ID of the target element to the URL in the href attribute.
<a href="https://www.example.com#section3">Link to Section 3 on Example

Website</a>
Image as Hyperlinks in html
In HTML, you can use an image as a hyperlink by wrapping the <img> tag
within an <a> tag.
<a href="destination.html">
<img src="image.jpg" alt="Description of the image">
</a>
 The <a> tag creates the hyperlink.

 The href attribute specifies the destination URL or resource.
 The <img> tag nested inside the <a> tag displays the image.
 The src attribute in the <img> tag specifies the path to the image file.
 The alt attribute provides alternative text for the image.
Introduction to Frames in html

Frames in HTML are a way to divide a web page into multiple sections, each
containing a separate HTML document. Each section, known as a frame, can
display its own content independently of the other frames on the page. Frames
are defined using the <frame> tag, and they are typically used within the
<frameset> tag.
The <frameset> tag is used to define the layout of the frames within the page. It
replaces the <body> tag in a traditional HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
</html>
The <frame> tag in HTML is used to define a single frame within a frameset.
Frames are used to divide a web page into multiple sections, each containing a
separate HTML document.
<frame src="URL" attribute1="value1" attribute2="value2" ...>
Attributes of the <frame> tag include
 src: Specifies the URL of the HTML document to be displayed within the frame.
 name: Provides a name or identifier for the frame, which can be used for
targeting purposes (e.g., in hyperlinks or form submissions).
 longdesc: Specifies a URL that provides a long description of the content of
the frame.
 marginwidth and marginheight: Specifies the width and height of the margins
around the frame content, respectively.

 scrolling: Specifies whether scrollbars should appear if the content within the
frame exceeds the frame's dimensions. Possible values are "yes", "no", or
"auto".
 frameborder: Specifies whether the frame should have a border. Possible
values are "0" (no border) or "1" (border).
 noresize: Specifies whether the user can resize the frame. Possible values are
"no" (user cannot resize) or "yes" (user can resize).
 sandbox: Specifies a sandboxing policy for the content within the frame,
restricting certain actions such as executing scripts or submitting forms.
<!DOCTYPE html>
<html>
<head>
<title>Frames Example</title>
</head>
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
</html>
DHTML
DHTML stands for Dynamic Hypertext Markup Language. It's a term that was
popular in the late 1990s and early 2000s, referring to a combination of
technologies used to create interactive and dynamic websites.
DHTML typically involves the use of HTML (Hypertext Markup Language), CSS
(Cascading Style Sheets), and JavaScript to create dynamic effects and
interactivity on web pages. With DHTML, developers can manipulate the
content and presentation of a web page dynamically, in response to user
actions or other events, without needing to reload the entire page.
1. Dynamic Content: DHTML allows for the manipulation of content on a web

page dynamically, without requiring a full page reload. This enables developers
to create more responsive and interactive user experiences.
2. CSS for Styling: Cascading Style Sheets (CSS) are used in conjunction with
HTML to control the presentation and layout of elements on the page. DHTML

enables dynamic changes to CSS properties, allowing for animations,

transitions, and other visual effects.
3. JavaScript Interactivity: JavaScript is a crucial component of DHTML,
providing the ability to add interactivity and behavior to web pages. With
JavaScript, developers can respond to user actions, manipulate the DOM
(Document Object Model), and create dynamic effects such as pop-up windows,
dropdown menus, and form validation.
4. Event Handling: DHTML allows developers to define event handlers that
respond to user actions such as mouse clicks, keyboard input, and form
submissions. This enables the creation of interactive features that respond to
user input in real-time.
5. Animation and Effects: Using DHTML techniques, developers can create
animations and visual effects on web pages without relying on external plugins
or libraries. This includes effects such as fading, sliding, and scaling elements,
as well as more complex animations achieved through CSS transitions and
JavaScript.
Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. CSS
separates the content of a web page from its presentation, allowing developers
to control the layout, colors, fonts, and other visual aspects of a web page.
Key features of CSS include:
1. Selectors: CSS allows developers to select HTML elements based on their

type, class, ID, attributes, and relationships with other elements in the
document. This enables targeted styling of specific elements or groups of
elements.
2. Properties and Values: CSS provides a wide range of properties and values
that control the appearance of selected elements. Properties include things like
color, font-size, margin, padding, border, background, and more. Values specify
the desired characteristics for each property, such as colors in various formats,
lengths, percentages, etc.
3. Cascading: The "C" in CSS stands for cascading, which refers to the way
styles are applied to elements based on a hierarchy of rules. Styles can be
defined in multiple places, including external style sheets, internal style blocks,
and inline styles. The cascade determines which styles take precedence when
multiple conflicting rules apply to the same element.

4. Inheritance: CSS allows styles to be inherited from parent elements to their

children, reducing the need to explicitly apply styles to every element
individually. This helps maintain consistency and simplifies the styling process.
5. Media Queries: CSS supports media queries, which allow developers to apply
different styles based on characteristics of the device or viewport, such as
screen size, resolution, orientation, and more. This enables responsive design,
where web pages adapt their layout and appearance to different devices and
screen sizes.
6. Vendor Prefixes: To accommodate experimental or browser-specific features,
CSS allows for the use of vendor prefixes like -webkit-, -moz-, -ms-, and -o- to
target specific browser engines. While these prefixes were more commonly
used in the past, modern CSS features often have wider browser support and
may not require prefixes.
7. Transitions and Animations: CSS includes properties and keyframes for
creating smooth transitions and animations directly in the browser, without the
need for JavaScript or external libraries. This enables developers to add visual
effects and interactivity to web pages with relatively simple code.
Style Tag
The <style> tag is an HTML element used to define internal CSS (Cascading
Style Sheets) within an HTML document. When you include CSS rules inside a
<style> tag, you can specify how HTML elements should be styled without
using an external CSS file.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* CSS rules defined within the <style> tag */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p{
font-size: 16px;

}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

WD Unit I& 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WD Unit I& 2

Uploaded by

Copyright:

Available Formats

B.Sc/BCA IT IV SEM www.sbs.ac.

CLASS: BCA/B.Sc I.T

SUBJECT: Web Designing

Notes as per IKGPTU Syllabus

NAME OF FACULTY: Mr. Satyam

SBS ©PROPRIETARY Page 1

History of the Internet

Uses of the Internet

 Data Transfer is easier while using the internet.

 Connectivity − As we know we are connected to the internet to stay connected with

SBS ©PROPRIETARY Page 2

SBS ©PROPRIETARY Page 3

Types of Internet Protocol

SBS ©PROPRIETARY Page 4

Components of the Web: There are 3 components of the web:

1. Uniform Resource Locator (URL): A URL (Uniform Resource Locator) is a unique

SBS ©PROPRIETARY Page 5

Client Server Model/ Internet Server

Communicating on the internet

SBS ©PROPRIETARY Page 6

Establishing connectivity on the internet client IP address

SBS ©PROPRIETARY Page 7

 DNS servers are used to resolve domain names (e.g., www.example.com) to IP

Internet Domain: An Internet domain name is a unique name of an organization or person

Web Page: Any document on web is known as web page.

Web Site: Collection of web pages is called as a web site.

SBS ©PROPRIETARY Page 8

SBS ©PROPRIETARY Page 9

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

<img src="image.jpg" alt="Image">

SBS ©PROPRIETARY Page 10

Attributes used with <BODY>

Your document text goes here.

<BODY TEXT="red">Introduction to HTML:: 77

Document text changed to red color

Document text changed to red color

This document is indented 60 pixels from the left hand side

TOPMARGIN: set the left hand margin of the document Example:

This document is indented 60 pixels from the top of the page.

SBS ©PROPRIETARY Page 11

SBS ©PROPRIETARY Page 12

Paragraphs (<p>): Defines a paragraph.

Line Breaks (<br>): Creates a line break within text.

Headings (<h1>, <h2>, ..., <h6>): Defines headings of different levels.

Horizontal Line (<hr>): Creates a horizontal line to separate content.

Bold (<strong> or <b>): Defines strong importance, typically displayed as

Italics (<em> or <i>): Defines emphasized text, typically displayed as

Underline (<u>): Underlines the text.

Text Color (<font color="color">): Sets the color of the text.

Background Color (<body style="background-color: color;">): Sets the

SBS ©PROPRIETARY Page 13

SBS ©PROPRIETARY Page 14

<a href="https://www.facebook.com">Link Text</a>

SBS ©PROPRIETARY Page 15

SBS ©PROPRIETARY Page 16

Using lists to organize information

SBS ©PROPRIETARY Page 17

SBS ©PROPRIETARY Page 18

HTML Tables: HTML Table is an arrangement of data in rows and columns, or

SBS ©PROPRIETARY Page 19

SBS ©PROPRIETARY Page 20

SBS ©PROPRIETARY Page 21