Construya un sitio web con Python

Pilar Alemán
Construya un sitio web con Python
Flask es un marco de desarrollo web. Con Python, hay dos módulos que uno puede usar para el desarrollo web: Django y Flask. Sin embargo, Flask es más liviano y más fácil de aprender. En este tutorial, construiremos un sitio web muy simple usando el módulo frascos de Python.

Para empezar, instale el matraz:

Frasco de instalación de PIP

Paso #1: Aplicación web mínima

La aplicación mínima se puede encontrar en https: // frask.Palletsprojects.com/en/2.0.X/QuickStart/#A-Minimal-Application. Esta es una página web que muestra "Hello World". Lo primero que hicimos fue crear una instancia de Flask () con "__name__" como argumento. El decorador de ruta se utiliza para informar a Flask la URL que activará la función que escribimos.

de Flask Import Flask
App = Flask (__ Nombre__)
@App.ruta('/')
índice def ()::
regresa "Hola mundo"
Si "__name__" == "__main__":
aplicación.run (debug = true)

A continuación, en la terminal de Pycharm, escriba lo siguiente (donde el nombre de mi archivo Python es principal.py; En su caso, reemplace principal.Py con el nombre de archivo de tu python):

Establecer frasco_app = principal.py
$ env: frask_app = "principal.py "
frasco

Una vez que ejecute "Flask Run", la terminal arrojará una URL con un puerto. Esta URL: el puerto es donde se carga la página web. Siempre puedes presionar el control + c para dejar de fumar. En mi caso, dice "Ejecutando en http: // 127.0.0.1: 5000/ (presione Ctrl+C para dejar de fumar) ". Entonces, abra su navegador web y copie y pegue la URL dada. En mi caso, copié y pegé "http: // 127.0.0.1: 5000/". Tenga en cuenta también que las líneas anteriores deben ejecutarse cada vez que reinicie PyCharm para que funcione:

Paso #2: Agregar html

Lo primero que deberá hacer es abrir la carpeta donde se encuentra el script de Python y crear una carpeta llamada "plantillas". Cuando ejecuté esto por primera vez, intenté poner el nombre "plantilla" como el nombre de la carpeta, y todo el programa se bloqueó y no funcionó. Entonces, es imperativo que llames a la carpeta "plantillas". Dentro de esta carpeta "plantillas", cree un índice.Archivo HTML con su código HTML. Luego, use render_template () y pase “índice.html ”como argumento. Ahora, si ejecuta "Flask Run" en el terminal, su código HTML debe representarse:

Mi Código HTML (índice.html) Por el momento es el siguiente:





Currículum de Kalyani



Currículum de Kalyani
Esta página contendrá mi currículum



Y mi código de archivo de python (principal.py) es el siguiente:

de Flask Import Flask, render_template
App = Flask (__ Nombre__)
@App.ruta('/')
índice def ()::
return render_template ("índice.html ")
Si "__name__" == "__main__":
aplicación.run (debug = true)

Este último representará una página HTML simple.

Paso #3: Agregar CSS

Ahora, quiero agregar CSS a mi HTML. Para hacer esto, cree una carpeta llamada "estática" y cree un archivo llamado "Main.CSS ". Aquí, el nombre del archivo CSS real puede ser cualquier cosa. He decidido llamar a la mía "Main.CSS ". Sin embargo, el nombre de la carpeta debe ser "estático"! De hecho, en la carpeta "estática", se puede colocar todo lo que sea estático, como CSS, JavaScript e Imágenes. Entonces, si vas a poner imágenes, JavaScript y CSS, es posible que desee crear subcarpetas.

Primero, escribamos el CSS (principal.css) quiero:

cuerpo
margen: 0;
Color: #333
Font-Family: Verdana;
tamaño de fuente: 20px;
Color de fondo: RGB (201, 76, 76);

.estilo
Color de fondo: #92A8D1;
Font-Family: Verdana;
tamaño de fuente: 20px;

