CS8651 Internet Programming - Basics of HTML, HTML5, CSS

Course Overview
1
CS8651 - INTERNET
PROGRAMMING
P
. Vigneshkumar
Assistant Professor
Dept of CSE
Karpagam Institute of Technology

• To understand different Internet Technologies.
• To learn java-specific web services architecture.
2
Course Objective

Upon completion of the course, students will be able to
• Construct a basic website using HTML and Cascading Style
Sheets.
• Build dynamic web page with validation using Java Script objects
and by applying different event handling mechanisms.
• Develop server side programs using Servlets and JSP.
• Construct simple web pages in PHP and to represent data in XML
format.
• Use AJAX and web services to develop interactive web
applications. 3
Course Outcome

1. Deitel and Deitel and Nieto,
- “Internet and World Wide
Web - How to Program”,
Prentice Hall, 5th Edition,
2011.
4
Text Book

1. Stephen Wynkoop and John Burke - “Running a Perfect
Website”, QUE, 2nd Edition,1999.
2. Chris Bates, Web Programming - “Building Intranet
Applications”, 3rd Edition, Wiley Publications, 2009.
3. Jeffrey C and Jackson, - “Web Technologies A Computer
Science Perspective”, Pearson Education, 2011.
Reference Books

4. Gopalan N.P. and Akilandeswari J., - “Web Technology”,
Prentice Hall of India, 2011.
5. UttamK.Roy, - “Web Technologies”, Oxford University Press,
2011.
Reference Books

UNIT 1- WEBSITE BASICS, HTML 5, CSS
3, WEB 2.0
7
CS8651 - INTERNET
PROGRAMMING
P
. Vigneshkumar
Assistant Professor
Dept of CSE
Karpagam Institute of Technology

Web Essentials: Clients, Servers and Communication – The
Internet – Basic Internet protocols – World wide web – HTTP
Request Message – HTTP Response Message – Web Clients – Web
Servers
HTML5: Tables – Lists – Image – HTML5 control elements –
Semantic elements – Drag and Drop – Audio – Video controls
CSS3: Inline, embedded and external style sheets – Rule cascading –
Inheritance – Backgrounds – Border Images – Colors – Shadows –
Text – Transformations – Transitions – Animations.
8
Unit I: Syllabus

9
Web Essentials: Clients, Servers and
Communication

• Client
– The software that resides on the remote machine, communicates
with the server, fetches the information, processes it, and then
displays it on the remote machine is called the client.
• Server
– The software that distributes the information and the machine
where the information and software reside is called the server.
– With the Internet, it's possible to access almost any information,
communicate with anyone else in the world, and do much more.
10
Web Essentials

• Web server
– Software that delivers Web pages and other documents to
browsers using the HTTP protocol.
• Web Page
– A web page is a document or resource of information that is
suitable for the World Wide Web and can be accessed through a
web browser.
11
Web Essentials

• Website
– A collection of pages on the World Wide Web that are accessible
from the same URL and typically residing on the same server.
• URL
– Uniform Resource Locator, the unique address which identifies
a resource on the Internet for routing purposes.
12
Web Essentials

• The Client-Server paradigm is the most prevalent model for
distributed computing protocols.
• It is the basis of all distributed computing paradigms at a higher
level of abstraction.
• It is service-oriented, and employs a request response protocol.
• A server process, running on a server host, provides access to a
service.
13
Client Server Paradigm

• A client process, running on a client host, accesses the service via
the server process.
• The interaction of the process proceeds according to a protocol.
• The primary idea of a client/server system is that you have a central
repository of information
– some kind of data, often in a database that you want to distribute
on demand to some set of people or machines
14
Client Server Paradigm

• It is the largest network in the world that connects hundreds of
thousands of individual networks all over the world.
• The popular term for the Internet is the “information highway”.
• With the Internet, it's possible to access almost any information,
communicate with anyone else in the world, and do much more.
• Rather than moving through geographical space, it moves your
ideas and information through cyberspace – the space of electronic
movement of ideas and information.
15
The Internet

• In 1962, MIT computer scientist J.C.R. Licklider comes up with
the idea for a global computer network.
• Work on packet-switching theory pioneers the way to the world’s
first wide-area computer network - ARPANET in the year 1969.
16
Internet - History

