Scribd
Upload
69 views51 pages

3.3 Coding For The Web

HTML, CSS, HTTP, and other web technologies are used to develop webpages. HTML defines content and structure, CSS describes appearance, and HTTP is the protocol for transmitting hypermedia documents. Key elements include HTML tags, CSS properties and values, URLs, and HTTP request verbs like GET and POST.

Uploaded by

abdul shahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
69 views51 pages

3.3 Coding For The Web

HTML, CSS, HTTP, and other web technologies are used to develop webpages. HTML defines content and structure, CSS describes appearance, and HTTP is the protocol for transmitting hypermedia documents. Key elements include HTML tags, CSS properties and values, URLs, and HTTP request verbs like GET and POST.

Uploaded by

abdul shahid
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 51

Coding for the Web

HTML, CSS, components, methods


and protocols used to develop web
site. OWASP Top 10
Coding for the Web

• At the end of this lesson you will be able to:


• Identify and apply the key factors in the
development of webpages
– Web technologies:
• HTML
• CSS
• HTTP
• HTPPS
• FTP
• FTPS
• OWASP Top 10.
Coding for the Web

HTML
CSS
Coding for the Web
Basic Web Technologies

• Core development triad for world wide web technologies


• HTML
– HyperText Markup Language: Defines content and
structure of a web page
• CSS
– Cascading Style Sheets: Describe appearance of web
content
• HTTP
– HyperText Transfer Protocol: Protocol for transmitting
hypermedia documents e.g. HTML
Coding for theLanguage
HyperText Markup Web
(HTML)

• HTML A tag-based notation language used to


format documents that can then be interpreted
and rendered by an Internet browser.

• A text-based language that you can view and


edit in a standard text editor like Notepad.

• HTML, the language that Web servers and


browsers use to define the elements of a Web
page.
Coding for theLanguage
HyperText Markup Web
(HTML)
• HTML uses tags to mark elements in a document, such as
text and graphics, to indicate how Web browsers should
display these elements to the user and should respond to
user actions such as activation of a link by means of a key
press or mouse click.

• Specifies items such as the font to use for sections of


text, where to display embedded images, and of
course, hyperlinks that enable you to link to other Web
pages.

• When the browser receives an HTML document, it converts


the HTML description to a screen display.
Coding for the Web
Structure of an HTML page
• The <head> describes the
<!DOCTYPE html>
page and the body contains the
<html>
page's contents
<head> • Everything between the two
<title>
tags <html>…</html>. is called
information about
the page the <html> element.
• An HTML page is saved into a
</title>
</head> file ending with extension .html
• DOCTYPE tag tells browser to
<body>
page contents interpret our page's code as
</body> HTML5, the latest version of
</html> the language
Coding for the Web
Some HTML Tag Example
START TAG END TAG
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
<H1>, <H2>, ... </H1>, </H2>, ...
<IMG ...> </IMG> (optional)
<A ...> </A>
<P> </P> (optional)
<BR> (none; "empty" tag)
<OL> </OL>
<UL> </UL>
<LI> </LI> (optional)
Lab 1 / Create HTML Page

• Try it out!

• Copy the text in the next slide into notepad


• Save the file as an .html file
• Open in a browser
• Play around with the text and the tags to
create a basic web page
• You have 10 minutes
Lab 1 / Create HTML Page

<!DOCTYPE html>
<html>
<head>
<title>Review</title>
</head>
<body><h1>HTML IS AWESOME!?</h1>
<a href="http://en.wikipedia.org/wiki/Black_cat">
<img src="http://s3.favim.com/orig/46/adorable-bat-beautiful-
black-cat-Favim.com-417012.jpg">
</a>
<p>First Lesson is done.</p>
<p>Great Work!</p>
<p>Who wants a break?</p>
</body>
</html>
Coding for the Web
Cascading Style Sheets (CSS)
• Cascading style sheet (CSS): A language/code that
completely separates the text displayed on a Web page
(which is created in HTML code) and information that
describes how to display that text.

• Includes typographical information on how the page


should appear, such as the font of the text in the page.
• Directs the manner in which the style sheets for an
HTML document and the user’s style will blend.

• General CSS Format:


