SlideShare a Scribd company logo
1 of 130
Download to read offline
WE ARE GOING TO DISCUSS….
• COMMUNICATION ON THE WEB
• WEB SERVER TECHNOLOGIES
• WEB DESIGNING
• STATIC AND DYNAMIC WEB PAGES
• SCRIPTS AND TYPES OF SCRIPTING LANGUAGES
• POPULAR SCRIPTING LANGUAGES
• CASCADING STYLE SHEET
• BASIC CONCEPTS OF HTML DOCUMENTS
We rely on different websites for
various purposes like…..
• Submitting online applications
• Viewing web contents
• Watching movies
• Banking transactions
• Purchase of goods through online
transaction and so on.
A website is a collection of web
pages.
Web pages are developed with the
help of a language called
Hyper Text Markup Language(HTML).
It is also a language of Internet.
A web page may contain texts,
graphics, sounds, animations, and
movies.
How is this website made available on
the Internet?
These web pages are to be stored in
web servers connected to the Internet,
to be made available to others.
Communication on web
Communication on web
Communication on web
In order to communicate on the web,
computers/devices need to understand each
other. This is made possible by making all devices
follow the same protocol, namely TCP/IP.
Communication on web
URL is sent
to DNS
server to
obtain its IP
address
Browser
connects to
this server
using the IP
address.
After process
this request,
the web page
to be displayed
is sent to the
client.
In order to communicate on the web,
computers/devices need to understand each
other. This is made possible by making all devices
follow the same protocol, namely TCP/IP.
Communication on web
Routing of a data packet from sender
to a recipient
TCP breaks the data
into packets
The packets travel from
router to router over the
internet according to the IP
TCP reassembles the
data packets back to
original form
In the Internet, there are several types
of communication.
• Websites are accessed using HTTP.
• Email communication happens using SMTP.
• Internet Protocol provides the basics of
communication over Internet.
The role of routers in transporting
data in Internet
• The routers need not be programmed
separately to handle different types of data.
• They do not need to know about the data
they are transporting.
• It concerned only about the address to which
the packet is to be delivered
• The openness of the data part of the packet gives
the freedom to design new protocols for the
Internet.
• This openness and flexibility of TCP/IP that led to
the development of protocols for
– social media websites to handle messages,
– content websites to handle video and audio,
– banking websites to handle money transfer securely, etc
• It is a deciding factor for the economic success of
the Internet.
Communication on the web can be
categorised as
1. Client (browser) to webserver
2. Web server to Web server communication
Essential for Communication
over the Internet
1. Authentication : is the process of
determining whether a computer / server is
the computer that it claims to be.
2. Security : it should be provided to
communication over Internet so that the
messages are not intercepted and modified
by hackers.
1. Client (browser) to webserver
1. Client (browser) to webserver
• It does not usually require authentication.
• But in the case of web based banking
applications / e-mail services, user names and
passwords are required to be sent to the
server.
• This information cannot be sent to the server
in plain text due to security reasons.
• The hackers may steal usernames and
passwords, if it is communicated and shared
as plain text.
1. Client (browser) to webserver
HTTPS
(Hyper Text Transfer Protocol Secure)
• HTTPS (Hyper Text Transfer Protocol Secure)
technology to encrypt the username and
password and then send it to the server.
• It works using SSL (Secure Sockets Layer)
SSL (Secure Sockets Layer)
• SSL provides a standard security technology for
establishing an encrypted connection between
computers on Internet.
• It provides security capabilities to HTTP.
• This protocol not only ensures privacy, but also
ensures that no other website can impersonate
the user’s login account not alter the
information sent.
• Verisign Inc. is a certification authority.
Client-Server authentication process
1. Browser requests to start a secure SSI session
2. Server returns its SSL certificate
3. Browser checks that : Certificate is valid,
signed by someone user trusts. If valid,
browser initiates and encrypted session
4. Server and Browser encrypts all the
transmitted data.
2. Web server to web server
communication
• It may be required in certain web applications.
• The web server of an online shopping website
needs to send confidential information to a
bank web server and vice versa.
• In such cases the web servers of the merchant
and the bank are to be authenticated.
• Digital certificates –
• Payment gateway – a bridge
2. Web server to web server
communication
User placing
order
Merchant’s
Web server
Payment
gateway
Merchant
bank account
Bank
WS
order
Server response
Request to
Payment gateway
Payment gateway
to response
Requestfor
conformation
Bank
response
Web server technologies
www.dhsekerala.gov.in
Web server
• It is a server computer that hosts
websites
• It enables us to deliver web pages or
services like e-mail, blog etc., to users on
the Internet
• It consists of a server computer that runs
a server OS and a web software installed
on it for providing services over the
Internet
Web server
• It is a powerful computer which is always switched on
and connected to a high bandwidth Internet connection
• This will facilitate Internet users around the world to
access the websites and services hosted by it at any
point of time
• It can have single or multiple processors, fast access
RAM, high performance hard disks, Ethernet cards that
supports fast communication
• It is usually installed in a data center to ensure faster
Internet connectivity and redundant power supply
Data center
Data center
• It is a dedicated physical location where
organisations house their servers and networking
systems
• It is used for storing, processing and serving
large amounts of mission-critical data to their
clients
• It requires extensive backup power supply
systems, cooling systems, high speed networking
connections and security systems
Popular Server OS
• Linux distributions
–Redhat, openSUSE, Debian, Ubuntu, etc)
• Microsoft Windows Server
• FreeBSD
• Oracle Solaris etc.,
Web server software
• After setting up a server, a web server
software has to be installed in it and
configured according to the given OS
• The web server software is a program that
uses the client-server model and the HTTP to
ensure timely distribution of files stored in it
to the users
Some of the preferred
web server packages are
• Apache Server
• Microsoft Internet Information Server (IIS)
• Google Web Server (GWS)
• nginex (engine-x)
Other Software packages :
FTP, e-mail, DNS, databases etc
Hardware Ports
• It is used to connect
external devices to the
computer
• These devices
communicate with the
computer using these
ports
Software Ports
• It is used to connect a client computer to a
server to access its services like HTTP, FTP,
SMTP etc,
• To distinguish the ports, the software ports
are given unique numbers
• The purpose of software ports is to identify
different services like e-mail, file transfer
etc, running on a single server computer
Software Ports
• Port number is a 16-bit number which when
added to a computer’s IP address / URL, can
be used for communicating with a particular
service available on that server
• For example :
http://www.google.co.in:80
protocol Domain
name
Port number
Some well-known ports and the
associated services
Default Port
Number
Service
20 & 21 FTP
22 SSH
25 SMTP
53 DNS
80 HTTP
110 POP3
443 HTTPS
DNS Servers
It runs a special
purpose networking
software that
contains a database
of domain names
and IP addresses
DNS Servers
The DNS servers are arranged in a hierarchy.
At the top level there are 13 root servers that
contains name server information for all the generic
top-level domains
How the DNS resolves the IP address?
1. The browser first searches it local memory (mini
cache). If found, the browser uses it
2. If it is not found, it checks the OS’s local cache
for the IP address
3. If it is not found there, it searches the DNS
server of the local ISP
4. In the absence of the domain name in the ISP’s
DNS server, the ISP’s DNS server initiates a
recursive search
5. If found returns this IP address to the browser
and the webpage is displayed otherwise it
returns the message “Server not found” in the
browser window
How the DNS searches and locates
the IP address of a domain name?
Client Program
Operating System
Your ISP
Web
Browser
DNS
Server
DNS
Resolver
Recursive DNS
search
Know your progress
1. Name a protocol that works on top of the
Internet Protocol(IP)
- HTTP, SMTP
2. Expand HTTPS
Hyper Text Transmission Protocol Secure
3. What are the advantages of installing web
servers in data centers?
To ensure faster Internet connectivity and redundant
power supply, a webserver is usually installed in a data
center
Know your progress
4. State whether true or false
a. The web server software is a program that uses the
client-server model.
True
b. The web server consists of server OS and web server
software
True
5. The number of bits in a software port number is
_____
16
6. A Domain Name System returns the
_____________ of a domain name
IP address
Know your progress
9. The social media websites developed their own
protocol for communicating over the Internet.
How is this possible when Internet uses TCP/IP
protocol?
– The openness of the data part of the packet gives the
freedom to design new protocols for the Internet.
– This openness and flexibility of TCP/IP that led to the
development of protocols for social media websites to
handle messages, content websites to handle video and
audio, and banking websites to handle money transfer
securely, etc
– It is a deciding factor for the economic success of the
Internet.
Know your progress
10.The username and password of e-mail account
has to be sent securely over the Internet
a. Name the technology used to send the data to the
server
HTTPS
b. How does this technology support secure data
communication?
HTTPS works using SSL (Secure Sockets Layer). SSL
provides a standard security technology for
establishing an encrypted connection between
computers on Internet.
Know your progress
11.ABC Engineering College has about 1000 computers
connected to the Internet, in its campus. What is
the advantage of having a local DNS server in the
college’s intranet?
This local DNS server contains a list of domain
names and their IP addresses which the users in the
organisation regularly access. This list can be
updated periodically to include new domain names.
Whenever a computer in the intranet tries to access
a website in the Internet, it first searches for the
domain name in the local DNS server and finds the
IP address. This speeds up the Internet access in the
organisation. Only if the domain name is not found
in the local DNS server, it searches the DNS of ISP
Know your progress
12.Write an example of a web server OS and a web
server package
Linux distributions (Redhat, openSUSE, Debian,
Ubuntu, etc)
Microsoft Windows Server
FreeBSD
Oracle Solaris etc.,
13.What is the use of software ports in a web
server?
To identify different services like e-mail, file
transfer, etc., running on a single server
computer.
Know your progress
13.The port used for HTTP is ________
80
14.Suppose you are browsing the website
www.prdkerala.org . Explain how DNS resolves
the IP address.
Web Designing
The first step in setting up a
website is planning the web pages
for the websites
Popular web designing softwares
Bluefish
Bootstrap
Adobe Dreamweaver
Microsoft Expression web
HTML
• Hyper Text Markup Language
• It consists of tags and its attributes
used to format web pages
Static web pages
• Web pages that remain the same all
the time until their code is changed
manually.
• It is created using HTML.
Dynamic web pages
• The web pages that contain server side
code which creates a web page each
time it is accessed are called dynamic
web pages.
• Program code that runs on the server is
called server side code.
• Technologies like PHP, ASP, JSP, etc., are
used to develop dynamic web pages
Comparison of
static and dynamic web pages
Static web page
• The content and layout of
web page is fixed
• It never use databases
• It directly run on the
browser and do not require
any server side application
program
• These are easy to develop
Dynamic web page
• The content and layout may
change during run time
• It uses the databases to
generate dynamic content
through queries
• It runs on the server side
application program and
displays the results
• This web page development
requires programming skills
scripts
• These are program codes written inside HTML
page.
• They are written using a text editor like
notepad.
• Scripting languages like JavaScript, VB script,
PHP, Perl, etc., are used to create dynamic
web pages.
scripts
• In an HTML page, a script is written inside <SCRIPT>
and </SCRIPT> tags.
• <SCRIPT> is used to embed or refer to an executable
script within an HTML docment.
• It has the attributes type and src.
• Type attribute is used to identify the scripting
language code embedded within the script tag
• Src attribute is used to specify the URL of an external
file containing scripting code to be linked to a web
page.
• <SCRIPT type = “text/javascript” src =
“scriptcode.js”>
Types of scripting languages
1. Client Side scripting
2. Server Side scripting
Client Side scripting
• It is used to perform any task at the client side
and is executed in the browser.
• Since the script code is executed on the client
browser, it provides a quick response to the
users.
• Disadvantage: there are browsers that do not
support scripts. In some cases users may turn
off the execution of scripts in the browser.
• Eg. JavaScript, VB script
• It is mostly used for validations and also for
performing simple calculations
Server Side scripting
• It is used to create dynamic web pages
and are executed in the server.
• Since the scripts are executed at the
sever, the type and version of the
browser or OS on the client’s computer
does not affect its execution.
• Eg. Perl, PHP, ASP, JSP etc.,
Working of server side scripts
MySQL
Database
Web Server
softwares
PHP
CLIENT
SERVER
1
2 3
4
Working of server side scripts
1
2
3
4
The web page containing server side
scripts requested by the user
Server side scripts which executes and
access the result from the database
Creates simple web pages dynamically
This web page is then sent to the client
browser and the browser displays it
Comparison of the classifications of
scripting languages
Client side scripting
• Script is copied to the client
browser and executed in the
client browser
• Client side scripts are mainly
used for validation of data at
the client
• Users can block client side
scripting
• The type and version of the
web browser affects the
working of a client side script
Server side scripting
• Script remains in the web
server and is executed in the
web server and the web page
produced is returned to the
client browser
• Server side scripts are usually
used to connect to database
and return data from the web
server
• Server side scripting cannot be
blocked by the user
• The features of the web
browser does not affect the
working of server side script
Scripting Languages
• Some of the popular scripting languages
are given below:
1. JavaScript
2. VB Script
3. PHP (Hypertext PreProcessor)
4. ASP (Active Server Pages)
5. JSP (Java Server Pages)
1. JavaScript
• It is a client side scripting
language used to make web
pages interactive
• It was developed by
Brendan Eich while he was
working for Netscape
Communications
Corporation
• It is implemented as an
interpreted language
• Any text editor such as
Geany IDE, notepad etc, can
be used to write JavaScript
code
JavaScript
• It is popular as a client side scripting tool
and works in almost every browser
• It can be inserted inside HTML code or can
be written as an external file and then
included inside HTML file
• The extension name javaScript file is .js
• It is a tool for validation of forms in the
client side and also be used for performing
simple calculations and also for bringing
animations to a web page
Ajax
• It is the technology used in JavaScript
• Ajax is Asynchronous JavaScript and
Extensible Markup Language(XML) and
XML is a markup language which helps
users to create new tags
• It improves the interactivity of the
browsers
Advantage of using Ajax
1. After implementing Ajax on a website,
it does not require the entire page to
be reloaded for displaying dynamic
content on web pages
2. It allows web pages to be updated by
exchanging small amounts of data
between the client and the server
behind the scenes
Since Ajax relies more on JavaScript,
if the browser is not capable of
handling JavaScript or user has turned
off JavaScript functionality in the
browser, the Ajax application will not
work
2. VB Script
• It is a scripting language developed by Microsoft
Corporation based on the popular programming
language Visual Basic.
• It was developed to used either as a client side
scripting language for Microsoft IE or as a server
side scripting language with the Microsoft IIS.
• Browsers other than IE may not be able to correctly
interpret and display the VB script code. Therefore it
is less popular as a client side scripting tool.
• It is popular for server side scripting.
• VBScript as a part of ASP.NET in .NET framework
3. PHP
• It stands for ‘PHP : Hypertext Pre-Processor’.
• It is an open source general-purpose scripting
language that is suited for web development.
• It can be embedded into HTML code.
• It is a server side scripting tool and its code is
similar to Java, C and PERL.
• Its main objective is to develop dynamic web
pages at ease.
PHP
• It was originally created
by Rasmus Lerdorf in
1994 but it is now
developed by The PHP
Group.
• The web page files that
contain PHP code have
the extension .php
PHP
• PHP code is inserted inside HTML code and
when the user request for PHP web page, it is
interpreted and executed on the web server.
• One of the strongest and most significant
features in PHP is its support for database
programming.
• The most common database used with PHP is
MySQL.
Both server softwares are freely downloadable.
4. ASP
• It is a server-side scripting environment that can
be used to create and run interactive web
applications.
• It contains HTML and scripting languages
(VBScript, JavaScript).
• ASP files have the extension .asp
• These files are compiled using the Microsoft’s
web server software, IIS (Internet Information
Server).
• It is executed only on Windows OS
5. JSP
• This technology provides a simple and fast way to
create dynamic web content .
• It is a server side scripting language that was
developed by Sun Microsystems in 1999 .
• It is similar to PHP, but uses Java as programming
language
• JSP files have the extension .jsp
• To run JSP, Apache Tomcat web server is required.
• It is an integral part of Java 2 Platform Enterprise
Edition (J2EE) .
Cascading Style Sheet (CSS)
• It is a style sheet language used for describing
the formatting of a document written in HTML.
• Using CSS, we can control
– The colour of the text,
– The style of fonts,
– The spacing between paragraphs,
– How columns are sized and laid out, borders and its
colours,
– What background images or colours are used, as
well as a variety of other effects in a web page.
CSS can be implemented in
three different ways
• In inline style, the CSS style is applied to each
tag separately using the style attribute in the
body part of the web page.
• Embedded CSS codes are placed within the
<HEAD> part of the web page.
• Linked CSS implementation is done using an
external file with the file extension .css that
contains only CSS code and is linked with the
web page.
Advantage of CSS
• We can reuse the same code for all the pages.
• Since CSS styles are written in a common place,
it separates CSS and HTML, which makes it
easy for maintenance.
• It is easy to understand.
• This also reduces the size of the web page
thereby providing faster downloads for web
pages.
Know your progress
1. The web pages that remain the same until their code is
changed manually are called _______.
– Static web pages
2. Name two technologies that can be used to develop
dynamic web pages .
– JSP, PHP, ASP
3. The tag used to embed scripts is _______ .
– <SCRIPT>……</SCRIPT>
4. Write any one of the uses of client side scripting.
It is used to perform any task at the client side
and is executed in the browser.
Since the script code is executed on the client
browser, it provides a quick response to the
users.
Know your progress
5. A JavaScript file has the extension______ .
– .js
6. What is the advantage of using Ajax?
– After implementing Ajax on a website, it does not
require the entire page to be reloaded for displaying
dynamic content on web pages
– It allows web pages to be updated by exchanging
small amounts of data between the client and the
server behind the scenes
7. Classify the following scripting languages into client
side and server side.
JavaScript, PHP, ASP, VBScript
Client side : JavaScript
Server side : PHP, ASP, VBScript
Know your progress
8. .asp files are compiled using the web server
software __________ .
– IIS (Internet Information Server)
9. List the different ways of implementing CSS
– In inline style, the CSS style is applied to each tag
separately using the style attribute in the body part of
the web page.
– Embedded CSS codes are placed within the <HEAD>
part of the web page.
– Linked CSS implementation is done using an external
file with the file extension .css that contains only CSS
code and is linked with the web page.
Know your progress
10.What are the advantages of CSS?
– We can reuse the same code for all the pages.
– Since CSS styles are written in a common place, it
separates CSS and HTML, which makes it easy for
maintenance.
– It is easy to understand.
– This also reduces the size of the web page
thereby providing faster downloads for web
pages.
Basic concepts of HTML documents
• the most widely used language to write web
pages.
• It is not a Programming Language.
• It is not a Case Sensitive Language.
• Each HTML file is a plain text that defines a set
of commands for creating hypertext
documents. These commands are known as
HTML tags.
HTML (Hyper Text Markup Language)
• Developed originally by
Tim Berners – Lee in 1980
at CERN, a European
Particle Physics Laboratory.
• Now HTML standards are
controlled by W3C an
organisation founded in
1994.
• The HTML files must be saved with .htm or
.html extensions.
• HTML pages are viewed with the help of a
software called Web Browsers.
• Popular Web Browsers are
– Microsoft Internet Explorer
– Mozilla Firefox
– Google Chrome
– Opera etc.,
TAGS
Tags are generally classified into
two types :
1. Container tag
2. Empty tag
Container tag or element
• This type of html tag or elements require pair
tags, ie., a starting tag as well as an ending tag.
• Examples :
<html>…….. </html>
<head>……</head>
<title> …………….</title>
<body>……….</body>
Empty tag or element
• This type of html tag or elements require just a
starting tag and not an ending tag.
• Examples :
<br>
<frame>
<hr>
<img> etc.,
Attributes
An attribute is a special word used
inside the tag to specify additional
information such as colour, alignment,
background etc.,
Examples :
bgcolour, background, type, align etc.,
Basic structure of HTML document
Example of HTML document
<html>
<head>
<title> This is the title of web page </title>
</head>
<body>
Hello, Welcome to the world of web pages !
</body>
</html>
<html> tag
• It indicates that the document begins with
<html> tag and ends with </html> tag.
• DIR attribute :
• It is used to indicate the document direction.
• It can take two values “ltr” and “rtl”.
• It specifies whether the language direction is
from left to right or right to left.
• Example : <html dir = “ltr”>
<html> tag
• LANG attribute :
• It specifies the
language to be
used in the web
page.
• Example :
<html lang = “en”>
Code Language
en English
fr French
de German
it Italian
el Greak
es Spanish
ar Arabic
ja Japanese
hi Hindi
ru russian
<head> tag
• It contains the head of an HTML document,
which holds information about the document
such as its title, scripts used, style definitions
etc.,
• It is also a container tag.
<title> tag
• It is also a container tag pair that contains
the title of the HTML document, which will
appear in the web browser’s title bar.
• The search engines uses the Title to
identify the page.
• It is used inside the tag pair
<head>..</head>
<body> tag
• It is also a container tag pair that specifies
the document body section.
• This part contains the content to be
displayed in the browser window.
• Some attributes of <body>..</body> tag
• Background, bgcolour, text, link, alink,
vlink, leftmargin, topmargin etc.,
background
• It is an attribute of <body> tag.
• It sets an image as background for the
documents body.
• It makes the page more attractive.
• General format :
• <body background = “URL of the picture”>
• Example:
• <body background = “school.jpg”>
To set an image as background for a
web page.
<html>
<head>
<title> Background Image </title>
</head>
<body background = “school.jpg”>
<H1> BEM HIGHER SECONDARY SCHOOL PALAKKAD </H1>
</body>
</html>
bgcolor
• It is an attribute of body tag.
• It specifies a colour for the background of the
document body.
• The value of bgcolor attribute can be given in
two ways: Color_name and Hex_number
• Example :
• <body bgcolor = “blue”>
text
• It is an attribute of body tag.
• It specifies the colour of the text content in the
page.
• By default the browser displays the text in black
colour on a white or grey background.
• The value of text attribute can be given in two
ways: Color_name and Hex_number
• Example :
• <body text = “red”> or <body text = “#ff0000”>
Link, alink and vlink
• A hyperlink is an element, a text or an image
that we can click on, and jump into another
document or another section of the same
document.
• A hyperlink points to a whole document or to
a specific element within a document.
• link, alink and vlink are attributes of body tag
• Link : it specifies the colour of the hyperlinks
that are not visited by the viewer. The default
colour is blue.
• Alink : it specifies the colour of the active
hyperlink. The link remains active only for the
moment the mouse is clicked on it. The default
colour is green.
• Vlink : it specifies the colour of the hyperlink
which is already visited by the viewer. The
default colour is purple.
Leftmargin and Topmargin
• Leftmargin : it is used to leave some blank area
on the left side of the document. The value is
specified in pixels.
• Topmargin : it is used to leave some blank area
at the top edge of the document window.
The value is specified in pixels.
• For example :
<body leftmargin = “60” topmargin = “70”>
Know your progress
1. HTML stands for _______.
– Hyper Text Markup Language.
2. What is container tag ?
– Tags that require opening tag as well as closing
tag are known as container tag.
– Eg. <html>…</html>
3. The type of tag that requires only a starting
tag but not an ending tag is called _______.
– Empty tag
4. State true or false
– Tags are case sensitive.
– FALSE
– Bgcolor is an attribute of <BODY> tag.
– TRUE
– <TITLE> tag is an empty tag.
– FALSE
– Dir is an attribute of <HEAD> tag.
– FALSE
5. Name the attributes of <HTML> tag.
– Dir, Lang
– Eg. <html Dir=“ltr” Lang=“en”>…</html>
6. What is the use of attributes in a tag?
– To provide additional information such as colour, measurement,
location, alignment or other appearances to the web browser.
7. List the different attributes of <BODY> tag.
– Bgcolor, background, text, topmargin, leftmargin, link, vlink, alink
Some common tags
• Used for formatting the text contents in the
body section of the HTML document and
therefore they are called formatting tags.
1. HEADING TAGS <H1> to <H6>
– Main attribute of this tag is align.
– The possible values are left, right, center.
– Eg. <H1 ALIGN = “LEFT”> HEADER-1 </H1>
2. Creating paragraphs - <P> tag
– It indicates a new paragraph and instructs the
browser to add a blank line before the paragraph.
– It is a container tag <P>……..</P>
– Main attribute of this tag is align.
– The possible values are left, right, center, justify.
– Eg. <P ALIGN = “LEFT”> paragraph content </P>
3. Inserting line break - <BR> tag
– It is used to break the current line of text and
continue from the beginning of the next line.
– It is a empty tag <BR> i.e., no ending tag.
4. Creating horizontal line - <HR> tag
– It produces a horizontal line spread across the
width of the browser window.
– It is a empty tag <HR>
– Main attribute of this tag is align, size, width,
color, noshade.
– The possible values for align attribute are left,
right, center.
– Eg. <HR SIZE = “10” WIDTH = “50%” ALIGN =
“CENTER” COLOR = “GOLD” NOSHADE >
5. Centring the content - <CENTER> tag
– It brings the content to the centre of a web
page horizontally.
– The content may be text, image, table etc.,
– It is a container tag <CENTER> ……</CENTER>
– There is no attribute for this tag.
6. Text formatting tags
– <B> - it sets the text style to bold. <B>….</B>
– <I> - it sets the text style bold italics. <I>….</I>
– <U> - it is used to underline a text in HTML.
<U>….</U>
– <S> and <STRIKE> - it sets the text in strike
through style. <STRIKE>….</STRIKE>
– <BIG> - it is used to make the content bigger in
size than the normal text size. <BIG>….</BIG>
– <SMALL> - it is used to make the content
smaller in size than the normal text size.
<SMALL>….</SMALL>
– <STRONG> - it is just the same as <B>
<STRONG>….</STRONG>
– <EM> - it sets the text style italics. It is the same
as that of <I> <EM>….</EM>
– <SUP> - it is used to create supscripts in a web
page. <SUP>….</SUP>
– <SUB> - it is used to create subscripts in a web
page. <SUB>….</SUB>
– <BLOCKQUOTES> and <Q> - it is used to indent
the content enclosed in these tags.
<BLOCKQUOTES>….</BLOCKQUOTES>
Know your progress
1. Name some of the text formatting tags.
– <B>…</B>
– <I>…</I>
– <U>…</U>
– <STRIKE>…</STRIKE>
– <BIG>…</BIG>
– <SMALL>…</SMALL>
– <STRONG>…</STRONG>
– <EM>…</EM>
– <SUB>…</SUB>
– <SUP>…</SUP>
– <BLOCKQUOTE>…</BLOCKQUOTE>
2. List the different attributes of <HR> tag.
– SIZE, WIDTH, ALIGN, COLOR, NOSHADE
3. How many levels of heading tags are available
in HTML?
– Six levels
– <H1>..</H1>
– <H2>..</H2>
– <H3>..</H3>
– <H4>..</H4>
– <H5>..</H5>
– <H6>..</H6>
4. Write an HTML code segment to display X⁴ + Y⁴.
– X <SUP> 3 </SUP> + Y <SUP> 3 </SUP>
5. State True or False.
– <BR> tag is an empty tag –
– TRUE
– <EM> and <I> tags have same usage in HTML document. –
– TRUE
– <U> and <I> tags are not allowed to be used together. –
– FALSE.
6. What is the use of <STRONG> tag?
– it sets the text style Bold. It is the same as that of <B>
7. Pick the odd one out from the following
– HTML, ALIGN, HEAD, CENTER
– ALIGN
<PRE> - Displaying preformatted text
• It is used to display the content as we entered
in the text editor.
• It turn off the automatic formatting applied by
the browser.
• It is a container tag.
• <PRE>………..</PRE>
<ADDRESS> - Displaying the address
• It defines the contact information for the
author / owner of document or an article.
• Most of the browsers display the texts in
italics.
• It is a container tag.
• <ADDRESS>………..</ADDRESS>
<MARQUEE> - Displaying text in a
scrolling Marquee
• It displays a piece of text or image scrolling
horizontally or vertically in the web page.
• It is a container tag.<MARQUEE>...</MARQUEE>
• The list of important attributes of <MARQUEE>.
– HEIGHT, WIDTH, DIRECTION, BEHAVIOUR,
SCROLLDELAY, SCROLLAMOUNT, LOOP, BGCOLOR,
HSPACE, VSPACE
<DIV> - Formatting a block of text
• It is used for defining a section or a block in the
document.
• It is a container tag.<DIV>...</DIV>
• The list of important attributes of <DIV>.
– ALIGN, ID, STYLE
<FONT> - Specifying font
characteristics
• It allows us to change the size, style and colour
of the text enclosed within this tag.
• It is a container tag.<FONT>...</FONT>
• The list of important attributes of <FONT>.
– COLOR – it sets the text colour
– FACE – it specifies font face i.e., type
– SIZE - it specifies the font size whose values ranges
from 1 or 7, with default value 3.
HTML entities for reserved characters
• a few special characters and their equivalent entities.
Character Entity Description
&nbsp; Non Breaking Space
“ &quot; Double quotation mark
‘ &apos; Single quotation mark
& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
© &copy; Copyright Symbol
™ &trade Trademark Symbol
® &reg; Registered Symbol
Adding comments in HTML document
• HTML provides comment tag to insert
comments in the source code.
• HTML comments are placed within
<!-- --> tag.
• It will be completely ignored by the browser.
Inserting images
• <IMG> tag is used to insert images in HTML pages.
• It is an empty tag and it has many attributes.
• SRC is the main attribute and it specifies the file
name of the image to be inserted.
• Other attributes are WIDTH, HEIGHT, VSPACE,
HSPACE, ALIGN, BORDER, ALT
• The possible values for ALIGN attribute are
BOTTOM, MIDDLE, TOP
• <IMG SRC=“book.jpg” HEIGHT=“40” WIDTH =“60”
ALIGN = “BOTTOM” ALT=“Image of an opened
book”>
Know your progress
1. How are special characters represented in
HTML?
– HTML entites
2. Face attribute is used with ______ tag.
– <FONT> TAG
3. List the attributes of <FONT> tag.
– FACE, SIZE, COLOR
4. What is the use of <PRE> tag?
– It is used to display the content as we entered in the
text editor.
5. For scrolling a text, we use ________ tag.
– <MARQUEE>
6. What are the main attributes of <MARQUEE>
tag?
– HEIGHT, WIDTH, DIRECTION, BEHAVIOUR,
SCROLLDELAY, SCROLLAMOUNT, LOOP, BGCOLOR,
HSPACE, VSPACE
7. What is the use of <ADDRESS> tag?
– It defines the contact information for the author /
owner of document or an article.
8. What is the normal font size in <FONT> tag?
– 3
9. Name the main attributes of <DIV> tag.
– ALIGN, ID, STYLE
10.To insert images in an HTML document ______
is used.
– <IMG> TAG
11._________ is the main attribute of <IMG> tag.
– SRC
12.What is the use of ALT attribute of <IMG> tag?
– To specify an alternate text for an image
13.Name the attributes that are used to display an
image in a particular size.
– WIDTH, HEIGHT
14.Which are the attributes that provides
horizontal and vertical spaces between two
images?
– HSPACE, VSPACE
15.Who developed HTML?.
– Tim Berners Lee
16.In HTML, there are mainly two sections. Can
you name them?
– Head section and Body section
17.The default colour of the attribute ALINK is ___.
– GREEN
18.The default colour of the attribute VLINK is ___.
– PURPLE
19.Name the tag which has NOSHADE attribute.
– <HR> tag
20.The default alignment of an image obtained by
using <IMG> tag is ______.
– BOTTOM

