Primeras páginas en PHP

Estructura de una página PHP: fragmentos PHP y fragmentos HTML

Una página PHP es un archivo de texto que contiene uno o varios fragmentos de código PHP y que también puede contener fragmentos de código HTML.

Los fragmentos de código PHP están delimitados por las etiquetas <?php (etiqueta inicial) y ?> (etiqueta final). PHP puede configurarse para poder utilizar otras etiquetas delimitadoras (como <? ... ?> o <% ... %>), pero se recomienda utilizar exclusivamente <?php ... ?>.

Los fragmentos de código HTML no están delimitados, en una página PHP todo lo que no son fragmentos PHP son fragmentos HTML.

Cuando un navegador solicita una página PHP a un servidor, el servidor lee el archivo secuencialmente y va generando el resultado:

• si la página contiene fragmentos HTML, el código HTML se incluye sin modificados en el resultado.
• si la página contiene fragmentos PHP, se ejecutan las instrucciones que se encuentran en los fragmentos de código PHP. Si esas instrucciones generan texto, el texto se incluye en el resultado.

Cuando el servidor termina de leer el archivo, el servidor envía al navegador el resultado.

Es importante señalar que:

• El navegador recibe una página web (es decir, únicamente código HTML), no recibe código PHP.
• Los fragmentos PHP tiene que generar las etiquetas HTML que se necesiten para una correcta visualización de la página web en el navegador.
• El navegador no puede distinguir en la página recibida, qué parte ha sido generada en un fragmento PHP y qué parte se encontraba ya en un fragmento HTML.
• Como la página PHP se lee secuencialmente, el código HTML generado por los fragmentos PHP y el incluido en los fragmentos HTML se encuentran en el mismo orden en que se encontraban los fragmentos en la página PHP.

El ejemplo siguiente muestra un documento PHP que contiene un único fragmento PHP que genera un párrafo:

<?php
print "<p>Hola</p>";
?>

En un fragmento PHP no pueden escribirse etiquetas HTML sueltas; el código HTML debe generarse siempre con instrucciones de PHP. El programa siguiente no puede ni siquiera ejecutarse y produce un error de sintaxis:

<?php
<p>Hola</p>
?>

En una misma página PHP pueden alternarse fragmentos PHP y fragmentos HTML. Los dos ejemplos siguientes generan el mismo código HTML.

<p>
<?php
print "Hola";
?>
</p>

<?php
print "<p>";
?>
Hola
<?php
print "</p>";
?>

Si en una misma página hay varios fragmentos PHP, se tratan como un único programa.

<?php
$saludo = "Hola";         // Se define una variable
print "<p>$saludo</p>";   // Se escribe el valor de la variable
?>

<?php
$saludo = "Hola";         // Se define una variable 
?>
<p>
<?php
print "$saludo";         // Se escribe el valor de la variable
?>
</p>

Volver al principio de la página

Comentarios en páginas PHP

En un fragmento PHP se pueden comentar líneas de código utilizando:

• // para comentar el resto de la línea (como en C++)
• # para comentar el resto de la línea (como en la shell de Unix o en Perl)
• /* */ para delimitar varias líneas (como en C)

Estos comentarios no se añaden al código HTML generado por la página, por lo que no pueden verse en el navegador.

<p><strong>
<?php
// La instrucción print escribe texto en la página web
print "Hola"; // El comentario se puede escribir al final de la línea
?>
</strong></p>

<p><strong>
<?php
# La instrucción print escribe texto en la página web
print "Hola"; # El comentario se puede escribir al final de la línea
?>
</strong></p>

<?php
print "<p><strong>";
/* Dentro de un fragmento PHP no se pueden escribir
   etiquetas html sueltas, tienen que estar siempre
   incluidas en instrucciones print 
*/
?>
Hola
<?php
print "</strong></p>";
?>

Si se quieren escribir comentarios en los fragmentos HTML, hay que utilizar la etiqueta de comentarios de HTML <!-- .... -->.

Estos comentarios, como todo el código HTML situado en los fragmentos HTML, se incluyen sin modificaciones en el resultado, por lo que pueden verse en el navegador.

<p>
<?php
print "Hola";
?>
</p>
<!-- El texto anterior ha sido generado por PHP -->

Si se quieren escribir comentarios en las hojas de estilo CSS, hay que utilizar la etiqueta de comentarios de C /* .... */.

Estos comentarios, como todo el código CSS situado en las hojas de estilo, se incluyen sin modificaciones en el resultado, por lo que pueden verse en el navegador.

html {
  background-color: #FF0000; /* #FF000000 es rojo */
}

html {

  background-color: #FF0000; /* #FF000000 es rojo */

}

Volver al principio de la página

Código HTML de páginas XHTML 1.0 Strict válidas

Si queremos crear páginas válidas HTML debemos generar código HTML válido, es decir, generar todas las etiquetas HTML necesarias. En este curso se generarán páginas XHTML 1.0 Strict.

El ejemplo siguiente muestra el código html de una página web XHTML 1.0 Strict válida con las líneas numeradas.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>Página válida XHTML 1.0 Strict</title>
</head>

