This action might not be possible to undo. Are you sure you want to continue?
organized. (The page color is the color of your Web page and background color is the color of the browser window where the Web page is displayed. Therefore. Many a times these design aspects are governed by individual interests and requirements. A plan that describes how to organize the various elements of content like text. For example. whether it fits with other elements around it and so on and then decide the positioning and placement of the elements. and objective. Say.the cursor of your mouse is placed. if you want to have a page which has a specific width. You can use colors to define spaces. Once you finalize the Web layout you can easily build the Web pages. While designing the Web layout. how it is related to the objectives of the Web page. you need to design the Web page with simple and reliable interfaces and navigations so that it can be easily understood and used by the audience. you must ensure that you do not include any content that does not define the objectives. This improves the look and feel of the Web page you design. more than one designer can work on the same page and still maintain uniformity. colored texts and so on. Q2. You want to insert his picture on the Web page. ANS: Building a Web page involves great planning and design. The usability of the page will make the Website reach out to large a group of audience. Images and graphics: Images and graphics are a major part of your Web layout. After you gather the content you also make sure that you organize the content logically. in the next sub section we will discuss how to format text and images on the Web page. Since. images have large impact on the audience than the text. there must be a logical flow in which you present the content. These interfaces comprises of images. This will make sure that only the right content is used for creating the Web page. 2 . For example. In case your browser has small space the page will be displayed with less or no background. You need to make sure that you check the image size and position before you put it on the Web page. However. Once you have gathered. In the previous section we have already learnt about the basic document structure of the HTML. you need to understand the requirements of the audience who use the Web page clearly. and then place the element in its appropriate position. if the browser you use has a large space the page will be displayed along with the background. Therefore. you can either insert it at the right or left top corner of the Web page. the Web page shows a progress indicator which shows how much percentage of a file has been downloaded.) When you aligning the Web page at the centre of the browser window enables the page to be resized for different browsers. requirement. Let us first create a Web page with few lines of text displayed on it. you need to think about the significance of each element. graphics and so on. Describe in detail the building of webpage. You need to keep the screen resolution in mind so that your text does not look too small or too large. Most designers prefer to have seven to eleven words in a line just to make sure that the user is able to read it without any difficult. you need to define the objectives of your design clearly before gathering the content. Therefore. While loading. Later. graphics. You must provide hyperlinks to related content so that the Web page users can navigate to other Web pages to get more information about the content. While doing so. With the Web layout. most people are not comfortable reading lengthy sentences. Using this let us now create our Web page using the notepad. The first major issue that you need to address is gathering the right content and organizing the gathered content on the Web page. Stop button: This button is used to stop the browser from loading the Web page on to the browsing window. and structure the next part is deciding upon the placement of the content on the Web page. then you can centre it on the browser screen and make the background color and the page color different. Since. Only if the page is user friendly it can retain its users. Before you design the Web page it is very important to plan the structure of the Web page and also decide the kind of content that you insert in to the Web page. As a designer you have to consider all the aspects of style. This means you need to structure the content properly on the Web page. This involves providing proper names to the sections and subsections that you use to categories the content. While gathering the content. make sure you do not overcrowd the page with too much information. on the Web page is known as the Web layout. you first need to decide the position and placement of every element of the content. Text width: Often referred to as scan length this defines the number of words you can display on one line. setting a proper width for your Web page is very essential and improves the efficiency of the design. Therefore. A good designer will not place and position the element randomly on the Web page. Also. if you are creating a Web page which talks about the biography of an individual. Some of the basic aspects of Web layout that you need to keep in mind while designing a Web page are: Space and white space: Try to use the entire space available on the Web page.
You can use the title element <title> and </title> tag to provide a name to the Web page which appears on the title bar of the browser window Now choose a name for your document and save it as a HTML document. The attribute "name" is used to define the variable where your input will be saved. The text "First name" and "Last name" is displayed in the beginning of the text field as shown below: The rectangular boxes are the text fields where you enter the text. "First Web Page. This signifies that the field is a password field. The syntax of the form is as shown below: Let us learn how to create some of the input elements that we use in a Web page form. The only difference is the value that we pass to the attribute "type".First write a simple HTML code as shown below. The code given below explains how to insert radio buttons on the Web page. in password field you cannot see the text that you enter.html". Using the attribute "name" you can define a variable to store the password that you enter. The output of the above code is as shown below: Checkboxes The code to define the checkboxes is shown below: You can notice from the above example code that the code for checkboxes is similar to the radio buttons. for a question asked in a form they provide four answers out of which only one answer will be correct and you have to choose only one out of the four. For selecting the checkbox element we pass the value "checkbox" to the attribute "type".html" or “. Text fields This is a single line input filed where you can enter the text. However.). the form data that you send to 3 . In all the elements that we will discuss below contain these two attributes.htm”. The "action" attribute specifies the address or URL to which the form has to be submitted when you click the submit button. For example. you can see that we are passing the value "radio" to the attribute "type" indicating that the element that the browser is supposed to display is a radio button. you can use radio button. For example. In the radio button element we have to define the value that we want to store in the variable. The output of the above code for checkboxes appears as shown below: Submit button This button is used to send form data from the Web page to the Web server. When you pass the value "get" to the attribute "method" then. Another important difference which we need to know is that in checkbox you can select any number of items. In the above code. Password field This field is similar to text field and the only difference is that you can view the text you enter in the text field. for every character that you enter you see either an asterisks (*) or dot (. on your notepad (refer previous section 2. The password field that we have defined in the above code appears as shown below: Radio buttons This button allows you to select only one of the items from the given list. For example. Here. To save it as a HTML document. you can select all the items given with a checkbox in a list which is opposite to radio buttons where you were able to select only one of the items in the list. In our example we have defined "Name1" as the variable. In such cases. How to use forms? Explain with an example ANS: You can create the forms using the <form> tag. The example code shows how to create it using the tag <input type="text"/>. Q3. This button is created on the Web page using the example code shown below: You can see from the example code shown above that there are few new attributes which we have defined in the opening <form>. your document name should end with the extension ".1 for the structure of an HTML document). In the above example code. You can use the same tag that you used to create text field except that the value that you pass to the attribute "type" will be "password". First you create the form element using <form> and </form> tags. the type attribute is used to specify the type of element you want to create. Web Page Displayed on the Browser The Web page that you have created As you can see the Web page has the title “My First Web Page!” which is described inside the title tags of our example above. The example code for the password field is given below. Next you define the elements that you want to display on the form within the form element. "answer" is the variable in which the value which we have defined using the attribute "value" is saved (true or false). In our example we are creating a text field and the value that we pass to "type" attribute is "text". "action" and "method".
Let us modify the previous code example for better understanding We have taken a part of the code from the previous code example and modified it. in the above code we are calling the class "center" inside the opening tag <p>. you want to create a class only for the paragraph tag <p>. Similarly. This means it will not be sent separately but as a part of the URL page. radio buttons.center" (refer previous section for syntax of CSS tag). The "text-align" attribute is used for aligning the text. the content within the <p> and </p> tags will be aligned at the center of the Web page. For example. panel (a container that holds all the component on the frame).the URL specified in the attribute "action" is sent as an attachment to the URL. Example This is a simple program of java awt package which constructs a look like a form by using various java component. In our example. You can send any number of data or input elements such as text fields. There are multiple classes have been used in the program for creating specific component like text boxes. As you can see in the code line we are calling the class "center" using the attribute "class" inside the opening tag <h1>. This means that the class is restricted only to <p> tag and you cannot use it to apply style to other tags. You can also restrict the class to a particular HTML tag. Therefore. the amount of data that you can send is limited. These are explained as follows: Panel: This is the class of Java Awt package that is used for creating a container. However. checkboxes and so on. in our example.2 for internal method). you can choose any name you like for the class. we are passing the value "center" to the attribute "text-align" i. labels. followed by the name of the class selector. This example uses internal method to apply style to the HTML document (refer section 4. Say for example. There is another way of sending the data that is by passing the value "post" to the attribute "method". In this case. We have called the class "center" in the header element and the content that is present in the <h1> element will be aligned at the center of the Web page. Once you call the class. the style will be applied to the content that you define using the HTML element. First. we have chosen to call the class as center. "<h1 4 . This is achieved using the CSS class selector.e. checkboxes and so on using the “post” method. Similarly. the text for which the style is applied will be aligned at the center of the Web page. since it is being used to center text. Form data sent using the “post” method can also be encrypted and sent securely using the HTTPS protocol. Using this you can specify a particular style for any HTML element." we have used "p. Note. Program Description: Here. command button. all the components like text boxes and command button have been created on the Java Awt Frame. you will learn how to create it. In this section. radio buttons. Now we have created a class selector named "center" to align the text at the center of the Web page. the data is simply attached to the URL and other users on the Web can easily access it. Before discussing about the text formatting let us discuss how you can create styles in a style sheet and incorporate it in the HTML document. "<h1class="center">Center-aligned heading</h1>" this line shows how you can call the class defined in the <head> element to apply style. you define the class in the style sheet and then link the style sheet to the HTML document (refer to section and use the class selector as explained above. This is done by using java gui programming using Classes or APIs of java awt package." before the class selector "center". and the style defined by a class will not be applicable to any other tags. Give an example for cascade style sheets and explain editing with cascade style sheets in detail? Web Page Editing with CSS Ans. So. what is this CSS class selector? The class selector is used to specify a style for a group of HTML elements (refer to Unit 2 for HTML elements). the name given to the class selector is ". It is used to send short forms with one or two input fields such as text fields.". Below is an example that helps you understand how to use the class selector. </p>" code line is correct and the text with in the tags will be aligned at the center. Here isthe code of this program: Q4. "<p class="center">Centre-aligned paragraph. Label: This is the class of Java Awt package that is used for creating Label component labeled with string like "First Name" and another is the "Last Name". You follow the same method of class usage in the style sheet that is defined in a separate file. All the CSS class selectors will start with a ". As you can see in the above code instead of ". Since.
This attribute aligns the text to the center of the Web page. Figure 4. the first letter of each word in the text will appear in capital for example. lower caps or capitalize the first character of every word in the given text. We are passing the value "underline “which underlines the text on the Web page. In the above example code. Let us now learn how to format text on an HTML document using the class. Text indention This is used to align the text from the margin of the Web page. Web Page with Margins As you can see from the figure the top margin is 100 pixels from the top end of the page. were every line in a paragraph is of same length. When you pass the value “justify" to the attribute. Margins Page. "garden city of India" will be "GardenCity Of India".1 show a Web page along with its margin widths. This is achieved by using the attribute "text-transform”. will have margins. Text alignment We can align the text using the CSS attribute similar to the HTML attributes that we studied in Unit 2. Letter space This allows you to fix the spacing between the text characters. For example: In the above code line we have defined a p-class with the class name "align text". you can pass the value "lowercase" to the attribute. The text can be aligned to the right or justified (refer Unit 2 for example of right alignment). the "decoration" is the name given to the class and "textdecoration “it is the attribute used to decorate the text on the Web page. You can specify it with the help of the attribute "letter-spacing" and by passing the desired value of the space in the form of pixel you can adjust the spacing between the text characters. over-line or line-through the Web page text. This is the portion of the page acts as the border for the page and within this border you can insert the content. left margin is 70 pixels from left end of the page. We can pass other values such as: · Over-line: The value helps you to draw a line over the text on the Web page. right margin is 40 pixel from right end of the pageand bottom margin is 10 pixels from bottom end of the page. Even though you define the class. each text line on the Web page will be stretched so that both the right and left margins are straight. You can make the text all upper caps. The code line for text transformation is as shown below: In the above code line. The example code line for obtaining a character spacing of three pixels is given below: Text transformation The text transformation property helps you to control the capitalization of the text on the Web page."sachin" will be transformed to "SACHIN". For example. 5 . For converting the text to lower case. This is done as shown below: The above code line is a class that we have defined to apply an indentation of 30 pixel form the margin. whether it is a page in your text book or the Web page. the style will not be applied to the text inside the <h1> tag. Let us now write the code line to fix the page using the CSS for the margins as shown in figure 4. You can define a class as shown below to achieve text decoration. The "text-indent" is a CSS attribute to which we pass the appropriate indentation value. the "transform" is the CSS class selector name and "text-transform" is the attribute to which we pass the value "uppercase" to convert the text to uppercase. · Line-through This value helps you to draw a line through the text on the Web page. The "textalign “is the CSS attribute used to align the text on the Web page and "center" is the value that we pass the attribute. When you pass the value "capitalize". Text decoration This property is used to add effects such as underline. Formatting the text We have learnt to create CSS class and also how to use them for apply styles in the HTMLdocument.1.class="center">Centre-aligned heading</h1>" code line is incorrect. This is similar to the style that you see in this book.
they are: · Absolute positioning. The example code for absolute positioning is as shown below: As you can see from the above code the attribute "position" is used to define the positioning type. 350 pixels away from the left end of the page. the entire body of the Web page will appear with a grey background. The example below clearly explains how this is done: In the above code you can see that the value for the attribute "top" is same i. Note. In the "top" attribute. One more important point to remember is that you can choose independent background color for each element. where the content starts 100 pixels form the left end of the page. The principle behind this is very simple. The difference between the absolute and relative positioning is that in absolute positioning.1. (Fixing the margin is similar to selecting the page margin in Microsoft’s Word documents Using colors with CSS In the previous sub-section.This code enables you to create the page that you see in figure 4. if we have multiple paragraph elements in a page. 150 pixels away from the left end of the page and h3 is placed.With the help of positioning property of CSS. Say for example. Background color: This property enables you to choose the background color of the Web page. bottom. For example. the h2 is placed. For example. The h1is placed. The attribute "margin-top" is used to adjust the top margin. using relative positioning you can place elements next to each other. in our example we are passing the value "red". You can position the elements using the four different properties top. we define the distance between the first character of the content of the paragraph element and the left end of the Web page.e. With the help of the attribute "background-color". no other elements can overlap on the space that it defined for absolute positioning. Color property The color property of the CSS enables you to change the color of the text displayed on the Web page. "margin-bottom" is used to adjust the bottom margin. The "fixmargin" is the name of the class selector used to define the class containing the page margins. by providing the appropriate pixel position you can position the content of theHTML element such as paragraph or heading on the Web page. the text within the tags will be displayed in red color. consider the previous absolute positioning code. Absolute positioning: With this type of positioning you can place your content anywhere on the Web page. Positioning elements with CSS In the previous sub section we learnt about the color property of CSS. you a place an HTML element wherever you want it on the Web page. a blue background for the heading text and grey color for the other portion of the Web page. When you use the class "recolor" in a text element. Let us now learn how to apply colors to the text and background of the Web page.150 pixels. content within the<h1> element will appear with a blue background and content within the <p> element will appear with a green background. the text of an earlier paragraph will be replaced by the text of a paragraph later in the Web page. the entire Web page is divided into number of pixels. we learnt the basic techniques of formatting the text on a HTMLdocument using CSS. The value passed to these attributes is in the form of pixels. No other element can occupy the space next to the Element with absolute positioning. Let us now learn the two important positioning types. green and so on. we define the distance between the first line of the content of the paragraph element and the top of the Web page. and "margin-right" is used to adjust the right margin of the page. “margin-left" is used to adjust the left margin. you can change the background color of the Web page. Let us now learn about the positioning elements of HTML with CSS. This can be done as follows: Now. you want to create a class to change the color of the text to red then you can write the code as shown below:In the above code you can see that the attribute "color" is used to pass the color value. you can have a green background for the paragraph text. since all paragraphs start at the same position in the Web page. In the "left" attribute. You can provide various other values such as blue. · Relative positioning. left and right. However. 50 pixels away from the left end of the 6 . Relative positioning: The relative positioning is similar to absolute positioning.
What are the different types of search engine? Explain with its application. · Searching. This is known as indexing. the header elements in the bottom half are positioned relative to their normal positioning in the top half without CSS. consider three header elements <h1> Header 1 </h1>. The working of search engines is not this simple. An efficient indexing helps us to quickly find information on the Web. Search engines today are indexing and responding to billions of Web pages in a single day. There might be some differences in the working of different search engines. Let us now look at how all these happen. Spiders are also known as bots. 7 . we can say that we will not be able to put the most important page on top of the list from the search results. We have to note that the data needs to be encoded and then stored in a more compact form in order to save the storage space. The spider program has to scroll through many Web pages in order to create and maintain a list of useful words.2 shows the header elements without the use of relative positioning. However. The information is ready for indexing once it is compacted. The information needs to be gathered so that the search engines can provide us the relevant Websites when we search for a particular term. it has to find it. It will also not specify if the page comprises links to any other page. However. a search engine can store the word and the Uniform Resource Locator (URL) of the Web page where the word was found. Prior to listing the related information. <h2> Header 2 </h2>. · Indexing. extracting keywords from the collected Web pages and building an index. Describe the working of search engine. Do you think the working of a search engine so simple? The answer is No. Working of a Search Engine You have now learnt the meaning and origin of a search engine. A search engine uses a spider program to gather information that is available on Web pages. <h3>Header 2 </h3> and display them on the Web page. The spiders are simple programs that scan the Web pages to create a list or index of words that are found on the Websites. a search engine utilizes special software robots known as spiders. www. The top half of the figure 4. Let us now study about the working of a search engine. This process will provide us a list of Websites based on the keyword entered.google. this result in limited use of the Web page as it will not inform the user if the word was used many times or only once. Therefore.com and then in the text box provided we type the keywords of our choice and press enter key or click the search button. Notice.com or www. Search engines use the following processes in its working: · Web Crawling. and allowing users to search for matching Web pages using the keywords saved in the index. The bottom half shows the same header elements with the use of the relative positioning. and the process of creating a list or index of words by a spider is known as Web crawling.page. ANS.In order to retrieve information from the numerous Websites that exist on the WWW. Web crawling When you search for information by typing keywords in a search engine Website it gives you a list of related information. Indexing After the spider program finishes the job of looking for information on the Web pages. the search engines have to store the information such that it is useful for the users. or if the word was an important phrase on the Web page. Q5. It involves incredibly detailed processes and methodologies. web robots or automatic indexers. How do we search for a Web page using any search engine? We open the search engine Website for example. For example. all of them perform three fundamental tasks including–crawling the Web by following all possible links from any Web page.bing. The two key components responsible for indexing or making the gathered data accessible to users are as follows The information that is stored with the data Here. We will now study each of these operations in detail.
These submissions are later reviewed by the editors. OR. Types of search engine Now that you have learnt how a search engine works. Earlier Yahoo! was a human powered directory. · Hybrid or mixed search engines. As such any change made to the Website does not affect its listing. let us now study the different types of search engines. The basic idea behind a hybrid search engine is to provide the users with a combination of results including speared results and directory results. and NOT are known as Boolean operators. sub heading or in the links. the spider will update the changes in the index. This is Figure 9. Hybrid or mixed search engine: It is a combination or mixture of crawler based search engines and human powered directories. Table 9. Most of the search engines today are following this technique. It indexes the words and links present within a Website. a search engine stores the number of times the word has appeared on the Web page rather than storing only the word and the URL. The different types of search engines are: · Crawler based search engines. A query should have at least a minimum of one word. Like this the spider program moves through various areas of theWWW that are widely used and creates index of words and compresses the same to save the storage space. the word is searched for against these listings or index. We will now study more about these search engines Crawler based search engines In this type of search engines the spiders crawl through the We band create a listing or index of words. Whenever a change is made to any of the Web pages. We should also note that it takes some time when the spiders crawl through the Web pages and an index is created. For example. A particular word’s value increases when it appears in the heading. Searching It refers to the process of querying a search engine. This also affects the way your Website is listed.Boolean Operators and Its Uses Working of a Search Engine As you can observe in figure 9. Every search engine follows different formulas to allot weight to words in its index. You can also have complex queries. AND.1 a spider program starts the process of indexing on Websites that are listed on frequently used servers and on popular Web pages. Google and Yahoo are today using hybrid search engines. · Human powered directories. today it uses a crawler based search engine. Considering this. The disadvantage of human powered directories is that it can take months to get your Website reviewed unless you take up a paid inclusion program. Therefore. The index consists of a copy of all the Web pages that is found by the spider. and ultimately offer the users with more complete and relevant search results. Google calls this Universal Search. The advantage of this type of a search engine is that the multiple types of results complement each other. The only advantage of this type of a search engine is that a Website which comprises good content could be reviewed for free when compared to a poor site. Until then the Web page will not be found when you search for it using a search engine. This is possible as the spiders are always crawling through the Web pages on a regular basis.2: Result of Search on a Hybrid or Mixed Search Engine 8 . Google and Yahoo use a crawler based search engines. Human powered directories In this type of search engine there is a directory which gets information from short descriptions about the websites along with the address and title of the Web pages that are submitted by the webmasters. We should also note that when auser searches for a topic these directories look for only the descriptions that are submitted on the Website and not the entire content of the Web page.1 illustrates the use each of these Boolean operators. However. Whenever a user enters a query or a keyword using a search engine. Complex queries are built using Boolean operators that help us to refine the search. Then the compressed data is stored so that the users can access the data by querying the search engine. we can observe that.The technique in which the information is indexed Here. different lists are produced by different search engines when we search for a particular word. a search engine assigns weight to every entry.
Let us now learn why a search engine friendly Website is important. It is possible for us to find various modules that can be reused. are using the LAMP stack. Towards the right hand side of the screen you can find sponsored links. Even though Microsoft offers the ASP (Active Server Pages) extensions free of cost.2 we can see how a Google looks for the keyword java books. As you know. One more disadvantage is that it is difficult to find people who are good and qualified in developing Web applications on LAMP platform. It is possible for us to find constant updates and improvements for the LAMP stack. It offers greater performance as we use Linux. Q6. This helps organizations to develop Web applications without spending hefty amounts for its licensing. organizations fear to switch to LAMP. List the benefits and drawbacks of Lamp stack ANS: Benefits and drawbacks of LAMP stack Even though there are various commercially available software packages that provide various features in Web development. The drawbacks of LAMP stack are as follows The main disadvantages of LAMP stack is in updating the applications. and below it are results from the crawler based search engines. to update the changes. There could be confusion as to where the application is installed as the application files are not placed in the file system in a standard way. This is possible as it facilitates the administrator with the choice of running only what is required to perform a particular job. The benefits of LAMP stack are as follows: It is open source software package and thus can be got free of cost. This helps us to adapt to our companies current environments by utilizing the existing infrastructure. database servers. and also from its community. sometimes companies may have to pay for customer support for the open source products that they purchase from vendors. they charge you for their Operating System. and Integrated Development Environment (IDE). It can be installed on a wide range of platforms. whenever you have a new version released. These modules are built by a community of developers who publish the modules developed by them. many Web applications today. we have to follow the same procedure that is used in installing the applications. We can use Windows instead of Linux if we are working on Windows platform. Hence. Importance of search engine friendly website You have now learnt about the different types of search engines. However. This is because the components of LAMP stack are open source and thus we can find support from the actual developers who have worked on the project. This saves time and results in rapid development of Web applications.In figure 9. 9 . Linux scales high in performance. This is because. On top of the list we can find shopping results. or use IIS instead of Apache Web server. and stability. we can find developers and support communities that update new features and enhancements constantly. When compared to Windows. It facilitates us with an efficient hardware support such as Linux that can run on almost all servers. · It provides a greater support when compared to other commercially available software. memory management. This is because of the various benefits it provides.
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.