Web Designing and Publishing

Question & Answer

Front End Development: The part of a website which is used to interacts directly with user is known as front end. It is also referred as ‘client side scripting’. The structure, design, behavior, and content which is shown on  websites, web applications, or mobile apps when we open it, is created by front End by using following languages:

·         HTML: Used to create structure of a website.

·         CSS: Used to create our website more attractive.

·         JavaScript: Used to enhancing the functionality of a website.Mostly used for client side Event Handling.

Backend Development: Backend is the server-side of the website. It stores and arranges data, and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with. It is the portion of software that does not come in direct contact with the users. The parts and characteristics developed by backend designers are indirectly accessed by users through a front-end application.

Back end Languages: It is also known as 'server side scripting'. The back end is used to create and handle the information  provided by user to store for future purposes by using PHP(Most Popular), Asp.net, Java, Python etc;

A website is a collection of many web pages, and web pages are the files that are written using HTML(Hyper Text Markup Language).The website’s web pages are linked with hyperlinks. The website might also contain some additional documents and files such as images, videos.

Types of websites:

          1). Static Website: Static websites are fixed and display the same content for every user, usually written exclusively in HTML.

         2). Dynamic website: Dynamic Websites can display different content and provide user interaction, by making use of advanced programming and databases in addition to HTML. 

1. It provides either the single page hosting or there are other methods that can be used Used for the premium sites.

2. The web hosting provides database support and provides the use of the on-growing Language.

3. It provides the platform for application development that can use the languages from PHP to ruby, etc.

4. The web hosting platform allows the users to write and install the scripts that can allow Them to use a particular feature of that platform.

5. Layers such as SSL (Secure sockets Layer) or TLS (Transport layer security) used to Provide more options of security for the websites. 

Web hosting is a service of providing online space for storage of web pages. These web pages are made available via World Wide Web. The companies which offer website hosting are known as Web hosts.

The servers on which web site is hosted remain switched on 24 x7. These servers are run by web hosting companies. Each server has its own IP address. Since IP addresses are difficult to remember therefore, webmaster points their domain name to the IP address of the server their website is stored on.

It is not possible to host your website on your local computer, to do so you would have to leave your computer on 24 hours a day. This is not practical and cheaper as well. This is where web hosting companies comes in. 

There are different types of hosting provided to upload and share their files using the web. 

Shared Hosting

In shared hosting, the hosting company puts thousand of website on the same physical server. Each customer has their own allocation of physical web space and a set of bandwidth limit. As all websites share same physical memory, MYSQL server and Apache server, one website on the server experiencing high traffic load will affect performance of all websites on the server.

Virtual Private Server (VPS)

It is also known as Virtual Dedicated Server. It is a server which is partitioned into smaller servers. In this customer is given their own partition, which is installed with its own operating system. Unlike shared hosting, VPS doesn’t share memory or processor time rather it allocates certain amount of memory and CPU to use which means that any problem on a VPS partition on the same drive will not affect other VPS customers. 

Dedicated Server

In this kind of hosting, single dedicated server is setup for just one customer. It is commonly used by the businesses that need the power, control and security that a dedicated server offers.

Reseller Hosting

A reseller acts as a middle man and sells hosting space of someone else’s server

Grid Hosting

Instead of utilizing one server, Grid Hosting spreads resources over a large number of servers. It is quite stable and flexible. The servers can be added or taken away from the grid without crashing the system. 

SGML (Standard Generalized Markup Language) is a standard for how to specify a document markup language or tag set. Such a specification is itself a document type definition (DTD). SGML is not in itself a document language, but a description of how to specify one. It is metadata.

SGML is based on the idea that documents have structural and other semantic elements that can be described without reference to how such elements should be displayed. The actual display of such a document may vary, depending on the output medium and style preferences. Some advantages of documents based on SGML are:

1. They can be created by thinking in terms of document structure rather than appearance characteristics (which may change over time).

2. They will be more portable because an SGML compiler can interpret any document by reference to its document type definition (DTD).

3. Documents originally intended for the print medium can easily be re-adapted for other media, such as the computer display screen 

Web publishing is the process of publishing original content on the Internet.

The process includes building and uploading websites, updating the associated webpages, and posting content to these webpages online. Web publishing comprises of personal, business, and community websites in addition to e-books and blogs.

The content meant for web publishing can include text, videos, digital images, artwork, and other forms of media. Publishers must possess a web server, a web publishing software, and an Internet connection to carry out web publishing.

Web publishing is also known as online publishing

HTML stands for Hypertext Markup Language. It is a well-known markup language used to develop web pages. It has been around for a long time and is commonly used in webpage design. HTML on the other hand, stands for Hypertext transfer protocol. It is a means of data Communication for the World Wide web. It is an application protocol for distributed, collaborative, information systems. HTTP is a TCP/IP-based protocol used for transferring WebPages from servers to clients. Hypertext markup language- the formatting used to design WebPages. HTTP is the code in a web address URL that specifies that you are looking for a common website. Basically this protocol establishes the standard that computers on the internet use to communicate and transfer data through web browsers. HTML is the language of web pages. A word document contains text and formatting code for example. The text code is the content and the formatting code tells word how to display the text on the screen/page.

HTML is very similar. It content (which is easily edited). It’s the formatting code that determines how a web page’s content will look in a browser. HTTP is the protocol that is used to request and deliver web page content (as files). When your Browser request a web page from a web server, it uses HTTP. But the owner of the web page uses FTP protocol to actually put the files on the server (using the same address),or delete them from the server because there will be new files, or uploading new files. But both protocols use the same link (the internet).  

Stateless protocol:

Stateless Protocol is a network protocol in which client send Request to the server and server response back as per the given state. Examples of stateless Server restriction is not needed to keep the server information. In stateless, server and client Are loosely coupled and can act independently. Server design is simple to implement. Server handles transactions in a very quicker way. 

Stateful protocol:

 stateful protocol is a network protocol in which if client send a request to The server then it expects some kind of response, in case of no response then it resend the Request. Examples of stateful protocol is FTP and Telnet. In stateful, a server is required to Maintain the current state and session information. Server design is comparatively complex And difficult to implement. Server is slow comparatively to stateless.

 Advantages of connectionless protocol are as follows:

a. It sends the packet without handshaking.

b. It is faster than connection-oriented protocol.

c. The header size of the packet is smaller as compared to the packets in connection-oriented services.

Disadvantages of connectionless protocol are as follows:

a. It is not reliable and cannot ensure the data transmission to the destination.

b. Packets decide the route while transmission based on the network congestion.

c. It does not have a fixed path.

d. Different packets do not necessarily follow the same path. 

Dedicated hosting services allow the users to have their own space or their own web server.

a. It can be handled by the user having the full control over the operating system and the Resources it user.

b. It does not allow the user to own the server but it is just another type of self-managed Server.

c. They are less costly and they allow better services than the shared ones due to the Reliability.

d. It requires lots of responsibility and maintenance to manage the resources and to Provide the services to the dedicated servers.

e. It provides higher security as it is better than the other servers like shared servers that Compromise on security as it is shared between many. 

With a connectionless protocol, clients connect to the server, make a request, get a response, and then disconnect. For the Internet, HTTP is a connectionless protocol. With a connection-oriented protocol, clients connect to the server, make a request, get a response, and then maintain the connection to handle future requests. An example of a connection-oriented protocol is File Transfer protocol (FTP). When we connect to an FTP server, the connection remains open after you download a file. The maintenance of this connection consumes system resources. A server with too many open connections quickly gets overloaded. Consequently, many FTP servers are configured to allow only 250 open connections at one time, so only 250 users can access the FTP server at once.

Connectionless protocols differ from connection-oriented protocols in the way requests and responses to requests are handled. HTTP is a connectionless protocol. When clients connect to the HTTP server being a connectionless protocol, they make a request are used after the transaction is finished. Consequently with low system overhead. The drawback to connectionless protocols is that when the same client requests more data, the Connection must be re-established. To web users, this means a delay whenever they request more information.

 A cookie is information that a web site puts on our hard disk so that is can remember something about us at a later time. Typically, a cookie records your preferences when using a particular site. Using the web’s preferences when using a particular site. Using the Web’s Hypertext Transfer Protocol (HTTP), each request for a web page is independent of all other requests. For this reasons, the web page server has no memory of what pages it has send to a user previously or anything about our previous visits. A cookie is a mechanism that allows the server to store its own information about a user on the user’s own computer. We can view the cookies that have been stored on our hard disk. The location of the cookies depends on the browser. Internet explorer stores each cookie as a separate file under a Windows subdirectory. Cookies have been of concern for internet privacy, since they can be used for tracking the browsing of a user. HTTP cookies are used for user authentication, user tracking and maintaining User-specific third-party cookies also allows for tracking across multiple sites. 

