BCAV104 Web Technology Lab Manual: Exhaustive Study Guide

Institutional Infrastructure and Governance

• University Identity: Yashwantrao Chavan Maharashtra Open University (YCMOU), Nashik. Established at Dnyangangotri, Near Gangapur Dam, Nashik-$422222$.
• Leadership:   - Vice-Chancellor: Prof. Sanjeev Arjunrao Sonawane.   - Pro Vice Chancellor: Dr. Jogindrasingh Bisen.
• School Council Committee Members:   - Shri. Madhav Palshikar (Associate Professor, School of Computer Science, YCMOU).   - Prof. Ram Thakar (Director and Professor, School of Vocational Education & Skill Development, YCMOU).   - Dr. Latika Gaikwad (Associate Professor, School of Commerce and Management, YCMOU).   - Dr. Chetana Kamalskar (Director and Associate Professor, School of Sciences, YCMOU).   - Dr. Madhuri Sonawane (Director and Professor, School of Agricultural Sciences, YCMOU).   - Mrs. Shubhangi Patil (Assistant Professor, Student Services Division, YCMOU).   - Dr. Sanjay Tambat (Head of Department, Communication and Journalism, Savitribai Phule Pune University).   - Dr. Vahida Attar (Dean, School of Computational Sciences, Department of CSE, College of Engineering, Pune).   - Dr. Pravin Yannawar (Director & Professor, UNIC, Dr. Babasaheb Ambedkar Marathwada University).   - Dr. Sopan Talekar (Head & Associate Professor, IT Department, K.B.T. College of Engineering, Nashik).   - Mr. Shaikh Ahtesham (Assistant Professor, IT Department, Anjuman-i-Islam’s Akbar Peerbhoy College, Mumbai).   - Dr. Neelambari Joshi (Freelancing Author, Pune).   - Smt. Ranjita Rathor (Invitee, Academic Coordinator, School of Computer Science, YCMOU).   - Ms. Rameshwari Pawar (Invitee, Academic Coordinator, School of Computer Science, YCMOU).   - Dr. Yogesh Waghadkar (Invitee, Academic Coordinator, School of Computer Science, YCMOU).
• Programme Advisory Committee Members (B.C.A. $2025$ Pattern):   - Members include Shri. Madhav Palshikar, Dr. Chetana Kamalskar, Dr. Revati Namjoshi (Sr. General Manager, MKCL), Mr. Arun Maurya (K.P.B. Hinduja College), Dr. Neelambari Joshi, Mr. Sanjay Modiyani (Modiyani Computer Services), Mr. Anil Gaikwad (JS College of Engineering), Mrs. Ranjita Rathor, and Prof. Shubhangi Patil.
• Licensing: Licensed under Creative Commons Attribution-Non Commercial-ShareAlike $4.0$ International License.

Academic Course Specifications: BCAV104 Web Technology Lab

• Program: Bachelor of Computer Applications (B.C.A.).
• Academic Year: $2025$ – $2026$.
• Credit Value: $2$.
• Foundational Objectives:   - Introduce core web architecture and client-server communication standards.   - Develop technical proficiency in HTML, CSS, and JavaScript.   - Enable design of responsive and user-friendly web interfaces.   - Familiarize students with DOM manipulation, event handling, and modern frameworks.   - Equipping students with skills for testing and deploying functional websites with security and accessibility basics.
• Learning Outcomes: Students will be able to explain the World Wide Web, develop structured HTML pages, style pages with CSS, implement client-side JavaScript interactivity, and deploy functional front-end interfaces.

HTML Fundamentals: Lists and Navigation

• Unordered List (Experiment $1.a$): Uses the <ul> tag with type="square". Example lists colleges in Kurnool: GPREC, RGMCET, and GPCET. Background color set to "pink".
• Ordered List (Experiment $1.b$): Uses the <ol> tag with type="A". Example lists RGMCET branches: CSE, IT, ECE, EEE, CIVIL, and ME.
• Definition List (Experiment $1.c$): Uses <dl>, <dt> (Definition Term), and <dd> (Definition Description). Examples include:   - CSE: Computer Science & Engineering.   - ECE: Electronics & Communication Engineering.   - CE: Civil Engineering.
• Nested Lists (Experiment $1.d$): A combination of an ordered list for cities (Kurnool, Nandyala) containing unordered lists for respective colleges.
• Hyperlinks (Experiment $2$):   - Inter-page Navigation: Using <a href="login.html"> for page transitions. Body attributes used: link="green", vlink="blue", and alink="red".   - Intra-page Navigation: Utilizing <a name="top"> and <a name="bottom"> with <a target="#bottom"> (verbatim from manual) to jump within the same document.

Complex Web Structuring: Tables and Frames

