Coarse Outline

Wednesday, 8 April 2026 4:49 pm

Week 01 : Introduction to Web Engineering Topics (Basics)

Week 02 : How a web browser works? 1. What is web and how does it work?
Week 03 : Introduction to CSS 2. Structuring web contents using HTML
Week 04 : Advance CSS 3. Setting visual layout using CSS
Week 05 : Introduction to JavaScript 4. Making webpages interactive using JavaScript
Week 06 : Advance JavaScript 5. Web backend programming using PHP and databases
Week 07 : Introduction JQuery
Week 08 : Introduction to PHP Topics (Advance)
Week 09 : Database and web development 1. Engineering web applications
Week 10 : Error handling in PHP 2. Making websites secure
Week 11 : Web Designing 3. Introduction to web services
Week 12 : Laravel 4. Front-end and back-end frameworks
Week 13 : Advance Laravel 5. Hosting websites
Week 14 : Web Security 6. Search engine optimization (SEO)
Week 15 : JavaScript frameworks and Web Server Hosting
Week 16 : Search Engine Optimization (SEO)

Mid Term : Week to Week

Final Term : Week to Week

Web Engineering Chp 1 Page 1

Chp:01 Introduction to Web Engineering (total topics: 10)
Wednesday, 8 April 2026 5:11 pm

A Complicated Ecosystem

The model shows web development as a three story building. Each floor depicts
several aspects of web development with an illustration.
Ground floor shows Servers, configuration, Networks and Protocols which are the
basic building blocks
Middle floor shows different languages which are a part of web development like
HTML, CSS, PHP, JavaScript, databases, APIs and Tools.
Top level shows advanced concepts like Design, Search, integration, Frameworks and
Security

Short History of the internet

• Telephone networks provides the basic infrastructure
• Packet network ARPANET (1969). This early network was funded and controlled
by the US government and was used exclusively for academic and scientific
purposes.
• X.25 (1974). At the same time, alternative networks were created which use for
the business
• USENET(1979) had fewer restrictions still and as a result grew quickly to 550
connected machines by 1981. it focuses on restricted access
• TCP/IP (1983) this protocol s allow any two computers to talk to one another.
By 1981, protocols for the internet were published and new networks built in

Web Engineering Chp 1 Page 2

 By 1981, protocols for the internet were published and new networks built in
the united states began to adopt the TCP/IP communication model.

Internet vs Web
Internet is the hardware part. It is collection of computer networks connected
through either copper wires, fiber optic cables or wireless connections
World wide web can be termed as the software part. It is a collection of web
pages connected through hyperlinks and URLs. In short, the web is one of the
services provided by the internet. Other services over the internet include
email, file transfer services (FTP) etc. all of the services can be provided to
consumers for use by business or government

The birth of the Web

• The British Tim Berners-Lee (now Sir Tim Berners-Lee), who, along with the
Belgian Robert Cailliau, published a proposal in 1990 for a hypertext system
while both were working at CERN (European Organization for Nuclear Research)
in Switzerland.
• A Uniform Resource Locator (URL) to uniquely identify a resource on the WWW.
The Hypertext Transfer Protocol (HTTP) to describe how requests and responses
operate. A software program (later called web server software) that can
respond to HTTP requests. Hypertext Markup Language (HTML) to publish
documents. A program (later called a browser) that can make HTTP requests to
URLs and that can display the HTML it receives.

Web Engineering Chp 1 Page 3

Static Vs Dynamic Websites
Wednesday, 8 April 2026 5:58 pm

Web Engineering Chp 1 Page 4

Web Engineering Chp 1 Page 5
Brief History of Web
Wednesday, 8 April 2026 6:31 pm

Web 1.0 (1990)

Users could read the pages but could not provide feedback
• Contents generated by publishers
• Company generated companies
Web 1.0 include both types:
• Static websites
• Dynamic websites

Web 2.0
Web 2.0 is mainly characterized by;
• User Generated Content (UGC)
• Dynamic websites

In the mid-2000s, a new buzzword entered the computer lexicon: Web 2.0.
This term had two meanings, one for user and one for developers.
For the users, Web 2.0 referred to an interactive experience where users could
contribute and consume web content, thus creating a more user driven web
experience. Some of the most popular websites today fall into this category:
Facebook, YouTube, and Wikipedia. This shift to allow feedback from the user, such
as comments on a story, threads in a message board, or a profile on a social
networking site has revolutionized what it means to use a web application.

For software developers, Web 2.0 also referred to a change in the paradigm of how
dynamic websites are created. Programming logic, which previously existed only on
the server, began to migrate to the browser. This required learning JavaScript, a
rather tricky programming language that runs in the browser, as well as mastering
the rather difficult programming techniques involved in asynchronous
communication.

Web 3.0
It mainly characterized by:
• Machine understandable contents
• Semantic web

Web Science
Web science as it is known, studies the sociotechnical systems that apply the web is
areas as diverse as finance, politics, activism, romance, and hate speech. If you look
at each interaction on the web as more than just a technical exchange using
protocols and file transmission, you can see there is often an underlying social need
motivating each exchange. The technical system facilitates a social interaction and
social interactions span nearly the entire human experience, so there is now an
entire area of study looking at the web as a sociotechnical system.
Web Engineering Chp 1 Page 6
entire area of study looking at the web as a sociotechnical system.
This is just another example of how the web can facilitate entirely new areas of
study.

Web Engineering Chp 1 Page 7

Client Server Model
Wednesday, 8 April 2026 7:56 pm

Client server model

The web is sometimes referred to as a client server model of communications. In the client-server model, there
are two types of actors: clients and servers. The server is a computer agent that is normally active 24/7, listening
for requests from clients. A client is a computer agent that makes requests and receives responses from the
server.
The request-response Loop

Server Types
Most real-world websites are typically not served from a single server machine, but by many server machines. It
is common to split the functionality of a website between several different types of server, as shown in following
figure. These include the following:

1. Web servers
A web server is a computer servicing HTTP requests. This typically refers to a computer running web server
software, such as Apache or Microsoft IIS (Internet Information Services).

2. Application servers
An application server is a computer that hosts and executes web applications, which may be created in
PHP, [Link], Ruby on Rails, or some other web development technology.

3. Database servers
A database server is a computer that is devoted to running a Database Management System (DBMS), such
as MySQL, Oracle, or MongoDB, that is being used by web applications.

4. Mail servers
A mail server is a computer creating and satisfying mail requests, typically using the Simple Mail Transfer
Protocol (SMTP).

5. Media servers
A media server (also called a streaming server) is a special type of server dedicated to servicing requests for
images and videos. It may run special software that allows video content to be streamed to clients.

5. Authentication servers
An authentication server handles the most common security needs of web applications. This may involve
interacting with local networking resources, such as LDAP (Lightweight Directory Access Protocol) or Active
Directory.

Web Engineering Chp 1 Page 8

In smaller sites, these specialty servers are often the same machine as the web server.

Server Farms
A single web server that is also acting as an application or database server will be hard-pressed to handle more
than a few hundred requests a second. A busy site can receive thousands or even tens of thousands of requests
a second; globally popular sites such as Facebook receive millions of requests a second.
The usual strategy for busier sites is to use a server farm. The goal behind server farms is to distribute incoming
requests between clusters of machines so that any given web or data server is not excessively overloaded, as
shown in following figure. Special devices called load balancers distribute incoming requests to available
machines.

Server Racks
In a server farm, the computers do not look like the ones in your house. Instead, these computers are more like
the plates stacked in your kitchen cabinets. That is, a farm will have its servers and hard drives stacked on top of
each other in server racks. A typical server farm will consist of many server racks, each containing many servers,
as shown in following figure.

Web Engineering Chp 1 Page 9

Data Centers
Server farms are typically housed in special facilities called data centers. A data center will contain more than
just computers and hard drives; sophisticated air conditioning systems, redundancy power systems using
batteries and generators, specialized fire suppression systems, and security personnel are all part of a typical
data center, as shown in following figure.

Web Engineering Chp 1 Page 10

How Internet work?
Thursday, 9 April 2026 4:36 pm

Internet from Home to ISP

While there are many configuration possibilities, following figure does provide an approximate simplification of a typical home to local
Internet Server Provider (or ISP) setup.

The broadband modem, also called a cable modem or DSL (digital subscriber line) modem, is a bridge between the network hardware
outside the house (typically controlled by a phone or cable company) and the network hardware inside the house. The wireless router
is perhaps the most visible manifestation of the Internet in one's home.
The various neighborhood broadband cables are aggregated and connected to fiber optic cable via fiber connection boxes.
These fiber optic cables eventually make their way to an ISP's head-end, which is a facility that may contain a cable modem
termination system (CMTS) or a digital subscriber line access multiplexer (DSLAM) in a DSL based system. This is a special type of very
large router that connects and aggregates subscriber connections to the larger Internet. These different headends may connect
directly to the wider Internet, or instead be connected to a master head-end, which provides the connection to the rest of the Internet.

Routing Tables
The flow of internet traffic or information is carried out mainly by routers. A router is a hardware device that forwards data packets
from one network to another network. When the router receives a data packet, it examines the packet's destination address and then
forwards it to another destination. A router uses a routing table to help determine where a packet should be sent. It is a table of
connections between target addresses and the destination (typically another router) to which the router can deliver the packet. In
following figure, the different routing tables use next-hop routing, in which the router only knows the address of the next step of the
path to the destination; it leaves it to that next step to continue the routing process. The packet thus makes a variety of successive
hops until it reaches its destination.

From ISP to the World

Internet exchange point (IX or IXP): Dedicated infrastructure to make the internet more connected. Internet exchange point (IX or IXP)
provides a way for networks

within a country to interconnect and between different countries. More and more networks began to interconnect with each other
using an Internet exchange point (IX or IXP). Multiple paths between IXPs provide a powerful way to handle outages and keep packets

Web Engineering Chp 1 Page 11

using an Internet exchange point (IX or IXP). Multiple paths between IXPs provide a powerful way to handle outages and keep packets
flowing. Another key strength of IXPs is that they provide an easy way for networks to connect to many other networks at a single
location.

IXPs and data centers

In recent years, major web companies have joined the network companies in making use of IXPs. As shown in following figure, this
sometimes involves mirroring (duplicating) a site's infrastructure (i.e., web and data servers) in a data center located near the IXP. The
website will have incremental speed enhancements (by reducing the travel distance for these sites) across all the networks it is peered
with at the IXP, while the network will have improved performance for its customers when they visit the most popular websites.

Under-ocean connectivity
Eventually, international Internet communication will need to travel underwater. The amount of undersea fiber optic cable is quite
staggering and is growing yearly. As can be seen in following figure, over 250 undersea fiber optic cable systems operated by a variety
of different companies span the globe.

Web Engineering Chp 1 Page 12

Web Development job Role
Thursday, 9 April 2026 5:08 pm

Web Engineering Jobs

Following figure illustrates the complex ecosystem that is contemporary web development. Seeing that diagram, you should learn that there are
many different jobs that one can do within the web development world.

Roles and Skills

Following list of job titles provides an overview of the roles typically available in a web development company as part of a team.

1. Hardware Architect/Network Architect/Systems Engineer

The people who design the specifications for the servers in a data center, and design and manage the layout of the physical and logical network are
essential somewhere along the way, whether at your company or your host's. Typically, these roles require networking and operating systems
knowledge.

2. System Administrator
Once the system is built and wired to the network, system administrators are the next people required to get things up and running. Often they
choose and install the network operating system, then manage the shared operating system environments for other users. This position is often
combined with the hardware architect in smaller firms.

3. Database Administrator/Data Architect

The database administrator (sometimes abbreviated as DBA) is a role found in larger companies. In these companies, there are many databases,
often from many divisions, all of which need to be managed, secured, and backed up. Database administrators will perform maintenance on the
databases as well as manage access for user and software accounts. They sometimes write triggers and advanced queries for users upon request as
well as manage database indexes.
A data architect has some overlap with database administrator, but the role is more focused on the design and integration of data. In recent years,
managing and making use of large sets of often unrelated data has become increasingly important for web companies. In smaller companies, these
different data roles are often combined with the system administrator and/or developer ones.

4. Security Specialist/Consultant/Expert
A good system administrator and network architect will certainly have insights into security as they perform their duties. However, because security
is so vital to web development in general, and because the knowledge necessary to do security work is complicated and ever changing, it is not
uncommon for companies to outsource their security needs to security specialists. These specialists will test for vulnerabilities, implement security
best practices, and make updates and changes to programming code or hardware infrastructure to protect a site against well-known or newly
emerging (called zero hour) threats.

5. Developer/Programmer
Programmers can be assigned a wide range of tasks aside from simple coding. Writing good documentation, using version control software, engaging
in code reviews, running test cases, and more might be typical tasks, depending on company practices. Programmer positions often begin at the
entry level, with higher-level design decisions left to software engineers and senior developers. In terms of the web development world, the terms
programmers or developer are quite broad; typically, however, this term is used to indicate a job focused more on server-side development using
languages like PHP.

Web Engineering Chp 1 Page 13

 6. Front-End Developer/UX Developer
Increasingly complex front-end development requires software developers with an aptitude for graphical user interface design (nowadays more
typically referred to as user-experience or UX design) and an understanding of human–computer interaction (HCI) principals. This typically requires
in-depth JavaScript expertise along with good CSS skills. Another increasingly commonly used synonym for front-end developer is UX developer. The
main difference between a UX developer and a UX/UI designer (described below), is that the UX developer is involved mainly in the implementation
of the user experience and less in the actual design of it.

7. Software Engineer
A software engineer is a programmer who is adept at the language of analysis and design, and uses established best practices in the development of
software. Sometimes the role of a programmer and software engineer are used interchangeably, but a software engineer has more knowledge of the
software development life cycle and can effectively gather requirements and speak with clients about technical and business matters.

8. UX Designer/UI Designer/Information Architect

These are names used somewhat interchangeably for jobs that focus on the structure, design and usability of a website. Once referred to as the user
interface, the term UX has become the preferred term because improving how a website is used is just as important (or even more important)
nowadays as improving how a website appears. While coding skills can be helpful, this type of work more often involves the development of
prototypes, making mockup designs, and analyzing user experience data. In larger web development firms, this type of work also commonly involves
working in conjunction with creatives in the art department.

9. Tester/Quality Assurance
Testers are the people who try to identify flaws in software before it gets released. This type of work is often called quality assurance (QA). Although
some test roles are for nonexperts, many testers know how to program and might write automated tests as well as develop testing plans from
requirements. Although these duties are often integrated with developers, they can form a job all their own.

10. SEO Specialist

Search engine optimization (SEO) refers to the process of improving the discoverability of web content by search engines. Chapter 23 covers both the
above board (as well as the under-handed) techniques used to improve SEO results. An SEO specialist needs to be familiar with these techniques as
well as analytics, testing approaches, social networking APIs, and even content creation strategies.

11. Content Strategists/Marketing Technologist

Regardless of technological features, websites ultimately succeed due to the quality of their content. A content strategist (sometimes also called a
marketing technologist) is someone who uses his or her experience with existing and emerging web technologies in conjunction with knowledge
about the audience to craft engaging web content. This type of work might also be done by an SEO specialist or an information architect. Writing and
marketing skills as well as knowledge of content management systems, email services, and social networking interfaces are important for this job.

12. Project Manager/Product Manager

