Web Essentials and

Mark-up language-
HTML
UNIT 1
Basic internet protocols

 Internet Protocols are a set of rules that governs the communication

and exchange of data over the internet. Both the sender and receiver
should follow the same protocols in order to communicate the data
 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.
it also makes sure that the packets have information about the source of
the message data, the destination of the message data
Basic internet protocols

 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.
And as soon as it delivers the mail to the receiving email id, it removes the
email from the outgoing list. The message or the electronic mail may consider
the text, video, image, etc. It helps in setting up some communication server
rules.
 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.
This works on a client-server model.
When a machine requests for file transfer from another machine, the FTO sets up a
connection between the two and authenticates each other using their ID and Password. And,
the desired file transfer takes place between the machines.
 5. HTTP(Hyper Text Transfer Protocol)
This protocol is used to transfer hypertexts over the internet and it is defined by the
www(world wide web) for information transfer.
This protocol defines how the information needs to be formatted and transmitted. And, it also
defines the various actions the web browsers should take in response to the calls made to
access a particular web page.
Whenever a user opens their web browser, the user will indirectly use HTTP as this is the
protocol that is being used to share text, images, and other multimedia files on the World
Wide Web.
The World Wide Web

 The World Wide Web (WWW or simply the Web) is an information system that
enables content sharing over the Internet through user-friendly ways meant to
appeal to users beyond IT specialists and hobbyists.[1] It allows documents and
other web resources to be accessed over the Internet according to specific rules
of the Hypertext Transfer Protocol.
 WWW can be defined as the collection of different websites around the world,
containing different information shared via local servers
 The Web was invented by English computer scientist Tim Berners-Lee while at
CERN in 1989 and opened to the public in 1991.
 It was conceived as a "universal linked information system".[3][4] Documents
and other media content are made available to the network through web
servers and can be accessed by programs such as web browsers
 The Web has become the world's dominant information systems platform. It is
the primary tool billions of people worldwide use to interact with the Internet.
HTTP requests

 An HTTP request is made by a client, to a named host, which is

located on a server. The aim of the request is to access a resource on
the server.
 To make the request, the client uses components of a URL (Uniform
Resource Locator), which includes the information needed to access
the resource
 GET /software/htp/cics/index.html HTTP/1.1
 The method is Get
 The path is software/htp/cics/index.html
 The http version is HTTP /1.1
Method and Description:

Method and Description:

i) GET
This method retrieves information from the given server using a given URI.
GET request can retrieve the data.
ii) HEAD
The HEAD method is the same as the GET method. It is used to transfer the status line and header section
only.
iii) POST
The POST request sends the data to the server. For example, file upload, customer information, etc. using the
HTML forms.
iv) PUT
The PUT method is used to replace all the current representations of the target resource with the uploaded
content.
v) DELETE
The DELETE method is used to remove all the current representations of the target resource, which is given
by URI.
vi) CONNECT
The CONNECT method is used to establish a tunnel to the server, which is identified by a given URI
HTTP responses

 An HTTP response is made by a server to a client. The aim of the

response is to provide the client with the resource it requested, or
inform the client that the action it requested has been carried out; or
else to inform the client that an error occurred in processing its
request.
 An HTTP response contains
 A status line.
 A series of HTTP headers, or header fields.
 A message body, which is usually needed.
HTTP responses

 Status line
 The status line is the first line in the response message. It consists of three items:
 The HTTP version number, showing the HTTP specification to which the server has
tried to make the message comply.
 A status code, which is a three-digit number indicating the result of the request.
 A reason phrase, also known as status text, which is human-readable text that
summarizes the meaning of the status code.
 An example of a response line is:
 HTTP/1.1 200 OK
 In this example:
 the HTTP version is HTTP/1.1
 the status code is 200
 the reason phrase is OK
HTTP responses

 HTTP headers
 The HTTP headers for a server's response contain information that a client
can use to find out more about the response, and about the server that
sent it. This information can assist the client with displaying the response
to a user, with storing (or caching) the response for future use, and with
making further requests to the server now or in the future.
 Message body
 The message body of a response may be referred to for convenience as a
response body.
 Message bodies are used for most responses. The exceptions are where a
server is responding to a client request that used the HEAD method (which
asks for the headers but not the body of the response), and where a server
is using certain status codes.
Web Client

 The web client is the front end or the user side of the web architecture. It
can be a web browser or a web application that communicates through
hypertext transfer protocol (HTTP) to format and transmit data such as
documents, images, videos and audio files from a web server to the end-
user.
 It requests for data or web content through HTTP and the web server
responds to the web client using the same protocol. Some of his key
features are accessibility to all users, load content faster, mobile
compatibility, efficient error handling, and effective navigation.
 The popular web browsers such as Google Chrome, Internet Explorer,
Opera, Firefox and Safari are examples that allow users to access any
website through the Internet.
 Zoom is another example that allows users to create and join meetings
and web conferences through the Internet.
Web Server

 a web server is a computer that stores web server software and a

website's component files (for example, HTML documents, images,
CSS stylesheets, and JavaScript files). A web server connects to the
Internet and supports physical data interchange with other devices
connected to the web.
 at the most basic level, whenever a browser needs a file that is