• Academic Time-table (Experiment $3$): A complex table for "III CSE" using attributes like border="2", cellspacing="0", and cellpadding="15".   - Spans: Utilizes rowspan="7" for "TEA BREAK" and "LUNCH BREAK". Utilizes colspan="2" or colspan="3" for laboratory sessions (AP Lab, WT Lab, C# Lab) and MOOC'S.   - Content: Includes subjects like IS, WT, SEM, OOAD, SCI, C#, and LIB.
• Frameset Implementation (Experiment $4$): Developing a static home page for "RGM ENGINEERING COLLEGE" using <frameset>.   - Layout: Divided into cols="30%,70%". The left column has rows 25%,25%,50% loading logo.html, home1.html, and courses.html. The right column loads name.html, table.html, and a dynamic frame named "display" loading default.html.

Static Web Forms and E-Commerce Catalogs

• Registration Form (Experiment $5$): Collects user data via:   - Text inputs: First Name, Last Name, UserName, Mobile Number.   - Password inputs: Password, Confirm Password.   - Textarea: Address.   - Select/Dropdowns: Date of Birth with days ($01$ to $31$), months ($01$ to $12$), and years ($1987$ to $2017$).   - Radio Buttons: Sex (Male, Female), Marital Status (Single, Married), and Branch (CSE, IT, ECE, EEE, MECH).   - Checkboxes: Languages Known (English, Telugu, Hindi, Kannada, Tamil).
• Login Page (Experiment $6$): A simple interface with username (text) and password functionality.
• Product Catalog (Experiment $7$): A table-based layout containing:   - Images (size $100 imes 100$).   - Book details: "XML Bible" by Wingston ($40.5$), "A1" by S.Rusell ($63$), "JAVA 2" by Watson ($35.5$), and "Html in 24 hrs" by Sam Peter ($50$).   - Functional "add to cart" buttons.
• Shopping Cart (Experiment $8$): A table displaying Book name, Price, Quantity, and Amount. Example total amount: $130.5$.

Styling and Cascading Style Sheets (CSS)

• Embedded Stylesheets (Experiment $9.a$): Defined within <style type="text/css"> in the document head. Examples include setting body {background-color: pink;} and h1 {color:orange; text-align: center;}.
• External Stylesheets (Experiment $9.b$): Uses an external file extern.css containing style rules, linked via <link rel="stylesheet" type="text/css" href="extern.css">.
• Inline Styles (Experiment $9.c$): Directly styling HTML elements using the style attribute. Example: <th colspan="2" style="background-color:red"> for table headers or <td style="background-color:grey"> for cell background colors.

Client-Side Scripting and Validation with JavaScript

• User Login Validation (Experiment $10$):   - Function formValidator(): Checks for empty fields and validates that the username contains only alphabets.   - Logic: Uses isEmpty() helper and regex var alphaExp=/^[a-z A-Z]+$/; within isAlphabet().
• Advanced Registration Validation (Experiment $11$):   - User ID: Length between $5$ and $12$.   - Password: Length between $7$ and $12$.   - Name: Alphabetic characters only via regex /^[A-Za-z]+$/.   - Address: Alphanumeric characters only via regex /^[0-9a-zA-Z]+$/.   - Email: Strict format validation using regex /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.   - Sex: Ensures at least one radio button (Male/Female) is checked.

XML Data Management and Transformation

• Customer Details XML (Experiment $12$): Organizes data into <CUSTOMER> tags containing <NAME>, <DATE>, and <ORDERS>. Items include Mobile Sets ($14000$) and Mp3 Players ($1300$).
• Internal DTD Validation (Experiment $13$): Defines structure within the XML file using <!DOCTYPE DOCUMENT[...]. Specifies that DOCUMENT can contain multiple CUSTOMER elements and defines #PCDATA for leaf nodes like FIRST_NAME and LAST_NAME.
• External DTD Validation (Experiment $14$): Employs extern.dtd and cust.xml. The XML references the schema using <!DOCTYPE document SYSTEM "extern.dtd">.
• XML Access via XSL (Experiment $15$):   - XML source: Ppl.xml linked to people.xsl.   - XSL logic: Uses <xsl:for-each select="people/person"> and <xsl:value-of select="@born"/> to transform XML data into an HTML table with headers: Born, Firstname, Lastname, and Profession.
• XML Access via DOM (Experiment $16$): Utilizing JavaScript ActiveXObject("Microsoft.XMLDOM") to traverse the school XML tree. It uses properties like firstChild, lastChild, and nextSibling to retrieve and display the second student's name value.
• XML Table via Extensible Style Sheets (Experiment $17$): Transforms Book.xml into a multi-colored HTML table. Each cell in a row is styled differently (pink, red, green, purple, brown, yellow) via XSLT while displaying title, authorname, ISDN number, publisher, edition, and price ($50$, $100$).