lOMoARcPSD|42770001 lOMoARcPSD|42770001

LECTURE NOTES ON

WEB DESIGN (MC4023)

UNIT I Introduction TO WWW MCA ( REGULATION -2021 )

SEMESTER - III

Master of Computer Application (Anna University)

Prepared by,

Mr. E. Janakiraman. MCA,M.phil.,

Assistant professor

Scan to open on Studocu

DEPARTMENT OF COMPUTER APPLICATION

ADHIPARASAKTHI ENGINEERING COLLEGE

MELMARUVATHUR – 603319

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

UNIT I : INTRODUCTION TO WWW 1.1.4 When did the internet become user-friendly?
Understanding the working of Internet-Web Application Architecture-Brief history of
Internet-Web Standards – W3C-Technologies involved in Web development – Protocols-
Basic Principles involved in developing a website-Five Golden Rules of Web Designing. Then in 1986, the National Science Foundation took the development of the internet
to the next echelon by funding NSFNET, a network of supercomputers throughout the
1.1 Understanding the working of Internet country.

1.1.1 A Brief History of the Internet These supercomputers laid the groundwork for personal computing, bridging the gap
 On October 29, 1969, an organization called ARPANET (Advanced Research between computers being used exclusively for academic purposes and computers used to
Projects Agency) launched the first iteration of the internet (also known as perform daily tasks.
ARPANET) connecting four major computers at The University of Utah, UCSB,
In 1991, The University of Minnesota developed the first user-friendly internet
UCLA, and Stanford Research Institute.
interface, making it easier to access campus files and information. The University of Nevada
 When this network of computers was connected, universities were able to access
at Reno continued to develop this usable interface, introducing searchable functions and
files and transmit information from one organization to the other, as well as
indexing.
internally.
 As researchers developed the system, they continued to connect computers from 1.2. WEB APPLICATION ARCHITECTURE
other universities, including MIT, Harvard, and Carnegie Mellon. Eventually,
ARPANET was renamed “internet.” 1.2.1 A Definition of Web Application Architecture
Web application architecture defines the interactions between
1.1.2 Who used the internet in this stage? applications, middleware systems and databases to ensure multiple applications can work
together. When a user types in a URL and taps “Go,” the browser will find the Internet-facing
computer the website lives on and requests that particular page.
In its earliest days, the internet was only used by computer experts, scientists, engineers, and
librarians who had to learn a complicated system in order to use it, but as the technology The server then responds by sending files over to the browser. After that action, the
browser executes those files to show the requested page to the user. Now, the user gets to
improved and consumers adapted, it became an essential tool for people around the globe.
interact with the website. Of course, all of these actions are executed within a matter of
seconds. Otherwise, users wouldn’t bother with websites.
1.1.3 How and when did the functionality of the internet change?
What’s important here is the code, which has been parsed by the browser. This very
code may or may not have specific instructions telling the browser how to react to a wide
The 1970s was a serious time of transition for the internet. Email was introduced in swath of inputs. As a result, web application architecture includes all sub-components and
1972, libraries across the country were linked, and above all, information exchange became external applications interchanges for an entire software application.
more seamless thanks to Transport Control Protocol and Internet Protocol (TCP/IP) Of course, it is designed to function efficiently while meeting its specific needs and
architecture. goals. Web application architecture is critical since the majority of global network traffic, and
every single app and device uses web-based communication. It deals with scale, efficiency,
The invention of these protocols helped to standardize how information was sent and robustness, and security.
received over the web, making the delivery more consistent, regardless of where or how
you’re accessing the internet. 1.2.2 How Web Application Architecture Works
With web applications, you have the server vs. the client side. In essence, there are two
programs running concurrently:

 The code which lives in the browser and responds to user input

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

 The code which lives on the server and responds to HTTP requests These are then parsed by the user’s browser. Moreover, client-side code can be seen and
edited by the user. Plus, it has to communicate only through HTTP requests and cannot read
files off of a server directly. Furthermore, it reacts to user input.

1.2.3 Web Application Architecture is Important for Supporting Future Growth

The reason why it is imperative to have good web application architecture is because it is
the blueprint for supporting future growth which may come from increased demand, future
interoperability and enhanced reliability requirements. Through object-oriented
programming, the organizational design of web application architecture defines precisely
how an application will function. Some features include:

 Delivering persistent data through HTTP, which can be understood by client-side code
and vice-versa
 Making sure requests contain valid data
 Offers authentication for users
 Limits what users can see based on permissions
 Creates, updates and deletes records

1.2.4 Trends in Web Application Architecture

As technology continues to evolve, so does web application architecture. One such
trend is the use of and creation of service-oriented architecture. This is where most of the
Image via Wikipedia code for the entire application exists as services. In addition, each has its own HTTP API. As
a result, one facet of the code can make a request to another part of the code–which may be
When writing an app, it is up to the web developer to decide what the code on the running on a different server.
server should do in relation to what the code on the browser should do. With server-side
code, languages include: Another trend is a single-page application. This is where web UI is presented through a rich
JavaScript application. It then stays in the user’s browser over a variety of interactions. In
 Ruby on Rails terms of requests, it uses AJAX or WebSockets for performing asynchronous or synchronous
 PHP requests to the web server without having to load the page.
 C#
 Java The user then gets a more natural experience with limited page load interruptions. At
 Python their core, many web applications are built around objects. The objects are stored in tables via
 Javascript an SQL database. Each row in a table has a particular record. So, with relational databases, it
is all about relations. You can call on records just by listing the row and column for a target
In fact, any code that can respond to HTTP requests has the capability to run on a server. data point.
Here are a few other attributes of server-side code:
With the two above trends, web apps are now much better suited for viewing on
 Is never seen by the user (except within a rare malfunction) multiple platforms and multiple devices. Even when most of the code for the apps remain the
 Stores data such as user profiles, tweets, pages, etc… same, they can still be viewed clearly and easily on a smaller screen.
 Creates the page the user requested

With client-side code, languages used include: 1.2.5 Best Practices for Good Web Application Architecture
You may have a working app, but it also needs to have good web architecture. Here are
 CSS several attributes necessary for good web application architecture:
 Java script
 HTML
 Solves problems consistently and uniformly
 Is as simple as possible

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

 Supports the latest standards include A/B testing and analytics for example. Using browser-specific code often doubles or triples the work to create
 Offers fast response times Web pages, and leaves a lot to be desired when new media are introduced. This
 Utilizes security standards to reduce the chance of malicious penetrations situation will only get worse without the sound direction of Web standards.
 Does not crash
 Heals itself Some people fear that standards are limiting. In reality, they remove much of the
 Does not have a single point of failure tedious labour involved in Web development, and give developers more time and
 Scales out easily more flexibility to be truly creative. They are both open to future improvement and
 Allows for easy creation of known data mindful of past technology.
 Errors logged in a user-friendly way
 Automated deployments Many uses of the Web, including some that are only dreamed of today, will not be
possible, or will be more difficult, without widespread standards compliance. At the
1.3 Brief history of Internet moment, there are systems and software that are very common, seemingly close to
universal, but who knows what tomorrow will bring? Tying ourselves to the control
Evolution of any single company means limiting our future to the fortunes and misfortunes
which that one company can, or will, provide. Maintaining universal standards will
The concept of Internet was originated in 1969 and has undergone several technological & allow the Web to survive while encouraging innovation to continue at its current
Infrastructural changes as discussed below: pace.

 The origin of Internet devised from the concept of Advanced Research Project Standards have so much to offer that we at the Web Standards Project (WSP)
Agency Network (ARPANET). consider it necessary to help you learn more about them. This document is merely a
starting point; it will give you a solid understanding of what standards exist, why
 ARPANET was developed by United States Department of Defense. they do, and why you should care about them. Every time we create a piece of the
 Basic purpose of ARPANET was to provide communication among the various Web, we contribute to the common information space that is the Web. We can build
bodies of government. it up, or we can add weight that will tear it apart. The choice belongs to us; the
consequences belong to everyone.
 Initially, there were only four nodes, formally called Hosts.
1.4.1 What are the standards?
 In 1972, the ARPANET spread over the globe with 23 nodes located at different
countries and thus became known as Internet. W3C Standards
 By the time, with invention of new technologies such as TCP/IP protocols, DNS,  What is the W3C?
WWW, browsers, scripting languages etc.,Internet
1.4 WEB STANDARDS The World Wide Web Consortium (W3C) is an international industry consortium
dedicated to "leading the Web to its full potential". It's led by Tim Berners-Lee,
Tim Berners-Lee's dream for his invention, the World Wide Web, is a common the inventor of the Web. Founded in 1994, the W3C has more than 330 member
space where users can share information to work together, to play, and to socialize organizations - including Microsoft, America Online (parent company
(The World Wide Web, A very short personal history). As Web developers, of Netscape Communications), Apple Computer, Adobe, Macromedia, Sun
creating business, social, and educational sites, we turn this dream into reality. Microsystems, and a variety of other hardware and software manufacturers, content
providers, academic institutions, and telecommunications companies. The
But in this period of tremendous growth, the Web needs guidance to realize its full
Consortium is hosted by three universities - MIT in the US, INRIA in Europe,
potential. Web standards are this guidance. These standards help ensure that
everyone has access to the information we are providing, and also make Web and Keio University in Japan.
development faster and more enjoyable.
 What does it do?
Standards compliance makes it easier for people with special needs to use the Web.
Blind people may have their computer read Web pages to them. People with poor The W3C develops open specifications (de facto standards) to enhance the
eyesight may have pages rearranged and magnified for easier reading. And people interoperability of Web-related products. W3C Recommendations are developed by
using hand-held devices can browse the Web just as easily as those using high-end working groups consisting of Consortium members and invited experts. Working
workstations. groups obtain general consensus from companies and other organizations involved
in creating applications for the Web, and create Working Drafts and Proposed
As we will explain, there are also many practical reasons for developers to be Recommendations. These are then submitted to the W3C membership and director,
concerned with Web standards. Search engines can do a better job of indexing sites,

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

for formal approval as W3C Recommendations. More information regarding this DOM 1 - Document Object Model Level 1
process and the review stages can be obtained from the W3C Web site.
The DOM allows the full power and interactivity of a scripting language (such
 What are the W3C standards? as ECMAScript, the standardized version of JavaScript) to be exerted on a Web
2.1.3.1 HTML 4.0 - HyperText Markup Language page. (In programming terms, the Document Object Model (DOM) Level 1 is an
HyperText Markup Language (HTML) is widely used on the Web for adding Application Programming Interface (API) for interacting with Web pages.) It gives
structure to text documents. Browsers interpret these documents, representing the the scripting language easy access to the structure, content, and presentation of a
structure in media-specific ways to the user. For example, visual browsers typically document which is written in such languages as HTML and CSS.
display the strong element (<strong> ... </strong>) as bold text, while text-to-speech The DOM is compatible with future improvements in technology; it will allow any
readers might emphasize that text when pronouncing it. scripting language to interact with whatever languages are being used in the
With the help of Cascading Style Sheets (CSS) the author may define how document. This standard will not only make it easier to program dynamic HTML,
structural elements are to be represented, overriding the browser defaults. but will also make adapting to future Internet technology much less painful.
Emerging Standards
XML 1.0 - Extensible Markup Language Example of part of an XML document The W3C is constantly at work on creating new standards; the most important of
these right now are are XHTML and XSL. XHTML, Extensible Hypertext Markup
Extensible Markup Language (XML) is a Language, is a reformulation of HTML 4.0 in XML; XSL, the Extensible
<addressbook>
markup language like HTML, but instead of Stylesheet Language, is a language for transforming and displaying XML
<entry>
having a single, fixed set of elements, it documents, using an XML vocabulary.
<name>Janakiraman</name>
allows you to define your own - or use a set
<email>[email protected]</email> 1.4.2 ECMA Standards
made by someone else. It even allows using
</entry>
multiple sets within a single document - by  What is the ECMA?
<entry>
using XML namespaces.
<name>Marc Andreesen</name>
The European Computer Manufacturers Association (ECMA) is an organization
Some applications of XML, such <email>marca netscape.com</email>
officially founded in 1961 in order to meet the need for standardizing computer
as XHTML and MathML, have already </entry>
operational formats, including programming languages and input/output codes.
become W3C Recommendations. Others are <entry>
currently W3C Working Drafts. <name>Jon S. von Tetzchner</name> The ECMA is based in Geneva, Switzerland, near the headquarters of
<email>jon opera.com</email> the International Organization for Standardization (ISO) and the International
Style sheet standards, such as CSS and (in </entry> Electrotechnical Commission (IEC). In 1994, the organization's name was
the future) XSL, can be used to specify how </addressbook> changed to the ECMA - European Association for Standardizing Information and
XML elements are to be rendered. CSS and Communication Systems, in order to reflect its broader range of activities.
XSL both allow you to specify different styles for different media, so that you can
have separate sets of styles for visual, voice, braille and other media.  What does it do?

XML is more flexible than HTML, primarily because of the ability to add your own The main role of the ECMA is to develop Standards and Technical Reports in the
elements and make your own structural systems. This makes it an ideal format for area of information and communication technology. As ECMA is an association of
the organization of large quantities of data - it is already in use in many databases companies and not an official standardization institute, they often collaborate with
and search engines. official national or international institutes.

CSS - Cascading Style Sheets ECMA Standards have been accepted as a base for international and European
standards. So far 270 ECMA Standards and 70 Technical Reports have been
Cascading Style Sheets (CSS) is a mechanism for changing the appearance published.
of HTML or XML elements, by assigning styles to element types, self-defined
classes of elements or individual instances. Of these standards 85 have been accepted as international standards by
the International Organization for Standardization (ISO). In addition, 25 have
Stylesheets can be used to consistently define the appearance of an entire site. been accepted as European standards by the European Telecommunications
Following the introduction of CSS, the W3C recommended that layout-specific Standards Institute (ETSI).
features in HTML be phased out and replaced by stylesheets, creating a simpler and
more structural World Wide Web.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

 What are the ECMA standards? Not only does this mean allowing the Web to be used by people with disabilities,
2.2.3.1 ECMAScript (standardized JavaScript) but also allowing Web pages to be understood by people using browsers other than
the usual ones - including voice browsers that read Web pages aloud to people with
ECMAScript is a standardized scripting language, based largely sight impairments, Braille browsers that translate text into Braille, hand-held
on Netscape's JavaScript and Microsoft's JScript. The ECMAScript standard is browsers with very little monitor space, teletext displays, and other unusual output
defined by ECMA's Technical Committee 39 (TC-39). devices.
The main use of ECMAScript, which is an object-based language, is to manipulate As the variety of Web access methods increases, adjusting or duplicating Web sites
the objects in Web pages which are specified by the Document Object to satisfy all needs will become increasingly difficult (indeed, some say it's
Model (DOM). These objects (effectively, the elements which make up Web pages,
impossible even today). Following standards is a major step towards solving this
or the Web pages as a wholes) can then be added to, deleted, moved, or have their
problem. Making your sites standards-compliant will help ensure not only that
properties changed. This lets Web developers implement such effects as animated
text, graphic roll-overs, and pages that change based on user input without having to traditional browsers, old and new, will all be able to present sites properly, but also
be reloaded. that they will work with unusual browsers and media.

. Some consequences of ignoring standards are obvious: the most basic consequence
is that you will restrict access to your site. How much business sense does it make to
1.4.3 What are the advantages of using Web standards? limit your audience to only a fraction of those who wish be a part of it? For a
Accessibility business site, denying access to even small portions of a target audience can make a
big difference to your profit margin. For an educational site, it makes sense to allow
 To software/machines access not only to affluent, able-bodied school-children with graphical browsers, but
also to children in Third-World countries who only have text-based browsers
Complying with Web standards can give your Web pages greater visibility in Web access, or disabled students using specialized browsers.
searches. The structural information present in compliant documents makes it easy
for search engines to access and evaluate the information in those documents, and The same principle applies to all types of Web site - while straying from the
they get indexed more accurately. standards and taking advantage of browser-specific features may be tempting, the
increased accessibility which comes from standards-compliance will lead to far
Because use of Web standards makes it easier for server-side as well as client-side greater rewards in the long run.
software to understand the structure of your document, adding a search engine to
your own site becomes easier and gives better results. 3.2 Stability

