Unit-1

1.1 Introduction

The definition of HTML is HyperText Markup Language.

HyperText is the method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page. The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.

Markup is what HTML tags do to the text inside them. They mark it as a certain type of text (italicised text, for example).

HTML is a Language, as it has code-words and syntax like any other language.

HTML stands for Hyper Text Markup Language.

It is used to design web pages using a markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the

structure of web pages. o This language is used to annotate (at the note for computer) text so that a machine

can understand it and manipulate text accordingly. o Most of the markup (e.g. HTML) languages are human readable.o The language uses tags to define what manipulation has to be done on the text.o It is used for structuring and presenting the content on the web pages.

HTML5 is the fifth version of HTML. Many elements are removed or modified from HTML5.

1.2 Differences between HTML and HTML5

There are many differences between HTML and HTML5 which are discussed below:

HTML HTML5It didn’t support audio and video without the use of flash player support.

It supports audio and video controls with the use of <audio> and <video> tags.

It uses cookies to store temporary data. It uses SQL databases and application cache to store offline data.

Does not allow JavaScript to run in browser.Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5.

Vector graphics is possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.

Vector graphics is additionally an integral a part of HTML5 like SVG and canvas.

It does not allow drag and drop effects. It allows drag and drop effects.

Not possible to draw shapes like circle, rectangle, triangle etc.

HTML5 allows to draw shapes like circle, rectangle, triangle etc.

It works with all old browsers. It supported by all new browser like Firefox, Mozilla, Chrome, Safari, etc.

Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.

Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy.

Elements like nav, header were not present. New element for web structure like nav, header, footer etc.

Character encoding is long and complicated. Character encoding is simple and easy.It is almost impossible to get true GeoLocation of user with the help of browser.

One can track the GeoLocation of a user easily by using JS GeoLocation API.

It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.Attributes like charset, async and ping are absent in HTML.

Attributes of charset, async and ping are a part of HTML 5.

There are many HTML elements which have been modified or removed from HTML5. Some of them are listed below:

Element In HTML5<applet> Changed to <object><acronym> Changed to <abbr><dir> Changed to <ul><frameset> Removed<frame> Removed<noframes> Removed<strike> No new tag. CSS is used for this<big> No new tag. CSS is used for this<basefont> No new tag. CSS is used for this<font> No new tag. CSS is used for this<center> No new tag. CSS is used for this<tt> No new tag. CSS is used for this

Many new elements are added in HTML5 like summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

1.3 New Semantic Tags Added by HTML5(Structural elements)

The new semantic tags were added as part of HTML5 to define the structure and content of a web page.

header main nav article section aside address footer

<article>

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

If the website includes blog posts, articles, or any other content that could just as well appear on another website as syndicated content, wrap that content in an article post. Use an article element just about anywhere other than nested within an address element, but in most cases an article element will be a direct descendant of a main element or of a section element that is a direct descendant of a main element.

<section>The <section> element defines a section in a document.

A home page could normally be split into sections for introduction, content, and contact information.

The section element is used to identify content that is a major sub-section of a larger whole. For example, if you've posted a long-form ebook in HTML format, it would be reasonable to wrap each chapter in a section element

<header>

The <header> element specifies a header for a document or section.

The header element is used to contain the content that appears at the top of every page of your website: the logo, tagline, search prompt, and possibly a navigational menu. In most cases, the header element is best positioned as a direct descendant of the body element

<footer>

The <footer> element specifies a footer for a document or section.

A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.

The footer appears at the bottom of a section of a document. Typically, the footer is a direct descendant of the body element, but it can also be used within a main element, a section, or an article

<main>

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

Use the main element between header and footer elements to contain the primary content of your web page. The main element cannot be a descendant of an article, aside, header, footer, or nav element. Instead, it should be a direct descendant of the body element.

<nav>

Navigational menus are commonly placed at the top of a web page, in a sidebar, or in the page footer. Wherever you happen to place a navigational menu, wrap it in nav tags.

<aside>The <aside> tag defines some content aside from the content it is placed in.

If your website contains information that isn't directly related to the main content of the page, it would be appropriate to wrap that information in aside tags

<address>

The address element provides contact information for the nearest parent article or body element that contains it. Use the address element inside an article to provide contact information for the article's author.

1.4 New Form Elements

HTML5 added the following form elements:

<datalist> <output>

<datalist>

The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist>

element.

<input list="browsers">  <datalist id="browsers">    <option value="Internet Explorer">    <option value="Firefox">    <option value="Chrome">    <option value="Opera">    <option value="Safari">  </datalist>

<output>

The <output> element represents the result of a calculation

1.4.1 New Input Types

New Input Types New Input Attributes

Color date datetime datetime-local email month number range search tel time url week

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

Color:

is used for input fields that should contain a color. a color picker can show up in the input field.

Date:

is used for input fields that should contain a date. a date picker can show up in the input field.

Email:

is used for input fields that should contain an e-mail address. the e-mail address can be automatically validated when submitted.

Month:

allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field.

Number:

defines a numeric input field. You can also set restrictions on what numbers are accepted.

1.4.2 Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description

Disabled Specifies that an input field should be disabled

Max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

Min Specifies the minimum value for an input field

Pattern Specifies a regular expression to check the input value against

Readonly Specifies that an input field is read only (cannot be changed)

Required Specifies that an input field is required (must be filled out)

Size Specifies the width (in characters) of an input field