"HTML tag" { "CSS Property" : "Value" ; }
Coding for the Web
Some HTML Tag Example
There are three levels of style sheets
• Inline - specified for a specific occurrence of a tag
and apply only to that tag
• This is fine-grain style, which defeats the purpose of style sheets -
uniform style
• Document-level style sheets - apply to the whole
document in which they appear
• External style sheets - can be applied to any
number of documents

When more than one style sheet applies to a specific tag in


a document, the lowest level style sheet has precedence
Coding for the Web

• Inline style sheets appear in the tag itself.


HTML Code: index.html
<html>
<head>
<title>
information about the page
</title>

</head>

<body>
<p style="background: blue; color: white;">A new background and font color with inline
CSS</p>

<p style="background: url("http://www.justit.co.uk/cssT/yellow_rock.gif");">


This is broken</p>

<p style="background: url(http://www.justit.co.uk/cssT/yellow_rock.gif);">


This is working'</p>
</body>
</html>
Coding for the Web
<html>
<head>
• Document-level <title>
information about the page
style sheets </title>
<style type="text/css">
appear in the
body { background-color: blue; }
head of the p { color: white; }
document. </style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the
style tag we are able to modify
the appearance of HTML elements.</p>

</body>
HTML Code: index.html </html>
Coding for the Web

• External style sheets are in separate files, potentially on any server


on the Internet
– Written as text files with the MIME type text/css
<html>
<head>
<title>
CSS Code: test.css information about the page
</title>
body{ background-color: gray;} <link rel="stylesheet" type="text/css"
p { color: blue; } href="test.css" />
h3{ color: white; } </head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is grey
because we changed it with CSS! </p>
</body>
HTML Code: index.html </html>
Coding for the
Why use CSS?
Web
• Improves content accessibility by allowing the
same content to be displayed in different styles
depending on the rendering method: on screen,
by voice, or using Braille-based devices.

• Allows more flexibility and control over the way


the content is presented.

• Provides a more efficient way for multiple pages


to share the same formatting.
Lab 2 / Add CSS to HTML Page

• Try it out!

• Add the External CSS to the HTML file you


created earlier
• Save and open in a browser
• Play around with the tags to format your
web page

• You have 10 minutes


Coding for the Web
Part 3Why use CSS?

Protocols
Coding for the Web
HTTP Basics
Why use CSS?

• HTTP stands for Hypertext Transfer


Protocol. It's a stateless, application-layer
protocol for communicating between
distributed systems, and is the foundation
of the modern web.
Coding for the
Why use CSS?
Web
• HTTP allows for communication between a variety
of hosts and clients, and supports a mixture of
network configurations.

• To make this possible, it assumes very little about a


particular system, and does not keep state between
different message exchanges.

• This makes HTTP a stateless protocol. The


communication usually takes place over TCP/IP, but
any reliable transport can be used. The default port
for TCP/IP is 80, but other ports can also be used.
Coding for the Web
HTTP Basics
Why use CSS?

Custom headers can also be created and sent by the


client.
• Communication between a host and a client occurs, via
a request/response pair. The client initiates an HTTP
request message, which is serviced through a HTTP
response message in return. 
Coding for the Web
URLs
Why use CSS?

• At the heart of web communications is the


request message, which are sent via
Uniform Resource Locators (URLs). URLs
have a simple structure that consists of the
following components:
Coding for the Web
URLs
Why use CSS?

• HTTP requests can be several different


types of actions, or “doing words” –
otherwise known as verbs. What do you
think these mean?
• GET
• POST
• PUT
• DELETE
Coding for the Web
URLs:Why
request
use CSS?verbs

• GET: fetch an existing resource. The URL


contains all the necessary information the
server needs to locate and return the resource.
• POST: create a new resource. POST requests
usually carry a payload that specifies the data
for the new resource.
• PUT: update an existing resource. The
payload may contain the updated data for the
resource.
• DELETE: delete an existing resource.
Coding for the Web
URLs: Status
Why Codes
use CSS?

• With URLs and verbs, the client can


initiate requests to the server. In return,
the server responds with status codes and
message payloads.
• The status code is important and tells the
client how to interpret the server response.
The HTTP spec defines certain number
ranges for specific types of responses:
Coding for the Web
URLs: Status
Why Codes
use CSS?

• 1xx: Informational Messages


