MEAN STACK Technologies

UNIT - 1

Internet:
The Internet is a global wide area network that connects computer systems across the world. It includes
several high-bandwidth data lines that comprise the Internet "backbone." These lines are connected to major
Internet hubs that distribute data to other locations, such as web servers and ISPs.
In order to connect to the Internet, you must have access to an Internet service provider (ISP), which acts the
middleman between you and the Internet. Most ISPs offer broadband Internet access via a cable, DSL,
or fiber connection. When you connect to the Internet using a public Wi-Fi signal, the Wi-Fi router is still
connected to an ISP that provides Internet access. Even cellular data towers must connect to an Internet service
provider to provide connected devices with access to the Internet.
The Internet provides different online services. Some examples include:
 Web – a collection of billions of webpages that you can view with a web browser
 Email – the most common method of sending and receiving messages online
 Social media – websites and apps that allow people to share comments, photos, and videos

 Online gaming – games that allow people to play with and against each other over the Internet
 Software updates – operating system and application updates can typically downloaded from the Internet
In the early days of the Internet, most people connected to the Internet using a home computer and a dial-
up modem. DSL and cable modems eventually provided users with "always-on" connections. Now mobile devices,
such as tablets and smartphones, make it possible for people to be connected to the Internet at all times.
The Internet of Things has turned common appliances and home systems into "smart" devices that can be
monitored and controlled over the Internet. As the Internet continues to grow and evolve, you can expect it to
become an even more integral part of daily life.

World Wide Web :