The Common Gateway interface (CGI) is a standard way for a web server to pass a web user’s request to an application program and to receive data back to forward to the user. When the user requests a web page (for example, by clicking on a highlighted word or entering a website address), the server sends back the requested page. However, when a user fills out a form on a web page and form sends it in, it usually needs to be processed by an application program. The web server typically passes the form information to a small application program that processes the data and may send back a confirmation message. This method Gateway Interface (CGI).It is part of the web’s Hypertext Transfer Protocol (HTTP). If we are creating a website and want a CGI application to get control, you specify the name of the a programmer can write a CGI application in a number of different languages can write such as C,C++, Java, and PERL.  

The World Wide Web is the part of the internet that contains websites and WebPages. It was invented in 1989 by Tim Berners-Lee at CERN, Geneva, Switzerland. It is basically a system of internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML (Hypertext Markup Language) that supports links to other documents as well as graphics, audio and video files. Architecture of WWW

WWW is basically a distributed client-server service. It this, a client can access the services from a server using a browser. These services are usually distributed over many locations called sites or websites. From the user’s point of view web consists of a vast worldwide collection of documents called web pages. Each web page can contain link to other pages anywhere in the World. By clicking on such link user can access another web page. Such a text or image that enables in the user to link to another web page is the string of text that points to another web Page is called hypertext. Hypermedia is enhanced form of a hyperlink which not only links to the other pages or other sections within the same page but can also link with various medium like sound, animation, movie clip etc. Hypermedia is grouping of different media like sound, graphics, animations and text in a single file. These hyperlinks are created with the help of specialized language called Hypertext Markup Language (HTML). In order to access these web pages on different sites, each of these pages has a specific address called Uniform Resource Locator (URL).

Web publishing is a large process and identical to book publishing. It starts right from writing the first word of the first page to the moment it gets published. Likewise, Web publishing includes different stages till it becomes available for the premiere. The process includes deciding a name of domain, registering it with the competent registrar, starts writing contents for the site, designing pages for them, uploading the site with a host. Every stage is crucial and one has to be careful while choosing perfect software for designing and uploading and deciding about the most appropriate host in terms of facilities offered and investment as well. There are basically five phases in web publishing as follows- 

•  Domain name planning and registration
• Web hosting
• Web design and development
• Promotion
• Maintenance 

Choosing a Domain Name

Before one rush out and choose your domain name or name your website, you would like to consider the following points

Your Domain Name should be Your Website Name

Domain name that matches one’s brand name is very important. The very name that one uses to advertise one’s product is the name that one will want for one’s domain, because that is the first thing that people will try in their browser. 

Your domain name should not be too long

Domain names can be of any length up to 67 characters.one doesn’t have to settle for an obscure domain name like bgo.com when one mean’s blogspot.com If one manages to get a short domain name though, the key is to make sure it's meaningful combination of characters

Your domain name should be hyphens free

Domain name with hyphenation has got some advantage as well as some disadvantages. Search engines can distinguish your keyword better if you have domain name with hyphen. Disadvantage is that is it easy to forget hyphens when typing a name. Moreover, when somebody recommends one’s site to his./her friends verbally having hyphens in your domain name leads to more potential errors that when the name does not contain hyphens. Therefore, it is advisable to avoid domain name with hyphens

Your domain name should not contain plural words

Plural form of the domain name always creates loss, since the chance of the visitor failing to type the "s" in the name is very great. For example, somebody wants to log on to websites.com but mistakenly leaves website.com may lead to a loss of clients if the products are the same on the both domains 

Your top level domain name should portray the nature of your site

If your site is of a charitable institution or a voluntary organization, never get a domain name with .com Neither forget to choose country specific top level domain if one is working for the clients in a particular country only. If one is doing business for profit .com is the best top level domain. And if one is doing business in India, select in as country specific top level domain. 

Photo editing means an act of altering an image in very simple terminology. These images can be digital photographs, illustrations, prints, or photographs on film). Some types of editing, such as airbrushing, are done by hand and others are done using photo editing programs. Photos of models etc are edited to remove blemishes or make the model "better" or a photo is edited for fixing errors like red eye, contrast, brightness, etc. Photo editing is also used to make completely new images

Earlier, when manual photography system was there, the task was broadly categorized in to retouching and finishing. Retouching was performed on the photo films before taking print from those films and photo finishing was carried out after the photo in printed. Both the task was performed to produce a good quality photograph with all the desired modifications. Now a days, in the digital era, the task is now been carried out by Photo Editors before printing or publishing the image, as the case may be. The task of photo editing is still complex but with the use of software and enhanced features, it is a bit simpler than earlier manual methodology. Some photo editing is even done offline, on actual photographs, posters or other printed collateral. Photo editing is also knows as

•  Image editing
• Image/photo manipulation
• Photoshopping
• Image/photo enhancement etc.
  

Photo-editing software’s are software programs used to manipulate and enhance images. The use and type of software depends on the use of photos from display ads to social media and print catalogs to posters. This is now a full-fledged more business to repurpose photos and use them on multiple channels. There are many kinds of photo-editing software, each with its own costs, features and pros/cons. Cost and features are the main factors when choosing photo editing software. For a home users and beginners less complex photo editing software is needed as compared to professional designers. Now a day. With the use of Smart phones, a lot of photo editing apps are also available to at least perform basic editing on your smart phone itself apart from conventional software programs to work on the PC/Laptop.

Some photo-editing software programs:

•  Adobe Photoshop
• Corel Draw
• Microsoft Paint
• Inkscape
• Capture One
• Fotor
• Snappa
• PicMonkey
• Pixlr editor
• Canva
• GIMP
• PhotoPlus
• Paint.NET

Some photo-editing mobile apps:

• PicsArt
• Snapseed
• Edior De Fotos
• Photo Director
• Adobe Lightroom
• PicShot
• Polarr
• InstaSquare
• Enlight Photofox
• Picsa
  

There are many different types of photo editing. Some are simple and others are more complex. For example, some photo editing techniques are done manually, while others are conducted through automated software. We can easily do simple photo-editing easily and quickly while complex photo editing and digital editing techniques may require specialized software program along with training and experience. It may be divided into three broad categories:

1. Simple photo-editing may include

Noise reduction: Noise is the occurrence of color dots or specks where there should be none. It is accomplished by reducing the pixel size to make the picture smooth. 

White balance: Is used to color of the light in the image

Contrast: Higher contrast makes an image more punchy, while lower contrast makes it flatter in color.

 Exposure Adjustment: The brightness of the image is adjusted. 

Color adjustments: Is defined as the change the color of an item or element in the photo. It may be background color or the component of main object.

Image Resizing: Image Resize is performed to adjust the dimensions of the image. Image dimensions are the length and width of your image, measured in pixels. For example, when you apply for a job, the recruiter ask to upload an image of 40x60 mm etc. 

Image cropping: Cropping makes the image to be in proper size or to remove unwanted parts. Crop feature allows to drag a rectangular shape around an area in the image to cut off the sides.

Background removal: It is used to remove or alter the background from the image to isolate the subject like white background etc.

Erasing: Means to erase areas within your image to leave behind transparency or a background color. There is also a Background Eraser which provides more control in removing a background to transparent.

2. Complex & advanced Photo Editing include:

Portrait corrections: Used to fix the complexion of people or objects in images

Special effects: Can be anything from animation to adding weather conditions like cloudy, fog or snow etc etc. 

Clipping paths: It is used extract a subject or element from an image. It may be a person or object also.

Adjusting text and visuals: We may add text and visuals or manipulate the existing one even remove them. 

Photo stitching: Technique is used to put two or more images together seamlessly to make it look like they were shot that way 

Drop and reflection shadow: It is used create or adjust shadows

Photo masking and Layers: It is used for hiding and revealing specified portions of an image

3. Pixel level editing and parametric image editing

Pixel level editing: Pixel level editing means if an image is altered at the pixel level. These changes are permanent as performed at pixel level and hence considered as a destructive form of photo editing because it’s not as easy to undo the changes and restore the original file. This feature permits to make extremely detailed editing to accomplish certain functions like CMYK color modes etc which other tools even parametric image editing can’t do.

Parametric image editing: In Parametric image editing(PIE), edits are recorded as a set of steps to follow to accomplish the final look. It doesn’t change the pixels of the image and is a non-destructive mode of photo editing. Mostly the high level editing is started with PIE, and then using pixel editing to refine the final details.