• All HTTP/1.1 clients are required to accept
the Transfer-Encoding header.
– This class of codes was introduced in HTTP/1.1
and is purely provisional. The server can send
a Expect: 100-continue message, telling the
client to continue sending the remainder of the
request, or ignore if it has already sent it.
HTTP/1.0 clients are supposed to ignore this
header.
Coding for the Web
URLs: Status
Why Codes
use CSS?

• 2xx: Successful
• This tells the client that the request was successfully processed.
The most common code is 200 OK. For a GET request, the
server sends the resource in the message body. There are other
less frequently used codes:
– 202 Accepted: the request was accepted but may not include the
resource in the response. This is useful for async processing on the
server side. The server may choose to send information for monitoring.
– 204 No Content: there is no message body in the response.
– 205 Reset Content: indicates to the client to reset its document view.
– 206 Partial Content: indicates that the response only contains partial
content. Additional headers indicate the exact range and content
expiration information.
Coding for the Web
URLs: Status
Why Codes
use CSS?

• 3xx: Redirection
• This requires the client to take additional action. The most
common use-case is to jump to a different URL in order to
fetch the resource.
– 301 Moved Permanently: the resource is now located at a new
URL.
– 303 See Other: the resource is temporarily located at a new URL.
The Location response header contains the temporary URL.
– 304 Not Modified: the server has determined that the resource has
not changed and the client should use its cached copy. This relies
on the fact that the client is sending ETag (Entity Tag) information
that is a hash of the content. The server compares this with its own
computed ETag to check for modifications.
Coding for the Web
URLs: Status
Why Codes
use CSS?

• 4xx: Client Error


• These codes are used when the server thinks that the client is at fault, either
by requesting an invalid resource or making a bad request. The most
popular code in this class is 404 Not Found, which I think everyone will
identify with. 404 indicates that the resource is invalid and does not exist on
the server. The other codes in this class include:
– 400 Bad Request: the request was malformed.
– 401 Unauthorized: request requires authentication. The client can
repeat the request with the Authorization header. If the client already
included the Authorization header, then the credentials were wrong.
– 403 Forbidden: server has denied access to the resource.
– 405 Method Not Allowed: invalid HTTP verb used in the request line, or
the server does not support that verb.
– 409 Conflict: the server could not complete the request because the
client is trying to modify a resource that is newer than the client's
timestamp. Conflicts arise mostly for PUT requests during collaborative
edits on a resource.
Coding for the Web
URLs: Status
Why Codes
use CSS?

• 5xx: Server Error


• This class of codes are used to indicate a server
failure while processing the request. The most
commonly used error code is 500 Internal Server
Error. The others in this class are:
– 501 Not Implemented: the server does not yet support
the requested functionality.
– 503 Service Unavailable: this could happen if an
internal system on the server has failed or the server is
overloaded. Typically, the server won't even respond
and the request will timeout.
Coding
Requestfor
and the Web
Response
Why use CSS?
Message Formats

• In summary, we've seen that URLs, verbs


and status codes make up the
fundamental pieces of an HTTP
request/response pair.
Coding for the Web
HTTPS
Why use CSS?

• Hyper Text Transfer Protocol Secure (HTTPS) is the


secure version of HTTP, the protocol over which data
is sent between your browser and the website that
you are connected to.
• The 'S' at the end of HTTPS stands for 'Secure'. It
means all communications between your browser
and the website are encrypted. HTTPS is often used
to protect highly confidential online transactions like
online banking and online shopping order forms.
Coding for the Web
How Does HTTPS Work?
Why use CSS?

• HTTPS pages typically use one of two secure


protocols to encrypt communications SSL (Secure
Sockets Layer) or TLS (Transport Layer Security).
• Both the TLS and SSL protocols use what is known
as an 'asymmetric' Public Key Infrastructure (PKI)
system.
• An asymmetric system uses two 'keys' to encrypt
communications, a 'public' key and a 'private' key.
Anything encrypted with the public key can only be
decrypted by the private key and vice-versa.
Coding for the Web
How Does HTTPS Work?
Why use CSS?

• As the names suggest, the 'private' key should


be kept strictly protected and should only be
accessible the owner of the private key.
• In the case of a website, the private key
remains securely ensconced on the web server.
• Conversely, the public key is intended to be
distributed to anybody and everybody that
needs to be able to decrypt information that
was encrypted with the private key.
Coding for the Web
How Does HTTPS Work?
Why use CSS?

