Unit III

3.1 Integrating Multimedia: Video and Sound

HTML5 has revolutionized the way we consume multimedia content on the web. With HTML5, web
developers can create immersive and interactive multimedia experiences that rival those of traditional
desktop applications. However, with great power comes great responsibility. As the amount of
multimedia content on the web grows, so does the need to organize and manage it effectively. This is
where multimedia tags in HTML5 come in.

In HTML5, multimedia tags are used to embed audio, video, and other types of multimedia content
into web pages. These tags provide a standardized way of playing multimedia content across different
browsers and devices. However, multimedia tags are not just for playback; they also serve as a way to
organize and manage multimedia content.
In HTML5, there are several multimedia tags that can be used to embed different types of media, such
as audio and video, into web pages. These tags include:
1. <audio>- This tag is used to embed audio files, such as music or podcasts, into web pages.
2. <video>- This tag is used to embed video files, such as movies or TV shows, into web pages.
1.​ <source>- This tag is used to specify alternative versions of media files, such as different formats
or bitrates, which the browser can choose from based on the user's device and internet connection.
2.​ <track>- This tag is used to add subtitles or captions to video or audio files.
3.​ <picture>- This tag is used to specify different versions of an image that can be displayed
depending on the user's device and screen size.

3.1.1Audio Tag

One of the most important multimedia tags in HTML5 is the <audio>tag. This tag is used to embed
audio content into web pages. It supports several audio formats, such as MP3, OGG, and WAV. The
tag has several attributes, including srcto specify the location of the audio file and controlsto display
the default audio player controls. Here's an example:

<audio src="audiofile.mp3" controls>

Your browser does not support the audio element.

</audio>

In this example, the srcattribute specifies the location of the audio file audiofile.mp3, while the
controlsattribute displays the default audio player controls. If the browser does not support the
<audio>tag, it will display the text between the opening and closing tags.

Attributes of Audio tag:

•​ src: specifies the URL of the audio file

•​ controls: displays the default audio player controls

•​ autoplay: automatically starts playing the audio when the page loads

•​ loop: continuously repeats the audio file

•​ preload: specifies whether the audio should be preloaded or not

3.1.2 Video Tag

The <video>tag is used to embed video files in a web page. It supports several video formats, such as
MP4, WebM, and OGG. The tag has several attributes, including srcto specify the location of the
video file and controlsto display the default video player controls. Here's an example:

<video src="videofile.mp4" controls>

Your browser does not support the video element.

</video>

In this example, the srcattribute specifies the location of the video file videofile.mp4, while the
controlsattribute displays the default video player controls. If the browser does not support the
<video>tag, it will display the text between the opening and closing tags.

Attributes of Video tag:

•​ src: specifies the URL of the video file

•​ controls: displays the default video player controls

•​ autoplay: automatically starts playing the video when the page loads

•​ loop: continuously repeats the video file

•​ preload: specifies whether the video should be preloaded or not

•​ poster: specifies an image to be displayed before the video starts playing

•​ widthand height: specifies the dimensions of the video display area in pixels

3.1.3 Source Tag

The <source>tag is used to specify alternative versions of a multimedia file, such as different formats
or bitrates, that the browser can choose from based on the user's device and internet connection. The
tag has several attributes, including srcto specify the location of the multimedia file and typeto specify
the MIME type of the file. Here's an example:

<video controls>

<source src="videofile.mp4" type="video/mp4">

<source src="videofile.webm" type="video/webm">

Your browser does not support the video element.

</video>

In this example, the <video>tag includes two <source>tags with different video formats (mp4and
webm). The browser will choose the appropriate format based on the user's device and internet
connection. If the browser does not support the <video>tag, it will display the text between the
opening and closing tags.

Attributes of Source tag:

•​ src: specifies the URL of the multimedia file

•​ type: specifies the MIME type of the multimedia file

3.1.4 Track Tag

The <track>tag is used to add subtitles or captions to a video or audio file. The tag has several
attributes, including srcto specify the location of the subtitles file, kindto specify the type of subtitles
(e.g., subtitlesor captions), and srclangto specify the language of the subtitles. Here's an example:

<video controls>

<source src="videofile.mp4" type="video/mp4">

<track src="subtitles.vtt" kind="subtitles" srclang="en">

Your browser does not support the video element.

</video>

In this example, the <video>tag includes a <track>tag with the location of the subtitles file
(subtitles.vtt), the type of subtitles (subtitles), and the language of the subtitles (en). If the browser
does not support subtitles, they will not be displayed.

Attributes of Track tag:

•​ src: specifies the URL of the subtitles file

•​ kind: specifies the type of subtitles (e.g., subtitlesor captions)

•​ srclang: specifies the language of the subtitles

•​ label: specifies a label for the subtitles

3.1.5 Picture Tag

The <picture>tag is used to specify different versions of an image that can be displayed depending on
the user's device and screen size. It includes one or more <source>tags with different image sources
and media queries that specify the conditions under which the image should be displayed. Here's an
example:
<picture>

<source media="(min-width: 1200px)" srcset="largeimage.jpg">

<source media="(min-width: 768px)" srcset="mediumimage.jpg">

<img src="smallimage.jpg" alt="Small Image">

</picture>

In this example, the <picture>tag includes two <source>tags with different image sources and media
queries that specify the conditions under which the image should be displayed. The first <source>tag
specifies that the large image.jpg file should be used for devices with a minimum width of 1200
pixels, while the second <source>tag specifies that the medium image.jpg file should be used for
devices with a minimum width of 768 pixels. If neither of these conditions is met, the <img>tag will
display the small image.jpgfile.

Note that the <picture>tag is not supported in all browsers, so it's important to include a fallback
image using the <img>tag. Additionally, it's important to optimize images for the web to ensure fast
loading times and good performance.

Attributes of Picture tag:

•​ <source>tags: the same attributes as for the <source>tag in the <video>tag, plus the media
attribute, which specifies the conditions under which the image should be displayed

•​ <img>tag: the same attributes as for the <img>tag in HTML, such as src, alt, width, and height

3.2 Advance CSS

3.2.1 Page layout in CSS:

A website can be divided into various sections comprising of header, menus, content, and footer based
on which there are many different layout designs available for developers. Different layouts can be
created by using a div tag and using CSS property to style it. The most common structure of website
layout is given below:
Notice: Header section contains a website logo, a search bar and profile of user. The navigation menu
contains link to various categories of articles available and content section is divided into 3
parts(columns) with left and right sidebar containing links to other articles and advertisements
whereas the main content section is the one containing this article, then at the bottom there is a footer
section which contains address, links, contacts etc.

1.​ Header Section: The header section is generally placed either at the top of the Website or just
below a top navigation menu. It often comprises of the name of the Website or the logo of the
Website.

2.​ Navigation Menu: A Navigation Bar/Menu is basically a list of links that allows visitor to
navigate through the website comfortably with easy access.

3.​ Content Section: The content section is the main body of the website. The user can divide the
content section in an n-column layout. The most common layouts are:

1​ 1-Column Layout: It is mostly used for mobile layout.

•​ 2-Column Layout: This website layout is mostly used for tablets or laptops.

•​ 3-Column Layout: This website layout is mostly used for desktops.

The user can also create a responsive layout where the layout will get changed as per screen size.
Consider the below example where if the idth of the screen is more than 600px then there will be a
3-column layout and if the width of the screen is between 400px to 600px then there will be a
2-column layout and if the screen size is less than 400px then the 1-column layout will display.

1.​ Footer Section: A footer section is placed at the bottom of the webpage and it generally consists
of information like contact info, copyrights, About us etc.

