Web Programming Lec1 PDF

Web Programming Introduction to 01 Web Programming Dr. Mostafa Elgendy  2 Agenda ❖ Course Objective. ❖ Introduction to Web programming ❖ Introduction to HTML ❖ HTML tags ❖ Summary Web Programming 15-Oct-22 ...

Web Programming Introduction to 01 Web Programming Dr. Mostafa Elgendy  2 Agenda ❖ Course Objective. ❖ Introduction to Web programming ❖ Introduction to HTML ❖ HTML tags ❖ Summary Web Programming 15-Oct-22  3 Course Objectives ❖ At the end of this course, you will be able to: ❖ Design and implement a professional website ❖ Learn writing web pages using HTML ❖ Make stylistic decisions with CSS ❖ Understand the client-server programming model Web Programming 15-Oct-22  4 Course Objectives ❖ At the end of this course, you will be able to: ❖ Use PHP for server programming ❖ Use and manipulate databases using PHP ❖ Create interactive websites with JavaScript and jQuery ❖ Enhance interactive websites with AJAX and XML Web Programming 15-Oct-22  5 Materials ❖ Use the textbook: ❖ Learning php, mysql & javascript ❖ by Robin Nixon Web Programming 15-Oct-22  6 Final Project ❖ You can start working on this from the first week of the class ❖ Design and implementation of a professional website: ❖ Professional Style ❖ Interactive ❖ You can complete the project in teams of max 5 members. ❖ Proposal to be submitted by 29th October Web Programming 15-Oct-22  7 Introduction Web Programming 15-Oct-22  What is the internet? 8 ❖ The Internet is a global network of billions of computers and other electronic devices that use a protocol to exchange data which is known as Hypertext Transfer Protocol, or HTTP. ❖ A markup language called Hypertext Markup Language, or HTML was created ❖ To bring these together, the first web browser and web server were created. Web Programming 15-Oct-22  9 Web Browser ❖ Fetches/Displays documents from web servers ❖ Mozilla Firefox ❖ Microsoft Internet Explorer (IE) ❖ Apple Safari ❖ Google Chrome ❖ Opera Web Programming 15-Oct-22  Hypertext Transport Protocol (HTTP) 10 ❖ Set of commands understood by a web server and sent from a browser ❖ Some HTTP commands (your browser sends these internally): ❖ GET filename : download ❖ POST filename : send a web form response ❖ PUT filename : upload Web Programming 15-Oct-22  11 Uniform Resource Locator (URL) ❖ Identifier for the location of a document on a web site ❖ Example: http://dept.ju.edu/cs/index.html ❖ Upon entering this URL into the browser, it would: ❖ Ask the DNS server for the IP address of dept.ju.edu ❖ Connect to that IP address at port 80 ❖ Ask the server to GET /cs/index.html ❖ Display the resulting page on the screen Web Programming 15-Oct-22  Web Server 12 ❖ Software that listens for web page requests and serve HTTP content ❖ Web Server is mostly designed to serve static content ❖ Have plugins to support scripting languages like Perl, PHP, ASP, JSP etc. ❖ Examples: ❖ Apache Web Programming 15-Oct-22  13 Application Server ❖ Software framework that provides an environment where applications can run. ❖ Not limited to just HTTP. It can be provided other protocol support such as RMI/RPC ❖ Have components and features to support services such as Connection Pooling, Messaging services. ❖ Examples: ❖ Glassfish ❖ WebSphere Web Programming 15-Oct-22  14 Static Web Pages Web Programming 15-Oct-22  15 Static Web Pages Web Programming 15-Oct-22  16 Dynamic content ❖ Request for the same document returns different results depend on who made the request. ❖ The Web server needs to run certain programs(Servlet, PHP, ASP, Servlets, JSP etc…) to process user requests. Web Programming 15-Oct-22  17 Dynamic content Web Programming 15-Oct-22  18 Dynamic content Web Programming 15-Oct-22  19 Web Languages ❖ Hypertext Markup Language (HTML): used for writing web pages ❖ Cascading Style Sheets (CSS): stylistic info for web pages ❖ PHP Hypertext Processor (PHP): dynamically create pages on a web server Web Programming 15-Oct-22  20 Web Languages ❖ JavaScript: interactive and programmable web pages ❖ Asynchronous JavaScript and XML (Ajax): accessing data for web applications ❖ MariaDB: The MySQL Clone Web Programming 15-Oct-22  21 Basic HTML Web Programming 15-Oct-22  What is HTML? 22 ❖ HTML stands for Hyper Text Markup Language ❖ HTML is the standard markup language for creating Web pages ❖ HTML describes the structure of a Web page Web Programming 15-Oct-22  What is HTML? 23 ❖ HTML consists of a series of elements ❖ HTML elements tell the browser how to display the content ❖ HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc Web Programming 15-Oct-22  Why I need to learn HTML? 24 ❖ Front-End Developer. ❖ Back-End Developer. Web Programming 15-Oct-22  25 Full stack web developer ❖ A person who can develop both client and server software. ❖ In addition to mastering HTML and CSS, they also knows how to: ❖ Program a browser (like using JavaScript, jQuery, Angular, or Vue) ❖ Program a server (like using PHP, ASP, Python, or Node) ❖ Program a database (like using SQL, SQLite, or MongoDB) Web Programming 15-Oct-22  26 Environment Web Programming 15-Oct-22  What I need to learn HTML? 27 ❖ Text Editor: Visual Studio Code, Atom. ❖ Browser: Google Chrome, Firefox. Web Programming 15-Oct-22  28 Setting Up Environment Web Programming 15-Oct-22  HTML Tags 29 ❖ Each tag's name is called an element ❖ An HTML element is defined by a start tag, some content, and an end tag: ❖ syntax: content ❖ example: This is a paragraph Web Programming 15-Oct-22  Structure of HTML page 30 Web Programming 15-Oct-22  Structure of HTML page 31 ❖ HTML is saved with extension.html ❖ Basic structure: tags that enclose content. information about the page ❖ Header describes the page page contents ❖ Body contains the page’s contents Web Programming 15-Oct-22  32 Page Title ❖ Placed within the head of the page ❖ Displayed in web browser’s title mark and when bookmarking the page … HARRY POTTER AND THE DEATHLY HALLOWS - PART 2 … HTML Web Programming 15-Oct-22  33 Paragraph ❖ Placed within the body of the page … Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic HTML Harry Potter and the Deathly Hallows, the last book in the series, begins directly after the events of the sixth book. Voldemort has completed his ascension to power and gains control of the Ministry of Magic output Web Programming 15-Oct-22  34 Comments CS courses are a lot of fun! HTML CS courses are a lot of fun! output Web Programming 15-Oct-22  35 Headings , , … ❖ Represents the different heading elements Harry Potter Books Harry Potter and the Philosopher’s Stone HTML Harry Potter Books Harry Potter and the Philosopher’s Stone output Web Programming 15-Oct-22  36 Horizontal rule ❖ Should be immediately closed with /> First paragraph Second Paragraph HTML First Paragraph Second Paragraph Web Programming 15-Oct-22  37 More HTML tags ❖ Some tags can contain additional information called attributes ❖ syntax: ❖ content ❖ example: Next page Web Programming 15-Oct-22  38 More HTML tags ❖ Some tags don't contain content; can be opened and closed in one tag ❖ syntax: ❖ ❖ Examples: ❖ example: ❖ example: Harry Potter and the Deathly Hallows Book Wikipedia HTML Harry Potter and the Deathly Hallows Wikipedia output Web Programming 15-Oct-22  43 Formatting Elements ❖ Used to format the page: ❖ : used to make the text in bold style. ❖ : used to make the text in italic style. Harry Potter and the Deathly Hallows Book HTML Harry Potter and the Deathly Hallows Book output Web Programming 15-Oct-22  44 Formatting Elements ❖ Used to format the page: ❖ : used to make the text in underlined style. ❖ : used to mark the text. Harry Potter and the Deathly Hallows Book HTML Harry Potter and the Deathly Hallows Book output Web Programming 15-Oct-22  45 Formatting Elements ❖ Used to format the page: ❖ : used to make the text in subscripted style. ❖ : used to make the text in superscripted style. Harry Potter and the Deathly Hallows Book HTML Harry Potter and the Deathly Hallows Book output Web Programming 15-Oct-22  46 Images ❖ The src attribute specifies source of the image URL ❖ HTML also requires an alt attribute describing the image. HTML Web Programming 15-Oct-22  48 Unordered list: , ❖ ul: represents a bulleted list of items (block) ❖ li: represents a single item within the list (block) No shoes No shirt No problem! HTML No shoes No shirt No problem! output Web Programming 15-Oct-22  49 Unordered list: , Harry Potter characters: Harry Potter Harry Potter characters: Hermione Harry Potter Ron Hermione Ron LOTR characters: LOTR characters: Frodo Frodo Bilbo Bilbo Sam Sam output HTML Web Programming 15-Oct-22  50 Unordered list: , ❖ If you leave a list open, subsequent contents will be indented No shoes No shirt No problem! Paragraph after list... HTML No shoes No shirt No problem! Paragraph after list... output Web Programming 15-Oct-22  51 Ordered list: , ❖ ol: represents a numbered list of items Apple business model: Beat Microsoft Beat Google Conquer the world! HTML Apple business model: 1. Beat Microsoft 2. Beat Google 3. Conquer the world output Web Programming 15-Oct-22  52 List of definitions: , , ❖ dl represents a list of definitions of terms ❖ dt represents each term, and dd its definition newbie one who does not have mad skills jaded tired, bored, or lacking enthusiasm frag a kill in a shooting game HTML newbie one who does not have mad skills jaded Tired, bored, or lacking enthusiasm frag a kill in a shooting game output Web Programming 15-Oct-22  53 Tables , , ❖ table defines the overall table, tr each row, and td each cell ❖ Useful for displaying large row/column data sets ❖ th cells in a row are considered headers ❖ a caption at the start of the table labels its meaning Web Programming 15-Oct-22  54 Tables , , Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Web Programming 15-Oct-22  55 Tables , , Important data Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Web Programming 15-Oct-22  56 Computer code ❖ code: a short section of computer code The ul and ol tags make lists. HTML The ul and ol tags make lists. output Web Programming 15-Oct-22  57 Preformatted text ❖ Displayed with exactly the whitespace / line breaks given in the text ❖ Shown in a fixed-width font by default Bill Gates speaks You will be assimilated Microsoft fans delirious HTML Bill Gates speaks You will be assimilated Microsoft fans delirious output Web Programming 15-Oct-22  58 Preformatted text ❖ When showing a large section of computer code, enclose it in a pre to preserve whitespace and a code to describe the semantics of the content public static void main(String[] args) { System.out.println("Hello, world!"); } HTML public static void main(String[] args) { System.out.println("Hello, world!"); } output Web Programming 15-Oct-22  Summary 59 ❖ Introduction to Web programming ❖ Different between static vs dynamic web pages ❖ Different between web vs application server ❖ Understand the client-server programming model. ❖ Learn writing web pages using HTML Web Programming 15-Oct-22  Resources 60 ❖ https://www.w3schools.com/html/ ❖ https://www.geeksforgeeks.org/html/ Web Programming 15-Oct-22 Questions