Lesson# 1 - Introduction to Front-End Development

Learning objectives

 Realize some basic tasks in front-end development

 Identify core technologies in front-end development

What is Front-End Development?

You surely would have come across multiple websites and may have seen varying styles, colors, themes,
and layouts of these websites. Look at the figure below. It is the Login page of Facebook. You can see the
title “Facebook” written in blue, placed on the left side of webpage and a form to the right side of the
same page. There are two buttons; one is the “Log In” button colored blue while the second is for
creating a new account colored in green. What you can notice is a proper structure and layout of this
webpage. This way of structuring and rendering things on a webpage is what we call front-end
development. It primarily deals with the look and feel of a webpage.

1. What are the tasks involved in Front-End Development?

Now that you have some idea of what front-end development is. Let us look into some tasks specific to a
front-end developer. A front-end developer is responsible for structuring content by following the User
Interface (UI) design, which is the job of a web designer. Analysis of code and visual presentation of
content in a way that not only is it responsive but also pertains to user experience, all these tasks are
managed by a front-end developer.

1. Difference between Front-End and Back-End

Have you ever noticed that Facebook’s login page always remains the same? Whenever you open that
webpage, it always displays a form to log in and sign up. On the other hand, your Facebook news feed
webpage is always changing and displaying latest posts by your friends and followed pages. If you look
at your news feed of Facebook, you can see a search bar on top-left of the page, below it are Facebook
stories, your contacts on the right, and then there is space in the middle for news feed. That is all what a
front end is, the things you can view, how they are displayed, what styles are applied and what fonts are
used. Front-end constitutes of the interface with which the user interacts.

However, there is another side of the same webpage. Do you wonder how you are actually able to see
latest posts by your friends? Your news feed is updated after every few minutes. You can view people’s
stories every day. All these posts and stories change with time and display on the same page. That is
where back-end development comes.

A front-end developer can tell a web browser that how it shall structure the content you want to
display. A back-end developer on the other hand will program things in a way that every time new data
can be populated in the same page without disturbing the styles and layout of webpage. A user cannot
understand or see how dynamic data is being delivered to him on a webpage and that is why it is
referred to as bank-end. Back-end developers work on making webpages dynamic and interactive.

HTML, CSS and JavaScript

As described in above video, technologies used on the front-end of webpages are HTML, CSS and
JavaScript. You can analyze the difference in purpose of each the three languages in the figure below.
Importance of Front-End Development
Front-end has a crucial role in the development of web applications. A few points signifying its
importance have been listed below:

 Usability: Consideration of the effectiveness and efficiency of a web design so that the end user
is satisfied with the overall experience.
 Search Engine Optimization (SEO): Searching of relevant information on a search engine
becomes easier and efficient if content in a webpage is properly formatted.
 Responsive web design: A web page opened in a web browser on your laptop must look
the same on your mobile phone or tablet. You will be learning Bootstrap for responsive web
designs in upcoming topics.
Lesson# 2 – URL - Uniform Resource Locator
Learning objectives

After completing this topic, a student will be able to:

 Describe what is URL

 Describe what is URI
 Identify the parts of a URL
 Describe what is Dynamic URL
 Describe what is URL encoding

What is the World Wide Web?

The World Wide Web, commonly known as The Web, is an information system where documents and
other web resources are identified by Uniform Resource Locators, which may be interlinked by
hyperlinks, and are accessible over the Internet.
What is a Web Address?

The web address contains information about the location of the webpage. It is also known as the URL .
Like the address for your home, a web address organizes information about a webpage's location in a
predictable way.

Example: https://www.vu.edu.pk/

The ASCII Character Set

ASCII stands for the "American Standard Code for Information Interchange". It was designed in the early
'60s, as a standard character set for computers and electronic devices. ASCII is a 7-bit character set
containing 128 characters. It contains the numbers from 0-9, the upper and lower-case English letters
from A to Z, and some special characters. The character sets used in modern computers, in HTML, and
on the Internet, are all based on ASCII.

What is a URL?