Supported Browser:
•​ Google Chrome
•​ Internet Explorer
•​ Firefox
•​ Opera
•​ Safari
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout
</title>
<style>
*{
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for navigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA,
.columnB,
.columnC {
float: left;
width: 31%;
padding: 15px;
text-align: justify;
}
h2 {
color: green;
text-align: center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA,
.columnB,
.columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA,
.columnB,
.columnC {
width: 100%;
}
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class="header">
<h2 style="color:white;font-size:200%">
GeeksforGeeks
</h2>
</div>
<!-- navigation menu of website layout -->
<div class="nav_menu">
<a href="#">Algo</a>
<a href="#">DS</a>
<a href="#">Language</a>
</div>
<!-- Content section of website layout -->
<div class="row">
<div class="columnA">
<h2>Column A</h2>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<div class="columnB">
<h2>Column B</h2>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
<div class="columnC">
<h2>Column C</h2>
<p>
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</div>
</body>
</html>

3.3 Using Responsive Web Design

What is Responsive Web Design?
Responsive web design makes web pages render properly on a wide variety of device screen sizes
without cutting short or distorting the content.
This doesn't mean a website will appear exactly the same way on a phone as on a laptop, for example.
Rather, it means that the content of the web page adapts to different screen sizes – from large screens
(desktops and laptops) to medium screens (tablets) to mobile screens (phones of various screen sizes).
And it does this all while retaining the same content (just perhaps arranged differently to fit each
screen).

The Evolution of Responsive Web Design

In the past, people mostly used desktops and laptops to view content online, because websites were
optimized for those screens only.But as more and more people started using mobile phones to surf the
web, people started grumbling about the poor display and layouts they were seeing.This meant one
thing for web designers and developers: websites needed to be optimized for mobile, too!
In the last decade, the number of website users on mobile began to surpass that of desktops and
laptops for the first time. So everyone from tech giants to small businesses started embracing a
responsive web design approach.
Developers and designers also created the shiny new mobile-first design as well. This meant that the
developers made the websites for mobile devices first, and desktop later. Responsive design arose as a
solution to the problem of creating websites that looked good on various screen sizes and devices.
Websites were initially designed with a fixed, static layout that did not adjust to screen size.

History and Evolution of Responsive Web Design

This often meant a separate website for mobile devices and larger screens, with the same server
system but different domains.The original website, for example, could be examplewebsite.com, and
the mobile version would be examplewebsite.mobi, or m.examplewebsite.com. The user's device
would be detected by ready-made scripts and then the appropriate domain would be rendered. This
practice still exists today.
Apart from the two-domain method, web designers and developers can create a website for a
particular screen size first (it could be desktop, tablet, or mobile), and then add what are called media
queries to make the website adapt to different screen sizes. This is the mobile-first approach.

How to Make Your Site Responsive?

Integrating responsive web design approaches into a project includes every part of the code – within
the HTML <head> element, the HTML structure, the CSS, and even the JavaScript.
I will describe these processes as clearly and in as much detail as possible.

Set the Viewport in the Head

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Since HTML plays a huge role in defining the structure of a web page, then it definitely has
something to do with making websites respond (adapt) to different screen sizes.
You'll need to include the meta viewport empty element in the head section of any web page that you
want to optimize for different screen sizes.
This tells the browser to render the width of the web page to the exact width of the device. So, if the
device has a width of 1200px, the web page width will be 1200px. If the device has a width of 720px,
the web page width will be 720px, and so on.
This prevents annoying zooming in and zooming out that mobile phone users experienced in the past,
which wasn't good for user experience.
But the <meta> viewport element is not all you need to make a website adapt to different screen sizes.
There's more.

3.3.1 CSS Media Queries

The most crucial tool you'll use to make your sites responsive is CSS3 Media Queries. Media queries
let you write the same CSS code in different ways for multiple screens.
With media queries, you tell the browser to display the content in a particular way on a particular
screen.
The basic syntax of a media query looks like this:

@media screen and (max-width: 720px) {

/*CSS codes go here*/
}

This tells the browser to execute the CSS code written within the media query when the screen width
is below a 720 pixel breakpoint. The breakpoint can usually be any value between 1200 pixels and
320 pixels.

Example:
@media screen and (max-width: 768px) {
body {
background-color: #333;
color: #3498db;
}
}
Here, we are instructing the browser to change the background-color to dark-grey, and the color to
blue when the screen width is below 768 pixels.

Several other breakpoints exist for different devices.

•​ 320 - 480px for small phones such as iPhone 6, 7, and 5
•​ 478 - 768px for Tablets and iPads
•​ 1025 - 1200px for desktops and large screens

Some extra-large screens and TVs can take more than 1200px.

3.3.2 Responsive Text

Since text size won't be the same on a mobile phone as it is on a desktop, text must be made to scale
down as the device screen width reduces.
You can do this within the media query for each screen. And one of the ways to make it easier is to
use relative units (%, rem, and em) instead of an absolute unit such as px.
We instruct the browser to make the font size of the text 3rem on big screens, and 1.5rem on screens
below a width of 768pixels:

Example:
@media screen and (max-width: 768px) {
p{
font-size: 1.5rem;
}
}

3.3.3 Responsive Images

Just like text, images must scale down as screen width reduces, too.
Images have a fixed width and height, so when they are larger than the viewport width (screen width),
a user typically has to scroll to see the whole thing, which creates a bad user experience.
Developers get around this by setting a max-width of 100% for all images and displaying them as
block-level elements (images are inline elements by default).
You can set this for the images in your code individually, but to foster DRY (Do not repeat yourself)
principles, you should do it in your resets for all images.

img {
display: block;
max-width: 100%;
}

Another way to make images responsive is to use the picture element in HTML. With this element,
you can tell the browser to display different images that correlate to the width on different devices.

<picture>
<source
media="(max-width: 1100px)"
srcset=" logo.jpg"
/>
<source
media="(max-width: 900px)"
srcset=" logo.jpg"
/>
<source media="(max-width: 760px)"
srcset=" logo.jpg" />
<img
src=" logo.jpg"
alt=" Logo "
style="max-width: 100%"
/>
</picture>

•​ On a screen of size 1100px width and below, logo will be shown

•​ On a screen of size 900px width and below, logo will be shown
•​ On a screen of size 760px width and below, logo will be shown
If the screen width meets none of the conditions, <img> tag logo will be shown.

3.3.4 Responsive Layout

The layout of any web page determines how the content is displayed in the browser.
In the past, developers had to use tables, which were not easy to control. Then came float and clearfix,
which were also difficult to manage.
The introduction of CSS Grid and Flexbox revolutionized layouts and gave more relevance to
responsive design.

3.3.4.1 Flexbox
With CSS flexbox, responsive design gained more relevance because, with it, you don't have to add
too many media queries unlike when you use floats for a layout.
Immediately when a display of flex is assigned to the containing element, the element direction is
rendered on the row by default.
You can later use a media query to set the direction to a column for smaller screens with the
flex-direction property. The flex-direction property value has to be explicitly set to a column.
You can also layout the way you want the content on the web page to render with properties such as
flex-grow and flex-shrink. These two properties make the element they contain grow as the screen
viewport (width) increases and shrink as the viewport decreases. How cool is that?
In the code snippets below, the direction of the different pieces of text in their respective containers
will be a row on screens higher than 768 pixels in width, and a column when the width is lower than
768 pixels.
We were able to do it by displaying the whole items inside the body element as flex.

Example:
Program.html
<body>
<div class="container-one">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
</div>
<div class="container-two">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
</div>
<div class="container-three">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</div>
</body>

Style.css
body {
display: flex;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
flex-direction: column;
}
}

3.3.4.2 CSS Grid

CSS grid is more or less a hybrid and more powerful form of flexbox. Many have argued that
whatever you're doing with Flexbox, you can do in fewer lines of code with Grid.
With CSS grid, you get to create flexible grids in a more straightforward way as you can define the
columns and rows you want with the grid-auto-flow property set to either column or row.
You can do the same thing that we did in the Flexbox example this way with Grid:

Style.css
body {
display: grid;
grid-auto-flow: column;
gap: 6px;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
grid-auto-flow: row;
}
}