Websites are complicated projects often involving the work of many different people with different skill sets and personalities. Getting all these
people to work together in a timely and effective manner typically requires the committed effort and knowledge of project managers (also called
product managers). Knowledge of planning and estimation methodologies is helpful, as are more general people management skills.

13. Business Analyst

Although a software engineer in an analysis role might speak to clients and get requirements, that role is often given a different name and assigned
to someone with especially good communication skills. A business analyst is the interface between the various divisions of the company and the
website (and IT in general). These people can easily speak to the HR, marketing, and legal divisions, and then translate those requirements into tasks
that software engineers can take on.

14. Nontechnical Roles

Aside from all the technical roles above, there are additional important roles that require expertise outside of technology. These roles include
traditional ones found in almost every company: accountants, writers, designers, editors, lawyers, salespeople, and managers. There are also a wide
variety of new roles that are unique to the web space,10 such as analytics manager, motion designer, social media analyst, cloud architect, and the
intriguingly named growth hacker. Getting people from different backgrounds with different expertise to work together is how companies balance
the business, technology, and art of website development.

15. Full-stack developer

Rather than specializing in server-side development, or client-side user experience construction, or database administration, a full-stack developer
ideally has competency and experience in all of these domains. Indeed, many companies even expect full-stack developers to be knowledgeable
about various system administration tasks, such as setting up a web server and handling security issues.

Web Development Companies

A major factor to consider when thinking about a career in web development is what kind of company you want to work for. Sure, everyone needs a
website, but there are multiple kinds of companies that work together to make that a possibility (illustrated in following figure).

Web Engineering Chp 1 Page 14

 1. Hosting Companies
There are companies that will manage servers on your behalf. These hosting companies or data centers offer many employment opportunities,
especially related to hardware, networking, and system administration roles.

2. Design Companies
Design companies are at the opposite end of the spectrum, with few technical positions available. These firms will provide professional artistic and
design services that might go beyond the web and include logos and branding in general. Some companies produce mockups in Photoshop, for
example, which a web developer (at another company) can then turn into a website.

3. Website Solution Companies

Website solution companies focus on the programming and deployment of websites for their clients. There are technical positions to help manage
the existing sites (working in conjunction with hosting companies) as well as development jobs to build the latest custom site.

4. Vertically Integrated Companies

Vertically integrated companies are increasingly becoming the one-stop shop for web development. They are called vertically integrated because
these companies combine hosting, design, and application solutions into one company. This allows these companies to achieve economies of scale
and appeal to nontechnical clients who can go there for all their web-related needs, large or small.

5. Start-Up Companies
Start-up ventures in web development have been some of the biggest success stories in the business world. Start-ups are often attractive places for
new graduates to work, with less competition from experienced candidates and potentially lots of jobs available from developers to designers and
system administrators. The smaller start-ups companies often require full-stack developers, who can take on any role from system administrator
through to lead developer.

6. Internal Web Development

Although many companies outsource their web presence, others assign the work to an internal division, normally under the umbrella of IT or
marketing. Although many of these roles are simple caretaker positions, others can be quite engaging, requiring real programming expertise. Many
companies have lots of internal data they would not share with outsiders and thus prefer inhouse expertise for the development of web interfaces
and systems to manage and display that confidential data. Often these websites exist only with an organization's Intranet rather than as public
websites on the Internet.

Web Engineering Chp 1 Page 15

Internet Protocol
Thursday, 9 April 2026 6:14 pm

TCP/IP (Transmission Control Protocol / Internet Protocol)

A protocol is a set of rules that partners use when they communicate.
These protocols have been implemented in every operating system, and make fast web development possible.
Networking is its own entire discipline.
Web developer needs general awareness of what the suite of Internet protocols does.
Layered Architecture
The TCP/IP Internet protocols were originally abstracted as a four-layer stack.

1. Link Layer (Physical Layer)

The link layer is the lowest layer, responsible for both the physical transmission of data across media (both wired and wireless in the form of
raw bits, light waves etc.) and establishing logical links. It handles issues like packet creation, transmission, reception, error detection,
collisions, line sharing, and more. MAC (media access control) addresses are unique 48- or 64-bit identifiers assigned to network hardware and
which are used at the link layer.

2. Internet Layer (Network Layer)

The Internet layer (sometimes also called the IP Layer) routes packets between communication partners across networks. The Internet layer
provides “best effort” communication. It sends out a message to its destination, but expects no reply, and provides no guarantee the message
will arrive intact, or at all.
The Internet uses the Internet Protocol (IP) addresses, which are numeric codes that uniquely identify destinations on the Internet. As can be
seen in following figure, every device connected to the Internet has such an IP address.

IP-Address
There are two types of IP addresses: IPv4 and IPv6. IPv4 addresses are the IP addresses from the original TCP/IP protocol. In IPv4, 12 numbers
are used (implemented as four 8-bit integers), written with a dot between each integer (see following figure). Since an unsigned 8-bit integer's

Web Engineering Chp 1 Page 16

are used (implemented as four 8-bit integers), written with a dot between each integer (see following figure). Since an unsigned 8-bit integer's
maximum value is 255, four integers together can encode approximately 4.2 billion unique IP addresses.

The decision to make IP addresses 32 bits limited the number of hosts to 4.2 billion. As more and more devices connected to the Internet the
supply of addresses dwindled, especially in some local areas that had already distributed their allotment.
To future-proof the Internet against the 4.2 billion limit, a new version of the IP protocol was created, IPv6. This newer version uses eight 16-bit
integers for 2128 unique addresses, over a billion billion times the number in IPv4. These 16-bit integers are normally written in hexadecimal,
due to their longer length.

3. Transport Layer
The transport layer ensures transmissions arrive in order and without error. This is accomplished through a few mechanisms. First, the data is
broken into packets formatted according to the Transmission Control Protocol (TCP). Each data packet has a header that includes a sequence
number, so the receiver can put the original message back in order, no matter when they arrive. Secondly, each packet acknowledges its
successful arrival back to the sender so in the event of a lost packet, the transmitter will realize a packet has been lost since no ACK arrived for
that packet. That packet is retransmitted, and although out of order, is reordered at the destination, as shown in following figure. This means
you have a guarantee that messages sent will arrive and will be in order.

Sometimes we do not want guaranteed transmission of packets. Consider a live multicast of a soccer game, for example. Millions of subscribers
may be streaming the game, and the broadcaster can't afford to track and retransmit every lost packet. A small loss of data in the feed is
acceptable, and the customers will still see the game. An Internet protocol called User Datagram Protocol (UDP) is used in these scenarios in
lieu of TCP. Other examples of UDP services include Voice Over IP, many online games, and Domain Name System (DNS).

4. Application Layer
Application layer protocols implement process-to-process communication and are at a higher level of abstraction in comparison to the low-
level packet and IP address protocols in the layers below it. There are many application layer protocols. A few that are useful to
web developers include the following:

1. HTTP. The Hypertext Transfer Protocol is used for web communication.

2. SSH. The Secure Shell Protocol allows remote command-line
connections to servers.
3. FTP. The File Transfer Protocol is used for transferring files between
computers.
4. POP/IMAP/SMTP. Email-related protocols for transferring and storing
email.
5. DNS. The Domain Name System protocol used for resolving domain
names to IP addresses.

Web Engineering Chp 1 Page 17

Domain Name System
Thursday, 9 April 2026 6:52 pm

Domain Name System

DNS is one of the core systems that make an easy-to-use Internet possible (DNS is used for email as well).One can imagine how unpleasant the
Internet would be if you had to remember IP addresses instead of names. Rather than [Link], you'd have to type [Link].

Name levels in a domain

A domain name can be broken down into several parts. They represent a hierarchy, with the rightmost parts being closest to the root at the
“top” of the Internet naming hierarchy. All domain names have at least a top-level domain (TLD) name and a second-level domain (SLD) name.
Most websites also maintain a third-level WWW subdomain and perhaps others. Following figure illustrates a domain with four levels.

Types of top level domains

The rightmost portion of the domain name (to the right of the rightmost period) is called the top-level domain. For the top level of a domain,
we are limited to two broad categories, plus a third reserved for other use. They are:

Generic top-level domain (gTLD)

Unrestricted: TLDs include .com, .net, .org, and .info.
Sponsored. TLDs including .gov, .mil, .edu, and others. These domains can have requirements for ownership and thus new second-level
domains must have permission from the sponsor before acquiring a new address.
New. From January to May of 2012, companies and individuals could submit applications for new TLDs. TLD application results were announced
in June 2012, and include a wide range of both contested and single applicant domains. These include corporate ones like .apple, .google,
and .macdonalds, and contested ones like .buy, .news, and .music.5
Country code top-level domain (ccTLD)
• TLDs include .us, .ca, .uk, and .au. At the time of writing, there were 252 codes registered.6 These codes are under the control of the
countries which they represent, which is why each is administered differently. In the United Kingdom, for example, commercial entities
and businesses must register subdomains to [Link] rather than second-level domains directly. In Canada, .ca domains can be obtained by
any person, company, or organization living or doing business in Canada. Other countries have peculiar extensions with commercial
viability (such as .tv for Tuvalu) and have begun allowing unrestricted use to generate revenue.
• Since some nations use nonwestern characters in their native languages, the concept of the internationalized top-level domain name
(IDN) has also been tested with great success in recent years. Some IDNs include Greek, Japanese, and Arabic domains (among others)
which have test domains at [Link] http:// 例え.テスト, and http:// مثال.إختبار , respectively.

Domain registration

Special organizations or companies called domain name registrars manage the registration of domain names. These domain name registrars
are given permission to do so by the appropriate generic top-level domain (gTLD) registry and/or a country code top-level domain (ccTLD)
registry. In the 1990s, a single company (Network Solutions Inc.) handled the com, net, and org registries. By 1999, the name registration
system changed to a market system in which multiple companies could compete in the domain name registration business. A single
organization—the nonprofit Internet Corporation for Assigned Names and Numbers (ICANN)—still oversees the management of top-level
domains, accredits registrars, and coordinates other aspects of DNS. At the time of writing this chapter, there were almost 1000 different
ICANN-accredited registrars worldwide. Following figure illustrates the process involved in registering a domain name.

Web Engineering Chp 1 Page 18

The process involves six steps shown as follows:
1. “Decide on a top-level domain (.com) and a second level domain (funwebdev).” The illustration shows a user at a server who says, “I want
the domain [Link]”
2. “Choose a domain registrar or a reseller (a company such as a web host that works with a registrar.” The illustration shows three formally
dressed figures carrying suitcases labeled as “Domain.”
3. “Registrars will check if domain is available by asking Registry for TLD.” The illustration points to a security guard standing next to a box full of
domain slabs, labeled “TLD (.com) registry.”
4. “Complete the registration procedures which includes WHOIS contact information (includes DNS information) and payment.” The illustration
shows the user talking to a domain registrar. An arrow points to a paper labeled “WHOIS info” which points to the security guard standing next
to “TLD (.com) registry.”
5. “Registry will push DNS information for domain to TLD name server.” The illustration shows a formally dressed figure at a desk labeled “TLD
name servers”, with a domain and registration form.
6. “Enjoy the new domain...You now have purchased the rights to use it.”
The illustration shows the user holding a suitcase labeled as “Domain”.

Address Resolution
While domain names are certainly an easier way for users to reference a website, eventually your browser needs to know the IP address of the
website in order to request any resources from it. DNS provides a mechanism for software to discover this numeric IP address. This process is
referred to as address resolution. When you request a domain name, a computer called a domain name server will return the IP address for
that domain. With that IP address, the browser can then make a request for a resource from the web server for that domain. What actually
happens during address resolution is more complicated, as can be seen in following figure.

1. The resolution process starts at the user's computer. When the URL [Link] is requested (perhaps by clicking a link or typing it
in), the browser will begin by seeing if it already has the IP address for the domain in its cache. If it does, it can jump to step in the diagram.
2. If the browser doesn't know the IP address for the requested site, it will delegate the task to the DNS resolver, a software agent that is part
of the operating system. The DNS resolver also keeps a cache of frequently requested domains; if the requested domain is in its cache, then the
process jumps to step .
3. Otherwise, it must ask for outside help, which in this case is a nearby DNS server, a special server that processes DNS requests. This might be
a computer at your Internet service provider (ISP) or at your university or corporate IT department. The address of this local DNS server is
usually stored in the network settings of your computer's operating system. This server keeps a more substantial cache of domain name/IP
address pairs. If the requested domain is in its cache, then the process jumps to step .
4. If the local DNS server doesn't have the IP address for the domain in its cache, then it must ask other DNS servers for the answer. Thankfully,

Web Engineering Chp 1 Page 19

