Web

Programming
MODULE-1: Internet and the World Wide Web, HTML 5

Compiled by: Prof. Pallavi Tawde

Vidyalankar School of [email protected]
Information Technology
Wadala (E), Mumbai
www.vsit.edu.in
 Certificate
This is to certify that the e-book titled “WEB programming”
comprises all elementary learning tools for a better understating of the relevant
concepts. This e-book is comprehensively compiled as per the predefined eight
parameters and guidelines.

Signature Date: 11-12-2019

Ms. Pallavi Tawde
Assistant Professor
Department of IT

DISCLAIMER: The information contained in this e-book is compiled and distributed for
educational purposes only. This e-book has been designed to help learners understand
relevant concepts with a more dynamic interface. The compiler of this e-book and
Vidyalankar Institute of Technology give full and due credit to the authors of the contents,
developers and all websites from wherever information has been sourced. We acknowledge
our gratitude towards the websites YouTube, Wikipedia, and Google search engine. No
commercial benefits are being drawn from this project.
Unit I Internet and the World Wide Web, HTML 5

Internet and the World Wide Web:

What is Internet? Introduction to internet and its applications, E-mail, telnet, FTP, e-commerce,
video conferencing, e-business. Internet service providers, domain name server, internet address,
World Wide Web (WWW): World Wide Web and its evolution, uniform resource locator (URL),
browsers – internet explorer, Netscape navigator, opera, Firefox, chrome, Mozilla. search engine,
web saver – apache, IIS, proxy server, HTTP protocol

HTML5:

Introduction, Why HTML5? Formatting text by using tags, using lists and backgrounds, Creating
hyperlinks and anchors. Style sheets, CSS formatting text using style sheets, formatting paragraphs
using style sheets.
Recommended Books :

HTML5 Step by Step by Faithe Wempen

Web Design The Complete Reference by Thomas Powell

Prerequisites
Unit I Pre- Sem. II Sem. III Sem. IV Sem. V Sem. V & VI
requisites
Internet and the Advanced
World Wide Web, Web Projects
HTML 5 Programming
Internet
 The internet is a network of networks . It is a global communication system that link together
thousands of individual networks.
 As a result virtually any computer on network can communicate with any other computer on
any network. These connections allow users to exchange messages, to communicate in real
time(seeing messages and response immediately), to share data and programs, and to access
limitless stores of information.
 It was conceived by the Advanced Research Projects Agency (ARPA) of the U.S.
government in 1969 and was first known as the ARPANet. The original aim was to create a
network that would allow users of a research computer at one university to be able to "talk
to" research computers at other universities.
 A side benefit of ARPANet's design was that, because messages could be routed or rerouted
in more than one direction, the network could continue to function even if parts of it were
destroyed in the event of a military attack or other disaster.
 Today, the Internet is a public, cooperative, and self-sustaining facility accessible to
hundreds of millions of people worldwide. Physically, the Internet uses a portion of the total
resources of the currently existing public telecommunication networks.
Uses of Internet
1. On-line communication
2. Software sharing
3. Exchange of views on topics of common interest
4. Customer support service
5. On-line shopping
6. Worldwide video conferencing

Applications of Internet:
1. E-Mail:- It is the most widely used application on the net. You can also carry on live
"conversations" with other computer users, using Internet Relay Chat (IRC). More recently,
Internet telephony hardware and software allows realtime voice conversations.
E-mail is an asynchronous form of communication, meaning that the person whom you want
to read your message doesn't have to be available at the precise moment you send your
message. This is a great convenience for both you and the recipient.
Functionality of email programs:
 send and receive mail messages
 save your messages in a file
 print mail messages
 reply to mail messages
 attach a file to a mail message
Messages in email service can contain not only text documents but also image, audio,
and video data. Only restriction is that the data must be digitized, that is, converted to a
computerreadable format.
With email service, the Internet has proved to be a rapid and productive communication
tool for millions of users. As compared to paper mail, telephone, and fax many prefer email
because of its following advantages:
i. It is faster than paper mail.
ii. Unlike telephone, the persons communicating need not be available at the same time.
iii. Unlike fax documents, e-mail documents can be stored in a computer, and can be
edited easily using editing programs.
 2. Telnet:-
Telnet service enables an Internet user to log in to another computer on the Internet
from his/her local computer. That is, a user can execute the telnet command on his/her local
computer to start a login session on a remote compute. This action is also called “remote
login”.
To start a remote login session, a user types the command telnet and address of the
remote computer on his/her local computer terminal. The system then asks the user to enter a
login name (user ID) and a password. That is, the remote computer authenticates the user to
ensure that he/she is authorized to access it. If the user specifies a correct login name and
password, he/she is logged on to the remote computer. Once login session is established with
the remote computer, telnet enters input mode, and anything typed on the terminal of the
local computer by the users is sent to the remote computer for processing.

Some common uses of telnet service are:

i. Using computing power of remote computer. The local computer may be an
ordinary personal computer and the remote computer may be a powerful super
computer.
ii. Using a software on remote computer. A software that a user wants to use may not
be available on his/her computer.
iii. Accessing remote computer’s database or archive. An information archive of
internet to a user, such as public database or library resources may be available
on the remote computer.
iv. For logging in to ones own computer from another computer. For example, if a
user is attending a conference in another city and has access to a computer on the
Internet, he/she can telnet to his/her own computer and read his/her electronic mails
or access some information stored there.

3. File transfer Protocol(FTP):-

File Transfer Protocol service (known as FTP in short) enables an Internet user to move a
file from one computer to another on the Internet. A file may contain any type of digital
informationtext document, image, artwork, movie, sound, software, etc. Moving a file from a
remote computer to ones own computer is known as downloading the file, and moving a file from
ones own computer to a remote computer is known as uploading the file.
By using FTP service, a file transfer takes place in following manner:
i. A user executes the ftp command on his/her local computer, specifying address of the
remote computer as a parameter.
ii. An FTP process running on user’s computer (called FTP client process) establishes a
connection with an FTP process running on remote computer (called FTP server process).
iii. The system then asks the user to enter his/her login name and password on the remote
computer to ensures that the user is authorized to access the remote computer.
iv. After successful login, desired file(s) are downloaded or uploaded by using get (for
downloading) and put (for uploading) commands. User can also list directories, or move
between directories of the remote computer, before deciding which file(s) to transfer.
The user needs access rights for a remote computer to transfer files to/ from it. With this
restriction, it is almost impossible to provide access rights to the vast number of users on the Internet to a
computer that contains sharable information. The concept of anonymous FTP site is used to overcome
this problem. An anonymous FTP site is a computer allowing a user to log in with a username of
anonymous and a password that is user’s email address. The user can then download files that have
been stored on it for sharing. Such sites are called publicly accessible sites because any user on the
Internet can access them.
 Of course, FTP service is also used for more secure file transfer operations. In such cases, a user needs
a valid username and password to access a particular computer. This is common; for example, for
organizations that wish to let only certain people access their computer.