More Related Content

What's hot (20)

Static and Dynamic webpage
Static and Dynamic webpageStatic and Dynamic webpage
Static and Dynamic webpage
 
Php mysql ppt
Php mysql pptPhp mysql ppt
Php mysql ppt
 
Web browser
Web browserWeb browser
Web browser
 
Active Server Page(ASP)
Active Server Page(ASP)Active Server Page(ASP)
Active Server Page(ASP)
 
World Wide Web (WWW)
World Wide Web (WWW)World Wide Web (WWW)
World Wide Web (WWW)
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Client & server side scripting
Client & server side scriptingClient & server side scripting
Client & server side scripting
 
Internet
InternetInternet
Internet
 
PHP FUNCTIONS
PHP FUNCTIONSPHP FUNCTIONS
PHP FUNCTIONS
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
1. web technology basics
1. web technology basics1. web technology basics
1. web technology basics
 
Web development tool
Web development toolWeb development tool
Web development tool
 
Client side scripting and server side scripting
Client side scripting and server side scriptingClient side scripting and server side scripting
Client side scripting and server side scripting
 
uniform resource locator
uniform resource locatoruniform resource locator
uniform resource locator
 
Web application architecture
Web application architectureWeb application architecture
Web application architecture
 
Java Servlets
Java ServletsJava Servlets
Java Servlets
 