3.4 Introducing JavaScript

What is JavaScript ?

JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming

language. It is also known as the scripting language for web-pages. It is well-known for the
development of web pages, and many non-browser environments also use it.
JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Client-side
developments as well as Server-side developments. JavaScript is both an imperative and declarative
type of language. JavaScript contains a standard library of objects, like Array, Date, and Math, and a
core set of language elements like operators, control structures, and statements.

•​ Client-side: It supplies objects to control a browser and it’s Document Object Model (DOM).
Like if client-side extensions allow an application to place elements on an HTML form and respond to
user events such as mouse clicks, form input, and page navigation. Useful libraries for the client
side are AngularJS, ReactJS, VueJS, and so many others.
•​ Server-side: It supplies objects relevant to running JavaScript on a server. For if the
server-side extensions allow an application to communicate with a database, and provide continuity of
information from one invocation to another of the application, or perform file manipulations on a
server. The useful framework which is the most famous these days is node.js.
•​ Imperative language – In this type of language we are mostly concerned about how it is to be
done. It simply controls the flow of computation. The procedural programming approach,
object-oriented approach comes under.
•​ Declarative programming – In this type of language we are concerned about how it is to be
done; basically, here logical computation requires. Her main goal is to describe the desired result
without direct dictation on how to get it as the arrow function does.

3.4.1 How to Link JavaScript File in HTML?

JavaScript can be added to HTML file in two ways:
•​ Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the
<script> tag. The <script> tag can either be placed inside the <head> or the <body> tag according to
the requirement.
•​ External JS: We can write JavaScript code in other files having an extension.js and then link
this file inside the <head> tag of the HTML file in which we want to add this code.

Syntax:
<script>
// JavaScript Code
</script>

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>
<body>
<!-- JavaScript code can be embedded inside
head section or body section -->
<script>
console.log("Welcome to India");
</script>
</body>
</html>

Output: The output will display on the console.

Welcome to India

3.4.2 History of JavaScript

It was created in 1995 by Brendan Eich while he was an engineer at Netscape. It was originally going
to be named Live Script but was renamed. Unlike most programming languages, JavaScript language
has no concept of input or output. It is designed to run as a scripting language in a host environment,
and it is up to the host environment to provide mechanisms for communicating with the outside
world. The most common host environment is the browser.

3.4.3 Features of JavaScript

According to a recent survey conducted by Stack Overflow, JavaScript is the most popular language
on earth. With advances in browser technology and JavaScript having moved into the server with
Node.js and other frameworks, JavaScript is capable of so much more. Here are a few things that we
can do with JavaScript:
•​ JavaScript was created in the first place for DOM manipulation. Earlier websites were mostly
static, after JS was created dynamic Web sites were made.
•​ Functions in JS are objects. They may have properties and methods just like other objects.
They can be passed as arguments in other functions.
•​ Can handle date and time.
•​ Performs Form Validation although the forms are created using HTML.
•​ No compiler is needed

3.4.4 Applications of JavaScript

•​ Web Development: Adding interactivity and behavior to static sites JavaScript was invented
to do this in 1995. By using AngularJS that can be achieved so easily.
•​ Web Applications: With technology, browsers have improved to the extent that a language
was required to create robust web applications. When we explore a map in Google Maps then we only
need to click and drag the mouse. All detailed view is just a click away, and this is possible only
because of JavaScript. It uses Application Programming Interfaces(APIs) that provide extra power to
the code. The Electron and React are helpful in this department.
•​ Server Applications: With the help of Node.js, JavaScript made its way from client to server
and Node.js is the most powerful on the server side.
•​ Games: Not only in websites, but JavaScript also helps in creating games for leisure. The
combination of JavaScript and HTML 5 makes JavaScript popular in game development as well. It
provides the EaseJS library which provides solutions for working with rich graphics.
•​ Smartwatches: JavaScript is being used in all possible devices and applications. It provides a
library PebbleJS which is used in smartwatch applications. This framework works for applications
that require the Internet for their functioning.
•​ Art: Artists and designers can create whatever they want using JavaScript to draw on HTML
5 canvas, and make the sound more effective also can be used p5.js library.

•​ Machine Learning: This JavaScript ml5.js library can be used in web development by using
machine learning.
•​ Mobile Applications: JavaScript can also be used to build an application for non-web
contexts. The features and uses of JavaScript make it a powerful tool for creating mobile applications.
This is a Framework for building web and mobile apps using JavaScript. Using React Native, we can
build mobile applications for different operating systems. We do not require to write code for different
systems. Write once use it anywhere!

3.4.5 Limitations of JavaScript

•​ Security risks: JavaScript can be used to fetch data using AJAX or by manipulating tags that
load data such as <img>, <object>, <script>. These attacks are called cross-site script attacks. They
inject JS that is not part of the site into the visitor’s browser thus fetching the details.
•​ Performance: JavaScript does not provide the same level of performance as offered by many
traditional languages as a complex program written in JavaScript would be comparatively slow. But
as JavaScript is used to perform simple tasks in a browser, so performance is not considered a big
restriction in its use.
•​ Complexity: To master a scripting language, programmers must have a thorough knowledge
of all the programming concepts, core language objects, and client and server-side objects otherwise it
would be difficult for them to write advanced scripts using JavaScript.
•​ Weak error handling and type checking facilities: It is a weakly typed language as there is
no need to specify the data type of the variable. So wrong type checking is not performed by compile.

3.4.6 Why JavaScript is known as a lightweight programming language?

JavaScript is considered lightweight due to the fact that it has low CPU usage, is easy to implement,
and has a minimalist syntax. Minimalist syntax as in, has no data types. Everything is treated here as
an object. It is very easy to learn because of its syntax similar to C++ and Java. A lightweight
language does not consume much of your CPU’s resources. It doesn’t put excess strain on your CPU
or RAM. JavaScript runs in the browser even though it has complex paradigms and logic which
means it uses fewer resources than other languages. For example, NodeJs, a variation of JavaScript
not only performs faster computations but also uses fewer resources than its counterparts such as Dart
or Java.
Additionally, when compared with other programming languages, it has fewer in-built libraries or
frameworks, contributing as another reason for it being lightweight. However, this brings a drawback
in that we need to incorporate external libraries and frameworks.

3.4.7 Is JavaScript Compiled or Interpreted or both?

JavaScript is both compiled and interpreted. In the earlier versions of JavaScript, it used only the interpreter
that executed code line by line and shows the result immediately. But with time the
performance became an issue as interpretation is quite slow. Therefore, in the newer versions of JS,
probably after the V8, the JIT compiler was also incorporated to optimize the execution and display
the result more quickly. This JIT compiler generates a bytecode that is relatively easier to code. This
bytecode is a set of highly optimized instructions. The V8 engine initially uses an interpreter, to
interpret the code. On further executions, the V8 engine finds patterns such as frequently executed
functions, and frequently used variables, and compiles them to improve performance.

3.5 Introducing jQuery

jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the
client-side scripting of HTML. It makes things like HTML document traversal and manipulation,
animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of
different type of browsers.
The main purpose of jQuery is to provide an easy way to use JavaScript on your website to make it
more interactive and attractive. It is also used to add animation.

3.5.1 What is jQuery

jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and supports different
types of browsers. It is also referred as? write less do more? because it takes a lot of common tasks
that requires many lines of JavaScript code to accomplish, and binds them into methods that can be
called with a single line of code whenever needed. It is also very useful to simplify a lot of the
complicated things from JavaScript, like AJAX calls and DOM manipulation.

•​ jQuery is a small, fast and lightweight JavaScript library.

