WEB

PROGRAMMING
 INTRODUCTION

► UNIT 1
FUNDAMENTALS OF WEB

► UNIT 2
HTML AND XHTML

► UNIT 3
JAVASCRIPT

► UNIT 4
JAVASCRIPT AND HTML DOCUMENTS
 UNIT 1
FUNDAMENTALS OF WEB

► Q.1 What is INTERNET?

The internet is defined as a global network of linked computers, servers, phones, and
smart appliances that communicate with each other using the transmission control
protocol (TCP) standard to enable the fast exchange of information and files, along
with other types of services.
Continued…

► The internet, sometimes simply called the net, is a worldwide system of

interconnected computer networks.
HISTORY:
► The internet was conceived by the Advanced Research Projects Agency (ARPA) of the
U.S. government in 1969. ARPA was later renamed the Defense Advanced Research
Projects Agency (DARPA) in 1972. DARPA's first known packet-switching network was
known as the Advanced Research Projects Agency Network (ARPANET). The original
goal was to create a network that would let users of a research computer at one
university talk to research computers at other universities.
► Some specific examples of how the internet is used include the following: Social media
and content sharing. Email and other forms of communication, such as Internet Relay
Chat, internet telephony, instant messaging and video conferencing.
► How the internet works?
The process of transferring information over the internet from one device to another relies on packet
switching. The internet is a packet-routing network that uses IP and TCP for communication. When a
person visits a website, their computer or mobile device sends a request to the server over one of these
protocols.
► The main components of the internet
The internet is comprised of hardware, software and various protocols. The following are the primary
components of the internet:
• Client or endpoint devices. These are the multitude of interconnected components or clients that
access and contribute to the internet. These can include computers, smartphones, tablets, routers,
web servers and IoT devices.
• Servers. Servers are the computers that provide services or share stored resources with the client
devices. Their main job is to comply with client requests by providing the requested information or
performing the requested tasks.
• Internet protocols. To retrieve the required data on the internet, a set of guidelines and procedures
known as protocols must be adhered to as they guarantee accurate and effective data transmission.
Common internet protocols include IP, TCP/IP, HTTP, HTTP Secure (HTTPS) and file transfer
protocol. Other protocols, such as Session Initiation Protocol for voice-over IP, Post Office Protocol 3
(POP3) and Internet Message Access Protocol for email are also used.
 Continued…

• IP addresses : IP addresses are used to identify devices on the internet. These can include
IPv4 addresses such as 192.168.1.1, which is the default IP address. IPv4 addresses are
shorter than IPv6 addresses, which are designed to handle the increasing number of
connected devices.
• Routers : Routers forward data packets between computer networks. By using routing tables,
routers determine the best routes or paths for data transfer between devices.
• Domain name system : DNS converts human-readable domain names, such as
www.example.com, into machine-readable IP addresses. It also acts as a decentralized
directory that helps users navigate the internet.
• Web browsers. Web browsers or search engines -- including Apple Safari, Google
Chrome, Microsoft Edge and Mozilla Firefox -- let users access and engage with material on
the internet and also decipher and present web pages to them.
• ISPs : ISPs are companies that provide users with internet connectivity. They operate the
infrastructure, including the cables and routers needed to connect users to the global network.
• Firewalls and security measures. Incoming and outgoing network traffic on the internet is
monitored and controlled by different types of security firewalls and security measures.
Firewalls safeguard networks and devices against unauthorized internet access, cyber threats
and malicious activities.
What are the key features of the
internet?

► The internet has certain features that make it a powerful and versatile tool for communication,
information sharing and diverse online activities. Some key features of the internet include the
following:
• Worldwide availability. The internet is a global resource that's accessible to everyone. Today,
most people can use the internet even if they live in the most remote and deserted parts of the
world.
• Compatibility with other media types. Due to the standardized protocols and formats that it
offers, the internet facilitates compatibility with various media types. This enables seamless
integration and interaction across diverse multimedia such as photos, videos and audio files.
• Easy accessibility. Web browsers such as Chrome or Firefox are used to access the internet.
For end users and developers, these programs are simple to use, comprehend and easy to
develop.
• Affordability. The expenses associated with developing and maintaining internet services are
low. However, the costs vary depending on the type of services and providers being used.
Uses of the Internet

► Some of the important usages of the internet are:

• Online Businesses (E-commerce): Online shopping websites have made our life
easier, e-commerce sites like Amazon, Flipkart, and Myntra are providing very
spectacular services with just one click and this is a great use of the Internet.
• Cashless Transactions: All the merchandising companies are offering services to
their customers to pay the bills of the products online via various digital payment
apps like Paytm, Google Pay, etc. UPI payment gateway is also increasing day by
day. Digital payment industries are growing at a rate of 50% every year too
because of the INTERNET.
Continued…