Source:- https://www.youtube.com/watch?v=Vuww_o2XRn8

4. E-business:- It is the term used to describe using the internet to operate your business.
It can be as simple as using the internet to send emails between staff or communicate with
suppliers. A business can be considered an e-business even if it doesn't buy and sell products
over the internet, as the term refers to business activities that are assisted by the internet. For
example, a successful shop front business may decide to create a website to promote their
business but not actually sell products directly through the internet.
Electronic business methods enable companies to link their internal and external data
processing systems more efficiently and flexibly, to work more closely with suppliers and
partners, and to better satisfy the needs and expectations of their customers.
5. E-commerce:-
It is commonly known as e-commerce consists of the buying and selling of products
or services over electronic systems such as the Internet and other computer networks. It has
grown extraordinarily with widespread Internet usage. The use of commerce is conducted in
this way, spurring and drawing on innovations in electronic funds transfer, supply chain
management, Internet marketing, online transaction processing, electronic data interchange
(EDI), inventory management systems, and automated data collection systems.
6. Video conference
Videoconference is a set of interactive telecommunication technologies which allow
two or more locations to interact via two-way video and audio transmissions simultaneously.
It has also been called 'visual collaboration'.
Videoconferencing differs from videophone calls in that it's designed to serve a
conference rather than individuals. It is an intermediate form of videotelephony, first
deployed commercially by AT&T during the early 1970s using their Picturephone
technology.
Internet Service Provider(ISP)
 An Internet service provider (ISP) is an organization that provides services for accessing,
using, or participating in the Internet.
 ISP connects to its customers using a data transmission technology appropriate for delivering
Internet Protocol packets or frams, such as dial-up, DSL, cable modem, wireless or
dedicated high-speed interconnects.
 ISPs may provide Internet e-mail accounts to users which allow them to communicate with
one another by sending and receiving electronic messages through their ISP's servers. ISPs
may provide services such as remotely storing data files on behalf of their customers, as well
as other services unique to each particular ISP.
i. Virtual ISP
It is an operation which purchases services from another ISP which allows the
VISP’s customer to access the internet using services and infrastructure owned and
operated by wholesale ISP.
ii. Free ISP
Free ISPs are internet service providers which provide service free of charge.
Many free ISPs display advertisements while user is connected; like commercial
Television other free ISPs often called freenets, are run on a nonprofit basis usually
with volunteer staff.
Domain Name Server
The Domain Name System (DNS) is a hierarchical naming system built on a distributed
database for computers, services, or any resource connected to the Internet or a private network.
Domain Name System is that it serves as the phone book for the Internet by translating human-
friendly computer hostnames into IP addresses. For example, the domain name www.example.com
translates to the addresses 192.0.32.10 (IPv4) and 2620:0:2d0:200::10 (IPv6).
The Domain Name System distributes the responsibility of assigning domain names and
mapping those names to IP addresses by designating authoritative name servers for each domain
When your computer tries to access domain like www.howstuffworks.com the domain name
system works like this way.
 Your computer asks your default DNS server if it knows the IP address for
www.example.com . If the DNS server has been asked that question recently, then it will
have the answer strored in its local cahe, and can answer immediately.
 Otherwise your DNS server queries central zone files for the address of primary domain
name server for howstuffworks.com and is answered with something like
“ns1.hostuffworks.com”.
 Your DNS server will ask the howstuffworks.com server for an IP address of your
www.livinginternet.com, which will then look up the answer and send it back.
 Your DNS server will store IP address returned in its local cache, and make the address
available to your computer.
 Your computer then contacts www.livinginternet.com with the standard Internet routing
protocols by using the returned IP address.
Source:- https://www.youtube.com/watch?v=2ZUxoi7YNgs
Internet Address
An Internet Address uniquely identifies a node on the internet. Internet address may also
refer to the name or IP of a web site (URL). The term Internet address also represent someone’s e-
mail address.
A unique numeric identifier, divided into four octets, assigned to machines on the internet or an
intranet. This 32-bit numerical address is used so machines can identify and locate each other for the
purpose of sending and receiving data.
Sample internet address: [email protected]
The internet address has three parts:
1. A user name(studcare)
2. An @ sign
3. The address of the user’s mail server(vsit.edu.in)

World Wide Web

Internet and world wide web are two different concepts. Internet is a global system of
interconnected computer network. In contrast, web is one of the services that run on Internet. WWW
(world wide web ) is a system of interlinked hypertext documents accessed via internet.
WWW is a system of Internet servers that support specially formatted documents.
Documents are formatted in a mark-up language called HTML(Hyper text Markup Language) ethat
supports links to other documents, as well as graphics, audio and video files or URLs.
WWW is another example of client/server computing. Each time a link is followed, the client
is requesting a document from a web server that’s part of the World Wide Web that “serves” up the
document. The server uses a protocol called HTTP or Hyper Text Transfer Protocol. The standard
for creating hypertext documents for the WWW is Hyper Text Mark up Language or HTML. HTML
essentially codes plain text documents so they can be viewed on the web.

URL
URL is a abbreviation of Uniform Resource Locator, the global address of documents and
other resources on the World Wide Web.
Eg: http://www.vsit.edu.in
The first part of the address is called a protocol identifier and it indicates what protocol to
use, and the second part is called a resource name and it specifies the IP address or the domain name
where the resource is located. The protocol identifier and the resource name are separated by a colon
and two forward slashes.
For example, the two URLs below point to two different files at the domain pcwebopedia.com. The first
specifies an executable file that should be fetched using the FTP protocol, the second specifies a Web
page that should be fetched using the HTTP protocol.
 ftp://www.pcwebopedia.com/stuff.exe
 http://www.pcwebopedia.com/index.html
Structure of an URL:
The following is an outline of the most common form of a URL:
http://www.address.edu:1234/path/subdir/file.txt
 protocol host port files and resource details
Web browsers
A web browser or Internet browser is a software application for retrieving, presenting, and traversing
information resources on the World Wide Web Although browsers are primarily intended to access the
World Wide Web, they can also be used to access information provided by Web servers in private
networks or files in file systems. Some browsers can also be used to save information resources to file
systems
List web browsers
 WorldWideWeb, February 26, 1991
 Mosaic, April 22, 1993
 Netscape Navigator and Netscape Communicator, October 13, 1994
 Internet Explorer 1, August 16, 1995
 Opera, 1996
 Mozilla Navigator, June 5, 2002
 Safari, January 7, 2003
 Mozilla Firefox, November 9, 2004
 Google Chrome, September 2, 2008

Internet Explorer
 Internet Explorer was released in 1995 as Microsoft's response to Netscape, one of the first
graphical-based Web browsers and, at the time, the dominant browser in use with control of
over 90 percent of the market.

 Initially called Microsoft Internet Explorer (MSIE), Internet Explorer (IE) has long held the
title of most popular browser in use, despite strong competition from the likes of Mozilla
Firefox, Apple's Safari, Opera and Google Chrome.

 As with most modern browsers, Internet Explorer supports Java, JavaScript, ActiveX, RSS,
