BCA121_Web Designing(Draft 2)

 Unordered lists: The list items are marked with bullets in an unordered list. -cub- and<lul> tags are used to create unordered lists. Each list item starts with the <li> tag. The type attribute of <li> tag when has \"value circle\" creates a circle and when has “value=disc\" creates a filled circle (bullet). Inside a list item you can put paragraphs, line breaks, images, links, other lists etc.  Graphics and links are two major component used in any web page. Graphics are used to enhance the look and feel of a web page. Links are the main building block of Hypertext and hence the web. Links helps you to navigate from one page to other even across the websites. Let us describe the graphics and links in more details 3.7 KEYWORDS  Hyperlinks: Anchor tags are used to create a hyperlink or to act as an anchor marking a place for another link within the page to scroll to. The most common attribute is href, which tells the link where to go.  Formatting: Tags that add formatting, such as bold, italics, and underlining to text. These aren't used too often because they carry no meaning like <strong> and <em> and are purely for presentational purposes.  Headings: Heading elements like <h1>, <h2>, <h3>, ... allow you to use six levels of document headings, ranging from largest to smallest, breaking up the document into logical sections. For example, the word 'Headings' above is wrapped in a <h2> tag.  Line breaks: This tag is used in a block of text to force a line break. This is to be used for things which are a single paragraph, but where this formatting is necessary such as poems or addresses. To separate paragraphs, separate each paragraph into a separate <p> element instead.  Images: The img tag embeds an image into your HTML. Always found with the 'src' attribute, which tells the browser where to find the image. 3.8 LEARNINGACTIVITY 1.Design a single page web site for a store listing the products and services offered. The store sells computers and related products. The site should contain images explaining the products graphically. __________________________________________________________________________ __________________________________________________________________________ .51 CU IDOL SELF LEARNING MATERIAL (SLM)

2. Design a single page web site for a university containing a description of the coursesOffered. It should also contain some general information about the university such as its history. The campus, its unique features and so on. The site should be colored and Each section should have a different color. __________________________________________________________________________ _______________________________________________________________________ 3.9 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Explain with examples the different types of List in HTML? 2. Create an HTML document to create an ordered and hyperlinked list of computer programme offered by SOCIS as shown in the Figure below. 3. Create an HTML document, which uses four images along with their references as shown in the Figure below. .52 CU IDOL SELF LEARNING MATERIAL (SLM)

4. Create an HTML document which when opened in a web browser should appear like the following figure: 5. Create an HTML document having the yellow background and looks like the figure given below. The font to be used is arial and you must use tags. .53 CU IDOL SELF LEARNING MATERIAL (SLM)

B.Multiple Choice Questions 1. Which of the following gives a text description of the image if it is not available? (a) alt (b) title (c) src (d) height 2. Which of the following is not the software for editing images? (a) Adobe Fireworks (b) PaintShop Pro (c) Paint.net (d) Splashup 3. JPEG format is useful when ___________ (a) there are so many colors in the picture (b) there are not so many colors in the picture (c) we want to show more brightness (d) when we want to show haziness 4. Up to what resolution image should be saved by using in the web? (a) 23 ppi .54 CU IDOL SELF LEARNING MATERIAL (SLM)