• In 1973, Robert Kahn and Vinton Cerf collaborate to develop a
protocol for linking multiple networks together called
Transmission Control Protocol/Internet Protocol (TCP/IP).
• TCP is followed by evolution of Ethernet and USENET.
17
Internet - History

• In 1982, the PhoneNet system is established and is connected to
ARPANET and the first commercial network, Telenet, allows for
email communication between multiple nations of the world.
• In 1981, Ethernet products for both computer workstations and
personal computers were announced and this allows for the
establishment of local area networks (LANs), followed by Domain
Name System.
18
Internet - History

• In 1990, ARPANET is decommissioned.
• Tim Berners-Lee and his colleagues at CERN develop hypertext
mark-up language (HTML) and the uniform resource locator
(URL), giving birth to the first incarnation of the World Wide
Web.
19
Internet - History

• 2000 sees the rise and burst of the dotcom bubble and Google’s
meteoric rise to domination of the search engine market.
• This decade also sees the rise and proliferation of Wi-Fi - as well
as mobile internet devices like Smartphones.
20
Internet - History

• Send e-mail messages.
• Send (upload) or receive (down load) files between computers, E -
Commerce.
• Surfing the web, Online Banking and Cashless Transactions.
• Participate in discussion groups, such as mailing lists and
newsgroups.
• Education, Collaboration Tools and Social Networking.
21
Uses of The Internet

22
INTERNET - Worldwide
• Around 63.2% of world population uses internet.

23
INTERNET - India
• In 2020, India had nearly 700 million internet users across the
country.

24
WEB
• The Web (World Wide Web) consists of information
organized into Web pages containing text and graphic
images.
• It contains hypertext links, or highlighted keywords
and images that lead to related information.
• A collection of linked Web pages that has a common
theme or focus is called a Web site.
• The main page that all of the pages on a particular Web
site are organized around and link back to is called the
site’s home page.

25
How to access the Internet?
• Many schools and businesses have direct access to the
Internet using special high speed communication lines
and equipment.
• Students and employees can access through the
organization’s local area networks (LAN) or through
their own personal computers.
• Another way to access the Internet is through Internet
Service Provider (ISP).

26
How to access the Internet?
• To access the Internet, an existing network need to pay
a small registration fee and agree to certain standards
based on the TCP/IP (Transmission Control
Protocol/Internet Protocol) reference model.
• Each organization pays for its own networks and its
own telephone bills, but those costs usually exist
independent of the internet.
• The regional Internet companies route and forward all
traffic, and the cost is still only that of a local
telephone call.

27
Internet Service Provider (ISP)
• A commercial organization with permanent connection
to the Internet that sells temporary connections to
subscribers.
• Examples:
– Prodigy, America Online, Microsoft network, AT&T
Networks

28
How to access the Web?
• Once you have your Internet connection, then you
need special software called a browser to access the
Web.
• Web browsers are used to connect you to remote
computers, open and transfer files, display text and
images.
• Web browsers are specialized programs.
• Examples of Web browser: Netscape Navigator
(Navigator) and Internet Explorer

29
Client/Server Structure of the Web
• Web is a collection of files that reside on computers,
called Web servers, that are located all over the world
and are connected to each other through the Internet.
• When you use your Internet connection to become part
of the Web, your computer becomes a Web client in a
worldwide client/server network.
• A Web browser is the software that you run on your
computer to make it work as a web client

30
Hypertext Mark-up Language
(HTML)
• The public files on the web servers are ordinary text files, much
like the files used by word-processing software.
• To allow Web browser software to read them, the text must be
formatted according to a generally accepted standard.
• The standard used on the web is Hypertext mark-up language
(HTML).
• HTML uses codes, or tags, to tell the Web browser software
how to display the text contained in the document

31
Addressing on the WEB - INTERNET
PROTOCOL
• Internet protocols are set of rules governing communication
within and between computers on a network.
• The main functions of protocols are:
– Deciding how to announce sent and received data.
– Addressing the data
– Deciding how the data is to be sent
– Compressing the data
– Identifying errors
• A computer communication protocol is a detailed specification
of how communication between two computers will be carried
out in order to serve some purpose.