Standards are written so that old browsers will still understand the basic structure of Most Web standards are generally designed with forward- and backward-
your documents. Even if they can't understand the newest and coolest additions to compatibility in mind - so that data using old versions of the standards will continue
the standards, they'll be able to display the content of your site. The same, of course, to work in new browsers, and data using new versions of the standards will
applies to robots - systems that collect information from your site on behalf of "gracefully degrade" to produce an acceptable result in older browsers.
search engines and other indexers. Because a Web site may go through several teams of designers during its lifetime, it
Compliant code gives you the opportunity of validating your page with a validation is important that those people are able to comprehend the code and to edit it easily.
service. Validators process your documents and present you with a list of errors. Web standards offer a set of rules that every Web developer can follow, understand,
This makes finding and correcting errors a lot easier, and can save you a lot of time. and become familiar with: when one developer designs a site to the standards,
another will be able to pick up where the former left off.
Compliant documents can easily be converted to other formats, such as databases or
Word documents. This allows for more versatile use of the information within 1.4.4 Conclusion
documents on the World Wide Web, and simplified migration to new systems - As Web developers, we are constantly trying to address the problem of
hardware as well as software - including devices such as TVs and PDAs. inconsistencies between the renderings of Web pages by different browsers and
browser versions. This necessitates either time-consuming double/multiple coding,
 To people
or coding for a single browser (which makes it harder, if not impossible, for some of
Accessibility is an important idea behind many Web standards, especially HTML. the public to use the site). This situation will be made even worse with the advent of

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

additional hardware and software which will be able to browse the Web, such as and by the US Defense Advanced Research Projects Agency (DARPA) and the European
telephones, pagers, and PDAs. Commission (European Commission) for their support.

Web standards are not arcane laws decreed by ivory-tower organizations. As we Standardized web
have described, the standards are for the most part decided by representatives of
the same people who use them - browser makers, Web developers, content W3C is committed to implement all the users can be used (regardless of their educational
providers, and other organizations. background, ability and financial resources as well as its physical disabilities) on web.

Writing Web pages in accordance with the standards shortens site development time At the same time work with other W3C standards organizations, such as the Internet
and makes pages easier to maintain. Debugging and troubleshooting become easier, Engineering Task Force (Internet Engineering Task Force), Wireless Application Protocol
because the code follows a standard. No longer do you have to worry about the (WAP) and the Unicode Consortium (Unicode Consortium).
coding and maintenance for several versions of code that are supposed to
accomplish the same presentation. One version of your site, and that is it. W3C by the MIT Computer Science and Artificial Intelligence Laboratory (MIT CSAIL),
France-based European Information Mathematics Research Alliance (ERCIM) and Japan's
The universal adoption of Web standards is becoming of paramount importance. Keio University (Keio University) joint operation, and has worldwide branch office.
The mission of the Web Standards Project is to make the Web a better place, for
developers and for end-users, by encouraging browser and Web page editor makers
to follow the standards in their applications. This effort will be greatly helped when
Web developers use the standards as a matter of course, and insist that generators W3C Members
and renderers of their code comply with the standards.
Because Web is so important (both in its scope and in investment), so that should not be by
The reasons we have given should give you, the Web developer, plenty of any of a single organization to control its future, so the role played by a W3C Member
incentive to begin using standards, and also plenty of ammunition with which you organizations:
can encourage your place of business and fellow developers to use those standards.
Some well-known members include:

1.5 W3C  IBM

 Microsoft
What is the W3C?
 America Online
 Apple
 W3C refers to the World Wide Web Consortium (World Wide Web Consortium)
 Adobe
 W3C was founded in October 1994
 Macromedia
 W3C was created by Tim Berners-Lee
 Sun Microsystems
 W3C is a membership organization
 W3C is working to standardize the web
 W3C creates and maintains WWW Standards W3C Members include: software developers, content providers, corporate users,
 W3C Standards are called W3C Recommendation (W3C specification) telecommunications companies, research institutions, research laboratories, standards bodies
and government.

W3C is how to create?

W3C Recommendations
WWW (World Wide Web) as a project of the European Organization for Nuclear Research of
developed, which where Tim Berners-Lee developed the World Wide Web prototype. W3C's most important work is the development of Web specifications (called
recommendation, Recommendations), these specifications describe a Web communication
Tim Berners-Lee - the inventor of the World Wide Web - is now the director of the World protocols (like HTML and XHTML) and other building blocks.
Wide Web Consortium.
Each development is recommended by W3C Working Group members and invited experts to
Objective W3C was created in 1994, in order to complete the Massachusetts Institute of complete. Funds from the Working Group of companies and other organizations, and will
Technology (MIT) to work (CERN) between the European laboratory for particle physics,

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

create a working draft, and finally a Proposed Recommendation. Generally, in order to obtain W3C Working Group (W3C Working Groups)
formal approval recommendation will be submitted to the W3C membership and director.
When submitting an item to be recognized W3C, a working group will be established,
The next section, we will explain specification approval process. including members and other interested parties.

W3C standardization program is divided into seven different steps. The Working Group typically define a timetable for the work on the draft and publish the
proposed standard.

W3C working draft (W3C Working Drafts)

Approval step W3C specifications
W3C Working Draft will normally be published on the W3C Web site, along with an
W3C published a new standard in the process, following rigorous specifications by program invitation to the public annotations.
consists of a simple idea and gradually established as the recommended standard:
Working Draft will describe work in progress, but should not be used for any reference
 W3C received a submission material. Its contents can be updated at any time, replaced or discarded.
 Published by the W3C copy of the record
 Create a working group by the W3C W3C Candidate Recommendation (W3C Candidate Recommendations)
 Published by the W3C working draft
 Published by the W3C recommendation of a candidate Some specifications are more complex than other specifications, and may require from
 By the W3C published a Proposed Recommendation members and software developers more money, more time and more tests. Sometimes, these
 Published by the W3C recommendation specifications will be recommended as a candidate for release.

In this tutorial, the following sections summarize the HTML, CSS, XML, XSL corresponding Candidate recommendation is a "work in progress", the same should not be used as reference
activities in W3C, including the status of each Web standards and time lines. material. This document may be updated at any time, replaced or discarded.

W3C submission (W3C Submissions) W3C Proposed Recommendation (W3C Proposed Recommendations)

Any member may submit to the W3C Web Standards Alliance hopes to become one of the Recommended means the final stage of the working group proposed in the work.
recommendations (case). Most W3C recommendation originated in the League made a
submission. Proposed Recommendation is a "work in progress." This document may be updated at any
time, replaced or discarded. But even if it does not imply any official endorsement by the
If a submission in W3C work area (or charter), the W3C will then decide whether to start W3C, in very many cases, the proposal recommended either in content or time are close to
work on the improvement of the proposal. the final recommendation.

W3C record (W3C Notes) 1.6 Technologies involved in Web development

Typically, one pair W3C submission will be a record. Record is a public document as a Front-end (client-side) technologies.
proposal to refine the description.
Front-end technologies are for the “client side” of your website or application. They’re used
W3C only the user record discussion. The record does not represent an endorsement of the to develop the interactive components of your website, and produce the elements that users
release. Recorded content submitted by members to edit this record, rather than W3C. see and interact with. This includes text colours and styles, images, buttons, and navigation
Records can be updated at any time, replaced or discarded. Records indicate that the release menus.
is not W3C has started any work associated with this record.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

Back-end (server-side) technologies. 2. CSS

Back-end technologies are for the “server side” of your website or application. They’re for Cascading Style Sheets, abbreviated as CSS, define the style and aesthetics of a web page.
developing the technical foundation. They store and arrange data and make sure everything While HTML is used to structure a web page, CSS specifies the appearance of that structure.
on the front-end works. For example, when a user provides login credentials to a social media This includes page layouts, colours, fonts and element positioning. If HTML is the bones of
application, back-end technologies are used to check if those credentials are accurate. Once the web page, CSS is the skin. It makes the Internet, and your website, look good.
the credentials are verified, the server will send back the profile name, picture, and other 3. Programming languages
associated information.
Programming languages are ways to communicate with computers and tell them what to do.
Back-end technologies are also used to streamline core business processes. In cases where They provide a vocabulary and set of grammatical rules to instruct a computer to perform
you have lots of data that needs to be processed, you could run a script in the back-end to specific functions.
generate a meaningful report on the front-end. You can also send automatic emails to groups
of users. Emails can be triggered by certain dates, such as the expiration of a user’s free There are lots of different programming languages just as there are lots of human languages.
website trial. Developers typically specialize in a few languages.

The first two technologies we’ll discuss are front-end technologies. Below are a few examples of different languages:

1. HTML JavaScript

HTML stands for Hyper Text Markup Language. It’s one of the fundamental technologies JavaScript is the most used language by startups for a few reasons. It can be used as both a
required for web development. It provides the base structure for a web page. HTML code front-end and back-end programming language. Compared to other languages, JavaScript is
ensures that all the content on a website is properly formatted. This is so your Internet comparatively easy-to-learn (although all languages come with some difficulties), and it’s
browser can display the content as intended. Without HTML, a browser couldn’t display text used everywhere in custom web application development. It’s also constantly being updated
or load images and other elements. and expanded with new features.

HTML5, the most current version of HTML, specifies a large number of Application All the following are back-end languages that make a website or application work:
Programming Interfaces (API integration services) that can be used with JavaScript for a
more interactive and dynamic website: PHP

 Canvas: Canvas is an HTML5 element used to draw images and shapes and manipulate PHP is the most common language in web development. WordPress, a content management
them. It can also be used for more complex cases such as game graphics and animations. system (CMS) that powers 34% of the Internet, is built on PHP. Finding a good developer
can be difficult regardless of language, but choosing a popular one like PHP will give you a
 Web Storage: Web Storage is used to store information right in the browser. Some larger pool of developers to choose from and work with. PHP also comes with extensive
examples of this would be storing user login information and saving user preferences for a online documentation and tutorials for troubleshooting and support.
website.

 Service workers: Service workers enable a script that keeps running in the background
when a web page is opened and is mainly used in websites with offline capabilities. It
makes pages available offline and allows for the use of web push notifications. It can send
these notifications even when your browser isn’t open.

 WebSockets: WebSockets allows for persistent two-way connection between the user and
the server. The most common use cases include chats and notifications in web apps.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

Because of its robustness and deep functionality, it’s commonly used by large corporations
Python and companies that need a powerful front-end solution. As with most pieces of complex
software, it has a steep learning curve.
Python is another popular programming language. It’s relatively simple and uses a unique
syntax that focuses on readability. Python is good for artificial intelligence (AI) applications One thing to take note of is that there are multiple versions of Angular, and this can present
and projects, statistics, data science work, and machine learning. It can also be used to create some difficulties. If you have an earlier version of Angular but want to migrate to a newer
web applications. version for added functions and features, you would require an extensive code rewrite
because of the difference in version.
Java
An example of a back-end framework:
Java is a language that’s popular in enterprise companies. It can be run on multiple platforms,
has extensive documentation, and is supported by Oracle (a large and respected software Node.js
company) in case you run into trouble. It can also be used to write Android applications.
Node.js is a runtime that allows you to write server side code using JavaScript. Because of
Rust JavaScript’s popularity, Node.js is widely used and there are lots of well-versed developers
working with Node.js. It’s often used for real-time web applications. Node.js makes
Rust is a newer language that focuses on safety and especially safe concurrency. Concurrency developing simple applications and prototypes fast and efficient. However, it’s not ideal for
in software engineering means the collection of techniques that enable a computer program to CPU-intensive tasks.
perform several different tasks simultaneously. Safe concurrency gives you the efficiency
needed to execute multiple tasks while keeping your code safe and secure. Rust is high 5. Libraries
performing and has gained market traction even as a newer language.
Libraries are collections of files, programs, routines, scripts or functions that can be
4. Web development frameworks integrated when writing code. Libraries work by grouping snippets of code together to enable
functionality so you don’t have to write the code yourself. Like frameworks, they mitigate the
Web development frameworks are tools and libraries that developers use to make developing risk of improper coding, make the development process more efficient, and save you money.
in a particular language easier and more efficient. They provide interfaces to access
commonly-used functionalities as well as abstractions that make complicated things easier to However, libraries are different than frameworks. A framework defines and structures your
understand and handle. build. Libraries are resources you can freely integrate into a build of your own structure and
design. They’re often used for more specific functions or features while a framework is a
Essentially, they make the development process more efficient because developers have a more complete development tool.
pool of code resources to draw from when developing. There’s no need to develop software
functions from scratch when frameworks give you all the necessary tools to build a website Let’s look at some different libraries:
or application. Because frameworks give you a headstart on your development, they’re more
cost effective than developing entirely new code. They also lower your development risk
since they’re tried and true compared to writing brand new, untested code.

There are both front-end and back-end frameworks that streamline the development process. React.js

One example of a front-end framework: React.js, backed by Facebook, is one of the most popular front-end libraries. There’s a
somewhat long and complex learning curve associated with using React.js, but it’s
Angular exceptional at creating great looking user interfaces (UI). It’s also always changing and being
updated for improvements and maintenance.
Angular is a front-end framework maintained by Google. Compared to other front-end
frameworks, it’s the most complete solution as it has the most bundled functionalities.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

A protocol is a set of rules and guidelines for communicating data. Rules are defined for each
Vue.js step and process during communication between two or more computers. Networks have to
follow these rules to successfully transmit data.
Vue.js is another library specifically aimed at UI creation. Compared to React.js, Vue.js is
simple and easy to use. It does have a smaller community to draw on for troubleshooting and 1.7 PROTOCOLS
support, but that’s slightly offset by its speed and relatively easy learning curve. Although not
quite as widely used as some other libraries, it’s rising in popularity due to its ease-of-use. Types of Protocols

A protocol technologies is required for communication between computers. To connect

different types of computers from a variety of computer vendors, protocols must be first
standardized. The ARPA (Advanced Research Project Agency) part of the US Defense
FacebookSDK program was the first to introduce the concept of a standardized protocol. ARPA is a
resource sharing network connecting different computers at universities and laboratories in
the US. The concept of the protocol and its layer structure, emerged from the ARPA
FacebookSDK is a library used to integrate apps with Facebook. With this library, you can
network. ARPA developed an integrated network using packet protocol and is also
gather user data as it passes between your app and Facebook. The data can then be used to
renowned for its development of packet switching.
optimize your application, advertising, and give you accurate metrics, like user downloads.
TCP

Transmission control protocol is used for communication over a network. In TCP data is
broken down into small packets and then sent to the destination. However, IP is making sure
6. Databases packets are transmitted to the right address.
Internet Protocol (IP)
Databases are where all your data is stored. However, they aren’t just haphazard digital filing
cabinets. They provide a consistent, organized structure for storing and retrieving large IP is also working with TCP. It is an addressing Protocol. IP addresses packets route them
amounts of data. and show different nodes and network Unless it reaches its right destination. The IP protocol
is developed in 1970.
There are two main types of databases: SQL and NoSQL.
FTP
SQL databases use structured query language (SQL) to define and manipulate data. SQL is
File transfer protocol is basically used for transferring files to different networks. There may
the language with which a coder communicates with a database in order to manipulate the
be a mass of files such as text files, multimedia files, etc. This way of file transfer is quicker
data held within. Because SQL databases all use the same language you must use predefined
than other methods.
schemas to determine the structure of your data. Your data must also follow the same
structure which can require some upfront preparation. SMTP

NoSQL databases don’t use structured query language (hence the name) so data can be stored Simple mail transfer protocol manages the transmission and outgoing mail over the internet.
in many ways. This means that you can store data without first defining it’s structure. Also, a
HTTP
NoSQL database enables all your stored data to have its own unique structure without being
defined by the database’s structure itself.
HTTP is based on client and server model. HTTP is used for making a connection between
the web client and web server. HTTP shows information in web pages.
Some examples of popular databases include:
Ethernet
 MySQL: An open-source SQL database. MySQL is used in WordPress websites.
Ethernet is a most important for LAN communication. Ethernet transmits the data in digital
 MongoDB: An open source NoSQL database. packets. If any computer wants to use this protocol they should contain Ethernet Network
Interface Card (NIC). The card is implemented with unique address code fixed in the
 Oracle: Oracle Database is a proprietary database management system. It’s commonly used microchip.
for running online transaction processing, data warehousing and mixed database workloads.

What Does Protocol Mean?

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

Telnet

Telnet is an established with some rules which are used to connect to another computer.
Telnet is mainly used for the remote login process. The computer which is requesting for a
connection that is a local computer and which is accepting the connection that is a remote
computer. If you give a command in a local computer that command is executed in the
remote computer. Telnet is also based on client and server model.
Gopher