(b) 34 ppi (c) 72 ppi (d) 100 ppi 5. Images are usually printed at a resolution of ___________ (a) 200 dpi (b) 100 dpi (c) 50 dpi (d) 300 dp Answers 1. (a), 2. (d), 3. (a), 4. (c), 5. (d) 3.10REFERENCES  Matthew MacDonald, \"Creating a Website - The Missing Manual\", 3rd ed, 2011, O’Reilly. (A good introductory book on HTML/CSS. A new version is expected in July 2015.)  Matthew MacDonald, \"HTML 5 - The Missing Manual\", 2nd ed, 2014, O’Reilly.  David Sawyer McFarland, \"CSS 3 - The Missing Manual\", 3rd ed, 2013, O’Reilly.  Learning Web Design, Second edition, Jennifer Niederst, O'Reily  HTML Mastery: Semantics, Standards, and Styling, Paul Haine  HTML for the World Wide Web, Fourth edition, Elizabeth Castro  Web Standards Programmers's Reference: HTML, CSS, JavaScript, Perl, Python and PHP, Steven M.Schafer  https //html.spec.whatwg.org/multipage/index.html).  http://www.w3.org/TR/html401).  http://www.w3.org/TR/selectors/)  http://www.w3.org/TR/css3-col .55 CU IDOL SELF LEARNING MATERIAL (SLM)

 The Emergent Properties of Multimedia Applications for Storytelling Pedagogy in a Distance Education Online Learning Community byElizabeth Figa  Introduction to HTML (Hyper Text Markup Language) - A Review PaperMay 2018International Journal of Science and Research (IJSR) 7(5):1337-1339 Authors: Akanksha Sharma .56 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 4 HTML 4 Structure 4.0 LearningObjectives 4.1 Introduction 4.2 Working with tables in HTML 4.3 Layout using tables 4.4 Working with Forms and controls 4.5 Summary 4.6 KeyWords/Abbreviations 4.7 LearningActivity 4.8 Unit End Questions (MCQ andDescriptive) 4.9 Suggested Readings 4.0LEARNINGOBJECTIVES After studying this unit, you will be able to:  Explain Working with tables in HTML  Illustrate layout using tables  Explain Working with Forms and controls 4.1 INTRODUCTION The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are regular and left aligned by default. A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel. Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can .57 CU IDOL SELF LEARNING MATERIAL (SLM)

create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes. 4.2 WORKING WITH TABLES IN HTML Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default. There are two attributes called cell padding and cells pacing which you will use to adjust the white space in your table cells. The cell spacing attribute defines space between table cells, while cell padding represents the distance between cell borders and the content within a cell. You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows. You can set table background using one of the following two ways −  bgcolor attribute − You can set background color for whole table or just for one cell.  background attribute − You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute. Example <!DOCTYPE html> <html> <head> <title>HTML Table Background</title> </head> <body> <tableborder=\"1\"bordercolor=\"green\"bgcolor=\"yellow\"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <tdrowspan=\"2\">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> .58 CU IDOL SELF LEARNING MATERIAL (SLM)

<td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <tdcolspan=\"3\">Row 3 Cell 1</td> </tr> </table> </body> </html> This will produce the following result − Table Header, Body, and Footer Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. The three elements for separating the head, body, and foot of a table are: <thead> − to create a separate table header. <tbody> − to indicate the main body of the table. .59 CU IDOL SELF LEARNING MATERIAL (SLM)

<tfoot> − to create a separate table footer. A table may contain several <tbody> elements to indicate different pages or groups of data. But it is notable that <thead> and <tfoot> tags should appear before <tbody> Example <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <tableborder=\"1\"width=\"100%\"> <thead> <tr> <tdcolspan=\"4\">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <tdcolspan=\"4\">This is the foot of the table</td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> .60 CU IDOL SELF LEARNING MATERIAL (SLM)

<td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </tbody> </table> </body> </html> This will produce the following result − Nested Tables You can use one table inside another table. Not only tables you can use almost all the tags inside table data tag <td>. Example Following is the example of using another table and other tags inside a table cell. <!DOCTYPE html> <html> <head> <title>HTML Table</title> </head> <body> <tableborder=\"1\"width=\"100%\"> .61 CU IDOL SELF LEARNING MATERIAL (SLM)

<tr> .62 <td> <tableborder=\"1\"width=\"100%\"> <tr> <th>Name</th> <th>Salary</th> </tr> <tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </td> </tr> </table> </body> </html> This will produce the following result − CU IDOL SELF LEARNING MATERIAL (SLM)

4.3 LAYOUT USING TABLES The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like. Example For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute − <!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <tablewidth=\"100%\"border=\"0\"> <tr> <tdcolspan=\"2\"bgcolor=\"#b5dcb3\"> <h1>This is Web Page Main title</h1> </td> </tr> <trvalign=\"top\"> <tdbgcolor=\"#aaa\"width=\"50\"> .63 CU IDOL SELF LEARNING MATERIAL (SLM)

<b>Main Menu</b><br/> HTML<br/> PHP<br/> PERL... </td> <tdbgcolor=\"#eee\"width=\"100\"height=\"200\"> Technical and Managerial Tutorials </td> </tr> <tr> <tdcolspan=\"2\"bgcolor=\"#b5dcb3\"> <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr> </table> </body> </html> This will produce the following result − .64 CU IDOL SELF LEARNING MATERIAL (SLM)

