Name: - ____________________________________ Department: - ______________________________ Class: - ____________________________________ Roll No: - ___________________________________ 2025 - 2026 SHRI. G.P.M. DEEGRE COLLEGE SHRI G.P.M. DEGREE COLLEGE Rajarshi Sahu Maharaj Marg, Telli Galli, Andheri (E), Mumbai - 400069 Tel.: 8928387199 CERTIFICATE This is certified that Mr./Ms.____________________________________________ a Student of F .Y. B.Sc. C.S. Roll No. ________ has completed the Number Of Practical In the Subject of ________________________________________ as Prescribed by the University of Mumbai under my Supervision during the academic year 2025 - 26. Signatories: Subject In - charge (Name & Sign): ____________________ Principal Sign (Name & Sign): _______________________ External Examiner (Name & Sign): ____________________ Date: - __________________________ College Stamp SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Term Work Index Sheet Term Work Certification Certified that Mr/Ms _______________________________________________ Class ___________ Roll No. ________ Course __________ _ ___________ has completed the required number of Practicals / Term Work / Sessional in the _________________ _ ___ in the Department of _______ _______ _____ during the academic year _ __ _____ successfully. Signature of Faculty Signature of HOD Signature of Principal Date: Date: Date: Prof. name: Mr. Sahil Singh Class/SEM : F.Y.BSC. CS / SEM II (2025 - 2026) Course code: Subject name: Web Technologies Sr. No Date Topics Signature 1 Design a basic web page 2 Designing a Web Page with Tables, Forms, Navigation, and Embedded Multimedia 3 Designing a Web Page Using Cascading Style Sheets (CSS) 4 JavaScript Programming & Form Validation 5 JavaScript Objects and Cookie Management 6 Creating an XML File with Internal/External DTD and Displaying It Using CSS and XSL 7 Design a Webpage to Handle Asynchronous Requests Using AJAX 8 PHP Programming – Forms, Mathematical Operations, Arrays & File Handling 9 Design a Webpage With jQuery Animation Effects SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Experiment No. — 1 : Design a basic web page Aim: Design a web with a. Use of document structure tag b. Various Text Formatting Tags c. List Tags d. Image and Image Maps Tools Used: Programming Language: HTML Compiler/IDE: VS Code / Sublime Text / Notepad++ Learning Objectives: 1. To understand the basic structure of an HTML document, including , , , and <body> tags. 2. To explore various text formatting tags ( <h1> – <h6> , <p> , <b> , <i> , <u> , <strong> , <em> ) to present text effectively. 3. To learn and implement different types of lists ( <ol> , <ul> , <dl> ) to organize information clearly. 4. To understand image handling and image maps ( <img> , <map> , <area> ) for displaying graphics and clickable regions. 5. To integrate document structure, text formatting, lists, and images to create a cohesive and functional web page. Theory: Introduction Designing a web page is the first step in learning web development. A web page is a structured document displayed by web browsers, containing text, images, and interactive elements. HTML (HyperText Markup Language) provides the building blocks for web page s. Understanding document structure, text formatting, lists, and image handling is essential for creating readable and interactive pages. This experiment demonstrates these concepts practically, enabling students to apply them in web design effectively. 1. Document Structure Tags Every HTML page follows a structured layout to help browsers interpret and render content correctly. These tags define the hierarchy and organization of a web page. SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Key Tags: • <html> : Root element containing all HTML content. • <head> : Contains metadata, page title, and links to resources. • <title> : Sets the page title displayed on the browser tab. • <body> : Contains all the visible content on the page. Example: <!DOCTYPE html> <html> <head> <title>My Web Page

Welcome!

This is my first web page.

2. Text Formatting Tags Text formatting tags allow content to be emphasized, organized, or styled for better readability. Common Tags: •

to

: Headings, with

being the largest. •
: Paragraph text. • : Bold text. • : Italic text. • : Underlined text. • : Important text. • : Emphasized text. Example:
*This is bold** and italic text.***