•​ jQuery is platform-independent.
•​ jQuery means "write less do more".
•​ jQuery simplifies AJAX call and DOM manipulation.

jQuery Features
Following are the important features of jQuery.
•​ HTML manipulation
•​ DOM manipulation
•​ DOM element selection
•​ CSS manipulation
•​ Effects and Animations
•​ Utilities
•​ AJAX
•​ HTML event methods
•​ JSON Parsing
•​ Extensibility through plug-ins

3.5.2 Why jQuery is required

Sometimes, a question can arise that what is the need of jQuery or what difference it makes on
bringing jQuery instead of AJAX/JavaScript? If jQuery is the replacement of AJAX and JavaScript?
For all these questions, you can state the following answers.
•​ It is very fast and extensible.
•​ It facilitates the users to write UI related function codes in minimum possible lines.
•​ It improves the performance of an application.
•​ Browser's compatible web applications can be developed.
•​ It uses mostly new features of new browsers.

So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and the most
extendable. Many of the biggest companies on the web use jQuery.
Some of these companies are:
•​ Microsoft
•​ Google
•​ IBM
•​ Netflix

What should you know before starting to learn jQuery?

It is always advised to a fresher to learn the basics of web designing before starting to learn jQuery.
He should learn HTML, CSS and JavaScript first.

3.5.3 Adding jQuery to Your Web Pages

There are several ways to start using jQuery on your web site. You can:
•​ Download the jQuery library from jQuery.com
•​ Include jQuery from a CDN, like Google

Downloading jQuery
There are two versions of jQuery available for downloading:
•​ Production version - this is for your live website because it has been minified and compressed
•​ Development version - this is for testing and development (uncompressed and readable code)

Both versions can be downloaded from jQuery.com.

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice
that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>

Tip: Place the downloaded file in the same directory as the pages where you wish to use it.

jQuery CDN
If you don't want to download and host jQuery yourself, you can include it from a CDN (Content
Delivery Network).
Google is an example of someone who host jQuery:
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

3.5.4 jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the
element(s).
Basic syntax is: $(selector).action()
•​ A $ sign to define/access jQuery
•​ A (selector) to "query (or find)" HTML elements
•​ A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".

3.5.5 The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){ // jQuery methods go here... });
This is to prevent any jQuery code from running before the document is finished loading (is ready).It
is good practice to wait for the document to be fully loaded and ready before working with it. This
also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully
loaded:

•​ Trying to hide an element that is not created yet

•​ Trying to get the size of an image that is not loaded yet

Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){
// jQuery methods go here...
});

3.5.6 jQuery Selectors

•​ jQuery selectors are one of the most important parts of the jQuery library.
•​ jQuery selectors allow you to select and manipulate HTML element(s).
●​ jQuery selectors are used to "find" (or select) HTML elements based on their name, id,
classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors,
and in addition, it has some own custom selectors.
•​ All selectors in jQuery start with the dollar sign and parentheses: $().

1.​ The element Selector

The jQuery element selector selects elements based on the element name.
You can select all <p> elements on a page like this:
$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

2.​ The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")

Example
When a user clicks on a button, the element with id="test" will be hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

3.​ The .class Selector

The jQuery .class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the name of the class:
$(".test")

Example
When a user clicks on a button, the elements with class="test" will be hidden:
Example
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

3.5.7 jQuery Event Methods

jQuery is tailor-made to respond to events in an HTML page.
All the different visitors' actions that a web page can respond to are called events.
An event represents the precise moment when something happens.
Examples:

•​ moving a mouse over an element

•​ selecting a radio button
•​ clicking on an element

The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment
you press a key".
Here are some common DOM events:

Mouse Events Keyboard Events Form Events Document/Windo

w Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
3.5.7.1 jQuery Syntax for Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the
event:
$("p").click(function(){
// action goes here!!
});

3.5.7.2 Commonly Used jQuery Event Methods

$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully loaded.
This event is already explained in the jQuery Syntax chapter.

1.​ click()
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p>
element:
Example
$("p").click(function(){
$(this).hide();
});

2​ dblclick()
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Example
$("p").dblclick(function(){
$(this).hide();
});

3​ mouseenter()
The mouse enter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
Example
$("#p1").mouseenter(function(){
alert("You entered p1!");
});

4. mouseleave()
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
Example
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

5. mousedown()
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the
mouse is over the HTML element:
Example
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

6​ mouseup()
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the
mouse is over the HTML element:
Example

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

7.​ hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave()
methods.
The first function is executed when the mouse enters the HTML element, and the second function is
executed when the mouse leaves the HTML element:
Example
$("#p1").hover(function(){
alert("You entered p1!");
}, function(){
alert("Bye! You now leave p1!");
});

8.​ focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

9.​ blur()
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

10​ The on() Method

The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
Example
$("p").on("click", function(){
$(this).hide();
});

3.5.7.3 Attach multiple event handlers to a <p> element:

Example
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});

3.6 Use of JavaScript

JavaScript is a light-weight object-oriented programming language that is used by several websites for
scripting the web-pages. It is an interpreted, full-fledged programming language. JavaScript enables
dynamic interactivity on websites when it is applied to an HTML document.
JavaScript helps the users to build modern web applications to interact directly without reloading the
page every time. JavaScript is commonly used to dynamically modify HTML and CSS to update a
user interface by the DOM API. It is mainly used in web applications.
Some of the uses of JavaScript are representing in the following image.
1.​ Web Applications
As day-by-day there is a continuous improvement in the browsers, so JavaScript gained popularity
for making robust web applications. for example, Google Maps. In Maps user just requires to
click and drag the mouse; the details are visible just by a click. There is a use of JavaScript behind
these concepts.

2.​ Web Development

JavaScript is commonly used for creating web pages. It allows us to add dynamic behavior to the
webpage and add special effects to the webpage. On websites, it is mainly used for validation
purposes. JavaScript helps us to execute complex actions and also enables the interaction of
websites with visitors. Using JavaScript, it is also possible to load the content in a document
without reloading the webpage.

3.​ Mobile Applications

Now a day's mobile devices are broadly used for accessing the internet. Using JavaScript, we can
also build an application for non-web contexts. The features and uses of JavaScript make it a
powerful tool for creating mobile applications. The React Native is the widely used JavaScript
framework for creating mobile applications. Using React Native, we can build mobile
applications for different operating systems. We do not require writing different codes for the iOS
and Android operating systems. We only need to write it once and run it on different platforms.

4.​ Game
JavaScript is also used for creating games. It has various libraries and frameworks for creating a
game. The game can either be a 2D or 3D. Some JavaScript game engines such as PhysicsJS,
Pixi.js help us to create a web game. We can also use the WebGL (web graphics library), which is
the JavaScript API to render 2D and 3D images on browsers.

5.​ Presentations
JavaScript also helps us to create presentations as a website. The libraries, such as RevealJs, and
BespokeJs, can be used to create a web-based slide deck. They are easier to use, so we can easily
make something amazing in a short time.
The Reveal.js is used to create interactive and beautiful slide decks with the help of HTML. These
presentations work great with mobile devices and tablets. It also supports all of the CSS color
formats. The BespokeJS includes animated bullet lists, responsive scaling, and a wide variety of
features.
 6.​ Server Applications
A large number of web applications have a server-side to them. JavaScript is used to generate
content and handle HTTP requests. JavaScript can also run on servers through Node.js. The
Node.js provides an environment containing the necessary tools required for JavaScript to run on
servers.

7.​ Web Servers

