2 CSS and Applications of Internet
2 CSS and Applications of Internet
We use HTML to design our web page but what about the decoration of webpage. To decorate webpage, CSS is used.
CSS is a style sheet language which is used to describe the look and formatting of a document written in markup language.
With the help of CSS, you can save lot of time because when you use external css, you will perform operations in one file.
By using CSS, you can add new looks to your HTML document.
Syntax:
Selector
{
Attribute : value;
}
Eg:
<style>
h1{
Color : red;
}
</style>
Advantages:
1. It saves time because by using css we can achieve code reusability.
3. Easy maintenance: To change the style of an element, you need to make changes in one place only.
Disadvantage:
Browser Compatibility
Selectors select HTML elements according to its id, class, type, attribute etc.
2.CSS Id Selector
Example:
An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
Example:
<html> <html>
<html>
<head> <head>
<head>
<style> <style>
<style>
#ab{ #a{
#a{
text-align: center; letter-spacing: 4px;
font-size: 4px;
color: blue; }
font-weight: 5px;
} #b{
font-style: italic;
</style> word-spacing: 5px;
}
</head> }
</style>
<body> </style> </head>
</head>
<p>Hello<p> <body>
<body>
<p id=“ab”>Good Morning</p> <p id=“a”>Hello<p>
<p id=“a”>Hello<p>
</body> <p id=“b”>Good Morning</p>
<p>Good Morning</p>
</html> </body>
</body>
</html>
</html>
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute.
It is used with a period character . i.e. full stop symbol followed by the class name.
Example:
<html> <html>
<head> <head>
<style> <style>
h1.ab{ *{
text-align: center; color: red;
color: blue; }
} </style>
</style> </head>
</head> <body>
<body> <h1>Hello<p>
<h1 class=“ab”>Hello<p> <h2 class=“a”> Students </h2>
<p class=“ab”>Good Morning</p> <p class=“ab”>Good Morning</p>
</body> </body>
</html> </html>
5) CSS Group Selector
It is used to select all elements with the same style definitions. It is used to minimize the code.
Example:
<html> <html>
<head> <head>
<style> <style>
h1,h2,.ab{ .a,#b,h3{
color: red; color: red;
} }
</style> </style>
</head> </head>
<body> <body>
</body> </body>
</html> </html>
6) CSS Attribute Selector
It is generally used for input controls. It is used to select elements with a specified attribute.
Example:
<html> <html>
<head> <head>
<style> <style>
a[target] { a[target="_self"] {
background-color: red; background-color: red;
} }
</style> </style>
</head> </head>
<body> <body>
</body> </body>
</html> </html>
<html> <html>
<head> <head>
<style> <style>
.a {
input[type="text"] {
color: green;
color: red; }
}
#b {
input[type="button"] { background-color: yellow;
background-color: yellow; }
} </style>
</head>
</style> </head> <body>
<body>
<form name="input" action="" method="get">
<form> Name:<input type="text" name="Name" class="a"> <br><br>
Name:<input type="text" name="Name" size="24"> <input type="button" value= "OK" id="b">
<br><br> </form>
</body> </html>
There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1) Inline CSS
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Example 1:
<body >
<h2 style="margin-left:50px;">This is Inline CSS</h2>
<p style="background-color: red; width:200px;">Good Morning Students</p>
</body>
Example 2:
<body >
<h2 style="margin-top:50px; margin-left:300px;">This is Inline CSS</h2>
<p style="color: red;">Good Morning Students</p>
</body>
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page.
It can affect all the elements of the page. It is written inside the style tag within head section of html.
Example 1 Div
To define a section or division, use <div> tag.
<html>
<head> Any sort of content can be put inside the <div> tag!
<style>
p{ By default, browsers always place a line break before and after the <div> element.
text-align: center;
color: blue; Example 2 <body>
} <div>
<html> <p>Hello<p>
body{ <head>
<p>Good Morning</p>
background: url("a.JPG"); <style>
} </div>
</style> div{ </body>
</head> border: 2px solid black; </html
width: 50%;
<body>
<p>Hello<p> }
<p>Good Morning</p> </style>
</body> </head>
</html>
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for
example style.css.
<html>
<head> my.css
<link rel="stylesheet" type="text/css" href="my.css">
</head> body {
<body> background-color: lightblue;
}
<p class="one">No border.</p>
<p class="two">A dotted border.</p> .one {border: none;}
<p class="three">A dashed border.</p> .two {border: 3px dotted red;}
<p class="four">A solid border.</p> .three{border: 3px dashed red;}
<p class="five">A double border.</p> .four{border: 3px solid red;}
<p class="six">A groove border.</p> .five{border: 3px double green;}
<p class="seven">A ridge border.</p> .six{border: 3px groove green;}
<p class="eight">An inset border.</p> .seven{border: 3px ridge black;}
<p class="nine">An outset border.</p> .eight{border: 3px inset blue;}
<p class="ten">A hidden border.</p> .nine{border: 3px outset blue;}
.ten{border: hidden;}
</body>
</html>
Display
Display is used to control the layout of the element. It specifies how the element will be displayed.
1) display: inline
The inline value takes the required width only. It doesn't force the line break so the flow of text doesn't break in inline
example.
2) display: block
Block value of display element takes as <html>
<html> <html>
much as horizontal space as they can. <head>
<head>
<head> <style>
<style> <style>
Means the block element takes the full p{
p{ p.one {
available width. display: block;
display: inline;
display: none;
margin-left: 20px; margin-left: 20px;
They make a line break before and after }
} }
them. </style> </style>
</style> </head>
</head> </head>
<body> <body> <body>
3) display: none
<p>Name</p> <p>Name</p>
The none value totally removes the <p class=“one”>Name</p>
<p>Roll Number</p> <p>Roll Number</p>
element from the page. It will not take
<p>DOB</p> <p>DOB</p> <p> Roll Number</p>
any space.
<p>Course</p> <p>Course</p>
<p>DOB</p>
</body> </body>
</html> </html> <p>Course</p>
</body>
</html>
Float
Float property is a positioning property.
Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down.
<html>
<head>
<style>
img {
float: right;
}
</style> </head>
<body>
<p>
<img src="a.jpg" alt="Good Morning Friends" height="100px" width="100px" />
This is Float Example.
Good Morning Students.
</p>
</body>
</html>
Margin Padding
<html> <html>
<head> <head>
<style> <style>
p{ p{
background-color: pink; background-color: pink;
} }
p.a { p.a {
margin-top: 50px; padding-top: 50px;
margin-bottom: 100px; padding-right: 100px;
margin-right: 150px; padding-bottom: 150px;
margin-left: 200px; padding-left: 200px;
} }
</style> </style>
</head> </head>
<body> <body>
<p> Welcome Students. </p> <p> Welcome Students. </p>
<p class=“a"> This is Graphic Era deemed To Be <p class=“a"> This is Graphic Era
university</p> deemed To Be university</p>
</body> </body>
</html> </html>
Pseudo-elements
Pseudo-elements are used to style the specific part of an element, such as to style the first letter or the first line of an element.
The pseudo-elements can also be used to insert the content after or before an element.
<html>
<html>
<head>
<head>
<style>
<style>
p::first-line {
p::first-letter {
color: red;
font-size: 24px;
}
color: red;
}
</style>
</style>
</head>
</head>
<body>
<body>
<p> Welcome Students Welcome Students Welcome Students
<p> Welcome Students </p>
Welcome Students Welcome Students Welcome Students Welcome
</body>
Students Welcome Students Welcome Students Welcome Students
</html>
Welcome Students Welcome Students Welcome Students Welcome
Students Welcome Students </p>
</body>
</html>
<html>
<head>
<style>
p::before {
content: " ************* ";
}
p::after {
content: "*************";
}
</style>
</head>
<body>
<p> Welcome Students </p>
</body>
</html>
Pseudo-classes
<html>
<head>
<style>
a:active{
font-size:24px;
}
a:visited{
color: green;
}
a:link{
color: red;
}
a:hover{
color: black;
}
</style> </head>
<body>
<a href="pseudo1.html" target="_blank">Click the link</a>
</body> </html>
Visibility
visibility property is used to specify whether an element is visible or not.
<!DOCTYPE html>
<html>
<head>
<style>
p span {
visibility: hidden
}
p:hover span {
visibility: visible
}
</style>
</head>
<body>
It requires that files be stored in a menu-style hierarchy on a Gopher server that is accessible through a Gopher-enabled client browser and/or
directly.
It initially supported only text-based file/document access but later came to support some image formats such as GIF and JPEG.
Gopher clients uses the TCP port 70 to connect the Gopher servers.
The server sends a list of files available, with each line having a standard code that identifies the type of file.
It uses 0 for files, 1 for directories, and 7 for search services. Other code part include the selector string, which is the part that needs to be
sent back to the server in order to get resources, the server port name, and port number.
The listing structure of the directories was very similar to the Unix system.
Gopher was succeeded by the HTTP protocol and now has very few implementations.
WWW
The World Wide Web is an information system where documents and other web pages are identified by Uniform Resource Locators.
So we can say that, World Wide Web is a collection of websites or web pages stored in web servers and connected to local computers through
the internet.
The World Wide Web was invented by a British scientist, Tim Berners-Lee in 1989.
Communication between client computers and web servers is done by sending HTTP Requests and receiving HTTP Responses.
Clients are often browsers (Chrome, Edge, Safari), but they can be any type of program or device.
In 1989, Berners-Lee began work on the first World Wide Web server at CERN.
He called the server "httpd” and dubbed the first client "WWW.”
The World Wide Web has been widely available since 1991.
HTTP
The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load web pages using hypertext links.
HTTP is an application layer protocol designed to transfer information between networked devices and runs on top of other layers of the
network protocol stack.
A typical flow over HTTP involves a client machine making a request to a server, which then sends a response message.
HTTP request
An HTTP request is the way internet communications platforms such as web browsers ask for the information they need to load a website.
Each HTTP request made across the Internet carries with it a series of encoded data that carries different types of information.
For example, when you enter a URL in your web browser, this actually send an http request to the web server directing it to fetch and transmit
the requested web page.
The other main standard that controls how World Wide Web works is HTML, which covers how web pages are formatted and displayed.
It is a text based protocol where one or more recipients of a message are specified and then message to the server.
SMTP is able to transfer only text based message and it isn't able to handle fonts, graphics, and attachments.
Without an SMTP server, your email wouldn’t make it to its destination. Once you hit “send,” your email transforms into a string of code that is
then sent to the SMTP server.
The SMTP server is able to process that code and pass on the message. If the SMTP server wasn’t there to process the message, it would be
lost.
Port 25 is the default port for email relaying (but non encrypted messages). Port 465 can be used, if you want to send messages securely.
POP3
It stands for post office protocol version 3. It is a standard mail protocol used to receive emails from a remote server to a local email client.
POP3 allows you to download email messages on your local computer and read them when you are offline.
The POP3 server required an account name, and password. Once you have logged in, the POP3 server opens your text files, and allows you to
access it.
Like SMTP, the POP3 understand a very simple set of text commands. POP3 works on 110 port by default. This is used when you want to send
non encrypted messages but if you want to send message securely, use port 995.
IMAP
The Internet Message Access Protocol (IMAP) is a mail protocol used for accessing email on a remote web server from a local client.
IMAP and POP3 are the two most commonly used Internet mail protocols for retrieving emails.
Both protocols are supported by all modern email clients and web servers.
While the POP3 protocol assumes that your email is being accessed only from one application, IMAP allows simultaneous access by multiple
clients.
This is why IMAP is more suitable for you if you’re going to access your email from different locations or if your messages are managed by
multiple users.
Port 993 – this is the port you need to use if you want to connect using IMAP securely.
Browser?
A browser is a software program that is used to explore, retrieve, and display the information available on the World Wide Web.
This information may be in the form of pictures, web pages, videos, and other files that all are connected via hyperlinks and categorized with
the help of URLs (Uniform Resource Identifiers).
A browser is a client program as it runs on a user computer or mobile device and contacts the webserver for the information requested by the
user.
The web server sends the data back to the browser that displays the results on internet supported devices.
On behalf of the users, the browser sends requests to web servers all over the internet by using HTTP (Hypertext Transfer Protocol).
It is also known as a web address or uniform resource identifier (URI). For example, https: www.google.com, which is the URL or web
address for the Google website.
A URL represents the address of a resource, including the protocol used to access it.
A URL includes the following information:
For example, when you search information on Google, the search results display the URL of the relevant resources in response to your search
query.
The title which appears in the search results is a hyperlink of the URL of the webpage.
It is a Uniform Resource Identifier, which refers to all kinds of names and addresses of the resources on the webservers.
URL's first part is known as a protocol identifier, and it specifies the protocol to use, and the second part, which is known as a resource name,
represents the IP address or the domain name of a resource. Both parts are differentiated by a colon and two forward slashes like https:
www.google.com
Email
Email (electronic mail) is the exchange of computer-stored messages by telecommunication.
Email messages are usually encoded in American Standard Code for Information Interchange (ASCII) text.
However, you can also send nontext files, such as graphic images and sound files as attachments sent in binary streams.
Email was one of the first activities performed over the internet and is still the most popular use.
Email can also be exchanged between online service provider users and in networks other than the internet, both public and private.
Email is one of the protocols included with the TCP/IP suite of protocols.
A popular protocol for sending email is Simple Mail Transfer Protocol (SMTP), and a popular protocol for receiving it is Post Office Protocol
3 (POP3).
Internet Service Provider
An Internet Service Provider (ISP) is the industry term for the company that is able to provide you with access to the Internet, typically from
a computer.
If you hear someone talking about the Internet and they mention their "provider," they're usually talking about their ISP.
Your ISP makes the Internet a possibility. In other words, you can have shiny computer with a built-in modem and could have a router for
networking, but without a subscription with an ISP, you won't have a connection to the Internet.
An ISP is your gateway to the Internet and everything else you can do online.
The second your connection is activated and set up, you'll be able to send emails, go shopping, do research and more.
The ISP is the link between your computer and all the other "servers" on the Internet.
You may feel like you're talking to your friend directly through email, but in reality it's more "indirectly." Your email goes from your
computer, to the ISP computers/servers, where it's sent along to its destination through other servers on the network.
Of course, that's its "electronic" path: the transmission is still virtually instantaneous.
Every home or organization with Internet access has an ISP.
The good news is, we don't all have to have the same provider to communicate with each other and we don't have to pay anything extra to
communicate with someone who has a different ISP.
DNS
The Domain Name System (DNS) is the phonebook of the Internet.
Humans access information online through domain names, like google.com.com or facebook.com.
Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet
resources.
Each device connected to the Internet has a unique IP address which other machines use to find the device.
DNS servers eliminate the need for humans to memorize IP addresses such as 192.168.1.1 (in IPv4), or more complex newer alphanumeric IP
addresses such as 2400:cb00:2048:1::c629:d7a2 (in IPv6).
An IP address is given to each device on the Internet, and that address is necessary to find the appropriate Internet device - like a street address is
used to find a particular home.
When a user wants to load a webpage, a translation must occur between what a user types into their web browser (example.com) and the machine-
friendly address necessary to locate the example.com webpage.
In order to understand the process behind the DNS resolution, it’s important to learn about the different hardware components a DNS query must
pass between.
For the web browser, the DNS lookup occurs “ behind the scenes” and requires no interaction from the user’s computer apart from the initial
request.
Load balancing
Load balancing is a technique used to distribute workloads uniformly across servers or other compute resources.
Load balancing is defined as the methodical and efficient distribution of network or application traffic across multiple servers in a server farm.
Each load balancer sits between client devices and backend servers, receiving and then distributing incoming requests to any available server
capable of fulfilling them.
So basically, Load balancing is a way to divide the amount of work that a computer has to do between two or more computers so that more work
gets done in the same amount of time.
Load balancing can be implemented with H/W, S/W, and a combination of both.
Server
A server is a computer or system that provides resources, data, services, or programs to other computers, known as clients, over a network.
In theory, whenever computers share resources with client machines they are considered servers.
An individual system can provide resources and use them from another system at the same time. This means that a device could be both a server
and a client at the same time.
To function as a server, a device must be configured to listen to requests from clients on a network connection.
This functionality can exist as part of the operating system as an installed application, role, or a combination of the two.
When a client requires data or functionality from a server, it sends a request over the network.
The server receives this request and responds with the appropriate information.
This is the request and response model of client-server networking, also known as the call and response model.
Types of servers
• File servers
• Web servers
• Application servers
• DNS servers
• Mail servers
• Database servers etc.
FTP
FTP stands for File Transfer Protocol.
FTP is a standard network protocol used for the transfer of files between a client and server on a computer network.
FTP is a very well-established protocol, developed in the 1970s to allow two computers to transfer data over the internet.
One computer acts as the server to store information and the other acts as the client to send or request files from the server.
The FTP protocol typically uses port 21 as its main means of communication. An FTP server will listen for client connections on port 21.
Web server
A web server is a computer that runs websites. It's a computer program that distributes web pages as they are requisitioned.
The basic objective of the web server is to store, process and deliver web pages to the users.
These web pages are mostly static content that includes HTML documents, images, style sheets, test etc.
Apart from HTTP, a web server also supports SMTP (Simple Mail transfer Protocol) and FTP (File Transfer Protocol) protocol for emailing
and for file transfer and storage.
If a web server is not exposed to the public and is used internally, then it is called Intranet Server.
When anyone requests for a website by adding the URL or web address on a web browsers (like Chrome or Firefox) address bar (like
www.google.com), the browser sends a request to the Internet for viewing the corresponding web page for that address.
A Domain Name Server (DNS) converts this URL to an IP Address (For example 192.168.216.345), which in turn points to a Web Server.
Application server
An application server is a mixed framework of software that allows both the creation of web applications and a server environment to run them.
An application server is designed to install, operate and host applications and associated services for end users, IT services and organizations
and facilitates the hosting and delivery of high-end consumer or business applications.
Depending on what is installed, an application server can be classified in a number of ways, such as a web server, database application server,
general purpose application server or enterprise application server.
Application servers are best put to use when there is the need to integrate with databases and servers, for example, web servers, which have
already been set up and are part of an organization’s existing IT infrastructure.
The reason to put an application server to use it that it provides your organization with an additional layer of security.
By sitting in between web pages and databases, an application server helps act as an additional barrier to SQL injection cyber-attacks, as there is
no direct link between a web page and a database.
Mail server
A mail server (sometimes also referred to an e-mail server) is a server that handles and delivers e-mail over a network, usually over the
Internet.
A mail server can receive e-mails from client computers and deliver them to other mail servers.
A mail server can also deliver e-mails to client computers.
A client computer is normally the computer where you read your e-mails, for example your computer at home or in your office.
Also an advanced mobile phone or Smartphone, with e-mail capabilities, can be regarded as a client computer in these circumstances.
Telnet
Telnet is a protocol that allows you to connect to remote computers (called hosts) over a TCP/IP network (such as the internet).
Using telnet client software on your computer, you can make a connection to a telnet server (that is, the remote host).
Once your telnet client establishes a connection to the remote host, your client becomes a virtual terminal, allowing you to communicate with the
remote host from your computer.
In most cases, you'll need to log into the remote host, which requires that you have an account on that system.
MIME
The MIME stands for Multi-Purpose Internet Mail Extensions.
MIME is a specification for the format of non-text e-mail attachments that allows the attachment to be sent over the Internet.
MIME allows your mail client or Web browser to send and receive things like spreadsheets and audio, video and graphics files via Internet
mail.
Web application
A web application is a computer program that utilizes web browsers and web technology to perform tasks over the Internet.
Web applications are usually coded in browser-supported language such as JavaScript and HTML as these languages rely on the browser to
render the program executable.
Some of the applications are dynamic, requiring server-side processing. Others are completely static with no processing required at the server.
The web application requires a web server to manage requests from the client, an application server to perform the tasks requested, and,
sometimes, a database to store the information.
Application server technology ranges from ASP.NET, ASP and ColdFusion, to PHP and JSP.
Web Security?
Web security is also known as “Cyber security”.
It basically means protecting a website or web application by detecting, preventing and responding to cyber threats.
There are a lot of factors that go into web security and web protection.
Any website or application that is secure is surely backed by different types of checkpoints and techniques for keeping it safe.