hosted on a web server, the browser requests the file via HTTP. When
the request reaches the correct (hardware) web server, the
(software) HTTP server accepts the request, finds the requested
document, and sends it back to the browser, also through HTTP. (If
the server doesn't find the requested document, it returns a 404
response instead.)
 EX- HTTP REQUEST AND HTTP RESPONSE
Basics of HTML

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
HTML ELEMENTS

Headings (<h1> to <h6>):

 Used to define headings and subheadings in a document.
 Example: <h1>This is a Heading 1</h1>

Paragraphs (<p>):
 Defines a paragraph of text.
 Example: <p>This is a paragraph.</p>
Line Break (<br>):
 Inserts a line break within text.
 Example: <p>This is a line of text.<br>This is a new line.</p>

Colors and Fonts (<span>, <div>, CSS):

 <span> and <div> are used as containers for applying styles.
 CSS (Cascading Style Sheets) is commonly used to define colors and
fonts.
 Example: <span style="color: blue; font-family: Arial;">Styled
Text</span>
Links (<a>):
 Creates hyperlinks to other documents or resources.
 Example: <a href="https://www.example.com">Visit Example</a>

Lists (<ul>, <ol>, <li>):

 <ul>: Unordered list.
 <ol>: Ordered list.
 <li>: List item.
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 </ul>
Tables (<table>, <tr>, <td>, <th>):
 <table>: Defines a table.
 <tr>: Defines a table row.
 <td>: Defines a table cell.
 <th>: Defines a table header cell.
 Example
<table>
 <tr>
 <th>Header 1</th>
 <th>Header 2</th>
 </tr>
 <tr>
 <td>Data 1</td>
 <td>Data 2</td>
 </tr>
 </table>
Images (<img>):
 Embeds images in a document.
 Example: <img src="image.jpg" alt="Description">
Difference between HTMl And HTML
5
 | Feature | HTML | HTML5 |
 |---------------------------|--------------------------------------------|-----------------------------------------------------|
 | Doctype Declaration | Uses a longer and complex doctype declaration | Simplified doctype declaration: `<!
DOCTYPE html>` |
 | Document Structure | Primarily uses div and span elements | Introduces semantic elements like <header>,
<nav>, etc.|
 | Multimedia Support | Limited multimedia support | Native support for <audio> and <video> elements
|
 | Graphics | No native graphics support | Introduces <canvas> element for drawing graphics |
 | Form Enhancements | Basic form controls | New input types, attributes, and form validation |
 | API Support | Limited native support for APIs | Introduces Web APIs (e.g., Geolocation, Drag and Drop)|
 | Local Storage | No native storage options | Introduces localStorage and sessionStorage |
 | Application Caching | No native support for offline apps | Introduces Application Cache API |
 | Cross-document Messaging | Limited support for iframes | Introduces window.postMessage for cross-
document communication|
 | Markup Language | Focused on document structure | Emphasizes semantic markup for better
readability |
 | Compatibility | Developed with backward compatibility | Designed for modern browsers, may not be fully
compatible with older ones|
Introduction to CSS

 CSS, or Cascading Style Sheets, is a styling language used to describe the presentation
and layout of a document written in HTML or XML. It allows web developers to control the
appearance of web pages by defining styles for various elements on the page. CSS
enables separation of content and presentation, making it easier to maintain and update
the styling of a website.
 body {
background-color: lightblue;
}

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

p{
font-family: verdana;
font-size: 20px;
}
`Features Of CSS

 CSS (Cascading Style Sheets) is a powerful styling language used to control the
presentation and layout of HTML and XML documents.
 Selectors: CSS selectors allow you to target specific HTML elements or groups of
elements to apply styles to. There are various types of selectors, including:
 Element selectors: Target specific HTML elements by their tag name.
 Class selectors: Target elements with a specific class attribute.
 ID selectors: Target a unique element by its ID attribute.
 Attribute selectors: Target elements based on their attributes.
 Pseudo-classes and pseudo-elements: Target elements based on their state or position
in the document structure.
 Box Model: CSS defines a box model for HTML elements, which includes
properties such as width, height, padding, border, and margin. Understanding
and manipulating the box model is essential for controlling the layout and
spacing of elements on a webpage.
 Box Model:
CSS defines a box model for HTML elements, which includes properties such as
width, height, padding, border, and margin. Understanding and manipulating the
box model is essential for controlling the layout and spacing of elements on a
webpage.
 Layout:
 CSS provides various techniques for creating different layout structures,
including:
 Floats: Floating elements to the left or right within their parent container.
 Flexbox: A one-dimensional layout model for arranging items within a
container, providing more control over alignment, distribution, and order.
 Grid: A two-dimensional layout model for creating complex grid-based layouts
with rows and columns.
 Responsive Design: CSS supports responsive web design, allowing
you to create websites that adapt to different screen sizes and
devices. Media queries are used to apply styles based on factors such
as screen width, height, and device orientation.
 Typography: CSS provides properties for styling text, including font-
family, font-size, font-weight, font-style, text-align, text-decoration,
and line-height. It also supports web fonts for custom typography.
 Transitions and Animations: CSS3 introduces properties for
creating smooth transitions and animations, allowing you to change
the style of an element gradually over time or create complex
animations with keyframes.
 Flexibility: CSS allows for flexible and modular stylesheets through
features like inheritance, cascading, and specificity. Styles can be
applied globally, scoped to specific elements, or overridden as
needed.