MI0041 Java and Web design

Q.1. Explain the browser components and its features. Answer:-Web Browsers are the software programs that provide an interface to explore the Web with the help of the following components. Toolbar Location Bar Menu Bar Access Indicator Status Bar Scroll Bar The following figure displays the Internet Explorer Web browser window.

Toolbar A Toolbar contains a set of buttons or icons for the community performed tasks in an application. The Toolbar buttons supported by Web browsers are as follows: History: Allows the user to view the Web pages accessed in the past few days or weeks. Back: Directs the user from the current Web page to the previous Web page. Reload or Refresh: Reloads the current Web page. Stop: Stops the loading of the current Web page in the Web browser window. Home: Directs the user to the default home page. Search: Allows the user to perform searched on the WWW. Bookmarks or Favorites: Allows the user to save a list of URL addresses visited by the user. As a result, the user can simply click the website URL from this list to revisit the website. Forward: Directs the user from the current Web page to the next Web page that has already been visited by the user. Print: Allows the user to print the document that is currently loaded in your Web browser. Location Bar The Location Bar allows the user to specify the address of the website. The user can then press the Enter key to access a particular website. Alternatively, the user can click the Go button on the drop-down list box to access the website. In addition, the Location Bar contains a list of websites accessed earlier by the user. To access these websites, you need to click the small triangle on the combo box. The Location Bar is also known as the Address Bar in the Internet Explorer. Menu Bar The Menu Bar is located on the top of the Toolbar and allows the user to select and customize a series of options in the Web browser window. For example, the user can save the current Web page or enable or disable the images on the Web page. Access Indicator The Access Indicator is an image to the right of the Web browser window. This image is animated when a Web page is being downloaded, otherwise it remains static. Status Bar The Status Bar is located at the bottom of the Web browser window and specifies the status of the transactions on a Web page. For example, the Status Bar displays the information such as the address of the website, the size of the file and error messages. Scroll Bar A Scroll Bar enables you to scroll up and down on a Web page, if the Web page is too long to fit the Web browser window. Similarly, you can scroll right or left on a Web page if the Web page is wider to fit the Web browser window.

Q.2. Describe in detail the building of webpage

Answer:-A web page (or webpage) is a web document that is suitable for the World Wide Web and the web browser. A web browser displays a web page on a monitor or mobile device. The web page is what displays, but the term also refers to a computer file, usually written in HTML or comparable markup language, whose main distinction is to provide hypertext that will navigate to other web pages via links. Web browsers coordinate web resources centered around the written web page, such as style sheets, scripts and images, to present the web page There are four stages to building a website: Discovery, Design, Develop, and Launch. Once the Design phase is complete, its time to build the website. This is where the magic happens.

If youre working with a vendor, dont expect to be as involved during the development stage. Instead, the developers work to build the site according to the wireframes, comps, and sitemap. Internally, this stage can be divided into five phases: Specificationbefore development begins, the project manager or information architect will write a specification. Thats a document that describes, in detail, how the website will work and what should happen on every page, for every action the user might take on that page. Generally, the client reviews and approves the specification before work begins. InfrastructureSimilar to preparing the foundation for a building, the developers must create the basic infrastructure for your website. This might include setting up the CMS, preparing the development and test environments, and creating the basic page structure (the navigation menu, footer, etc.). Back-end codingThe back-end developer creates all the website pages, puts all the buttons and content boxes on the page, places headings, and so on. This developer creates any databases necessary and writes the code to create dynamic pages, automatically send notification emails, and do any other complex tasks. Front-end codingthe front-end developer takes the pages the back-end coder has created and makes them beautiful. Using the specification, wireframes, and comps, he or she applies CSS styles to make the fonts the right size, position the graphics and other items on the screen, apply the correct colors, etc.

TestingTesting is actually an ongoing process. Each developer tests his or her work as its completed. However, toward the end of the project, others will test the website in a methodical way, to make sure it works as specified. The client is often also involved in doing ad-hoc testing, by using the website and reporting any errors.

Q.3.How to use forms? Explain with an example.