Multiple Columns Layout - Using Tables You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. This layout will be very similar to what we have at our website tutorialspoint.com Example Here is an example to create three column layouts − <!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <tablewidth=\"100%\"border=\"0\"> <trvalign=\"top\"> <tdbgcolor=\"#aaa\"width=\"20%\"> <b>Main Menu</b><br/> HTML<br/> .65 CU IDOL SELF LEARNING MATERIAL (SLM)

PHP<br/> PERL... </td> <tdbgcolor=\"#b5dcb3\"height=\"200\"width=\"60%\"> Technical and Managerial Tutorials </td> <tdbgcolor=\"#aaa\"width=\"20%\"> <b>Right Menu</b><br/> HTML<br/> PHP<br/> PERL... </td> </tr> <table> </body> </html> This will produce the following result − .66 CU IDOL SELF LEARNING MATERIAL (SLM)

HTML Layouts - Using DIV, SPAN The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level. Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data. Note − This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works. Example Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example. <!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <divstyle=\"width:100%\"> <divstyle=\"background-color:#b5dcb3; width:100%\"> <h1>This is Web Page Main title</h1> </div> <divstyle=\"background-color:#aaa; height:200px; width:100px;float:left;\"> <div><b>Main Menu</b></div> .67 CU IDOL SELF LEARNING MATERIAL (SLM)

HTML<br/> PHP<br/> PERL... </div> <divstyle=\"background-color:#eee; height:200px; width:350px;float:left;\"> <p>Technical and Managerial Tutorials</p> </div> <divstyle=\"background-color:#aaa; height:200px; width:100px;float:right;\"> <div><b>Right Menu</b></div> HTML<br/> PHP<br/> PERL... </div> <divstyle=\"background-color:#b5dcb3; clear:both\"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> .68 CU IDOL SELF LEARNING MATERIAL (SLM)

</html> This will produce the following result − 4.4 WORKING WITH FORMS AND CONTROL HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc. The HTML <form> tag is used to create an HTML form and it has following syntax − <form action = \"Script URL\" method = \"GET|POST\"> Form elements like input, text area etc. </form> Form Attributes Apart from common attributes, following is a list of the most frequently used form attributes Table 4.1 Form Attributes Sr.No Attribute & Description .69 CU IDOL SELF LEARNING MATERIAL (SLM)

1 action Backend script ready to process your passed data. 2 method Method to be used to upload data. The most frequently used are GET and POST methods. 3 target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. 4 enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are − Application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios. mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc. HTML Form Controls There are different types of form controls that you can use to collect data using HTML form Text Input Controls, Checkboxes Controls, Radio Box Controls, Select Box Controls, File Select boxes, Hidden Controls, Clickable Buttons & Submit and Reset Button Text Input Controls There are three types of text input used on forms −  Single-line text input controls − This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. .70 CU IDOL SELF LEARNING MATERIAL (SLM)

 Password input controls − This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.  Multi-line text input controls − This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag. Single-line text input controls This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag. Example Here is a basic example of a single-line text input used to take first name and last name − <!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form> First name: <inputtype=\"text\"name=\"first_name\"/> <br> Last name: <inputtype=\"text\"name=\"last_name\"/> </form> </body> </html> This will produce the following result – .71 CU IDOL SELF LEARNING MATERIAL (SLM)

Attributes Following is the list of attributes for <input> tag for creating text field. Table 4.2 attributes for <input> tag creating text field Sr.No Attribute & Description 1 type Indicates the type of input control and for text input control it will be set to text. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. 3 value This can be used to provide an initial value inside the control. 4 size Allows to specify the width of the text-input control in terms of characters. 5 maxlength Allows to specify the maximum number of characters a user can enter into the text box. Password input controls This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input>tag but type attribute is set to password. .72 CU IDOL SELF LEARNING MATERIAL (SLM)

Example Here is a basic example of a single-line password input used to take user password − <!DOCTYPE html> <html> <head> <title>Password Input Control</title> </head> <body> <form> User ID : <inputtype=\"text\"name=\"user_id\"/> <br> Password: <inputtype=\"password\"name=\"password\"/> </form> </body> </html> Attributes Following is the list of attributes for <input> tag for creating password field. Sr.No Table 8.3 attributes for <input> tag for creating password field. 1 Attribute & Description type 2 Indicates the type of input control and for password input control it will be set 3 to password. name Used to give a name to the control which is sent to the server to be recognized and get the value. value This can be used to provide an initial value inside the control. .73 CU IDOL SELF LEARNING MATERIAL (SLM)

