UNIT - I

Web Development Basics:

Understanding the Basic Web Development Framework:

 This topic focuses on the fundamental components of the web development framework
and then describes the components of the Node.js-to-Angular stack and discusses
various aspects of the general website/web application development framework from
users to backend services.
 The main components of any given web framework are the user, browser, webserver,

and backend services.

 In the following figure, components are described in a top-down manner from user
down to backend services.

Figure 1.1 Diagram showing the components of a basic website/web application.

User:
Users are a fundamental part of all websites; User expectations define the requirements for
developing a good website, and these expectations have changed a lot over the years.

 The user role in a web framework is to sit on the visual output and interaction input of
webpages. That is, users view the results of the web framework processing and then
provide interactions using mouse clicks, keyboard input, and swipes and taps on mobile
devices.
Browser
The browser plays three roles in the web framework.
 First, it provides communication to and from the webserver.
 Second, it interprets the data from the server and renders it into the view that the user
actually sees.
 Finally, the browser handles user interaction through the keyboard, mouse,
touchscreen, or other input device and takes the appropriate action.

 Browser to Webserver Communication

 Browser-to-webserver communication consists of a series of requests using the
HTTP and HTTPS protocols.
 Hypertext Transfer Protocol (HTTP) defines communication between the browser and
the webserver.
 HTTP defines what types of requests can be made as well as the format of those
requests and the HTTP response.
 HTTPS adds an additional security layer, SSL/TLS, to ensure secure connections by
requiring the webserver to provide a certificate to the browser. The user then can
determine whether to accept the certificate before allowing the connection.
The browser makes three main types of requests to the server:
GET: The GET request is typically used to retrieve data from the server, such as .html
files, images, or JSON data.

POST: POST requests are used when sending data to the server, such as adding an item
to a shopping cart or submitting a web form.

AJAX: Asynchronous JavaScript and XML (AJAX) is actually just a GET or POST request
done directly by JavaScript running in the browser. Despite the name, an AJAX request
can receive XML, JSON, or raw data in the response.

 Rendering the Browser View

The screen that the user actually views and interacts with is often made up of several
different pieces of data retrieved from the webserver.
The browser reads data from the initial URL and then renders the HTML document to
build a Document Object Model (DOM).
The DOM is a tree structure object with the HTML document as the root. The structure
of the tree basically matches the structure of the HTML document.
For example, the document will have html as a child, and html will have head and body
as children, and body may have div, p, or other elements as children, like this: document
+ html
+ head
+ body
+ div
+ p.
The browser interprets each DOM element and renders it to the user’s screen to build the
webpage view.

The browser often ends up getting various types of data from multiple webserver requests to
build the webpage.

The final view of the web page/web page behaviour is contains following content.

 HTML files: These provide the fundamental structure of the DOM.

 CSS files: These define how each of the elements on the page is to be styled;
for example, font, colour, borders, and spacing.
 Client-side scripts: These are typically JavaScript files. They can provide added
functionality to the webpage, manipulate the DOM to change the look of the webpage,
and provide any necessary logic required to display the page and provide functionality.
 Media files: Image, video, and sound files are rendered as part of the webpage.
 Data: Any data, such as XML, JSON, or raw text, can be provided by the webserver as a
response to an AJAX request. Rather than sending a request back to the server to
rebuild the webpage, new data can be retrieved via AJAX and inserted into the webpage
via JavaScript.
 HTTP headers: The HTTP protocol defines a set of headers that can be used by the
browser and client-side scripts to define the behaviour of the webpage.
For example, cookies are contained in the HTTP headers. The HTTP headers also define
the type of data in the request as well as the type of data expected to be returned back
to the browser.
 User Interaction
 The user interacts with the browser via input devices such as mice, keyboards, and
touchscreens.
 The browser has an elaborate event system that captures these users input events
and then takes the appropriate action. Actions vary from displaying a popup menu
to loading a new document from the server to executing client-side JavaScript .

Webserver
 The webserver’s main focus is handling requests from browsers.
 the browser may request a document, post data, or perform an AJAX request to get a
data.
 The webserver uses the HTTP headers as well as the URL to determine what action to
take.
 Different responses things will be generated depending on the server, its
configurations and technologies.
 Example: Apache and IIS, are made to serve static files such as .html, .css, and media
files.
 To handle POST requests that modify server data and AJAX requests to interact with
backend services, webservers need to be extended with server-side scripts.
 A server-side program is really anything that can be executed by the webserver to
perform the task the browser is requesting. These can be written in PHP, Python, C,
C++, C#, Java, … the list goes on and on. Webservers such as Apache and IIS provide
 mechanisms to include server-side scripts and then wire them up to specific URL
locations requested by the browser.
 The server-side scripts either generate the response directly by executing their code or
connect with other backend servers such as databases to obtain the necessary
information and then use that information to build and send the appropriateresponse.

 Backend Services:
 Backend services are services that run behind the webserver and provide data used to build
