HTML-

1. Paragraph <p>
2. Horizontal Line <hr>
3. Line break <br>
4. Heading <h1> to <h6>
5. Div
6. Table
7. Lists – ordered and unordered, different bullet types in lists
8. Font family
9. Font size
10. Text align
11. Text formatting
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
12. Color – background, text, border
13. Links – Hyperlink, Image as link, link to email address
14. Image, image as background
15. Image Map
16. Forms – forms tag, different input types,
17. Favicon
18. Iframe
19. HTML Media – Audio and Video
20. Responsive website <meta>

Sure, here are the HTML tags for each point you listed:

Paragraph: <p>This is a paragraph.</p>

Horizontal Line: <hr>
Line break: <br>
Heading (from <h1> to <h6>):
php
Copy code
<h1>This is a heading level 1</h1>
<h2>This is a heading level 2</h2>
<!-- and so on up to h6 -->
Div: <div>This is a division.</div>
Table:
css
Copy code
<table>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
Lists (ordered and unordered):
css
Copy code
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Font family: <p style="font-family: Arial, sans-serif;">This text is in Arial font.</p>
Font size: <p style="font-size: 20px;">This text has a font size of 20 pixels.</p>
Text align: <p style="text-align: center;">This text is centered.</p>
Text formatting:
php
Copy code
<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<mark>Marked text</mark>
<small>Smaller text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
_{Subscript text}
^{Superscript text}
Color (background, text, border):
css
Copy code
<p style="color: red;">This text is red.</p>
<p style="background-color: yellow;">This has a yellow background.</p>
<p style="border: 1px solid black;">This has a black border.</p>
Links (Hyperlink, Image as link, link to email address):
php
Copy code
<a href="https://www.example.com">Link to website</a>
<a href="mailto:email@example.com">Email link</a>
<a href="https://www.example.com"><img src="image.jpg" alt="Image Link"></a>
Image: <img src="image.jpg" alt="Description of image">
Image Map: <img src="image.jpg" usemap="#map">
Forms (forms tag, different input types):
graphql
Copy code
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<input type="submit" value="Submit">
</form>
Favicon: <link rel="icon" href="favicon.ico">
Iframe: <iframe src="https://www.example.com"></iframe>
HTML Media (Audio and Video):
bash
Copy code
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Responsive website: <meta name="viewport" content="width=device-width, initial-scale=1.0">
These are just basic examples. Depending on your specific needs, you may need to customize
these tags further.

CSS TAGS
Styling a Heading Element:

css
Copy code
h1 {
color: blue;
font-size: 24px;
font-weight: bold;
}
Centering an Element Horizontally:

css
Copy code
.center {
margin: 0 auto;
width: 50%;
}
Styling a Button:

css
Copy code
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
Creating a Responsive Layout:

css
Copy code
@media screen and (max-width: 600px) {
.responsive {
width: 100%;
}
}
Styling Links:

css
Copy code
a{
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Creating a Basic Flexbox Layout:

css
Copy code
.container {
display: flex;
justify-content: center;
align-items: center;
}
Styling Lists:

css
Copy code
ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

CODE1-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<style>
/* Body styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}

/* Header styles */
header {
background-color: #333;
color: #fff;
 padding: 20px;
text-align: center;
}

/* Navigation styles */
nav {
text-align: center;
margin-top: 20px;
}

nav a {
color: #333;
text-decoration: none;
margin: 0 10px;
font-size: 18px;
}

/* Main section styles */

main {
padding: 20px;
}

.hero-section {
background-image: url('hero-image.jpg');
background-size: cover;
color: #fff;
text-align: center;
padding: 100px 0;
}

.hero-section h1 {
font-size: 36px;
margin-bottom: 20px;
}

.hero-section p {
font-size: 18px;
}

/* Footer styles */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
 </style>
</head>
<body>
<header>
<h1>Welcome to Our Website</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>

<main>
<section class="hero-section">
<h1>Discover Amazing Products</h1>
<p>Explore our collection of high-quality products.</p>
</section>
</main>

<footer>
<p>&copy; 2024 Your Company. All rights reserved.</p>
</footer>
</body>
</html>

CODE 2 (Registration Page)

<!DOCTYPE html>
<html>

<head>
<title>Register - Simple E-Commerce</title>
</head>

<body>

<h1>Register with Simple E-Commerce</h1>

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<br>
<br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
 <br>
<br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<br>
<br>

<input type="submit" value="Register">

</form>

<p>Already have an account? <a href="login.html">Login here</a>.</p>

</body>

</html>
CODE 3 (Portfolio)
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isha's Landpage</title>
<style>

body {
margin: 0;
padding: 0;
background-image:
url('https://w0.peakpx.com/wallpaper/410/300/HD-wallpaper-blue-midnight-solid.jpg');
background-size: cover;
background-position: center;
font-family: Arial, sans-serif; /* Change the font family if needed */

header {
background-color: #162b4a;
color: #fff;
padding: 10px;
text-align: center;
}

nav {
display: flex;
 justify-content: center;
background-color: #000000;
padding: 10px;
}

nav a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
transition: background-color 0.3s;
}

nav a:hover {
background-color: #fffefe;

}
.content-container {
position: relative;
top: 100px; /* Adjust as needed based on your header height */
left: 20px;
background-color: rgb(255, 255, 255);
padding: 20px;
max-width: 600px; /* Adjust the maximum width of the black box */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Add a shadow effect */
}

.content-container h2 {
margin-bottom: 10px;
}

.image-container {
position: absolute;
top: 100px; /* Adjust as needed based on your header height */
right: 20px;
padding-top: 180px;
padding-right: 180px;
}
</style>
</head>
<body>

<header>

<img
src="https://static.vecteezy.com/system/resources/thumbnails/008/653/792/small_2x/music-man-gamer-li
ne-pop-art-potrait-logo-colorful-design-with-dark-background-abstract-illustration-isolated-black-backgrou
nd-for-t-shirt-poster-clothing-merch-apparel-badge-design-vector.jpg" alt="Your Logo" width="80"
height="80" align="left">
<h1>Isha Chandravanshi</h1>

</header>

<nav>
<a href="#home">Home</a>
<a href="#skills">Skills</a>
<a href="#experience">Experience</a>
<a href="#projects">Projects</a>
<a href="#social-media">Social Media</a>
</nav>

<div class="content-container">
<h2>Welcome to my portfolio</h2>

</div>
<br>
<!-- Image on the right side -->
<div class="image-container">
<img src="isha.jpg" alt="Your Image" width="200" height="200">
</div>

</body>
</html>

CODE-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Isha Chandravanshi - Portfolio</title>
<style>
body {
font-family: 'Times New Roman', sans-serif;
margin: 0;
padding: 0;
background-color: #87b5f6;

header {
background-color: #ffffff;
color: #460303;
text-align: center;
 padding: 1em 0;
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Ar
t_Project.jpg/1280px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg") ;
background-size: cover;
background-repeat: no-repeat; /* Ensure the background image covers the entire header */
background-position: center; /* Center the background image */
}

section {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1{
color:#fff;
}
h2, h3 {
color: #000000;
}

p{
line-height: 1.6;
color: #264da1;
}

.project {
margin-bottom: 20px;
}

footer {
text-align: center;
padding: 10px;
background-color: #ffffff;
color: #fff;
background-image:
url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Van_Gogh_-_Starry_Night_-_Google_Ar
t_Project.jpg/1280px-Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg") ;
background-size: cover;
background-repeat: no-repeat; /* Ensure the background image covers the entire header */
background-position: center; /* Center the background image */
}

.center-image {
text-align: center;
 }

</style>
</head>
<body>

<header>
<h1>Isha Chandravanshi</h1> <br>
<h1 style="transform: rotate(30deg);">Creative Writer|Programmer</h1>

</header>

<section>
<h2>About Me</h2>
<p>
Hello! I'm Isha Chandravanshi, currently pursuing a B.Tech in Computer Science and Business
Systems at NMIMS Indore.<br>
I am a passionate aspiring programmer and a creative content writer. My journey in the tech world
has equipped me
with<br>skills in oration, web development, and database management using MySQL Workbench.
</p>
</section>

<section>
<h2>Projects</h2>

<div class="project 1">

<h3>Project 1: Portfolio Website</h3>
<p>A personal portfolio website to showcase my skills and projects. Built using HTML, CSS, and a
touch of JavaScript.</p>
</div>

<div class="project 2">

<h3>Project 2: ZenZone App</h3>
<p>Developed an android application that kept track of the amount and type of activity a
depressed patient<br>
is involved in throughout the day. It helps Utilized technologies such as Android Studios.</p>
</div>
</section>

<section>
<h2>Contact</h2>
<p>Email: <a href="mailto:isha.chandravanshi201@example.com"
target="_blank">isha.chandravanshi201@example.com</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/isha-chandravanshi-732356217/"
target="_blank">Isha Chandravanshi on LinkedIn</a></p>
<p>GitHub: <a href="https://github.com/example" target="_blank">Isha's GitHub</a></p>
</section>
 <section class="center-image">
<img src="IMG_6178.JPG" width="600px" height="300px" alt="Isha Chandravanshi">

</section>

<footer>
<p>&copy; 2024 Your Name. All rights reserved.</p>
</footer>

</body>
</html>