UNIT – I

WEB FUNDAMENTALS

1.1 History of Web

Sir Tim Berners-Lee is a British computer scientist. He was born in London, and his parents were
early computer scientists, working on one of the earliest computers.

After graduating from Oxford University, Berners-Lee became a software engineer at CERN, the
large particle physics laboratory near Geneva, Switzerland. Scientists come from all over the world
to use its accelerators, but Sir Tim noticed that they were having difficulty sharing information.

In those days, there was different information on different computers, but you had to log on to
different computers to get at it. Also, sometimes you had to learn a different program on each
computer.

Tim thought he saw a way to solve this problem – one that he could see could also have much
broader applications. Already, millions of computers were being connected together through the
fast-developing internet and Berners-Lee realized they could share information by exploiting an
emerging technology called hypertext.

In March 1989, Tim laid out his vision for what would become the web in a document called
“Information Management: A Proposal”.

By October of 1990, Tim had written the three fundamental technologies that remain the foundation
of today’s web (and which you may have seen appear on parts of your web browser):

HTML: HyperText Markup Language. The markup (formatting) language for the web.

URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each
resource on the web. It is also commonly called a URL.

HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the web.

Tim also wrote the first web page editor/browser (“WorldWideWeb.app”) and the first web server
(“httpd“). By the end of 1990, the first web page was served on the open internet, and in 1991,
people outside of CERN were invited to join this new web community.

As the web began to grow, Tim realized that its true potential would only be unleashed if anyone,
anywhere could use it without paying a fee or having to ask for permission.

Tim moved from CERN to the Massachusetts Institute of Technology in 1994 to found the World
Wide Web Consortium (W3C), an international community devoted to developing open web
standards. He remains the Director of W3C to this day.

Decentralisation: No permission is needed from a central authority to post anything on the web,
there is no central controlling node, and so no single point of failure … and no “kill switch”! This also
implies freedom from indiscriminate censorship and surveillance.
Non-discrimination: If I pay to connect to the internet with a certain quality of service, and you pay
to connect with that or a greater quality of service, then we can both communicate at the same level.
This principle of equity is also known as Net Neutrality.
Bottom-up design: Instead of code being written and controlled by a small group of experts, it was
developed in full view of everyone, encouraging maximum participation and experimentation.

Universality: For anyone to be able to publish anything on the web, all the computers involved have
to speak the same languages to each other, no matter what different hardware people are using;
where they live; or what cultural and political beliefs they have. In this way, the web breaks down
silos while still allowing diversity to flourish.

Consensus: For universal standards to work, everyone had to agree to use them. Tim and others
achieved this consensus by giving everyone a say in creating the standards, through a transparent,
participatory process at W3C.

In 2009, Sir Tim established the World Wide Web Foundation. The Web Foundation is advancing
the Open Web as a means to build a just and thriving society by connecting everyone, raising voices
and enhancing participation.
Evolution of the web
1.2 Protocols
A protocol is a set of rules that govern all aspects of communication between two or more partners,
called peers
– These rules are human-made; not like chemistry or physics!

The purpose of a protocol is to provide a specific communication service.

In the networking and communications area, a protocol is the formal specification that defines the
procedures that must be followed when transmitting or receiving data.

Protocols define the format, timing, sequence, and error checking used on the network.

In plain english, the above means that if you have 2 or more devices e.g computers which want to
communicate, then they need a common "Protocol" which is a set of rules that guide the computers
on how and when to talk to each other.

Relevant Standards Bodies

• ISO (www.iso.org)
– An agency of the United Nations.
– Collaborates standards development for information technology.
• ITU (www.itu.int)
– UN treaty agency that sets telecommunications standards.
– ITU-T (Telecommunications section)
• ANSI (www.ansi.org)
– American National Standards Institute: the US national standards body.
– Coordinates and accredits standards development across the US.
• IEEE (www.ieee.org)
– US based international professional organization.
– Among other things, develops standards.
• IETF / IRTF
– Internet Engineering Task Force (www.ietf.org)
– Internet Research Task Force (www.irtf.org)
• EIA (www.eia.org)
– Electronic Industries Alliance
– E.g.; standards for wiring and interconnection
The table below shows the most popular TCP/IP protocols. The OSI model is there for you to see
which layer each of these protocols work at.
Transmission Control Protocol (TCP)
TCP is a connection oriented protocol and offers end-to-end packet delivery. It acts as back bone
for connection.It exhibits the following key features:
 Transmission Control Protocol (TCP) corresponds to the Transport Layer of OSI Model.
 TCP is a reliable and connection oriented protocol.
 TCP offers:
 Stream Data Transfer.
 Reliability.
 Efficient Flow Control
 Full-duplex operation.
 Multiplexing.
 TCP offers connection oriented end-to-end packet delivery.
 TCP ensures reliability by sequencing bytes with a forwarding acknowledgement number
that indicates to the destination the next byte the source expect to receive.
 It retransmits the bytes not acknowledged with in specified time period.
TCP Services
TCP offers following services to the processes at the application layer:
 Stream Delivery Service
 Sending and Receiving Buffers
 Bytes and Segments
 Full Duplex Service
 Connection Oriented Service
 Reliable Service

Internet Protocol (IP)

Internet Protocol is connectionless and unreliable protocol. It ensures no guarantee of successfully
transmission of data.

In order to make it reliable, it must be paired with reliable protocol such as TCP at the transport layer.

Internet protocol transmits the data in form of a datagram as shown in the following diagram:

 The length of datagram is variable.

 The Datagram is divided into two parts: header and data.
 The length of header is 20 to 60 bytes.
 The header contains information for routing and delivery of the packet.
User Datagram Protocol (UDP)
Like IP, UDP is connectionless and unreliable protocol. It doesn’t require making a connection with the
host to exchange data. Since UDP is unreliable protocol, there is no mechanism for ensuring that data
sent is received.
UDP transmits the data in form of a datagram. The UDP datagram consists of five parts as shown in the
following diagram:

 UDP is used by the application that typically transmit small amount of data at one time.
 UDP provides protocol port used i.e. UDP message contains both source and destination port
number, that makes it possible for UDP software at the destination to deliver the message to
correct application program.

File Transfer Protocol (FTP)

FTP is used to copy files from one host to another. FTP offers the mechanism for the same in following
manner:
 FTP creates two processes such as Control Process and Data Transfer Process at both ends i.e.
at client as well as at server.
 FTP establishes two different connections: one is for data transfer and other is for control
information.
 Control connection is made between control processes while Data Connection is made
between<="" b="" style="box-sizing: border-box;">
 FTP uses port 21 for the control connection and Port 20 for the data connection.

Trivial File Transfer Protocol (TFTP)