A web server can be created by using Node.js. Node.js is event-driven and not waits for the
response of the previous call. The servers created using Node.js are fast and don't use buffering and
transfer chunks of data. The HTTP module can be used to create the server by using the
createServer() method. This method executes when someone tries to access the port 8080. As a
response, the HTTP server should display HTML and should be included in the HTTP header.
JavaScript has various other uses that help us to improve the performance of web-pages. The other
uses of JavaScript are listed as follows:
•​ Client-side validation.
•​ Displaying date and time.
•​ To validate the user input before submission of the form.
•​ Open and close new windows.
•​ To display dialog boxes and pop-up windows.
•​ To change the appearance of HTML documents.
•​ To create the forms that respond to user input without accessing the server.

3.7 Working with Frames and Linked Windows

Frames are a very advanced new feature that provides an entirely different way of looking at Web
pages. However, they are also currently supported only in Netscape 2.0, and even worse, pages
created using frames are not easily backward-compatible with other browsers.

3.7.1 What Are Frames and Who Supports Them?

Most of the features and tags discussed in previous chapters will, as a rule, basically work on just
about any Web browser. The appearance of the page might not be exactly what you had expected,
but at the very least, people with older Web browsers can still view the text and links contained on
the page.

3.7.2 Working with Linked Windows

Before looking at how frames are added to a page, you first need to learn about a new attribute of the
<A> tag called TARGET. This new attribute takes the following form:
TARGET="window_name"
Usually, when you click a hyperlink, the contents of the new page replace the current page in the
browser window. In a windowed environment, however, there is technically no reason why the
contents of the new page can't be displayed in a new window, leaving the contents of the calling page
displayed onscreen in their own window.
The TARGET attribute enables you to do just that by telling the Web browser to display the
information pointed to by a hyperlink in a window called window_name. You can basically call the
new window anything you want, with the only proviso being that you not use names that start with an
underscore (_). These names are reserved for a set of special TARGET values that you'll learn about
later in the section "Magic TARGET Names."
 When you use the TARGET attribute inside an <A> tag, Netscape first checks to see whether a
window with the name window_name exists. If it does, the document pointed to by the hyperlink
replaces the current contents of window_name. On the other hand, if no window called
window_name currently exists, a new browser window is opened and given the name
window_name. The document pointed to by the hyperlink is then loaded into the newly created
window.

The <BASE> Tag

When using the TARGET attribute with links, you'll sometimes encounter a situation in which all or
most of the hyperlinks on a Web page point to the same window-especially when using frames, as
you'll discover in the following section.
In such cases, instead of including a TARGET attribute for each <A> tag, you can use another tag,
<BASE>, to define a global target for all the links of a Web page. The <BASE> tag takes the
following form:
<BASE TARGET="window_name">
If you include the <BASE> tag in the <HEAD>...</HEAD> block of a document, every <A> tag
that does not have a corresponding TARGET attribute will display the document it points to in the
window specified by <BASE TARGET="window_name">. For example, if the tag <BASE
TARGET="first_window"> had been included in the HTML source for table1.html, the three
hyperlinks could have been written this way:

</HTML>
<HEAD>
<TITLE>Target Parent Window</TITLE>
<BASE TARGET="first_window"> ​ <!-- add BASE TARGET="value" here -->
</HEAD>
<BODY>
<H1>Target Parent Window</H1>
<P>
<A HREF="target2.html">Open</A> ​ <!-- no need to include a TARGET -->
a new window called first_window. <BR>
<A HREF="target3.html" TARGET="second_window">Open</A>
a new window called second_window.
</P>
<P>
<A HREF="target4.html">Load</A> ​ <!-- no need to include a TARGET -->
some new text into first_window.
</P>
</BODY>
</HTML>

In this case, target2.html and target4.html are loaded into the default window assigned by the
<BASE> tag; target3.html overrides the default by defining its own target window.
You can also override the window assigned by the <BASE> tag by using one of two special
window names. If you use TARGET="_blank" in a hyperlink, a new browser window is opened
that does not have a name associated with it. Alternatively, if you use TARGET="_self", the
current window is used rather than the one defined by the <BASE> tag.

3.7.3 Working with Frames

With frames, you can create Web pages that look and feel entirely different from other Web
pages-pages that have tables of tables, banners, footnotes, and sidebars, just to name a few common
features that frames can give you.
At the same time, frames change what a "page" means to the browser and to the reader. Unlike all the
previous examples, which use a single HTML page to display a screen of information, when you
create Web sites using frames, a single screen actually consists of a number of separate HTML
documents that interact with each other.
The first HTML document you need to create is called the frame definition document. In this
document, you enter the HTML code that describes the layout of each frame and indicate the name of
separate HTML document that contains the physical information to be displayed. The three remaining
HTML documents contain normal HTML tags that define the physical contents of each separate
frame area. These are the documents referenced by the frame definition document.

The frame definition document is the page that contains the layout of each frame and the names
of the HTML documents that will fill that frame.

1.​ The <FRAMESET> Tag

To create a frame definition document, you use the <FRAMESET> tag. When used in an HTML
document, the <FRAMESET> tag replaces the <BODY> tag, as shown here:
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET> your frame definition goes here.
</FRAMESET>
</HTML>
It's important to understand up front how a frame definition document differs from a normal HTML
document. If you include a <FRAMESET> tag in an HTML document, you cannot also include a
<BODY> tag. Basically, the two tags are mutually exclusive. In addition, no other formatting tags,
hyperlinks, or document text should be included in a frame definition document, except in one special
case (the <NOFRAME> tag) which you'll learn about in the section called, appropriately, "The
<NOFRAME> Tag," later in this chapter. The <FRAMESET> tags contain only the definitions for the
frames in this document: what's called the page's frameset.

A frameset is the set of frames defined by the <FRAMESET> tags in the frame definition
document
2​ The COLS Attribute
When you define a <FRAMESET> tag, you must include one of two attributes as part of the tag
definition. The first of these attributes is the COLS attribute, which takes the following form:

<FRAMESET COLS="column width, column width, ...">

The COLS attribute tells Netscape to split the screen into a number of vertical frames whose widths
are defined by column width values separated by commas. You define the width of each frame in one
of three ways: explicitly in pixels, as a percentage of the total width of the <FRAMESET>, or with an
asterisk (*). When you use the *, Netscape uses as much space as possible for the specified frame.
When included in a complete frame definition, the following <FRAMESET> tag creates a screen with
three vertical frames. The first frame is 100 pixels wide, the second is 50 percent of the width of the
screen, and the third uses all the remaining space.
<FRAMESET COLS="100,50%, *">
Note: Because you're designing Web pages that will be used on various screen sizes, you should use
absolute frame sizes sparingly. And, whenever you do use an absolute size, ensure that one of the
other frames is defined using an * to take up all the remaining screen space.

Tip: To define a frameset with three equal-width columns, use COLS="*, *, *". This way, you won't
have to mess around with percentages, because Netscape automatically gives an equal amount of
space to each frame assigned an * width.

3. The ROWS Attribute

The ROWS attribute works the same as the COLS attribute, except that it splits the screen into
horizontal frames rather than vertical ones. For example, to split the screen into two equal-height
frames, you could write either of the following:

<FRAMESET ROWS="50%,50%">
<FRAMESET ROWS="*, *">

Note: If you try either of the preceding examples for yourself, you'll find that the <FRAMESET> tag
does not appear to work. The reason for this is that currently no contents are defined for the rows or
columns in the frameset. To define the contents, you need to used the <FRAME> tag,

4​ The <FRAME> Tag

After you have your basic frameset laid out, you need to associate an HTML document with each
frame. To do this, you use the <FRAME> tag, which takes the following form:
<FRAME SRC="document URL">
For each frame defined in the <FRAMESET> tag, you must include a corresponding <FRAME> tag,
as shown here:

<FRAMESET ROWS="*,*,*">
<FRAME SRC="document1.html">
<FRAME SRC="document2.html">
<FRAME SRC="document3.html">
</FRAMESET>
In this example, a frameset with three equal-height horizontal frames has been defined. The contents
of document1.html are displayed in the first frame, document2.html in the second frame, and
document3.html in the third frame