• Education: It is the internet facility that provides a whole bunch of educational

material to everyone through any server across the web. Those who are unable
to attend physical classes can choose any course from the internet and can have
point-to-point knowledge of it just by sitting at home. High-class faculties are
teaching online on digital platforms and providing quality education to students
with the help of the Internet.
• Social Networking: The purpose of social networking sites and apps is to
connect people all over the world. With the help of social networking sites, we
can talk, and share videos, and images with our loved ones when they are far
away from us. Also, we can create groups for discussion or for meetings.
 Continued…

► Entertainment: The Internet is also used for entertainment. There are numerous
entertainment options available on the internet like watching movies, playing games,
listening to music, etc. You can also download movies, games, songs, TV Serial, etc.,
easily from the internet.
Advantages of the Internet

• Online Banking and Transaction: The Internet allows us to transfer money online
through the net banking system. Money can be credited or debited from one account to
the other.
• Education, Online Jobs, Freelancing: Through the Internet, we are able to get more
jobs via online platforms like LinkedIn and to reach more job providers. Freelancing on
the other hand has helped the youth to earn a side income and the best part is all this
can be done via the INTERNET.
• Entertainment: There are numerous options for entertainment online we can listen to
music, play games can watch movies, and web series, and listen to podcasts, YouTube
itself is a hub of knowledge as well as entertainment.
• New Job Roles: The Internet has given us access to social media, and digital products
so we are having numerous new job opportunities like digital marketing and social
media marketing online businesses are earning huge amounts of money just because
the Internet is the medium to help us to do so.
Continued…

• Best Communication Medium: The communication barrier has been removed

from the Internet. You can send messages via email, Whatsapp, and Facebook.
Voice chatting and video conferencing are also available to help you to do
important meetings online.
• Comfort to humans: Without putting any physical effort you can do so many
things like shopping online it can be anything from stationeries to clothes, books
to personal items, etc. You can books train and plane tickets online.
• GPS Tracking and google maps: Yet another advantage of the internet is that
you are able to find any road in any direction, and areas with less traffic with the
help of GPS on your mobile.
Disadvantages of the Internet

• Time Wastage: Wasting too much time on the internet surfing social media apps
and doing nothing decreases your productivity rather than wasting time on
scrolling social media apps one should utilize that time in doing something
skillful and even more productive.
• Bad Impacts on Health: Spending too much time on the internet causes bad
impacts on your health physical body needs some outdoor games exercise and
many more things. Looking at the screen for a longer duration causes serious
impacts on the eyes.
Continued…

• Cyber Crimes: Cyberbullying, spam, viruses, hacking, and stealing data are some
of the crimes which are on the verge these days. Your system which contains all
the confidential data can be easily hacked by cybercriminals.
• Effects on Children: Small children are heavily addicted to the Internet watching
movies, and games all the time is not good for their overall personality as well as
social development.
• Bullying and Spreading Negativity: The Internet has given a free tool in the
form of social media apps to all those people who always try to spread
negativity with very revolting and shameful messages and try to bully each other
which is wrong.
 WWW

► What is WWW?
► WWW stands for World Wide Web and is commonly known as the Web. The
WWW was started by CERN(European Council for Nuclear Research) in
1989. WWW is defined as the collection of different websites around the
world, containing different information shared via local servers(or computers).
► Web pages are linked together using hyperlinks which are HTML-formatted
and, also referred to as hypertext, these are the fundamental units of the
Internet and are accessed through Hypertext Transfer Protocol(HTTP). Such
digital connections, or links, allow users to easily access desired information
by connecting relevant pieces of information. The benefit of hypertext is it
allows you to pick a word or phrase from the text and click on other sites that
have more information about it.
History of the WWW

► It is a project created by Tim Berners Lee in 1989, for researchers to work

together effectively at CERN. It is an organization, named the World Wide Web
Consortium (W3C), which was developed for further development of the web.
This organization is directed by Tim Berners Lee, aka the father of the web.
CERN is a community of more than 1700 researchers from more than 100
countries. These researchers spend a little time on CERN and the rest of the time
they work at their colleges and national research facilities in their home country,
so there was a requirement for solid communication so that they can exchange
data.
Working of WWW

► The below diagram indicates how the Web operates just like client-server
architecture of the internet. When users request web pages or other information,
then the web browser of your system request to the server for the information
and then the web server provide requested services to web browser back and
finally the requested service is utilized by the user who made the request.
 Continued…

► Features of WWW
• WWW is open source.
• It is a distributed system spread across various websites.
• It is a Hypertext Information System.
• It is Cross-Platform.
• Uses Web Browsers to provide a single interface for many services.
• Dynamic, Interactive and Evolving.