responses to the browser.
 The most common type of backend service is a database that stores information.
 When a request comes in from the browser that requires information from the database or
other backend service, the server-side script connects to the database, retrieves the
information, formats it, and then sends it back to the browser.
 Conversely, when data comes in from a web request that needs to be stored in the database,
the server-side script connects to the database and updates the data.

Our course that is FSD Syllabus: Web Development Framework

Understanding the Node.js-to Angular Stack

Components:
 This web development stack is the Node.js-to-Angular stack comprised of MongoDB, Express,
Angular, and Node.js.
 Node.js provides the fundamental platform for development. The backend services and
server-side scripts are all written in Node.js.
 MongoDB provides the data store for the website but is accessed via a MongoDB driver
Node.js module.
 The webserver is defined by Express, which is also a Node.js module.
 The view in the browser is defined and controlled using the Angular framework.
 Angular is an MVC framework where the model is made up of JSON or JavaScript objects, the
view is HTML/CSS, and the controller is made up of Angular JavaScript.

Figure 1.2 provides a basic diagram of how the Node.js-to-Angular stack fits into the basic
website/web application model.

The following sections describe each of these technologies and why they were chosen as part of the
Node.js-to-Angular stack.
Figure 1.2 Basic diagram showing where Node.js, Express, MongoDB, and Angular fit in the web
paradigm

Node.js:

 Node.js is a development framework based on Google’s V8 JavaScript engine. Therefore,

Node.js code is written in JavaScript and then compiled into machine code by V8 to be
executed.
 Many of your backend services can be written in Node.js, as can the server-side scripts and
any supporting web application functionality.
 Node.js is that it is all just JavaScript, so you can easily take functionality from a client-side
script and place it in a server-side script. Also, the webserver can run directly within the
Node.js platform as a Node.js module.

The following are just a few reasons why Node.js is a great framework to start from:

Features of Node.js:

JavaScript end-to-end: One of the biggest advantages to Node.js is that it allows you to write both
server- and client-side scripts in JavaScript. There have always been difficulties in deciding where to
put scripting logic. Too much on the client side makes the client cumbersome and unwieldy, but too
much on the server side slows down web applications and puts a heavy burden on the webserver.
With Node.js you can take JavaScript written on the client and easily adapt it for the server and vice
versa. Also, your client developers and server developers will be speaking the same language.

 Event-driven scalability: Node.js applies a different logic to handling web requests. Rather
than having multiple threads waiting to process web requests, they are processed on the
same thread using a basic event model. This allows Node.js webservers to scale in ways that
traditional webservers never can.
  Extensibility: Node.js has a great following and an active development community. New
modules to extend Node.js functionality are being developed all the time. Also it is simple to
install and include new modules in Node.js, making it easy to extend a Node.js project to
include new functionality in minutes.
 Time: Let’s face it, time is valuable. Node.js is super easy to set up and develop in. In only a
few minutes, you can install Node.js and have a working webserver.

MongoDB:
 MongoDB is an agile and scalable NoSQL database. The name Mongo comes from
“humongous.” It is based on the NoSQL document store model, meaning that data is stored
in the database as a form of JSON objects rather than the traditional columns and rows of a
relational database.
 MongoDB provides great website backend storage for high traffic websites that need to
store data such as user comments, blogs, or other items because it is fast, scalable, and easy
to implement.
 Node.js supports a variety of DB access drivers, so the data store could just as easily be
MySQL or some other database

The following are some of the reasons that MongoDB really fits in the Node.js stack well:

 Document orientation: Because MongoDB is document-oriented, the data is stored in the

database in a format close to what you will be dealing with in both server-side and client-
side scripts. This eliminates the need to transfer data from rows to objects and back.
 High performance: MongoDB is one of the highest performing databases available.
Especially today when more and more people interact with websites, it is important to have
a backend that can support heavy traffic.
 High availability: MongoDB’s replication model makes it easy to maintain scalability while
keeping high performance.
 High scalability: MongoDB’s structure makes it easy to scale horizontally by sharing the data
across multiple servers.
 No SQL injection: MongoDB is not susceptible to SQL injection (putting SQL statements in
web forms or other input from the browser that compromises the DB security) because
objects are stored as objects, not using SQL strings.

Express:

 The Express module acts as the webserver in the Node.js-to-Angular stack. The fact that it is
running in Node.js makes it easy to configure, implement, and control.
 The Express module extends Node.js to provide several key components for handling web
requests. This allows you to implement a running webserver in Node.js with only a few lines
of code.
  For example, the Express module provides the ability to easily set up destination route
(URLs) for users to connect to. It also provides great functionality on working with the HTTP
request and response objects, including things like cookies and HTTP headers.

The following is a partial list of the valuable features of Express:

 Route management: Express makes it easy to define routes (URL endpoints) that tie directly
to Node.js script functionality on the server.
 Error handling: Express provides built-in error handling for documents not found and other
errors.
 Easy integration: An Express server can easily be implemented behind an existing reverse