Gopher is an application layer protocol, which is used for searching and retrieving This has an acknowledgement scheme. In this case, if an acknowledgement is not received
documents from remote sites. This is possible to start an online connection with other by the sender in a specified time, the sender retransmits the packet. This time is called time
computers through gopher. out. After the successful transmission of a packet, next packets are transmitted until entire
message is sent. If a packet is received and contains errors, the receiver will send a negative
Transmission Control Procedure acknowledge. This implies that the sender has to send it again. Data bytes contain data
according to the ASCII code for text or simply a value between 0 and 255 for binary data.
Control bytes determine the behavior of the communication link, and are used for a range of
As important as it is that there should be one accepted standard that allows all types of
different purposes.
machines to communicate. There are several different protocols in use today. These are:
The link between sender and receiver is half duplex.
• Synchronous Protocol These protocol involve timing information of sender along with
the data bytes. This protocol helps receiver to remain synchronization with the sender. When
the sender has no data to transmit, the sender transmits a sequence of alternating 0s sand 1s 1.8 BASIC PRINCIPLES OF GOOD WEBSITE DESIGN
to maintain sender/receiver synchronization. This sequence of 0s and 1s is called idle flags.
Data bytes are packaged into small chunks called packets including address fields and
check-sums. As error checking is an inherent feature of this protocol, this overcomes the
major deficiency of the asynchronous protocol. An effective website design should fulfill its intended function by conveying its
particular message whilst simultaneously engaging the visitor. Several factors such as
Asynchronous Data Link Control (DLC) Protocols Asynchronous protocols are used consistency, colours, typography, imagery, simplicity and functionality all contribute to good
primarily for low-speed data communications between PCs and very small computers. website design.
Framing occurs at the byte level, with each byte surrounded by a start bit (a 0 bit) and a stop When designing a website there are many key factors that will contribute to how it is
bit (a 1 bit). A parity bit often accompanies each character as well. perceived. A well designed website can help build trust and guide visitors to take action.
Character-orientated Protocols (COP) Creating a great user experience involves making sure your website design is optimised for
usability (form and aesthetics) and how it easy is it to use (functionality).
1. WEBSITE PURPOSE
Each character has its own meaning in character-orientated protocols. A character may be a Your website needs to accommodate the needs of the user. Having a simple clear
data byte or a control byte during transmission. The main COP in use today is known intention on all pages will help the user interact with what you have to offer. What is the
as Bisync or binary synchronous. Each character sent is transmitted using the ASCII code. purpose of your website? Are you imparting practical information like a ‘How to guide’? Is it
Control bytes obviously have values in ASCII of between 00 and 1F, whereas data bytes an entertainment website like sports coverage or are you selling a product to the user? There
have values between 20 and 7F. are many different purposes that websites may have but there are core purposes common to
In this type of scheme, following Figure represents a sequence of communication between all websites;
the sender and receiver. This can be inferred as handshaking between the sender and 1. Describing Expertise
receiver: 2. Building Your Reputation
3. Generating Leads
4. Sales and After Care

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

2. SIMPLICITY 8. LOAD TIME

Simplicity is the best way to go when considering the user experience and the Waiting for a website to load will lose visitors. Nearly half of web visitors expect a
usability of your website. Below are ways to achieve simplicity through design. site to load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3
seconds. Optimising image sizes will help load your site faster.
Colour
Colour has the power to communicate messages and evoke emotional responses. Finding a 9. MOBILE FRIENDLY
colour palette that fits your brand will allow you to influence your customer’s behaviour More people are using their phones or other devices to browse the web. It is important
towards your brand. Keep the colour selection limited to less than 5 colours. Complementary to consider building your website with a responsive layout where your website can adjust to
colours work very well. Pleasing colour combinations increase customer engagement and different screens.
make the user feel good.
Type
1.9 Golden Rules of Web Design
Typography has an important role to play on your website. It commands attention and
works as the visual interpretation of the brands voice. Typefaces should be legible and only
1. Keep it simple. Cramming too much into each page creates confusion. Visitors get
use a maximum of 3 different fonts on the website.
frustrated when they have to scroll through a cluttered interface to find what they need. Keep
Imagery your pages simple and your website will be easier to use.
Imagery is every visual aspect used within communications. This includes still
photography, illustration, video and all forms of graphics. All imagery should be expressive 2. Make a good impression. When you meet someone for the first time, you want to make
and capture the spirit of the company and act as the embodiment of their brand personality. a good first impression. The same should be true for your website. The overall look and feel
Most of the initial information we consume on websites is visual and as a first impression it is ofyour site is the first thing your visitors will notice.
important that high quality images are used to form an impression of professionalism and
credibility in the visitors mind. 3. Provide intuitive navigation. There are few things more frustrating than not being to
navigate a website. Sections and pages should be well organized with a top-down design so
3. NAVIGATION visitors can easily browse through the different areas of your site.
Navigation is the way finding system used on websites where visitors interact and
find what they are looking for. Website navigation is key to retaining visitors. If the websites
4. Be consistent. Users shouldn't feel like they are visiting a new website each time they open
navigation is confusing visitors will give up and find what they need elsewhere. Keeping
a new page on your site. A consistent layout and design across the pages within your site
navigation simple, intuitive and consistent on every page is key.
provides a more natural experience.
4. F-SHAPED PATTERN READING
The F- based pattern is the most common way visitors scan text on a website. Eye 5. Choose your colours carefully. Colour selection can make or break a website. When
tracking studies have found that most of what people see is in the top and left area of the choosing colours, use a limited palette of four or five colours that don't clash. Make sure the
screen. The F’ shaped layout mimics our natural pattern of reading in the West (left to right text is easy to read on the background, though you can soften the contrast with colours besides
and top to bottom). An effective designed website will work with a readers natural pattern of black and white.
scanning the page.
6. Make your website responsive. People access websites from a variety of devices, including
5. VISUAL HIERARCHY smartphones, tablets, laptops, and desktop computers. Your website must display correctly on
Visual hierarchy is the arrangement of elements is order of importance. This is done different screen sizes. CSS media queries are a great way to implement responsive web design.
either by size, colour, imagery, contrast, typographically, whitespace, texture and style. One
of the most important functions of visual hierarchy is to establish a focal point; this shows
7. Develop for multiple browsers. Browsers are supposed to render webpages the same way,
visitors where the most important information is.
but they don't. Test your website in multiple browsers to make sure everything appears
6. CONTENT correctly. It is best to catch problems ahead of time instead of relying on complaints from your
An effective web design has both great design and great content. Using compelling visitors.
language great content can attract and influence visitors by converting them into customers.
8. Check your website for errors. A small error can tarnish a great piece of work. If you're a
7. GRID BASED LAYOUT webmaster, check your websites regularly for typos, broken links, and images that do not load
Grids help to structure your design and keep your content organised. The grid helps to align correctly. Validate your HTML and CSS to make sure there are no syntax errors.
elements on the page and keep it clean. The grid based layout arranges content into a clean
rigid grid structure with columns, sections that line up and feel balanced and impose order
and results in an aesthetically pleasing website.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

9. Write your own code. Whether it's HTML or PHP, nothing beats writing your code from
scratch. If you build your site from templates and prewritten scripts, your design freedom will
be limited. When you code your own pages, you have full control over how they look and act.

10. Don't forget the content. A beautiful website is an empty shell without content. An
excellent website has both great design and great content. Make sure your pages have unique,
original content that makes them worth visiting.

UNIT II UI Design