Trivial File Transfer Protocol is also used to transfer the files but it transfers the files without
authentication. Unlike FTP, TFTP does not separate control and data information. Since there is no
authentication exists, TFTP lacks in security features therefore it is not recommended to use TFTP.
 TFTP makes use of UDP for data transport. Each TFTP message is carried in separate UDP
datagram.
 The first two bytes of a TFTP message specify the type of message.
 The TFTP session is initiated when a TFTP client sends a request to upload or download a file.
 The request is sent from an ephemeral UDP port to the UDP port 69 of an TFTP server.
Difference between FTP and TFTP
S.N. Parameter FTP TFTP

1 Operation Transferring Files Transferring Files

2 Authentication Yes No

3 Protocol TCP UDP

 4 Ports 21 – Control, 20 – Data Port 3214, 69, 4012

5 Control and Data Separated Not Separated

6 Data Transfer Reliable Unreliable

Telnet
Telnet is a protocol used to log in to remote computer on the internet. There are a number of Telnet
clients having user friendly user interface. The following diagram shows a person is logged in to
computer A, and from there, he remote logged into computer B.

Hyper Text Transfer Protocol (HTTP)

HTTP is a communication protocol. It defines mechanism for communication between browser and
the web server. It is also called request and response protocol because the communication between
browser and server takes place in request and response pairs.
HTTP Request
HTTP request comprises of lines which contains:
 Request line
 Header Fields
 Message body
Key Points
 The first line i.e. the Request line specifies the request method i.e. Get or Post.
 The second line specifies the header which indicates the domain name of the server from where
index.htm is retrieved.
HTTP Response
Like HTTP request, HTTP response also has certain structure. HTTP response contains:
 Status line
 Headers
 Message body
 1.3 Web Applications
A web application is a program that runs on a computer with a web server, while its users interact
with it via a web browser or similar user agent.
Example
Gmail is a webapp. All users need is a web browser. They login, create and organize filters, read
messages, reply, forward, send, and delete, and logout. Messages exist in a database on the server,
as does all the code to generate pages. Of course the "pages" include a fair number of scripts that the
browser knows how to execute, but note that these scripts are kept on the server and downloaded
on demand.
Basic Architecture

Generation of Web Applications

First Generation Web Applications
First generation web applications were page oriented. We would include all GUI logic and application
logic inside the same web page.
 The web page would be a script which was executed by the web server, when
requested by the browser.
 GUI logic and application logic were mixed up inside the same page script. Here is an illustration
of this architecture and design

 Being page oriented every action the application allowed was typically embedded in its own web
page script.
 Each script was like a separate transaction which executed the application logic, and generated
the GUI to be sent back to the browser after the application logic was executed.
 The GUI was pretty dumb. The browser showed a page.
 When the user clicked something in the page, the browser was typically redirected to a new page
(script).
 First generation web page technologies include Servlets (Java), JSP (JavaServer Pages), ASP, PHP
and CGI scripts in Perl etc.
 GUI logic and application logic was interleaved, making it hard to locate either one when we
needed to make changes to either the GUI or application logic.
 Code reuse was low, because the code was spread over a large amount of web page scripts
  GUI state (like pressed down buttons) which had to be maintained across multiple pages, had to
be kept either in the session data on the server, or be sent along to each page and back to the
browser again.
 If we wanted to change the programming language of the web page scripts (like from PHP to Java
Server Pages (JSP)), that would often require a complete rewrite of the web application. It was a
nightmare.

Second Generation Web Applications

 In second generation web applications developers found ways to separate the GUI logic from the
application logic on the server.
 Web applications also became more object oriented than they had been when the code was
spread over multiple pages.
 Often, web page scripts were used for the GUI logic, and real classes and object were used for the
application logic.

 Frameworks were developed to help make second generation web applications easier to
develop. Examples of such frameworks are ASP.NET (.NET), Struts + Struts 2 (Java), Spring MVC
(Java), JSF (JavaServer Faces), Wicket (Java) Tapestry (Java) and many others.
 In the Java community two types of framework designs emerged.
 Second generation web applications were easier to develop than first generation web applications,
but they still had some problems.
 Despite the better separation of GUI and application logic, the two domains still often got
intertwined in each other. Also, since the GUI logic was written in the same language as the
application logic, changing the programming language meant rewriting the whole application
again.
 Additionally, due to the limits of second generation web application technologies, the GUIs
developed were often more primitive than what people were used to from desktop applications.
RIA Web Applications
 RIA (Rich Internet Applications) web applications are the third generation of web applications.
 RIA web applications were first and foremost known for having a user interface that looked
much closer to desktop applications.
 To achieve these more advanced user interfaces, RIA technologies are typically executed in the
browser using either JavaScript, Flash, JavaFX or Silverlight.

As we can see, the GUI logic is now moved from the web server to the browser.
 This complete split from the server logic has some positive and negative consequences for the
design and architecture of the application.
 First of all, the GUIs can become much more advanced with RIA technologies. That by itself is an
advantage.
 Second, because the GUI logic is executed in the browser, the CPU time needed to generate the
GUI is lifted off the server, freeing up more CPU cycles for executing application logic.
 Third, GUI state can be kept in the browser, thus further cleaning up the server side of RIA web
applications.
 Fourth, the GUI logic completely separated from the application logic, it becomes easier to
develop reusable GUI components, which can be reused no matter what server side
programming language is used for the application logic.
 Fifth, RIA technologies typically communicate with the web server by exchanging data, not GUI
code (HTML, CSS and JavaScript). The data exchange is typically XML sent via HTTP, or JSON sent
via HTTP. This changes the server side from being "pages" to being "services" that perform some
part of the application logic (create user, login, store task etc.).
 Sixth, the GUI and application logic on the server typically communicate via HTTP + JSON, or
HTTP + XML, the GUI is 100% independent of programming language that is used on the server.
The GUI logic's interface to the server is just HTTP calls.
 Seventh, GUI logic and application logic are completely separated, and the only interface
between them is HTTP + JSON / XML, the GUI and application logic can also be developed
independently of each other. The application logic developer can implement the services and
test them independently of the GUI.
 Eighth, because the back end just consists of services that send and receive data, it is much easier
add a different type of client in the future, if needed. For instance, we might want to add a native
mobile iOS or Android application client, which also interacts with your back end services.
 Ninth, the back end now consist of simple services receiving and sending data, our web
application is naturally prepared for the "open application" trend, where web applications can
be accessed both via a GUI and via an API (in case your users need to write a program to interact
with your web application).
  Tenth, the GUI and back end services only exchange data, the traffic load is often smaller than if
the back end had to send the data and HTML, CSS and JavaScript.

RIA Technologies
Here is a list of a few well-known RIA technologies:
HTML5 + CSS3 + JavaScript + JavaScript frameworks
 jQuery
 jQuery Mobile
 AngularJS
 Sencha EXT-JS
 SmartClient
 D3
 Dart
 GWT (Google Web Toolkit)
 JavaFX
 Flex (Flash)
 Silverlight

