[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-detail-166092-en":3,"doc-seo-166092-105":30,"detail-sidebar-cat-1-en-105":94},{"code":4,"msg":5,"data":6},0,"success",{"doc_id":7,"user_id":8,"nickname":9,"user_avatar":10,"doc_module":11,"category_id":12,"category_name":13,"doc_title":14,"doc_description":15,"doc_content":16,"file_id":17,"file_url":18,"file_type":19,"file_size":20,"view_count":4,"is_deleted":4,"is_public":11,"is_downloadable":11,"audit_status":11,"page_count":21,"language":22,"language_code":23,"site_id":24,"html_lang":23,"table_of_contents":25,"faqs":26,"seo_title":27,"seo_description":15,"update_tm":28,"read_time":29},166092,8796093062539,"8796093062539","",1,11,"Presentations","Build a Website with Python","Learn how to build a simple website using Python’s Flask framework, starting from a minimal “Hello World” application with routing via @app.route. The tutorial then guides you through structuring templates and rendering an index.html page with render_template, followed by adding styling through a static folder and a main.css stylesheet linked in HTML. Finally, it shows how to serve and embed an image from the static/images directory in the created webpage.","Build a Website with Python\nFlask is a web development framework. With Python, there are two modules one can use for web development: Django and Flask. However, Flask is more lightweight and easier to learn. In this tutorial, we’ll be building a very simple website using Python’s Flask module. To begin with, install flask: [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"]pip install flask[/cce_python]\nStep #1: Minimal Web Application\nThe minimal application can be found at \u0013 HYPERLINK \"https://flask.palletsprojects.com/en/2.0.x/quickstart/\" \\l \"a-minimal-application\" \\t \"_blank\" \u0014https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application\u0015. This is a web page that displays “Hello World”. The first thing we did was create an instance of Flask() with “__name__” as the argument. The route decorator is used to inform Flask the URL that will activate the function we wrote. [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"] from flask import Flask app = Flask(__name__) @app.route('/') def index(): return \"Hello World\" if \"__name__\" == \"__main__\": app.run(debug=True) [/cce_python] Next, in the terminal of PyCharm, type the following (where the name of my Python file is main.py; in your case, replace main.py with your Python’s filename): [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"] set FLASK_APP=main.py $env:FLASK_APP = \"main.py\" flask run [/cce_python] Once you run “flask run”, the terminal will chuck out a URL with a port. This URL:PORT is where the web page is loaded. You can always press Control + c to quit. In my case, it says “Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)”. So, open up your web browser, and copy and paste the URL given. In my case, I copied and pasted “http://127.0.0.1:5000/”. Please also note that the previous lines must be run every time you restart PyCharm for it to work:\nStep #2: Adding HTML\nThe first thing you’ll need to do is open the folder where the Python script is located and create a folder called “templates”. When I first ran this, I tried putting the name “template” as the folder name, and the whole program crashed and didn’t work. So, it’s imperative that you call the folder “templates”. Within this “templates” folder, create an index.html file with your HTML code. Then, use render_template() and pass “index.html” as the argument. Now, if you run “flask run” in the terminal, your HTML code should be rendered: My html code (index.html) for the moment is as follows: [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"] \u003C!DOCTYPE html> \u003Chtml lang=\"en\"> \u003Chead> \u003Cmeta charset=\"UTF-8\"> \u003Ctitle>Kalyani's Resume\u003C/title> \u003C/head> \u003Cbody> \u003Ch1> Kalyani's Resume This page will contain my resume \u003C/h1> \u003C/body> \u003C/html> [/cce_python] And, my Python file code (main.py) is as follows: [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"] from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template(\"index.html\") if \"__name__\" == \"__main__\": app.run(debug=True) [/cce_python] The latter will render a simple HTML page.\nStep #3: Adding CSS\nNow, I want to add CSS to my HTML. To do this, create a folder called “static” and create a file called “main.css”. Here, the name of the actual CSS file can be anything. I’ve decided to call mine “main.css”. However, the name of the folder must be “static”! In fact, in the “static” folder, one can place anything that is static, such as CSS, JavaScript, and images. So, if you’re going to put images, JavaScript, and CSS, you may wish to create sub-folders.\nFirst, let’s write out the CSS (main.css) I want: [cce_python width=\"100%\" height=\"100%\" escaped=\"true\" theme=\"blackboard\" nowrap=\"0\"] body { margin:0; color: #333 font-family: verdana; font-size: 20px; background-color: rgb(201, 76, 76); } .styled { background-color: #92a8d1; font-family: ","cbCaipre3jClA5gH","https://ap.wps.com/l/cbCaipre3jClA5gH","docx",306148,8,"English","en",105,"# Step #1: Minimal Web Application\n## Step #2: Adding HTML\n## Step #3: Adding CSS\n## Step #4: Adding an Image","[{\"question\":\"Why is Flask recommended for building a simple website?\",\"answer\":\"Flask is lightweight and easier to learn than Django, making it suitable for building a very simple website quickly.\"},{\"question\":\"How do you route a URL to a function in Flask?\",\"answer\":\"Use the route decorator @app.route('/') to tell Flask which URL should activate the function you write for handling that route.\"},{\"question\":\"Where should HTML files and static assets be placed?\",\"answer\":\"Create a templates folder for index.html, and a static folder for assets like main.css and images (e.g., static/images/...).\"},{\"question\":\"How do you link CSS and display an image on the page?\",\"answer\":\"Link the stylesheet in the HTML head using url_for('static', filename='main.css'), then place images using an appropriate src path under the static directory such as /static/images/...\"}]","Build a Website with Python | DOCX",1788183078,3,{"code":4,"msg":31,"data":32},"ok",{"site_id":24,"language":23,"slug":33,"title":14,"keywords":10,"description":15,"schema_data":34,"social_meta":89,"head_meta":91,"extra_data":93,"updated_unix":28},"build-a-website-with-python",{"@graph":35,"@context":88},[36,52,67],{"@type":37,"itemListElement":38},"BreadcrumbList",[39,43,47,49],{"item":40,"name":41,"@type":42,"position":11},"https://docshare.wps.com","Home","ListItem",{"item":44,"name":45,"@type":42,"position":46},"https://docshare.wps.com/template/","Template",2,{"item":48,"name":13,"@type":42,"position":29},"https://docshare.wps.com/template/presentations/",{"item":50,"name":14,"@type":42,"position":51},"https://docshare.wps.com/template/build-a-website-with-python/166092/",4,{"url":50,"name":14,"@type":53,"author":54,"headline":14,"publisher":56,"fileFormat":59,"inLanguage":23,"description":15,"dateModified":60,"datePublished":61,"encodingFormat":59,"isAccessibleForFree":62,"interactionStatistic":63},"DigitalDocument",{"name":9,"@type":55},"Person",{"url":40,"name":57,"@type":58},"DocShare","Organization","application/vnd.openxmlformats-officedocument.wordprocessingml.document","2026-09-05","2026-08-31",true,{"@type":64,"interactionType":65,"userInteractionCount":51},"InteractionCounter",{"@type":66},"ViewAction",{"@type":68,"mainEntity":69},"FAQPage",[70,76,80,84],{"name":71,"@type":72,"acceptedAnswer":73},"Why is Flask recommended for building a simple website?","Question",{"text":74,"@type":75},"Flask is lightweight and easier to learn than Django, making it suitable for building a very simple website quickly.","Answer",{"name":77,"@type":72,"acceptedAnswer":78},"How do you route a URL to a function in Flask?",{"text":79,"@type":75},"Use the route decorator @app.route('/') to tell Flask which URL should activate the function you write for handling that route.",{"name":81,"@type":72,"acceptedAnswer":82},"Where should HTML files and static assets be placed?",{"text":83,"@type":75},"Create a templates folder for index.html, and a static folder for assets like main.css and images (e.g., static/images/...).",{"name":85,"@type":72,"acceptedAnswer":86},"How do you link CSS and display an image on the page?",{"text":87,"@type":75},"Link the stylesheet in the HTML head using url_for('static', filename='main.css'), then place images using an appropriate src path under the static directory such as /static/images/...","https://schema.org",{"og:url":50,"og:type":90,"og:title":14,"og:site_name":57,"og:description":15},"article",{"robots":92,"canonical":50},"index,follow",{"doc_id":7,"site_id":24},{"code":4,"msg":5,"data":95},[96,99,104,109,114,119,124,129,134],{"id":12,"doc_module":11,"doc_module_name":45,"category_name":13,"show_sort_weight":97,"slug":98},90,"presentations",{"id":100,"doc_module":11,"doc_module_name":45,"category_name":101,"show_sort_weight":102,"slug":103},12,"Resumes",80,"resumes",{"id":105,"doc_module":11,"doc_module_name":45,"category_name":106,"show_sort_weight":107,"slug":108},14,"Invoices",70,"invoices",{"id":110,"doc_module":11,"doc_module_name":45,"category_name":111,"show_sort_weight":112,"slug":113},15,"Posters",60,"posters",{"id":115,"doc_module":11,"doc_module_name":45,"category_name":116,"show_sort_weight":117,"slug":118},16,"Social Media",50,"social-media",{"id":120,"doc_module":11,"doc_module_name":45,"category_name":121,"show_sort_weight":122,"slug":123},17,"Forms",40,"forms",{"id":125,"doc_module":11,"doc_module_name":45,"category_name":126,"show_sort_weight":127,"slug":128},18,"Letters",30,"letters",{"id":130,"doc_module":11,"doc_module_name":45,"category_name":131,"show_sort_weight":132,"slug":133},21,"Paper Templates",5,"papers-templates",{"id":135,"doc_module":11,"doc_module_name":45,"category_name":136,"show_sort_weight":4,"slug":137},158,"General","general-158"]