Scribd
Upload
9 views

Web Technology Lab Aim and Algorithm

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Web Technology Lab Aim and Algorithm

Uploaded by

21SMS06 -MERCY. P
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

EX.NO.01 Develop a web page to display your education details in a tabular format.

Aim:
To develop a web page that displays education details in a tabular format using HTML and
CSS.
Procedure:
1. Open a text editor (e.g., Visual Studio Code).
2. Create a new HTML file and save it as `education_details.html`.
3. Set up the basic HTML structure with `<!DOCTYPE html>` and `<html>` tags.
4. Include `<head>` section with `<meta>` tags for character set and viewport.
5. Add a `<title>` for the web page.
6. Write CSS styles within a `<style>` tag to enhance the appearance of the page.
7. Create a `<div>` container to hold the content.
8. Add an `<h1>` heading for the title of the education details.
9. Construct a `<table>` with appropriate headers (`<th>`) and rows (`<tr>`) for education
details.
10. Save the file and open it in a web browser to view the result.
Result:
The web page successfully displays the education details in a structured table, clearly
showing the degree, institution, year of passing, and percentage/grade, with a user-friendly
design that enhances readability.
EX.NO.02 Develop a web page to display your CV on a web page.
Aim:
To develop a web page that effectively displays an MCA student's CV using HTML and CSS.
Procedure:
1. Open a code editor (e.g., Visual Studio Code).
2. Create a new file named `mca_student_cv.html`.
3. Start with the `<!DOCTYPE html>` declaration.
4. Set up the `<html>` and `<head>` sections, including the `<title>`.
5. Add internal CSS styles in a `<style>` tag for layout and design.
6. Create a `<div class="container">` to hold all content.
7. Add the main heading (`<h1>`) for the student's name.
8. Construct a `<table>` for education details with appropriate headers and data.
9. Include sections for skills, projects, experience, certifications, and contact information
using headings and lists.
10. Save and open the file in a web browser to view the CV.
Result:
The web page successfully displays a well-structured CV for an MCA student, showcasing
their educational background, skills, projects, experience, and contact details in a visually
appealing format.
3. Design a Homepage having three links: About Us, Our Services and Contact Us.
Create separate web pages for the three links.
Aim:
To design a homepage with links to "About Us," "Our Services," and "Contact Us," and
create separate sections for each page.
Procedure:
1. Open a code editor and create a new HTML file named `homepage.html`.
2. Add the `<!DOCTYPE html>` declaration at the top.
3. Set up the `<html>`, `<head>`, and `<title>` sections for the document.
4. Include internal CSS styles within a `<style>` tag for layout and navigation.
5. Create a `<nav>` element with links for Home, About Us, Our Services, and Contact Us.
6. Implement a JavaScript function to display the selected content section and hide others.
7. Add a `<div>` for each section: Home, About Us, Our Services, and Contact Us.
8. Populate each section with relevant content and headings.
9. Use the JavaScript function to show the Home section by default when the page loads.
10. Save and open the file in a web browser to test the navigation functionality.
Result:
The webpage successfully displays a homepage with navigation links. Clicking on each link
shows the corresponding section (About Us, Our Services, Contact Us) while hiding the
others, creating an interactive user experience.
4. Design a web page to demonstrate the usage of inline CSS, internal CSS and external
CSS.
Aim:
To design a web page that demonstrates the usage of inline CSS, internal CSS, and external
CSS.
Procedure:
1. Open a code editor and create a new HTML file named css_demo.html.
2. Add the <!DOCTYPE html> declaration at the top.
3. Set up the <html>, <head>, and <title> sections for the document.
4. Within the <head>, create a <style> tag for internal CSS styles.
5. Define styles for body, headings, and classes for internal and external CSS.
6. Add a heading using inline CSS by using the style attribute directly in the <h1> tag.
7. Create a <div> for internal CSS and apply the class defined in the internal CSS
section.
8. Create another <div> for external CSS, simulating it with a class from the internal
CSS section.
9. Populate each section with relevant text to demonstrate the different CSS methods.
10. Save and open the file in a web browser to view the styling effects.
Result:
The webpage effectively demonstrates inline, internal, and external CSS styling methods.
5. Design an XML document and create a style sheet in CSS & display the document in
the browser.
Aim:
To design an XML document with student details and apply CSS styling to display it in a
browser.
Procedure:
1. Create an XML document (`students.xml`) to hold student information.
2. Define the structure with elements like `<students>`, `<student>`, `<name>`, `<age>`,
`<course>`, and `<grade>`.
3. Include a reference to a CSS stylesheet within the XML using `<?xml-stylesheet
type="text/css" href="style.css"?>`.
4. Create a CSS file (`style.css`) to style the XML document.
5. Use CSS to format the `<students>` and `<student>` elements.
6. Style the `<name>`, `<age>`, `<course>`, and `<grade>` elements for better readability.
7. Set properties like background color, padding, borders, and font styles in the CSS.
8. Save both files in the same directory.
9. Open the XML document in a web browser.
10. Verify that the XML content is displayed with the specified CSS styles.
Result:
The XML document is displayed in the browser with the defined styles, enhancing its visual
appeal and readability.
6. Develop a web page to Create image maps.
Aim:
To develop a web page that demonstrates the creation and usage of image maps for
interactive areas on an image.
Procedure :
1. Create a basic HTML structure with `<!DOCTYPE html>`, `<html>`, `<head>`, and
`<body>` tags.
2. Add a title for the web page within the `<title>` tag.
3. Include internal CSS in the `<style>` tag for styling the page elements.
4. Insert an `<h1>` header for the title of the image map.
5. Add an `<img>` element to display a world map and set the `usemap` attribute to reference
the image map.
6. Define a `<map>` element with a `name` attribute corresponding to the `usemap`.
7. Use `<area>` tags within the `<map>` to specify clickable regions, defining their shape and
coordinates.
8. Set the `href` attribute of each `<area>` to link to relevant Wikipedia pages, adding
`target="_blank"` to open in a new tab.
9. Save the HTML file and ensure the image source is accessible.
10. Open the HTML file in a web browser to test the functionality of the image map.
Result:
The web page displays a world map with clickable areas that link to Wikipedia articles for the
USA, India, and Australia when clicked.
7. Design a web page to perform input validation using Angular Java script.
Aim:
To design a web page that performs input validation using AngularJS to ensure user data is
correctly entered before submission.
Procedure:
1. Create a basic HTML structure with `<!DOCTYPE html>`, `<html>`, `<head>`, and
`<body>` tags.
2. Include the AngularJS library using a CDN link within the `<head>` section.
3. Add internal CSS for styling the form and layout to enhance user experience.
4. Set up an AngularJS application and controller using `ng-app` and `ng-controller`
directives.
5. Create a form using the `<form>` tag with `ng-submit` to handle form submission.
6. Define input fields with `ng-model` for data binding and validation requirements (e.g.,
`required`, `ng-minlength`).
7. Display error messages conditionally using `ng-show` to inform users of validation errors.
8. Implement a submit function in the controller to check form validity and provide feedback.
9. Reset the form after successful submission by clearing the model and resetting the form
state.
10. Test the form in a web browser to ensure validation works as expected.
Result:
The web page validates user input and displays appropriate error messages for missing or
incorrect fields, confirming successful submission when all fields are valid.
8. Develop a web page in PHP to fetch details from the database.
Aim:
To develop a PHP web page that fetches and displays user details from a simulated database.
Procedure:
1. Start with the PHP opening tag `<?php` to enable PHP scripting.
2. Simulate a database using an array of associative arrays containing user details (ID, name,
email).
3. Define a function `fetchUsers()` that takes the user array as a parameter.
4. Check if the user array is empty and return a message if no users are found.
5. Initialize an output string to build HTML content for displaying user details.
6. Use a `foreach` loop to iterate through each user and format their details into list items.
7. Append each user's details to the output string.
8. Close the unordered list in the output string.
9. Return the final output string from the function.
10. Call the `fetchUsers()` function and echo the result to display user details on the web
page.
Result:
The web page displays a list of user details, including their ID, name, and email, formatted in
an unordered list.
9. Design a web page to hide paragraph using JQuery.
Aim:
To create a web page that allows users to hide and show a paragraph using jQuery.
Procedure:
1. Begin with the HTML structure including the `<!DOCTYPE html>` declaration.
2. Include the jQuery library using a `<script>` tag.
3. Set up CSS styles for body, container, paragraph, and button for layout and aesthetics.
4. Create a button with an ID of `toggle-button` for triggering the hide/show action.
5. Add a paragraph with an ID of `paragraph` that will be hidden or shown.
6. Use `$(document).ready()` to ensure the DOM is fully loaded before running scripts.
7. Set up a click event handler on the button using `$('#toggle-button').click()`.
8. Inside the handler, select the paragraph using `$('#paragraph')`.
9. Use an `if` statement to check if the paragraph is visible using `is(':visible')`.
10. Use `.hide()` to hide the paragraph and change the button text to "Show Paragraph", or
use `.show()` to display it and change the button text back to "Hide Paragraph".
Result:
The web page successfully toggles the visibility of the paragraph when the button is clicked,
updating the button text accordingly.
10. Create a web page and add Java script to handle mouse events and form events
Aim:
To create a web page that handles mouse events (mouseover and mouseout) and form events
(button click) using JavaScript and jQuery.
Procedure:
1. Start with the HTML structure using `<!DOCTYPE html>`.
2. Include the jQuery library for easy event handling.
3. Set up CSS for body, container, hover box, button, and message display for styling.
4. Create a div with ID `hover-box` to demonstrate mouse events.
5. Add a button with ID `click-button` to trigger a click event.
6. Create a div with ID `message` for displaying messages based on interactions.
7. Use `$(document).ready()` to ensure the DOM is loaded before executing scripts.
8. Bind a `mouseover` event to `hover-box` to change its text and background color when
hovered.
9. Bind a `mouseout` event to `hover-box` to revert its text and background color when the
mouse leaves.
10. Bind a `click` event to `click-button` to change the text of the message div when the
button is clicked.
Result:
The web page successfully responds to mouse events by changing the hover box's appearance
on hover and shows a message when the button is clicked.

You might also like