1.3 Web Servers

A Web server is a technology 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.

Web server is a computer where the web content is stored. Basically web server is used to host the
web sites but there exists other web servers also such as gaming, storage, FTP, email etc.

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 ). A website, also written as web site, or simply site, is a set of related web pages typically
served from a single web domain.Web server" can refer to hardware or software, or both of them
working together.

1. On the hardware side, a web server is a computer that stores a website's component files (e.g. HTML
documents, images, CSS stylesheets, and JavaScript files) and delivers them to the end-user's device. It
is connected to the Internet and can be accessed through a domain name like mozilla.org.

2. On the software side, a web server includes several parts that control how web users access hosted
files, at minimum an HTTP server. An HTTP server is a piece of software that understands URLs (web
addresses) and HTTP (the protocol our browser uses to view webpages).

HTTP. To publish a website, we need either a static or a dynamic web server.

A static web server, or stack, consists of a computer (hardware) with an HTTP server (software). We
call it "static" because the server sends its hosted files "as-is" to our browser.

A dynamic web server consists of a static web server plus extra software, most commonly an
application server and a database. We call it "dynamic" because the application server updates the
hosted files before sending them to your browser via the HTTP server.

Web Server Working

Web server respond to the client request in either of the following two ways:
 Sending the file to the client associated with the requested URL.
 Generating response by invoking a script and communicating with database

 When client sends request for a web page, the web server search for the requested page if
requested page is found then it will send it to client with an HTTP response.
  If the requested web page is not found, web server will the send an HTTP response:Error 404
Not found.
 If client has requested for some other resources then the web server will contact to the
application server and data store to construct the HTTP response.
Architecture
Web Server Architecture follows the following two approaches:
1. Concurrent Approach
2. Single-Process-Event-Driven Approach.
Concurrent Approach
Concurrent approach allows the web server to handle multiple client requests at the same time. It
can be achieved by following methods:
 Multi-process
 Multi-threaded
 Hybrid method.
Multi-processing
In this a single process (parent process) initiates several single-threaded child processes and
distribute incoming requests to these child processes. Each of the child processes are responsible
for handling single request.
It is the responsibility of parent process to monitor the load and decide if processes should be killed
or forked.
Multi-threaded
Unlike Multi-process, it creates multiple single-threaded process.
Hybrid
It is combination of above two approaches. In this approach multiple process are created and each
process initiates multiple threads. Each of the threads handles one connection. Using multiple
threads in single process results in less load on system resources.
Examples
Apache HTTP Server
Internet Information Services (IIS)
Lighttpd
Sun Java System Web Server
Jigsaw Server

1.4 Web Browser

web Browser is an application software that allows us to view and explore information on the web.
User can request for any web page by just entering a URL into address bar.

Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser
to interpret text and commands contained in the web page.

Earlier the web browsers were text-based while now a days graphical-based or voice-based web
browsers are also available. Following are the most common web browser available today:

A Web browser acts as an interface between the user and Web server
• Software application that resides on a computer and is used to locate and display Web pages.
• Web user access information from web servers, through a client program called browser.

FEATURES
•All major web browsers allow the user to open multiple information resources at the same time,
either in different browser windows or in different tabs of the same window

• A refresh and stop buttons for refreshing and stopping the loading of current documents
• Home button that gets you to your home page

• Major browsers also include pop-up blockers to prevent unwanted windows from "popping
up" without the user's consent

Most browsers support HTTP Secure and offer quick and easy ways to delete the web cache, cookies.
and browsing history. For a comparison of the current security vulnerabilities of browsers, see
comparison of web browsers.

The primary purpose of a web browser is to bring information resources to the user , allowing them to
view the information and then access other information . This process begins when the user inputs a
Uniform Resource Locator (URL), for example http://www.wikipedia.org into the browser. The prefix
of the URL, the Uniform Resource Identifier or URI, determines how the URL will be interpreted.

The most commonly used kind of URI starts with http: and identifies a resource to be retrieved over the
Hypertext Transfer Protocol (HTTP)
Different types of web browser
Google chrome
 Internet explore
 Safari
 Opera
 Mozilla Firefox
 Many more

Architecture of web browser:

There are a lot of web browsers available in the market. All of them interpret and display information
on the screen however their capabilities and structure varies depending upon implementation. But the
most basic component that all web browsers must exhibit is listed below:

 Controller/Dispatcher

 Interpreter

 Client Programs

Controller works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it and
make other services to work on the basis of input it receives.

Interpreter receives the information from the controller and executes the instruction line by line.
Some interpreter is mandatory while some are optional For example, HTML interpreter program is
mandatory and java interpreter is optional.

Client Program describes the specific protocol that will be used to access a particular service.
Following are the clients programs that are commonly used:

 HTTP

 SMTP

 FTP

 NNTP

 POP
Web Browser Function:

1.5 HTTP
The Web is a massive distributed client/server information system.

Many applications are running concurrently over the Web, such as web browsing/surfing, e-mail, file
transfer, audio & video streaming, and so on. In order for proper communication to take place
between the client and the server, these applications must agree on a specific application-level
protocol such as HTTP, FTP, SMTP, POP, and etc.

HTTP stands for Hypertext Transfer Protocol. It's the network protocol used to deliver virtually all files
and other data (collectively called resources) on the World Wide Web, whether they're HTML files,
image files, query results, or anything else.

A browser is an HTTP client because it sends requests to an HTTP server (Web server), which then
sends responses back to the client. The standard (and default) port for HTTP servers to listen on is 80

HTTP is a stateless protocol. In other words, the current request does not know what has been done in
the previous requests.
HTTP is core request-response protocol for Web

• Four phases:

– Open connection: Based on URL

– Request: Client opens connection to server and sends:

• Request method, (and request data at bottom if POST or PUT request)

• URL,

• HTTP version number

• Header information (informational, optional), terminated with blank line

– Response: Server processes request and sends:

• HTTP protocol version and status code

• Header information, terminated by blank line

• Text (data)

– Close connection
• These transactions are stateless. The connection is closed after each page and re-established: Server
can’t connect successive requests from the client

• We use cookies and similar methods to simulate state

HTTP request phase (browser to server)

Command Description

GET Requests specified document (used to ‘post’ too)

HEAD Requests only header of specified document

POST Requests that server accept data from browser and generate
dynamic content

OPTIONS Get server and access options (OPTIONS *)

TRACE Used in debugging

PUT Replace server document with data from browser

DELETE Delete specified document on server

CONNECT Converts connection to tunnel, usually with SSL

PATCH Applies partial modification to resource

• GET is the most frequent request from browsers

• POST used for processing forms (dynamic pages and input forms)
• HEAD used to check that content exists

• TRACE for debugging

