CODEWITHSUNDEEP
pythonhtmlpython-3.x
Yuri Burkov
Yuri Burkov

Reputation: 141

How to display HTML using Python Alone in localhost

I am trying to display my html files using python alone. Such as I would python code.py and I would be able to access my html at localhost:8080

html files are static files that access each other. For example, index.html directs to contact.html and all of them access css folder.

How do I open my html files so it displays it on the webpage?

below is what I have so far.

html_file = []
with open("index.html", "r") as f:
    for line in f.readlines():
        html_file.append(line)

Is there way to do python code.py and when I access localhost:8000 that would show me the code? and I can access each page.

here is an example html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <img class="resize" src="./pictures/logo.png" alt="logo">
        <nav>
            <ul class="nav-links">
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
            <script type="text/javascript">
                $(document).on('click', 'ul li', function(){
                    $(this).addClass('active').siblings().removeClass('active')
                })
            </script>
        </nav>
    </header>
</body>
</html>

Upvotes: 0

Views: 1849

Answers (1)

Shashishekhar Hasabnis
Shashishekhar Hasabnis

Reputation: 1756

There's way to do so using the python web frameworks like Flask or Django. In a typical flask scenario your code would look like this:-

1) Install flask:-

pip install flask

2) Write your code.py like this:-

from flask import Flask, url_for
from flask import render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('hello.html')

3) Next create a templates folder inside which put your html file which I have named it to be hello.html

templates > hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <img class="resize" src="./pictures/logo.png" alt="logo">
        <nav>
            <ul class="nav-links">
                <li class="active"><a href="./index.html">Home</a></li>
                <li><a href="./contact.html">Contact</a></li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
            <script type="text/javascript">
                $(document).on('click', 'ul li', function(){
                    $(this).addClass('active').siblings().removeClass('active')
                })
            </script>
        </nav>
    </header>
</body>
</html>

4) Your directory structure would look like this:-

/code.py
/templates
    /hello.html

5) Run python code.py and you can see your page on localhost:5000.

Upvotes: 2

Related Questions