Tables: Program:: Doctype HTML Head Style

Tables:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
table,
td,
th{
border: 1px, solid black;
border-collapse: collapse;
}
</style>
<title>Tables</title>
</head>
<body>
<table>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
</tr>
<tr>
<td>varshita</td>
<td>gullipalli</td>
<td>20</td>
</tr>
<tr>
<td>sarvani</td>
<td>gullipalli</td>
<td>18</td>
</tr>
</table>
</body>
</html>
Output:
First name Last name Age

Varshita Gullipalli 20
Sarvani gullipalli 18
Forms:
Program:
<!DOCTYPE html>
<html>
<head>
<title>Registration form</title>
</head>
<body>
<h1>registration form</h1>
<form>
<div class="form-field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required/>
</div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required/>
</div>
<button type="submit">submit</button>
</form>
</body>
</html>
Output:
Lists:
Program:
Ordered lists:
<!DOCTYPE html>
<html>
<head>
<title>Ordered Lists</title>
</head>
<body>
<ol>
<li>potato</li>
<li>carrot</li>
<li>ginger</li>
<li>betroot</li>
</ol>
</body>
</html>
Output:
Unordered lists:
<!DOCTYPE html>
<html>
<head>
<title>UnOrdered Lists</title>
</head>
<body>
<ul>
<li>potato</li>
<li>carrot</li>
<li>ginger</li>
<li>betroot</li>
</ul>
</body>
</html>
Output:
Hyperlinks:
Program:
<!DOCTYPE html>
<html>
<head>
<title>Links</title>
</head>
<body>
<a href="https://www.w3schools.com/">Visit w3schools</a>
</body>
</html>
Output:
Visit w3schools
Different ways of applying a CSS to a page:
1. External css
Program:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="external.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Output:
2. Internal css
Program
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: aqua;
}
h1{
color: blue;
text-align: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Output:
3. Inline css
Program
<!DOCTYPE html>
<html>
<body>
<h1 style="color: blue;text-align: center;">this is a heading</h1>
<p style="color: red;text-align: center;">This is a paragraph</p>
</body>
</html>
Ouput:
Positioning in css:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
h2{
position: absolute;
left: 100px;
right: 150px;
}
</style>
</head>
<body>
<h2>This is a absolute positioned paragraph</h2>
</body>
</html>
Output:
Text formatting
Program:
<!DOCTYPE html>
<html>
<head>
<style>
div{
border: 1px;
}
h1{
font-family: 'Times New Roman', Times, serif;
font-size: 30px;
text-align: center;
text-transform: uppercase;
}
p{
font-family: 'Times New Roman', Time, serif;
font-size: 25px;
letter-spacing: 3px;
}
a{
color: blue;
}
</style>
</head>
<body>
<h1>Text formatting</h1>
<p>Gayatri vidya parishad college of engineering.</p>
<a link="Gvpce" href="https://gvpce.ac.in/">GVPCE</a>
</body>
</html>
Output:
Font formatting
Program:
<!DOCTYPE html>
<html>
<head>
<style>
p.a{
font-size: 30px;
text-transform: uppercase;
text-align: center;
}
p.b{
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<p class="a">Font formatting</p>
<p class="b">Gayatri vidya parishad college of engineering.</p>
</body>
</html>
Output:
Columns formatting
Program:
<!DOCTYPE html>
<html>
<head>
<style>
.column1{
columns: 10px 3;
}
.column2{
columns: 20px 4;
}
</style>
</head>
<body>
<h1>Columns formatting</h1>
<p><strong>minimum columns 3</strong></p>
<div class="column1">gayatri vidya parishad college of engineering
gayatri vidya parishad college of engineering gayatri vidya parishad college
of engineering gayatri vidya parishad college of engineering</div>
<p><strong>minimum columns 4</strong></p>
<div class="column2">gayatri vidya parishad college of engineering
gayatri vidya parishad college of engineering gayatri vidya parishad college
of engineering gayatri vidya parishad college of engineering </div>
</body>
</html>
Output:
Box formatting:
<!DOCTYPE html>
<htmL>
<head>
<style>
div{
background-color: lightgray;
width: 300px;
border: 15px solid lightgreen;
margin: 20px;
padding: 30px;
}
</style>
</head>
<body>
<div>Gayatri vidya parishad college of engineering</div>
</body>
</htmL>
Output:
Registration form validation:
<!DOCTYPE html>
<html>
<head>
<title>Registration form</title>
</head>
<body>
<form onsubmit="return validateForm()">
</div>
<label for="mobile number">Mobile number</label>
<input type="tel" id="mobilenumber" name="mobilenumber"
required/>
</div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required/>
</div>
</form>
<script>
function validateForm() {
const username=document.getElementById("username").value;
const
mobilenumber=document.getElementById("mobilenumber").value;
const email=document.getElementById("email").value;
if(username.length<6){
alert("username must contain atleast 6 characters.");
return false;
}
const mobileRegix=/^[9]\d{9}$/;
if(!mobileRegix.test(mobilenumber)){
alert("mobile number must start with 9 and should contain
10 digits.");
return false;
}
const emailRegix=/^[a-zA-Z0-9.!#$%&'^_*+/=?{|}~-]+@[a-zA-Z0-9-
]+(?:\.[a-zA-Z0-9-]+)*$/;
if(!emailRegix.test(email)){
alert("email must contain a special character.");
return false;
}
}
</script>
</body>
</html>
Login Form validation:
<!DOCTYPE html>
<html>
<head>
<title>Login form</title>
</head>
<body>
<h1>Login form</h1>
<form onsubmit="return validateForm()">
</div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required/>
</div>
</form>
<script>
function validateForm(){
const username=document.getElementById("username").value;
const password=document.getElementById("password").value;
if(username.length<6){
alert("username must contain atleast 6characters.");
return false;
}
const passwordRegix=/^[A-Z][a-zA-Z\d]{3,}$/;
if(!passwordRegix.test(password)){
alert("password must start with capital letters");
return false;
}
}
</script>
</body>
</html>
Java script program to print from h1 to h6
Program:
<!DOCTYPE html>
<html>
<head>
<title>Javascript Headings</title>
</head>
<body>
<script>
function printHeadings(){
for(let i = 1; i<=6; i++){
const heading = document.createElement('h'+i);
heading.textContent = 'Heading' +i;
document.body.appendChild(heading);
console.log('Generated' + heading.tagName + ':' +
heading.textContent);
}
}
printHeadings();
</script>
</body>
</html>
Objects defined in javascript
Program:
<!DOCTYPE html>
<html>
<body>
<script>
emp={id:101,name="varshita",salary:40000}
document.write(emp.id+""+emp.name+""+emp.salary);
</script>
</body>
</html>

Tables: Program:: Doctype HTML Head Style

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tables: Program:: Doctype HTML Head Style

Uploaded by

Copyright:

Available Formats

Tables:

First name Last name Age

Different ways of applying a CSS to a page:

Registration form validation:

Java script program to print from h1 to h6

Objects defined in javascript

You might also like