A URL is another word for a web address. A URL can be composed of words (e.g. example.com), or an
Internet Protocol (IP) address (e.g. 192.68.20.50). Most people enter the name when surfing, because
names are easier to remember than numbers. Web browsers request pages from web servers by using a
URL. A URL is used to address a document (or other data) on the web.

What is a protocol identifier?

The protocol identifier indicates the name of the protocol to be used to fetch the resource.

Example: http://example.com

The example uses the Hypertext Transfer Protocol (HTTP), which is typically used to serve up hypertext
documents. HTTP is just one of many different protocols used to access different types of resources on
the net.

What is a Dynamic URL?

A dynamic URL is the address or URL of a Web page with content that depends on variable parameters
that are provided to the server that delivers it. The parameters may be already present in the URL itself
or they may be the result of user input.

If the content of a web site is stored in a database and pulled for display on pages on demand, dynamic
URLs maybe used. In that case the web site serves basically as a template for the content.

Usually, a dynamic URL would look something like this:

http://code.google.com/p/google-checkout-php-sample-code/issues/detail?id=31.

You can spot dynamic URLs by looking for characters like: ? = & etc.
Lesson# 3 – HTTP Basics
Learning objectives

After completing this topic, a student will be able to:

 Describe HTTP
 Identify different forms of HTTP requests
 Describe HTTPS

What is HTTP and how it works?

Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia
documents, such as HTML. It was designed for communication between web browsers and web
servers, but it can also be used for other purposes. HTTP follows a classical client-server model,
with a client opening a connection to make a request, then waiting until it receives a response.
HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two
requests.

What is request–response method?

In computer science, request–response or request–reply is one of the basic methods computers
use to communicate with each other in a network, in which the first computer sends a request for
some data and the second responds to the request.

What is HTTP caching?

Caching is a technique that stores a copy of a given resource and serves it back when requested.
When a web cache has a requested resource in its store, it intercepts the request and returns its
copy instead of re-downloading from the originating server.

Benefits of HTTP caching

The performance of web sites and applications can be significantly improved by reusing
previously fetched resources. Web caches reduce latency and network traffic and thus lessen the
time needed to display a representation of a resource. By making use of HTTP caching, Web sites
become more responsive.

What is SSL?
SSL stands for Secure Sockets Layer and, in short, it's the standard technology for keeping an
internet connection secure and safeguarding any sensitive data that is being sent between two
systems, preventing criminals from reading and modifying any information transferred, including
potential personal details.

What is SSL certificate?

 SSL certificates are small data files that cryptographically establish an encrypted link between a
web server and a browser. This link ensures that all data passed between the web server and
browser remain private.

Lesson# 4 – Web Server, Services and Agents

Learning objectives

After completing this topic, a student will be able to:

 Describe Web Server, Services and Agents

What is a server?
In computing, a server is a piece of computer hardware or software that provides functionality for
other programs or devices, called "clients". This architecture is called the client–server model.

What is a client?
A client is a piece of computer hardware or software that accesses a service made available by a server
as part of the client–server model of computer networks. The server is often on another computer
system, in which case the client accesses the service by way of a network.

What is an API?
API is the acronym for Application Programming Interface, which is a software intermediary that allows
two applications to talk to each other. Each time you use an app like Facebook, send an instant message,
or check the weather on your phone, you’re using an API.

Understanding XML
Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding
documents in a format that is both human-readable and machine-readable. XML is a markup language
much like HTML. XML was designed to store and transport data. Typically, Web Service resides on a Web
Server use XML to communicate messages. XML is just information wrapped in tags.

XML example
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The XML above is quite self-descriptive:

It has sender information.

It has receiver information

It has a heading

It has a message body.

The XML language has no predefined tags.

The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags
are "invented" by the author of the XML document.

The Difference Between XML and HTML

XML was designed to carry data with focus on what data is. HTML was designed to display data with
focus on how data looks. XML tags are not predefined like HTML tags are.
Lesson# 5 – Domain, Hosting, FTP
Learning objectives

After completing this topic, a student will be able to:

 Describe what is Domain Name

 Identify Parts of Domain name
 Describe what is hosting
 Describe what is FTP, FTP server and FTP client

What is a Domain Name?