The features and techniques vary from software to software and a particular software may only provide Basic, Complex or Pixel editing or a combination of these categories of features. 

Adobe Photoshop is among the best Photo Editing Software available in the market. It provides almost all the photo editing features from basic to advanced. It is simple to understand and use. Photoshop can be used for almost every type of image editing, from touching up photos to creating high-quality images & graphics. It is the most widely used software tool for photo editing, image manipulation, and retouching for numerous image and video file formats. The tools within Photoshop make it possible to edit both individual images as well as large batches of photos.

Photoshop provides ability to create, enhance, or edit images, artwork, and illustrations. Using Photoshop changing backgrounds, simulating a real-life painting, or creating an alternative view etc is possible.

Using Photoshop, digital or scanned images can be edited to use online or to print them. Website layouts can also be created in Photoshop which may be finalized before the coding stage. Stand-alone graphics can be created and exported for use within other programs.

File formats Photoshop supported by Photoshop

• Graphics Interchange Format (GIF)
• Portable Network Graphics (PNG)
• Joint Photographic Experts Group (JPEG)
• Tagged-Image File Format (TIFF)
• Photoshop Format (PSD)
• Large Document Format (PSB)
• RAW
• Portable Document Format (PDF)
• Cineon Etc. 
  

RGB color - It lists a value between 0 and 255 for each of the {Red, Green, Blue} components of a color.

• (0, 0, 0), the absence of color, is completely black.
• (255, 255, 255), the presence of all colors, is completely white.
• RGB is the most common color used

CMYK color – It lists a percentage of each of the colors {Cyan, Maroon, Yellow, blacK}. Color printer cartridges uses CMYK color. It is mostly used by the graphic designers to see how their work is going to look after it is printed choose, they convert their work after it has been done in RGB to CMYK so that they have a better sense. 

Grayscale – It’s a color mode that operates entirely in black and white.

Bitmap - Only allows for black and white dots (pixels);

 Lab color - It specifies a color using a 3-axis system. The a-axis (green to red), b-axis (blue to yellow) and Lightness axis or simply say represents color with 3 components: {Lightness, color value from red to green, color value from blue to yellow}. It is useful   Lab color - It specifies a color using a 3-axis system. The a-axis (green to red), b-axis (blue to yellow) and Lightness axis or simply say represents color with 3 components: {Lightness, color value from red to green, color value from blue to yellow}. It is useful

Ability to create and use multiple Layers within the same image is Photoshop’s most powerful feature. Layers are the key working platform in Photoshop, which are like sheets of transparency. As objects are placed on a layer, they become part of the layer, just as if you had drawn on a transparency with a marker.

A layer is one layer on top of another, all of which can be edited independently of each other and laid on topof or beneath one another, and then later combined to form a single, flat image.If two objects are on the same layer and you want to move them closer to each other, you need to cut them using the respective tools and physically move them. If they are on different transparent layers, however, all you have to do is move the layers with the move tool until the objects are closer to each other.

We start working with the “Background” layer when an image is created. We can’t use all effects on a background layer and to use various features, we have to create Layers. 

JavaScript is very powerful client side scripting language. It was developed by Brendan Eich in 1995.It is mainly used for enhancing the interaction of a user with a webpage. More interactive webpage can be designed using JavaScript. JavaScript is an object-oriented computer programming language commonly used to Create interactive effects within web browsers. It is first used by the Netscape browser, that Provides access to the HTML Document Object Model (DOM), provides access to the Browser Object Model (BOM).It allows pages to respond to events, display special effects, accept Variable text, validate data, make cookies, detect user’s browser.

Following are the features of JavaScript:

a. It is a lightweight, interpreted programming language.

b. It is designed for creating network-centric applications.

c. It is complementary to and integrated with Java.

d. It is an open and cross-platform scripting language. 

Operators are used for comparing values, perform arithmetic operations, etc. For example, if we take a simple expression, 4+5 is equal to 9. Here 4 and 5 called operands and ‘+’ is called the operator. JavaScript consists of different types of operators that are used to Perform different operations.

Types of JavaScript Operators There are different types of operators in JavaScript that are used for performing different Operations. Some of the JavaScript Operators include:

a. Arithmetic Operators

b. Comparison Operators

c. Bitwise Operators

d. Logical Operators

e. Increment/Decrement Operator

f. Bitwise Operator

g. Assignment Operators

h. Conditional Operator

AngularJS expressions are those that are written inside double braces {{expression}}.AngularJS evaluates the specified expression and binds the result data to HTML. AngularJS expressions can also be written inside a directive: ng-bind="expression".

AngularJS expression can contain literals, operators and variables. AngularJS displays the data exactly at the place where the expression is placed.

For example, an expression {{6/2}} will produce the result 3 and will be bound to HTML.

 <html >
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body >
<h2> AngularJS Expression Example</h2>
 <div ng-app="">
<p> Addition: 6 + 2 = {{6 + 2}} </p> <br />
<p> Subtraction: 6 - 2 = {{6 - 2}} </p><br />
<p> Multiplication: 6 * 2 = {{6 * 2}} </p><br />
<p> Division: 6 / 2 = {{6 / 2}}</p>
 </div> 
</body>
</html>

AngularJS directives are used to extend HTML. Directives are markers on HTML DOM element that tell AngularJS to attach a specified behavior to that HTML element.

Directives in AngularJS are special attributes starting with ng- prefix where ng stands for Angular. AngularJS includes various built-in directives, you may also create your own directive in AngularJS. Some built-in directives are listed here.

ng-app 

The ng-app directive defines the root element of an AngularJS application and starts an AngularJS Application.The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded. It is also used to load various AngularJS modules in AngularJS Application.

ng-init 

ng-init directive initializes an AngularJS Application data. It is used to declare and assign values to the variables for an AngularJS application. 

ng-repeat

The ng-repeat directive repeats HTML elements for each item in a collection. Or simply say that it is used to loop through items in collection element and it will act as for loop.

ng-model 

The ng-model directive is used for two-way data binding in AngularJS. It is used to get value of input controls like textbox, label, etc and use these values in web pages.

ng-bind 

The ng-bind directive binds the model property declared via ng-model directive or the result of an expression to the HTML element. It also updates an element if the value of an expression changes. 

Whenever we are working with Forms on webpages to submit some data, the Form validations are usually occurring at the server end, i.e. as the user entered all the necessary data and press the Submit button, all the filled data are submitted to server and subsequently validated. If the data entered by the user is incorrect or simply missing, the server sends all the data back to the client and requests for resubmitting of data through form with correct information. This is really a lengthy process which used to put a lot of burden on the server.

Using JavaScript, there are ways to validate most of the form's data on the user system itself before sending it to the web server. This is called Form validation and generally performs two functions:

Basic Form Validation – In this, initially form must be checked to make sure all the mandatory fields are filled in. This is simple and requires a loop through each field in the form to check for data. For Example, Name, Mobile no. and email is mandatory. 

Data Format Validation – In this type of validation, the data entered can be checked for correct format and values (may be some value ranges). It is required that the JS code written must include appropriate logic to test correctness of data. For example, mobile no must be of 10 digits, email must be in correct format or PinCode shall be of 6 digits not starting with zero or Marks obtained shall be between 0 and 100. 

When the user manipulates a page events may be occurred. Events are fired inside the browser window, and tend to be attached to a specific item that resides in it which may be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. JavaScript's interaction with HTML is handled through events. Events are occurred whenever a page is loaded (page load event), the user clicks a button (button click event) or events are occurred on pressing any key, closing a window, resizing a window, etc. Some more types of events may occur on:

• hovering the cursor over a certain element.
• web page finishing loading.
• A form being submitted.
• A video being played, or paused, or finishing play.
• An error occurring. 

The occurrence of these events may be used by the Programmers and to execute responses coded in JavaScript like cause buttons to close windows, messages to be displayed to users, data to be validated, or any other type of response.

Events are a part of the DOM (Document Object Model) Level 3 and every HTML element contains a set of events which may trigger a block of JavaScript Code written for that specific purpose, i.e. JavaScript can "react" on these events and allows executing the code when events are detected.

The most common Events are

onchange - An HTML element has been changed

onclick - The user clicks an HTML element (button, image etc)

onmouseover - The user moves the mouse over an HTML element

onmouseout - The user moves the mouse away from an HTML element

onkeydown - The user pushes a keyboard key

onload - The browser has finished loading the page  

AngularJS supports modular approach of programming. AngularJS modules are used to divide or separate the logic such as controllers, services, application etc. and keep the code clean. AngularJS module helps to link many components, so it is just a group of related components.