Answer:-An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.) HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, and radio-buttons, submit buttons and more. A form can also contain select lists, text area, field set, legend, and label elements. The <form> tag is used to create an HTML form: <form> . input elements . </form> The Input Element -The most important form element is the <input> element. The <input> element is used to select user information.

An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. The most common input types are described below. Text Fields <input type="text"> defines a one-line input field that a user can enter text into: <form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form> How the HTML code above looks in a browser: First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. Password Field <input type="password"> defines a password field: <form> Password: <input type="password" name="pwd"> </form> How the HTML code above looks in a browser: Password: Note: The characters in a password field are masked (shown as asterisks or circles). Radio Buttons <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: <form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> How the HTML code above looks in a browser: Male Female Bottom of Form Checkboxes <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike<br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> How the HTML code above looks in a browser: I have a bike I have a car Submit Button

<input type="submit"> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> How the HTML code above looks in a browser: Username: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
Submit

Q4. Give an example for cascade style sheets and explain editing with cascade style sheets in detail Answer:
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for table less web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.
Here is an example selector [, selector2, ...] [:pseudo-class] { property: value; [property2: value2; ...] } /* comment */

The first priority of CSS is always the inline styles. <p style="font-weight: bold ;"> this would make all of your paragraphs bold. It is inserted into the HTML so it is always the first style to be applied.

If you had in an external style sheet. P {font-weight: normal;} It would not work, for the part of the HTML that the style has been applied too, as in <p style="..... as the inline style takes precedence. the second precedence is that any styles applied in the head of the CSS takes precedence over an external style sheet. Most people add hacks here. The third precedence is that in the CSS the code that is applied lower down the page, counteracts any styles applied higher up in the CSS page.

Q5.Describe the working of search engine. What are the different types of search engine? Explain with its application.
Search engines are programs that search documents for specified keywords and return a list of the documents where the keywords were found. A search engine is really a general class of programs; however, the term is often used to specifically describe systems like Google, Bing and Yahoo! Search that enable users to search for documents on the World Wide Web. Typically, Web search engines work by sending out a spider to fetch as many documents as possible. Another program, called an indexer, then reads these documents and creates an index based on the words contained in each document. Each search engine uses a proprietary algorithm to create its indices such that, ideally, only meaningful results are returned for each query. Search engines are the key to finding specific information on the vast expanse of the World Wide Web. Without sophisticated search engines, it would be virtually impossible to locate anything on the Web without knowing a specific URL. But do you know how search engines work? And do you know what makes some search engines more effective than others? When people use the term search engine in relation to the Web, they are usually referring to the actual search forms that search through databases of HTML documents, initially gathered by a robot. There are basically three types of search engines: Those that are powered by robots (called crawlers; ants or spiders) and those that are powered by human submissions; and those that are a hybrid of the two. Crawler-based search engines are those that use automated software agents (called crawlers) that visit a Web site, read the information on the actual site, read the site's meta tags and also follow the links that the site connects to performing indexing on all linked Web sites as well. The crawler returns all that information back to a central depository, where the data is indexed. The crawler will periodically return to the sites to check for any information that has changed. The frequency with which this happens is determined by the administrators of the search engine. Human-powered search engines rely on humans to submit information that is subsequently indexed and catalogued. Only information that is submitted is put into the index. In both cases, when you query a search engine to locate information, you're actually searching through the index that the search engine has created you are not actually searching the Web. These indices are giant databases of information that is collected and stored and subsequently searched. This explains why sometimes a search on a commercial search engine, such as Yahoo! or Google, will return results that are, in fact, dead links. Since the search results are based on the index, if the index hasn't been updated since a Web page became invalid the search engine treats the page as still an active link even though it no longer is. It will remain that way until the index is updated. So why will the same search on different search engines produce different results? Part of the answer to that question is because not all indices are going to be exactly the same. It depends on what the spiders find or what the humans submitted. But more important, not every search engine uses the same algorithm to search through the indices. The algorithm is what the search engines use to determine the relevance of the information in the index to what the user is searching for. One of the elements that a search engine algorithm scans for is the frequency and location of keywords on a Web page. Those with higher frequency are typically considered more relevant. But search engine technology is becoming sophisticated in its attempt to discourage what is known as keyword stuffing, or spam indexing.