5​ Additional Attributes
A few extra attributes can be assigned to a <FRAME> tag to give you additional control over how the
user interacts with your frames. Below table presents the details about them.
Control attributes for the <FRAME> tag.

Attribute Value Description

SCROLLING AUTO (default) By default, if the contents
of a frame take up more
space than the area
available to the frame,
Netscape automatically
adds scrollbars to either the
 side or the bottom of the
frame so that the user can
scroll through the
document.
SCROLLING NO Setting the value of
SCROLLING to NO
disables the use of
scrollbars for the current
frame. (Note that if you set
SCROLLING="NO" but
there is more text in the
document than can fit
inside the frame, the user
will not be able to scroll the
additional text into view.)
SCROLLING YES If you set SCROLLING to
YES, the scrollbars are
included in the frame
regardless of whether they
are required.
NORESIZE By default, users can move the position of
borders around each frame on the current
screen by grabbing the border and moving
it with their mouse. To lock the borders of
a frame and pre-vent them from being
moved, use the NORESIZE attribute.
MARGINHEIGHT pixels To adjust the margin that
appears above and below a
document within a frame,
set the MARGINHEIGHT
to the number indicated by
pixels.
MARGINWIDTH pixels The MARGINWIDTH
attribute enables you to
adjust the margin on the left
and right side of a frame to
the number indicated by
pixels.

6.​ The <NOFRAME> Tag

If you load a frame definition document into a Web browser that does not support frames, you get
only a blank page. To get around this problem, Netscape 2.0 includes a special tag block called
<NOFRAME> that enables you to include body text as part of the document. The <NOFRAME> tag
takes the following form:

<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<FRAMESET>
your frame definition goes here.
<NOFRAME>
Include any text, hyperlinks, and tags you want to here.
</NOFRAME>
</FRAMESET>
</HTML>
None of the text you include inside the <NOFRAME> block will be displayed by Netscape 2.0, but
when the page is loaded into a Web browser that does not support frames, it will be displayed. Using
both frames' content and tags inside <NOFRAME>, you can create pages that work nearly well with
both kinds of browsers.

3.7.4 Creating Complex Framesets

The framesets you've learned about so far represent the most basic types of frames that can be
displayed by Netscape. But in day-to-day use, you'll rarely use these basic frame designs. In all but
the simplest sites, you'll most likely want to use more complex framesets.

Combining ROWS and COLS

When you're designing complex frame layouts, the use of storyboards is an invaluable tool. The
storyboard helps you block out the structure of a frameset, and it can also be invaluable when you're
adding hyperlinks. Suppose, the top section of the screen is split into two vertical frames, and the third
frame, at the bottom of the page, spans the entire width of the screen. To create a frame definition
document that describes this layout, open your text editor and enter the following basic HTML
structural details:
<HTML>
<HEAD>
<TITLE>Complex Frames Exercise</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Next, you must decide whether you need to use a ROWS or COLS attribute in your base
<FRAMESET>. To do this, work out whether any frame areas extend right across the screen or from
the top to the bottom of the screen. If any frames extend from the top to the bottom, you need to start
with a COLS frameset; otherwise, you need to start with a ROWS frameset. On the other hand, if no
frames extend completely across the screen in either direction, you should start with a COLS
frameset.
To put it more simply, here are three easily remembered rules:

•​ Left to right, use ROWS

•​ Top to bottom, use COLS
•​ Can't decide, use COLS
Note: The reasoning behind the use of the "left to right, use ROWS" rule relates to how Netscape
creates frames. Each separate <FRAMESET> definition can split the screen (or a frame) either
vertically or horizontally, but not both ways. For this reason, you need to define your framesets in a
logical order to ensure that the desired layout is achieved.
The bottom frame extends right across the screen from side to side. As a result, by using the rules
mentioned previously, you need to start with a ROWS frameset. To define the base frameset, write
this:
<FRAMESET ROWS="*, 80">
<FRAME SRC="dummy.html"> <!-- this is the frame for row 1 -->
<FRAME SRC="dummy.html"> <!-- this is the frame for row 2 -->
</FRAMESET>

Doing this splits the screen into two sections: a small frame at the bottom of the screen that is 80
pixels high, and a large frame at the top of the screen that uses the rest of the available space. Two
<FRAME> tags have also been defined to represent the contents of each frame.

Nesting <FRAMESET> Tags

The next step in the process is to split the top frame area into two vertical frames. You achieve this
effect by placing a second <FRAMESET> block inside the base <FRAMESET> block. When one
<FRAMESET> block is nested inside another, the nested block must replace one of the <FRAME>
tags in the outside frameset.
Therefore, to split the top frame into two frame areas, you replace the <FRAME> tag for the first
frame with an embedded <FRAMESET> block. Doing this embeds the new frameset inside the area
defined for the <FRAME> tag it replaces. Inside the <FRAMESET> tag for this new block, you then
need to define a COLS attribute as shown here:

<FRAMESET ROWS="*, 80">

<FRAMESET COLS="30%, *"> <!-- the frame for row 1 -->
<FRAME SRC="dummy.html"> <!-- has been replaced -->
<FRAME SRC="dummy.html"> <!-- by an embedded -->
</FRAMESET> <!-- frameset block -->
<FRAME SRC="dummy.html"> <!-- this is the frame for row 2 -->
</FRAMESET>

The embedded COLS frameset defines two columns, the first being 30 percent of the width of the
embedded frame area and the second taking up all the remaining space in the embedded frame area. In
addition, two <FRAME> tags are embedded inside the <FRAMESET> block to define the contents of
each column.

Note: When used inside an embedded frameset, any percentage sizes are based on a percentage of the
total area of the embedded frame and not as a percentage of the total screen.

3.7.5 Naming Individual Frames

If you were to load html_frame.html into Netscape at this stage, you would see a screen similar to the
one, some of the text sizes and spacing might be slightly different, but the general picture would be
the same. If, however, you were to click any of the hyperlinks in the left frame, you would most likely
get some very strange results. To be more specific, Netscape would attempt
to load the contents of the file you select into the left frame, when what you really want it to do is load
each document into the right frame.
To make this happen, you need to use a slight variation on the TARGET attribute discussed at the
beginning of this chapter. But instead of the TARGET pointing to a new window, you want it to point
to one of the frames in the current frameset.
You can achieve this by first giving each frame in your frameset a frame name, or window name. To
do this, you include a NAME attribute inside the <FRAME> tag, which takes the following form:
<FRAME SRC="document URL" NAME="frame name">
Therefore, to assign a name to each of the frames in the html_frame.html document, you alter the
<FRAME> tags to look like this:
<FRAMESET ROWS="*, 80">
<FRAMESET COLS="30%, *">
FRAME SRC="html_contents_frame.html" NAME="Contents">
<FRAME SRC="05notes_frame.html" NAME="Chapter">
</FRAMESET>
<FRAME SRC="html_footer.html" NAME="Footer">
</FRAMESET>
This names the left frame "Contents", the right frame "Chapter", and the bottom frame "Footer". After
this, resave the updated html_frame.html file, and you're just about finished with the exercise.

3.7.6 Magic TARGET Names

You can assign four special values to a TARGET attribute, two of which (_blank and _self) you've
already encountered. Netscape calls these values Magic TARGET names. Below table lists the Magic
TARGET names and describes their use.

Magic TARGET names. TARGET Description

Name
TARGET="_blank" Forces the document referenced by the
<A> tag to be loaded into a new
"unnamed" window.
TARGET="_self" Causes the document referenced by the
<A> tag to be loaded into the window or
frame that held the <A> tag.
TARGET="_parent" Forces the link to load into the
<FRAMESET> parent of the current
document. If, however, the current
document has no parent, TARGET="_self"
will be used.
TARGET="_top" Forces the link to load into the full Web
browser window, replacing the current
<FRAMESET> entirely. If, however, the
current document is already at the top,
TARGET="_self" will be used.

