As of title, I'm trying to load an HTML page into an HTML frame using Flask.
When I open the frameset.html page on a Firefox tab (substituting {{src}} with index.html of course), the frameset behaves correctly.
However, whenever I run the python code, the loaded HTML page is correctly divided between the frames, but there is no trace of the index.html page in any of it.
main.py
from flask import Flask, render_template, request
app = Flask(__name__)
page = 'index.html'
#app.route('/')
def home():
return render_template('frameset.html', src=page)
app.run()
frameset.html
<html>
<frameset rows="10%,80%,*">
<frame src=''>
<frameset cols='20%,40%,40%'>
<frame src=''>
<frame src='{{src}}'>
<frame src='' name="output">
</frameset>
<frame src=''>
</frameset>
</html>
index.html
<html>
<head>
<title>HOME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.container {
max-width: 500px;
padding-top: 100px;
}
</style>
</head>
<body>
<div class="container">
GENO stats
</html>
How can I solve this problem? The code I wrote here is just to test the functionality of the framesets.
create another route at #app.route('index.html') rendering index.html the template, make sure the index.html file is in the templates folder
like this:
#app.route('/index.html')
def index():
return render_template('index.html')
resources need to be served from either the templates folder or the static folder in flask, you can't have a resource and have it automatically served as that would be incredibly insecure, since any user then will have access to your entire server by simply changing the link.
Related
im a begginer here , struggling with basic stuff
I have my flask:
from flask import Flask , render_template , send_file , send_from_directory
import os
app = Flask(__name__)
#PRIMERA FUNCION
#app.route('/')
def index():
return render_template('prueba.html')
and i have my html :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - The Arrow</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="arrow-1"></div>
<!-- partial -->
</body>
</html>
when I open the html file on browser it shows the css ,
but when I run flask css doesnt show and I cant figure out why!!!
I have try this
#app.route('/css/<path:filename>')
def css_file(filename):
file_path = os.path.join('css', filename)
return send_file(file_path)
and i also thought it was a problem of my folder layout but I already tried re arrange folders
Flask has different ways to do this, but the convention is to put static assets (like CSS) in the static directory (which should be at the root of your project) and link them in with Jinja and the url_for() function. so in your case it would look like this:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - The Arrow</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
More explained in the Flask docs
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">Home</li>
<li>Contact</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>
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">Home</li>
<li>Contact</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.
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 2 years ago.
I want to serve .HTML files that link to a styles.CSS file using <link rel='stylesheet'> in my web-app using render_template() function in Flask. It will run as a local-app using FlaskWebGUI library in Python.
File structure:
flaskGUI ---
templates ---
index.html
styles.css
flaskapp.py
flaskapp.py code:
from flask import Flask, render_template
from flaskwebgui import FlaskUI
app = Flask(__name__)
ui = FlaskUI(app)
#app.route("/")
def index():
return render_template("index.html")
ui.run()
index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
</head>
<body>
<h1>Index</h1>
<p>This is an HTML file served up by Flask</p>
</body>
</html>
styles.css code:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Expected: Powder-blue background, Blue 'Index' text, red paragraph text.
Actual Result: White background, black text.
The standard way to serve static files is to put them in the static folder, not the templates folder, then use url_for('static', filename='styles.css') to link to it.
Alternatively, use send_from_directory to serve it with a custom route.
#app.route("/styles.css")
def styles():
return send_from_directory("templates", "styles.css")
Everything was working fine before Python Flask. Now I tried to connect my HTML page with Python Flask. CSS is working fine but when I define images inside the CSS file the image is no longer loaded into the web site. Instead it is showing error 404.
python app.py code
from flask import Flask, render_template, url_for
app = Flask(__name__ , static_url_path='/static')
#app.route('/')
def index():
return render_template('/intro.html')
if __name__ == '__main__':
app.run(debug=True)
HTML code :-
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/owl.theme.default.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/firstone.css') }}">
</head>
<body>
<div class="main">
<div class="cover-image">
<div class="menu">
<div class="leftmenu">
CSS file
#charset "utf-8";
/* CSS Document */
*{
margin: 0px ;
padding: 0px ;
}
/* ------------cover image -------------*/
.cover-image {
background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});
background-size: 100% 100%;
width: 100%;
height: 110vh;
}
Please help.
You are using url_for in a CSS file, which does not work. You need to specify the url of the background image either in the HTML file, or specify a proper URL in your CSS.
So either add this to your CSS:
background-image: url('/static/images/cover4.jpg')}});
Or change your cover-image div in your HTML file to this:
<div class="cover-image" style="background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});">
Unless you plan on changing your static folder (or your cover image) regularly, I would advise going the first route, to make sure you separate style and semantics.
I am building a simple website and I am trying to get an image onto the page using Flask. All i get is the broken image symbol on the page tho.
Here is the server code...
from flask import Flask, render_template, url_for
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def homePage():
return render_template("HomePage.html")
if __name__ == "__main__":
app.run(debug=True)
And here is HomePage.html...
<!DOCTYPE html>
<style>
</style>
<html>
<head>
</head>
<body>
<img href="{{ url_for('static', filename='testing.png') }}" />
</body>
</html>
<script>
</script>
My file structure is as followed...
-Web
-static
-testing.png
-templates
-HomePage.html
server.py
Now, if i actually inspect through chrome, I can see the img tag gets converted to
<img href="/static/testing.png">
and if I right click this in chrome and open it in a new tab the image appears, But is still doesn't show on my web page.
For img tag use src attribute rather than href attribute.
In HomePage.html change the following line:
<img href="{{ url_for('static', filename='testing.png') }}" />
to
<img src="{{ url_for('static', filename='testing.png') }}" />
Reference:
MDN's documentation on img tag attributes