Aquí, en el índice.html, necesitamos escribir ylt; link rel = ”stylesheet” type = ”text/css” href = ”url_for ('static', filename =" principal.CSS ")"> En el cabezal del archivo HTML. Aquí, el nombre de archivo es el nombre del archivo CSS (el mío es principal.CSS). Si, por ejemplo, el "principal.CSS "se encuentra con un subcarpeta llamado" CSS ", luego escribiría lo siguiente:

.

Después de eso, puede usar el CSS que ha creado. Por ejemplo, creé uno llamado "Styled", y lo usé en la clase H1.

Mi índice.El archivo HTML sería el siguiente:





Currículum de Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><h1><br>Currículum de Kalyani<br>Esta página contendrá mi currículum<br></h1><br></body><br></html> <p>El archivo principal de Python - principal.py - permanece igual.</p> de Flask Import Flask, render_template<br>App = Flask (__ Nombre__)<br>@App.ruta('/')<br>índice def ()::<br>return render_template ("índice.html ")<br>Si "__name__" == "__main__":<br>aplicación.run (debug = true) <p>Paso #4: Agregar una imagen</p> <p>Ahora, agregemos una imagen a la página HTML que creamos! Para esto, usamos la carpeta "estática" que creamos. Dentro de la carpeta "estática", creé otra carpeta llamada "Imágenes". Dentro de la carpeta de imágenes, coloqué una imagen. Ahora, agregemos la imagen al código HTML de la siguiente manera: . En este caso, establecí la altura de la imagen en 200, pero puede cambiarla a lo que desee y agregar CSS si lo desea. </p> <p>El código HTML se vería de la siguiente manera:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Currículum de Kalyani





Currículum de Kalyani


Esta página contendrá mi currículum

Alternativamente, también se puede usar lo siguiente:

.
[/cce_python]
En este caso, el código HTML se vería así:
[cc lang = "html" width = "100%" height = "100%" escapado = "true" thema = "Blackboard" Nowrap = "0"]