Step Specifies the legal number intervals for an input field

Value Specifies the default value for an input field

Range:

defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100.

you can set restrictions on what numbers are accepted with the min, max, and step attributes:

time:

allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.

url:

is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted.

1.4.3 HTML5 Attributes

HTML5 added the following attributes for <input>:

autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

and the following attributes for <form>:

autocomplete novalidate

form:

The form attribute specifies one or more forms an <input> element belongs to.

Formaction:

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element

Formtarget:

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

Height and width:

The height and width attributes specify the height and width of an <input type="image"> element.

1.5 Introduction to CSS3:

CSS3 is an extension of CSS 2.1 that adds powerful new functionality, but it’s no longer a single specification. Instead, it’s been divided up into several modules.

Each module is a standalone specification for a subsection of CSS, like selectors, text, or backgrounds.

CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is module. Some of the modules are shown below −

Selectors Box Model Backgrounds Image Values and Replaced Content Text Effects 2D Transformations 3D Transformations Animations Multiple Column Layout User Interface

Overview of What’s New

Much of CSS3 is a repeat of CSS 2.1, of course. But there are many additions and revisions. What follows isn’t an exhaustive list of differences— there are far too many changes to list here—but an overview of the best-supported, popular, and useful changes to CSS from level 2.1 to level 3.

Image-free visual effects: CSS3 contains a lot of new properties that allow you to create visual effects that previously could be accomplished only with images (or sometimes scripting), such as rounded corners, drop shadows, semitransparent backgrounds, gradients, and images for borders. Many of these new properties are in the Backgrounds and Borders module; others are in the Colors and Image Values modules.

Box transformations: Another category of visual effects that CSS3 makes possible are those that manipulate the box’s position and shape in two-or three-dimensional space, such as rotating, scaling, or skewing it. These effects are called transforms, and are covered in the 2D Transforms and 3D Transforms modules.

Unique fonts: The Fonts module introduces the @font-face rule that allows you to link to a font file on your server and use it to display the text on your page, instead of being limited to the fonts on your users’ machines. This makes beautiful typography so much more attainable.

Powerful selectors: CSS3 introduces over a dozen new selectors, mostly pseudo-classes and attribute selectors. They allow you to target specific pieces of your HTML without needing to add IDs or classes, streamlining your code and making it more error-proof. These selectors are included in the Selectors module, naturally.

-Transitions and animations: CSS3 transitions, covered in a module of the same name, are a simple type of animation that allow you to ease the change from one style on an element to another, such as gradually and smoothly changing the color of a button when you hover over it. Full-fledged CSS3 animations, again covered in a module of the same name, can make more complicated style changes and movements possible without needing Flash or JavaScript.

Media queries: .The Media Queries module introduces syntax for feeding styles based on the capabilities of the user’s display or device, such as the viewport width, screen resolution, and how many colors it can display. Media queries are a great tool for creating mobile-optimized web sites.

Multiple-column layouts: CSS3 introduces a few new modules that make multi-column layouts easier to create. The Multicolumn Layout module deals with flowing the text of a single block into multiple columns, similar to newspaper layout. The Flexible Box Layout module deals with making blocks align horizontally or vertically with each other and making them more flexible to the available space than floats or positioning can be. There are also more experimental layout modules called Template Layout and Grid Positioning.

1.5.1.Rounded Corners:

CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.

The following table shows the possible values for Rounded corners as follows −

Sr.No. Value & Description

1border-radius

Use this element for setting four border radius property

2border-top-left-radius

Use this element for setting the border of top left corner

3border-top-right-radius

Use this element for setting the border of top right corner

4border-bottom-right-radius

Use this element for setting the border of bottom right corner

5border-bottom-left-radius

Use this element for setting the border of bottom left corner

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

1.5.2. CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

1. The image to use as the border2. Where to slice the image3. Define whether the middle sections should be repeated or stretched4. The most commonly used values are shown below −

Sr.No. Value & Description

1border-image-source

Used to set the image path

2border-image-slice

Used to slice the boarder image

3border-image-width

Used to set the boarder image width

4border-image-repeat

Used to set the boarder image as rounded, repeated and stretched

<html> <head> <style> #borderimg1 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 10px; } #borderimg2 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round;

border-image-slice: 30; border-image-width: 20px; } #borderimg3 { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 30px; } </style> </head>

<body> <p id = "borderimg1">This is image boarder example.</p> <p id = "borderimg2">This is image boarder example.</p> <p id = "borderimg3">This is image boarder example.</p> </body></html>

1.5.3. CSS Multiple Backgrounds

CSS allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

Multiple background images can be specified using either the individual background properties or the background shorthand property.

The most commonly used values are shown below −

Sr.No. Value & Description

1background

Used to setting all the background image properties in one section

2background-clip

Used to declare the painting area of the background

3background-image

Used to specify the background image4 background-origin

Used to specify position of the background images

5background-size

Used to specify size of the background images

A new property to CSS3 is background-size. This property allows you to set the size of the background images.

syntax: E { background-size: value; }

This property’s value can be a pair of lengths or percentages, a single length or percentage, or a keyword. To make the image appear at its natural size, use the auto keyword.

background-clip, which sets the section of the box model that becomes the limit of where the background (either color or image) is displayed.

syntax: E { background-clip: box; }

The box value can be one of three keywords: border-box, content-box, or padding-box. border-box, the default value, displays the background behind the border. A value of padding-box displays the background only up to, and not behind, the border. content-box means the background stops at the element’s padding.

