The purpose of this presentation is to give viewers a basic introduction to web and http concepts. The images in the ppt are sourced from google images and are not my own.
HTTP and other application layer protocols overview.HTML basics for creating web pages. Describing the main elements of HTML and its attributes. The main types of HTML lists and building tables using Html. The form input types and its methods, image maps , and most form elements are explained with examples.
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLsmitawagh14
Web Essentials and Markup Language HTML
HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
Website/Web Applications / Static vs Dynamic Website / Web Browser / Sachin Yadav
Websites/ web applications are applications that are accessed via web browser. Runs on a server called Web server. Can be accessed using a Uniform Resource Locator. A webpage is a document, typically written in plaint text interspersed with formatting instructions of Hypertext Markup Language. It can contain text, images, or links etc.
The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.
This is a tutorial about World wide web (www). In this tutorial we are going to discuss on:
History of WWW,
Components of WWW,
www Structure,
Uniform Resource Identifier,
HTTP Basics,
HTTP Request,
HTTP Response,
HTTP Headers,
HTML Basics,
HTML Example.
For more detail visit our Tech Blog:
https://msatechnosoft.in.blog/
The purpose of this presentation is to give viewers a basic introduction to web and http concepts. The images in the ppt are sourced from google images and are not my own.
HTTP and other application layer protocols overview.HTML basics for creating web pages. Describing the main elements of HTML and its attributes. The main types of HTML lists and building tables using Html. The form input types and its methods, image maps , and most form elements are explained with examples.
WEB TECHNOLOGY:Web Essentials and Markup Language HTMLsmitawagh14
Web Essentials and Markup Language HTML
HTML
XHTML
CSS
XML
JavaScript
VBSCRIPT
DOM
DHTML
AJAX
E4X
WMLScript
SQL
ASP
ADO
PHP
.NET
SMIL
SVG
FLASH
Java applets
Java servlets
Java Server Page
Website/Web Applications / Static vs Dynamic Website / Web Browser / Sachin Yadav
Websites/ web applications are applications that are accessed via web browser. Runs on a server called Web server. Can be accessed using a Uniform Resource Locator. A webpage is a document, typically written in plaint text interspersed with formatting instructions of Hypertext Markup Language. It can contain text, images, or links etc.
The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.
This is a tutorial about World wide web (www). In this tutorial we are going to discuss on:
History of WWW,
Components of WWW,
www Structure,
Uniform Resource Identifier,
HTTP Basics,
HTTP Request,
HTTP Response,
HTTP Headers,
HTML Basics,
HTML Example.
For more detail visit our Tech Blog:
https://msatechnosoft.in.blog/
Final project report on grocery store management system..pdfKamal Acharya
In today’s fast-changing business environment, it’s extremely important to be able to respond to client needs in the most effective and timely manner. If your customers wish to see your business online and have instant access to your products or services.
Online Grocery Store is an e-commerce website, which retails various grocery products. This project allows viewing various products available enables registered users to purchase desired products instantly using Paytm, UPI payment processor (Instant Pay) and also can place order by using Cash on Delivery (Pay Later) option. This project provides an easy access to Administrators and Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies must be studied and understood. These include multi-tiered architecture, server and client-side scripting techniques, implementation technologies, programming language (such as PHP, HTML, CSS, JavaScript) and MySQL relational databases. This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart website and also to know about the technologies used to develop such a website.
This document will discuss each of the underlying technologies to create and implement an e- commerce website.
Hierarchical Digital Twin of a Naval Power SystemKerry Sado
A hierarchical digital twin of a Naval DC power system has been developed and experimentally verified. Similar to other state-of-the-art digital twins, this technology creates a digital replica of the physical system executed in real-time or faster, which can modify hardware controls. However, its advantage stems from distributing computational efforts by utilizing a hierarchical structure composed of lower-level digital twin blocks and a higher-level system digital twin. Each digital twin block is associated with a physical subsystem of the hardware and communicates with a singular system digital twin, which creates a system-level response. By extracting information from each level of the hierarchy, power system controls of the hardware were reconfigured autonomously. This hierarchical digital twin development offers several advantages over other digital twins, particularly in the field of naval power systems. The hierarchical structure allows for greater computational efficiency and scalability while the ability to autonomously reconfigure hardware controls offers increased flexibility and responsiveness. The hierarchical decomposition and models utilized were well aligned with the physical twin, as indicated by the maximum deviations between the developed digital twin hierarchy and the hardware.
Student information management system project report ii.pdfKamal Acharya
Our project explains about the student management. This project mainly explains the various actions related to student details. This project shows some ease in adding, editing and deleting the student details. It also provides a less time consuming process for viewing, adding, editing and deleting the marks of the students.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Immunizing Image Classifiers Against Localized Adversary Attacksgerogepatton
This paper addresses the vulnerability of deep learning models, particularly convolutional neural networks
(CNN)s, to adversarial attacks and presents a proactive training technique designed to counter them. We
introduce a novel volumization algorithm, which transforms 2D images into 3D volumetric representations.
When combined with 3D convolution and deep curriculum learning optimization (CLO), itsignificantly improves
the immunity of models against localized universal attacks by up to 40%. We evaluate our proposed approach
using contemporary CNN architectures and the modified Canadian Institute for Advanced Research (CIFAR-10
and CIFAR-100) and ImageNet Large Scale Visual Recognition Challenge (ILSVRC12) datasets, showcasing
accuracy improvements over previous techniques. The results indicate that the combination of the volumetric
input and curriculum learning holds significant promise for mitigating adversarial attacks without necessitating
adversary training.
Saudi Arabia stands as a titan in the global energy landscape, renowned for its abundant oil and gas resources. It's the largest exporter of petroleum and holds some of the world's most significant reserves. Let's delve into the top 10 oil and gas projects shaping Saudi Arabia's energy future in 2024.
3. Web Essentials
• Internet
- Internet is global system in which millions of computers are
connected together.
• World Wide Web
- WWW is collection of software and corresponding protocols used
to access the resource over the network.
4. Internet Protocol
• File Transfer Protocol(FTP)
- The file transfer protocol transfer sets the rules for transferring
files between computers.
- When user wants to download a file from the server, FTP is used.
- FTP uses two connections between client and server. One
connection is used for actual data transfer and other is used for control
information.
6. • HTTP
- The Hyper Text Transfer Protocol(HTTP) is a request/response
protocol.
- It is a communication protocol used to transfer the information on
local area network and world Wide Web(WWW).
• SNMP
- Simple Netwok Management Protocol(SNMP) is a protocol which
enables network administrators to manage network devices and to
diagnose network problems.
• SMTP
- Simple Mail Transfer Protocol(SMTP) is a simple protocol which is
extensively used for transfer of e-mails to remote servers.
7. • POP3
- Post Office Protocol version 3(POP3) is used by local email clients
(such as Microsoft Outlook Express).
- The POP3 protocol works only at the receivers end and has no works
at the sender's end.
• TCP
- Transmission Control Protocol (TCP) is used for safe delivery of
data, Error detection.
- Connection oriented protocol.
• UDP
- User Datagram Protocol (UDP) is a connectionless protocol without
any error detection facility.
- This protocol is used for simply transmission of data.
8. HTTP Request-Response Message
• HTTP ( Hyper Text Transfer Protocol) take two part, web
browser and web server communication.
• HTTP is communication protocol that it follows request –
response model.
• Client request for web page by giving URL in address bar to
web server.
• Web server gives response to the web browser by returning
required web page.
9. HTTP Request Message Structure
< Start line >
< Header fields >
< Blank line >
<Message Body>
10. HTTP Request Message Structure
Start line:
Start line consists of three parts which is separated by a single space.
i) Request method
ii) Request URI
iii) HTTP version
i) Request method:
• The method defines the CONNECT method which is used
during web browser and server communication.
• It is always written in uppercase letters.
• The primary method in HTTP is GET. Various method used by
HTTP are GET, POST, HEAD, OPTION, PUT, and TRACE
11. HTTP Request Message Structure
ii) Request URI:
• The Uniform Resource Identifier (URI) is a string used to
identify the names or resources in the internet.
• The URI is the combination of URL and URN. URL stands
for Uniform Resource Locator and URN stands for Uniform
Resource Name.
• The web address denotes the URL and specific name of the
place or a person or item denotes the URN.
Example URL: mailto:myself@website.org
iii) HTTP version:
The first HTTP version was HTTP/0.9 but the official version of
HTTP was HTTP/1.1
12. HTTP Request Message Structure
Header fields and Message body
The header fields are in the form of field
name and field value.
HTTP Request message structure
GET /pub/WWW/HTTP/1.1 Start line
Host:www.sga.com
accept:text.html Header fields
connection:keep alive
Blank line
Hello world Message body
13. HTTP Response Message Structure
< Status line >
< Header fields >
< Blank line >
<Message Body>
14. HTTP Response Message Structure
Status line:
Status line consists of three parts which is separated by a single
space.
i) HTTP version
ii) Status code
iii) Reason phrase
HTTP version: It denotes HTTP version such as HTTP/1.1
Status code: Status code is a numeric code indicating the type
of response.
Reason phrase: It is in the text string form and presents the
information about the status code.
15. HTTP Response Message Structure
HTTP Response message structure
HTTP/1.1 200 OK Status line
Host:www.sga.com
accept:text.html Header fields
connection:keep alive
Blank line
Hello world Message body
16. Web Clients
• Many possible web clients:
• Text-only “browser” (lynx)
• Mobile phones
• Robots (software-only clients, e.g., search engine “crawlers”)
• etc.
• We will focus on traditional web browsers
17. Web Browsers
• First graphical browser running on general-purpose platforms:
Mosaic (1993)
19. Web Browsers
• Primary tasks:
• Convert web addresses (URL’s) to HTTP requests
• Communicate with web servers via HTTP
• Render (appropriately display) documents returned by a server
20. HTTP URL’s
• Browser uses authority to connect via TCP
• Request-URI included in start line (/ used for path
if none supplied)
• Fragment identifier not sent to server (used to
scroll browser client area)
http://www.example.org:56789/a/b/c.txt?t=win&s=chess#para5
host (FQDN) port
authority
path query fragment
Request-URI
21. Web Browsers
• Standard features
• Save web page to disk
• Find string in page
• Fill forms automatically (passwords, CC numbers, …)
• Set preferences (language, character set, cache and HTTP parameters)
• Modify display style (e.g., increase font sizes)
• Display raw HTML and HTTP header info (e.g., Last-Modified)
• Choose browser themes (skins)
• View history of web addresses visited
• Bookmark favorite pages for easy return
22. Web Browsers
• Additional functionality:
• Execution of scripts (e.g., drop-down menus)
• Event handling (e.g., mouse clicks)
• GUI for controls (e.g., buttons)
• Secure communication with servers
• Display of non-HTML documents (e.g., PDF) via plug-ins
23. Web Servers
• Basic functionality:
• Receive HTTP request via TCP
• Map Host header to specific virtual host (one of many host names sharing
an IP address)
• Map Request-URI to specific resource associated with the virtual host
• File: Return file in HTTP response
• Program: Run program and return output in HTTP response
• Map type of resource to appropriate MIME type and use to set Content-
Type header in HTTP response
• Log information about the request and response
24. Introduction to HTML
• HTML stands for Hyper-Text Markup Language
• HTML is basically a scripting language for the
creation of web page.
• XHTML stands for eXtensible Hyper-Text Markup
Language
• HTML program should be written between
<html> and </html>
25. XHTML Syntax and Semantics
An XHTML document consists of three parts:
1. DOCTYPE declaration.
2. <head> section
3. <body> section
<!DOCTYPE>
<html>
<head>
<title> ….. </title>
</head>
<body>
……..
</body>
</html>
26. XHTML Syntax and Semantics
Sample.html
<html>
<head>
<title>My WebPage</title>
</head>
<body>
This is my first Web page!!!
</body>
</html>
27. Displaying Header
There are some header tags to display the text as header
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>This is my first Web page!!!<h1>
</body>
</html>
28. Displaying Header
The header tags is denoted by h1,h2 ..and so on up-to h6
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<h1>This is a first header<h1>
<h2>This is a second header<h2>
<h3>This is a third header<h3>
<h4>This is a forth header<h4>
<h5>This is a fifth header<h5>
<h6>This is a sixth header<h6>
</body>
</html>
29. Formatting Text
The following tags are commonly used formatting text
Tag Meaning
<p> This tag is put at the beginning and end
of every paragraph
<br> This tag causes single line break
<pre> This tag is used to preserve white spaces
and lines in the text
<div> This tag is used to make division of
sections in the document
30. Formatting text
<html>
<head>
<title>My WebPage</title>
</head>
<body>
<p> <h1>Once upon a time, there was a king who kept a monkey as a pet.
The monkey served the king by all the possible ways.</h1>
</p>
<div>
It was very hot in those days.So one day, when the king was sleeping,monkey was
fanning the king.Suddenly monkey
noticed a fly on the chest of the king.The monkey tried to swish it away.
</div>
<div> So monkey decided to teach lesson to fly</div>
<pre> <h1>Once upon a time, there was a king who kept a monkey as a pet.
The monkey served the king by all the possible ways.</h1>
</pre>
</body>
</html>
31.
32. Text Alignment
The text can be aligned at left,right and center using <div> tag
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<h1>
<div align="center">This line is aligned at center</div>
<div align="left">This line is aligned at left</div>
<div align="right">This line is aligned at right</div>
</h1>
</body>
</html>
33. Setting Font Style
The text can be displayed in boldface, italics and a strike through
<html>
<body>
<h1>
<b>This is a bold text</b> <br/> <br/>
<i>This is in italics</i> <br/> <br/>
<strong>This is strongly emphasized text</strong> <br/><br/>
<strike>This is striked text</strike> <br/> <br/>
<center>This will appear at center</center> <br/> <br/>
</h1>
</body>
</html>
34. Setting Font
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
<title>My WebPage</title>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size="10">
Arun is new comer in this group
</body>
</html>
35. Setting Font Color
The tag <basefont> is used to set font, size, color of text in
webpage
<html>
<head>
<title>My WebPage</title>
</head>
<body>
Kings Engineering College<br/>
<font face="arial" size=“10” color=“red”>
Arun is new comer in this group
</body>
</html>
48. HTML5
CANVAS
• The html canvas is the rectangular area on an HTML page.
• The HTML <canvas> elements is introduced in HTML 5.
• It is actually a container for canvas graphics.
• Using <canvas> element one can draw boxes, circles, text and
graphics and images.
49. HTML5
CANVAS
• The <canvas> element in HTML5 is similar to the <img> element.
• This element has two attribute-width and height.these are optional .
• The id attribute is not specific to<canvas>element but it is actually used to
identify elements in global html.
51. HTML5
CANVAS
• The canvas is initially blank. To display something ,a script first
needs to access the rendering context and draw on it.
• The <canvas> element has a method called getcontext(),used to
obtain the rendering context and its drawing function. the
getContext() takes one parameter,the type of context.
• For 2D graphics need to specify the context as”2d”.
52. HTML5
CANVAS
• Then can set the font with the size in pixel and the name
of the font.
• The font size is 40piexel and the type of font is Arial.
• The filltext() is for displaying the text on the canvas along
with x,y position .The text to be displayed on the canvas
is written in double quotes.
53. HTML5 AUDIO VIDEO TAGS
• The audio and video can be played in the HTML document.The
HTML5 supports for <audio> and <video> tags
• The simplest method to play the audio in HTML documents is to
make use of <audio> tags.
• Normally <audio> supports three types of audio files
.mp3,.wav,.ogg.
56. Introduction to CSS
• Cascading Style Sheet is a markup language
used in the web document for presentation
purpose.
• Main intension is separate out the web content
and web presentation.
Features:
Any change in presentation does not affect information.
presentation is persistent
Consistent appearance and look
Precise control over size, color, background and margin
57. Syntax CSS
h1 Selector string
{
font-family:Arial; Declaration block
color:green
}
Property name value
58. Selector Strings
• Simple Selector
• Universal Selector
• Class Selector
• Generic Selector
• ID Selector
59. Selector Strings
• Simple Selector to a single element
property and value applied
• Universal Selector applied to all the
elements
• Class Selector assign different styles
to same element
• Generic Selector particular class
assigned to any tag
• ID Selector assign one style
to same element
60. Simple Selector
<html>
<head>
<title>Simple Selector Form</title>
<style type="text/css">
h1 h2
{ {
font-family:Arial; font-family:Monotype Corsiva;
color:green; color:red; font-size:28pt;
} }
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
61. Universal Selector
<html>
<head>
<title>Universal Selector Form</title>
<style type="text/css">
*
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
62. Class Selector
<html>
<head>
<title>Simple Selector Form</title>
<style type="text/css">
h1.bText h1.rText
{ {
font-family:Arial; font-family:Monotype Corsiva;
color:blue; color:red;
font-size:14pt }
}
</style>
</head>
<body>
<h1 class=bText>India is my country</h1> <br/> <br/>
<h1 class=rText>This is in times new roman</h1>
<h3>Welcome</h3>
</body>
</html>
63. Generic Selector
<html>
<head>
<title>Generic Selector Form</title>
<style type="text/css">
.greentext
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<h1 class=greentext>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
64. ID Selector
<html>
<head>
<title>ID Selector Form</title>
<style type="text/css">
#cse
{
font-family:Arial;
color:green;
}
</style>
</head>
<body>
<div id="cse">India is my country</div> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
66. External Style Sheets
<html>
<head>
<title>External Style Sheets</title>
<link rel="stylesheet" type="text/css" href="ex1.css">
</style>
</head>
<body>
<h1>India is my country</h1> <br/> <br/>
<h2>This is in times new roman</h2>
</body>
</html>
74. Text Properties
• Font – family
• Font – length
• Font – variants
• Font – style
• Font – weight
• Font – Shorthands
• Font – Decoration
• Font – Alignment
• Font - <span> and <div> tags
76. CSS3
• Various texts effects mainly used in CSS3
1.Text shadow Effect
2.Text Wrap Effect
3.Gradient Effect
77. Text shadow Effect
• The CSS3 allows to incorporate many advanced text effects in web design. Out
of which the text shadow effect is very commonly used.
• The text-shadow property can be given below:
• Text-shadow:horizontal_shadow vertical_shadow blur_distance color
_of_shadow
Example:
<html>
<head>
<style>
H2
{
Text-shadow:-5px 15px 3px gray;
}
</style>
</head>
<body>
<h2>catch me if you can</h2>
</body>
</html>
78. Text Wrap Effect
• The text in a paragraph gets wrapped on the next line
• This effect can be achieved by breaking the word.
Word-wrap:break-word
80. Gradient Effect
• CSS3 gradient effect allows the developer to display the transition
between two or more colors.
1.Linear Gradients
2.Radial Gradients.
81. Linear Gradients:
• The linear gradient property must have atleast two color stops.These
color stops are required for the smooth transition from one color to
another.
• SYNTAX:
background:linear-gradient(direction,colorstop1,colorstop2,…)
83. Radial Gradient:
• The gradient effect is circular in appearance .it much have atleast two
color stops for having the gradient effect.
• Syntax:
Background;radial-gradient(shape size at position,start-color,….,last-
color)