A domain name is a unique, easy-to-remember address used to access websites, such as 'google.com',
and 'facebook.com'. Users can connect to websites using domain names thanks to the DNS system.

What is DNS?
The Domain Name System (DNS) is the phonebook of the Internet. When users type domain names such
as ‘google.com’ or ‘nytimes.com’ into web browsers, DNS is responsible for finding the correct IP
address for those sites. Browsers then use those addresses to communicate with origin servers to access
website information. This all happens thanks to DNS servers: machines dedicated to answering DNS
queries.

What is Web hosting?

Web hosting is a service that allows organizations and individuals to post a website or web page onto
the Internet. A web host, or web hosting service provider, is a business that provides the technologies
and services needed for the website or webpage to be viewed in the Internet.

What is a packet?
Packets are the basic units of communication over a TCP/IP network. Devices on a TCP/IP network divide
data into small pieces, allowing the network to accommodate various bandwidths, to allow for multiple
routes to a destination, and to retransmit the pieces of data which are interrupted or lost. Each piece is
a packet, a term interchangeable with datagram.

What is TCP?
Transmission Control Protocol (TCP) – a connection-oriented communications protocol that facilitates
the exchange of messages between computing devices in a network.

What is FTP server?

An FTP Server (which stands for File Transfer Protocol Server) is a software application which enables
the transfer of files from one computer to another.

If you send files using FTP, files are either uploaded or downloaded to the FTP server. When you’re
uploading files, the files are transferred from a personal computer to the server. When you’re
downloading files, the files are transferred from the server to your personal computer.

What is FTP Client Software?

An FTP Client is a software designed to transfer files back-and-forth between a computer and a server
over the Internet. It needs to be installed on your computer and can only be used with a live connection
to the Internet.

With an FTP Client uploading/downloading a file is really easy. Furthermore, FTP clients have some extra
features. For example, you can resume a download that did not finish successfully. This is a very nice
feature for people with slower Internet connections.

Lesson# 6 – Fundamentals of HTML

Learning objectives

After completing this topic, a student will be able to:

 Display text using HTML headings

 Use horizontal Rules
 Use <head> element
 Use <title> element
 Use HTML <meta> element
 Use HTML Line Breaks

What is HTML?
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages
and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and dynamic.
It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML
tags and each HTML tag contains different content.

HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the content.
With the help of tags, a web browser can distinguish between an HTML content and a simple content.
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are
unclosed tags.

An HTML file must have some essential tags so that web browser can differentiate between a simple
text and HTML text. You can use as many tags you want as per your code requirement.

All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>

What is Meta data?

Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description, keywords, author of the document, and
viewport settings. Metadata will not be displayed on the page, but is machine parsable.

Example:

<head>
<meta charset="UTF-8">
 <meta name="description" content="Virtual University">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

What is a search engine?

A search engine is a software program that helps people find the information they are looking for online
using keywords or phrases.

Search engines are able to return results quickly—even with millions of websites online—by scanning
the Internet continuously and indexing every page they find.

When a user enters a search term, the search engine looks at the website page titles, contents and
keywords it has indexed and uses algorithms (step-by-step operations) to produce a list of sites—with
the most relevant websites at the top of the list.

Lesson# 7 – HTML Basics

Learning objectives

After completing this topic, a student will be able to:

 Describe HTML document

 Use HTML heading tags
 Use HTML Paragraph element
 Use HTML image element

Definition of an HTML Document

An HTML document is a file containing hypertext markup language. HTML code is based on tags, or
hidden keywords, which provide instructions for formatting the document. A tag starts with an angle
bracket and the 'less than' sign: '<'. The tag ends with an angle bracket and the 'greater than' sign '>'.
Tags tell the processing program, often the web browser, what to do with the text. For example, to
make the word 'Hello' bold, you would use the opening bold tag <b> and then the closing bold tag </b>,
like this:

<b>Hello</b>

HTML is defined by the World Wide Web Consortium, an organization that regulates standards for the
Internet. Each version of HTML has a set of definitions. Note that HTML is not a programming language.
While we often refer to HTML markup as HTML code, programming languages require the processing of
logical statements and math. HTML allows the developer to make text documents look engaging and
pleasant. In most cases, programming on an HTML document is done with JavaScript.