Master of Computer Applications (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

UNIT II UI DESIGN

SVG-Advanced HTML- Iframes-HTML5 Video and Audio tags. CSS Specificity-

Understanding the box model – Margins padding and border – Inline and block elements -
Structuring pages using Semantic Tags - Positioning with CSS: Positions, Floats, z-index –
CSS with CSS Preprocessors: SASS

OM SAKTHI
2.1 SVG
ADHIPARASAKTHI ENGINEERING COLLEGE
MELMARUVATHUR. SVG Definition

 SVG stands for Scalable Vector Graphics

 SVG is used to define vector-based graphics for the Web
 SVG defines the graphics in XML format
 Every element and every attribute in SVG files can be animated
 SVG is a W3C recommendation
 SVG integrates with other W3C standards such as the DOM and XSL

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:
 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable
DEPT.OF MCA  SVG graphics do NOT lose any quality if they are zoomed or resized
 SVG is an open standard
 SVG files are pure XML

SUBJECT NAME: WEB DESIGN Creating SVG Images

SUBJECT CODE: MC4023
SVG images can be created with any text editor, but it is often more convenient to create
SVG images with a drawing program, like Inkscape.

Code:
UNIT - 2
<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 1 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 2

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

Output:
<!DOCTYPE html>
<html>

<head>
<title>HTML Iframes</title>
</head>

<body>
SVG Code explanation: <p>Document content goes here...</p>

 An SVG image begins with an <svg> element <iframe src = "/html/menu.htm" width = "555" height = "200">
 The width and height attributes of the <svg> element define the width and height of Sorry your browser does not support inline frames.
the SVG image </iframe>
 The <circle> element is used to draw a circle
 The cx and cy attributes define the x and y coordinates of the center of the circle. If cx <p>Document content also go here...</p>
and cy are not set, the circle's center is set to (0, 0) </body>
 The r attribute defines the radius of the circle
 The stroke and stroke-width attributes control how the outline of a shape appears. We </html>
set the outline of the circle to a 4px green "border"
 The fill attribute refers to the color inside the circle. We set the fill color to yellow This will produce the following result −
 The closing </svg> tag closes the SVG image
Note: Since SVG is written in XML, all elements must be properly closed! The <Iframe> Tag Attributes

2.2 I frame Most of the attributes of the <iframe> tag, including name, class, frameborder, id,
longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like
The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear the corresponding attributes for the <frame> tag.
anywhere in your document. The <iframe> tag defines a rectangular region within the 1 Src
document in which the browser can display a separate document, including scrollbars and
borders. An inline frame is used to embed another document within the current HTML This attribute is used to give the file name that should be loaded in the frame. Its value
document. can be any URL. For example, src = "/html/top_frame.htm" will load an HTML file
available in html directory.
The src attribute is used to specify the URL of the document that occupies the inline
frame. 2
Name
Example This attribute allows you to give a name to a frame. It is used to indicate which frame a
document should be loaded into. This is especially important when you want to create
Following is the example to show how to use the <iframe> − links in one frame that load pages into an another frame, in which case the second
frame needs a name to identify itself as the target of the link.

3
Frameborder
This attribute specifies whether or not the borders of that frame are shown; it overrides
the value given in the frameborder attribute on the <frameset> tag if one is given, and
this can take values either 1 (yes) or 0 (no).

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 3 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 4

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

should support in the video tag. But most commonly used video formats are −
4
Marginwidth  Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
This attribute allows you to specify the width of the space between the left and right of
 mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.
the frame's borders and the frame's content. The value is given in pixels. For example
marginwidth = "10". You can use <source> tag to specify media along with media type and many other attributes.
A video element allows multiple source elements and browser will use the first recognized
5 format −
Marginheight
This attribute allows you to specify the height of the space between the top and bottom
of the frame's borders and its contents. The value is given in pixels. For example <!DOCTYPE HTML>
marginheight = "10".
<html>
6 <body>
Height
This attribute specifies the height of <iframe>. <video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
7 <source src = "/html5/foo.mp4" type = "video/mp4" />
Scrolling Your browser does not support the <video> element.
This attribute controls the appearance of the scrollbars that appear on the frame. This </video>
takes values either "yes", "no" or "auto". For example scrolling = "no" means it should
not have scroll bars. </body>
</html>
8
Longdesc This will produce the following result − Video Attribute SpecificationThe HTML5 video tag can have
This attribute allows you to provide a link to another page containing a long description
of the contents of the frame. For example longdesc = "framedescription.htm" a number of attributes to control the look and feel andvarious functionalities of the control –

9 Sr.No. Attribute & Description

Width
This attribute specifies the width of <iframe>.
1 Autoplay
This Boolean attribute if specified, the video will automatically begin to play back as soon
as it can do so without stopping to finish loading the data.
2.3 Html5 Audio and Video Tags
Autobuffer
HTML5 features include native audio and video support without the need for Flash. 2
This Boolean attribute if specified, the video will automatically begin buffering even if it's
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need not set to automatically play.
to set src attribute to identify the media source and include a controls attribute so the user
can play and pause the media. Controls
3
Embedding Video If this attribute is present, it will allow the user to control video playback, including
volume, seeking, and pause/resume playback.
Here is the simplest form of embedding a video file in your webpage −
4 Height
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element. This attribute specifies the height of the video's display area, in CSS pixels.
</video>
The current HTML5 draft specification does not specify which video formats browsers
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 5 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 6

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

This will produce the following result −

Loop
5 Audio Attribute Specification
This Boolean attribute if specified, will allow video automatically seek back to the start
after reaching at the end.
The HTML5 audio tag can have a number of attributes to control the look and feel and
various functionalities of the control −
Preload
6
This attribute specifies that the video will be loaded at page load, and ready to run. Sr.No. Attribute & Description
Ignored if autoplay is present.

7 Poster
1 Autoplay
This is a URL of an image to show until the user plays or seeks.
This Boolean attribute if specified, the audio will automatically begin to play back as soon
8 as it can do so without stopping to finish loading the data.
Src
The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
Autobuffer
2
9 Width This Boolean attribute if specified, the audio will automatically begin buffering even if it's
not set to automatically play.
This attribute specifies the width of the video's display area, in CSS pixels.

Controls
3
If this attribute is present, it will allow the user to control audio playback, including
Embedding Audio volume, seeking, and pause/resume playback.

HTML5 supports <audio> tag which is used to embed sound content in an HTML or
XHTML document as follows. Loop
4
<audio src = "foo.wav" controls autoplay> This Boolean attribute if specified, will allow audio automatically seek back to the start
Your browser does not support the <audio> element. after reaching at the end.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers Preload
should support in the audio tag. But most commonly used audio formats are ogg, 5
mp3 and wav. This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.
You can use <source&ggt; tag to specify media along with media type and many other
attributes. An audio element allows multiple source elements and browser will use the first
recognized format − Src
6
The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
<!DOCTYPE HTML>

<html>
<body> 2.18 CSS | Specificity
When more than one set of CSS rules apply to the same element, the browser will
<audio controls autoplay> have to decide which specific set will be applied to the element. The rules the browser
<source src = "/html5/audio.ogg" type = "audio/ogg" /> follows are collectively called Specificity
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element. Specificity Rules include:
</audio>
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 7 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 8
</body>
</html>
Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

 CSS style applied by referencing external stylesheet has lowest precedence and is
overridden by Internal and inline CSS.
 Internal CSS is overridden by inline CSS. </html>
 Inline CSS has highest priority and overrides all other selectors.
Example:
“external.css” of Example-1:

<html>

<head> h1{

<link rel="stylesheet" type="text/css" href="external.css"> background-color: lightgreen;

<style type="text/css"> }

h1 { h2{

background-color: red; color: pink;

color: white; }

} Output:
h2 {

color: blue;

</style>
2.4 Understanding CSS Box Model
</head>
The box-model is a fundamental concept in CSS and HTML. Since everything
<body> in CSS ismade up of boxes, it’s critical to understand how the CSS box model works.

<h1> What is a box-model?

Internal CSS overrides external CSS One or more rectangular boxes make up every element that can be shown on a web page. The
CSS box model explains how rectangular boxes are displayed on a web page.
</h1>
These boxes can have a variety of features and interact with one another in various ways, but
<h2 style="color: green;"> they all contain a content area as well as optional padding, border, and margin areas used
for changing the appearance.
Inline CSS overrides internal CSS
Controlling the box-model
</h2>
Let’s start with the box-model’s layout, which is depicted in the accompanying image below.
</body>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 9 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 10

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

p{
padding: 35px;
border-style: solid;
border-color: red;
}

These are the changes that you will observe.

CSS box model example

Styling the box

As we said earlier, we may change the appearance of the HTML components of the box by
adjusting the content, padding, border, and margin. Let’s look at each of them.
The additional padding between the paragraph content and the border has been altered
Content significantly, as we can see.
The content consists of data in the form of text, images, or other forms of media.
Border
The width and height attributes change the box’s dimensions. While this is a straightforward
definition, it should be emphasized that “content” can also refer to empty space. For example, The border of an element is defined by the distance between the padding’s outer edge and the
using an empty div tag to add extra unique designs to a webpage can be great. margin’s inner edge. Its width is set to 0 by default.
Padding The border property is used to specify the boundary of an element. Individual edges can be
customized as well.
Padding is the gap between the content’s outside edge and its border. The padding property
may be used to resize the box. Padding-left, padding-bottom, and other edge-specific The following are the three fundamental properties for creating borders:
attributes aid in obtaining custom spacing.
 border-style - Typically, one of the following keywords is used: solid, dashed,
NOTE: You can use one value to represent the padding across the box, for example, padding: or dotted.
35px; or you can give each side of the box a value, for example, padding-left:25px;.  border-width - Informs the browser how big the border should be. For this property,
we usually specify a pixel value, such as border-width: 15px;.
Let’s look at an example of padding in CSS:  border-color - By default, the value utilizes the text’s current color. Even if we don’t
have to, we like to define it. Example, border-color: blue;.
p{
border-style: solid; Below is the basic example of the three properties:
border-color: red;
} border-width: 5px 10px 15px 20px;
border-style: solid dashed dotted double;
Since there is no padding set for this p tag, you will get the result displayed as below. border-color: red green blue brown;

Let’s add some padding to our p and see the results.

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 11 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 12

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

These are the two main types of boxes. Let’s look at each of them.

Block boxes

By default, block boxes take up the entirety of the container’s width.

The <div> HTML element is the most popular and used HTML element for a block box.

Inline Boxes
Margin
By default, inline boxes take up the space required by the wrapped content.
Margin is the portion on the outside of the CSS Box Model. In simpler words, Margin is the The <span> HTML element is the most often used inline box element.
distance between an element’s box and the boxes of its surrounding elements.
<div>Am an Example of DIV</div>
This is similar to the page margin, which is the distance between a page’s boundary and its <span>Am an Example of SPAN</span>
content. It is translucent and has padding-like features, although it clears space outside the
element’s boundary.
This is the pictorial presentation of the two types:
Individual edges, like padding, can be set to have a specific margin.

For example, margin-top: 15px;.

Example

Let’s look at an example of how to apply margin:

<html> Understanding the sizing of boxes

<p>Am the first Box.</p>
<p>Am another Box.</p> Beginners usually make the mistake of assuming that padding, margins, and borders are
included in an element’s height and width. This is wrong.
</html>
<style> The height and width attributes let you customize the height and width of a web element’s
content area. Other components on the web page are not taken into account.
p{
height: 150px; When we write the HTML block width element, width: auto; the value is equal to the width
width: 150px; of the row by default. However, we may assign HTML components a particular width value,
padding: 20px; such as width: 200px;.
border: 10px solid blue;
margin: 15px; Width and height calculations
}
</style> We’ll need to do a quick calculation to see how much space our entire box takes up. Let’s
look at an example (let’s use the values that we had supplied in the margin code above):
The code above shows us how to apply spaces between the two boxes. It separates the two
 height: 150px;
boxes with 15px.
 width: 150px;
 padding: 20px;
2.5 Basic types of boxes
 border: 10px solid blue;
 margin: 15px;
1. Block boxes.
2. Inline boxes.
We use the following formula to calculate the width:

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 13 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 14

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

where a <div> tag could contain any type of information, it is easy to identify what sort of
150px(Width) + 40(right and left padding) + 20px (right and left border) + 30px (right and information would go in a semantic <header> region.
left margin) = 240 An example of semantic element layout by w3schools
Why use semantic elements?
To calculate the height, we use the height’s pixels plus the top and bottom of the padding, To look at the benefits of semantic elements, here are two pieces of HTML code. This first
border, and margin. block of code uses semantic elements:
2.5 Structuring pages using Semantic Tags <header></header>
What are Semantic Elements? <section>
HTML was originally created as a markup language to describe documents on the early <article>
internet. As the internet grew and was adopted by more people, its needs changed. <figure>
<img>
Where the internet was originally intended for sharing scientific documents, now people <figcaption></figcaption>
wanted to share other things as well. Very quickly, people started wanting to make the web
look nicer. </figure>
</article>
Because the web was not initially built to be designed, programmers used different hacks to </section>
get things laid out in different ways. Rather than using the <table></table> to describe
information using a table, programmers would use them to position other elements on a page. <footer></footer>
As the use of visually designed layouts progressed, programmers started to use a generic Whilst this second block of code uses non-semantic elements:
“non-semantic” tag like <div>. They would often give these elements a class or id attribute to
describe their purpose. For example, instead of <header> this was often written as <div <div id="header"></div>
class="header">. <div class="section">
As HTML5 is still relatively new, this use of non-semantic elements is still very common on <div class="article">
websites today.
<div class="figure">
List of new semantic elements <img>
The semantic elements added in HTML5 are: <div class="figcaption"></div>
</div>
</div>
 <article>
 <aside> </div>
 <details> <div id="footer"></div>
First, it is much easier to read. This is probably the first thing you will notice when looking
 <figcaption> at the first block of code using semantic elements. This is a small example, but as a
 <figure> programmer you can be reading through hundreds or thousands of lines of code. The easier it
is to read and understand that code, the easier it makes your job.
 <footer> It has greater accessibility. You are not the only one that finds semantic elements easier to
 <header> understand. Search engines and assistive technologies (like screen readers for users with a
 <main> sight impairment) are also able to better understand the context and content of your website,
meaning a better experience for your users.
 <mark> Overall, semantic elements also lead to more consistent code. When creating a header using
 <nav> non-semantic elements, different programmers might write this as <div
class="header">, <div id="header">, <div class="head">, or simply <div>. There are so
 <section> many ways that you can create a header element, and they all depend on the personal
 <summary> preference of the programmer. By creating a standard semantic element, it makes it easier for
 <time> everyone.
Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more or
less like <div> elements. They group other elements together into page sections. However
Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 15 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 16

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” <input type="submit" />
elements. To this day, some of us might still be confused as to why so many different
elements that doesn’t seem to show any major changes. </form>
</header>
<section> and <article> The <hgroup> element should be used where you want a main heading with one or more
“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, subheadings.
and yes, they can definitely be used interchangeably. It’s a matter of in which situation. <hgroup>
HTML4 offered only one type of container element, which is <div>. While this is still used in <h1>Heading 1</h1>
HTML5, HTML5 provided us with <section> and <article> in a way to replace <div>.
The <section> and <article> elements are conceptually similar and interchangeable. To <h2>Subheading 1</h2>
decide which of these you should choose, take note of the following: <h2>Subheading 2</h2>
1. An article is intended to be independently distributable or reusable. </hgroup>
REMEMBER, that the <header> element can contain any content, but the <hgroup> element
2. A section is a thematic grouping of content. can only contain other headers, that is <h1> to <h6> and including <hgroup>.
<aside>
<section>
The <aside> element is intended for content that is not part of the flow of the text in which it
<p>Top Stories</p> appears, however still related in some way. This of <aside> as a sidebar to your main content.
<section> <aside>
<p>News</p> <p>This is a sidebar, for example a terminology definition or a short background to a
<article>Story 1</article> historical figure.</p>
<article>Story 2</article> </aside>
<article>Story 3</article> Before HTML5, our menus were created with <ul>’s and <li>’s. Now, together with these,
we can separate our menu items with a <nav>, for navigation between your pages. You can
</section>
have any number of <nav> elements on a page, for example, its common to have global
<section> navigation across the top (in the <header>) and local navigation in a sidebar (in
<p>Sport</p> an <aside> element).
<article>Story 1</article> <nav>
<article>Story 2</article> <ul>
<article>Story 3</article> <li><a href="/home">Home</a></li>
</section> <li><a href="/about">About</a></li>
</section> <li><a href="/contact">Contact us</a></li>
<header> and <hgroup> </ul>
The <header> element is generally found at the top of a document, a section, or an article and </nav>
usually contains the main heading and some navigation and search tools.
<footer>
<header> If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom
<h1>Company A</h1> of a document, a section, or an article. Just like the <header> the content is generally
<ul> metainformation, such as author details, legal information, and/or links to related
information. It is also valid to include <section> elements within a footer.
<li><a href="/home">Home</a></li>
<footer>&copy;Company A</footer>
<li><a href="/about">About</a></li> <small>
<li><a href="/contact">Contact us</a></li> The <small> element often appears within a <footer> or <aside> element which would
</ul> usually contain copyright information or legal disclaimers, and other such fine print.
<form target="/search"> However, this is not intended to make the text smaller. It is just describing its content, not
prescribing presentation.
<input name="q" type="search" />
<footer><small>&copy;Company A</small> Date</footer>

Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 17 Prepared By. E. Janakiraman.MCA,MPhil. AP/APEC Page 18

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

<time> .box2 {
The <time> element allows an unambiguous ISO 8601 date to be attached to a
human-readable version of that date. background: #4FFFA1;

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time> height: 100px;

Why bother with <time>? While humans can read time that can disambiguate through
contextin the normal way, the computers can read the ISO 8601 date and see the date, width:100px;
time, and the time zone.
<figure> and <figcaption> }
<figure> is for wrapping your image content around it, and <figcaption> is to
caption yourimage. </style>
<figure>
</head>
<img
src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg <body>
"alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption> <div class="box1">
</figure> Box1
</div>
</div>
2.8 Positioning with CSS
FLOAT <div class="box2">

Box2
The float property enables you to take an element out of normal flow and put content side-by-side.
Elements are floated horizontally , that means, an element can only be floated left or right only </div>

</body>
Float property accepts keyword values left and right float elements those directions respectively and </html>
set to none for not floated. When you set the float property for an element , you should specify the
width and height otherwise its sizing becomes shrink-to-fit horizontally and vertically.

<!Doctype> When you run this code on browser you will get the folowing output:

<html>

<head>

<style>

.box1 {

background: #DDF;

height: 100px;

width:100px; In the above picture the boxes are not set the float property.

} Now we set the float property to both boxes as float:left;

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

.box1 { background: #4FFFA1;

float:left; height: 100px;

background: #DDF; width:100px;

height: 100px; }

width:100px; output

.box2 {

float:left;

background: #4FFFA1;

height: 100px; Now you can see first box is floted to left and second one is floated to right.

width:100px;
z-index
}
While overlapping CSS elements, when using absolute and relative position, the default behavior is
In the above code we set float property to each box as float:left; to have the first elements underneath later ones. In these cases we can control layering of positioned
elements by using the z-index property . When using the z-index property you can specify which
Now you can see the boxes floated from left to right. of the boxes appears on top the other one.

<!Doctype>

<html>

<head>

<style>
Again we set first box as float:left and second box as float:right;
div {
.box1 {
width:100px;
float:left;
height:100px;
background: #DDF;
}
height: 100px;
div.box1 {
width:100px;
background:#dad7d7;
}
position:relative;
.box2 {
z-index:1;
float:right;

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

} background:#dad7d7;

div.box2 { position:relative;

background:#ffe7bc; z-index:2;

position:relative; }

top:-80px; div.box2 {

left:50px; background:#ffe7bc;

z-index:2; position:relative;

} top:-80px;

</style> left:50px;

</head> z-index:1;

<body> }

<div class="box1"> BOX - 1 </div> output

<div class="box2"> BOX - 2 </div>

</body>

</html>
output
Now you can see BOX-1 come in front and BOX-2 going behind the BOX-1.

It is noted that z-index works on positioned elements only like position:absolute, position:relative
and position:fixed.

What is Sass CSS Preprocessor?

Now you can see the BOX-1 is behind the BOX-2, because z-index of BOX-1 is 1 and BOX-2 is 2.
Now we are going to change the z-index order as BOX-1 is 2 and BOX-2 is 1.
Sass (Syntactically Awesome Style Sheets) is a powerful CSS preprocessor scripting language that
div { helps you to work on your style sheet much faster than ever. Sass allows you to use features such as
width:100px; variables, nestings, modules, etc. that don’t exist in CSS. Apart from Sass, there are two other
important CSS extensions – Stylus & LESS (Leaner Style Sheets).
height:100px;

} Also, with the help of Sass, you can improve DRY (Don’t Repeat Yourself) CSS and make your

div.box1 { code more readable. Additionally, it is also totally compatible with all versions of CSS. Once you
get familiar with Sass, you will feel more comfortable and easy to handle large scale projects. To

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2 MC4023 WEB DESIGN Unit - 2

$red: #FF0000
play around with Sass CSS preprocessor, you have to create a separate style sheet with the $margin: 10px
extensions “.scss” or “.sass”. You can then compile it into a normal CSS file. Your browser will
.content-navigation
read only the finally compiled CSS file to style your website/web application. border-color: $red
color: darken($red, 9%)

.border
padding: $margin / 2
margin: $margin / 2
border-color: $red
SCSS

Benefits of Using Sass CSS Preprocessor: $red: #FF0000;

Below are some of the benefits of using Sass. $margin: 10px;

.content-navigation {
1. Requires Minimal Coding – Comparatively, Sass requires very few codes and help the border-color: $red;
color: darken($red, 9%);
developers to write CSS quickly.
}
2. Rapid Code Compilation – Unlike other preprocessors, you can easily compile your code
.border {
using Sass command.
padding: $margin / 2; margin: $margin / 2; border-color: $red;
3. Bigger Developer Community – Sass has a massive ecosystem with a huge number of
}
active developers.
CSS
4. Powerful Frameworks – Sass uses Compass for mixins, which contains almost all possible
.content-navigation {
options, including updates for future support. border-color: #FF0000;
color: #d10000;
Types of Sass Syntaxes: }
Sass can be written in two ways .scss and .sass. Both have their unique syntaxes.
.border {
padding: 5px;
margin: 5px;
border-color: #FF0000;
 SCSS (New): SCSS is commonly called as Sassy CSS. You can save it with .scss extension. }
It is a superset of CSS, which means it contains all the features that CSS holds. Also, you
How to Use Sass Features Effectively
can easily adapt yourself to SCSS if you are familiar with the basics of CSS.
As we now know what Sass CSS preprocessor is and it’s the syntax, let’s see various Sass features that
 Indented Syntax (Old): Indented Syntax can be implemented on style sheet with the .sass make it so robust.
extension. When compared to .scss, the indented syntax has a wider audience because it
 Variables
helps you to write code quickly and concisely. Indented syntax use indentation to describe
the format of the document; whereas, .scss uses curly brackets and semicolons. Below is an
Sass enables you to use variables to store values, and you can use it wherever you need it. For instance, you
example of an indented syntax:
can store a specific color in a variable at the top of your style sheet, and call the respective variable wherever
Indented you want to apply that color.

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN Unit - 2

 Nesting

Using the nesting method, you can reduce the amount of code massively. The nesting structure in Sass is
somewhat similar to HTML. Both technologies follow the same visual hierarchy. But, keep in mind that
nesting will over-qualify your CSS if you didn’t execute properly.

 Partials

It is one of the most powerful Sass features. Partials are more like a portable style sheet that can be linked to UNIT III WEB PAGE Layouts WITH CSS3
any other style sheet, and you can use it in another CSS file. It helps you to make your code transportable
and maintain it easily. Remember, the partials file name should start with an underscore: _example.scss.
You will get a clear picture of the partials below. web design (Anna University)

 Modules

As discussed in the previous section, you can use some other sass files in your current sass file using @use
rule. It lets you incorporate multiple .sass files into your project file. Also, keep in mind that each import
will generate a new HTTP request. Too many HTTP requests will result in the slow down of your website.
Scan to open on Studocu

 Mixins

The main reason for using preprocessors is it helps you convert the long-winded code into a concise one.
That’s exactly where mixins come in. For instance, while working on vendor prefix on CSS, you will be
spending more time than usual. Instead of using CSS, you can use the mixin feature from Sass to avoid
writing the code again and again.

 Extend/Inheritance

The @directive is usually called as the most powerful Sass features. You can use a group of CSS properties
from one selector to another using @directive. This implies that you don’t have to use multiple class names.
All you have to do is, write a set of CSS properties that will repeat in your program over and over and give it
a name. Then, wherever you want to apply those styles, include it using @directive.

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

UNIT III ADVANCED UI WITH CSS3  Order: Using Flexbox, you can rearrange the order of the contents of a web page.
Layouts with Flexbox –Responsive web design with media queries-Advanced CSS
Effects – Gradients, opacity, box-shadow-CSS3 Animations – Transforms and Transitions-  Wrap: In case of inconsistent space for the contents of a web page (in single line),
CSS Frameworks – Bootstrap you can wrap them to multiple lines (both horizontally) and vertically.

 Alignment: Using Flexbox, you can align the contents of the webpage with respect
to their container.
3.1.Layouts with Flexbox
According to the specification, the Flexbox model provides for an efficient way to  Resize: Using Flexbox, you can increase or decrease the size of the items in the
layout, align, and distribute space among elements within your document - even when the page to fit in available space.
viewport and the size of your elements is unknown and/or dynamic. Usage:

Cascading Style Sheets (CSS) is a simple design language intended to simplify the process
of making web pages presentable. CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are This property accepts two values –
used, layout designs, variations in display for different devices and screen sizes as well as a
 flex: Generates a block level flex container.
variety of other effects.
To determine the position and dimensions of the boxes, in CSS, you can use one of the  inline-flex: Generates an inline flex container box.
layout modes available –
Now, we will see how to use the display property with examples.
 The block layout: This mode is used in laying out documents.
 The inline layout: This mode is used in laying out text.
 The table layout: This mode is used in laying out tables.
Flex
 The positioned layout: This mode is used in positioning the elements.
On passing this value to the display property, a block level flex container will be created. It
All these modes are used to align specific elements like documents, text, tables, etc., occupies the full width of the parent container (browser).
however, none of these provides a complete solution to lay out complex websites. Initially
this is used to be done using a combination of floated elements, positioned elements, and The following example demonstrates how to create a block level flex container. Here, we
table layout (often). But floats only allow to horizontally position the boxes. are creating six boxes with different colors and we have used the flex container to hold
them.

WhatisFlexbox?

In addition to the above-mentioned modes, CSS3 provides another layout mode Flexible
Box, commonly called as Flexbox.
Using this mode, you can easily create layouts for complex applications and web pages.
Unlike floats, Flexbox layout gives complete control over the direction, alignment, order,
size of the boxes.

FeaturesofFlexbox

Following are the notable features of Flexbox layout:

 Direction: You can arrange the items on a web page in any direction such as left
to right, right to left, top to bottom, and bottom to top.

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 1 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 2

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

It will produce the following result –

Since we have given the value flex to the display property, the container uses the width of
the container (browser).
You can observe this by adding a border to the container as shown below.

<body>

Inlineflex

On passing this value to the display property, an inline level flex container will be created.
It just takes the place required for the content.
The following example demonstrates how to create an inline flex container. Here, we are
creating six boxes with different colors and we have used the inline-flex container to hold
them.

It will produce the following result –

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 3 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 4

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

color-index integer yes It specifies the number of entries in the

color lookup table.

device-aspect- integer/integer Yes It specifies the aspect ratio of the

ratio device.

device-height length Yes It specifies the height of the output

device.

device-width length Yes It specifies the width of the output

device.

Grid integer No It is true for a grid-based device.

Since we have used an inline flex container, it just took the space that is required to wrap its
elements. Height length Yes It specifies the height of the rendering
surface.
3.2 Responsive web design with Media Query
CSS Media query is a W3C recommendation and a CSS3 module which is used to adapt to monochrome integer Yes It specifies the number of bits per pixel
conditions such as screen resolution (e.g. Smartphone screen vs. computer screen). in a monochrome frame buffer.

o The media query technique first used in CSS3.

Resolution resolution ("dpi" or Yes It specifies the resolution of the display
o It became a W3C recommendation in June 2012. "dpcm") screen.
o It is an extension of media dependent stylesheets used in different media types (i.e.
screen and print) found in CSS2. Scan "progressive" or No It specifies scanning process of "tv"
o The most commonly used media feature is "width". "interlaced" media types.
o It uses the @media rule to include a block of CSS properties only if a certain
condition is true. Width length Yes It specifies the width of the rendering
surface.
Recommended Media features for Media queries

Following is a list of media features recommended for media queries by W3C.

What is Responsive Web Design?
Feature Value Min/Max Description
The term Responsive Web Design was given by Ethan Marcotte. It facilitates you to use fluid
grids, flexible images, and media queries to progressively enhance a web page for different viewing
Color integer Yes It specifies the number of bits per color contexts i.e. Desktop, Smartphone, Tablet etc.
component. What screen resolutions do you use while taking screenshots?

Smartphone: 320px Exception Handling in

Tablet: 768px
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 5 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 6

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

Netbook: 1024px OUTPUT:
Desktop: 1600px

Let's take an example to see the simple use of media query:

This example specifies that if you resize your window less than 500px, the background color
will be changed.

See this example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style
>body
{
background-color:yellow;
}

@media(max-width: 767px) {
body {
background-color:green;
}
} 3.3 Advanced CSS Effects:
@media(min-width: 768px) {
body { GRADIANTS:
background-color:red;
} CSS gradients let you display smooth transitions between two or more specified colors.
}
@media only screen and (min-width: 992px) { CSS defines three types of gradients:
body {
background-color:black;  Linear Gradients (goes down/up/left/right/diagonally)
}  Radial Gradients (defined by their center)
}
</style> CSS Linear Gradients
</head>
<body> To create a linear gradient you must define at least two color stops. Color stops are the colors
<p>If you resize the browser window and the width of this document is less than 500 pixels, you want to render smooth transitions among. You can also set a starting point and a
the background-color is "green", otherwise it is "yellow"</p> direction (or an angle) along with the gradient effect.
</body>
</html> Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Direction - Top to Bottom (this is default)

The following example shows a linear gradient that starts at the top. It starts red, transitioning
to yellow:

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 7 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 8

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

#grad { Using Angles

background-image: linear-gradient(red, yellow);
} If you want more control over the direction of the gradient, you can define an angle, instead
of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.). A value
of 0deg is equivalent to "to top". A value of 90deg is equivalent to "to right". A value of
180deg is equivalent to "to bottom".

Syntax
background-image: linear-gradient(angle, color-stop1, color-stop2);

Direction - Left to Right The following example shows how to use angles on linear gradients:

The following example shows a linear gradient that starts from the left. It starts red, Example
transitioning to yellow:
#grad {
#grad { background-image: linear-gradient(180deg, red, yellow);
background-image: linear-gradient(to right, red , yellow); }
}