proxy system such as Nginx or Varnish. This allows it to be easily integrated into your existing
secured system.
 Cookies: Express provides easy cookie management.
 Session and cache management: Express also enables session management and cache
management.

Angular:

 Angular is a client-side framework developed by Google.

 Angular provides all the functionality needed to handle user input in the browser,
manipulate data on the client side, and control how elements are displayed in the browser
view.
 It is written using TypeScript. The entire theory behind Angular is to provide a framework
that makes it easy to implement web applications using the MVC framework.
 Other JavaScript frameworks could be used with the Node.js platform, such as Backbone,
Ember, and Meteor. However, Angular has the best design, feature set,and trajectory at this
writing.

Here are some of the benefits of Angular:(features of Angular)

 Data binding: Angular has a clean method to bind data to HTML elements using its powerful
scope mechanism.
 Extensibility: The Angular architecture allows you to easily extend almost every aspect of
the language to provide your own custom implementations.
 Clean: Angular forces you to write clean, logical code.
 Reusable code: The combination of extensibility and clean code makes it easy to write
reusable code in Angular. In fact, the language often forces you to do so when creating
custom services.
 Support: Google is investing a lot into this project, which gives it an advantage over other
similar initiatives.
 Compatibility: Angular is based on TypeScript, which makes it easier to begin integrating
Angular into your environment and to reuse pieces of your existing code within the structure
of the Angular framework.
 HTML Basics:
Headings, Paragraphs, Links, Images, Lists, Tables, Div
Element, Forms.

HTML:

 HTML stands for Hypertext Markup Language. which is used for creating web pages and web
applications.
 Understanding meaning of Hypertext, Markup Language, and Web page.
 Hypertext refers to the way in which Web pages (HTML documents) are linked together. A
text has a link within it, is a hypertext. Whenever you click on a link, it will navigates you to
another web page(document). Thus, the link available on a webpage is called Hypertext.
 HTML is a Markup Language which means you use HTML to simply "mark-up" a text
document with tags that tell a Web browser how to structure it to display.
 A web page is a simple document displayable by a browser. Such documents are written in
the HTML language). A web page can embed a variety of different types of resources such
as:

style information — controlling a page's look-and-feel

scripts — which add interactivity to the page

media — images, sounds, and videos.

 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.
 A website is a collection of linked web pages (plus their associated resources) that share a
unique domain name. Each web page of a given website provides explicit links—most of the
time in the form of clickable portions of text—that allow the user to move from one page of
the website to another.
 To access a website, type its domain name in your browser address bar, and the browser will
display the website's main web page, or homepage (casually referred as "the home").
 An HTML document is simply a text file that contains the information you want to publish
and the appropriate markup instructions indicating how the browser should structure or
present the document.
 Markup elements are made up of a start tag, such as <strong>, and typically, though not
always, an end tag, which is indicated by a slash within the tag, such as </strong>. The tag
pair should fully enclose any content to be affected by the element, including text and other
HTML markup.
 HTML FILE = INFORMATION + MARKUP instructions(tags).
 Syntax of HTML element:
 HTML Element
  An HTML Tag with attributes and content is called HTML Element. Element include start tag,
end tag, attributes and content inside.


 empty elements: An element without content and has no ending tag is called “empty
element”.
 For example, to insert a line break, use a single <br> tag, which represents the empty br
element, because it doesn’t enclose any content and thus has no corresponding close tag:
 <br>
 Empty element is added with “/ “after the element name.
 <br/>
 The start tag of an element might contain attributes that modify the meaning of the tag.
 For example, in HTML, the simple inclusion of the noshade attribute in an <hr> tag, as
shown here: <hr noshade>

indicates that there should be no shading applied to this horizontal rule.

 Under XHTML, such style attributes are not allowed, because all attributes must have a
value, so instead you have to use syntax like this:
<hr noshade="noshade" />
Values are always enclosed in either single or double quotes.
 Multiple attributes:

<img src="dog.gif" alt="Angus-Black Scottish Terrier" height="100"

width="100">

 Example of html document: structure of html document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Hello HTML 4 World</title>
<!-- Simple hello world in HTML 4.01 strict example -->
</head>
 <body>
<h1>Welcome to the World of HTML</h1>
</body>
</html>
 <!DOCTYPE> : which indicates the particular version of HTML or XHTML being used in the
document.
 <html > :This tag informs the browser that it is an HTML document. Text between html tag
describes the web document. It is a container for all other elements of HTML except <!
DOCTYPE>.
 <head>: It should be the first element inside the <html> element, which contains the
metadata(information about the document). the information contained within the head
element is information about the page that is useful for visual styling, defining interactivity,
setting the page title, and providing other useful information that describes or controls the
document.
 <title>: As its name suggested, it is used to add title of that HTML page which appears at the
top of the browser window. It must be placed inside the head tag and should close
immediately.
 The <meta> : Specifying Content Type, Character Set, and More.

A <meta> tag has a number of uses.