Generally in most of the applications we have a single entry point (main method) that instantiate and club together different parts of the application. In angularjs applications we don’t have that main method instead we have modules that specify how our application will be structured and bootstrapped.

Modules are defined in separate .js files and name them as per the module.js file, if these are kept in different file. Controllers always belong to a module.

Let us have two modules for an application, and we create them as

Application Module − used to initialize an application with controller(s). Application module is created by using the AngularJS function angular module  

Controller Module − used to define the controller. These refer to the controller with the ng-controller directive. 

W3.CSS is a free and modern CSS framework published by W3school for developing responsive, mobile-first websites.  It is smaller and faster than similar CSS framework (Bootstrap). It is easier to learn and use.

It simply speedup the development of website.  W3.CSS is inspired from Google Material Design.  It includes only standard CSS. No jQuery or JavaScript library included in it.

W3.CSS helps in responsive designing of website which means designing of website in such a way that the contents of websites automatically fit and resize that makes the website looks good on all devices (PC, laptop, tablets or mobile phones) wherever it is opened. 

There are two ways of adding W3.CSS into webpage

• By using CDN (Content Delivery Network)
• By downloading W3.CSS file into local machine

By using CDN (Content Delivery Network)

The CDN of w3school can be used to link W3.CSS file into web page as following:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

The tag must be written in the head section of the HTML. It is obvious that internet connection must be needed for successfully delivery of W3.CSS file.

By downloading W3.CSS file into local machine

This is alternate way of adding W3.CSS into web page. First download the W3.CSS file into local machine, and then add it to the web page. To download W3.CSS file, follow the link: https://www.w3schools.com/w3css/w3css_downloads.asp

Now save the file into local machine and then add it in the head section of the HTML as: Here, the name of the W3.CSS file is “w3” and it is supposed that HTML and CSS file is on the same folder. If CSS file is on the other folder, then add path accordingly

It stands for Cascading style sheets. It is use for applying for the HTML elements, which is use to describe the look and formatting of a document written in markup language. It can also be use with any kind of XML documents including plain XML and SVG. And SVG. CSS is designed to separate the presentation and content, including layout and colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. It enables multiple web pages to share formatting by specifying the relevant CSS in a separate.css file. 

There are three methods to integrate CSS on web pages.

a. Inline method: It is use to insert style sheets in html document.

b. Embedded method: It is use to add a unique style to a single document.

c. External method: CSS can be place in an external file and linked via link element. 

The advantages of CSS are:

a. Accessibility

b. Page will load fast

c. Offline browsing

d. Maintenance is easy

 The different components of CSS style are: Property Selector and Value 