Using Multiple Color Stops

Direction - Diagonal

You can make a gradient diagonally by specifying both the horizontal and vertical starting The following example shows a linear gradient (from top to bottom) with multiple color
positions. stops:

The following example shows a linear gradient that starts at top left (and goes to bottom Example
right). It starts red, transitioning to yellow: #grad {
background-image: linear-gradient(red, yellow, green);
Example
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 9 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 10

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

Repeating a linear-gradient The following example shows a radial gradient with differently spaced color stops:

The repeating-linear-gradient() function is used to repeat linear gradients: Example

#grad {
Example
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
A repeating linear gradient: }

#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default
CSS Radial Gradients value is ellipse.

A radial gradient is defined by its center. The following example shows a radial gradient with the shape of a circle:

To create a radial gradient you must also define at least two color stops. Example

Syntax #grad {
background-image: radial-gradient(circle, red, yellow, green);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
}
By default, shape is ellipse, size is farthest-corner, and position is center.

Radial Gradient - Evenly Spaced Color Stops (this is default)

The following example shows a radial gradient with evenly spaced color stops:

Example
#grad {
background-image: radial-gradient(red, yellow, green);
}

opacity :

The opacity property specifies the opacity/transparency of an element.

Radial Gradient - Differently Spaced Color Stops

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 11 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 12

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

Transparent Image The first CSS block is similar to the code in Example 1. In addition, we have added what
should happen when a user hovers over one of the images. In this case we want the image to
NOT be transparent when the user hovers over it. The CSS for this is opacity:1;.
The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:
When the mouse pointer moves away from the image, the image will be transparent again.

An example of reversed hover effect:

Example

<!DOCTYPE html>
<html>
<head>
Example
<style>
img { img:hover {
opacity: 0.5; opacity: 0.5;
} }
</style>
</head>
Transparent Hover Effect <body>

The opacity property is often used together with the :hover selector to change the opacity on <h1>Image Transparency</h1>
mouse-over: <p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>

Example <img src="img_forest.jpg" alt="Forest" width="170" height="100">

img { <img src="img_mountains.jpg" alt="Mountains" width="170" height="100">
opacity: 0.5;
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">
}
</body>

img:hover { </html>
opacity: 1.0;
OUTPUT:
}

Example explained

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 13 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 14

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

BOX SHADOWS: The blur parameter defines the blur radius. The higher the number, the more blurred the
shadow will be.
CSS box-shadow Property
Example
The CSS box-shadow property is used to apply one or more shadows to an element.
Add a blur effect to the shadow:
Specify a Horizontal and a Vertical Shadow
div {
In its simplest use, you only specify a horizontal and a vertical shadow. The default color of box-shadow: 10px 10px 5px grey;
the shadow is the current text-color. }

Example

Specify a horizontal and a vertical shadow:

div {
box-shadow: 10px 10px;
}
Set the inset Parameter

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

Example

Add the inset parameter:

div {
box-shadow: 10px 10px 5px grey inset;
}
Specify a Color for the Shadow

The color parameter defines the color of the shadow.

Example

Specify a color for the shadow:

div {
box-shadow: 10px 10px grey; Add Multiple Shadows
}
An element can also have multiple shadows:

Example
div {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Add a Blur Effect to the Shadow

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 15 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 16

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

animation-name: text;
animation-duration: 5s;
animation-iteration-count: infinite;
}

@keyframes text {
from {
margin-top: 400px;
}
to {
margin-top: 0px;
3.4 CSS Animation }
CSS Animations is a technique to change the appearance and behavior of various
}
elements in web pages. It is used to control the elements by changing their motions or
display. It has two parts, one which contains the CSS properties which describe the
animation of the elements and the other contains certain keyframes which indicate the
animation properties of the element and the specific time intervals at which those have to
occur. animation-timing-function: Specifies how the animation makes transitions through
The @keyframes rule: Keyframes are the foundations with the help of which CSS keyframes. It can have the following values:
Animations works. They define the display of the animation at the respective stages of its
whole duration. For example: In the following code, the paragraph changes its color with  ease: The animation starts slowly, then fast, and then finally ends slowly (this is the
time. At 0% completion, it is red, at 50% completion it is of orange color and at full default)
completion i.e. at 100%, it is brown.  linear: The animation plays with the same speed from start to end
 ease-in: The animation plays with a slow start
Example: This example describes the CSS Animation using the @keyframe rule.  ease-out: The animation plays with a slow end
 ease-in-out: The animation starts and ends slowly
@keyframes color { #one {
0% {
background-color: red; animation-timing-function: ease;
}
}
50% {
background-color: orange; #two {
} 100% animation-timing-function: linear;
{
}
background-color: brown;
}
#three {
}
animation-timing-function: ease-in;
}
Animation Properties: There are certain animation properties given below:
animation-name: It is used to specify the name of the @keyframes describing the
animation. #four {
animation-name: animation_name;
animation-timing-function: ease-out;
animation-duration: It is used to specify the time duration it takes animation to complete }
one cycle.
Example: This example describes the CSS Animation Properties using animation-duration
property. #five {
#gfg1 {
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 17 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 18

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

animation-timing-function: ease-in-out;
}
#two {
animation-direction: reverse;
@keyframes text { }
from {
margin-left: 60%; #three {
} animation-direction: alternate;
to { }
margin-left: 0%;
} #four {
} animation-direction: alternate-reverse;
animation-delay: It is used to specify the delay when the animation starts.
Example: This example describes the CSS Animation Properties using the animation-delay }
property. animation-play-state: This allows you to play/pause the animation.
#one { Animation Shorthand Property: It is a shorthand way of implying the animation
animation-name: example; properties for a quicker code. The properties should be in the following order animation:
animation-duration: 10s; [animation-name] [animation-duration] [animation-timing-function] [animation-delay]
} [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-
state];
#two {
animation-name: example;
animation-duration: 10s;
animation-delay: 10s; Transitions and transformation in CSS
} Transitions in CSS allows us to control the way in which transition takes place between
the two states of the element. For example, when on hoveringyour mouse over a button, you
@keyframes example { can change the background color of the element with help of CSS selector and pseudo-class.
from { We can change any other or combination of properties, though. Transition allows us to
background-color: orange; determine how the change in color takes place. We can use the transitions to animate the
} changes, and make the changes visually appealing to the user and hence, giving better user
to { experience and interactivity. In this article, we will show you how to animate the transition
background-color: white; between the CSS properties.
} There are four CSS properties which you should use, all or in part (at leasttwo,
} transition-property and transition-duration, is must), to animate the transition. All these
properties must be placed along with other CSS properties of the initial state of the
element:
animation-iteration-count: It is used to specify the number of times the animation will
repeat. It can specify as infinite to repeat the animation indefinitely. 1. transition-property: This property allows you to select the CSS properties
which you want to animate during transition(change). Syntax:
animation-direction: Specifies the direction of the animation. It can have the following transition-property: none | all | property | property1,property2, ..., propertyN;
values:
 normal: The animation is played forward. This is the default value. Values:
 reverse: The animation is played in the reverse direction i.e. backward.  none is used to specify that no property should be selected.
 alternate: The animation is played forwards first, and then backward.  all is used to specify all the properties to be selected, though not all properties are
 alternate-reverse: The animation is played backward first, and then forwards. animate-able, only the properties which are animate- able will be influenced.
#one {  We can specify a single property or a set of comma separated properties
property1, property2, …, propertyN.
animation-direction: normal; 2. transition-duration: This property allows you to determine how long it will take to
} complete the transition from one CSS property to the other. Syntax:

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 19 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 20

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

transition-duration: time; TRANSFORMATION:

Here, time can be in seconds(s) or milliseconds(ms), you should use‘s’ or ‘ms’
A transformation in CSS is used to modify an element by its shape, size and position. It
after the number (without quotes).
transforms the elements along the X-axis and Y-axis. There are 6 main types of
3. transition-timing-function: This property allows you to determine the speed of transformation which are listed below:
change and the manner of change, during the transition. Like,the change should be
fast at the beginning and slow at the end, etc. Syntax: translate()
transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|step- rotate()
start|step-end; scale()
Note, there are other values which this transition-timing-function can take,only the most skewX()
frequent and simple are mentioned here. skewY()
matrix()
4. transition-delay: This property allows you to determine the amount oftime to wait We will implement all these functions & will understand their conceptsthrough the
before the transition actually starts to take place.
examples.
Syntax:
transition-delay: time; translate() Method: The translate() method is used to move the elementfrom its actual
position along the X-axis and Y-axis.
Here, again, time can be in seconds(s) or milliseconds(ms), and youshould use ‘s’ or Example: This example describes the CSS translate() method to modify theposition of an
‘ms’ after the number (without quotes). element from its actual position.
The Shorthand Property You can combine all the four transition properties mentioned <style>
above, into one single shorthand property, according to the syntax given below. This saves .geeks {
us from writing long codes and prevents fromgetting messy. Note the ordering of property, font-size: 25px;
it has significance. margin: 20px 0;
Syntax: margin-left: 100px;
transition: (property name) | (duration) | (timing function) |(delay); }
The value is taken by are same as mentioned above. This property must be placed with
img {
other CSS properties, if any, of the initial state. You should use at least, property name
border: 1px solid black;
and duration to get any animate-able effect. Also, the ordering of the values matters. The
transition-duration: 2s;
first value is of the property name, second for the duration and so on, as listed above. So, if -webkit-transition-duration: 2s;
only one number ismentioned, it will be taken up as duration, and not as a delay. }
Example: Changing property using transitions.
img:hover {
<style> transform: translate(100px, 100px);
h1{ /* prefix for IE 9 */
color: green;
text-align: center; -ms-transform: translate(100px, 100px);
}
div.one{
height: 150px; /* prefix for Safari and Chrome */
-webkit-transform: translate(100px, 100px);
width: 150px; }
border: 1px dashed black; </style>
margin: 0 auto; background:
#FFEBEE; rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise
transition: height 2s, width 2s, background 2s; according to a given degree. The degree is given in the parenthesis.
} Example: This example describes the CSS rotate() method to rotate an element clockwise or
div.one:hover{ counterclockwise.
height: 300px;
<style>
width: 300px; img {
background: #BBDEFB; border: 1px solid black;
} }
</style>

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 21 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 22

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

img:hover {
/* IE 9 */
/* IE 9 */ -ms-transform: skew(20deg, 10deg);
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: skew(20deg, 10deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */ transform:
/* Standard syntax */ skew(20deg, 10deg);
transform: rotate(20deg); }
}
.geeks {
font-size: 25px; text-
.geeks { align: center;margin-
font-size: 25px; text- top: 100px;
align: center;margin- }
top: 100px; </style>
}
</style> 3.5. CSS Frameworks: Bootstrap
scale() Method: It is used to increase or decrease the size of an elementaccording to
In essence, a CSS framework comprises several CSS stylesheets ready for use by web
the parameter given for the width and height.
Example: This example describes the CSS scale() method to resize theelement according to developers and designers. The stylesheets are prepped for use for standard web design
their width & height. functions: setting colors, layout, fonts, navbars, etc. Generally, stylesheets are supported and
<style>
img { expanded by other scripting technologies like SASS and JavaScript.
border: 1px solid black; With a CSS framework, the user has a completed CSS stylesheet, and they only have to code
}
the HTML with accurate classes, structure, and IDs to set up a web page. The framework
img:hover { already has classes built-in for common website elements – footer, slider, navigation bar,
/* IE 9 */
-ms-transform: scale(1, 2); hamburger menu, column-based layouts, etc.
/* Safari */
-webkit-transform: scale(1, 1);
/* Standard syntax */
transform: scale(1, 2); Advantages of using CSS Frameworks
}
 Developers and designers can use CSS frameworks to implement various advanced features