For example, it can be used to specify values that are equivalent to HTTP response headers.
For example, if you want to make sure that your MIME type and character set for
an English-based HTML document is set, you could use Most people would agree that using
the UTF-8 character set is probably a good idea for Western-language page authors because
it gives them access to international character glyphs when needed without causing them
any trouble:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"

 <body> : Text between body tag describes the body content of the page that is visible to the
end user. This tag contains the main content of the HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
<title> Webpage </title>
</head>
<body>
<h1>This is my first web page </h1>
<h2> How it looks? </h2>
<p>It looks Nice!!!!! </p>
</body>
 </html>

HTML Heading:
 A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags <h1>.........</h1>,
it is displayed on the browser in the bold format and size of the text depends on the number
of heading.
 There are six different HTML headings which are defined with the <h1> to <h6> tags, from
highest level h1 (main heading) to the least level h6 (least important heading ).
 h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.
 Example:

<!DOCTYPE html>
<html>
<head>
<title> Webpage </title>
</head>
<h1> Welcome to Computer Application </h1>
<h2> Welcome to Computer Application </h2>
<h3> Welcome to Computer Application </h3>
<h4> Welcome to Computer Application </h4>
<h5> Welcome to Computer Application </h5>
<h6> Welcome to Computer Application </h6>
</body>
</html>
Paragraphs:
 paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On web
browsers, paragraphs display as blocks of text separated from adjacent blocks by blank lines,
white spaces, or first-line indentation.
 You can use a <p> tag followed by the content you want to display in your paragraph and a
</p>. Whenever the web browser comes across a <p> tag, it starts its contents on a new
line.
 HTML Paragraph Syntax:
<p>Paragraph Content</p>

 Explanation:
 <p>: Start tag for the paragraph.
 Paragraph Content: The text will appear as a paragraph on a visitor’s screen.
 </h1>: It is the closing tag for the paragraph.
 HTML paragraphs help us in multiple ways, such as:
 They make a web page more readable by giving it a structural view.
 Paragraphs can consist of different types of related content, such as text, images,
forms, and more.
  Here is a simple example in HTML to display different paragraphs on a web
page:

<!DOCTYPE html>
<html>
<head>
<title>Paragraph in HTML</title>
</head>
<body>
<p>
This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This
is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is
paragraph 1. This is paragraph 1.
</p>
<p>
This is paragraph 2.This is paragraph 2. This is paragraph 2.This is paragraph 2.This is
paragraph 2. This is paragraph 2.This is paragraph 2. This is paragraph 2. This is
paragraph
</p>
<p>
This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This
is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is
paragraph 3. This is paragraph 3. This is paragraph 3.
</p>
</body>
</html>

HTML Paragraph Tag Attributes:

Attribute Value Description
 left
right
align Aligns the text within a paragraph
center
justify

Links:
 The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in the same page, or anything else a URL can
address.( The <a> tag defines a hyperlink, which is used to link from one page to another).
 The most imp>ortant attribute of the <a> element is the href attribute, which indicates the
link's destination.
 By default, links will appear as follows in all browsers:
o An unvisited link is underlined and blue
o A visited link is underlined and purple
o An active link is underlined and red

.
Example: <a href="http://www.democompany.com/">External Link</a>.
Standard Syntax:
<a
Accesskey = "key"
Charset = "character code for language of linked resource"
Class = "class name(s)"
coords = "comma-separated list of numbers"
dir = "ltr | rtl"
href = "URL"
hreflang = "language code"
id = "unique alphanumeric identifier"
lang = "language code"
name = "name of target location"
rel = "comma-separated list of relationship values"
rev = "comma-separated list of relationship values"
shape="default | circle | poly | rect"
style="style information"
tabindex = "number"
target = "frame or window name | _blank | _parent | _self | _top"
title = "advisory text"
type="content type of linked data" >
</a>

HTML 4 Event Attributes:

onblur, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup,
onmousedown, onmousemove, onmouseout, onmouseover, onmouseup.

ATTRIBUTS:

charset: This attribute defines the character encoding of the linked resource.
href : This is the single required attribute for anchors defining a hypertext source link. It indicates the
link target—either a URL or a URL fragment, which is a name preceded by a hash mark (#) specifying
an internal target location within the current document. URLs are not restricted to Web-based (http)
documents. URLs might use any protocol supported by the browser.
For example, file, ftp, and mailto work in most user agents.
hreflang :This attribute is used to indicate the language of the linked resource and should be set to
whichever language is specified in the core lang attribute.

Download: Specifies that the target will be downloaded when a user clicks on the hyperlink.
Target: Specifies where to open the linked document.
_blank, which indicates a new window.

_parent, which indicates the parent frame set containing the source link;
_self, which indicates the frame containing the source link.
_top, which indicates the full browser window.

Attribute Value Description

download filename Specifies that the target will be downloaded when a user
clicks on the hyperlink

href URL Specifies the URL of the page the link goes to

hreflang language_code Specifies the language of the linked document

ping list_of_URLs Specifies a space-separated list of URLs to which, when the

link is followed, post requests with the body ping will be
sent by the browser (in the background). Typically used for
tracking.

referrerpolicy no-referrer Specifies which referrer information to send with the link
no-referrer-when-
downgrade
origin
origin-when-cross-
origin
same-origin
strict-origin-when-
cross-origin
unsafe-url

rel alternate Specifies the relationship between the current document

author and the linked document
bookmark
external
help
license
next
nofollow
 noreferrer
noopener
prev
search
tag

target _blank Specifies where to open the linked document

_parent
_self
_top

type media_type Specifies the media type of the linked document

shape :This attribute is used to define a selectable region for hypertext source links associated with a
figure in order to create an image map. The values for the attribute are circle, default, polygon, and
rect.
The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r,
where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels.
For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left corner of the
rectangle, while w and h define the width and height, respectively.
A value of polygon for shape requires x1,y1,x2,y2,… values for coords. Each of the x,y pairs defines a
point in the polygon, with successive points being joined by straight lines and the last point joined to
the first. The value of default for shape requires that the entire enclosed area, typically an image, be
used.
coords : For use with object shapes, this attribute uses a comma-separated list of numbers to define
the coordinates of the object on the page.

Examples:
<!-- anchor linking to external file -->
<a href="http://www.democompany.com/">External Link</a>

<!-- anchor linking to file on local file system -->

<a href="file:/c:\html\index.html">local file link</a>

<!-- anchor invoking anonymous FTP -->

<a href="ftp://ftp.democompany.com/freestuff">Anonymous FTP link</a>

<!-- anchor invoking FTP with password -->

<a href="ftp://joeuser:[email protected]/path/file"> FTP with password</a>

<!-- anchor invoking mail -->

<a href="mailto:[email protected]">Send mail</a>

<!-- anchor used to define target destination within document -->

<a name="jump">Jump target</a>

<!-- anchor linking internally to previous target anchor -->

<a href="#jump">Local jump within document</a>
<!-- anchor linking externally to previous target anchor -->
<a href="http://www.democompany.com/document#jump"> Remote jump to a position within a
document</a>
 Images
This element indicates a media object to be included in an (X)HTML document. Usually, the object is
a bitmap graphic image, but some implementations support movies, vector formats, and animations.
Or
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag
creates a holding space for the referenced image.
The <img> tag is empty element.
Attributes:
Standard Syntax:
<img
align="bottom | left | middle | right | top" (transitional only)
alt="alternative text"
border="pixels" (transitional only)
class="class name(s)"
dir="ltr | rtl"
height="pixels"
hspace="pixels" (transitional only)
id="unique alphanumeric identifier"
ismap="ismap"
lang="language code"
longdesc="URL of description file"
name="unique alphanumeric identifier"
src="URL of image"
style="style information"
title="advisory text"
usemap="URL of map file"
vspace="pixels" (transitional only)
width="pixels">

align: This attribute controls the horizontal alignment of the image with respect to the page. The
default value is left.
src : This attribute indicates the URL of an image file to be displayed. Most browsers will
display .gif, .jpeg, and .png files directly.
Alt: This attribute contains a string to be displayed instead of the image for browsers that cannot
display images.
Border: This attribute indicates the width, in pixels, of the border surrounding the image.
Dynsrc: In the Microsoft implementation, this attribute indicates the URL of a movie file and is used
instead of the src attribute. Common formats used here are .avi (Audio-Visual Interleaved), .mov
(QuickTime), and .mpg and .mpeg (Motion Picture Experts Group).
Ismap: This attribute indicates that the image is a server-side image map. User mouse actions over
the image are sent to the server for processing.
longdesc This attribute specifies the URL of a document that contains a long description of the
image. This attribute is used as a complement to the alt attribute.
loop In the Microsoft implementation, this attribute is used with the dynsrc attribute to cause a
movie to loop. Its value is either a numeric loop count or the keyword infinite.
lowsrc This nonstandard attribute, supported in most browsers, contains the URL of an image to be
initially loaded. Typically, the lowsrc image is a low-resolution or black-andwhite image that provides
a quick preview of the image to follow. Once the primary image is loaded, it replaces the lowsrc
image.
Name: This common attribute is used to bind a name to the image.

start : In the Microsoft implementation, this attribute is used with the dynsrc attribute to indicate
when a movie should play. The default value, if no value is specified, is to play the video as soon as it
has finished loading. Alternatively, a value of mouseover can be set to play the move once the user
has moved their mouse over the video.

usemap This attribute makes the image support client-side image mapping. Its argument is a URL
specifying the map file, which associates image regions with hyperlinks. The URL is generally a
fragment identifier that references a location in the current document rather than a remote
resource.

HTML Image Maps:

With HTML image maps, you can create clickable areas on an image.

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The
areas are defined with one or more <area> tags.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must
add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image map, and is used to
create a relationship between the image and the image map.

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by using the
required name attribute:

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Categories of Attributes:

Core Attributes:
The four core attributes that can be used on the majority of HTML elements (although not all)

are:

 Id
 Title
 Class
 Style
 The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
There are two primary reasons that you might want to use an id attribute on an element:

 If an element carries an id attribute as a unique identifier, it is possible to identify just that

element and its content.
 If you have two elements of the same name within a Web page (or style sheet), you can use
the id attribute to distinguish between elements that have the same name.

Example
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
 The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar
as explained for id attribute:

The behavior of this attribute will depend upon the element that carries it, although it is often
displayed as a tooltip when cursor comes over the element or while the element is loading.

Example:

<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
 This will produce the following result:
Titled Heading Tag Example

Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title
you used in your code is coming out as a tooltip of the cursor.

 The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of
element. You will learn more about the use of the class attribute when you will learn Cascading Style
Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names.

For example:
class="className1 className2 className3"

 The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

This will produce the following result:

Some text...
Internationalization Attributes:
There are three internationalization attributes, which are available for most (although not all)
XHTML elements.

• dir

• lang

• xml:lang

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should
flow. The dir attribute can take one of two values, as you can see in the table that follows:

Value Meaning

ltr Left to right (the default value)

rtl Right to left (for languages such as Hebrew or Arabic that are read right to left).

Example:

<!DOCTYPE html>

<html dir="rtl">

<head>

<title>Display Directions</title>

</head>

<body>

This is how IE 5 renders right-to-left directed text.

</body>

</html>

This will produce the following result:

This is how IE 5 renders right-to-left

directed text.
The lang Attribute:

The lang attribute allows you to indicate the main language used in a document, but this attribute
was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has
been replaced by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character language codes. Check

HTML Language Codes: ISO 639 for a complete list of language codes.
<!DOCTYPE html>

<html lang="en">

<head>

<title>English Language Page</title>

</head>

<body>

This page is using English Language

</body>

</html>

Generic Attributes:
Here's a table of some other attributes that are readily usable with many of the HTML tags.

Attribute Options Function

align right, left, center Horizontally aligns tags

valign top, middle, bottom Vertically aligns tags within an HTML

element.

bgcolor numeric, hexidecimal, RGB Places a background color behind an

values element

background URL Places a background image behind an

element

id User Defined Names an element for use with Cascading

Style Sheets.

class User Defined Classifies an element for use with Cascading

Style Sheets.
 width Numeric Value Specifies the width of tables, images, or

table cells.

height Numeric Value Specifies the height of tables, images, or

table cells.

title User Defined "Pop-up" title of the elements.

HTML LIST

HTML List is a collection of related infomation.

The lists can be ordered or underdered depending on the requirement. In html we can create both
order and unorder lists by using <ol> and <ul> tags. There is one more list which is description list -
HTML <dl>, <dt> & <dd> tag are used to create description lists.

three ways for specifying lists of information namely ordered, unordered, and definition lists. All lists
must contain one or more list items. Items are marked by <li>.
HTML Unorder Lists
Unorder lists are marked with bullet points, by using html <ul> & <li> tag we can create a unorder
list. This is also know as unorder list.

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ul>
</body>
</html>

Output:

Example of HTML List

 HTML
 CSS
 JavaScript
 Java
  JavaFX

By default, list items are preceded with bullet symbol. Using type attribute we can have other
symbols also such as disc, square.

HTML Order Lists:

Order list are marked with numbers by default, we can xhnage the number into alphabet, roman
numbers, etc. By using html <ol> & <li> tag we can create a order list and using type attribute we can
change the default numeric marking.

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
<li>JavaFX</li>
</ol>
</body>
</html>

Output:
Example of HTML List
1. HTML
2. CSS
3. JavaScript
4. Java
5. JavaFX
By default, list items are preceded with decimal number symbol. Using type attribute, we can
have other symbols also such as roman, alphabets.

HTML Description Lists

Description list is list of items with description, to create a description list we can
use <dl>, <dt> & <dd> tag. In which <dl> refers to the description list.
<dt> refers to the data term.<dd> refers to the data definition.

<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h2>Example of HTML List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText markup languague</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</body>
</html>

Example of HTML List

HTML
HyperText markup languague
CSS
Cascading Style Sheet
JS
JavaScript
 HTML TABLES

An HTML Table is an arrangement (structured set) of data in rows and columns in tabular
format. Tables are useful for various tasks, such as presenting text information and numerical
data.

Tags used in HTML Tables:

HTML Tags Descriptions

<table> Defines the structure for organizing data in rows and columns within a web page.

<tr> Represents a row within an HTML table, containing individual cells.

<th> Shows a table header cell that typically holds titles or headings.

<td> Represents a standard data cell, holding content or data.

<caption> Provides a title or description for the entire table.

<thead> Defines the header section of a table, often containing column labels.

Represents the main content area of a table, separating it from the header or
<tbody>
footer.

<tfoot> Specifies the footer section of a table, typically holding summaries or totals.

Defines attributes for table columns that can be applied to multiple columns at
<col>
once.

Groups together a set of columns in a table to which you can apply formatting or
<colgroup>
properties collectively.
Defining Tables in HTML:
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table
header is defined with the “th” tag. By default, table headings are bold and centered. A table
data/cell is defined with the “td” tag.
Table Cells:
Table Cell are the building blocks for defining the Table. It is denoted with <td> as a start tag &
</td> as a end tag.
Syntax:

</td> Content...</td>

Table Rows:
The rows can be formed with the help of combination of Table Cells. It is denoted by <tr> and
</tr> tag as a start & end tags.
Syntax:

</tr> Content...</tr>

Table Headers
The Headers are generally use to provide the Heading. The Table Headers can also be used to add
the heading to the Table. This contains the <th> & </th> tags.
Syntax:
</th> Content...</th>

Example 1: Creating a simple table in HTML using a table tag.

<!-- index.html -->

<!DOCTYPE html>
<html>

<body>
<table>
<tr>
<th>Book Name</th>
<th>Author Name</th>
<th>Genre</th>
</tr>
<tr>
<td>The Book Thief</td>
<td>Markus Zusak</td>
<td>Historical Fiction</td>
</tr>
<tr>
<td>The Cruel Prince</td>
<td>Holly Black</td>
<td>Fantasy</td>
</tr>
<tr>
<td>The Silent Patient</td>
<td> Alex Michaelides</td>
<td>Psychological Fiction</td>
</tr>
 </table>
</body>

</html>
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a class in a style sheet)

