Unit 1: WEB Essentials: Clients, Servers AND Communication
Unit 1: WEB Essentials: Clients, Servers AND Communication
Unit 1: WEB Essentials: Clients, Servers AND Communication
1.1. INTERNET
The Internet is a global system of interconnected computer networks that use the
standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a
network of networks that consists of millions of private, public, academic, business,
and government networks, of local to global scope, that are linked by a broad array of
electronic and optical networking technologies. The Internet carries a vast range of
information resources and services, such as the inter-linked hypertext documents of
the World Wide Web (WWW) and the infrastructure to support electronic mail.
1991
Public introduction to World Wide Web (mostly text based)
- In the early 1990s, the developers at CERN spread word of the Web's
capabilities to scientific audiences worldwide.
- By September 1993, the share of Web traffic traversing the NSFNET
Internet backbone reached 75 gigabytes per month or one percent. By July 1994 it
was one terabyte per month.
1994
Prior to this time the WWW was not used for commercial business purposes
- The Internet is one-third research and education network
- Commercial communications begin to take over the majority of Internet
traffic
Some addresses, however, are used for internal networks only. Three sets of addresses
were set aside for that specific purpose:
10.0.0.0 - 10.255.255.255
172.16.0.0 - 172.16.255.255
192.168.0.0 - 192.168.255.255
About TCP/IP
TCP and IP were developed by a Department of Defense (DOD) research project to
connect a number different networks designed by different vendors into a network of
networks (the "Internet"). It was initially successful because it delivered a few basic
services that everyone needs (file transfer, electronic mail, remote logon) across a
very large number of client and server systems. Several computers in a small
department can use TCP/IP (along with other protocols) on a single LAN. As with all
other communications protocol, TCP/IP is composed of layers:
The Internet Protocol was developed to create a Network of Networks (the "Internet").
Individual machines are first connected to a LAN (Ethernet or Token Ring). TCP/IP
shares the LAN with other uses (a Novell file server, Windows for Workgroups peer
systems). One device provides the TCP/IP connection between the LAN and the rest
of the world. To insure that all types of systems from all vendors can communicate,
TCP/IP is absolutely standardized on the LAN. However, larger networks based on
long distances and phone lines are more volatile. In the US, many large corporations
would wish to reuse large internal networks based on IBM's SNA.
Addresses
Each technology has its own convention for transmitting messages between two
machines within the same network. On a LAN, messages are sent between machines
by supplying the six byte unique identifier (the "MAC" address). In an SNA network,
every machine has Logical Units with their own network address. DECNET,
Appletalk, and Novell IPX all have a scheme for assigning numbers to each local
network and to each workstation attached to the network. On top of these local or
vendor specific network addresses, TCP/IP assigns a unique number to every
workstation in the world. This "IP number" is a four byte value that, by convention, is
expressed by converting each byte into a decimal number (0 to 255) and separating
the bytes with a period. For example, the PC Lube and Tune server is 130.132.59.234.
Subnets
Although the individual subscribers do not need to tabulate network numbers or
provide explicit routing, it is convenient for most Class B networks to be internally
managed as a much smaller and simpler version of the larger network organizations. It
is common to subdivide the two bytes available for internal assignment into a one
byte department number and a one byte workstation ID.
WWW
The terms Internet and World Wide Web are often used in every-day speech without much
distinction. However, the Internet and the World Wide Web are not one and the same. The
Internet is a global system of interconnected computer networks. In contrast, the Web is one
of the services that runs on the Internet. It is a collection of interconnected documents and
other resources, linked by hyperlinks and URLs. In short, the Web is an application running
on the Internet. Viewing a web page on the World Wide Web normally begins either by
typing the URL of the page into a web browser, or by following a hyperlink to that page or
resource. The web browser then initiates a series of communication messages, behind the
scenes, in order to fetch and display it.First, the server-name portion of the URL is resolved
into an IP address using the global, distributed Internet database known as the Domain Name
System (DNS). This IP address is necessary to contact the Web server. The browser then
requests the resource by sending an HTTP request to the Web server at that particular address.
In the case of a typical web page, the HTML text of the page is requested first and parsed
immediately by the web browser, which then makes additional requests for images and any
other files that complete the page image.
While receiving these files from the web server, browsers may progressively render the page
onto the screen as specified by its HTML, Cascading Style Sheets (CSS), or other page
composition languages. Any images and other resources are incorporated to produce the on-
screen web page that the user sees. Most web pages contain hyperlinks to other related pages
and perhaps to downloadable files, source documents, definitions and other web resources.
Such a collection of useful, related resources, interconnected via hypertext links is dubbed a
web of information. Publication on the Internet created what Tim Berners-Lee first called the
WorldWideWeb
JavaScript is a scripting language that was initially developed in 1995 by Brendan Eich, then
of Netscape, for use within web pages.[22] The standardized version is ECMAScript.[22] To
overcome some of the limitations of the page-by-page model described above, some web
applications also use Ajax (asynchronous JavaScript and XML). JavaScript is delivered with
the page that can make additional HTTP requests to the server, either in response to user
actions such as mouse-clicks, or based on lapsed time. The server's responses are used to
modify the current page rather than creating a new page with each response. Thus the server
only needs to provide limited, incremental information. Since multiple Ajax requests can be
handled at the same time, users can interact with a page even while data is being retrieved.
Some web applications regularly poll the server to ask if new information is available.[23]
Caching
If a user revisits a Web page after only a short interval, the page data may not need to be re-
obtained from the source Web server. Almost all web browsers cache recently obtained data,
usually on the local hard drive. HTTP requests sent by a browser will usually only ask for
data that has changed since the last download. If the locally cached data are still current, it
will be reused. Caching helps reduce the amount of Web traffic on the Internet. The decision
about expiration is made independently for each downloaded file, whether image, stylesheet,
JavaScript, HTML, or whatever other content the site may provide. Thus even on sites with
highly dynamic content, many of the basic resources only need to be refreshed occasionally.
Web site designers find it worthwhile to collate resources such as CSS data and JavaScript
into a few site-wide files so that they can be cached efficiently. This helps reduce page
download times and lowers demands on the Web server.
Terminology
This specification uses a number of terms to refer to the roles played by participants
in, and objects of, the HTTP communication.
connection
A transport layer virtual circuit established between two application programs
for the purpose of communication.
message
The basic unit of HTTP communication, consisting of a structured sequence of
octets matching the syntax defined in and transmitted via the connection.
request
An HTTP request message.
response
An HTTP response message.
resource
A network data object or service which can be identified by a URI.
entity
A particular representation or rendition of a data resource, or reply from a
service resource, that may be enclosed within a request or response message.
An entity consists of metainformation in the form of entity headers and
content in the form of an entity body.
client
An application program that establishes connections for the purpose of
sending requests.
user agent
The client which initiates a request. These are often browsers, editors, spiders
(web-traversing robots), or other end user tools.
server
An application program that accepts connections in order to service requests
by sending back responses.
Overall Operation
The HTTP protocol is based on a request/response paradigm. A client establishes a
connection with a server and sends a request to the server in the form of a request
method, URI, and protocol version, followed by a MIME-like message containing
request modifiers, client information, and possible body content. The server responds
with a status line, including the message's protocol version and a success or error
code, followed by a MIME-like message containing server information, entity
metainformation, and possible body content.
On the Internet, HTTP communication generally takes place over TCP/IP connections.
The default port is TCP 80 but other ports can be used. This does not preclude HTTP
from being implemented on top of any other protocol on the Internet, or on other
networks. HTTP only presumes a reliable transport; any protocol that provides such
guarantees can be used, and the mapping of the HTTP/1.0 request and response
structures onto the transport data units of the protocol in question is outside the scope
of this specification.
Basic Rules
The following rules are used throughout this specification to describe basic parsing
constructs. The US-ASCII coded character set is defined by [17].
OCTET =<any 8-bit sequence of data>
CHAR =<any US-ASCII character (octets 0 - 127)>
UPALPHA =<any US-ASCII uppercase letter "A".."Z">
LOALPHA =<any US-ASCII lowercase letter "a".."z">
ALPHA =UPALPHA | LOALPHA
DIGIT =<any US-ASCII digit "0".."9">
CTL =<any US-ASCII control character
(octets 0 - 31) and DEL (127)>
CR = <US-ASCII CR, carriage return (13)>
LF = <US-ASCII LF, linefeed (10)>
SP = <US-ASCII SP, space (32)>
HT = <US-ASCII HT, horizontal-tab (9)>
<"> = <US-ASCII double-quote mark (34)>
HTTP/1.0 defines the octet sequence CR LF as the end-of-line marker for all protocol
elements except the Entity-Body The end-of-line marker within an Entity-Body is
defined by its associated media type,
CRLF = CR LF
The TEXT rule is only used for descriptive field contents and values that are not
intended to be interpreted by the message parser. Words of *TEXT may contain octets
from character sets other than US-ASCII.
Protocol Parameters
HTTP Version
HTTP uses a "<major>.<minor>" numbering scheme to indicate versions of the
protocol. The protocol versioning policy is intended to allow the sender to indicate the
format of a message and its capacity for understanding further HTTP communication,
rather than the features obtained via that communication. No change is made to the
version number for the addition of message components which do not affect
communication behavior or which only add to extensible field values. The <minor>
number is incremented when the changes made to the protocol add features which do
Proxy and gateway applications must be careful in forwarding requests that are
received in a format different than that of the application's native HTTP version. Since
the protocol version indicates the protocol capability of the sender, a proxy/gateway
must never send a message with a version indicator which is greater than its native
version; if a higher version request is received, the proxy/gateway must either
downgrade the request version or respond with an error.
General Syntax
URIs in HTTP can be represented in absolute form or relative to some known base
URI , depending upon the context of their use. The two forms are differentiated by the
fact that absolute URIs always begin with a scheme name followed by a colon.
URI = ( absoluteURI | relativeURI ) [ "#"
fragment ]
absoluteURI = scheme ":" *( uchar | reserved )
relativeURI = net_path | abs_path | rel_path
net_path = "//" net_loc [ abs_path ]
HTTP URL
The "http" scheme is used to locate network resources via the HTTP protocol. This
section defines the scheme-specific syntax and semantics for http URLs.
http_URL = "http:" "//" host [ ":" port ] [ abs_path ]
host = <A legal Internet host domain name
or IP address (in dotted-decimal form),
as defined by Section 2.1 of RFC 1123>
port = *DIGIT
If theport is empty or not given, port 80 is assumed. The semantics are that the
identified resource is located at the server listening for TCP connections on that port
of that host, and the Request-URI for the resource is abs_path. If the abs_path is
not present in the URL, it must be given as "/" when used as a Request-URI).
Note: Although the HTTP protocol is independent of the transport layer protocol, the
http URL only identifies resources by their TCP location, and thus non-TCP resources
must be identified by some other URI scheme.
Date/Time Formats
HTTP/1.0 applications have historically allowed three different formats for the
representation of date/time stamps:
Sun, 06 Nov 1994 08:49:37 GMT ; RFC 822, updated by RFC 1123
Sunday, 06-Nov-94 08:49:37 GMT ; RFC 850, obsoleted by RFC 1036
Sun Nov 6 08:49:37 1994 ; ANSI C's asctime() format
The first format is preferred as an Internet standard and represents a fixed-length
subset of that defined by RFC 1123 [6] (an update to RFC 822 [7]). The second
format is in common use, but is based on the obsolete RFC 850 [10] date format and
lacks a four-digit year. HTTP/1.0 clients and servers that parse the date value should
accept all three formats, though they must never generate the third (asctime) format.
Character Sets
HTTP uses the same definition of the term "character set" as that described for
MIME:
The term "character set" is used in this document to refer to a method used with one
or more tables to convert a sequence of octets into a sequence of characters. Note that
unconditional conversion in the other direction is not required, in that not all
characters may be available in a given character set and a character set may provide
more than one sequence of octets to represent a particular character.
Note: This use of the term "character set" is more commonly referred to as a
"character encoding." However, since HTTP and MIME share the same registry, it is
important that the terminology also be shared.
HTTP character sets are identified by case-insensitive tokens. character sets -- and
other names specifically recommended for use within MIME charset parameters.
charset = "US-ASCII"
| "ISO-8859-1" | "ISO-8859-2" | "ISO-8859-3"
| "ISO-8859-4" | "ISO-8859-5" | "ISO-8859-6"
| "ISO-8859-7" | "ISO-8859-8" | "ISO-8859-9"
| "ISO-2022-JP" | "ISO-2022-JP-2" | "ISO-2022-KR"
| "UNICODE-1-1" | "UNICODE-1-1-UTF-7" | "UNICODE-1-1-
UTF-8"
| token
Although HTTP allows an arbitrary token to be used as a charset value, any token that
has a predefined value within the IANA Character Set registry must represent the
character set defined by that registry. Applications should limit their use of character
sets to those defined by the IANA registry. The character set of an entity body should
be labelled as the lowest common denominator of the character codes used within that
body, with the exception that no label is preferred over the labels US-ASCII or ISO-
8859-1.
Media Types
HTTP uses Internet Media Typesin the Content-Type header field) in order to
provide open and extensible data typing.
media-type = type "/" subtype *( ";" parameter )
type = token
subtype = token
Parameters may follow the type/subtype in the form of attribute/value pairs.
parameter = attribute "=" value
attribute = token
value = token | quoted-string
The type, subtype, and parameter attribute names are case-insensitive. Parameter
values may or may not be case-sensitive, depending on the semantics of the parameter
name. LWS must not be generated between the type and subtype, nor between an
attribute and its value. Upon receipt of a media type with an unrecognized parameter,
a user agent should treat the media type as if the unrecognized parameter and its value
were not present.
Some older HTTP applications do not recognize media type parameters. HTTP/1.0
applications should only use media type parameters when they are necessary to define
the content of a message.
Media-type values are registered with the Internet Assigned Number Authority
(IANA [15]). The media type registration process is outlined in RFC 1590 [13]. Use
of non-registered media types is discouraged.
HTTP Message
Message Types
HTTP messages consist of requests from client to server and responses from server to
client.
HTTP-message = Simple-Request ; HTTP/0.9 messages
| Simple-Response
| Full-Request ; HTTP/1.0 messages
| Full-Response
Full-Request and Full-Response use the generic message format of RFC 822 [7]
for transferring entities. Both messages may include optional header fields (also
known as "headers") and an entity body. The entity body is separated from the
headers by a null line (i.e., a line with nothing preceding the CRLF).
Full-Request = Request-Line ; Section 5.1
Message Headers
HTTP header fields, which include General-Header (Section 4.3), Request-Header
(Section 5.2), Response-Header (Section 6.2), and Entity-Header (Section 7.1)
fields, follow the same generic format as that given in Section 3.1 of RFC 822 [7].
Each header field consists of a name followed immediately by a colon (":"), a single
space (SP) character, and the field value. Field names are case-insensitive. Header
fields can be extended over multiple lines by preceding each extra line with at least
one SP or HT, though this is not recommended.
HTTP-header = field-name ":" [ field-value ] CRLF
field-name = token
field-value = *( field-content | LWS )
field-content = <the OCTETs making up the field-value
and consisting of either *TEXT or
combinations
of token, tspecials, and quoted-string>
The order in which header fields are received is not significant. However, it is "good
practice" to send General-Header fields first, followed by Request-Header or
Response-Header fields prior to the Entity-Header fields.
Multiple HTTP-header fields with the same field-name may be present in a message
if and only if the entire field-value for that header field is defined as a comma-
separated list [i.e., #(values)]. It must be possible to combine the multiple header
fields into one "field-name: field-value" pair, without changing the semantics of the
message, by appending each subsequent field-value to the first, each separated by a
comma.
Request
A request message from a client to a server includes, within the first line of that
message, the method to be applied to the resource, the identifier of the resource, and
the protocol version in use. For backwards compatibility with the more limited
HTTP/0.9 protocol, there are two valid formats for an HTTP request:
Request = Simple-Request | Full-Request
Simple-Request = "GET" SP Request-URI CRLF
Full-Request = Request-Line ;
*( General-Header ;
| Request-Header ;
| Entity-Header ) ;
CRLF
[ Entity-Body ] ;
If an HTTP/1.0 server receives a Simple-Request, it must respond with an HTTP/0.9
Simple-Response. An HTTP/1.0 client capable of receiving a Full-Response
should never generate a Simple-Request.
Request-Line
The Request-Line begins with a method token, followed by the Request-URI and
the protocol version, and ending with CRLF. The elements are separated by SP
characters. No CR or LF are allowed except in the final CRLF sequence.
Request-Line = Method SP Request-URI SP HTTP-Version CRLF
Note that the difference between a Simple-Request and the Request-Line of a
Full-Request is the presence of the HTTP-Version field and the availability of
methods other than GET.
Method
The Method token indicates the method to be performed on the resource identified by
the Request-URI. The method is case-sensitive.
Method = "GET" ;
| "HEAD" ;
| "POST" ;
| extension-method
extension-method = token
The list of methods acceptable by a specific resource can change dynamically; the
client is notified through the return code of the response if a method is not allowed on
a resource. Servers should return the status code 501 (not implemented) if the method
is unrecognized or not implemented.
Request-URI
The Request-URI is a Uniform Resource Identifier and identifies the resource upon
which to apply the request.
Request-URI = absoluteURI | abs_path
The two options for Request-URI are dependent on the nature of the request.
Powered by www.technoscriptz.com Page 14
The absoluteURI form is only allowed when the request is being made to a proxy.
The proxy is requested to forward the request and return the response. If the request is
GET or HEAD and a prior response is cached, the proxy may use the cached message if
it passes any restrictions in the Expires header field. Note that the proxy may
forward the request on to another proxy or directly to the server specified by the
absoluteURI. In order to avoid request loops, a proxy must be able to recognize all of
its server names, including any aliases, local variations, and the numeric IP address.
An example Request-Line would be:
Response
After receiving and interpreting a request message, a server responds in the form of an
HTTP response message.
Response = Simple-Response | Full-Response
Simple-Response = [ Entity-Body ]
Full-Response = Status-Line ;
*( General-Header ;
| Response-Header ;
| Entity-Header ) ;
CRLF
[ Entity-Body ] ;
Status-Line
The first line of a Full-Response message is the Status-Line, consisting of the
protocol version followed by a numeric status code and its associated textual phrase,
with each element separated by SP characters. No CR or LF is allowed except in the
final CRLF sequence.
Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase
CRLF
Since a status line always begins with the protocol version and status code
"HTTP/" 1*DIGIT "." 1*DIGIT SP 3DIGIT SP
(e.g., "HTTP/1.0 200 "), the presence of that expression is sufficient to differentiate
a Full-Response from a Simple-Response. Although the Simple-Response format
may allow such an expression to occur at the beginning of an entity body, and thus
cause a misinterpretation of the message if it was given in response to a Full-
Request, most HTTP/0.9 servers are limited to responses of type "text/html" and
therefore would never generate such a response.
The Status-Code element is a 3-digit integer result code of the attempt to understand
and satisfy the request. The Reason-Phrase is intended to give a short textual
description of the Status-Code. The Status-Code is intended for use by automata
and the Reason-Phrase is intended for the human user. The client is not required to
examine or display the Reason-Phrase.
The first digit of the Status-Code defines the class of response. The last two digits do
not have any categorization role. There are 5 values for the first digit:
The individual values of the numeric status codes defined for HTTP/1.0, and an
example set of corresponding Reason-Phrase's, are presented below. The reason
phrases listed here are only recommended -- they may be replaced by local
equivalents without affecting the protocol. These codes are fully defined in.
Status-Code = "200" ; OK
| "201" ; Created
| "202" ; Accepted
| "204" ; No Content
| "301" ; Moved Permanently
Method Definitions
The set of common methods for HTTP/1.0 is defined below. Although this set can be
expanded, additional methods cannot be assumed to share the same semantics for
separately extended clients and servers.
GET
The GET method means retrieve whatever information (in the form of an entity) is
identified by the Request-URI. If the Request-URI refers to a data-producing
process, it is the produced data which shall be returned as the entity in the response
and not the source text of the process, unless that text happens to be the output of the
process.
The semantics of the GET method changes to a "conditional GET" if the request
message includes an If-Modified-Since header field. A conditional GET method
requests that the identified resource be transferred only if it has been modified since
the date given by the If-Modified-Since header. The conditional GET method is
intended to reduce network usage by allowing cached entities to be refreshed without
requiring multiple requests or transferring unnecessary data.
HEAD
The HEAD method is identical to GET except that the server must not return any
Entity-Body in the response. The metainformation contained in the HTTP headers in
POST
The POST method is used to request that the destination server accept the entity
enclosed in the request as a new subordinate of the resource identified by the
Request-URI in the Request-Line. POST is designed to allow a uniform method to
cover the following functions:
The actual function performed by the POST method is determined by the server and is
usually dependent on the Request-URI. The posted entity is subordinate to that URI
in the same way that a file is subordinate to a directory containing it, a news article is
subordinate to a newsgroup to which it is posted, or a record is subordinate to a
database.
A Web server is a program that, using the client/server model and the World Wide
Web's Hypertext Transfer Protocol ( HTTP ), serves the files that form Web pages to
Web users (whose computers contain HTTP clients that forward their requests). Every
computer on the Internet that contains a Web site must have a Web server program.
Two leading Web servers are Apache , the most widely-installed Web server, and
Microsoft's Internet Information Server ( IIS ). Other Web servers include Novell's
Web Server for users of its NetWare operating system and IBM's family of Lotus
Domino servers, primarily for IBM's OS/390 and AS/400 customers.
Apache is the most popular UNIX web server today. Apache was originally based on
code and ideas found in the most popular HTTP server of the time, NCSA httpd 1.3
(early 1995). It has since evolved into a far superior system which can rival (and
probably surpass) almost any other UNIX based HTTP server in terms of
functionality, efficiency and speed. Take a look at the web server feature chart to see
how Apache ranks among the competition.Open Market provides software products
that are used to develop the infrastructure for Internet commerce. They pride
themselves on scalability, content flexibility, lower entry and maintenance costs, and
enhanced security.
IBM's Secure Server is provided for AIX, HP-UX, and Solaris, as well as NT and
OS/2. Version 4.2 servers include enhanced scalability, browser-specific response
capability, enhanced CGI support, PICS support, and HTTP Version 1.1 compliance.
The IB servers have consistent configuration, management, and API interfaces across
all of their supported platforms.
Jigsaw is W3C's sample implementation of HTTP, a full blown HTTP server entirely
written in Java. Its design goals were: will run on any machine running Java, can be
extended by writing new resource objects (a replacement for CGI), minimization of
file system accesses.
WebSTAR is a Mac HTTP server which performs dynamic web server file caching,
has the ability to run server side Java applets, contains an administration plug-in that
lets one administer essential server functions from any web browser on the Internet,
honors keep-alive requests, supports a 20,000 username/passwd database, has
integrated support for image maps, supports common log format, supports cgi-bin
folder, does on the fly bin-hexing of Mac files, and supports an expanded command
set for server-side includes.
HotJava is Sun's highly customizable, extensible web browser, written entirely in Java.
The HotJava Browser conforms to Web standards and standard practice. It is designed
to be highly scalable and customizable, enabling end-users, service providers and
intranet providers to easily tailor it to meet their specific requirements. Like Web
pages themselves, the user interface of the HotJava Browser is implemented using
HTML and applets, and its behavior can be modified by an ASCII-based properties
file.
Lynx is a text based browser for both UNIX and VMS platforms with more platform
development in the works. Lynx is a product of the Distributed Computing Group
within Academic Computing Services of The University of Kansas. Lynx was
originally developed by Lou Montulli, Michael Grobe, and Charles Rezac. Garrett
Blythe created DosLynx and later joined the Lynx effort as well. Currently it is being
maintained by members of the Internet community coordinated by Foteos Macrides of
the Worcester Foundation for Biological Research.Internet Explorer from Microsoft is
The beginning there was the first iteration of Nearby Tweets, a simple way to connect
with local people and businesses on Twitter.
1. Default location
2. Saved keywords and locations
3. Pullout drawer was annoying
4. Manual directory
5. Mobile version
6. Auto-refresh tweets
While all user requests are valid opportunities, I had to give some thought to my own
resources and agenda before to make the right decisions about which requests to
accept.
Since I already had a web presence and I have not completely aligned Nearby Tweets’
web presence with my goals, I am holding off on the mobile version, because that
requires many resources and a new round of considerations, which would set me back
and throw me off.
There are plenty of apps out there doing manual Twitter directories. I don’t have the
reputation to compete them in that space, but the auto geolocation space is still mine,
and that’s where I’ll stay for now. (See Twellow, WeFollow, and just tweet it)
The rest of the user-requested features fit within my current agenda for the web
platform, which I’d have to also define more clearly before I started in on the UI
design.
In order to keep myself on track, I laid out three design scope requirements for the
Nearby Tweets redesign:
1. Address user concerns. I released the first version of Nearby Tweets quickly
with little user feedback, just to quietly hit the market with a fun, useful project. With
this redesign I wanted to garner as much user feedback during the design process as
possible. I did so through Twitter, Uservoice, as well as a private and public beta.
2. Make Nearby Tweets more powerful. Although the focus of the first version
was an advantage, it was very basic with no extended functionality. This time Nearby
Tweets would supplement its core functionality with user preferences, and advanced
search features.
Allow users to watch nearby tweets without any work, but allow users to tweak
Nearby Tweets when ready.
XHTML was invented to try to clean up the mess left by trying to make HTML a full-
fledged presentation tool, and to reduce the fragmentation of HTML caused by the
introduction of non-standard elements, mainly by Microsoft and
Netscape. Additionally, XML is viewed by many as the future of the Internet, so
reformulating existing markup technology to be an application of XML is a step
towards embracing that future and letting go of the long standing legacy of the
past. XHTML is now the specification of choice for mobile phone and PDA Internet
sites, so its cross platform functionality is already being taken advantage of in
excellent ways.
XHTML and its predecessor HTML 4 are extremely similar languages to use. Anyone
that has worked with HTML 4 (or XML even) will find switching to XHTML
extremely easy; it is more often then not simply learning to break those bad coding
habits that many of us have found so easy to slip into. Remembering the few rules that
come with XHTML, and trying to avoid any deprecated tags where possible, is all it
really takes. In HTML, the mark-up surrounding your content is traditionally referred
to as a tag, the <a> tag for example. In XML and subsequently, XHTML, these tags
and the text enclosed within them are known as elements. For example:
HTML, which stands for HyperText Markup Language, is the predominant markup
language for web pages. A markup language is a set of markup tags, and HTML uses
markup tags to describe web pages.TML is written in the form of HTML elements
consisting of "tags" surrounded by angle brackets (like <html>) within the web page
content. HTML tags normally come in pairs like <b> and </b>. The first tag in a pair
is the start tag, the second tag is the end tag (they are also called opening tags and
closing tags).
The purpose of a web browser is to read HTML documents and display them as web
pages. The browser does not display the HTML tags, but uses the tags to interpret the
content of the page.HTML elements form the building blocks of all websites. HTML
allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics
for text such as headings, paragraphs, lists, links, quotes and other items. It can embed
scripts in languages such as JavaScript which affect the behavior of HTML webpages.
HTML can also be used to include Cascading Style Sheets (CSS) to define the
appearance and layout of text and other material such as The W3C, maintainer of both
HTML and CSS standards, encourages the use of CSS over explicit presentational
markup.
1.10 HISTORY
In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents. In
1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[2]
Berners-Lee specified HTML and wrote the browser and server software in the last
part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert
Cailliau collaborated on a joint request for funding, but the project was not formally
adopted by CERN. In his personal notes[3] from 1990 he lists[4] "some of the many
areas in which hypertext is used" and puts an encyclopedia first.
The first publicly available description of HTML was a document called HTML Tags,
first mentioned on the Internet by Berners-Lee in late 1991.[5][6] It describes 20
elements comprising the initial, relatively simple design of HTML. Except for the
hyperlink tag, these were strongly influenced by SGMLguid, an in-house SGML
based documentation format at CERN. Thirteen of these elements still exist in HTML
4.[7]
HTML is a text and image formatting language used by web browsers to dynamically
format web pages. Many of the text elements are found in the 1988 ISO technical
report TR 9537 Techniques for using SGML, which in turn covers the features of early
text formatting languages such as that used by the RUNOFF command developed in
the early 1960s for the CTSS (Compatible Time-Sharing System) operating system:
these formatting commands were derived from the commands used by typesetters to
manually format documents. However, the SGML concept of generalized markup is
based on elements (nested annotated ranges with attributes) rather than merely print
Markup
HTML markup consists of several key components, including elements (and their
attributes), character-based data types, character references and entity references.
Another important component is the document type declaration, which specifies the
Document Type Definition. As of HTML 5, no Document Type Definition will need
to be specified and will only determine the layout mode.[41]
The Hello world program, a common computer program employed for comparing
programming languages, scripting languages and markup languages is made of 9 lines
of code although in HTML newlines are optional:
<!doctype html>
(The text between <html> and </html> describes the web page, and The text between
<body> and </body> is the visible page content.)
HTML Introducion
What is HTML?
HTML Tags
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page:
<html>
<body>
</body>
</html>
Example Explained
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
Editing HTML
In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this
is the best way to learn HTML.However, professional web developers often prefer
HTML editors like FrontPage or Dreamweaver, instead of writing plain text.
HTML Elements
HTML Elements
An HTML element is everything from the start tag to the end tag:
* The start tag is often called the opening tag. The end tag is often called the closing
tag.
Tip: You will learn about attributes in the next chapter of this tutorial.
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<body>
<p>This is my first paragraph.</p>
</body>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
Most browsers will display HTML correctly even if you forget the end tag:
<p>This is a paragraph
<p>This is a paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the
end tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.
HTML elements with no content are called empty elements. Empty elements can be
closed in the start tag.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed.
Adding a slash to the start tag, like <br />, is the proper way of closing empty
elements, accepted by HTML, XHTML and XML.
Even if <br> works in all browsers, writing <br /> instead is more future proof.
HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use
uppercase HTML tags.
W3Schools use lowercase tags because the World Wide Web Consortium (W3C)
recommends lowercase in HTML 4, and demands lowercase tags in future versions
of (X)HTML.
HTML Attributes
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
Tip: In some rare situations, when the attribute value itself contains quotes, it is
necessary to use single quotes: name='John "ShotGun" Nelson'
A complete list of legal attributes for each HTML element is listed in our:
Below is a list of some attributes that are standard for most HTML elements:
HTML HEADINGS
HTML headings are defined with the <h1> to <h6> tags.
Example:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example:
<img src="w3schools.jpg" width="104" height="142" />
HTML Paragraphs
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Note: Browsers automatically add an empty line before and after a paragraph.
Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph
<p>This is another paragraph
Use the <br /> tag if you want a line break (a new line) without starting a new
paragraph:
Example
In XHTML, XML, and future versions of HTML, HTML elements with no end tag
(closing tag) are not allowed.
Even if <br> works in all browsers, writing <br /> instead is more future proof.
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
Your browser does not support inline frames or is currently configured not to display
inline frames.
Example
tt>Teletype text</tt>
<i>Italic text</i>
<b>Bold text</b>
<big>Big text</big>
<small>Small text</small>
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a
complete reference).
<strong> or <em> means that you want the text to be rendered in a way that the user
understands as "important". Today, all major browsers render strong as bold and em
as italics.
Example
Preformatted text:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
The <tt>, <i>, <b>, <big>, and <small> tags are all font-style tags. They are not
deprecated, but it is possible to achieve richer effect with CSS.
Tag Description
<i> Renders as italic text
When you click on a link in an HTML page, an underlying <a> tag points to an
address on the world wide web.A Uniform Resource Locator (URL) is used to address
a document (or other data) on the world wide web.
scheme://host.domain:port/path/filename
Explanation:
scheme - defines the type of Internet service. The most common type is http
host - defines the domain host (the default host for http is www)
domain - defines the Internet domain name, like w3schools.com
:port - defines the port number at the host (the default port number for http is
80)
path - defines a path at the server (If omitted, the document must be stored at
the root directory of the web site
filename - defines the name of a document/resource
Common websites start with http://. Pages starting with http:// are not encrypted, so
all information exchanged between your computer and the Internet can be "seen" by
hackers.
Secure websites start with https://. The "s" stands for "secure". Here, the information
exchanged will be encrypted, making it useless to hackers.
Scheme Short for.... Which pages will the scheme be used for...
http HyperText Transfer Protocol Common web pages starts with http://. Not
encrypted. Unwise to enter personal
information in http:// pages
https Secure HyperText Transfer Secure web pages. All information
A table is divided into rows (with the <tr> tag), and each row is divided into data cells
(with the <td> tag). td stands for "table data," and holds the content of a data cell. A
<td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
If you do not specify a border attribute, the table will be displayed without borders.
Sometimes this can be useful, but most of the time, we want the borders to show.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
How the HTML code above looks in a browser:
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
The most common HTML lists are ordered and unordered lists:
HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Coffee
Milk
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. Milk
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd>
(describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.
Tag Description
<ol> Defines an ordered list
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a definition list
<dt> Defines an item in a definition list
<dd> Defines a description of an item in a definition list
A form can contain input elements like text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain select lists, textarea, fieldset, legend, and
label elements.
<form>
.
input elements
.
</form>
The most important form element is the input element. The input element is used to
select user information.An input element can vary in many ways, depending on the
type attribute. An input element can be of type text field, checkbox, password, radio
button, submit button, and more.The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Note: The form itself is not visible. Also note that the default width of a text field is
20 characters.
Password Field
<form>
Password: <input type="password" name="pwd" />
</form>
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY
ONE one of a limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Male
Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or
MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
I have a bike
I have a car
Submit Button
A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input:
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the
browser will send your input to a page called "html_form_action.asp". The page will
show you the received input.
Tag Description
<form> Defines an HTML form for user input
<input /> Defines an input control
<textarea> Defines a multi-line text input control
<label> Defines a label for an input element
<fieldset> Defines a border around elements in a form
<legend> Defines a caption for a fieldset element
<select> Defines a select list (drop-down list)
<optgroup> Defines a group of related options in a select list
<option> Defines an option in a select list
<button> Defines a push button
With frames, you can display more than one HTML document in the same browser
window. Each HTML document is called a frame, and each frame is independent of
the others.
The frameset element holds two or more frame elements. Each frame element holds a
separate document.The frameset element states only HOW MANY columns or rows
there will be in the frameset.
The <frame> tag defines one particular window (frame) within a frameset.In the
example below we have a frameset with two columns.
The first column is set to 25% of the width of the browser window. The second
column is set to 75% of the width of the browser window. The document
"frame_a.htm" is put into the first column, and the document "frame_b.htm" is put
into the second column:
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>
Navigation frame
How to make a navigation frame. The navigation frame contains a list of links with
the second frame as the target. The file called "tryhtml_contents.htm" contains three
links. The source code of the links:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>
The second frame will show the linked document.
Tag Description
<frameset> Defines a set of frames
<frame /> Defines a sub window (a frame)
<noframes> Defines a noframe section for browsers that do not handle frames
<iframe> Defines an inline sub window (frame)
Elements
HTML documents are composed entirely of HTML elements that, in their most
general form have three components: a pair of element tags, a "start tag" and "end
tag"; some element attributes within the start tag; and finally, any textual and
graphical content between the start and end tags. The HTML element is everything
between and including the tags. Each tag is enclosed in angle brackets.
Element examples
<head>
<title>The title</title>
</head>
Headings: HTML headings are defined with the <h1> to <h6> tags:
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
Paragraphs:
Line breaks:<br>. The difference between <br> and <p> is that 'br' breaks a line
without altering the semantic structure of the page, whereas 'p' sections the page into
Comments:
Comments can help understanding of the markup and do not display in the webpage.
Attributes
Most of the attributes of an element are name-value pairs, separated by "=" and
written within the start tag of an element after the element's name. The value may be
enclosed in single or double quotes, although values consisting of certain characters
can be left unquoted in HTML (but not XHTML) Leaving attribute values unquoted is
considered unsafe. In contrast with name-value pair attributes, there are some
attributes that affect the element simply by their presence in the start tag of the
element, like the ismap attribute for the img element.[46]
There are several common attributes that may appear in many elements:
The abbreviation element, abbr, can be used to demonstrate some of these attributes:
This example displays as HTML; in most browsers, pointing the cursor at the
abbreviation should display the title text "Hypertext Markup Language."Most
elements also take the language-related attribute dir to specify text direction, such as
with "rtl" for right-to-left text in, for example, Arabic, Persian or Hebrew.
As of version 4.0, HTML defines a set of 252 character entity references and a set of
1,114,050 numeric character references, both of which allow individual characters to
be written via simple markup, rather than literally. A literal character and its markup
counterpart are considered equivalent and are rendered identically.
Escaping also allows for characters that are not easily typed, or that are not available
in the document's character encoding, to be represented within element and attribute
content. For example, the acute-accented e (é), a character typically found only on
Western European keyboards, can be written in any HTML document as the entity
reference é or as the numeric references é or é, using characters
that are available on all keyboards and are supported in all character encodings.
Unicode character encodings such as UTF-8 are compatible with all modern browsers
and allow direct access to almost all the characters of the world's writing systems.[49]
Data types
HTML defines several data types for element content, such as script data and
stylesheet data, and a plethora of types for attribute values, including IDs, names,
URIs, numbers, units of length, languages, media descriptors, colors, character
encodings, dates and times, and so on. All of these data types are specializations of
character data.
The original purpose of the doctype was to enable parsing and validation of HTML
documents by SGML tools based on the Document Type Definition (DTD). The DTD
to which the DOCTYPE refers contains a machine-readable grammar specifying the
permitted and prohibited content for a document conforming to such a DTD.
Browsers, on the other hand, do not implement HTML as an application of SGML
and by consequence do not read the DTD. HTML 5 does not define a DTD, because
of the technology's inherent limitations, so in HTML 5 the doctype declaration,
<!doctype html>, does not refer to a DTD.
This declaration references the DTD for the 'strict' version of HTML 4.01. SGML-
based validators read the DTD in order to properly parse the document and to perform
validation. In modern browsers, a valid doctype activates standards mode as opposed
to quirks mode.
Semantic HTML
Semantic HTML is a way of writing HTML that emphasizes the meaning of the
encoded information over its presentation (look). HTML has included semantic
markup from its inception,[50] but has also included presentational markup such as
<font>, <i> and <center> tags. There are also the semantically neutral span and div
tags. Since the late 1990s when Cascading Style Sheets were beginning to work in
most browsers, web authors have been encouraged to avoid the use of presentational
HTML markup with a view to the separation of presentation and content.
An important type of web agent that does trawl and read web pages automatically,
without prior knowledge of what it might find, is the Web crawler or search-engine
spider. These software agents are dependent on the semantic clarity of web pages they
find as they use various techniques and algorithms to read and index millions of web
pages a day and provide web users with search facilities without which the World
Wide Web would be only a fraction of its current usefulness.In order for search-
engine spiders to be able to rate the significance of pieces of text they find in HTML
documents, and also for those creating mashups and other hybrids as well as for more
automated agents as they are developed, the semantic structures that exist in HTML
need to be widely and uniformly applied to bring out the meaning of published
text.[53]
Delivery
HTML documents can be delivered by the same means as any other computer file.
However, they are most often delivered either by HTTP from a web server or by
email.
HTTP
The World Wide Web is composed primarily of HTML documents transmitted from
web servers to web browsers using the Hypertext Transfer Protocol (HTTP). However,
HTTP is used to serve images, sound, and other content, in addition to HTML. To
allow the Web browser to know how to handle each document it receives, other
information is transmitted along with the document. This meta data usually includes
the MIME type (e.g. text/html or application/xhtml+xml) and the character
encoding (see Character encoding in HTML).In modern browsers, the MIME type
that is sent with the HTML document may affect how the document is initially
interpreted. A document sent with the XHTML MIME type is expected to be well-
formed XML; syntax errors may cause the browser to fail to render it. The same
document sent with the HTML MIME type might be displayed successfully, since
some browsers are more lenient with HTML.
The W3C recommendations state that XHTML 1.0 documents that follow guidelines
set forth in the recommendation's Appendix C may be labeled with either MIME
HTML e-mail
Main article: HTML email
Most graphical email clients allow the use of a subset of HTML (often ill-defined) to
provide formatting and semantic markup not available with plain text. This may
include typographic information like coloured headings, emphasized and quoted text,
inline images and diagrams. Many such clients include both a GUI editor for
composing HTML e-mail messages and a rendering engine for displaying them. Use
of HTML in e-mail is controversial because of compatibility issues, because it can
help disguise phishing attacks, because it can confuse spam filters and because the
message size is larger than plain text.
Naming conventions
The most common filename extension for files containing HTML is .html. A
common abbreviation of this is .htm, which originated because some early operating
systems and file systems, such as DOS and FAT, limited file extensions to three
letters.
HTML Application
One difference in the latest HTML specifications lies in the distinction between the
SGML-based specification and the XML-based specification. The XML-based
specification is usually called XHTML to distinguish it clearly from the more
traditional definition. However, the root element name continues to be 'html' even in
the XHTML-specified HTML. The W3C intended XHTML 1.0 to be identical to
HTML 4.01 except where limitations of XML over the more complex SGML require
workarounds. Because XHTML and HTML are closely related, they are sometimes
documented in parallel. In such circumstances, some authors conflate the two names
as (X)HTML or X(HTML).
Like HTML 4.01, XHTML 1.0 has three sub-specifications: strict, loose and
frameset.Aside from the different opening declarations for a document, the
A fix for this is to include a space before closing the tag, as such: <br />.To
understand the subtle differences between HTML and XHTML, consider the
transformation of a valid and well-formed XHTML 1.0 document that adheres to
Appendix C (see below) into a valid HTML 4.01 document. To make this translation
requires the following steps:
Those are the main changes necessary to translate a document from XHTML 1.0 to
HTML 4.01. To translate from HTML to XHTML would also require the addition of
any omitted opening or closing tags. Whether coding in HTML or XHTML it may
just be best to always include the optional tags within an HTML document rather than
remembering which tags can be omitted.