- Mariam Salloum
Download
Report
Transcript - Mariam Salloum
CS40 Computing for the Web
LECTURE 2
WEB PROGRAMMING
Prof. Mariam Salloum
CS 40 – Computing for the Web
Fall 2016
1
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
2
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
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 email, file sharing, etc.
5
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
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
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
9
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
CS40 Computing for the Web
ISP does DNS lookup,
translates mystie.com to an ip
address
Overview
Server
Client
HTML
CSS
JavaScript
<!doctype html>
<html>
<head>
<link href=“/styles/main.css”/>
</head>
<body>
<h1> My Page </h1>
<script src=“/js/jquery.js”>
</body>
</html>
Browser
Server
63.45.24.124
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)
15
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
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
• …
CS40 Computing for the Web
17
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
CS40 Computing for the Web
ISP does DNS lookup, translates
mystie.com to an ip address
Overview
HTML
CSS
JavaScript
<!doctype html>
<html>
<head>
<link href=“/styles/main.css”/>
</head>
<body>
<h1> My Page </h1>
<script src=“/js/jquery.js”>
</body>
</html>
Browser
Server
63.45.24.124
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
CS40 Computing for the Web
21
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)
CS40 Computing for the Web
Outline
• Brief Overview of the Internet
• Client & Server
• Internet Protocols
• HTML
22
CS 40
23
References
• Reading assignments:
• HTML tutorial : http://www.w3schools.com/html/default.asp
• I don’t expect you to complete all examples right away, but get
started on the first few examples.
• Download Sublime Text Editor
• https://www.sublimetext.com/3
CS 40
24
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
1. Write an HTML file, e.g., simple.html
2. View it by dragging the HTML file to a browser (e.g., Chrome, IE)
• We will be using a new version called HTML5
CS 40 Computing for the Web
25
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
CS 40 Computing for the Web
26
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>
CS 40 Computing for the Web
27
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.)
CS 40 Computing for the Web
28
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
CS 40 Computing for the Web
29
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
CS 40 Computing for the Web
Headings: <h1>, <h2>, …, <h6>
• The <h1> , <h2> , … <h6> tags denote headings
• Examples: EX1
HTML CODE
OUTPUT
31
CS 40 Computing for the Web
32
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" />
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
33
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
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
CS 40 Computing for the Web
37
Line break: <br>
• The <br> tag forces a line break in the middle of a block
element
HTML CODE
The <br> tag forces a line break
OUTPUT
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
38
CS 40 Computing for the Web
39
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
CS 40 Computing for the Web
40
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
CS 40 Computing for the Web
41
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
CS 40 Computing for the Web
Quotations
• Inline Quotations: <q>
• Block Quotations: <blockquote>
HTML CODE
OUTPUT
42
CS 40 Computing for the Web
43
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
CS 40 Computing for the Web
44
Style (Cont.)
• The background-color property defines the background color of the
HTML element.
• Color codes : http://htmlcolorcodes.com/
CS 40 Computing for the Web
45
Style (Cont.)
• The color property defines the color of text of an HTML element.
• Color codes : http://htmlcolorcodes.com/
CS 40 Computing for the Web
46
Style (Cont.)
• The font-family property defines the font of text, while the font-size
attributes defines the size of text.
• Reference:
CS 40 Computing for the Web
47
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.
CS 40 Computing for the Web
48
HTML Character Entities
• A way of representing any Unicode character within a web page
• Complete list of HTML Unicode characters :
http://www.w3schools.com/charsets/ref_utf_misc_symbols.asp
CS 40 Computing for the Web
49
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
CS40 Computing for the Web
50
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.