The Meaning of <!DOCTYPE html>

The very first line in every web document should contain a <!DOCTYPE html> declaration. Even though
it's wrapped in angle brackets, it is not a tag but a statement.

Doctype stands for Document Type Declaration. It informs the web browser about the type and version
of HTML used in building the web document. This helps the browser to handle and load it properly.

The <html> tag

The <html> tag represents the root of an HTML document.

The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

What are HTML attributes?

HTML attributes are special words used inside the opening tag to control the element's behavior. HTML
attributes are modifiers of an HTML element type.

All HTML elements can have attributes. Attributes provide additional information about elements.
Attributes are always specified in the start tag. Attributes usually come in name/value pairs like:
name="value".

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:

Example

<img src="img_girl.jpg">
Lesson# 8 – HTML Elements and Attributes
Learning objectives

After completing this topic, a student will be able to:

 Describe and use HTML Elements

 Use nested HTML elements
 Use empty HTML elements

What is element in HTML?

An element in HTML represents some kind of structure or semantics and generally consists of a start tag,
content, and an end tag. The following is a paragraph element:

<p>

This is the content of the paragraph element.

</p>

What are HTML attributes?

An attribute defines a property for an element, consists of an attribute/value pair, and appears within
the element’s start tag. An element’s start tag may contain any number of space-separated
attribute/value pairs.

For example:

<img src="foobar.gif">

Case Insensitivity in HTML Tags and Attributes

In HTML, tag and attribute names are not case-sensitive. It means the tag <P>, and the tag <p> defines
the same thing in HTML which is a paragraph.

Example
<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>

Empty HTML Elements

Empty elements (also called self-closing or void elements) are not container tags — that means, you can
not write <hr>some content</hr> or <br>some content</br>.
A typical example of an empty element, is the <br> element, which represents a line break. Some other
common empty elements are <img>, <input>, <link>, <meta>, <hr>, etc.

Nesting HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>
The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

Lesson# 9 – HTML Elements and Attributes_2

Learning objectives

After completing this topic, a student will be able to:

 Describe and Use different HTML attributes

 Describe why Always Use Lowercase Attributes
 Describe why Always Quote Attribute Values

Recap
An element in HTML represents some kind of structure or semantics and generally consists of a start
tag, content, and an end tag. An attribute defines a property for an element.

HTML elements can be nested (this means that elements can contain other elements).

Empty elements (also called self-closing or void elements) are not container tags.

In HTML, tag and attribute names are not case-sensitive. The HTML5 standard does not require
lowercase tags, but W3C recommends lowercase in HTML4, and demands lowercase for stricter
document types.

HTML lang Attribute

The lang attribute specifies the language of the element's content.

Common examples are "en" for English, "es" for Spanish, "fr" for French, and so on.

Syntax

<element lang="language_code">
Example

<!DOCTYPE html>

<html lang="en-US">

<body>

<h1>My Heading</h1>

<p>My paragraph.</p>

</body>

</html>

HTML title Attribute

The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

The title attribute can be used on any HTML element (it will validate on any HTML element. However, it
is not necessarily useful).

Syntax

<element title="text">

Example

<p title="paragraph">

This is a paragraph.

</p>

Different HTML Attributes

All HTML elements can have attributes

 The href attribute of <a> specifies the URL of the page the link goes to
 The src attribute of <img> specifies the path to the image to be displayed
 The width and height attributes of <img> provide size information for images
 The alt attribute of <img> provides an alternate text for an image
 The style attribute is used to add styles to an element, such as color, font, size, and more
  The lang attribute of the <html> tag declares the language of the Web page
 The title attribute defines some extra information about an element
 The disabled attribute is a boolean attribute. When present, it specifies that the element should
be disabled.
 The id attribute specifies a unique id for an HTML element.
 The value attribute specifies the value of an <input> element.

Lesson# 10 – Heading and Paragraph

Learning objectives