.geeks {
font-size: 25px; text- and visual elements on a website – forms, different buttons, navbars, breadcrumbs, even
align: center;margin- clean symmetrical layouts.
top: 100px;
}  CSS frameworks make it simple to create websites compatible with multiple browsers and
</style> browser versions. This reduces the likelihood of bugs popping up during cross browser
skew() Method: This method skews an element in the given angle along the X-axis and the testing.
Y-axis. The following example skews the element 20 degrees along the X-axis and 10  Since these frameworks have ready-to-use stylesheets in place, using them allows faster and
degrees along the Y-axis. more convenient web development. Users don’t have to dive deep into CSS code to
Example: This example describes the CSS skew() method to skew an element in the given
angle along the X-axis and the Y-axis. accomplish required tasks.
<style>  Developers can quickly generate a user-friendly and visually appealing UI that can be
img {
border: 1px solid black; modified throughout a project without starting from scratch.
}

img:hover {

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 23 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 24

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC 4023 – WEB DESIGN UNIT-III MC 4023 – WEB DESIGN UNIT-III

CSS Frameworks for Website Developers and Designers <!DOCTYPE html>

<html lang="en">
1. Bootstrap <head>
Developed by Jacob Thornton and Mark Otto at Twitter as a framework to promote <meta charset="utf-8">
</head>
consistency across internal tools, Bootstrap is an open-source framework containing CSS and
</html>
JavaScript-based templates for interface components.
2. Bootstrap 3 is mobile-first
Bootstrap is known for popularizing the focus on responsive design among web developers. It
promoted the now-ubiquitous concept of mobile-first and provided the right tools for its easy Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part
implementation. It did so by introducing a grid – partitioning the screen into columns (invisible to of the core framework.
the end user’s eye).
To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
With Bootstrap, developers don’t have to build separate projects around adjusting a site for
smaller screen sizes. They just need to incorporate the necessary Bootstrap classes, and the <meta name="viewport" content="width=device-width, initial-scale=1">
design adjusts itself.
The width=device-width part sets the width of the page to follow the screen-width of the
device (which will vary depending on the device).
Why Choose Bootstrap?
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the
browser.
 Massive Ecosystem: Among front-end frameworks, Bootstrap’s ecosystem is unmatched. It
offers, out of the box, a vast library of layouts, themes, UI elements, panels, modals, buttons, 3. Containers

alerts, cards, etc., that devs and designers can choose from and implement. Additionally, Bootstrap also requires a containing element to wrap site contents.
Bootstrap is backed by best-in-industry community support.
There are two container classes to choose from:
 Accelerated prototyping: When using Bootstrap, designers can just write out their HTML
code, include the relevant CSS classes, and achieve website responsiveness. They don’t have 1. The .container class provides a responsive fixed width container
to spend time adjusting for browser incompatibility, CSS positioning, and the like. 2. The .container-fluid class provides a full width container, spanning the
 Twitter Support: Unsurprisingly, when a significant commercial player backs an open- entire width of the viewport
source project, users can be assured that it is here to stay and carries high confidence among
people who know the industry. The fact that Bootstrap grew out of, and is backed by Twitter,
establishes its efficacy.
 Supports SASS and LESS: Although most developers don’t use LESS, significant projects
rely on it. Obviously, SASS support is also highly desirable. Not too many CSS frameworks
other than Bootstrap support both.

Create First Web Page With Bootstrap

1. Add the HTML5 doctype

Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype.

Always include the HTML5 doctype at the beginning of the page, along with the lang
attribute and the correct character set:
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 25 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 26

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV

UNIT IV JAVA SCRIPT

JavaScript Events - Modifying CSS of elements using JavaScript- Javascript
ClassesIntroduction to JQuery – JQuery Selectors - Using JQuery to add interactivity - JQuery
EventsModifying CSS with JQuery -Adding and removing elements with JQuery-AJAX with
JQueryAnimations with JQuery (hide, show, animate, fade methods, Slide Method)
4.1 What is an Event ?
JavaScript Events

The change in the state of an object is known as an Event. In html, there are various events which
represents that some activity is performed by the user or by the browser. When javascript
UNIT IV JAVA Script - mc4023 web design lecture notes
code is included in HTML
, js react over these events and allow the execution. This process of reacting over the events is
called Event Handling. Thus, js handles the HTML events via Event Handlers.
web design (Anna University) For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event.

Some of the HTML events and their event handlers are:

Mouse events:
Event Event Description
Performed Handler
Scan to open on Studocu
Click onclick When mouse click on an element

Mouseover onmouseover When the cursor of the mouse comes over the element

Mouseout onmouseout When the cursor of the mouse leaves an element

Mousedown onmousedown When the mouse button is pressed over the element

Mouseup onmouseup When the mouse button is released over the element

Mousemove onmousemove When the mouse movement takes place.

Keyboard events:
Event Event Handler Description
Performed

Keydown & onkeydown & When the user press and then release the key
Keyup onkeyup
Form events:

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 1

Studocu is not sponsored or endorsed by any college or university

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

Event Event Description Output:

Performed Handler

Focus onfocus When the user focuses on an element

Submit onsubmit When the user submits the form

Blur onblur When the focus is away from a form element

Change onchange When the user modifies or changes the value of a form element
Window/Document events
Event Event Description
Performed Handler

Load onload When the browser finishes the loading of the page
MouseOver Event
Unload onunload When the visitor leaves the current webpage, the browser
unloads it <html>
Resize onresize When the visitor resizes the window of the browser <head>
<h1> Javascript Events </h1>
Click Event </head>
<body>
<html> <script language="Javascript" type="text/Javascript">
<head> Javascript Events </head> <!--
<body> function mouseoverevent()
<script language="Javascript" type="text/Javascript"> {
<!-- alert("This is JavaTpoint");
function clickevent() }
{ //-->
document.write("This is JavaTpoint"); </script>
} <p onmouseover="mouseoverevent()"> Keep cursor over me</p>
//--> </body>
</script> </html>
<form> Output:
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 2 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 3

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

// The "margin" property in external CSS and Javascript CSS.

margin: 0px;
document.body.style.margin = "0px";

// The "background color" property in external CSS and Javascript CSS.

background-color: white;
4.2.Modifying CSS of elements using JavaScript
document.body.style.backgroundColor = "white";
Javascript CSS with the Element Style Property
Every HTML element in the Javascript DOM contains a Javascript object property called style. Changing Javascript CSS with Events
Changes to Javascript CSS do not happen on their own; they happen in response to the user interacting
The style object contains many properties that correspond to CSS properties, so you can set properties
with a web page. Every interaction a user makes with a web page is called an “event,” and Javascript
on the style object to change element CSS styles directly.
reacts to these events with structures called event listeners.
The style object property names are consistent with basic CSS properties. For example, the Javascript
A common place to find Javascript CSS is in an event listener that activates when a button is clicked,
CSS property to set an element’s foreground color is exactly the same as its usual CSS property:
opening a collapsed section of a web page. In this example, an event listener is added to a button, and
the listener checks the display status of the HTML element with ID “myDiv” when the button is
color: black; // CSS
clicked. If the “myDiv” element is hidden, it’s set to display after a button click, and vice versa.
document.body.style.color = "black" // Javascript CSS let button = document.createElement('button');

All CSS properties are accessible directly through the style object; there is no need to wade through
sub-objects to find the CSS property you want to change. Since there are no sub-objects some CSS button.addEventListener('click', event => {
property names get a little long in Javascript, like backgroundColor, but the simplicity of accessing
everything directly from the style object usually outweighs the occasional cumbersome property let myDiv = document.getElementById("myDiv");
length. if (myDiv.style.display === "none") {
In the following example, the backgroundColor property in the first line is used in camel case
as a property of the style object. The second line attempts to create a background color property document.getElementById("myDiv").style.display = "block";
incorrectly, with color as a sub-property of the style property “background”. There is no camel case in } else {
the second line, but developers would be required to remember a complex property hierarchy if
Javascript CSS specified all properties this way. document.getElementById("myDiv").style.display = "none";
}
document.body.style.backgroundColor = "black"; // correct
});
document.body.style.background.color = "black"; // wrong
Javascript CSS uses the style property to modify HTML element styles. Although it functions
Since the Javascript standard and the CSS standard are managed by different organizations, there is in essentially the same way as external CSS files, Javascript CSS requires slightly different syntax.
always some lag between the most recent additions to the CSS standard and the ability to change those These syntax differences can be confusing for careless developers.
properties with Javascript CSS. The lag has lessened in recent years because the Javascript standard is Setting CSS properties through Javascript is technically a violation of the traditional programming
now updated yearly. axiom that the styling portion of a project should be kept separate from its structure and scripts. CSS
Javascript CSS Versus External CSS deals with visual styling, so incorporating it into Javascript code muddles these boundaries.
Javascript CSS looks slightly different from external CSS because Javascript has different linguistic Many developers find it harder to maintain Javascript CSS compared to external CSS files. Use
conventions than pure CSS. Many properties in external CSS files include hyphens in their names, and Javascript CSS with care, and take steps to make sure it is clear for future developers.
Javascript does not allow hyphens in its property names. Enroll in our Intro to Programming Nanodegree Program today to learn more about Javascript CSS and
Javascript CSS removes hyphens from CSS property names and identifies words using camel case. other programming concepts.
Using camel case means that CSS properties which are only a single word look identical in external
CSS files compared to Javascript CSS, while those properties with multiple words look different. 4.3. Classes In JavaScript

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 4 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 5

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

The new version of JavaScript (ES6) introduced the use of classes instead of functions. Prior to
ES6, there were only classes and, functions which are callable objects. A class in javascript is basically a
blueprint or template of the object. New objects can be created from a class. </script>

Output:
APEC:MCA

4.4. Introduction to jquery:

jQuery is an open source JavaScript library that simplifies the interactions between an
HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript.
Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event
handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.

Class In JavaScript
jQuery is widely famous with its philosophy of “Write less, do more.” This philosophy can be
further elaborated as three concepts:
Classes are similar to functions. Here, a class keyword is used instead of a function keyword. Unlike  Finding some elements (via CSS selectors) and doing something with them (via jQuery methods)
functions classes in JavaScript are not hoisted. The constructor method is used to initialize. The class i.e. locate a set of elements in the DOM, and then do something with that set of elements.
name is user-defined.  Chaining multiple jQuery methods on a set of elements
Syntax:  Using the jQuery wrapper and implicit iteration
class classname { Using jQuery (JS) library on HTML page
constructor(parameter) { There are several ways to start using jQuery on your web site.
this.classname = parameter; 1. Use the Google-hosted/ Microsoft-hosted content delivery network (CDN) to include a version of
} jQuery.
} 2. Download own version of jQuery from jQuery.com and host it on own server or local filesystem.
Example: The below example illustrates the JavaScript classes.
Javascript Basic syntax for any jQuery function is:
$(selector).action()
 A $ sign is to define/access jQuery
<script>  A (selector) is to “query (or find)” HTML elements in html page
 A jQuery action() is the action to be performed on the selected element(s)
class emp { Example:

<!DOCTYPE html>
constructor(college, department) { <html>
<head>
this.name = college; <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
this.age = Department;
<script>
}
$(document).ready(function () {
}
$("h2").click(function () {
const emp1 = new emp("APEC", "MCA");
$(this).hover();
document.write(emp1.college);
});
document.write(":");
});
document.write(emp1.department);
</script>
</head>

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 6 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 7

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

<h2>This is Web Technology section </h2>

<body> <br/>
<center> <button>Hide</button>
<h2 style="color: green;"> <script type="text/javascript">
GeeksforGeeks $("button").click(function() {
</h2> $("h1").hide();
</center> });
</body> </script>
</html> </body>
</html>
Advantages:
 Wide range of plug-ins. jQuery allows developers to create plug-ins on top of the JavaScript
Output:
library.
Before clicking on Hide button:
 Large development community
 It has a good and comprehensive documentation
 It is a lot more easy to use compared to standard javascript and other javascript libraries.
 JQuery lets users develop Ajax templates with ease, Ajax enables a sleeker interface where actions
can be performed on pages without requiring the entire page to be reloaded.
 Being Light weight and a powerful chaining capabilities makes jQuery more strong.

Disadvantages:
 While JQuery has an impressive library in terms of quantity, depending on how much
customization you require on your website, the functionality may be limited thus using raw
javascript may be inevitable in some cases.
 The JQuery javascript file is required to run JQuery commands, while the size of this file is
relatively small (25-100KB depending on the server), it is still a strain on the client computer and After clicking on Hide button:
maybe your web server as well if you intend to host the JQuery script on your own web server.

4.5. JQuery selectors:

jQuery selectors are used to select the HTML element(s) and allows you to
manipulate the HTML element(s) in a way we want. It selects the HTML elements on a Id Selector :
variable parameter such as their name, classes, id, types, attributes, attribute values, etc. All The id selector selects the element on the basis of its id.
selectors in jQuery are selected using a special sign i.e. dollar sign and parentheses: Example :
In this example, when the user double clicks on button, the element with id = “gfg”
Elements Selector : getshidden.
The elements selector selects the element on the basis of its name. Code:-
Example :
In this example, when the user clicks on button, the <h1> element gets hidden.
Code :- <!DOCTYPE html>
<!DOCTYPE html> <html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <head>
</script>
</head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<body> </script>
<h1>Welcome to Geeks for Geeks !</h1>

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 8 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 9

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

</head> <html>
<body>
<p id="gfg">Welcome to Geeks for Geeks !</p> <head>
<p id="GFG">Computer Science Portal </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<br/> </head>
<button>Hide</button>
<script type="text/javascript"> <body>
<p class="gfg">Welcome to Geeks for Geeks !</p>
$("button").dblclick(function() { <p class="GFG">Explore More about GfG </p>
$("#gfg").hide(); <br/>
<button>Hide</button>
}); <script type="text/javascript">
$("button").click(function() {
</script> $(".GFG").hide();
</body> });
</script>
</html> </body>
</html>
Output:
Before double clicking on Hide button: Output:
Before clicking on Hide button:

After double clicking on Hide button:

After clicking on Hide button:

Class Selector :
The class selector selects the element on the basis of its class. 4.7.JQuery Events
Example :
In this example, when the user clicks on button, the element with class = “GFG” gets Event refers to the actions performed by the site visitor during their
hidden. interactivitywith the website (or webpage).There can be various types of events
Code :- such as
1. User clicks on the button.
<!DOCTYPE html> 2. User moves mouse pointer over an image.

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 10 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 11

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

3. User pressed any key from keyboard, etc. To return the value of a specified CSS property, use the following syntax:
Some of the events methods are given
css("propertyname");
Method Name Description
The following example will return the background-color value of the FIRST matched element:
The click() method contains an function for event handling which
gets invoked when the user clicks on the particular HTML Example
Click() element.
$("p").css("background-color");
The dblclick() method contains an function for event handling
which gets invoked when the user double clicks on the particular
dblclick() HTML element.

The mouseenter() method contains an function for event handling

which gets invoked when mouse pointer enters the particular
mouseenter() HTML element.

The mouseleave() method contains an function for event handling

which gets invoked when mouse pointer is removed from the
mouseleave() particular HTML element which was selected earlier.
Set a CSS Property
The mousedown() method contains an function for event handling
which gets invoked when mouse left, right or middle button is To set a specified CSS property, use the following syntax:
mousedown() pressed while the mouse pointer is over the HTML element.
css("propertyname","value");
The mouseup() method contains an function for event handling
The following example will set the background-color value for ALL matched elements:
which gets invoked when mouse left, right or middle button is
mouseup() released while the mouse pointer is over the HTML element.
Example
$("p").css("background-color", "yellow");
4.8.Modifying CSS with JQuery
It is possible to change the CSS property of an element by using a simple JavaScript
API,but we try to complete this challenge using jQuery css() method.
Syntax:
$().css(propertyname, value);
$().css(properties);

jQuery css() Method

The css() method sets or returns one or more style properties for the selected elements.
Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

Return a CSS Property
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 12 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 13

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

css({"propertyname":"value","propertyname":"value",...});

The following example will set a background-color and a font-size for ALL matched elements:

Example
$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML
elements.

Example
4.9. Adding and removing elements with JQuery $("p").prepend("Some prepended text.");
Adding elements with JQuery

We will look at four jQuery methods that are used to add new content:
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

jQuery append() Method

The jQuery append() method inserts content AT THE END of the selected HTML elements.
Add Several New Elements With append() and prepend()
Example In both examples above, we have only inserted some text/HTML at the beginning/end of the
$("p").append("Some appended text”); selected HTML elements.

However, both the append() and prepend() methods can take an infinite number of new
elements as parameters. The new elements can be generated with text/HTML (like we have
done in the examples above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with
text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with
the append() method (this would have worked for prepend() too) :

Example

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 14 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 15

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

function appendText() { $("#div1").remove();

var txt1 = "<p>Text.</p>"; // Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("img").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() and before() Methods

The jQuery after() method inserts content AFTER the selected HTML elements.

The jQuery before() method inserts content BEFORE the selected HTML elements.

Example After button pressing…..

$("img").after("Some text after");

$("img").before("Some text before");

jQuery empty() Method

The jQuery empty() method removes the child elements of the selected element(s).

Example
Removing elements with JQuery
$("#div1").empty();
Remove Elements/Content

To remove elements and content, there are mainly two jQuery methods:

remove() - Removes the selected element (and its child elements)

empty() - Removes the child elements from the selected element

jQuery remove() Method

The jQuery remove() method removes the selected element(s) and its child elements.

Example After pressing button……

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 16 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 17

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

The optional callback parameter is the name of a function to be executed after

the load() method is completed.

Here is the content of our example file: "demo_test.txt":

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
4.10. AJAX with JQuery

AJAX is the art of exchanging data with a server, and updating parts of a web page - without
reloading the whole page.
What is AJAX?

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the webpage,
without reloading the whole page.

Examples of applications using AJAX: Gmail, Google Maps, Youtube, and Facebook tabs. After pressing button…..

What About jQuery and AJAX?

jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote
server using both HTTP Get and HTTP Post - And you can load the external data directly
into the selected HTML elements of your web page!

jQuery - AJAX load() Method

jQuery load() Method The following example loads the content of the file "demo_test.txt" into a
specific <div> element:
The jQuery load() method is a simple, but powerful AJAX method.
Example
The load() method loads data from a server and puts the returned data into the selected
$("#div1").load("demo_test.txt");
element.
It is also possible to add a jQuery selector to the URL parameter.
Syntax:
The following example loads the content of the element with id="p1", inside the file
$(selector).load(URL,data,callback); "demo_test.txt", into a specific <div> element:

The required URL parameter specifies the URL you wish to load. Example
$("#div1").load("demo_test.txt #p1");
The optional data parameter specifies a set of querystring key/value pairs to send along with
the request.
The optional callback parameter specifies a callback function to run when the load() method
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 18 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 19

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

is completed. The callback function can have different parameters: The required URL parameter specifies the URL you wish to request.

responseTxt - contains the resulting content if the call succeeds The optional callback parameter is the name of a function to be executed if the request
statusTxt - contains the status of the call succeeds.
xhr - contains the XMLHttpRequest object
The following example uses the $.get() method to retrieve data from a file on the server:
The following example displays an alert box after the load() method completes. If
the load() method has succeeded, it displays "External content loaded successfully!", and if it Example
fails it displays an error message:
$("button").click(function(){
Example $.get("demo_test.asp", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
$("button").click(function(){
});
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
});
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});

jQuery - AJAX get() and post() Methods

The jQuery get() and post() methods are used to request data from the server with an HTTP
GET or POST request.
HTTP Request: GET vs. POST

Two commonly used methods for a request-response between a client and server are: GET
and POST. The first parameter of $.get() is the URL we wish to request ("demo_test.asp").

GET - Requests data from a specified resource The second parameter is a callback function. The first callback parameter holds the content of
POST - Submits data to be processed to a specified resource the page requested, and the second callback parameter holds the status of the request.

GET is basically used for just getting (retrieving) some data from the server. Note: The GET jQuery $.post() Method
method may return cached data.
The $.post() method requests data from the server using an HTTP POST request.
POST can also be used to get some data from the server. However, the POST method
NEVER caches data, and is often used to send data along with the request. Syntax:

jQuery $.get() Method $.post(URL,data,callback);

The $.get() method requests data from the server with an HTTP GET request.
The required URL parameter specifies the URL you wish to request.
Syntax:
The optional data parameter specifies some data to send along with the request.
$.get(URL,callback);
The optional callback parameter is the name of a function to be executed if the request

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 20 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 21

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

succeeds. jQuery code to show the working of animate() method:

The following example uses the $.post() method to send some data along with the request: Code #1:

Example <html>
<head>
$("button").click(function(){ <script
$.post("demo_test_post.asp", src="https://ajax.googleapis.com/ajax/libs/
{ jquery/3.3.1/jquery.min.js"></script>
name: "Donald Duck", <script>
city: "Duckburg" <!-- jQuery code to show animate() method -->
}, $(document).ready(function() {
$("#b1").click(function() {
function(data, status){
$("#box").animate({
alert("Data: " + data + "\nStatus: " + status);
width: "300px"
}); });
}); $("#box").animate({
height: "300px"
The first parameter of $.post() is the URL we wish to request ("demo_test_post.asp"). });
});
Then we pass in some data to send along with the request (name and city). });
</script>
The ASP script in "demo_test_post.asp" reads the parameters, processes them, and returns a <style>
result. div {
width: 100px;
The third parameter is a callback function. The first callback parameter holds the content of height: 100px;
the page requested, and the second callback parameter holds the status of the request. background-color: green;
}
4.11. Animations with JQuery (hide, show, animate, fade methods, Slide Method)
#b1 {
margin-top: 10px;
}
jQuery | animate() </style>
</head>
The animate() is an inbuilt method in jQuery which is used to change the state of <body>
the element with CSS style. This method can also be used to change the CSS property to <div id="box"></div>
create the animated effect for the selected element. <!-- click on this button -->
Syntax: <button id="b1">Click Here !</button>
(selector).animate({styles}, para1, para2, para3); </body>
</html>
Here “selector” is the selected element.
Parameter: It accepts four parameters which are specified below- Output:
Styles: It helps to set new css property. Before clicking the “Click Here !” button-
para1: It is optional parameter and used to set the speed of the parameter and its
default value is 400 millisecond.
para2: It is optional and this specifies the speed of the element at different
position.
para3: It is optional function that is used to be perform after animation is
complete.
Return Value: It returns the change that made by using the above method.
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 22 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 23

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

After clicking the “Click Here !” button- $(selector).toggle(speed, callback);

The speed and callback parameters are same optional parameters as of the previous one.
Example :

jQuery hide() : Hides the Syntax or the element of html that you want to hide.
$(selector).hide(speed, callback);
jQuery show() : Shows the syntax or the element of html that you want the user to
see.
$(selector).show(speed, callback);
For both syntaxes above, The speed parameter is a optional parameter used for defining the
speed of hiding and showing of the content of html. Durations can be specified either using jQuery fadeIn() Method :
one of the predefined string ‘slow’ or ‘fast’, or in a number of milliseconds, for greater Syntax :
precision; higher values indicate slower animations. $(selector).fadeIn(speed, callback);
The callback parameter is optional parameter used after the hiding and the showing function
The fadeIn() function is used to show a hidden element in HTML. The optional
is completed.
parameter speed is used for controlling the speed of hiding the element and the
Example :
second optional parameter is used after the fading is completed.
Example :

The hide() method simply sets the inline style display:?none for the selected elements.
Conversely, the show() method restores the display properties of the matched set of elements
to whatever they initially were—typically block, inline, or inline-block—before the inline
style display:?none was applied to them.
Output : Output :

jQuery toggle() jQuery fadeOut() Method :

The jQuery toggle() method show or hide the elements in such a way that if the element is Syntax :
initially displayed, it will be hidden; if hidden, it will be displayed. $(selector).fadeOut(speed, callback);

Syntax : The fadeOut() function is used to fade out(hide) a element in HTML. The
optional parameter speed is used for controlling the speed of viewing the
Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 24 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 25

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

element and the second optional parameter is used after the fading out is width:100px;
completed.
Example : display:none;
color: green;
font-style: italic;
}
#f1 {
width:190px;
}
</style>
</head>
<body>
<h1 align="center">Silde Down Example</h1>
slideDown() :This method makes the element to slide down. <center>
Syntax:
<div id="f1">Slide down Effect</div>
$(selector).slideDown(speed,callback);
Example :In this example, we show the slide down effect .If the Slide Downpanel is clicked ,the <div id="p1">Welcome to GeeksForGeeks.</div>
corresponding change is made to the HTML element.
Code: </center>