background-origin: Using background-origin, you can set the point where the background is calculated to begin

syntax: E { background-origin: box; }

The box value accepts the same keywords as in background-clip: border-box, content-box, and padding-box.

1.5.4. Gradients:A linear gradient is one that gradually transitions between colors over the length of a straight line connecting two points. At its simplest, a linear gradient changes proportionally between two colors along the full length of the line.

E { background-image: linear-gradient(black, white); }

Each color that you want the gradient to pass through is known as a colorstopand is passed into the function in a comma-separated list of arguments.

Setting gradient direction:The axis between the first and last color-stops is known as the gradient line.By default, line move the bottom, vertically. This is the default direction. To set a different gradient line, specify a target side or corner of the box by passing a new argument into the function before the list of color-stops. The argument is a string of keywords, beginning with to and followed by one or two direction

E { background-image: linear-gradient(to top, black, white); }

To change the same gradient to run diagonally from the top-left corner to the bottom-right one, you use two directional keywords:

E { background-image: linear-gradient(to right bottom, black, white); }

Color-stops are evenly distributed along the length of the gradient, so, in this case, the white color-stop is exactly halfway between the two blacks, at the middle point of the gradient. You can alter this distribution by adding a length or percentage value after each color-stop to shift the point along the gradient line where a color-stop is positioned.

E { background-image: linear-gradient(black, white 75%, black); }

Repeating Linear GradientsRather than create only a single gradient from one side of an element to another, you can repeat the same gradient until the element is filled using the repeating-linear-gradient() function

E { background-image: repeating-linear-gradient(white, black 25%); }

Radial GradientsA radial gradient is a gradual transition between colors that moves out from a central point in all directions. At its simplest, a radial gradient gradually changes between two colors in a circular or elliptical shape. Radial gradients are defined with the radial-gradient() value function

E { background-image: radial-gradient(white, black); }

Using Radial Gradients

You can set the shape of a radial gradient by adding a keyword before the color-stops. The default is ellipse, but you can use the alternative circle like this:

E { background-image: radial-gradient(circle, white, black); }

Repeating Radial GradientsJust as the linear-gradient() function has repeating-linear-gradient(), a repeating-radial-gradient() can be used to repeat the supplied arguments until the limit specified in the final color-stop is reached.

E { background-image: repeating-radial-gradient(circle, black, white 20%); }

Multiple GradientsBecause gradients are applied with the background-image property, you can use CSS3’s multiple background values’ syntax to apply multiple gradients to an element using comma-separated values. .linears {background-image:linear-gradient(to right bottom, black, white 50%, transparent 50%),linear-gradient(to left bottom, black, white 50%, black 50%);}.radials {background-image:radial-gradient(closest-side circle at 20% 50%, white, black 95%, transparent),radial-gradient(closest-side circle at 50% 50%, white, black 95%, transparent),radial-gradient(closest-side circle at 80% 50%, white, black 95%, transparent);

1.5.5. Transformations

a) transform Property:A range of different transformations can be applied, but all are declared asfunctions in the transform property. Here’s the basic syntax:E { transform: function(value); }

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.E{transform:rotate(value);}

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).E(transform:translate(x,y);}E{transform:translateX(value) translate(value);}

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

E { transform: scaleX(value) scaleY(value); }E{transform:scale(x,y);}

Using a negative value has the effect of flipping the element vertically, creating a “reflection” of the original element at the same scale.

b.skew() Method:

The skew() method skews an element along the X-axisor Y-axis by the given angle.

E{ transform: skewX(value) skewY(value);}

1.5.6 Transitions: Transition is an animation that moves a property between two states. The difference between transitions and animations is that the former are implicit and the latter are declared. That means transitions only take effect when the property they are applied to changes value, whereas animations are explicitly executed when applied to an element.transition-propertyThe first new property, transition-property, specifies which property (or properties) of an element will be animated .Syntax:E { transition-property: keyword; }

transition-durationThe next property is transition-duration, which defines the length of time that the transition takes to complete. syntax:E { transition-duration: time; }

transition-timing-functionTo control the manner in which an element transitions between states, you use the transition-timing-function property. This property allows for variations in speed along the duration of the transition, which gives you control over the animation’s pace.syntax:E { transition-timing-function: keyword; }The possible keyword values are ease, linear, ease-in, ease-out, and ease-in-out

transition-delayThe final property is transition-delay, which sets the time when the transition starts. syntax:E { transition-delay: time; }

1.5.7.AnimationsTransitions are good but naturally limited; they are only applied when a property value changes.KeyframesYou can think of CSS animations as a series of transitions, chained into a sequence. The first step in creating your own animations is to define your keyframes, which are the points that set the start and end of a transition. The most simple animation has two keyframes—one at the start and one at the end—whereas more complex ones have multiple keyframes in between.keyframes are declared in the @keyframes rule, syntax:@keyframes name {selector { property : value; }}The first value for the @keyframes rule is name; this unique identifier is used to call the animation

Once you’ve defined the keyframes, the next step is to apply animation control properties to the elements you want to animateanimation-nameThe animation-name property refers to an animation that’s been defined with the @keyframes rule,animation-durationThe duration of an animation is set by the animation-duration property,E { animation-duration: time; }animation-timing-functionanimation-timing-function, which again is functionally identical to its counterpart transition-timing-function:E { animation-timing-function: value; }Permitted values are the timing function keywords (ease, linear, ease-in, ease-out, and ease-in-out),

animation-delayThe property animation-delay, which sets the time when the animation starts.Syntax:E { animation-delay: time; }

animation-iteration-countUnlike a transition, which only happens once (or twice, if you want to count the reverse), an animation can be repeated any number of times. The number of repetitions is set by the animation-iteration-count propertysyntax:E { animation-iteration-count: count; }The count value in this syntax is either a whole number or the keyword infiniteanimation-directionAnimations play from start to finish, but they can also play in reverse. You can set whether your animation always plays in one direction or alternates playing forward and backward. To do this, use the animation-direction property:E { animation-direction: keyword; }The keyword value has two options: normal or alternate.animation-fill-modeIf your animation is finite—that is, if it doesn’t have an infinite value for the animation-iteration-count property—then you use the animation-fill-mode property to set how the element appears outside of the animation cycle. You can change this behavior with animation-fill-mode.

E { animation-fill-mode: keyword; }The permitted keywords are none (the default), backwards, forwards, or both.

animation-play-stateThe animation-play-state property sets whether an animation is active. syntax:E { animation-play-state: keyword; }

The keyword value has two options: running means the animation is playing, and paused means it isn’t.

1.5.8 Flexbox:Flexbox allows the contents of a container to be displayed in a flexible grid (organized in

rows and/or columns).The first step in using Flexbox is to create the flex container—the parent element that will create a new formatting context for its contents. To declare a flex container, you simply use a new value for the display property:

E { display: flex; }

flex-direction:This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns..container { flex-direction: row | row-reverse | column | column-reverse;}

row (default): left to right in ltr; right to left in rtl row-reverse: right to left in ltr; left to right in rtl column: same as row but top to bottom column-reverse: same as row-reverse but bottom to top

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item { order: <integer>; /* default is 0 */}flex-growWhen using Flexbox, you will almost certainly encounter situations where the combined lengths of flex items along the main axis are greater or less than the width of the flex containerThis defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

.item {

flex-grow: <number>; /* default 0 */}

Negative numbers are invalid.

flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item { flex-shrink: <number>; /* default 1 */}

Negative numbers are invalid.

flex-wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

.container{ flex-wrap: nowrap | wrap | wrap-reverse;}

nowrap (default): all flex items will be on one line wrap: flex items will wrap onto multiple lines, from top to bottom. wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

1.5.9. Grid Layout

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

An HTML element becomes a grid container by setting the display property to grid

All direct children of the grid container automatically become grid items.

Grid Columns

The vertical line of grid items are called columns.The horizontal line of grid items are called rows.The space between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

grid-column-gapgrid-row-gapgrid-gap

The line between columns are called column lines.The line between rows are called row lines.

In an explicit grid, you can define a specific number of grid tracks by setting their size using a pair of properties: grid-template-columns and grid-template-rows. The value for each property is a space-separated list of lengths, which sets the width of the column or the height of the row. For example, the following code snippet creates a three-column grid, where the first and last columns are set to 20 percent of the width of the grid container and the second to 60 percent of the width:

E { grid-template-columns: 20% 60% 20%; }

You can use percentages or any unit of length, including the specialized grid unit of length called a fraction (fr). One fr is equivalent to one equal share of any unassigned length in a grid. I’ll explain what I mean. Take a look at this code, where the grid container has a width value of 600px, and three columns each have a defined width:E {display: grid;grid-template-columns: 100px 100px 200px;width: 600px;}The total width of the columns is 400px, which is 200px less than the width of the container. In this case, adding an extra column of 1fr width makes that column as wide as all of the remaining space, or 200px:

Every immediate child of a grid container becomes a grid item and should be placed in the grid. To do so, you assign the item a cell coordinate using a set of placement properties. The first of these are grid-column-start a grid-row-start, and each takes a single whole number as a value. This number refers to the line at the

start of a grid track (whether a column or a row), and the combined track references create the coordinate of a cell.The default value of both the grid-column-start and grid-row-start properties is 1, so omitting either value places the item in the first row or column.

By default, the item is fitted into the designated cell only, with any content that doesn’t fit overflowing the cell vertically. You can make an item expand in size to create an area that covers multiple cells in rows or columns by using the grid-column-end and grid-row-end properties.For example, to have an item span three rows, starting at line 1 and ending at 4, here’s the code you use:F {grid-row-start: 1;grid-row-end: 4;}As an alternative to the method just shown, you can, instead, use the span keyword, followed by the number of tracks the item spans. The rewritten rule looks like this:F { grid-row-end: span 3; }

1.6. Responsive Web sites

What is responsive web design?

Responsive web design is an approach whereby a designer creates a web page that “responds to” or resizes itself depending on the type of device it is being seen through.  That could be an oversized desktop computer monitor, a laptop or devices with small screens such as smartphones and tablets.

Responsive Web design has become an essential tool for anyone with a digital presence. With the growth of smartphones, tablets and other mobile computing devices, more people are using smaller-screens to view web pages.

These websites have to also consider the mobile-first index just announced by Google in April 2018. As more small businesses increase their mobile presence, their website, eCommerce, Google Business page, social media pages and other assets have to be easily accessible across all devices.

Purpose of Responsive Web Design:

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Let’s take a traditional “fixed” website.  When viewed on a desktop computer, for instance, the website might show three columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like. Or elements might be hidden from view or look distorted.  The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation or turned sideways for landscape view.

On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.

However, if a site uses responsive design, the tablet version might automatically adjust to display just two columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically.  Or possibly the user would have the ability to swipe over to view other columns.  Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

How Does Responsive Web Design Work?

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have three columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 30%, and column 3 should take up 20%, for instance.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

Media queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). It became a W3C recommended standard in June 2012, and is a cornerstone technology of responsive web design (RWD).The @media rule is used in media queries to apply different styles for different media types/devices. Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)

1.6.1.Media Queries in Responsive Design

Media types first appeared in HTML4 and CSS2.1, which enabled the placement of separate CSS for screen and print. In this way, it was possible to set separate styles for a page’s computer display vis-à-vis its printout.<link rel="stylesheet" type="text/css" href="screen.css" media="screen"><link rel="stylesheet" type="text/css" href="print.css" media="print">or

@media screen { * { background: silver }}In CSS3, you can define styles depending on the page width. As page width correlates with the size of the user’s device, this capability thus allows you to define different layouts for different devices. Note: media queries are supported by all major browsers.This definition is possible through the setting of basic properties: max-width ,  device-width ,  orientation , and  color . Other definitions are possible as well; but in this, case the most important things to note are minimum resolution (width) and orientation settings (landscape vs. portrait).

Media queries can be used to check many things, such as:

width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution

Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {   CSS-Code;}

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.We can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

Value DescriptionAll Used for all media type devicesPrint Used for printersScreen Used for computer screens, tablets, smart-phones etc.Speech Used for screenreaders that "reads" the page out loud

Example:<html><head><style>body { background-color: pink;}

@media screen and (min-width: 480px) { body { background-color: lightgreen; }}</style></head><body>

<h1>Resize the browser window to see the effect!</h1><p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>

</body></html>

1.6.2. ViewPort

The viewport is the user's visible area of a web page.The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

Setting The Viewport:HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.You should include the following <meta> viewport element in all your web pages:<meta name="viewport" content="width=device-width, initial-scale=1.0">A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

1.7. CSS Framework : Bootstrap

What is a Bootstrap?

Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter.

After its open source release in 2011, Bootstrap became popular very quickly, and not without reason. Web designers and web developers like Bootstrap because it is flexible and easy to work with. Its main advantages are that it is responsive by design, it maintains wide browser compatibility, it offers consistent design by using re-usable components, and it is very easy to use and quick to learn. It offers rich extensibility using JavaScript, coming with built-in support for jQuery plugins and a programmatic JavaScript API. Bootstrap can be used with any IDE or editor, and any server side technology and language, from ASP.NET to PHP to Ruby on Rails.

What Bootstrap Package Includes?

Scaffolding: Bootstrap provides a basic structure with Grid System, link styles, background.

CSS : Bootstrap comes with feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Components:Bootstrap contains over a dozen reusable componentsbuilt to provide iconography, dropdowns, navigation, alerts, popovers, and much more.

JavaScript Plugins:Bootstrap contains over a dozen custom jQuery plugins. You can easily include them all, or one by one.

Customize: You can customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.

Use of Bootstrap:

There are two ways to start using Bootstrap on your own web site.

You can:

Download Bootstrap from getbootstrap.com Include Bootstrap from a CDN

If you want to download and host Bootstrap yourself, go to getbootstrap.com, and follow the instructions there.

Bootstrap CDN

If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery:

You can link directly to the files via the Bootstrap CDN (Content Delivery Network) at MaxCDN. All Bootstrap plugins use JQuery so you'll need to ensure you're using that too.

<!--compiled and minified CSS --><link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Design & Development Standards

To get the most out of Bootstrap 4, make sure your pages incorporate the following.

HTML5 !DOCTYPE

Your HTML documents should begin with the HTML5 !DOCTYPE declaration, along with the lang attribute and the correct character set:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">   </head></html>

Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework.

To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

Bootstrap also requires a containing element to wrap site contents.

Bootstrap requires a containing element to wrap elements and contain its grid system (more on the grid system next). Bootstrap's container classes were created specifically for this purpose.

Bootstrap containers can be either fixed or fluid.

a. Fixed Container

A fixed container is a (responsive) fixed width container. As you resize your browser, its width remains intact, until it passes a certain breakpoint (as specified by you — more on that next), at which time it will resize to the new width for that break point.

<div class="container">

...

</div>

b.Fluid Container

A fluid container spans the full width of the viewport. It will expand and contract fluidly as you resize the browser. This is in contrast to the fixed width container which will appear to "jump" to the new size as you pass a given break point.

<div class="container-fluid"> ...</div>While you can create Bootstrap pages without containers, they are required when using the Bootstrap grid system.

Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.

Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4  span 4  span 4span 4 span 8span 6 span 6span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Grid Classes

The Bootstrap grid system has four classes:

xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:

<div class="row">  <div class="col-*-*"></div>  <div class="col-*-*"></div></div><div class="row">  <div class="col-*-*"></div>  <div class="col-*-*"></div>  <div class="col-*-*"></div></div>

<div class="row">  ...</div> <div class="row">  <div class="col-sm-4">.col-sm-4</div>  <div class="col-sm-4">.col-sm-4</div>  <div class="col-sm-4">.col-sm-4</div></div>

Bootstrap 4 added some new table classes that assist with building consistently styled and responsive tables.

Basic Table

For a basic table with lightly padded cells and horizontal dividers, apply Bootstrap's .table class to the <table> element.

You can use the .table-dark class to invert the colors so that it has light text on a dark background.

Note: Dark tables are new in Bootstrap 4.For alternating background colors on the rows, add Bootstrap's .table-striped classFor borders all around the table, use Bootstrap's .table-bordered classTo achieve that "hover" effect when mousing over the table rows, use Bootstrap's .table-hover class

You can add a background color to the <thead> element by using either .thead-default or .thead-inverse.

Light:Use the .thead-light class.Dark: Use the .thead-dark class.

1.8. Version control

1.8.1 Introduction:

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later.

Version Control System (VCS) allows you to revert selected files back to a previous state, revert the entire project back to a previous state, compare changes over time, see who last modified something that might be causing a problem, who introduced an issue and when, and more. Using a VCS also generally means that if you screw things up or lose files, you can easily recover. In addition, you get all this for very little overhead.

Benefits of version control

Version control systems are a category of software tools that help a software team manage changes to source code over time. Version control software keeps track of every modification to the code in a special kind of database. If a mistake is made, developers can turn back the clock and compare earlier versions of the code to help fix the mistake while minimizing disruption to all team members.

1.8.2. Types of Version control Systems:

The various types of the version control systems are:

1. Local Version Control System

2. Centralized Version Control System

3. Distributed Version Control System

a. Local Version Control System:

Local version control system maintains track of files within the local system. This approach is very common and simple. This type is also error prone which means the chances of accidentally writing to the wrong file is higher.

b. Centralized Version Control Systems

The next major issue that people encounter is that they need to collaborate with developers on other systems. To deal with this problem, Centralized Version Control Systems (CVCSs) were developed. These systems (such as CVS, Subversion, and Perforce) have a single server that contains all the versioned files, and a number of clients that check out files from that central place. For many years, this has been the standard for version control.

This setup offers many advantages, especially over local VCSs. For example, everyone knows to a certain degree what everyone else on the project is doing. Administrators have fine-grained control over who can do what, and it’s far easier to administer a CVCS than it is to deal with local databases on every client.

However, this setup also has some serious downsides. The most obvious is the single point of failure that the centralized server represents. If that server goes down for an hour, then during that hour nobody can collaborate at all or save versioned changes to anything they’re working on. If the hard disk the central database is on becomes corrupted, and proper backups haven’t been kept, you lose absolutely everything — the entire history of the project except whatever single snapshots people happen to have on their local machines. Local VCS systems suffer from this same problem — whenever you have the entire history of the project in a single place, you risk losing everything.

