PYTHON AND HTML – Here is a complete, minimal, and clean Python + Flask a simple home page setup.
Project Structure
Create a folder for your project with the following layout:
Plaintext
my_website/
│
├── app.py
└── templates/
└── index.html
1. app.py (Python Server)
Create app.py in your main project folder:
Python
from flask import Flask, render_template, request
app = Flask(__name__)
# Home route
@app.route(“/”)
def home():
return render_template(“index.html”)
# Form submission route
@app.route(“/contact”, methods=[“POST”])
def contact():
# Read data submitted from the HTML form
name = request.form.get(“name”)
email = request.form.get(“email”)
# Render the homepage with a confirmation message
message = f”Thank you, {name}! We received your message.”
return render_template(“index.html”, message=message)
if __name__ == “__main__”:
app.run(debug=True)
******************
2. templates/index.html (HTML + CSS Interface)
Create index.html inside the templates folder:
PYTHON AND HTML is the in demand language nowdays
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Clean Home Page</title>
<style>
/* Base Styling */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;
line-height: 1.6;
color: #2d3748;
background-color: #f7fafc;
}
/* Navigation */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 10%;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.logo { font-size: 1.25rem;
font-weight: bold;
color: #1a202c; }
.nav-links a {
margin-left: 1.5rem;
text-decoration: none;
color: #4a5568;
font-weight: 500; }
.nav-links a:hover { color: #3182ce; }
/* Hero Section */
.hero {
text-align: center;
padding: 5rem 1rem 3rem;
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 2.5rem;
color: #1a202c;
margin-bottom:
1rem; }
.hero p {
font-size: 1.2rem;
color: #718096;
margin-bottom: 2rem; }
.btn {
display: inline-block;
background-color: #3182ce;
color: #ffffff;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: 6px;
font-weight: 600;
border: none;
cursor: pointer;
}
.btn:hover { background-color: #2b6cb0; }
/* Features Section */
.features {
display: flex;
justify-content: center;
gap: 2rem;
padding: 3rem 10%;
flex-wrap: wrap;
}
.card {
background: #ffffff;
padding: 1.5rem;
border-radius: 8px;
width: 250px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
border: 1px solid #e2e8f0;
}
.card h3 {
margin-bottom: 0.5rem;
color: #2d3748;
}
.card p {
color: #718096;
font-size: 0.95rem; }
/* Form Section */
.contact-section {
max-width: 450px;
margin: 2rem auto 5rem;
background: #ffffff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.04);
border: 1px solid #e2e8f0;
}
.contact-section h2 {
margin-bottom: 1rem;
font-size: 1.5rem;
text-align: center; }
.form-group { margin-bottom: 1rem; }
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.9rem;
font-weight: 500; }
.form-group input {
width: 100%;
padding: 0.6rem;
border: 1px solid #cbd5e0;
border-radius: 4px;
font-size: 1rem;
}
.alert {
padding: 0.75rem;
background-color: #c6f6d5;
color: #22543d;
border-radius: 4px;
margin-bottom: 1rem;
text-align: center;
}
</style>
</head>
<body>
<!– Header Navigation –>
<nav>
<div class=”logo”>MyWebsite</div>
<div class=”nav-links”>
<a href=”#”>Home</a>
<a href=”#features”>Features</a>
<a href=”#contact”>Contact</a>
</div>
</nav>
<!– Hero Section –>
<header class=”hero”>
<h1>Simple, Modern Python Homepage</h1>
<p>Built with minimal HTML, CSS, and Flask on the backend.</p>
<a href=”#contact” class=”btn”>Get Started</a>
</header>
<!– Features Section –>
<section class=”features” id=”features”>
<div class=”card”>
<h3>Fast Setup</h3>
<p>Runs directly on Python using Flask’s lightweight web server.</p>
</div>
<div class=”card”>
<h3>Clean Design</h3>
<p>Responsive CSS layout that looks great on both mobile and desktop.</p>
</div>
<div class=”card”>
<h3>Interactive</h3>
<p>Includes Python backend logic to process form submissions live.</p>
</div>
</section>
<!– Contact Form Section –>
<section class=”contact-section” id=”contact”>
<h2>Get in Touch</h2>
<!– Flash Message from Python –>
{% if message %}
<div class=”alert”>{{ message }}</div>
{% endif %}
<form action=”/contact” method=”POST”>
<div class=”form-group”>
<label for=”name”>Name</label>
<input type=”text” id=”name” name=”name” placeholder=”Your Name” required>
</div>
<div class=”form-group”>
<label for=”email”>Email</label>
<input type=”email” id=”email” name=”email” placeholder=”you@example.com” required>
</div>
<button type=”submit” class=”btn” style=”width: 100%;”>Send Message</button>
</form>
</section>
</body>
</html>
******************
How to Run This Code
1.Install Flask:
Ensure Python and Flask are ready.
Open your terminal or command prompt and install Flask:
Bash
pip install Flask
2.Run app.py:
Start the Python application server.
Navigate to your my_website directory and run:
Bash
python app.py
3.Open Your Web Browser:
View the live page in your browser.
Open your browser and navigate to:
Plaintext
http://127.0.0.1:5000/
If you want to learn for python and html then you can easily learn nowadays with online tutorial.
http://w3schools.com