4 size Allows to specify the width of the text-input control in terms of characters. 5 maxlength Allows to specify the maximum number of characters a user can enter into the text box. Multiple-Line Text Input Controls This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag. Example Here is a basic example of a multi-line text input used to take item description − <!DOCTYPE html> <html> <head> <title>Multiple-Line Input Control</title> </head> <body> <form> Description : <br/> <textarearows=\"5\"cols=\"50\"name=\"description\"> Enter description here... </textarea> </form> </body> </html> This will produce the following result – .74 CU IDOL SELF LEARNING MATERIAL (SLM)

Attributes Following is the list of attributes for <textarea> tag. Sr.No Table 8.4 list of attributes for <textarea> tag Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized and get the value. 2 rows Indicates the number of rows of text area box. 3 cols Indicates the number of columns of text area box Checkbox Control Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox. Example Here is an example HTML code for a form with two checkboxes − <!DOCTYPE html> <html> .75 CU IDOL SELF LEARNING MATERIAL (SLM)

<head> <title>Checkbox Control</title> </head> <body> <form> <inputtype=\"checkbox\"name=\"maths\"value=\"on\"> Maths <inputtype=\"checkbox\"name=\"physics\"value=\"on\"> Physics </form> </body> </html> This will produce the following result – Attributes Following is the list of attributes for <checkbox> tag. Table 8.5 attributes for <checkbox> tag Sr.No Attribute & Description 1 type Indicates the type of input control and for checkbox input control it will be set to checkbox.. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. .76 CU IDOL SELF LEARNING MATERIAL (SLM)

3 value The value that will be used if the checkbox is selected. 4 checked Set to checked if you want to select it by default. Radio Button Control Radio buttons are used when out of many options; just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio. Example Here is example HTML code for a form with two radio buttons − <!DOCTYPE html> <html> <head> <title>Radio Box Control</title> </head> <body> <form> <inputtype=\"radio\"name=\"subject\"value=\"maths\"> Maths <inputtype=\"radio\"name=\"subject\"value=\"physics\"> Physics </form> </body> </html> This will produce the following result – .77 CU IDOL SELF LEARNING MATERIAL (SLM)

Attributes Following is the list of attributes for radio button. Table 8.6 list of attributes for radio button Sr.No Attribute & Description 1 type Indicates the type of input control and for checkbox input control it will be set to radio. 2 name Used to give a name to the control which is sent to the server to be recognized and get the value. 3 value The value that will be used if the radio box is selected. 4 checked Set to checked if you want to select it by default. Select Box Control A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options. Example Here is example HTML code for a form with one drop down box <!DOCTYPE html> .78 CU IDOL SELF LEARNING MATERIAL (SLM)

<html> <head> <title>Select Box Control</title> </head> <body> <form> <selectname=\"dropdown\"> <optionvalue=\"Maths\"selected>Maths</option> <optionvalue=\"Physics\">Physics</option> </select> </form> </body> </html> This will produce the following result – Attributes Following is the list of important attributes of <select> tag – Table 8.7 attributes of <select> tag Sr.No Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized .79 CU IDOL SELF LEARNING MATERIAL (SLM)

and get the value. 2 size This can be used to present a scrolling list box. 3 multiple If set to \"multiple\" then allows a user to select multiple items from the menu. Following is the list of important attributes of <option> tag – Table 8.8 attributes of <option> tag Sr.No Attribute & Description 1 value The value that will be used if an option in the select box is selected. 2 selected Specifies that this option should be the initially selected value when the page loads. 3 label An alternative way of labeling options File Upload Box If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file. Example .80 CU IDOL SELF LEARNING MATERIAL (SLM)

Here is example HTML code for a form with one file upload box − <!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <inputtype=\"file\"name=\"fileupload\"accept=\"image/*\"/> </form> </body> </html> This will produce the following result – Attributes Following is the list of important attributes of file upload box – Table 8.9 attributes of file upload box Sr.No Attribute & Description 1 name Used to give a name to the control which is sent to the server to be recognized and get the value. .81 CU IDOL SELF LEARNING MATERIAL (SLM)