► Components of the Web

► There are 3 components of the web:
• Uniform Resource Locator (URL): URL serves as a system for resources on the web.
• Hyper Text Transfer Protocol (HTTP): HTTP specifies communication of browser and server.
• Hyper Text Markup Language (HTML): HTML defines the structure, organization and content of a web
page.
Difference Between WWW and
Internet

WWW Internet

It is originated in 1989. It is originated in 1960.

WWW is an interconnected network of websites and

Internet is used to connect a computer with other computer .
documents that can be accessed via the Internet.

WWW used protocols such as HTTP Internet used protocols such as TCP/IP

It is based on software. It is based on hardware.

It is a service contained inside an infrastructure. There is an entire infrastructure in internet.

What is a Web Browser?

► The web browser is an application software to explore www (World Wide Web). It provides an
interface between the server and the client and it requests to the server for web documents
and services. It works as a compiler to render HTML which is used to design a webpage.
Whenever we search for anything on the internet, the browser loads a web page written in
HTML, including text, links, images, and other items such as style sheets and JavaScript
functions. Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web
browsers.

► History of the Web Browsers

► The first web browser World Wide Web was invented in the year of 1990 by Tim Berners-Lee.
Later, it becomes Nexus. In the year of 1993, a new browser Mosaic was invented by Mark
Andreessen and their team. It was the first browser to display text and images at a time on the
device screen. He also invents another browser Netscape in 1994. Next year Microsoft
launched a web browser Internet Explorer which was already installed in the Windows
operating system. After this many browsers were invented with various features like Mozilla
Firefox, Google Chrome, Safari, Opera, etc.
How does a Web Browser Work?

► A web browser helps us find information anywhere on the internet. It is installed

on the client computer and requests information from the web server such a type
of working model is called a client-server model.
Some Popular Web Browsers

► Here is a list of some popular web browsers:

1. Google Chrome:
► Developed by Google, Chrome is one of the most widely-used web browsers in the world, known for its
speed and simplicity.
2. Mozilla Firefox:
► Developed by the Mozilla Foundation, Firefox is an open-source browser that is known for its privacy
features and customization options.
3. Apple Safari:
► Developed by Apple, Safari is the default browser on Mac and iOS devices and is known for its speed
and integration with other Apple products.
4. Microsoft Edge:
► Developed by Microsoft, Edge is the default browser on Windows 10 and is known for its integration
with other Microsoft products and services.
5. Opera:
► Developed by Opera Software, Opera is a web browser that is known for its speed and built-in VPN
feature.
 Web Server

► Web Server: Web server is a program which processes the network requests of the
users and serves them with files that create web pages. This exchange takes place
using Hypertext Transfer Protocol (HTTP).
Basically, web servers are computers used to store HTTP files which makes a
website and when a client requests a certain website, it delivers the requested
website to the client. For example, you want to open Facebook on your laptop and
enter the URL in the search bar of google. Now, the laptop will send an HTTP
request to view the facebook webpage to another computer known as the webserver.
This computer (webserver) contains all the files (usually in HTTP format) which make
up the website like text, images, gif files, etc. After processing the request, the
webserver will send the requested website-related files to your computer and then
you can reach the website.One web server can handle multiple users.
Web Server ‘s examples

► There are many web servers available in the market both free and paid. Some of
them are described below:
► Apache HTTP server
► Microsoft Internet Information Services (IIS)
► Lighttpd
► Jigsaw Server
► Sun Java System
What is a URL (Uniform Resource
Locator)?

► A URL (Uniform Resource Locator, also called a web address) is a unique identifier used
to locate a resource on the internet. URLs consist of multiple parts -- including a protocol
and domain name -- that tell web browsers how and where to retrieve a resource.
► End users use URLs by typing them directly into a browser address bar or by clicking a
hyperlink found on a webpage, bookmark list, email or another application.
► How is a URL structured?
► The URL contains the name of the protocol needed to access a resource, as well as a
resource name. The first part of a URL identifies what protocol to use as the primary
access medium. The second part identifies the IP address or domain name -- and
possibly subdomain -- where the resource is located.
What is a URL (Uniform Resource
Locator)?

► URL protocols include HTTP (Hypertext Transfer Protocol) and HTTPS (HTTP
Secure) for web resources, mailto for email addresses, FTP for files on a File
Transfer Protocol server and telnet for a session to access remote computers. A
colon and two forward slashes follow most URL protocols, but only a colon follows
the mailto protocol.
► URLs can also specify the following optional information after the domain:
• A path to a specific page or file within a domain.
• A network port to use to make the connection.
• A specific reference point within a file, such as a named anchor in an HTML file.
• A query or search parameters used -- commonly found in URLs for search results.
Continued…