Php Presentation
Php PresentationPhp Presentation
Php Presentation
 
INTERNET TECHNOLOGY
INTERNET  TECHNOLOGYINTERNET  TECHNOLOGY
INTERNET TECHNOLOGY
 
Unit 1 introduction to web programming
Unit 1 introduction to web programmingUnit 1 introduction to web programming
Unit 1 introduction to web programming
 
Xml
XmlXml
Xml
 

Viewers also liked

Unit II - 3 - Operating System - Process Synchronization
Unit II - 3 - Operating System - Process SynchronizationUnit II - 3 - Operating System - Process Synchronization
Unit II - 3 - Operating System - Process Synchronizationcscarcas
 
Chapter 6 - Process Synchronization
Chapter 6 - Process SynchronizationChapter 6 - Process Synchronization
Chapter 6 - Process SynchronizationWayne Jones Jnr
 
Operating Systems - Synchronization
Operating Systems - SynchronizationOperating Systems - Synchronization
Operating Systems - SynchronizationEmery Berger
 
Process synchronization(deepa)
Process synchronization(deepa)Process synchronization(deepa)
Process synchronization(deepa)Nagarajan
 
Operating System Process Synchronization
Operating System Process SynchronizationOperating System Process Synchronization
Operating System Process SynchronizationHaziq Naeem
 