CSS and Ajax, while also offering features like tabbed browsing, private browsing, and built-
in malware and phishing protection.

NetScape Navigator
 In 1993, a team led by Marc Andreesen created Mosaic at the University of Illinois' National
Center for Supercomputing Applications (NCSA).
 Mosaic was the first Web browser that had a graphical user interface (GUI). The browser was
subsequently renamed "Navigator," to avoid copyright infringement.
 Netscape Communications was taken public by Marc Andreessen and entrepreneur Jim
Clark in 1995, capitalizing on the growing interest in the World Wide Web.
 Netscape's hugely successful IPO is widely held to be the beginning of the 1990s Internet
boom.
 In 1998, Netscape started the open source Mozilla project, which eventually resulted in the
Firefox Web browser.
  Netscape Communications is now part of America Online (AOL). AOL initially envisioned
the Netscape Web site as a Web portal, providing a source of revenue through advertising
and e-commerce.
 The latest version of the Netscape browser may still be downloaded from Netscape's Web
site.

Opera
 Opera is a web browser developed by Opera Software.
 The latest version is available for Windows, macOS, and Linux operating systems, and uses
the Blink layout engine.
 An earlier version using the Presto layout engine is still available, and additionally runs on
FreeBSD systems.
 Opera siblings – Opera Mobile, Opera Mini and Opera Coast – work on devices running
Android, iOS, Windows Phone, Symbian, Maemo, Bada, BlackBerry and Windows Mobile
operating systems, while Opera Mini runs on Java ME-capable devices.
 According to Opera Software, the browser had more than 350 million users worldwide in the
4th quarter 2014. Total Opera mobile users reached 291 million in June 2015.
 Opera includes built-in tabbed browsing, a bookmarks bar, add-ons, and a download
manager. Opera has "Speed Dial", which allows the user to add an unlimited number of
pages shown in thumbnail form in a page displayed when a new tab is opened. Speed Dial
allows the user to more easily navigate to the selected web pages.
 One security feature is the option to delete private data, such as HTTP cookies, browsing
history, items in cache and passwords with the click of a button. This lets users erase
personal data after browsing from a shared computer.

Mozilla Firefox

 Mozilla Firefox is an open source web browser developed by Mozilla Foundation, and is
completely free to users. Mozilla Firefox's first public release was in 2002 with version 0.1.
 Mozilla Firefox is available on Linux, Mac, and Windows operating systems as well as
Android for mobile devices.
 Mozilla Firefox is ranked fourth in terms of US web browser market share with 12.63% of
the market, but has declined 8.94% in the last year.
 Features include tabbed browsing, spell checking, incremental find, live bookmarking, Smart
Bookmarks, a download manager, private browsing, location-aware browsing.
 Firefox uses a sandbox security model, and limits scripts from accessing data from other
websites based on the same-origin policy. It also provides support for smart cards to web
applications, for authentication purposes.

Google Chrome

 Google Chrome browser is an open source program for accessing the World Wide Web and
running Web-based applications.
 Google released Chrome in 2008 and issues several updates a year. It is available for
Windows, Mac OS X, Linux, Android and iOS operating systems.
 The Google Chrome browser takes a sandboxing-based approach to Web security.
  Each open website runs as its own process, which helps prevent malicious code on one page
from affecting others (or the computer operating system at large). The browser also supports
Web standards such as HTML5 and cascading style sheets (CSS).
 Google based the look of Chrome OS, its operating system for Web-based applications, on
the Chrome Web browser.
 Chrome was the first major Web browser to combine the search box and the address bar, a
feature that most competitors have since adopted. It also allows users to sign in with their
Google accounts, which enables them to sync bookmarks and open Web pages across
multiple devices.
 In 2010, Google launched the Chrome Web Store, an online marketplace where users can
buy and install Web-based applications to run inside the browser. These apps are available as
either browser extensions or links to websites.

PROXY SERVER
In a computer network a proxy server is a server (a computer system or an application
program) that acts as an intermediary for requests from clients seeking resources from other servers.
A client connects to the proxy server, requesting some service, such as a file, connection, web page,
or other resource, available from a different server. The proxy server evaluates the request according
to its filtering rules. For example, it may filter traffic by IP address or protocol. If the request is
validated by the filter, the proxy provides the resource by connecting to the relevant server and
requesting the service on behalf of the client. A proxy server may optionally alter the client's request
or the server's response, and sometimes it may serve the request without contacting the specified
server. In this case, it 'caches' responses from the remote server, and returns subsequent requests for
the same content directly.
A proxy server has a large variety of potential purposes, including:
 To keep machines behind it anonymous (mainly for security).
 To speed up access to resources (using caching). Web proxies are commonly used to cache web
pages from a web server.
 To apply access policy to network services or content, e.g. to block undesired sites.
 To log / audit usage, i.e. to provide company employee Internet usage reporting.
 To bypass security/ parental controls.
 To scan transmitted content for malware before delivery.
 To scan outbound content, e.g., for data leak protection.
 To circumvent regional restrictions.

Source: https://www.youtube.com/watch?v=8Y8Q6IfCUjg
Internet Information Services (IIS) –
formerly called Internet Information Server – is a web server application and set of feature
extension modules created by Microsoft for use with Microsoft Windows. It is the second most used
web server behind Apache HTTP Server

The Apache HTTP Server, commonly referred to as Apache is web server software notable for
playing a key role in the initial growth of the World Wide Web. In 2009 it became the first web
server software to surpass the 100 million web site milestone. Apache was the first viable alternative
to the Netscape Communications Corporation web server (currently known as Oracle iPlanet Web
Server), and has since evolved to rival other Unix-based web servers in terms of functionality and
performance. The majority of web servers using Apache run a Unix-like operating system.
Apache is developed and maintained by an open community of developers under the auspices
of the Apache Software Foundation. The application is available for a wide variety of operating
systems, including Unix, GNU, FreeBSD, Linux, Solaris, Novell NetWare, Mac OS X, Microsoft
Windows, OS/2, TPF, and eComStation. Released under the Apache License, Apache is
characterized as open-source software.

HTTP Protocol
HyperText Transfer Protocol, HTTP is a set of standards that allow users of the World
Wide Web to exchange information found on web pages. When accessing any web page entering
http:// in front of the address tells the browser to communicate over HTTP. For example, the URL
for Computer Hope is http://www.google.com.
The communication between the client and the server involves requests sent by the client and
responses from the server.
Each client-server transaction consist of main three parts
i. A response or request line
ii. Header information
iii. The body
Each client connects to the server at port 80 and sends a request. The request line consists of a
request method , the address of the file requested and the HTTP version number The header data
consists of configuration information about the client. The body of the request will contain data sent
by the client
Eg. GET/mypage.html HTTP/1.1

Again the response consists of three parts.

