Scribd
Upload
15 views

Tables: Program:: Doctype HTML Head Style

The document discusses different HTML elements like tables, forms, lists and their usage through examples. It also covers various CSS concepts like positioning, text formatting, font styling, column formatting and box styling through code snippets and output.

Uploaded by

21131a1210
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

Tables: Program:: Doctype HTML Head Style

The document discusses different HTML elements like tables, forms, lists and their usage through examples. It also covers various CSS concepts like positioning, text formatting, font styling, column formatting and box styling through code snippets and output.

Uploaded by

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

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>
<div class="form-field">
<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>
<h1>This is a heading</h1>
<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>
<h1>This is a heading</h1>
<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-family: 'Times New Roman', Times, serif;
font-size: 30px;
text-transform: uppercase;
text-align: center;
}
p.b{
font-family: 'Times New Roman', Times, serif;
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 class="form-field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required/>
</div>
<div class="form-field">
<label for="mobile number">Mobile number</label>
<input type="tel" id="mobilenumber" name="mobilenumber"
required/>
</div>
<div class="form-field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required/>
</div>
<button type="submit">submit</button>
</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 class="form-field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required/>
</div>
<div class="form-field">
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required/>
</div>
<button type="submit">submit</button>
</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>

You might also like