Scribd
Upload
33 views49 pages

REACTHTML

The display property in CSS defines how elements are placed on a webpage. It accepts different values like inline, block, flex, grid, none which determine whether an element displays inline, as a block, or nothing at all. The display property is important for controlling the layout and positioning of elements.

Uploaded by

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

REACTHTML

The display property in CSS defines how elements are placed on a webpage. It accepts different values like inline, block, flex, grid, none which determine whether an element displays inline, as a block, or nothing at all. The display property is important for controlling the layout and positioning of elements.

Uploaded by

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

Basic HTML Tags

<html>
<head>
<title>JMIT</title>
</head>
<body>

<center>CENTER</center> <!--Center Tag-->


<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Temporibus laudantium itaque nobis assumenda commodi
cum aperiam iste expedita dicta? Suscipit nihil ullam debitis
exercitationem cumque animi minima est similique quo!
Eius itaque, suscipit, facere numquam pariatur voluptatum
quas blanditiis repudiandae ipsum, animi adipisci incidunt
iusto exercitationem magnam vitae laboriosam perferendis!
Dicta nam exercitationem pariatur quis quibusdam tempora,
quod natus repudiandae.
Cumque illo, tempora architecto, est repellendus minima
asperiores itaque incidunt voluptas ea corrupti quas debitis
consequatur dolorem maiores necessitatibus veniam quam
aperiam tenetur voluptatem voluptatum. Dicta iusto dolorum
magnam aperiam.
</p><!--PARAGRAPH TAG-->
<marquee><font size="70">MARQUEE TAG</font></marquee>
<!--MARQUEE TAGS-->
<hr>
</body>

</html>
OUTPUT
Basic HTML Tags

<html>

<head>

<title>JMIT</title>

</head>

<body>
<font color=red size=70>FONT TAG</font><!--FONT TAG-->

<hr>
<a href="https://www.google.com/"
target="_blank">Google </a>

<a href="https://www.facebook.com/"
target="_blank">Facebook</a><!--ANCHOR TAG-->
<hr><!--HORIZONTAL TAG-->

</body>

</html>
OUTPUT

4
FORMATION OF TABLE IN HTML

<html>
<head><title>TABLE TAG<title></head>
<body>
<h2 align>TABLE TAG</h2>
<table border=1 align=center cellspacing=10 cellpadding=10>
<tr>
<th>SRNO</th>
<th>Name.</th>
<th>Roll No.</th>
<th>Class</th>
</tr>
<tr>
<td>1</td>
<td>Sahil</td>
<td>1222365</td>
<td>2-CSE-B</td>
</tr>
<tr>
<td>2</td>
<td>Vedant</td>
<td>1222373</td>
<td>2-CSE-B</td>
</tr>
<tr>
<td>3</td>
<td>Aakash</td>
<td>1222351</td>
<td>2-CSE-B</td>
</tr>
</table>
</body>
</html>
OUTPUT
INPUT TAG HTML

<html>
<head></head>
<body>
<form>
<table border=1 align=center>

<tr>
<th>username</th>
<td>
<input type="text"/>
</td>
</tr>

<tr>
<th>password</th>
<td>
<input type="password"/>
</td>
</tr>

<tr>
<td colspan=2 align=center>
<input type="button" value="Login"/>
</td>
</tr>

</table>
</form>
</body>
</html>
OUTPUT
Form

<!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">
<title>Document</title>
</head>
<body>
<form>
<h2>Payment Information</h2>
<p>*Card Type:
<select name="card_type" id="card_type" required>
<option value="">--Select a card type-- </option>
<option value="visa">Visa Card</option>
<option value="rupay">Rupay Card</option>
<option value="master">Master Card</option>
</select>
</p>

<p>Card Number: <input type="number"


name="card_number" id="card_number"
required></p>
<p>Expiration Date: <input type="date"
name="exp_date" id="exp_date"
required></p>
<p>CVV <input type="password" name="CVV"
id="CVV"required></p>
<input type="submit" value="Pay Now">
</form>
</body>
</html>
OUTPUT
CSS
INLINE CSS

<!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">
<title>Document</title>
</head>

<body>

<h1 style="border: 10px solid red;">hello</h1>


<h1 style="border: blueviolet;color: brown;">CSS</h1>

<a href="www.google.com" style="color: crimson;font-


size:larger ;">Google</a>
<hr>

<span style="color: blue;">WEBSITE</span>


<span>VSCODE</span>
</body>

</html>
OUTPUT
INTERNAL CSS

<!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">
<title>Document</title>
<style>
#first {
background-color: yellow;
align-items: end;
border: solid red;
font: bolder;
}
div {
background-color: blue;
align-items: end;
border: solid red;
font: bolder;
font-size: medium;
}
.hum {
background-color: blue;
align-items: end;
border: solid red;
font: bolder;
font-size: larger;
}
</style>
</head>
<body>
<div id="first">
Yellow
</div>
<div>
<h1>NEXT ALGORITHM</h1>
</div>
<div class="hum">
<marquee><b>CSS<b></marquee>
</div>
</body>

</html>
OUTPUT
EXTERNAL CSS

<!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">
<title>Document</title>
<link rel="stylesheet" href="externalCSS.css">
<style>

#first {
background-color: yellow;
align-items: end;
border: solid red;
font: bolder;
font-size: xx-large;
}

div {
background-color: blue;
align-items: end;
border: solid red;
font: bolder;
font-size: medium;

}
</style>
</head>
<body>

<div id="first">
Yellow
</div>

<div>
<h1>CSS</h1>
</div>

<div class="external">
<marquee><b>EXTERNAL CSS<b></marquee>
</div>

</body>
</html>

FILE : externalCSS.css

.external {
background-color: royalblue;
text-decoration: red;
}
OUTPUT
Form

<!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">
<title>Document</title>
</head>
<body>
<form>
<h2>Payment Information</h2>
<p>*Card Type:
<select name="card_type" id="card_type" required>
<option value="">--Select a card type-- </option>
<option value="visa">Visa Card</option>
<option value="rupay">Rupay Card</option>
<option value="master">Master Card</option>
</select>
</p>

<p>Card Number: <input type="number"


name="card_number" id="card_number"
required></p>
<p>Expiration Date: <input type="date"
name="exp_date" id="exp_date"
required></p>
<p>CVV <input type="password" name="CVV"
id="CVV"required></p>
<input type="submit" value="Pay Now">
</form>
</body>
</html>
OUTPUT
DIFFERENCE IN ID AND CLASS

Key Id Class

In HTML, for an element, the ID name "class" assigned to an element has


starts with the "#" symbol followed by a its name starts with "." followed by
Syntax
unique name assigned to it. class name.

Only one ID selector can be attached to Multiple class selectors can be


Selector an element. attached to an element.

ID is unique in a page and can only apply The class can be applied to multiple
to at most one element elements so it could be multiple
Uniqueness
times on a single page.

ID :
<!DOCTYPE html>
<html>
<head>
<title>
Id demo
</title>
<style>
#idDemo{
color:green;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by Id</h1>
<p id="idDemo">Demo for Id selector</p>
</body>
</html>
Class :
<!DOCTYPE html>
<html>
<head>
<title>
Class demo
</title>
<style>
.classDemo{
color:orange;
font-size:25px;
}
</style>
</head>
<body style="text-align:center">
<h1>Get element by class<h1>
<p class="classDemo">Demo for class selector</p>
</body>
</html>
OUTPUT

OUTPUT
DISPLAY PROPERTY
The Display property in CSS defines how the components (div, hyperlink,
heading, etc) are going to be placed on the web page. As the name
suggests, this property is used to define the display of the different parts
of a web page.
Syntax:

display: value;

Property values:-flex

 Inline  Block  contents  flex


 None  Table-  List-item  grid
header-
group

 Initial  Table-footer-  Run-in  Inline-block


group

 Inherit  Table-row-  table  Inline-flex


group
 Table-row  Table-cell  Table-  Inline-gird
caption
 Table-  Inline-table  
column-
group
FLEX PROPERTY CODE
<style>
.container {
display: flex;
grid-gap: 20px;
}
.card {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<h1>Card 1</h1>
<p>This is the content of Card 1.</p>
</div>
<div class="card">
<h1>Card 2</h1>
<p>This is the content of Card 2.</p>
</div>
<div class="card">
<h1>Card 3</h1>
<p>This is the content of Card 3.</p>
</div>
<div class="card">
<h1>Card 4</h1>
<p>This is the content of Card 4.</p>
</div>
</div>
</body>
OUTPUT
FLOAT PROPERTY
The float property in CSS is used for positioning and layout on web pages.
A common usage might be floating an image to one side and letting
text wrap around it.

EXAMPLE :

!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">
<title>Document</title>
</head>

<body>
<h1 style="text-align: center;">
Snails
</h1>
<hr>
<p class="*">
A snail is a shelled gastropod. The name is most often
applied to land snails, terrestrial pulmonate gastropod
molluscs. However, the common name snail is also used for
most of the members of the molluscan class Gastropoda
that have a coiled shell that
is large enough for the animal to retract completely into.
When the word "snail" is used in this most general sense, it
includes not just land snails but also numerous species of
sea snails and freshwater snails. Gastropods that naturally
lack
a shell, or have only an internal shell, are mostly called slugs,
and land snails that have only a very small shell (that they
cannot retract into) are often called semi-slugs.
</p>
<br>
<img style="float: right; width: 350px;" src="Snail.jpg">
<p>
Snails have considerable human relevance, including as
food items, as pests, and as vectors of disease, and their
shells are used as decorative objects and are incorporated
into jewelry. The snail has also had some cultural
significance, tending to be
associated with lethargy.
</p>

</body>

</html>
OUTPUT
ALIGN-ITEMS AND JUSTIFY-CONTENT
The align-items property is used to set the alignment of items inside the
flexible container or in the given window.
EXAMPLE :
<!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">
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;}
.content {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="content">
<h1>Welcome to My Webpage</h1>
<p>This is a sample content created using the align-items and
justify-content properties in CSS.</p>
<p>These properties are used to align and position elements
within a flex container.</p>
</div>
</body>
</html>
OUTPUT
BOOTSTRAP
ASSIGNMENT USING CONTAINER,
CONTAINER FLUID,COL-MD

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

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">

<!-- Bootstrap CSS -->


<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bo
tstr ap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65Vo
hhpu uCOmLASjC" crossorigin="anonymous">

<title>Hello, world!</title>
</head>

<body>
<div class="container" style="border:1px solid red">
<div class="row">
<div class="col-md-4" style="background-color: red; font-size: xx-
large;">first</div>
<div class="col-md-4" style="background-color: violet;font-
size: xx-large;">second</div>
<div class="col-md-4" style="background-color: tomato;font-
size: xx-large;">third</div>
</div>
</div>
<div class="container-fluid" style="border:1px solid red">
hello
</div>

<!-- Optional JavaScript; choose one of the two! -->

<!-- Option 1: Bootstrap Bundle with Popper -->


<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/boots
trap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+Jc
Xn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->


<!--
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/u
md/popper.min.js" integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ
8NT4GN1R8p" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/boots
trap.min.js" integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0Q
KbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
OUTPUT
Bootstrap Starter Template
Copy and paste within your code make website responsive.
DATABASE
DATABASE

QUERIES IDE(SQL) :

Creating database

Creating Table
Adding column to the table

Inserting values
Insertion into Table

Table After Insertion Operation


JAVASCRIPT
JAVASCRIPT
<!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">
<title>Document</title>
</head>

<body>
<table>
<tr>
<th>Username</th>
<td>
<input type="text" id="t1">
</td>
</tr>

<tr>
<th>password</th>
<td>
<input type="password" id="t2">
</td>
</tr>

<tr>
<td>
<input type="button" value="Login"
onclick="user_input()">
</td>
</tr>
</table>
<script>
function user_input() {
user = document.getElementById("t1").value
pass = document.getElementById("t2").value
if (user == "jmit" && pass == "college") {
window.location.href = 'welcome.html'
}
else {
alert("Username : " + user + " " + "Password : " + pass)
alert("invalid username and password")
}
}
</script>
</body>
</html>
OUTPUT
REACT
React

Node --version, Npm --version :

The commands "node --version" and "npm --version" are used to


check the versions of Node.js and npm installed on your system,
respectively. Running these commands in the terminal will display
the respective version numbers, allowing you to verify the installed
versions.

Npx Create-React-App :

The command "npx create-react-app" is used to create a new React


application quickly. "npx" is a tool that comes bundled with npm
(versions 5.2 and above) and allows you to execute packages
directly without having to install them globally. In this case, "create-
react-app" is a package that sets up a basic React project structure
with all the necessary dependencies and configuration files.
Npm Run Start :

The command "npm run start" is used to start a Node.js application


defined in the "scripts" section of the "package.json" file. The "start"
script is a commonly used script that typically launches the application
in development mode.When you run "npm run start" in the terminal,
npm looks for the "start" script in the "package.json" file and executes
the associated command.

React Environment :

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy