Web Programming Course Notes 2024 PDF

‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ ‫ﻣﻘﺮر ﺑﺮﻣﺠﺔ اﻟﻮﯾﺐ‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬ ‫اﻟﻤﺴﺘﻮى اﻟﺜﺎﻟﺚ – ﺑﺮﻧﺎﻣﺞ ﺗﻘﻨﯿﺔ‬ ‫اﻟﻤﻌﻠﻮﻣﺎت واﻟﻤﻜﺘﺒﺎت‬...

‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ ‫ﻣﻘﺮر ﺑﺮﻣﺠﺔ اﻟﻮﯾﺐ‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬ ‫اﻟﻤﺴﺘﻮى اﻟﺜﺎﻟﺚ – ﺑﺮﻧﺎﻣﺞ ﺗﻘﻨﯿﺔ‬ ‫اﻟﻤﻌﻠﻮﻣﺎت واﻟﻤﻜﺘﺒﺎت‬ ‫د‪ /‬ﺗﮭﺎﻧﻲ ﻋﻼم‬ ‫ﻣﺪرس ﻛﻠﯿﺔ اﻟﮭﻨﺪﺳﺔ – ھﻨﺪﺳﺔ اﻟﺤﺎﺳﺒﺎت‬ ‫واﻟﺘﺤﻜﻢ اﻵﻟﻲ‬ ‫‪2024‬‬ ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ 2023/2024 2023/2024 2023/2024 Chapter 1 INTRODUCTION TO COMPUTERS AND THE INTERNET ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Web Programming Technologies 2023/2024 2023/2024 2023/2024 Web programming refers to the writing, markup and coding involved in Web development, which includes Web content and Web client and server scripting. There are two parts of web programming technologies: - Client-side programming technologies are used to build web pages and applications that are run on the client (i.e., in the browser on the user’s device). Client-side scripting does have limitations and can be viewed by the client. Example: HTML5, CSS3, JavaScript - Server-side programming generate custom responses for clients, such as searching the Internet, checking your bank-account balance, ordering a book from Amazon, bidding on an eBay auction and ordering concert tickets. Example: PHP, ASP ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Web Programming Languages 2023/2024 2023/2024 2023/2024 There are many languages that will be used to build web pages. (e.g. HTML5, CSS3, JavaScript) HTML5 }HTML (HyperText Markup Language) is a special type of computer language called a markup language designed to specify the content and structure of web pages in a portable manner. }HTML documents can be rendered on range of devices connected to the Internet. }HTML5 is the latest version of HTML. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Web Programming Languages 2023/2024 2023/2024 2023/2024 Cascading Style Sheets (CSS) }Although HTML5 provides some capabilities for controlling a document’s presentation, it’s better not to mix presentation with content. }Cascading Style Sheets (CSS) are used to specify the presentation, or styling, of elements on a web page (e.g., fonts, spacing, sizes, colors, positioning). }By separating page styling from page content and structure, you can easily change the look and feel of the pages on an entire website, or a portion of a website, simply by swapping out one style sheet for another. }CSS3 is the latest version of CSS ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Web Programming Languages 2023/2024 2023/2024 2023/2024 JavaScript }JavaScript helps you build dynamic web pages (i.e., pages that can be modified “on the fly” in response to events, such as user input, time changes and more). }It enables you to do the client-side programming of web applications. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Web Browsers and Web-Browser Portability 2023/2024 2023/2024 2023/2024 - Browsers are available in many versions and on many different platforms. - Support for HTML5, CSS3 and JavaScript features varies by browser. - Although browsers share a common set of features, each browser might render pages differently. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Validating Codes 2023/2024 2023/2024 2023/2024 You must use proper HTML5, CSS3 and JavaScript syntax to ensure that browsers. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Evolution of the Internet and World Wide Web 2023/2024 2023/2024 2023/2024 - The Internet is a global network of computers. - Communicating over the Internet is done using many protocols (i.e., set of rules)like TCP, IP. - TCP protocol ensure that messages were properly routed from sender to receiver and that they arrived. - Each computer on the Internet has a unique IP address (IPv4, IPv6). - The combined set of protocols is now commonly called TCP/IP. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Evolution of the Internet and World Wide Web 2023/2024 2023/2024 2023/2024 - The World Wide Web (WWW), commonly known as the Web, is an information system where documents and other web resources are identified by Uniform Resource Locators (URL) and are accessible over the Internet. - Scientist Tim Berners-Lee invented the World Wide Web in 1989. - He began to develop a technology for sharing information via hyperlinked text documents. - Berners-Lee called his invention the- HyperText Markup Language (HTML). - He also wrote communication protocols of WWW. It called HTTP. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Making a Request and Receiving a Response 2023/2024 2023/2024 2023/2024 Client requesting a page from a web server ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Making a Request and Receiving a Response 2023/2024 2023/2024 2023/2024 Client receiving a response from a web server ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Making a Request and Receiving a Response 2023/2024 2023/2024 2023/2024 }The server first sends a line of text that indicates the HTTP version, followed by a numeric code and a phrase describing the status of the transaction. For example, – HTTP/1.1 200 OK – indicates success }whereas – HTTP/1.1 404 Not found – informs the client that the web server could not locate the requested resource. ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ N-Tier Architecture (multitier) 2023/2024 2023/2024 2023/2024 §It is a software architecture model where the application is divided into logical/physical tier. §Each layer has a specific responsibility. §Mostly, the application is divided into three tiers: 1. Presentation tier 2. Logic tier 3. Data tier. Benefits of N-Tier Architecture oSecurity oEase of management, development, reusing and adding new features o Scalability and flexibility ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ N-Tier Architecture (multitier) 2023/2024 2023/2024 2023/2024 ‫ﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ Client-Side Caching 2023/2024 2023/2024 2023/2024 }Browsers often cache (save on disk) recently viewed web pages for quick reloading. }If there are no changes between the version stored in the cache and the current version on the web, this speeds up your browsing experience. }An HTTP response can indicate the length of time for which the content remains “fresh.” }If this amount of time has not been reached, the browser can avoid another request to the server. If not, the browser loads the document from the cache.  ‫‪Chapter 2‬‬ ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ ‫‪Introduction to HTML5‬‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬ ‫‪2023/2024‬‬  HTML5 ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ HTML5 (HyperText Markup Language 5) markup language that specifies the structure and content of documents that are displayed in web browsers. HTML consists of a series of elements 2023/2024 2023/2024 2023/2024 HTML elements tell the browser how to display the content HTML elements are represented by tags Browsers do not display the HTML tags, but use them to render the content of the page  Editing HTML5 ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ We’ll create HTML5 documents in a text editor (such as Notepad, 2023/2024 Atom) and save it with 2023/2024 2023/2024 the.html extension. Computers called web servers store HTML5 documents. Atom  HTML5 Syntax ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ 2023/2024 2023/2024 2023/2024 Optional: An element can have attributes. These attributes are specified on the start tag.  First HTML5 Example ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ 2023/2024 2023/2024 2023/2024 Code Output on browser  First HTML5 Example ‫ﻣﺮﻳﻢ ﻣﺤﻤﺪ ﺍﺣﻤﺪ ﻋﺒﺪﺍﻟﺨﺎﻟﻖ ﺍﻟﺒﻬﻮﺍﺭ‬ DOCTYPE The document type declaration is required in HTML5 documents. 2023/2024 The is not an HTML tag; it is an instruction to 2023/2024 2023/2024 the web browser about what version of HTML the page is written in. Comments: Comments start with