Course Web Technologies PDF

Web Technologies 1𝑠𝑡 Year Full Stack Engineering Cycle Academic Year: 2024-2025 Pr. CHRAA MESBAHI Soukaina  Course Objectives Main Objective: - Develop a solid foundation in web development through the mastery of HTML5, CSS3, and an underst...

Web Technologies 1𝑠𝑡 Year Full Stack Engineering Cycle Academic Year: 2024-2025 Pr. CHRAA MESBAHI Soukaina  Course Objectives Main Objective: - Develop a solid foundation in web development through the mastery of HTML5, CSS3, and an understanding of web protocols. Sub-Objectives: - Understand Web Fundamentals - Create Static Web Pages - Style and Make Responsive Pages - Introduction to JavaScript  Course Outline 1. Introduction to Web Technologies 2. HTML and CSS 3. JavaScript Basics 4. PHP for Server-Side Scripting 5. Performance for Server-Side Scripting Introduction to Web Technologies  WEB TECHNOLOGY What is Web Technology? Collection of tools, methods, and software that are used to create, develop, and maintain websites and web applications About building and delivering content and services over the Internet  COMPONENTS Web Servers CSS Powerful Visual computers that presentation store and serve of web web content to content users when requested. Name Here Name Here Web Browsers HTML JavaScript Dynamic Markup Primary interface programming language used through which language that to structure users access the adds interactivity and present internet. and functionality content on the Name Here Name Here to web pages web. What is Internet ?  The Internet It is the largest network in the world that connects hundreds of thousands of individual networks all over the word. With the Internet, it's possible to access almost any information, communicate with anyone else in the world. Works using protocols (a set of rules) like TCP/IP, which enables the exchange of information between connected devices. Uses of The Internet What is the « Web » ?  URLs are like the Each book represents a website The web is a vast library reference numbers of filled with books books Signs or maps in a library  WEB - The Web, or “World Wide Web”, is a global system of interconnected information organized into web pages that contain text, images, and multimedia content. - A website comprises multiple web pages linked by hyperlinks, facilitating navigation from one page to another. - Through hypertext, URLs (addresses of web pages) can be embedded within pages to reference other resources, creating an immense interconnected structure on a global scale, which explains the term "World Wide Web."  WEB - History ARPANET Web Web 2.0 : Web 3.0 : Web 4.0 : (TCP/IP) Invention Browser the rise and Converge Protocol f of the Web Creation 1.0 burst of the Semantic nce of or linking By Tim IoT, of the Appearan dot-com Web, multiple Berners augment first ce of the bubble. Artificial computer networks Lee first Social ed Intelligen together Creation of networks, reality, network browsers ce. a hypertext blogs, and AI. (Mosaic, content linking sharing Netscape). (Facebook, system YouTube). 2025 1960s 1970s 1989s 1990s 2000s 2010s and beyond  How the WEB works !! - Use of a client/server architecture - When a user types the (URL) of a website into their browser (client), it sends a request to the server hosting that site. - The server then sends the requested page to the browser, which displays it. - To communicate effectively, the client and web server use a common protocol: HTTP.  How to access the Web? Client - It is the user's Internet browser. - Identifies servers on the Internet. - Requests resources from servers. - Displays resources to users. Browser - It is software that analyzes the (X)HTML and CSS code of web pages and produces a visual result that is easy for humans to read. - Examples of Web browser: Firefox, Internet Explorer, Google Chrome, Opera etc Hyper Text Transfer Protocol The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and is used to load webpages using hypertext links. HYPERTEXT TRANSFER PROTOCOL HYPERTEXT TRANSFER PROTOCOL HTTP is a Connectionless protocol which can deliver any sort of data The basic structure of HTTP communication follows the request - response model. The purpose of the HTTP protocol is to enable file transfer, primarily in HTML format, located via a string of characters called a URL, between a browser (the client) and a web server. URL : Uniform Resource Locator Universal form of URI and a standardized naming convention for designating resources accessible over the Internet. In the case of the Web, resource = document or fragment http://lea-linux.org:80/reseau/secu/firewall.html#intro Protocol machine port Directory file fragment Main protocols used in URLs:  HTTP, HTTPS: Two web protocols, with and without encryption and authentication.  FTP: File Transfer Protocol, sometimes used on the Web for downloading large files.  MAILTO: A pseudo-protocol denoting an email address. Default Ports: 80 for HTTP, 443 for HTTPS.  HTTP – REQUEST HTTP requests are messages sent by the client (such as a browser) to a server to request a resource. Every HTTP request message has the same basic structure:  Request line  Header field(s)  Request body  HTTP – REQUEST Line A command line in an HTTP request is a line that specifies the type of document being requested, the method to be used, and the version of the protocol in use. Method + Request URI + Protocol Version  HTTP Method : Tell the server what action to perform  GET : Retrieve information from the server (web page, file, etc.)  POST : Send data to the server.  PUT : Update an existing resource.  DELETE : Remove a document from the server.  URL : Specifies the resource path, or the absolute path of the protocol port, for example: /index.html or /api/user.  Protocol Version: Indicates the version of the HTTP protocol used, for example: HTTP/1.1 or HTTP/2. Example : GET / index.html HTTP/1.1 HTTP – REQUEST Header fields Header fields provide additional information about the request, such as the types of content the client can accept or information about the client itself. Each header field consists of two parts: a name and a value separated by a colon (:). Examples of header fields:  User-Agent : Describes the client making the request, namely the browser and the IOS operating. Example : User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64;x64)  Host : Indicates the server´s domain name which the request is sent. Example : Host: www.example.com HTTP – REQUEST Header fields  Accept : Specifies the content types that the client is willing to receive. Example : Accept: text/html, application/json  Content-Type : (In the case of a POST or PUT request): Indicates the data type being sent in the request's body. Example : Content-Type: application/x-www-form-urlencoded HTTP – REQUEST Body The body of the request is optional and is typically present only in certain requests, particularly those using the POST or PUT method. It contains the data that the client wishes to send to the server, such as form information.  Body content: The content depends on the request. For example, when submitting a form via POST, the body of the request contains the form data.  Separation :The body of the request is separated from the headers by a blank line. Example : name=JohnDoe&[email protected] HTTP – REQUEST EXAMPLE METHOD URL Request VERSION Line HEADER : Value... POST /submit-form HTTP/1.1 HEADER : Value Host: www.example.com Request Blank User-Agent: line Mozilla/5.0 (Windows NT 10.0; Win64; x64) Header REQUEST Accept: text/html, BODY application/json Content-Type: application/x-www-form-urlencoded Content-Length: 35 A blank line Request name=JohnDoe&[email protected] body RESPONSE MESSAGE Each Request has a Response. Every HTTP Response message consists of the following:  Status line  Header field(s) (one or more)  Message body (optional) RESPONSE MESSAGE -STATUS LINE The start line of an HTTP response, called the status line, contains the following information:  The protocol version, usually HTTP/1.1  A status code, indicating success or failure of the request. Common status codes are 200, 404, or 302  A status text. A brief, purely informational, textual description of the status code to help a human understand the HTTP message A typical status line looks like: HTTP/1.1 404 Not Found. RESPONSE MESSAGE - HEADER FIELDS HTTP headers for responses follow the same structure as any other header: a case-insensitive string followed by a colon (':') and a value whose structure depends upon the type of the header. The whole header, including its value, presents as a single line. ▫ General headers, like Via, apply to the whole message. ▫ Response headers, like Vary and Accept-Ranges, give additional information about the server which doesn't fit in the status line. ▫ Representation metadata headers (formerly entity headers), like Content-Length that describe the encoding and format of the message body (only present if the message has a body). RESPONSE MESSAGE - HEADER FIELDS  HTTP Status Codes HTTP status codes are responses sent by the server to the client to indicate the result of processing a request. They help the client (such as a web browser) understand whether the request was successfully processed, if errors occurred, or if further actions are required. Code Message Description 10x Informational Indicate that the request is being processed. message 20x Success These codes indicate the successful completion of the transaction. 200 OK The request was successfully completed. 201 It follows a POST request and indicates success. The body CREATED of the response is expected to provide the URL where the newly created document should be located.  HTTP Status Codes Code Message Description The request has been accepted, but the subsequent 200 ACCEPTED process has not been completed. PARTIAL When this code is received in response to a GET request, 201 INFORMATION it indicates that the response is incomplete. The server has received the request, but there is no 204 NO RESPONSE information to send back. RESET The server instructs the browser to clear the contents of 301 CONTENT the form fields. This is a response to a request that includes the Range PARTIAL 302 header. The server must indicate the Content-Range CONTENT header.  HTTP Status Codes Code Message Description 30x These codes indicate that the resource is no longer at the Redirection specified location. 301 The requested data is at a new URL, but it may have been MOVED moved since then... 302 The server has received the request, but there is no FOUND information to return. 303 This implies that the client should try a new address, METHOD preferably using a method other than GET. 304 If the client has made a conditional GET request (asking if NOT the document has been modified since the last time) and MODIFIED the document has not been modified, it returns this code.  HTTP Status Codes Code Message Description 40x Erreur due au These codes indicate that the request is incorrect. client The syntax of the request is malformed or cannot be 400 BAD REQUEST fulfilled. The message parameter provides the specifications for UNAUTHORIZE acceptable authorization formats. The client must 401 D reformulate its request with the correct authorization data. PAYMENT The client must reformulate their request with the 402 REQUIRED correct payment information. 403 FORBIDDEN Access to the resource is simply forbidden. Classic! The server found nothing at the specified 404 NOT FOUND address.  HTTP Status Codes Code Message Description Erreur due au 50x These codes indicate that there was an internal server error. serveur The server encountered an unexpected condition that 500 INTERNAL ERROR prevented it from fulfilling the request. NOT 501 The server does not support the requested service. IMPLEMENTED The server received an invalid response from the server it was 502 BAD GATEWAY trying to access while acting as a gateway or proxy. The server cannot respond to you at the moment because the SERVICE 503 traffic is too heavy (all lines to your correspondent are busy; UNAVAILABLE please try again later). The server's response was too long regarding the time the GATEWAY 504 gateway was prepared to wait for it (the time allotted to you has TIMEOUT now expired...).  Static web and et Dynamic Web Static Web: Static websites consist of pages with fixed, predefined content that does not change based on user actions. Example : A company presentation site with information that does not change often. Limitations :  Any content modification requires a manual change to the HTML file. Technologie :  HTTP/1.1 200 OK Date: Tue, 22 Jun 2015 13:18:15 GMT Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2 mod_ssl/2.8.9 OpenSSL/0.9.6gGETDAV/1.0.3 Last-Modified: /page1.html HTTP/1.1Tue, 22 Jun 2014 13:15:43 GMT ETag: "63f3d-8e-40d830ff" Accept-Ranges: Host: bytes Content-Length: 142 Keep-Alive: www.e-monsite.com timeout=15, max=2000 Connection: Connection: Keep-Alive Content-Type: text/html Keep-Alive User-Agent: Mozilla/5.0 (compatible; Konqueror/3.1; Linux; fr) 2. Generation of the web Referer: http://www.e-monsite.com page page1 htmlno-cache Pragma: Cache-control: containing no-cacheand only one an image Accept: text/html, image/jpeg, image/png, text* Accept-Encoding: x-gzip, x-deflate, gzip, deflate, identity Accept-Charset: iso-8859-1, utf-8;q=0.5, *;q=0.5 Accept- Language: fr, en Client (Web browser) 1. Sending an HTTP request 3. Response to the HTTP request HTML, CSS, JS http://www.e-monsite.com/page1.html Dynamic Web : Dynamic websites consist of pages whose content can change based on user interactions or data from a database. Characteristics :  Dynamic Content: The server generates content on the fly based on the request parameters or user data.  Technologies : Utilizes server-side languages like PHP, Python, Ruby, or frameworks like Node.js. Data can be stored and retrieved from databases. Example : An e-commerce site where products and prices change based on inventory and user interactions.  Dynamic Web 2- Generation of the web page Web http://www.phpdebutant.org/annuaire7.php Server Database Client 1- Request for 3- Sending the the web page SQL request 6- Sending the 4- Returning data HTML, CSS, JS to the web server page 5- Fetching the data and writing it into the web page Hyper Text Mark-up Language Skeleton of all web pages. Provides structure to the content appearing on a website Created by Tim Berners-Lee in 1991 How is a website created? HTML & CSS Code Translation by the computer The visible result in the browser  Web Language Two languages for creating a website  HTML (HyperText Markup Language): Its role is to manage the content. So, you will write in HTML what should be displayed on the page: text, links, images.  CSS (Cascading Style Sheets): The role of CSS is to manage the appearance of the web page (styling, colors, text size, etc.). This language was introduced to complement HTML in 1996. Background Design of the of the web web page page  HTML (HyperText Markup Language) is the standard language used to create web pages. It allows structuring content with tags. Each content element is surrounded by an opening tag and a closing tag. HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. We do not describe the presentation (this will be the role of CSS). We do not describe dynamic behavior (this will be the role of JavaScript and server-side languages). The HTML language allows:  Defining the logical structure of a web document;  Composing a set of formatting commands;  Relying on the concept of an environment with a beginning and an end;  Using delimiters: these are tags or markers;  To implement HTML, all you need is a text editor to type the page code and a web browser to display the formatted page.  Tags are case-insensitive and can be written in lowercase, uppercase, or a mix of both. To learn the HTML language, we need Text Editor Modern Browser  Text editor To create your website, you need software. There are two main categories:  WYSIWYG (What You See Is What You Get): These behave like word processing software: no need to know HTML or CSS to create your website. The most well- known are Mozilla Composer, Microsoft Expression Web, Dreamweaver, KompoZer, etc. - Problems: They often generate poor-quality HTML and CSS code, and there is no control over the code.  Text Editors: Not specific to HTML and CSS but greatly facilitate development: Sublime Text, Notepad++, Kwrite, gedit, Visual Studio Code, etc. In practical work, we will use the text editor Visual Studio Code.  Browser A browser allows you to view websites.  There are many of them: Google Chrome, Mozilla Firefox, Internet Explorer, Edge, Opera, Safari, etc….. o Tags, also called elements, are commands intended for the browser, enclosed in angle brackets (< and >). Thus, a tag is written as. o There are two types of tags: 1. Tags that open and then close, and surround content. Example : A little italic 2. Tags that open and close at the same time. Example : An example of a title Text in bold, then italic , then bold and italic.