1 / 91

Exploring Web Technologies: Understanding the Fundamentals

Learn how the web works, essential technologies, client-side vs. server-side coding, HTTP protocols, HTML basics, and more to navigate the digital landscape effectively.

tschroeder
Download Presentation

Exploring Web Technologies: Understanding the Fundamentals

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB Basics

  2. Contents • How the web works • Fundamental Web Technologies • Client Side Coding • Server Side Coding Web Technologies

  3. Client-Server Architecture Request Server Client Response Web Technologies

  4. Accessing a Web Page DNS Server google.com 192.168.1.4 tuc.gr 147.27.15.134 . . domainName server IP 2 google.com 192.168.1.4 3 1 192.168.1.4 Server Response 4 Browser Server Client Web Technologies

  5. URL Analysis Protocol Domain Name http://www.tuc.gr/students.html File (web page) World Wide Web Web Technologies

  6. DNS server • Domain Name System (DNS) manages public names of Web sites and transforms them to IPs (data base of Web site names and IPs) • A DNS server is registered to join the Domain Name System • DNS servers are organized in hierarchy • 13 Root servers (named A, B, C … M) • Lower level DNS Servers maintain only pieces of this information, public providers and others • Local DNS servers are maintained by the ISPs, primary and back-up DNS servers, gateways, manually or by DHCPs. • Queries are propagated upwards in hierarchy https://www.techradar.com/news/best-dns-server

  7. Web Technologies

  8. Protocols Define rules to govern the request-response process Define the structure of the request-response messages so they can be machine understandable. Common protocols: 'http://‘ , 'https://' , 'ftp://'  Web Technologies

  9. HTTP Protocol HyperText Transfer Protocol Text based 2 Types of messages: Requests & Responses Status Line Headers Blank Line Body Web Technologies

  10. Request Method Request URI HTTP-version Headers Body Web Technologies

  11. Response HTTP-version Response Code Headers Body Web Technologies

  12. Request - Response • GET /people/students.htmlHTTP/1.1 • Host: www.tuc.gr • User-agent: Mozilla/4.0 • Connection: close • Accept-language:gr Http Request Example: • HTTP/1.1 200 OK Content-Type: text/html • Content-Length: 6827 Connection: close • Server: Apache Tomcat/4.0.2 • Last-Modified: Tue, 12 Feb 2002 18:24:48 • ... • <body> Http Response Example: Response Codes: 401 (Not found) 200 (Ok) etc Web Technologies

  13. PUT - POST • Typically PUT to create resources, POST to update resources but this isn’t exactly the way they are meant to work • PUT to create and update resources when their exact location is known – idempotent method • POST when their exact location is not known and is decided by the server – not idempotent or safe • Idempotent method: can be called many times and the outcome is always the same, safe method Web Technologies

  14. PUT - POST Will be created at this location Created at this location, Decided by server Web Technologies

  15. HTTP Protocol – Response Codes • 100–199 Informational (101 switch protocol) • 200–299 Successfulpageaccess • 300–399 Redirecttherequest • 400–499 Clienterrors • 500–599 Servererrors Web Technologies

  16. HTML HyperTextMarkup Language The language to create web pages Not a programming language. Used to visualize Content. Has pre-defined presentation semantics that denote how the structured data is to be presented. Web Technologies

  17. HTML Document Structure <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Beginning of HTML Document Head Content Only the Body is displayed!!! Body Content End of HTML Document https://www.w3schools.com

  18. HEAD Elements Title: Adds a title to the web page. (Displayed in the browser tab, On bookmarks, on search engines, etc) <title> Web Page Title </title> <style> body {background:#000;} a{ color:red; font-weight:bold; }</style> Style: Adds css rules to a page <linkrel="stylesheet" type="text/css" href="style.css"> Link: Defines the relationship between a document and an external resource (css file – formatting instructions). Web Technologies

  19. HTML Based on HTML element tags ( <h1> ,</h1>, <img> etc.) Browsers read HTML files to compose visible or audible web pages. HTML tags are not displayed. They are used to interpret the content of pages. HTML BROWSER <H1> This is a title </H1> First line. Second line. <br/> <b> Third Line </b> This is a title First line. Second line. Third Line Web Technologies

  20. Divs In HTML we have BLOCK and INLINE elements BLOCK elements:  Start and end with a new line. Examples: <h1> - <h6>, <p>, <ul>/<li>, <uo>/<li>, <table> INLINE elements:  Start and end with a new line Examples: <b>, <em>, <td>, <a>, <img> Divs are BLOCK elements! Web Technologies

  21. HTML <a> • A link to W3CSchools • <ahref="http://www.w3schools.com">Visit W3Schools.com!</a> • Will produce • Visit W3Schools.com! • If clicked will open : http://www.w3schools.com Web Technologies

  22. HTML HTML Attributes: Name-Value Pairs E.g., width = “100” , Border = “2” etc. The image is a link – you can click on it . <a href=‘http://example.org’ > <img src=“dog.png" width="50" height="50" border=“0“ > </a> In BROWSER you see: Web Technologies

  23. CSS Cascading Style Sheets A set of rules used to describe the look and formatting of an HTML document    Designed to enable the separation of content from presentation <div> groups elements to format them with CSS Internal (inline) or External (Separate file) CSS   Inline CSS Browser Styles in HTML. <h1 style="color:red"> Styles in HTML. </h1> Web Technologies

  24. CSS Example 1 Web Technologies

  25. CSS Example 2 Web Technologies

  26. HTML DOM • When a page is loaded the browser creates a Document Object Model of the page Web Technologies

  27. Javascript Client Side Scripts Interact with user (e.g., dialogue box, confirm box, button) Control browser behavior (e.g., Don’t allow right click) Alter the document content dynamically (e.g., use events)  Communicate asynchronously (Ajax) with the server Can be placed in the <body> and the <head> sections Web Technologies

  28. Javascript Example Any number of <script>s within <body> or <head> Define Functions Inside “scripts” Web Technologies

  29. getElementById( ) • The main Javascript method • document.getElementById("demo").innerHTML = "Hello” will search for element with id=“demo” and change its content to “Hello” • document.getElementById("demo").style.fontSize = "25px”will change font size of element with id=“demo” • document.getElementById("demo").style.display="block” will hide element with id=“demo” Web Technologies

  30. Output • JavaScript can "display" data in different ways: • Writing into an alert box, using window.alert( ) • Writing into the HTML output using document.write( ) • Writing into an HTML element, using innerHTML • Writing into the browser console, using console.log( ) Web Technologies

  31. Document.write() Will replace all existing HTML with the value in ( ..) If button is pressed, 11 will replace html content on screen Web Technologies

  32. innerHTML Will replace content of id=“demo” with 11 11 will appear in existing HTML Web Technologies

  33. innerHTML Javascript code: Before button is clicked: After button is clicked: Web Technologies

  34. Javascript Functions Javascript with function declared Before button is clicked After button is clicked Web Technologies

  35. Javascript Forms If you click Form data will be sent to page: /action_page.php then Web Technologies

  36. JavascriptDatatypes Example Output: Saab Web Technologies

  37. Javascript Object Output: Web Technologies

  38. Javascript Object Notation (JSON) • A format for sending & receiving objects/xml • Objects with many attribute value pairs • varjson='{"firstName":"John”, ”lastName”:”Doe”}’;  JSON • This is equivalent to varjobj= {firstName: “John”, lastName: “Doe”}; JS Object Web Technologies

  39. JS (JSON) Object vs JSON • JSON: JavaScript Object Notation • Closely related to JS Object, very similar syntax, all JS Object data are valid JSON data and the reverse • JSON is language independent format used to exchange information between services but JS Object is for JS use only JS Object JSON https://medium.com/@easyexpresssoft/object-literal-vs-json-7a2084872907

  40. JS Object, JSON Conversion • Javascript has built-in support for conversion between JSON and javascript object • JSON.stringify(obj): converts an JS object ‘obj’ to a JSON data, • JSON.parse(data): coverts JSON (text) data ‘data’ to JS object Web Technologies

  41. JSON - JS Object example Output: Web Technologies

  42. JSON Example JSON Converts JSON to JS Object Web Technologies

  43. JSON Array Web Technologies

  44. JSON vs XML • Syntax for storing / exchanging data, alternative to XML JSON XML Web Technologies

  45. AngularJS • AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions • Directive: introduces new syntax that associates new behavior to DOM elements (attribute, names) via event listeners • Built-in, custom directives • Can be added to HTML with the <script> tag: Web Technologies

  46. Built-in Directives • ng-app: initializes AngularJS application, defines <div> element as the owner of the AngularJs expression • ng-model: binds value of an input field to variable created in AngularJS • ng-bind: binds to value of innerHTML (print/use value) • ng-init: initializes application data • ng-repeat: repeats HTML elements • use double braces {{}} or ng-bind to display content from the model : <p>First name: {{firstname}}</p> Web Technologies

  47. AngularJS Example <div> is owner of Angular JS application replace the content of HTML element with this value Same as <p>{{name}}</p> Web Technologies

  48. AngularJS Example init value OUTPUT <p>Your wrote: <span ng-bind="name"><span></p> Web Technologies

  49. ng-repeat, ng-init Code: Output: Web Technologies

  50. PHP • Server scripting language for making dynamic and interactive Web pages (alternative to ASP) • PHP scripts execute on the server, various platforms • PHP code combined with HTML, CSS, JQUERY, Javascript.. • What can PHP do • can generate dynamic page content • Manipulate files (open, read, write, delete, close files) on server • can collect form data • can send and receive cookies • can add, delete, modify data in database • can be used to control user-access • can encrypt data Web Technologies

More Related