Udemy Python Bootcamp Day 056
Rendering HTML/Static files
Rendering HTML Files with Flask
To render an HTML file as a template, The first thing is that remember that Flask is a framework and not a library. So it will put certain restrictions and requirements on your code so that it will actually work.
And in this case, which is known as our templates, must be inside a folder called templates. That's where Flask is gonna look for it when we try to render it.
server.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('awesome.html')
if __name__ == "__main__":
app.run(debug=True)
awesome.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Awesome's Personal Site</title>
</head>
<body>
<table cellspacing="20">
<tbody><tr>
<td><img src="awesome.png" alt="awesome picture"></td>
<td><h1>Awesome Kim</h1>
<p><em>Web Developer in <strong><a href="https://en.wikipedia.org/wiki/South_Korea">South Korea</a></strong>.</em></p>
<p>I am studying Computer Science and want to be a developer.</p></td>
</tr>
</tbody></table>
<hr>
<h3>Work Experience</h3>
<table cellspacing="10">
<thead>
<tr>
<th>Dates</th>
<th>Work</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-2021</td>
<td>Credit Union in Korea</td>
</tr>
<tr>
<td>2017-2018</td>
<td>Starbucks in UK</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<hr>
<h3>Skills</h3>
<table cellspacing="10">
<tr>
<td>Python</td>
<td>★★★</td>
</tr>
<tr>
<td>HTML</td><td>★</td>
</tr>
<tr>
<td>Make Coffee</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Make Beverage</td>
<td>★★★★★</td>
</tr>
</table>
</body>
</html>
Serving Static Files using Flask
Our templates have to be inside a folder called templates, Flask will look for all your static files likw your images or your CSS files inside a folder called static.
When you create a FLask Application, you'll need to create it with the templates forder and the static folder. And you put all your static files your CSS files or your videos inside that folder and your file path is relative to that folder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awesome</title>
<link rel="stylesheet" href="static/styles.css">
</head>
<body>
<h1>I'm Awesome</h1>
</body>
</html>styles.css
body {
background-color: plum
}
How to Use Website Templates to Speed Up Web Development
...
<link rel="stylesheet" href="static/css/styles.css">
<link rel="icon" href="static/favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka&family=Hubballi&family=Indie+Flower&family=Sacramento&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img class="top-tulip" src="static/images/tulip2.png" alt="tulip-img">
<h1>I'm Awesome.</h1>
<h2>a web developer</h2>
<img class="bottom-tulip" src="static/images/tulip.png" alt="tulip-img">
</div>
<div class="middle-container">
<div class="profile">
<img class="my-image" src="static/images/awesome.png" alt="me">
...
Using Website Templates
https://html5up.net/
위 사이트에서 templates 다운로드 해서 수정하여 아래와 같이 포트폴리오 만들면 좋음 :)
수정할때는 Chrome console창에 document.body.contentEditable=true와 같이 적고 페이지에서 수정한 다음 저장해서 python프로젝트 파일안으로 삽입하면 됨.
(근데 아래 프로젝트를 위와 같은 방법으로 하려고 하니까 뭔가 잘 안됐음.. 그래서 그냥 pycharm에서 수정함..)
Final Project - Name Card Website Template