<!DOCTYPE html> <script type="text/javascript">

<html> $("#f1").click(function(){

<head> $("#p1").slideDown("slow");

<script src="https://ajax.googleapis.com/ });

ajax/libs/jquery/3.3.1/jquery.min.js"></script> </script>

<style type="text/css"> </body>

#p1, #f1 { </html>

padding: 5px; Output:

Before the Down Effect
text-align: center;
background-color: white;
border: solid 2px green;
}
#p1 {
padding: 50px; After the Down Effect

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 26 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 27

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 WEB DESIGN UNIT -IV MC4023 WEB DESIGN UNIT -IV

<div id="f2">Slide up Effect</div>

<div id="p2">Welcome to GeeksForGeeks.</div>
</center>
<script type="text/javascript">
$("#f2").click(function(){
$("#p2").slideUp("slow");
});
</script>
</body>
</html>

Output:
Before the Up Effect
slideUp():This method makes the element to slide up.
Syntax:
$(selector).slideUp(speed,callback);
Example :In this example, we show the slide up effect .If the Slide Up panel is
clicked ,the corresponding change is made to the HTML element.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/3.3.1/jquery.min.js"></script
> After the Up Effect
<style
type="text/css">#p2,
#f2 {
padding: 5px;
text-align:
center;
background-color:
white;border: solid 2px
black;
}
#p2 {
padding: 50px;
width:100px;
color: green;
font-style: italic;
}
#f2 {
width:190px;
}
</style>
</head>
<body>
<h1 align="center">Slide Up Example</h1>
<center>

Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 28 Prepared By. E.Janakiraman.MCA,Mphil,. AP/MCA - APEC Page 29

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5

UNIT V SERVER-SIDE PROGRAMMING WITH PHP

PHP basic syntax-PHP Variables and basic data structures-Using PHP to manage form submissions-
File Handling -Cookies and Sessions with PHP-Working with WAMP and PHPMYADMIN-
Establishing connectivity with MySQL using PHP

PHP | Basic Syntax

The structure which defines PHP computer language is called PHP syntax.
The PHP script is executed on the server and the HTML result is sent to the browser. It can
normally have HTML and PHP tags. PHP or Hypertext Preprocessor is a widely used open-
source general-purpose scripting language and can be embedded with HTML. PHP files are
UNIT V PHP - mc4023 web design lecture notes saved with the “.php” extension. PHP scripts can be written anywhere in the document within
PHP tags along with normal HTML
Canonical PHP Tags: The script starts with <?php and ends with ?>. These tags are also
called ‘Canonical PHP tags’. Everything outside of a pair of opening and closing tags is
web design (Anna University) ignored by the PHP parser. The open and closing tags are called delimiters. Every PHP
command ends with a semi-colon (;). Let’s look at the hello world program in PHP.
Syntax:
<?php
# Here echo command is used to print
//stmt. Ends with semicolon;

Scan to open on Studocu echo "Hello, world!";

?>
OUTPUT:
Hello, world!
Comments in PHP:
Comments help in reminding the developer about the code if it’s re-visited after a
period of time.
A comment is something that is ignored and not read or executed by the PHP engine
or the language as part of a program and is written to make the code more readable and
understandable. These are used to help other users and developers to describe the code and
what it is trying to do. It can also be used in documenting a set of codes or parts of a
program. You must have noticed this in the above sample programs.
PHP supports two types of comment:

 Single Line Comment: As the name suggests these are single line or short
relevant explanations that one can add to their code. To add this, we need to
begin the line with (//) or (#).
 Multi-line or Multiple line Comment: These are used to accommodate multiple
lines with a single tag and can be extended to many lines as required by the user.
To add this, we need to begin and end the line with (/*…*/)

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 1

Studocu is not sponsored or endorsed by any college or university
Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])
 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

PHP is case-sensitive. All the keywords, functions, and class names in PHP (while, if, echo, same happens while conversion. No variables are declared before they are used. It
else, etc) are NOT case-sensitive except variables. Only variables with different cases are automatically converts types from one type to another whenever required.
treated differently.  PHP variables are case-sensitive, i.e., $sum and $SUM are treated differently.
Data types used by PHP to declare or construct variables:
EX:  Integers
<?php  Doubles
 NULL
// Here we can see that all echo  Strings
// statements are executed in the same manner  Booleans
 Arrays
 Objects
$variable = 25;  Resources
Example:
echo $variable;
ECHO $variable;  PHP
EcHo $variable;
<?php

// but this line will show RUNTIME ERROR as // These are all valid declarations
$val = 5;
// "Undefined Variable"
$val2 = 2;
echo $VARIABLE $x_Y = "gfg";
?> $_X = "GeeksforGeeks";

// This is an invalid declaration as it

PHP | Variables and data structure // begins with a number
$10_ val = 56;
Variables in a program are used to store some values or data that can be used later in a
program. The variables are also like containers that store character values, numeric values, // This is also invalid as it contains
memory addresses, and strings. PHP has its own way of declaring and storing variables. // special character other than _
There are few rules, that needs to be followed and facts that need to be kept in mind while $f.d = "num";
dealing with variables in PHP:
?>
 Any variables declared in PHP must begin with a dollar sign ($), followed by the
variable name.
 A variable can have long descriptive names (like $factorial, $even_nos) or short
names (like $n or $f or $x) Local variables: The variables declared within a function are called local variables to that
 A variable name can only contain alphanumeric characters and underscores (i.e., function and has its scope only in that particular function. In simple words, it cannot be
‘a-z’, ‘A-Z’, ‘0-9 and ‘_’) in their name. Even it cannot start with a number. accessed outside that function. Any declaration of a variable outside the function with same
 A constant is used as a variable for a simple value that cannot be changed. It is name as that of the one within the function is a complete different variable.
also case-sensitive.
 Assignment of variables is done with the assignment operator, “equal to (=)”. The Global variables: The variables declared outside a function are called global variables.
variable names are on the left of equal and the expression or values are to the right These variables can be accessed directly outside a function. To get access within a function
of the assignment operator ‘=’. we need to use the “global” keyword before the variable to refer to the global variable.
 One must keep in mind that variable names in PHP names must start with a letter
or underscore and no numbers.
 PHP is a loosely typed language, and we do not require to declare the data types
of variables, rather PHP assumes it automatically by analyzing the values. The

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 2 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 3

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

Using PHP to manage form submissions <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
What is Form? <body>
When you login into a website or into your mail box, you are interacting with a form.
<h2>Registration Form</h2>
Forms are used to get input from the user and submit it to the web server for processing.
<form action="registration_form.php" method="POST"> First name:
The diagram below illustrates the form handling process.
<input type="text" name="firstname"> <br> Last name:

<input type="text" name="lastname">

<input type="hidden" name="form_submitted" value="1" />

<input type="submit" value="Submit">

</form>
</body>
</html>

Viewing the above code in a web browser displays the following form.
A form is an HTML tag that contains graphical user interface items such as input box, check
boxes radio buttons etc.

The form is defined using the <form>…</form> tags and GUI items are defined using form
elements such as input.

When and why we are using forms?

 Forms come in handy when developing flexible and dynamic applications that accept
user input.
HERE,
 Forms can be used to edit already existing data from the database
 <form…>…</form> are the opening and closing form tags
 action=”registration_form.php” method=”POST”> specifies the destination URL and
Create a form the submission type.
We will use HTML tags to create a form. Below is the minimal list of things you need to  First/Last name: are labels for the input boxes
create a form.  <input type=”text”…> are input box tags
 <br> is the new line tag
 Opening and closing form tags <form>…</form>  <input type=”hidden” name=”form_submitted” value=”1″/> is a hidden value that is
 Form submission type POST or GET used to check whether the form has been submitted or not
 Submission URL that will process the submitted data  <input type=”submit” value=”Submit”> is the button that when clicked submits the
 Input fields such as input boxes, text areas, buttons,checkboxes etc. form to the server for processing

<html>
<head>
<title>Registration Form</title>

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 4 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 5

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

Submitting the form data to the server

The action attribute of the form specifies the submission URL that processes the data. The
method attribute specifies the submission type. GET vs POST Methods
POST GET
PHP POST method
1.Values not visible in the URL Values visible in the URL
 This is the built in PHP super global array variable that is used to get values submitted
via HTTP POST method. 2. Has not limitation of the length of the Has limitation on the length of the values usually 255
 The array variable can be accessed from any script in the program; it has a global values since they are submitted via the characters. This is because the values are displayed in
scope. body of HTTP the URL. Note the upper limit of the characters is
 This method is ideal when you do not want to display the form post values in the dependent on the browser.
URL.
 A good example of using post method is when submitting login details to the server. 3. Has lower performance compared to Has high performance compared to POST method
Php_GET method due to time spent dues to the simple nature of appending the values in
It has the following syntax. encapsulation the Php_POST values in the URL.
the HTTP body
<?php
$_POST['variable_name']; 4. Supports many different data types Supports only string data types because the values are
?> such as string, numeric, binary etc. displayed in the URL
HERE,
5. Results cannot be book marked Results can be book marked due to the visibility of
 “$_POST[…]” is the PHP array the values in the URL
 “’variable_name’” is the URL variable name.

