10. Web Development

Web Development

Silvestro Di Pietro

6/10/2023

Web

TCP/IP layer 5 protocol

https://github.com/pinolallo/BFG_2023_Slides/blob/main/08-network/08-network_a.md#tcpip-layers

network is a railroad

Web

Common Services

http and https (the web pages)
email (the email system)
ftp (the File Transfer Protocol)
…

http

W3 ( WWW )

The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.

here the link of the first web site https://info.cern.ch/hypertext/WWW/TheProject.html

Web server

The web server in it’s simple form is just a file server that will transmits over the tpc/ip network a file requested by a browser using an url

URL

URL is for Uniform Resource Locator is a part of the URI Uniform Resource Identifier

URIs may be used to identify anything, including real-world objects, such as people and places, concepts, or information resources such as web pages and books.

URI structure

schematics of an uri

File types served by a web server

Using an uri you can request a file such as:

html
images
- jpeg gif png webP svg ..
xml
json

html

markup language

HTML is the standard markup language for Web pages tha will be rendered by a rendering engine

    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
        </body>
   </html>

rendering

Rendering is a process that turns website code into pages users can see/use. The process is made by a rendering engine inside a web browser

html file parts

html (the html file)
head (the infos about the html file)
body the displayed part of the html file

html Basics

the tag
- <tag>things inside a tag</tag> (the </> close the tag)
self closed tag
- <tag /> (nothing inside)

Please check this page for many examples *https://www.w3schools.com/html/html_examples.asp

XML

Extensible Markup Language (XML) is a markup language and file format for storing, transmitting, and reconstructing arbitrary data. https://en.wikipedia.org/wiki/XML Xml use the same markup structure of HTML using tags: You can define you element ad fill with info

XML DOM

A browser will transform the HTML into a tree structure inside an xml

Web apps

Structure

Web is not just static pages, can be dynamically coded

REQUESTS

the requests to a server from browser:

POST
GET
PUT
HEAD
DELETE
PATCH
OPTIONS
CONNECT
TRACE

The POST Method

POST is used to send data to a server to create/update a resource. Some notes on POST requests:

POST requests are never cached
POST requests do not remain in the browser history
POST requests cannot be bookmarked
POST requests have no restrictions on data length

The GET Method

GET is used to request data from a specified resource.

/test/demo_form.php?name1=value1&name2=value2

GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests should never be used with sensitive data
GET requests have length restrictions
GET requests are only used to request data (not modify)

The HEAD Method

HEAD is almost identical to GET, but without the response body. In other words, if GET /users returns a list of users, then HEAD /users will make the same request but will not return the list of users. HEAD requests are useful for checking what a GET request will return before actually making a GET request - like before downloading a large file or response body.

Back and front

FrontEnd

BASICS

Front end (User Interface) is managed by HTML CSS JAVASCRIPT

THE head of html wiLL include also the CSS files and the Javascript files

CSS

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

https://www.w3schools.com/css/

JAVASCRIPT

JavaScript is the world’s most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.

https://www.w3schools.com/js/default.asp

BackEnd

WEB

DATABASE interface
request query management
security
html response

API

DATABASE interface
request query management
security
json / xml response

← Back to course