The response line contains information on the HTTP version number, a status code that
indicates the result of the request from the client and a description of status code.
Eg: HTTP/1.1 200/OK
The header from the server contains information about the server software and the document
sent to the client. The header is followed by a blank line that indicates the end of the header
information. The body of the response will contain data sent by server.
Another important point on HTTP protocol – HTTP is a stateless protocol, which means that
the connection between the browser and the server is lost once the transaction ends.
HTML5

Introduction
In simple terms, a Web page (or HTML document) is a plain text file that has been
encoded using Hypertext Markup Language (HTML) so that it appears nicely formatted in a Web
browser. Here’s what HTML means, word-by-word:

 Hypertext Text that you click to jump from document to document. This is a reference to the
ability of Web pages to link to one another.
 Markup Tags that apply layout and formatting conventions to plain text. Literally, the plain
text is “marked up” with the tags.
 Language A reference to the fact that HTML is considered a programming language.

Why HTML5?
 A slightly longer answer is because it enables cleaner, easier-to-write code.
 Web page technology has grown by leaps and bounds, mostly due to the increase of the
average person’s Internet connection speed, but also because users, designers, and
programmers increasingly demand more functionality from their Web pages, such as more
precise control of fonts and layout, better rendering on devices that vary wildly in size from
mobile phones to huge desktop monitors, better images, more interactivity, video, audio,
animations, and better support for various image and file formats.
 Because most people have fast connections, they don’t have to wait a long time for pages to
load that contain large audio and video files, which means more and more sites are including
audio and video content.
 HTML5 adds some important new tags to make audio, video, and application integration
smoother and more reliable.
 HTML5 removes support for some of the older tags. For example, an old way (pre-HTML4)
of specifying a font was the <font> tag.
 One of the biggest things that HTML5 removes is the ability to create multi-framed Web
sites with the <frame> and <frameset> commands.

HTML Rules and Guidelines

 HTML documents are structured documents. HTML documents have a well-defined
structure.
 Element names are not case-sensitive. An element such as <hTml> is equivalent to <html>
or <HTML>.
 Attribute names aren’t case-sensitive. <p Align=right> is equivalent to <p align=right> or
<HR ALIGN=right>.
 Attribute values may be case-sensitive. The filename in <IMG SRC=“filename.gif”> may
not be the same as the filename in <IMG SRC=“FILENAME.GIF”>
 Attribute values should be quoted. The actual attribute value may contain spaces or other
special characters if it is enclosed by quotes.
  Element names cannot contain spaces. Browsers treat the first space encountered inside an
element as the end of an element’s name and the beginning of its attributes. For example, <I
M G> doesn’t mean <IMG>
 Browsers collapse and ignore space characters in HTML content. Browsers collapse any
sequence of spaces, tabs, and returns in an HTML document into a single space character.
Unless they occur inside a special preformatting element, such as <PRE>
 HTML documents may contain comments. Comments are denoted by a start value of
<!- - and an end value of - ->. Comments can be many lines long. For example,
<!--
Document Name: My HTML Document
-->
 Elements should nest. Any element that starts within a section enclosed by another element
must also end within that section. To make some text bold and italic, use
<B><I>Correct</I></B> and not <B><I>Not correct</B></I>.
 Browsers ignore unknown elements.
 Browsers ignore unknown attributes.

Advantages of HTML
 HTML is a simple but powerful formatting language.
 The simplificity of HTML allows any one to create web pages.
 The web pages can be linked together using hyperlink. Hence controlled navigation
is possible.
 Long document can be read easily.
 Pages can be updated any time.
 HTML documents are device independent and can work on any operating system.
 The pages can be updated any time.
 HTML fundamental purpose is to define structure and appearance of documents so that they
may be delivered quickly and easily to a user over a network for rendering on a variety of
display devices.

Disadvantages of HTML
 HTML does not have any programming capability.
 HTML cannot provide anything more than formatted text, picture and sound.
 HTML alone cannot validate forms.
 For Validation and other extra effects and events it demands for other programming and
scripting language to be used along. Such as Perl, Java scripting and Java.
 HTML is not a word processing too, a desktop publishing solution, or even a programming
language. that's because its fundamental purpose is to define the structure and appearance of
documents and document families so that they may be delivered quickly and easily to a user
over a network for rendering on variety of display devices.

 The Structure of HTML Documents

The following is the general structure of HTML document

<!DOCTYPE HTML PUBLIC "html version">

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
...Other supplementary information goes here....
 </HEAD>

<BODY>
...Marked-up text goes here....
</BODY>
</HTML>
 An HTML document begins with a<!DOCTYPE> declaration, indicating the version of
HTML used by the document.
 Following this, the <HTML> element encloses the actual document. It contains twoprimary
sections, the head and the body, enclosed by the <HEAD> and <BODY>
 elements, respectively.
 The head can contain identifying and other supplementary information about the document.
The head always contains the document’s title, enclosed by the <TITLE> element.
 The body contains the actual document content and the HTML markup used to structure the
document.

The <HTML> Element

The <HTML> element delimits the beginning and the end of an HTML document. It
contains only the <HEAD> element and the <BODY> element.

HEAD ELEMENT
The header section begins with the <head> tag and ends with </head> tag. The head section consists
of :
(a) TITLE TAG
The title section begins with <title> tag and ends with </title> tag. This tag comes under the head
section of html web page.
 The title element defines a title in the browser toolbar.
 It provides a title for the page when it is added to favourite.
 Title element displays a title for the page in search engine results.

(b) Base Tag

The <base> tag specifies a default address or a default target for all links on a page.
The <base> tag goes inside the head element.

<head>
<base href="http://www.google.com/images/" />
<base target="_blank" />
</head>
<body>
 <img src="stickman.gif" />
<a href="http://www.google.com">Google</a>
</body>

(c) Meta Tag

Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on
the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last
modified, and other metadata.
The <meta> tag always goes inside the head element.
Metadata is always passed as name/value pairs.
Example : Describe metadata within an HTML document:
<head>
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML,CSS,XML,JavaScript" />
<meta name="author" content="Hege Refsnes" />
<meta http-equiv="Refersh" content="30" />
</head>

(d)Script Tag
The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external script file through
the src attribute.
The required type attribute specifies the MIME type of the script.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
Example
Insert a JavaScript in an HTML page:
<script language="javascript">
document.write("Hello World!")
 </script>

(e) Style tag

The <style> tag is used to define style information for an HTML document.
In the style element you specify how HTML elements should render in a browser.
The required type attribute defines the content of the style element. The only possible value is
"text/css".
The style element always goes inside the head section.
Example
Use of the style element in an HTML document:
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

(f) <link> tag

Definition and Usage
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets.
Example : Link to an external style sheet :

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
The link element must be embedded in the head section, and it can appear any number of times.

HTML <BODY> tag

Body tag encloses all tags, attributes, and information that you want on a browser to display.

Attribute Description

ALINK Defines the color of the active link

LINK Defines the color of the link which has not been visited

VLINK Defines the color of the previously visited link

BGCOLOR Specifies the background color of the web page