• PUT, DELETE used for REST (Web service) middleware

• CONNECT used in secure connections

Common HTTP request headers

Header Definition

Accept MIME types accepted by client (multiple allowed)

Connection Connection type for client (keep-alive, close)

Cookie Return previous cookie to server (session data)

From Email address of user (sent only by crawlers)

Host Original host requested (forward, multiple names)

If-Modified-Since Used to reduce fetching of docs client has

Referer URL from which this link was obtained

User-Agent Name and version of client software (browser)

HTTP response status codes

Status code Definition

100-102 Informational response; client should respond with some other action
(continue, new protocol) 200-207 Request was successful

300-307 Document has moved; indicate new address

400-499 Client error, such as unauthorized request

500-510 Server error Examples:

200 OK

404 Not found

505 HTTP version not supported

For example, the browser translated the URL http://www.nowhere123.com/doc/index.html into the
following request message:

GET /docs/index.html HTTP/1.1

Host: www.nowhere123.com
Accept: image/gif, image/jpeg, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
(blank line)

When this request message reaches the server, the server can take either one of these actions:
1. The server interprets the request received, maps the request into a file under the server's
document directory, and returns the file requested to the client.
2. The server interprets the request received, maps the request into a program kept in the server,
executes the program, and returns the output of the program to the client.
3. The request cannot be satisfied, the server returns an error message.
An example of the HTTP response message is as shown:
HTTP/1.1 200 OK
Date: Sun, 18 Oct 2009 08:56:53 GMT
Server: Apache/2.2.14 (Win32)
Last-Modified: Sat, 20 Nov 2004 07:16:26 GMT
ETag: "10000000565a5-2c-3e94b66c2e680"
Accept-Ranges: bytes
Content-Length: 44
Connection: close
Content-Type: text/html
X-Pad: avoid browser bug

<html><body><h1>It works!</h1></body></html>

The browser receives the response message, interprets the message and displays the contents of the
message on the browser's window according to the media type of the response (as in the Content-Type
response header). Common media type include "text/plain", "text/html", "image/gif", "image/jpeg",
"audio/mpeg", "video/mpeg", "application/msword", and "application/pdf".
In its idling state, an HTTP server does nothing but listening to the IP address(es) and port(s) specified
in the configuration for incoming request. When a request arrives, the server analyzes the message
header, applies rules specified in the configuration, and takes the appropriate action. The webmaster's
main control over the action of web server is via the configuration.
The network program shall first establish a TCP/IP connection with the server. Once the TCP
connection is established, we can issue the raw request.
A simple HTTP client

The following code uses Socket creates a HTTP client. We can create a HTTP client with URLConnection
or HttpURLConnection. This time we are using more low level api to create the HTTP client. From the
code below we can see that we have to send an HTTP request to the web server.

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.InetAddress;
import java.net.Socket;
//from j a v a 2 s . co m
public class Main {
public static void main(String[] args) throws Exception {
InetAddress addr = InetAddress.getByName("www.google.com");
Socket socket = new Socket(addr, 80);
boolean autoflush = true;
PrintWriter out = new PrintWriter(socket.getOutputStream(), autoflush);
BufferedReader in = new BufferedReader(

new InputStreamReader(socket.getInputStream()));
// send an HTTP request to the web server
out.println("GET / HTTP/1.1");
out.println("Host: www.google.com:80");
out.println("Connection: Close");
out.println();

// read the response

boolean loop = true;
StringBuilder sb = new StringBuilder(8096);
while (loop) {
if (in.ready()) {
int i = 0;
while (i != -1) {
i = in.read();
sb.append((char) i);
}
loop = false;
}
}
System.out.println(sb.toString());
socket.close();
}
}

The code above generates the following result.

HTTP/1.1 200 OK
Date: Sun, 07 Oct 2018 06:51:22 GMT
Server: Apache
Last-Modified: Fri, 26 Apr 2013 02:18:20 GMT
Accept-Ranges: bytes
Content-Length: 76
Vary: Accept-Encoding
Connection: close
Content-Type: text/html

<!-- pageok -->

<!-- managed by puppet -->
<html>
<pre>pageok</pre>
</html>

1.6 HTML Basics

What is an html File?

HTML is a format that tells a computer how to display a web page. The documents themselves are
plain text files with special "tags" or codes that a web browser uses to interpret and display
information on your computer screen.

 HTML stands for Hyper Text Markup Language

 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page An HTML file must have an
htm or html file extension

Try It?
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b> </body>
</html>

Save the file as mypage.html.

Start your Internet browser.
Select Open (or Open Page) in the File menu of your browser.
A dialog box will appear.
Select Browse (or Choose File) and locate the html file you just created - mypage.html - select it and
click Open.
Now you should see an address in the
dialog box, for example C:\MyDocuments\mypage.html.
Click OK, and the browser will display the page.
Example Explained

What you just made is a skeleton html document. This is the minimum required information for a web
document and all web documents should contain these basic components. The first tag in your html
document is <html>.This tag tells your browser that this is the start of an html document. The last tag
in your document is </html>.This tag tells your browser that this is the end of the html document.

The text between the <head>tag and the </head>tag is header information. Header information is not
displayed in the browser window.

The text between the <title>tags is the title of your document. The <title>tag is used to uniquely identify
each document and is also displayed in the title bar of the browser window.

The text between the <body>tags is the text that will be displayed in your browser.

The text between the <b>and </b>tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension
comes from the past when some of the commonly used software only allowed three letter extensions.
It is perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are
treated as different files by the browser.

How to View HTML Source

A good way to learn HTML is to look at how other people have coded their html pages. To find out,
simply click on the View option in your browsers toolbar and select Source or Page Source. This will
open a window that shows you the actual HTML of the page. Go ahead and view the source html for
this page.

HTML Tags

What are HTML tags?

 HTML tags are used to mark-up HTML elements
 HTML tags are surrounded by the two characters < and > The surrounding characters are
called angle brackets
 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. The text between the
start and end tags is the element content
 HTML tags are not case sensitive, <b> means the same as <B>

Logical vs. Physical Tags

In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the
browser) the enclosed text's meaning.
An example of a logical tag is the <strong> </strong>tag.
By placing text in between these tags you are telling the browser that the text has some greater
importance.
By default all browsers make the text appear bold when in between the <strong>and </strong>tags.

Physical tags on the other hand provide specific instructions on how to display the text they enclose.
Examples of physical tags include:
 <b>: Makes the text bold.
<big>: Makes the text usually one size bigger than what is around it. ƒ
<i>: Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not around, though
the original intention of HTML was to not have physical tags. Rather than use physical tags to style your
HTML pages, you should use style sheets.

HTML Elements
Remember the HTML example from the previous page:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b> </body>
</html>

This is an HTML element:

<b>This text is bold</b>

The HTML element begins with a start tag: <b>

