Scribd
Upload
33 views33 pages

W.T File

Uploaded by

Dixit Taneja Vlogs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views33 pages

W.T File

Uploaded by

Dixit Taneja Vlogs
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

INDEX

TEACHER
SR.NO TOPICS
SIGN

1 WRITE HTML COMMAND TAGS

2 WRITE ALL TEXT STYLE TAGS IN HTML

WRITE AN HTML CODE TO CREATE A HTML PAGE,


3 WHICH HAS PROPERLY ALIGNED PARAGRAPHS WITH
IMAGE ALONG WITH IT.
WRITE A PROGRAM TO DISPLAY LIST OF ITEMS IN
4
DIFFERENT STYLES

WRITE A PROGRAM OF TABLE USING AN EXAMPLE


5
OF A CLASS RECORD.

WRITE AN HTML CODE TO DEMONSTRATE THE


6
USAGE OF INLINE CSS.

WRITE AN HTML CODE TO DEMONSTRATE THE


7
USAGE OF INTERNAL CSS

WRITE AN HTML CODE TO DEMONSTRATE THE


8
USAGE OF EXTERNAL CSS
WRITE AN HTML CODE TO CREATE A HOME PAGE
HAVING THREE LINKS: ABOUT US, OUR SERVICES
9
AND CONTACT US. CREATE SEPARATE WEB PAGES
FOR THE THREE LINKS

10 WRITE AN HTML CODE TO CREATE A LOGIN FORM

WRITE AN HTML CODE TO CREATE A REGISTRATION


11
FORM

WRITE AN HTML CODE TO CREATE YOUR


12
DEPARTMENT WEBSITE
1. WRITE HTML COMMAND TAGS
<html>
<head>
<title>this is my html command tags</title>
</head>
<body>
<h1>This is the heading h1</h1>
<h2>This is the heading h2</h2>
<h3>This is the heading h3</h3>
<h4>This is the heading h4</h4>
<h5>This is the heading h5</h5>
<h6>This is the heading h6</h6>
<p> This is the Paragraph Tag.......
<br>.this is the break line..................</p>
</hr>
<i>this is italic text</i>
<u> This is underline text</u>
</body>
</html>
OUTPUT IS:-
2. WRITE ALL TEXT STYLE TAGS IN HTML
<html>
<head>
<title>Text Style Tags in HTML</title>
</head>
<body>
<h1>This is the Font Styles</h1>
<p>
<b>This is the Bold text</b><br>
<i>This is the Italic text</i><br>
<u>This is the Underlined text</u><br>
<s>This is the Strikethrough text</s><br>
<big>This is the Larger text</big><br>
<small>This is the Smaller text</small><br>
<sub>This is the Subscript text</sub><br>
<sup>This is the Superscript text</sup><br>
<strong> This is Strong text</strong>
</p>
</body>
</html>
OUTPUT IS:-
3. WRITE AN HTML CODE TO CREATE A HTML PAGE, WHICH HAS PROPERLY
ALIGNED PARAGRAPHS WITH IMAGE ALONG WITH IT.
<html>
<head>
<title>Aligned Paragraph with the Image</title>
</head>
<style>
.container{
display: flex;
align-items: center;
justify-content: space-between;
margin:20px;}
.text{
max-width:600px;}
img{
max-width:300px;
height:auto;
margin-left:20px;}
</style></head><body>
<h1>Dixit</h1>
<div class="container">
<div class="text">
<p>Video provides a powerful way to help you prove your point. When you click
Online Video, you can paste in the embed code for the video you want to add. You
can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header,
footer, cover page, and text box designs that complement each other. For example,
you can add a matching cover page, header, and sidebar. Click Insert and then
choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click
Design and choose a new Theme, the pictures, charts, and SmartArt graphics
change to match your new theme. When you apply styles, your headings change to
match the new theme.
</p>
<p>Save time in Word with new buttons that show up where you need them. To
change the way a picture fits in your document, click it and a button for layout
options appears next to it. When you work on a table, click where you want to add a
row or a column, and then click the plus sign.
Reading is easier, too, in the new Reading view. You can collapse parts of the
document and focus on the text you want. If you need to stop reading before you
reach the end, Word remembers where you left off - even on another device.
</p></div>
<img src="C:\Users\A MAX\Pictures.png">
</div>
</body>
</html>
OUTPUT IS:-
4. WRITE A PROGRAM TO DISPLAY LIST OF ITEMS IN DIFFERENT STYLES
<html>
<head>
<title>list using html</title>
</head>
<body>
<h2>An Unordered list<h2>
<ul>
<li>html</li>
<li>python</li>
<li>Javascript</li>
</ul>
<h2>An Ordered list<h2>
<ol>
<li>Web Technology</li>
<li>Discrete Mathematices</li> <li>Software Engineering</li>
<li>Database Management</li>
<li>CSA</li>
</ol>
</body>
</html>
OUTPUT IS:-
5. WRITE A PROGRAM OF TABLE USING AN EXAMPLE OF A CLASS
RECORD.
<html>
<head>
</head>
<body>
<h1>BCA CLASS RECORD</h1>
<table border="1">
<tr>
<th>Student Name</th>
<th>Father Name</th>
<th>Roll no.</th>
<th>Attendence</th>
</tr>
<tr>
<td>ARJUN</td>
<td>MR.Wakil Chand</td>
<td>1232316055</td>
<td>79%</td>
</tr>
<tr>
<td>DIXIT</td>
<td>MR.Dharampal</td>
<td>1232316038</td>
<td>81%</td>
</tr>
<tr>
<td>NEERAJ</td>
<td>MR.Foji</td>
<td>1232316055</td>
<td>79%</td>
</tr>
<tr>
<td>MUKESH</td>
<td>MR.Wajir</td>
<td>1232316049</td>
<td>71%</td>
</tr>
<tr>
<td>SAM</td>
<td>MR.Kapil</td>
<td>1232316033</td>
<td>60%</td>
</tr>
</html>
</body>
OUTPUT IS:-
6. WRITE AN HTML CODE TO DEMONSTRATE THE USAGE OF INLINE CSS.
<html>
<head>
<title>CSS Demonstration</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px;">Inline CSS Demonstration</h1>
<p style="font-size: 18px; font-style: italic;">This is the CSS inline Function
output. Inline CSS is the technique to define the single element with the insert style
sheets in an HTML document. We can add CSS in three approaches: Inline,
Internal, and External. It has the interactive and unique style to create a single
HTML element; we can define the inline CSS on the style attribute.</p>
</body>
</html>
OUTPUT IS:-
7. WRITE AN HTML CODE TO DEMONSTRATE THE USAGE OF INTERNAL CSS
<html>
<head>
<title>CSS Demonstration</title>
<style>
{
background-color:Green;
}
h1{
color:red;
}
</style>
</head>
<body>
<h1>This is Internal CSS</h1>
<p>nternal CSS is a method for defining CSS styles directly within an HTML
document. It’s particularly useful for applying unique styles to a single web page,
and it’s embedded within the style element located in the head section of the HTML
file.</p>
</body>
</html>
OUTPUT IS:-
8. WRITE AN HTML CODE TO DEMONSTRATE THE USAGE OF EXTERNAL CSS
<html>
<head>
<title>CSS Demonstration</title>
<link rel="stylesheet: type="text/css"herf="styles.css">
</head>
<body>
<h1>This is the External CSS</h1>
<p>This paragraph uses external CSS for Styling.With an external style sheet, you
can change the look of an entire website by changing just one file!Each HTML page
must include a reference to the external style sheet file inside the <link> element,
inside the head section.</p>
</body>
</html>
OUTPUT IS:-
9. WRITE AN HTML CODE TO CREATE A HOME PAGE HAVING THREE LINKS:
ABOUT US, OUR SERVICES AND CONTACT US. CREATE SEPARATE WEB
PAGES FOR THE THREE LINKS.
<html>
<head>
<title>Home Page</title><style> body {
font-family: Arial, sans-serif;
background-color:white;
margin: 0;
padding: 20px;}
h1 {text-align: center;
color: red;}
nav {text-align: center;
margin: 20px 0;}
a {margin: 0 15px;
text-decoration: none;
color: blue;
font-size: 18px;}
a:hover {text-decoration: underline;}</style>
</head><body>
<h1>Dixit's Website</h1><nav>
<ahref="about.html">About Us</a><a href="services.html">Our
Services</a><a href="contact.html">Contact Us</a></nav>
<p>Welcome to Our Website Explore our website using the links above to learn
about us, our services, and how to contact us!</p>
</body>
</html>
OUTPUT IS:-
A. ABOUT US
<html lang="en">
<head><title>About Us</title><style> body { font-family: Arial, sans-serif;
background-color: white;
margin: 0;
padding: 20px;}h1 {text-align: center;
color: red;}
a {display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: blue;}</style></head><body>
<h1>About Us</h1>
<p>Here is the information about me and my website.</p>
<a href="9index.html">Back to Home</a>
</body>
</html>
OUTPUT IS:-
B. OUR SERVICES
<html>
<head><title>Our Services</title><style>body {font-family: Arial, sans-serif;
background-color:white;
margin: 0;
padding: 20px;}h1 {text-align: center;
color:red;}a {display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: blue;}
</style></head><body>
<h1>Our Services</h1>
<p>There are many Courses that we serve you.</p>
<a href="9index.html">Back to Home</a>
</body>
</html>
OUTPUT IS:-
C. CONTACT US
<html>
<head><title>Contact Us</title><style>body {font-family: Arial, sans-serif;
background-color: white;
margin: 0;
padding: 20px;}
h1 {text-align: center;
color:red;}a {display: block;
text-align: center;
margin-top: 20px;
text-decoration: none;
color: blue;}</style>
</head><body>
<h1>Contact Us</h1>
<p>For any query, Please Contact us on This [email protected]</p>
<a href="9index.html">Back to Home</a>
</body>
</html>
OUTPUT IS:-
10. WRITE AN HTML CODE TO CREATE A LOGIN FORM
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h2>Login Form</h2>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Login">
</form>
</body>
</html>
OUTPUT IS:-
11. WRITE AN HTML CODE TO CREATE A REGISTRATION FORM
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registertion</h2>
<form action="/register" method="post">
<label for="name">STD.Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">STD.Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output is

You might also like