Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

Flask là một khung phát triển web. Với Python, có hai mô -đun mà người ta có thể sử dụng để phát triển web: Django và Flask. Tuy nhiên, bình nhẹ hơn và dễ học hơn. Trong hướng dẫn này, chúng tôi sẽ xây dựng một trang web rất đơn giản bằng cách sử dụng mô -đun bình Python.

Show

Để bắt đầu, cài đặt bình:

Bước #1: Ứng dụng web tối thiểu

Ứng dụng tối thiểu có thể được tìm thấy tại https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application. Đây là một trang web hiển thị trên mạng Hello Hello World. Điều đầu tiên chúng tôi đã làm là tạo ra một ví dụ của Flask () với __name__, là đối số. Bộ trang trí tuyến đường được sử dụng để thông báo cho bình URL sẽ kích hoạt chức năng chúng tôi đã viết.

từ bình nhập bình flask import Flask

Ứng dụng = Flask (__ name__)= Flask(__name__)

@app.route('/')app.route('/')

chỉ số def (): & nbsp; & nbsp; Trở về "Hello World" index():
    return "Hello World"

Nếu "__ Tên __" == "__ main__": & nbsp; & nbsp; app.run (DEBUG = TRUE) "__name__" == "__main__":
    app.run(debug=True)

Tiếp theo, trong thiết bị đầu cuối của pycharm, hãy nhập các loại sau (trong đó tên của tệp python của tôi là chính.

Đặt flask_app = main.py $ env: flask_app = "main.py" flask chạy FLASK_APP=main.py
$env:FLASK_APP = "main.py"
flask run

Khi bạn chạy Flask Flask Run, thiết bị đầu cuối sẽ tặc một URL bằng một cổng. URL này: Cổng là nơi trang web được tải. Bạn luôn có thể nhấn Control + C để thoát. Trong trường hợp của tôi, nó nói rằng chạy trên http://127.0.0.1:5000/ (nhấn Ctrl+C để thoát). Vì vậy, hãy mở trình duyệt web của bạn, và sao chép và dán URL đã cho. Trong trường hợp của tôi, tôi đã sao chép và dán bản http://127.0.0.1:5000/. Cũng xin lưu ý rằng các dòng trước phải được chạy mỗi khi bạn khởi động lại pycharm để nó hoạt động:

Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

Bước #2: Thêm HTML

Điều đầu tiên bạn cần làm là mở thư mục nơi đặt tập lệnh Python và tạo một thư mục có tên là Mẫu mẫu. Khi tôi lần đầu tiên chạy cái này, tôi đã thử đặt tên Mẫu mẫu làm tên thư mục và toàn bộ chương trình đã bị sập và không hoạt động. Vì vậy, nó bắt buộc là bạn gọi các mẫu thư mục. Trong thư mục Mẫu này, hãy tạo tệp index.html với mã HTML của bạn. Sau đó, sử dụng render_template () và vượt qua index index.html, làm đối số. Bây giờ, nếu bạn chạy Flask Flask Run trong thiết bị đầu cuối, mã HTML của bạn sẽ được hiển thị: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:

Mã HTML của tôi (index.html) cho thời điểm như sau:html code (index.html) for the moment is as follows:

& nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; Trang này sẽ chứa sơ yếu lý lịch của tôiDOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kalyani's Resume


    Kalyani's Resume     This page will contain my resume Và, mã tệp Python của tôi (Main.py) như sau:Từ bình Nhập bình, Render_Template flask import Flask, render_template (adsbygoogle = window.adsbygoogle || []).push({}); Ứng dụng = Flask (__ name__)= Flask(__name__) @app.route('/')app.route('/') chỉ số def (): & nbsp; & nbsp; Trở về "Hello World" index():     return render_template("index.html") Nếu "__ Tên __" == "__ main__": & nbsp; & nbsp; app.run (DEBUG = TRUE) "__name__" == "__main__":     app.run(debug=True)Tiếp theo, trong thiết bị đầu cuối của pycharm, hãy nhập các loại sau (trong đó tên của tệp python của tôi là chính. Đặt flask_app = main.py $ env: flask_app = "main.py" flask chạy

Khi bạn chạy Flask Flask Run, thiết bị đầu cuối sẽ tặc một URL bằng một cổng. URL này: Cổng là nơi trang web được tải. Bạn luôn có thể nhấn Control + C để thoát. Trong trường hợp của tôi, nó nói rằng chạy trên http://127.0.0.1:5000/ (nhấn Ctrl+C để thoát). Vì vậy, hãy mở trình duyệt web của bạn, và sao chép và dán URL đã cho. Trong trường hợp của tôi, tôi đã sao chép và dán bản http://127.0.0.1:5000/. Cũng xin lưu ý rằng các dòng trước phải được chạy mỗi khi bạn khởi động lại pycharm để nó hoạt động:

Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

Bước #2: Thêm HTML

Điều đầu tiên bạn cần làm là mở thư mục nơi đặt tập lệnh Python và tạo một thư mục có tên là Mẫu mẫu. Khi tôi lần đầu tiên chạy cái này, tôi đã thử đặt tên Mẫu mẫu làm tên thư mục và toàn bộ chương trình đã bị sập và không hoạt động. Vì vậy, nó bắt buộc là bạn gọi các mẫu thư mục. Trong thư mục Mẫu này, hãy tạo tệp index.html với mã HTML của bạn. Sau đó, sử dụng render_template () và vượt qua index index.html, làm đối số. Bây giờ, nếu bạn chạy Flask Flask Run trong thiết bị đầu cuối, mã HTML của bạn sẽ được hiển thị:{
    margin:0;
    color: #333
    font-family: verdana;
    font-size: 20px;
    background-color: rgb(201, 76, 76);
}
.styled {
    background-color: #92a8d1;
    font-family: verdana;
    font-size: 20px;
}

Mã HTML của tôi (index.html) cho thời điểm như sau:lt;link rel=”stylesheet” type=”text/css” href=”{{ url_for(‘static’, filename=’main.css’)}}”> in the head of the HTML file. Here, the filename is the name of the CSS file (mine is main.css). If for instance the “main.css” is located with a sub-folder called “css”, then you’d write the following:

& nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; Trang này sẽ chứa sơ yếu lý lịch của tôilink rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css')}}">.

Và, mã tệp Python của tôi (Main.py) như sau:

Từ bình Nhập bình, Render_Template

chỉ số def (): & nbsp; & nbsp; trả về render_template ("index.html")DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kalyani's Resume
   

Cái sau sẽ hiển thị một trang HTML đơn giản.
    Kalyani'

Bước #3: Thêm CSS
    This page will contain my resume
</h2>
</body>
</html>

Bây giờ, tôi muốn thêm CSS vào HTML của mình. Để thực hiện việc này, hãy tạo một thư mục có tên là Static Static và tạo một tệp có tên là Main Main.css. Ở đây, tên của tệp CSS thực tế có thể là bất cứ điều gì. Tôi đã quyết định gọi cho tôi là Main Main.css. Tuy nhiên, tên của thư mục phải là tĩnh tĩnh! Trên thực tế, trong thư mục tĩnh tĩnh, người ta có thể đặt bất cứ thứ gì tĩnh, chẳng hạn như CSS, JavaScript và hình ảnh. Vì vậy, nếu bạn sẽ đặt hình ảnh, JavaScript và CSS, bạn có thể muốn tạo các bộ phụ.

Từ bình Nhập bình, Render_Template flask import Flask, render_template

Ứng dụng = Flask (__ name__)= Flask(__name__)

@app.route('/')app.route('/')

chỉ số def (): & nbsp; & nbsp; Trở về "Hello World" index():
    return render_template("index.html")

Nếu "__ Tên __" == "__ main__": & nbsp; & nbsp; app.run (DEBUG = TRUE) "__name__" == "__main__":
    app.run(debug=True)

Tiếp theo, trong thiết bị đầu cuối của pycharm, hãy nhập các loại sau (trong đó tên của tệp python của tôi là chính.

Đặt flask_app = main.py $ env: flask_app = "main.py" flask chạy

Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

Mã HTML sẽ trông như sau:

& nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; trang này sẽ chứa sơ yếu lý lịch của tôiDOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kalyani's Resume
   


Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

    Kalyani's Resume  This page will contain my resume Ngoài ra, người ta cũng có thể sử dụng những điều sau:.img src="{{ url_for('static', filename='images/kalyani.jpg')}}" height="200" />.Trong trường hợp này, mã HTML sẽ trông như thế này: & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani Trang này sẽ chứa sơ yếu lý lịch của tôiDOCTYPE html>         Kalyani's Resume         Kalyani's Resume This page will contain my resume Bước #5: Thêm JavaScript

Có hai cách bạn có thể thêm JavaScript. Trong bản demo đầu tiên này, tôi sẽ tạo một nút. Khi nhấn nút, nó sẽ kích hoạt một hàm gọi là myfunction () sẽ là javascript (tìm thấy trong thẻ). Đối với điều này, thiết lập nút. Sau đó, thiết lập một thẻ tập lệnh ở đầu mã HTML và trong đó, xác định một hàm. Trong trường hợp của tôi, tôi đã xác định một hàm sẽ thêm toàn bộ sơ yếu lý lịch của Google vào một phần tử P khi nhấp vào nút.

Bạn có thể thêm nó vào tệp index.html như sau:

& nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp;DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kalyani's Resume
   

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hàm myFunction () {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ("para"). Internhtml = "toàn bộ sơ yếu lý lịch"; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; Kalyani '
            document.getElementById("para").innerHTML = "WHOLE RESUME";
        }
   


Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

    Kalyani'S Lesume Trang này sẽ chứa sơ yếu lý lịch của tôi This page will contain my resume         Kalyani's Resume                 Kalyani's Resume This page will contain my resume Click to see Resume Ngoài ra, bạn cũng có thể sử dụng điều này:. Cái sau sẽ tạo mã HTML này:. The latter would generate this HTML code: & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp;DOCTYPE html>         Kalyani's Resume     & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hàm myFunction () {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; document.getEuityById ("para"). Internhtml = "toàn bộ sơ yếu lý lịch"; & nbsp; & nbsp; & nbsp; & nbsp; } & nbsp; & nbsp; & nbsp; & nbsp; Kalyani 'S Lesume Trang này sẽ chứa sơ yếu lý lịch của tôi', filename='javascript/javascript.js')}}">     Tuy nhiên, trong hầu hết các trường hợp, các tệp JavaScript có xu hướng tự mình là tài liệu chứ không phải một lớp lót. Trong những trường hợp như vậy, chúng tôi có một tệp .js mà chúng tôi phải liên kết. Trong trường hợp của tôi, tôi đã viết:. Vì vậy, giống như tệp hình ảnh, chúng tôi liên kết tệp JS như sau:     Kalyani's Resume This page will contain my resume Click to see Resume & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Sơ yếu lý lịch của Kalyani Trang này sẽ chứa sơ yếu lý lịch của tôi bấm vào để xem sơ yếu lý lịch