Web Tech
Web TechWeb Tech
Web TechRupsee
 
Process synchronization in Operating Systems
Process synchronization in Operating SystemsProcess synchronization in Operating Systems
Process synchronization in Operating SystemsRitu Ranjan Shrivastwa
 
OS Process Synchronization, semaphore and Monitors
OS Process Synchronization, semaphore and MonitorsOS Process Synchronization, semaphore and Monitors
OS Process Synchronization, semaphore and Monitorssgpraju
 
Process Synchronization And Deadlocks
Process Synchronization And DeadlocksProcess Synchronization And Deadlocks
Process Synchronization And Deadlockstech2click
 

Viewers also liked (11)

Unit II - 3 - Operating System - Process Synchronization
Unit II - 3 - Operating System - Process SynchronizationUnit II - 3 - Operating System - Process Synchronization
Unit II - 3 - Operating System - Process Synchronization
 
Chapter 6 - Process Synchronization
Chapter 6 - Process SynchronizationChapter 6 - Process Synchronization
Chapter 6 - Process Synchronization
 
Operating Systems - Synchronization
Operating Systems - SynchronizationOperating Systems - Synchronization
Operating Systems - Synchronization
 
Process synchronization(deepa)
Process synchronization(deepa)Process synchronization(deepa)
Process synchronization(deepa)
 
Operating System Process Synchronization
Operating System Process SynchronizationOperating System Process Synchronization
Operating System Process Synchronization
 
Web Tech
Web TechWeb Tech
Web Tech
 
Process synchronization in Operating Systems
Process synchronization in Operating SystemsProcess synchronization in Operating Systems
Process synchronization in Operating Systems
 
Operating system critical section
Operating system   critical sectionOperating system   critical section
Operating system critical section
 
OS Process Synchronization, semaphore and Monitors
OS Process Synchronization, semaphore and MonitorsOS Process Synchronization, semaphore and Monitors
OS Process Synchronization, semaphore and Monitors
 
Process synchronization in operating system
Process synchronization in operating systemProcess synchronization in operating system
Process synchronization in operating system
 
Process Synchronization And Deadlocks
Process Synchronization And DeadlocksProcess Synchronization And Deadlocks
Process Synchronization And Deadlocks
 

Similar to Web technology

Introduction to the Internet and Web.pptx
Introduction to the Internet and Web.pptxIntroduction to the Internet and Web.pptx
Introduction to the Internet and Web.pptxhishamousl
 
Module 1 Basic.pptx
Module 1 Basic.pptxModule 1 Basic.pptx
Module 1 Basic.pptxreddragon32
 
Presentation 1
Presentation 1Presentation 1
Presentation 1aisadhsa
 
How the internet_works
How the internet_worksHow the internet_works
How the internet_worksarun nalam
 
5 introduction to internet
5 introduction to internet5 introduction to internet
5 introduction to internetVedpal Yadav
 
Application layer protocols
Application layer protocolsApplication layer protocols
Application layer protocolsFabMinds
 
Week two lecture
Week two lectureWeek two lecture
Week two lectureHarry Essel
 
Web-Server & It's Architecture.pptx
Web-Server & It's Architecture.pptxWeb-Server & It's Architecture.pptx
Web-Server & It's Architecture.pptxAlokKumar250045
 
How the internet works
How the internet worksHow the internet works
How the internet worksftcim
 
Clients and Servers.ppt
Clients and Servers.pptClients and Servers.ppt
Clients and Servers.pptMohammed Ilyas
 
Lesson+3 v2.0 slide_show [autosaved]
Lesson+3 v2.0 slide_show [autosaved]Lesson+3 v2.0 slide_show [autosaved]
Lesson+3 v2.0 slide_show [autosaved]gmidavis
 
