Scribd
Upload
17 views

Web 1-4

Web technology notes

Uploaded by

pks916971
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

Web 1-4

Web technology notes

Uploaded by

pks916971
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Name: Rakshitdev Ror RollNo:2100320100131

PROGRAM-1

Objective: Write HTML/ JavaScript to display your cv in navigator, your institute website, Department
Website and Tutorial website.
Theory: HTML is the standard markup language for creating web pages.
1. HTML stands for Hypertext Markup Language.
2. HTML describes the structure of web pages using markup.
3. HTML elements are the building blocks of HTML pages.
4. HTML elements are represented by tags.
5. HTML tags label pieces of content such as "heading," "paragraph," "table," and so on.
Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My CV</title>
<style>
/* CSS for navigation bar */
nav {
background-color: #333;
overflow: hidden;
}

nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav a:hover {
background-color: #ddd;
color: #333;
}
</style>
</head>
<body>
<!-- Navigation bar -->
<nav>
<a href="#about">About Me</a>
<a href="#education">Education</a>
<a href="#experience">Experience</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
<a href="your_institute_website_url">Institute Website</a>
<a href="your_department_website_url">Department Website</a>
<a href="your_tutorial_website_url">Tutorial Website</a>
</nav>

<h1>Curriculum Vitae</h1>

<section id="about">
<h2>About Me</h2>
<p>My name is Rakshitdev Ror</p>
</section>
<section id="education">
<h2>Education</h2>
Name: Rakshitdev Ror RollNo:2100320100131

<p>12th from Salwan Public School <br />10th from St.Antony's School</p>

</section>
<section id="experience">
<h2>Experience</h2>
<p>fresher</p>
</section>

<section id="skills">
<h2>Skills</h2>
<p>Java,Python</p>
</section>

<section id="contact">
<h2>Contact Information</h2>
<p>9865XXXXXX</p>
</section>
</body>
</html>

OUTPUT:
Name: Rakshitdev Ror RollNo:2100320100131

PROGRAM-2

Objective: Design HTML form for keeping student record and validate it using Java script.

Theory: Forms are used in webpages for the user to enter their required details that are further send it
to the server for processing. A form is also known as web form or HTML form. Examples of form use
are prevalent in e -commerce websites, online banking, and online surveys etc.

Code:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

#abcd {
max-width: 500px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 2px solid black;
border-radius: 10px;
}

#login-header {
text-align: center;
margin-bottom: 20px;
}

form {
display: flex;
flex-direction: column;
}

form input,
form select,
form textarea {
margin-bottom: 10px;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
}

form input[type="submit"],
form input[type="reset"] {
Name: Rakshitdev Ror RollNo:2100320100131

padding: 10px;
border: none;
width: 100px;
margin-left: 200px;
border-radius: 5px;
background-color: rgb(108, 108, 237);
color:
#fff;
cursor: pointer;
}

form input[type="submit"]:hover,
form input[type="reset"]:hover {
background-color: rgb(145, 145, 246);
}
</style>
<script>
function validate() {
var username = document.myform.Fname.value;
var pass1 = document.myform.pass.value;
var pass2 = document.myform.repass.value;
var e = document.myform.email.value;
var p = document.myform.ph.value;
var regex1 = /^[A-Za-z]+$/;
var regex2 = /^[A-Za-z0-9 ]{8}$/;
var regex3 = /^[A-Za-z0-9 ]{8}$/;
var regex4 = /^[A-Za-z0-9][A-Za-z0-9._]*@[A-Za-z0-9]+([.][A-Za-z]+)+$/;
var regex5 = /^[7-9][0-9]{9}$/;
var regex6 = /^[A-Za-z0-9]+$/;
if (!username.match(regex1)) {
alert("Invalid UserName"); return false;
} else if (!pass1.match(regex2)) {
alert("Invalid Password"); return false;
} else if (!(pass2.match(regex3) && pass1 == pass2)) {
alert("Password and Repassword must be same"); return false;
} else if (!e.match(regex4)) {
alert("Invalid Email Id"); return false;
} else if (!p.match(regex5)) {
alert("Invalid Phone Number"); return false;
} else { return true; }
} </script>
</head>

<body>
<main id="abcd">
<h1 id="login-header">REGISTRATION FORM</h1>
<form name="myform" action="B.html" onsubmit="return validate()"><label for="Fname">Student
Name:</label> <input type="text" id="Fname" name="Fname" placeholder="Enter User name">
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" placeholder="Enter your password">
<label for="repass">Re-enter Password:</label>
<input type="password" id="repass" name="repass" placeholder="Re-enter password">
<label for="email">Email Address:</label>
<input type="text" id="email" name="email" placeholder="Enter your Email Id">
<label for="ph">Phone Number:</label>
<input type="number" id="ph" name="ph" placeholder="Enter Your Phone Number">
Name: Rakshitdev Ror RollNo:2100320100131

<label for="courses">Select Your Courses:</label>


<select id="courses" name="courses">
<option value="B.tech">B.Tech</option>
<option value="Bca">M.Tech</option>
<option value="Mba">MBA</option>
</select>
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</main>
</body>

</html>
Output:
Name: Rakshitdev Ror RollNo:2100320100131

PROGRAM-3

Objective: Write programs using Java script for Web Page to display browsers information.
Theory: Javascript can be used to display browser information using following properties. The
window.navigator object contains information about the visitor's browser. The window.navigator
object can be written without the window prefix.
Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<script Language="javascript" type="text/javascript">
document.write("<li><b>Code Name:</b>" + navigator.appCodeName);
document.write("<li><b>App Name:</b>" + navigator.appName);
document.write("<li><b>Version Name:</b>" + navigator.appVersion);
document.write("<li><b>UserAgent:</b>" + navigator.userAgent);
document.write("<li><b>Platform Name:</b>" + navigator.platform);
document.write("<li><b>Language:</b>" + navigator.language);
</script>
</ul>
</body>
</html>

Output:
Name: Rakshitdev Ror RollNo:2100320100131

PROGRAM-4

Objective: Writing program in XML for creation of DTD. Create a style sheet in CSS/ XSL & display
the document in internet explorer.
Theory: The program demonstrates the integration of XML, DTD, CSS/XSL style sheets, and Internet
Explorer for document presentation. XML is used to structure data, adhering to rules defined by the
DTD (`library.dtd`) that outlines element relationships. CSS (`library.css`) styles the XML content with
defined properties like display and font-weight.

Code:
< ?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE bookstore [
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<bookstore>
<book>
<title>Java Beginners</title>
<author>XYZ</author>
<price>199.99</price>
</book>
</bookstore>
Output:

You might also like