Ngoài ra, bạn cũng có thể sử dụng điều này:. Cái sau sẽ tạo mã HTML này:

& nbsp; & nbsp;

Hướng dẫn create simple web page using python - tạo trang web đơn giản bằng python

tĩnh ', fileName =' javascript/javascript.js ')}} "> & nbsp; & nbsp; s Resume

Tôi có thể sử dụng Python để tạo một trang web không?

Ngôn ngữ lập trình Python có thể được sử dụng để tạo ra rất nhiều loại thứ khác nhau, bao gồm cả các trang web.Làm cho các trang web có Python dễ dàng hơn hầu hết mọi người nghĩ vì thực tế là ngôn ngữ này sử dụng một thứ gọi là khung.. Making websites with Python is easier than most people think because of the fact that this language makes use of something called “frameworks.”

Làm cách nào để tạo một trang web đơn giản?

Thực hiện theo các bước bên dưới để tạo trang web đầu tiên của bạn với Notepad hoặc Textedit ...
Bước 1: Mở Notepad (PC) Windows 8 trở lên: ....
Bước 1: Mở Textedit (Mac) Mở Finder> Ứng dụng> Textedit.....
Bước 2: Viết một số HTML.....
Bước 3: Lưu trang HTML.....
Bước 4: Xem trang HTML trong trình duyệt của bạn ..

Bạn có thể tạo một trang web với Python và HTML không?

Nếu bạn quan tâm đến việc phát triển web với Python, thì việc biết HTML và CSS sẽ giúp bạn hiểu các khung web như Django và Flask tốt hơn.Nhưng ngay cả khi bạn mới bắt đầu với Python, HTML và CSS cũng có thể cho phép bạn tạo các trang web nhỏ để gây ấn tượng với bạn bè.HTML and CSS can enable you to create small websites to impress your friends.