How to create framesets and link them together by using the tags listed in Table below
New tags discussed in this chapter.
Tag Attribute Description
<BASE Set the global link window for a
TARGET="window document.
">
<FRAMESET> Define the basic structure of a frameset.

COLS Defines the number of frame columns and

their width in a frameset.

ROWS Defines the number of frame rows and

their height in a frameset.
<FRAME> Define the contents of a frame within a
frameset.
SRC The URL of the document to be displayed
inside the frame.
 MARGINWIDTH The size in pixels of the margin on each
side of a frame.
MARGINHEIGH The size in pixels of the margin above and
T below the contents of a frame.
SCROLLING Enable or disable the display of scroll bars
for a frame. Values are YES, NO, and
AUTO.
NORESIZE Don't allow the user to resize frames.

<NOFRAME> Define text to be displayed by Web

browsers that don't support the use of
frames.

3.8 Designing for the Mobile Web

3.8.1 What is designing for mobile?
Designing for mobile is the process of creating a web layout that adjusts to fit mobile screens and
suits the needs of touchscreen devices. But it’s about more than having a condensed mobile version of
your desktop website — it’s about actively optimizing for mobile users. Optimized websites must
consider varying screen sizes, touchscreen navigation, and load time. They also need a design that
reels users in quickly because many smartphone and tablet users access the web when they’re on the
go throughout the day. Creating a mobile version of your designs or adjusting your desktop site to
meet mobile specifications means there’s less chance that elements will load slowly or fail to display
properly. Mobile users might get frustrated and leave if the site’s un-navigable.

3.8.2 Responsive versus adaptive design

There are two main ways to build a website that works on different screen sizes: responsive and
adaptive design. Each has its pros and cons, but the best one for your client’s website depends on their
business needs.

1.​ Responsive design

Responsive web design uses mathematical queries to break down site content into breakpoints. On
different devices and screen sizes, these breakpoints automatically scale images, wrap text, and adjust
to the change in dimensions. Your website’s layout remains the same. Responsive design just
reorganizes and resizes it for a better mobile experience. This means the end user experiences the
same content, no matter their device. The content and functionality of the desktop version are still
there on mobile, just adjusted. Since the process is automatic, responsive design is future-proof. You
don’t have to create a new design every time a new device with a new screen size becomes popular.
Responsive design does it for you.

Advantages of responsive design

•​ Consistent experience across devices
•​ Smoother maintenance process
Disadvantages of responsive design
•​ Potentially slower than adaptive sites

2.​ Adaptive design

Instead of adjust ing a website automatically, adaptive web design means manually creating a new
layout for standard screen sizes — usually 320, 480, 760, 960, 1,200, and 1,600 pixels. When visitors
find your website, the adaptive design sizes it to match their screen. Manually
creating different site layouts offers more control during the design process. And with predetermined
layouts, a visitor's browser doesn’t need to adjust your website when loading the page, which leads to
faster load times. However, adaptive designs can “break” and load incorrectly on new screen sizes, so
you need to update them more frequently to match trends and new device sizes.

Advantages of adaptive design

•​ Faster performance
•​ More customizable

Disadvantages of adaptive design

•​ Can’t fit every device
•​ Takes longer to design

3.8.3 Things to consider when designing a mobile site

Here are some tips to remember for creating mobile-friendly designs.

1. Keep navigation functional

Thoughtful website navigation is crucial to delivering the best user experience (UX) possible. With
limited space on smartphone screens, you must compress buttons and menus without compromising
usability.
Touchscreen operation and thumb positioning make it harder for users to find and tap small elements,
so they need to be even more clear than usual. All of the steps in the user journey will be the same,
but mobile design emphasizes where people move from one step of that journey to the next.
Here are some ways to do this:
•​ Design finger-friendly buttons. Make links and buttons large and distinct so users know
where they’re going and don’t have to zoom in to navigate.
•​ Highlight important navigation. Emphasize the menu bar and important CTAs that drive
users to the information they seek.
•​ Add a search bar. Presenting a prominent search bar is especially handy on smartphones
when visitors want to find information fast, like a specific ecommerce item.

2. Create consistent content

When users visit the same site on different devices, they should know what to expect. They’ll get
confused if your mobile version has vastly different content features than your desktop website —
another reason why responsive design, which keeps the same elements, might be a better choice than
adaptive design, which allows more changes.
Maintain your branding elements and user flow across devices. Keep colours, text, and tone
consistent, and use the same navigation options. Mobile versions can take some liberties, like resizing
buttons and text for clarity, but they should ultimately be recognizable.
Use designs that:
•​ Maintain logical flow. Present information in the same places on both desktop and mobile so
visitors don’t have to guess where to find content.
•​ Limit pop-ups. Pop-up ads and forms take up more space on mobile than on desktop.
Shrink or relocate them so they serve the same purpose without being disruptive.

3. Take advantage of mobile features

Mobile screens don’t offer the same size and navigation capabilities as desktops. But that
doesn’t have to be a bad thing. The small screen lets you pare down your website design and
show off what matters. And you can use other mobile-specific characteristics — like mobile
SEO and location services — to your advantage.
Make sure you:

•​ Improve SEO. Google uses mobile-first indexing, which means it crawls the mobile
version of your website and chooses how to rank you based on the content and structure of
your mobile site.
•​ Use location services. Unlike the generally static location of desktop devices,
smartphone locations constantly change. Location services help mobile websites serve
specific, location-based content or targeted ads.
•​ Consider download speed. Designing a website that takes speed into account
enhances the on-the-go mobile UX. Choose a minimalist design to improve load times.

3.8.4 Mobile website design best practices

Here are seven best practices to follow.

1.​ Use larger text

The biggest difference between desktops and mobile devices (especially smartphones) is the
size of the screen. The average size of a smartphone display is 6.3 inches, compared to
laptops that have displays ranging from 11” - 17”, and computer monitors that are often 20”
or bigger. So, when designing your site for mobile your first priority should be making sure
that your headlines and content are still legible on a smaller screen. This means increasing the
size of your text. Sure, most devices give you the ability to zoom in if needed, but that’s not
great for your user experience. Ideally, all your text can be read right away without having to
make any adjustments.

2. Make your buttons bigger

Just as important as your content are your CTA buttons. These allow visitors to take the next
step and are critical for gathering leads and making sales. If your buttons are too small, users
won’t be able to read your button text. They’ll also have trouble clicking them with their
thumb or finger. Just like text, users can zoom in on your buttons—but it’s best if they don’t
have to. Instead, ensure your buttons are the right size for the screen so they’re easy to click
and read as soon as your page loads.

3. Simplify your menus

Dropdown menus are great for websites that have lots of pages. You can create categories and
subcategories for your pages, making it quick and easy for visitors to find what they’re
looking for. There’s just one problem: they don’t work for mobile devices. Without a mouse,
dropdown menus are clunky and the smaller screen makes them difficult to use. If your
desktop website utilizes dropdown menus, it’s a good idea to switch to a simpler menu for the
mobile version. Start by reducing the number of options. You might want to choose your top
five most popular pages and list those. Instead of dropdowns, direct users to pages that list
your various categories. This will make it easier for them to click the option they want.
4. Include a search feature
Perhaps the best way to help mobile visitors find what they’re looking for is to include a
search feature. This essentially negates the need for a menu altogether and allows users to
simply tell you what they want. Many mobile website designs place the search feature front
and centre, allowing it to take precedence over the menu. If your website has a lot of
categories and pages, this is probably a smart choice.

5. Optimize your images