► URL examples
► When designing URLs, there are different theories about how to make the syntax. For
example, https://www.xyz.com/searchnetworking/definition/URL
► Parts of a URL
► Using the URL https://www.xyz.com/whatis/search/query?q=URL as an example,
components of a URL can include the following:
• The protocol or scheme. This is used to access a resource on the internet. Protocols
include http, https, ftp, mailto and file. The domain name system name reaches the
resource. In this example, the protocol is https.
• Host name or domain name. This is the unique reference that represents a webpage.
For this example, it is xyz.com.
• Subdomain. This precedes the main domain name. In this case, "www" denotes the
Word Wide Web. Other subdomain options include "blog," "mail" and "support."
• Port name. These usually aren't visible in URLs, but they're necessary. Ports 80 and
443 are the default ports for web servers, but there are other options. In a URL, ports
always follow a colon. For this example, https://www.xyz.com:443.
Continued…

• Path. A path refers to a file or location on the web server. For this example, the
path is whatis/search/query.
• Query. Found in the URL of dynamic pages, the query consists of a question
mark, followed by parameters or the query string. In this example, "?" marks the
beginning of the query.
• Parameters. These are pieces of information in a query string of a URL. Multiple
parameters can be separated by ampersands (&). In this example, the parameter
is "q=URL."
• Fragment. This is an internal page reference, which refers to a section within the
webpage. It appears at the end of a URL and begins with a sign (#). Although not
in the example above, an example could be #history in the URL
https://en.wikipedia.org/wiki/Internet#History.
What is MIME (Multipurpose Internet
Mail Extensions)?

► What is MIME (Multipurpose Internet Mail Extensions)?

► MIME (Multipurpose Internet Mail Extensions) is an extension of the original Simple Mail
Transport Protocol (SMTP) email protocol. It lets users exchange different kinds of data
files, including audio, video, images and application programs, over email.
► Advantages of MIME
► MIME has several advantages over SMTP.
• Users can send different kinds of binary attachments via email.
• Multiple attachments of different types can be included in the same email.
• There are no limits on message length.
• Multipart messages are supported.
How MIME works?

► Emails with MIME formatting may be transmitted via standard protocols like SMTP, Post
Office Protocol (POP) or Internet Message Access Protocol (IMAP). The body of such
messages may consist of multiple parts. The header may be specified in non-ASCII
character sets MIME supports.
► Servers insert the MIME header at the beginning of an email transmission. Clients use
the MIME header to select an appropriate player application for the data type indicated
by the header. Some players are built into the web client or browser. For instance,
all browsers come with GIF and JPEG image players and can handle HTML files. Other
players may need to be downloaded.
► At the sender's end, MIME transforms non-ASCII data to 7-bit Network Virtual Terminal
(NVT) data. 7-bit ASCII can represent 128 characters. MIME then delivers this
transformed data to the client SMTP. At the recipient's end, the message is transferred
back to the original data, allowing them to see its contents, regardless of whether it
contains text, audio, video or some other kind of data.
Continued…
What is HTTP?

HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files -- such as text, images, sound,
video and other multimedia files -- over the web. As soon as a user opens their web browser, they are
indirectly using HTTP. HTTP is an application protocol that runs on top of the TCP/IP suite of protocols,
which forms the foundation of the internet.

How HTTP works?

► Through the HTTP protocol, resources are exchanged between client devices and servers over
the internet. Client devices send requests to servers for the resources needed to load a web
page; the servers send responses back to the client to fulfill the requests. Requests and responses
share sub-documents -- such as data on images, text, text layouts, etc.
► In addition to the web page files it can serve, a web server contains an HTTP daemon, a
program that waits for HTTP requests and handles them when they arrive. A web browser is an
HTTP client that sends requests to servers. When the browser user enters file requests by either
"opening" a web file by typing in a URL or clicking on a hypertext link, the browser builds an HTTP
request and sends it to the Internet Protocol address (IP address) indicated by the URL. The HTTP
daemon in the destination server receives the request and sends back the requested file or files
associated with the request.
Continued…
 Continued…

► HTTP requests and responses

► Each interaction between the client and server is called a message. HTTP messages are requests or
responses. Client devices submit HTTP requests to servers, which reply by sending HTTP responses
back to the clients.
► HTTP requests. This is when a client device, such as an internet browser, asks the server for the
information needed to load the website. The request provides the server with the desired information
it needs to tailor its response to the client device. Each HTTP request contains encoded data, with
information such as:
• The specific version of HTTP followed. HTTP and HTTP/2 are the two versions.
• A URL. This points to the resource on the web.
• An HTTP method. This indicates the specific action the request expects to receive from the server in
its response.
• HTTP request headers. This includes data such as what type of browser is being used and what
data the request is seeking from the server. It can also include cookies(small text files that websites
place on a user's browser to collect data about their online activities. These files contain data that
allows websites to remember specific user preferences, maintain login sessions, and track user
behavior across different sites.), which show information previously sent from the server handling the
request.
Continued…

► An HTTP body. This is optional information the server needs from the request, such as
user forms -- username/password logins, short responses and file uploads -- that are being
submitted to the website.

► HTTP responses. The HTTP response message is the data received by a client
device from the web server. As its name suggests, the response is the server's reply to an
HTTP request. The information contained in an HTTP response is tailored to the context the
server received from the request. HTTP responses typically include the following data:
• HTTP status code, which indicates the status of the request to the client device.
Responses may indicate success, an informational response, a redirect, or errors on the
server or client side.
• HTTP response headers, which send information about the server and requested
resources.
• An HTTP body (optional). If a request is successful, this contains the requested data in
the form of HTML code, which is translated into a web page by the client browser.
 HTTP vs. HTTPS

► HTTPS is the use of Secure Sockets Layer (SSL) or Transport Layer

Security (TLS) as a sublayer under regular HTTP application layering. HTTPS
encrypts and decrypts user HTTP page requests as well as the pages that are
returned by the web server. It also protects against eavesdropping and
man-in-the-middle attacks. HTTPS was developed by Netscape. Migrating from
HTTP to HTTPS is considered beneficial, as it offers an added layer of security
and trust.
What is Web Security?

► Web Security deals with the security of data over the internet/network or web or while it
is being transferred over the internet. Web security is crucial for protecting web
applications, websites, and the underlying servers from malicious attacks and
unauthorized access. Web Security is an online security solution that will restrict access to
harmful websites, stop web-based risks, and manage staff internet usage.
► Security Consideration
• Updated Software: You need to always update your software. Hackers may be aware
of vulnerabilities in certain software, which are sometimes caused by bugs and can be
used to damage your computer system and steal personal data. Older versions of software
can become a gateway for hackers to enter your network. Software makers soon become
aware of these vulnerabilities and will fix vulnerable or exposed areas. That’s why It is
mandatory to keep your software updated, It plays an important role in keeping your
personal data secure.
• Beware of SQL Injection: SQL Injection is an attempt to manipulate your data or your
database by inserting a rough code into your query. For e.g. somebody can send a query to
your website and this query can be a rough code while it gets executed it can be used to
manipulate your database such as change tables, modify or delete data or it can retrieve
important information also so, one should be aware of the SQL injection attack.
CONTINUED…

• Data Validation: Data validation is the proper testing of any input supplied by
the user or application. It prevents improperly created data from entering the
information system. Validation of data should be performed on both server-side
and client-side. If we perform data validation on both sides that will give us the
authentication. Data validation should occur when data is received from an
outside party, especially if the data is from untrusted sources.
• Password: Password provides the first line of defense against unauthorized
access to your device and personal information. It is necessary to use a strong
password. Passwords must be complex to protect against brute force. It is good
to enforce password requirements such as a minimum of eight characters long
must including uppercase letters, lowercase letters, special characters, and
numerals.
WEB PROGRAMMER’S TOOLBOX

► Document languages and programming languages that are the building blocks
of the web and web programming.
► XHTML
► XML
► JavaScript
► Java, Perl, Ruby, PHP
► XHTML
To describe the general form and layout of documents .An XHTML document is a
mix of content and controls, Tags,specify something about how the content should
be arranged in the document.Attributes provide additional information about the
content of a tag.
CONTINUED…

► Creating XHTML documents

XHTML editors - make document creation easier, Shortcuts to typing tag names,
spell-checker, WYSIWYG XHTML editors.
► XML
 A meta-markup language
 Used to create a new markup language for a particular purpose or area Because
the tags are designed for a specific area, they can be meaningful
 A simple and universal way of representing data of any textual kind
► PHP
 A server-side scripting language
► Great for form processing and database access through the Web
CONTINUED…

► JavaScript
 A client-side HTML-embedded scripting language
 Dynamically typed and not object-oriented
 Provides a way to access elements of HTML documents and dynamically
change them
► Cascading Style Sheets (CSS) is a style sheet language used for specifying
the presentation and styling of a document written in a markup language such
as HTML or XML . CSS is designed to enable the separation of content and
presentation, including layout, colors, and fonts.
 HTML

► Origins and Evolution of HTML

► HyperText Markup Language(HTML) was initially developed by Sir Tim Berners-Lee in
late 1991. It was designed as a standard language for creating and formatting
documents on the World Wide Web. All the web pages on internet are made from
HTML.

► HyperText
► We must first examine the idea of hypertext in order to comprehend the origins of
HTML. Early 20th-century pioneers like Vannevar Bush proposed the concept of tying
information together through hypertext, envisioning a "memex" machine that could
organize enormous volumes of information using linked microfilm.
► However, Ted Nelson, an American philosopher and sociologist, first used the word
"hypertext" in the 1960s. Nelson's idea of hypertext was to develop a network of
connected text and multimedia that permitted non-linear information navigation.
CONTINUED…
 Continued…

► Year and Progress

► 1991 Tim Berners-Lee created HyperText Markup Language but was not
officially released.
► 1993 Tim Berners-Lee created first version of HTML that was published and
available to public.
► 1995 HTML 2.0 was released with a few additional features along with the
existing features.
► 1997 There was an attempt to extend HTML with HTML 3.0, but it was
replaced by the more practical HTML 3.2.
History and Evolution

► 1998 The W3C( World Wide Web Consortium ) decided to shift focus to an
XML-based HTML equivalent called XHTML
► 1999 HTML 4.01, which became an official standard in December 1999,
was the most widely used version in the early 2000s.
► 2000 XHTML 1.0, completed in 2000, was a combination of HTML4 in XML.
► 2003 The introduction of XForms reignited interest in evolving HTML itself
rather than replacing it with new technologies. This new theory recognized
that XML was better suited for new technologies like RSS and Atom, while
HTML remained the cornerstone of the web.
History and Evolution

► 2004 A W3C workshop took place to explore reopening HTML's evolution.

Mozilla and Opera jointly presented the principles that later influenced
HTML5
► 2006 The W3C expressed interest in HTML5 development and formed a
working group to collaborate with the WHATWG. The W3C aimed to
publish a "finished" HTML5 version, whereas the WHATWG focused on a
Living Standard, continuously evolving HTML.
► 2012 HTML5 can be seen as an extended version of HTML 4.01, which was
officially published in 2012.
History and Evolution of XHTML

► History
► It was developed by the World Wide Web Consortium (W3C) and helps web
developers transition from HTML to XML. With XHTML, developers can enter the
XML world with all its features while still ensuring backward and future
compatibility of the content. The XHTML family includes three document types;
the first is XHTML 1.0, which was recommended by W3C on January 26, 2000.
The second is XHTML 1.1, which was recommended by W3C on May 31, 2001.
► The third is XHTML5, a standard used for developing an XML adaptation of the
HTML5 specification. An XHTML document must have an XHTML <!DOCTYPE>
declaration.
 Key Syntax Rules for XHTML

► The basic syntax for XHTML (Extensible Hypertext Markup Language) is similar to that
of HTML but adheres to stricter rules derived from XML. Below are the key principles
and components that define valid XHTML syntax.
► 1. Well-Formedness:
•Every element must have a closing tag or be self-closed.
•Attributes must be quoted (single or double quotes).
•2. Lowercase Tags:
•All element names and attribute names must be in lowercase.
•3. Proper Nesting:
•Elements must be properly nested. For example, if you open a <div>, you must close it
before closing any containing elements.
•4. DOCTYPE Declaration:
•A DOCTYPE declaration is required at the beginning of the document.
•5. Self-Closing Tags:
•Tags that don’t have any content must be self-closed with a slash (/) before the closing angle
bracket.
Basic Structure of an XHTML Document

► <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
► <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
► <head>
► <title>Basic XHTML Document</title>
► <meta charset="UTF-8" />
► <meta name="viewport" content="width=device-width, initial-scale=1.0" />
► </head>
► <body>
► <h1>Hello, World!</h1>
► <p>This is a basic XHTML document.</p>
► <img src="example.jpg" alt="Example Image" />
► <br />
► <a href="https://www.example.com">Visit Example.com</a>
► </body>
► </html>
Breakdown of the Example

► 1.DOCTYPE Declaration:
Specifies the version of XHTML being used (XHTML 1.0 Transitional in this case). DTD
stands for Document Type Definition. It is a set of markup declarations that define a
document type for an XML or XHTML document.
► 2. Root Element:
The <html> element is the root of the document. The xmlns attribute defines the
XML namespace.

3. Head Section:
The <head>
section contains metadata about the document, such as the title
and character set.
Continued…

4. Body Section:

The <body> section contains the visible content of the webpage. It includes
headings, paragraphs, images, links, etc.

► 5. Self-Closing Tags:

The <img> tag is self-closed with a slash, indicating that it does not
have an end tag
 Breakdown of the DOCTYPE
Declaration

1.<!DOCTYPE html>:
•This specifies that the document is an HTML document.
•XHTML (which is an XML-based version of HTML).

2.PUBLIC:
•This indicates that the document is using a public identifier.
•This means the document is compliant with a publicly available standard.

3."-//W3C//DTD XHTML 1.0 Transitional//EN":

•This is the public identifier string that describes the document type definition (DTD) being used.

4.-//W3C//: This indicates that the document is based on a specification from the World Wide Web
Consortium (W3C), which is the main international standards organization for the web.
 Continued…

5.DTD XHTML 1.0 Transitional: This specifies that the document conforms to the
XHTML 1.0 Transitional DTD.
The "Transitional" part indicates that this DTD allows for a mix of HTML-like features and
XML-compliance, making it more lenient than the strict version.
6. //EN: This indicates that the document is in English.

7."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd":
•This is the system identifier (URI) that points to the actual DTD file online.
• While not always necessary for browsers, it serves as a reference for validation tools and for those
•wanting to understand the document type's structure.
 HTML Introduction

► HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
Key Syntax Rules for HTML

► HTML Style Guide

► Always Declare Document Type
► <!DOCTYPE html>
► Use Lowercase Element Names
► Good:
► <body>
<p>This is a paragraph.</p>
</body>
► Bad:
► <BODY>
<P>This is a paragraph.</P>
</BODY>
Continued…

► Close All HTML Elements

► In HTML, you do not have to close all elements (for example the <p> element).
► However, it is strongly recommend closing all HTML elements, like this:
► <section>
<p>This is a paragraph.</p> : Good way to write
<p>This is a paragraph. : Bad way to write
</section>
► Use Lowercase Attribute Names
► Good:
► <a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
► Bad:
► <a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Continued…

► Always Quote Attribute Values

► HTML allows attribute values without quotes.
► Good:
► <table class="striped">
► Bad:
► <table class=striped>
► Never Skip the <title> Element
 Continued…

❑ The <title> element is required in HTML.

❑ The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.

❑ The <title> element:

●defines a title in the browser toolbar
●provides a title for the page when it is added to favorites
●displays a title for the page in search-engine results

So, try to make the title as accurate and meaningful as possible:

<title>HTML Style Guide and Coding Conventions</title>
A Simple HTML Document

► <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Example Explained

► The <!DOCTYPE html> declaration defines that this document is an HTML5

document
► The <html> element is the root element of an HTML page
► The <head> element contains meta information about the HTML page
► The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
► The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
► The <h1> element defines a large heading
► The <p> element defines a paragraph
HTML Elements

► What is an HTML Element?

► An HTML element is defined by a start tag, some content, and an end
tag:
► <tagname> Content goes here... </tagname>
► Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an
end tag!
Continued…

Element List Description

It is an arrangement of data in rows and columns in tabular

Tables format. Tables are useful for various tasks such as
presenting text information and numerical data.

A list is a record of short pieces of related information or

Lists used to display the data or any information on web pages in
the ordered or unordered form.
The images are used to embed an image in a web page
Images
with the help of <img> tag

A paragraph is a block-level element so a new paragraph

always begins on a new line, and browsers naturally put
Paragraphs
some space before and after a paragraph to make it look
neat and easy to read.

It is utilized to create clickable buttons within a webpage. It

Buttons is commonly employed to trigger actions or submit form
data.

It is connections from one web resource to another. A link

Links
has two ends, An anchor and a direction.
 Web Browsers

► The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to

read HTML documents and display them correctly.
► A browser does not display the HTML tags, but uses them to determine
how to display the document:
HTML Page Structure

► Below is a visualization of an HTML page structure:

Continued…

► The content inside the <body> section will be displayed in a browser.

The content inside the <title> element will be shown in the browser's
title bar or in the page's tab.
Continued…

Components Description
The declaration is not an HTML tag. This is an info to the
<!DOCTYPE html>
browser about what document type to expect.
They are the basic structure of an HTML document that
surrounds the content and applies meaning to it. Tags are
Tags
enclosed within angle braces <tag name>. Most of the tags
have their corresponding closing tags except few tags.
An attribute is used to define the characteristics of
Attributes an HTML element that appears inside the opening tag and
their values used inside the quotation marks.
It is a collection of start and end tags with the content
Elements
inserted in between them.
It is used to define the headings of a page. There are six
levels of headings defined by HTML. These 6 heading
Heading
elements are h1, h2, h3, h4, h5, and h6; with h1 being the
highest level and h6 being the least.
 To illustrates the Basic HTML structure.

► <!DOCTYPE html>
► <html lang="en">
► <head>
► <meta charset="UTF-8">
► <meta name="viewport"
► content="width=device-width, initial-scale=1.0">
► <title>HTML</title>
► </head>
► <body>
► <!--Contents of the webpage-->
► <p>First webpage</p>
► </body>
► </html>
HTML Headings

► The HTML heading tags are used to create headings for the content of a webpage.
These tags are typically placed inside the body tag. HTML offers six heading tags, from
<h1> to <h6>, each displaying the heading in a different font size.
► Syntax:
► <h1></h1>
► <h2></h2>
► <h3></h3>
► <h4></h4>
► <h5></h5>
► <h6></h6>
To demonstrate the use of 6 heading tags from
<h1> to <h6> in HTML.
► <!DOCTYPE html>
► <html lang="en"> OUTPUT:
► <head>
► <meta charset="UTF-8">
► <meta name="viewport"
► content="width=device-width, initial-scale=1.0">
► <title>HTML heading tag</title>
► </head>
► <body>
► <h1>Heading 1 (h1)</h1>
► <h2>Heading 2 (h2)</h2>
► <h3>Heading 3 (h3)</h3>
► <h4>Heading 4 (h4)</h4>
► <h5>Heading 5 (h5)</h5>
► <h6>Heading 6 (h6)</h6>
► </body>
► </html>
HTML Paragraph and Break Elements

► HTML <p> tags are used to write paragraph statements on a webpage. They
start with the <p> tag and end with </p>. The HTML <br> tag is used to insert a
single line break and does not require a closing tag. In HTML, the break tag is
written as <br>.

► Syntax:
// for Parapgraph
► <p> Content... </p>
// for Break
► <br>
HTML Images

► The <img> tag is used to insert an image into a webpage.

The source of the image is specified within the src attribute,
like this: <img src=”source_of_image”>.
► The source file (src), alternative text (alt), width, and height
are provided as attributes:

► Syntax:
► <img src="geeks.png“ width="104" height="142">
To illustrates the use of the <img> tag
for inserting the images in HTML.
► <!DOCTYPE html>
► <html lang="en">
► <head>
► <meta charset="UTF-8">
► <meta name="viewport"
► content="width=device-width, initial-scale=1.0">
► <title>HTML img tag</title>
► </head>
► <body>
► <img src=“picture.png">
► </body>
► </html>
What are the basic rules of HTML?

► Some basic rules of HTML are:

• The basic HTML structure is fixed with doctype declaration, html, head,
title, and body tags. The content then can be added to the body tag.
• Tags are enclosed in < and >. A tag should have an opening tag(eg <h1>)
and a closing tag(eg </h1>).
• HTML Tags are not case-sensitive.

► What are the uses of HTML?

► HTML is used to build page structure, create hyperlinks(using <a> tag),
embed multimedia on page(with <img>, <video>, or <audio> tag) and
HTML is the foundation of web development.
 HTML Links

► HTML links are defined with the <a> tag:

► Syntax
► <a href="url">link text</a>
► Example
► <a href="https://www.youtube.com">This is a link</a>
► HTML links are hyperlinks.
► You can click on a link and jump to another document.
► A link does not have to be text. A link can be an image or any other HTML
element!y it Yourself
► By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue.
• A visited link is underlined and purple.
• An active link is underlined and red.
Features of HTML

• HTML employs tags to structure content, defining elements like headings, paragraphs,
lists, and links, facilitating document organization and readability for web browsers.
• Compatible with various devices and operating systems, HTML ensures consistent
rendering and accessibility across different platforms.
• Supports interactive elements like forms and multimedia embedding, enabling user
engagement and dynamic content creation within web pages.
• Provides semantic elements like <header>, <footer>, and <article> for conveying
meaningful document structure, improving SEO and accessibility.
• Easily integrates with other technologies like CSS for styling and JavaScript for dynamic
behavior, allowing developers to create rich, interactive web experiences.
HTML Lists

► HTML lists allow web developers to group a set of related items in lists.
► Example
► An unordered HTML list:
• Item
• Item
• Item
• Item
Continued…

► An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List

► An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
► The list items will be marked with bullets (small black
circles) by default:
► Example
► <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

► An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
► The list items will be marked with numbers by default:
► Example
► <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Tables

► HTML tables allow web developers to arrange data into rows and
columns.

► Table Cells
Each table cell is defined by a <td> and a </td> tag.
►
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
► <td> stands for table data.
Continued…

► A table cell can contain all sorts of HTML elements: text, images, lists,
links, other tables, etc.

► Table Rows
► Each table row starts with a <tr> and ends with
a </tr> tag.
► Example
Continued…

► <table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table Headers

► Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead
of the <td> tag.

► Example

► Let the first row be table header cells:

► <table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>