Another common element that algorithms analyze is the way that pages link to other pages in the Web. By analyzing how pages link to each other, an engine can both determine what a page is about (if the keywords of the linked pages are similar to the keywords on the original page) and whether that page is considered "important" and deserving of a boost in ranking. Just as the technology is becoming increasingly sophisticated to ignore keyword stuffing, it is also becoming savvier to Web masters who build artificial links into their sites in order to build an artificial ranking. Spider trap - A condition of dynamic Web sites in which a search engines spider becomes trapped in an endless loop of code. Search engine -A program that searches documents for specified keywords and returns a list of the documents where the keywords were found. Meta tag - A special HTML tag that provides information about a Web page. Deep link -A hyperlink either on a Web page or in the results of a search engine query to a page on a Web site other than the sites home page. Robot -A program that runs automatically without human intervention.

Q6. List the benefits and drawbacks of Lamp stack

LAMP is a combination of free, open source software. The acronym LAMP refers to the first letters of Linux (operating system), Apache HTTP Server, MySQL (database software), and PHP, Perl or Python, principal components to build a viable general purpose web server. LAMP technology can drive Web applications, and although it is powerful, is also comparatively simple and easy to use. Individually, Linux, Apache Web server, MySQL database, Perl, Python or PHP are each a powerful component in its own right. The key to the idea behind LAMP, a term originally coined by Michael Kunze in the German magazine in 1998, is the use of these items together. Although not actually designed to work together, these open source software alternatives are readily and freely available. This has lead to them often being used together. In the past few years, their compatibility and use together has grown and been extended. Certain extensions have even been created specifically to improve the cooperation between different components. Today, the products that make up the LAMP stack are included by default in nearly all Linux distributions, and together they make a powerful Web application platform. Benefits 1. The benefits of using the LAMP stack are primarily licensing costs, namely none, speed, ease of development and ease of maintenance. Because the number of web application developers knowledgeable in LAMP technologies is quite high, it is relatively easy to find programmers able to work on LAMP projects and because of the simplified nature of LAMP programming, projects can range from very simple to extremely complicated while relying on the same technological underpinnings. 2. Easy to code: Ask all developers and they will tell you that coding is a breeze on LAMP. What this is does is that it ensures that coding is relatively bug free and doesnt have to go through an exhaustive and time consuming process of fixing the bugs. 3. Easy deployment: For many developers, its the deployment of a web application that becomes a tricky exercise; especially when the programming language cannot be easily integrated with the server and database. But, there are no such problems with LAMP as PHP is a standard Apache module. This makes it easier to deploy LAMP web applications. 4. Local Development Another huge advantage of using LAMP is that a developer can build an app locally and then deployed it onto the web.
Apache is not the highest performing web server around; if you're looking at massive volumes of traffic it's probably not the right choice for you. Something like lighttpd or nginx are more likely to be what you'd use.

Drawbacks
1.MySQL's issues are well-known (and well worked-around), ranging from unusual choices of functionality through to the recent breakdown in relationship between much of the open-source community and Oracle. Having said that, it does the job that 99.9% of people want it to do. MySQL is a "not ready for prime time" DB for hobbyists, and not a competitor for SQL Server or Oracle (Although PostgreSQL seems to have a reputation for being more robust) 2.PHP's language issues are worthy of their own essay, covering areas such as the bolted-on object oriented programming model, the difficulty of writing sensible, reusable code in it compared to writing random looking nonsense which happens to work, along with performance and reliability issues. PHP / Ruby on rails are optimized for CRUD (Create, Read, Update and Delete operations). Although this is an advantage when building CRUD-intensive web applications, both perform slower than Java/JEE or C# (which are both common Enterprise standards). Furthermore, a lot of applications and systems (like manufacturing systems) have a lot of non-CRUD functionality that may be harder to build with PHP or Ruby, or even Python. 3.Overall, the LAMP stack (excluding Linux), is a collection of middle of the road tools which are all capable of doing a good job, but probably aren't the best of breed choices, which they were back in the late 90's when LAMP was widely adopted as the 'open-source stack'. Linux is seen as not as well supported as Unix, Solaris, or Windows Servers. 4. Apache is harder to configure and maintain than web servers like BEA Web Logic or IIS.