32
Internet Protocol
• A key element of IP is the IP address which is simply a 32-bit
number.
• At any given moment, each device on the Internet has one or
more IP addresses associated with it (although the device
associated with a given address may change over time).
• IP addresses are normally written as a sequence of four decimal
numbers separated by periods (called “dots”), as in
192.0.34.166.
• Each decimal number represents one byte of the IP.
• The function of IP software is to transfer data from one
computer (the source ) to another computer (the destination ).

33
Internet Protocol
• When an application on the source computer wants to send
information to a destination, the application calls IP software on
the source machine and provides it with data to be transferred
along with an IP address for each of the source and destination
computers.
• The IP software running on the source creates a Packet
• If the destination computer is on the same local network as the
source, then the IP software will send the packet to the
destination directly via this network.

34
Internet Protocol
• If the destination is on another network, the IP software will
send the packet to a gateway.
• The gateway will select a computer on one of the other
networks to which it is attached and send the packet on to that
computer.
• IP software on that computer will receive the packet and pass its
data up to an application that is waiting for the data.
• The sequence of computers that a packet travels through from
source to destination is known as its route.
• A seperate protocol called Border Gateway Protocol is used to
pass network connectivity information between gateways so that
each can choose a good next hop for each packets it receives.

35
Internet Protocol
• IP software also adds some error detection information called a
checksum, to each packet it creates, so that if a packet is
corrupted during transmission, this can usually be detected by
the recipient.
• The IP standard calls for IP software to simply discard any
corrupted packets.
• Thus, IP-based communication is unreliable (i.e) packets can be
lost.
• IP alone is not a particularly good form of communication for
many Internet applications.

36
TCP - TRANSMISSION CONTROL
PROTOCOL
• TCP, the Transmission Control Protocol, is a higher-level
protocol that extends IP to provide additional functionality,
including reliable communication based on the concept of a
connection.
• A connection is established between TCP software running on
two machines by one of the machines (let’s call it A) sending a
connection-request message via IP to the other (B).
• That is, the IP message contains a message conforming to the
TCP protocol and representing a TCP connection request.
• If the connection is accepted by B, then B returns a message to
A requesting a connection in the other direction.

37
PROTOCOL
• If A responds affirmatively, then the connection is established.
• A and B can both send messages to one another at the same
time; this is known as full duplex communication.
• Once a connection has been established, TCP provides reliable
data transmission by demanding an acknowledgment for each
packet it sends via IP.
• Essentially, the software sets a timer after sending each packet.
• The TCP software on the receiving side sends a packet
containing an acknowledgment for every TCP-based packet it
receives that passes the checksum test.

38
PROTOCOL
• If the TCP software sending a packet does not receive an
acknowledgment packet before its timer expires then it resends
the packet and restarts the timer.
• Another important feature that TCP adds to IP is the concept of
a port.
• The port concept allows TCP to be used to communicate with
many different applications on a machine.

39
• Boxes - software
applications
• Ovals - Data
• Circled Numbers
- Time order
• TCP[25] - TCP
header
containing 25 as
the port number
PROTOCOL

40
Domain Name Addressing
• Most web browsers do not use the IP address t locate Web sites
and individual pages.
• They use domain name addressing.
• A domain name is a unique name associated with a specific IP
address by a program that runs on an Internet host computer.
• This program, which coordinates the IP addresses and domain
names for all computers attached to it, is called DNS (Domain
Name System ) software.
• The host computer that runs this software is called a domain
name server.

42
URL – UNIFORM RESOURSE LOCATOR
• A URL (Uniform Resource Locator) is a form of URI and
standardized naming convention for addressing documents
accessible over the Internet and Intranet.
• An example of a URL is https://karpagamtech.ac.in/, which is
the URL for the Karpagam Institute of Technology college
website.

43
URL - OVERVIEW
• Below is additional information about each of the sections of the
http URL for this page.
• https://www.karpagamtech.ac.in/academics/computer
-science-engineering
https:// -
www -
karpagamtech.ac.in -
academics -
computer-science-engineering -