`

c. Distributed Version Control System:

Distributed version control systems come into picture to overcome the drawback of centralized version control system. The clients completely clone the repository including its full history. If any server dies, any of the client repositories can be copied on to the server which help restore the server.

Every clone is considered as a full backup of all the data.

1.8.3. Popular Version Control Systems:

SVN:SVN is the abbreviated form of “Apache Subversion” and is a popular version control system tool. It is a centralized version control system and is system distributed and collaborated with open source license.The official website is as follows:

https://subversion.apache.org/

Git:Git is the distributed version control system and has an emphasis on speed and performance. It is supported by all operating systems. Git is open source software distributed under the terms of the GNU (General Public License).

The official website is as follows:

https://git-scm.com/

Mercurial:Mercurial is free, open source distributed revision control system. It includes a unique set of features that makes it particularly a good choice as a revision control system which are as follows:

1. It is easy to learn and use

2. Lightweight software3. It scales excellently4. Mercurial is known for easy customization.

The interface of Mercurial and command prompt is easy to understand. The usefulness of Mercurial is not limited to some projects. Creating new changes and branches and merging changes to the main branch is main feature of mercurial. This subversion control is well suited to scripting tasks with languages like Python and PHP.

1.8.4.What is Git

By far, the most widely used modern version control system in the world today is Git. Git is a mature, actively maintained open source project originally developed in 2005 by Linus Torvalds, the famous creator of the Linux operating system kernel. A staggering number of software projects rely on Git for version control, including commercial projects as well as open source. Developers who have worked with Git are well represented in the pool of available software development talent and it works well on a wide range of operating systems and IDEs (Integrated Development Environments).

Having a distributed architecture, Git is an example of a DVCS (hence Distributed Version Control System). Rather than have only one single place for the full version history of the software as is common in once-popular version control systems like CVS or Subversion (also known as SVN), in Git, every developer's working copy of the code is also a repository that can contain the full history of all changes.

In addition to being distributed, Git has been designed with performance, security and flexibility in mind.

Git Repository

A repository is like a folder for your project. Your project's repository contains all of your project's files and stores each file's revision history.

You can own a repository individually, and give other people collaborator access to your repository so that they can collaborate on your project. You can also share ownership of a repository with other people in an organization, and give organization members access permissions to collaborate on your repository.

Repositories can be public or private. Public repositories are visible to everyone. Only the owner and collaborators can view or contribute to a private repository.

Each person and organization can own unlimited public repositories and invite an unlimited number of collaborators to the repository.

Setting up Git can be intimidating, especially for those that are trying a version control system for the first time or moving from Subversion. It use to be the case that Git was a huge hassle to install and use on Windows. However, today it’s very easy to use Git on Windows either through Git Bash, if you are a fan of the Command Line, or if you prefer, a graphical interface.

Steps to Install Git on Windows

1) Download the latest Git for Windows.

Install Git on Windows

2) Go to the folder where new downloads gets store. Double click on the installer. The installer gets save on the machine as per the Windows OS configuration.

Note: When you’ve successfully started the installer, you should see the Git Setup wizard screen. Follow the Next and Finish prompts to complete the installation. The default options are pretty sensible for most users.

3) You may like to keep the installation to another folder, so here is the chance to do so. I just want to keep it in the suggested default folder in my Program Files\Git.

4) This is the option to store the shortcut of the Git under the Program Menu.

5) This is asking your choice that whether you like to Git from the Windows Command Prompt or you like to use some other program like Git Bash. As of now just select the Windows Cmd for simplicity of the tutorial, later we will cover Git Bash and other as well.

6) Here, we recommend to choose the option of Checkout Windows-style, commit Unix-style line endings. Select next once you have done this.

7) Again, just go with default selection and move forward.

8) Just go with default selections,

9) Now, its all done. This will just take few minutes to complete the installation as per your machine speed.

10) Once done, just click on Finish button.

11) Let’s just verify if the installation went well for Git. Go to cmd and type git and press enter.

The cmd window will display different options and commands you can try with git. Just get little warm up and use the following commands and observe the outputs for your understanding:

git –version git –help

Basic overview of how Git works:

1. Create a "repository" (project) with a git hosting tool 2. Copy (or clone) the repository to your local machine3. Add a file to your local repo and "commit" (save) the changes4. "Push" your changes to your master branch5. Make a change to your file with a git hosting tool and commit6. "Pull" the changes to your local machine

7. Create a "branch" (version), make a change, commit the change8. Open a "pull request" (propose changes to the master branch)9. "Merge" your branch to the master branch

git initgit add README.mdgit commit -m "first commit"git remote add origin git@github.com:alexpchin/<reponame>.gitgit push -u origin master

1.8.4.1 Creating a new repository

1. Sign up for a GitHub account, if you don’t already have one.2. Go to the GitHub login page and log in using the email and password associated with

your account.

3. In the upper-right corner of any page, click + and then click New repository.

4. Type a name for your repository, and an optional description.

5. Choose to make the repository either public or private. Public repositories are visible to the public, while private repositories are only accessible to you, and people you share them with.

6. Click the “Create Repository” button to create your repo.

1.8.4.2. Adding existing project to github using the command-line

1. Create a new repository on GitHub. To avoid errors, do not initialize the new repository with README, license, or gitignore files. You can add these files after your project has been pushed to GitHub.

2. Open Git Bash or command prompt.3. Change the current working directory to your local project(C:\Myproject).4. Initialize the local directory as a Git repository.

C:\Myproject> git init

5. Add the files in your new local repository. This stages them for the first commit.

C:\Myproject >git add . # Adds the files in the local repository and stages them for commit. To unstage a file, use 'git reset HEAD YOUR-FILE'.

6. Commit the files that you've staged in your local repository.

C:\Myproject >git commit -m "First commit"

# Commits the tracked changes and prepares them to be pushed to a remote repository. To remove this commit and modify the file, use 'git reset --soft HEAD~1' and commit and add the file again.

7. At the top of your GitHub repository's Quick Setup page, select the remote repository URL.

8. In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

C:\Myproject> git remote add origin remote repository URL# Sets the new remoteC:\Myproject> git remote -v# Verifies the new remote URL

9. Push the changes in your local repository to GitHub.

C:\Myproject> git push origin master# Pushes the changes in your local repository up to the remote repository you specified as the origin

1.9. Web Browser

1.9.1.Components of Web Browser

The browser's main components are :

1. The user interface: This includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.

2. The browser engine: marshals actions between the UI and the rendering engine.

3. The rendering engine : responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.

4. Networking: For network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface.

5. UI backend: Used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.

6. JavaScript interpreter.:Used to parse and execute JavaScript code.

7. Data storage.: This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem.

1.9.2. HTML Web Storage

With web storage, web applications can store data locally within the user's browser.Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

HTML Web Storage Objects: HTML web storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is

closed)

(i) The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example// StorelocalStorage.setItem("lastname", "Smith");

// Retrievedocument.getElementById("result").innerHTML = localStorage.getItem("lastname");

(ii) The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

The following example counts the number of times a user has clicked a button, in the current session:

Exampleif (sessionStorage.clickcount) {  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;} else {  sessionStorage.clickcount = 1;}document.getElementById("result").innerHTML = "You have clicked the button " +sessionStorage.clickcount + " time(s) in this session.";

1.9.3. Web Server vs Application Server

Server is a device or a computer program that accepts and responds to the request made by other program, known as client. It is used to manage the network resources and for running the program or software that provides services.

There are two types of servers:

1. Web Server2. Application Server

Key Differences Between Web server and Application server

1. Web servers are desirable for static content whereas application servers are appropriate for the dynamic content.

2. Web servers support scripting languages like Perl, PHP, ASP, JSP, etc. As against, application server assists scripting languages as well as application level services such as connection pooling, transaction support, object pooling, messaging services etc.

3. Application server contains web and EJB containers and a web server as an incorporated part of them. In contrast, a web server only contains web or servlet container and can employ EJB.

4. Web server does not support multithreading whereas application server assists multithreading and distributed transaction.

5. Web server uses HTML and HTTP protocol. On the other hand, the application server could use graphical user interface and protocols like RPC/RMI including HTTP.

6. Load Limit or capacity is higher in case of the application server as compared to the web server.

7. The web server provides an environment to run a web application and features like caching and scalability. On the contrary, the application server provides an environment to run web with enterprise applications.

1.9.3 Http Status codes:

The Status-Code element in a server response, is a 3-digit integer where the first digit of the Status-Code defines the class of response and the last two digits do not have any categorization role. There are 5 values for the first digit:

S.N. Status code Description

1 1xx Informational:It means the request has been received and the process is continuing.

2 2xx Success:It means the action was successfully received, understood, and accepted.

3 3xx Redirection:It means further action must be taken in order to complete the request.

4 4xx Client Error:It means the request contains incorrect syntax or cannot be fulfilled.

5 5xx Server Error:It means the server failed to fulfill an apparently valid request.

List of all the status codes:

1xx: Information

Message Description

100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request.

101 Switching Protocols The server switches protocol.

2xx: Successful

Message Description200 OK The request is OK.201 Created The request is complete, and a new resource is created .202 Accepted The request is accepted for processing, but the processing is not complete. 203 Non-authoritative Information

The information in the entity header is from a local or third-party copy, not from the original server.

204 No Content A status code and a header are given in the response, but there is no entity-body in the reply.

205 Reset Content The browser should clear the form used for this transaction for additional input.

206 Partial ContentThe server is returning partial data of the size requested. Used in response to a request specifying a Range header. The server must specify the range included in the response with the Content-Range header.

3xx: Redirection

Message Description300 Multiple Choices

A link list. The user can select a link and go to that location. Maximum five addresses  .

301 Moved Permanently The requested page has moved to a new url .

302 Found The requested page has moved temporarily to a new url .303 See Other The requested page can be found under a different url .

304 Not Modified This is the response code to an If-Modified-Since or If-None-Match header, where the URL has not been modified since the specified date.

305 Use Proxy The requested URL must be accessed through the proxy mentioned in the Location header.

306 Unused This code was used in a previous version. It is no longer used, but the code is reserved.

307 Temporary Redirect The requested page has moved temporarily to a new url.

4xx: Client Error

Message Description400 Bad Request The server did not understand the request.401 Unauthorized The requested page needs a username and a password.402 Payment Required You can not use this code yet.403 Forbidden Access is forbidden to the requested page.404 Not Found The server can not find the requested page.405 Method Not Allowed The method specified in the request is not allowed.406 Not Acceptable The server can only generate a response that is not accepted by the client.407 Proxy Authentication Required You must authenticate with a proxy server before this request can be served.

408 Request Timeout The request took longer than the server was prepared to wait.409 Conflict The request could not be completed because of a conflict.

410 Gone The requested page is no longer available .

411 Length Required The "Content-Length" is not defined. The server will not accept the request without it .

412 Precondition Failed The pre condition given in the request evaluated to false by the server.413 Request Entity Too Large The server will not accept the request, because the request entity is too large.

414 Request-url Too Long

The server will not accept the request, because the url is too long. Occurs when you convert a "post" request to a "get" request with a long query information .

415 Unsupported Media Type The server will not accept the request, because the mediatype is not supported .

416 Requested Range Not Satisfiable The requested byte range is not available and is out of bounds.

417 Expectation Failed The expectation given in an Expect request-header field could not be met by this server.

5xx: Server Error

Message Description500 Internal Server Error The request was not completed. The server met an unexpected condition.

501 Not Implemented The request was not completed. The server did not support the functionality required.

502 Bad Gateway The request was not completed. The server received an invalid response from the upstream server.

503 Service Unavailable The request was not completed. The server is temporarily overloading or down.

504 Gateway Timeout The gateway has timed out.505 HTTP Version Not Supported The server does not support the "http protocol" version.

1.9.4. Three-tier web application development

Most web applications are built in a three-tier architecture that consists of three important layers: data, logic, and presentation. In web applications, the application structure usually breaks down to database, server, and client, while in modern web development, it can also be broken into database, server logic, client logic, and client UI.

A popular paradigm for implementing this model is the Model-View-Controller (MVC) architectural pattern. In the MVC paradigm, the logic, data, and visualization are separated into three types of object, each handling its own tasks. The View handles the visual part, taking care of user interaction. The Controller responds to system and user events, commanding the Model and View to change appropriately. The Model handles data manipulation, responding to requests for information or changing its state according to the Controller's instructions. A simple visual representation of the MVC architecture is shown in the following diagram:

1.10. Introduction to ECMA Script

JavaScript was originally named JavaScript in hopes of capitalizing on the success of Java.

Netscape then submitted JavaScript to ECMA International for Standardization. (ECMA is an organization that standardizes information)

This results in a new language standard, known as ECMAScript. Put simply, ECMAScript is a standard. While JavaScript is the most

popular implementation of that standard. JavaScript implements ECMAScript and builds on top of it.

ES is simply short for ECMAScript. Every time you see ES followed by a number, it is referencing an edition of ECMAScript. In fact, there are eight editions of ECMAScript published:ES1, ES2, ES3, ES4,ES5,ES6 / ES2015,ES2016 (ES7),ES2017 (ES8)

ECMAScript is a standard.” “JavaScript is a standard.” “ECMAScript is a specification.” “JavaScript is an implementation of the ECMAScript standard.” “ECMAScript is standardized JavaScript.” “ECMAScript is a language.” “JavaScript is a dialect of ECMAScript.” “ECMAScript is JavaScript.”