All web
browsers
indicate if a
page has a
valid
HTTPS
security
certificate.
Coding for the Web
How Does HTTPS Work?
Why use CSS?

• The most important difference between the two protocols is the SSL certificate. In fact, HTTPS is
basically an HTTP protocol with additional security. However, this additional security can be extremely
important, especially for websites that take sensitive data from its users, such as credit card information
and passwords.
Coding
Benefits for the
of Hypertext
Why use CSS?
Web
Transfer
Protocol Secure

• The major benefits of a HTTPS certificate


are:
– Customer information, like credit card numbers,
is encrypted and cannot be intercepted
– Visitors can verify you are a registered
business and that you own the domain
– Customers are more likely to trust and
complete purchases from sites that use HTTPS
Coding
Tools toWhy
for
View
the
useHTTP
Web
CSS? Traffic

• There are a number of tools available to


monitor HTTP communication. some of
the more popular tools. Undoubtedly,
the Chrome/Webkit inspector is a
favorite amongst web developers:
Tools to View HTTP Traffic

• There are several


useful shortcuts
for opening the
DevTools:
• Use in
Windows
Coding for the Web
FTP Basics
Why use CSS?

• The FTP (File Transfer Protocol) protocol


has been around for quite some time.  It
was first proposed in RFC 114 over 40
years ago and eventually evolved
into RFC 959 which is the standard that
FTP clients and servers follow today. 
Coding
FTP: Whyfor
Data the Web
useExchange
CSS?

• The FTP protocol exchanges data using


two separate channels known as the
command channel and data channel.  
• The command channel typically runs on
server port 21 and is responsible for
accepting client connections and handling
the exchange of simple commands
between an FTP client and server.
Coding
FTP: Whyfor
Data the Web
useExchange
CSS?

• The data channel, runs using on-demand


temporary ports listening on the server
(passive mode) or on the client (active mode)
and is responsible for exchanging data in the
form of directory listings and file transfers. 
Examples of commands are:
• LIST – ask the server to list available files
• STOR – upload a file
• RETR – download a file
Coding
FTP: Whyfor
Data the Web
useExchange
CSS?

• Active mode connections means the client


listens on a port, and tells the server to
connect outbound to it. A file can then be
sent over this data connection.

• Passive mode is the opposite. The server


listens on a port for the data connection,
and tells the client to connect to it.
Coding
FTP: Whyfor
Data the Web
useExchange
CSS?
Coding
FTP: Whyfor
Data the Web
useExchange
CSS?
Coding for the Web
FTP: Security
Why use CSS?

• Using FTP both the command and data


channels are unencrypted.  Any data sent
over these channels can be intercepted
and read.
• One common exploit that takes advantage
of this particular vulnerability is the man-
in-the-middle attack using ARP
poisoning and a packet sniffer. 
Coding for the Web
FTP: Firewall
Why use CSS?

• Server -  Allow inbound connections on port 21.  Define


passive port range (e.g. 2000-2500) for file transfers and
directory listings and allow inbound connections on passive
port range.
• Client - Allow outbound connections to port 21 and passive
port range defined by server. 
• Many firewall issues encountered when using FTP are
caused by a poor understanding of FTP's two modes: the
active mode and the passive mode. The settings you will
have to make on your server-side firewall or your client-
side firewall will largely depend on which mode you
choose.
Coding for the Web
FTPS: Security
Why use CSS?

• Secure variants of FTP include FTPS


Implicit SSL and FTPS Explicit SSL. 
Both utilize SSL or TLS encryption.

• In Implicit mode, both client and server are


expected to encrypt all communication
immediately. This is not always possible –
as they may not have matching security
settings.
Coding for the Web
FTPS: Security
Why use CSS?

• Secure variants of FTP include FTPS


Implicit SSL and FTPS Explicit SSL. 
Both utilize SSL or TLS encryption.

• In Explicit mode, the client can send the


AUTH command to trigger security
negotiation with the server. They can then
decide on which security protocols to use
for further communication.
FTP: Common Commands

• Common
Commands
Review
Now you can:
• Identify and apply the key factors in the development of
webpages
– Web Hosting and serving
– Web servers and clients
– Web technologies and standards
– Protocols and services
– Types of web content
– Cookies and data storage
– DOM and events
– Vulnerabilities

You might also like