2 accept Specifies the types of files that the server accepts. Button Controls There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to button. The type attribute can take the following values – Table 8.10 Type attribute Button Controls Sr.No Type & Description 1 submit This creates a button that automatically submits a form. 2 reset This creates a button that automatically resets form controls to their initial values. 3 button This creates a button that is used to trigger a client-side script when the user clicks that button. 4 image This creates a clickable button but we can use an image as background of the button. Example Here is example HTML code for a form with three types of buttons − <!DOCTYPE html> .82 CU IDOL SELF LEARNING MATERIAL (SLM)

<html> <head> <title>File Upload Box</title> </head> <body> <form> <inputtype=\"submit\"name=\"submit\"value=\"Submit\"/> <inputtype=\"reset\"name=\"reset\"value=\"Reset\"/> <inputtype=\"button\"name=\"ok\"value=\"OK\"/> <inputtype=\"image\"name=\"imagebutton\"src=\"/html/images/logo.png \"/> </form> </body> </html> This will produce the following result − Hidden Form Controls Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page. Example .83 CU IDOL SELF LEARNING MATERIAL (SLM)

Here is example HTML code to show the usage of hidden control − <!DOCTYPE html> <html> <head> <title>File Upload Box</title> </head> <body> <form> <p>This is page 10</p> <inputtype=\"hidden\"name=\"pagename\"value=\"10\"/> <inputtype=\"submit\"name=\"submit\"value=\"Submit\"/> <inputtype=\"reset\"name=\"reset\"value=\"Reset\"/> </form> </body> </html> This will produce the following result − Width of box: 10 4.5 SUMMARY  HTML tables allow web developers to arrange data into rows and columns.  The <table> tag defines an HTML table. .84 CU IDOL SELF LEARNING MATERIAL (SLM)

 Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag.  By default, the text in <th> elements are bold and centered.  By default, the text in <td> elements is regular and left-aligned  Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding.  To make a cell span more than one row, use the rowspan attribute:  TO make a cell span more than one column, use the colspan attribute  To define a special style for one particular table, add an id attribute to the table  A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.  chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.  You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. This layout will be very similar to what we have at our website tutorialspoint.com. 4.6 KEY WORDS/ABBREVIATIONS  Internet Protocol or IP address: The Internet Protocol (IP) is the method or protocol by which data is sent from one computer to another on the Internet.  Hyperlink or Link: A clickable navigation element on a webpage. The most common destination anchor is a URL used in the World Wide Web.  Programming Language: A programming language is an artificial language designed to communicate instructions to a computer.  RL or Uniform Resource Locator: A Uniform Resource Locator (URL) specifies where an identified resource is available and the mechanism for retrieving it.  RL or Uniform Resource Locator: A Uniform Resource Locator (URL) specifies where an identified resource is available and the mechanism for retrieving it. .85 CU IDOL SELF LEARNING MATERIAL (SLM)

4.7 LEARNINGACTIVITY 1. WAP to Demonstrate Table Tag. __________________________________________________________________________ __________________________________________________________________________ 2. WAP to Demonstrate to demonstrate Single-line text input control. __________________________________________________________________________ __________________________________________________________________________ 4.8UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. What difference does it make if we express the width of a table in percentage or in pixel value? And how do we set the width of a particular column or cell in a table? 2. Design an HTML Page for the “Block Introduction” of this book: The page should allow scrolling and the code should contain a comment header with your name and enrolment number. 3. Create the following table. 4. Create a Web page, which should contain a table having two rows and two columns. 5.Create an HTML document containing a nested list showing the content page of any book. B. Multiple Choice Questions 1. Each cell of the table can be represented by using __________ (a) <tr> (b) <td> (c) <th> (d) <thead> .86 CU IDOL SELF LEARNING MATERIAL (SLM)