<body>
  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>
</body>
</html>

• La etiqueta <?xml ... ?> (línea 1) es una etiqueta opcional, pero recomendada. No es una etiqueta XHTML, sino una declaración XML que indica el juego de caracteres que se va a utilizar en el resto del documento.
• La etiqueta <!DOCTYPE ... > (líneas 2 y 3) sí que es obligatoria. Esta etiqueta indica el tipo de documento (DOCTYPE) de la página. Puesto que existen varias versiones de HTML y XHTML (y cada versión permite unas etiquetas diferentes), el navegador necesita saber a qué versión corresponde la página. La etiqueta contiene la dirección web de la dtd (definición de tipo de documento) que especifica la versión del lenguaje de marcas utilizado en el documento (cuál es la estructura, qué etiquetas existen y qué atributos pueden tener).
• La etiqueta <html> ... </html> (líneas 4 a 13) engloba todo el documento html. El atributo xmlns especifica el espacio de nombres del documento. Los espacios de nombres sirven para resolver el problema que aparece cuando en un mismo documento se utilizan etiquetas de distintos lengujes de marcas, en los que pueden coincidir algunos nombres. El espacio de nombres es como el "apellido" de la etiqueta.
  El documento html se divide a su vez en dos partes, la cabecera (<head> ... </head>, líneas 5 a 8) y el cuerpo (<body> ... </body> , líneas 10 a 12).
  • La cabecera <head> ... </head> (líneas 5 a 8) contiene información de identificación y control que en general no se muestra en la ventana del navegador, aunque puede afectar a la presentación (por ejemplo, los enlaces a hojas de estilo).
    • Las etiquetas <meta /> están pensadas para proporcionar información sobre el documento a los programas que analicen la página.
      La línea 6 del ejemplo informa del juego de caracteres empleado en la página. Existen otros tipo de <meta /> . Por ejemplo, la etiqueta <meta name="keywords contents="palabras, más palabras, etc." /> está pensada para que los buscadores sepan de qué va la página (por desgracia, se ha abusado mucho de esta etiqueta así que los buscadores no la toman prácticamente en cuenta).
    • La etiqueta de título <title> ... </title> (línea 7) contiene el texto que se muestra en la barra de título de la ventana del navegador.
      La etiqueta title es obligatoria y debe incluirse en todas las páginas web.
  • El cuerpo (<body> .... </body>, líneas 10 a 12) contiene lo que se verá en la ventana del navegador. En el ejemplo, contiene un único párrafo
    • La etiqueta de párrafo <p> ... </p> contiene el texto que se muestra en la ventana del navegador
      

Volver al principio de la página

Generar el código HTML de páginas XHTML 1.0 Strict válidas

La página PHP debe incluir o generar todo el código HTML necesario. El ejemplo siguiente genera una página válida mediante un único fragmento PHP.

Nota: Dentro de la cadena todas las comillas están precedidas del carácter \.

<?php
print "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"
      \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
  <meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\" />
  <title>Página válida XHTML 1.0 Strict</title>
</head>

<body>
  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>
</body>
</html>";
?>

En principio, el mismo código html podría generarse combinando fragmentos PHP y fragmentos HTML, como en el siguiente ejemplo con dos fragmentos PHP y tres fragmentos HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php
print "  <title>Página válida XHTML 1.0 Strict</title>\n";
?>
</head>

<body>
<?php
print "  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>\n";
?>
</body>
</html>

Nota: El carácter \n incluido en los print es para generar un salto de línea en el código HTML.

El problema de este código es la primera línea (la declaración xml). Si en la configuración de php, la directiva short_open_tags está establecida en On, el intérprete PHP intentará procesar la primera línea como código PHP, generando un error.

La solución es generar la primera línea en un fragmento PHP, como en el ejemplo siguiente (el fragmento PHP ocupa una sola línea para ahorrar espacio):

<?php print "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php
print "  <title>Página válida XHTML 1.0 Strict</title>\n";
?>
</head>

<body>
<?php
print "  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>\n";
?>
</body>
</html>

Enlaces a hojas de estilo

Una página PHP puede enlazar a una hoja de estilo CSS exactamente igual que una página HTML, es decir, enlazando a la hoja de estilo mediante la etiqueta <link>.

Los siguientes ejemplos muestran el enlace a la hoja de estilo incluido en un fragmento HTML o generado por un fragmento PHP:

<?php print "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <link href="estilo.css" rel="stylesheet" type="text/css" title="Hoja de estilo" />
<?php
print "  <title>Página válida XHTML 1.0 Strict</title>\n";
?>
</head>

<body>
<?php
print "  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>\n";
?>
</body>
</html>

<?php print "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php
print "  <link href="estilo.css" rel="stylesheet" type="text/css" title="Hoja de estilo" />\n";
print "  <title>Página válida XHTML 1.0 Strict</title>\n";
?>
</head>

<body>
<?php
print "  <p>El código HTML de esta página es XHTML 1.0 Strict válido</p>\n";
?>
</body>
</html>

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.