The class selector selects elements with a specific class attribute. To select elements With a specific class, write a period (.) character, followed by the name of the class. With ID Selector, we can select an element by pointing out the unique ID name set with the id attribute. It we use that selector can be used only once in html document. It we use that selector on More than one element, our code will not pass validation. The difference between the Class and ID selector is: The ID selector consists of a hash (#) followed by the unique ID name of a referring HTML Element. ID selector cannot start with a number and must be at least one character long. They Also case-sensitive, and must exactly match across HTML,CSS and JavaScript.

The ID selector in CSS document:

#para1 
{ 
 Text-align: center; 
 Color: blue;
} 

Class selector

<style> 
.center { 
Text-align: center; 
Color: blue; 
} 
</style> 
In CSS a class selector starts with a dot (.), like this: 
.bank { /* this is the class selector */ 
Text-color: red; 
}

In CSS, the margin is the property by which we can create space around elements. We Can even create space to the exterior define borders. In CSS have margin property as follows? Margin-top, Margin-right, Margin-bottom and margin-left Margin property has some defined values as shown below:

a. Auto: This property browser calculates the margin.

b. Length: It sets the margin value in px, pt, cm etc.

c. %: It sets the width % of the element.

d. Inherit: This property we can inherit the margin property from the parent element.

In CSS, padding is the property by which we can generate space around an element’s content As well as inside any known border; CSS padding also has properties like: Padding-top, Padding-right, padding-bottom and padding-left. Negative values are not allowed In padding.

The main difference between relative and absolute is that “relative” is used for the Same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px In the left while absolute is totally relative to the non-static parent. It means if we write Left:10px then the result will be 10px far from the left edge of the parent element.

Inline element does not have an element to set width and height and also it does not  have the line break. 

Example:-

links <a>, emphasized words <em>, important words <strong>, and abbreviations 

<abbr> Block elements are meant to structure the main parts of our page, by dividing our 

content in coherent block. 

Example:- width and height, paragraphs <p>, lists: unordered <ul> and ordered lists <ol> 

Headings: from 1st level <h1> to 6th level headings <h6>, articles <article> and sections 

<section> . 

HTML is short for Hyper Text Markup Language and is the language of the World Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. This means that an HTML document, written in plain text, is used to describe the structure and content of web pages, with links to other pages.

 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on 

•  The <!DOCTYPE html> declaration defines this document to be HTML 
•  The <html> element is the root element of an HTML page 
•  The <head> element contains meta information about the document 
•  The <title> element specifies a title for the document 
•  The <body> element contains the visible page content 
•  The <h1> element defines a large heading 
•  The <p> element defines a paragraph

Each tag can also have additional attributes, which change the way the tag is display. 

For example, an <input> tag has a type attribute, which you can use to specify whether it’s a text field, checkbox, radio button or one of many more options. 

Attributes are specified directly after the name off the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags-they can never be in closing tags. 

They are followed by an equals sign= and the chosen value in double quotes “. Do not include any spaces before and after the equals sign. Multiple attributes can be defined on a single tag, separated by a space. 

<!—Text field --> 

<input type=”text”/> 

<!—Checkbox -- > 

<input type=”checkbox”/> 

<!—Radio button -- > 

<input type =”radio” value=”on”/> 

It introduced a number of semantic elements, which is to say elements that convey  meaning some of the new semantic elements are <header>,<section>,and <article>.They are semantic in that they are not just simple containers, but they tell the browser more about their contents. 

There are additional form element types, like “number”, date”, “calendar” and “range”. Video And audio elements have also been added, as well as new graphic elements, such as <svg> and <Canvas>. 

Cell spacing is referred to space/gap between the two cells of the same table. 

Cell Padding is referred to the gap/space between the content of the cell and cell wall or 

Cell border. 

Example:- 

<table border cell spacing=”3”> 

<table border cell padding=”3”> 

<table border cell spacing=”3” cell padding=”3”> 

<html> 

<head>

</head>

<body> 

<table border=”3”> 

<tr align=”center” valign=middle”> 

<th>INDO</th> 

<th>Name</th> 

<th>class</th> 

<th>DOB</th> 

</tr> 

<tr align=”left” valign=”bottom”> 

<td>110</td> 

<td>Manju</td> 

<td>4-Nov-1993</td> 

</tr> 

</table> 

</body>

 </html>

<p><font color="red"> O Level Exam</font></p>
<p><font color="green"> O Level Exam</font></p>
<p><font color="blue"> O Level Exam</font></p>
<p><font color="orange"> O Level Exam</font></p>
<p><font color="yellow"> O Level Exam</font></p>

The Common Attribute of <img> Tags are:

src: to set the source of image it can be a local system path or URL

width: to set the width of image it can be a number of pixels or in percentage

height: to set the height of image it can be a number of pixels or percentage

border: to set the border of image

alt: to set the alternate text of image

title : to define the title of image which display when mouse is hover on image

hspace: to set the horizontal (left and right) space from image

vspace: to set the space (margin) from top and bottom (i.e. vertical space) in image

Example:

<img src="logo.png" width="200px" height="100px" hspace="40px" vspace="20px" alt="infomax logo" title="infomax academy"/>

Sometimes referred to as a “network of networks,” the Internet is generally defined as a global network connecting millions of computers. The Internet is a global wide area network that connects computer systems across the world. 

No one actually owns the Internet, and no single person or organization controls the Internet entirely. The Internet is more of a concept than an actual tangible entity, and it relies on a physical infrastructure that connects networks to other networks. This physical infrastructure is what we call the world wide mesh of telecom towers, OFC lines, switches, routers, gateways etc. 

WWW: The World Wide Web (WWW or W3) is an information space where documents and other web resources are identified by URLs, interlinked by hypertext links, and can be accessed via the Internet. It was created by Timothy Berners Lee in 1989 at CERN in Geneva. 

WWW works on client- server approach. Following steps explain how the WWW works: 

1. User enters the URL (eg.: http://www.wikipedia.org) of the web page in the address bar of web browser. 

2. Then browser being a client, requests the Web Server for the Web Page corresponding to www.wikipedia.org . 

3. Then web server receives request using HTTP protocol and makes a search for the requested web page. If found it returns it back to the web browser. 

4. Now the web browser receives the web page, interprets it and displays the contents of web page. 

Generally there is no any specific classification among websites, but we can identify some genres like: Search Engines, Informative, Social Networking, Audio/Video Sharing, E-commerce etc. 

In a way, websites can be categorized by their top-level domains like: 

• .com : Commercial websites 

• .org : Organizational websites 

• .gov : Government websites 

• .edu : Educational websites 

• .mil : Military websites 

• .info : Information websites etc. 

Sublime Text editor is a full highlighted Text editor for altering documents or a code base. It incorporated different features for altering code base which causes developers to monitor changes. Different features that are supported by sublime are as follows:

• Syntax highlight
• Auto indentation
• File type recognition
• Plug-in and Packages
• Macros
• It is utilized as an Integrated Development Editor like Visual Studio code and NetBeans.

When you utilize a reasonable Text editor, you can make the most of its helpful features. It offers its users the below advantages:

• Ability to solve linker errors.
• Keeping track of all files and folders to work with.
• Connectivity with version control systems like Git.
• Problem solving capabilities.
• Keeping color combination for syntax combination.

internet, computer-based global information system. The Internet is composed of many interconnected computer networks. Each network may link tens, hundreds, or even thousands of computers, enabling them to share information and processing power. The Internet has made it possible for people all over the world to communicate with one  another effectively and inexpensively.

Companies, individuals, and institutions use the Internet in many ways.

1. Companies use the Internet for electronic commerce, also called e-commerce, including advertising, selling, buying, distributing products, and providing customer service. In addition, companies use the Internet for business-to-business transactions, such as exchanging financial information and accessing complex databases.
2. Businesses and institutions use the Internet for voice and video conferencing and other forms of communication that enable people to telecommute (work away from the office using a computer).
3. The use of e-mail on internet has greatly speeds communication between companies, and among other individuals.
4. Scientists and scholars use the Internet to communicate with colleagues, perform research, distribute lecture notes and course materials to students, and publish papers and articles.
5. Individuals use the Internet for communication, entertainment, finding information, and buying and selling goods and services.

A web site is a related collection of Word Wide Web files that includes a beginning file called a home page. For example, the website yahoo has the home page address of yahoo.com.  A website may consist of thousands of files spread out over many servers in worldwide locations.

A Web server is simply a computer with an Internet connection that runs software designed to send out HTML pages and other file formats.

A website is a collection of linked web pages that share a unique domain name. Each web page of a given website provides links in the from of clickable portion of text that allows the user to move from one page of the website to another.

To access a website, type its domain name in your browser address bar, and the browser will display the website's main web page or home page.

There are main types of websites are as follows:

1. Brochure: A brochure website is the type of websites typically have a few pages, and will be used by small businesses. For example, a small company would only need a brochure website with a homepage displaying contact information and have a couple of photos of their work. It is like an online business card for potential customers.
2. e-Commerce: It is a website through which users are able to pay for a product or service online. This will normally involve one company selling to multiple users, but can also take the form of a multi-vendor ecommerce website also knows as known as marketplace websites. Examples of eBay and Etsy.
3. Portal: A Portal website brings together information from lots of different sources on the web. Most of the portals to offer these free services such as search engine, news, sports and weather. Web publishing reference tools such as yellow pages, stock quotes, and maps, shopping and e-mail and other communications services.
4. Social media: Social media websites are platforms which allows the sharing of images or ideas. They encourage online interaction and sharing. The most popular social media website is Facebook. Other social media sites include You Tube, Twitter, Instagram and LinkedIn.
5. Blog: A blog short Weblog, is an informal Web site consisting of timestamp, or post articles, or journal formal, usually listed in reverse chronological order. A blog that contains video clips called a video blog, A microblog allow users to posrt short messages, usually between 100 and 200 characters, for other to read. Twitter is a popular microblog.

A responsive website is based on the technology of computing device used by the visitor to display the site. It is basically website design that will looks good at any size- from a large desktop LCD monitor to the smaller screens and also used on smartphones and tablets.

Responsive website design (RWD) enables site designers to create once and publish the same content for all devices. It is a website development of rendering web pages in an efficient, optimized and easy-to-read format across a variety of devices and web browsers on different platforms.

Rather than the old-style approach of designing web pages for viewing on just desktop or laptop PCs, responsive design utilizes a variety of newer web development features and functionality to deliver an optimal view to users on mobile devices like smartphones and tables as well as on traditional PCs and other electronic devices.

Because of their smaller display size, mobile devices typically require a modified layout for content to help users navigate through the website more efficiently, and with responsive design, web developers are able to code their web pages with the flexibility to render readable content at a variety of display sizes. This is due largely in part to websites that can continually and fluidly change, based on factors such as the viewport width.

The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite(TCP/IP) to link several billion devices worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless, and  optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents and applications of the World Wide Web (WWW), the infrastructure to support email, and peer-to-peer networks for file sharing and telephony. the origins of the Internet date back to research commissioned by the United States government in the 1960s to build robust, fault-tolerant communication via computer networks. While this work, together with work in the United Kingdom and France, led to important precursor networks, they were not the Internet. There is no consensus on the exact date when the modern Internet came into being, but sometime in the early to mid-1980s is considered reasonable. From that point, the network experienced decades of sustained exponential growth as generations of institutional, personal, and mobile computers were connected to it.

Most communications media including telephone, music, film, and television are being reshaped by the Internet, giving birth to new services such as voice over Internet Protocol (VolP) and Internet Protocol television (IPTV). Newspaper, book, and other print publishing are adapting to website technology, or are reshaped into blogging and web feeds. The Internet has enabled and accelerated new forms of human interactions through instant messaging, and social networking. Online shopping has boomed both for major retail outlets and small artisans and traders. Business-to-business and financial services on the Internet affect supply chains across entire industries.

The Internet has no centralized governance in either technological implementation or policies for access and usage; each constituent network sets its own policies. Only the overreaching definitions of the two principal name spaces in the Internet, the Internet Protocol address space and the Domain Name System, are directed by a maintainer organization, the Internet Corporation for Assigned Name and Numbers (ICANN). The technical underpinning and standardization of the core protocols (IPv4 and IPv6) is an activity of the Internet  Engineering Task Force (IFTF), a non-profit organization of loosely affiliated international participants that anyone may associate with by contributing technical expertise.

1. There is a lot of wrong information on the Internet. Important files can be easily taken by the hackers.
2. The unnecessary e-mails, advertisements etc. sometimes are said to be spam because they have the ability to show down the system and makes the users to face lots of problems.
3. Pornography that can get in the hands of young children too easily.
4. Easy to waste a lot of time on the internet. you can start surfing, and then realize far more time has passed than your realized.
5. There are a lot of unscrupulous businesses that have sprung up on the Internet to take advantage of people.
6. The malware or virus threats are so deadly that affects the system to a greater extend. It immediately deletes all important files and the system ends up being crashed.
7. The people using internet often will forget the difference between virtual and real world. This causes the people to get depressed quickly and it leads to social isolation and obesity problem due to lack of any physical exercises. So its better to play outdoor rather in the Internet.

Web browser is a software application that allows us to see the information on the web. When a user requests a particular websites, the web browser retrieves the necessary content from a web server and then display the resulting web pages.
Web browser can show text, audio, video, animation etc. It is the responsibility of a web browser to interpret text and commands contained in the web page.

1. Internet Explorer: This browser was made by Microsoft Corporation and bundled together into Windows operating system. The latest operating system, Windows comes with Microsoft latest web browser named Internet Explorer 11. Internet Explorer supports HTML 4.01, CSS Level 1, XML 1.0, and DOM Level. Microsoft Edge replaced IE as the Windows default browser beginning with Windows 10, but IE is still a popular browser for users running older versions of windows.
2. Microsoft Edge: Microsoft Edge is the new browser built into Windows 10. Internet Explorer 11 remains available alongside Edge on Windows 10 for compatibility. The browser includes an integrated Adobe Flash player and a PDF reader. It also integrates with online platforms in order to provide voice control, search functionality, and dynamic information related to searches within the address bar. Users can make annotations to web pages that can be stored with One Drive but cannot save HTML pages and does not support ActiveX.

The difference between of static and dynamic website are as fallows:

• Dynamic website can be easily upgraded by end users. Static websites is difficult to upgrade.
• The theme of website and content of website are fixed. website designs and content can be changed on runtime.
• With the help of markup language, static website load quickly whereas dynamic websites delays to load because of more processing time.
•  Static website provides information to their clients like an organization website. Dynamic website is where content changes frequently, like an Electronic-commerce site etc.
• Static website directly run on browser and does not require other internet application language. This website can be created from HTML and CSS. Dynamic run the application on server and the result will be display on webpage. So, this requires server application language like PHP, JSP etc.
• Static websites are easy to develop and an experienced person can develop it. But in case of Dynamic websites, it cannot be developed easily because it requires quality developers to create it, manage it, test it and maintain security of application and database.
• In Static website, if you want to change the page content then we have to upload that page on server many times. Dynamic sites provide some facilities that it possible to change the page content using server application. There is no need to upload the page on server. 

Web publishing tools consist of tools and resources like programming language, designing software, animation software etc. which help to create and develop web pages. There are a number of Web Publishing Tools developed by various corporations.

A web content management system (WCMS) is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease.

Most systems use a content repository or a database to store page content, metadata, and other information assets that might be needed by the system. Most systems use server side scripting to improve performance.

A web content management system is used to control a dynamic collection of web material, including HTML documents, images, and other forms of media. a CMS facilitates document control, auditing, editing, and timeline management. A WCMS typically has the following features:

 Automated templates: Create standard output templates (usually HTML and XML) that can be automatically applied to new and existing content, allowing the appearance of all content to be changed from one central place.

Access control: Some WCMS systems support user groups. User groups allow you to control how registered users interact with the site. A page on the site can be restricted to one or more groups. This means an anonymous users (someone not logged on), or a logged on user who is not a member of the group a page is restricted to, will be denied access to the page.

Easily editable content: Once content is separated from the visual presentation of a site, it usually becomes much easier and quicker to edit and manipulate. Most WCMS software includes WYSIWYG editing tools allowing non-technical users to create and edit content.

Scalable feature sets. Most WCMS software includes plug-ins or modules that can be easily installed to extend an existing site's functionality.

Document management: CMS software may provide a means of collaboratively managing the life cycle of a document from initial creation time, through revisions, publication, archive, and document destruction.

Versioning: Like document management systems, CMS software may allow the process of versioning by which pages are checked in or out of the WCMS, allowing authorized editors to retrieve previous versions and to continue work from a selected point. Versioning is useful for content that changes over time and requires updating, but it may be necessary to go back to or reference a previous copy.

There are many web browser available having different features. Some of the basic features mentioned below:

It handles requests for HTML files, interprets links, and deals with embedded images, audio, and video elements.

It keeps the history of the websites visited.

It provides a row of buttons at the top of the browser windows for browsing the Internet conveniently.

It supports web standards currently in use such as HTML, HTTP, JavaScript, and Unicode.

It connects to an e-mail program for importing favorites/ bookmarks and sending and receiving e-mails from the most commonly used applications and formats.

HTML is short for HyperText Markup Language and is the language of the Word Wide Web. It is the standard text formatting language used for creating and displaying pages on the Web. this means that an HTML document, written in plain text, is used to describe the structure and content of web pages, with links to other pages.

Elements: Each part of an web page, such as a paragraph, an image, a link or anything else you can interact with, is an elements. Each type of element has its own behavior. you can links, or type in text boxes.

Tags: An HTML document is a simple, plain text document, which we are able to open with any text editor on our computer. When we open one, we will see the document is made up of tags, which are keywords surrounded by angled brackets, each of which describes an HTML element. Here, we can see HTML tags telling the browser how to render the text element inside:

<p> This text is surrounded by HTML tags!</p>

Most tags have opening and closing tags. The opening tag is written with the tag name in angled brackets, like <tagname> whereas the closing tag adds a forward slash: </tagname>. Anything between these opening and closing tags is considered to be contents of that tag.

Each tag can also have additional attributes, which change the way the tag is display. For example, an <input> tag has a type attribute, which you can use to specify whether it's a text field, checkbox, radio button or one of many more options.

Attributes are specified directly after the name of the tag, inside the two angled brackets. They should only ever appear in opening tags or in self-closing tags- they can never be in closing tags. They are followed by an equals sign = and the chosen value in double quotes". Do not include any spaces before and after the equals sign. Multiple attributes can be defined on a single tag, separated by a space.

<!-- Text field -->
<input type="text"/>
<!--Checkbox-->
<input type="checkbox"/>
<!-- Radio button -->
<input type="radio" value="on"/>

It introduced a number of semantic elements, which is to say elements that convey meaning. Some of the new semantic elements are <header>, <footer> and <article>. They are semantic in that they are not just simple containers, but they tell the browser more about their contents.

There are additional from element types, like "number", "date", "calendar" and "range". Video and audio elements have also been added, as well as new graphic elements, such as <svg> and <canvas>.

Cell Spacing is referred to space /gap between the two cells of the same table.
Cell Padding is referred to the gap / space between the content of the cell and cell wall or Cell border.

Example:
<table border cellspacing="3">
<table border cellpadding="3">
<table border cellspacing="3" cellpadding="3">

The list elements in HTML are:
Ordered List (<ol>): An Ordered List or o1 tag are the list which will list the items in an ordered way, i.e. numbered or alphabetically.
Unordered List (<ul>): An Unordered List or ul tag is the list which will list the items in an unordered war, i.e. in bulleted format or in any other format.
Definition List (<dl>): A definition List or dl tag arranges the items in the way in which they are arranged in a dictionary.

The <body> tag contains the contents of our document including background color, text, color, link color and page margins. Also, various mark-up elements are allowed within the body to indicate headings, paragraphs, list, hypertext and so on. These are described in the <body> documents. The two attributes are: background and bgcolor.

It stands for Cascading Style Sheets. It is use for applying the styles for the HTML. elements, which is use to describe the look and formatting of a document written in markup language. It can also be use with any kind of XML documents including plain XML and SVG. CSS is designed to separate the presentation and content, including layout and colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics. It enables multiple web pages to share formatting by specifying the relevant CSS in a separate. css file.

• There are three methods to integrate CSS on web pages.
• Inline method: It is use to insert style sheets in html document.
• Embedded method: It is use to add a unique style to a single document.
• External method: CSS can be place in an external file and linked via link element.

The advantages of CSS are:

• Accessibility 
• Page will load fast
• Offline browsing
• Maintenance is easy

The different components of CSS style are:

Property

Selector and Value

The class selector selects elements with a specific class attribute. To select element with a specific class, write a period (.) character, followed by the name of the class. With ID selector, we can select an element by pointing out the unique ID name set with the id attribute.

If we use that selector can be used only once in html document. If we use that selector on more that one element, our code will not pass validation.

The difference between the Class and ID selector is:

The ID selector consists of a hash (#), followed by the unique ID name of a referring HTML element. ID selector cannot start with a number and must be at least one character long. They also case-sensitive, and must exactly match across HTML, CSS and JavaScript.

The ID selector in CSS document:
#paral {
   text-align : center;
 color : blue;
}
Class selector
When we want to style name more than one object on a web page, we should be using a class selector. To use multiple elements in an HTML document can have the same class value. In addition, a single element can have multiple class name separated by white space.
A Class selector can have any name that starts with a letter, hyphen or underscore.

A class selector in html document:
<style>
   . center {
     Text - align : center;
   Color : blue;
}
</style>
In CSS a class selector starts with a dot(.), like this:
 . bank { /* this is the class selector */
   Text-color: red;
}
The only difference between them is the "id" is unique in a page can only apply at one element, while "class" selector can apply to multiple elements.

In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior define borders.
In CSS have margin property as follows?
Margin-top, Margin-right, Margin-bottom and margin-left
Margin property has some defined values as shown below:
a. Auto: This property browser calculates the margin.
b. Length: It sets the margin value in px, pt, cm etc.
c. %: It sets the width % of the element.
d. Inherit: This property we can inherit the margin property from the parent element.
In CSS, padding is the property by which we can generate space around an element's content as well as inside any known border;
CSS padding also has properties like:
Padding-top, Padding-right, padding-bottom and padding-left. Negative values are not allowed in padding. 

The main difference between relative and absolute is that "relative" is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent. It means if we write left: 10px then the result will be 10px far from the left edge of the parent element.

Inline element does not have an element to set width and height and also it does have the line break.
Example: links <a>, emphasized words <em>, important words <strong>, and abbreviations <abbr>
block elements are meant to structure the main parts of our page, by dividing our content block.
Example: width and height, paragraphs <p>, lists: unordered <u> and ordered lists <ol>
Headings: from 1st level <h1> tp 6th level headings <h6>, articles <article> and sections <section>

We can make a rounded corner by using the property "border-radius". We can apply this property to any element.
<html>
<head>
<style>
  # rcorner {
  Border-radius: 25px;
  Background: gray;
padding: 20px;
Height:  150px;
}
</style>
</head>
<body>
<h3>The border-radius property</h3>
<p id-"rcorner">Rounded corners</p>
</body>
</html>
Run the above code in the browser.

 In CSS, the box model is a box that binds all the html elements and it includes features like margins, border, padding and the content.
Margin: the top most layer, the overall structure showed.
Border: the padding and content option with a border around is shown. Background color affects the border.
Padding: space showed. Background color affects the border.
Content: Actual content is showed.
By using a box model we will get the authority to add the borders all around the elements and we can also define the space between the elements.

The background-color property is use to set background color of an element.

The background-image property is use to set the background image of an element.

W3.CSS stands for Cascading Style Sheet. IT is developed by w3schools.com. It is used to create faster, beautiful and responsive websites.

The features of W3. CSS are as follows:

• It is in-built responsive web designing.
• It provides standard CSS. 
• It is free to use.
• It is inspired by Google Material Design.

There are two techniques to use W3.CSS.
Local installation: You can download the W3. CSS file on our local machine and include it in to html.
CDN based: You can include the W3.CSS file into our html code directly from the CDN.

• w3-container
• w3-red
• w3-border
• w3-teal

<div class="w3-row">
<div class="w3-col s2 m4 l3">
  <p>The text use 2 columns on small screen, 4 on a medium screen and 3 on a large screen</p>
 </div>
</div>

The various classes of w3.card:

• w3-card
• w3-card-2
• w3-card-4
• w3-card-8
• w3-card-12

There are different table classes in W3.CSS:

a.  w3-table: It represents a basic table without any border.
b.  w3-striped: It is used to display a stripped table.
c.  w3-bordered: It is used to draw a table with a border across rows.
d.  w3-card: It is used to draws a table as a card.

a.  w3-image: It is used to represent a basic style image without any border.
b.  w3-circle: it is used to create circle image.
c.  w3-title: It is used to display the text over an image.
d.  w3-card: It is used to create an image as a card.

CSS: It is cascading style sheet used for style the web pages, with help of css, you can style the web pages, websites, etc. CSS is a modern framework with built in responsiveness.

W3.CSS: It is CSS framework, build for responsive design, like bootstrap, that means you create responsive websites with help of W3.CSS. It is very easy to learn and quite fast for mobile application. 

It has in-built mobile responsive feature which helps you to make mobile responsive.

JavaScript is an object-oriented computer programming language commonly used to create interactive effects within web browsers. It is first used by the Netscape browser, that provides access to the HTML Document Object Model (Dom), provides access to the Browser Object Model (BOM). It allows pages to respond to events, display special effects, accept variable text, validate data, make cookies, detect user's browser.

The pop() method is similar as the shift() method but the difference is that the Shift method works at the start of the array. Also the pop() method take the last element off of the given array and returns it. The array on which is called is then altered.

For example, var cloths= ["Shift", "Pant", "TShirt"];
cloths.pop();

Following are the features of JavaScript:

a.  It is a lightweight, interpreted programming language.
b.  It is designed for creating network-centric applications.
c.  It is complementary to and integrated with Java.
d.  It is an open and cross-platform scripting language.

You can define arrays using the array literal as follows:
var x=[];
var y = [1, 2, 3, 4, 5];

Operators are used for comparing values, perform arithmetic operations, etc. For example, if we take a simple expression, 4 + 5 is equal to 9. Here 4 and 5 are called operands and '+' is called the operator. JavaScript consists of different types of operators that are used to perform different operations.

Types of JavaScript Operators

There are different types of operators in JavaScript that are used for performing different operations. some of the JavaScript Operators include:

a.  Arithmetic Operators
b.  Comparison Operators
c.  Bitwise Operators
d.  Logical Operators
e.  Assignment Operators

JavaScript has events that provide a dynamic interface to a webpage. These events are connected to elements in the Document Object Model(DOM).

Also, these events by default use the bubbling propagation i.e., upwards in the DOM from children to parent. We can bind events either as inline or in an external script. With the help of JavaScript, you can detect when certain events happen, and cause things to accur in response to those events.

Types of Events in JavaScript

There are different types of events in JavaScript that are used to react to events. Some of the famous or most commonly used events such as:

a.  Onclick
b.  Onkeyup
c.  Onmouseover
d.  Onload
e.  Onfocus 

A directive is something that introduce new syntax, they are like markers on DOM elements which attaches a special behavior to it. In any AngularJS application, directives are the most important components.

Some of the commonly used directives are ng-modal, ng- App, ng-bind, ng-repeat, ng-show etc.

a.  Angular JS has several advantages in web development.
b.  Angular JS supports MYC pattern.
c.  Can do two ways data binding using Angular JS.
d.  It has per-defined from validation.
e.  It supports both client sever communication.
f.  It supports animations.                                                                                                                                               ns

Angular JS is a JavaScript framework that is used for making rich and extensible web application. It runs on plain JavaScript and HTML; hence you don't need any other dependencies to make it work. Angular JS is perfect for Single Page Applications (SPA). It is basically used for binding JavaScript objects with HTML UI elements.

There are several differences between Angular JS and JavaScript expressions:

a.  We can write Angular JS expressions in HTML, but we cannot write JavaScript expressions in HTML
b.  We cannot use conditional iterations, loops, and exceptions in Angular JS, but we can use all of these conditional properties in JavaScript expression.
c.  Filters are supported in Angular JS whereas filters are not supported in JavaScript.

The Angular modules collectivity define an angular application where we can write the angular code. It contains the different parts of an angular application. A module id created by angular module function in angular.

This can be a leap hop with the custom HTML input from control (like input, textarea and select) to the application data. It provides from validation behavior with a two-way binding.
<input ng-bind="expression"/>

A controller is a JavaScript function which is bound to the specified scope. Angular instantiates the new controller injects the new scope as a dependency. It can be used to set up the initial state of the scope object and to add behavior to the object. It cannot be to share code or state across controllers, but instead of that Angular service can be used.

Example,
<Any ng-Controller=" expression">
</Any>
<div ng-app="mainApp" ng-controller="SimpleController">
</div>

It is used to define the Angular JS Application. It appoints the element of an Angular JS application and it is kept near the <body> or <html> tag.

We can define any number of ng-app directives inside the HTML document, but only one AngularJS application can be bootstrapped automatically (auto-bootstrapped) and the other applications need to be bootstrapped manually.

Example:
<div ng-app="">
<p>my first expression: { { 157 + 122 } } </p>
</div>

1. It provides either the single page hosting or there are other hosting methods that can be used for the premium sites.
2. The web hosting provides database support and provides the use of the on-growing language.
3.  It provides the platform for application development that can the languages from PHP to Ruby, etc.
4. The web hosting platform allows the users to write and install the scripts that can allow them to use a particular feature of that platform.
5. Layers such as SSL (Secure Sockets Layer) or TLS (Transport layer security) used to provide more options of security for the websites.

Web hosting id the act of renting space and bandwidth through a company so that we may publish our websites online.

There are different types of hosting provided to upload and share their files using the web.

a.  Free web hosting service: It provides limited services and offers it to advertisements and other services with limitations.

b.  Shared web hosting service: where a sever shares many websites all place 

c.  Reseller web hosting: This is the web hosting that allows clients to provide web hosting to others.

d. Virtual Dedicated Server: This is also known as also known as a Virtual private Server (VPS). This provided the divided server resources in the virtual servers and the method that doesn't relate directly to the hardware.

e.  Home server: This is a single machine server that can be thought as a personal server that is used to host one or more websites using the connection.                                                                               

HTMLstands for HyperText Markup Language. It is a wall-known markup language used to develop web pages. It has been around for a long time and is commonly used in webpage design. HTTP, on the other hand, stands for Hypertext Transfer Protocol. It is a means of data communication for the Word Wide Web. It is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is a TCP/I-based protocol used for transferring from servers to clients. HyperText Markup Language - the formatting language used to design webpages. HTTP just is a protocol use to transfer data on internet. HTML is a language to create a web page. HTTP is the code in a web address URL that specifies that you are looking for a common website. Basically this protocol establishes the standard that computers on the internet use to communicate and transfer data through web browsers.

HTML is the language of web pages. A Word document contains text and formatting code for example. The text code is the content and the formatting code tells word how to display the text on the screen / page.
HTML is very similar. It contains the content (which is easily edited). It's the formatting code that determines how a web page's content will look in a browser.

HTTP is the protocol that is used to request and deliver web page content (as files).When your browser requests a web page from a web server, it uses HTTP. But the owner of the web page uses FTP protocol to actually put the files on the web server (using the same address), or delete them from the server because there will be new files, or uploading new files. But both protocols use the same link (the internet).

Stateless protocol: Stateless Protocol is a network protocol in which client send request to the server and server response back as per the given state. Examples of stateless protocol are HTTP (Hypertext transfer protocol), UDP ( Use datagram Protocol) & DNS (Domain Name System). In Stateless, server restriction is not needed to keep the server information. In stateless, server and client are loosely coupled and can act independently. server design is simple to implement. Server handles transactions in a very quicker way.

Stateful protocol: Stateful Protocol is a network protocol in which if client send a request to the server them it expects some kind of response, in case of no response then it resend the request. Examples of stateful protocol is FTP and Telnet. In stateful, a server is required to maintain the current state and session information. Server design is comparatively complex and difficult to implement. Server is slow comparatively to stateless.

Advantages of connectionless protocol are as follows:

a.  It sends the packet without handshaking.

b.  It is faster than connection-oriented protocol.

c.  The header size of the packet is smaller as compared to the packets in connection-oriented services.

Disadvantages of connectionless protocol are as follows:

a.  It is not reliable and cannot ensure the data transmission based on the destination.

b.  Packets decide the route while transmission based on the network congestion.

c.  It does not have a fixed path.

d.  Different packets do not necessarily follow the same path.

Dedicated hosting services allow the users to have their own space or their own web server.

a.  It can be handled by the user having the full control over the operating system and the resources it uses.

b.  It does not allow the user to own the server but it is just another type of self-managed server.

c.  They are less costly and they allow better services than the shared ones due to the reliability.

d.  It requires lots of responsibility and maintenance to manage the resource and to provide the services to the dedicated services.

e.  It provides higher security as it is better than the other servers like shared servers that compromise on security as it is shared between many. 

Web hosting scope is higher due to the increase of the traffic when the web page of the website is accessed. The files are uploaded using for the FTP (File Transfer Protocol) using the web hosting and its services. web interface is being used for the deployment of the website using the web hosting services and techniques. ISPs (Internet Service providers) provide the services to the clients that are from the organizations or on the individual basis and provide the hosting solutions. It provides personal website hosting free to deploy and use. It also allow the accessing to be performed of the websites that is having the higher expense.

Web publishing tools are applications that are used to design and build websites for either the internet or an internet. They range from simple text editors that can generate web application code through to highly sophisticated and feature-rich web authoring packages. Some web publishing tools must be installed on a workstation. Others are server-based and are accessed via a web-interface. Web publishing tools are also called web authoring tools.

This websites provides an overview of current web publishing application software. It is intended for individuals and small business owners that wish to establish a new website or want to upgrade an existing site to one that is more attractive, functional and maintainable.

We will need the following software before we begin creating our web pages.

FrontPage 2003 from Microsoft is one of the best web publishing tools on the market today. This sophisticated web authoring application provides an intuitive user interface. Although this web publishing tool is suitable for new web designers, it also provides advanced features that only professional web publishers would want to use. Because it is so simple to switch between the WYSIWYG (What You See Is What You Get) user interface and the "HTMLCode" interface, one can easily view the HTML Code as pages  are created. Frontpage also provides functionality to insert user-defined code into a page. This code is protected when changes are subsequently made using the WYSIWYG user interface.

It has numerous features that enable software objects to be reused, thereby saving much development and maintenance effort. These features include support for shared borders, website "themes", "included" pages and system generated navigation bars and titles.

It also provides XML capabilities that allow websites to interact with other websites over the internet. In addition to integrating with MS Access to provide data-driven functionality, FrontPage 2003 websites can also interface with SQL server and XML database and other database using ODBC.

With a connectionless protocol, clients connect to the server, make a request, get a response, and then disconnect. For the Internet, HTTP is a connectionless protocol.

With a connection-oriented protocol, clients connect to the server, make a request, get a response, and then maintain the connection to handle future requests. An example of a connection-oriented protocol is File Transfer Protocol (FTP). When we connect to an FTP server, the connection remains open after you download a file. The maintenance of this connection consumes system resources. A server with too many open connections quickly gets overloaded. Consequently, many FTP servers are configured to allow only 250 open connections at one time, so only 250 users can access the FTP server at once.

Connectionless protocols differ from connection-oriented protocols in the way requests and responses to requests are handled. HTTP is a connectionless protocol. When clients connect to the HTTP server being a connectionless protocol, they make a request, get a response, and then disconnect, Because the connection is not maintained, no system resources are used after the transaction is finished. Consequently, HTTP servers are limited only by active connections and can generally handle thousands of transactions with low system overhead.

The drawback to connectionless protocols is that when the same client requests more data, the connection must be re-established. To web users, this means a delay whenever they request more information.

A cookie is information that a web site puts on our hard disk so that is can remember something about us at a later time. Typically, a cookie records your preferences when using a particular site. Using the web's preferences when using a particular site. Using the Web's Hypertext Transfer Protocol (HTTP), each request for a web page is independent of all other requests. For this reasons, the web page server has no memory of what pages it has send to a user previously or anything about our previous visits. A cookie is a mechanism that allow the server to store its own information about a user on the user's own computer. We can view the cookies that have been stored on our hard disk. The location of the cookies depends on the browser. Internet explorer stores each cookie as a separate file under a Windows subdirectory.

Cookies have been of concern for internet privacy, since they can be used for tracking the browsing of a user. HTTP cookies are used for user authentication, user tracking, and maintaining user-specific information (preferences, electronic shopping cart, ect). Cookies are also used to track users across a website. Third-party cookies also allow for tracking across multiple sites.

The Common Gateway Interface (CGI) is a standard way for a web server to pass a web user's request to an application program and to receive data back to forward to the user. When the user requests a web page (for example, by clicking on a highlighted word or entering a websites address), the server sends back the requested page. However, When a user fills out a from on a web page and sends it in, it usually needs to be processed by an application program. The web server typically passes the form information to a small application program that processes the data and may send back a confirmation message. This method or convention for passing data back and forth between the server and the application is called the Common Gateway Interface (CGI). It is part of the web's Hypertext Transfer Protocol (HTTP).

If we are creating a website and want a CGI application to get control, you specify the name of the application in the Uniform Resource Locator (URL) that we code in an HTML file.

A programmer can write a CGI application in a number of different languages can write such as C, C++, Java, and PERL. 

Creating a website and placing it on the web server is called web publishing. A website is a collection of HTML pages with the home page typically named INDEX.HTML. website are designed using web authoring software which provides a graphical layout capability or by hand coding in HTML or both. It includes creating and uploading websites, updating webpages, and posting blogs online. the published contents may include text, images, videos, and other types of media.

Web hosting is the service that makes our website available to be viewed by others on the internet. A web host provides space on its server, so that other computers around the world can access our website by means of a network or modem. the users want to view our website, all they need to do is type our website address into their browser. Their computer will then connect to our server and our webpages will be delivered to them through the browser.

Most web hosting companies require that we own our domain name in order to host with them. If you do not have a domain name, the web hosting companies will help us purchase one.

The basic features of a web hosting plan include:

• Disk space
• Bandwidth or Data transfer
• E- mail accounts
• FTP access

The Word Wide Web is the part of the internet that contains websites. It was invented in 1989 by Tim Berners-Lee at CERN, Geneva, Switzerland. It is basically a system of internet servers that support specially formatted documents. The documents are formatted in a markup language called HTML (Hyper Text Markup Language) that supports links to other documents as well as graphics, audio and video files.

Architecture of WWW
WWW is basically a distributed client-server service. It this a client can access the services from a server using a browser. These services are usually distributed over many locations called sites or websites. From the user's point of view web consists of a vast worldwide collection of documents called web pages. Each web page can contain link to other pages anywhere in the world. By clicking on such link user can access another web page, Such a text or image that enables the user to link to another web page is the string of text that points to another web page is called hypertext. Hypermedia is enhanced from of a hyperlink which not only links to the other pages or other sections within the same page but can also link with various medium like sound, animation, movie clip etc. Hypermedia is grouping of different media like sound, graphics, animations and text in a single file. These hyperlinks are created with the help of specialized language called Hypertext Mark up Language (HTML). In order to access these web pages on different sites, each of these pages has a specific address called Uniform Resource Locator (URL).