2. For heading we can use ____________ (a) <td> (b) <tr> (c) <thead> (d) <th> 3. Headings of table lies inside ___________ (a) <thead> (b) <tfoot> (c) <th> (d) <tbody> 4. Which of the following is not the element associated with HTML table layout? (a) size (b) spanning (c) alignment (d) color 5. Which of the following element is not associated with a class attribute? (a) Row (b) <thead> (c) Column cell (d) Rows Answers 1. (b), 2. (d), 3. (a), 4. (d), 5. (b) 4.9 REFERENCES  A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer. (Volume 2)Mark Myers 2015 .87 CU IDOL SELF LEARNING MATERIAL (SLM)

 HTML 101The Essential Beginner's Guide to Learning HTML Coding Jo foster  “HTML5 for Masterminds” by J D Gauchat  “The Definitive Guide to HTML5” by Adam Freeman  https://www.w3schools.com/html/html_tables.asp  https://www.tutorialspoint.com/html/html_layouts.htm  https://www.ironspider.ca/webdesign102/tables4layout2.htm  https://www.vfu.bg/en/e-Learning/Web--forms_and_control.pdf  From Table Hacks to CSS Layout: A Web Designer’s Journeyby Jeffrey ZeldmanFebruary 16, 2001  MDPI Style Guide First editionMDPI, St Basel Anlage 66, 4052 Basel, Switzerland .88 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 5- HTML 5 Structure 5.0 LearningObjectives 5.1 Introduction 5.2 Audio and video tags in HTML 5.3 Working with Frames in HTML 5.4 Frames types 5.5 Summary 5.6 KeyWords/Abbreviations 5.7 LearningActivity 5.8 Unit End Questions (MCQ andDescriptive) 5.9 Suggested Readings 5.0 LEARNINGOBJECTIVES After studying this unit, you will be able to:  Discuss Audio and video tags in HTML.  Explain Working with Frames in HTML  Discuss frames types 5.1 INTRODUCTION This unit discusses these two issues of web page design through use of Frames and Forms. You can divide a web page logically using DIV tags as discussed in the last unit, or physically by using Frames. The forms elements are basically used to gather information using elements like text box, menu, radio button etc. The HTML editors as discussed in the previous unit provide very simple interfaces for development of web pages and make simple the process of web site development. This unit introduces you to these two important aspects .89 CU IDOL SELF LEARNING MATERIAL (SLM)

of web page creation using the HTML editor software. This Unit also provides a detailed procedure for creating personal web pages with the help of a template. The idea here is to initiate you to create your own personal web pages.This unit discusses these two issues of web page design through use of Frames and Forms. You can divide a web page logically using DIV tags as discussed in the last unit, or physically by using Frames. The forms elements are basically used to gather information using elements like text box, menu, radio button etc. The HTML editors as discussed in the previous unit provide very simple interfaces for development of web pages and make simple the process of web site development. This unit introduces you to these two important aspects of web page creation using the HTML editor software. This Unit also provides a detailed procedure for creating personal web pages with the help of a template. The idea here is to initiate you to create your own personal web pages. 5.2 AUDIO AND VIDEO TAGS IN HTML Embedding Video Here is the simplest form of embedding a video file in your webpage − <video src = \"foo.mp4” width = \"300\" height = \"200\" controls> Your browser does not support the <video> element. </video> The current HTML5 draft specification does not specify which video formats browsers should support in the video tag. But most commonly used video formats are −  Ogg − Ogg files with Thedora video codec and Vorbis audio codec.  mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec. You can use <source> tag to specify media along with media type and many other attributes. A video element allows multiple source elements and browser will use the first recognized format − <!DOCTYPE HTML> <html> <body> .90 CU IDOL SELF LEARNING MATERIAL (SLM)

<video width=\"300\"height=\"200\"controlsautoplay> <sourcesrc=\"/html5/foo.ogg\"type=\"video/ogg\"/> <sourcesrc=\"/html5/foo.mp4\"type=\"video/mp4\"/> Your browser does not support the <video> element. </video> </body> </html> This will produce the following result − Video Attribute Specification The HTML5 video tag can have a number of attributes to control the look and feel and various functionalities of the control – Table 5.1 HTML5 video tag attributes Sr.No. Attribute & Description auto play 1 This Boolean attribute if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data. auto buffer 2 This Boolean attribute if specified, the video will automatically begin buffering even if it's not set to automatically play. controls 3 If this attribute is present, it will allow the user to control video playback, .91 CU IDOL SELF LEARNING MATERIAL (SLM)

including volume, seeking, and pause/resume playback. height 4 This attribute specifies the height of the video's display area, in CSS pixels. loop 5 This Boolean attribute if specified, will allow video automatically seek back to the start after reaching at the end. preload 6 This attribute specifies that the video will be loaded at page load, and ready to run. Ignored if auto play is present. poster 7 This is a URL of an image to show until the user plays or seeks. src 8 The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. width 9 This attribute specifies the width of the video's display area, in CSS pixels. Embedding Audio HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows.<audio src = \"foo.wav\" controls autoplay>your browser does not support the <audio> element. .92 CU IDOL SELF LEARNING MATERIAL (SLM)

