Module IT WS02.docx

**NUEVA ECIJA UNIVERSITY OF SCIENCE AND TECHNOLOGY COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY** **WEB SYSTEMS AND TECHNOLOGIES** 2 **HTML 5, CSS AND JAVASCRIPT WITH INTRODUCTION TO WEB** **APPLICATION SECURITY** N1908-C 1900 008- **2024** **WEB SYSTEMS AND TECHNOLOGIES 2** **HTML...

**NUEVA ECIJA UNIVERSITY OF SCIENCE AND TECHNOLOGY COLLEGE OF INFORMATION AND COMMUNICATIONS TECHNOLOGY** **WEB SYSTEMS AND TECHNOLOGIES** 2 **HTML 5, CSS AND JAVASCRIPT WITH INTRODUCTION TO WEB** **APPLICATION SECURITY** N1908-C 1900 008- **2024** **WEB SYSTEMS AND TECHNOLOGIES 2** **HTML 5**, **CSS AND JAVASCRIPT WITH INTRODUCTION** TO **WEB APPLICATION** **SECURITY** **ROSE ANNE G. COCHANCO ALEXANDER S. COCHANCO JOANA MARIE C. TOLENTINO** **2024** **Preface** The module Web Systems and Technologies 2 aims to give learners a thorough understanding of modern web development practices, emphasizing HTML5, CSS, and JavaScript. Mastering these core technologies is essential for creating dynamic, interactive, and secure web applications as the web landscape continues to evolve. This module is structured into six key topics: 2\. Getting User Input with Forms: Understanding how to capture user input is vital for any interactive web application. This topic covers the creation and management of HTML forms, exploring various input types and attributes to ensure a robust user interface. 3. Integrating Audio and Video: Multimedia content is a critical aspect of modern web design. This topic delves into embedding and customizing audio and video elements, enhancing the user experience through rich media integration. 4\. Introduction to JavaScript: JavaScript is the backbone of web interactivity. This section provides a foundation in JavaScript, covering functions, the Document Object Model (DOM), form manipulation, and event handling to create responsive and engaging web pages. 6\. Web Application Threats and Security: As web applications become more complex, understanding security threats is crucial. This final topic introduces common web application vulnerabilities and best practices for securing applications against potential attacks. By the end of this module, students will have acquired a solid foundation in web development, equipped with the knowledge and skills to build interactive, multimedia-rich, and secure web applications. This module is designed to be both educational and practical, preparing students for the challenges of modern web development. i RAGC ASC JMCT **Preface** **Table of Contents** **UNIT I. CREATING TABLE IN** A **WEB PAGE** Overview Learning Objectives Setting Up Lesson Proper **Table of Contents** ii 1 1 2 3 **3** 3 **Data Tables Versus Layout Tables** **Table Elements** **CSS Border Properties** **Partition Table using thead and tbody Elements** **Spanning Table Cells** **Additional Table Properties** Assessing Learning Laboratory Exercise 1 **UNIT II. GETTING USER INPUT WITH FORMS** Overview 3 3 4 5 66 6 9 12 13 13 Learning Objectives 13 Setting Up 14 Lesson Proper 15 15 **HTML \ and \ Elements** 15 **Input Elements and its Types** 17 **Input Attributes and CSS Properties** Assessing Learning 24 Laboratory Exercise 2 **UNIT III. INTEGRATING AUDIO AND VIDEO** 28 Overview 28 Learning Objectives 28 Setting Up 29 Lesson Proper **Using HTML5 \ and \ tag pairs within a Web Page** **Adding Audio Controls and Saving Audio Files** 31 **Making Audio Files Work with Older Browsers** **Using HTML5 \ and \ tag pairs within a Web Page** **Adding Video Controls and Saving Video Files** 32 **Streaming versus Downloaded Video and Supporting Older Browsers** 34 Assessing Learning 36 Laboratory Exercise 3 39 Laboratory Exercise 4 40 **UNIT IV. INTRODUCTION TO JAVASCRIPT: FUNCTIONS, DOM, FORMS AND EVENT** **HANDLERS** 41 Overview 41 Learning Objectives Setting Up 42 Lesson Proper 43 **Brief history of JavaScript** 43 **JavaScript: Functions, Forms**, **Event handlers** **Document Object Model (DOM)** **External JavaScript Files** 50 Assessing Learning 52 Laboratory Exercise 5 55 **UNIT** V. **ADDITIONAL JAVASCRIPT TOPIC: WINDOW OBJECT, CLIENT-SIDE COMPUTATION AND FORM INPUT VALIDATION** 56 Overview 56 Learning Objectives 56 Setting Up Lesson Proper 57 58 **Client-Side Computation** 63 Assessing Learning 65 Laboratory Exercise 6 68 References 70 H **UNIT I. CREATING TABLE** IN A **WEB PAGE** **Overview** This unit starts with an overview of data tables and the HTML table elements used to create them, including table, tr, th, td, and more. It also discusses cell spanning, which involves merging adjacent cells to create larger cells. Additionally, it covers web accessibility techniques designed to improve understanding of data table content for users with disabilities. Lastly, it discusses laying out tables using various CSS properties. **Learning Objectives** At the end of the unit, I am able to: 2\. use the *\* and \* elements in web pages; 3\. create a borderless table for a horizontal navigation bar with text links; 4\. design tables using partition elements like *\\* and *\\;* 5\. create tables in a web page that span cells using the *rowspan* and *colspan* attributes, and 6\. improve the appearance of tables using additional CSS properties. 1 **Lesson Proper** **Data Tables Versus Layout Tables** A table consists of a group of cells organized in a two-dimensional structure with rows and columns. Typically, we associate a table\'s cells with data storage, but tables can also be used solely for presentation purposes. For presentation purposes, you can arrange content in specific locations on a web page using a row-column layout. For instance, you can place a navigation menu on the left, images on the right, and contact information at the bottom. Data tables often contain numbers, but they can also accommodate text and other types of content. Figure 1.1 presents an example of a data table that contains text, specifically descriptions for 3 students, and was created using Microsoft Word. **Student Name** Juan Dela Cruz Pedro Cruise Simon Ibarra 2021-21067 2021-21114 19 2021-21584 18 Figure 1.1 Sample Data Table Layout tables are not limited to holding data, unlike data tables. They can hold any type of content and are used to position that content with a row-column layout scheme (Figure 1.2). www Figure 1.2 Sample of Layout Table **Table Elements** Let\'s begin by examining a basic data table - the Students List table shown in Figure 1.3. This table displays the data of students, including their names, student numbers, ages, and genders, in a row-column format. While headers are not obligatory for a data table, they are commonly used. The Student List table has four column headers: \"Student Name,\" \"Student Number,\" \"Age,\" and \"Sex.\" To create a data table, start with a table container element, fill the *table* element with a *tr* element for each of its rows, and fill each tr element with *th* element for header cells and *td* elements for data cells. Figure 1.4 shows the code used to implement Figure 1.3 Students List web page. **Student Name** Juan Dela Cruz Pedro Cruise 2023-21067 2023-21114 2023-21584 20 Male 21 20 Male 3 Figure 1.3 Students List Web Page By default, browsers use a bold font for table header cells. This behavior is visible in Figure 1.3, where the headers \"Student Name,\" \"Student Number,\" \"Age,\" and \"Sex\" (implemented with *\* elements) appear bolder than the text values below them. This default behavior is reasonable as table headers are typically styled in boldface for business reports. **CSS Border Properties** \ \**Student Name**\ \**Student Number**\ \ In this section, we will explain how to format data tables, focusing on borders, cell alignment, and cell padding. In older versions of HTML, you could use HTML attributes to specify these presentation features. However, HTML5 has made those attributes obsolete as it aims to separate content from presentation. The solution is to use CSS for presentation. To specify whether or not you want borders for a table, you should use CSS\'s *border- style* property. To specify the border\'s width, you should use CSS\'s *border*-*width* property. For example, here\'s the CSS type selector rule used in the Student List web page: table, th**,** td {border: thin solid;} In the previous module, we learned that the *\"border\"* property is a shorthand property that encompasses a set of border-related properties. In the given example, the first value of the border property is \"thin,\" which corresponds to the \"*border*-*width\"* property, while the second value, \"solid,\" corresponds to the *\"border-style\"* property. With the *\"table,\" \"th,\"* and *\"td\"* all listed in the rule, the resulting web page displays a thin, solid border around each data cell. Let\'s discuss two formatting features: cell alignment and cell padding. If you do not add any CSS to a table, the browser\'s default CSS values will be used. By default, table header cells *(th*) are aligned center and have bold text, while table data cells *(td*) are aligned left. Both *th* and *td* cells have no default *padding.* You can use CSS\'s *text-align* property with values of left, right, or center to adjust the horizontal alignment of text in table cells. Additionally, to adjust the padding around the text in table cells, you can use CSS\'s *padding* property with a pixel value (e.g., 5px). Please take note of the Student List web page shown in Figure 1.3. Observe that the header text is aligned to the left, and there is padding around the text in each cell. Also, notice the varying border widths - the outer border is thicker than the cell borders, and there\'s an even thicker border below the header cells. **table{** **border: 2px solid black;** **th, td{** } **padding: 5px*;*** Figure 1.5 Student List Web Page CSS Code Structure In Figure 1.5, it\'s important to observe the gaps between the borders. There is a gap between the outer border of the table and the borders of the individual cells, as well as between the borders of adjacent cells. To remove these gaps and merge the borders, you can use the CSS property *border-collapse* with a value of *collapse*, like this: **table, th, td{** **}** **border: 1px solid black; padding: 5px*;*** **border-collapse: collapse;** **Student Name Student Number Age Sex** 20 Male Pedro Cruise 21 Male Simon Ibarra 20 Male **Partition Table using thead and tbody Elements** Normally, table header cells are placed at the top of a table\'s columns, but sometimes they can also be positioned at the left of each row. For instance, in the Students List web page shown in Figure 1.6, all data in the header cells should be noted. When using header cells, it is common to want to distinguish them from the content of the table data. The recommended method for doing this is to use the *thead* element for the header cells and the *tbody* element for the subsequent rows. In the example web page, different CSS *background-color* rules can be applied to the various groups of table cells, such as using midnight blue for the top cells and light blue for the remaining cells. 5 **Student Name Student Number Age Sex** Juan Dela Cruz 2023-21067 20 Male Pedro Cruise 2023-21114 21 Male Simon Ibarra 2023-21584 20 Male Figure 1.7 Table with specifying *thead* and *tbody* Elements **Spanning Table Cells** One thing to remember is that not all data tables follow a standard grid pattern with one cell for each row-column intersection. In some cases, a cell may span more than one intersection in the grid. For example, take a look at the Grade Weight web page in Figure 1.8. It uses a table element with three rows and six columns. The \"Assignment\" cell at the top merges three cells in the first row. The \"Laboratory\" cell merges two cells in the second column, and the \"Class Participation\" cell merges two cells in the first and second rows. **Assignments Laboratory Exercises** 1 2 3 10% 10% 10% 30% 1 2 36% **4**% In order to create a merged cell that spans across multiple columns, you will need to add a *colspan* attribute to a *th* or *td* element. On the other hand, if you want to merge table rows, you will need to add a *rowspan* attribute to a *th* or *td* element. You can refer to Figure 1.9 for the code of the Grade Weight web page. \ \**Assignments**\ Figure 1.9 Source code for Grade Weight Web Page In addition to the previous discussion about CSS properties that can be used to improve the appearance of a table on a web page, other properties can be added to enhance the appearance of the web page using table elements. HTML tables can be adjusted to fit specific dimensions using the *width* and *height* properties. These attributes can be applied to the *\ \* element to control its size. For example: 6 **table{** } In this example, the table width is set to 100% of its containing element, and the height is fixed at 200 pixels. You can also use absolute values (e.g., \`500px\') or relative values (e.g., \'80%) to define the table size. To control table alignment, the *align* attribute can be used, although it is now considered obsolete and better achieved with CSS. For horizontal alignment, CSS properties like *margin-left: auto; margin-right: auto;* can be employed to center a table, or the *text-align* property to align the text within table cells. Below is an example of how to center a table: **table{** **}** To align text within a table cell, you can use the *text-align* property: **th, td{** } To vertically align table content, use the *vertical-align* property. The value for the vertical-align property can be top, bottom, or middle. Horizontal dividers, also known as borders, can be added to separate rows and columns in an HTML table in a more visually appealing manner. This can be accomplished by using the *border* property to manage the appearance of borders in the *\\* element. **Student Name Student Number Age Sex** Juan Dela Cruz 2023-21067 20 Male Pedro Cruise 21 Male Simon Ibarra 2023-21584 20 Male Creating a *hoverable* table can improve the user experience by highlighting rows when the user hovers over them. This effect can be achieved using CSS. By adding a :hover pseudo- class selector to the table row \,* you can change the background color or other properties when a row is hovered over. **tr:hover{** **}** **background-color**: **\#f5f5f5;** In this example, when a user hovers over a row, the background color changes to light gray *(\#f5f5f5),* making the table more interactive and visually appealing. Understanding these additional properties enables you to create more visually appealing and functional HTML tables. Adjusting table size, aligning content, adding horizontal dividers, and making tables hoverable can significantly enhance the user experience and presentation of data in your web applications. c. Hide the table borders when hovered over d\. Rotate the table cells on hover a\. font-color b\. text-color C. color d\. text 16\. What is the purpose of the \`table-layout CSS property? a\. To adjust the layout of the table within its containing element b\. To specify the overall width of the table c\. To control the algorithm used to lay out the table cells d\. To create a responsive table design 17\. How can you apply alternating background colors to rows in an HTML table using CSS? a\. tr:nth-child(even) { background-color: \#f2f2f2; } b\. table.alternate-rows { background: alternate; } **C.** table.rows-odd { background: odd;} d\. tr.alternate { background-color: alternate; } a\. cell-spacing b\. table-spacing c\. spacing d\. border-spacing a\. table {border-width: 2px; } b\. table.border { width: 2px; } c\. table {border: 2px; } d\. table.border { border: 2px; } 20\. Which HTML attribute adjusts the alignment of text within table cells? a\. text-align b\. align c\. cell-align d\. vertical-align 11 **UNIT II. GETTING USER INPUT WITH FORMS** **Overview** HTML forms are essential for gathering user input on web pages, enabling interactions such as registration, login, and data collection. By using form elements like \, \, \, and \, developers can create interactive and user- friendly interfaces. Forms support various input types, including text, email, password, and more, ensuring versatility in capturing diverse data types. Additionally, forms can be styled with CSS for better usability. Properly designed forms are crucial for effective user engagement and data submission in web applications. **Learning Objectives** At the end of the unit, I am able to: 1\. describe the importance of HTML forms in a web page; 2\. construct a web page using \ and \ elements that integrates with backend services for data processing; 3\. develop an HTML form that incorporates multiple input types, each chosen to optimize data entry for specific user tasks; and 4\. create an HTML form that uses a wide range of input attributes to provide advanced features; **Lesson Proper** **Introduction to HTML Form** HTML forms are a fundamental part of web development, enabling user interaction with web pages. They are used to collect user input and send it to a server for processing. Forms are essential for various web applications, such as login pages, registration forms, search boxes, and online surveys. The feedback of the user is mostly submitted to a server for review. Form processing is often called client/server processing because it requires both a client (a browser) and a remote server. An HTML form is created using the *\ and *\* elements. Inside the *\* and \* tags, you can add different form elements, such as text fields, checkboxes, radio buttons, and submit buttons. Here\'s a simple example of an HTML form: Email or Phone roangcochanco\@gmail.co Password Forgot account? **Log In** Figure 2.1 Sample Log In Form In Figure 2.1, the input fields are labeled as email, phone, and password. The \"Log In\" button allows users to submit the data entered in the text fields. **HTML \ and \ Elements** To create a form in an HTML webpage, you can use the *\* tag pair. The *\* element is a container for different types of input elements, like text fields, checkboxes, radio buttons, and submit buttons. There are several attributes used in the \ element: 1\. The *action* attribute specifies the action to be performed when the form is submitted. Typically, form data is sent to a file on the server when the user clicks the submit button. 2. The *target* attribute determines where the response received after submitting the form will be displayed. It can have values such as *blank, \_self, \_parent,* and *\_top*. The default value *is\_self,* which means that the response will open in the current window or tab. 3\. The *method* attribute specifies the HTTP method to be used when submitting the form data. The form data can be sent as URL variables using *method=\"get\"* or as an HTTP post transaction with *method=\"post*\" value. The HTML \ element can contain one or more of the following form elements: \ \ and \ \ and \ \ and \ \ and \ \ and \ \ and \ \ and \ \ and \ 15 Understanding the different form elements and their functions is essential for creating effective and user-friendly forms. Each element has a specific purpose and, when used correctly, improves the overall user experience and functionality of web forms. The \* element is one of the most versatile form elements. It can be used for various types of inputs, such as text, passwords, emails, checkboxes, radio buttons, and more. Example: **\