4. If the local DNS server doesn't have the IP address for the domain in its cache, then it must ask other DNS servers for the answer. Thankfully,
the domain system has a great deal of redundancy built into it. This means that in general there are many servers that have the answers for any
given DNS request. This redundancy exists not only at the local level but at the global level as well.
5. If the local DNS server cannot find the answer to the request from an alternate DNS server, then it must get it from the appropriate top-level
domain (TLD) name server. For [Link] this is .com. Our local DNS server might already have a list of the addresses of the appropriate
TLD name servers in its cache. In such a case, the process can jump to step .
6. If the local DNS server does not already know the address of the requested TLD server (for instance, when the local DNS server is first
starting up it won't have this information), then it must ask a root name server for that information. The DNS root name servers store the
addresses of TLD name servers. IANA (Internet Assigned Numbers Authority) authorizes 13 root servers, so all root requests will go to one
of these 13 roots. In practice, these 13 machines are mirrored and distributed around the world (see [Link] for an
interactive illustration of the current root servers); at the time of writing, there are over 500 root server machines. With the creation of new
commercial top-level domains in 2012, approximately 2000 or so new TLDs has come online, creating a heavier load on these root name
servers.
7. After receiving the address of the TLD name server for the requested
domain, the local DNS server can now ask the TLD name server for the
address of the requested domain. As part of the domain registration
process, the address of the domain's DNS servers are sent to the TLD name servers, so this is the information that is returned to the local DNS
server in step .
8. The user's local DNS server can now ask the DNS server (also called a second-level name server) for the requested domain
([Link]); it should receive the correct IP address of the web server for that domain. This address will be stored in its own cache
so that future requests for this domain will be speedier. That IP address can finally be returned to the DNS resolver in the requesting computer,
as shown in step .
9. The browser will eventually receive the correct IP address for the requested domain, as shown in step . Note: If the local DNS server were
unable to find the IP address, it would return a failed response, which in turn would cause the browser to display an error message.
10. Now that it knows the desired IP address, the browser can finally send out the request to the web server, which should result in the web
server responding with the requested resource.

Web Engineering Chp 1 Page 20

Uniform Resource Locator (URL)
Sunday, 12 April 2026 12:41 pm

Uniform Resource Locators

Uniform Resource Locators (URL) play an important role in World Wide Web. URL
has different components. They components are
1. Protocol
2. Domain
3. Path
4. Query string
5. Fragment

1. Protocol
This part describes the protocol through which a web-page is accessed. When
we open a website, we need to specify the protocol first. Most of the unsecured
websites are accessed through HTTP protocol while in the case of secured
websites, HTTPS protocol is used. Web browsers also support other protocols.
For example, FTP protocol is used for accessing files.

2. Domain
The address of a website is called domain. Domain consists of top-level domain,
country code top-level domain, second level domain, third level domain etc.
Domain name Server finds IP address against this name and this website can be
accessed using that IP address.
Port: It is an optional part of a URL. Usually, it is not visible. Most of the times,
HTTP servers listen at port 80. A colon is added after domain name and then
integer port number is specified.

3. Path
After domain, the path, of the file we want to access, is specified. In figure 1,
[Link] is path of a file being accessed. When path is not mentioned, default
files like [Link] or [Link] are returned.

4. Query String
It is an information passed to the file. Query strings are mostly used in dynamic
websites. Information in query string is sent to server in the form of key value
pairs. It starts from delimiter ‘?’, and if there are more than one keys in a query
string, they are separated using ‘&’. Query string is page=17.

Web Engineering Chp 1 Page 21

5. Fragment
Fragment is used to request a specific portion of a web-page. It is represented
using ‘#’symbol. Article is a fragment, and browser automatically scrolls the
website to it.

Web Engineering Chp 1 Page 22

Hypertext transfer Protocol (HTTP)
Sunday, 12 April 2026 12:58 pm

Hypertext Transfer Protocol

Hypertext Transfer Protocol (HTTP) is the backbone of World Wide Web (WWW)
which is used to access and visit websites. Headers are used in HTTP. A sample
illustration of HTTP is given in figure 2. When a client requests to access a web-page,
a piece of information is sent to server called request header. It has different
components like methods (GET, POST), the path a client wants to visit, and the file a
client wants to access on a server. These headers are automatically generated by a
browser, and sent to server side. It can also contain some additional information e.g.
version of protocol, host, and IP address. If multiple websites are hosted on a single
web server, there IP address will remain the same. Another important part of HTTP is
user agent which contains information about client’s operating system and browser.
A server can generate dynamic contents on the basis of this information.
When a web server receives a request, it sends response header and content against
it. Response header can contain response code, date & time, information about
server, and content length etc.
When a client fills a form, its data is sent to server suing POST method. The same can
be done by using GET method, but it uses query string to send information to server.
The comparison of POST and GET is shown in figure 3.
Different response codes are used to determine how a server handled a client’s
request. 200 codes are for successful responses, 300 are for redirection-related
responses, 400 codes are client errors and 500 codes are server errors. For example,
some response codes and their purposes are given below.
200: OK
301: Moved Permanently
400: Bad Request
404: Not found
500: Internal server error

Figure-2: HTTP (taken from Fundamentals of Web Development second edition

Web Engineering Chp 1 Page 23

Figure-2: HTTP (taken from Fundamentals of Web Development second edition
2017)

Figure-3: POST Vs GET (taken from Fundamentals of Web Development second

edition 2017)

Web Engineering Chp 1 Page 24

Chapter 02: Introduction to web servers
Tuesday, 14 April 2026 6:11 pm

How a web browser works?

When we open a website, many processes run at backend. When we request for a
webpage, we get its HTML contents first, which are in textual form. If that webpage
contains any images, videos, styles sheets or scripts, all of these external files are
fetched one by one. Browser requests and receives these files from server. One
request may contain further multiple requests to get webpage content. When
browser gets these contents, it renders and displays our page by using them.

Load times and cascades

We can check the requests and responses against them, and time taken for
responses, when we open a website. It can be done using developer tools in
Chrome/Firefox. This tool is particularly intended for developers and thus called a
developer tool. For example, in Chrome, we can open developer tools using browser
menu (Ctrl+Shift+I shortcut can also be used). These developer tools contain
different components for different purposes. For example, the component ‘Network’
contains information related to network.

Web Engineering Chp 1 Page 25

Browser Rendering
When a browser receives all the contents of a webpage, it renders and then displays
it. Different browsers, for this purpose, use different procedures according to their
standards which have been devised by World Wide Web Consortium (W3C).
Therefore, a web developer should test a website using different browsers.

Browser Caching
When we visit a website and fetch some images and files from it, they are stored in
browser cache. Next time, when we need that file from the same server, the file will
be retrieved from browser cache instead of server, resulting in fast browsing.
Caching can also be disabled to avoid caching, like done in banking websites.

A cache (pronounced "cash") is a high-speed hardware or software component that

temporarily stores data, enabling future requests for that data to be served faster

Web Engineering Chp 1 Page 26

Browser Features
Browsers contain certain features to facilitate users. Some features and their
purposes are given below.
Search Engine Integration: Suggests search query in search bar.
URL Auto-completion: Gives suggestions on the basis of address bar input.
Form Auto-completion: Browsers saves some values and fills them automatically in
upcoming forms.
Cloud sync of user data: Search data becomes independent of device and can be
available at any device against specific login credentials.
Phishing website detection: Some browsers also identify websites which can hack
user’s data.
Secure connection visualization: A lock symbol is shown to represent secure
connection.

Browser Extensions
Extensions can modify the page being rendered. They are designed for specific
purposes. For example, extensions like ‘Lighthouse’ and ‘React developer tools’ are
very useful for developers while extensions like ‘Adblock’ and ‘Third Party Plugins’
are used by general public.

Web Engineering Chp 1 Page 27

Introduction to web servers
Tuesday, 14 April 2026 6:33 pm

Introduction to Web Servers

It is also a computer but more powerful than the computers used at homes. Web
servers follow a certain application stack. This application stack consists of
1. Operating system
2. Web server software
3. Database
4. Scripting language (for dynamic requests.)

1. Application Stacks
The most commonly used application stack is LAMP which contains Linux operating
system, Apache web server, MySQL database, and PHP scripting language. It is
traditionally used for dynamic websites. There are other stacks as well. For example,
WAMP, WISA, and MEAN. Therefore, a full-stack developer is supposed to have
expertise of working on operating system, web server, frontend development, and
backend development.

2. Operating Systems
Mostly used operating systems are Linux, Mac, and Windows.

3. Web server software

Some popular web server software are Apache, Nginx, and IIS.

4. Database software
Relational databases like MySQL, PostgreSQL, and Sqlite are mostly used. However,
document based databases are also being used these days. One important example
of document based databases is MongoDB.

5. Scripting languages
The content of a dynamic website can be generated in almost every scripting
language. However, PHP is world-wide used for this purpose. These days, [Link],
Python, and [Link] are also being used as scripting languages.

Web Engineering Chp 1 Page 28

Architecture of web-based system
Tuesday, 14 April 2026 6:44 pm

Multi-tier architecture
Web development can be realized at multiple tiers.
1. 2-tier architecture
When we access a website, at least 2-tiers are created i.e.
a. Client-side tier
b. Server-side tier

However, in the perspective of web development, it becomes easy if we divide it into

more tiers. It also eases the maintenance of a website.

2. 3-tier architecture
In software engineering perspective, these tiers can be broken down to further tiers.
In 3-tier architecture
a. First tier is responsible for content display (Presentation Layer)
b. Second tier is business logic for generating dynamic content (Functional
Logic Layer)
c. Third tier is database layer which stores data and manages database.
(Database Management Layer)

The advantage of separating presentation and business logic layers is that when we
change business logic for some users, we do not need to change presentation layer
necessarily.

Web Engineering Chp 1 Page 29

Introduction to HTML
Tuesday, 14 April 2026 6:58 pm

HTML stands for hypertext markup language. Markup is a way to indicate

information about the content that is distinct from the content. There has been
different version of HTML, the latest is HTML5.
To understand markup, think of an assignment you submitted to your teacher.
Teacher checks it and marks it for what can be improved or which mistakes student
made which can be corrected. The feedback of teacher can be thought as markup. To
make distinction between assignment and markup, teacher may use different color
pen.

HTML validator, a tool of W3C, is used to identify errors in an HTML page and give
recommendations in the form of warnings.

15.1 HTML5
It is the latest version of HTML supported by all of the modern browsers.

15.2 Elements and attributes

An HTML document contains HTML elements, also called HTML tags. Every HTML
element has a unique name which can be written after the angle bracket (<). HTML
elements can also contain attributes and the content within the tag. The figure given
below shows the syntax of anchor tag, an attribute of link, and content. Most of tags
come in pair, means they have closing tags as well.

15.3 An empty element

An empty element does not contain any text content; instead, it is an instruction to

Web Engineering Chp 1 Page 30

An empty element does not contain any text content; instead, it is an instruction to
the browser to do something.
In XHTML, empty elements had to be terminated by a trailing slash. However, the
trailing slash in empty elements is optional in HTML5.

15.4 Nesting element

Developers must be careful while using nesting elements. While closing, the nested
element must be closed first. The example of correct and incorrect nesting is shown
below in figure 10. In figure 11, the relationship of nested tag is shown. Nested
elements can also be shown in the form of tree containing roots and children (figure
12).

Web Engineering Chp 1 Page 31

Web Engineering Chp 1 Page 32
Common HTML tags; Heading, Paragraphs, Divs; Inline Text
Elements; Images; HTML Character Entities
Tuesday, 14 April 2026 9:23 pm

HTML Tags
HTML is only used for structuring and storing content. It is not used for styling but
style sheets can be used for this purpose. Common HTML tags are explained below.
1. DOCTYPE
This tag is used to inform web server and browser that the document is an
HTML document. It is written in the start of document. Its syntax is <!DOCTYPE
html>.
2. Head and Body tags
External files, document title, and meta data about document are mentioned in
the ‘head’ tag. The contents of document are mentioned in the ‘body’ tag.
Earlier, parent ‘html’ tag was necessary but this compulsion has been removed
in HTML5. However, most developers still use this tag.
3. Meta Tag
This tag contains information about coding details of HTML contents.
4. Link Tag
This tag is used to link the external styles sheets to an HTML document.
5. Script Tag
To specify a certain script from an external file, script tag is used.

6. Heading Tag
HTML provides six levels of headings (h1 - h6). Headings are also used by the
browser to create a document outline for the page. It is recommended not to
use different headings for setting font size.
7. Paragraphs and Divisions
Paragraph is a container for text and other HTML elements. <p> tag is used of
paragraph.
Divisions are used to create a logical grouping of content. It is also a container
element, and <div> tag is used for division. Following figure demonstrates a
paragraph tag.

Web Engineering Chp 1 Page 33

These tags do not create their space separately when they are used in other tags. In
other words, these tags do not disrupt the flow. Its examples are <a>, <br>, and
<site> etc.
8. Block elements
These elements disrupt the existing flow and take their own space. Its examples
are <div>, <hr>, and <li> etc.
9. Images
<img> element is used to display image. It is mandatory to use ‘alt’ attribute in
image tag with the purpose to display text against an image which also helps
visually impaired. The figure, given below, explains image tag properly.

10. Character entities

These are special characters for symbols for which there is either no easy way to type
them via a keyboard or which have a reserved meaning in HTML e.g. ‘<’, which
means that ‘<’ cannot be displayed by just typing ‘<’ because it is a keyword. Some
entities and their description is given below in the table.

Entity Description
&nbsp; Nonbreakable space
&lt; <
&gt; >
&copy; ©

Web Engineering Chp 1 Page 34

&trade; ™

Web Engineering Chp 1 Page 35

Links
Tuesday, 14 April 2026 9:41 pm

Links
Links are an essential feature of all web pages. Links are created using the element
(the “a” stands for anchor). It has two main parts: the destination and the label.

Web Engineering Chp 1 Page 36

Relative Referencing
Whether we are constructing links with the element, referencing images with the
<img> element, or including external JavaScript or CSS files, we need to be able to
successfully reference files within our site. This requires learning the syntax for so-
called relative referencing. Table 17.1 provides examples of the different types of
URL referencing.

Relative Link Type Example

Same directory <a href="[Link]">
Child Directory <a href="images/[Link]">
Grandchild/Descendant Directory <a href="css/images/[Link]">
Parent/Ancestor Directory <a href="../[Link]">
<a href="../../[Link]”>
Sibling Directory <a href="../images/[Link]">
Root Reference <a href="/images/[Link]">

Web Engineering Chp 1 Page 37

Lists
Tuesday, 14 April 2026 9:47 pm

Lists
HTML provides three types of lists which are explained below.
1. Unordered list
2. Ordered list
3. Description list
4. Nested list

1. Unordered lists
Collections of items in no particular order is called unordered list. These are by
default rendered by the browser as a bulleted list. However, it is common in CSS
to style unordered lists without the bullets. Unordered lists have become the
conventional way to markup navigational menus.

2. Ordered lists
Collections of items that have a set order is called ordered list. These are by
default rendered by the browser as a numbered list.

Web Engineering Chp 1 Page 38

3. Nested lists
A list within a list is called nested list, for example:

4. Description lists
Collection of name and description/definition pairs is called a description list.

Web Engineering Chp 1 Page 39

Collection of name and description/definition pairs is called a description list.
These lists tend to be used infrequently. Perhaps, the most common example
would be an FAQ list. Unlike the other two lists (which contain <li> items within
either a <ul> or <ol> parent container), the container for a description list is the
<dl> element. It contains <dt> (term or name to be described) and <dd>
(describes each term) pairs for each item in the list.

Web Engineering Chp 1 Page 40

HTML Semantic Structuring
Tuesday, 14 April 2026 9:57 pm

HTML Semantic Structuring

HTML semantic structuring adds meaning to a web page rather than merely making it
look pretty. A <p> tag, for example, denotes that the contained text is a paragraph.
Because people understand what paragraphs are and how to display them, this is
both semantic and presentational. Tags like <b> and I on the other hand, do not have
any semantic value. They merely specify how the text should be formatted (bold or
italic) and add no further meaning to the markup.

Examples of semantic HTML tags include:

Header tags <h1> through <h6>
<blockquote>
<code>
<em>

There are many more semantic HTML tags to use as you build a standards-compliant
website.
1. Advantages Semantic Structuring
Eliminating presentation-oriented markup and writing semantic HTML markup has a
variety of important advantages:

1. Maintainability.
Web pages with a lot of presentation markup are more difficult to edit and change
than those with semantic markup. Our students are frequently startled to hear that
maintaining and altering old code takes more time than writing new code. This is
especially true for web initiatives. Web projects, in our experience, incur more
"requirements drift" because of end user and customer input than traditional
software development projects.

2. Performance.
Semantic web pages are typically quicker to author and faster to download.

3. Accessibility.
The content on web pages is not accessible to all web users. Voice reading software
is used by users with vision problems to use the internet. If a website does not
employ semantic markup, visiting it with speech reading software might be an
extremely irritating experience. Many governments also require that websites for
organizations that receive federal support follow particular accessibility criteria. The
US government, for example, maintains its own set of Section 508 Accessibility
Guidelines ([Link]

4. Search Engine Optimization

The numerous search engine crawlers are, for many website owners, the most
significant users of a website. Crawlers are automated programmes that explore the

Web Engineering Chp 1 Page 41

significant users of a website. Crawlers are automated programmes that explore the
internet, looking for content to utilise in user searches. Semantic markup gives these
crawlers better instructions: it tells them what material on the site is most
important.

2. Header Tag
The header of a page or section is defined with the <header> tag. It usually includes a
logo, a search engine, and navigational connections, among other things. This tag
does not create a new outline section. The heading (an <h1>–<h6> element) of a
surrounding section is typically contained in a <header> element. This, however, is
not essential. One of the HTML5 elements is the header tag. Several <header> tags
can be used in an HTML document, and they can be positioned in any area of it. It is
forbidden to use the <header> tag inside the <footer> and <address> components, as
well as inside another <header> tag.
The tag <header> is used in pairs. Between the opening (<header>) and closing
(</header>) tags, the content is written.

3. Footer Tag
A web page's or section's footer is defined by the <footer> tag. It usually includes
copyright information, contact information, navigation links, and so on. On a web
page, there might be many <footer> tags. You can, for example, include a footer
within the <article> element to keep information about the content (links, footnotes,
etc.). Except for the <footer> and <header> tags, the tag can include other HTML
components. One of the HTML5 components is the footer. If the footer has contact
information, provide it in the <address> tag.

The <footer> element can contain the following:

• copyright, authorship and contact information
• related documents
• sitemap
• back to top links
The <footer> tag comes in pairs. The content is written between the opening
(<footer>) and closing (</footer>) tags.
The <footer> tag supports the Global Attributes and the Event Attributes.

4. Navigation Tag
One of the HTML5 elements is the <nav> tag. It specifies a set of navigation links,
either within the current content or to other papers. Tables of contents, menus, and
indexes are examples of navigation blocks.
A single HTML document can include multiple <nav> tags, such as one for site
navigation and another for intra-page navigation.
It's worth noting that the <nav> element doesn't contain all of the links in the HTML
content; it only contains the primary navigation blocks. The nav> element can be
used to define links in the website's footer, however the <footer> tag is more
commonly used in such circumstances.
The <nav> tag is not allowed to be nested within the address> element.
The <nav> tag is a pair of tags. The material is written in the middle of the page.

5. Main Tag

Web Engineering Chp 1 Page 42

 5. Main Tag
In the HTML5 specification, the <main> tag is a new block-level element. The
dominating content of the document's <body> is specified by this tag. The <main>
tag's content must be unique and not duplicate blocks of the same type that appear
in other pages, such as a site's header, header, footer, menu, search, copyright
information, and so on. The <article>, <aside>, <footer>, <header>, or <nav> tags
cannot include the main> element. There can't be more than one <main> tag in a
document that doesn't have a hidden attribute.

Unlike elements like <body>, <h2>, and others, this element has no effect on the
DOM's understanding of the page's structure. Landmarks can be used by assistive
technology to easily identify and navigate to the document's big portions. It is
preferable to utilise the <main> element instead of declaring role="main."

The "skipnav" technique allows users of assistive technology to skip huge chunks of
repetitive material. This allows the user to quickly reach the primary material of a
website. If you give the <main> element an id property, it will become the target of a
skip navigation link.

The tag main> is used in pairs. Between the opening (<main>) and closing (</main>)
tags, the text is written. The Global Attributes and Event Attributes are supported by
the <main>tag.

6. Article Tag
One of the HTML5 elements is the <article> tag. It's used to describe stuff that's self-
contained and self-contained. An article should have a distinct significance and stand
out from the rest of the web page's material.

A blog entry, forum post, news item, or user remark can all be included in the
<article> element.

The internal element represents an article that is associated to the external element
when the <article> element is nested. The address> element can be used to provide
author information for the <article> element. It will not, however, apply to nested
<article> components. In a single HTML document, many article> tags can be used.
The <h2> to <h6> tags can be nested within the <article> tag. If the <h1> tag has
never been used previously, it can be used now. A <time> element with a datetime
attribute can be used to express the <article> tag's publishing date and time.

The tag article> is used in pairs. Between the opening (article>) and closing (/article>)
tags, the text is written.

7. Section Tag
One of the HTML5 components is the <section>. It's utilised to make separate
sections of a website with logically connected content (news block, contact
information, etc.). When designing a landing page, the <section> tag is frequently
used to break the page into logical blocks.

A navigation menu, for example, must be wrapped in a <nav> tag, while a map

Web Engineering Chp 1 Page 43

A navigation menu, for example, must be wrapped in a <nav> tag, while a map
display and a list of search results do not need to be wrapped in a <nav> tag and can
be placed inside a <section>.

The nested <section> tag can be used to divide information into groups within the
<article> tag. As a result, using <h1> -<h6> heads within the <article> and <section>
tags is essential. The usage of a <h2> title in each section defined by the <section>
tag is permitted. Instead of using the <section> element as a universal container for
generating page structure, use the <div> tag instead.

The tag <section> is used in pairs. Between the opening (<section>) and ending
(</section>) tags, the text is written.

8. Figure Tag
The <figure> tag is used to indicate content that is self-contained. Diagrams, photos,
illustrations, code samples, and so forth can all be included in the tag. One of the
HTML5 elements is the figure tag. The <figure> tag's content is tied to the main
flow's content. It is, nonetheless, regarded as a self-contained unit. The <figcaption>
element is used to add a caption or explanation to the content of the figure> tag. The
<figcaption> tag is a child element of the figure> tag, and it is either the first or last
child element. The content will be shown at the top of the image if <figcaption> is
the first nested element.
The tag <figure> is used in pairs. Between the beginning (<figure>) and closing
(</figure>) tags, the content is written.

9. Caption Tag
The table's header is defined using the <caption> tag. The tag must be the first child
of its parent <table> element and must be inside the <table> element immediately
after the opening (<table>) tag. There is only one caption per table that can be
defined. You must use the <figcaption> element instead of the <caption> element
when the table> element containing the caption> is the only descendent of the
<figure> element. A table caption is center-aligned above a table by default.
However, the caption can be aligned and placed using the text-align and caption-side
attributes.
The tag <caption> is used in pairs. Between the opening (<caption>) and closing
(</caption>) tags, the text is written.

Web Engineering Chp 1 Page 44

Sight Tools
Friday, 17 April 2026 3:51 pm

1. Tools for web development

HTML pages can be created in a variety of ways. An HTML editor can be used with any program that can edit
and save text files. However, the use of the right technology can make writing web content much easier. You
may have selected an HTML editor based on lab availability, familiarity, or some other factor.

While we will not be recommending specific tools for creating web content, we believe it is critical to
understand the many types of web development tools and their relative benefits and drawbacks. Web
development tools are divided into five categories:

• WYSIWYG editors,
• Code editors,
• Full IDEs,
• Cloud-based environments,
• Code playgrounds.
1. WYSIWYG editors.
Web tools that provide a user experience similar to that of a word processor are known as What-You-See-Is-
What-You-Get. The benefit of such tools is that you don't require much (if any) HTML knowledge. However,
there is a significant downside to using such technologies. These tools are never fully WYSIWYG, and they
frequently have trouble previewing increasingly complex CSS. Indeed, in order to remedy such issues, these
technologies nearly always have to give users with a typical HTML view. While we would never recommend
relying only on such a tool, inexperienced end users may find them useful. In this genre, Adobe Dreamweaver
and Adobe Muse are two prominent editors. WYSIWYG editors are also used in web-based publishing
programs like blogs and content management systems.
2. Code editors.
Since web developers typically need knowledge of HTML, CSS, JavaScript, and more, many web developers
prefer to use tools that allow them to focus on viewing and editing these text files. Nonetheless, it is helpful to
use a tool that “understands” HTML, CSS, and so on. Such a tool might provide color coding, intelligent hints,
tag completion, and so on. There are a wide range of choices in this genre, many of them open source. Some of
the options include Atom, BlueFish, Brackets, Notepad++, Sublime Text, and Visual Studio Code.
3. Full IDEs.
Integrated Development Environments provide a more full featured programming experience. They not only
provide most of the same functionality as the previously mentioned code editors, but also typically provide extra
capabilities, such as comprehensive help files, build tools, multiple-language support, and integration with other
enterprise tools, such as databases. Some of the options in this genre include Eclipse, NetBeans, and Visual
Studio. This extra power does come at a price, both figuratively and literally. The figurative costs is these
complicated IDEs typically have a more substantial learning curve and can often have steep hardware
requirements.
4. Cloud-based environments.
One of the fastest growing approaches to developing web applications is to do one's development, testing, and
hosting all within an online environment. The key advantage of such an approach is that you don't have to worry
about installing, supporting, and synchronizing different web development tools, since it is all done for you by
the online environment. As well, using such online environments means that you don't really care what device
you have; if you have an Internet connection, you can do your coding. Of course, that's also the key
disadvantage. Since you need an Internet connection, you can't code while on the plane or in a forest (though
these environments sometimes provide a mechanism for offline usage). At the time of writing, CodeAnywhere
and Cloud9 are two popular sites providing a complete IDE for web development.
5. Code playgrounds.
Our final approach to web development tools also makes use of online environments. Code
playgrounds are not about constructing complete sites. Instead, they provide a way to
experiment, demonstrate, and share smaller snippets of code. Some of the most popular
include CodePen , JSFiddle, and CSS Deck. These environments are especially valuable for
students as a way to construct online portfolios and to show off their skills to prospective
clients and employers.

Web Engineering Chp 1 Page 45

Chapter 03: Introduction to CSS
Friday, 17 April 2026 3:51 pm

Introduction to CSS
In current web development best practices HTML should not describe the formatting or presentation of
documents. Instead that presentation task is best performed using Cascading Style Sheets (CSS). CSS is a W3C
standard for describing the appearance of HTML elements. Another common way to describe CSS's function is
to say that CSS is used to define the presentation of HTML documents. With CSS, we can assign font
properties, colors, sizes, borders, background images, and even position elements on the page. CSS can be
added directly to any HTML element (via the style attribute), within the <head> element, or, most commonly, in
a separate text file that contains only CSS.

Benefits of CSS
Before digging into the syntax of CSS, we should say a few words about why using CSS is a better way of
describing appearances than HTML alone. The benefits of CSS include the following:

Improved control over formatting.

The degree of formatting control in CSS is significantly better than that provided in HTML. CSS gives web
authors fine-grained control over the appearance of their web content.
Improved site maintainability.
Websites become significantly more maintainable because all formatting can be centralized into one CSS file, or
a small handful of them. This allows you to make site-wide visual modifications by changing a single file.
Improved accessibility.
CSS-driven sites are more accessible. By keeping presentation out of the HTML, screen readers, and other
accessibility tools work better, thereby providing a significantly enriched experience for those reliant on
accessibility tools.
Improved page-download speed.
A site built using a centralized set of CSS files for all presentation will also be quicker to download because
each individual HTML file will contain less style information and markup, and thus be smaller.
Improved output flexibility.
CSS can be used to adopt a page for different output media. This approach to CSS page design is
often referred to as responsive design.

Web Engineering Chp 1 Page 46

CSS Syntax
Friday, 17 April 2026 4:56 pm

CSS Syntax
A CSS document consists of one or more style rules. A rule consists of a selector that identifies the HTML
element or elements that will be affected, followed by a series of property:value pairs (each pair is also called a
declaration).

Each individual CSS declaration must contain a property. These property names are predefined by the CSS
standard. The CSS2.1 recommendation defines over a hundred different property names, so some type of
reference guide, whether in a book, online, or within your web development software, can be helpful.5 This
section will only be able to cover most of the common CSS properties. The most used CSS properties are given
below. Properties marked with an asterisk contain multiple subproperties not listed here (e.g., border-top,
border-top color, border-top-width, etc).
Fonts
font
font-family
font-size
font-style
font-weight
@font-face

Text
letter-spacing
line-height
text-align
text-decoration*
text-indent
Color and background
background
background-color
background-image
background-position
background-repeat
box-shadow
color
opacity
Borders
border*
border-color
border-width
border-style
border-top, border-left, …*
border-image*
border-radius
Spacing
padding
padding-bottom, padding-left, …
margin
margin-bottom, margin-left, …
Sizing
height
max-height
max-width
min-height
min-width
width
Layout
bottom, left, right, top
clear
display
float
overflow
position

Web Engineering Chp 1 Page 47

position
visibility
z-index
Lists
list-style*
list-style-image
list-style-type
Effects
animation*
filter
perspective
transform*
transition*

Web Engineering Chp 1 Page 48

CSS Syntax (value)
Friday, 17 April 2026 5:00 pm

CSS Syntax (Values)

Each CSS declaration also contains a value for a property. The unit of any given value is
dependent upon the property. Some property values are from a predefined list of keywords.
Others are values such as length measurements, percentages, numbers without units, color
values, and URLs.
Color Values
Name
Use one of 17 standard color names. CSS3 has 140 standard names.
color: red; color: hotpink; /* CSS3 only */
RGB
Uses three different numbers between 0 and 255 to describe the red, green, and blue values of
the color.
color: rgb(255,0,0); color: rgb(255,105,180);
Hexadecimal
Uses a six-digit hexadecimal number to describe the red, green, and blue value of the color;
each of the three RGB values is between 0 and FF (which is 255 in decimal). Notice that the
hexadecimal number is preceded by a hash or pound symbol (#).
color: #FF0000; color: #FF69B4;
RGBa
This defines a partially transparent background color. The “a” stands for “alpha,” which is a
term used to identify a transparency that is a value between 0.0 (fully transparent) and 1.0
(fully opaque).
color: rgba(255,0,0,0.5);
HSL
Allows you to specify a color using Hue Saturation and Light values. This is available only in
CSS3. HSLA is also available as well.
color: hsl(0,100%,100%); color: hsla(330,59%,100%,0.5);

Just as there are multiple ways of specifying color in CSS, so too there are multiple ways of
specifying a unit of measurement. these units can sometimes be complicated to work with.
When working with print design, we generally make use of straightforward absolute units
such as inches or centimeters and picas or points. However, because different devices have
differing physical sizes as well as different pixel resolutions and because the user is able to
change the browser size or its zoom mode, these absolute units don't always make sense with
web element
measures.

Below is a list of the different units of measure in CSS. Some of these are relative units, in
that they are based on the value of something else, such as the size of a parent element.
Others are absolute units; in that they have a real-world size. Unless you are defining a style
sheet for printing, it is recommended you avoid using absolute units. Pixels are perhaps the
one popular exception (though, as we shall see later, there are also good reasons for avoiding
the pixel unit). In general, most of the CSS that you will see uses either px, em, or % as a
measure unit.
Units of Measure Values
px
Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch).
em
Equal to the computed value of the font-size property of the element on which it is used.
When used for font sizes, the em unit is in relation to the font size of the parent.
%
A measure that is always relative to another value. The precise meaning of % varies
depending upon the property in which it is being used.

Web Engineering Chp 1 Page 49

depending upon the property in which it is being used.
ex
A rarely used relative measure that expresses size in relation to the x-height of an element's
font. Relative
ch
Another rarely used relative measure; this one express size in relation to the width of the zero
(“0”) character of an element's font.
rem
Stands for root em, which is the font size of the root element. Unlike em, which may be
different for each element, the rem is constant throughout the document.
vw, vh
Stands for viewport width and viewport height. Both are percentage values (between 0 and
100) of the viewport (browser window). This allows an item to change size when the
viewport is resized.
in
Inches Absolute
cm
Centimeters Absolute
mm
Millimeters Absolute
pt
Points (equal to 1/72 of an inch)
Pc
Pica (equal to 1/6 of an inch)

From <[Link]

Web Engineering Chp 1 Page 50

Location of Styles
Friday, 17 April 2026 5:06 pm

Location of styles
As mentioned earlier, CSS style rules can be in three different locations. These three are not
mutually exclusive, in that you could place your style rules in all three. In practice, however,
web authors tend to place all their style definitions in one (or more) external style sheet files.
Inline Styles
Inline styles are style rules placed within an HTML element via the style attribute. An inline
style only affects the element it is defined within and overrides any other style definitions for
properties used in the inline style. Notice that a selector is not necessary with inline styles and
that semicolons are only required for separating multiple rules. Using inline styles is
generally discouraged since they increase bandwidth and decrease maintainability (because
presentation and content are intermixed and because it can be difficult to make consistent
inline style changes across multiple files). Inline styles can, however, be handy for quickly
testing out a style change.
Embedded Style Sheet
Embedded style sheets (also called internal styles) are style rules placed within the <style>
element (inside the <head> element of an HTML document). While better than inline styles,
using embedded styles is also by and large discouraged. Since each HTML document has its
own <style> element, it is more difficult to consistently style multiple documents when using
embedded styles. Just as with inline styles, embedded styles can, however, be helpful when
quickly testing out a style that is used in multiple places within a single HTML document.
We sometimes use embedded styles in the book or in lab materials for that
reason.
External Style Sheet
External style sheets are style rules placed within a external text file with the .css extension.
This is by far the most common place to locate style rules because it provides the best
maintainability. When you make a change to an external style sheet, all HTML documents
that reference that style sheet will automatically use the updated version. The browser can
cache the external style sheet, which can improve the performance of the site as well.

From <[Link]

Web Engineering Chp 1 Page 51

Selectors
Saturday, 25 April 2026 3:38 pm

Selectors (A CSS Selector is used to select HTML elements that you want to style.)
As teachers, we often need to be able to relay a message or instruction to either individual
students or groups of students in our classrooms. In spoken language, we have a variety of
different approaches we can use. We can identify those students by saying things like: “all of
you talking in the last row,” or “all of you sitting in an aisle seat,” or “all of you whose name
begins with ‘C’,” or “all first-year students,” or “John Smith.” Each of these statements
identifies or selects a different (but possibly overlapping) set of students. Once we have used
our student selector, we can then provide some type of message or instruction, such as “talk
more quietly,” “hand in your exams,” or “stop texting while I am speaking.” when defining
CSS rules, you will need to first use a selector to tell the browser which elements will be
affected by the property values. CSS selectors allow you to select individual or multiple
HTML elements. The topic of selectors has become more complicated than it was when we
started teaching CSS in the late 1990s. There are now a variety of new selectors that are
supported by most modern browsers. Before we get to those, let us look at the three basic
selector types that have been around since the earliest CSS2 specification.
Element Selectors
Element selectors select all instances of a given HTML element. You can select all elements
by using the universal element selector, which is the * (asterisk) character. You can select a
group of elements by separating the different element names with commas. This is a sensible
way to reduce the size and complexity of your CSS files, by combining multiple identical
rules into a single rule.
Class Selectors
A class selector allows you to simultaneously target different HTML elements regardless of
their position in the document tree. If a series of HTML elements have been labeled with the
same class attribute value, then you can target them for styling by using a class selector,
which takes the form: period (.) followed by the class name.
Id Selectors
An id selector allows you to target a specific element by its id attribute regardless of its type
or position. If an HTML element has been labeled with an id attribute, then you can target it
for styling by using an id selector, which takes the form: pound/hash (#) followed by the id
name.

Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an
element attribute or by the value of an attribute. This can be a very powerful technique, but
because of uneven support by some of the browsers in the past, not all web authors have used
them. Followings are the most common ways one can construct attribute selectors in CSS3.

[]
A specific attribute.

[title]
Matches any element with a title attribute

[=]
A specific attribute with a specific value. a[title=“posts from this country”] Matches any <a>
element whose title attribute is exactly “posts from this
country“

[~=]
A specific attribute whose value matches at least one of the words in a space delimited list of
words. [title~=“Countries”] Matches any title attribute that contains the word “Countries“

Web Engineering Chp 1 Page 52

words. [title~=“Countries”] Matches any title attribute that contains the word “Countries“

[^=]
A specific attribute whose value begins with a specified value. a[href^=“mailto”] Matches
any <a> element whose href attribute begins with “mailto“

[*=]
A specific attribute whose value contains a substring. img[src*=“flag”] Matches any <img>
element whose src attribute contains somewhere within it the text “flag“

[$=]
A specific attribute whose value ends with a specified value. a[href$=“.pdf”] Matches any
<a> element whose href attribute ends with the text “.pdf“

Attribute Selectors
An attribute selector provides a way to select HTML elements either by the presence of an
element attribute or by the value of an attribute. This can be a very powerful technique, but
because of uneven support by some of the browsers in the past, not all web authors have used
them. Followings are the most common ways one can construct attribute selectors in CSS3.

[]
A specific attribute.

[title]
Matches any element with a title attribute

[=]
A specific attribute with a specific value. a[title=“posts from this country”] Matches any <a>
element whose title attribute is exactly “posts from this
country“

[~=]
A specific attribute whose value matches at least one of the words in a space delimited list of
words. [title~=“Countries”] Matches any title attribute that contains the word “Countries“

[^=]
A specific attribute whose value begins with a specified value. a[href^=“mailto”] Matches
any <a> element whose href attribute begins with “mailto“

[*=]
A specific attribute whose value contains a substring. img[src*=“flag”] Matches any <img>
element whose src attribute contains somewhere within it the text “flag“

[$=]
A specific attribute whose value ends with a specified value. a[href$=“.pdf”] Matches any
<a> element whose href attribute ends with the text “.pdf“

From <[Link]

CSS Selectors (Contextual):

A contextual selector (in CSS3 also called combinators) allows you to select
elements based on their ancestors, descendants, or siblings.
A descendant selector matches all elements that are contained within another
element.

Web Engineering Chp 1 Page 53

From <[Link]

Web Engineering Chp 1 Page 54

Box Model
Saturday, 25 April 2026 3:39 pm

The Box Model

In CSS, all HTML elements exist within an element box shown in Figure below. In order to
become proficient with CSS, you must become familiar with the element box.

Background:
the background color or image of an element fills an element out to its border (if it has one,
that is).
Common Background Properties
Reference: taken from [Link]
Value Description
background-color Specifies the background color to be used
background-image Specifies ONE or MORE background images to be used
background-position Specifies the position of the background images
background-size Specifies the size of the background images
background-repeat Specifies how to repeat the background images
background-origin Specifies the positioning area of the background images
background-clip Specifies the painting area of the background images
background- Specifies whether the background images are fixed or scrolls with the
attachment rest of the page

CSS TRBL Shortcut

• border-top-color: red; /* sets just the top side */

Web Engineering Chp 1 Page 55

 • border-top-color: red; /* sets just the top side */
• border-right-color: green; /* sets just the right side */
• border-bottom-color: yellow; /* sets just the bottom side */
• border-left-color: blue; /* sets just the left side */
• Alternately, we can set all four sides at once:
• border-color: red; /* sets all four sides to red */
• border-color: red green orange blue; /* sets 4 colors */

Collapsing Margins

Box Dimensions
Content-box
• width/height applied to contents only
• borders and padding counted separately
• margins counted separately
Border-box
• width/height include border and padding
• margins counted separately

Web Engineering Chp 1 Page 56

Limitations of Height Property
For block-level elements such as <p> and <div> elements, there are limits to what the width
and height properties can actually do. You can shrink the width, but the content still needs to
be displayed, so the browser may very well ignore the height that you set.

Web Engineering Chp 1 Page 57

Overflow Property
It is possible to control what happens with the content if the box's width and height are not
large enough to display the content using the overflow property.
Box Sizing Using Percentages

Box Sizing Using Pixels

Web Engineering Chp 1 Page 58

From <[Link]

Web Engineering Chp 1 Page 59

CSS Text Styling
Saturday, 25 April 2026 4:58 pm

CSS Text Styling

CSS provides two types of properties that affect text. The first we call font properties because
they affect the font and its appearance. The second type of CSS text properties are referred to
here as paragraph properties since they affect the text in a similar way no matter which font is
being used.
Font Properties

Property Description
font A combined shorthand property that allows you to set the family, style, size,
variant, and weight in one property.
style weight variant size font-family
font- Specifies the typeface/font to use. More than one can be specified.
family
font-size The size of the font in one of the measurement units
font-style Specifies whether italic, oblique, or normal
font- Specifies either small-caps text or none
variant
font- Specifies either normal, bold, bolder, lighter, or a value between 100 and 900 in
weight multiples of 100, where larger number represents
weightier (i.e., bolder) text.

Specifying the Font Family

Different Font Families

The font-family property supports five different generic families; the browser supports a
typeface from each family.

Font Sizes

Web Engineering Chp 1 Page 60

Another potential problem with web fonts is font sizes. In a print-based program such as a
word processor, specifying a font size is unproblematic. Making some text 12 pt will mean
that the font's bounding box (which in turn is roughly the size of its characters) will be 1/6 of
an inch tall when printed, while making it 72 pt will make it roughly one inch tall when
printed. However, as we saw absolute units such as points and inches do not translate very
well to pixel-based devices. Newer mobile devices in recent years have been increasing pixel
densities so that a given CSS pixel does not correlate to a single device pixel.

CSS Text Styling

Embedding Fonts
Due to the ongoing popularity of open source font sites such as Google Web Fonts
([Link] and Font Squirrel ([Link] @font-face
seems to have gained a critical mass of widespread usage.
The following example illustrates how to use Droid Sans (a system font also used by Android
devices) from Google Web Fonts using @font-face.

Paragraph Properties
Reference: taken from [Link]

Property Description

Web Engineering Chp 1 Page 61

letter-spacing Specifies the space between characters in a text
line-height Specifies the line height
text-indent Specifies the indentation of the first line in a text-block
white-space Specifies how to handle white-space inside an element
word-spacing Specifies the space between words in a text
text-shadow Specifies the shadow effect added to text
Shadow Example:

From <[Link]

Web Engineering Chp 1 Page 62

Tables
Saturday, 9 May 2026 4:29 pm

Styling Tables
You can style the tables in different way outs.
Table Borders
Following are some examples of the table with different borders:

Web Engineering Chp 1 Page 63

.

Accessible Tables
• Use tables for data, not layout
• Use the <caption> element
• Connect cells with a textual description in the header

Code:

<caption>Famous Paintings</caption>
<tr>
<th scope="col">Title</th>
<th scope="col">Artist</th>
<th scope="col">Year</th>
<th scope="col">Width</th>
<th scope="col">Height</th>
</tr>

Web Engineering Chp 1 Page 64

From <[Link]

Web Engineering Chp 1 Page 65

Introducing Forms
Tuesday, 9 June 2026 9:47 pm

Introducing Forms
Forms provide the user with an alternative way to interact with a web server. Up to now,
clicking hyperlinks was the only mechanism available to the user for communicating with the
server.

How Forms Work

The process begins with a request for an HTML page that contains some type of form on it.
This could be something as complex as a user registration form or as simple as a search box.
After the user fills out the form, there needs to be some mechanism for submitting the form
data back to the server. This is typically achieved via a submit button, but through JavaScript,
it is possible
to submit form data using some other type of mechanism.

Query Strings
The browser packages the user's data input into something called a query string. A query
string is a series of name=value pairs separated by ampersands (the & character).

Web Engineering Chp 1 Page 66

GET and POST
The method attribute specifies how the query string data will be transmitted from the browser
to the server. There are two possibilities: GET and POST.
What is the difference between GET and POST?
The difference resides in where the browser locates the user's form input in the subsequent
HTTP request. With GET, the browser locates the data in the URL of the request; with
POST, the form data is located in the HTTP header after the HTTP variables. Following
Figure illustrates how the two methods differ.

GET versus POST

Type Advantages and Disadvantages

GET • Data can be clearly seen in the address bar. This may be an
• advantage during development but a disadvantage in
• production.
• Data remains in browser history and cache. Again this may
• be beneficial to some users, but a security risk on public
• computers.
• Data can be bookmarked (also an advantage and a
• disadvantage).
• Limit on the number of characters in the form data
• returned.
POST • Data can contain binary data.
• Data is hidden from user.
• Submitted data is not stored in cache, history, or
• Bookmarks.

Web Engineering Chp 1 Page 67

From <[Link]

Web Engineering Chp 1 Page 68

Lesson 37 : Form control elements 1
Tuesday, 9 June 2026 9:48 pm

Form Control Elements:

Most forms need to gather text information from the user. Whether it is a search box, or a
login form, or a user registration form, some type of text input is usually necessary. Different
text input controls are mentioned below:
Type Description
Text Creates a single-line text entry box.
<input type="text" name="title" />
textarea Creates a multiline text entry box.
<textarea rows="3" ... />
password Creates a single-line text entry box for a
<input type="password" ... />
search Creates a single-line text entry box suitable for a search string.
<input type="search" ... />
email Creates a single-line text entry box suitable for entering an email address.
<input type="email" ... />
tel Creates a single-line text entry box suitable for entering a telephone.
<input type="tel" ... />
url Creates a single-line text entry box suitable for entering a URL.
<input type="url" ... />

Datalist:
<datalist> element is new addition to HTML5. This element allows to define a list of
elements that can appear in a drop-down autocomplete style list for a text element.

Choice Controls:
Forms often need the user to select an option from a group of choices. HTML provides
several ways to do this.
1. Select Lists:
The <select> element is used to create a multiline box for selecting one or more items. The
options can be hidden in a dropdown list or multiple rows of the list can be visible. Option
items can be grouped together via the <optgroup> element.
2. Radio Buttons:
Radio buttons are useful when you want the user to select a single item from a small list of
choices and you want all the choices to be visible.
3. Check Boxes:
Checkboxes are used for getting yes/no or on/off responses from the user.

Button Controls:
HTML defines several different types of buttons which are mentioned below:
Type Description
Submit Creates a button that submits the form data to the
server.
Reset Creates a button that clears any of the user’s already
entered form data.
button Creates a custom button. This button may require
JavaScript for it to actually perform any action.
image Creates a custom submit button that uses an image for
its display.

Web Engineering Chp 1 Page 69

 its display.

From <[Link]

Web Engineering Chp 1 Page 70

Lesson 38 : Form control elements 2
Tuesday, 9 June 2026 9:49 pm

Form Control Elements:

Date & Time Controls:
Types Description
Date Creates a general date input control. The format for the date is “yyyy-mm-dd.”
Time Creates a time input control. The format for the time is “HH:MM:SS,” for
hours:minutes:seconds.
month Creates a control in which the user can enter a month in a year. The format is
“yyyy-mm.”
week Creates a control in which the user can specify a week in a year. The format is
“yyyy-W##.”

From <[Link]

Web Engineering Chp 1 Page 71

Lesson 39 : Microformats
Tuesday, 9 June 2026 9:49 pm

Microformats:
The web has millions of pages in it. Yet, despite the incredible variety, there is a surprising
amount of similar information from site to site. Most sites have some type of Contact Us
page, in which addresses and other information are displayed; similarly, many sites contain a
calendar of upcoming events or information about products or news. The idea behind
microformats is that if this type of common information were tagged in similar ways, then
automated tools would be able to gather and transform it. A microformat is a small pattern of
HTML markup and attributes to represent common blocks of information such as people,
events, and news stories so that the information in them can be extracted and indexed by
software agents.
One of the most common microformats is hCard, which is used to semantically markup
contact information for a person. Google Map search results now make use of the hCard
microformat so that if you used the appropriate browser extension, you could save the
information to your computer or phone’s contact list.

From <[Link]

Web Engineering Chp 1 Page 72

Lesson 40 : Image formats for the web
Tuesday, 9 June 2026 9:49 pm

Image Formats for the Web:

When you see text and images on your desktop monitor or your mobile screen, you are seeing
many small squares of colored light called pixels that are arranged in a two-dimensional grid.
There are two basic categories of digital representations for images: raster and vector. In
a raster image (also called a bitmap image) the smaller components are pixels. That is, the
image is broken down into a two-dimensional grid of colored squares. Each colored square
uses a number that represents its color value. A raster image has a set number of pixels,
dramatically increasing or decreasing its size can dramatically affect its quality. A vector
image is not composed of pixels but instead is composed of objects such as lines, circles,
Bezier curves, and polygons.

File Formats:
1. JPEG:
JPEG (Joint Photographic Experts Group) or JPG is a 24-bit, true-color file format that is
ideal for photographic images. It uses a sophisticated compression scheme that can
dramatically reduce the file size of the image. JPEG is the ideal file format for photographs
and other continuous-tone images such as paintings and grayscale images.
2. GIF:
The GIF (Graphic Interchange Format) file was the first image format supported by the
earliest web browsers. Unlike the 24-bit JPEG format, GIF is an 8-bit or less format, meaning
that it can contain no more than 256 colors. GIF files use a much simpler compression system
that is lossless, which means that no pixel information is lost.
3. PNG:
The PNG (Portable Network Graphics) format is a more recent format. Its main features are:
5. Lossless compression.
5. 8-bit (or 1-bit, 2-bit, and 4-bit) indexed color as well as full 24-bit true color
5. From 1 to 8 bits of transparency.
For normal photographs, JPEG is generally still a better choice because the file size will be
smaller than using PNG.
4. SVG:
The SVG (Scalable Vector Graphics) file format is a vector format. SVG graphics do not lose
quality when enlarged or reduced.

Other Formats:
There are many other file formats for graphical information. The TIF (Tagged Image File)
format is a cross-platform lossless image format that supports multiple color depths, 8-bit
transparency, layers and color channels, the CMYK and RGB color space, and other features
especially useful to print professionals.

From <[Link]

Web Engineering Chp 1 Page 73

Lesson 41 : Understanding normal document
Tuesday, 9 June 2026 9:50 pm

Normal Flow:
To understand CSS positioning and layout, it is essential to first understand the idea of
normal flow, and how the browser will normally display block-level elements and inline
elements from left to right and from top to bottom.

Block-level elements: such as <p>, <div>, <h2>, <ul>, and <table> are each contained on
their own line. Because block-level elements begin with a line break, without styling, two
block-level elements can’t exist on the same line. Block-level elements use the normal CSS
box model, in that they have margins, paddings, background colors, and borders.
Inline elements: do not form their own blocks but instead are displayed within lines. Normal
text in an HTML document is inline, as are elements such as <em>, <a>, <img>, and <span>.

From <[Link]

Web Engineering Chp 1 Page 74

Lesson 42, 43, 44, 45 : Positioning elements
Tuesday, 9 June 2026 9:50 pm

Positioning Elements:
It is possible to move an item from its regular position in the normal flow. The position
property is used to specify the type of positioning, and the possible values. The left, right,
top, and bottom properties are used to indicate the distance the element will move; the effect
of these properties varies depending upon the position property.
Relative positioning:
In relative positioning an element is displaced out of its normal flow position and moved
relative to where it would have been placed.
Static:
The element is positioned according to the normal flow. This is the default.

Fixed:
The element is fixed in a specific position in the window even when the document is scrolled.

Absolute:
The element is removed from normal flow and positioned in relation to its nearest positioned
ancestor.

Absolute Positioning:
When an element is positioned absolutely, it is removed completely from normal flow. Thus,
unlike with relative positioning, space is not left for the moved element, as it is no longer in
the normal flow. Its position is moved in relation to its container block.

Z- Index:
Each positioned element has a stacking order defined by the z-index property (named for the
z-axis). Items closest to the viewer (and thus on the top) have a larger z-index value, which
can be seen in the first. Unfortunately, working with z-index can be tricky and seemingly
counterintuitive.

Fixed Position:
The fixed position value is used relatively infrequently. It is a type of absolute positioning,
except that the positioning values are in relation to the viewport (i.e., to the browser window).
Elements with fixed positioning do not move when the user scrolls up or down the page. The
fixed position is most commonly used to ensure that navigation elements or advertisements
are always visible.

From <[Link]

Web Engineering Chp 1 Page 75

Lesson 46, 47 : Floating elements (1)
Tuesday, 9 June 2026 9:51 pm

Floating Elements:
It is possible to displace an element out of its position in the normal flow via the CSS float
property. An element can be floated to the left or floated to the right. When an item is floated,
it is moved all the way to the far left or far right of its containing block and the rest of the
content is “re-flowed” around the floated element.

Floating within a Container:

Floated item moves to the left or right of its container (also called its containing block).

Floating Multiple Items:

One of the more common usages of floats is to place multiple items side by side on the same
line. When you float multiple items that are in proximity, each floated item in the container
will be nestled up beside the previously floated item. All other content in the containing
block (including other floated elements) will flow around all the floated elements.

Clear Property:
You can stop elements from flowing around a floated element by using the clear property.
Values for clear property are shown below:
Values Description
Left The left-hand edge of the element cannot be adjacent to another element.
Right The right-hand edge of the element cannot be adjacent to another element.
Both Both the left-hand and right-hand edges of the element cannot be adjacent to
another element.
None The element can be adjacent to other elements.

Containing Floats:
Another problem that can occur with floats is when an element is floated within a containing
block that contains only floated content. In such a case, the containing block essentially
disappears.

Overlaying and Hiding Elements:

One of the more common design tasks with CSS is to place two elements on top of each
other, or to selectively hide and display elements. Positioning is important to both of these
tasks. Positioning is often used for smaller design changes, such as moving items relative to
other elements within a container. In such a case, relative positioning is used to create the
positioning context for a subsequent absolute positioning move.

There are in fact two different ways to hide elements in CSS: using the display property and
using the visibility property. The display property takes an item out of the flow: it is as if the
element no longer exists. The visibility property just hides the element, but the space for that
element remains.

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 76

Lesson 48 : Multi-column layouts using floats
Tuesday, 9 June 2026 9:54 pm

Constructing Multicolumn Layout (using Float):

A typical layout may very well use both positioning and floats. There is unfortunately no
simple and easy way to create robust multicolumn page layouts.

Using Floats to Create Columns:

Using floats is perhaps the most common way to create columns of content. The first step is
to float the content container that will be on the left-hand side. Remember that the floated
container needs to have a width specified. The background of the floated element stops when
its content ends. If we wanted the background color to descend down to the footer, then it is
difficult (but not impossible) to achieve this visual effect with floats.

Three- Column Example:

Another approach for creating a three-column layout is to float elements within a container
element. This approach is actually a little less brittle because the floated elements within a
container are independent of elements outside the container. The floated content must appear
in the source before the nonfloated content. This is the main problem with the floated
approach: that we can’t necessarily put the source in an SEO-optimized order.

Using Positioning to Create Columns:

Positioning can also be used to create a multicolumn layout. This approach typically uses
some type of container that establishes the positioning context. With positioning it is easier to
construct our source document with content in a more SEO-friendly manner; in this case, the
main <div> can be placed first.

Problem with Absolute Positioning:

When an item is positioned, it is removed entirely from normal flow, so subsequent items
will have no “knowledge” of the positioned item. One solution to this type of problem is to
place the footer within the main container.

Constructing Multicolumn Layout using flexbox:

Flex layout is to give the container the ability to alter its items’ width/height to best fill the
available space.
Flexbox parent properties:
1. flex-start:
Items are packed toward the start of the flex-direction.
Example:

2. flex-end:
Items are packed toward the end of the flex-direction.
Example:

Web Engineering Chp 1 Page 77

3. Center:
Items are centered along the line.
Example:

4. Space-between:
Items are evenly distributed in the line; first item is on the start line, last item on the end line.
Example:

5. space-around:
Items are evenly distributed in the line with equal space around them.
Example:

Flexbox Child properties:

1. Flex-grow:
It tell us what amount of the available space inside the flex container the item should take up.
By default we have equal space for flex grow and it set to 1, this means container will be
distributed equally to all children.
Example:

Flexgrow set to be 1
If one of the children has a value of 2, that child would take up twice as much of the space
either one of the others.
Example:

Flexgrow set to be 2
2. Flex-basis:
This defines how much space an element is taking initially.
3. Flex-shrink
This defines the ability for a flex item to shrink if necessary.

Web Engineering Chp 1 Page 78

This defines the ability for a flex item to shrink if necessary.

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 79

Lesson 50 : Approaches to CSS layout
Tuesday, 9 June 2026 9:54 pm

Approaches to CSS Layout:

One of the main problems faced by web designers is that the size of the screen used to view
the page can vary quite a bit. Users with the large monitor might expect a site to take
advantage of the extra size; users with the small monitor will expect the site to scale to the
smaller size and still be usable. Satisfying both users can be difficult; the approach to take for
one type of site content might not work as well with another site with different content.

Fixed Layout:

The first approach is to use a fixed layout. In a fixed layout, the basic width of the design is
set by the designer, typically corresponding to an “ideal” width based on a “typical” monitor
resolution. Fixed layouts are created using pixel units, typically with the entire content within
a <div> container (often named "container", "main", or "wrapper") whose width property has
been set to some width. The advantage of a fixed layout is that it is easier to produce and
generally has a predictable visual result.

Fixed layouts have other drawbacks. For larger screens, there may be an excessive amount of
blank space to the left and/or right of the content. Much worse is when the browser window
shrinks below the fixed width; the user will have to horizontally scroll to see all the content.

Liquid Layout:

The second approach to dealing with the problem of multiple screen sizes is to use a liquid
layout (also called a fluid layout). In this approach, widths are not specified using pixels, but
percentage values. The obvious advantage of a liquid layout is that it adapts to different
browser sizes, so there is neither wasted white space nor any need for horizontal scrolling.

From <[Link]

Web Engineering Chp 1 Page 80

 Introduction to responsive design
Tuesday, 9 June 2026 9:55 pm

Responsive Design:

In a responsive design, the page “responds” to changes in the browser size that go beyond the
width scaling of a liquid layout. One of the problems of a liquid layout is that images and
horizontal navigation elements tend to take up a fixed size, and when the browser window
shrinks to the size of a mobile browser, liquid layouts can become unusable. In a responsive
layout, images will be scaled down and navigation elements will be replaced as the browser
shrinks. There are four key components that make responsive design work.
1. Liquid layouts.
2. Scaling images to the viewport size.
3. Setting viewports via the <meta> tag.
4. Customizing the CSS for different viewports using media queries.

Setting Viewports:

A key technique in creating responsive layouts makes use of the ability of current mobile
browsers to shrink or grow the web page to fit the width of the screen. The way this works is
the mobile browser renders the page on a canvas called the viewport. On iPhones, for
instance, the viewport width is 980 px, and then that viewport is scaled to fit the current
width of the device.

Media Queries:

The other key component of responsive designs is CSS media queries. A media query is a
way to apply style rules based on the medium that is displaying the file. You can use these
queries to look at the capabilities of the device, and then define CSS rules to target that
device. Unfortunately, media queries are not supported by Internet Explorer 8 and earlier.

Syntax of Media Queries:

1. Width: Width of the viewport.

2. Height: Height of the viewport.
3. Device-width: Width of the device.
4. Device-height: Height of the device.
5. Orientation: Whether the device is portrait or landscape.
6. Color: The number of bits per color.

Scaling Images
Responsive designs begin with a liquid layout, that is, one in which most elements have their
widths specified as percentages. We simply need to specify the following rule to make image
scale in size:

Image {
width: 100%;
max-width: 1024px;
}
<picture>
Example:

Web Engineering Chp 1 Page 81

From <[Link]

From <[Link]

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 82

Chapter 04: Introduction to Bootstraps
Tuesday, 9 June 2026 9:56 pm

CSS Frameworks:

A CSS framework is a pre created set of CSS classes or other software tools that make it
easier to use and work with CSS. They are two main types of CSS framework: grid systems
and CSS preprocessors.
CSS Preprocessors:

CSS preprocessors are tools that allow the developer to write CSS that takes advantage of
programming ideas such as variables, inheritance, calculations, and functions. A CSS
preprocessor is a tool that takes code written in some type of preprocessed language and then
converts that code into normal CSS. The advantage of a CSS preprocessor is that it can
provide additional functionalities that are not available in CSS.

In a programming language, a developer can use variables, nesting, functions, or inheritance

to handle duplication and avoid copy-and-pasting and search-and-replacing. CSS
preprocessors such as LESS, SASS, and Stylus provide this type of functionality.

Installing Bootstrap
Bootstrap has two parts:
1. CSS
2. JavaScript
Ways to get Bootstrap:
There are three main ways to get the bootstrap:
1. Content Delivery Network
2. Web server/local Machines
3. Package Managers
Bootstrap Requirements:
Require certain tags on the web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>

Grid Layout:
Grid systems make it easier to create multicolumn layouts. There are many CSS grid
Systems. Some of the most popular are Bootstrap, Blueprint, and 960 ([Link]). The most
important of these capabilities is a grid system. Print designers typically use grids as a way to
achieve visual uniformity in a design. CSS frameworks provide similar grid features. The 960
framework uses either a 12- or 16-column grid. Bootstrap uses a 12-column grid. Blueprint
uses a 24-column grid. The grid is constructed using <div> elements with classes defined by
the framework. In Bootstrap, content must be placed within the <div class="row"> row
container.

From <[Link]

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 83

Lesson 58 : Typography in bootstrap
Tuesday, 9 June 2026 9:57 pm

Typography in Bootstrap:
Typography is a feature of Bootstrap for styling and formatting the text content. It is used to
create customized headings, inline subheadings, lists, paragraphs, aligning, adding more
design-oriented font styles and much more. By default, Bootstrap will style the HTML
headings (<h1> to <h6>).
Text Utilities:
1. Text alignment
Easily realign text to components with text alignment classes.
2. Text wrapping
Prevent text from wrapping with a .text-nowrap class.
3. Text transform
Transform text in components with text capitalization classes.
1. lowercased text.
2. UPPERCASED TEXT.
3. CapiTaliZed Text.

Colors in Bootstrap:
Bootstrap provides us the color utility due to this we can assign colors to text and the
background. Bootstrap supports many theme-wise colors. Colors can be used:
1. Text
Example: <p class="text-light bg-dark">.text-light</p>

1. Background
Example: <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

1. Link
Example: <p><a href="#" class="text-danger">Danger link</a></p>

1. Alerts
Colors for themes can be changes using Saas CSS pre-processor.
Theme- based colors:
8 theme-based colors are mentioned below:
Text colors Background colors
Primary

Secondary

Success

Info

Warning

Danger

Web Engineering Chp 1 Page 84

Light

dark

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 85

Lesson 60 : Navigation in bootstrap
Tuesday, 9 June 2026 9:58 pm

Navigations in Bootstrap
Nav is one of the components available in bootstrap and it’s used for creating responsive
navigation bars. Navigation is implemented using:
Unordered list:
Example: < ul class = “nav”>
List items:
Example: <li class = “nav-item”>
Links:
Example: < a class =”nav-link”….>
Dropdown using nested unordered list:
Parent li:
Example: <li class = “nav-item dropdown”>
Parent link:
Example: < a class = “nav-link dropdown-toggle” data-bs-toggle = “dropdown” href = “#”>
Dropdown</a>
Nested ul:
Example: <ul class = “dropdown-menu”>
List item:
Example: <li><a class = dropdown-item”

From <[Link]

Web Engineering Chp 1 Page 86

Chapter 05: Introduction to Javascript
Tuesday, 9 June 2026 9:58 pm

Introduction to JavaScript: JavaScript's History:

JavaScript was introduced by Netscape in their Navigator browser back in 1996. JavaScript
that is supported by your browser contains language features:
1. not included in the current ECMAScript specification and
2. missing certain language features from that specification
Commonly used version of ECMAScript is the Sixth Edition (ES6). Whereas, 12th edition
(ECMAScript 2021) released in 2021.
JavaScript and Web 2.0:
Early JavaScript had only a few common uses. 2000s onward saw more sophisticated uses for
JavaScript. AJAX as both an acronym and a general term
JavaScript in Contemporary Software Development:

Inline JavaScript:
Inline JavaScript refers to the practice of including JavaScript code directly within certain
HTML attributes.
<a href="JavaScript:OpenWindow();"more info</a>
<input type="button” onclick="alert('Are you sure?');" />

Embedded JavaScript:
Embedded JavaScript refers to the practice of placing JavaScript code within a <script>
element.

<script type="text/javascript">
/* A JavaScript Comment */
alert ("Hello World!");
</script>

External JavaScript:
External files typically contain function definitions, data definitions, and other blocks of
JavaScript code. JavaScript external files have the extension .js.

<head>
<script type="text/JavaScript" src="[Link]">
</script>
</head>

Web Engineering Chp 1 Page 87

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 88

Lesson 63 : Variables and data types
Tuesday, 9 June 2026 10:00 pm

Variables in JavaScript:
There are two types of variables in programming language i-e dynamic and static. In c, c++
and java variables are statically typed. Some programming languages decided the type of
variable on runtime and java script is one of them, in python also variables are dynamically
typed. This simplifies variable declarations, so that we do not require the familiar type fields
like int, char, and String. Instead, to declare a variable x, we use the var keyword, the name,
and a semicolon.
Data Types in JavaScript:
There are two types of data types in java script i-e reference data type and primitive data type.
In reference data types we have objects and the address of objects will be stored in the
variable. Whereas, in primitive data types exact value of variable will be stored e.g Boolean,
number variable and string e.t.c. So in primitive data types values will be stored and in
reference address will be stored.

JavaScript Output:
It’s very important in every programming language to view the output. In JavaScript we have
three mechanisms to view the output:
1. Alert
2. Console. Log()
3. Document. Write ().

1. Alert:
The alert() function makes the browser show a pop-up to the user, with whatever is passed
being the message displayed. The following JavaScript code displays a simple hello world
message in a pop-up:
alert ( "Good Morning" );
The pop-up may appear different to each user depending on their browser configuration.
During debugging and testing we may use alert function.
1. Document. Write:
This method writes a string of text to a document stream opened by document. By using the
document. Write whatever we will write it will be the part of the HTML page.
1. Console log:
It is very good way to debug your application. We can open a console in web browser by
using: Ctrl + Shift + I for windows.

From <[Link]

From <[Link]

Web Engineering Chp 1 Page 89

Lesson 65 : Conditions in Javascript
Tuesday, 9 June 2026 10:01 pm

Conditionals:
In java script conditions are identical like c++. There are three types of conditional
statements:
1. If else if
2. Switch
3. Conditional assignment.
If else if:
Conditional statements are simple in which we have to write logical expressions. If logical
expression will be true then one block of expression will be executed if false then it will not
be executed.
Example:
var hourOfDay; // var to hold hour of day
var greeting; // var to hold the greeting message.
if (hourOfDay > 4 && hourOfDay < 12){
// if statement with condition
greeting = "Good Morning";
}
else if (hourOfDay >= 12 && hourOfDay < 20){
// optional else if
greeting = "Good Afternoon";
}
else{ // optional else branch
greeting = "Good Evening";
}
Switch Statements:
The switch statement evaluates an expression, matching the expression's value to
a case clause, and executes statements associated with that case, as well as statements
in cases that follow the matching case.
Example:
const expr = 'Papayas';
switch (expr) {
case 'Oranges':
[Link]('Oranges are $0.59 a pound.');
break;
case 'Mangoes':
case 'Papayas':
[Link]('Mangoes and papayas are $2.79 a pound.');
// expected output: "Mangoes and papayas are $2.79 a pound."
break;
default:
[Link](`Sorry, we are out of ${expr}.`);
}
Conditional assignment:
The conditional (ternary) operator is the only JavaScript operator that takes three operands:
a condition followed by a question mark (?), then an expression to execute if the condition
is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
This operator is frequently used as an alternative to an if...else statement.
Example:
/* x conditional assignment */
x = (y==4) ? "y is 4" : "y is not 4";
Condition Value if true Value if false

From <[Link]

Web Engineering Chp 1 Page 90

Lesson 66 : Arrays in Javascript
Tuesday, 9 June 2026 10:01 pm

Arrays:
Arrays are one of the most used data structures, and they have been included in JavaScript as
well. There are two main ways to define an array in java script.
1. Object literal notation
2. Array constructor

Object Literal Notation:

It’s a simple form to creating arrays. The values we want to store in arrays we will write in
square bracket and separate them with the help of commas.
Example:
var greetings = ["Good Morning", "Good Afternoon"];

Array Constructor:
Array constructor is the second way for the creation of array. In array constructor “new”
keyword has been used and in parenthesis we will write commas separated values.
Example:
var greetings = new Array("Good Morning", "Good Afternoon");

Common Features of Arrays in Java Script:

1. Index will be start from ZERO.
2. [] is used to access particular element.
3. . length has been used to give the length of the array.
4. .push(): add a new element/item to an array.
5. .pop() : remove the last element from the array.
6. Concat: method is used to concatenate two or more arrays.

From <[Link]

Web Engineering Chp 1 Page 91

Chapter 06: Advance JS
Wednesday, 15 July 2026 6:57 pm

Web Engineering Chp 1 Page 92

Event handling
Wednesday, 15 July 2026 7:02 pm

Event handling
In every language of computer science event has its own significance, but in JavaScript,
which is utilized in web development, it is very significant. An event is an action that occurs
as a result of the user or another source, such as a mouse click. Let’s see how it is handled in
JavaScript.
Introduction:
• JavaScript event is an action that can be detected by JavaScript.
• Many of them are initiated by user actions, some are generated by the browser itself.
• We say that an event is triggered and then is handled by JavaScript functions.
There are multiple ways to handle an event. Let’s have a look at them.
The given figure no.80.1 depicts it in detail.
Event Handling Approaches-Inline Hook

Figure no.80.1
The very first line portrays that a JavaScript code has been stored in an external file which
includes the some functions such as
function validated (node){….
} // validate the node
function check (node){….
} // check whether the node is or not an appropriate one.
function highlight (node){….
} // highlight text
The figure 80.1 clearly depicts the events on which these functions are invoked.
Another way of handling event is.
Event –Handling Approaches-Event property Approach:
• var mybutton=[Link] (‘example’);//In JavaScript, get an element
from the DOM tree (Any approach, such as
query Selector or get element ById, can be used). After that we write function name
on its appropriate event. As shown below.
• [Link]=alert (‘some message’);
• [Link] (‘click’, alert (‘some message’));// it take two parameter
• [Link] (‘mouseout’, funcName);
Similarly, we may define several events on a single object using this method.
The key benefit of this method is that JavaScript code is segregated from HTML. The

Web Engineering Chp 1 Page 93

The key benefit of this method is that JavaScript code is segregated from HTML. The
script/code may be in an external file or an embedded JavaScript. The code of HTML will be
very clean and clear, while making changes in HTML you need not worry about the
functionality and vice versa.
Another way to define event.
Event-Handling Approach-Event Listener Approach (anon function)// anonymous function
is pass on.
[Link] (‘click’, function () {
var d = new Date ();
alert (“You clicked this on” +[Link] ());
}); // in this piece of code the whole function is pass as a parameter to
AddEventListner when a click event is generated.

The last method to handle an event is,

Event Object
When an event is triggered, the browser will construct an event object that contains
information about the event.
[Link] (‘click’, function(e)
{
//findout where the user clicked
var x=e. clientX;
and via e. Target can be used to manipulate elements of div.

Web Engineering Chp 1 Page 94

Capturing and Bubbling
Wednesday, 15 July 2026 7:06 pm

Capturing and Bubbling.

Let’s see how JavaScript handle events.
Event Handling:
○ Events are handled in three phases.
○ Capturing
□ Event propagation from parent towards the most nested child.
○ Target
□ Identifying the target.
○ Bubbling
□ Elements registered for the events are triggered from the most
nested child towards the outermost.

Web Engineering Chp 1 Page 95

Event Types
Wednesday, 15 July 2026 7:14 pm

Event Types
Three types of Events:
1. mouse
2. Keyboard
3. touch

Mouse Events:
Event related to muse is called mouse events.
Mouse events are used to describe a variety of mouse-driven interactions. Mouse click and mouse
move events are two types of mouse events. Many mouse events can be sent at once, which is
unusual. The user may move the mouse from one div to another at the same time, activating the
mouseon and mouseout events as well as the mousemove event. To deal with these difficulties, use
the Cancelable and Bubbles properties. Following is the list of mouse events.

Event When it Fires

click The mouse was clicked on an element.
dblclick The mouse was double clicked on an element. // double click
mouseupl The touch is interrupted (e.g., an incoming call or the browser cancels the touch).
mousedown The mouse was moved (not clicked) over an element.// when the button is released.
mouseover The mouse was moved (not clicked) over an element.
mouseout The mouse was moved off of an element.
Mousemove The mouse was moved while over an element.

These are different types of events which can be used in JavaScript.

Note: click event // in this both up and down will be invoked.
And mouseup is used only for up and likewise mousedown is used only for down.

Keyboard Events:
the events related to keyboard is called keyboard events.
Within input fields, these events are most useful. With each key hit, we could, for example, validate
an email address or submit an asynchronous request for a dropdown list of suggestions with each
key press. <input type=“text” id=“key”>
For this input box, we could listen for key press events and replay each pushed key back to the user
as shown below.
[Link](“key”).addEventListener(“keydown”, function (e) {
var keyPressed=[Link];
// get the raw key code
var character=[Link](keyPressed);
// convert to string
alert (“Key “ + character + ” was pressed”);
});
Note: Regrettably, different browsers handle keyboard properties differently. For example, the
keyCode property is not available for the keypress event in FireFox. If we used the same callback
method for the keypress event in code above, we'd have to update the code to retrieve the key
press as follows:
// use either the which or the keyCode property
var keyPressed = [Link] || [Link];
Instead of clogging our code with these kind of browser testing conditional statements, we can use
something like the jQuery framework to handle these quirks.

Web Engineering Chp 1 Page 96

something like the jQuery framework to handle these quirks.
Types of keyboard events as shown below.

Event When it Fires

Keydown The user is pressing a key (this happens first)
Keypress The user presses a key (this happens after keydown)
Keyup The user releases a key that was down (this happens last)

Touch events:
these are relatively new events which are especially used in mobile devices.
• Touch events are a relatively new category of events that can be triggered by devices with
touch screens.
• Touch events are only available by default in Chrome and iOS Safari at the time of writing.
• In Edge and FireFox, the user must allow touch events. Pointer events, a new standard
specification that combines mouse, touch screen, and pen input into a single event type, are
supported by Microsoft Edge. However, pointer events are only supported in Edge at the time
of writing.

Event When it Fires

touchstart User touches the screen.
touchmove User moves their finger while touching the screen.
touchend User lifts their finger from the screen.
touchcancel The touch is interrupted (e.g., an incoming call or the browser cancels the touch).

Web Engineering Chp 1 Page 97

Wednesday, 15 July 2026 7:36 pm

Form Validation; Client side input validation

Form validation is the process of determining whether or not the user has filled out the form
correctly. This activity can be done at various stages. E.g
• HTML Level
// using built-in HTML element we can do validation e.g type of an email address must be
email likewise specify the range for a specific number.
• JavaScript Level
// this is also called client side validation.
Note: the user may disable JavaScript. And submit the form. Because similar situations may
arise, it is vital to validate the form at the server level as well to prevent erroneous data from
being stored in the database. So it good to have validation at all the stages.
• Webserver Level
Form Events:
Events related to form are called form events. Forms are the primary means of collecting and
transmitting user input to the server. Form events allow us to perform some real-time processing in
response to user input. The submit event is the most popular JavaScript listener for forms. We use
preventDefault() to prevent submitting to the server and inform the user if the password field (with
id pw) is blank. Otherwise, nothing is done, allowing the default event to occur (submitting the
form).
Catching the submit event and validating a password to not be blank
[Link](“loginForm”).addEventListener('submit', function(e)
{ var pass = [Link](“pw”).value;
if (pass==“”) { alert (“enter a password”);
[Link] (); } });
Form events
• submit// When the form is submitted this event is triggered. We can do some prevalidation of
the
form in JavaScript before sending the data on to the server.
• reset // HTML forms have the ability to be reset. This event is triggered when that happens.
• formdata
Textfield events
• blur // Triggered when a form element has lost focus (that is, control has moved to a different
element), perhaps due to a click or Tab key press.
• change// some <input>, <textarea> or <select> field had their value change. This could mean
the user typed something, or selected a new choice.
• focus // Complementing the blur event, this is triggered when an element gets focus (the user
clicks in the field or tabs to it).
• select // When the users selects some text. This is often used to try and prevent copy/paste.
• ….

Let's look at an example where these events will be used to validate a form.
[Link] (‘change’, check_name);
[Link] (‘change’, check_email);
[Link] (‘submit’, validate);
function check_name () {
if ([Link]<5)
{
[Link]= ‘background-color: pink’;
} else {
[Link]= ‘background-color: white’;
}
}

Web Engineering Chp 1 Page 98

}
function check_email () {
var re= / [^@]+@[^\.]+\.[^\.]+/
if (! [Link] ([Link])){
[Link]= ‘background-color: pink’;
} else {
[Link]= ‘background-color: white;
}
}
function validate (e) {
var re=/ [^@]+@[^\.]+\.[^\.]+/
if ([Link]<5||[Link] ([Link]) ==false {
[Link] ();
}
}

Figure 84.1
……………………………………………………………………………………………………………………….

From <[Link]

Web Engineering Chp 1 Page 99

Chapter 07: Introduction JQuery
Wednesday, 15 July 2026 6:57 pm

Introduction to jQuery
JQuery is one of the JavaScript libraries that are used to assist us with web development.
jQuery is a popular framework that gives developers access to cross-browser animation tools, user
interface elements, and DOM manipulation functions, among other things. Learning about
frameworks, especially jQuery, can help you improve your development abilities by allowing you to
use ever-evolving frameworks that provide new and increasingly expected functionality.
The Most popular Framework
• Makes working with JavaScript and DOM easy// JQuery also makes it easy to select an
element and to perform different operation on it
• Cross browser compatibility // it makes sure that the code written is
executable on all the different browsers.
• Most popular JavaScript library (as of 2021). According to [Link]
□ Used by 78% of all website
□ 96% market share
How to include JQuery in our code, there are multiple ways to include it.
Including JQuey
• Use a Content Delivery Network
(CDN)
▪ <script src = [Link] </script>
//can include directly from CDN, [Link] is best as it has minimum size.
• Can also be
• Download and used on your web server
• Installed via package manager(npm, yarn, etc)
Note: JQuery can be included in the head, or before body in HTML file.
Let's have a look at an example that how it can be included in HTML file.
Figure 85.1 shows that how it can be included when we have an internet connection.

Figure no 85.1
But if we have no internet connection then download and save it in folder where you have HTML
file.
And then include it using absolute path as shown in figure 85.2

Web Engineering Chp 1 Page 100

Figure no. 85.2

From <[Link]

Web Engineering Chp 1 Page 101

Jquery Selector
Wednesday, 15 July 2026 7:49 pm

jQuery selectors
The programmatic selection of DOM elements is one of the most common JavaScript jobs. The
element selection method in jQuery is both strong and easy. JavaScript has a variety of functions for
selecting an element, such as getElementByID() and querySelector().Although the querySelector()
and querySelectorAll() capabilities now let you pick DOM elements using CSS selectors, developers
have only been able to assume that these functions are available in most users' browsers since
around 2014 (IE 8 and earlier didn't fully support these techniques). One of the reasons for jQuery's
early popularity was that it gave programmers with a straightforward cross-browser way to
programmatically select an element using regular CSS selectors.
• The power of jQuery resides in the function named jQuery()
• There’s also an alias for this function named $()
• You can combine CSS selectors with the $() notation to select DOM objects that match CSS
attributes

JavaScript versus jQuery selection

Basic Selectors
The four basic selectors were defined back in Chapter 4, and include the universal selector, class
selectors, id selectors, and elements selectors. Selectors in jQuery are designed to closely resemble
the CSS specification, which is especially useful given that CSS is something you've learnt and used
throughout this book:
• $(“*”)—Universal selector matches all elements (and is slow).
• $(“tag”)—Element selector matches all elements with the given element name.
• $(“.class”)—Class selector matches all elements with the given CSS class.
• $(“#id”)—Id selector matches all elements with a given HTML id attribute.

jQuery’s Content Filter Selection

The jQuery content filters provide you more selection options. You can use:has() to choose elements
that have a specific child,:empty to select elements that have no children, and:contains to match a
specific piece of text (). Consider the following illustration:

Web Engineering Chp 1 Page 102

It will provide a list of all DOM elements that include the term warning. You can see how we would
want to draw attention to those DOM elements by colouring the backdrop red, as seen in Figure
86.2.

Web Engineering Chp 1 Page 103

JQuery Manipulator
Wednesday, 15 July 2026 8:02 pm

jQuery Manipulators
jQuery Manipulators are methods used to modify HTML elements, such as changing text, HTML, CSS,
attributes, classes, or adding/removing elements from the page.

Common Element Manipulations in jQuery

You can choose any set of components from a web page using all of the selectors mentioned
in this chapter. You can then alter them in a variety of ways once they've been picked.
• We can both set and get innerHTML through the html() method
//link is assigned the html code contained by the first p
var html = $(“p”).html ();

// change the innerHTML of an element

$(“p#message”).html (“<b> Invalid Email</b>”);

// change innerHTML of all matching elements

$([Link]”) .html (“No warning”);
.text () can be used in similar manner for innerText
Common Element Manipulations------- HTML Attributes
The attributes defined in the HTML tags detailed in Chapter 3 are the fundamental collection of
attributes associated to DOM elements. You've probably used key attributes like an <a> tag's href
attribute, an <img> src attribute, and most elements' class attribute before. Using the attr () method
on any element returned by a selector in jQuery, we can both set and obtain an attribute value. The
attribute name is specified by the first parameter, and the optional second parameter allows you to
edit the attribute by specifying a value. If no second parameter is provided, the procedure returns
the attribute's current value. The following are some examples of possible applications:
We can both set and get an attribute value by using the attr () method

// link is assigned the href attribute of the first <a> tag

var link = $ (“a”). attr (“href”);

// change all links in the page to [Link]

$(“a”).attr (“href”, [Link]

//change the class for all images on the page to fancy

$(“img”).attr (“class”, “fancy”);

Common Element Manipulations------- HTML Properties

The checked property of a radio button or checkbox is the most common example of an HTML tag
that includes both properties and attributes. The attr () method could be used to set HTML
properties in earlier versions of jQuery. However, because properties are not actually characteristics,
strange behavior ensued. Although attr () may return some (less useful) values, the prop () method is
now preferred for retrieving and setting the value of a property.
To illustrate this subtle difference, consider a DOM element defined by
<input class=“meh” type=“checkbox” checked=“checked”>
The value of the attr () and prop () functions on that element differ as shown below.
var theBox = $(“.meh”);
[Link] (“checked”); // evaluates to TRUE
[Link] (“checked”); // evaluates to “checked”
val () used for getting/setting values of elements having the value property (e.g., <input type= “text”
…>

Web Engineering Chp 1 Page 104

…>

Common Element Manipulations------- Changing CSS

Modifying a CSS style is fairly similar to changing attributes in terms of syntax. The css() technique in
jQuery is incredibly user-friendly. This method has two versions (with two different method
signatures), one for getting the value and the other for setting it. The first version takes a single
parameter holding the value you want for the CSS attribute and returns it.

var color = $(“#element”).css (“background-color”); // get the color

To set a CSS attribute, you use the second version of css (), which takes two parameters: the first
being the CSS attribute, and the second the value.
// set color to red
$(“#element”).css (“background-color”, “red”);

From <[Link]

Web Engineering Chp 1 Page 105

Events in Jquery
Thursday, 16 July 2026 8:57 am

Events in jQuery
Introduction:
jQuery, like JavaScript, allows you to create and manage JavaScript event listeners/handlers. With a
few minor syntax modifications, these events are used in the same way as JavaScript.
Listeners
For jQuery Setting up listeners for specific events is similar to how JavaScript works. While
addEventListener () is used in pure JavaScript, jQuery includes on () and off () methods as well as
shortcut methods for attaching events.
Looking at figure 89.1. we can see that jQuery is substantially less verbose than JavaScript once
again. Is that, however, all it has to offer? When working with events, jQuery also makes many
typical chores easier. Figure shows a simple example with three different mouse events. The click
event handler, in particular, makes advantage of the jQuery off () function to stop listening to the
mouse move event. This is far more straightforward than the JavaScript-only solution.
Binding and unbinding events

Web Engineering Chp 1 Page 106

DOM Manipulation in Jquery
Saturday, 18 July 2026 3:58 pm

1. Creating Nodes
A node is any object in the DOM, such as an element, text, or comment. Creating nodes means
creating new HTML elements dynamically.
JavaScript
const para = [Link]("p");
[Link] = "Hello World";
jQuery
const para = $("<p>Hello World</p>");
or
const para = $("<p>").text("Hello World");

2. Comparison of Node Creation: JavaScript vs jQuery

Feature JavaScript jQuery
Create Element [Link]("p") $("<p>")
Add Text [Link] = "Hello" [Link]("Hello")
Add HTML [Link] = "<b>Hello</b>" [Link]("<b>Hello</b>")
Add Class [Link]("box") [Link]("box")
Set Attribute [Link]("id","demo") [Link]("id","demo")
Insert into DOM [Link](element) [Link](element)
Syntax More verbose Shorter and simpler

Example
JavaScript
const div = [Link]("div");
[Link] = "Software Engineer";
[Link](div);
jQuery
const div = $("<div>")
.text("Software Engineer");
$("body").append(div);

3. Adding DOM Elements

Adding means placing a new element inside another element.
HTML
<ul id="list">
<li>Apple</li>
</ul>
append()
Adds content at the end.
$("#list").append("<li>Mango</li>");
Result
<ul id="list">
<li>Apple</li>
<li>Mango</li>
</ul>

Web Engineering Chp 1 Page 107

prepend()
Adds content at the beginning.
$("#list").prepend("<li>Orange</li>");
Result
<ul id="list">
<li>Orange</li>
<li>Apple</li>
</ul>

4. Inserting DOM Elements

Inserting means placing an element before or after another element.
HTML
<p id="para">This is paragraph.</p>
before()
$("#para").before("<h2>Heading</h2>");
Result
<h2>Heading</h2>
<p>This is paragraph.</p>

after()
$("#para").after("<hr>");
Result
<p>This is paragraph.</p>
<hr>

insertBefore()
$("<h3>Title</h3>").insertBefore("#para");

insertAfter()
$("<hr>").insertAfter("#para");

Difference Between append() and appendTo()

Both produce the same result, but the syntax is reversed.
append()
$("#list").append("<li>Banana</li>");
Read as: Add <li> to #list.

appendTo()
$("<li>Banana</li>").appendTo("#list");
Read as: Add <li> into #list.

5. Wrapping Existing DOM in New Tags

Sometimes you want to surround existing elements with a new parent element.
wrap()
Wraps each selected element individually.
HTML
<p>Hello</p>
<p>World</p>
$("p").wrap("<div class='box'></div>");
Result

Web Engineering Chp 1 Page 108

Result
<div class="box">
<p>Hello</p>
</div>
<div class="box">
<p>World</p>
</div>

wrapAll()
Wraps all selected elements together.
$("p").wrapAll("<div class='container'></div>");
Result
<div class="container">
<p>Hello</p>
<p>World</p>
</div>

wrapInner()
Wraps only the contents of an element.
HTML
<p id="demo">Hello World</p>
$("#demo").wrapInner("<strong></strong>");
Result
<p id="demo">
<strong>Hello World</strong>
</p>

unwrap()
Removes the parent wrapper while keeping the child elements.
Before
<div class="box">
<p>Hello</p>
</div>
$("p").unwrap();
After
<p>Hello</p>

Web Engineering Chp 1 Page 109

Animation in jQuery
Saturday, 18 July 2026 4:12 pm

Animations using jQuery

A very powerful feature of jQuery is with the reference of Animation. Different elements
could be added through animation in html document.
Animation Effects:
Some of the generic animation methods are as show and fade In methods.
Show() and fadeIn():
.show(duration)
This function will display the image gradually over given duration in milli seconds.
For example;
If image was hidden then .show(1000) function will gradually show the image in 1000 milli
seconds (1 second).
You can also pass string parameters like slow or fast to show function.
.fadeIn(duration)
This function gradually fade the element by decreasing its opacity to given duration.
slide()
This function will move the element from one position to another.
For example;
A menu item will slide down from a button when mouse hover or enter on button element
and when mouse leave the button ,sliding menu disappers.

Web Engineering Chp 1 Page 110

 Example-1: slide() function (taken from Fundamentals of Web Development second edition 2017)

Figure-1: slide() function (taken from Fundamentals of Web Development second edition 2017)

Use animation to a limited extent, because animations take time and if users want to do
work fast, animations will annoy users because of their durations.
Raw Animations in jQuery:
Along with generic animation methods of jQuery, there are some raw animations which
could be used for custom type requirements. You can animate any numeric CSS property.
animate()
$(“#box”).animate({left:’495px’);
Function animate will move the box about 495 pixels on left side. Box animation will be
visible from one position to other. The position of object must be relative not statis.
For example:
Following code example shows a box enter on the page from left side, then move upwards,
and by clicking on the button in that dialogue box, the dialogue box get fade.

Web Engineering Chp 1 Page 111

 Example-1: animate function code (taken from Fundamentals of Web Development second edition 2017)

Example-1: animate function output (taken from Fundamentals of Web Development second edition 2017)

From <[Link]

Web Engineering Chp 1 Page 112

Introduction to Ajax
Thursday, 23 July 2026 6:37 pm

Introduction to Ajax
Ajax is a very important feature of JavaScript through which we fetch data from server while
staying on client side.
AJAX is known as Asynchronous JavaScript and XML. Earlier it was originally using XML, but
now it is using JSON format.
General Sequence of Events:
As shown in Figure 1;
1. In browser Dom will be created.
2. HTML document will be shown and html page will be listening for events(scroll events,
click events, etc).

Example-1: UML sequence diagram of an AJAX request (taken from Fundamentals of Web Development second
edition 2017)
Asynchronous Request:
When event occur and there is the need to fetch some data from server, then we sends
asynchronous request to server and server send back the request with data. We will place
that data in appropriate place and then html page layout will be updated.
Synchronous Request:
The page loaded is again sent back to server with query string or other way to get
information. Server creates a new web page and send it back to us. For example; we want to
change the time on a web page and send a request for it to server, server change the time
along with recreate all the content of web page.

Web Engineering Chp 1 Page 113

 Figure 10.13 Illustration of a synchronous implementation of the server time web
page (taken from Fundamentals of Web Development second edition 2017)

Ajax Asynchronous Example(What’s Changed?):

In ajax we send request to change time on web page to server and it only sends us the
updated time. We update that time on our web page and remaining content of web page
are not changed. Ajax is very powerful in web pages because it is not updating whole page
to change one element.
The mail pages, social media pages etc. are using ajax in their web pages. Just required data
is fetched and updated on the browser page in ajax.

Figure 10.14 Illustration of an AJAX implementation of the server time web page
(taken from Fundamentals of Web Development second edition 2017)

Making Asunchrounous Requests-load():

Web Engineering Chp 1 Page 114

Making Asunchrounous Requests-load():
How we can we send asynchronous request through jQuery ?
load():
load() function is used to update content that we get from server.
$(“#timeDiv”).load(“[Link]”);
Here in JQuery load function will get the updated time from server-side script named
[Link] in a single string and load that value asynchronously into the <div
id=“timeDiv”> element.
Making Asynchronous Requests-GET:
$.get()
$.get() function is used to send request to get data from server. There is a dollar sign and
dot before get, that will hint as it is not an element rather it is a jQuery Ajax function.
For example;
$.get(“[Link]?name=Italy”);
Here a url and country name is giving as parameter in query string.
The Post Method:
$.post()
This method is used to send data on server and data is sent in parameter.
The POST Method-Form Serialization:
To send data from form to server using Ajax, we use serialization. In given code example,
the serialize() method converts(encoded) the data of form into query string that would be
stored in postData variable. And that variable is passed as parameter to post method to
send data on server.
var postData = $(“#someForm”).serialize();
$.post(“[Link]”,postData);

Complete Control over Ajax:

Many things can be customized using Ajax. For example, which URL you want to access,
what data is to send, whether it is asynchronous or synchronous type of request. In
synchronous request you have to wait for the response of server then next statement could
be executed. In asynchronous request, next statements could be run without waiting server
response. In given code HTTP headers could be set in Ajax query. For example headers and
referrer etc properties could be set.
$.ajax({ url: “[Link]”,
data: $(“#voteForm”).serialize(),
async: true,
type: post,
headers: {“User-Agent” : “Homebrew Vote Engine”,
“Referer”: “[Link]
}
});

Code 1-Listing10.16 Adding headers to an AJAX post in jQuery

Cross-Origin Resource Sharing:
The Hackers sometimes use cross origin resource sharing for hacking. By default requests
related to cross origin resource sharing are disabled and server does not entertain those
requests. To deal with these requests servers require allowing Access-Control-Allow-Origin
requests. Through this we can fetch data from different websites using Ajax. I on server side
this request is not enabled then on client side error will be shown to not have permission to
access data. Such type of error could be shown when you try to fetch data from different
domains or even on same domain with different urls.

From <[Link]

Web Engineering Chp 1 Page 115

Chapter 08: Introduction to PHP
Wednesday, 15 July 2026 6:57 pm

Web Engineering Chp 1 Page 116

Chapter 09: Database and web development
Wednesday, 15 July 2026 6:58 pm

Web Engineering Chp 1 Page 117

Chapter 10: Error handling in PHP
Wednesday, 15 July 2026 6:58 pm

Web Engineering Chp 1 Page 118