The World Wide Web (WWW), commonly known as the Web, is an information system where documents and
other web resources are identified by Uniform Resource Locators (URLs, such as https://example.com/), which
may be interlinked by hypertext, and are accessible over the Internet.[1][2] The resources of the Web are transferred
via the Hypertext Transfer Protocol (HTTP) and may be accessed by users by a software application called a web
browser and are published by a software application called a web server. The World Wide Web is not synonymous
with the Internet, which pre-existed the Web in some form by over two decades and upon whose technologies the
Web is built.

Difference between Internet & World Wide Web:

Differences between WWW and Internet

WWW (World Wide Web) Internet

The World Wide Web is the common system for The internet is a public network of network
navigating the internet. It is not the only system that with a maze of wired and wireless connections
can be used for such access, but it is by far the most between separate groups of servers computers
 MEAN STACK Technologies

UNIT - 1

common one. and countless devices from around the world

The World Wide Web is distinguished from other Along with Internters, there also exist the
systems through its use of HTTP (Hypertext Transfer Intranets, which is the same type of
Protocol). It can be safely said that the HTTP is the information network but more privatized in
language of the World Wide Web order to control access.

WWW is more software-oriented as compared to the Internet is primarily hardware-based.

Internet

The HTTP along with being the language of the World The internet is governed by a set of rules and
Wide Web also governs it by dealing with linking of regulations collectively known as Internet
files, documents and other resources Protocol (IP). The IP deals with data
transmitted through the internet.

The invention of the World Wide Web can be credited The first workable prototype of the Internet
to Sir Tim Berners Lee. During his work at the was the ARPANET (Advanced Research
European Organization for Nuclear Research in 1989, Project Agency Network) in the late 1960s.
he had developed the basic idea of the WWW to merge After its adoption on January 1st 1983,
the evolving technologies of computers, data networks researchers began to develop a “network of
and hypertext into a powerful and easy to use global networks” which evolved into the modern form
information system. of the Internet

Domain Name Service :

DNS is a host name to IP address translation service. DNS is a distributed database implemented in a hierarchy of
name servers. It is an application layer protocol for message exchange between clients and servers.
Requirement
Every host is identified by the IP address but remembering numbers is very difficult for the people and also the IP
addresses are not static therefore a mapping is required to change the domain name to IP address. So DNS is used
to convert the domain name of the websites to their numerical IP address.
Domain :
There are various kinds of DOMAIN :
1. Generic domain : .com(commercial) .edu(educational) .mil(military) .org(non profit
organization) .net(similar to commercial) all these are generic domain.
2. Country domain .in (india) .us .uk
3. Inverse domain if we want to know what is the domain name of the website. Ip to domain name mapping.So
DNS can provide both the mapping for example to find the ip addresses of geeksforgeeks.org then we have
to type nslookup www.geeksforgeeks.org.
 MEAN STACK Technologies

UNIT - 1

Organization of Domain

It is Very difficult to find out the ip address associated to a website because there are millions of websites and with
all those websites we should be able to generate the ip address immediately,
there should not be a lot of delay for that to happen organization of database is very important.
DNS record – Domain name, ip address what is the validity?? what is the time to live ?? and all the information
related to that domain name. These records are stored in tree like structure.
Namespace – Set of possible names, flat or hierarchical . Naming system maintains a collection of bindings of
names to values – given a name, a resolution mechanism returns the corresponding value –
Name server – It is an implementation of the resolution mechanism.. DNS (Domain Name System) = Name
service in Internet – Zone is an administrative unit, domain is a subtree.

Name to Address Resolution

The host request the DNS name server to resolve the domain name. And the name server returns the IP address
corresponding to that domain name to the host so that the host can future connect to that IP address.
 MEAN STACK Technologies

UNIT - 1

Hierarchy of Name Servers

Root name servers – It is contacted by name servers that can not resolve the name. It contacts authoritative name
server if name mapping is not known. It then gets the mapping and return the IP address to the host.
Top level server – It is responsible for com, org, edu etc and all top level country domains like uk, fr, ca, in etc.
They have info about authoritative domain servers and know names and IP addresses of each authoritative name
server for the second level domains.
Authoritative name servers This is organization’s DNS server, providing authoritative hostName to IP mapping for
organization servers. It can be maintained by organization or service provider. In order to reach cse.dtu.in we have
to ask the root DNS server, then it will point out to the top level domain server and then to authoritative domain
name server which actually contains the IP address. So the authoritative domain server will return the associative
ip address.

Domain Name Server

The client machine sends a request to the local name server, which , if root does not find the address in its
database, sends a request to the root name server , which in turn, will route the query to an intermediate or
authoritative name server. The root name server can also contain some hostName to IP address mappings . The
intermediate name server always knows who the authoritative name server is. So finally the IP address is returned
to the local name server which in turn returns the IP address to the host.
 MEAN STACK Technologies

UNIT - 1

HTTP :
The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative,
hypermedia information systems. This is the foundation for data communication for the World Wide Web (i.e.
internet) since 1990. HTTP is a generic and stateless protocol which can be used for other purposes as well using
extensions of its request methods, error codes, and headers.
Basically, HTTP is a TCP/IP based communication protocol, that is used to deliver data (HTML files, image files,
query results, etc.) on the World Wide Web. The default port is TCP 80, but other ports can be used as well. It
provides a standardized way for computers to communicate with each other. HTTP specification specifies how
clients' request data will be constructed and sent to the server, and how the servers respond to these requests.

Basic Features
There are three basic features that make HTTP a simple but powerful protocol:
 HTTP is connectionless: The HTTP client, i.e., a browser initiates an HTTP request and after a request is
made, the client waits for the response. The server processes the request and sends a response back after
which client disconnect the connection. So client and server knows about each other during current
request and response only. Further requests are made on new connection like client and server are new to
each other.
 HTTP is media independent: It means, any type of data can be sent by HTTP as long as both the client and
the server know how to handle the data content. It is required for the client as well as the server to specify
the content type using appropriate MIME-type.
 HTTP is stateless: As mentioned above, HTTP is connectionless and it is a direct result of HTTP being a
stateless protocol. The server and client are aware of each other only during a current request. Afterwards,
both of them forget about each other. Due to this nature of the protocol, neither the client nor the browser
can retain information between different requests across the web pages.
HTTP/1.0 uses a new connection for each request/response exchange, where as HTTP/1.1 connection may be used
for one or more request/response exchanges.

Basic Architecture
The following diagram shows a very basic architecture of a web application and depicts where HTTP sits:

The HTTP protocol is a request/response protocol based on the client/server based architecture where web
browsers, robots and search engines, etc. act like HTTP clients, and the Web server acts as a server.
 MEAN STACK Technologies

UNIT - 1

Client
The HTTP client sends a request to the server in the form of a request method, URI, and protocol version,
followed by a MIME-like message containing request modifiers, client information, and possible body content
over a TCP/IP connection.
Server
The HTTP server responds with a status line, including the message's protocol version and a success or error
code, followed by a MIME-like message containing server information, entity meta information, and possible
entity-body content.
FTP :

o FTP stands for File transfer protocol.

o FTP is a standard internet protocol provided by TCP/IP used for transmitting the files from one host to
another.
o It is mainly used for transferring the web page files from their creator to the computer that acts as a server
for other computers on the internet.
o It is also used for downloading the files to computer from other servers.

Objectives of FTP
o It provides the sharing of files.
o It is used to encourage the use of remote computers.
o It transfers the data more reliably and efficiently.

Why FTP?

Although transferring files from one system to another is very simple and straightforward, but sometimes it can
cause problems. For example, two systems may have different file conventions. Two systems may have different
ways to represent text and data. Two systems may have different directory structures. FTP protocol overcomes
these problems by establishing two connections between hosts. One connection is used for data transfer, and
another connection is used for the control connection.
 MEAN STACK Technologies

UNIT - 1

Mechanism of FTP

The above figure shows the basic model of the FTP. The FTP client has three components: the user interface,
control process, and data transfer process. The server has two components: the server control process and the
server data transfer process.

There are two types of connections in FTP:

o Control Connection: The control connection uses very simple rules for communication. Through control
connection, we can transfer a line of command or line of response at a time. The control connection is
made between the control processes. The control connection remains connected during the entire
interactive FTP session.
o Data Connection: The Data Connection uses very complex rules as data types may vary. The data
connection is made between data transfer processes. The data connection opens when a command comes
for transferring the files and closes when the file is transferred.

FTP Clients
o FTP client is a program that implements a file transfer protocol which allows you to transfer files between
two hosts on the internet.
o It allows a user to connect to a remote host and upload or download the files.
 MEAN STACK Technologies

UNIT - 1

o It has a set of commands that we can use to connect to a host, transfer the files between you and your host
and close the connection.
o The FTP program is also available as a built-in component in a Web browser. This GUI based FTP client
makes the file transfer very easy and also does not require to remember the FTP commands.

Advantages of FTP:
o Speed: One of the biggest advantages of FTP is speed. The FTP is one of the fastest way to transfer the
files from one computer to another computer.
o Efficient: It is more efficient as we do not need to complete all the operations to get the entire file.
o Security: To access the FTP server, we need to login with the username and password. Therefore, we can
say that FTP is more secure.
o Back & forth movement: FTP allows us to transfer the files back and forth. Suppose you are a manager of
the company, you send some information to all the employees, and they all send information back on the
same server.

Disadvantages of FTP:
o The standard requirement of the industry is that all the FTP transmissions should be encrypted. However,
not all the FTP providers are equal and not all the providers offer encryption. So, we will have to look out
for the FTP providers that provides encryption.
o FTP serves two operations, i.e., to send and receive large files on a network. However, the size limit of the
file is 2GB that can be sent. It also doesn't allow you to run simultaneous transfers to multiple receivers.
o Passwords and file contents are sent in clear text that allows unwanted eavesdropping. So, it is quite
possible that attackers can carry out the brute force attack by trying to guess the FTP password.
o It is not compatible with every system.

SMTP:
Simple Mail Transfer Protocol (SMTP)

Last Updated: 16-09-2020

Email is emerging as one of the most valuable services on the internet today. Most of the internet systems use
SMTP as a method to transfer mail from one user to another. SMTP is a push protocol and is used to send the mail
whereas POP (post office protocol) or IMAP (internet message access protocol) are used to retrieve those mails at
the receiver’s side. 
SMTP Fundamentals 
SMTP is an application layer protocol. The client who wants to send the mail opens a TCP connection to the
SMTP server and then sends the mail across the connection. The SMTP server is always on listening mode. As
soon as it listens for a TCP connection from any client, the SMTP process initiates a connection on that port (25).
After successfully establishing the TCP connection the client process sends the mail instantly. 
SMTP Protocol 
 MEAN STACK Technologies

UNIT - 1

The SMTP model is of two type :

1. End-to- end method
2. Store-and- forward method
The end to end model is used to communicate between different organizations whereas the store and forward
method are used within an organization. A SMTP client who wants to send the mail will contact the destination’s
host SMTP directly in order to send the mail to the destination. The SMTP server will keep the mail to itself until
it is successfully copied to the receiver’s SMTP. 
The client SMTP is the one which initiates the session let us call it as the client- SMTP and the server SMTP is the
one which responds to the session request and let us call it as receiver-SMTP. The client- SMTP will start the
session and the receiver-SMTP will respond to the request.
Model of SMTP system 
In the SMTP model user deals with the user agent (UA) for example Microsoft Outlook, Netscape, Mozilla, etc. In
order to exchange the mail using TCP, MTA is used. The users sending the mail do not have to deal with the MTA
it is the responsibility of the system admin to set up the local MTA. The MTA maintains a small queue of mails so
that it can schedule repeat delivery of mail in case the receiver is not available. The MTA delivers the mail to the
mailboxes and the information can later be downloaded by the user agents.

Both the SMTP-client and SMTP-server should have 2 components:

1. User agent (UA)
2. Local MTA
Communication between sender and the receiver : 
The senders, user agent prepare the message and send it to the MTA. The MTA functioning is to transfer the mail
across the network to the receivers MTA. To send mail, a system must have the client MTA, and to receive mail, a
system must have a server MTA. 
SENDING EMAIL: 
Mail is sent by a series of request and response messages between the client and a server. The message which is
sent across consists of a header and the body. A null line is used to terminate the mail header. Everything which is
 MEAN STACK Technologies

UNIT - 1

after the null line is considered as the body of the message which is a sequence of ASCII characters. The message
body contains the actual information read by the receipt. 
RECEIVING EMAIL: 
The user agent at the server-side checks the mailboxes at a particular time of intervals. If any information is
received it informs the user about the mail. When the user tries to read the mail it displays a list of mails with a
short description of each mail in the mailbox. By selecting any of the mail user can view its contents on the
terminal.
Some SMTP Commands:
 HELO – Identifies the client to the server, fully qualified domain name, only sent once per session
 MAIL – Initiate a message transfer, fully qualified domain of originator
 RCPT – Follows MAIL, identifies an addressee, typically the fully qualified name of the addressee and for
multiple addressees use one RCPT for each addressee
 DATA – send data line by line

HTML5 Concepts:

Front-end HTML5 developers have a lot to learn in order to build high-end HTML5 applications, and
the learning process can quickly become overwhelming if not tackled the right way.

From a conceptual point of view, here are the 11 important HTML5 concepts that a good HTML5
front-end developer should understand:

1) HTML5 is HTML, with a momentum

Understand that HTML5 is HTML and that the same application model is applicable. So, no new
magical development paradigm was brought with HTML5 (outside of Canvas/WebGL, which is totally
new), it’s just that the browsers are more robust, much faster, and more capable.

The real HTML5 benefit is the momentum it managed to create among the top browser providers
(Mozilla, Google, Apple, and Microsoft) that now compete on compliance and performance on a
single specification and that alone create a huge set of long-term opportunities for developers.

2) Touch and Mouse should not require two different frameworks

Understand that while HTML5 applications might need different façades for type of devices (Mobile
Phone, Tablet, or PC) devices, the point of bifurcation should NOT be at the tech stack (i.e.
framework or library) level but rather at the application level.

HTML5 developers should use HTML5 frameworks and libraries that are designed to run on both
Touch and Mouse devices, and they must make the appropriate user interface optimization (UI)
optimization at the application layer.

Backbone, Brite, Angular.js, jQuery core, Twitter/Bootstrap, and many templating engines obey this
non-device-specific HTML5 framework or library approach, and developers should evaluate those
 MEAN STACK Technologies

UNIT - 1

rather than lock their applications to particular device types because of their framework choices (e.g.,
Sencha Touch vs Sencha Ext or jQueryMobile vs jQueryUI).

3) Pros and cons of JS vs. CSS3 animation

Understand the pros/cons of CSS animations vs. JavaScript ones. The pros of CSS transition are that it
is easier for browsers to optimize them; Safari on Mobile/PC and Chrome on PC even enable hardware
(GPU) optimization. The cons are that CSS transitions do not work on older browsers (Internet
Explorer, or IE, 7 & 8) and do not offer many controls (i.e., can't really stop them, and curve path are
very hard to do when they are supported).

4) Benefits of asynchronous programming and Web Workers

Understand the benefits and the "why" of the Web Workers and asynchronous javascript
programming. In short, it's a way to do multi-threaded work in a single-threaded environment. Before
HTML5, the only way was with Ajax, and thus including a server in the picture, now, with Web
Workers, it can just be all local.

5) Understanding Canvas vs. SVG

Understand the Canvas vs. SVG. This one is a tricky one, as there is a lot of "social-engineering"
baggage behind the technical aspects. On the technical side, SVG is a DOM approach to vector
graphics (and consequently a retained mode), whereas Canvas is a programmatic and immediate-mode
approach. The catch is that sometimes it seems Canvas gets a little bit more "love" from the browser
vendor developers, as SVG has always had a love-hate relationship with HTML from its beginning.

6) JavaScript is object-oriented and a robust language

Understand that JavaScript is a robust and object-oriented (albeit prototype-based) of a language and
that there is no need to have some meta-language to do good object-oriented programming (OO) in
JavaScript. See JavaScript for HTML5 Applications for more some code examples.

7) IE7 & IE8 can have HTML5 look (at extra dev. cost)

Understand that many of the effects in CSS3 are available in IE7 & IE8 with proprietary Microsoft
CSS attributes (rounded corners being the main exception). So, if a customer or manager wants to do a
HTML5-looking app in IE7+, it is totally possible by using the MS/IE7 old CSS properties and
JavaScript animation lib such as jQuery animate. Obviously, this will add some development time to
the project, but for a well-architected HTML5 application, this can be done using the same application
with an extra 10% to 20% of work.
 MEAN STACK Technologies

UNIT - 1

8) The power of HTML/CSS simplicity

Understand that the power of HTML and CSS for good element layout and styling is in its simplicity.
Twitter/Bootstrap is a great (and probably the best) example of this. Combine simple HTML structure
with simple CSS classes, and you can get some great reusable UI elements.

SASS or LESSCSS (used in Bootstrap) are also great tools that bring componentization to CSS, thus
allowing for clean and simple HTML/CSS application code, which, in turn, facilitates customization
and performance optimization.

On the other hand, many frameworks such as jQueryUI, jQueryMobile, SenchaTouch, and Sencha that
provide a heavy abstraction between the developer code and what the browser “sees” often end up in
application code that is much harder to customize and optimize. In other words, developers should not
be afraid to code HTML/CSS as well as code pure JavaScript.

9) Decoupling UI layout/style (HTML/CSS) from behavior (i.e. JS)

Following on point #8, understand that decoupling UI layout/style from behavior (i.e. JS) brings a
great deal of performance and flexibility.

This approach allows you to take full advantage of the browser’s ever faster rendering time
performance as well as its delegation model by allowing lightweight DOM elements to be rendered in
bulk and activated only when the user interacts with them (using delegation and such event models).

This could also be described as the Twitter/Bootstrap way vs. the Sencha one. The former has a great
decoupling between the HTML/CSS code and the JavaScript (which is not needed to get the
layout/style), and the latter, Sencha, combines everything into a foreign all-in-one component UI and
OO language.

In other words, a good understanding and control of the HTML/CSS and the associated JavaScript
logic makes the application code more flexible, future proof, customizable, and "optimizable."

10) Understanding the need of a MVC

Web application developers (not Web page developers) must have a good understanding of the
principle and benefits of a Model-View-Controller (MVC) architecture.

In short, building any type of application, desktop, native, Web 1.0, Ajax, or HTML5 always requires
a good partitioning of the data and the views. The two need to be integrated but kept independent at
the same time. The architecture and pattern that allow this to be accomplished is often referred to as
MVC.
 MEAN STACK Technologies

UNIT - 1

11) Understanding the benefits of a DOM-centric MVC approach

Okay, this is an architecture approach based more on our experience than on fact, but I think that to
develop a high-end and scalable HTML5 application, developers do not need to (and actually should
not) bring the full desktop/native/widget-centric MVC patterns to the DOM, but rather they should
start from the DOM and see what is missing to have a strong MVC in the DOM way.

The DOM-centric MVC approach is the one we took at BriteSnow, and we have materialized this
approach in a lightweight DOM-centric MVC framework called brite.

CSS3 Concepts :

1.  border-radius

Easily the most popular CSS3 property in the bunch,  border-radius  was sort of the flagship CSS3 property. While many
designers were still terrified of the idea that a layout could be presented differently from browser to browser, a baby step like
rounded corners was an easy way to lure them in!

The irony is that we're all perfectly fine with the idea of providing an alternate viewing experience for mobile browsers.
Strangely, however, some don't feel the same way when it comes to desktop browsing.

1 border-radius: 4px;

Circles
Some readers may not be aware that we can also create circles with this property. All you have to do is set the radius to half
the width or height of the element.

1 border-radius: 50px;

And, if we want to have some fun, we can also take advantage of the Flexible Box Model (detailed in #8) to both vertically
and horizontally center the text within the circle. It requires a bit of code, but only because of the need to compensate for
various vendors.

1 display: flex;

2 align-items: center;

3 justify-content: center;
 MEAN STACK Technologies

UNIT - 1

2.  box-shadow

Next, we have the ubiquitous  box-shadow , which allows you to immediately apply depth to your elements. Just don't be too
obnoxious with the values you set!

1 box-shadow: 1px 1px 3px #292929;

box-shadow  accepts four parameters:

 x offset
 y offset
 blur
 color of shadow

Now, what many don't realize is that you can apply multiple  box-shadows  at a time. This can lead to some really interesting
effects. For example, we can use a blue and green shadow to magnify each shadow.

1 box-shadow: 1px 1px 3px green, -1px -1px 3px blue;

Clever Shadows
By applying shadows to the  ::before  and  ::after  pseudo-classes, we can create some really interesting perspectives. Here's
one to get you started:

The HTML

1 <div class="box">

2    <img src="tuts.jpg" alt="Tuts" />

3 </div>

The CSS

01 .box:after {

02   content: "";

03   position: absolute;

04   z-index: -1; /* hide shadow behind image */

 MEAN STACK Technologies

UNIT - 1
05   box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);

06   width: 70%;

07   left: 15%; /* one half of the remaining 30% (see width above) */

08   height: 100px;

09   bottom: 0;

10 }

.  text-shadow

Similarly to  box-shadow , it must be applied to text, and it receives the same four parameters:

 x-offset
 y-offset
 blur
 color of shadow

1 h1 {

2    text-shadow: 0 1px 0 white;

3    color: #292929;

4 }

Text Outlines
Again, much like its sibling,  box-shadow , we can apply multiple shadows, by using a comma as the separator. For example,
let's say that we want to create an outline effect for the text. While  webkit  does offer a  stroke  effect, we can reach more
browsers by using the following method (though not quite as pretty):

1 body { background: white; }

2  

3 h1 {

4    text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;

 MEAN STACK Technologies

UNIT - 1
5    color: white;

6 }

4.  text-stroke

Be careful with this method. It is a non-standard feature. The  text-stroke  property isn't yet part of the CSS3 spec. However,
it is now supported by all major browsers if you use the  -webkit-  prefix.

1 h1 {

2    -webkit-text-stroke: 3px black;

3    color: white;

4 }

5. Multiple Backgrounds

The  background  property has been overhauled to allow for multiple backgrounds in CSS3.

Let's create a silly example, simply as a proof of concept. For lack of any suitable images nearby, I'll use two tutorial images
as our backgrounds. Of course, in a real-world application, you might use a texture and, perhaps, a gradient for your
backgrounds.

1 .box {

2 background: url(image/path.jpg) 0 0 no-repeat,

3  url(image2/path.jpg) 100% 0 no-repeat;

4 }

Above, by using a comma as the separator, we're referencing two separate background images. Notice how, in the first case,
it's placed in the top left position ( 0 0 ), and, in the second, the top right position ( 100% 0 ).
 MEAN STACK Technologies

UNIT - 1

6.  background-size

Before modern CSS, we were forced to use sneaky techniques to allow for resizable background images.

1 background: url(path/to/image.jpg) no-repeat;

2 background-size: 100% 100%;

The code above will direct the background image to take up all available space. As an example, what if we wanted a
particular image to take up the entire background of the  body  element, regardless of the browser window's width?

1 body, html { height: 100%; }

2  

3 body {

4  background: url(path/to/image.jpg) no-repeat;

5  background-size: 100% 100%;

6 }

8. Flexible Box Model

The Flexible Box Model will finally allow us to get away from those mangy  floats . Though it takes a bit of work to wrap
your head around the new properties, once you do, it all should make perfect sense.

Let's construct a quick demo, and create a simple two-column layout.

1 <div id="container">

2  

3  <div id="main"> Main content here </div>

4  <aside> Aside content here </aside>

5  

6 </div>
 MEAN STACK Technologies

UNIT - 1

Now for the CSS: we first need to instruct the  container  to be treated as a flexible  box . I'll also apply a generic width and
height, since we don't have any actual content in play.

1 #container {

2    width: 600px;

3    height: 450px; /* just for demo */

4  

5    background: #e3e3e3;

6    margin: auto;

7  

8    display: flex;

9 }

Next, let's apply, for the demo, unique background colors to the  #main   div , and the  aside .

1 #main {

2    background: yellow;

3 }  

4  

5 aside {

6    background: red;

7 }

Anatomy of a web page :

To make it easier for the beginner, below is an image of the anatomy of a web page. Click the image to see a larger view.
 MEAN STACK Technologies

UNIT - 1

Starting at the top of the web page, let's go through the anatomy of a web page:

Page Title