Module 5 Application and presentation Layer .pptx
Module 5 Application and presentation Layer .pptxModule 5 Application and presentation Layer .pptx
Module 5 Application and presentation Layer .pptxAASTHAJAJOO
 
Add a web server
Add a web serverAdd a web server
Add a web serverAgCharu
 
Introduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptxIntroduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptxrohitkumar54448
 

Similar to Web technology (20)

Introduction to the Internet and Web.pptx
Introduction to the Internet and Web.pptxIntroduction to the Internet and Web.pptx
Introduction to the Internet and Web.pptx
 
Module 1 Basic.pptx
Module 1 Basic.pptxModule 1 Basic.pptx
Module 1 Basic.pptx
 
Web technology Unit I Part C
Web technology Unit I  Part CWeb technology Unit I  Part C
Web technology Unit I Part C
 
Presentation 1
Presentation 1Presentation 1
Presentation 1
 
How the internet_works
How the internet_worksHow the internet_works
How the internet_works
 
WP Chap 1 & 2.pptx
WP Chap 1 & 2.pptxWP Chap 1 & 2.pptx
WP Chap 1 & 2.pptx
 
5 introduction to internet
5 introduction to internet5 introduction to internet
5 introduction to internet
 
Application layer protocols
Application layer protocolsApplication layer protocols
Application layer protocols
 
Week two lecture
Week two lectureWeek two lecture
Week two lecture
 
Web-Server & It's Architecture.pptx
Web-Server & It's Architecture.pptxWeb-Server & It's Architecture.pptx
Web-Server & It's Architecture.pptx
 
applayer.pptx
applayer.pptxapplayer.pptx
applayer.pptx
 
Internet
InternetInternet
Internet
 
How the internet works
How the internet worksHow the internet works
How the internet works
 
Clients and Servers.ppt
Clients and Servers.pptClients and Servers.ppt
Clients and Servers.ppt
 
Lesson+3 v2.0 slide_show [autosaved]
Lesson+3 v2.0 slide_show [autosaved]Lesson+3 v2.0 slide_show [autosaved]
Lesson+3 v2.0 slide_show [autosaved]
 
Module 5 Application and presentation Layer .pptx
Module 5 Application and presentation Layer .pptxModule 5 Application and presentation Layer .pptx
Module 5 Application and presentation Layer .pptx
 
Add a web server
Add a web serverAdd a web server
Add a web server
 
Web admin
Web adminWeb admin
Web admin
 
Unit 4
Unit 4Unit 4
Unit 4
 
Introduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptxIntroduction_to_Intndhjehddhjdhrjkrhernet.pptx
Introduction_to_Intndhjehddhjdhrjkrhernet.pptx
 

More from Selvin Josy Bai Somu (8)

Client sidescripting javascript
Client sidescripting javascriptClient sidescripting javascript
Client sidescripting javascript
 
Data structure stack&queue basics
Data structure stack&queue   basicsData structure stack&queue   basics
Data structure stack&queue basics
 
Files in c++
Files in c++Files in c++
Files in c++
 
Constructor and destructor
Constructor and destructorConstructor and destructor
Constructor and destructor
 
Inheritance
InheritanceInheritance
Inheritance
 
Polymorphism
PolymorphismPolymorphism
Polymorphism
 
Function overloading
Function overloadingFunction overloading
Function overloading
 
Basics of c++
Basics of c++Basics of c++
Basics of c++
 

Recently uploaded

Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663Call Girls Mumbai
 
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...tanu pandey
 
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...Sheetaleventcompany
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLimonikaupta
 
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Onlineanilsa9823
 
How is AI changing journalism? (v. April 2024)
How is AI changing journalism? (v. April 2024)How is AI changing journalism? (v. April 2024)
How is AI changing journalism? (v. April 2024)Damian Radcliffe
 
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...Delhi Call girls
 
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)Delhi Call girls
 
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779Delhi Call girls
 
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.CarlotaBedoya1
 
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...Call Girls in Nagpur High Profile
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableSeo
 
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.soniya singh
 
AWS Community DAY Albertini-Ellan Cloud Security (1).pptx
AWS Community DAY Albertini-Ellan Cloud Security (1).pptxAWS Community DAY Albertini-Ellan Cloud Security (1).pptx
AWS Community DAY Albertini-Ellan Cloud Security (1).pptxellan12
 

Recently uploaded (20)

Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
 
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
✂️ 👅 Independent Andheri Escorts With Room Vashi Call Girls 💃 9004004663
 
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
 
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
Call Girls Service Chandigarh Lucky ❤️ 7710465962 Independent Call Girls In C...
 
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRLLucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
Lucknow ❤CALL GIRL 88759*99948 ❤CALL GIRLS IN Lucknow ESCORT SERVICE❤CALL GIRL
 
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service OnlineCALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Online
CALL ON ➥8923113531 🔝Call Girls Lucknow Lucknow best sexual service Online
 
@9999965857 🫦 Sexy Desi Call Girls Laxmi Nagar 💓 High Profile Escorts Delhi 🫶
@9999965857 🫦 Sexy Desi Call Girls Laxmi Nagar 💓 High Profile Escorts Delhi 🫶@9999965857 🫦 Sexy Desi Call Girls Laxmi Nagar 💓 High Profile Escorts Delhi 🫶
@9999965857 🫦 Sexy Desi Call Girls Laxmi Nagar 💓 High Profile Escorts Delhi 🫶
 
How is AI changing journalism? (v. April 2024)
How is AI changing journalism? (v. April 2024)How is AI changing journalism? (v. April 2024)
How is AI changing journalism? (v. April 2024)
 
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
 
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Saket Delhi 💯Call Us 🔝8264348440🔝
 
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
Hire↠Young Call Girls in Tilak nagar (Delhi) ☎️ 9205541914 ☎️ Independent Esc...
 
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
WhatsApp 📞 8448380779 ✅Call Girls In Mamura Sector 66 ( Noida)
 
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
Best VIP Call Girls Noida Sector 75 Call Me: 8448380779
 
Rohini Sector 26 Call Girls Delhi 9999965857 @Sabina Saikh No Advance
Rohini Sector 26 Call Girls Delhi 9999965857 @Sabina Saikh No AdvanceRohini Sector 26 Call Girls Delhi 9999965857 @Sabina Saikh No Advance
Rohini Sector 26 Call Girls Delhi 9999965857 @Sabina Saikh No Advance
 
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.
INDIVIDUAL ASSIGNMENT #3 CBG, PRESENTATION.
 
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...Top Rated  Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
Top Rated Pune Call Girls Daund ⟟ 6297143586 ⟟ Call Me For Genuine Sex Servi...
 
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service AvailableCall Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
Call Girls Ludhiana Just Call 98765-12871 Top Class Call Girl Service Available
 
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Model Towh Delhi 💯Call Us 🔝8264348440🔝
 
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Sarai Rohilla Escort Service Delhi N.C.R.
 
AWS Community DAY Albertini-Ellan Cloud Security (1).pptx
AWS Community DAY Albertini-Ellan Cloud Security (1).pptxAWS Community DAY Albertini-Ellan Cloud Security (1).pptx
AWS Community DAY Albertini-Ellan Cloud Security (1).pptx
 