PHP GET method The below diagram shows the difference between get and post

 This is the built in PHP super global array variable that is used to get values submitted
via HTTP GET method.
 The array variable can be accessed from any script in the program; it has a global
scope.
 This method displays the form values in the URL.
 It’s ideal for search engine forms as it allows the users to book mark the results.

It has the following syntax.

 <?php
 $_GET['variable_name'];
 ?>
HERE,

 “$_GET[…]” is the PHP array

 “’variable_name’” is the URL variable name.

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 6 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 7

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

$filedata = fread( $file, $size );

?>

3) fwrite() – New file can be created or text can be appended to an existing file using
fwrite() function. Arguments for fwrite() function are file pointer and text that is to written
to file. It can contain optional third argument where length of text to written is specified,
e.g.,

<?php
$file = fopen("demo.txt", 'w');
$text = "Hello world\n";
PHP | Basics of File Handling fwrite($file, $text);
File handling is needed for any application. For some tasks to be done file needs to
?>
be processed. File handling in PHP is similar as file handling is done by using any
programming language like C. PHP has many functions to work with normal files. Those 4) fclose() – file is closed using fclose() function. Its argument is file which needs to be
functions are: closed, e.g.,
1) fopen() – PHP fopen() function is used to open a file. First parameter of fopen() contains
<?php
name of the file which is to be opened and second parameter tells about mode in which file
$file = fopen("demo.txt", 'r');
needs to be opened, e.g.,
//some code to be executed
Ex:
fclose($file);
<?php ?>

PHP Cookies
$file = fopen(“demo.txt”,'w');
A cookie in PHP is a small file with a maximum size of 4KB that the web server stores on the
client computer. They are typically used to keep track of information such as a username that the site can
?> retrieve to personalize the page when the user visits the website next time. A cookie can only be read
from the domain that it has been issued from. Cookies are usually set in an HTTP header but JavaScript
Files can be opened in any of the following modes : can also set a cookie directly on a browser.
 “w” – Opens a file for write only. If file not exist then new file is created and if Setting Cookie In PHP: To set a cookie in PHP, the setcookie() function is used. The setcookie()
file already exists then contents of file is erased. function needs to be called prior to any output generated by the script otherwise the cookie will not be
 “r” – File is opened for read only. set.
 “a” – File is opened for write only. File pointer points to end of file. Existing Syntax:
data in file is preserved. setcookie(name, value, expire, path, domain, security);
 “w+” – Opens file for read and write. If file not exist then new file is created and
Parameters: The setcookie() function requires six arguments in general which are:
if file already exists then contents of file is erased.
 “r+” – File is opened for read/write.  Name: It is used to set the name of the cookie.
 “a+” – File is opened for write/read. File pointer points to end of file. Existing  Value: It is used to set the value of the cookie.
data in file is preserved. If file is not there then new file is created.  Expire: It is used to set the expiry timestamp of the cookie after which the cookie can’t be
 “x” – New file is created for write only. accessed.
2) fread() –– After file is opened using fopen() the contents of data are read using fread().  Path: It is used to specify the path on the server for which the cookie will be available.
It takes two arguments. One is file pointer and another is file size in bytes, e.g.,  Domain: It is used to specify the domain for which the cookie is available.

 Security: It is used to indicate that the cookie should be sent only if a secure HTTPS
connection exists.
<?php
Below are some operations that can be performed on Cookies in PHP:
$filename = "demo.txt";
$file = fopen( $filename, 'r' ); Creating Cookies: Creating a cookie named Auction_Item and assigning the value Luxury
$size = filesize( $filename ); Car to it. The cookie will expire after 2 days(2 days * 24 hours * 60 mins * 60 seconds).
Example: This example describes the creation of the cookie in PHP.

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 8 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 9

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

<!DOCTYPE html> to easily modify the content of the cookie.Addition of harmful data by the attackers in the
<?php cookie may result in the breakdown of the application.
setcookie("Auction_Item", "Luxury Car", time() + 2 * 24 * 60 * 60);
?>
<html> Apart from that cookies affect the performance of a site since cookies send the user data each
<body> time the user views a page.Every time the browser requests a URL to the server, all the cookie
<?php data for that website is automatically sent to the server within the request.
echo "cookie is created."
?> Below are different steps involved in PHP sessions:
<p>
 Starting a PHP Session: The first step is to start up a session. After a session is
<strong>Note:</strong>
started, session variables can be created to store information. The
You might have to reload the
PHP session_start() function is used to begin a new session.It als creates a new
page to see the value of the cookie. session ID for the user.
</p> Below is the PHP code to start a new session:

</body>
<?php
</html>

Note: Only the name argument in the setcookie() function is mandatory. To skip an session_start();
argument, the argument can be replaced by an empty string(“”).
Output: ?>

 Storing Session Data: Session data in key-value pairs using

the $_SESSION[] superglobal array.The stored data can be accessed during
lifetime of a session.
Below is the PHP code to store a session with two session variables Rollnumber
and Name:

Deleting Cookies: The setcookie() function can be used to delete a cookie. For deleting a
<?php
cookie, the setcookie() function is called by passing the cookie name and other arguments
or empty strings but however this time, the expiration date is required to be set in the past.
session_start();
To delete a cookie named “Auction_Item”, the following code can be executed.

PHP | Sessions $_SESSION["Rollnumber"] = "11";

What is a session? $_SESSION["Name"] = "Ajay";
In general, session refers to a frame of communication between two medium. A PHP session
is used to store data on a server rather than the computer of the user. Session identifiers or SID ?>
is a unique number which is used to identify every user in a session based environment. The
 Accessing Session Data: Data stored in sessions can be easily accessed by
SID is used to link the user with his information on the server like posts, emails etc
firstly calling session_start() and then by passing the corresponding key to
Although cookies are also used for storing user related data, they have serious security the $_SESSION associative array.
issues because cookies are stored on the user’s computer and thus they are open to attackers The PHP code to access a session data with two session variables Rollnumber
and Name is shown below:

<?php

session_start();

echo 'The Name of the student is :' . $_SESSION["Name"] . '<br>';

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 10 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 11

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

How to run php files using wamp server?

echo 'The Roll number of the student is :' . $_SESSION["Rollnumber"] . '<br>';

?>

Output:
The Name of the student is :Ajay Let me explain today how to use the wamp server to run the PHP files. First of all download the Latest
wamp server from here:
The Roll number of the student is :11
http://www.wampserver.com/
Destroying Certain Session Data: To delete only a certain session data,the
and install the server.
unset feature can be used with the corresponding session variable in
the $_SESSION associative array. Step 2:
The PHP code to unset only the “Rollnumber” session variable from the associative session Run wamp server by this selction
array: start->All programs->Wamp server->Start wamp server

<?php

session_start();

if(isset($_SESSION["Name"])){
unset($_SESSION["Rollnumber"]);
Now you can see the w icon in system tray.
}

?>
Step 3: Create PHP file
Let us create our php file first.
Open notepad and type the php code.
WORKING WITH WAMP save the file inside this folder
c://wamp/www/
What Is WAMP also you can create folder inside this folder to more specific.
WAMP is an acronym that stands for Windows, Apache, MySQL, and PHP. It’s a software

stack which means installing WAMP installs Apache, MySQL, and PHP on your operating system

(Windows in the case of WAMP). Even though you can install them separately, they are usually
bundled up, and for a good reason too.

PHP Server installation (Wamp Server)

As we already know that php is a server side scripting language so we need server to run php code.
There are many servers to run php program. If you are using Windows Operating System then you can
install WMAP server which stands for Windows Apache MySql and PHP or Perl or python. It is a
complete package or stack. And if you are using Linux Operating System then you can install Lamp which
stands for Linux Apache MySql and PHP or Perl or python. .
Here I am using WAMP server. When you installed WAMP server you will get wamp folder in
your C drive. In this folder there is another folder name www. To run php code we have to put all php files
in this folder. Php files having .php extension. We can use Notepad or Notepad++ to create .php files.

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 12 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 13

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

For ex:
http://localhost/Testing.php
It will run your php file.

WORKING WITH phpMyAdmin

phpMyAdmin is an open-source software tool introduced on September 9, 1998, which is written in

PHP. Basically, it is a third-party tool to manage the tables and data inside the database. phpMyAdmin
supports various type of operations on MariaDB and MySQL. The main purpose of phpMyAdmin is to
handle the administration of MySQL over the web.

It is the most popular application for MySQL database management. We can create, update, drop,
Note: while saving the file, end the name with .php and don’t forget to select all files. alter, delete, import, and export MySQL database tables by using this software. phpMyAdmin also supports
Let us assume i have stored Testing.php a wide range of operation like managing databases, relations, tables, columns, indexes, permissions,
Step 4: Start the server and users, etc., on MySQL and MariaDB. These operations can be performed via user interface, while we
Left click on the wamp icon in system tray. still have the ability to execute any SQL statement.
It will display list of options.
Select “start all services”. phpMyAdmin is translated into 72 languages and also supports both RTL and LTR languages so
that the wide range of people can easily use this software. We can run MySQL queries, repair, optimized,
check tables, and also execute other database management commands. phpMyAdmin can also be used to
perform administrative tasks such as database creation, query execution.

phpMyAdmin is a GUI-based application which is used to manage MySQL database. We can

manually create database and table and execute the query on them. It provides a web-based interface and
can run on any server. Since it is web-based, so we can access it from any computer.

Features of phpMyAdmin

phpMyAdmin supports several features that are given below:

o phpMyAdmin can create, alter, browse, and drop databases, views, tables, columns, and indexes.
o It can display multiple results sets through queries and stored procedures.
o phpMyAdmin use stored procedure and queries to display multiple results sets.
o It supports foreign keys and InnoDB tables.
Step 5:Run
Now all services(especially php) is running. o phpMyAdmin can track the changes done on databases, views, and tables.
Open the mozilla and type localhost in address bar.
Hit enter o We can also create PDF graphics of our database layout.
It will show the default page of wamp server. o phpMyAdmin can be exported into various formats such as XML, CSV, PDF, ISO/IEC 26300 -
Now include this Testing.php (my php file name) at the end of the url OpenDocument Text and Spreadsheet.
o It supports mysqli, which is the improved MySQL extension.
o phpMyAdmin can interact with 80 different languages.
o phpMyAdmin can edit, execute, and bookmark any SQL-statements and even batch-queries.
o By using a set of pre-defined functions, it can transform stored data into any format. For example -
BLOB-data as image or download-link.
Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 14 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 15

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

o It provides the facility to backup the database into different forms. 1. With PHP’s MySQLi Extension
2. With PHP Data Objects (PDO)
Advantage of phpMyAdmin
The guide also includes explanations for the credentials used in the PHP scripts and potential errors you
o phpMyAdmin can run on any server or any OS as it has a web browser. may come across using MySQLi and PDO.
o We can easily create, delete, and edit the database and can manage all elements using the graphical Option 1: Connect to MySQL with MySQL Improved extension
interface of phpMyAdmin, which is much easier than MySQL command-line editor.
MySQLi is an extension that only supports MySQL databases. It allows access to new functionalities found
o phpMyAdmin helps us to control the user's permission and operate several servers at the same time.
in MySQL systems (version 4.1. and above), providing both an object-oriented and procedural interface. It
o We can also backup our database and export the data into different formats like XML, CSV, SQL, supports server-side prepared statements, but not client-side prepared statements.
PDF, OpenDocument Text, Excel, Word, and Spreadsheet, etc.
The MySQLi extension is included PHP version 5 and newer.
o We can execute complex SQL statements and queries, create and edit functions, triggers, and events
using the graphical interface of phpMyAdmin. The PHP script for connecting to a MySQL database using the MySQLi procedural approach is the
following:
Disadvantage of phpMyAdmin
o phpMyAdmin is a simple interface, but quite tough for a beginner to learn. <?php
o phpMyAdmin is difficult to install as it needs three more software tools before installation, which is- $servername = "localhost";
$database = "database";
Apache server, PHP, and MySQL. $username = "username";
o We have to install all these software tools individually, whereas XAMPP already contains them in a $password = "password";
single package. XAMPP is the easiest way to get phpMyAdmin. // Create connection
o It has no schema visualization.
$conn = mysqli_connect($servername, $username, $password, $database);
o phpMyAdmin is a web-based software tool which runs only on the browser, so It completely
depends on browsers. // Check connection
o It does not have auto-compilation capability. if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

Establishing connectivity with MySQL using PHP echo “Connected successfully”;

mysqli_close($conn);
Introduction
?>
To access and add content to a MySQL database, you must first establish a connection between the
database and a PHP script.
Credentials Explained
Prerequisites
The first part of the script is four variables (server name, database, username, and password) and their
respective values. These values should correspond to your connection details.
 Special CREATE privileges
 A MySQL Database
 A MySQLi or PDO extension

2 Ways to Connect to MySQL database using PHP

There are two popular ways to connect to a MySQL database using PHP:
Next is the main PHP function mysqli_connect(). It establishes a connection with the specified database.
Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 16 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 17

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

}
Following is an “if statement.” It is the part of the code that shows whether the connection was established.
catch (PDOException $e)
When the connection fails, it gives the message Connection failed. The die function prints the message and
then exits out of the script.
{
echo “Connection failed: ”. $e->getMessage();
}

?>

Credentials Syntax
If the connection is successful, it displays “Connected successfully.”
First, we have five variables (server name, database, username, password, and charset) and their values.
These values should correspond to your connection details.
When the script ends, the connection with the database also closes. If you want to end the code manually, The server name will be localhost. If connected to an online server, type in the server name of that server.
use the mysqli_close function.
The variable charset tells the database in which encoding it will be receiving and sending data. The
recommended standard is utf8mb4.

Option 2: Connect To MySQL With PDO

PHP Data Objects (PDO) is an extension that serves as an interface for connecting to databases. Unlike
MySQLi, it can perform any database functions and is not limited to MySQL. It allows flexibility among
databases and is more general than MySQL. PDO supports both server and client-side prepared statements.
Try and Catch Blocks
Note: PDO will not run on PHP versions older than 5.0 and is included in PHP 5.1.
PDO’s great asset is that it has an exception class to take care of any potential problems in database queries.
It solves these problems by incorporating try and catch blocks.
The PHP code for connecting to a MySQL database through the PDO extension is:
If a problem arises while trying to connect, it stops running and attempts to catch and solve the
issue. Catch blocks can be set to show error messages or run an alternative code.
<?php

$servername = "localhost";
$database = "database";
$username = "username";
$password = "password";
$charset = "utf8mb4";

try {

$dsn = "mysql:host=$servername;dbname=$database;charset=$charset";
$pdo = new PDO($dsn, $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
The first parameter in the try and catch block is DSN, which stands for data(base) source name. It is
echo “Connection Okay”; crucial as it defines the type and name of the database, along with any other additional information.

return $pdo

Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 18 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 19

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])

 lOMoARcPSD|42770001 lOMoARcPSD|42770001

MC4023 – WEB DESIGN UNIT - 5 MC4023 – WEB DESIGN UNIT - 5

In this example, we are using a MySQL database. However, PDO supports various types of databases. If Possible solutions:
you have a different database, replace that part of the syntax (mysql) with the database you are using.
1. Check the database details to ensure the password is correct.
2. Ensure there is a user assigned to the database.

Unable to Connect to MySQL Server

Next is the PDO variable. This variable is going to establish a connection to the database. It has three
parameters: PHP may not be able to connect to the MySQL server if the server name is not recognized. Make sure that
the server name is set to localhost.
1. The data source name (dsn)
2. The username for your database In case of other errors, make sure to consult the error_log file to help when trying to solve any issues. The
3. The password for your database file is located in the same folder where the script is running.

Following is the setAttribute method adding two parameters to the PDO:

1. PDO::ATTR_ERRMODE
2. PDO::ERRMODE_EXCEPTION

This method instructs the PDO to run an exception in case a query fails.

Add the echo “Connection Okay.” to confirm a connection is established.

Return the PDO variable to connect to the database.

After returning the PDO variable, define the PDOException in the catch block by instructing it to display a
message when the connection fails.

Potential Errors with MySQLi and PDO

Incorrect Password

The password in the PHP code needs to correspond with the one in the database. If the two do not match, a
connection with the database cannot be established. You will receive an error message saying the
connection has failed.
Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 20 Prepared by. E.Janakiraman.MCA,Mphil., AP-MCA/APEC Page 21

Downloaded by Hopeserveenterprises Hope ([email protected]) Downloaded by Hopeserveenterprises Hope ([email protected])