The page tile is set using the <title> </title> set of tags in the head section of the html coding. This is the only web page
element within the head section of the web page the visitor will see.

URL (Domain Name)

The URL is the domain name of the website. If the visitor just typed www.domainname.com they would be taken to the
home page of the website.

File Name

File name is the web page file name. It cannot contain any spaces! The file name can be written as one long name (e.g.
basichtmlarticles.htm), with hyphens (e.g. basic-html-articles.htm, as shown in the image above) or with underscores (e.g.
basic_html_articles.htm).

When you create a web page you have to give it a name. The file name has what is called an extension at the end of it.

The extension at the end of the file name tells the browser what kind of file it is. A HTML document would have an
extension of .htm or html. If your web page uses a certain programming language it would have the appropriate extension.
e.g. .php is for the PHP programming language, .asp is for the ASP programming language.

Note: Servers and some browsers will not render (show) your page if you refer to it differently in your links than the way it
is actually named. Basic-Html-Articles.htm is different from basic-html-articles.htm to some servers and browsers. To
combat this problem always name your files with lower case letters. This way you don't have to remember how you
capitalized a file name.
 MEAN STACK Technologies

UNIT - 1
Scroll Bars

Scroll bars are on the right side and bottom of the browser window. If there is a scroll bar at the bottom (horizontal scroll bar)
your web page content is too wide for the browser window.

A web page layout should be designed so there is no horizontal scroll bar. You need to test your web page at different
resolutions and on different operating systems to see if the way the page is laid out will result in horizontal scroll bars when
viewed at smaller resolutions or by different operating systems.

One way to avoid this problem is to use a flexible (fluid) design. A flexible design will adjust to the browser window size. As
long as all your elements add up to less than the browser width there will not be a horizontal scroll bar.

Next, we will look at the web page content portion of the anatomy of a web page.

Header

The header is at the very top of the web page. It usually contains a logo for the website.

Navigation

A website can use a left navigation system, a right navigation system or a navigation system that spans horizontally right
under the header or above the header.

The navigation system of a website has to be consistent throughout the website so the visitor will learn your navigation
system. Changing the navigation system from page to page is confusing to the visitor and they will get frustrated and leave!
 MEAN STACK Technologies

UNIT - 1
Web Page Content

Web page content includes everything between the <body> and </body> tags. We have already looked at some of the web
page content, the header and navigation system. Also considered web page content is the web page footer (we will discuss
this next) and the center section of this page that you are looking at now.

Footer

The footer is the bottom section of the web page.

This section is where you usually put your copyright notice, link to your privacy policy and your website contact
information.

XML: Document type Definition :

The XML Document Type Declaration, commonly known as DTD, is a way to describe XML language precisely.
DTDs check vocabulary and validity of the structure of XML documents against grammatical rules of appropriate
XML language.
An XML DTD can be either specified inside the document, or it can be kept in a separate document and then
liked separately.
Syntax
Basic syntax of a DTD is as follows −
<!DOCTYPE element DTD identifier
[
declaration1
declaration2
........
]>
In the above syntax,
 The DTD starts with <!DOCTYPE delimiter.
 An element tells the parser to parse the document from the specified root element.
 DTD identifier is an identifier for the document type definition, which may be the path to a file on the
system or URL to a file on the internet. If the DTD is pointing to external path, it is called External
Subset.
 The square brackets [ ] enclose an optional list of entity declarations called Internal Subset.
 MEAN STACK Technologies

UNIT - 1

Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the XML files. To refer it as internal
DTD, standalone attribute in XML declaration must be set to yes. This means, the declaration works independent
of an external source.
Syntax
Following is the syntax of internal DTD −
<!DOCTYPE root-element [element-declarations]>
where root-element is the name of root element and element-declarations is where you declare the elements.
Example
Following is a simple example of internal DTD −
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
]>