Subheading Example
3. List Tags Lists organize content clearly for users. HTML supports different list types: SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai • Ordered List (
) : Automatically numbered. • Unordered List (
) : Bulleted items. • Definition List (
) : Terms and descriptions. Example:
Shopping List:

Apples

Bread

Milk

Steps to Bake a Cake:

Preheat oven

Mix ingredients

Bake for 30 minutes

4. Image and Image Maps Images add visual appeal, while image maps allow clickable areas for navigation. Image Tag: • : Embeds an image. o Attributes: src , alt , width , height Example: Image Map Example: SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Code : < html > < head > < title > My Sample Web Page < body > < h1 > Welcome to My Web Page < h2 > HTML Practice < p > This is a < b > bold word, < i > italic word, < u > underlined word, < strong > important text, and < em > emphasized text. < h3 > My Favorite Fruits < ul > < li > Apple < li > Banana < li > Cherry < h3 > Steps to Make Tea < ol > < li > Boil water < li > Add tea leaves < li > Pour into cup and serve < h3 > Example Image < img src = "Example.jpg" alt = "Example" width = "300" > < h3 > Clickable Map Example < img src = "planet.jpg" usemap = "#planetmap" alt = "Planet Map" width = "400" height = "200" > < map name = "planetmap" > < area shape = "rect" coords = "0,0,100,100" href = "mercury.html" alt = "Mercury" > SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai < area shape = "circle" coords = "150,100,50" href = "venus.html" alt = "Venus" > < area shape = "poly" coords = "200,0,300,0,250,100" href = "earth.html" alt = "Earth" > Output: SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Learning Outcomes: 1. Understand and implement the structure of an HTML document with proper use of , , , and <body> 2. Apply text formatting tags to improve readability and emphasize important content on a web page. 3. Create ordered, unordered, and definition lists for effective content organization. 4. Insert images and design interactive image maps with clickable areas. 5. Combine document structure, formatting, lists, and images to develop a complete, well - structured, and visually clear web page. Course Outcomes: By completing this experiment, students gain practical experience in designing structured web pages using HTML. They learn to organize content effectively through proper use of document structure tags, apply text formatting for clarity and emphasis, create and manage different types of lists, and integrate images along with interactive image maps. This hands - on practice enables students to build functional, visually organized, and user - friendly web pages, providing a solid foundation for further web develop ment concepts and real - world web design applications. SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Conclusion: Successfully designed and implemented a web page using HTML. All document structure tags, text formatting, lists, and images including image maps were correctly used and tested. The web page functioned as intended, demonstrating proper content organization , formatting, and interactive elements. Practical objectives were fully achieved. Viva Questions: 1. What is the purpose of the <html> tag in a web page? 2. Explain the difference between <ol> and <ul> tags. 3. How do <b> and <strong> tags differ in HTML? 4. What is an image map, and how do you create clickable areas within an image? 5. Why is the <head> section important in an HTML document? For Faculty use: Correction Parameters Formative Assessment[40%] Timely Completion of Practical[40%] Attendance Learning Attitude[20%] SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Experiment No. — 2 : Designing a Web Page with Tables, Forms, Navigation, and Embedded Multimedia Aim: Practical No - 2: Design a web page use of a. Table Tags b. Form Tags (forms with various form Element) c. Navigation of multiple web pages d. Embeded multimedia elements Tools Used: Programming Language: HTML Compiler/IDE: Visual Studio Code / Sublime Text / Notepad++ Learning Objectives: 1. To understand how to create and structure tables in HTML for presenting organized data effectively. 2. To explore various form elements such as text fields, radio buttons, checkboxes, dropdowns, and buttons to capture user input. 3. To learn navigation techniques across multiple web pages using hyperlinks and menus. 4. To integrate multimedia elements like images, audio, and video into web pages for a richer user experience. 5. To combine tables, forms, navigation, and multimedia into a cohesive, functional, and interactive web page. Theory: Introduction Web development is not only about displaying text but also about organizing content, collecting input, navigating across pages, and including rich media for better interactivity. This practical introduces HTML elements that enable developers to create stru ctured, interactive, and multimedia - rich web pages. Using tables, forms, navigation, and multimedia elements effectively helps in designing web pages that are both functional and user - friendly. Understanding these concepts is essential for creating modern websites that respond to user input and present information clearly. 1. Table Tags SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai Tables are used to display structured data in rows and columns. They are essential for organizing information in a readable and compact format. Key Tags: • <table> : Defines the table. • <tr> : Table row. • <th> : Table header cell (bold and centered by default). • <td> : Table data cell. • <caption> : Adds a title for the table. Example: <table border="1"> <caption>Student Scores</caption> <tr> <th>Name</th> <th>Math</th> <th>Science</th> </tr> <tr> <td>Alex</td> <td>85</td> <td>90</td> </tr> <tr> <td>Maria</td> <td>92</td> <td>88</td> </tr> </table> Explanation: The table above displays student scores in a structured way, making the data easy to read. 2. Form Tags Forms allow web pages to capture user input. HTML provides multiple elements for different types of input. Common Form Elements: • <form> : Encapsulates form elements. • <input type="text"> : Single - line text input. • <input type="radio"> : Radio button (single choice). SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai • <input type="checkbox"> : Checkbox (multiple selections). • <input type="submit"> : Submit button. • <textarea> : Multi - line text input. • <select> & <option> : Dropdown menu. Example: <form action="submit.html" method="post"> Name: <input type="text" name="username"><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female<br> Interests: <input type="checkbox" name="interests" value="coding"> Coding <input type="checkbox" name="interests" value="music"> Music<br> <input type="submit" value="Submit"> </form> Explanation: Forms allow capturing structured user data, which can be sent to a server or used in scripts. 3. Navigation Across Multiple Web Pages Hyperlinks allow users to move from one page to another, creating a connected website. Key Tag: • <a href="url"> : Anchor tag for navigation. Example: <a href ="home.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a> Explanation: Navigation links help users explore different sections of a website seamlessly. Flowchart for Navigation: Home Page | | -- > About Page | | -- > Contact Page SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai 4. Embedded Multimedia Elements Multimedia elements improve the user experience by adding audio, video, and interactive content. Image: <img src="image.jpg" alt="Sample Image" width="300"> Audio: <audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> Video: <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Explanation: • Images visually enhance content. • Audio can provide background music or spoken instructions. • Videos can demonstrate tutorials or dynamic content. Code : a) Index.html <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf - 8" /> < title > Practical 2 - Home </ title > </ head > < body > < h1 > Practical No. 2: Tables, Forms, Navigation & Multimedia </ h1 > <! -- Navigation -- > < nav > SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai < a href = "index.html" > Home </ a > | < a href = "form.html" > Form </ a > | < a href = "media.html" > Multimedia </ a > | < a href = "about.html" > About </ a > </ nav > < hr /> <! -- Table example -- > < h2 > Student Scores (Table Example) </ h2 > < table border = "1" cellpadding = "6" cellspacing = "0" > < caption >< strong > Class 10A - Midterm Scores </ strong ></ caption > < tr > < th > Roll No </ th > < th > Name </ th > < th > Math </ th > < th > Science </ th > < th > Remarks </ th > </ tr > < tr > < td > 01 </ td > < td > Alice </ td > < td > 88 </ td > < td > 92 </ td > < td > Good </ td > </ tr > < tr > < td > 02 </ td > < td > Bob </ td > < td > 76 </ td > < td > 81 </ td > < td > Satisfactory </ td > </ tr > < tr > < td > 03 </ td > < td > Carol </ td > < td > 95 </ td > < td > 89 </ td > < td > Excellent </ td > </ tr > </ table > < hr /> SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai < p > Use the navigation links above to try the form and multimedia pages. </ p > </ body > </ html > b) Form.html <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf - 8" /> < title > Practical 2 - Form </ title > </ head > < body > < h1 > Feedback & Registration Form </ h1 > < nav > < a href = "index.html" > Home </ a > | < a href = "form.html" > Form </ a > | < a href = "media.html" > Multimedia </ a > | < a href = "about.html" > About </ a > </ nav > < hr /> < form action = "submit.html" method = "get" > <! -- Text inputs -- > < label for = "name" > Full Name: </ label >< br /> < input type = "text" id = "name" name = "name" required />< br />< br /> < label for = "email" > Email: </ label >< br /> < input type = "email" id = "email" name = "email" required />< br />< br /> <! -- Password -- > < label for = "password" > Password: </ label >< br /> < input type = "password" id = "password" name = "password" />< br />< br /> <! -- Radio buttons -- > < label > Gender: </ label >< br /> SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai < input type = "radio" id = "male" name = "gender" value = "Male" /> < label for = "male" > Male </ label > < input type = "radio" id = "female" name = "gender" value = "Female" /> < label for = "female" > Female </ label >< br />< br /> <! -- Checkboxes -- > < label > Interests: </ label >< br /> < input type = "checkbox" id = "coding" name = "interest" value = "Coding" /> < label for = "coding" > Coding </ label > < input type = "checkbox" id = "music" name = "interest" value = "Music" /> < label for = "music" > Music </ label > < input type = "checkbox" id = "sports" name = "interest" value = "Sports" /> < label for = "sports" > Sports </ label >< br />< br /> <! -- Select / Dropdown -- > < label for = "country" > Country: </ label >< br /> < select id = "country" name = "country" > < option value = "" > -- Select -- </ option > < option value = "India" > India </ option > < option value = "USA" > USA </ option > < option value = "UK" > UK </ option > < option value = "Other" > Other </ option > </ select >< br />< br /> <! -- Textarea -- > < label for = "message" > Message: </ label >< br /> < textarea id = "message" name = "message" rows = "4" cols = "40" ></ textarea >< br />< br /> <! -- File input (note: file upload requires server to handle) -- > < label for = "resume" > Upload Resume (optional): </ label >< br /> < input type = "file" id = "resume" name = "resume" accept = ".pdf,.doc,.docx" />< br />< br /> <! -- Submit and Reset -- > < input type = "submit" value = "Submit" /> < input type = "reset" value = "Reset" /> </ form > </ body > </ html > SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai c) media.html <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf - 8" /> < title > Multimedia Examples </ title > </ head > < body > < h1 > Embedded Multimedia </ h1 > < nav > < a href = "index.html" > Home </ a > | < a href = "form.html" > Form </ a > | < a href = "media.html" > Multimedia </ a > | < a href = "about.html" > About </ a > </ nav > < hr /> <! -- Image -- > < h2 > Image Example </ h2 > < img src = "Example.jpg" alt = "Sample Image" width = "400" /> < hr /> <! -- Audio -- > < h2 > Audio Example </ h2 > < audio controls > < source src = "Awaaz.mp3" type = "audio/mpeg" /> Your browser does not support the audio element. </ audio > < hr /> <! -- Video -- > < h2 > Video Example </ h2 > < video width = "480" height = "270" controls > < source src = "Itachi.mp4" type = "video/mp4" /> Your browser does not support the video element. </ video > </ body > </ html > SHRI G.P.M. DEGREE COLLEGE OF SCIENCE & COMMERCE Department of Computer Affiliated to University of Mumbai d) about.html <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf - 8" /> < title > About - Practical 2 </ title > </ head > < body > < h1 > About This Practical </ h1 > < nav > < a href = "index.html" > Home </ a > | < a href = "form.html" > Form </ a > | < a href = "media.html" > Multimedia </ a > | < a href = "about.html" > About </ a > </ nav > < hr /> < p > This practical demonstrates HTML tables, forms, navigation, and embedded multimedia. Open each page to explore the examples. Ensure media files (image.jpg, sample - audio.mp3, sample - video.mp4) are in the same folder. </ p > </ body > </ html > e) submit.html <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "utf - 8" /> < title > Form Submission Result </ title > </ head > < body > < h1 > Form Submission Result </ h1 > </article></body></html>

Signaler un abus

Détails PDF

Coordonnées

Web