dir Specifies the text direction for the content in an element

draggable Specifies whether an element is draggable or not
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheck Specifies whether the element is to have its spelling and grammar checked or not

style Specifies an inline CSS style for an element

title Specifies extra information about an element
border Border for the table cells.
rowspan Used to combine row cells.
colspan Used to combine column cells.

example:

<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>

<colgroup> will apply background color will be applied to two colums.

 HTML Div Element

The <div> element is used as a container for other HTML elements.Defines a section in a document
(block-level)

The <div> Element:

The <div> element is by default a block element, meaning that it takes all available width, and comes
with line breaks before and after.

Example:

<div>
<h2>Motivation</h2>
<p>Your present circumstances don’t determine where you can go; they
merely determine where you start.</p>
<p>Start where you are. Use what you have. Do what you can</p>
</div>
<div> as a container:

The <div> element is often used to group sections of a web page together.

Center align a <div> element:

If you have a <div> element that is not 100% wide, and you want to center-align it, set the
CSS margin property to auto.

Example:

<style>
div {
width:300px;
margin:auto;
}
</style>

Multiple <div> elements

You can have many <div> containers on the same page.

Aligning <div> elements side by side

When building web pages, you often want to have two or more <div> elements side by side, like this:

There are different methods for aligning elements side by side, all include some CSS styling. We will
look at the most common methods:

Float Inline-block Flex

The CSS float property was If you change The CSS Flexbox Layout
not originally meant to the <div> element's display propert Module was introduced to
align <div> elements side- y from block to inline-block, make it easier to design
by-side, but has been used the <div> elements will no longer flexible responsive layout
for this purpose for many add a line break before and after, structure without using float
years. and will be displayed side by side or positioning.
instead of on top of each other.
The CSS float property is To make the CSS flex
used for positioning and <style> method work, surround
formatting content and div { the <div> elements with
allow elements float next to width: 30%; another <div> element and
each other instead of on display: inline-block; give it the status as a flex
top of each other. } container.
</style>
Example Example

How to use float to align div How to use flex to align div
elements side by side: elements side by <style>
.mycontainer {
<style> display: flex;
.mycontainer { }
width:100%; .mycontainer > div {
overflow:auto; width:33%;
} }
.mycontainer div { </style> side:
width:33%;
float:left;
}
</style>

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it
easier to design web pages without having to use floats and positioning.

Sounds almost the same as flex, but has the ability to define more than one row and position each
row individually.
The CSS grid method requires that you surround the <div> elements with another <div> element and
give the status as a grid container, and you must specify the width of each column.

Example

How to use grid to align <div> elements side by side:

<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

The HTML <form> element can contain one or more of the following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
HTML Form Attributes:
The Action Attribute:

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

Example:

<form action="/login.js">
<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

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

The Target Attribute:

The target attribute specifies where to display the response that is received after submitting the
form.

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The Method Attribute:

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").

The default HTTP method when submitting form data is GET.

Example

This example uses the GET method when submitting the form data:

<form action="/action_page.js" method="get">

Notes on GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the submitted form data is not
shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

The Autocomplete Attribute

The autocomplete attribute specifies whether a form should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user
has entered before.

The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be validated when submitted.
 HTML FORM ELEMENTS

1.HTML Input Types:

different input types you can use in HTML

