7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. PHP

Cómo usar PHP en HTML

Scroll to top
Read Time: 8 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

En este artículo te enseñaré cómo usar código PHP en tus páginas HTML. Esta dirigido a principiantes de PHP que estén intentando fortalecer su control sobre el lenguaje de scripting del lado del servidor más popular del mundo.

Reiterando, PHP es un lenguaje de scripting del lado del servidor. Esto significa que un script de PHP se ejecuta en el servidor, la salida se genera en el servidor, y el resultado se envía como HTML al navegador del cliente para ser desplegado. Es natural mezclar PHP y HTML en un script, pero como principiante es difícil saber cómo combinar el código PHP con el código HTML.

Hoy vamos a discutir un par de formas diferentes de entre las que puedes elegir cuando quieres usar PHP en HTML. Voy a suponer que tienes una instalación funcional de PHP para poder ejecutar los ejemplos proporcionados en este artículo.

Diferentes formas de combinar PHP y HTML

En términos generales, cuando se trata de usar PHP en HTML existen dos enfoques diferentes. El primero es incrustar el código PHP en tu archivo HTML en sí con la extensión .html — para esto se requiere una consideración especial que discutiremos en un momento. La otra opción, que es la forma preferida, es combinar las etiquetas de PHP y HTML en archivos .php.

Ya que PHP es un lenguaje de scripting del lado del servidor, el código se interpreta y ejecuta del lado del servidor. Por ejemplo, si agregas el siguiente código a tu archivo index.html, este no se ejecutará correctamente de manera inmediata.

En primer lugar, no te preocupes si no has visto con anterioridad este tipo de código de PHP y HTML mezclados, ya que lo discutiremos a detalle a lo largo de este artículo. El ejemplo anterior muestra el siguiente resultado en tu navegador:

Entonces, como puedes ver, las etiquetas PHP de tu documento .html no son detectadas de forma predeterminada, y simplemente son consideradas como texto sin formato que se muestra sin ser analizado. Eso se debe a que el servidor usualmente se configura para ejecutar PHP solamente en los archivos con la extensión .php.

Si quieres ejecutar tus archivos HTML como PHP, puedes indicarle a tu servidor que ejecute tus archivos .html como archivos PHP, pero una idea mucho mejor es colocar tu código PHP y HTML mezclado en un archivo con la extensión .php.

Eso es lo que te enseñaré en este tutorial.

Cómo agregar etiquetas de PHP en tu página HTML

Cuando se trata de integrar código PHP con contenido HTML, debes encerrar el código PHP con la etiqueta de inicio <?php y la etiqueta de cierre ?> de PHP. El código envuelto entre estas dos etiquetas se considera código PHP y, por lo tanto, será ejecutado en el lado del servidor antes de que el archivo solicitado se envíe al navegador del cliente.

Veamos un ejemplo muy sencillo que muestra un mensaje usando código PHP. Crea el archivo index.php con el siguiente contenido dentro de la raíz de tu documento.

Lo importante en el ejemplo anterior es que el código PHP está envuelto por las etiquetas de PHP.

El resultado del ejemplo anterior se ve así:

Example OutputExample OutputExample Output

Y, si observas el código fuente de la página, este debería verse así:

page source codepage source codepage source code

Como puedes ver, el código PHP se analiza y ejecuta del lado del servidor, y se mezcla con HTML antes de que la página sea enviada al navegador del cliente.

Echemos un vistazo a otro ejemplo:

Esto generará la fecha y hora actuales, así que puedes usar código PHP entre las etiquetas HTML para producir una salida dinámica desde el servidor. Es importante recordar que, cada vez que la página se ejecute del lado del servidor, todo el código entre las etiquetas <?php y ?> será interpretado como PHP, y la salida será incrustada con las etiquetas HTML.

De hecho hay otra manera en la que podrías escribir el ejemplo anterior, como se muestra en el siguiente fragmento de código.

En el ejemplo anterior hemos usado la función de concatenación de PHP, que nos permite unir diferentes cadenas en una sola. Y, finalmente, hemos usado la construcción echo para mostrar la cadena concatenada.

El resultado es el mismo independientemente del método que uses, como se muestra en la siguiente captura de pantalla.

Text output of the PHP codeText output of the PHP codeText output of the PHP code

Y eso trae consigo otra pregunta: ¿cuál es la mejor manera? ¿deberías usar la función de concatenación o insertar etiquetas PHP separadas entre las etiquetas HTML? Yo diría que eso realmente depende — no existe una regla estricta que te obligue a utilizar uno de estos métodos. Personalmente, creo que el método de tener marcadores de posición es más legible comparándolo con el método de concatenación.

La estructura general de la página PHP combinada con código HTML y PHP debería verse de la siguiente forma:

En la siguiente sección veremos cómo puedes usar los bucles de PHP con HTML.

Cómo usar bucles de PHP en tu página HTML

Recorrer arreglos para producir contenido HTML es una de las tareas más comunes con las que te encontrarás al escribir scripts de PHP. En esta sección veremos cómo puedes recorrer un arreglo de elementos y generar una salida.

En la mayoría de los casos necesitarás mostrar el contenido de un arreglo que hayas llenado a partir de la base de datos u otras fuentes. Por simplicidad, en este ejemplo vamos a inicializar el arreglo con diferentes valores al inicio del propio script.

Continúa y crea un archivo PHP con el siguiente contenido.

En primer lugar, hemos inicializado el arreglo al comienzo de nuestro script. A continuación, hemos usado la construcción foreach para recorrer los valores del arreglo. Y finalmente hemos usado la construcción echo para mostrar el valor del elemento del arreglo.

Y la salida debería verse así:

Output showing a list of employeesOutput showing a list of employeesOutput showing a list of employees

El mismo ejemplo con un bucle while se ve de esta forma:

Y la salida será la misma. Así es como puedes usar los bucles foreach y while para generar contenido HTML en base a arreglos de PHP.

En la siguiente y última sección, veremos cómo puedes usar la sintaxis de etiquetas cortas de PHP.

Cómo usar las etiquetas cortas de PHP

En los ejemplos que hemos discutido hasta ahora, hemos usado <?php como etiqueta de inicio en todos lados. De hecho, PHP viene con una variación, <?=, que puedes usar como una sintaxis abreviada cuando deseas mostrar una cadena o el valor de la variable.

Revisemos el ejemplo con la sintaxis abreviada que discutimos anteriormente.

Como puedes ver, podemos omitir las construcciones echo o print al desplegar un valor usando la sintaxis abreviada. La sintaxis abreviada es corta y legible cuando quieres mostrar algo con echo o print.

Estas son diferentes maneras que puedes usar para agregar PHP al contenido HTML. Como principiante, puedes aprender probando con diferentes maneras para hacer las cosas, ¡y esto es divertido también!

Conclusión

Hoy hablamos sobre la manera en la que puedes mezclar PHP y HTML para crear HTML dinámico. Discutimos diferentes métodos con un puñado de ejemplos para ver cómo funcionan las cosas.

No dudes en usar el canal mostrado a continuación para hacer preguntas si tienes dudas ¡y con gusto las responderé!

Los mejores scripts de PHP en CodeCanyon

Explora miles de los mejores scripts de PHP alguna vez creados en CodeCanyon. Con un pago único de bajo costo, puedes comprar uno de estos complementos de WordPress de alta calidad y mejorar la experiencia en tu sitio web para ti y tus visitantes.

Estos son algunos de los scripts de PHP mejor vendidos y más prometedores disponibles en CodeCanyon para 2020.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.