Currículum de Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><h1><br>Currículum de Kalyani<br></h1><br>Esta página contendrá mi currículum<br></body><br></html> <p>Paso #5: Agregar JavaScript</p> <p>Hay dos formas en que puede agregar JavaScript. En esta primera demostración, crearé un botón. Cuando se presiona el botón, activaría una función llamada myFunction () que será JavaScript (que se encuentra en la etiqueta). Para esto, configure el botón. Luego, configure una etiqueta de script en la cabeza del código HTML y dentro de ella, defina una función. En mi caso, he definido una función que agregará el "currículum completo" a un elemento P al hacer clic en el botón. </p> <p>Puede agregarlo al índice.archivo html de la siguiente manera:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Currículum de Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br>función myFunction () <br>documento.getElementById ("para").innerhtml = "currículum completo";<br><br><br><br><br><br><h1><br>Currículum de Kalyani<br></h1><br>Esta página contendrá mi currículum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Haga clic para ver el currículum </button><br></body><br></html> <p>Sin embargo, en la mayoría de los casos, los archivos de JavaScript tienden a ser documentos mismos, y no uno de los revestimientos. En tales casos, tendríamos un .archivo js que tenemos que vincular. En mi caso, escribiría: . Entonces, al igual que el archivo de imagen, vinculamos el archivo JS de la siguiente manera:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Currículum de Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br><br><br><br><br><br><h1><br>Currículum de Kalyani<br></h1><br>Esta página contendrá mi currículum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Haga clic para ver el currículum </button><br></body><br></html> <p>Alternativamente, también puede usar esto: . Este último generaría este código HTML:</p> <br><html lang="en"><br><head><br><meta charset="UTF-8"><br><title>Currículum de Kalyani<br><link rel="stylesheet" type="text/css" href=" url_for('static', filename='main.css')"><br>><script src=" url_for('static', filename='javascript/javascript.js')"<br><br><br><br><br><h1><br>Currículum de Kalyani<br></h1><br>Esta página contendrá mi currículum<br><br><br><br><br><br><button type="button" onclick="myFunction()"> Haga clic para ver el currículum </button><br></body><br></html> <p>Conclusión </p> <p>Flask es un marco micro que es fácil de usar y excelente para principiantes. En particular, la documentación en sí es excelente, y se puede encontrar en https: // frask.Palletsprojects.com/en/2.0.X/QuickStart/#Static-Files. En este tutorial, aprendimos a construir un sitio web simple, agregar CSS, agregar imágenes y agregar JavaScript al sitio web utilizando el módulo Flask de Python. Esperamos que haya encontrado útil este artículo y consulte Linux Sugerencia para obtener más artículos informativos. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://es.cyberaxe.org/article/array-every-method-in-javascript">« Matriz cada método en JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://es.cyberaxe.org/article/when-to-use-ethernet-loopback-plug">Cuándo usar el enchufe de bucle de Ethernet? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/wireshark">Wireshark</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/understanding-dhcp-using-wireshark">Comprender DHCP usando Wireshark</a> </div> <div class="white-news__text"> Tutorial sobre algunos intercambios de cuadros básicos sobre el protocolo DHCP y sus campos importan... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/mariana-cotto">Mariana Cotto</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/what-is-b-string-in-python">¿Qué es la cuerda B en Python??</a> </div> <div class="white-news__text"> En Python, la notación B al lado de la cadena regular y el método encode () se usa para convertir la... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a> </div> <div class="white-news__name"> <a href="http://es.cyberaxe.org/article/how-to-use-long-keyword-in-c">Cómo usar la palabra clave larga en C#</a> </div> <div class="white-news__text"> La palabra clave larga en C# puede definir una variable que puede contener un valor entero firmado e... </div> <div class="white-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/python-list-to-comma-separated-string">Lista de Python a una cadena separada por comas</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/python-count-occurrences-in-list">Python Counted en la lista</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/python">Pitón</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/python-os-mkdir">Python OS Mkdir</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jose-luis-villagomez">José Luis Villagómez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-are-expressions--statements-and-blocks-in-java">¿Qué son las expresiones, declaraciones y bloques en Java?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-aleman">Pilar Alemán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-aws-batch-and-lambda">¿Cuál es la diferencia entre AWS Batch y Lambda??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/mayte-mesa">Mayte Mesa</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/docker">Estibador</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-are-the-steps-to-deploy-a-nginx-image-using-docker">¿Cuáles son los pasos para implementar una imagen Nginx usando Docker?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/pilar-melgar">Pilar Melgar</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-the-difference-between-oracle-virtualbox-and-vmware">¿Cuál es la diferencia entre Oracle Virtualbox y VMware??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/beatriz-enriquez">Beatriz Enríquez</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/how-to-count-the-number-of-words-in-a-string-using-java">Cómo contar el número de palabras en una cadena usando Java?</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/what-is-subnet-on-aws-vpc-and-how-to-use-it">¿Qué es la subred en AWS VPC y cómo usarlo??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/carolina-guzman">Carolina Guzmán</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://es.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://es.cyberaxe.org/article/why-should-i-use-aws-organizations">¿Por qué debería usar organizaciones de AWS??</a> </div> <div class="header-news__author"> <a href="http://es.cyberaxe.org/author/jacobo-pina">Jacobo Piña</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sitio sobre el sistema operativo Linux. Aquí encontrará muchos artículos interesantes y guías útiles</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/python">Pitón</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/windows-os">OS de Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://es.cyberaxe.org/category/docker">Estibador</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/c-sharp">c agudo</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/r">Riñonal</a></li> <li class="menu-item"><a href="http://es.cyberaxe.org/category/oracle-database">Base de datos Oracle</a></li> </li> <li class="menu-item"><a href="http://es.cyberaxe.org/all-categories"><b>Todas las categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>