<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
Let us go through the above code −
Start Declaration − Begin the XML declaration with the following statement.
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>
DTD − Immediately after the XML header, the document type declaration follows, commonly referred to as the
DOCTYPE −
<!DOCTYPE address [
The DOCTYPE declaration has an exclamation mark (!) at the start of the element name. The DOCTYPE informs
the parser that a DTD is associated with this XML document.
DTD Body − The DOCTYPE declaration is followed by body of the DTD, where you declare elements,
attributes, entities, and notations.
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone_no (#PCDATA)>
 MEAN STACK Technologies

UNIT - 1

Several elements are declared here that make up the vocabulary of the <name> document. <!ELEMENT name
(#PCDATA)> defines the element name to be of type "#PCDATA". Here #PCDATA means parse-able text data.
End Declaration − Finally, the declaration section of the DTD is closed using a closing bracket and a closing
angle bracket (]>). This effectively ends the definition, and thereafter, the XML document follows immediately.
Rules
 The document type declaration must appear at the start of the document (preceded only by the XML
header) − it is not permitted anywhere else within the document.
 Similar to the DOCTYPE declaration, the element declarations must start with an exclamation mark.
 The Name in the document type declaration must match the element type of the root element.

External DTD
In external DTD elements are declared outside the XML file. They are accessed by specifying the system
attributes which may be either the legal .dtd file or a valid URL. To refer it as external DTD, standalone attribute
in the XML declaration must be set as no. This means, declaration includes information from the external source.
Syntax
Following is the syntax for external DTD −
<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Example
The following example shows external DTD usage −
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</address>
The content of the DTD file address.dtd is as shown −
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>

Types
You can refer to an external DTD by using either system identifiers or public identifiers.
 MEAN STACK Technologies

UNIT - 1

System Identifiers
A system identifier enables you to specify the location of an external file containing DTD declarations. Syntax is
as follows −
<!DOCTYPE name SYSTEM "address.dtd" [...]>
As you can see, it contains keyword SYSTEM and a URI reference pointing to the location of the document.
Public Identifiers
Public identifiers provide a mechanism to locate DTD resources and is written as follows −
<!DOCTYPE name PUBLIC "-//Beginning XML//DTD Address Example//EN">
As you can see, it begins with keyword PUBLIC, followed by a specialized identifier. Public identifiers are used
to identify an entry in a catalog. Public identifiers can follow any format, however, a commonly used format is
called Formal Public Identifiers, or FPIs.

XML schemas :
XML Schema is commonly known as XML Schema Definition (XSD). It is used to describe and validate the structure and
the content of XML data. XML schema defines the elements, attributes and data types. Schema element supports
Namespaces. It is similar to a database schema that describes the data in a database.

Syntax
You need to declare a schema in your XML document as follows −

Example
The following example shows how to use schema −

<?xml version = "1.0" encoding = "UTF-8"?>

<xs:schema xmlns:xs = "http://www.w3.org/2001/XMLSchema">
<xs:element name = "contact">
<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The basic idea behind XML Schemas is that they describe the legitimate format that an XML document can take.

Elements
As we saw in the XML - Elements chapter, elements are the building blocks of XML document. An element can be defined
within an XSD as follows −
 MEAN STACK Technologies

UNIT - 1

<xs:element name = "x" type = "y"/>

Definition Types
You can define XML schema elements in the following ways −

Simple Type
Simple type element is used only in the context of the text. Some of the predefined simple types are: xs:integer, xs:boolean,
xs:string, xs:date. For example −

<xs:element name = "phone_number" type = "xs:int" />

Complex Type
A complex type is a container for other element definitions. This allows you to specify which child elements an element can
contain and to provide some structure within your XML documents. For example −

<xs:element name = "Address">

<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
<xs:element name = "phone" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
In the above example, Address element consists of child elements. This is a container for other <xs:element> definitions,
that allows to build a simple hierarchy of elements in the XML document.

Global Types
With the global type, you can define a single type in your document, which can be used by all other references. For
example, suppose you want to generalize the person and company for different addresses of the company. In such case, you
can define a general type as follows −

<xs:element name = "AddressType">

<xs:complexType>
<xs:sequence>
<xs:element name = "name" type = "xs:string" />
<xs:element name = "company" type = "xs:string" />
</xs:sequence>
</xs:complexType>
</xs:element>
Now let us use this type in our example as follows −

<xs:element name = "Address1">

<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone1" type = "xs:int" />
 MEAN STACK Technologies

UNIT - 1

</xs:sequence>
</xs:complexType>
</xs:element>

<xs:element name = "Address2">

<xs:complexType>
<xs:sequence>
<xs:element name = "address" type = "AddressType" />
<xs:element name = "phone2" type = "xs:int" />
</xs:sequence>
</xs:complexType>
</xs:element>
Instead of having to define the name and the company twice (once for Address1 and once for Address2), we now have a
single definition. This makes maintenance simpler, i.e., if you decide to add "Postcode" elements to the address, you need to
add them at just one place.

Attributes
Attributes in XSD provide extra information within an element. Attributes have name and type property as shown below −

<xs:attribute name = "x" type = "y"/>

Document Object Model :

In this post, we will discuss Document Object Model(DOM) along with its properties and methods used to manipulate
Document.
Introduction:
The Document Object Model (DOM) is a programming interface for HTML and XML(Extensible markup language)
documents. It defines the logical structure of documents and the way a document is accessed and manipulated.
Note: It is called as a Logical structure because DOM doesn’t specify any relationship between objects.
DOM is a way to represent the webpage in the structured hierarchical way so that it will become easier for programmers and
users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes or
Elements using commands or methods provided by Document object.
Structure of DOM:
DOM can be thought of as Tree or Forest(more than one tree). The term structure model is sometimes used to describe the
tree-like representation of a document. One important property of DOM structure models is structural isomorphism: if any
two DOM implementations are used to create a representation of the same document, they will create the same structure
model, with precisely the same objects and relationships.
Why called as Object Model ?
Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a
document and the objects of which it is composed of like tag elements with attributes in HTML.
Properties of DOM:
 MEAN STACK Technologies

UNIT - 1
Let’s see the properties of document object that can be accessed and modified by the document object.

1. Window Object: Window Object is at always at top of hierarchy.

2. Document object: When HTML document is loaded into a window, it becomes a document object.
3. Form Object: It is represented by form tags.
4. Link Objects: It is represented by link tags.
5. Anchor Objects: It is represented by a href tags.
6. Form Control Elements:: Form can have many control elements such as text fields, buttons, radio buttons, and
checkboxes, etc.
Methods of Document Object:
1. write(“string”): writes the given string on the document.
2. getElementById(): returns the element having the given id value.
3. getElementsByName(): returns all the elements having the given name value.
4. getElementsByTagName(): returns all the elements having the given tag name.
5. getElementsByClassName(): returns all the elements having the given class name.
Levels of DOM:
1. Level 0: Provides low-level set of interfaces.
2. Level 1: DOM level 1 can be described in two parts: CORE and HTML.
 CORE provides a low-level interfaces that can be used to represent any structured document.
 HTML provides high-level interfaces that can be used to represent HTML document.
3. Level 2 : consists of six specifications: CORE2, VIEWS, EVENTS, STYLE, TRAVERSAL and RANGE.
 CORE2: extends functionality of CORE specified by DOM level 1.
 VIEWS: views allows programs to dynamically access and manipulate content of document.
 EVENTS: Events are scripts that is either executed by browser when user reacts to web page.
 STYLE: allows programs to dynamically access and manipulate content of style sheets.
 TRAVERSAL: allows programs to dynamically traverse the document.
 RANGE: allows programs to dynamically identify a range of content in document.
4. Level 3: consists of five different specifications: CORE3, LOAD and SAVE, VALIDATION, EVENTS,
and XPATH.
 CORE3: extends functionality of CORE specified by DOM level 2.
 LOAD and SAVE: allows program to dynamically load the content of XML document into DOM document and
save the DOM Document into XML document by serialization.
 VALIDATION: allows program to dynamically update the content and structure of document while ensuring
document remains valid.
 EVENTS: extends functionality of Events specified by DOM Level 2.
 XPATH: XPATH is a path language that can be used to access DOM tree.
 MEAN STACK Technologies

UNIT - 1

XSLT:
Before learning XSLT, we should first understand XSL which stands for EXtensible Stylesheet Language. It is similar to
XML as CSS is to HTML.

Need for XSL

In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to
them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand
and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet
Language. An XSL document specifies how a browser should render an XML document.
Following are the main parts of XSL −
 XSLT − used to transform XML document into various other types of document.
 XPath − used to navigate XML document.
 XSL-FO − used to format XML document.

What is XSLT
XSLT, Extensible Stylesheet Language Transformations, provides the ability to transform XML data from one format to
another automatically.

How XSLT Works

An XSLT stylesheet is used to define the transformation rules to be applied on the target XML document. XSLT stylesheet
is written in XML format. XSLT Processor takes the XSLT stylesheet and applies the transformation rules on the target
XML document and then it generates a formatted document in the form of XML, HTML, or text format. This formatted
document is then utilized by XSLT formatter to generate the actual output which is to be displayed to the end-user.

Advantages
Here are the advantages of using XSLT −
 Independent of programming. Transformations are written in a separate xsl file which is again an XML document.
 Output can be altered by simply modifying the transformations in xsl file. No need to change any code. So Web
designers can edit the stylesheet and can see the change in the output quickly.

SAX Approch :
 MEAN STACK Technologies

UNIT - 1
SAX (Simple API for XML) is an event-based parser for XML documents. Unlike a DOM parser, a SAX parser creates no
parse tree. SAX is a streaming interface for XML, which means that applications using SAX receive event notifications
about the XML document being processed an element, and attribute, at a time in sequential order starting at the top of the
document, and ending with the closing of the ROOT element.
 Reads an XML document from top to bottom, recognizing the tokens that make up a well-formed XML document.
 Tokens are processed in the same order that they appear in the document.
 Reports the application program the nature of tokens that the parser has encountered as they occur.
 The application program provides an "event" handler that must be registered with the parser.
 As the tokens are identified, callback methods in the handler are invoked with the relevant information.

When to Use?
You should use a SAX parser when −
 You can process the XML document in a linear fashion from top to down.
 The document is not deeply nested.
 You are processing a very large XML document whose DOM tree would consume too much memory. Typical DOM
implementations use ten bytes of memory to represent one byte of XML.
 The problem to be solved involves only a part of the XML document.
 Data is available as soon as it is seen by the parser, so SAX works well for an XML document that arrives over a
stream.

Disadvantages of SAX
 We have no random access to an XML document since it is processed in a forward-only manner.
 If you need to keep track of data that the parser has seen or change the order of items, you must write the code and
store the data on your own.

ContentHandler Interface
This interface specifies the callback methods that the SAX parser uses to notify an application program of the components
of the XML document that it has seen.
 void startDocument() − Called at the beginning of a document.
 void endDocument() − Called at the end of a document.
 void startElement(String uri, String localName, String qName, Attributes atts) − Called at the beginning of an
element.
 void endElement(String uri, String localName,String qName) − Called at the end of an element.
 void characters(char[] ch, int start, int length) − Called when character data is encountered.
 void ignorableWhitespace( char[] ch, int start, int length) − Called when a DTD is present and ignorable
whitespace is encountered.
 void processingInstruction(String target, String data) − Called when a processing instruction is recognized.
 void setDocumentLocator(Locator locator)) − Provides a Locator that can be used to identify positions in the
document.
 void skippedEntity(String name) − Called when an unresolved entity is encountered.
 void startPrefixMapping(String prefix, String uri) − Called when a new namespace mapping is defined.
 void endPrefixMapping(String prefix) − Called when a namespace definition ends its scope.

Attributes Interface
This interface specifies methods for processing the attributes connected to an element.
 int getLength() − Returns number of attributes.
 MEAN STACK Technologies

UNIT - 1
 String getQName(int index)
 String getValue(int index)
 String getValue(String qname)