Web technology

  • 1.
  • 2. WE ARE GOING TO DISCUSS…. • COMMUNICATION ON THE WEB • WEB SERVER TECHNOLOGIES • WEB DESIGNING • STATIC AND DYNAMIC WEB PAGES • SCRIPTS AND TYPES OF SCRIPTING LANGUAGES • POPULAR SCRIPTING LANGUAGES • CASCADING STYLE SHEET • BASIC CONCEPTS OF HTML DOCUMENTS
  • 3. We rely on different websites for various purposes like….. • Submitting online applications • Viewing web contents • Watching movies • Banking transactions • Purchase of goods through online transaction and so on.
  • 4. A website is a collection of web pages. Web pages are developed with the help of a language called Hyper Text Markup Language(HTML). It is also a language of Internet. A web page may contain texts, graphics, sounds, animations, and movies.
  • 5.
  • 6. How is this website made available on the Internet? These web pages are to be stored in web servers connected to the Internet, to be made available to others.
  • 9. Communication on web In order to communicate on the web, computers/devices need to understand each other. This is made possible by making all devices follow the same protocol, namely TCP/IP.
  • 10. Communication on web URL is sent to DNS server to obtain its IP address Browser connects to this server using the IP address. After process this request, the web page to be displayed is sent to the client. In order to communicate on the web, computers/devices need to understand each other. This is made possible by making all devices follow the same protocol, namely TCP/IP.
  • 12. Routing of a data packet from sender to a recipient TCP breaks the data into packets The packets travel from router to router over the internet according to the IP TCP reassembles the data packets back to original form
  • 13.
  • 14. In the Internet, there are several types of communication. • Websites are accessed using HTTP. • Email communication happens using SMTP. • Internet Protocol provides the basics of communication over Internet.
  • 15. The role of routers in transporting data in Internet • The routers need not be programmed separately to handle different types of data. • They do not need to know about the data they are transporting. • It concerned only about the address to which the packet is to be delivered
  • 16. • The openness of the data part of the packet gives the freedom to design new protocols for the Internet. • This openness and flexibility of TCP/IP that led to the development of protocols for – social media websites to handle messages, – content websites to handle video and audio, – banking websites to handle money transfer securely, etc • It is a deciding factor for the economic success of the Internet.
  • 17. Communication on the web can be categorised as 1. Client (browser) to webserver 2. Web server to Web server communication
  • 18. Essential for Communication over the Internet 1. Authentication : is the process of determining whether a computer / server is the computer that it claims to be. 2. Security : it should be provided to communication over Internet so that the messages are not intercepted and modified by hackers.
  • 19. 1. Client (browser) to webserver
  • 20. 1. Client (browser) to webserver • It does not usually require authentication. • But in the case of web based banking applications / e-mail services, user names and passwords are required to be sent to the server. • This information cannot be sent to the server in plain text due to security reasons. • The hackers may steal usernames and passwords, if it is communicated and shared as plain text.
  • 21. 1. Client (browser) to webserver
  • 22. HTTPS (Hyper Text Transfer Protocol Secure) • HTTPS (Hyper Text Transfer Protocol Secure) technology to encrypt the username and password and then send it to the server. • It works using SSL (Secure Sockets Layer)
  • 23. SSL (Secure Sockets Layer) • SSL provides a standard security technology for establishing an encrypted connection between computers on Internet. • It provides security capabilities to HTTP. • This protocol not only ensures privacy, but also ensures that no other website can impersonate the user’s login account not alter the information sent. • Verisign Inc. is a certification authority.
  • 24.
  • 25. Client-Server authentication process 1. Browser requests to start a secure SSI session 2. Server returns its SSL certificate 3. Browser checks that : Certificate is valid, signed by someone user trusts. If valid, browser initiates and encrypted session 4. Server and Browser encrypts all the transmitted data.
  • 26. 2. Web server to web server communication • It may be required in certain web applications. • The web server of an online shopping website needs to send confidential information to a bank web server and vice versa. • In such cases the web servers of the merchant and the bank are to be authenticated. • Digital certificates – • Payment gateway – a bridge
  • 27. 2. Web server to web server communication User placing order Merchant’s Web server Payment gateway Merchant bank account Bank WS order Server response Request to Payment gateway Payment gateway to response Requestfor conformation Bank response
  • 29. Web server • It is a server computer that hosts websites • It enables us to deliver web pages or services like e-mail, blog etc., to users on the Internet • It consists of a server computer that runs a server OS and a web software installed on it for providing services over the Internet
  • 30. Web server • It is a powerful computer which is always switched on and connected to a high bandwidth Internet connection • This will facilitate Internet users around the world to access the websites and services hosted by it at any point of time • It can have single or multiple processors, fast access RAM, high performance hard disks, Ethernet cards that supports fast communication • It is usually installed in a data center to ensure faster Internet connectivity and redundant power supply
  • 32. Data center • It is a dedicated physical location where organisations house their servers and networking systems • It is used for storing, processing and serving large amounts of mission-critical data to their clients • It requires extensive backup power supply systems, cooling systems, high speed networking connections and security systems
  • 33. Popular Server OS • Linux distributions –Redhat, openSUSE, Debian, Ubuntu, etc) • Microsoft Windows Server • FreeBSD • Oracle Solaris etc.,
  • 34. Web server software • After setting up a server, a web server software has to be installed in it and configured according to the given OS • The web server software is a program that uses the client-server model and the HTTP to ensure timely distribution of files stored in it to the users
  • 35. Some of the preferred web server packages are • Apache Server • Microsoft Internet Information Server (IIS) • Google Web Server (GWS) • nginex (engine-x) Other Software packages : FTP, e-mail, DNS, databases etc
  • 36. Hardware Ports • It is used to connect external devices to the computer • These devices communicate with the computer using these ports
  • 37. Software Ports • It is used to connect a client computer to a server to access its services like HTTP, FTP, SMTP etc, • To distinguish the ports, the software ports are given unique numbers • The purpose of software ports is to identify different services like e-mail, file transfer etc, running on a single server computer
  • 38. Software Ports • Port number is a 16-bit number which when added to a computer’s IP address / URL, can be used for communicating with a particular service available on that server • For example : http://www.google.co.in:80 protocol Domain name Port number
  • 39. Some well-known ports and the associated services Default Port Number Service 20 & 21 FTP 22 SSH 25 SMTP 53 DNS 80 HTTP 110 POP3 443 HTTPS
  • 40. DNS Servers It runs a special purpose networking software that contains a database of domain names and IP addresses
  • 41. DNS Servers The DNS servers are arranged in a hierarchy. At the top level there are 13 root servers that contains name server information for all the generic top-level domains
  • 42. How the DNS resolves the IP address? 1. The browser first searches it local memory (mini cache). If found, the browser uses it 2. If it is not found, it checks the OS’s local cache for the IP address 3. If it is not found there, it searches the DNS server of the local ISP 4. In the absence of the domain name in the ISP’s DNS server, the ISP’s DNS server initiates a recursive search 5. If found returns this IP address to the browser and the webpage is displayed otherwise it returns the message “Server not found” in the browser window
  • 43. How the DNS searches and locates the IP address of a domain name? Client Program Operating System Your ISP Web Browser DNS Server DNS Resolver Recursive DNS search
  • 44.
  • 45. Know your progress 1. Name a protocol that works on top of the Internet Protocol(IP) - HTTP, SMTP 2. Expand HTTPS Hyper Text Transmission Protocol Secure 3. What are the advantages of installing web servers in data centers? To ensure faster Internet connectivity and redundant power supply, a webserver is usually installed in a data center
  • 46. Know your progress 4. State whether true or false a. The web server software is a program that uses the client-server model. True b. The web server consists of server OS and web server software True 5. The number of bits in a software port number is _____ 16 6. A Domain Name System returns the _____________ of a domain name IP address
  • 47. Know your progress 9. The social media websites developed their own protocol for communicating over the Internet. How is this possible when Internet uses TCP/IP protocol? – The openness of the data part of the packet gives the freedom to design new protocols for the Internet. – This openness and flexibility of TCP/IP that led to the development of protocols for social media websites to handle messages, content websites to handle video and audio, and banking websites to handle money transfer securely, etc – It is a deciding factor for the economic success of the Internet.
  • 48. Know your progress 10.The username and password of e-mail account has to be sent securely over the Internet a. Name the technology used to send the data to the server HTTPS b. How does this technology support secure data communication? HTTPS works using SSL (Secure Sockets Layer). SSL provides a standard security technology for establishing an encrypted connection between computers on Internet.
  • 49. Know your progress 11.ABC Engineering College has about 1000 computers connected to the Internet, in its campus. What is the advantage of having a local DNS server in the college’s intranet? This local DNS server contains a list of domain names and their IP addresses which the users in the organisation regularly access. This list can be updated periodically to include new domain names. Whenever a computer in the intranet tries to access a website in the Internet, it first searches for the domain name in the local DNS server and finds the IP address. This speeds up the Internet access in the organisation. Only if the domain name is not found in the local DNS server, it searches the DNS of ISP
  • 50. Know your progress 12.Write an example of a web server OS and a web server package Linux distributions (Redhat, openSUSE, Debian, Ubuntu, etc) Microsoft Windows Server FreeBSD Oracle Solaris etc., 13.What is the use of software ports in a web server? To identify different services like e-mail, file transfer, etc., running on a single server computer.
  • 51. Know your progress 13.The port used for HTTP is ________ 80 14.Suppose you are browsing the website www.prdkerala.org . Explain how DNS resolves the IP address.
  • 53. The first step in setting up a website is planning the web pages for the websites
  • 54. Popular web designing softwares Bluefish Bootstrap Adobe Dreamweaver Microsoft Expression web
  • 55. HTML • Hyper Text Markup Language • It consists of tags and its attributes used to format web pages
  • 56. Static web pages • Web pages that remain the same all the time until their code is changed manually. • It is created using HTML.
  • 57. Dynamic web pages • The web pages that contain server side code which creates a web page each time it is accessed are called dynamic web pages. • Program code that runs on the server is called server side code. • Technologies like PHP, ASP, JSP, etc., are used to develop dynamic web pages
  • 58. Comparison of static and dynamic web pages Static web page • The content and layout of web page is fixed • It never use databases • It directly run on the browser and do not require any server side application program • These are easy to develop Dynamic web page • The content and layout may change during run time • It uses the databases to generate dynamic content through queries • It runs on the server side application program and displays the results • This web page development requires programming skills
  • 59. scripts • These are program codes written inside HTML page. • They are written using a text editor like notepad. • Scripting languages like JavaScript, VB script, PHP, Perl, etc., are used to create dynamic web pages.
  • 60. scripts • In an HTML page, a script is written inside <SCRIPT> and </SCRIPT> tags. • <SCRIPT> is used to embed or refer to an executable script within an HTML docment. • It has the attributes type and src. • Type attribute is used to identify the scripting language code embedded within the script tag • Src attribute is used to specify the URL of an external file containing scripting code to be linked to a web page. • <SCRIPT type = “text/javascript” src = “scriptcode.js”>
  • 61. Types of scripting languages 1. Client Side scripting 2. Server Side scripting
  • 62. Client Side scripting • It is used to perform any task at the client side and is executed in the browser. • Since the script code is executed on the client browser, it provides a quick response to the users. • Disadvantage: there are browsers that do not support scripts. In some cases users may turn off the execution of scripts in the browser. • Eg. JavaScript, VB script • It is mostly used for validations and also for performing simple calculations
  • 63. Server Side scripting • It is used to create dynamic web pages and are executed in the server. • Since the scripts are executed at the sever, the type and version of the browser or OS on the client’s computer does not affect its execution. • Eg. Perl, PHP, ASP, JSP etc.,
  • 64. Working of server side scripts MySQL Database Web Server softwares PHP CLIENT SERVER 1 2 3 4
  • 65. Working of server side scripts 1 2 3 4 The web page containing server side scripts requested by the user Server side scripts which executes and access the result from the database Creates simple web pages dynamically This web page is then sent to the client browser and the browser displays it
  • 66. Comparison of the classifications of scripting languages Client side scripting • Script is copied to the client browser and executed in the client browser • Client side scripts are mainly used for validation of data at the client • Users can block client side scripting • The type and version of the web browser affects the working of a client side script Server side scripting • Script remains in the web server and is executed in the web server and the web page produced is returned to the client browser • Server side scripts are usually used to connect to database and return data from the web server • Server side scripting cannot be blocked by the user • The features of the web browser does not affect the working of server side script
  • 67. Scripting Languages • Some of the popular scripting languages are given below: 1. JavaScript 2. VB Script 3. PHP (Hypertext PreProcessor) 4. ASP (Active Server Pages) 5. JSP (Java Server Pages)
  • 68. 1. JavaScript • It is a client side scripting language used to make web pages interactive • It was developed by Brendan Eich while he was working for Netscape Communications Corporation • It is implemented as an interpreted language • Any text editor such as Geany IDE, notepad etc, can be used to write JavaScript code
  • 69. JavaScript • It is popular as a client side scripting tool and works in almost every browser • It can be inserted inside HTML code or can be written as an external file and then included inside HTML file • The extension name javaScript file is .js • It is a tool for validation of forms in the client side and also be used for performing simple calculations and also for bringing animations to a web page
  • 70. Ajax • It is the technology used in JavaScript • Ajax is Asynchronous JavaScript and Extensible Markup Language(XML) and XML is a markup language which helps users to create new tags • It improves the interactivity of the browsers
  • 71. Advantage of using Ajax 1. After implementing Ajax on a website, it does not require the entire page to be reloaded for displaying dynamic content on web pages 2. It allows web pages to be updated by exchanging small amounts of data between the client and the server behind the scenes
  • 72. Since Ajax relies more on JavaScript, if the browser is not capable of handling JavaScript or user has turned off JavaScript functionality in the browser, the Ajax application will not work
  • 73. 2. VB Script • It is a scripting language developed by Microsoft Corporation based on the popular programming language Visual Basic. • It was developed to used either as a client side scripting language for Microsoft IE or as a server side scripting language with the Microsoft IIS. • Browsers other than IE may not be able to correctly interpret and display the VB script code. Therefore it is less popular as a client side scripting tool. • It is popular for server side scripting. • VBScript as a part of ASP.NET in .NET framework
  • 74. 3. PHP • It stands for ‘PHP : Hypertext Pre-Processor’. • It is an open source general-purpose scripting language that is suited for web development. • It can be embedded into HTML code. • It is a server side scripting tool and its code is similar to Java, C and PERL. • Its main objective is to develop dynamic web pages at ease.
  • 75. PHP • It was originally created by Rasmus Lerdorf in 1994 but it is now developed by The PHP Group. • The web page files that contain PHP code have the extension .php
  • 76. PHP • PHP code is inserted inside HTML code and when the user request for PHP web page, it is interpreted and executed on the web server. • One of the strongest and most significant features in PHP is its support for database programming. • The most common database used with PHP is MySQL.
  • 77. Both server softwares are freely downloadable.
  • 78. 4. ASP • It is a server-side scripting environment that can be used to create and run interactive web applications. • It contains HTML and scripting languages (VBScript, JavaScript). • ASP files have the extension .asp • These files are compiled using the Microsoft’s web server software, IIS (Internet Information Server). • It is executed only on Windows OS
  • 79. 5. JSP • This technology provides a simple and fast way to create dynamic web content . • It is a server side scripting language that was developed by Sun Microsystems in 1999 . • It is similar to PHP, but uses Java as programming language • JSP files have the extension .jsp • To run JSP, Apache Tomcat web server is required. • It is an integral part of Java 2 Platform Enterprise Edition (J2EE) .
  • 80. Cascading Style Sheet (CSS) • It is a style sheet language used for describing the formatting of a document written in HTML. • Using CSS, we can control – The colour of the text, – The style of fonts, – The spacing between paragraphs, – How columns are sized and laid out, borders and its colours, – What background images or colours are used, as well as a variety of other effects in a web page.
  • 81. CSS can be implemented in three different ways • In inline style, the CSS style is applied to each tag separately using the style attribute in the body part of the web page. • Embedded CSS codes are placed within the <HEAD> part of the web page. • Linked CSS implementation is done using an external file with the file extension .css that contains only CSS code and is linked with the web page.
  • 82. Advantage of CSS • We can reuse the same code for all the pages. • Since CSS styles are written in a common place, it separates CSS and HTML, which makes it easy for maintenance. • It is easy to understand. • This also reduces the size of the web page thereby providing faster downloads for web pages.
  • 83. Know your progress 1. The web pages that remain the same until their code is changed manually are called _______. – Static web pages 2. Name two technologies that can be used to develop dynamic web pages . – JSP, PHP, ASP 3. The tag used to embed scripts is _______ . – <SCRIPT>……</SCRIPT> 4. Write any one of the uses of client side scripting. It is used to perform any task at the client side and is executed in the browser. Since the script code is executed on the client browser, it provides a quick response to the users.
  • 84. Know your progress 5. A JavaScript file has the extension______ . – .js 6. What is the advantage of using Ajax? – After implementing Ajax on a website, it does not require the entire page to be reloaded for displaying dynamic content on web pages – It allows web pages to be updated by exchanging small amounts of data between the client and the server behind the scenes 7. Classify the following scripting languages into client side and server side. JavaScript, PHP, ASP, VBScript Client side : JavaScript Server side : PHP, ASP, VBScript
  • 85. Know your progress 8. .asp files are compiled using the web server software __________ . – IIS (Internet Information Server) 9. List the different ways of implementing CSS – In inline style, the CSS style is applied to each tag separately using the style attribute in the body part of the web page. – Embedded CSS codes are placed within the <HEAD> part of the web page. – Linked CSS implementation is done using an external file with the file extension .css that contains only CSS code and is linked with the web page.
  • 86. Know your progress 10.What are the advantages of CSS? – We can reuse the same code for all the pages. – Since CSS styles are written in a common place, it separates CSS and HTML, which makes it easy for maintenance. – It is easy to understand. – This also reduces the size of the web page thereby providing faster downloads for web pages.
  • 87. Basic concepts of HTML documents • the most widely used language to write web pages. • It is not a Programming Language. • It is not a Case Sensitive Language. • Each HTML file is a plain text that defines a set of commands for creating hypertext documents. These commands are known as HTML tags.
  • 88. HTML (Hyper Text Markup Language) • Developed originally by Tim Berners – Lee in 1980 at CERN, a European Particle Physics Laboratory. • Now HTML standards are controlled by W3C an organisation founded in 1994.
  • 89. • The HTML files must be saved with .htm or .html extensions. • HTML pages are viewed with the help of a software called Web Browsers. • Popular Web Browsers are – Microsoft Internet Explorer – Mozilla Firefox – Google Chrome – Opera etc.,
  • 90. TAGS Tags are generally classified into two types : 1. Container tag 2. Empty tag
  • 91. Container tag or element • This type of html tag or elements require pair tags, ie., a starting tag as well as an ending tag. • Examples : <html>…….. </html> <head>……</head> <title> …………….</title> <body>……….</body>
  • 92. Empty tag or element • This type of html tag or elements require just a starting tag and not an ending tag. • Examples : <br> <frame> <hr> <img> etc.,
  • 93. Attributes An attribute is a special word used inside the tag to specify additional information such as colour, alignment, background etc., Examples : bgcolour, background, type, align etc.,
  • 94. Basic structure of HTML document
  • 95. Example of HTML document <html> <head> <title> This is the title of web page </title> </head> <body> Hello, Welcome to the world of web pages ! </body> </html>
  • 96. <html> tag • It indicates that the document begins with <html> tag and ends with </html> tag. • DIR attribute : • It is used to indicate the document direction. • It can take two values “ltr” and “rtl”. • It specifies whether the language direction is from left to right or right to left. • Example : <html dir = “ltr”>
  • 97. <html> tag • LANG attribute : • It specifies the language to be used in the web page. • Example : <html lang = “en”> Code Language en English fr French de German it Italian el Greak es Spanish ar Arabic ja Japanese hi Hindi ru russian
  • 98. <head> tag • It contains the head of an HTML document, which holds information about the document such as its title, scripts used, style definitions etc., • It is also a container tag.
  • 99. <title> tag • It is also a container tag pair that contains the title of the HTML document, which will appear in the web browser’s title bar. • The search engines uses the Title to identify the page. • It is used inside the tag pair <head>..</head>
  • 100. <body> tag • It is also a container tag pair that specifies the document body section. • This part contains the content to be displayed in the browser window. • Some attributes of <body>..</body> tag • Background, bgcolour, text, link, alink, vlink, leftmargin, topmargin etc.,
  • 101. background • It is an attribute of <body> tag. • It sets an image as background for the documents body. • It makes the page more attractive. • General format : • <body background = “URL of the picture”> • Example: • <body background = “school.jpg”>
  • 102. To set an image as background for a web page. <html> <head> <title> Background Image </title> </head> <body background = “school.jpg”> <H1> BEM HIGHER SECONDARY SCHOOL PALAKKAD </H1> </body> </html>
  • 103. bgcolor • It is an attribute of body tag. • It specifies a colour for the background of the document body. • The value of bgcolor attribute can be given in two ways: Color_name and Hex_number • Example : • <body bgcolor = “blue”>
  • 104. text • It is an attribute of body tag. • It specifies the colour of the text content in the page. • By default the browser displays the text in black colour on a white or grey background. • The value of text attribute can be given in two ways: Color_name and Hex_number • Example : • <body text = “red”> or <body text = “#ff0000”>
  • 105. Link, alink and vlink • A hyperlink is an element, a text or an image that we can click on, and jump into another document or another section of the same document. • A hyperlink points to a whole document or to a specific element within a document. • link, alink and vlink are attributes of body tag
  • 106. • Link : it specifies the colour of the hyperlinks that are not visited by the viewer. The default colour is blue. • Alink : it specifies the colour of the active hyperlink. The link remains active only for the moment the mouse is clicked on it. The default colour is green. • Vlink : it specifies the colour of the hyperlink which is already visited by the viewer. The default colour is purple.
  • 107. Leftmargin and Topmargin • Leftmargin : it is used to leave some blank area on the left side of the document. The value is specified in pixels. • Topmargin : it is used to leave some blank area at the top edge of the document window. The value is specified in pixels. • For example : <body leftmargin = “60” topmargin = “70”>
  • 108. Know your progress 1. HTML stands for _______. – Hyper Text Markup Language. 2. What is container tag ? – Tags that require opening tag as well as closing tag are known as container tag. – Eg. <html>…</html> 3. The type of tag that requires only a starting tag but not an ending tag is called _______. – Empty tag
  • 109. 4. State true or false – Tags are case sensitive. – FALSE – Bgcolor is an attribute of <BODY> tag. – TRUE – <TITLE> tag is an empty tag. – FALSE – Dir is an attribute of <HEAD> tag. – FALSE 5. Name the attributes of <HTML> tag. – Dir, Lang – Eg. <html Dir=“ltr” Lang=“en”>…</html> 6. What is the use of attributes in a tag? – To provide additional information such as colour, measurement, location, alignment or other appearances to the web browser. 7. List the different attributes of <BODY> tag. – Bgcolor, background, text, topmargin, leftmargin, link, vlink, alink
  • 110. Some common tags • Used for formatting the text contents in the body section of the HTML document and therefore they are called formatting tags. 1. HEADING TAGS <H1> to <H6> – Main attribute of this tag is align. – The possible values are left, right, center. – Eg. <H1 ALIGN = “LEFT”> HEADER-1 </H1>
  • 111. 2. Creating paragraphs - <P> tag – It indicates a new paragraph and instructs the browser to add a blank line before the paragraph. – It is a container tag <P>……..</P> – Main attribute of this tag is align. – The possible values are left, right, center, justify. – Eg. <P ALIGN = “LEFT”> paragraph content </P> 3. Inserting line break - <BR> tag – It is used to break the current line of text and continue from the beginning of the next line. – It is a empty tag <BR> i.e., no ending tag.
  • 112. 4. Creating horizontal line - <HR> tag – It produces a horizontal line spread across the width of the browser window. – It is a empty tag <HR> – Main attribute of this tag is align, size, width, color, noshade. – The possible values for align attribute are left, right, center. – Eg. <HR SIZE = “10” WIDTH = “50%” ALIGN = “CENTER” COLOR = “GOLD” NOSHADE >
  • 113. 5. Centring the content - <CENTER> tag – It brings the content to the centre of a web page horizontally. – The content may be text, image, table etc., – It is a container tag <CENTER> ……</CENTER> – There is no attribute for this tag.
  • 114. 6. Text formatting tags – <B> - it sets the text style to bold. <B>….</B> – <I> - it sets the text style bold italics. <I>….</I> – <U> - it is used to underline a text in HTML. <U>….</U> – <S> and <STRIKE> - it sets the text in strike through style. <STRIKE>….</STRIKE> – <BIG> - it is used to make the content bigger in size than the normal text size. <BIG>….</BIG> – <SMALL> - it is used to make the content smaller in size than the normal text size. <SMALL>….</SMALL>
  • 115. – <STRONG> - it is just the same as <B> <STRONG>….</STRONG> – <EM> - it sets the text style italics. It is the same as that of <I> <EM>….</EM> – <SUP> - it is used to create supscripts in a web page. <SUP>….</SUP> – <SUB> - it is used to create subscripts in a web page. <SUB>….</SUB> – <BLOCKQUOTES> and <Q> - it is used to indent the content enclosed in these tags. <BLOCKQUOTES>….</BLOCKQUOTES>
  • 116. Know your progress 1. Name some of the text formatting tags. – <B>…</B> – <I>…</I> – <U>…</U> – <STRIKE>…</STRIKE> – <BIG>…</BIG> – <SMALL>…</SMALL> – <STRONG>…</STRONG> – <EM>…</EM> – <SUB>…</SUB> – <SUP>…</SUP> – <BLOCKQUOTE>…</BLOCKQUOTE>
  • 117. 2. List the different attributes of <HR> tag. – SIZE, WIDTH, ALIGN, COLOR, NOSHADE 3. How many levels of heading tags are available in HTML? – Six levels – <H1>..</H1> – <H2>..</H2> – <H3>..</H3> – <H4>..</H4> – <H5>..</H5> – <H6>..</H6>
  • 118. 4. Write an HTML code segment to display X⁴ + Y⁴. – X <SUP> 3 </SUP> + Y <SUP> 3 </SUP> 5. State True or False. – <BR> tag is an empty tag – – TRUE – <EM> and <I> tags have same usage in HTML document. – – TRUE – <U> and <I> tags are not allowed to be used together. – – FALSE. 6. What is the use of <STRONG> tag? – it sets the text style Bold. It is the same as that of <B> 7. Pick the odd one out from the following – HTML, ALIGN, HEAD, CENTER – ALIGN
  • 119. <PRE> - Displaying preformatted text • It is used to display the content as we entered in the text editor. • It turn off the automatic formatting applied by the browser. • It is a container tag. • <PRE>………..</PRE>
  • 120. <ADDRESS> - Displaying the address • It defines the contact information for the author / owner of document or an article. • Most of the browsers display the texts in italics. • It is a container tag. • <ADDRESS>………..</ADDRESS>
  • 121. <MARQUEE> - Displaying text in a scrolling Marquee • It displays a piece of text or image scrolling horizontally or vertically in the web page. • It is a container tag.<MARQUEE>...</MARQUEE> • The list of important attributes of <MARQUEE>. – HEIGHT, WIDTH, DIRECTION, BEHAVIOUR, SCROLLDELAY, SCROLLAMOUNT, LOOP, BGCOLOR, HSPACE, VSPACE
  • 122. <DIV> - Formatting a block of text • It is used for defining a section or a block in the document. • It is a container tag.<DIV>...</DIV> • The list of important attributes of <DIV>. – ALIGN, ID, STYLE
  • 123. <FONT> - Specifying font characteristics • It allows us to change the size, style and colour of the text enclosed within this tag. • It is a container tag.<FONT>...</FONT> • The list of important attributes of <FONT>. – COLOR – it sets the text colour – FACE – it specifies font face i.e., type – SIZE - it specifies the font size whose values ranges from 1 or 7, with default value 3.
  • 124. HTML entities for reserved characters • a few special characters and their equivalent entities. Character Entity Description &nbsp; Non Breaking Space “ &quot; Double quotation mark ‘ &apos; Single quotation mark & &amp; Ampersand < &lt; Less than > &gt; Greater than © &copy; Copyright Symbol ™ &trade Trademark Symbol ® &reg; Registered Symbol
  • 125. Adding comments in HTML document • HTML provides comment tag to insert comments in the source code. • HTML comments are placed within <!-- --> tag. • It will be completely ignored by the browser.
  • 126. Inserting images • <IMG> tag is used to insert images in HTML pages. • It is an empty tag and it has many attributes. • SRC is the main attribute and it specifies the file name of the image to be inserted. • Other attributes are WIDTH, HEIGHT, VSPACE, HSPACE, ALIGN, BORDER, ALT • The possible values for ALIGN attribute are BOTTOM, MIDDLE, TOP • <IMG SRC=“book.jpg” HEIGHT=“40” WIDTH =“60” ALIGN = “BOTTOM” ALT=“Image of an opened book”>
  • 127. Know your progress 1. How are special characters represented in HTML? – HTML entites 2. Face attribute is used with ______ tag. – <FONT> TAG 3. List the attributes of <FONT> tag. – FACE, SIZE, COLOR 4. What is the use of <PRE> tag? – It is used to display the content as we entered in the text editor. 5. For scrolling a text, we use ________ tag. – <MARQUEE>
  • 128. 6. What are the main attributes of <MARQUEE> tag? – HEIGHT, WIDTH, DIRECTION, BEHAVIOUR, SCROLLDELAY, SCROLLAMOUNT, LOOP, BGCOLOR, HSPACE, VSPACE 7. What is the use of <ADDRESS> tag? – It defines the contact information for the author / owner of document or an article. 8. What is the normal font size in <FONT> tag? – 3 9. Name the main attributes of <DIV> tag. – ALIGN, ID, STYLE
  • 129. 10.To insert images in an HTML document ______ is used. – <IMG> TAG 11._________ is the main attribute of <IMG> tag. – SRC 12.What is the use of ALT attribute of <IMG> tag? – To specify an alternate text for an image 13.Name the attributes that are used to display an image in a particular size. – WIDTH, HEIGHT 14.Which are the attributes that provides horizontal and vertical spaces between two images? – HSPACE, VSPACE
  • 130. 15.Who developed HTML?. – Tim Berners Lee 16.In HTML, there are mainly two sections. Can you name them? – Head section and Body section 17.The default colour of the attribute ALINK is ___. – GREEN 18.The default colour of the attribute VLINK is ___. – PURPLE 19.Name the tag which has NOSHADE attribute. – <HR> tag 20.The default alignment of an image obtained by using <IMG> tag is ______. – BOTTOM