The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

The purpose of the <b>tag is to define an HTML element that should be displayed as bold.

This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold</b> </body>

This HTML element starts with the start tag <body>,and ends with the end tag </body>. The purpose of
the <body>tag is to define the HTML element that contains the body of the HTML document.

Nested Tags
You may have noticed in the example above, the <body>tag also contains other tags, like the <b>tab.
When you enclose an element in with multiple tags, the last tag opened should be the first tag closed.
For example:

<p><b><em>This is NOT the proper way to close nested tags.</p></em></b>

<p><b><em>This is the proper way to close nested tags. </em></b></p>

Note: It doesn't matter which tag is first, but they must be closed in the proper order.

Why Use Lowercase Tags?

You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive.
<B> means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for
developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML
(the next generation HTML) requires lowercase tags.

Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on
your page. The <tag>tells the browser to do something, while the attribute tells the browser how to
do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color
of your page should be blue, like this: <body bgcolor="blue">.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that
the table should have no borders: <table border="0">. Attributes always come in name/value pairs like
this: name="value". Attributes are always added to the start tag of an HTML element and the value is
surrounded by quotes.

Quote Styles, "red" or 'red'?

Attribute values should always be enclosed in quotes. Double style quotes are the most common, but
single style quotes are also allowed. In some rare situations, like when the attribute value itself
contains quotes, it is necessary to use single quotes:

name='George "machine Gun" Kelly'

Basic HTML Tags

The most important tags in HTML are tags that define headings, paragraphs and line breaks.

Basic HTML Tags

Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--> Defines a comment

Headings
Headings are defined with the <h1>to <h6>tags. <h1>defines the largest heading while <h6>defines
the smallest.

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>
<h5>This is a heading</h5>

<h6> This is a heading</h6>

HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is
align.
<h5 align="left">I can align headings </h5>

<h5 align="center">This is a centered heading </h5>

<h5 align="right">This is a heading aligned to the right </h5>

Paragraphs
Paragraphs are defined with the <p>tag. Think of a paragraph as a block of text. You can use the align
attribute with a paragraph tag as well.

<p align="left">This is a paragraph</p>

<p align="center">this is another paragraph</p>

Important: You must indicate paragraphs with <p> elements. A browser ignores any
indentations or blank lines in the source text. Without <p>elements, the document becomes one
large paragraph. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br>tag is used when you want to start a new line, but don't want to start a new paragraph. The
<br>tag forces a line break wherever you place it. It is similar to single spacing in a document.

This Code Would Display

This
<p>This <br> is a para<br> graph with line
is a para
breaks</p>
graph with line breaks

The <br>tag has no closing tag.

Horizontal Rule
The <hr>element is used for horizontal rules that act as dividers between sections, like this:

The horizontal rule does not have a closing tag. It takes attributes such as align and width. For
instance:

This Code Would Display

<hr width="50%" align="center">

Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment can be placed
anywhere in the document and the browser will ignore everything inside the brackets. You can use
comments to write notes to yourself, or write a helpful message to someone looking at your source
code.

This Code Would Display

<p> This html comment would <!-- This is a This HTML comment would be displayed like
comment --> be displayed like this.</p> this.

Notice you don't see the text between the tags <!--and -->. If you look at the source code, you would
see the comment. To view the source code for this page, in your browser window, select View and
then select Source.
Note: You need an exclamation point after the opening bracket <!--but not before the closing
bracket -->.

HTML automatically adds an extra blank line before and after some elements, like before and after a
paragraph, and before and after a heading. If you want to insert blank lines into your document, use
the <br>tag.

Try It Out!
Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br> which I am of
course.</p>
</body
>
</html>

Save the page as mypage2.html. Open the file in your Internet browser. To view how the page
should look, visit this web page: http://profdevtrain.austincc.edu/html/mypage2.html

Other HTML Tags

As mentioned before, there are logical styles that describe what the text should be and physical styles
which actually provide physical formatting. It is recommended to use the logical tags and use style
sheets to style the text in those tags.

Logical Tags <cite> Defines a citation

<code> Defines computer codetext
Tag Description
<blockquote> Defines a long quotation
<abbr> Defines an abbreviation
<del> Defines text
<acronym> Defines an acronym
<dfn> Defines a definition term
<address> Defines an address element
<em> Defines emphasized text Physical Tags
<ins> Defines inserted text
<kbd> Defines keyboard text Tag Description
<pre> Defines preformatted text <b> Defines bold text
<q> Defines a short quotation <big> Defines big text
<samp> Defines sample computer code
<i> Defines italic text
<strong> Defines strong text
<small> Defines small text
<var> Defines a variable
<sup> Defines superscripted text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead

Character tags like <strong>and <em>produce the same physical display as <b>and <i>but are more
uniformly supported across different browsers.
Some Examples:
The following paragraph uses the <blockquote>tag. In the previous sentence, the blockquote tag is
enclosed in the <samp>Sample tag.

We the people of the United States, in order to form a more perfect Union, establish Justice, insure
domestic Tranquility, provide for the common defense, promote the general Welfare, and secure
the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution
for the United States of America.

Although most browsers render blockquoted text by indenting it, that's not specifically what it's
designed to do. It's conceivable that some future browser may render blockquoted text in some other
way. However, for the time being, it is perfectly safe to indent blocks of text with the <blockquote>.

This Code Would Display

<abbr title="World Wide Web">WWW</abbr> WWW

When you hold your mouse pointer over the WWW, text in the title attribute will appear in.

HTML Character Entities

Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of
an HTML tag. If we want the browser to actually display these characters we must insert character
entities in place of the actual characters themselves.

The Most Common Character Entities:

Result Description Entity Name Entity Number

non-breaking &nbsp; &#160;
space
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; (does not work in IE) &#39;

A character entity has three parts: an ampersand (&), an entity name or an entity number, and finally a
semicolon (;). The & means we are beginning a special character, the ; means ending a special character
and the letters in between are sort of an abbreviation for what it's for. To display a less than sign in an
HTML document we must write: &lt; or &#60; The advantage of using a name instead of a number is
that a name is easier to remember. The disadvantage is that not all browsers support the newest entity
names, while the support for entity numbers is very good in almost all browsers.

Note: Entities are case sensitive.

Non-breaking Space
The most common character entity in HTML is the non-breaking space &nbsp;. Normally HTML will
truncate spaces in your text. If you add 10 spaces in your text, HTML will remove 9 of them. To add
spaces to your text, use the &nbsp; character entity.

This Code Would Display

<p> This code would appear as This code would appear as this.
this.</p>

This Code Would Display

<p> This code &nbsp;&nbsp;&nbsp; would This code would appear with three extra
appear with three extra spaces.</p> spaces.

HTML Fonts

The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C) has removed the
<font>tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to
define the layout and display properties of HTML elements.