After completing this topic, a student will be able to:

 Display text using HTML headings

 Use horizontal Rules
 Use <head> element
 Use <title> element
 Use HTML <meta> element
 Use HTML Line Breaks
 Use HTML <pre> element

What is HTML?
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages
and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and dynamic.
It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic
type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML
tags and each HTML tag contains different content.
 HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the content.
With the help of tags, a web browser can distinguish between an HTML content and a simple content.
HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are
unclosed tags.

An HTML file must have some essential tags so that web browser can differentiate between a simple
text and HTML text. You can use as many tags you want as per your code requirement.

All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

Syntax

<tag> content </tag>

What is Meta data?

Metadata is data (information) about data. <meta> tags always go inside the <head> element, and are
typically used to specify character set, page description, keywords, author of the document, and
viewport settings. Metadata will not be displayed on the page, but is machine parsable.

Example:

<head>
<meta charset="UTF-8">
<meta name="description" content="Virtual University">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

What is a search engine?

A search engine is a software program that helps people find the information they are looking for online
using keywords or phrases.
Search engines are able to return results quickly—even with millions of websites online—by scanning
the Internet continuously and indexing every page they find.

When a user enters a search term, the search engine looks at the website page titles, contents and
keywords it has indexed and uses algorithms (step-by-step operations) to produce a list of sites—with
the most relevant websites at the top of the list.

Lesson# 11 – HTML Styling

Learning objectives

After completing this topic, a student will be able to:

 Use HTML styling

 Use HTML style attribute
 Use different properties of the style attribute
 Use HTML formatting elements

HTML Tags
HTML Tags: Tags are the starting and ending parts of an HTML element. They begin with < symbol and
end with > symbol. Whatever written inside < and > are called tags.

Example:

<b> </b>

HTML elements
HTML elements: Elements enclose the contents in between the tags. They consist of some kind of
structure or expression. It generally consists of a start tag, content and an end tag.

Example:

<b>This is the content.</b>

Where, <b> is the starting tag and </b> is the ending tag.

HTML Attributes
HTML Attributes: It is used to define the character of an HTML element. It always placed in the opening
tag of an element. It generally provides additional styling (attribute) to the element.

Example:
<p align="center">This is paragraph.</p>

What is HTML Style Attribute?

The style attribute specifies an inline style for an element.

The style attribute will override any style set globally.

The HTML style attribute has the following syntax:

style="property:value"

Example

Use of the style attribute in an HTML document:

<h1 style="color:blue;text-align:center">This is a header</h1>

<p style="color:green">This is a paragraph.</p>

Result:

HTML Style Properties

 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Formatting Elements

HTML also defines special elements, for defining text with a special meaning.

HTML uses elements like <b> and <i> for formatting output, like bold or italic.
Following are some of the formatting elements:

HTML <b> element

The HTML <b> element defines bold text, without any extra importance.

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

The HTML <i> element

The HTML <i> element defines italic text, without any extra importance.

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

The HTML <em> element

The HTML <em> element defines emphasized text, with added semantic importance.

<p>This text is normal.</p>

<p><em>This text is emphasized</em>.</p>

The HTML <small> element

The HTML <small> element defines small text:

<h2>HTML <small>Small</small> Formatting</h2>

The HTML <mark> element

The HTML <mark> element defines marked or highlighted text:

<h2>HTML <mark>Marked</mark> Formatting</h2>

The HTML <del> element

The HTML <del> element defines deleted (removed) of text.

<p>My favorite color is <del>blue</del> red.</p>

The HTML <sub> element

The HTML <sub> element defines subscripted text.

<p>This is _subscripted text.</p>

Lesson# 12 – HTML Quotations

Learning objectives

After completing this topic, a student will be able to:

 Describe and use different tags for HTML quotations

Quotations in HTML

Many times, there is a need to add quotations in HTML. These might include popular sayings, important
references, or even addresses. There are many tags that are used for this purpose.

In this topic we will study about HTML quotations and associated tags.

HTML Quotation tags

Mostly, the <q> tag is used to define short quotations and the <blockquote> tag is used to define a large
quotation. These quotations are displayed as a different text altogether, with different alignment,
quotation marks, italicized, etc.

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation