Presentation is loading. Please wait.

Presentation is loading. Please wait.

Lecture 2 Web Programming

Published by堰 巫 Modified over 8 years ago

Similar presentations

Presentation on theme: "Lecture 2 Web Programming"— Presentation transcript:

1 Lecture 2 Web Programming
CS40 Computing for the Web Lecture 2 Web Programming Prof. Mariam Salloum CS 40 – Computing for the Web Fall 2016

2 CS40 Computing for the Web
Outline Brief Overview of the Internet Client & Server Internet Protocols HTML Next time we will cover CSS And assign your 1st homework assignment

3 CS40 Computing for the Web
Web Essentials Client: web browsers, used to surf the Web Server: used to supply information to these browsers Computer networks: used to support the browser-server communication Request “document A” document A Client Server

4 CS40 Computing for the Web
Internet vs. Web The Internet: a inter-connected computer networks, linked by wires, cables, wireless connections, etc. Web: a collection of interconnected documents and other resources. The world wide web (WWW) is accessible via the Internet, as are many other services including , file sharing, etc.

5 How does the Internet Work?
CS40 Computing for the Web How does the Internet Work? Clients makes requests to a Server through communication protocols A communication protocol is a specification of communication between two computers IP (Internet Protocol): defines the packets that carry blocks of data from one node to another TCP (Transmission Control Protocol) and UDP (User Datagram Protocol): the protocols by which one host sends data to another. Other application protocols: DNS (Domain Name Service), SMTP (Simple Mail Transmission Protocol), and FTP (File Transmission Protocol)

6 The Internet Protocol (IP)
CS40 Computing for the Web The Internet Protocol (IP) A key element of IP is an IP address, a 32-bit number (IPv4) IPv6 (128-bits number) will be adopted soon due to growth of the internet The Internet authorities assign ranges of numbers to different organizations IP is responsible for moving packet of data from node to node IP-based communication is unreliable

7 The Transmission Control Protocol (TCP)
CS40 Computing for the Web The Transmission Control Protocol (TCP) TCP is a higher-level protocol that extends IP to provide additional functionality: reliable communication TCP adds support to detect errors or lost data and to trigger retransmission until the data is correctly and completely received

8 TCP/IP Protocol Suites
CS40 Computing for the Web TCP/IP Protocol Suites Application Layer Provides application access to communication environment HTTP, FTP, Telnet, DNS, SMTP, etc. Transport Layer Provides a delivery service for the application layer TCP, UDP Internet Layer Established, maintains and terminates end to end network communication. IP (IPv4, IPv6) Network Access Layer Established direct connection to physical media and handles data flow control.

9 The World Wide Web (WWW)
CS40 Computing for the Web The World Wide Web (WWW) WWW is a system of interlinked, hypertext documents that runs over the Internet Two types of software: Client: a system that wishes to access the information provided by servers must run client software (e.g., web browser) Server: an internet-connected computer that wishes to provide information to others must run server software Client and server applications communicate over the Internet by following a protocol built on top of TCP/IP – HyperText Transport Protocol (HTTP)

10 CS40 Computing for the Web
Basics of the WWW Hypertext: a format of information which allows one to move from one part of a document to another or from one document to another through hyperlinks Uniform Resource Locator (URL): unique identifiers used to locate a particular resource on the network Markup language: defines the structure and content of hypertext documents (example: HTML)

11 Overview Client Server Server Browser 63.45.24.124
CS40 Computing for the Web Overview ISP does DNS lookup, translates mystie.com to an ip address Client Server HTML Browser Server CSS JavaScript <!doctype html> <html> <head> <link href=“/styles/main.css”/> </head> <body> <h1> My Page </h1> <script src=“/js/jquery.js”> </body> </html> Your browser is making a request to the server and getting a response back. A browser can be Chrome, you phone, etc. The server is another machine on the internet (with an ip address) Your internet server provider (ISP) will do a DNS lookup on behave of the Browser to lookup the IP address associated with the given URL (like mysite.com) The server can return an html file, an image. The server returns the content and tell me what content type I received.

12 CS40 Computing for the Web
Web Client : Browser Web Browser Example: Makes HTTP requests on behalf of the user Reformat the URL entered as a valid HTTP request Use DNS to convert server’s host name to appropriate IP address Establish a TCP connection using the IP address Send HTTP request over the connection and wait for server’s response Display the document contained in the response If the document is not a plain-text document but instead is written in HTML, this involves rendering the document (positioning text, graphics, creating table borders, using appropriate fonts, etc.)

13 CS40 Computing for the Web
Static Web: HTML5 & CSS HTML stands for HyperText Markup Language It is a text file containing small markup tags that tell the Web browser how to display the page CSS stands for Cascading Style Sheets It defines how to display HTML elements (i.e. the look and the feel of a web page)

14 History of HTML HTML first published 1991 HTML 2.0 1995 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. HTML 3.2 1997 HTML 4.01 XHTML 2.0 had even stricter standards than 1.0, rejecting web pages that did not comply. It fell out of favor gradually and was abandoned completely in 2009. 1999 XHTML 1.0 2000 HTML5 is much more tolerant and can handle markup from all the prior versions. XHTML 2.0 Though HTML5 was published officially in 2012, it has been in development since 2004. HTML5 2012

15 Limitation of Static webpages
CS40 Computing for the Web Limitation of Static webpages What’s the drawback to static webpages? A static webpage only changes when a web developer changes it Thus, not able to dynamically update information or react to events. What's the solution? Use Javascript to create dynamic webpages on the client side.

16 Client-Side Programmability
CS40 Computing for the Web Client-Side Programmability Browser scripting: JavaScript Designed to add interactivity to HTML pages Usually embedded into HTML pages What can a JavaScript Do? Put dynamic text into an HTML page React to events Read and write HTML elements Validate data before it is submitted to a server Create cookies …

17 CS40 Computing for the Web
Web Client: Tools Layer Cake Layers HTML is the structural layer, describes the content and foundation for other layers. The presentation layer (CSS) describes the look and fell of the page. The behavioral layer (JavaScript) the scripting and programming that adds interactivity and dynamic effects to a site.

18 Overview Server Browser 63.45.24.124 HTML CSS JavaScript
CS40 Computing for the Web Overview ISP does DNS lookup, translates mystie.com to an ip address HTML Browser Server CSS JavaScript <!doctype html> <html> <head> <link href=“/styles/main.css”/> </head> <body> <h1> My Page </h1> <script src=“/js/jquery.js”> </body> </html> Your browser is making a request to the server and getting a response back. A browser can be Chrome, you phone, etc. The server is another machine on the internet (with an ip address) Your internet server provider (ISP) will do a DNS lookup on behave of the Browser to lookup the IP address associated with the given URL (like mysite.com) The server can return an html file, an image. The server returns the content and tell me what content type I received.

19 CS40 Computing for the Web
Web Servers Main functionalities: Server waits for connect requests When a connection request is received, the server creates a new process to handle this connection The new process establishes the TCP connection and waits for HTTP requests The new process invokes software that maps the requested URL to a resource on the server If the resource is a file, creates an HTTP response that contains the file in the body of the response message If the resource is a program, runs the program, and returns the output A server is any computer running software that enables it to answer requests for documents and other data. The programs that request and display documents (such as a browser) are called clients . The terms server-side and client-side, in regard to such specific functions refer to which machine is doing the processing. Client-side functions happen on the user’s machine; server-side functions occur on the remote machine. Web servers answer requests from browsers (the client program), retrieve the specified file (or execute a script), and return the document or script results. Web browsers and servers communicate via the Hypertext Transfer Protocol (HTTP).

20 Server-Side Programmability
CS40 Computing for the Web Server-Side Programmability The requests cause the response to be generated Server scripting: CGI/Perl: Common Gate Way Interface (*.pl, *.cgi) PHP: Open source, strong database support (*.php) ASP (Active Server Pages): Microsoft product, uses .Net framework (*.asp) Java via JavaServer Pages (*.jsp) … Web pages and sites have gotten much more interactive since the early days of simple HTML document sharing. Now web sites serve as portals of two-way information sharing, e-commerce, search engines, and dynamically generated content. This functionality relies on programs and scripts that are processed on the server. There are a number of options for server-side programming , of which CGI, ASP, PHP, and Java servlets/JSP are the most common.

21 Current state of the standards
CS40 Computing for the Web Current state of the standards In the 90s browser wars (IE vs. Netscape) were driving the evolution of HTML Non-standard extensions used by pages W3C (World Wide Web Consortium) sets standards Last HTML standard 5 (2012)

22 CS40 Computing for the Web
Outline Brief Overview of the Internet Client & Server Internet Protocols HTML

23 References Reading assignments: Download Sublime Text Editor
CS 40 References Reading assignments: HTML tutorial : I don’t expect you to complete all examples right away, but get started on the first few examples. Download Sublime Text Editor

24 Hypertext Markup Language (HTML)
CS 40 Hypertext Markup Language (HTML) Language used to describes the content and structure of information on a web page Web browser renders HTML pages for viewing Write an HTML file, e.g., simple.html View it by dragging the HTML file to a browser (e.g., Chrome, IE) We will be using a new version called HTML5

25 Hypertext Markup Language (HTML)
CS 40 Computing for the Web Hypertext Markup Language (HTML) Surrounds text content with opening and closing tags Each tag’s name is called an element Syntax : <element> content </element> Usually whitespace is insignificant in HTML

26 Structure of an HTML page
CS 40 Computing for the Web Structure of an HTML page A header describes the page and the body contains the page’s contents (visible content) An HTML page is saved into a file ending with extension .html DOCTYPE tag tells browser to interpret our page’s code as HTML5, the latest & greatest version of the language. <!DOCTYPE html> <html> <head> <title> Page Title </title> </head> <body> Page Contents </body> </html>

27 Head Tag : <head> …. </head>
CS 40 Computing for the Web Head Tag : <head> …. </head> The <head> tag describes the page Head part consists mainly of the following tags Tag Description <title> … </title> Page title <link> … </link> Used to link to a CSS file <script> … </script> Used to link to a JavaScript file <style> … </style> Used to define style information for a single HTML page (e.g. color, font, etc.)

28 Page title : <title>
CS 40 Computing for the Web Page title : <title> The <title> tag describes the title of the webpage It should be placed within the <head> tag of the page Displayed in the web browser’s title bar and when bookmarking the page HTML CODE OUTPUT

29 Body Tag: <body> … </body>
CS 40 Computing for the Web Body Tag: <body> … </body> The <body> tag contains the visible contents of the webpage The body part of the page can contains various types of tags: Tag Description <h1> , <h2>, … , <h6> Heading tags <p> … </p> Used to link to a CSS file <script> … </script> Used to link to a JavaScript file <style> … </style> Used to define style information for a single HTML page (e.g. color, font, etc.)

30 CS 40 Computing for the Web
Paragraph: <p> The <p> tag denotes a paragraph of text (a block ) Placed within the body of the page More examples : EX1 , EX2 HTML CODE OUTPUT

31 Headings: <h1>, <h2>, …, <h6>
CS 40 Computing for the Web Headings: <h1>, <h2>, …, <h6> The <h1> , <h2> , … <h6> tags denote headings Examples: EX1 HTML CODE OUTPUT

32 CS 40 Computing for the Web
More about HTML tags Some tags can contain additional information, called attributes syntax: <element attribute="value" attribute="value"> content </element> example:  <a href="page2.htm" > Cool Link! </a> Tags that don't contain content, can be opened and closed in one tag syntax: <element attribute="value" attribute="value" /> example: <hr /> example: <img src= "bunny.jpg" alt= "pic from Easter" />

33 Horizontal Line: <hr>
CS 40 Computing for the Web Horizontal Line: <hr> A horizontal line to visually separate sections of a page Note, this should be immediately closed with a /> HTML CODE OUTPUT

34 CS 40 Computing for the Web
Links: <a> The href attribute is used to specify a link to a destination URL can be absolute (to another web site) or can be relative (to another page on this site) HTML CODE OUTPUT

35 CS 40 Computing for the Web
Images: <img> You can insert images using the <img> tag The src attribute specifies the image URL The alt attribute specifies the text displayed if the image is not visible The width and height attributes specifies the image size HTML CODE OUTPUT

36 Images as Links: <img> and <a> tag
CS 40 Computing for the Web Images as Links: <img> and <a> tag An image can become a link if embedded within the <a> tag. HTML CODE OUTPUT

37 Line break: <br>
CS 40 Computing for the Web Line break: <br> The <br> tag forces a line break in the middle of a block element The <br> tag forces a line break HTML CODE OUTPUT

38 Emphasis: <em>, <strong>
CS 40 Computing for the Web Emphasis: <em>, <strong> The <em> tag is used to ‘emphasize’ text The <strong> tag ‘strongly emphasize’ text HTML CODE OUTPUT

39 Comments: <!-- ... -->
CS 40 Computing for the Web Comments: <!-- ... --> Comments to document your HTML file Can be also used to "comment out" text (i.e. disable or make code non-viewable) Its good practice to thoroughly comment your html Note, comments cannot be nested and cannot contain a -- HTML CODE OUTPUT

40 Unordered List : <ul>
CS 40 Computing for the Web Unordered List : <ul> The <ul> tag represents a bulleted list of unordered items Each item within the list is represented with <li> tag HTML CODE OUTPUT

41 Ordered List : <ol>
CS 40 Computing for the Web Ordered List : <ol> The <ol> tag represents a bulleted list of ordered items Each item within the list is represented with <li> tag HTML CODE OUTPUT

42 CS 40 Computing for the Web
Quotations Inline Quotations: <q> Block Quotations: <blockquote> HTML CODE OUTPUT

43 CS 40 Computing for the Web
Style The style of an HTML element (color, font, etc.), can be done with the style attribute. Syntax : <tagname style= "property:value;" > Use the style attribute for styling HTML elements Use background-color for background color Use color for text colors Use font-family for text fonts Use font-size for text sizes Use text-align for text alignment

44 CS 40 Computing for the Web
Style (Cont.) The background-color property defines the background color of the HTML element. Color codes :

45 CS 40 Computing for the Web
Style (Cont.) The color property defines the color of text of an HTML element. Color codes :

46 CS 40 Computing for the Web
Style (Cont.) The font-family property defines the font of text, while the font-size attributes defines the size of text. Reference:

47 CS 40 Computing for the Web
Style (Cont.) The examples I showed previously, uses inline styles, i.e. defining the style content in the HTML However, what if we want to give all pages of a Web site the same look and feel … it will be very tedious to use inline style tag. The preferred method is to use Cascading Style Sheet (CSS) We will cover this next time CSS is used to separate the style of a site from the content.

48 HTML Character Entities
CS 40 Computing for the Web HTML Character Entities A way of representing any Unicode character within a web page Complete list of HTML Unicode characters :

49 CS 40 Computing for the Web
W3C HTML Validator validator.w3.org checks your HTML code to make sure it follows the official HTML syntax more picky than the browser, which may render bad HTML correctly

50 CS40 Computing for the Web
Exercise Create a html file using some of the tags we learned today: Add a link Add an image Add an image that links to a webpage Define a ordered or unordered list of items Use different headings (h1, h2, h3, …) Try the style tag with some of the attributes: background-color, font-family, etc.

Download ppt "Lecture 2 Web Programming"

Similar presentations

© 2010, Robert K. Moniot Chapter 1 Introduction to Computers and the Internet 1.

© 2010, Robert K. Moniot Chapter 1 Introduction to Computers and the Internet 1.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.

CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
CIS101 Introduction to Computing

CIS101 Introduction to Computing
Tutorial 1 Developing a Basic Web Page

Tutorial 1 Developing a Basic Web Page
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
IST 221 Internet Concepts and Applications Internet, WWW and HTML 1.

IST 221 Internet Concepts and Applications Internet, WWW and HTML 1.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
© 2004, Robert K. Moniot Chapter 1 Introduction to Computers and the Internet.

© 2004, Robert K. Moniot Chapter 1 Introduction to Computers and the Internet.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Developing a Basic Web Page with HTML

Developing a Basic Web Page with HTML
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc. 2013. All Rights Reserved.

Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.

CIS101 Introduction to Computing Week 06. Agenda Your questions Excel Exam during second hour Our status after the snow day Introduction to the Internet.
CMPT 241 - Web Programming Introduction and Basic HTML.

CMPT Web Programming Introduction and Basic HTML.
INTRODUCTION TO WEB DATABASE PROGRAMMING

INTRODUCTION TO WEB DATABASE PROGRAMMING
Creating a Simple Page: HTML Overview

Creating a Simple Page: HTML Overview
CS 299 – Web Programming and Design CS299: Web Programming and Design Instructor: Dr. Fang (Daisy) Tang.

CS 299 – Web Programming and Design CS299: Web Programming and Design Instructor: Dr. Fang (Daisy) Tang.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
Creating a Basic Web Page

Creating a Basic Web Page

Similar presentations

Ads by Google