TEXT Specifies the color for the text of the web page

STYLE Specifies the style sheet commands

BACKGROUND Specifies the image file for document’s background

Formatting text by using tags

Heading Tags

 The <h1> to <h6> tags are used to define HTML headings.

 <h1> defines the most important heading. <h6> defines the least important heading.

HTML5 introduces a new tag to deal with this situation, called <hgroup>. When you
enclose a stack of headings within <hgroup>, only the first heading in the stack will
appear in an outline; the others will be ignored by screen readers and other outlining
tools.
<hgroup> acts as a wrapper for two one or more related heading elements possibly contained within
a <header> element. It can only contain a group of <h1>–<h6> element(s), and it should be used for
subtitles, alternative titles, and tag lines.

Eg:
<hgroup>
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
</hgroup>

Attributes of heading tags

Attribute Value Description

Align Left/center/right/justify Not supported in HTML5.
Specifies the alignment of a heading
HTML Paragraphs and Breaks
HTML <p> tag
The <p> tag defines a paragraph.
The p element automatically creates some space before and after itself. The space is automatically
applied by the browser, or you can specify it in a style sheet.
Example : A paragraph is marked up as follows
<p>This is some text in a paragraph.</p>
HTML <br> tag
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
Example : A line break is marked up as follows
This text contains<br />a line break.

Note: Use the <br> tag to insert line breaks, not to create paragraphs.

HTML Divisions and Center

HTML <div> tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with styles.
Example : A section in a document that will be displayed in green
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
The div element is very often used with CSS to layout a web page.
Note : Browsers usually place a line break before and after the div element.

HTML <center> tag

The <center> tag is used to center the text.
Example : Center text in an HTML page
<center>This text will be centered.</center>
HTML Spans
HTML <span> tag
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
When the text is hooked in a span element you can add styles to the content, or manipulate the
content with for example JavaScript.
Example : A text with a span element that can be styled with CSS
<p>My mother has <span class="blue">light blue</span> eyes.</p>

HTML Quotation Tag

HTML <q> tag
The <q> tag defines a short quotation.
The browser will insert quotation marks around the quotation.
Example : A short quotation is marked up as follows
<q>
Here is a short quotation here is a short quotation
</q>
HTML <blockquote> tag
The <blockquote> tag defines a long quotation.
A browser inserts white space before and after a blockquote element. It also insert margins for the
blockquote element.
Example : A long quotation is marked up as follows
<blockquote>
Here is a long quotation here is a long quotation here is a long quotation here is a long
quotation here is a long quotation here is a long quotation here is a long quotation here is a
long quotation here is a long quotation.
</blockquote>

Tip : Use the q element to mark up short quotations!

HTML PREFORMATTED TAG

HTML <pre> tag
The <pre> tag defines preformatted text.
Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
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>
Tip : Use the pre element to display computer code!

Preformatted text
This example demonstrates how you can control the line breaks and spaces with the pre tag.
<html>
<body>
<pre>
This is preformatted text.
It preserves both spaces and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>

Horizontal Ruler
HTML <hr> tag
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content in an HTML page.
Example : Two paragraphs divided by a horizontal line
<p>This is some text.</p>
<hr />
<p>This is some text.</p>
Note : The hr element renders differently in different browsers.
Attribute Value Description
align left Specifies the alignment of a hr element
center
right
size pixels Specifies the height of a hr element
width pixels Specifies the width of a hr element
%
HTML address tag
HTML <address> tag
The <address> tag is used to mark up contact information for the author or owner of the document.
This way, the reader is able to contact the document's owner.
The address element is usually added to the header or footer of a webpage.
Example : Contact information for Google.com
<address>
Written by Google.com<br />
<a href="mailto:[email protected]">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
In all browsers, the content of the address element renders in italic. Most browsers will also add a
line break before and after the address element.

HTML Text Level Elements

Text-level elements
These elements are used to mark up text inside block level elements. Some block level elements
exclude certain text level elements, and some text level elements may only appear inside specific
block level elements. This is documented in the section on that block level element.
See the syntax rules for an explanation of the syntax used in the overview.

Logical markup Physical markup

 EM - Emphasized text  TT - Teletype

 STRONG - Strongly  I - Italics

emphasized
 B - Bold
 DFN - Definition of a term
 U - Underline
 CODE - Code fragment
 STRIKE - Strikeout
 SAMP - Sample text
 BIG - Larger text
 KBD - Keyboard input
 SMALL - Smaller text
 VAR - Variable
 SUB - Subscript
 CITE - Short citation
 SUP - Superscript

Example : This example demonstrates how you can format text in an HTML document.

<html>
<body>
<b>This text is bold</b><br>
<strong>This text is strong</strong><br>
<big>This text is big</big><br>
<em>This text is emphasized</em><br>
<i>This text is italic</i><br>
<small>This text is small</small><br>
This text contains_subscript<br>
This text contains^superscript
</body>
</html>

Abbreviations and acronyms

This example demonstrates how to handle an abbreviation or an acronym.
 <html>
<body>
<abbr title="United Nations">UN</abbr><br>
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the
mouse pointer over
the acronym or abbreviation.</p>
<p>This only works for the acronym element in IE 5.</p>
<p>This works for both the abbr and acronym element in Netscape 6.2.</p>
</body>
</html>

Using Monospace
Individual characters take up varying amounts of space horizontally, depending on the size of
the individual character. For example, the letter M takes up more space than the letter I, so a string of
M’s occupies more space than a string of I’s.
As a demonstration, let’s take a look at 10 of each character to see the difference:

MMMMMMMMMM
IIIIIIIIII

A monospace font is one whose characters occupy exactly the same amount of horizontal
space, regardless of the actual size and shape of the individual character.
Here are those same 10 Ms and Is in a monospace font:
MMMMMMMMMM
IIIIIIIIII
Some common uses for monospaced text include:
● Lines of programming code (like the HTML lines in this book)
● Text that you are instructing a user to type
● ASCII art (artwork created by using text characters)
To apply monospace style, you can use any of the tags outlined in the following table.

Tag Description
<kbd> (Keyboard) The tag used for monospaced text to indicate something a user
should type on a keyboard
<code> (Code) The tag used for monospaced text applied to programming code
<samp> (Sample) The tag used for sample text, which is largely the same thing as
<code>
Example:

<html>
<head>
<title>MonoSpace Font</title>
</head>
<body>
<p>1. Click in the Login box<br>
2. Type <kbd>premium</kbd><br>
3. Click in the Password box<br>
4. Type <kbd>customer</kbd></p>
</body>
</html>
Output:

HTML List (Ordered, Unordered Definition and Nested List)

Unordered Lists

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

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Here is how it looks in a browser :
 Coffee
 Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Attribute Value Description
Type disc Specifies the style of the bullet points of the list items
square
circle
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.

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Here is how it looks in a browser:

1. Coffee
2. Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Optional Attributes
Attribute Value Description
Start number Specifies the start point in a list
Type decimal (1, 2, 3, 4 (the default)) Specifies which kind of bullet points will be
decimal-leading-zero (01, 02, 03, 04) used.
lower-roman (i, ii, iii, iv)
upper-roman (I, II, III, IV)
lower-alpha (a, b, c, d)
upper-alpha (A, B, C, D)
none(nothing)

Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a description of each item
(term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.

Creating Hyperlinks and Anchors

HTML uses the <a> (anchor) tag to create a link to another document.
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 address the
document to link to, and the words between the open and close of the anchor tag will be displayed as
a hyperlink.
This anchor defines a link to Google :
<a href="http://www.google.com/">Visit Google!</a>
The line above will look like this in a browser :
Visit Google!

The Target Attribute

With the target attribute, you can define where the linked document will be opened. The line below
will open the document in a new browser window :
<a href="http://www.google.com/"
target="_blank">Visit Google!</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 into a specific section on a page, instead of letting the user scroll around to
find what he/she is looking for.
The line below defines a named anchor :
<a name="tips">Useful Tips Section</a>
A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this :
<a href="#tips">Jump to the Useful Tips Section</a>

More Examples :
Open a link in a new browser window
This example demonstrates how to link to another page by opening a new window, so that the visitor
does not have to leave your Web site.
<html>
<body>
<a href="lastpage.htm" target="_blank">Last Page</a>
<p>
If you set the target attribute of a link to "_blank", the link will open in a new window.

</p>
</body>
</html>

Link to a location on the same page

This example demonstrates how to use a link to jump to another part of a document.
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<a name="C4"><h2>Chapter 4</h2></a>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
 <p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

Hyperlinking to an E-Mail Address

E-mail hyperlinks are useful when you want to direct someone to send a message to a
particular person. For example, it is common to include a link to e-mail a site’s webmaster.

Example:
<a href="mailto:[email protected]">Contact Us</a>
To add a default subject line to the e-mail, add a ?subject attribute after the e-mail address, like this:
<a href="mailto:[email protected]?subject=Comment">Contact Us</a>

Hyperlinking to Other Content

A hyperlink can reference any file, not just a Web document. You can take advantage of this
to link to other content such as Microsoft Office documents, compressed archive files such as .zip
files, and even executable program files such as setup utilities for programs that you want to provide
to your visitors. The procedure for linking to other content is the same as for linking to a Web page;
the only difference is the file name you enter in the hyperlink.

Example:
<a href="spray.doc">Microsoft Word version</a>

The above code locate the list item Microsoft Word version and enclose it with an <a> tag that
points to the spray document.

Introduction to CSS
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets
 Styles were added to HTML 5.0 to solve a problem
 External Style Sheets can save you a lot of work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one.
With CSS, your HTML documents can be displayed using different output styles:
 SYTLE 1
h1, h2, h3
{ font  family: verdana, arial, ‘sans serif’; }
p, table, li
{ font  family: verdana, arial, ‘sans serif’;
margin  left: 10 pt; }
ul
{ list  style: disc; }
ol
{ list  style: decimal; }
p, li, th, td
{ fontsize: 75% }
body
{ backgroundcolor: #ffffff; }
h1, h2, h3, hr
{ color:black; }
a:link {color:black}
a:visited {color:black}
a:active {color:mediumblue}
a:hover {color:mediumblue}

Styles Solve a Common Problem

HTML tags were originally designed to define the content of a document. They were supposed to
say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>,
<table>, and so on. The layout of the document was supposed to be taken care of by the browser,
without using any formatting tags.
As the two major browsers  Netscape and Internet Explorer  continued to add new HTML tags
and attributes (like the <font> tag and the color attribute) to the original HTML specification, it
became more and more difficult to create Web sites where the content of HTML documents was
clearly separated from the document’s presentation layout.
To solve this problem, the World Wide Web Consortium (W3C)  the nonprofit, standard setting
consortium responsible for standardizing HTML  created STYLES in addition to HTML 4.0.
Both Netscape 4.0 and Internet Explorer 4.0 support CSS.
Style Sheets Can Save a Lot of Work
Styles in HTML 4.0 define how HTML elements are displayed, just like the font tag and the color
attribute in HTML 3.2. Styles are normally saved in files external to your HTML documents.
External style sheets enable you to change the appearance and layout of all the pages in your Web,
just by editing a single CSS document. If you have ever tried to change the font or color of all the
headings in all your Web pages, you will understand how CSS can save you a lot of work.
CSS is a breakthrough in Web design because it allows developers to control the style and layout of
multiple Web pages all at once. As a Web developer you can define a style for each HTML element
and apply it to as many Web pages as you want. To make a global change, simply change the style,
and all elements in the Web are updated automatically.
Multiple Styles Will Cascade Into One
Style Sheets allow style information to be specified in many ways. Styles can be specified inside a
single HTML element, inside the <head> element of an HTML page, or in an external CSS file.
Even multiple external Style Sheets can be referenced inside a single HTML document.
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” Style Sheet by
the following rules, where number four has the highest priority.
 Browser default
 External Style Sheet
 Internal Style Sheet (inside the <head> tag)
 Inline Style (inside HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will
override every style declared inside the <head> tag, in an external style sheet, and in a browser (a
default value).

CSS Syntax
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
Selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the attribute you
wish to change, and each property can take a value. The property and value are separated by a colon
and surrounded by curly braces:
body {color: black}
If the value is multiple words, put quotes around the value:
p {font  family: “sans serif”}

Note : If you wish to specify more than one property, you should separate each property with a
semicolon. The example below shows how to define a center aligned paragraph, with a red text
color:
p {text  align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:
p {
text  align: center;
color: black;
font  family: arial }

Grouping
You can group selectors. Separate each selector with a comma. In the example below we have
grouped all the header elements. Each header element will be green:
h1, h2, h3, h4, h5, h6
{ color: green }

The class Selector

With the class selector you can define different styles for the same type of HTML element. Say that
you would like to have two types of paragraphs in your document: one rightaligned paragraph, and
one center aligned paragraph. Here is how you can do it with styles:

p.right {text  align: right}

p.center {text  align: center}

You have to use the class attribute in your HTML document:

<p class=“right”>
This paragraph will be rightaligned.</p>
<p class=“center”>
 This paragraph will be centeraligned.</p>

Note : Only one class attribute can be specified per HTML element! The example below is wrong:

<p class= “right” class= “center”>

This is a paragraph.</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML
elements that have a certain class. In the example below, all HTML elements with class = “center”
will be centeraligned:
.center {textalign : center}
In the code below both the h1 element and the p element have class=“center”. This means that both
elements will follow the rules in the “.center” selector:
<h1 class= “center”>
This heading will be centeraligned</h1>
<p class=“center”>
This paragraph will also be centeraligned.</p>

The id Selector
The id selector is different from the class selector! While a class selector may apply to SEVERAL
elements on a page, an id selector always applies to only ONE element. An ID attribute must be
unique within the document.
The style rule below will match a p element that has the id value “para1”:
#paral
{textalign: center;
color: red}

The rule above will match this h1 element:

<h1 id= “wer345”>Some text</h1>
CSS Comments
You can insert comments in CSS to explain your code, which can help you when you edit the source
code at a later date. A comment will be ignored by the browser. A CSS comment begins with “/*”,
and ends with “*/”, like this:
/* This is a comment */
p{text  align: center;
/* This is another comment */
color: black;
font  family: arial}
CSS How to (Examples)

Example 1
<html><head>
<link rel=“stylesheet” type=“text/css” href=“ex1.css”
/></head><body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels </p>
</body></html>

ex1.css

body {backgroundcolor: yellow}

h1 {fontsize: 36pt} h2 {color: blue}
p {margin  left: 50px}

Example 2

<html><head>
<link rel=“stylesheet”
type=“text/css” href=“ex2.css”/>
</head><body><h1>This is a header 1</h1><hr>
<p>You can see that the style sheet formats the text
 </p><p><a href=“http://www.microsoft.com”
target=“_blank”>This is a link</a></p>
</body>
</html>

ex2.css

body {backgroundcolor: tan}

h1 {color:maroon; font  size:20pt}hr {color:navy}
p {font  size: 11pt; margin  left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:active {color:blue}
a:hover {color:black}

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways
of inserting a style sheet:
(a) External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style
sheet, you can change the look of an entire Web site by changing one file. Each page must
link to the style sheet using the <link>tag. The <link> tag goes inside the head section:

<head>
<link rel= “stylesheet” type=“text/css”
href= “mystyle.css”/>
</head>

The browser will read the style definitions from the file mystyle.css, and format the document
according to it.
An external style sheet can be written in any text editor. The file should not contain any html
tags. Your style sheet should be saved with a .css extension.
 An example of a style sheet file is shown below:

hr {color: sienna}
p {margin  left: 20px}
body {backgroundimage: ur1(“images/back40.gif”)}

(b) Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section by using the <style>tag, like this:

<head>
<style type= “text / css”>
hr {color: sienna}
p {margin  left : 20 px}
body {background  image: url (“images/back40.gif”)}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
Note : A browser normally ignores unknown tags. This means that an old browser that does not
support styles, will ignore the <style>tag, but the content of the <style> tag will be displayed on
the page. It is possible to prevent an old browser from displaying the content by hiding it in the
HTML comment element:

<head>
<style type= “text/css”>
<!  
hr {color: sienna}
p {margin  left : 20 px}
body {background  image: url (“images/back40.gif”)}
>
</style>
</head>
(c) Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation.
Use this method sparingly, such as when a style is to be applied to a single occurrence of
an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain
any CSS property. The example shows how to change the color and the left margin of a
paragraph:

<p style= “color: sienna; margin  left: 20px”>

This is a paragraph</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for h3 selector:
h3
{
color: red;
text  align: left;
font  size: 8 pt
}

And an internal style sheet has these properties for the h3 selector:
h3 {
text  align: right;
font  size: 20 pt}
If the page with the internal style sheet also links to the external style sheet the properties for h3 will
be:
Color: red;
text  align: right;
font  size: 20 pt

The color is inherited from the external style sheet and the textalignment and the fontsize is
replaced by the internal style sheet.
The Definitions
Below are 28 very common Style Sheet commands. You can put together a myriad of different looks
with these. However, this is a list of less than half of those available.
The FONT/TEXT Definitions
1. fontfamily
 Denotes typeface.
 H2 {fontfamily: arial}

2. fontstyle
 Denotes the style of the text
Use normal, italic, small caps, or oblique for commands.
 H3 {fontstyle: small caps}

3. fontsize
 Denotes the size of the text.
Specify in points (pt), inches (in), centimetres (cm), pixels (px), or percentage (%).
 H4 {fontsize: 20pt}

4. fontweight
 Denotes text presence.
Specify in extralight, light, demilight, medium, bold, demibold, or extrabold.
 A: link {fontweight: demilight}

5. fontvariant
 Denotes a variant from the norm.
Specify normal and small caps.
 H2: {fontvarient: smallcaps}

6. textalign
 Justifies the alignment of text.
Specify as left, center, or right
 H1 {textalign: center}

7. textdecoration
 Lets you decorate the text (duh).
Specify as italic, blink, underline, linethrough, overline, or none.
  A: visited {textdecoration: blink}

8. textindent
 Denotes margins. Most often used with the <P>. Make sure you use </P also!>
Specify in inches (in), centimetres (cm), or pixels(px).
 P{textindent: 1in}

9. wordspacing
 Denotes the amount of spaces between words.
Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
 P {wordspacing: 10px}

10. letterspacing
 Denotes space between letters.
Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
 P {letterspacing: 2pt}

11. texttransform
 Denotes a transformation of the text.
Specify capitalize, uppercase, lowercase.
 B {texttransform: uppercase}
12. color
 Denotes color of text.
If you use six digit hex codes, make sure you place hash mark (#) in front.
 H3 {color: #FFFFFF}
The Margin / Background Commands :
Note! When used with the “BODY” tag these commands affect the entire page!

1. marginleft

2. marginright

3. margintop
 Denotes space around the “page”.
Specify in points (pt), inches (in), centimeters (cm), or pixels (px).
  BODY {marginleft: 2in}
 P {marginright: 12cm}
 BODY {margintop: 45px}

4. margin
 Denotes all three margin commands above in one command. The pattern follows top, right,
and then left.
 P {margin: 3in 4cm 12px} (note no commas or semicolons)

5. lineheight
 Denotes space between lines of text.
Specify in points (pt), inches (in), centimeters (cm), or pixels (px), or percentage (%).
 TEXT {lineheight: 10 px}

6. backgroundcolor
 Denotes page’s background color.
Specify the color in hex or word codes, or use “transparent”
 BODY {backgroundcolor: #ffffff}

7. backgroundimage
 Denotes the background image for pages.
Specify the image you want through that image’s URL.
 BODY {backgroundimage: http://www.page.com/dog.jpg}

8. backgroundrepeat
 Denotes how the image will tile.
Specify repeatx, repeaty, or norepeat.
 BODY {backgroundrepeat: repeaty}

9. backgroundattachment
 Denotes how the image will react to a scroll.
 Specify scroll, or fixed.
 BODY {backgroundattachment: fixed}

The Positioning / Division Definitions

These commands come into play when you begin working with text and image positioning. Note
these examples are given using a specific item.
1. position
 Denotes the placement of an image or a division of the page. Specify absolute for specific
placement, or relative for a relative placement to other images.
 <IMG STYLE=“position:absolute” SRC=“joe.jpg”>

2. left
 Denotes amount of space allowed from the left of the browser screen when positioning an
item.
Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
 <IMG STYLE=“position:absolute; LEFT:20px;” SRC=“joe.jpg”>

3. top
 Denotes amount of space allowed from the top of the browser screen when positioning an
item.
Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
 <IMG STYLE=“position:absolute; LEFT: 20px; TOP: 200pt” SRC=“joe.jpg”>

4. width
 Denotes width of image or page division.
Specify in points(pt), inches (in), centimeters(cm), pixels (px), or percentage (%).
 <IMG STYLE=“position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt”
SRC=“joe.jpg”>

5. height
 Denotes height of image or page division.
Specify in points (pt), inches (in), centimeters(cm), pixels (px), or percentage (%).
  <IMG STYLE=“position:absolute; HEIGHT: 55px; WIDTH: 80px; LEFT: 20px; TOP:
200pt” “SRC=“joejpg”>

6. overflow
 If the item is too large for the height and width specified, this tells the page what to do with
the overflow.
Specify visible, hidden or scroll.
 <IMG STYLE=“position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP:
200pt” SRC=“joejpg”>

7. zindex
 Denotes an item’s position in the layering structure. The lower the number, the lower the
layer. An image marker with a 20 would go overtop of an image marked with a 10.
Specify by number.
 <IMG STYLE=“position:absolute; ZINDEX: 10; overflow: hidden; WIDTH: 80px;
LEFT: 20px; TOP: 200pt” SRC=“joejpg”>

Formatting Paragraphs by Using Style Sheets

Paragraph formatting refers to the layout of entire paragraphs, not the placement or spacing
of individual characters. For example, a paragraph can be double-spaced, but an individual character
cannot.

Indenting Paragraphs

Indenting is the process of offsetting text from its usual position, either to the right or to the
left. You can apply three types of indentation in HTML:
1. First-line indent This indents only the first line of a paragraph. Use the text indent attribute.
For in-line styling of a single paragraph, specify this style:
<p style="text-indent: 20px">
In a style sheet, specify a rule similar to this: p {text-indent: 20px}

2. Padding This adds a specified amount of space between the border of an element and its
contents (inside of the element). It applies equally to all lines of text in the paragraph. Use
the padding attribute to create this space. For in-line styling of a single paragraph, specify
this style:
<p style="padding: 20px">
In a style sheet, specify a rule like this: p {padding: 20px}
3. Margin This adds a specified amount of white space around an element, on the outside of the
element. It applies equally to all lines of text in the paragraph. Use the margin attribute to
create this space. For a single paragraph, specify this style:
<p style="margin: 20px">
In a style sheet, specify the following rule: p {margin: 20px}
 The difference between applying the padding and margin attributes is most apparent
when the paragraph has a visible border, or when the paragraph’s background contrasts with
the surrounding area.

Applying a Border to a Paragraph

You can apply a border style rule to almost any two-sided tag. Border style rules are used
most commonly with regular paragraphs, but they also work with headings, lists, and even spans.

Specifying a Border Style

To select the line type for the border, use the border-style attribute along with one of the
arguments listed in the table on the following page.
To apply a border style to an individual instance of a tag, use the following:
<p style="border-style: solid">
To apply the same formatting using a style sheet, specify the following rule:
p {border-style: solid}
Setting Border Padding

Create the spacing using the padding attribute. To apply padding using a style sheet, specify the
following rule:
p {border-style: solid; padding: 15px}
To apply the same formatting to an individual instance of a tag, use the following:
<p style="border-style: solid; padding: 15px">

Specifying Border Width and Color

By default, border attributes apply to all four sides of the border unless you specify
otherwise. To specify that a certain side of the border has special formatting,
For example, to set a color other than black for the top border using a style sheet, use the following:

p {border-style: solid; border-top-color: blue}

To apply the same formatting to an individual instance of a tag, use this:
<p style="border-style: solid; border-top-color: blue">

You can use this technique not only with border-color, but with style, padding, and width
attributes as well. For example, the following rule applies a dotted line and 15 pixels of
padding to only the top and bottom of a paragraph:
<p style="border-top-style: dotted; border-bottom-style: dotted; padding-top: 15px; padding-
bottom: 15px">

Here’s how the rendered paragraph looks:

Setting All Border Attributes at Once
Use the border attribute, and then specify all the settings together in the following order:
size,color, style.
<p style="border: 2px green solid">

Specifying the Horizontal Alignment of a Paragraph

Alignment refers to the placement of a paragraph within its container. You can apply
alignment only to block-level elements, such as paragraphs, list items, headings, and so on.
The default alignment setting is left; the other choices are center, right, and justify
Eg:
<p style=”text-align:right”>HTML stands for HyperText Markup Language</p>
<p align=”center”>CSS tands for Cascading Style sheets</p>

Here’s how the rendered paragraph looks:

Specifying Vertical Space within a Paragraph

The line height is the amount of space between each line. To specify the line height in a style
sheet, set the line-height attribute, as follows:
p {line-height: 150%}

To specify the same formatting in an individual tag, use the following:

<p style="line-height: 150%">

Questions:

1. What is internet? List the uses of internet.

2. What is Telnet? List the uses of Telnet.
3. Write a short note on web browsers and web servers.
4. Explain the following terms
 a)FTP b) e-commerce c) telnet d) WWW e) e-mail f) E-business g)Video Conferecing
5. List the different web browsers. Explain any 2 in detail.
6. Define ISP. List different ISP.
7. Write a short note on URL .
8. Write a short note on proxy server.
9. What is DNS? Explain it by giving an example.
10. Explain the HTTP protocol.
11. Write a short note on Apache web server and IIS.
12. Differentiate between internet and WWW
13. Write a short note on google chrome.
14. Advantages and disadvantages of HTML
15. Explain the following tags
<p>, <sup>,<sub>, <u><i><b><h1><pre><br><hr>
16. Explain different forms of Stylesheet.
17. State the advantages of CSS.
18. Explain different types of formatting used with paragraph tag.

MCQ

1. Which one of the following is not correct?

a) telnet is a general purpose client-server program
b) telnet lets user access an application on a remote computer
c) telnet can also be used for file transfer
d) none of the mentioned

2. Which tag inserts a line horizontally on your web page?

a. <hr>
b. <line>
c. <line direction=”horizontal”>
d. <tr>

3. What should be the first tag in any HTML document?

a. <head>
b. <title>
c. <html>
d. <document>

4. <b> tag makes the enclosed text bold. What is other tag to make text bold?
a. <strong>
b. <dar>
c. <black>
d. <emp>

5. Choose the correct HTML tag to make a text italic

a. <ii>
b. <italics>
 c. <italic>
d. <i>

6. What is the correct HTML tag for inserting a line break?

a. <br>
b. <lb>
c. <break>
d. <newline>

7. Which attribute is used to name an element uniquely?

a. class
b. id
c. dot
d. all of above

8. Proxy server reduces load on the

a. Proxy Server
b. Simple Server
c. Post Server
d. Original Server

9. Expansion of FTP is
a) Fine Transfer Protocol
b) File Transfer Protocol
c) First Transfer Protocol
d) None of the mentioned

10. _______ allows you to connect and login to a remote computer

a) Telnet
b) FTP
c) HTTP
d) None of the mentioned
google