SYNTAX DESCRIPTION
<input type="text"> defines a single-line text input field
<input type="password"> defines a password field
defines a button for submitting form data to a form-handler.
The form-handler is typically a server page with a script for
<input type="submit">
processing input data. The form-handler is specified in the form's
action attribute.
defines a reset button that will reset all form values to their default
<input type="reset">
values
defines a radio button. Radio buttons let a user select ONLY ONE of a
<input type="radio">
limited number of choices
defines a checkbox. Checkboxes let a user select ZERO or MORE
<input type="checkbox">
options of a limited number of choices
<input type="button"> defines a button.
is used for input fields that should contain a colour.
<input type="color"> Depending on browser support, a color picker can show up in the
input field
is used for input fields that should contain a date.
Depending on browser support, a date picker can show up in the
<input type="date">
input field. You can also use the min and max attributes to add
restrictions to dates. EX: max="1979-12-31"
<input type="datetime-local"> specifies a date and time input field, with no time zone
<input type="email"> is used for input fields that should contain an e-mail address
defines an image as a submit button. The path to the image is
<input type="image"> specified in the src attribute. EX: <input type="image"
src="img_submit.gif" alt="Submit" width="48" height="48">
<input type="file"> defines a file-select field and a "Browse" button for file uploads.
<input type="hidden"> defines a hidden input field (not visible to a user)
<input type="month"> allows the user to select a month and year.
defines a numeric input field.
<input type="number"> EX: <input type="number" id="quantity" name="quantity" min="1"
max="5">
defines a control for entering a number whose exact value is not
<input type="range">
important (like a slider control). Default range is 0 to 100
<input type="search"> is used for search fields (a search field behaves like a regular text field
is used for input fields that should contain a telephone number.
<input type="tel"> EX:<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-
9]{2}-[0-9]{3}">
<input type="time"> allows the user to select a time (no time zone).
<input type="url"> is used for input fields that should contain a URL address.
<input type="week"> allows the user to select a week and year.
HTML Input Attributes:
different attributes for the HTML <input> element.

ATTRIBUTE DESCRIPTION
attribute specifies an initial value(default) for an input field.
value
Ex: <input type="text" id="fname" name="fname" value="John">
attribute specifies that an input field is read-only.A read-only input field
readonly cannot be modified.
Ex: <input type="text" id="fname" name="fname" value="John" readonly>
attribute specifies that an input field should be disabled.
disabled
Ex:<input type="text" id="fname" name="fname" value="John" disabled>
attribute specifies the visible width, in characters, of an input field.The
size default value for size is 20.
EX: <input type="text" id="fname" name="fname" size="50">
attribute specifies the maximum number of characters allowed in an input
maxlength
field. EX:<input type="text" id="pin" name="pin" maxlength="4" size="4">
attributes specify the minimum and maximum values for an input field.The
min and max min and max attributes work with the following input types: number, range,
date, datetime-local, month, time and week.

attribute specifies that the user is allowed to enter more than one value in an
multiple
input field. forinput types: email, and file
attribute specifies a regular expression that the input field's value is checked
against, when the form is submitted.pattern attribute works with the
pattern following input types: text, date, search, url, tel, email, and password.
Ex: <input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
attribute specifies a short hint that describes the expected value of an input
field (a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a
placeholder value.The placeholder attribute works with the following input types: text,
search, url, number, tel, email, and password.
Ex: <input type="tel" id="phone" name="phone" placeholder="123-45-
678">
attribute specifies that an input field must be filled out before submitting the
form. The required attribute works with the following input types: text,
required search, url, tel, email, password, date pickers, number, checkbox, radio, and
file Ex: <input type="text" id="username" name="username" required>
attribute specifies the legal number intervals for an input field.
step Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.
Ex:<input type="number" id="points" name="points" step="3">
attribute specifies that an input field should automatically get focus when
autofocus
the page loads. Ex:<input type="text" id="fname" name="fname" autofocus>
attributes specify the height and width of an <input type="image"> element.
height and
Ex:<input type="image" src="img_submit.gif" alt="Submit" width="48"
width
height="48">
list and element that contains pre-defined options for an <input> element.
<datalist>
 attribute specifies whether a form or an input field should have
autocomplete
autocomplete on or off.

2. <label> Element:
The <label> element defines a label for several form elements.

The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind
them together.

3.<select> Element:

The <select> element defines a drop-down list. The <option> element defines an option that can be
selected. By default, the first item in the drop-down list is selected. To define a pre-selected option,
add the selected attribute to the option. Use the size attribute to specify the number of visible
values:

<label for="B.TECH">Choose Programme</label>

<select id="course" name="course" size=3 multiple>
<option value="CSE">CSE</option>
<option value="IT">IT</option>
<option value="AIML" selected>AIML</option>
<option value="DS">DATASCIENCE</option>
</select>

Use the multiple attribute to allow the user to select more than one value.

4. <textarea> Element:

The <textarea> element defines a multi-line input field (a text area). The rows attribute specifies the
visible number of lines in a text area. The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">

write content here
</textarea>

5. <button> Element:
The <button> element defines a clickable button.

<button type="button" onclick="alert('Hello World!')">Click Me!

</button>

6.<fieldset> and <legend> Elements:

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.