The <font>Tag Should NOT be used.

HTML Backgrounds
Backgrounds
The <body>tag has two attributes where you can specify backgrounds. The background can be a color
or an image.

Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be
a hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

The lines above all set the background-color to black.

Background
The background attribute can also specify a background-image for an HTML page. The value of this
attribute is the URL of the image you want to use. If the image is smaller than the browser window,
the image will repeat itself until it fills the entire browser window.

<body background="clouds.gif">
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif">

The URL can be relative (as in the first line above) or absolute (as in the second line above). If
you want to use a background image, you should keep in mind:

Will the background image increase the loading time too much?
Will the background image look good with other images on the page?
Will the background image look good with the text colors on the page? Will
the background image look good when it is repeated on the page? Will the
background image take away the focus from the text?
 Note: The bgcolor, background, and the text attributes in the <body> tag are deprecated in the
latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has
removed these attributes from its recommendations. Style sheets (CSS) should be used instead
(to define the layout and display properties of HTML elements).

Try It Out!
Open your text editor and type the following text:
<html>
<head>
<title>My First Webpage</title>
</head>
<body background="http://profdevtrain.austincc.edu/html/graphics/clouds.gif"
bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and
plain old html.</p>
<p>By learning html, I'll be able to create webpages like a <del>beginner</del> pro....<br>
which I am of course.</p>
</body>
</html>

Save your page as mypage3.html and view it in your browser. To view how the page should look,
visit this web page: http://profdevtrain.austincc.edu/html/mypage3.html
Notice we gave our page a background color as well as a background image. If for some reason the
web page is unable to find the picture, it will display our background color.

HTML Colors
Color Values
Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values
(RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255
(hex #FF). This table shows the result of combining red, green, and blue:

Color Color HEX Color RGB

#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192
#FFFFFF )
rgb(255,255,255
)
Color Names
A collection of color names is supported by most browsers. To view a table of color names that are
supported by most browsers visit this web page:
http://profdevtrain.austincc.edu/html/color_names.htm
 Note: Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all
other colors you should use the Color HEX value.

Color Color HEX Color Name

#F0F8FF AliceBlue
#FAEBD7 AntiqueWhite
#7FFFD4 Aquamarine
#000000 Black
#0000FF Blue
#8A2BE2 BlueViolet
#A52A2A Brown
Web Safe Colors
A few years ago, when most computers supported only 256 different colors, a list of 216 Web Safe Colors
was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system
used 40 different "reserved" fixed system colors (about 20 each). This 216 cross platform web safe color
palette was originally created to ensure that all computers would display all colors correctly when
running a 256 color palette. To view the 216 Cross Platform Colors visit this web page:
http://profdevtrain.austincc.edu/html/216.html

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million
different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least
16,384 different colors. To assist you in using color schemes, check out
http://wellstyled.com/tools/colorscheme2/index-en.html. This site lets you test different color
schemes for page backgrounds, text and links.

HTML Lists
HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).

Unordered Lists
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list
starts with the <ul>tag. Each list item starts with the <li>tag.

This Code Would Display

<ul>
<li>Coffee</li> ƒ Coffee ƒ
<li>Milk</li> Milk
</ul>
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts
with the <ol>tag. Each list item starts with the <li>tag.

This Code Would Display

<ol>
<li>Coffee</li> 1. Coffee
<li>Milk</li> 2. Milk
</ol>
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists
Definition lists consist of two parts: a term and a description. To mark up a definition list, you need
three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

This Code Would Display

<dl>
<dt>Cascading Style Sheets</dt> Cascading Style Sheets
<dd>Style sheets are used to provide Style sheets are used to provide
presentational suggestions for documents presentational suggestions for
marked up in HTML. documents marked up in HTML.
</dd
>
Inside a definition-list definition (the <dd>tag) you can put paragraphs, line breaks, images, links,
</dl>
other lists, etc
Try It Out
Open your text editor and type the following:

<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="#EDDD9E">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>first</strong> webpage. I am writing this page using a text editor and
plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br> which I am of
course.</p>
Here's what I've learned: <ul>
<li>How to use HTML tags</li>
<li>How to use HTML colors</li>
<li>How to create Lists</li> </ul>
</body>
</html>

Save your page as mypage4.html and view it in your browser. To see how your page should look visit
this web page: http://profdevtrain.austincc.edu/html/mypage4.html

HTML Links
HTML uses the <a>anchor tag to create a link to another document or web page.

The Anchor Tag and the Href Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a>tag is used to create an anchor to link from, the href attribute is used to tell the address of the
document or page we are linking to, and the words between the open and close of the anchor tag will
be displayed as a hyperlink.

This Code Would Display

<a href="http://www.austincc.edu/">Visit ACC!</a> Visit ACC!

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default, the link
will open in the current window. The code below will open the document in a new browser window:

<a href=http://www.austincc.edu/ target="_blank">Visit ACC!</a>

Email Links
To create an email link, you will use mailto: plus your email address. Here is a link to ACC's Help Desk:

<a href="mailto:helpdesk@austincc.edu">Email Help Desk</a>

To add a subject for the email message, you would add ?subject=after the email address. For
example:

<a href="mailto:helpdesk@austincc.edu?subject=Email Assistance">Email Help Desk</a>

The Anchor Tag and the Name Attribute
The name attribute is used to create a named anchor. When using named anchors we can create links
that can jump directly to a specific section on a page, instead of letting the user scroll around to find
what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the
appearance of the text (unless you set styles for that anchor) or indicate in any way that there is
anything special about the text. Below is the syntax of a named anchor:

<a name="top">Text to be displayed</a>

To link directly to the top section, add a # sign and the name of the anchor to the end of a URL, like
this:

This Code Would Display

<a href="http://profdevtrain.austincc.edu/html
/10links.html#top">Back to top of page </a> Back to top of page

A hyperlink to the top of the page from within the

file 10links.html will look like this:

<a href="#top">Back to top of page </a> Back to top of page

HTML Images
The Image Tag and the Src Attribute
The <img>tag is empty, which means that it contains attributes only and it has no closing tag. To
display an image on a page, you need to use the src attribute. Src stands for "source". The value of the
src attribute is the URL of the image you want to display on your page. The syntax of defining an image:

<img src="graphics/chef.gif">

Not only does the source attribute specify what image to use, but where the image is located. The
above image, graphics/chef.gif, means that the browser will look for the image name chef.gif in a
graphics folder in the same folder as the html document itself.
The browser puts the image where the image tag occurs in the document. If you put an image tag
between two paragraphs, the browser shows the first paragraph, then the image, and then the second
paragraph.

The Alt Attribute

The alt attribute is used to define an alternate text for an image. The value of the alt attribute
is author-defined text:

<img src="graphics/chef.gif" alt="Smiling Happy Chef ">

The alt attribute tells the reader what he or she is missing on a page if the browser can't load images.
The browser will then display the alternate text instead of the image. It is a good practice to include
the alt attribute for each image on a page, to improve the display and usefulness of your document
for people who have text-only browsers or use screen readers.

Image Dimensions
When you have an image, the browser usually figures out how big the image is all by itself. If you put
in the image dimensions in pixels however, the browser simply reserves a space for the image, then
loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without
dimensions, when it runs into an image, the browser has to pause loading the page, load the image,
then continue loading the page. The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

Open the file mypage2.html in your text editor and add code highlighted in bold:

<html>
<head>
<title>My First Webpage</title> </head>
<body>
<h1 align="center">My First Web page</h1>
<p>Welcome to my first webpage. I am writing this page using a text editor and plain old html.</p>
<p>By learning html, I'll be able to create web pages like a pro....<br>
which I am of course.</p>
<p><img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef"
align="center"></p>
<p align="center">This is my Chef</p>
</body>
</html>

Save your page as mypage5.html and view it in your browser.

Tables
Tables are defined with the <table>tag. A table is divided into rows (with the <tr>tag), and each row
is divided into data cells (with the <td>tag). The letters td stands for table data, which is the content
of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables,
etc.

This Code Would Display

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td> row 1, cell 1 row 1, cell 2
</tr> row 2, cell 1 row 2, cell 2
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Tables and the Border Attribute
To display a table with borders, you will use the border attribute.

This Code Would Display

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
and....
</table>
Open up your text editor. Type in your <html>, <head>and <body>tags. From here on I will only be
writing what goes between the <body>tags. Type in the following:

<table border="1">
<tr>
<td>Tables can be used to layout information</td>
<td>&nbsp; <img src="http://profdevtrain.austincc.edu/html/graphics/chef.gif"> &nbsp; </td>
</tr>
</table>

Save your page as mytable1.html and view it in your browser. To see how your page should look
visit this web page: http://profdevtrain.austincc.edu/html/mytable1.html

Headings in a Table
Headings in a table are defined with the <th>tag.

This code Would Display

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</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>Padding and Spacing
Cell
</table>
The <table>tag has two attributes known as cell spacing and cell padding. Here is a table example
without these properties. These properties may be used separately or together.

This Code Would Display

<table border="1">
<tr>
<td>some text</td>
<td>some text</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
Cell spacing is the pixel width between the individual data cells in the table (The thickness of the
</table>
lines making the table grid). The default is zero. If the border is set at 0, the cell spacing lines will
be invisible.

This Code Would Display

<table border="1" cellspacing="5"> <tr>
<td>some text</td>
<td>some text</td>
some text some text
</tr><tr> <td>some
text</td> <td>some some text some text
text</td> </tr>
</table>

Cell padding is the pixel space between the cell contents and the cell border. The default for this
property is also zero. This feature is not used often, but sometimes comes in handy when you have
your borders turned on and you want the contents to be away from the border a bit for easy viewing.
Cellpadding is invisible, even with the border property turned on. Cellpadding can be handled in a
style sheet.

This Code Would Display

<table border="1" cellpadding="10"> <tr>
<td>some text</td>
<td>some text</td>
</tr><tr> <td>some
text</td> <td>some
text</td> </tr>
</table>

Table Tags

Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table

Table Size

Table Width
The width attribute can be used to define the width of your table. It can be defined as a fixed width
or a relative width. A fixed table width is one where the width of the table is specified in pixels. For
example, this code, <table width="550">, will produce a table that is 550 pixels wide. A relative table
width is specified as a percentage of the width of the visitor's viewing window. Hence this code,
<table width="80%">, will produce a table that occupies 80 percent of the screen.

This table width is 250 pixels

This table width is 50%

There are arguments in favor of giving your tables a relative width because such table widths yield
pages that work regardless of the visitor's screen resolution. For example, a table width of 100% will
always span the entire width of the browser window whether the visitor has a 800x600 display or
a 1024x768 display (etc). Your visitor never needs to scroll horizontally to read your page,
something that is regarded by most people as being very annoying.

HTML Layout - Using Tables

One very common practice with HTML, is to use HTML tables to format the layout of an HTML
page.
A part of this page is formatted with two columns. As you can see on this page, there is a left
column and a right column. This text is displayed in the left column.

An HTML <table> is used to divide a part of this Web page into two columns. The trick is to use a
table without borders, and maybe a little extra cell-padding. No matter how much text you add to
this page, it will stay inside its column borders.

Let's put everything you've learned together to create a simple page. Open your text editor and type
the following text:

<html>
<head>
<title>My First Web Page </title>
</head>
<body>
<table width="90%" cellpadding="5" cellspacing="0" > <tr
bgcolor="#EDDD9E">
<td width="200" valign="top"><img src="graphics/contact.gif" width="100"
height="100"></td>
<td valign="top"><h1 align="right">Janet Doeson</h1> <h3
align="right">Technical Specialist</h3></td>
</tr>
<tr>
<td width="200">
<h3>Menu</h3>
<ul>
<li><a href="home.html">Home</a></li>
<li> <a href="faq.html">FAQ</a></li>
<li> <a href="contact.html">Contact</a></li>
<li> <a href="http://www.austincc.edu">Links</a> </li>
</ul></td>
<td valign="top"><h2 align="center">Welcome!</h2>
<p>Welcome to my first webpage. I created this webpage without the assistance of a webpage
editor. Just my little text editor and a keen understanding of html.</p>
<p>Look around. Notice I'm able to use paragraphs, lists and headings. You may not be able to
tell, but the layout is done with a table. I'm very clever. </p>
<blockquote>
<p>I always wanted to be somebody, but now I realize I should have been more
specific.</p>
<cite>Lily Tomlin </cite> </blockquote> </td> </tr>
</table>
<hr width="90%" align="left">
<address>
Janet Doeson<br> Technical
Specialist<br>
512.555.5555
</address>
<p>Contact me at <a href="mailto:jdoeson@acme.com">jdoeson@acme.com</a> </p>
</body
</html>

Save your page as mytable2.html and view it in your browser.

1.7 CSS

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files
 Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are
used, layout designs,variations in display for different devices and screen sizes as well as
a variety of other effects.
 CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the markup languages
HTML or XHTML.
Advantages of CSS
 CSS saves time
 Pages load faster
 Easy maintenance
 Superior styles to HTML
 Multiple Device Compatibility
 Global web standards

CSS Versions
 Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in
December 1996. This version describes the CSS language as well as a simple visual
formatting model for all the HTML tags.
 CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version
adds support for media-specific style sheets e.g. printers and aural devices,
downloadable fonts, element positioning and tables.
CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
  Value − Values are assigned to properties. For example, colorproperty can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
Selector { property: value }

Example
p{
color: red;
text-align: center;
}
You can define selectors in various simple ways based on your comfort.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings −

h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches
the name of any element type −

*{
color: #000000;
}

This rule renders the content of every element in our document in black.
The Descendant Selectors
Suppose you want to apply a style rule to a particular element only when it lies inside a
particular element. As given in the following example, style rule will apply to <em> element
only when it lies inside <ul> tag.

ul em {
color: #000000;
}

The Class Selectors

 You can define style rules based on the class attribute of the elements. All the elements having
that class will be formatted according to the defined rule.

.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to black in
our document. You can make it a bit more particular. For example −

h1.black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to given element. Consider the following example
−

<p class = "center bold">

This para will be styled by the classes center and bold.
</p>

The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having
that id will be formatted according to the defined rule.

#black {
color: #000000;
}

This rule renders the content in black for every element with id attribute set to black in our
document. You can make it a bit more particular. For example −

h1#black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendant
selectors, For example −

#black h2 {
color: #000000;
}
 In this example all level 2 headings will be displayed in black color when those headings will
lie with in tags having id attribute set to black.
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very
similar to descendants but have different functionality. Consider the following example −

body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of <body> element.
Other paragraphs put inside other elements like <div> or <td> would not have any effect of
this rule.
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma,
as given in the following example −

h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list
is irrelevant. All the elements in the selector will have the corresponding declarations applied
to them.
You can combine the various id selectors together as shown below −

#content, #footer, #supplement {

position: absolute;
left: 510px;
width: 200px;
}

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules to
combine multiple properties and corresponding values into a single block as defined in the
following example −

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
 text-transform: lowercase;
}

Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single
line or multiple lines. For better readability, we keep them in separate lines.
There are four ways to associate styles with your HTML document. Most commonly used methods
are inline CSS and External CSS.
Embedded CSS - The <style> Element
You can put your CSS rules into an HTML document using the <style> element. This tag is placed
inside the <head>...</head> tags. Rules defined using this syntax will be applied to all the elements
available in the document. Here is the generic syntax −

<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

It will produce the following result −

Attributes
Inline CSS - The style Attribute
You can use style attribute of any HTML element to define style rules. These rules will be applied to
that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes
Attribute Value Description

style style rules The value of style attribute is a combination of style

declarations separated by semicolon (;).
Example
Following is the example of inline CSS based on the above syntax −
 <html>
<head>
</head>

<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>

It will produce the following result −

External CSS - The <link> Element
The <link> element can be used to include an external stylesheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within
this text file and then you can include this file in any HTML document using <link> element.
Here is the generic syntax of including external CSS file −

<head>
<style>
body {
background-
color: linen;
}

h1 {
color: maroon;
margin-
left: 40px;
}
</style>
</head>
<head>
<link type = "text/css" href = "filename.css" />
</head>

Imported CSS - @import Rule

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is
the generic syntax of @import rule.

<head>
<@import "URL";
</head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −
 <head>
<@import url("URL");
</head>

Example
Following is the example showing you how to import a style sheet file into HTML document
−

<head>
@import "mystyle.css";
</head>

1.8 Java Network Programming:

The term network programming refers to writing programs that execute across multiple devices
(computers), in which the devices are all connected to each other using a network.

Socket Programming
Sockets provide the communication mechanism between two computers. A client program creates
a socket on its end of the communication and attempts to connect that socket to a server.

When the connection is made, the server creates a socket object on its end of the communication.
The client and the server can now communicate by writing to and reading from the socket.

The java.net.Socket class represents a socket, and the java.net.ServerSocket class provides a
mechanism for the server program to listen for clients and establish connections with them.

The following steps occur when establishing a TCP connection between two computers using
sockets −

 The server instantiates a ServerSocket object, denoting which port number communication
is to occur on.

 The server invokes the accept() method of the ServerSocket class. This method waits until a
client connects to the server on the given port.

 After the server is waiting, a client instantiates a Socket object, specifying the server name
and the port number to connect to.

 The Socket class attempts to connect the client to the specified server and the port number.
If communication is established, the client now has a Socket object capable of communicating
with the server.
  On the server side, the accept() method returns a reference to a new socket on the server that
is connected to the client's socket.

After the connections are established, communication can occur using I/O streams. Each socket has
both an OutputStream and an InputStream. The client's OutputStream is connected to the server's
InputStream, and the client's InputStream is connected to the server's OutputStream.

TCP is a two-way communication protocol, hence data can be sent across both streams at the same
time.

The client in socket programming must know two information:

1. IP Address of Server, and

2. Port number. A port number is a 16-bit unsigned integer, thus ranging from 0 to 65535.

Socket Class Constructors

Class
Socket()
public Socket(InetAddress address, int port)
public Socket(InetAddress host, int port,
boolean stream)
public Socket(InetAddress address, int port,
InetAddress localAddr, int local port)
public Socket(Proxy, proxy)
protected Socket(SocketImpl impl)
Description
Creates an unconnected socket, with the system-
default type of SocketImpl.
Creates a stream socket with specified IP address
to the specified port number.
Uses the DatagramSocket.
Creates a connection with specified remote address
and remote port.
Creates a connectionless socket specifying the type
of proxy.
Creates a connectionless Socket with a user-
specified SocketImpl.

ServerSocket Class Constructors

Class Description
ServerSocket() Creates an unbound server socket.
ServerSocket(int port)
ServerSocket(int port, int
backlog)
ServerSocket(int port, int
backlog, inetAddress bindAddrs)
Creates a server socket, bound to the specified port.
Creates a server socket, bound to the specified port, with
specified local port.
Creates a server socket, bound to specified port, listen backlog,
and IP address.

Example: Generating Request and Response in Client and server Application

// ClientDemo.java

import java.io.InputStream;
import java.io.DataInputStream;
import java.net.Socket;
public class ClientDemo
{
public static void main(String args[])
{
try
{
Socket s = new Socket("localhost", 7777);
InputStream in = s.getInputStream();
DataInputStream dis = new DataInputStream(in);
String msg = dis.readLine();
System.out.println("Server message is: "+ msg);
dis.close();
s.close();
}
catch(Exception e)
{
e.printStackTrace();
}
}
}
// ServerDemo.java

import java.io.OutputStream;
import java.io.DataOutputStream;
import java.net.Socket;
import java.net.ServerSocket;
public class ServerDemo
{
public static void main(String args[])
{
try
{
ServerSocket ss = new ServerSocket(7777);
System.out.println("Server is ready.");
Socket s = ss.accept();
System.out.println("COnnection created.");
System.out.println("Sent message to client.");
OutputStream out = s.getOutputStream();
DataOutputStream dos = new DataOutputStream(out);
dos.writeBytes("Welcome");
dos.close();
s.close();
ss.close();
}
catch(Exception e)
{
e.printStackTrace();
}
}
}