44
URL - http or https
• The “http” stands for Hypertext Transfer Protocol.
• It lets the browser to know which type of protocol it is going to
use to access the information specified in the domain.
• An “https” protocol is short for “Hypertext Transfer
Protocol Secure” and indicates that information transmitted
over HTTP is encrypted and secure.
• After the http or https is the colon (:) and two forward
slashes (//) that separate the protocol from the remainder of the
URL.
• A URL is not explicit to an HTTP or HTTPS addresses; FTP,
TFTP, Telnet, and other addresses are also considered URLs and
may not follow the same syntax as our example.

45
URL - www
• www stands for World Wide Web and is used to
distinguish the content.
• This portion of the URL is not required and many times
can be left out.
• For example, typing
https://karpagamtech.ac.in/academics/computer-
science-engineering would still get you to the
Computer Hope website.
• This portion of the address can also be substituted for
an important sub page known as a subdomain.

46
URL - karpagamtech.ac.in
• kapagamtech.ac.in is the domain name for the website.
• The last portion of the domain is known as the domain
suffix, or TLD.
• It is used to identify the type or location of the website.
• .in is short for india
• There are several domain suffixes available. To get a
domain, you would register the name through a domain
registrar.

47
URL - academics
• Academics - the directories where the web page is on
the server.
• To find the file on the server, it would be in the
/public_html/academics directory.
• With most servers, the public_html directory is the
default directory containing the HTML files.

48
URL
• Is an IP address the same as a URL or web
address?
– No.
– An IP address is a unique number that's assigned to each
device on a network.
– On the World Wide Web, a domain name is assigned a
unique IP address.
– When typed (karpagamtech.ac.in), DNS translates the
domain name into an IP address that routers use to find the
web server.
– A domain name is used instead of an IP address because
it's easier for humans to remember.

50
COMMONLY USED PROTOCOLS
• FTP: File Transfer Protocol provides services for file transfer
and manipulation. FTP allows multiple simultaneous computer
that lacks security features.
• SMTP: Simple Mail Transfer Protocol is used to send e-mail to
a remote e-mail server.
• IMAP: Internet Message Access Protocol is also used to
download e-mail from a remote mail server.
• POP3: Post Office Protocol is used to download e-mail from
remote mail server.
• TelNet: An application used to connect to a remote computer
that lacks security features.

51
COMMONLY USED PROTOCOLS
• HTTP: Hyper Text Transfer Protocol governs how files such as
text, graphics, sound, and video are exchanged on the World
Wide Web (www).
• The primary TCP-based protocol used for communication
between web servers and browsers is called the Hypertext
Transport Protocol (HTTP).
• Just as IP which is a key component for Internet, HTTP is a key
component in the definition of the World Wide Web.
• So, before getting into details of HTTP, let’s briefly consider
what the Web is, and in particular how HTTP figures in its
definition.

52
HTTP - HYPERTEXT TRANSFER
PROTOCOL

53
HTTP - HYPERTEXT TRANSFER
PROTOCOL
• HTTP is a form of communication protocol, in particular a
detailed specification of how web clients and servers should
communicate.
• The basic structure of HTTP communication follows request -
response model.
• In other words, the HTTP interaction is initiated by a client
sending a request message to the server, the server is then
expected to generate a response message.
• HTTP is a Connectionless protocol which can deliver any sort
of data.

54
HTTP - WORK FLOW
• A website URL starting with “http://” is entered in a web
browser from a computer (client).
• The browser can be a Chrome, Firefox, Edge, Safari, Opera or
anything else.
• Browser sends a request sent to the web server that hosts the
website.
• The web server then returns a response as a HTML page or
any other document format to the browser.
• Browser displays the response from the server to the user.

55
HTTP - BASIC STRUCTURE
• HTTP is a command and
response text based
protocol using a client
server communications
model.
• The HTTP’s basic structure
includes two message types.
– The Request Message
– The Response Message

56
HTTP - REQUEST MESSAGE
• HTTP requests are
messages sent by the client
to initiate an action on the
server.
• Every HTTP request
message has the same basic
structure:
– Request / Start line
– Header field(s) (one or
more)
– Blank line
– Message body (optional)

57
REQUEST MESSAGE - START LINE
• The Request / Start line is mandatory and is structured as
– Method + Request URI + Protocol Version
• Method
– Tells the server what action to perform.
• Request URI
– The resourse path, usually a URL, or the absolute path of the
protocol, port, and domain are usually characterized by the
request context.
• Protocol Version
– Defines the structure of the remaining message, acting as an
indicator of the expected version to use for the response.

58
START LINE - METHODS
• The HTTP Method, indicates the method to be performed on
the resource identified by the given Request-URI.
• The method is case-sensitive and should always be mentioned
in uppercase.

59
START LINE - REQUEST URI
• The second part of the start line is known as the Request-URI.
• A URI is an identifier that is intended to be associated with a
particular resource (such as a web page or graphics image) on
the World Wide Web.
• Every URI consists of two parts: the scheme which appears
before the colon (:),and another part that depends on the scheme.
• URIs using the http scheme are both URIs and URLs.
• The Resourse Path / Request URL follows the chosen method in
the request line.
• The purpose of the Uniform Resource Identifier recognizes the
resource of the request target.

60
START LINE - HTTP VERSION
• HTTP has four versions : HTTP/0.9, HTTP/1.0, HTTP/1.1, and
HTTP/2.0. The version in common use is HTTP/1.1 and the
future will be HTTP/2.0.
HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2.0
The One-line
Protocol
Building
extensibility
The
standardized
protocol
The Future
Methods
supported
GET GET, HEAD,
POST
GET , HEAD ,
POST , PUT ,
DELETE , TRACE
, OPTIONS
Response type Hypertext Not limited to
hypertext
Not limited to
hypertext
Connection
nature
Terminated
Immediately
after the
response
Terminated
immediately
after the
response
Long-lived

61
START LINE EXAMPLE
• GET /test.htm HTTP/1.1
– GET is the method
– /testpage.htm is the relative path to the resource.
– HTTP/1.1 is the protocol version we are using
• A relative path doesn’t include the domain name.
• The web browser uses the URL that we enter to create the
relative URI of the resource.

62
REQUEST MESSAGE - HEADER FIELD
• HTTP header fields provide required information about the
request or response, or about the object sent in the message
body.
• The Host header field is required in every HTTP/1.1 request
message.
• HTTP/1.1 also defines a number of other header fields, several
of which are commonly used by modern browsers.
• Each header field begins with a field name , such as Host,
followed by a colon and then a field value.

63
REQUEST MESSAGE - HEADER FIELD

64
RESPONSE MESSAGE
• Each Request has a
Response.
• Every HTTP Response
message consists of the
follwing:
– Status line
– Header field(s) (one or
more)
– Blank line
– Message body (optional)

65
RESPONSE MESSAGE - STATUS LINE
• The start line of an HTTP response, called the status line,
contains the following information:
– The protocol version, usually HTTP/1.1
– A status code, indicating success or failure of the request. Common
status codes are 200, 404, or 302
– A status text. A brief, purely informational, textual description of the
status code to help a human understand the HTTP message
A typical status line looks like: HTTP/1.1 404
Not Found.

66
RESPONSE MESSAGE - HEADER FIELDS
• HTTP headers for responses follow the same structure as any
other header: a case-insensitive string followed by a colon (':')
and a value whose structure depends upon the type of the
header.
• The whole header, including its value, presents as a single line.
– General headers, like Via, apply to the whole message.
– Response headers, like Vary and Accept-Ranges, give additional
information about the server which doesn't fit in the status line.
– Representation metadata headers (formerly entity headers), like
Content-Length that describe the encoding and format of the message
body (only present if the message has a body).

67
RESPONSE MESSAGE - HEADER FIELDS

68
HTTP - REQUEST &
RESPONSEMESSAGE
• How to Check HTTP Request and Response on Chrome?
– Open a webpage in Google Chrome and go to “View > Developer >
Developer Tools” menu.
– You can also open the developer console by right clicking on the page
and choose “Inspect” option.
– Go to “Network” tab and then reload the page. Now you will see the
loading time for each single component on the page.
– Click on the “Show Overview” icon to remove the timeline so that you
can view other details clearly.
– Click the page URL on the left bar and go to “Response” tab. (You can
also view the same details under “Preview” tab).

69
HTTP - REQUEST &
RESPONSEMESSAGE

71
HTML - Introduction
• HTML is the skeleton of all web pages.
• It’s often the first language learned by developers, marketers,
and designers and is core to front-end development work.
• HTML provides structure to the content appearing on a
website, such as images, text, or videos.
• HTML stands for Hyper Text Mark-up Language:
– A mark-up language is a computer language that defines the structure
and presentation of raw text.
– In HTML, the computer can interpret raw text that is wrapped in HTML
elements.
– Hyper Text is text displayed on a computer or device that provides access
to other text through links, also known as hyperlinks.

72
HTML - Introduction
• HTML was created by Tim Berners-Lee in 1991.
• The first ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1999.

73
HTML - Structure
• HTML is composed of elements that structure the webpage and
define its content.
• The elements are the building blocks of any HTML page and
are represented by tags.
• Tags are one of the most important part in an HTML Document.
• HTML uses some predefined tags which tells the browser about
content display property, that is how to display a particular given
content.

74
HTML - Structure
• For Example, to create a paragraph, one must use the paragraph
tags(<p> </p>) and to insert an image one must use the img
tags(<img />)

75
HTML - Structure
• There are generally two types of tags in HTML:
– Paired Tags: These tags come in pairs. That is they have
both opening(< >) and closing(</ >) tags.
– Singular Tags: These tags do not required to be closed.
• Below is an example of (<b>) tag in HTML, which tells the
browser to bold the text inside it.

76
HTML - Structure
• An HTML Document is mainly divided into two parts:
– HEAD: This contains the information about the HTML document. For
Example, Title of the page, version of HTML, Meta Data etc.
– BODY: This contains everything you want to display on the Web Page.

77
HTML - Structure
• Every Webpage must contain the above code.
• <!DOCTYPE html>: This tag is used to tells the HTML
version. This currently tells that the version is HTML 5.
• <html>: This is called HTML root element and used to wrap all
the code.
• <head>: Head tag contains metadata, title, page CSS etc.
• <body>: Body tag is used to enclosd all the data which a web
page has from texts to links.
• All of the content that you see rendered in the browser is
contained within this element.

78
HTML - First Web Page
• Example:
• Output:

79
HTML - Heading Tags
• Heading tag in HTML is used to represent headings in a Web
Page.
• There are six levels of headings defined by HTML. These six
heading elements are H1, H2, H3, H4, H5, and H6; with H1
being the highest level and H6 the least.
• Search Engines use headings for indexing the structure and
content of the webpage.
• Headings are used for highlighting important topics.

80
Heading Tags - Example
Code: Output:

81
Heading Tags - Example
• The default size of HTML headings can be changed using the
style attribute.
Code: Output:

82
Basic HTML Tags & Attributes
• The following tags help in organization and basic formatting of
elements in our script or web pages.
– HTML Paragraph <p> </p> - to write paragraph statements
in a webpage.
– Break </br> - to break line and acts as a carriage return.
– Horizontal Rule <hr> - to break the page into various parts,
creating horizontal margins
– HTML Images <img src=”source_of_image“> - to insert an
image into our web page
– HTML Attributes - to provide extra or additional information
about an element
– HTML Comments - for inserting comments in the HTML
code

83
• Example:

84
Output:

85
HTML - Lists
• A list is a record of short pieces of information, such as
people’s names, usually written or printed with a single thing on
each line and ordered in a way that makes a particular thing easy
to find.
• HTML offers three ways for specifying lists of information. All
lists must contain one or more list elements.
– An unordered list - ul
– An ordered list - ol

86
An Unordered Lists
• An unordered list starts with the “ul” tag.
• Each list item starts with the “li” tag.
• The list items are marked with bullets i.e. small black circles by
default.
• The HTML Unordered List has various List Item Markers:-
– Disc
– Circle
– Square
<ul style="list-style-type:disc/circle/square">

87
An Ordered Lists
• An ordered list starts with the “ol” tag.
• Each list item starts with the “li” tag.
• The list items are marked with numbers by default.
• The HTML Ordered List has various List Item Markers:
– Items numbered with numbers
– Items numbered with uppercase letters
– Items numbered with lowercase letters
– Items numbered with uppercase roman numbers
– Items numbered with lowercase roman numbers
<ol type=“1” / “A” / “a” / “I” / “i”>

89
HTML 5
• HTML5 is the fifth version of the HTML scripting language.
• It supports a lot of new things that older versions of HTML does
not.
• or Example: In HTML5 there is something new called
the Semantic Elements.

90
Difference between HTML and HTML5
HTML HTML5
It didn’t support audio and video
without the use of flash player support.
It supports audio and video controls
with the use of <audio> and <video>
tags.
It uses cookies to store temporary data It uses SQL databases and application
cache to store offline data.
Does not allow JavaScript to run in
browser.
Allows JavaScript to run in
background. This is possible due to JS
Web worker API in HTML5.
It does not allow drag and drop effects. It allows drag and drop effects.
Not possible to draw shapes like circle,
rectangle, triangle etc.
HTML5 allows to draw shapes like
circle, rectangle, triangle etc.
Older version of HTML are less
mobile-friendly.
HTML5 language is more mobile-
friendly.

• Semantic Tags: A semantic
element clearly describes its
meaning to both the browser and
the developer.
• HTML5 introduces many
semantic elements which make
the code easier to write and
understand for the developer as
well as instructs the browser on
how to treat them.
• A Semantic Web “allows data to
be shared and reused across
applications, enterprises, and
communities."
91
HTML 5 - Semantics

92
HTML 5 - Header
• The <header> tag in HTML is used to define the header for a
document or a section.
• Syntax:
• The header tag contains information related to the title and
heading of the related content.
• The browsers which supports <header> tag are : Google
Chrome 6.0, Internet Explorer 9.0, Firefox 4.0, Opera 11.1,
Safari 5.0

94
HTML 5 - Footer
• The <footer> element specifies a footer for a document or
section.
• A element should contain information about its containing
element.
• A footer typically contains the author of the document,
copyright information, links to terms of use, contact
information, etc.
• Syntax:
<footer> ... </footer>

96
HTML 5 - NAV
• The <nav> element defines a set of navigation links.
• Websites typically have sections dedicated to navigational links,
which enables users to navigate the site.
• These links can be placed inside a nav tag.
• The links in the nav element may point to other webpages or to
different sections of the same webpage.
• Syntax:
<nav> Links </nav>

97
HTML 5 - Aside
• The <aside> tag is used to describe the main object of the web
page in a shorter way like a highlighter.
• It basically identifies the content that is related to the primary
content of the web page but does not constitute the main intent
of the primary page.
• The <aside> tag contains mainly author information, links,
related content, and so on.
• The <aside> tag makes it easy to design the page and it
enhances the clarity of HTML document.
• Syntax:
<aside>
<h1>Contents...</h1>
</aside>

98
HTML 5 - Article
• The element specifies independent, self-contained content.
• An article should make sense on its own, and it should be
possible to read it independently from the rest of the web site.
• Can be used for
Forum Post
Blog Post
Newspaper Article
• Syntax
<article>
Contents
</article>

100
HTML 5 - FIGURE AND FIGCAPTION
• These are used to add an image in a web page with small
description.

101
HTML 5 - Control Elements
• HTML Control Elements are responsible to accept the User
input in a specified manner.
• These elements can be grouped together inside a form to collect
data from a User in a User-friendly manner.

102
HTML 5 - Input Text Control
• Input text controls are used to collect User data as a free text.
• On the web page, it will form a rectangle box where Users can
input the data.
• There are different types of input text controls that can be used
in the HTML forms.
– Single line Input Text Control
– Multi-line Input Text Control
– Password Input Control

103
Single line Input Text Control
• This allows the user to enter only a single line of data. A typical
example of such input text controls is for entering the name,
search box, city, etc.

104
Multi-line Input Text Control
• This input control type allows the user to enter data of multiple
lines.
• Typical usage of such input controls is for comments, addresses,
description and so on.

105
Password Input Control
• This is typically used for the password field. This works in the
same way as the input text field but the text gets masked for
safety purposes.

106
Input Type Submit
• When input type is of submitting it performs the action defined
in the form action and sends the form data to the server.

107
Input Type Radio
• Radio buttons are used when you expect Users to fill data as a
Boolean value or you expect only one input as true out of
multiple options.

108
Input Type Checkbox
• A checkbox lets the User select whatever information is true in
his case.
• It is a very convenient way of accepting the data when the
possible input is already known.

109
Input Type drop-down list
• The drop-down list enables the user to select one option out of
multiple possible options. This is a very User-friendly way to
get the detail from the User as it provides an exhaustive list of
possible options that helps the user to identify the option best
suits him.

110
Input Type drop-down list
• The drop-down list enables the user to select one option out of
multiple possible options. This is a very User-friendly way to
get the detail from the User as it provides an exhaustive list of
possible options that helps the user to identify the option best
suits him.

111
Input Type Optgroup
• Optgroup works in a similar way as of the drop-down list, the
only difference is that the optgroup lets you to logically group
certain options under one umbrella. It helps the user to quickly
identify the relevant option with the help of the optgroup label.

112
Fieldset
• Fieldset is another useful tag in the Html form which let the
developer to logically group certain controls under one legend,
this help the developer to give User a clear instruction on what
to expect in this section.

113
HTML output Tag
• It let you display the output of a calculation instantly. This is
quite useful when the user needs to do ay calculation instantly
and see the results.

114
Input type Color
• It is often required in the form to just show the color instead of
any text.
• It shows the color which you want to display in the form.
Typical scenario’s where it is being used is to show the status of
a project or a phase.

115
Input type Date
• Input type date is commonly used where a date type field as
input is expected by the User, it could be anything like a Date of
Birth, Hiring date, termination date and so on.

116
HTML 5 Tables
• The HTML table provides a way to derive or define the data
such as text, images, links etc. in terms of rows and columns of
cells.
• The HTML tables can be created by using <table> tag.
• The table can be created by using <th>, <td>, and <tr> tags.
– The <th> tag defines a heading for the table.
– The <td> tag specifies the table data cells which is used to
make the column.
– The <tr> tag specifies the table rows which is used to make
a row.
• The table data can be structured within <table>content of the
table</table> with numerous table elements.

118
Table Tags & Attributes
• <caption> - caption for the table
• cellspacing - specifies the space between table cells.
• cellpadding - specifies the space between the border of a
table cell and its contents.
• Column and Row Span Attributes - The two or more table rows
/ columns can be merged into a single row / column.
• bgcolor - background of the table
• Height and Width of the Table - height and width of the table
can be set by using width and height attributes
• allign - provides the alignment of content inside an element

119
HTML 5 - Audio
• The “audio” tag is an inline element that is used to embed
sound files into a web page.
• Attributes: The various attributes that can be used with the
“audio” tag are listed below:
– Controls: Designates what controls to display with the audio player.
– Autoplay: Designates that the audio file will play immediately after it
loads controls.
– Loop: Designates that the audio file should continuously repeat.
– src: Designates the URL of the audio file.
– muted: Designates that the audio file should be muted.

120
HTML 5 - Video
• The HTML5 “video” element specifies a standard way to embed
a video in a web page.
• There are three different formats that are commonly supported
by web browsers – mp4, Ogg and WebM.
• Attributes that can be used with the “video” tag are listed
below :
– Autoplay
– Preload
– Loop
– Height and Width
– Controls
– Muted

121
HTML 5 - Video
• The HTML5 “video” element specifies a standard way to embed
a video in a web page.
• There are three different formats that are commonly supported
by web browsers – mp4, Ogg and WebM.
• Attributes that can be used with the “video” tag are listed
below :
– Autoplay
– Preload
– Loop
– Height and Width
– Controls
– Muted

CS8651 Internet Programming - Basics of HTML, HTML5, CSS

More Related Content

What's hot

Similar to CS8651 Internet Programming - Basics of HTML, HTML5, CSS

More from Vigneshkumar Ponnusamy

Recently uploaded

CS8651 Internet Programming - Basics of HTML, HTML5, CSS