finalbook.pdf

Government of Kerala DEPARTMENT OF EDUCATION State Council of Educational Research and Training (SCERT); Kerala 2015  THE NATIONAL ANTHEM Jana-gana-mana adhinayaka, jaya he Bharatha-bhagya-v...

Government of Kerala DEPARTMENT OF EDUCATION State Council of Educational Research and Training (SCERT); Kerala 2015  THE NATIONAL ANTHEM Jana-gana-mana adhinayaka, jaya he Bharatha-bhagya-vidhata. Punjab-Sindh-Gujarat-Maratha Dravida-Utkala-Banga Vindhya-Himachala-Yamuna-Ganga Uchchala-Jaladhi-taranga Tava subha name jage, Tava subha asisa mage, Gahe tava jaya gatha. Jana-gana-mangala-dayaka jaya he Bharatha-bhagya-vidhata. Jaya he, jaya he, jaya he, Jaya jaya jaya, jaya he! PLEDGE India is my country. All Indians are my brothers and sisters. I love my country, and I am proud of its rich and varied heritage. I shall always strive to be worthy of it. I shall give respect to my parents, teachers and all elders and treat everyone with courtesy. I pledge my devotion to my country and my people. In their well-being and prosperity alone lies my happiness. Prepared by: State Council of Educational Research and Training (SCERT) Poojappura, Thiruvananthapuram 695012, Kerala Website : www.scertkerala.gov.in e-mail : [email protected] Phone : 0471 - 2341883, Fax : 0471 - 2341869 Typesetting and Layout : SCERT © Department of Education, Government of Kerala Dear students, Computer Science, a subject belonging to the discipline of Science and of utmost contemporary relevance, needs continuous updating. The Higher Secondary Computer Science syllabus has been revised with a view to bringing out its real spirit and dimension. The constant and remarkable developments in the field of computing as well as the endless opportunities of research in the field of Computer Science and Technology have been included. In Class XI, we started with the history of computing followed by hardware and software components, computer network and Internet. The major part of the textbook as well as the syllabus established a strong foundation to construct and enhance the problem solving and programming skills of the learner. The syllabus of Class XII gives thrust on the means of handling complex data involved in problem solving and the development of web applications. The textbook, designed in accordance with the syllabus, begins with some advanced features of C++ programming language like structures and pointers. Web technology is introduced with the theoretical background and proceeds with the design of simple web pages followed by a brief idea about both client-side and server-side scripting. The concept of database and facilities of information retrieval are included. An exclusive section about the advances in computing opens the door to the latest developments in the world of computing discipline. Considering the increase in the use of Internet, an awareness about Cyber laws is also presented to safeguard against Cyber crimes. I hope this book will meet all the requirements for stepping to levels of higher education in Computer Science and pave your way to the peak of success. Wish you all success. Dr S. Raveendran Nair Director SCERT, Kerala 1. Structures and Pointers 7 1.1 Structure 1.5 Pointer and Array 1.2 Pointer 1.6 Pointer and String 1.3 Methods of memory allocation 1.7 Pointer and Structure 1.4 Operations on pointers 2. Concepts of Object Oriented Programming 41 2.1 Programming paradigm 2.2 Basic concepts of OOP 3. Data Structures and Operations 59 3.1 Data structure 3.3 Queue 3.2 Stack 3.4 Linked list 4. Web Technology 85 4.1 Communication on the web 4.9 Essential HTML tags 4.2 Web server technologies 4.10 Some common tags 4.3 Web designing 4.11 HTML entities for reserved 4.4 Static and dynamic web pages characters 4.5 Scripts 4.12 Adding comments in HTML 4.6 Cascading Style Sheet document 4.7 Basic concepts of HTML documents 4.13 Inserting images 4.8 Creating an HTML document 5. Web Designing Using HTML 135 5.1 Lists in HTML 5.5 Dividing the browser window 5.2 Creating links 5.6 Forms in web pages 5.3 Inserting music and video 5.7 Overview of HTML 5 5.4 Creating tables in a web page 6. Client Side Scripting Using JavaScript 177 6.1 Getting started with JavaScript 6.6 Control structures in JavaScript 6.2 Creating functions in JavaScript 6.7 Built-in functions 6.3 Data types in JavaScript 6.8 Accessing values in a text box using 6.4 Variables in JavaScript JavaScript 6.5 Operators in JavaScript 6.9 Ways to add scripts to a web page 7. Web Hosting 221 7.1 Web hosting 7.3 Content Management System 7.2 Free hosting 7.4 Responsive web design Icons used in this textbook Let us do Know your progress Information box Let us practice Let us conclude  1 Structures and Pointers W e started writing C++ programs in Significant Learning Outcomes Class XI for solving problems. Almost all problems are related to After the completion of this chapter, the the processing of different types of data. Last learner year we came across only elementary data items identifies the need of user-defined such as integers, fractional numbers, characters data types and uses structures to represent grouped data. and strings. We used variables to refer to these creates structure data types and data and the variables are declared using basic accesses elements to refer to the data types of C++. We know that all data is data items. not of fundamental (basic) types; rather many uses nested structures to represent of them may be composed of elementary data data consisting of elementary data items. No programming language can provide items and grouped data items. data types for all kinds of data. So develops C++ programs using programming languages provide facility to structure data types for solving real define new data types, as desired by the users. life problems. In this chapter, we will discuss such a user- explains the concept of pointer and defined data type named structure. This uses pointer with the operators & chapter also discusses a new kind of variable and *. known as pointer. The concept of pointers is a compares the two types of memory typical feature of languages like C, C++. It allocations and uses dynamic helps to access memory locations by specifying operators new and delete. illustrates the operations on the memory addresses directly, which makes pointers and predicts the outputs. execution faster. A good understanding of this establishes the relationship concept will help us to design data structure between pointer and array. applications and system level programs. uses pointers to handle strings. Last year you might have used GNU Compiler explains the concept of self Collection (GCC) with Geany IDE or Turbo referential structures. C++ IDE for developing C++ programs.  Computer Science - XII GCC differs from Turbo C++ IDE in the structure of source code, the way of including header files, the size of int and short, etc. In this chapter the concepts are presented based on GCC. 1.1 Structures Now-a-days students, employees, professionals, etc. wear identity cards issued by institutions or organisations. Figure 1.1 shows the identity card of a student. The first column of Table 1.1 contains some of the data printed on the card. You try to fill up the second column with the appropriate C++ data types discussed in Class XI. Data C++ data type 12345 Sneha S. Raj 20/02/1997 O+ve Snehanilayam, Gandhi Nagar, Chemmanavattom, Fig.1.1: ID card of a student Pin 685 531 Table 1.1: Data and C++ data types You may use short or int for admission number (12345), char array for name (Sneha S. Raj), blood group (O +ve) and even address. Sometimes you may not be able to identify the most appropriate data types for date of birth and address. Let us consider the data 20/02/1997 and analyse the composition of this data. It is composed of three data items namely day number (10), month number (02) and year (1997). In some cases, the name of the month may be used instead of month number. Address can also be viewed as a composition of data items such as house number/name, place, district, state and PIN code. Even the entire details on the identity card can be considered as a single unit of data. Such data is known as grouped data (or aggregate data or compound data). C++ provides facility to define new data types by which such aggregate or grouped data can be represented. The data types defined by user to represent data of aggregate nature are generally known as user-defined data types. Structure is a user-defined data type of C++ to represent a collection of logically related data items, which may be of different types, under a common name. We learnt array in Class XI, to refer to a collection of data of the same type. But structure 8  1. Structures and Pointers can represent a group of different types of data under a common name. Let us discuss how a structure is defined in C++ and elements are referenced. 1.1.1 Structure definition While solving problems, the data to be processed may be of grouped type as mentioned above. We have to define a suitable structure to represent such grouped data. For that, first we have to identify the elementary data items that constitute the grouped data. Then we have to adopt the following syntax to define the structure. struct structure_tag { data_type variable1; data_type variable2;...................;...................; data_type variableN; }; In the above syntax, struct is the keyword to define a structure, structure_tag (or structure_name ) is an identifier and variable1 , variable2 , …, variableN are identifiers to represent the data items constituting the grouped data. The identifier used as the structure tag or structure name is the new user- defined data type. It has a size like any other data types and it can be used to declare variables. This data type can also be used to specify the arguments of functions and as the return type of functions. The variables specified within the pair of braces are known as elements of the structure. The data types preceded by these elements may be basic data types or user-defined data types. These data types determine the size of the structure. Now let us define a structure to represent dates of the format 20/02/1997 (as seen in the ID card). We can see that this format of date is constituted by three integers which can be represented by int data type of C++. The following is the structure definition for this format of date: struct date { int dd; int mm; int yy; }; 9  Computer Science - XII Here, date is the structure tag (structure name), and dd, mm and yy are the elements of the structure date, all of them are of int type. If we want to specify the month as a string (like January instead of 1), the definition can be modified as: struct strdate { int day; char month; // name of month is a string int year; }; While writing programs for solving problems, some of the data involved may be logically related in one way or the other. In such cases, the concept of structure data type can be utilised effectively to combine the data under a common name to represent data compactly. For example, the student details such as admission number, name, group, fee, etc. are logically related and hence a structure can be defined as follows: struct student { int adm_no; char name; char group; float fee; }; Now, try to define separate structures yourself to represent address and blood group. Blood group consists of group name and rh value. We know that the details of an employee may consist of employee code, name, gender, designation and salary. Define a suitable structure Let us do to represent these details. We have discussed the way of defining a structure type data. Can we now store data in it? No, it is simply a data type definition. Using this data type we should declare a variable to store data. 1.1.2 Variable declaration and memory allocation As in the case of basic data items, a variable is required to refer to a group of data. Once we have defined a structure data type, variable is declared using the following syntax: struct structure_tag var1, var2,..., varN; OR structure_tag var1, var2,..., varN; 10  1. Structures and Pointers In the syntax, structure_tag is the name of the structure and var1, var2,..., varN are the structure variables. Let us declare variables to store some dates using the structure date and fulldate. date dob, today; OR struct date dob, today; strdate adm_date, join_date; We know that variable declaration statement causes memory allocation as per the size of the data type. What will be the size of a structure data type? Since it is user- defined, the size depends upon the definition of the structure. The definition of date shows that its variables require 12 bytes each because it contains three int type elements (size of int in GCC is 4 bytes). The memory allocation for the variable join_date of strdate type is shown in Figure 1.2. join_date Fig. 1.2: Memory allocation for a structure variable The size of int type in GCC is 4 bytes and in Turbo IDE, it is 2 bytes. In Figure 1.2, the elements day and year are provided with 4 bytes of memory since we follow GCC. Since this much memory is not required for storing values in these elements, it is better to replace int with short. The variable join_date consists of three elements day, month and year. These elements require 4 bytes, 10 bytes and 4 bytes, respectively and hence the memory space for join_date is 18 bytes. Now you find the size of the structure student defined earlier. Also write the C++ statement to declare a variable to refer to the details of a student and draw the layout of memory allocated to this Let us do variable. A structure variable can be declared along with the definition also, as shown below: struct complex { short real; short imaginary; }c1, c2; This structure, named complex can represent complex numbers. The identifiers c1 and c2 are two structure variables, each of which can be used to refer to a 11  Computer Science - XII complex number. If we declare structure variables along with the definition, structure tag (or structure name) can be avoided. The following statement declares structure variables along with the definition. struct { int a, b, c; }eqn_1, eqn_2; There is a limitation in this type of definition cum declaration. If we want to declare variables, to define functions, or to specify arguments using this structure later in the program, it is not possible since there is no tag to refer. The above structure also shows that if the elements (or members) of the structure are of the same type, they can be specified in a single statement. Variable initialisation During the declaration of variables, they can be assigned with some values. This is true in the case of structure variables also. When we declare a structure variable, it can be initialised as follows: structure_tag variable={value1, value2,..., valueN}; For example, the details of a student can be stored in a variable during its declaration itself as shown below: student s={3452, "Vaishakh", "Science", 270.00}; The values will be assigned to the elements of structure variable s in the order of their position in the definition. So, care should be given to the order of appearance of the values. The above statement allocates 38 bytes of memory space for variable s, and assigns the values 3452, "Vaishakh", "Science" and 270.00 to the elements adm_no, name, group and fee of s, respectively. If we do not provide values for all the elements, the given values will be assigned to the elements on First Come First Served (FCFS) basis. The remaining elements will be assigned with 0 (zero) or '\0' (null character) depending on numeric or string. A structure variable can be assigned with the values of another structure variable. But both of them should be of the same structure type. The following is a valid assignment: student st = s; This statement initialises the variable st with the values available in s. Figure 1.3 shows this assignment: 12  1. Structures and Pointers s Fig. 1.3: Structure assignment While defining a structure, the elements specified in it cannot be assigned with initial values. Though the elements are specified using the syntax of variable declaration, memory is not allocated for the structure definition statement. Hence, values cannot be assigned to them. The structure definition can be considered as the blue print of a house. It shows the number of rooms, each with a specific name and size. But nothing can be stored in these rooms. The total space of the building will be the sum of the spaces of all rooms in the house. Any number of houses can be constructed based on this plan. All of them will be the same in terms of number of rooms and space, but each house will be given different name. Structure definition is the blue print and structure variables are the realisation of the blue print (similar to the construction of houses based on the blue print). Each variable can store data in its elements (similar to the placing of furniture, house-hold items and residents in rooms). 1.1.3 Accessing elements of structure We know that array is a collection of elements and these elements are accessed using the subscripts. Structure is also a collection of elements and C++ allows the accessibility to the elements individually. The period symbol (.) is provided as the operator for this purpose and it is named dot operator. The dot operator (.) connects a structure variable and its element using the following syntax: structure_variable.element_name In programs, the operations on the structure data can be expressed only by referring the elements of the structure. The following are some examples for accessing the elements: today.dd = 10; strcpy(adm_date.month, "June"); cin >> s1.adm_no; cout >s.te; tot_score=s.ce+s.pe+s.te; cout are used to express & &amp; Ampersand tags. So, when we want to display these &lt; < Less than symbols as part of the text in the web page, we must use HTML entities. > &gt; Greater than Table 4.6 shows a list of a few special &copy; © Copyright Symbol characters and their equivalent entities. ™ &trade; Trademark Symbol In order to display the text A < B & A > C in a web document, we have to ® &reg; Registered Symbol specify it in the HTML document as: Table 4.6 : List of entities and their description A &lt; B &amp; A &gt; C. 4.12 Adding comments in HTML document It is a good practice to add comments in HTML documents, especially in complex documents. Comments help us to understand the code and it increases the code readability. HTML provides comment tag to insert comments in the source code. 126  4. Web Technology Comments are not displayed in the browser window. HTML comments are placed within tag. So any content placed within tag will be treated as a comment and will be completely ignored by the browser. In Geany editor the comments are displayed in red colour. The code in Example 4.15 illustrates the use of comments and Figure 4.31 shows the resultant message. Example 4.15: To illustrate the use of comment tag Comment Tags The paragraph starts here. Comment statements are not displayed in the browser window Fig. 4.31: Comments in HTML Know your progress 1. How are special characters represented in HTML? 2. Face attribute is used with ______ tag. 3. List the attributes of tag. 4. What is the use of tag? 5. For scrolling a text, we use _______ tag. 6. What are the main attributes of tag? 7. What is the use of tag? 8. What is the normal font size in tag? 9. Name the main attributes of tag. 127  Computer Science - XII 4.13 Inserting images Images always make content presentation more attractive and communicative. Now a days, most of the websites are rich in visuals. New versions of HTML come with many web development features, but the code required for adding images is simple. HTML provides a tag to insert images in HTML pages. The following is the simple way of using this tag: The tag is an empty tag and it has many attributes. Src is the main attribute and it specifies the file name of the image to be inserted. We can use JPEG, PNG or GIF image files based on our needs, but make sure that the correct filename with the extension is specified using Src attribute. If the image file is not in the current working directory, we have to specify the path of the file or the URL where the file is available. Setting space for the image We can set the space in the web page for the image by specifying the values for the Width and Height attributes. The values are given in terms of either pixels or percentage of its actual size. If these attributes are not specified, the browser will display the image in its actual size. Now let us discuss how to set space between images. We know that there are two types of space between the images when they are placed in a window - vertical space and horizontal space. HTML offers two attributes Vspace and Hspace, for providing vertical spacing and horizontal spacing between the images in the web page. The HTML code in Example 4.16 demonstrates the two types of spacing discussed above and Figure 4.32 shows the web page obtained from the code. Example 4.16: To provide different types of spacing for images Inserting Images Inserting vertical and horizontal spacing between images Here the images are placed with Vspace and Hspace attributes 128  4. Web Technology Figure 4.32 shows that the images are placed within the given width and height, and the distance between the images is according to the specified horizontal and vertical spacing. Now let us discuss another important attribute, Align for tag, which aligns the image with respect to the base Fig. 4.32: Images within the specified size and with line of the text. The possible horizontal and vertical spaces between them. values for this attribute are the following: Bottom : Aligns the bottom of the image with the baseline of the text and this is the default setting. Middle : Aligns the middle of the image (vertically) with the baseline of the text. Top : Aligns the image with the top of the text. Let us see the effect of these values for the attribute Align. Example 4.17 and Figure 4.33 demonstrate this. Example 4.17: To provide different alignments for an image Alignment of Images Alignment of Images This Image is aligned at the bottom 129  Computer Science - XII This Image is aligned at the Middle This Image is aligned at the Top There are some more values for the Align attribute of tag. They are left and right, which align the image the left and right sides of the browser window respectively. Fig. 4.33: Different alignment of images with the text Observe Figure 4.34, in which the left and right alignments of images in the browser window are shown. Write the HTML document for this web page. Let us do Fig. 4.34: Images aligned left and right of browser window Setting border around an image Suppose we want to give a border to an image inserted in a web page. It is possible with the Border attribute of tag. The thickness of the border can be set by giving appropriate value to this attribute. The HTML code in Example 4.18 and the corresponding web page shown in Figure 4.35 give the effect of border attribute. Example 4.18: To give a border to an image Inserting Images Inserting Border to Images Here is an image with Border attribute 130  Computer Science - XII Know your progress 1. To insert images in an HTML document _______ tag is used. 2. _______ is the main attribute of tag. 3. What is the use of Alt attribute of tag? 4. Name the attributes that are used to display an image in a particular size. 5. Which are the attributes that provides horizontal and vertical spaces between two images? Let us conclude The security of communication over the Internet is a determining factor in the success of the Internet. The security of transactions over the Internet is implemented using HTTPS and digital certificates. Internet infrastructure consists of technologies like web server, software ports and DNS servers used to store and communicate data. Web servers consist of a single/several websites. Websites consists of web pages. We can design web pages either by writing HTML code or using web designing softwares. Webpages can be classified as static and dynamic. Dynamic web pages can be developed using scripts. We can perform client side validations using client side scripting languages like, JavaScript, VBScript, etc. Server side scripts like PHP, ASP, etc. are used to create pages dynamically in the web server. Cascading Style Sheet (CSS) can be used to provide a uniform style to the entire website. The basic concepts of HTML language and web page designing are discussed here. We are now familiar with different tags and their important attributes. We know that some of the tags are container tags, but some others are empty tags. We can make a web page with neatly formatted text using a variety of formatting tags. Different kinds of listing are discussed to make the text more presentable. The beauty of the web pages can be enhanced by including marquees, images, audio and video. We have also discussed the importance of hyper linking and have been familiarised with various kinds of hyperlinks. We should have a sound knowledge of the concepts discussed in this chapter and an excellent practical experience in creating HTML documents, so that we can easily internalise the concepts in the following chapters. Also, we will be able to design beautiful web sites and develop web applications ourselves. 132  4. Web Technology Let us practice 1. Wrtie an HTML code for a web page of Kerala with the following details and features: A heading followed by a paragraph of 5 sentences about Kerala using text formatting tags and attributes. Background of the page needs an image of a scenary. 2. Wrtie an HTML code for a web page for your school with the following details and features: A heading followed by a paragraph of 3 sentences about the district using text formatting tags and attributes. Provide a colour to the background of the page. Include an image of the school. 3. Wrtie an HTML code for a web page for your school with the following details and features: A heading followed by a paragraph of 3 sentences about the district using text formatting tags and attributes. Give the postal address of the school. Include a marquee that "Admission for the new accademic year commences on 10th May" 4. Wrtie an HTML code for a web page to show the lyrics of our National Anthem with the following details and features: A heading with a different font characteristics. An image of our national flag 123456789012345678901234567890121234567890123456789012345678901212345678 123456789012345678901234567890121234567890123456789012345678901212345678 123456789012345678901234567890121234567890123456789012345678901212345678 Let us assess 123456789012345678901234567890121234567890123456789012345678901212345678 123456789012345678901234567890121234567890123456789012345678901212345678 123456789012345678901234567890121234567890123456789012345678901212345678 1. What is the role of routers in transporting data over the Internet? 2. The social media websites developed their own protocol for communicating over the Internet. How is this possible when Internet uses TCP/IP protocol? 3. The user name and password of an e-mail account has to be sent securely over the Internet. a. Name the technology used to send the data to the server. b. How does this technology support secure data communication? 4. What is the role of payment gateway in online purchases? 5. ABC Engineering College has about 1000 computers connected to the Internet, in its campus. What is the advantage of having a local DNS server in the college's intranet? 133  Computer Science - XII 6. Write an example of a web server operating system and a web server package. 7. What is the use of software ports in a web server? 8. The port used for HTTP is ________. 9. Suppose you are browsing the website www.prdkerala.org. Explain how the DNS resolves the IP address. 10. What are scripts? Explain the different scripting languages. 11. Consider the home page of your school website and the web page that displays the results of class XI examinations. a. Compare the difference between the two web pages based on their creation. b. Write the technologies that can be used for developing these web pages. 12. a. The file name extension for a JavaScript file is _________. b. Write two popular uses of JavaScript in a web page. 13. What is Ajax? What is its use? 14. Your friend Ravi wishes to create a website that displays the marks of the students in your class in each examination. a. Suggest a technology to implement this. b. Justify your suggestion. 15. Consider that Manoj is developing a website using PHP that uses a database in MySQL. What are the requirements to implement this if he is using Linux web hosting? 16. "Almost all websites today use CSS for its development." What are the advantages of using CSS in web sites? 17. Who developed HTML? 18. In HTML, there are mainly two sections. Can you name them? 19. If you analyse web pages you can see different colours for links, visited links, background etc. Expalin how this can be done in HTML, with examples. 20. Compare container and empty tags in HTML with examples. 21. The default colour of the attribute Alink is __________. 22. The default color of the attribute Vlink is __________. 23. Classify the following HTML related words: BR, IMG, ALIGN, FONT, FACE 24. Name the tag which has Noshade attribute. 25. Write the main attribute of tag to insert an image file in the webpage. 26. Mention the purpose of Alt atribute in tag. 27. The default alignment of an image obtained by using tag is ________. 28. List the main attributes of tag. 134  Web Designing using 5 HTML I n the previous chapter, we studied the basic Significant Learning Outcomes tags of HTML. We have also learnt to create After the completion of this chapter, the some simple web pages using those tags and learner their attributes. But we are familiar with websites uses different list tags to present the that provide much more facilities and utilities. content effectively in web pages. There are websites that contain different types identifies the relevance of hyper linking and uses tag for different of lists. Linking between web pages is the types of linking. backbone of World Wide Web. The different provides audio and video in web types of linking are discussed in this chapter. pages with the help of tag. You might have come across certain information produces inline sounds and videos in tabular form. Sometimes you see more web in web pages. lists and explains the tag and pages in the same browser window. We are also attributes for creating a table. familiar with websites through which we submit uses the tags associated with the register number to obtain the mark list of tag to design tables with examinations, apply for admission and different characteristics. scholarships, pay the bills of electricity and constructs different tables using the tags and attributes. water consumption etc. How can we create identifies the importance of frames tables in web pages to present information? Can in the web page. we place more than one web page in a single creates frames using appropriate browser window? If yes, how? How are web tags to display different web pages in the same browser window. pages created to accept data from the user to identifies the concept of Forms in the provide information? HTML provides all these web page. facilities for web developers. In this chapter, we explains various components in a discuss the HTML tags required to answer all Form and creates them using proper these questions. tags and attributes. designs web pages with tables, frames and forms.  Computer Science - XII 5.1 Lists in HTML While presenting information, the facility of listing can make it more communicative. Lists are of different types. We are familiar with numbered lists and bulleted lists. HTML offers several mechanisms for specifying lists of information. All lists must contain one or more list elements. There are three kinds of lists in HTML - unordered lists, ordered lists and definition lists. 5.1.1 Unordered lists Unordered lists or bulleted lists display a bullet or other graphic in front of each item in the list. We can create an unordered list with the tag pair and. Each item in the list is presented by using the tag pair and. Unordered lists are used when a set of items can be placed in any order. The code in Example 5.1 presents some hardware components of a computer in bulleted list. The corresponding web page is shown in Figure5.1. Example 5.1: To create an unordered list Unordered Lists Unordered List While buying a computer, we have to consider many items. Here are some important items to consider. RAM Hard Disk Mother Board Processor We can customise unordered lists by setting the Type attribute to three different values: Disc (default value), Square and Circle, which set the type of bullet that appears before each list item. The following code creates a list as shown Fig.5.1: Web page containing unordered list in Figure 5.2. 136  5. Web Designing using HTML RAM Hard Disk Mother Board Processor 5.1.2 Ordered lists Ordered lists present the items in some numerical or alphabetical order. HTML Fig.5.2: Unordered list with square bullet provides the tag pair and to create an ordered list. The items in the ordered list are presented by tag in element. The ordered list is also called numbered list. Ordered lists or numbered lists are used to display a list of items that need to be placed in a specific order. Example 5.2 is a code that presents an ordered list of items. The corresponding web page is shown in Figure 5.3. Example 5.2: To create an ordered list Ordered Lists Ordered List Consider the memory devices of a computer. Then according to the speed of data processing, we can arrange the memory devices as follows. Registers Cache RAM Hard Disk We can see that the list in Figure 5.3 is numbered from one through four. There are other numbering styles for presenting the list Fig.5.3: Web page containing ordered list 137  Computer Science - XII items. We can customise the numbering system used in ordered list by using the Type attribute, which can set with the values as detailed below: 1 Default numbering scheme (1, 2, 3,...) A Upper case letters (A, B, C,...) a Lower case letters (a, b, c,...) I Large roman numerals (I, II, III,...) i Small roman numerals (i, ii, iii,...) An ordered list, by default, starts with the first number in the series used in the list. That is, the starting number will be any one from 1, A, a, I and i. If we want to start with any other number in the series, then the Start attribute of tag enables us to change the beginning value. To start numbering a list at 5, for example, we may write:. Thus, the numbering starts from 5 and then proceeds with 6, 7, 8,... and so on. The Start attribute sets the starting value of the item (it must be an integer) and the Type attribute sets the numbering style. For example, the following ordered list starts numbering from V and continues with VI, VII,... and so on. The output of this code is shown in Figure 5.4. Ordered List with Type attribute Registers Cache RAM Hard Disk 5.1.3 Definition lists A definition list is a list of terms and the corresponding definitions. The definition Fig.5.4: Ordered list with different numbering text is typically indented with respect to style and starting value the term. No bullet symbol or number is provided for the list items. The tag pair and enclose the definition lists. Each term in the list is created using the tag and the tag supplies the definition of the term. The code in Example 5.3 creates a web page to present the definitions of some terms related to security aspects of Internet. Figure 5.5 shows the resultant web page. 138  5. Web Designing using HTML Example 5.3: To create a definition list Definition List Definition List Today cyber security has an immense role in the field of Internet. The following are some of the threats that affect a computer network. Spam : Spam is the unsolicited e-mail sent in the hope of increasing the sales of some product, or just for annoying people. Phishing : Phishing is an attempt to acquire information such as usernames, passwords and credit card details by posting as the original website, mostly that of banks and other financial institutions. Fig. 5.5: Web page containing a definition list In Figure 5.5, we can see that each annotation is indented under the corresponding term. Also note the left and right margins in the window. 139  Computer Science - XII 5.1.4 Nested lists A list of items can be given under each item of another list. It is known as nesting of lists. This is possible in many ways. For example, we can insert an unordered list into another unordered list, an unordered list into an ordered list, an ordered list inside an unordered list, etc. The code given in Example 5.4 demonstrates the concept of nested list and Figure 5.6 shows the resultant web page. Example 5.4: To create a nested list Nested Lists Nested List Consider the devices of a computer. We can list some of them as follows. Input Devices Keyboard Mouse Scanner MICR Output Devices Printers Monitors Speakers Memory Devices Hard Disc CD Rom Flash Drive Fig.5.6: Classification of devices using nested list In Example 5.4, three sets of unordered lists are nested into an ordered list. 140  5. Web Designing using HTML Know your progress 1. What are the different types of lists in HTML? 2. Suppose your teacher asks you to display the list of students in your class using HTML document. Which type of list will you prefer? Why? 3. What are the common attributes of and tags? 4. What is the difference between tag and tag? 5. Name the tags used in the definition list. 5.2 Creating links A hyperlink is an element, a text, or an image in a web page that we can click on, and move to another document or another section of the same document. Hyperlinks allow visitors to navigate between websites by clicking on words, phrases and images. HTML provides the ability to hyperlink text, image etc. to another document or section of a document. Hyperlink is often referred to as links. In HTML, the tag provides the facility to give hyperlinks. This tag is called anchor tag and anything given between the tag pair and becomes part of the link and a user can click that part to reach the linked document. Href is the main attribute of tag and it means hyper reference. The value of this attribute is the URL of the document (address of the web page/site) to which hyperlink is provided. For example, consider the following code segment: Higher Secondary This creates the target of the hyperlink to the website http:// www.dhsekerala.gov.in. At the time the user clicks the link, the browser opens the home page of this URL. The text inside the tag pair and will appear underlined and in different colour. The HTML code in Example 5.5 and Figure 5.7 show how hyperlinks are created in web pages. Example 5.5: To create a hyperlink in a web page Anchor Tag Hyperlinks 141  Computer Science - XII Now this will create a hyperlink to the website of Higher Secondary Department. Kindly click on the words Higher Secondary Education. As shown in Figure 5.7, the hyperlinked text is in underlined format (Higher Secondary Education) and in a different colour. Hyperlinks are considered either "internal" or "external" depending on their target. Fig.5.7: Web page containing hyperlink 5.2.1 Internal linking A link to a particular section of the same document is known as internal linking. The attribute Name of tag is required for this. We have to give a name to identify the section to be opened by the browser. This name is used with the Name attribute to establish the link. For example, suppose we have three paragraphs on the subject "Environment Pollution". Let it be the Introduction section, Air pollution section, and Water pollution section. We refer to these sections by giving different values to the Name attribute of tag. INTRODUCTION Air Pollution Now, we can refer to these sections by giving the values of Href attribute as #Introduction, #Air (the # symbol is essential) from another section of the document as follows: Go to Introduction Air pollution Let us create a web page incorporating the concepts of internal linking. Example 5.6 is an HTML code that has two internal links. Figure 5.8 shows the resultant page of this code. 142  5. Web Designing using HTML Example 5.6: To create a web page containing internal links Internal Linking ENVIRONMENTAL POLLUTION INTRODUCTION Environment pollution is a wide-reaching problem and it is likely to affect the health of human population.Here we discuss the environment pollution in the perspective of air pollution , water pollution and land/soil waste pollution. Studies find that these kinds of pollutions are not only seriously affecting humans but also animals and plants. Air Pollution The air we breathe is an essential ingredient for our health and wellbeing. Unfortunately polluted air is common throughout the world, especially in developed countries. Water pollution The water we drink is an essential ingredient for our health and wellbeing. Unfortunately polluted water and air are common throughout the world.Water pollution is caused by the discharge of industrial effluents, sewage water and agricultural or household waste. Go to Introduction On clicking the hyperlink air pollution and water pollution on the web page shown in Figure 5.8, we get that particular section of the document as shown in Figure 5.9. Fig. 5.8: Web page containing internal hyperlinks 143  Computer Science - XII Similarly, when we click on the link Go to Introduction at the bottom of the page shown in Figure 5.9, the introduction section will be displayed on the window. 5.2.2 External linking The link from one web page to another web page is known as external linking. It is made Fig. 5.9: Hyperlinked section of a page in the browser possible by providing the URL of the external file in the Href attribute of tag of the current page. The procedure for external linking is illustrated in the beginning of Section 5.2. 5.2.3 Concept of URL URL stands for Uniform Resource Locator, and it means the web address. In fact, there are two types of URLs - relative URL and absolute URL. The referencing is an absolute URL, because it is referring to a specific URL. On the other hand, is relative reference. Here we give the file name, 'image.html' as the URL, and it is a relative URL, relative to the current document. If the URL of the current web page document is D:\HTML\hyperlink.html, the web browser knows that the hyperlink points to the file image.html in the directory D:\HTML itself. 5.2.4 Creating graphical hyperlinks In the previous sections, we gave hyperlinks to texts. We can make hyperlinks to images also using tag inside the tag. The HTML code given in Example 5.7 and Figure 5.10 show a web page containing graphical hyperlink. Example 5.7: To create a web page containing graphical hyperlink Graphical Hyperlink Graphical Hyperlink Here is the image with Graphical hyperlink 144  5. Web Designing using HTML. We can click over this image and the home page of linked site, wikipedia.org will open. Suppose you move the mouse pointer upon the image of the wikipedia logo in the web page, the mouse pointer will change to the hand symbol. This indicates that, this image is a hyperlink. When we click on this image, then the corresponding web page www.wikipedia.org will be Fig. 5.10: Web page containing graphical hyperlink opened. 5.2.5 Creating e-mail linking We can create an e-mail hyperlink to a web page using the hyperlink protocol mailto:. Let us see the code in Example 5.8 and the web page shown in Figure 5.11 to understand the concept of e-mail hyper linking. Example 5.8: To create a web page containing e-mail hyperlink e-mail Linking e-mail linking Now we can create an e-mail hyperlink to SCERT in the following way. Kindly click on the word SCERT Kerala. As shown in Figure 5.11, the web contains a link SCERT. If we click on it, e-mail program will be opened with an empty message box addressed to the mail address [email protected]. Fig. 5.11: Web page containing e-mail hyperlink 145  Computer Science - XII 5.3 Inserting music and video Nowadays, web pages are enriched not only with text and images, but also with plenty of music, video and other multimedia resources. Let us have a basic idea about the inclusion of such resources in web pages. There are two ways of handling multimedia in a web browser. One is as inline and the other is as external data. The inline refers to files and data that are handled as part of the page. These files play the music or video when the page is visible in the browser window. We can also link a web page to external multimedia files with extensions.jpg,.gif,.avi,.png,.tiff,.mp3,.mp4, etc. The easiest way to add music or video to the web page is with a special HTML tag, called. This tag includes the controls of the multimedia automatically in the browser window. In case, the browser does not support the tag, then we can use tag. The content within this tag pair will be displayed, if the tag is not supported by the browser. The main attribute of the tag is Src, which specifies the URL of the music or video files to be included. The other attributes are Height, Width, Align, Alt, etc. The values of these attributes are familiar to us. One more important attribute of tag is Hidden which indicates whether the embedded component should be made visible or not. It is done by setting the value to True (by default) or False. The code in Example 5.9 creates a web page that includes an audio link. Figure 5.12 shows the corresponding web page. Example 5.9: To create a web page containing audio link Embed Tag Adding Music and Videos Here is a tag EMBED with the Multimedia features. 146  5. Web Designing using HTML When the HTML document in Example 5.9 is opened, the webpage will play the music that we embedded along with the document. The audio controls like play/ pause, volume, etc. will also be displayed on the web page. Similarly we can add movies in a webpage by using the tag and its attribute Src. The code in Example 5.10 and the resultant web page shown in Figure 5.13 illustrate this Fig. 5.12: Web page containing audio link linking. Example 5.10: To create a web page containing video link Embed Tag Adding Music and Videos Here is a tag EMBED with the Multimedia features. When we open this page, the video starts to play. Here again, we can control the different properties of the audio and video, such as volume, pause, full screen mode, etc. We can also include audios and videos from other web pages or sites by linking them to our pages. As mentioned earlier, music can be played in the background while the page is viewed. This kind of audio inline is achieved by the tag. The code in Example 5.11 illustrate Fig. 5.13: Web page with video the use of this tag. 147  Computer Science - XII Example 5.11: To illustrate the use of tag Background Music Adding Background Music Here is a tag BGSOUND which helps us to play background music in our web page. We can adjust the volume control by using the Volume attribute of to make the music softer or harder. Note that while creating HTML documents that include external files in Src and Href attributes, the correct path should be provided. If you try out the codes given in the examples, you have to make necessary modifications in these attributes. The attribute Loop determines the duration of play. The value Infinite causes the music play as long as the page is in view. 5.4 Creating tables in a web page Sometimes, presenting a lot of information in a structured way is essential, especially in websites. Suppose we need to compare the data collected from a hospital for the period from 2012 to 2014, which states the number of newly diagnosed cancer patients among regular smokers, pan users and alcohol consumers. It can be presented in a tabular form as shown in Table 5.1. NEWLY DIAGNOSED CANCER PATIENTS IN THE HOSPITAL FOR THE LAST 3 YEARS Year 2012 2013 2014 Smokers 129 140 143 Pan users 54 56 49 Alcohol users 74 68 77 Other cases 95 93 92 Table 5.1: Cancer patients diagnosed in a hospital As we know, a table is a structured element that consists of rows and columns of cells. We can place any kind of content like text, image, and even other tables within these cells.In HTML, tag is used to create tables. This tag needs the support of some other tags like , and for constructing tables. Let us discuss these tags in the following sections. 148  5. Web Designing using HTML 5.4.1 tag tag is a container tag. The whole content of the table should be enclosed within the tag pair and. This tag has many attributes to improve the general layout of the table. Some of the main attributes are listed below: 1. Border: This attribute specifies the thickness of the border line around the table. To draw the border of the table we have to specify a non-zero value to Border attribute in pixels. A border value of zero produces a table without border. 2. Bordercolor: It is used to assign colour to the table border. 3. Align: The position of the table inside the browser window is determined by Align attribute. The possible values are left (by default), right or center. 4. Bgcolor: We can change the background colour of the table using this attribute. 5. Background: It is used to assign a background image for a table. To set the background, specify the pathname of the image as value of this attribute. For example, sets the background of a table with the image in the file flower.jpg stored in the folder images in the current drive. When both Bgcolor and Background are specified, the Background will override Bgcolor. 6. Cellspacing: Table cells have space in between them. We can either increase or decrease the space between cells. The Cellspacing attribute determines the space to be left between cells. The value is given in number of pixels. 7. Cellpadding: There is a space between the content and cell border. We can increase or decrease the space between cell border and content. The Cellpadding attribute specifies the space in between the cell border and cell content. The value is given in number of pixels. 8. Width and Height: We can set a table width and height using Width and Height attributes. We can specify table width or height in terms of pixels or in terms of percentage of browser window. 9. Frame: This attribute with one of the values given in Table 5.2 indicates how table borders are displayed. Value Description Void Display no borders Above Display a border on the top of the table only Below Display a border on the bottom of the table only 149  Computer Science - XII Value Description Hsides Display borders on the horizontal sides (top and bottom) only lhs or rhs Display the border only the left side or the right side Vsides Display borders on the vertical sides (right and left) only box or border Display borders on all sides of the table (It is the default value) Table 5.2: Values of Frame attribute 10. Rules: We can use the Rules attribute to control what rules (borders between cells) are displayed in a table. Table 5.3 shows the values of Rules attribute. Value Description none Display no rules cols Display rules between columns only rows Display rules between rows only groups Display rules between row groups and column groups only all Rules will appear between all rows and columns Table 5.3:Values of Rules attribute Now let us discuss some other tags associated with tag. 5.4.2 tag The rows in a table are created using tag. It is a container tag. The whole row is enclosed within the tag pair and. A tag always comes inside the tag. A row itself is a collection of cells. A cell is the smallest component of a table. There are two types of cells - heading cells and data cells. As seen in Table 5.1, the values given in red colour are of heading type. The values given in blue are just data cells. 5.4.3 tag tag is used to define heading cells. It is also a container tag. The heading data should be enclosed between and tags. The heading cells are displayed in bold face and in centred form. tag always comes inside the tag. 5.4.4 tag tag is similar to tag and is used to display data cells. It is also a container tag. The data is given in between and tags. Similar to tag, tag is also placed within the tag. The code given in Example 5.12 creates a simple table and Figure 5.14 shows the resultant web page. 150  5. Web Designing using HTML Example 5.12: To create a web page containing a simple table Html Tables Roll No Name 1 Aliya 2 Arun Fig. 5.14: Web page containing a simple table with two columns Now, let us create the following table with Year 2012 - 14 some of the attributes discussed above. Smokers 412 Pan users 159 The code given in Example 5.13 can create a Alcohol users 219 web page as shown in Figure 5.15. Other cases 280 Example 5.13: To create a web page containing a table with border and colour Hospital Table Year 2012-14 151  Computer Science - XII Smokers 412 Pan users 159 Alcohol users 219 Other cases 280 In Example 5.13, we used tags within all tag pairs, which make the first column of the table similar to header column as shown in Figure 5.15. Fig. 5.15: Table using Cellspacing and Attributes of tag Cellpadding The characteristics of a row can be changed using the attributes of tag. 1. Align: This attribute specifies the horizontal alignment of the text in a cell in that particular row. This can take the values left, right or center. The default is left for data and center for headings (see Figure 5.15). 2. Valign: We can specify the vertical alignment of the content in a cell of any row using Valign. The possible values are top, middle, bottom or baseline. Baseline vertical alignment aligns the baseline of the text across the cells in the row. 3. Bgcolor: This attribute gives background colour to a particular row. Usually this helps in highlighting a row. The following code segment is the modified part of the code given in Example 5.13. It modifies the third row of the table shown in Figure 5.15 with a background colour, and horizontal and vertical alignments. 152  5. Web Designing using HTML Pan users 159 The modified web page is shown in Figure 5.16. Attributes of and tags Most of the attributes of and tags are common, as both these tags are used for creating table cells. Let us discuss some of the main attributes. 1. Align: It specifies the horizontal alignment of the content within a cell. It can take the values Fig. 5.16: Table with modified row left, right or center. The default value is using Bgcolor, Align and Valign center for and left for. 2. Valign: It specifies the vertical alignment of the content within a cell. It can take a value top, bottom, middle or baseline. 3. Bgcolor: We can set background colour for any cell using this attribute. The tags , , / all have Bgcolor attribute. If Bgcolor attribute is set for all these tags, the cell will take the colour assigned to this attribute in / tag. 4. Colspan: Usually a cell spans over a single column, but sometimes we may need columns occupying more than one cell. Colspan value defines the number of columns occupied by that particular cell. For example, makes the cell span over three columns. 5. Rowspan: Similar to Colspan, Rowspan attribute specifies the number of rows to be spanned by the cell. The default cell span is single row, but we can make it span multiple rows by setting Rowspan attribute a numeric value greater than one. For example, makes the cell span over four rows. Let us create a web page with a simple table to illustrate the effect of the attributes discussed above. The code given in Example 5.14 shows the use of these attributes and Figure 5.17 shows the corresponding web page. Example 5.14: To create a table to demonstrate Colspan and Rowspan Students Registration 153  Computer Science - XII No. of Registered Students Year 2014 75 2015 88 Now, let us create a web page to display the details of cancer patients as shown in Table 5.1. The code given in Example 5.15 can design a table as shown in Figure 5.18. Fig. 5.17: Table with row span and column span Example 5.15: To create a table to show the data of cancer patients CompleteTable Number of cancer patients reported at the hospital Year 2012 2013 2014 Cancer Origin Smokers 129 154  5. Web Designing using HTML 140 143 Pan users 54 56 59 Alcohol users 74 68 77 Other cases 95 93 92 TOTAL Patients 352 357 371 Fig. 5.18: Web page containing a table of cancer patients Bgcolor, Rowspan, Colspan, Align and Valign 155  Computer Science - XII Try to create a table containing the number of students studying different second languages available in your school. The table should provide details of each class of your higher secondary section. Let us do 5.4.5 Table caption with tag We can provide a heading to a table using the tag. It provides an easy method to add descriptive text to a table as its caption. Suppose we want to modify the table shown in Figure 5.19 with a caption. We can modify the code section before the first tag in Example 5.15 with following code segment: Number of new cancer patients reported at the hospital during 2012-14 The modified HTML code will produce a table as shown in Figure 5.19. Fig. 5.19: Modified table with a caption Know your progress 1. Name any two associated tags of tag. 2. Choose the odd one out: a. TABLE b. TR c. TH d. COLSPAN 3. Differentiate between and. 4. tag is an empty tag. State whether this statement is true or false. 5. Give any two attributes of tag. 156  5. Web Designing using HTML 5.5 Dividing the browser window Sometimes we need to include more than one webpage inside a single browser window. The browser window can be divided into two or more panes to accommodate different pages simultaneously. HTML provides a facility called frameset to partition the browser window into different sections. Each section accommodates different HTML pages. Each individual section created by a frameset is called a frame. Figure 5.20 shows a simple frameset consisting of three frames. To create a frameset, we need and tags. Fig. 5.20: A simple frameset with three frames 5.5.1 tag is a container tag for partitioning the browser window into different frame sections. The frames are defined within the tag pair and. The main attributes are: 1. Cols: This attribute determines the number of vertical frames in the frameset page and its dimensions. The column width can be given either in percentage of total width or in number of pixels. For example, will create three vertical frames. The first frame will occupy 30% of the total window width, the next will take 500 pixels space, and the asterisk(*) symbol given at the end denotes the remaining space which is given to the third frame. 2. Rows: Similar to Cols, Rows attribute defines the number and dimension of horizontal frames. 3. Border: We can specify the thickness of border for the frames by using Border attribute. Here the value is given in pixels. 4. Bordercolor: We can specify border colour by assigning a colour to this attribute. 5.5.2 tag tag is an empty tag and it defines the frames inside the. For each division inside the tag, we should have a corresponding tag. tag always comes with Src attribute which specifies the HTML page to be loaded in the frame. The main attributes related to tag are: 157  Computer Science - XII 1. Src: As we have already discussed, Src specifies the URL of the document to be loaded in the frame. For example, loads the page school.html in a particular frame. 2. Scrolling: When the content inside a frame exceeds the frame size, a scrollbar appears depending upon the value of the Scrolling attribute. It can take values Yes, No or Auto. Auto is the default value and it displays scroll bars if the frame content exceeds the normal display area. 3. Noresize: It is used to prevent users from resizing the border of a specific frame by dragging on it. Just giving Noresize prohibits resizing the frame window. For example,. 4. Marginwidth and Marginheight: We can set horizontal and vertical margins to the frame by using Marginwidth and Marginheight, respectively. The values are given in pixels. 5. Name: It gives a name to a frame. This particular frame can be referenced using this name later in the code. The following code can create the frameset shown in Figure 5.20. It is assumed that the three HTML pages sampleframe1.html, sampleframe2.html and sampleframe3.html are already created as in Figure 5.20. A simple Frameset 5.5.3 Targeting frames In a frameset page, we can provide hyperlink in any frame and the linked page can be targeted to any other frame. When we click on the link in a frame, the corresponding page is opened within another frame in the frameset. For this, first we have to allot a name for the destination frame using its Name attribute. Then we can refer the named frame using Target attribute of the link to be displayed. Create three HTML files bio.html, poem.html and fiction.html to show a list of books belonging to biography, poetry and fiction, respectively. Let us do 158  5. Web Designing using HTML Now let us create a web page with two frames - one for showing the links for these files and the other for opening the respective web pages. When a user clicks on any one of the three links available in one frame, the associated file will open in the other frame. Once you have created the three files mentioned above, the two HTML codes given in Example 5.16 can satisfy our need. Example 5.16: To illustrate the concept of targeting frames Save the following code in a file main.html Left Frame Select the option Biography Poetry Fiction Now create a file to store the following code: Targeting Frames When the above document is executed, a web page with two frames will be opened. The first column of the browser window will show the main.html and the second column will be blank. Note that Src attribute is not specified for that frame, but a name right_frame is assigned. If the first link (biography) is selected, the file bio.html will be opened in the second Fig. 5.21 : Web page with target frame frame as shown in Figure 5.21. It is 159  5. Web Designing using HTML 2. The second row is left free. Now we will divide it into two frames vertically. So, instead of a second tag, insert another opening tag as shown below: This code will divide the second row into two columns. Now, we can add two tags within the inner frameset and complete the HTML code as given in Example 5.17. The resultant web page is shown in Figure 5.23. It is assumed that the three HTML pages are already created as in Figure 5.23. Example 5.17: To implement the concept of nested frameset nesting frames 5.5.5 tag Earlier browsers did not support frames. In such a situation, the browser is expected to respond to the user in some way or the other. The tag pair and is used to display some text content in the window if the browser is unable to support frames. The following code illustrates the use of tag. Fig. 5.23: Nested framesets A simple Frameset 161  Computer Science - XII Your browser doesnot support frames. Click here... Here, if the browser does not support then a message "Click here…" will be displayed with an alternate link to the file index.html. Know your progress 1. divides the frame into ____ sections. 2. List any three attributes of tag. 3. What is nested frameset? 4. What is the use of tag? 5. No section is needed for frameset page. Say TRUE or FALSE. 5.6 Forms in web pages HTML Forms are required when we have to collect some data from the webpage viewer for processing. For example, we use www.hscap.kerala.gov.in for the admission to Class XI in Kerala. We enter information such as name, SSLC Register Number, grades, choice of course and school, etc. in this web page. It is an implementation of HTML Form. A Form will take input from the web page viewer and then it will post the data to a back-end application such as Common Gateway Interface (CGI), Active Server Pages (ASP), PHP, etc. for processing. We will study about these technologies in the next chapter. A form consists of two elements: a container and any number of Form controls within that container. There are various Form controls like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. 162  5. Web Designing using HTML 5.6.1 tag A tag provides a container for creating a Form. An HTML Form starts with and ends with tag. A web browser can only gather information through Forms. We must provide some back-end application to handle (save, modify, etc.) the data collected. We use Form handlers like CGI, JavaScript or PHP script for that purpose. All of the input elements associated with a single Form are processed by the same Form handler. A Form handler is a program on the web server that manages the data sent through the Form. The form handler is specified as the value for the Action attribute of tag. The concept of server and other associated technologies will be discussed in the next chapter. Most frequently used attributes of are: 1. Action: It specifies the URL of the Form handler, which is ready to process the received data. 2. Method: It mentions the method used to upload data. The most frequently used Methods are Get and Post. 3. Target: It specifies the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent, etc. The main values of Target attribute are given in Table 5.4. Value Description _blank Opens the linked document in a new browser window _self Opens the linked document in the same frame as the link _parent Opens the linked document in the parent frameset _top Opens the linked document in the main browser window, replacing any frame present name Opens the linked document in the window with the specified name Table 5.4: Values for Target attribute A common use for JavaScript (or any client side scripting language) is to verify that users have filled in all the required fields in a Form and/ or to check whether the input data is valid or not, before the browser actually submits the Form to the form handler on the web server. Form controls There are different types of Form controls that we can use to collect data using HTML Form. These controls include Text box, Password, Check Box, Radio Button, 163  Computer Science - XII Text Area, Select Box, Submit and Reset Button.We can create most of these controls in any HTML Form using tag. 5.6.2 tag The visible part of a Form is a set of controls to accept the input from the viewers. Different types of input can be selected based on the nature of input. The tag is an empty tag that can be used to make different types of controls such as Text Box, Radio Button, Submit Button etc. The Type attribute determines the type of control created by this tag. Attributes of tag 1. Type: This attribute determines the control type created by the tag. The main values of Type are given in Table 5.5. Value Description text creates a text box password same as text box. But here characters are represented by coded symbols such as asterisk. checkbox creates a checkbox where user can enter Yes or No values (check or uncheck). radio similar to checkbox but is used to select a single value from a group of values. When multiple radio buttons are assigned with the same value for Name attribute, users can select only one button at a time. When the user changes the selection, the one that is already selected becomes deselected. reset a special button used to clear all the entries made in the form and to bring it to the initial state. submit another special button used to submit all the entries made in the form to the server. button creates a standard graphical button on the form. We can call functions on clicking this button. Table 5.5: Values of Type attribute 2. Name: It is used to give a name to the input control. When the Form is submitted, the data values are passed to the server along with the corresponding name of the control. 3. Value: It can be used to provide an initial (default) value inside the control. 4. Size: This attribute sets the width of the input text in terms of characters. It is applicable only to the input types text and password. 164  5. Web Designing using HTML 5. Maxlength: It limits the number of characters that the user can type into the field. It is also applicable only to the text and the password. A password field helps in hiding the content visually. It doesn't encrypt or scramble the information in any way. The HTML code given in Example 5.18 creates an HTML Form to input a name and password. Figure 5.24 shows the resultant web page. Example 5.18: To create an HTML Form Login Name:&nbsp; &nbsp;&nbsp; Password: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; In Example 5.18, a file login.php is assigned to the Action attribute of the tag. It means that the data entered through this Form will be captured and processed by the application stored in the file login.php. Also observe the use of HTML entity &nbsp; to provide non break spaces by referring to the code and Figure 5.24. Fig. 5.24: HTML Form with text and password 165  Computer Science - XII Let us design an HTML Form to input data with the help of radio button (or option button) and check boxes. You might have heard that radio buttons are used to specify only one option from a set of alternatives, and that check boxes are used to mark one or more items in a given list. The code given in Example 5.19 creates a Form to specify the gender and hobbies of a person with the help of radio buttons and check boxes. Figure 5.25 shows the corresponding web page. Example 5.19: To create an HTML Form with radio buttons and check boxes Checkbox Radio Button Control Sex: &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Male Female Hobbies: Playing Games Watching TV Reading Fig 5.25:Form with checkbox and radio button 5.6.3 tag We have seen single line text entry facility in a Form with the statement (refer Example 5.18 and Figure 5.24). But in practice, there are occasions where we need to enter multiple lines of text in a Form. Postal address is an example. The container tag can be used for this purpose. The area 166  5. Web Designing using HTML between the tag pair gives space for multi line text depending on the values given to the attributes. The main attributes of tag are: 1. Name: It is used to give a name to the control. 2. Rows: It specifies the number of rows in a text area control. 3. Cols: It indicates the number of columns in a text area, i.e., number of characters in a line. Consider the following code segment and observe the usage of tag: Enter your address. On completing the code and opening it, we can see a page as shown in Figure 5.26. Any text we include between tag pair and appears in a text box. When the user enters any data in the text box, it overrides default text. 5.6.4 tag Fig. 5.26: HTML Form with text area A select box, also called dropdown box, provides a list of various options in the form of a dropdown list, from where a user can select one or more options. Select box is helpful when a number of options are to be displayed in a limited space. The options in the list are specified using tag, which will be contained in the tag pair. The container tag pair and encloses a select box. The main attributes of tag are: 1. Name: It gives a name to the control, which is sent to the server to be recognized and to get the value. 2. Size: This can be used to present a scrolling list box. Its value will decide whether the select box should be a drop down list or a list box. If the value is 1, we get a dropdown list (or combo box). 3. Multiple: It allows users to select multiple items from the menu. Now let us discuss the role of tag in select boxes. It is an empty tag placed inside the container tag and. It lists out the options provided in the select box. The main attributes of tag are: 167  Computer Science - XII 1. Selected: This attribute is used to indicate default selection. 2. Value: It is used here to allow the submission of a value that differs from the content of the tag. If it is not present, the content is used as the value. The HTML code given in Example 5.20 creates a web page that contains a drop down list. Note that the value of the Size attribute of tag is 1 and there are four options inside the select box. Example 5.20: To create an HTML Form with a drop down list Drop down list Nationality: Indian British German Srilankan Figure 5.27 shows the dropdown list obtained on clicking the combo button. Fig. 5.27: Select box in a Form Modify the code given in Example 5.20 with different values for the Size attribute and predict the changes in the select box. Let us do 5.6.5 Grouping Form data with tag Sometimes grouping related controls in a Form become a necessity. The element helps in grouping related data in a Form. By using we can divide a Form into different subsections, each subsection containing related elements. To identify each , we can use the tag. The tag defines a caption for the element. It is a container tag. 168  5. Web Designing using HTML Now let us create a Form with all the elements discussed so far, to submit the details such as name, age, sex, address, hobbies etc. of a student. The code given in Example 5.21 can be used for this so that an HTML Form as shown in Figure 5.28 will be obtained. Example 5.21: To create an HTML Form to submit the details of a student FormResume Enter your details Name:&nbsp; Age: Sex: &nbsp;&nbsp;&nbsp; Male Female Nationality Indian British German Srilankan Nativity: District:&nbsp; Hobbies: Playing Games Watching TV Reading 169  Computer Science - XII Address Fig 5.28:An HTML Form to submit the details of a student 5.6.6 Form submission When we click the submit button on the Form, it will send the collected input data to the server, a computer capable of processing the received data. In a web server, there are special server side programs for processing Form data coming from the browser of a client (a computer, a tab or a mobile phone through which we submit the data). As mentioned earlier, the Action attribute defines the action to be performed when the Form is submitted. Normally it assigns the URL of the server side program to process the Form data. The common way to submit a Form to a server is by using a submit button. In Example 5.21, a server-side script guestbook.php is specified to handle the submitted form in the tag. 170  5. Web Designing using HTML The Method attribute of the tag specifies the HTTP method (get or post) to be used when submitting the forms. Know your progress 1. HTML provides _______ to input data through web pages. 2. Name the two tags used within to enter text data. 3. How do radio button control and check box control differ? 4. Which tag is used to group data within the Form? 5. Name the tag used within to input data. 5.7 Overview of HTML 5 HTML 5 is the major revision of the HTML standard after HTML 4.01. HTML5 was developed jointly by World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback, drag-and-drop etc. The latest versions of all leading browsers including Google Chrome, Mozilla Firefox, Apple Safari, Opera and Internet Explorer support HTML5. Mobile web browsers that are pre- installed in iPhones, iPads, Android phones, etc. also support HTML5. HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. The logo of HTML5 is given in Figure 5.29. Fig. 5.29: HTML5 logo Some new tags introduced in HTML5 are given below: 1. and : These tags offer the facility to easily embed media into HTML documents. 2. : This tag gives us an easy and powerful way to draw graphics, build charts and graphs and customise graphics. 3. and : The element specifies a header for a document or section. The element specifies footer for a document or section. A footer typically contains the author of the document, copyright information, contact information, etc. We can have several , elements in one document. 4. and : These tags are used to create articles and sections within a webpage. An article is an independent, stand-alone piece of discrete content like a blog post, or a news item. Article represents a full block of content. Section is used as a way of sectioning a page into different subject areas, or sectioning an article. and tags, if properly used will increase search engine visibility of the webpage. 171  Computer Science - XII 5. : This tag represents the result of a calculation usually performed by a script. 6. : Sometimes website needs to have an expanding/collapsing block of text. With tag it is easier to make a simple block that expands and collapses the content when the header is clicked. 7. and : is a container for content like images, and element represents a caption or legend for a figure. It comes inside the tag. 8. and : and are similar. The tag represents the progress of a task. It is useful for things like displaying the progress of a file upload. tag is used to display a scalar measurement within a known range, like showing hard drive usage. Let us conclude In this chapter, we have gone through some of the advanced features of HTML. Different kinds of lists are discussed to make the text more presentable. The beauty of the web pages can be enhanced by including marquees, images, audio and video. We have also discussed the importance of hyper linking and familiarised with various kinds of hyperlinks. Creating a table with the tags , , , and , and their attributes were discussed. The importance of Rowspan and Colspan attributes are identified. We can divide the browser window into different frames using framesets so that different pages can be opened and viewed at the same time. We have also seen that division of browser window can be done in different ways with the concept of nested framesets. We have discussed how Target attribute is used to create link between different frames of the browser window. We have also identified the utility of Form in the web page to submit data to the server using online facility. We have seen various elements such as text box, password, radio button, text area, select box, etc. that facilitate the input of data in different ways. We have just mentioned the concept of client side programs and server side programs. So, this chapter is a stepping stone to the next chapters in which we will discuss how the input data in the Form is verified and how the data is stored or processed in the server. 172  5. Web Designing using HTML Let us practice 1. Wrtie an HTML code for a web page of a district in Kerala with the following details and features: A heading followed by a paragraph of 3 sentences about the district using text formatting tags and attributes. A list of the tourist places in the district. 2. Wrtie an HTML code for a web page for your school with the following details and features: A heading followed by a paragraph of 3 sentences about the district using text formatting tags and attributes. Include a list of five co-curricular activites like NCC, NSS, Clubs, etc. 3. Wrtie an HTML code for a web page to show the following details: Components of a Computer Hardware 1. I/O Devices 2. RAM 3. Hard Disk & DVD Drive Software 1. Operating System 2. Application Programs 4. Write an HTML code to present some details about Onam - the festival of Kerala, in a web page with the following features: A heading with attractive font characteristics. An image of "Vallam Kali" (boat race) in the background of the page. Internal links to any two of the traditional events like "Pookkalam", "Thumpi Thullal", "Thiruvathira", "Onavillu", "Vallam kali", "Kummatti", "Pulikali", etc. 5. Write HTML codes to create two web pages to show some information about the higher secondary and high school sections of your school. Create another web page to divide the browser window horizontally into two. In the first frame, a brief introduction of the school and two links are to be provided - one for HSS and the other for HS. On clicking these links the respective web page is to be opened in the second frame. 173  Computer Science - XII 6. Write an HTML code to show the following table in a web page and also provide an external link to the website of Kerala Police given below the table: Road Accidents in Kerala during 2012 - 2014 Total Number of Year Cases Persons Killed Persons Injured 2012 36174 4286 41915 2013 35215 4258 40346 2014 36282 4049 41096 Data Source: www.keralapolice.org 7. Write an HTML code to display an application form as shown below: APPLICATION FOR THE BEST STUDENT AWARD Name: Sex: Male Female Class & Division: Select Total Grade Point in Class XI: Average Grade Point in Termly Exams in Class XII: Cocurricular Activities: NCC NSS Sports Arts Literary Other Achievements: 1234567890123456789012345678901212345678901234567890123456789012123456789 1234567890123456789012345678901212345678901234567890123456789012123456789 1234567890123456789012345678901212345678901234567890123456789012123456789 Let us assess 1234567890123456789012345678901212345678901234567890123456789012123456789 1234567890123456789012345678901212345678901234567890123456789012123456789 1. Find the errors in the following and correct it. a. b. c. this is the body of the HTML document 174  5. Web Designing using HTML 2. Rohit created a table in HTML but a border was not visible. What could be the reason? 3. ________ attribute is used with tag to display the linked page in a specified frame. 4. Your computer teacher asked you to prepare a list of your best friends in a webpage. Which tag will you prefer? Write HTML code segment for this list. 5. Name the possible values of type attribute of tag. 6. Write the attributes of tag. 7. How do you create a list using