</audio> The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. You can use <source&ggt; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format − <!DOCTYPE HTML> <html> <body> <audiocontrolsautoplay> <sourcesrc=\"/html5/audio.ogg\"type=\"audio/ogg\"/> <sourcesrc=\"/html5/audio.wav\"type=\"audio/wav\"/> Your browser does not support the <audio> element. </audio> </body> </html> This will produce the following result − Audio Attribute Specification The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control – Table 5.2 HTML5 audio tag attribute .93 CU IDOL SELF LEARNING MATERIAL (SLM)

Sr.No. Attribute & Description auto play 1 This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. auto buffer 2 This Boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play. controls 3 If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. loop 4 This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. preload 5 This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if auto play is present. src 6 The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. Handling Media Events .94 CU IDOL SELF LEARNING MATERIAL (SLM)

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using JavaScript – Table 5.3 HTML5 audio and video attributes Sr.No. Event & Description abort 1 This event is generated when playback is aborted. can play 2 This event is generated when enough data is available that the media can be played. ended 3 This event is generated when playback completes. error 4 This event is generated when an error occurs. loaded data 5 This event is generated when the first frame of the media has finished loading. load start 6 This event is generated when loading of the media begins. 7 pause .95 CU IDOL SELF LEARNING MATERIAL (SLM)

This event is generated when playback is paused. play 8 This event is generated when playback starts or resumes. progress 9 This event is generated periodically to inform the progress of the downloading the media. rate change 10 This event is generated when the playback speed changes. seeked 11 This event is generated when a seek operation completes. seeking 12 This event is generated when a seek operation begins. suspend 13 This event is generated when loading of the media is suspended. volume change 14 This event is generated when the audio volume changes. waiting 15 This event is generated when the requested operation (such as playback) is delayed .96 CU IDOL SELF LEARNING MATERIAL (SLM)

pending the completion of another operation (such as a seek). Following is the example which allows to play the given video − <!DOCTYPE HTML> <html> <head> <scripttype=\"text/javascript\"> functionPlayVideo(){ var v = document.getElementsByTagName(\"video\")[0]; v.play(); } </script> </head> <body> <form> <videowidth=\"300\"height=\"200\"src=\"/html5/foo.mp4\"> Your browser does not support the video element. </video> <br/> <inputtype=\"button\"onclick=\"PlayVideo();\"value=\"Play\"/> </form> .97 CU IDOL SELF LEARNING MATERIAL (SLM)

</body> </html> This will produce the following result − Configuring Servers for Media Type Most servers don't by default serve Ogg or mp4 media with the correct MIME types, so you'll likely need to add the appropriate configuration for this.  AddType audio/ogg .oga  AddType audio/wav .wav  AddType video/ogg .ogv .ogg  AddType video/mp4 .mp4 Embedding Audio HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML document as follows. <audio src = \"foo.wav\" controls autoplay> Your browser does not support the <audio> element. </audio> The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.You can use <source&ggt; tag to specify media along with media type and many other attributes. An audio element allows multiple source elements and browser will use the first recognized format − <!DOCTYPE HTML> <html> <body> .98 CU IDOL SELF LEARNING MATERIAL (SLM)

<audiocontrolsautoplay> <sourcesrc=\"/html5/audio.ogg\"type=\"audio/ogg\"/> <sourcesrc=\"/html5/audio.wav\"type=\"audio/wav\"/> Your browser does not support the <audio> element. </audio> </body> </html> This will produce the following result − Audio Attribute Specification The HTML5 audio and video HTML5 audio and video HTML5 audio and video can have a number of attributes to control the look and feel and various functionalities of the control – Table 5.4 HTML5 audio and video attribute Sr.No. Attribute & Description auto play 1 This Boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data. auto buffer 2 This Boolean attribute if specified, the audio will automatically begin buffering even if it's not set to automatically play. .99 CU IDOL SELF LEARNING MATERIAL (SLM)

controls 3 If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback. loop 4 This Boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end. preload 5 This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if auto play is present. src 6 The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed. Handling Media Events The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using JavaScript – Table 5.5 HTML5 audio and video tag attributes Sr.No. Event & Description abort 1 This event is generated when playback is aborted. .100 CU IDOL SELF LEARNING MATERIAL (SLM)