Images are just as important for conveying your message as words, so you’ll want them to
display properly.
Here are a few tips:
•​ Make sure your images can be seen on even the smallest screens. You might have to
realign your site so images can fill the entire screen.
•​ Avoid landscape photos. Most people use their phones in the upright position, which
will make landscape images appear smaller. User square or portrait photos instead.
•​ Compress your images as much as possible. Mobile devices don’t have the same
computing power as desktops, so images that are too large could increase load times.

The right imagery can be the difference between making a sale or losing a customer, so
ensure your images have the chance to shine no matter what device they’re viewed on.

6.Build your pages for thumbs

A big part of mobile website design is remembering that visitors will be using their thumbs,
not a mouse and keyboard, to interact with the various elements on your page. A good
exercise is to pick up a smartphone and see which areas are easily accessible with your
thumbs. You’ll find that the corners are difficult to reach comfortably, and bigger phones
make it virtually impossible to reach the top of the screen. So, if there’s a button you want
people to click put it somewhere that’s accessible with a thumb—ideally right in the middle
of the screen.

7. Make it easy to get in touch with you

As you can see, in order to make a site mobile-friendly, it often has to be simplified. While
this provides a better user experience, it might leave visitors with questions if some elements
or information has to be removed. In order to provide answers, make it easy for them to speak
with you or a member of your team. Here are a few options:
•​ Offer a chat service to connect users to your team. Or use chat bots to answer
frequently asked questions.
•​ Provide clickable phone numbers so visitors can call you.
•​ Use a simplified contact form or a link that takes them straight to their email so they
can send you a message.

3.9 Designing for user experience

3.9.1 What Is UX Design?
User experience (UX) refers to the user’s journey when interacting with a product or service.
UX design is the process of creating products or services that provide meaningful experiences
for users, involving many different areas of product development including branding,
usability, function, and design.
One way to think of UX design is to consider the entire process or journey a user experience
when interacting with a product or service. How is the user introduced to the service or
product — through advertising, blogs, or something else? What kind of interaction does the
user have with the brand? How does the user feel after the interaction? All of these questions
and more are key considerations within UX design.
A UX designer’s primary goal is for each user to have a positive interaction with a product or
service. Whether the interaction solves a problem, provides entertainment, or helps the user
find critical information, the experience should leave the user feeling fulfilled.

3.9.2 What Is UI Design?

UI design, on the other hand, refers to the actual interfaces with which users engage. The UI
design process may include buttons or widgets, text, images, sliders, and other interactive
elements. UI designers ensure that every visual element, transition, and animation included
within a product or service is setting the stage for a fluid, positive experience.

3.9.3 Key Differences Between UX and UI Design

Since UX and UI designers often work closely together, it’s common for UX and UI to be
confused with one another — even though they represent different components of a product
or service’s design. While there is some overlap between the two roles, there are several key
differences to consider.

1.​ Look vs. Feel

UX and UI design play related, but different roles in a product’s development. UI design
involves the look of a product — namely, the visual components and interactive elements that
contribute to a strong user experience. Meanwhile, UX design focuses on the overarching feel
of the product or service and the components that will lead to a meaningful, relevant
experience for users.

2.Design vs. Prototyping

UX and UI designers might work on the same product, but they have different duties and
goals. UX designers often create wireframes and testable prototypes that form the basis of a
website or service’s user flow, while UI designers finalize products and designs that drive
user engagement.

3.High-Level vs. Details

Another difference between UI and UX designers is the level of detail that goes into their
work. UI designers work on individual pages, buttons, and interactions; making sure they are
polished and functional. UX designers take a more high-level view of a product or service,
ensuring the collective user flow of a site, service, or app is fully realized and consistent.

3.9.4 UX and UI Design Together. How Does it Work?

Though they comprise different responsibilities, UX and UI make up a site or application’s
entire usability design process. In tandem, these professions are complementary contributors
to a positive, intuitive user journey. A site or application’s UX elements (e.g., client-facing
messaging and feel), are built on top of its UI design (e.g., technical, aesthetic structure).
Each profession’s efforts inform those of its counterpart, benefiting the overall product or
service and making a lasting impression on users.
3.9.5 What Does a UX Designer Do?
Specifically, UX designer responsibilities include strategy development, testing,
implementation, and analysis of products/services and their overall designs.
Content Strategy
Content strategy focuses on the planning, creation, and execution of content which can
include text, images, and multimedia elements on a page or in an application. Content
strategy isn’t always the responsibility of a UX designer, but more companies are
emphasizing content-driven design to deliver a more effective experience.
Tasks involved with UX content strategy include:
•​ Customer analysis
•​ Content auditing and mapping
•​ Competitor analysis

Testing and Prototyping

Testing and prototyping are important parts of the UX design process. Most designs go
through multiple iterations before they are finalized, and these changes are backed up along
the way.
Knowledge of common research methodologies (such as A/B testing) is also an asset to UX
design.
Tasks involved with testing and prototyping include:
•​ A/B testing between button placements, text layouts, or other design elements
•​ Wireframing the basic structure of designs
•​ Prototyping designs to test for function
Coordination and Analysis
Typically, UX designers work with a broader design team to create products and services for
an organization. This process involves planning, developing strategy, executing, and
analyzing projects after implementation. UX designers spend a lot of time planning for future
projects, analyzing existing designs, and tracking the performance of their designs.
Common coordination and analysis tasks include:
•​ Design planning
•​ Analyzing designs and updating as needed
•​ Tracking goals and metrics
Consumer Research
The best UX designs are driven by research, which informs UX designers about their
problems and what can be solved by a specific design. UX research can involve
questionnaires, surveys, focus groups, product testing, or other research methodologies. The
specific research methodologies depend on what a company wants to know about a product
or its users.
For example, qualitative data from interviews can show an organization how consumers feel
about a product or service, while quantitative data from surveys can show how users view or
utilize a new feature or redesign. Developing the right type of research can have a major
impact on a product’s performance.
Common consumer research tasks include:
•​ Designing research instruments
•​ Conducting focus groups
•​ Analyzing data from questionnaires and surveys

3.9.6 What Does a UI Designer Do?

UI designers oversee the specifics of a product or service’s interface. They’re responsible for
choosing fonts, creating visual elements, and making sure individual components or pages are
visually appealing and fit a product’s objectives. UI designers are in charge of the overall
style and functionality of a product or service’s design.
Creating and Maintaining Brand Style
Establishing a defined visual brand style is crucial for most modern businesses and, from a
usability standpoint, this is a primary component in the UI design process. UI designers are
often tasked with creating products or entities that are aesthetically consistent with an
overarching brand.
Tasks involved with maintaining brand style include:
•​ Creating brand style guides
•​ Maintaining accessible design standards
•​ Implementing a brand’s style consistently across a product or service
Visual Design
UI designers build and optimize the individual elements of a digital entity, including
typography, color, button design, and other fields contributing to a strong interface.
Tasks involved with building visual design include:
•​ Designing buttons and other clickable elements
•​ Coloring sections and elements of a website or service
•​ Choosing appropriate fonts and typesetting
Interactive Design
Many UI designers also develop and implement the interactive elements of a website or
service. This process could include animations or other interactive elements. For example, a
UI designer might create a website animation that triggers after a user clicks a button.
Examples of interactive design tasks in UI design include:
•​ Creating animations for elements on a page
•​ Developing interactive elements that involve visuals like video or photos
•​ Managing how content moves as the user interacts with it
Responsive Design
Modern products and services need to be accessible across a wide variety of devices,
including laptops, desktops, tablets, and smartphones. Responsive design refers to the process
of creating content that can be viewed on as many types of devices as possible. This is
especially important for web design — sites should be viewable and usable on everything
from a 27-inch monitor to a 5-inch smartphone screen.
Examples of responsive design tasks include:
•​ Developing flexible website or program layouts
•​ Creating easily resizable vector elements
•​ Managing responsive design style guides